diff --git a/README.md b/README.md index 1a21eb5..64edf08 100644 --- a/README.md +++ b/README.md @@ -11,12 +11,13 @@ Screenshot: macOS / Firefox 120 / Tweaks: rounded corners, hide forward button. 2. Download the repository and extract the files. 3. From the repository folder, copy the `chrome` folder and `user.js` file into your Firefox profile folder. 4. Close and restart Firefox, if performed correctly, the theme should now be installed. -5. Optionally, listed below are some settings that can be changed using `about:config`: +5. Optionally, listed below are some additional Firefox settings that can be changed using `about:config`: - | Description | Preference Name | Value | - | ---------------------------------------- | ------------------------------------ | ------- | - | Use Edge-themed context menu on macOS | `widget.macos.native-context-menus` | `false` | - | Use light theme in private browsing mode | `browser.theme.dark-private-windows` | `false` | + | Description | Preference Name | Value | + | ------------------------------------------ | -------------------------------------------- | ------- | + | Use Edge-themed context menu on macOS | `widget.macos.native-context-menus` | `false` | + | Use light theme in private browsing mode | `browser.theme.dark-private-windows` | `false` | + | Use rounded bottom window corners on Linux | `widget.gtk.rounded-bottom-corners.enabled ` | `true` | Additional tweaks can also be applied to the theme such as Floating tabs, Rounded browser corners and more. See [Tweaks](#tweaks). @@ -28,6 +29,7 @@ Screenshot: macOS / Firefox 120 / Tweaks: rounded corners, hide forward button. | Default (Windows 11) | ![Light][s-light] | ![Dark][s-dark] | | Floating Tabs + Rounded Corners (Windows 11) | ![Light, Floating Tabs][s-light-ft] | ![Dark, Floating Tabs][s-dark-ft] | | Hide Tabs Bar + Rounded Corners (macOS) | ![Light, Hide Tabs Bar][s-light-mac-htb] | ![Dark, Hide Tabs Bar][s-dark-mac-htb] | +| Rounded Corners (Linux, Ubuntu Yaru theme) | ![Light, Rounded Corners][s-light-linux] | ![Dark, Rounded Corners][s-dark-linux] | ## Tweaks Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak you want to use and set it to `true`. @@ -52,7 +54,7 @@ redesign of Edge. --- ### Hide tabs toolbar -This hides the tabs toolbar and is useful when using vertical tab addons such as +This hides the tabs toolbar, useful for when using vertical tab addons such as Sidebery, Tree Style Tab or Tab Center Reborn. **Note: Only works on Windows or macOS.** @@ -163,13 +165,6 @@ Disable the custom Edge-themed context menu and use the default Firefox menus. --- -## Mica Tweak Notice -Mica is broken due to changes made in the Firefox 115 update, Mica has now been -removed from this theme. - -If you still have `uc.tweak.win11-mica` set in `about:config` you can safely -delete it. - ## Acknowledgements [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox) @@ -184,8 +179,10 @@ delete it. [s-light]: screenshots/Windows_default_light.png [s-light-ft]: screenshots/Windows_floating-tabs_light.png [s-light-mac-htb]: screenshots/macOS_hide-tabs-bar_light.png +[s-light-linux]: screenshots/Linux_light.png [s-dark]: screenshots/Windows_default_dark.png [s-dark-ft]: screenshots/Windows_floating-tabs_dark.png [s-dark-mac-htb]: screenshots/macOS_hide-tabs-bar_dark.png +[s-dark-linux]: screenshots/Linux_dark.png diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index ad7b504..c64d4f1 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -48,6 +48,22 @@ url-prefix("about:firefoxview") { --newtab-status-success: #50B080 !important; } + /* Custom GTK colours. */ + @media (-moz-gtk-csd-available) { + :root:not([lwt-newtab]):not([style*="color"]) { + /* Colour adjusted for readability. */ + --uc-accent-adjusted: light-dark( + color-mix(in oklch, AccentColor 92%, black), + color-mix(in oklch, AccentColor 60%, white) + ); + --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; + --newtab-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; + --newtab-text-primary-color: -moz-dialogtext !important; + --newtab-wordmark-color: light-dark(color-mix(in srgb, -moz-dialogtext 65%, transparent), -moz-dialogtext) !important; + --newtab-primary-action-background: var(--uc-accent-adjusted) !important; + } + } + /* Adjustments for themes. */ :root[style*="--newtab-background-color"] { /* Make the Firefox logo workmark follow text colour. */ @@ -73,6 +89,11 @@ url-prefix("about:firefoxview") { @-moz-document url-prefix("about:newtab"), url-prefix("about:home") { + /* Enforce system font selection. */ + body { + font-family: system-ui !important; + } + /* hide pin */ .icon.icon-pin-small { display: none !important; @@ -117,6 +138,10 @@ url-prefix("about:home") { opacity: 0 !important; } + .icon-settings { + background-image: url("../icons/settings.svg") !important; + } + /* top sites */ .top-site-outer .tile { border-radius: 12px !important; @@ -191,6 +216,22 @@ url-prefix("about:home") { } } + /* Custom GTK colours. */ + @media (-moz-gtk-csd-available) { + :root:not([lwt-newtab]):not([style*="color"]) { + /* Colour adjusted for readability. */ + --uc-accent-adjusted: light-dark( + color-mix(in oklch, AccentColor 92%, black), + color-mix(in oklch, AccentColor 60%, white) + ); + + --in-content-page-background: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; + --uc-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; + --in-content-page-color: -moz-dialogtext !important; + --in-content-focus-outline-color: var(--uc-accent-adjusted) !important; + } + } + .search-inner-wrapper { height: 44px !important; } diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 23303dd..c5eb5c5 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -7,103 +7,104 @@ * private window and private window with the 'Dark' theme enabled. * May not be the most reliable method, but works for now up to FF 123. */ :root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"]) { + /* Toolbars */ --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important; --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important; --lwt-text-color: light-dark(#000, #FFF) !important; --lwt-text-color-inactive: light-dark(#3A3A3A, #CBCBCB) !important; - --lwt-text-color: light-dark(#000, #FFF) !important; + --tab-selected-textcolor: light-dark(#000, #fff) !important; + --tab-selected-textcolor-inactive: light-dark(#3E3E3E, #CBCBCB) !important; + --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; + --tab-attention-icon-color: light-dark(#0078D4, #93d0ff) !important; --toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important; --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; --toolbar-color: light-dark(#000, #fff) !important; - --toolbarbutton-icon-fill: light-dark(#000, #fff) !important; - --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important; - --lwt-toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; + --toolbarbutton-icon-fill: var(--toolbar-color) !important; --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; - --tab-attention-icon-color: light-dark(#0078D4, #93d0ff) !important; - --tab-selected-textcolor: light-dark(#000, #fff) !important; - --tab-selected-textcolor-inactive: light-dark(#3E3E3E, #CBCBCB) !important; - --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; + --toolbarseparator-color: color-mix(in srgb, currentColor 25%, transparent) !important; + --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important; + --newtab-background-color: light-dark(#f7f7f7, #252525) !important; + --tabpanel-background-color: var(--newtab-background-color, var(--toolbar-bgcolor, transparent)) !important; + /* Toolbar button overlays */ + --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .08)) !important; + --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .135), rgb(255 255 255 / .135)) !important; + /* Tab audio indicator overlay icon */ + --tab-icon-overlay-fill: var(--toolbar-color) !important; + --tab-icon-overlay-stroke: var(--toolbar-bgcolor) !important; + /* URL bar */ --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; --toolbar-field-color: light-dark(#000, #fff) !important; --toolbar-field-border-color: transparent !important; --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; --toolbar-field-focus-color: var(--toolbar-field-color) !important; --toolbar-field-focus-border-color: light-dark(#0055D780, #63ADE5) !important; - --link-color: light-dark(#0078D4, #75B6E8) !important; - --urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important; + --urlbar-icon-fill-opacity: 0.58 !important; --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; --urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; - --urlbar-box-focus-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important; - --urlbar-icon-fill-opacity: 0.58 !important; - --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important; + --urlbar-box-active-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important; + --urlbar-box-focus-bgcolor: var(--urlbar-box-hover-bgcolor) !important; + /* URL bar suggestions */ + --link-color: light-dark(#0078D4, #75B6E8) !important; + --uc-urlbarView-accent-color: light-dark(#1A6397, #75B6E8) !important; --urlbarView-highlight-background: light-dark(#F2F2F2, #383838) !important; --urlbarView-highlight-color: light-dark(#000, #fff) !important; --urlbarView-hover-background: light-dark(#e5e5e5, #444444) !important; --urlbarView-separator-color: light-dark(#EFEFEF, #5F5F5F) !important; - --uc-urlbarView-accent-color: light-dark(#1A6397, #75B6E8) !important; - --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important; - --autocomplete-popup-background: light-dark(#fff, #4A4A4A) !important; - --autocomplete-popup-color: light-dark(#fff, #fff) !important; - --autocomplete-popup-highlight-background: light-dark(#f2f2f2, #383838) !important; - --autocomplete-popup-hover-background: light-dark(#e5e5e5, #444444) !important; - --autocomplete-popup-separator-color: light-dark(#dadada00, #63636300) !important; - --button-color: light-dark(#000, #fff) !important; - --button-bgcolor: light-dark(#EFEFEF, #5C5C5C) !important; - --button-hover-bgcolor: light-dark(#D5D5D5, #6E6E6E) !important; - --button-active-bgcolor: light-dark(#C0C0C0, #7C7C7C) !important; - --button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important; - --button-primary-hover-bgcolor: light-dark(#006BBD, #1C7CC5) !important; - --button-primary-active-bgcolor: light-dark(#0060AA, #3289CB) !important; - --button-primary-color: light-dark(#fff, #fff) !important; - --error-text-color: light-dark(#FF9AA2, #FF9AA2) !important; - --input-bgcolor: light-dark(#fff, #4A4A4A) !important; - --input-color: light-dark(#2b2b2b, #fff) !important; - --input-border-color: light-dark(#bebebe, #8A8A8A) !important; - --input-error-border-color: light-dark(#FF848A, #FF848A) !important; - --zoom-controls-bgcolor: light-dark(#4A4A4A, #4A4A4A) !important; + /* Menus/panels */ --arrowpanel-background: light-dark(#fff, #4A4A4A) !important; --arrowpanel-color: light-dark(#1c1c1c, #fff) !important; - --panel-description-color: light-dark(#000a, #fffb) !important; - --panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important; + --arrowpanel-border-color: light-dark(#fff, #636363) !important; --arrowpanel-dimmed: light-dark(#565656, #565656) !important; --arrowpanel-dimmed-further: light-dark(#707070, #707070) !important; + --panel-separator-color: light-dark(#dadada, #636363) !important; + --panel-description-color: light-dark(#000a, #fffb) !important; + --panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important; --panel-item-hover-bgcolor: light-dark(#eee, #646464) !important; --panel-item-active-bgcolor: light-dark(#ddd, #747474) !important; - --arrowpanel-border-color: light-dark(#fff, #636363) !important; - --panel-separator-color: light-dark(#dadada, #636363) !important; --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important; - --focus-outline-color: light-dark(#0055D7, #63ADE5) !important; - --panel-shortcut-color: inherit !important; - --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .08)) !important; - --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .135), rgb(255 255 255 / .135)) !important; - --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; - --tab-icon-overlay-fill: light-dark(#252525, #fff) !important; - --toolbarseparator-color: color-mix(in srgb, currentColor 25%, transparent) !important; - --tabpanel-background-color: light-dark(#f7f7f7, #252525) !important; - - /* Side bar theme colours. */ + /* Primary button */ + --button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important; + --button-primary-color: light-dark(#fff, #fff) !important; + --button-primary-hover-bgcolor: light-dark(#006BBD, #1C7CC5) !important; + --button-primary-active-bgcolor: light-dark(#0060AA, #3289CB) !important; + /* Secondary button */ + --button-bgcolor: light-dark(#EFEFEF, #5C5C5C) !important; + --button-color: light-dark(#000, #fff) !important; + --button-hover-bgcolor: light-dark(#D5D5D5, #6E6E6E) !important; + --button-active-bgcolor: light-dark(#C0C0C0, #7C7C7C) !important; + /* Text input field, e.g. bookmarks editor */ + --focus-outline-color: light-dark(#0055D780, #63ADE5) !important; + --input-bgcolor: light-dark(#fff, #4A4A4A) !important; + --input-color: light-dark(#2b2b2b, #fff) !important; + --input-border-color: light-dark(#bebebe, #808080) !important; + --error-text-color: light-dark(#FF9AA2, #FF9AA2) !important; + --input-error-border-color: light-dark(#FF848A, #FF848A) !important; + /* Side bar colours. */ --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important; --sidebar-text-color: light-dark(#000, #fff) !important; --sidebar-border-color: light-dark(#bfbfbf, #686868) !important; - /* Dialog theme */ + /* ::::: Dialog theme ::::: */ & #window-modal-dialog::backdrop { + /* Overlay when dialog is shown. */ background-color: rgb(20 20 20 / .2) !important; } &[dialogroot] { + /* Dialog */ --in-content-page-background: var(--arrowpanel-background) !important; --in-content-page-color: var(--arrowpanel-color) !important; + /* Primary button */ --in-content-primary-button-text-color: var(--button-primary-color) !important; --in-content-primary-button-background: var(--button-primary-bgcolor) !important; --in-content-primary-button-background-hover: var(--button-primary-hover-bgcolor) !important; --in-content-primary-button-background-active: var(--button-primary-active-bgcolor) !important; - + /* Secondary button */ --in-content-button-text-color: var(--button-color) !important; --in-content-button-background: var(--button-bgcolor) !important; --in-content-button-background-hover: var(--button-hover-bgcolor) !important; --in-content-button-background-active: var(--button-active-bgcolor) !important; - + /* Text input */ --in-content-box-background: var(--input-bgcolor) !important; --in-content-box-border-color: var(--input-border-color) !important; } @@ -120,17 +121,12 @@ } } -#urlbar { - --urlbar-box-bgcolor: inherit !important; - --urlbar-box-hover-bgcolor: inherit !important; - --urlbar-box-focus-bgcolor: inherit !important; -} - -/* make the titlebar buttons black/white on default themes */ +/* Make the titlebar buttons black/white on default themes */ :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { - color: var(--toolbar-color) !important; + color: var(--lwt-text-color) !important; } +/* Status/link preview panel */ #statuspanel-label { background-color: var(--toolbar-field-focus-background-color) !important; color: var(--toolbar-field-focus-color) !important; @@ -144,6 +140,7 @@ } @media (-moz-platform: windows) { + /* Colour the text selection background and foreground. */ ::selection { background-color: light-dark(#0078D4, #93B8E7) !important; color: light-dark(#fff, #000) !important; @@ -157,26 +154,26 @@ .titlebar-button:not(.titlebar-close):hover { background-color: color-mix(in srgb, currentColor 11%, transparent) !important; - } - .titlebar-button:hover:active { - background-color: color-mix(in srgb, currentColor 20%, transparent) !important; + &:active { + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; + } } .titlebar-close:hover { stroke: white !important; background-color: #e81123 !important; - } - .titlebar-close:hover:active { - background-color: #EF6B76 !important; - } + &:active { + background-color: #DC5C66 !important; + } - toolbar[brighttext] .titlebar-close:hover:active { - background-color: #9C1420 !important; + toolbar[brighttext] &:active { + background-color: #971821 !important; + } } - /* library window theme */ + /* Library window colour theme. */ window#places { --organizer-color: light-dark(#000, #fff) !important; --organizer-deemphasized-color: light-dark(#666, #bbb) !important; @@ -213,6 +210,7 @@ } } +/* Prevent macOS vibrancy appearance, instead using a solid background. */ #sidebar-box { appearance: none !important; } @@ -226,14 +224,14 @@ & #sidebar-search-container > #search-box, & #viewButton { appearance: none !important; - background-color: light-dark(#fff, #2b2b2b) !important; + background-color: var(--toolbar-field-background-color) !important; color: inherit !important; - border: 1px solid light-dark(#bfbfbf, #686868) !important; + border: 1px solid var(--input-border-color) !important; border-radius: 4px !important; padding: 6px 8px !important; &:focus { - outline: 2px solid light-dark(#bfbfbf, #686868) !important; + outline: 2px solid var(--input-border-color) !important; outline-offset: -2px !important; border-color: transparent !important; } @@ -249,97 +247,87 @@ /* Linux / GTK csd support */ @media (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important; - --toolbar-bgimage: none !important; + :root:not(:-moz-lwtheme), + /* `--newtab-background-color-secondary used` to differentiate between a dark + * private window and private window with the 'Dark' theme enabled. + * May not be the most reliable method, but works for now up to FF 123. */ + :root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"]) { + /* Used for mixing colours differently in light/dark themes. */ + --uc-tint: light-dark(black, white); + /* Colour adjusted for readability. */ + --uc-accent-adjusted: light-dark( + color-mix(in oklch, AccentColor 92%, black), + color-mix(in oklch, AccentColor 60%, white) + ); + /* Toolbars */ + --lwt-accent-color: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important; + --lwt-accent-color-inactive: light-dark(color-mix(in srgb, InactiveCaption 94%, black), InactiveCaption) !important; + --lwt-text-color: CaptionText !important; + --lwt-text-color-inactive: color-mix(in srgb, CaptionText 65%, transparent) !important; + --tab-selected-textcolor: var(--toolbar-color) !important; + --tab-selected-textcolor-inactive: color-mix(in srgb, var(--toolbar-color) 65%, transparent) !important; + --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; + --tab-attention-icon-color: var(--uc-accent-adjusted) !important; + --toolbar-bgcolor: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important; --toolbar-color: -moz-dialogtext !important; - --tab-selected-bgimage: none !important; - --chrome-content-separator-color: ThreeDShadow !important; - --panel-separator-color: ThreeDShadow !important; - --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important; - --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important; - --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important; - --button-color: currentColor !important; - --button-primary-bgcolor: -moz-accent-color !important; - --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, -moz-accent-color) !important; - --button-primary-active-bgcolor: color-mix(in srgb, black 20%, -moz-accent-color) !important; - --button-primary-color: -moz-accent-color-foreground !important; - --autocomplete-popup-hover-background: var(--arrowpanel-dimmed) !important; - --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important; + --toolbarbutton-icon-fill-attention: var(--uc-accent-adjusted) !important; + --chrome-content-separator-color: color-mix(in srgb, currentColor 17%, var(--toolbar-bgcolor)) !important; + --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; + /* URL bar */ + --toolbar-field-background-color: light-dark(Field, color-mix(in srgb, Field 96%, -moz-dialogtext)) !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-focus-border-color: light-dark(color-mix(in srgb, var(--focus-outline-color) 50%, transparent), var(--focus-outline-color)) !important; --urlbar-box-bgcolor: var(--button-bgcolor) !important; - --urlbar-box-focus-bgcolor: var(--button-bgcolor) !important; --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important; --urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important; - --urlbar-box-text-color: inherit !important; - --urlbar-box-hover-text-color: var(--urlbar-box-text-color) !important; - --urlbar-icon-fill-opacity: 0.58 !important; - --urlbar-popup-url-color: -moz-nativehyperlinktext !important; - --lwt-brighttext-url-color: #00ddff !important; - --toolbarbutton-icon-fill-attention: -moz-nativehyperlinktext !important; - --focus-outline-color: -moz-accent-color !important; + /* URL bar suggestions. */ + --link-color: var(--uc-accent-adjusted) !important; + --uc-urlbarView-accent-color: var(--uc-accent-adjusted) !important; + --urlbarView-highlight-background: var(--panel-item-hover-bgcolor) !important; + --urlbarView-highlight-color: var(--toolbar-field-color) !important; + --urlbarView-hover-background: var(--panel-item-active-bgcolor) !important; + --urlbarView-separator-color: var(--panel-separator-color) !important; + /* Toolbar button hover & click backgrounds. */ + --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 8%, transparent) !important; + --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 13.5%, transparent) !important; + /* Menus/panels */ --arrowpanel-background: Field !important; --arrowpanel-color: FieldText !important; - --arrowpanel-border-color: ThreeDShadow !important; + --arrowpanel-border-color: light-dark(transparent, var(--panel-separator-color)) !important; --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important; --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important; + --panel-separator-color: color-mix(in srgb, currentColor 17%, var(--arrowpanel-background)) !important; --panel-description-color: GrayText !important; --panel-disabled-color: GrayText !important; - --toolbarbutton-icon-fill: currentColor !important; - --toolbar-field-background-color: Field !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-border-color: ThreeDShadow !important; - --toolbar-field-focus-background-color: Field !important; - --toolbar-field-focus-color: FieldText !important; - --toolbar-field-focus-border-color: -moz-accent-color !important; - --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 14%, transparent) !important; - --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 20%, transparent) !important; - --autocomplete-popup-highlight-color: FieldText !important; - --autocomplete-popup-highlight-background: color-mix(in srgb, currentColor 8%, transparent) !important; - --autocomplete-popup-hover-background: color-mix(in srgb, currentColor 12%, transparent) !important; - --autocomplete-popup-separator-color: #0000 !important; - --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; - --panel-item-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; - --panel-separator-color: ThreeDShadow !important; - --panel-banner-item-update-supported-bgcolor: #1bba6b !important; - --focus-outline-color: -moz-accent-color !important; - --uc-private-browsing-indicator: -moz-accent-color !important; - --uc-private-browsing-indicator-text: var(--button-primary-color); - } - - #sidebar-box:not([lwt-sidebar]) { - --sidebar-background-color: -moz-dialog !important; - --sidebar-text-color: -moz-dialog-text !important; - } - - #browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: ThreeDShadow !important; - } - - .sidebar-panel:not([lwt-sidebar]) { - color: -moz-dialogtext !important; - } - - @media (prefers-color-scheme: light) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 65%, #fff) !important; - --urlbar-icon-fill-opacity: 0.7 !important; - --toolbar-field-border-color: transparent !important; - --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-focus-background-color: Field !important; - --toolbar-field-focus-color: FieldText !important; - } + --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 8%, transparent) !important; + --panel-item-active-bgcolor: color-mix(in srgb, currentColor 13%, transparent) !important; + /* Primary button */ + --button-primary-bgcolor: AccentColor !important; + --button-primary-color: AccentColorText !important; + --button-primary-hover-bgcolor: color-mix(in srgb, var(--uc-tint) 10%, var(--button-primary-bgcolor)) !important; + --button-primary-active-bgcolor: color-mix(in srgb, var(--uc-tint) 20%, var(--button-primary-bgcolor)) !important; + /* Secondary button */ + --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important; + --button-color: currentColor !important; + --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important; + --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important; + /* Text input field, e.g. bookmarks editor. */ + --focus-outline-color: var(--uc-accent-adjusted) !important; + --input-bgcolor: var(--arrowpanel-background) !important; + --input-color: var(--arrowpanel-color) !important; + --input-border-color: color-mix(in srgb, currentColor 35%, var(--arrowpanel-background)) !important; + /* Sidebar */ + --sidebar-background-color: var(--toolbar-bgcolor) !important; + --sidebar-text-color: var(--toolbar-color) !important; + --sidebar-border-color: var(--chrome-content-separator-color) !important; } - @media (prefers-color-scheme: dark) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 90%, #fff) !important; - --urlbar-icon-fill-opacity: 1.0 !important; - --toolbar-field-border-color: transparent !important; - --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-focus-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-focus-color: FieldText !important; - } + /* Use the same sidebar splitter style as other platforms. */ + .sidebar-splitter { + border: 0 solid var(--sidebar-border-color) !important; + border-inline-end-width: 1px !important; + width: 4px !important; + background-color: transparent !important; + margin-inline-start: -4px !important; } } diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 2cab473..9208c03 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -41,14 +41,12 @@ } /* Fix window background colours. */ -@media not (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) #navigator-toolbox { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; - } +#navigator-toolbox:not(:-moz-lwtheme) { + background-color: var(--lwt-accent-color) !important; + color: var(--lwt-text-color) !important; /* Inactive window background colours. */ - :root:not(:-moz-lwtheme) #navigator-toolbox:-moz-window-inactive { + &:-moz-window-inactive { background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important; } @@ -206,6 +204,19 @@ } } } + +/* Linux titlebar button positioning. */ +@media (-moz-platform: linux) { + .titlebar-buttonbox-container { + /* Add space between buttons and other toolbar buttons. */ + margin-inline: 8px 0 !important; + + @media (-moz-gtk-csd-reversed-placement) { + /* Compensate for padding added to the Tabs Toolbar. */ + margin-inline: -8px 8px !important; + } + } +} /* #endregion */ @@ -224,11 +235,11 @@ } /* Enforce tab foreground colour. */ - &:is([visuallyselected], [multiselected]):not(:-moz-lwtheme) { + &:is([visuallyselected], [multiselected]) { color: var(--tab-selected-textcolor) !important; &:-moz-window-inactive { - color: var(--tab-selected-textcolor-inactive) !important; + color: var(--tab-selected-textcolor-inactive, var(--tab-selected-textcolor)) !important; } } } @@ -649,23 +660,13 @@ /* Alternate gradient, fades to transparent on both sides. */ --uc-gradient-alt: linear-gradient(to right, transparent, var(--uc-bg-color) 25%, var(--uc-bg-color) 75%, transparent); - /* On Linux, the background should be a different colour. */ - @media (-moz-gtk-csd-available) { - &:not(:-moz-lwtheme) { - --uc-bg-color: -moz-accent-color !important; - color: -moz-accent-color-foreground !important; - } - } - /* If the titlebar buttons are on the right, then use the alternate gradient * if the menu bar is not permanently enabled. */ @media (-moz-platform: windows), - (-moz-gtk-csd-available) { - @media not (-moz-gtk-csd-reversed-placement) { - :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #TabsToolbar & { - background: var(--uc-gradient-alt); - } + (-moz-gtk-csd-available) and (not (-moz-gtk-csd-reversed-placement)) { + :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #TabsToolbar & { + background: var(--uc-gradient-alt); } } diff --git a/screenshots/Linux_dark.png b/screenshots/Linux_dark.png new file mode 100644 index 0000000..c94166f Binary files /dev/null and b/screenshots/Linux_dark.png differ diff --git a/screenshots/Linux_light.png b/screenshots/Linux_light.png new file mode 100644 index 0000000..4770f03 Binary files /dev/null and b/screenshots/Linux_light.png differ