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 --- browser/themes/osx/browser.css | 50 ++++++++- browser/themes/osx/customizableui/panelUI.css | 4 - browser/themes/osx/places/organizer.css | 140 ++++++++++++++------------ 3 files changed, 122 insertions(+), 72 deletions(-) (limited to 'browser/themes/osx') 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 */ -- cgit v1.2.3