diff --git a/README.md b/README.md index 9f846c3..f6debab 100644 --- a/README.md +++ b/README.md @@ -24,13 +24,14 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch **Note: Most frequently tested on macOS** -## Screenshots (Windows) +## Screenshots |Theme|Light|Dark| |-|-|-| -|Default|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)| -|Floating Tabs|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)| -|Mica|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)| -|Mica and Floating Tabs|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)| +|Default (Windows 11)|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)| +|Floating Tabs (Windows 11)|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)| +|Mica (Windows 11)|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)| +|Mica and Floating Tabs (Windows 11)|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)| +|GTK (GNOME 42, [adw-gtk3](https://github.com/lassekongo83/adw-gtk3) theme)|![Light, GTK](screenshots/gtk-light.png)|![Dark, GTK](screenshots/gtk-dark.png)| ## 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`, then restart the browser. diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 4bd7396..8181924 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -21,7 +21,7 @@ --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: #0055D7 !important; - --urlbar-icon-fill-opacity: 1 !important; + --urlbar-icon-fill-opacity: 0.6 !important; --urlbar-popup-url-color: #0072C9 !important; --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important; --urlbar-box-bgcolor: var(--toolbar-field-background-color) !important; @@ -279,3 +279,103 @@ body[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, border-radius: 2px !important; } } + +/* 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; + --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; + --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.9 !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; + --arrowpanel-background: Field !important; + --arrowpanel-color: FieldText !important; + --arrowpanel-border-color: ThreeDShadow !important; + --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !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; + --uc-urlbar-shadow: none; + --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-browding-indicator-hover: var(--button-primary-hover-bgcolor); + --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); + --uc-private-browding-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; + } + } + + @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; + } + } +} diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index 2a6880c..16e0f86 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -60,6 +60,13 @@ browsing indicator) */ --chrome-content-separator-color: #535353 !important; } + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) { + --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important; + --toolbar-field-background-color: Field !important; + } + } + /* remove toolbar bg */ #nav-bar, #PersonalToolbar { diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index 87b8bb6..d31d1f3 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -2,7 +2,7 @@ /* windows 11 style window controls (no known way to detect between windows 10 and 11 so applied to both) */ -@media (-moz-windows-compositor) { +@media (-moz-windows-compositor), (-moz-gtk-csd-available) { .titlebar-min { list-style-image: url("win11-minimize.svg") !important; } diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css index 8123bda..3b9f385 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -65,6 +65,21 @@ background: var(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important; } +@media (-moz-gtk-csd-available) { + :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) { + background: -moz-accent-color !important; + color: -moz-accent-color-foreground !important; + } + + :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):hover { + background:color-mix(in srgb, black 8%, -moz-accent-color) !important; + } + + :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):not([disabled=true]):is([open], [checked], :hover:active) { + background: color-mix(in srgb, black 16%, -moz-accent-color) !important; + } +} + :root[privatebrowsingmode] #nav-bar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack { background: transparent !important; margin-inline: 0 !important; diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index b01192e..a3515f0 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -105,16 +105,18 @@ } /* fix colours */ -#navigator-toolbox:not(:-moz-lwtheme) { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; -} +@media not (-moz-gtk-csd-available) { + #navigator-toolbox:not(:-moz-lwtheme) { + background-color: var(--lwt-accent-color) !important; + color: var(--lwt-text-color) !important; + } -/* force inactive window on default theme */ -@media not (-moz-platform: windows-win7) { - @media not (-moz-platform: windows-win8) { - #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) { - background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; + /* force inactive window on default theme */ + @media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; + } } } } @@ -125,7 +127,7 @@ #TabsToolbar .toolbarbutton-animatable-box, #TabsToolbar .toolbarbutton-1 { - fill: var(--lwt-text-color) !important; + fill: currentColor !important; } .tabbrowser-tab[multiselected]:not(:-moz-lwtheme), diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index 8e70e9e..eeed148 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -13,13 +13,18 @@ --urlbar-box-bgcolor: unset !important; } -#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme), -#searchbar:not(:-moz-lwtheme):focus-within, :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background, :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within { outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important; } +@media not (-moz-gtk-csd-available) { + #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme), + #searchbar:not(:-moz-lwtheme):focus-within { + outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important; + } +} + :root:not([lwtheme-brighttext="true"]) #urlbar-background { box-shadow: var(--uc-urlbar-shadow, none); } @@ -168,26 +173,15 @@ } /* make urlbar icons opaque in default theme */ -@media not (prefers-contrast) { - :is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) :is( - .urlbar-icon:not(#star-button[starred]), - .sharing-icon, - #identity-icon, - .searchbar-search-icon, - #identity-icon-label, - #permissions-granted-icon, - #tracking-protection-icon, - .notification-anchor-icon, - #blocked-permissions-container > .blocked-permission-icon) { - opacity: 0.6 !important; - } -} - #urlbar-input::placeholder, .searchbar-textbox::placeholder { opacity: 0.6 !important; } +:is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) #identity-icon-label { + opacity: var(--urlbar-icon-fill-opacity) !important; +} + /* remove background from urlbar box */ #identity-box[pageproxystate="valid"].notSecureText>.identity-box-button:not(:hover, [open]), #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button:not(:hover, [open]), @@ -219,7 +213,6 @@ } @media not (prefers-reduced-motion) { - :is(#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button, #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button, #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button)::after { diff --git a/screenshots/gtk-dark.png b/screenshots/gtk-dark.png new file mode 100644 index 0000000..ae69701 Binary files /dev/null and b/screenshots/gtk-dark.png differ diff --git a/screenshots/gtk-light.png b/screenshots/gtk-light.png new file mode 100644 index 0000000..fb76432 Binary files /dev/null and b/screenshots/gtk-light.png differ