diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index f2f8ba1f673b..0b397d679f3a 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -236,14 +236,6 @@ %include ../shared/urlbar-searchbar.inc.css -@media not (prefers-contrast) { - @supports -moz-bool-pref("browser.proton.urlbar.enabled") { - :root:not(:-moz-lwtheme) #urlbar:not([focused="true"]) { - --urlbar-box-bgcolor: white; - } - } /*** END proton ***/ -} - #urlbar, #searchbar { font-size: 1.25em; diff --git a/browser/themes/shared/browser-custom-colors.inc.css b/browser/themes/shared/browser-custom-colors.inc.css index b59689eb57ad..05ae224a5fb0 100644 --- a/browser/themes/shared/browser-custom-colors.inc.css +++ b/browser/themes/shared/browser-custom-colors.inc.css @@ -47,6 +47,7 @@ --autocomplete-popup-highlight-background: var(--arrowpanel-dimmed); --autocomplete-popup-highlight-color: rgb(21,20,26); --urlbar-result-hover-bgcolor: rgb(240,240,244); + --urlbar-box-unfocused-bgcolor: white; } } /** END Proton **/ } diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css index 9e6dafad70bc..a317f89b16d3 100644 --- a/browser/themes/shared/browser.inc.css +++ b/browser/themes/shared/browser.inc.css @@ -39,8 +39,7 @@ --identity-box-margin-inline: 4px; --identity-box-label-opacity: .8; --urlbar-box-bgcolor: var(--buttons-secondary-bgcolor); - --urlbar-box-hover-bgcolor: color-mix(in srgb, var(--urlbar-box-bgcolor), currentColor 12%); - --urlbar-box-active-bgcolor: color-mix(in srgb, var(--urlbar-box-bgcolor), currentColor 21%); + --urlbar-box-unfocused-bgcolor: var(--buttons-secondary-bgcolor); --urlbar-min-height: 32px; --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */ diff --git a/browser/themes/shared/compacttheme.inc.css b/browser/themes/shared/compacttheme.inc.css index 0e6ac191d285..4d2bcc2107c8 100644 --- a/browser/themes/shared/compacttheme.inc.css +++ b/browser/themes/shared/compacttheme.inc.css @@ -12,7 +12,7 @@ } @supports -moz-bool-pref("browser.proton.urlbar.enabled") { -#urlbar:not([focused="true"]) { - --urlbar-box-bgcolor: var(--lwt-toolbar-field-focus); +:root { + --urlbar-box-unfocused-bgcolor: var(--lwt-toolbar-field-focus); } } /** END Proton **/ diff --git a/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css index a97288b7e756..1f0b4222492c 100644 --- a/browser/themes/shared/identity-block/identity-block.inc.css +++ b/browser/themes/shared/identity-block/identity-block.inc.css @@ -129,19 +129,11 @@ background-color: var(--urlbar-box-bgcolor); } -#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]), -#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]), -#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) { - background-color: var(--urlbar-box-hover-bgcolor); -} - -#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active, -#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true], -#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active, -#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true], -#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active, -#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] { - background-color: var(--urlbar-box-active-bgcolor); +#urlbar:not([focused="true"]) #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#urlbar:not([focused="true"]) #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#urlbar:not([focused="true"]) #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, +#urlbar:not([focused="true"]) #urlbar-label-box { + background-color: var(--urlbar-box-unfocused-bgcolor); } } /*** END proton ***/ diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css index 447fd4c78600..2c8c1af0e7bd 100644 --- a/browser/themes/shared/urlbar-searchbar.inc.css +++ b/browser/themes/shared/urlbar-searchbar.inc.css @@ -595,6 +595,7 @@ border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); border-image-slice: 1; width: 1px; + height: calc(var(--urlbar-min-height) - 2px); visibility: hidden; } @@ -834,8 +835,6 @@ transition-property: background-color, mask-position-x, width, margin-inline-end; transition-timing-function: ease-in-out, ease-in-out, step-end, step-end; transition-duration: var(--cfr-animation-duration); - -moz-box-align: center; - margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2); } #cfr-label-container:-moz-locale-dir(rtl) { mask-position-x: calc(var(--cfr-label-width) * -1); @@ -904,17 +903,8 @@ font-size: .8em; padding: 0 8px; border-radius: 1em; - background-color: var(--urlbar-box-bgcolor); - margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 18px) / 2); - overflow: hidden; -} - -#urlbar-zoom-button:hover { - background-color: var(--urlbar-box-hover-bgcolor); -} - -#urlbar-zoom-button:hover:active { - background-color: var(--urlbar-box-active-bgcolor); + background-color: hsla(0,0%,0%,.05); + border: 1px solid hsla(210,4%,50%,.3); } @keyframes urlbar-zoom-reset-pulse { @@ -934,20 +924,21 @@ animation-duration: 250ms; } -@supports not -moz-bool-pref("browser.proton.urlbar.enabled") { -#urlbar-zoom-button { - background-color: hsla(0,0%,0%,.05); - border: 1px solid hsla(210,4%,50%,.3); -} - #urlbar-zoom-button:hover { - background-color: color-mix(in srgb, currentColor 10%, transparent); + background-color: hsla(0,0%,0%,.1); } #urlbar-zoom-button:hover:active { - background-color: color-mix(in srgb, currentColor 17%, transparent); + background-color: hsla(0,0%,0%,.15); +} + +:root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover { + background-color: rgba(255,255,255,.2); +} + +:root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover:active { + background-color: rgba(255,255,255,.3); } -} /*** END !proton ***/ #urlbar-zoom-button:-moz-focusring { outline: var(--toolbarbutton-focus-outline); diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 1c5c69090533..2d5ab9be0d63 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -531,14 +531,6 @@ menuitem.bookmark-item { %include ../shared/urlbar-searchbar.inc.css -@media not (prefers-contrast) { - @supports -moz-bool-pref("browser.proton.urlbar.enabled") { - :root:not(:-moz-lwtheme) #urlbar:not([focused="true"]) { - --urlbar-box-bgcolor: white; - } - } /*** END proton ***/ -} - #urlbar, #searchbar { font-size: 1.15em;