diff --git a/src/other/firefox/Monterey/colors/dark-adaptive.css b/src/other/firefox/Monterey/colors/dark-adaptive.css index ac05ab3e..da066fb7 100644 --- a/src/other/firefox/Monterey/colors/dark-adaptive.css +++ b/src/other/firefox/Monterey/colors/dark-adaptive.css @@ -24,39 +24,41 @@ --gnome-findbar-background: var(--lwt-accent-color, #363636); --gnome-toolbar-color: var(--toolbar-color, #ffffff); --gnome-toolbar-icon-fill: var(--toolbar-color, #ffffff); - --gnome-toolbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-toolbar-border-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-inactive-toolbar-color: color-mix(in srgb, var(--gnome-toolbar-color) 45%, var(--gnome-toolbar-background)); --gnome-inactive-toolbar-background: var(--lwt-accent-color, #363636); - --gnome-inactive-toolbar-border-color: var(--chrome-content-separator-color); + --gnome-inactive-toolbar-border-color: color-mix(in srgb, currentColor 10%, transparent); /* Sidebar */ --gnome-sidebar-background: var(--lwt-accent-color, #282828); --gnome-inactive-sidebar-background: var(--lwt-accent-color, #282828); + --gnome-sidebar-border-color: color-mix(in srgb, var(--toolbar-color) 10%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-menu-border-color: rgba(0, 0, 0, 0.75); + --gnome-menu-border-color: color-mix(in srgb, currentColor 75%, transparent); --gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-popover-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-border-color: color-mix(in srgb, currentColor 75%, transparent); --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75); - --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); + --gnome-popover-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-popover-button-active-background: color-mix(in srgb, currentColor 15%, transparent); + --gnome-popover-separator-color: color-mix(in srgb, currentColor 8%, transparent); /* Header bar */ - --gnome-headerbar-background: var(--lwt-accent-color); - --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-headerbar-background: var(--lwt-accent-color, #363636); + --gnome-headerbar-border-color: color-mix(in srgb, currentColor 12%, transparent); --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); - --gnome-inactive-headerbar-background: var(--lwt-accent-color); - --gnome-inactive-headerbar-border-color: rgba(255, 255, 255, 0.1); - --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-inactive-headerbar-background: var(--lwt-accent-color, #363636); + --gnome-inactive-headerbar-border-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-inactive-headerbar-box-shadow: color-mix(in srgb, currentColor 8%, transparent); /* Buttons */ --gnome-button-background: color-mix(in srgb, #ffffff 15%, var(--toolbar-field-background-color)); --gnome-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color)); --gnome-button-border-bottom-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color)); --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-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-color: color-mix(in srgb, currentColor 20%, transparent); --gnome-button-hover-background: color-mix(in srgb, #ffffff 25%, var(--toolbar-field-background-color)); --gnome-button-active-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color)); --gnome-button-active-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color)); @@ -85,38 +87,38 @@ --gnome-button-destructive-action-active-border-color: #851015; --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); + --gnome-headerbar-button-combined-background: color-mix(in srgb, currentColor 6%, transparent); + --gnome-headerbar-button-hover-background: color-mix(in srgb, currentColor 12%, transparent); + --gnome-headerbar-button-active-background: color-mix(in srgb, currentColor 18%, transparent); /* URL bar */ - --gnome-urlbar-background: rgba(255, 255, 255, 0.1); - --gnome-urlbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-urlbar-color: var(--toolbar-color, #ffffff); + --gnome-urlbar-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --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: var(--toolbar-field-color); - --gnome-hover-urlbar-border-color: rgba(255, 255, 255, 0.1); - --gnome-inactive-urlbar-background: var(--toolbar-field-background-color); - --gnome-inactive-urlbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-hover-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-inactive-urlbar-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-inactive-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-urlbar-box-shadow: none; - --gnome-inactive-urlbar-color: var(--toolbar-field-color); + --gnome-inactive-urlbar-color: color-mix(in srgb, currentColor 45%, transparent); --gnome-focused-urlbar-border-color: #338CBE; --gnome-focused-urlbar-highlight-color: #006EA0; --gnome-private-urlbar-background: var(--toolbar-field-background-color); /* Tabs */ + --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #ffffff)); --gnome-tabbar-tab-background: var(--lwt-accent-color, #363636); - --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #dfdfdf)); --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); - --gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--lwt-accent-color, #363636)); + --gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--gnome-tabbar-tab-background)); --gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-color: var(--lwt-tab-text, var(--toolbar-color)); - --gnome-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 15%, var(--lwt-accent-color, #363636)); - --gnome-tabbar-tab-active-border-color: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--lwt-accent-color, #363636)); + --gnome-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 15%, var(--gnome-tabbar-tab-background)); + --gnome-tabbar-tab-active-border-color: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--gnome-tabbar-tab-background)); --gnome-tabbar-tab-active-color: var(--lwt-tab-text, var(--toolbar-color)); - --gnome-tabbar-tab-active-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 20%, var(--lwt-accent-color, #363636)); + --gnome-tabbar-tab-active-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 20%, var(--gnome-tabbar-tab-background)); --gnome-inactive-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color)); --gnome-inactive-tabbar-tab-background: var(--gnome-tabstoolbar-background); - --gnome-inactive-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 8%, var(--lwt-accent-color, #363636)); + --gnome-inactive-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 8%, var(--gnome-tabbar-tab-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; diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index 98fd35a0..2e96240c 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -27,6 +27,7 @@ /* Sidebar */ --gnome-sidebar-background: #3b3b3b; --gnome-inactive-sidebar-background: #3f3f3f; + --gnome-sidebar-border-color: color-mix(in srgb, #ffffff 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: rgba(51, 51, 51, 0.95); diff --git a/src/other/firefox/Monterey/colors/light-adaptive.css b/src/other/firefox/Monterey/colors/light-adaptive.css index 346a3fb2..7194d765 100644 --- a/src/other/firefox/Monterey/colors/light-adaptive.css +++ b/src/other/firefox/Monterey/colors/light-adaptive.css @@ -31,42 +31,43 @@ /* Sidebar */ --gnome-sidebar-background: var(--lwt-accent-color, #ffffff); --gnome-inactive-sidebar-background: var(--lwt-accent-color, #ffffff); + --gnome-sidebar-border-color: color-mix(in srgb, var(--toolbar-color) 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-menu-border-color: rgba(0, 0, 0, 0.12); + --gnome-menu-border-color: color-mix(in srgb, currentColor 12%, transparent); --gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-popover-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-border-color: color-mix(in srgb, currentColor 12%, transparent); --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12); - --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); - --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + --gnome-popover-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-popover-button-active-background: color-mix(in srgb, currentColor 20%, transparent); + --gnome-popover-separator-color: color-mix(in srgb, currentColor 10%, transparent); /* Header bar */ - --gnome-headerbar-background: var(--lwt-accent-color); - --gnome-headerbar-border-color: rgba(0, 0, 0, 0.12); - --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; - --gnome-inactive-headerbar-background: var(--lwt-accent-color); - --gnome-inactive-headerbar-border-color: rgba(0, 0, 0, 0.12); - --gnome-inactive-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset; + --gnome-headerbar-background: var(--lwt-accent-color, #ffffff); + --gnome-headerbar-border-color: color-mix(in srgb, currentColor 12%, transparent); + --gnome-headerbar-box-shadow: 0 1px rgba(var(--lwt-accent-color), 0.65) inset; + --gnome-inactive-headerbar-background: var(--lwt-accent-color, #ffffff); + --gnome-inactive-headerbar-border-color: color-mix(in srgb, currentColor 12%, transparent); + --gnome-inactive-headerbar-box-shadow: 0 1px rgba(var(--lwt-accent-color), 0.35) inset; /* Buttons */ - --gnome-button-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color)); - --gnome-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); - --gnome-button-border-bottom-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color)); - --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.75), 0 1px 2px rgba(0, 0, 0, 0.03); - --gnome-button-hover-color: rgba(0, 0, 0, 0.1); - --gnome-button-active-color: rgba(0, 0, 0, 0.2); - --gnome-button-hover-background: #ffffff; - --gnome-button-active-background: color-mix(in srgb, #000000 10%, var(--toolbar-field-background-color)); - --gnome-button-active-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); - --gnome-button-active-bottom-border-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color)); + --gnome-button-background: color-mix(in srgb, var(--lwt-accent-color, #ffffff) 35%, transparent); + --gnome-button-border-color: color-mix(in srgb, currentColor 15%, transparent); + --gnome-button-border-bottom-color: color-mix(in srgb, currentColor 20%, transparent); + --gnome-button-box-shadow: inset 0 1px color-mix(in srgb, var(--lwt-accent-color, #ffffff) 50%, transparent), 0 1px 2px rgba(0, 0, 0, 0.03); + --gnome-button-hover-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-color: color-mix(in srgb, currentColor 20%, transparent); + --gnome-button-hover-background: var(--lwt-accent-color, #ffffff); + --gnome-button-active-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-border-color: color-mix(in srgb, currentColor 15%, transparent); + --gnome-button-active-bottom-border-color: color-mix(in srgb, currentColor 20%, transparent); --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-button-disabled-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color)); - --gnome-button-disabled-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); + --gnome-button-disabled-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-button-disabled-border-color: color-mix(in srgb, currentColor 15%, transparent); --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-inactive-button-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color)); - --gnome-inactive-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); + --gnome-inactive-button-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-inactive-button-border-color: color-mix(in srgb, currentColor 15%, transparent); --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); --gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4); --gnome-button-suggested-action-border-color: #1b6acb; @@ -85,27 +86,27 @@ --gnome-button-destructive-action-active-border-color: #b2161d; --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05); - --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + --gnome-headerbar-button-combined-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-headerbar-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-headerbar-button-active-background: color-mix(in srgb, currentColor 15%, transparent); /* URL bar */ - --gnome-urlbar-background: rgba(0, 0, 0, 0.05); - --gnome-urlbar-border-color: rgba(0, 0, 0, 0.1); + --gnome-urlbar-color: var(--toolbar-color, #2e2e2e); + --gnome-urlbar-background: color-mix(in srgb, currentColor 8%, transparent); + --gnome-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); - --gnome-urlbar-color: var(--toolbar-field-color); - --gnome-hover-urlbar-border-color: rgba(0, 0, 0, 0.1); - --gnome-inactive-urlbar-background: var(--toolbar-field-background-color); - --gnome-inactive-urlbar-border-color: rgba(0, 0, 0, 0.1); + --gnome-hover-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-inactive-urlbar-background: color-mix(in srgb, currentColor 4%, transparent); + --gnome-inactive-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); - --gnome-inactive-urlbar-color: var(--toolbar-field-color); + --gnome-inactive-urlbar-color: color-mix(in srgb, currentColor 45%, transparent); --gnome-focused-urlbar-border-color: #5683DA; --gnome-focused-urlbar-highlight-color: #6592E9; --gnome-private-urlbar-background: var(--toolbar-field-background-color); /* Tabs */ --gnome-tabbar-tab-background: var(--gnome-tabstoolbar-background); - --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color)); + --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #2e2e2e)); --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--toolbar-color) 5%, var(--gnome-tabstoolbar-background)); --gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color); diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css index 91826303..528658a2 100644 --- a/src/other/firefox/Monterey/colors/light.css +++ b/src/other/firefox/Monterey/colors/light.css @@ -27,6 +27,7 @@ /* Sidebar */ --gnome-sidebar-background: #f5f5f5; --gnome-inactive-sidebar-background: #f9f9f8; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: rgba(255, 255, 255, 0.95); diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css index 933e1c44..e86c4b16 100644 --- a/src/other/firefox/Monterey/parts/tabsbar-alt.css +++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css @@ -7,15 +7,28 @@ } /* Tabs bar height */ + +#TabsToolbar { + min-height: 32px !important; +} + +#TabsToolbar-customization-target { + padding-bottom: 6px !important; +} + #tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { - min-height: 36px !important; - --tab-min-height: 36px !important; + min-height: 32px !important; + --tab-min-height: 32px !important; +} + +#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + max-height: 32px !important; } .tab-background, .tab-stack { - height: 36px !important; - min-height: 36px !important; + height: 32px !important; + min-height: 32px !important; } tab > stack { @@ -209,8 +222,8 @@ tab[selected]:-moz-window-inactive .tab-label { .close-icon { height: 16px !important; - padding: 0 !important; width: 16px !important; + padding: 0 !important; } .tab-close-button { @@ -234,11 +247,6 @@ tab[selected]:-moz-window-inactive .tab-label { visibility: visible; } -@media (prefers-color-scheme: dark) { - .tab-close-button { - list-style-image: url("../icons/window-close-symbolic-light.svg") !important; - } -} :root:-moz-window-inactive .tab-close-button:not(#hack) { opacity: .18 !important; } @@ -308,6 +316,7 @@ tab[selected]:-moz-window-inactive .tab-label { #TabsToolbar .toolbarbutton-1, #tabs-newtab-button, #TabsToolbar #new-tab-button { + min-height: 32px !important; margin: 0 2px !important; padding: 0 10px !important; border-radius: 8px !important; @@ -324,7 +333,7 @@ tab[selected]:-moz-window-inactive .tab-label { #TabsToolbar #scrollbutton-up, #TabsToolbar #scrollbutton-down { - height: 36px !important; + height: 32px !important; } #TabsToolbar #scrollbutton-up image, diff --git a/src/other/firefox/Monterey/parts/toolbox-alt.css b/src/other/firefox/Monterey/parts/toolbox-alt.css index b33bb1a2..ead6afe7 100644 --- a/src/other/firefox/Monterey/parts/toolbox-alt.css +++ b/src/other/firefox/Monterey/parts/toolbox-alt.css @@ -90,20 +90,6 @@ findbar:-moz-window-inactive { #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100; order: 100; - padding-bottom: 6px !important; -} - -/* Sidebar */ -#sidebar-box, #sidebar, -.sidebar-panel[lwt-sidebar] { - color: var(--gnome-toolbar-color) !important; - background: var(--gnome-toolbar-background) !important; -} - -.sidebar-splitter { - width: 1px !important; - background-color: var(--gnome-toolbar-border-color) !important; - border: none !important; } /* Customization page */ diff --git a/src/other/firefox/Monterey/parts/toolbox.css b/src/other/firefox/Monterey/parts/toolbox.css index a2d8a824..ea014072 100644 --- a/src/other/firefox/Monterey/parts/toolbox.css +++ b/src/other/firefox/Monterey/parts/toolbox.css @@ -17,16 +17,9 @@ border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; } -findbar { - border: none !important; - background: var(--gnome-findbar-background) !important; - border-top: 1px solid var(--gnome-toolbar-border-color) !important; -} - #nav-bar:-moz-window-inactive, #PersonalToolbar:-moz-window-inactive, #toolbar-menubar:-moz-window-inactive, -findbar:-moz-window-inactive, #titlebar:-moz-window-inactive { background: var(--gnome-inactive-toolbar-background) !important; } @@ -101,19 +94,6 @@ findbar:-moz-window-inactive, --bookmarks-toolbar-overlapping-browser-height: auto; } -/* Sidebar */ -#sidebar-box, #sidebar, -.sidebar-panel[lwt-sidebar] { - color: var(--gnome-toolbar-color) !important; - background: var(--gnome-toolbar-background) !important; -} - -.sidebar-splitter { - width: 1px !important; - background-color: var(--gnome-toolbar-border-color) !important; - border: none !important; -} - /* Customization page */ #customization-container:-moz-lwtheme { background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important; diff --git a/src/other/firefox/Monterey/theme-adaptive.css b/src/other/firefox/Monterey/theme-adaptive.css index 37142746..348ac488 100644 --- a/src/other/firefox/Monterey/theme-adaptive.css +++ b/src/other/firefox/Monterey/theme-adaptive.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/Monterey/theme-alt-adaptive.css b/src/other/firefox/Monterey/theme-alt-adaptive.css index 30d10d6e..4e477f3b 100644 --- a/src/other/firefox/Monterey/theme-alt-adaptive.css +++ b/src/other/firefox/Monterey/theme-alt-adaptive.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/Monterey/theme-alt.css b/src/other/firefox/Monterey/theme-alt.css index be6a30f9..1e4b73a1 100644 --- a/src/other/firefox/Monterey/theme-alt.css +++ b/src/other/firefox/Monterey/theme-alt.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/Monterey/theme.css b/src/other/firefox/Monterey/theme.css index 7a687dfc..9aed820f 100644 --- a/src/other/firefox/Monterey/theme.css +++ b/src/other/firefox/Monterey/theme.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/WhiteSur/colors/dark-adaptive.css b/src/other/firefox/WhiteSur/colors/dark-adaptive.css index 0953b228..149151b5 100644 --- a/src/other/firefox/WhiteSur/colors/dark-adaptive.css +++ b/src/other/firefox/WhiteSur/colors/dark-adaptive.css @@ -31,6 +31,7 @@ /* Sidebar */ --gnome-sidebar-background: var(--lwt-accent-color, #282828); --gnome-inactive-sidebar-background: var(--lwt-accent-color, #282828); + --gnome-sidebar-border-color: color-mix(in srgb, var(--toolbar-color) 10%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); @@ -38,16 +39,16 @@ --gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); --gnome-popover-border-color: rgba(0, 0, 0, 0.75); --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75); - --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); + --gnome-popover-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-popover-button-active-background: color-mix(in srgb, currentColor 15%, transparent); + --gnome-popover-separator-color: color-mix(in srgb, currentColor 8%, transparent); /* Header bar */ - --gnome-headerbar-background: var(--lwt-accent-color); - --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-headerbar-background: var(--lwt-accent-color, #363636); + --gnome-headerbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); --gnome-inactive-headerbar-background: var(--lwt-accent-color); - --gnome-inactive-headerbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-inactive-headerbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); /* Buttons */ @@ -55,8 +56,8 @@ --gnome-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color)); --gnome-button-border-bottom-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color)); --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-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-color: color-mix(in srgb, currentColor 20%, transparent); --gnome-button-hover-background: color-mix(in srgb, #ffffff 25%, var(--toolbar-field-background-color)); --gnome-button-active-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color)); --gnome-button-active-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color)); @@ -85,18 +86,18 @@ --gnome-button-destructive-action-active-border-color: #851015; --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); + --gnome-headerbar-button-combined-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-headerbar-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-headerbar-button-active-background: color-mix(in srgb, currentColor 15%, transparent); /* URL bar */ - --gnome-urlbar-background: rgba(255, 255, 255, 0.1); - --gnome-urlbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-urlbar-color: var(--toolbar-color, #ffffff); + --gnome-urlbar-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --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: var(--toolbar-field-color); - --gnome-hover-urlbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-hover-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-urlbar-background: var(--toolbar-field-background-color); - --gnome-inactive-urlbar-border-color: rgba(255, 255, 255, 0.1); + --gnome-inactive-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-urlbar-box-shadow: none; --gnome-inactive-urlbar-color: var(--toolbar-field-color); --gnome-focused-urlbar-border-color: #338CBE; @@ -104,8 +105,8 @@ --gnome-private-urlbar-background: var(--toolbar-field-background-color); /* Tabs */ - --gnome-tabbar-tab-background: var(--gnome-tabstoolbar-background); - --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color)); + --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #ffffff)); + --gnome-tabbar-tab-background: var(--lwt-accent-color, #363636); --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--lwt-accent-color)); --gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color); diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index 9db93502..3ed95993 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -27,6 +27,7 @@ /* Sidebar */ --gnome-sidebar-background: #3b3b3b; --gnome-inactive-sidebar-background: #3f3f3f; + --gnome-sidebar-border-color: color-mix(in srgb, #ffffff 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: rgba(51, 51, 51, 0.95); diff --git a/src/other/firefox/WhiteSur/colors/light-adaptive.css b/src/other/firefox/WhiteSur/colors/light-adaptive.css index 36224a50..c9e59b58 100644 --- a/src/other/firefox/WhiteSur/colors/light-adaptive.css +++ b/src/other/firefox/WhiteSur/colors/light-adaptive.css @@ -18,11 +18,11 @@ /* Toolbars */ --gnome-toolbar-background: var(--lwt-accent-color, #ffffff); - --gnome-tabstoolbar-background: color-mix(in srgb, #000000 8%, var(--lwt-accent-color, #ffffff)); + --gnome-tabstoolbar-background: color-mix(in srgb, currentColor 8%, var(--gnome-toolbar-background)); --gnome-findbar-background: var(--lwt-accent-color, #ffffff); --gnome-toolbar-color: var(--toolbar-color, #2e2e2e); --gnome-toolbar-icon-fill: var(--toolbar-color, #2e2e2e); - --gnome-toolbar-border-color: rgba(0, 0, 0, 0.1); + --gnome-toolbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-toolbar-color: color-mix(in srgb, var(--gnome-toolbar-color) 45%, var(--gnome-toolbar-background)); --gnome-inactive-toolbar-background: var(--lwt-accent-color, #ffffff); --gnome-inactive-toolbar-border-color: var(--chrome-content-separator-color); @@ -30,42 +30,43 @@ /* Sidebar */ --gnome-sidebar-background: var(--lwt-accent-color, #ffffff); --gnome-inactive-sidebar-background: var(--lwt-accent-color, #ffffff); + --gnome-sidebar-border-color: color-mix(in srgb, var(--toolbar-color) 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-menu-border-color: rgba(0, 0, 0, 0.12); + --gnome-menu-border-color: color-mix(in srgb, currentColor 12%, transparent); --gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent); - --gnome-popover-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-border-color: color-mix(in srgb, currentColor 12%, transparent); --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12); - --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); - --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + --gnome-popover-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-popover-button-active-background: color-mix(in srgb, currentColor 20%, transparent); + --gnome-popover-separator-color: color-mix(in srgb, currentColor 10%, transparent); /* Header bar */ - --gnome-headerbar-background: var(--lwt-accent-color); - --gnome-headerbar-border-color: rgba(0, 0, 0, 0.12); - --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; - --gnome-inactive-headerbar-background: var(--lwt-accent-color); - --gnome-inactive-headerbar-border-color: rgba(0, 0, 0, 0.12); - --gnome-inactive-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset; + --gnome-headerbar-background: var(--lwt-accent-color, #ffffff); + --gnome-headerbar-border-color: color-mix(in srgb, currentColor 12%, transparent); + --gnome-headerbar-box-shadow: 0 1px rgba(var(--lwt-accent-color), 0.65) inset; + --gnome-inactive-headerbar-background: var(--lwt-accent-color, #ffffff); + --gnome-inactive-headerbar-border-color: color-mix(in srgb, currentColor 12%, transparent); + --gnome-inactive-headerbar-box-shadow: 0 1px rgba(var(--lwt-accent-color), 0.35) inset; /* Buttons */ - --gnome-button-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color)); - --gnome-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); - --gnome-button-border-bottom-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color)); - --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.75), 0 1px 2px rgba(0, 0, 0, 0.03); - --gnome-button-hover-color: rgba(0, 0, 0, 0.1); - --gnome-button-active-color: rgba(0, 0, 0, 0.2); - --gnome-button-hover-background: #ffffff; - --gnome-button-active-background: color-mix(in srgb, #000000 10%, var(--toolbar-field-background-color)); - --gnome-button-active-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); - --gnome-button-active-bottom-border-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color)); + --gnome-button-background: color-mix(in srgb, var(--lwt-accent-color, #ffffff) 35%, transparent); + --gnome-button-border-color: color-mix(in srgb, currentColor 15%, transparent); + --gnome-button-border-bottom-color: color-mix(in srgb, currentColor 20%, transparent); + --gnome-button-box-shadow: inset 0 1px color-mix(in srgb, var(--lwt-accent-color, #ffffff) 50%, transparent), 0 1px 2px rgba(0, 0, 0, 0.03); + --gnome-button-hover-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-color: color-mix(in srgb, currentColor 20%, transparent); + --gnome-button-hover-background: var(--lwt-accent-color, #ffffff); + --gnome-button-active-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-button-active-border-color: color-mix(in srgb, currentColor 15%, transparent); + --gnome-button-active-bottom-border-color: color-mix(in srgb, currentColor 20%, transparent); --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-button-disabled-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color)); - --gnome-button-disabled-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); + --gnome-button-disabled-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-button-disabled-border-color: color-mix(in srgb, currentColor 15%, transparent); --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-inactive-button-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color)); - --gnome-inactive-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color)); + --gnome-inactive-button-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-inactive-button-border-color: color-mix(in srgb, currentColor 15%, transparent); --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); --gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4); --gnome-button-suggested-action-border-color: #1b6acb; @@ -84,27 +85,27 @@ --gnome-button-destructive-action-active-border-color: #b2161d; --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05); - --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + --gnome-headerbar-button-combined-background: color-mix(in srgb, currentColor 5%, transparent); + --gnome-headerbar-button-hover-background: color-mix(in srgb, currentColor 10%, transparent); + --gnome-headerbar-button-active-background: color-mix(in srgb, currentColor 15%, transparent); /* URL bar */ - --gnome-urlbar-background: rgba(0, 0, 0, 0.1); - --gnome-urlbar-border-color: rgba(0, 0, 0, 0.1); + --gnome-urlbar-color: var(--toolbar-color, #2e2e2e); + --gnome-urlbar-background: color-mix(in srgb, currentColor 8%, transparent); + --gnome-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); - --gnome-urlbar-color: var(--toolbar-field-color); - --gnome-hover-urlbar-border-color: rgba(0, 0, 0, 0.1); - --gnome-inactive-urlbar-background: var(--toolbar-field-background-color); - --gnome-inactive-urlbar-border-color: rgba(0, 0, 0, 0.1); + --gnome-hover-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); + --gnome-inactive-urlbar-background: color-mix(in srgb, currentColor 4%, transparent); + --gnome-inactive-urlbar-border-color: color-mix(in srgb, currentColor 10%, transparent); --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); - --gnome-inactive-urlbar-color: var(--toolbar-field-color); + --gnome-inactive-urlbar-color: color-mix(in srgb, currentColor 45%, transparent); --gnome-focused-urlbar-border-color: #5683DA; --gnome-focused-urlbar-highlight-color: #6592E9; --gnome-private-urlbar-background: var(--toolbar-field-background-color); /* Tabs */ --gnome-tabbar-tab-background: var(--gnome-tabstoolbar-background); - --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color)); + --gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #2e2e2e)); --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--gnome-tabstoolbar-background)); --gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color); diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css index 5e5ce1fb..0099f86f 100644 --- a/src/other/firefox/WhiteSur/colors/light.css +++ b/src/other/firefox/WhiteSur/colors/light.css @@ -26,6 +26,7 @@ /* Sidebar */ --gnome-sidebar-background: #f5f5f5; --gnome-inactive-sidebar-background: #f9f9f8; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background)); /* Popups */ --gnome-menu-background: rgba(255, 255, 255, 0.95); diff --git a/src/other/firefox/WhiteSur/parts/toolbox.css b/src/other/firefox/WhiteSur/parts/toolbox.css index 468d436d..62194dc9 100644 --- a/src/other/firefox/WhiteSur/parts/toolbox.css +++ b/src/other/firefox/WhiteSur/parts/toolbox.css @@ -39,12 +39,6 @@ toolbar .toolbarbutton-1 { background: var(--gnome-tabstoolbar-background) !important; } -findbar { - border: 0 !important; - background: var(--gnome-findbar-background) !important; - border-top: 1px solid var(--gnome-toolbar-border-color) !important; -} - .container.infobar { background: var(--gnome-browser-before-load-background) !important; } @@ -128,19 +122,6 @@ findbar:-moz-window-inactive label, margin-top: 0 !important; } -/* Sidebar */ -#sidebar-box, #sidebar, -.sidebar-panel[lwt-sidebar] { - color: var(--gnome-toolbar-color) !important; - background: var(--gnome-toolbar-background) !important; -} - -.sidebar-splitter { - width: 1px !important; - background-color: var(--gnome-toolbar-border-color) !important; - border: none !important; -} - /* Customization page */ #customization-container:-moz-lwtheme { background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important; diff --git a/src/other/firefox/WhiteSur/theme-adaptive.css b/src/other/firefox/WhiteSur/theme-adaptive.css index ae824cdc..d29ebf61 100644 --- a/src/other/firefox/WhiteSur/theme-adaptive.css +++ b/src/other/firefox/WhiteSur/theme-adaptive.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/WhiteSur/theme.css b/src/other/firefox/WhiteSur/theme.css index e8e6124c..94ed2dfa 100644 --- a/src/other/firefox/WhiteSur/theme.css +++ b/src/other/firefox/WhiteSur/theme.css @@ -11,6 +11,7 @@ @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"; diff --git a/src/other/firefox/common/hide-single-tab.css b/src/other/firefox/common/hide-single-tab.css index 91eac011..d79e905b 100644 --- a/src/other/firefox/common/hide-single-tab.css +++ b/src/other/firefox/common/hide-single-tab.css @@ -9,6 +9,10 @@ min-height: 0 !important; } +#TabsToolbar { + min-height: 0 !important; +} + #tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; diff --git a/src/other/firefox/common/parts/findbar.css b/src/other/firefox/common/parts/findbar.css index a70debab..a85f37a4 100644 --- a/src/other/firefox/common/parts/findbar.css +++ b/src/other/firefox/common/parts/findbar.css @@ -5,6 +5,9 @@ findbar { padding: 0 !important; position: relative; + border: none !important; + background: var(--gnome-findbar-background) !important; + border-top: 1px solid var(--gnome-toolbar-border-color) !important; } .findbar-container { diff --git a/src/other/firefox/common/parts/sidebar.css b/src/other/firefox/common/parts/sidebar.css new file mode 100644 index 00000000..08c4b26f --- /dev/null +++ b/src/other/firefox/common/parts/sidebar.css @@ -0,0 +1,18 @@ +/* Sidebar */ +#sidebar-box, #sidebar, +.sidebar-panel[lwt-sidebar] { + color: var(--gnome-toolbar-color) !important; + background: var(--gnome-sidebar-background) !important; +} + +#sidebar-header { + padding: 8px; + border-bottom: 1px solid var(--gnome-sidebar-border-color) !important; + background: var(--sidebar-background-color) !important; +} + +.sidebar-splitter { + width: 1px !important; + background-color: var(--gnome-sidebar-border-color) !important; + border: none !important; +}