From 8bf9e1aca54992edf67b37beaf706a50281639d3 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Thu, 3 Oct 2024 17:39:48 -0500 Subject: [PATCH] sidebar: Initial theming of new sidebar revamp --- theme/parts/buttons-fixes.css | 15 +++++++++++++- theme/parts/buttons.css | 7 ++++--- theme/parts/sidebar.css | 38 +++++++++++++++++++++++++++++++++-- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/theme/parts/buttons-fixes.css b/theme/parts/buttons-fixes.css index b3f07f6c..af9c312b 100644 --- a/theme/parts/buttons-fixes.css +++ b/theme/parts/buttons-fixes.css @@ -13,6 +13,19 @@ link[href="chrome://global/skin/menulist.css"] ~ dropmarker { margin-inline-start: 6px !important; } +/* moz-button */ +link[href="chrome://global/content/elements/moz-button.css"] + button .button-background { + background-color: none !important; + border: 0 !important; + height: 34px !important; + min-height: 34px !important; + + &[type~="icon"]:not(.labelled) { + width: 34px !important; + } +} + + /* Remove the header bar buttons' hover styles */ #nav-bar { --toolbarbutton-active-background: transparent !important; @@ -39,7 +52,7 @@ link[href="chrome://global/skin/menulist.css"] ~ dropmarker { /* Fix unified-extensions-item margin */ toolbar .unified-extensions-item { - margin-inline: 0 3px !important; + margin-inline: 0 3px !important; } /* menulist */ diff --git a/theme/parts/buttons.css b/theme/parts/buttons.css index 882d48c1..cb46455c 100644 --- a/theme/parts/buttons.css +++ b/theme/parts/buttons.css @@ -65,7 +65,7 @@ button.close, /* Flat Buttons */ #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), -link[href="chrome://global/content/elements/moz-button.css"] + button[type~="icon"], +link[href="chrome://global/content/elements/moz-button.css"] + button:is([type~="icon"], :has([type~="icon"])), .close-icon:not(.tab-close-button), .dialog-button-box button, button.close, @@ -157,7 +157,7 @@ menulist:hover .menulist-label-box, /* Hover flat buttons */ #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled="true"]):not([checked]):hover, -link[href="chrome://global/content/elements/moz-button.css"] + button[type~="icon"]:not([disabled="true"], [aria-pressed="true"]):hover, +link[href="chrome://global/content/elements/moz-button.css"] + button:is([type~="icon"], :has([type~="icon"])):not([disabled="true"], [aria-pressed="true"]):hover, .close-icon:not(.tab-close-button):hover, button.close:hover, .dialog-button-box button:not([disabled="true"]):hover, @@ -201,7 +201,8 @@ menulist[open] .menulist-label-box, #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled="true"]):not(#hack):active, #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.subviewbutton):not([disabled="true"])[open], #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled="true"])[checked], -link[href="chrome://global/content/elements/moz-button.css"] + button[type~="icon"]:not([disabled="true"]):active, +link[href="chrome://global/content/elements/moz-button.css"] + button:is([type~="icon"], :has([type~="icon"])):not([disabled="true"]):active, +link[href="chrome://global/content/elements/moz-button.css"] + button:has(.button-background:not([type~="ghost"])):not([disabled="true"]), .close-icon:not(.tab-close-button):active, button.close:active, .dialog-button-box button:not([disabled="true"]):active, diff --git a/theme/parts/sidebar.css b/theme/parts/sidebar.css index e5c301db..97ec15ce 100644 --- a/theme/parts/sidebar.css +++ b/theme/parts/sidebar.css @@ -27,5 +27,39 @@ width: 0 !important; } - - +/* New sidebar */ +@media (-moz-bool-pref: "sidebar.revamp") { + #tabbrowser-tabbox { + --chrome-content-separator-color: var(--gnome-toolbar-border-color); + box-shadow: none !important; + } + #sidebar-splitter { + border-color: var(--gnome-toolbar-border-color) !important; + margin: 0 !important; + } + + /* First sidebar */ + #sidebar-main { + background-color: var(--gnome-sidebar-background) !important; + padding: 6px !important; + --button-size-icon: 34px !important; + } + link[href="chrome://browser/content/sidebar/sidebar-main.css"] + .wrapper { + .actions-list { + gap: 3px; + } + } + + /* Second sidebar */ + #sidebar-box { + background-color: var(--gnome-secondary-sidebar-background) !important; + outline: 0.01px solid var(--gnome-toolbar-border-color); + padding: 0 !important; + } + #sidebar { + background-color: var(--gnome-secondary-sidebar-background) !important; + border: 0 !important; + border-radius: 0 !important;; + box-shadow: none !important; + } +}