Bug 1767167 - Style improvements for PBM r=desktop-theme-reviewers,sfoster

This includes:
1. Fix "Download Firefox Focus" button :hover:active state
2. Make the fake caret visible in HCM
3. Fix the branding name to be visible in all HCM modes
4. Make the sections distinguishable from others in HCM
5. Fix the searchbox text to be visible when hovered, in HCM
6. Make the promo's X button look better and work in :hover:active state

Differential Revision: https://phabricator.services.mozilla.com/D145175
This commit is contained in:
Itiel 2022-05-05 23:02:37 +00:00
Родитель b5f81092ed
Коммит e137f3bbad
2 изменённых файлов: 25 добавлений и 22 удалений

Просмотреть файл

@ -68,7 +68,7 @@
<h1 id="promo-header"></h1> <h1 id="promo-header"></h1>
<p id="private-browsing-vpn-text" class="vpn-promo"></p> <p id="private-browsing-vpn-text" class="vpn-promo"></p>
<div class="promo-cta"> <div class="promo-cta">
<button id="private-browsing-vpn-link" class="vpn-promo button"></button> <button id="private-browsing-vpn-link" class="vpn-promo primary button"></button>
<div class="promo-image-small"> <div class="promo-image-small">
<img src="" alt="" /> <img src="" alt="" />
</div> </div>

Просмотреть файл

@ -71,13 +71,13 @@ p {
} }
.wordmark { .wordmark {
display: inline-block;
background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
background-size: 172px; background-size: 172px;
-moz-context-properties: fill;
display: inline-block;
fill: #fff;
height: 96px;
margin-inline-start: 15px; margin-inline-start: 15px;
-moz-context-properties: fill;
fill: currentColor;
height: 96px;
width: 172px; width: 172px;
} }
@ -187,8 +187,10 @@ p {
background-position-x: right 12px; background-position-x: right 12px;
} }
.search-inner-wrapper .search-handoff-button:hover { .search-inner-wrapper .search-handoff-button:hover,
.search-inner-wrapper .search-handoff-button:hover:active {
background-color: #fff; background-color: #fff;
color: inherit;
} }
.search-handoff-button.focused:not(.disabled) .fake-caret { .search-handoff-button.focused:not(.disabled) .fake-caret {
@ -225,7 +227,7 @@ p {
.fake-caret { .fake-caret {
animation: caret-animation 1.3s steps(5, start) infinite; animation: caret-animation 1.3s steps(5, start) infinite;
background: rgb(12, 12, 13); background-color: rgb(12, 12, 13);
display: none; display: none;
inset-inline-start: 47px; inset-inline-start: 47px;
height: 17px; height: 17px;
@ -234,6 +236,12 @@ p {
width: 1px; width: 1px;
} }
@media (prefers-contrast) {
.fake-caret {
background-color: ButtonText;
}
}
.search-banner { .search-banner {
width: 100%; width: 100%;
background-color: var(--in-content-banner-background); background-color: var(--in-content-banner-background);
@ -277,6 +285,7 @@ p {
background-position: left 32px top 20px; background-position: left 32px top 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 32px; background-size: 32px;
border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
letter-spacing: -0.2px; letter-spacing: -0.2px;
padding: 20px; padding: 20px;
@ -332,6 +341,7 @@ p {
.promo-visible { .promo-visible {
display: flex; display: flex;
border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
@ -351,11 +361,15 @@ p {
@media not (prefers-contrast) { @media not (prefers-contrast) {
.promo-dismiss { .promo-dismiss {
opacity: 0.5; opacity: 0.6;
} }
.promo-dismiss:hover { .promo-dismiss:hover {
background-color: var(--in-content-button-background) !important; background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.promo-dismiss:hover:active {
background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
} }
} }
@ -373,22 +387,11 @@ p {
align-items: center; align-items: center;
} }
.promo-cta .button { .promo-cta .primary.button {
text-decoration: none; padding-block: 11px;
padding: 11px 15px;
margin: 8px 0; margin: 8px 0;
appearance: button;
background-color: var(--in-content-primary-button-background);
color: var(--in-content-primary-button-text-color);
border-radius: 4px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
border: 1px solid var(--in-content-primary-button-background);
}
.promo-cta .button:hover {
background-color: var(--in-content-primary-button-background-hover);
color: var(--in-content-primary-button-text-color-hover);
} }
.promo.bottom .promo-cta { .promo.bottom .promo-cta {