diff options
Diffstat (limited to 'browser/themes')
31 files changed, 474 insertions, 359 deletions
diff --git a/browser/themes/BuiltInThemes.sys.mjs b/browser/themes/BuiltInThemes.sys.mjs index c2d5dd7a18..c6b9958a2a 100644 --- a/browser/themes/BuiltInThemes.sys.mjs +++ b/browser/themes/BuiltInThemes.sys.mjs @@ -277,8 +277,8 @@ class _BuiltInThemes { * there's none. */ getColorwayIntensityL10nId(colorwayId) { - const result = ColorwayIntensityIdPostfixToL10nMap.find( - ([postfix, l10nId]) => colorwayId.endsWith(postfix) + const result = ColorwayIntensityIdPostfixToL10nMap.find(([postfix]) => + colorwayId.endsWith(postfix) ); return result ? result[1] : null; } diff --git a/browser/themes/ThemeVariableMap.sys.mjs b/browser/themes/ThemeVariableMap.sys.mjs index c0c9042efc..1795bfe7c1 100644 --- a/browser/themes/ThemeVariableMap.sys.mjs +++ b/browser/themes/ThemeVariableMap.sys.mjs @@ -56,12 +56,22 @@ export const ThemeVariableMap = [ }, ], [ - "--tabs-navbar-shadow-color", + "--tabs-navbar-separator-color", { lwtProperty: "toolbar_top_separator", }, ], [ + "--tabs-navbar-separator-style", + { + lwtProperty: "toolbar_top_separator", + processColor(rgbaChannels) { + // If the separator is transparent, we don't want it to take space. + return rgbaChannels?.a === 0 ? "none" : null; + }, + }, + ], + [ "--toolbarseparator-color", { lwtProperty: "toolbar_vertical_separator", diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 89df26a2f0..963a33af85 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -16,7 +16,7 @@ * disabling the toolbar field border and backgrounds. */ @media not (prefers-contrast) { - :root:not(:-moz-lwtheme) { + :root:not([lwtheme]) { --toolbar-field-border-color: transparent; /* These colors don't exactly match the default dark color that buttons and @@ -36,7 +36,7 @@ --toolbar-field-color: inherit; @media (-moz-gtk-theme-family) { - --tabs-navbar-shadow-color: transparent; + --tabs-navbar-separator-style: none; @media (prefers-color-scheme: light) { --urlbar-box-bgcolor: #fafafa; } @@ -237,7 +237,7 @@ @media (-moz-bool-pref: "widget.gtk.non-native-titlebar-buttons.enabled") { /* When using lightweight themes, use our own buttons since native ones might * assume a native background in order to be visible. */ - &:-moz-lwtheme { + :root[lwtheme] & { padding-inline: 3px; > .toolbarbutton-icon { diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index b62710cc71..8ed2ec042d 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -3,12 +3,54 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @import url("chrome://browser/skin/browser-shared.css"); -@import url("chrome://browser/skin/browser-custom-colors.css"); - -@namespace html url("http://www.w3.org/1999/xhtml"); +/* stylelint-disable-next-line media-query-no-invalid */ +@import url("chrome://browser/skin/browser-custom-colors.css") not (-moz-bool-pref: "browser.theme.macos.native-theme"); :root { --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3)); + + /* On macOS, top level windows are always opaque. This gives us the right + * default background color, without confusing Gecko about whether the window + * is transparent or not. */ + appearance: auto; + -moz-default-appearance: -moz-mac-unified-toolbar-window; +} + +/* stylelint-disable-next-line media-query-no-invalid */ +@media (-moz-bool-pref: "browser.theme.macos.native-theme") { + /* TODO: Share this with Linux, which effectively does ~the same */ + @media not (prefers-contrast) { + :root:not([lwtheme]) { + --toolbar-field-border-color: transparent; + --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)); + --toolbar-field-color: inherit; + @media (prefers-color-scheme: light) { + --toolbar-non-lwt-bgcolor: white; + --urlbar-box-bgcolor: #fafafa; + } + @media (prefers-color-scheme: dark) { + --tab-selected-bgcolor: color-mix(in srgb, -moz-dialog 75%, white); + } + } + } + + /* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a + * native titlebar outside of the window (revealed on hover) anyways. */ + :root[tabsintitlebar]:not([lwtheme], [macOSNativeFullscreen]) #navigator-toolbox { + background-color: transparent; + + /* This is conceptually a background, but putting this on a + * pseudo-element avoids it from suppressing the chrome-content separator + * border, etc */ + &::after { + -moz-default-appearance: -moz-window-titlebar; + appearance: auto; + content: ""; + position: absolute; + inset: 0; + z-index: -1; + } + } } #browser, @@ -231,7 +273,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left { text-shadow: inherit; @media (prefers-color-scheme: light) { - &:not(:-moz-lwtheme) { + :root:not([lwtheme]) & { /* overriding tabbox.css */ color: hsl(240, 5%, 5%); } diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css index ceb22f7224..2a4508cb05 100644 --- a/browser/themes/osx/customizableui/panelUI.css +++ b/browser/themes/osx/customizableui/panelUI.css @@ -8,10 +8,6 @@ scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; } -#appMenu-mainView > .panel-subview-body > .panel-banner-item { - padding-inline-start: 18px; -} - .subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left { display: none; } diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css index 61e450a345..fc2698aff1 100644 --- a/browser/themes/osx/places/organizer.css +++ b/browser/themes/osx/places/organizer.css @@ -7,6 +7,63 @@ appearance: auto; } +#placesToolbar { + position: relative; + -moz-window-dragging: drag; + padding: env(-moz-mac-titlebar-height) 4px 3px; + border-bottom: 1px solid ThreeDShadow; + + &::after { + content: ""; + position: absolute; + inset: 0; + appearance: auto; + -moz-default-appearance: -moz-window-titlebar; + z-index: -1; + } + + > toolbarbutton { + margin: 4px 4px 5px; + padding: 0; + height: 22px; + appearance: auto; + -moz-default-appearance: toolbarbutton; + + > .toolbarbutton-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + margin: 1px 4px; + } + + &:not(#clearDownloadsButton) > .toolbarbutton-text { + display: none; + } + + &[type="menu"] > .toolbarbutton-menu-dropmarker { + content: url(chrome://global/skin/icons/arrow-down-12.svg); + padding: 0; + margin-inline-end: 2px; + } + + &[disabled] > .toolbarbutton-icon, + &:not(:hover):-moz-window-inactive > .toolbarbutton-icon, + &[type="menu"][disabled] > .toolbarbutton-menu-dropmarker, + &:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker { + opacity: .5; + } + + &:-moz-window-inactive[disabled] > .toolbarbutton-icon, + &:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker { + opacity: .25; + } + + > menupopup { + margin-top: 1px; + } + } +} + /* Places Organizer Sidebars */ #placesList { @@ -14,78 +71,33 @@ width: 160px; min-width: 100px; max-width: 400px; -} - -#placesList > treechildren::-moz-tree-cell-text { - margin-inline-end: 6px; -} -#placesList > treechildren::-moz-tree-cell(separator) { - cursor: default; -} + > treechildren::-moz-tree-cell-text { + margin-inline-end: 6px; + } -#placesList > treechildren::-moz-tree-separator { - border-top: 1px solid color-mix(in srgb, FieldText 70%, transparent); - margin: 0 10px; -} + > treechildren::-moz-tree-cell(separator) { + cursor: default; + } -#placesToolbar { - padding: 0 4px 3px; + > treechildren::-moz-tree-separator { + border-top: 1px solid color-mix(in srgb, FieldText 70%, transparent); + margin: 0 10px; + } } #placesView { border-top: none !important; -} - -#placesView > splitter { - border-inline-start: none !important; - border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); - min-width: 1px; - width: 3px; - margin-inline-start: -3px; - position: relative; - background-image: none !important; -} - -#placesToolbar > toolbarbutton { - margin: 4px 4px 5px; - padding: 0; - height: 22px; - appearance: auto; - -moz-default-appearance: toolbarbutton; -} - -#placesToolbar > toolbarbutton > .toolbarbutton-icon { - -moz-context-properties: fill, fill-opacity; - fill: currentColor; - fill-opacity: 0.8; - margin: 1px 4px; -} - -#placesToolbar > toolbarbutton:not(#clearDownloadsButton) > .toolbarbutton-text { - display: none; -} - -#placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker { - content: url(chrome://global/skin/icons/arrow-down-12.svg); - padding: 0; - margin-inline-end: 2px; -} - -#placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon, -#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive > .toolbarbutton-icon, -#placesToolbar > toolbarbutton[type="menu"][disabled] > .toolbarbutton-menu-dropmarker, -#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker { - opacity: .5; -} - -#placesToolbar > toolbarbutton:-moz-window-inactive[disabled] > .toolbarbutton-icon, -#placesToolbar > toolbarbutton:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker { - opacity: .25; -} -#placesToolbar > toolbarbutton > menupopup { - margin-top: 1px; + > splitter { + border-inline-start: none !important; + border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); + min-width: 1px; + width: 3px; + margin-inline-start: -3px; + position: relative; + background-image: none !important; + } } /* back and forward button */ 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 @@ -<!-- This Source Code Form is subject to the terms of the Mozilla Public - - License, v. 2.0. If a copy of the MPL was not distributed with this - - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"> -<path d="M0.0184994 13.6645L0.612501 10.4635C0.687501 10.0545 0.884501 9.6805 1.1805 9.3825L9.9815 0.5805C10.7555 -0.1925 12.0145 -0.1945 12.7915 0.5805L14.4195 2.2085C15.1935 2.9835 15.1935 4.2435 14.4195 5.0185L5.6155 13.8215C5.3195 14.1165 4.9455 14.3125 4.5375 14.3875L1.3355 14.9815C1.2655 14.9935 1.1975 15.0005 1.1295 15.0005C0.8325 15.0005 0.544499 14.8835 0.3305 14.6695C0.0674992 14.4055 -0.0495005 14.0305 0.0184994 13.6645ZM12.4715 5.1965L13.6315 4.0365L13.6305 3.1885L11.8105 1.3675L10.9625 1.3685L9.8025 2.5285L12.4715 5.1965ZM4.3105 13.1585C4.4705 13.1285 4.6175 13.0515 4.7335 12.9345L11.5865 6.0815L8.9185 3.4135L2.0655 10.2655C1.9485 10.3835 1.8715 10.5305 1.8405 10.6915L1.3665 13.2485L1.7515 13.6335L4.3105 13.1585Z"/> -</svg> 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 @@ <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g clip-path="url(#a)"><g fill="#000" clip-path="url(#b)"><path d="M7.18 10.944h.002l.397-.008a.372.372 0 0 0 .26-.114L12.3 6.203a.718.718 0 0 0-.02-1.021.742.742 0 0 0-1.022.02l-3.912 4.05-2.203-2.12a.72.72 0 0 0-.997 1.046l2.769 2.663a.372.372 0 0 0 .265.104ZM1.092 4.587l.634.392a.373.373 0 0 0 .522-.138c.12-.22.24-.415.368-.598a.37.37 0 0 0-.11-.527l-.63-.39a.373.373 0 0 0-.503.105c-.15.218-.288.44-.41.661a.37.37 0 0 0 .129.495ZM2.435 11.65a.37.37 0 0 0-.041-.291 6.436 6.436 0 0 1-.33-.62.372.372 0 0 0-.513-.169l-.657.352a.37.37 0 0 0-.16.486c.11.23.234.46.37.685a.372.372 0 0 0 .494.136l.654-.35a.371.371 0 0 0 .183-.23ZM3.131 3.028a.372.372 0 0 0 .538.05c.174-.154.36-.3.552-.435a.371.371 0 0 0 .078-.533l-.46-.583a.372.372 0 0 0-.508-.072 7.978 7.978 0 0 0-.611.482.37.37 0 0 0-.048.509l.46.582ZM1.517 9.535a.371.371 0 0 0 .061-.286 6.562 6.562 0 0 1-.101-.695.37.37 0 0 0-.423-.334l-.736.106a.37.37 0 0 0-.316.402c.024.256.061.515.11.77a.372.372 0 0 0 .419.296l.736-.106c.1-.015.19-.07.25-.153ZM5.116 1.67a.371.371 0 0 0 .488.229c.237-.092.456-.165.667-.221a.372.372 0 0 0 .257-.475L6.295.5a.372.372 0 0 0-.45-.242c-.249.068-.498.15-.742.243a.37.37 0 0 0-.22.462l.233.706ZM.355 7.143l.727.151a.376.376 0 0 0 .288-.058.37.37 0 0 0 .156-.25c.033-.221.082-.452.144-.686a.37.37 0 0 0-.284-.458L.658 5.69a.372.372 0 0 0-.436.27 8.027 8.027 0 0 0-.158.761.37.37 0 0 0 .291.42ZM3.373 12.588a.372.372 0 0 0-.54.016l-.494.553a.37.37 0 0 0 .016.511c.19.187.385.361.58.52a.37.37 0 0 0 .511-.042l.496-.554a.37.37 0 0 0-.045-.536 6.578 6.578 0 0 1-.524-.468ZM5.884 14.146a6.482 6.482 0 0 1-.652-.262.373.373 0 0 0-.501.2l-.277.69a.37.37 0 0 0 .191.475c.236.107.48.204.725.288a.372.372 0 0 0 .465-.213l.276-.689a.37.37 0 0 0-.227-.489Z"/><path d="M15.975 7.455a.381.381 0 0 0 0-.066 8.037 8.037 0 0 0-.067-.541l-.01-.08a2.289 2.289 0 0 0-.02-.148.35.35 0 0 0-.018-.067 7.917 7.917 0 0 0-.54-1.76.376.376 0 0 0-.029-.095 6.757 6.757 0 0 0-.219-.429l-.028-.053-.018-.035-.031-.061a1.91 1.91 0 0 0-.06-.114.342.342 0 0 0-.062-.078 8.033 8.033 0 0 0-1.12-1.47.383.383 0 0 0-.04-.05l-.044-.041a3.21 3.21 0 0 0-.118-.11l-.14-.13a5.444 5.444 0 0 0-.269-.248.362.362 0 0 0-.05-.036 8.05 8.05 0 0 0-1.56-1.005.378.378 0 0 0-.08-.052 2.155 2.155 0 0 0-.136-.058l-.073-.03a7.958 7.958 0 0 0-.315-.131l-.068-.03a2.014 2.014 0 0 0-.126-.051.347.347 0 0 0-.08-.02A7.974 7.974 0 0 0 7.98 0a.371.371 0 0 0-.372.37v.198l-.026.534a.37.37 0 0 0 .103.274c.07.074.177.123.27.115.231 0 .47.01.703.034a.338.338 0 0 0 .073 0 6.487 6.487 0 0 1 3.556 1.587c.117.102.233.205.344.317a6.533 6.533 0 0 1 1.883 4.573 6.534 6.534 0 0 1-.155 1.396 6.554 6.554 0 0 1-4.43 4.826l-.036.012a6.533 6.533 0 0 1-1.808.284c-.023-.005-.053-.005-.07-.006-.239.003-.47-.011-.702-.035a.37.37 0 0 0-.41.35l-.036.74a.371.371 0 0 0 .335.388c.231.023.465.036.696.038.027.006.054.01.082.01.626 0 1.27-.082 1.916-.241a.369.369 0 0 0 .082-.012 1.99 1.99 0 0 0 .123-.037l.064-.02c.123-.035.244-.072.364-.112l.066-.02c.043-.012.085-.024.127-.04a.35.35 0 0 0 .078-.039 8.003 8.003 0 0 0 1.67-.857.391.391 0 0 0 .042-.025c.079-.054.155-.114.231-.173l.178-.136a4.094 4.094 0 0 0 .249-.198c.464-.395.888-.85 1.261-1.356a.374.374 0 0 0 .075-.077c.028-.04.053-.08.079-.121l.073-.113c.094-.138.188-.276.27-.42a.34.34 0 0 0 .037-.093 7.947 7.947 0 0 0 .714-1.698.37.37 0 0 0 .024-.063 1.98 1.98 0 0 0 .03-.13l.015-.069a8.59 8.59 0 0 0 .127-.559.34.34 0 0 0 .005-.062 7.86 7.86 0 0 0 .12-1.332c0-.184-.013-.366-.026-.547Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath><clipPath id="b"><path fill="#fff" d="M0 0h16v16.004H0z"/></clipPath></defs></svg> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M7.18 10.944h.002l.397-.008a.372.372 0 0 0 .26-.114L12.3 6.203a.718.718 0 0 0-.02-1.021.742.742 0 0 0-1.022.02l-3.912 4.05-2.203-2.12a.72.72 0 0 0-.997 1.046l2.769 2.663a.372.372 0 0 0 .265.104ZM1.092 4.587l.634.392a.373.373 0 0 0 .522-.138c.12-.22.24-.415.368-.598a.37.37 0 0 0-.11-.527l-.63-.39a.373.373 0 0 0-.503.105c-.15.218-.288.44-.41.661a.37.37 0 0 0 .129.495ZM2.435 11.65a.37.37 0 0 0-.041-.291 6.436 6.436 0 0 1-.33-.62.372.372 0 0 0-.513-.169l-.657.352a.37.37 0 0 0-.16.486c.11.23.234.46.37.685a.372.372 0 0 0 .494.136l.654-.35a.371.371 0 0 0 .183-.23ZM3.131 3.028a.372.372 0 0 0 .538.05c.174-.154.36-.3.552-.435a.371.371 0 0 0 .078-.533l-.46-.583a.372.372 0 0 0-.508-.072 7.978 7.978 0 0 0-.611.482.37.37 0 0 0-.048.509l.46.582ZM1.517 9.535a.371.371 0 0 0 .061-.286 6.562 6.562 0 0 1-.101-.695.37.37 0 0 0-.423-.334l-.736.106a.37.37 0 0 0-.316.402c.024.256.061.515.11.77a.372.372 0 0 0 .419.296l.736-.106c.1-.015.19-.07.25-.153ZM5.116 1.67a.371.371 0 0 0 .488.229c.237-.092.456-.165.667-.221a.372.372 0 0 0 .257-.475L6.295.5a.372.372 0 0 0-.45-.242c-.249.068-.498.15-.742.243a.37.37 0 0 0-.22.462l.233.706ZM.355 7.143l.727.151a.376.376 0 0 0 .288-.058.37.37 0 0 0 .156-.25c.033-.221.082-.452.144-.686a.37.37 0 0 0-.284-.458L.658 5.69a.372.372 0 0 0-.436.27 8.027 8.027 0 0 0-.158.761.37.37 0 0 0 .291.42ZM3.373 12.588a.372.372 0 0 0-.54.016l-.494.553a.37.37 0 0 0 .016.511c.19.187.385.361.58.52a.37.37 0 0 0 .511-.042l.496-.554a.37.37 0 0 0-.045-.536 6.578 6.578 0 0 1-.524-.468ZM5.884 14.146a6.482 6.482 0 0 1-.652-.262.373.373 0 0 0-.501.2l-.277.69a.37.37 0 0 0 .191.475c.236.107.48.204.725.288a.372.372 0 0 0 .465-.213l.276-.689a.37.37 0 0 0-.227-.489Z"/> + <path d="M15.975 7.455a.381.381 0 0 0 0-.066 8.037 8.037 0 0 0-.067-.541l-.01-.08a2.289 2.289 0 0 0-.02-.148.35.35 0 0 0-.018-.067 7.917 7.917 0 0 0-.54-1.76.376.376 0 0 0-.029-.095 6.757 6.757 0 0 0-.219-.429l-.028-.053-.018-.035-.031-.061a1.91 1.91 0 0 0-.06-.114.342.342 0 0 0-.062-.078 8.033 8.033 0 0 0-1.12-1.47.383.383 0 0 0-.04-.05l-.044-.041a3.21 3.21 0 0 0-.118-.11l-.14-.13a5.444 5.444 0 0 0-.269-.248.362.362 0 0 0-.05-.036 8.05 8.05 0 0 0-1.56-1.005.378.378 0 0 0-.08-.052 2.155 2.155 0 0 0-.136-.058l-.073-.03a7.958 7.958 0 0 0-.315-.131l-.068-.03a2.014 2.014 0 0 0-.126-.051.347.347 0 0 0-.08-.02A7.974 7.974 0 0 0 7.98 0a.371.371 0 0 0-.372.37v.198l-.026.534a.37.37 0 0 0 .103.274c.07.074.177.123.27.115.231 0 .47.01.703.034a.338.338 0 0 0 .073 0 6.487 6.487 0 0 1 3.556 1.587c.117.102.233.205.344.317a6.533 6.533 0 0 1 1.883 4.573 6.534 6.534 0 0 1-.155 1.396 6.554 6.554 0 0 1-4.43 4.826l-.036.012a6.533 6.533 0 0 1-1.808.284c-.023-.005-.053-.005-.07-.006-.239.003-.47-.011-.702-.035a.37.37 0 0 0-.41.35l-.036.74a.371.371 0 0 0 .335.388c.231.023.465.036.696.038.027.006.054.01.082.01.626 0 1.27-.082 1.916-.241a.369.369 0 0 0 .082-.012 1.99 1.99 0 0 0 .123-.037l.064-.02c.123-.035.244-.072.364-.112l.066-.02c.043-.012.085-.024.127-.04a.35.35 0 0 0 .078-.039 8.003 8.003 0 0 0 1.67-.857.391.391 0 0 0 .042-.025c.079-.054.155-.114.231-.173l.178-.136a4.094 4.094 0 0 0 .249-.198c.464-.395.888-.85 1.261-1.356a.374.374 0 0 0 .075-.077c.028-.04.053-.08.079-.121l.073-.113c.094-.138.188-.276.27-.42a.34.34 0 0 0 .037-.093 7.947 7.947 0 0 0 .714-1.698.37.37 0 0 0 .024-.063 1.98 1.98 0 0 0 .03-.13l.015-.069a8.59 8.59 0 0 0 .127-.559.34.34 0 0 0 .005-.062 7.86 7.86 0 0 0 .12-1.332c0-.184-.013-.366-.026-.547Z"/> +</svg> 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 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at https://mozilla.org/MPL/2.0/. --> +<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"> +<path d="M2.62599 1.8015L2.44399 2.6505C2.42875 2.72246 2.39295 2.78844 2.34094 2.84045C2.28893 2.89246 2.22294 2.92826 2.15099 2.9435L1.30199 3.1255C0.899988 3.2125 0.899988 3.7865 1.30199 3.8725L2.15099 4.0555C2.22294 4.07074 2.28893 4.10654 2.34094 4.15855C2.39295 4.21056 2.42875 4.27654 2.44399 4.3485L2.62599 5.1975C2.71299 5.5995 3.28699 5.5995 3.37299 5.1975L3.55599 4.3485C3.57123 4.27654 3.60703 4.21056 3.65904 4.15855C3.71105 4.10654 3.77703 4.07074 3.84899 4.0555L4.69699 3.8725C5.09899 3.7855 5.09899 3.2115 4.69699 3.1255L3.84799 2.9435C3.77609 2.92814 3.71016 2.8923 3.65817 2.84031C3.60618 2.78832 3.57035 2.7224 3.55499 2.6505L3.37299 1.8015C3.28599 1.3995 2.71199 1.3995 2.62599 1.8015ZM9.99998 14.4995C9.62057 14.5056 9.25107 14.3782 8.95593 14.1397C8.66078 13.9013 8.45872 13.5667 8.38498 13.1945L8.02798 11.5275C7.97201 11.2687 7.84263 11.0316 7.65534 10.8445C7.46805 10.6574 7.23079 10.5282 6.97198 10.4725L5.30498 10.1155C4.52398 9.9465 3.99998 9.2975 3.99998 8.4995C3.99998 7.7015 4.52398 7.0525 5.30498 6.8845L6.97198 6.5275C7.23077 6.47135 7.46793 6.34193 7.65517 6.15468C7.84242 5.96744 7.97184 5.73028 8.02798 5.4715L8.38598 3.8045C8.55298 3.0235 9.20198 2.4995 9.99998 2.4995C10.798 2.4995 11.447 3.0235 11.615 3.8045L11.972 5.4715C12.086 5.9995 12.5 6.4135 13.028 6.5265L14.695 6.8835C15.476 7.0525 16 7.7015 16 8.4995C16 9.2975 15.476 9.9465 14.695 10.1145L13.028 10.4715C12.769 10.5275 12.5316 10.657 12.3443 10.8445C12.157 11.0319 12.0277 11.2694 11.972 11.5285L11.614 13.1945C11.5406 13.5667 11.3388 13.9014 11.0438 14.1399C10.7488 14.3784 10.3793 14.5057 9.99998 14.4995ZM9.99998 3.7495C9.90199 3.7495 9.66898 3.7795 9.60798 4.0655L9.24998 5.7335C9.14331 6.22777 8.89642 6.68082 8.53886 7.03837C8.18131 7.39593 7.72826 7.64283 7.23398 7.7495L5.56698 8.1065C5.28098 8.1685 5.24998 8.4015 5.24998 8.4995C5.24998 8.5975 5.28098 8.8305 5.56698 8.8925L7.23398 9.2495C7.72826 9.35617 8.18131 9.60307 8.53886 9.96062C8.89642 10.3182 9.14331 10.7712 9.24998 11.2655L9.60798 12.9335C9.66898 13.2195 9.90199 13.2495 9.99998 13.2495C10.098 13.2495 10.331 13.2195 10.392 12.9335L10.75 11.2665C10.8565 10.772 11.1033 10.3188 11.4609 9.96103C11.8184 9.60329 12.2716 9.35624 12.766 9.2495L14.433 8.8925C14.719 8.8305 14.75 8.5975 14.75 8.4995C14.75 8.4015 14.719 8.1685 14.433 8.1065L12.766 7.7495C12.2717 7.64283 11.8187 7.39593 11.4611 7.03837C11.1036 6.68082 10.8567 6.22777 10.75 5.7335L10.392 4.0655C10.331 3.7795 10.098 3.7495 9.99998 3.7495ZM2.44399 12.6505L2.62599 11.8015C2.71199 11.3995 3.28599 11.3995 3.37299 11.8015L3.55499 12.6505C3.57035 12.7224 3.60618 12.7883 3.65817 12.8403C3.71016 12.8923 3.77609 12.9281 3.84799 12.9435L4.69699 13.1255C5.09899 13.2115 5.09899 13.7855 4.69699 13.8725L3.84799 14.0545C3.77609 14.0699 3.71016 14.1057 3.65817 14.1577C3.60618 14.2097 3.57035 14.2756 3.55499 14.3475L3.37299 15.1965C3.28699 15.5985 2.71299 15.5985 2.62599 15.1965L2.44399 14.3475C2.42863 14.2756 2.39279 14.2097 2.3408 14.1577C2.28881 14.1057 2.22289 14.0699 2.15099 14.0545L1.30199 13.8725C0.899988 13.7865 0.899988 13.2125 1.30199 13.1255L2.15099 12.9435C2.22294 12.9283 2.28893 12.8925 2.34094 12.8405C2.39295 12.7884 2.42875 12.7225 2.44399 12.6505Z"/> +</svg> 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; } } diff --git a/browser/themes/triage.json b/browser/themes/triage.json index 30ef62e34f..bf761e201e 100644 --- a/browser/themes/triage.json +++ b/browser/themes/triage.json @@ -1,8 +1,5 @@ { "triagers": { - "Amy Churchwell": { - "bzmail": "achurchwell@mozilla.com" - }, "Cieara Meador": { "bzmail": "cmeador@mozilla.com" }, @@ -20,67 +17,66 @@ } }, "duty-start-dates": { - "2024-03-01": "Amy Churchwell", "2024-03-08": "Cieara Meador", "2024-03-15": "Dão Gottwald", "2024-03-22": "Jules Simplicio", "2024-03-29": "Kelly Cochrane", "2024-04-06": "Sam Foster", - "2024-04-13": "Amy Churchwell", - "2024-04-20": "Cieara Meador", - "2024-04-27": "Dão Gottwald", - "2024-05-04": "Jules Simplicio", - "2024-05-11": "Kelly Cochrane", - "2024-05-18": "Sam Foster", - "2024-05-25": "Amy Churchwell", - "2024-06-02": "Cieara Meador", - "2024-06-09": "Dão Gottwald", - "2024-06-16": "Jules Simplicio", - "2024-06-23": "Kelly Cochrane", - "2024-06-30": "Sam Foster", - "2024-07-07": "Amy Churchwell", - "2024-07-14": "Cieara Meador", - "2024-07-21": "Dão Gottwald", - "2024-07-28": "Jules Simplicio", - "2024-08-05": "Kelly Cochrane", - "2024-08-12": "Sam Foster", - "2024-08-19": "Amy Churchwell", - "2024-08-26": "Cieara Meador", - "2024-09-03": "Dão Gottwald", - "2024-09-10": "Jules Simplicio", - "2024-09-17": "Kelly Cochrane", - "2024-09-24": "Sam Foster", - "2024-10-01": "Amy Churchwell", + "2024-04-13": "Cieara Meador", + "2024-04-20": "Dão Gottwald", + "2024-04-27": "Jules Simplicio", + "2024-05-04": "Kelly Cochrane", + "2024-05-11": "Sam Foster", + "2024-05-18": "Cieara Meador", + "2024-05-25": "Dão Gottwald", + "2024-06-02": "Jules Simplicio", + "2024-06-09": "Kelly Cochrane", + "2024-06-16": "Sam Foster", + "2024-06-23": "Cieara Meador", + "2024-06-30": "Dão Gottwald", + "2024-07-07": "Jules Simplicio", + "2024-07-14": "Kelly Cochrane", + "2024-07-21": "Sam Foster", + "2024-07-28": "Cieara Meador", + "2024-08-05": "Dão Gottwald", + "2024-08-12": "Jules Simplicio", + "2024-08-19": "Kelly Cochrane", + "2024-08-26": "Sam Foster", + "2024-09-03": "Cieara Meador", + "2024-09-10": "Dão Gottwald", + "2024-09-17": "Jules Simplicio", + "2024-09-24": "Kelly Cochrane", + "2024-10-01": "Sam Foster", "2024-10-08": "Cieara Meador", "2024-10-15": "Dão Gottwald", "2024-10-22": "Jules Simplicio", "2024-10-29": "Kelly Cochrane", "2024-11-06": "Sam Foster", - "2024-11-13": "Amy Churchwell", - "2024-11-20": "Cieara Meador", - "2024-11-27": "Dão Gottwald", - "2024-12-04": "Jules Simplicio", - "2024-12-11": "Kelly Cochrane", - "2024-12-18": "Sam Foster", - "2024-12-25": "Amy Churchwell", - "2025-01-02": "Cieara Meador", - "2025-01-09": "Dão Gottwald", - "2025-01-16": "Jules Simplicio", - "2025-01-23": "Kelly Cochrane", - "2025-01-30": "Sam Foster", - "2025-02-07": "Amy Churchwell", - "2025-02-14": "Cieara Meador", - "2025-02-21": "Dão Gottwald", - "2025-02-28": "Jules Simplicio", - "2025-03-05": "Kelly Cochrane", - "2025-03-12": "Sam Foster", - "2025-03-19": "Amy Churchwell", - "2025-03-26": "Cieara Meador", - "2025-04-03": "Dão Gottwald", - "2025-04-10": "Jules Simplicio", - "2025-04-17": "Kelly Cochrane", - "2025-04-24": "Sam Foster", - "2025-05-01": "Amy Churchwell", + "2024-11-13": "Cieara Meador", + "2024-11-20": "Dão Gottwald", + "2024-11-27": "Jules Simplicio", + "2024-12-04": "Kelly Cochrane", + "2024-12-11": "Sam Foster", + "2024-12-18": "Cieara Meador", + "2024-12-25": "Dão Gottwald", + "2025-01-02": "Jules Simplicio", + "2025-01-09": "Kelly Cochrane", + "2025-01-16": "Sam Foster", + "2025-01-23": "Cieara Meador", + "2025-01-30": "Dão Gottwald", + "2025-02-07": "Jules Simplicio", + "2025-02-14": "Kelly Cochrane", + "2025-02-21": "Sam Foster", + "2025-02-28": "Cieara Meador", + "2025-03-05": "Dão Gottwald", + "2025-03-12": "Jules Simplicio", + "2025-03-19": "Kelly Cochrane", + "2025-03-26": "Sam Foster", + "2025-04-03": "Cieara Meador", + "2025-04-10": "Dão Gottwald", + "2025-04-17": "Jules Simplicio", + "2025-04-24": "Kelly Cochrane", + "2025-05-01": "Sam Foster", "2025-05-08": "Cieara Meador" } } diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index c4c2f814c7..982a7a9616 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -35,7 +35,7 @@ --toolbox-non-lwt-bgcolor-inactive: InactiveCaption; --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText; - #TabsToolbar:not(:-moz-lwtheme) { + &:not([lwtheme]) #TabsToolbar { /* These colors match the Linux/HCM default button colors. We need to * override these on the tabs toolbar because the accent color is * arbitrary, so the hardcoded colors from browser-custom-colors might @@ -58,7 +58,7 @@ /* When temporarily showing the menu bar, make it at least as tall as the * tab bar such that the window controls don't appear to move up. */ :root[tabsintitlebar] #toolbar-menubar[autohide="true"] { - height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + height: var(--tab-min-height); } /* Titlebar */ @@ -76,12 +76,6 @@ .titlebar-buttonbox-container { align-items: stretch; - - /* Prevent window controls from overlapping the nav bar's shadow on the tab - * bar. */ - #TabsToolbar > & { - margin-bottom: var(--tabs-navbar-shadow-size); - } } /* Window control buttons */ @@ -309,10 +303,12 @@ --urlbar-box-hover-text-color: SelectedItemText; } - #urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background, - #searchbar:not(:-moz-lwtheme, :focus-within), - .findbar-textbox:not(:-moz-lwtheme, :focus) { - border-color: ThreeDShadow; + :root:not([lwtheme]) { + #urlbar:not([focused="true"]) > #urlbar-background, + #searchbar:not(:focus-within), + .findbar-textbox:not(:focus) { + border-color: ThreeDShadow; + } } } diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css index 68b0fd3866..dd171b7ecd 100644 --- a/browser/themes/windows/places/organizer.css +++ b/browser/themes/windows/places/organizer.css @@ -82,7 +82,6 @@ /* Toolbar and menus */ #placesToolbar { - appearance: none; background-color: var(--organizer-toolbar-background); color: var(--organizer-color); border-bottom: 1px solid var(--organizer-border-color); |