From 22f2ca711b94febb14552b67baa3d3bc4e7ee737 Mon Sep 17 00:00:00 2001
From: "t. Macleod Sawyer" <macleod@macleodsawyer.com>
Date: Wed, 22 Dec 2021 12:54:43 -0600
Subject: [PATCH] v12021.12.22 :: Made it easier to change colors in
 userChrome.css

---
 userChrome.css | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 8201244..ddb698f 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1,10 +1,23 @@
-/* 
+ 
+/*
   Title: Drannex42's Personal userChrome.css for Firefox
   Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface.
   Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar.
-  Version: 12021.09.07 :: Fixed sidebar margin at top. Make sure you update Sideberry to include proper alignment. 
+  Version: 12021.12.14 :: Fixed sidebar header position and background color.
 */
 
+:root {
+  --sidebar-width: 50px;
+  --toolbar-height: -50px;
+  --menubar-height: -71px;
+  --toolmenubar-height: -80px;
+  --sidebar-padding: calc(var(--sidebar-width) + 5px);
+  --toolbar-start-end-padding: 5px !important;
+  --toolbar-start-end-padding: 5px !important;
+  --sidebar-bg-color: #fafafa; /* Change this if you have a different theme than the default light one to match the rest of your sideberry theme colors */
+}
+
+
 #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
   opacity: 0;
   pointer-events: none;
@@ -18,17 +31,16 @@
 }
 
 /*Collapse in default state and add transition*/
-#sidebar-box #sidebar:hover { 
+#sidebar-box #sidebar:hover {
     /*! overflow: visible !important; */
     min-width: 40px;
     max-width: 40px;
     border-right: 1px solid var(--panel-separator-color);
     z-index: 2;
-    --sidebar-background-color: #fafafa !important;
 }
 
 /*All other sidebar-boxes should be larger on hover*/
-#sidebar-box:hover { 
+#sidebar-box:hover {
   min-width: 350px !important;
   max-width: 350px !important;
   z-index: 1;
@@ -48,7 +60,7 @@
 
 #sidebar-header {
   border: none !important;
-  background: var(--sidebar-background-color) !important;
+  background: var(--sidebar-bg-color) !important;
 }
 
 #sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
@@ -59,6 +71,8 @@
 #sidebar-switcher-target {
     border: none !important;
     margin-left: 4.5px !important;
+    padding-top: 4px !important;
+    padding-bottom: 3px !important;
 }
 
 #sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
@@ -66,17 +80,6 @@
 }
 
 
-:root {
-  --sidebar-width: 50px;
-  --toolbar-height: -50px;
-  --menubar-height: -68px;
-  --toolmenubar-height: -80px;
-  --sidebar-padding: calc(var(--sidebar-width) + 5px);
-  --toolbar-start-end-padding: 5px !important;
-  --toolbar-start-end-padding: 5px !important;
-}
-
-
 #main-window #PersonalToolbar {
   margin-left: var(--sidebar-width);
   padding: 2px 5px !important;