sidebar: Initial theming of new sidebar revamp

rafaelmardojai · Oct 3, 2024 · 8bf9e1a · 8bf9e1a
1 parent 5393bd0
commit 8bf9e1a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
+	}
+}