From def92d1b8e9d373e2f6f27c366d578d97d8960c6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 15 May 2024 05:34:50 +0200 Subject: Merging upstream version 126.0. Signed-off-by: Daniel Baumann --- .../themes/shared/addons/unified-extensions.css | 96 +++++++++++----------- browser/themes/shared/autocomplete.css | 34 ++++++++ browser/themes/shared/browser-custom-colors.css | 6 +- browser/themes/shared/browser-shared.css | 61 +++++++------- .../themes/shared/customizableui/customizeMode.css | 20 ++--- .../shared/customizableui/panelUI-shared.css | 10 +-- browser/themes/shared/downloads/progressmeter.css | 13 +-- .../themes/shared/formautofill-notification.css | 2 +- .../shared/formautofill/icon-address-edit.svg | 6 -- .../themes/shared/icons/circle-check-dotted.svg | 5 +- browser/themes/shared/icons/insights.svg | 6 ++ browser/themes/shared/jar.inc.mn | 2 +- browser/themes/shared/pageInfo.css | 15 +++- browser/themes/shared/preferences/preferences.css | 6 +- browser/themes/shared/preferences/privacy.css | 8 +- browser/themes/shared/preferences/translations.css | 62 +++++++++----- browser/themes/shared/tabs.css | 14 +--- browser/themes/shared/toolbarbutton-icons.css | 19 ++--- browser/themes/shared/toolbarbuttons.css | 2 +- browser/themes/shared/translations/panel.css | 27 +++++- browser/themes/shared/urlbar-searchbar.css | 42 +++++----- browser/themes/shared/urlbarView.css | 36 +++----- 22 files changed, 278 insertions(+), 214 deletions(-) delete mode 100644 browser/themes/shared/formautofill/icon-address-edit.svg create mode 100644 browser/themes/shared/icons/insights.svg (limited to 'browser/themes/shared') diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css index fd671e007d..06afeec3a7 100644 --- a/browser/themes/shared/addons/unified-extensions.css +++ b/browser/themes/shared/addons/unified-extensions.css @@ -10,7 +10,7 @@ --uei-button-hover-color: inherit; --uei-button-active-bgcolor: var(--panel-item-active-bgcolor); --uei-button-active-color: inherit; - --uei-button-attention-dot-color: var(--tab-attention-icon-color); + --uei-button-attention-dot-color: var(--attention-dot-color); } :root[uidensity="compact"] { @@ -179,56 +179,52 @@ unified-extensions-item > .subviewbutton { /* --- browser action CUI widget styles in the extensions panel --- */ @media (prefers-contrast) { - :root:not(:-moz-lwtheme) { + :root:not([lwtheme]) { --uei-button-attention-dot-color: ButtonText; - } - - .unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme), - .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) { - border-color: currentColor; - background-color: ButtonFace; - color: ButtonText; - --uei-button-hover-bgcolor: SelectedItem; - --uei-button-hover-color: SelectedItemText; - --uei-button-active-bgcolor: ButtonFace; - --uei-button-active-color: ButtonText; - } - - .unified-extensions-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) { - background-color: Canvas; - color: GrayText !important; /* override panelUI-shared.css */ - opacity: 1 !important; /* override panelUI-shared.css */ - } - - .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) { - --uei-button-attention-dot-color: ButtonFace; - } - - .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) { - --uei-button-attention-dot-color: ButtonText; - } - - .unified-extensions-item-message:not(:-moz-lwtheme) { - color: inherit; - } - - .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme), - .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) { - background-color: var(--uei-button-hover-bgcolor); - color: var(--uei-button-hover-color); - border-color: var(--uei-button-hover-bgcolor); - } - - .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme), - .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) { - background-color: var(--uei-button-active-bgcolor); - color: var(--uei-button-active-color); - border-color: var(--uei-button-active-color); - } - .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) { - /* The border would otherwise overlap with the focus outline, causing an - * unsightly anti-aliasing artifact */ - border-color: transparent; + .unified-extensions-item-action-button.subviewbutton:not([disabled]), + .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { + border-color: currentColor; + background-color: ButtonFace; + color: ButtonText; + --uei-button-hover-bgcolor: SelectedItem; + --uei-button-hover-color: SelectedItemText; + --uei-button-active-bgcolor: ButtonFace; + --uei-button-active-color: ButtonText; + } + + .unified-extensions-item-action-button[disabled].subviewbutton { + background-color: Canvas; + color: GrayText !important; /* override panelUI-shared.css */ + opacity: 1 !important; /* override panelUI-shared.css */ + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:active) { + --uei-button-attention-dot-color: ButtonFace; + } + + .unified-extensions-item-message { + color: inherit; + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled]), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled]), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + border-color: var(--uei-button-active-color); + } + + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon { + /* The border would otherwise overlap with the focus outline, causing an + * unsightly anti-aliasing artifact */ + border-color: transparent; + } } } diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css index 5230700e38..62c82897b7 100644 --- a/browser/themes/shared/autocomplete.css +++ b/browser/themes/shared/autocomplete.css @@ -126,6 +126,10 @@ padding-inline-start: 0; } + &[originaltype="action"] > .two-line-wrapper { + flex: 1; + } + &[originaltype="generatedPassword"] { &:not([collapsed="true"]) { /* Workaround bug 451997 and/or bug 492645 */ @@ -156,6 +160,36 @@ border-top: 1px solid hsla(210,4%,10%,.14); } + &[originaltype="action"] { + text-align: center; + } + + /* status items */ + > .ac-status { + padding: var(--space-xsmall) var(--space-small); + text-align: center; + background-color: var(--color-background-information); + width: 100%; + border-bottom: 1px solid rgba(38,38,38,.15); + font-size: calc(10 / 12 * 1em); + } + + &:has(> .ac-status) { + opacity: 1; + } + + &[originaltype="autofill"] > .two-line-wrapper { + display: grid; + grid-template-columns: 32px 1fr; + + > .ac-site-icon { + width: auto; + height: 16px; + max-width: 32px; + max-height: 16px; + } + } + /* Insecure field warning */ &[originaltype="insecureWarning"] { background-color: var(--arrowpanel-dimmed); diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css index d98d56690f..2318731274 100644 --- a/browser/themes/shared/browser-custom-colors.css +++ b/browser/themes/shared/browser-custom-colors.css @@ -5,7 +5,7 @@ @namespace html url("http://www.w3.org/1999/xhtml"); @media not (prefers-contrast) { - :root:not(:-moz-lwtheme) { + :root:not([lwtheme]) { --button-primary-bgcolor: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); --button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255)); --button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255)); @@ -47,8 +47,7 @@ --tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --tab-icon-overlay-stroke: light-dark(rgb(255, 255, 255), rgb(66, 65, 77)); --tab-icon-overlay-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); - --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189)); - --tabs-navbar-shadow-color: transparent; + --tabs-navbar-separator-style: none; --toolbox-non-lwt-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); --toolbox-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); @@ -88,5 +87,6 @@ --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)); --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --attention-dot-color: light-dark(#2ac3a2, #54ffbd); } } diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css index f708347193..276799c35f 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -18,6 +18,7 @@ @import url("chrome://browser/skin/places/editBookmarkPanel.css"); @import url("chrome://browser/skin/sidebar.css"); @import url("chrome://browser/skin/tabs.css"); +@import url("chrome://browser/content/tabpreview/tabpreview.css"); @import url("chrome://browser/skin/fullscreen/warning.css"); @import url("chrome://browser/skin/ctrlTab.css"); @import url("chrome://browser/skin/customizableui/customizeMode.css"); @@ -39,9 +40,8 @@ --toolbarbutton-border-radius: 4px; --chrome-content-separator-color: ThreeDShadow; - - --tabs-navbar-shadow-size: 1px; - --tabs-navbar-shadow-color: ThreeDShadow; + --tabs-navbar-separator-color: ThreeDShadow; + --tabs-navbar-separator-style: solid; --panelui-subview-transition-duration: 150ms; @@ -104,12 +104,13 @@ --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText; } - &:-moz-lwtheme { + &[lwtheme] { color: var(--lwt-text-color); --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); --chrome-content-separator-color: rgba(0,0,0,.3); - --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); + --tabs-navbar-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); + --attention-dot-color: light-dark(#2ac3a2, #54ffbd); @media not (prefers-contrast) { --focus-outline-color: light-dark(#0061E0, #00DDFF); @@ -139,21 +140,13 @@ @media (prefers-reduced-motion) { --inactive-window-transition: 0s; } - - @media (min-resolution: 1.5dppx) { - --tabs-navbar-shadow-size: 0.5px; - } - - @media (min-resolution: 3dppx) { - --tabs-navbar-shadow-size: 0.33px; - } } #navigator-toolbox { appearance: none; /* Toolbar / content area border */ - border-bottom: 1px solid var(--chrome-content-separator-color); + border-bottom: 0.01px solid var(--chrome-content-separator-color); background-color: var(--toolbox-non-lwt-bgcolor); color: var(--toolbox-non-lwt-textcolor); @@ -170,7 +163,7 @@ border-bottom-style: none; } - &:-moz-lwtheme { + :root[lwtheme] & { background-image: var(--lwt-additional-images); background-repeat: var(--lwt-background-tiling); background-position: var(--lwt-background-alignment); @@ -218,15 +211,19 @@ padding-inline-start: var(--toolbar-start-end-padding); } -:root[sessionrestored] #nav-bar:-moz-lwtheme { - transition: var(--ext-theme-background-transition); -} - -#nav-bar:not([tabs-hidden="true"]) { - /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed. - The animations use position:absolute and require a positioned #nav-bar. */ +#nav-bar { + /* The toolbar buttons that animate use position:absolute and require a + * positioned #nav-bar. */ position: relative; - box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color); + border-top: 0.01px var(--tabs-navbar-separator-style) var(--tabs-navbar-separator-color); + + &[tabs-hidden] { + border-top-style: none; + } + + :root[sessionrestored][lwtheme] & { + transition: var(--ext-theme-background-transition); + } } /* Bookmarks toolbar */ @@ -480,22 +477,22 @@ menupopup::part(drop-indicator) { color-scheme: var(--toolbar-color-scheme); border-top-color: var(--chrome-content-separator-color, ThreeDShadow); - &:-moz-lwtheme { + :root[lwtheme] & { background-color: var(--lwt-accent-color); background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); background-repeat: no-repeat, var(--lwt-background-tiling); background-position: right bottom, var(--lwt-background-alignment); background-position-y: bottom !important; + } - :root:not([lwtheme-image]) &:-moz-window-inactive { - background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); - } + :root[lwtheme]:not([lwtheme-image]) &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } - :root[lwtheme-image] & { - background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); - background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); - background-position: center, right bottom, var(--lwt-background-alignment); - } + :root[lwtheme-image] & { + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: center, right bottom, var(--lwt-background-alignment); } } diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css index b3ee1ada6c..a1bb6a62f9 100644 --- a/browser/themes/shared/customizableui/customizeMode.css +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -24,18 +24,18 @@ background-color: var(--toolbar-non-lwt-bgcolor); color: var(--toolbar-color); color-scheme: var(--toolbar-color-scheme); -} -#customization-container:-moz-lwtheme { - /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not - * semi-transparent */ - background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); -} + :root[lwtheme] & { + /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not + * semi-transparent */ + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); + } -:root[lwtheme-image] #customization-container { - background-image: none; - color: var(--toolbar-non-lwt-textcolor); - text-shadow: none; + :root[lwtheme-image] & { + background-image: none; + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; + } } :root[lwtheme-image] #customization-palette .toolbarbutton-1 { diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css index 51ab66b25a..07994d3233 100644 --- a/browser/themes/shared/customizableui/panelUI-shared.css +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -33,7 +33,7 @@ --panel-and-palette-icon-size: 16px; - &:not(:-moz-lwtheme) { + &:not([lwtheme]) { --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); } @@ -1655,13 +1655,13 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } #protections-popup { - #messaging-system-message-container { + #info-message-container { height: 260px; overflow: hidden; transition: margin-bottom .25s; } - #messaging-system-message-container[disabled] { + #info-message-container[disabled] { /* Offset the height when hidden. This makes the panel content * cover the info message and reveal it as it slides down, rather * than the info message growing in height. */ @@ -1669,7 +1669,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { pointer-events: none; } - #messaging-system-message-container[disabled] #protections-popup-message { + #info-message-container[disabled] #protections-popup-message { opacity: 0; } } @@ -2122,7 +2122,7 @@ panelview { &.sent-view { @media not (prefers-contrast) { - background-color: var(--color-background-success); + background-color: var(--background-color-success); } > .panel-header { diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css index 3184a63ed5..ad9f5f5f7d 100644 --- a/browser/themes/shared/downloads/progressmeter.css +++ b/browser/themes/shared/downloads/progressmeter.css @@ -8,12 +8,13 @@ --download-progress-fill-color: AccentColor; --download-progress-paused-color: GrayText; --download-progress-flare-color: rgba(255,255,255,0.75); -} - -/* download progress bar is used in contexts which are not LightweightThemeConsumers and - do not get the lwt- theme variables. So we duplicate the fallbacks here. */ -:root:-moz-lwtheme { - --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); + &[lwtheme] { + /* download progress bar is used in contexts which are not LightweightThemeConsumers and + do not get the lwt- theme variables. So we duplicate the fallbacks here. + FIXME(emilio): But then how do we get the lwtheme attribute? I think the + above makes no sense */ + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); + } } @media (prefers-color-scheme: dark) { diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css index 918f977d74..b168102f6b 100644 --- a/browser/themes/shared/formautofill-notification.css +++ b/browser/themes/shared/formautofill-notification.css @@ -75,7 +75,7 @@ } &#address-capture-edit-address-button { - background-image: url("chrome://browser/skin/formautofill/icon-address-edit.svg"); + background-image: url("chrome://global/skin/icons/edit-outline.svg"); } &#address-capture-menu-button { diff --git a/browser/themes/shared/formautofill/icon-address-edit.svg b/browser/themes/shared/formautofill/icon-address-edit.svg deleted file mode 100644 index aef1625941..0000000000 --- a/browser/themes/shared/formautofill/icon-address-edit.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/browser/themes/shared/icons/circle-check-dotted.svg b/browser/themes/shared/icons/circle-check-dotted.svg index b498d1282e..28082dc98e 100644 --- a/browser/themes/shared/icons/circle-check-dotted.svg +++ b/browser/themes/shared/icons/circle-check-dotted.svg @@ -1,4 +1,7 @@ - + + + + diff --git a/browser/themes/shared/icons/insights.svg b/browser/themes/shared/icons/insights.svg new file mode 100644 index 0000000000..1fadce366c --- /dev/null +++ b/browser/themes/shared/icons/insights.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 14a5efecac..e55e677fb3 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -70,7 +70,6 @@ skin/classic/browser/downloads/notification-start-animation.svg (../shared/downloads/notification-start-animation.svg) skin/classic/browser/downloads/progressmeter.css (../shared/downloads/progressmeter.css) skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg) - skin/classic/browser/formautofill/icon-address-edit.svg (../shared/formautofill/icon-address-edit.svg) skin/classic/browser/formautofill/icon-capture-address-fields.svg (../shared/formautofill/icon-capture-address-fields.svg) skin/classic/browser/formautofill/icon-capture-email-fields.svg (../shared/formautofill/icon-capture-email-fields.svg) skin/classic/browser/formautofill/icon-doorhanger-menu.svg (../shared/formautofill/icon-doorhanger-menu.svg) @@ -179,6 +178,7 @@ skin/classic/browser/history.svg (../shared/icons/history.svg) skin/classic/browser/home.svg (../shared/icons/home.svg) skin/classic/browser/import.svg (../shared/icons/import.svg) + skin/classic/browser/insights.svg (../shared/icons/insights.svg) #ifndef MOZ_WIDGET_GTK skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) #endif diff --git a/browser/themes/shared/pageInfo.css b/browser/themes/shared/pageInfo.css index 7d777c3cc4..7913144e51 100644 --- a/browser/themes/shared/pageInfo.css +++ b/browser/themes/shared/pageInfo.css @@ -12,11 +12,22 @@ } #topBar { - appearance: auto; - -moz-default-appearance: toolbar; + position: relative; -moz-window-dragging: drag; + padding-top: env(-moz-mac-titlebar-height); + border-bottom: 1px solid ThreeDShadow; + align-items: center; justify-content: center; + + &::after { + content: ""; + position: absolute; + inset: 0; + appearance: auto; + -moz-default-appearance: -moz-window-titlebar; + z-index: -1; + } } } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css index 8f2652f030..3d806d1394 100644 --- a/browser/themes/shared/preferences/preferences.css +++ b/browser/themes/shared/preferences/preferences.css @@ -518,7 +518,7 @@ a[is="moz-support-link"]:not(.sidebar-footer-link) { stroke: var(--in-content-item-selected); } -@media (prefers-contrast) { +@media (forced-colors) { #engineList > treechildren::-moz-tree-image(hover), #blocklistsTree > treechildren::-moz-tree-image(hover) { fill: var(--in-content-item-hover-text); @@ -624,7 +624,7 @@ html|dialog, } @media (prefers-color-scheme: dark) { - @media not (prefers-contrast) { + @media not (forced-colors) { html|dialog, .dialogBox { --in-content-page-background: #42414d; @@ -1323,7 +1323,7 @@ richlistitem .text-link:hover { border-radius: 4px; } -@media (prefers-contrast) { +@media (forced-colors) { .qr-code-box:not([hidden="true"]) { border: 1px solid currentColor; } diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css index ca56927b02..df31828aa1 100644 --- a/browser/themes/shared/preferences/privacy.css +++ b/browser/themes/shared/preferences/privacy.css @@ -187,13 +187,13 @@ border-color: var(--in-content-accent-color); } -@media (prefers-contrast) { +@media (forced-colors) { .privacy-detailedoption.selected { outline: 2px solid var(--in-content-accent-color); } } -@media not (prefers-contrast) { +@media not (forced-colors) { .privacy-detailedoption { background-color: rgba(215, 215, 219, 0.1); } @@ -259,6 +259,10 @@ display: list-item; } +#dohExceptionsButton { + align-self: end; +} + .content-blocking-warning-image { list-style-image: url("chrome://global/skin/icons/warning.svg"); width: 16px; diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css index 452d7d6c37..ddc55993a8 100644 --- a/browser/themes/shared/preferences/translations.css +++ b/browser/themes/shared/preferences/translations.css @@ -3,39 +3,61 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ #translations-settings-header { - margin-top: 32px; - margin-bottom: 16px; + margin-top: var(--space-xlarge); + margin-bottom: calc( 2 * var(--space-small)); } -.translations-settings-manage-list { - overflow: auto; - background-color: var(--in-content-box-background); - border: 1px solid var(--in-content-box-border-color); - border-radius: var(--border-radius-small); - margin-top: 32px; +.translations-settings-manage-section { + margin-top: var(--space-xlarge); } .translations-settings-manage-language { - padding: 8px; + margin: 0 calc( 2 * var(--space-small)); display: flex; flex-direction: row; justify-content: space-between; - > h2 { - margin: 8px; - } } -.translations-settings-manage-list-info { +.translations-settings-manage-section-info { display: flex; flex-direction: column; - > h2 { - margin: 16px; - margin-bottom: 8px; + h2, p, a { + display: block; + margin: var(--space-small) calc( 2 * var(--space-small)); } - > p { - margin: 8px 16px; + a { + display: block; } - > a { - margin: 0 16px; +} + +.translations-settings-languages-card { + display: flex; + flex-direction: column; + max-height: calc( 7 * var(--space-xlarge)); + overflow: auto; + padding-inline: calc( 2 * var(--space-small)); +} + +.translations-settings-language-header { + margin: calc( 2 * var(--space-small)) 0; + font-size: var(--font-size-root); + font-weight: var(--font-weight-bold); +} + +.translations-settings-language { + display: flex; + align-items: center; + padding: var(--space-small) 0; + border-top: 1px solid var(--in-content-border-color); + label { + margin: 0px calc( 2 * var(--space-small)); } } + +.translations-settings-download-icon[type~="icon"]::part(button) { + background-image: url(chrome://browser/skin/downloads/downloads.svg); +} + +.translations-settings-delete-icon[type~="icon"]::part(button) { + background-image: url(chrome://global/skin/icons/delete.svg); +} diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css index eb92f71e59..204df115be 100644 --- a/browser/themes/shared/tabs.css +++ b/browser/themes/shared/tabs.css @@ -17,12 +17,6 @@ --tab-border-radius: 4px; --tab-shadow-max-size: 6px; --tab-block-margin: 4px; - - --tab-attention-icon-color: AccentColor; - &:-moz-lwtheme { - --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189)); - } - --tab-selected-textcolor: var(--toolbar-color); --tab-selected-bgcolor: var(--toolbar-bgcolor); --tab-selected-color-scheme: var(--toolbar-color-scheme); @@ -474,8 +468,8 @@ } @media not (prefers-contrast) { - #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme, - .tab-background[selected]:not([multiselected]):-moz-lwtheme { + :root[lwtheme] #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon, + :root[lwtheme] .tab-background[selected]:not([multiselected]) { outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); outline-offset: -1px; } @@ -498,8 +492,8 @@ .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), #firefox-view-button[attention] { - background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px); - background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); + background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px); + background-position: center bottom 6.5px; background-size: 4px 4px; background-repeat: no-repeat; } diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css index 3879689f12..5700814351 100644 --- a/browser/themes/shared/toolbarbutton-icons.css +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -6,14 +6,13 @@ --toolbarbutton-icon-fill-attention: AccentColor; --toolbarbutton-icon-fill-attention-text: AccentColorText; --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F); -} - -:root:-moz-lwtheme { - --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); - /* FIXME(emilio): This could have poor contrast on some themes, maybe use - * contrast-color() once that's available, or compute a new variable in - * LightWeightThemeConsumer */ - --toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color); + &[lwtheme] { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); + /* FIXME(emilio): This could have poor contrast on some themes, maybe use + * contrast-color() once that's available, or compute a new variable in + * LightWeightThemeConsumer */ + --toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color); + } } .toolbarbutton-animatable-box, @@ -452,10 +451,6 @@ toolbarbutton.bookmark-item { list-style-image: url("chrome://global/skin/icons/folder.svg"); } -#whats-new-menu-button { - list-style-image: url("chrome://global/skin/icons/whatsnew.svg"); -} - #ion-button { list-style-image: url("chrome://browser/skin/ion.svg"); } diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css index 7af8b2227d..2ba44e5132 100644 --- a/browser/themes/shared/toolbarbuttons.css +++ b/browser/themes/shared/toolbarbuttons.css @@ -113,7 +113,7 @@ toolbar .toolbarbutton-1 { } #TabsToolbar .toolbarbutton-1 { - margin: 0 0 var(--tabs-navbar-shadow-size); + margin: 0; > .toolbarbutton-icon, > .toolbarbutton-text, diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css index 6777e37cc3..988dbadb4b 100644 --- a/browser/themes/shared/translations/panel.css +++ b/browser/themes/shared/translations/panel.css @@ -7,7 +7,7 @@ width: 31em; } -:where(#full-page-translations-panel) :is(description, label, menulist) { +:where(.translations-panel) :is(description, label, menulist) { margin: 0; } @@ -132,6 +132,7 @@ h1.translations-panel-header-wrapper { background-color: transparent; font: message-box; font-weight: var(--font-weight-bold); + &::before { content: url(chrome://global/skin/icons/edit-copy.svg); fill: currentColor; @@ -146,15 +147,33 @@ h1.translations-panel-header-wrapper { } .select-translations-panel-label { - margin-inline: 2px; + margin-block: var(--arrowpanel-padding) 6px; } #select-translations-panel-lang-selection { gap: 6px; } -#select-translations-panel-translation-area { +.select-translations-panel-text-area { height: 8em; - margin-inline: 5px; resize: none; + + &:disabled { + color: var(--panel-disabled-color); + border-color: var(--panel-disabled-color); + } + + &.translating { + -moz-context-properties: fill; + fill: currentColor; + background-image: url("chrome://global/skin/icons/loading.svg"); + background-repeat: no-repeat; + background-position: 8px 8px; + background-size: var(--size-item-small); + padding-inline-start: calc(var(--size-item-small) + (2 * var(--space-small))); + + &:-moz-locale-dir(rtl) { + background-position-x: right 8px; + } + } } diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css index 9fc88fbde8..b5684c5f6f 100644 --- a/browser/themes/shared/urlbar-searchbar.css +++ b/browser/themes/shared/urlbar-searchbar.css @@ -126,15 +126,17 @@ border-color: color-mix(in srgb, currentColor 20%, transparent); } -#urlbar-input:-moz-lwtheme::selection, -.searchbar-textbox:-moz-lwtheme::selection { - background-color: var(--lwt-toolbar-field-highlight, Highlight); - color: var(--lwt-toolbar-field-highlight-text, HighlightText); -} +:root[lwtheme] { + #urlbar-input::selection, + .searchbar-textbox::selection { + background-color: var(--lwt-toolbar-field-highlight, Highlight); + color: var(--lwt-toolbar-field-highlight-text, HighlightText); + } -#urlbar-input:not(:focus):-moz-lwtheme::selection, -.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection { - background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background); + #urlbar-input:not(:focus)::selection, + .searchbar-textbox:not(:focus-within)::selection { + background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background); + } } #urlbar:not([focused="true"]) { @@ -193,13 +195,11 @@ position: absolute; width: 100%; height: var(--urlbar-height); - top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); - left: 0; -} -#urlbar[breakout] > #urlbar-input-container { - width: 100%; - height: 100%; + > #urlbar-input-container { + width: 100%; + height: 100%; + } } #urlbar:not([open]) > .urlbarView, @@ -219,12 +219,12 @@ top: 0; left: calc(-1 * var(--urlbar-margin-inline)); width: calc(100% + 2 * var(--urlbar-margin-inline)); -} -#urlbar[breakout][breakout-extend] > #urlbar-input-container { - height: var(--urlbar-toolbar-height); - padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding)); - padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding)); + > #urlbar-input-container { + height: var(--urlbar-container-height); + padding-block: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding)); + padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding)); + } } #urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button { @@ -376,7 +376,7 @@ /* As above, but for the default theme in dark mode, which suffers from the same issue */ @media (prefers-color-scheme: dark) { - &:not(:-moz-lwtheme) { + :root:not([lwtheme]) & { filter: grayscale(100%) brightness(20%) invert(); } } @@ -791,7 +791,7 @@ margin: var(--arrowpanel-menuitem-margin); width: auto; - & > #searchbar:-moz-lwtheme { + :root[lwtheme] & > #searchbar { /* Theme authors usually only consider contrast against the toolbar when picking a border color for the search bar. Since the search bar can be dragged into the overflow panel, we need to show a high-contrast border diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index ee8ee15c2a..c06342fd98 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -56,7 +56,7 @@ --urlbarView-action-slide-in-distance: -200px; } - &:-moz-lwtheme { + &[lwtheme] { --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201)); --urlbarView-highlight-background: light-dark(rgb(0, 99, 255), rgb(0, 99, 225)); --urlbarView-highlight-color: white; @@ -611,25 +611,14 @@ margin-inline-start: 0.35em; } -.urlbarView-userContext-iconMode { - display: none; -} - -.urlbarView-userContext-textMode { - display: inline-block; - > span { - font-variant: small-caps; - } +.urlbarView-userContext-textMode > span { + font-variant: small-caps; } /* Display userContext icon instead of text, when window is too narrow. */ -.urlbarView-results[wrap] { - .urlbarView-userContext-textMode { - display: none; - } - .urlbarView-userContext-iconMode { - display: inline-block; - } +.urlbarView-results[wrap] .urlbarView-userContext-textMode, +.urlbarView-results:not([wrap]) .urlbarView-userContext-iconMode { + display: none; } /* Tail suggestions */ @@ -722,17 +711,16 @@ color: var(--urlbar-box-text-color); background-color: var(--urlbar-box-focus-bgcolor); border-radius: var(--toolbarbutton-border-radius); - padding: 6px 8px; - - &.urlbarView-userContext { - padding-top: 2px; - } - margin-block: -6px; + padding: 4px 8px; + margin-block: -2px; margin-inline-start: 8px; :root[uidensity=compact] & { padding: 3px 6px; - margin-block: -3px; + } + + &.urlbarView-userContext { + padding-top: 0; } } -- cgit v1.2.3