From 5b944bef1ee9fe24b7707e03f4c2c0bb6c4c0ca5 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Fri, 29 Nov 2024 19:13:29 +0800 Subject: [PATCH] Fixed firefox 133 issues --- src/Monterey/colors/darker.css | 171 ++++++++++++++++++++ src/Monterey/parts/headerbar-urlbar.css | 2 - src/Monterey/parts/tabsbar.css | 10 ++ src/Monterey/right_header_button_3.css | 4 +- src/Monterey/right_header_button_4.css | 4 +- src/Monterey/right_header_button_5.css | 4 +- src/Monterey/theme-alt-darker.css | 36 +++++ src/Monterey/theme-darker.css | 36 +++++ src/WhiteSur/colors/darker.css | 172 +++++++++++++++++++++ src/WhiteSur/parts/headerbar-urlbar.css | 2 - src/WhiteSur/parts/tabsbar.css | 1 + src/WhiteSur/theme-darker.css | 36 +++++ src/common/parts/csd.css | 39 +++-- src/common/parts/headerbar.css | 16 +- src/common/parts/titlebutton-dark-alt.css | 29 +++- src/common/parts/titlebutton-dark.css | 25 +++ src/common/parts/titlebutton-light-alt.css | 32 +++- src/common/parts/titlebutton-light.css | 30 +++- 18 files changed, 611 insertions(+), 38 deletions(-) create mode 100644 src/Monterey/colors/darker.css create mode 100644 src/Monterey/theme-alt-darker.css create mode 100644 src/Monterey/theme-darker.css create mode 100644 src/WhiteSur/colors/darker.css create mode 100644 src/WhiteSur/theme-darker.css diff --git a/src/Monterey/colors/darker.css b/src/Monterey/colors/darker.css new file mode 100644 index 0000000..6aee5e7 --- /dev/null +++ b/src/Monterey/colors/darker.css @@ -0,0 +1,171 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +@media (prefers-color-scheme: dark) { + :root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #1f1f1f; + --gnome-browser-content-box-background: #323232; + --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; + + /* Toolbars */ + --gnome-toolbar-background: #1e1e1e; + --gnome-tabstoolbar-background: #1e1e1e; + --gnome-findbar-background: #282828; + --gnome-toolbar-color: #ffffff; + --gnome-toolbar-icon-fill: #ffffff; + --gnome-toolbar-border-color: #070707; + --gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35); + --gnome-inactive-toolbar-background: #1e1e1e; + --gnome-inactive-toolbar-border-color: #121212; + + /* Sidebar */ + --gnome-sidebar-background: #1e1e1e; + --gnome-inactive-sidebar-background: #3f3f3f; + --gnome-sidebar-border-color: color-mix(in srgb, #ffffff 12%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(40, 40, 40, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-background: rgba(40, 40, 40, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); + --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); + --gnome-popover-separator-color: rgba(255, 255, 255, 0.08); + + /* Header bar */ + --gnome-headerbar-background: #1e1e1e; + --gnome-headerbar-border-color: #070707; + --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); + --gnome-inactive-headerbar-background: #1e1e1e; + --gnome-inactive-headerbar-border-color: #202020; + --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + + /* Buttons */ + --gnome-button-background: #2a2a2a; + --gnome-button-border-color: #282828; + --gnome-button-border-bottom-color: #282828; + --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-hover-color: rgba(255, 255, 255, 0.1); + --gnome-button-active-color: rgba(255, 255, 255, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #242424 0%, #282828 100%); + --gnome-button-active-background: #282828; + --gnome-button-active-border-color: #1b1b1b; + --gnome-button-active-border-bottom-color: #1b1b1b; + --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-disabled-background: linear-gradient(to top, #242424 0%, #494949 100%); + --gnome-button-disabled-border-color: #282828; + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); + --gnome-inactive-button-background: #2a2a2a; + --gnome-inactive-button-border-color: #282828; + --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); + --gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e); + --gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px); + --gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); + --gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px); + --gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05); + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #2a2a2a; + --gnome-urlbar-border-color: #282828; + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); + --gnome-urlbar-color: #ffffff; + --gnome-hover-urlbar-border-color: #585858; + --gnome-inactive-urlbar-background: #2a2a2a; + --gnome-inactive-urlbar-border-color: #282828; + --gnome-inactive-urlbar-box-shadow: none; + --gnome-inactive-urlbar-color: #d6d6d6; + --gnome-focused-urlbar-border-color: #338CBE; + --gnome-focused-urlbar-highlight-color: #006EA0; + --gnome-private-urlbar-background: #25003e; + + /* Tabs */ + --gnome-tabbar-tab-background: rgba(42, 42, 42, .25); + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-hover-background: #282828; + --gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b; + --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); + --gnome-tabbar-tab-active-background: #2a2a2a; + --gnome-tabbar-tab-active-border-bottom-color: #15539e; + --gnome-tabbar-tab-active-color: #ffffff; + --gnome-tabbar-tab-active-hover-background: #525252; + --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); + --gnome-inactive-tabbar-tab-background: var(--gnome-tabbar-tab-background); + --gnome-inactive-tabbar-tab-active-background: rgb(50, 50, 50); + --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); + --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + --gnome-tab-attention-icon-color: #718be8; + + /* Switch */ + --gnome-switch-background: #464646; + --gnome-switch-hover-background: #525252; + --gnome-switch-active-background: #606060; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #ffffff; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ + --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ + + /* Private window colors */ + --gnome-private-accent: #78aeed; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #1e1e1e; + /* Header bar */ + --gnome-private-headerbar-background: #252F49; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #FBFBFE; + + /* New private tab background */ + --gnome-private-in-content-page-background: #1f1f1f; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #FBFBFE; + } +} diff --git a/src/Monterey/parts/headerbar-urlbar.css b/src/Monterey/parts/headerbar-urlbar.css index e57379b..ced6279 100644 --- a/src/Monterey/parts/headerbar-urlbar.css +++ b/src/Monterey/parts/headerbar-urlbar.css @@ -45,8 +45,6 @@ toolbarspring { } #urlbar[breakout][breakout-extend] { - left: 0 !important; - top: 0 !important; width: 360px !important; z-index: 5 !important; padding: 0 !important; diff --git a/src/Monterey/parts/tabsbar.css b/src/Monterey/parts/tabsbar.css index cdbe3e9..925a2f9 100644 --- a/src/Monterey/parts/tabsbar.css +++ b/src/Monterey/parts/tabsbar.css @@ -7,10 +7,20 @@ -moz-window-dragging: drag; } +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { + margin-inline-start: 6px !important; +} + tab > stack { margin: 0 3px !important; } +/* Tabs bar height */ +#tabbrowser-tabs { + --tab-min-height: 32px !important; + --tabstrip-min-height: 32px !important; +} + .tabbrowser-tab, .tab-background { border: none !important; diff --git a/src/Monterey/right_header_button_3.css b/src/Monterey/right_header_button_3.css index 762d01c..0b182c9 100644 --- a/src/Monterey/right_header_button_3.css +++ b/src/Monterey/right_header_button_3.css @@ -1,10 +1,10 @@ #TabsToolbar, #urlbar-container { - margin-right: 14vw !important; + margin-right: 16vw !important; } /* Left window titlebuttons mode */ @media (-moz-gtk-csd-reversed-placement) { #TabsToolbar, #urlbar-container { - margin-right: 10vw !important; + margin-right: 12vw !important; } } diff --git a/src/Monterey/right_header_button_4.css b/src/Monterey/right_header_button_4.css index 0b182c9..f69712a 100644 --- a/src/Monterey/right_header_button_4.css +++ b/src/Monterey/right_header_button_4.css @@ -1,10 +1,10 @@ #TabsToolbar, #urlbar-container { - margin-right: 16vw !important; + margin-right: 18vw !important; } /* Left window titlebuttons mode */ @media (-moz-gtk-csd-reversed-placement) { #TabsToolbar, #urlbar-container { - margin-right: 12vw !important; + margin-right: 14vw !important; } } diff --git a/src/Monterey/right_header_button_5.css b/src/Monterey/right_header_button_5.css index f69712a..63ff390 100644 --- a/src/Monterey/right_header_button_5.css +++ b/src/Monterey/right_header_button_5.css @@ -1,10 +1,10 @@ #TabsToolbar, #urlbar-container { - margin-right: 18vw !important; + margin-right: 20vw !important; } /* Left window titlebuttons mode */ @media (-moz-gtk-csd-reversed-placement) { #TabsToolbar, #urlbar-container { - margin-right: 14vw !important; + margin-right: 16vw !important; } } diff --git a/src/Monterey/theme-alt-darker.css b/src/Monterey/theme-alt-darker.css new file mode 100644 index 0000000..8d10696 --- /dev/null +++ b/src/Monterey/theme-alt-darker.css @@ -0,0 +1,36 @@ +@import "parts/toolbox-alt.css"; +@import "parts/buttons.css"; +@import "parts/entries.css"; +@import "parts/controls.css"; +@import "parts/headerbar-urlbar-alt.css"; +@import "parts/headerbar-private-urlbar.css"; +@import "parts/headerbar.css"; +@import "parts/csd.css"; +@import "parts/titlebutton-light.css"; +@import "parts/titlebutton-dark.css"; +@import "parts/popups.css"; +@import "parts/tabsbar-alt.css"; +@import "parts/findbar.css"; +@import "parts/sidebar.css"; +@import "parts/dialogs.css"; +@import "parts/notification.css"; +@import "parts/video-player.css"; +@import "parts/remove-white-flash.css"; +@import "parts/icons.css"; +@import "colors/light.css"; +@import "colors/darker.css"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* Set theme version text in customization panel */ +#customization-footer::before { + background: url(icons/icon.svg) no-repeat; + background-size: contain; + content: "Firefox Monterey theme"; + padding: 10px 10px 10px 50px; +} + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; + background-image: none !important; +} diff --git a/src/Monterey/theme-darker.css b/src/Monterey/theme-darker.css new file mode 100644 index 0000000..0f0d2e5 --- /dev/null +++ b/src/Monterey/theme-darker.css @@ -0,0 +1,36 @@ +@import "parts/toolbox.css"; +@import "parts/buttons.css"; +@import "parts/entries.css"; +@import "parts/controls.css"; +@import "parts/headerbar-urlbar.css"; +@import "parts/headerbar-private-urlbar.css"; +@import "parts/headerbar.css"; +@import "parts/csd.css"; +@import "parts/titlebutton-light.css"; +@import "parts/titlebutton-dark.css"; +@import "parts/popups.css"; +@import "parts/tabsbar.css"; +@import "parts/findbar.css"; +@import "parts/sidebar.css"; +@import "parts/dialogs.css"; +@import "parts/notification.css"; +@import "parts/video-player.css"; +@import "parts/remove-white-flash.css"; +@import "parts/icons.css"; +@import "colors/light.css"; +@import "colors/darker.css"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* Set theme version text in customization panel */ +#customization-footer::before { + background: url(icons/icon.svg) no-repeat; + background-size: contain; + content: "Firefox Monterey theme"; + padding: 10px 10px 10px 50px; +} + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; + background-image: none !important; +} diff --git a/src/WhiteSur/colors/darker.css b/src/WhiteSur/colors/darker.css new file mode 100644 index 0000000..c86ac32 --- /dev/null +++ b/src/WhiteSur/colors/darker.css @@ -0,0 +1,172 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +@media (prefers-color-scheme: dark) { + :root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #1f1f1f; + --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; + + /* Toolbars */ + --gnome-toolbar-background: #1e1e1e; + --gnome-tabstoolbar-background: #1e1e1e; + --gnome-findbar-background: #282828; + --gnome-toolbar-color: #ffffff; + --gnome-toolbar-icon-fill: #ffffff; + --gnome-toolbar-border-color: #070707; + --gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35); + --gnome-inactive-toolbar-background: #1e1e1e; + --gnome-inactive-toolbar-border-color: #121212; + + /* Sidebar */ + --sidebar-background-color: #323232 !important; + --gnome-sidebar-background: #1e1e1e; + --gnome-inactive-sidebar-background: #3f3f3f; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(40, 40, 40, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-background: rgba(40, 40, 40, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); + --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); + --gnome-popover-separator-color: rgba(255, 255, 255, 0.08); + + /* Header bar */ + --gnome-headerbar-background: #1e1e1e; + --gnome-headerbar-border-color: #070707; + --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); + --gnome-inactive-headerbar-background: #1e1e1e; + --gnome-inactive-headerbar-border-color: #202020; + --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + + /* Buttons */ + --gnome-button-background: #2a2a2a; + --gnome-button-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-hover-color: rgba(255, 255, 255, 0.1); + --gnome-button-active-color: rgba(255, 255, 255, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #242424 0%, #282828 100%); + --gnome-button-active-background: #282828; + --gnome-button-active-border-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-disabled-background: linear-gradient(to top, #242424 0%, #494949 100%); + --gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); + --gnome-inactive-button-background: #2a2a2a; + --gnome-inactive-button-border-color: #282828; + --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); + --gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e); + --gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px); + --gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); + --gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px); + --gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05); + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #2a2a2a; + --gnome-urlbar-border-color: rgba(0, 0, 0, 0.2); + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); + --gnome-urlbar-color: #ffffff; + --gnome-hover-urlbar-border-color: #585858; + --gnome-inactive-urlbar-background: #2a2a2a; + --gnome-inactive-urlbar-border-color: #282828; + --gnome-inactive-urlbar-box-shadow: none; + --gnome-inactive-urlbar-color: #d6d6d6; + --gnome-focused-urlbar-border-color: #338CBE; + --gnome-focused-urlbar-highlight-color: #006EA0; + --gnome-private-urlbar-background: #25003e; + + /* Tabs */ + --gnome-tabbar-tab-background: #2a2a2a; + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-border-color: #1e1e1e; + --gnome-tabbar-tab-hover-background: #282828; + --gnome-tabbar-tab-hover-border-color: #1e1e1e; + --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); + --gnome-tabbar-tab-active-background: #1e1e1e; + --gnome-tabbar-tab-active-border-color: #070707; + --gnome-tabbar-tab-active-color: #ffffff; + --gnome-tabbar-tab-active-hover-background: #1e1e1e; + --gnome-inactive-tabbar-tab-color: var(--gnome-tabbar-tab-color); + --gnome-inactive-tabbar-tab-background: var(--gnome-tabbar-tab-background); + --gnome-inactive-tabbar-tab-active-background: var(--gnome-tabbar-tab-active-background); + --gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color); + --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + --gnome-tab-attention-icon-color: #718be8; + + /* Switch */ + --gnome-switch-background: #464646; + --gnome-switch-hover-background: #525252; + --gnome-switch-active-background: #606060; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #ffffff; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ + --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ + + /* Private window colors */ + --gnome-private-accent: #78aeed; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #1e1e1e; + /* Header bar */ + --gnome-private-headerbar-background: #252F49; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #FBFBFE; + + /* New private tab background */ + --gnome-private-in-content-page-background: #1f1f1f; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #FBFBFE; + } +} diff --git a/src/WhiteSur/parts/headerbar-urlbar.css b/src/WhiteSur/parts/headerbar-urlbar.css index de2b518..23ddd5e 100644 --- a/src/WhiteSur/parts/headerbar-urlbar.css +++ b/src/WhiteSur/parts/headerbar-urlbar.css @@ -40,8 +40,6 @@ toolbarspring { } #urlbar[breakout][breakout-extend] { - left: 0 !important; - top: 0 !important; width: 100% !important; z-index: 5 !important; padding: 0 !important; diff --git a/src/WhiteSur/parts/tabsbar.css b/src/WhiteSur/parts/tabsbar.css index 116c3ac..dd530c0 100644 --- a/src/WhiteSur/parts/tabsbar.css +++ b/src/WhiteSur/parts/tabsbar.css @@ -9,6 +9,7 @@ /* Tabs bar height */ #tabbrowser-tabs { --tab-min-height: 32px !important; + --tabstrip-min-height: 32px !important; } #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { diff --git a/src/WhiteSur/theme-darker.css b/src/WhiteSur/theme-darker.css new file mode 100644 index 0000000..6fd91d4 --- /dev/null +++ b/src/WhiteSur/theme-darker.css @@ -0,0 +1,36 @@ +@import "parts/toolbox.css"; +@import "parts/buttons.css"; +@import "parts/entries.css"; +@import "parts/controls.css"; +@import "parts/headerbar-urlbar.css"; +@import "parts/headerbar-private-urlbar.css"; +@import "parts/headerbar.css"; +@import "parts/csd.css"; +@import "parts/titlebutton-light.css"; +@import "parts/titlebutton-dark.css"; +@import "parts/popups.css"; +@import "parts/tabsbar.css"; +@import "parts/findbar.css"; +@import "parts/sidebar.css"; +@import "parts/dialogs.css"; +@import "parts/notification.css"; +@import "parts/video-player.css"; +@import "parts/remove-white-flash.css"; +@import "parts/icons.css"; +@import "colors/light.css"; +@import "colors/darker.css"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* Set theme version text in customization panel */ +#customization-footer::before { + background: url("icons/icon.svg") no-repeat; + background-size: contain; + content: "Firefox WhiteSur theme"; + padding: 10px 10px 10px 50px; +} + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; + background-image: none !important; +} diff --git a/src/common/parts/csd.css b/src/common/parts/csd.css index e70e288..baa3cf6 100644 --- a/src/common/parts/csd.css +++ b/src/common/parts/csd.css @@ -5,8 +5,8 @@ /* Headerbar top border corners rounded */ :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) { #nav-bar { - border-top-left-radius: 12px !important; - border-top-right-radius: 12px !important; + border-top-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important; + border-top-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important; box-shadow: var(--gnome-headerbar-box-shadow) !important; } @@ -21,16 +21,30 @@ body::backdrop, dialog::backdrop { /* Use an uniform clip to allow WebRender to optimize it better */ - border-radius: 12px !important; + border-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important; } window[role="dialog"] { - border-bottom-left-radius: 12px !important; - border-bottom-right-radius: 12px !important; + border-bottom-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important; + border-bottom-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important; } } } +:root[tabsintitlebar] { + /* Always show nav bar window buttons*/ + #nav-bar > .titlebar-buttonbox-container { + display: flex !important; + } + + #toolbar-menubar, #TabsToolbar { + /* Always hide menu bar window buttons*/ + & > .titlebar-buttonbox-container { + display: none !important; + } + } +} + /* Window buttons: at least 1 button */ @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { @@ -58,6 +72,7 @@ } /* Window buttons box */ +:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container, :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container, :root[tabsintitlebar] #titlebar-buttonbox-container, :root[tabsintitlebar][inFullscreen] #window-controls { @@ -68,11 +83,13 @@ top: 0; display: block !important; } +:root[tabsintitlebar] #nav-bar .titlebar-buttonbox, :root[tabsintitlebar] #titlebar .titlebar-buttonbox { -moz-appearance: none !important; } /* Window buttons style */ +:root[tabsintitlebar] #nav-bar .titlebar-button, :root[tabsintitlebar] #titlebar .titlebar-button, :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { -moz-appearance: none !important; @@ -82,7 +99,9 @@ margin: 16px 4px !important; padding: 2px 0 !important; width: 16px; + --inactive-titlebar-opacity: 1 !important; } +:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-button, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button, :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { height: 24px !important; @@ -90,10 +109,10 @@ margin: 12px 4px !important; padding: 0 !important; } +:root[tabsintitlebar] #nav-bar .titlebar-button .toolbarbutton-icon, +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon, -:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { - opacity: 0 !important; -} +:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { opacity: 0 !important; @@ -103,7 +122,9 @@ :root[tabsintitlebar][inFullscreen] #window-controls #close-button, :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close, -:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min { +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min, +:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-close, +:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-min { display: none !important; } diff --git a/src/common/parts/headerbar.css b/src/common/parts/headerbar.css index 55669c2..c3e6456 100644 --- a/src/common/parts/headerbar.css +++ b/src/common/parts/headerbar.css @@ -12,7 +12,7 @@ } /* Headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button), toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { border: none !important; box-shadow: none !important; @@ -27,7 +27,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { transition: background 200ms; } -:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button) { +:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button) { background: none !important; } @@ -43,7 +43,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { } /* Hover headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([open]):not([disabled]):not([checked]):hover, +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([open]):not([disabled]):not([checked]):hover, #TabsToolbar .toolbarbutton-1:hover, #tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover { outline: 0 !important; @@ -51,16 +51,16 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { } /* Active headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]):not(#hack):active, -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[open], -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[checked], +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled]):not(#hack):active, +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[open], +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[checked], #TabsToolbar .toolbarbutton-1:active, #TabsToolbar .toolbarbutton-1[open], #tabs-newtab-button:active, #TabsToolbar #new-tab-button:active { background: var(--gnome-headerbar-button-active-background) !important; } /* Disabled headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] { +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button)[disabled] { background: transparent !important; border-color: var(--gnome-button-disabled-border-color) !important; box-shadow: none !important; @@ -68,7 +68,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { } /* Inactive window buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):-moz-window-inactive { +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):-moz-window-inactive { background: var(--gnome-inactive-button-background) !important; box-shadow: var(--gnome-inactive-button-box-shadow) !important; border-color: var(--gnome-inactive-button-border-color) !important; diff --git a/src/common/parts/titlebutton-dark-alt.css b/src/common/parts/titlebutton-dark-alt.css index c27c7fe..c4baaf4 100644 --- a/src/common/parts/titlebutton-dark-alt.css +++ b/src/common/parts/titlebutton-dark-alt.css @@ -1,116 +1,141 @@ @media (prefers-color-scheme: dark) { +:root[tabsintitlebar] #nav-bar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar #titlebar-close { background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar #titlebar-min { background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-hover-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-hover-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-hover-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar #titlebar-close:active { background: url("../titlebuttons/titlebutton-close-active-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-maximize-active-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar #titlebar-min:active { - background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat; + background: url("../titlebuttons/titlebutton-minimize-active-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-unmaximize-active-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-backdrop-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-backdrop-dark-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark-alt.svg") no-repeat; background-size: contain; } :root[tabsintitlebar][inFullscreen] #window-controls #restore-button { - background: url("../titlebuttons/titlebutton-unmaximize-dark.svg") no-repeat; + background: url("../titlebuttons/titlebutton-unmaximize-dark-alt.svg") no-repeat; background-size: contain; } :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { diff --git a/src/common/parts/titlebutton-dark.css b/src/common/parts/titlebutton-dark.css index 6d2de62..d129500 100644 --- a/src/common/parts/titlebutton-dark.css +++ b/src/common/parts/titlebutton-dark.css @@ -1,109 +1,134 @@ @media (prefers-color-scheme: dark) { +:root[tabsintitlebar] #nav-bar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar #titlebar-close { background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar #titlebar-min { background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-hover-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-hover-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-hover-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar #titlebar-close:active { background: url("../titlebuttons/titlebutton-close-active-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-maximize-active-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar #titlebar-min:active { background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-unmaximize-active-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark.svg") no-repeat; diff --git a/src/common/parts/titlebutton-light-alt.css b/src/common/parts/titlebutton-light-alt.css index ec7ceae..e169c39 100644 --- a/src/common/parts/titlebutton-light-alt.css +++ b/src/common/parts/titlebutton-light-alt.css @@ -1,118 +1,140 @@ +:root[tabsintitlebar] #nav-bar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar #titlebar-close { background: url("../titlebuttons/titlebutton-close.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar #titlebar-min { background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-hover-alt.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-hover-alt.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-hover-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar #titlebar-close:active { background: url("../titlebuttons/titlebutton-close-active-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-maximize-active-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar #titlebar-min:active { background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-unmaximize-active-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover, +:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-backdrop-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-backdrop-alt.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-backdrop-alt.svg") no-repeat; background-size: contain; } :root[tabsintitlebar][inFullscreen] #window-controls #restore-button { - background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; + background: url("../titlebuttons/titlebutton-unmaximize-alt.svg") no-repeat; background-size: contain; } :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { diff --git a/src/common/parts/titlebutton-light.css b/src/common/parts/titlebutton-light.css index 8364e19..5e9f7e4 100644 --- a/src/common/parts/titlebutton-light.css +++ b/src/common/parts/titlebutton-light.css @@ -1,111 +1,133 @@ +:root[tabsintitlebar] #nav-bar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar #titlebar-close { background: url("../titlebuttons/titlebutton-close.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar #titlebar-min { background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-hover.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-hover.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat; - background-color: transparent !important; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-hover.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar #titlebar-close:active { background: url("../titlebuttons/titlebutton-close-active.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-maximize-active.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar #titlebar-min:active { background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { background: url("../titlebuttons/titlebutton-unmaximize-active.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background-size: contain; } -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover, +:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { background: url("../titlebuttons/titlebutton-close-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-maximize-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat; background-size: contain; } +:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, +:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { background: url("../titlebuttons/titlebutton-unmaximize-backdrop.svg") no-repeat;