Version: 12022.01.11 :: Fixed sidebar header, improved borders, impr…

…oved variables, increased padding for alignment. This pares with the same version sideberry update.
wizrdsh · Jan 12, 2022 · f5a0f77 · f5a0f77
1 parent a8e5f1e
commit f5a0f77
Showing 1 changed file with 57 additions and 46 deletions.
diff --git a/userChrome.css b/userChrome.css
@@ -3,29 +3,31 @@
   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.12.14 :: Fixed sidebar header position and background color.
+  Version: 12022.01.11 :: Fixed sidebar header, improved borders, improved variables, increased padding for alignment. This pares with the same version sideberry update. 
 */
 
 :root {
   --sidebar-width: 50px;
   --toolbar-height: -50px;
-  --menubar-height: -71px;
-  --toolmenubar-height: -80px;
+  --menubar-height: -74px;
   --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 */
+
+  /* Enable this (remove the comment surrounding) if you want a custom sidebar header color, this shouldn't be needed anymore but might be! */
+  /* --custom-sidebar-bg: #000 !important; */
 }
 
 
-#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
-  opacity: 0;
-  pointer-events: none;
-}
-#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
-    visibility: collapse !important;
+ #main-window #TabsToolbar {
+  visibility: collapse;
 }
 
+
+
+#sidebar-box > #browser,
+#webextpanels-window{ background: transparent !important }
+
 #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
   /*! display: none; */
 }
@@ -35,7 +37,7 @@
     /*! overflow: visible !important; */
     min-width: 40px;
     max-width: 40px;
-    border-right: 1px solid var(--panel-separator-color);
+    border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */
     z-index: 2;
 }
 
@@ -47,7 +49,7 @@
   margin-right: -300px !important;
 }
 
-/*Tree Style Tabb && Sideberry specific sidebar width and size*/
+/*Tree Style Tabs && Sideberry specific sidebar width and size*/
 
 #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
 #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
@@ -57,10 +59,11 @@
       margin-right: -210px !important;
 }
 
-
 #sidebar-header {
   border: none !important;
-  background: var(--sidebar-bg-color) !important;
+  border-right: 1px solid var(--sidebar-border-color);
+  background: var(--custom-sidebar-bg, --sidebar-background-color) !important;
+
 }
 
 #sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
@@ -72,36 +75,24 @@
     border: none !important;
     margin-left: 4.5px !important;
     padding-top: 4px !important;
-    padding-bottom: 3px !important;
+    padding-bottom: 6px !important;
 }
 
 #sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
   outline: none !important;
 }
 
 
-#main-window #PersonalToolbar {
-  margin-left: var(--sidebar-width);
-  padding: 2px 5px !important;
-  padding-top: 0px !important;
-  margin-top: -3px !important;
-}
-
-
 /* lock sidebar to height by doing the inverse margin of the toolbar element */
 #sidebar-box {
+  background: var(--custom-sidebar-bg) !important;
   z-index: 1000 !important;
   position: relative !important;
   margin-top: var(--menubar-height) !important;
-  border-right: 1px solid #ccc;
-  background: #f6f7f8 !important;
+  border-right: none;
   transition: none !important;
 }
 
-#main-window[title^="Firefox Developer Edition"] #sidebar-box {
-  margin-top: var(--toolmenubar-height) !important;
-}
-
 /* lock sidebar to specified width */
 #sidebar-box {
     min-width: var(--sidebar-width) !important;
@@ -113,22 +104,32 @@
     transition-timing-function: ease-in;
 }
 
-.browser-toolbar {
-  margin-left: var(--sidebar-width);
+
+#sidebar-box::after {
+  background: var(--sidebar-border-color) !important;
+  margin-left: 207px;
+  z-index: 9999999;
+  position: absolute;
+  content: " ";
+  width: 1px;
+  height: 100%;
+  z-index: 999999999;
+  top: 0;
+  right: 0px;
 }
 
+#sidebar-box:hover:after {
+    top: 42px;
+}
+
+
 .sidebar-splitter {
   opacity: 0 !important;
   width: 0px !important;
   border: none !Important;
   --avatar-image-url: none !important;
 }
 
-/* hide sidebar header for tree style tabs sidebar */
-#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
-  /*! display: none; */
-}
-
 #sidebarMenu-popup .subviewbutton {
     min-width: 0px;
     padding: 0;
@@ -139,22 +140,32 @@ toolbarseparator {
     display: none;
 }
 
-#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
+#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
+
+#nav-bar-customization-target {
+  z-index: 99999;
+  position: relative;
+}
 
+.browser-toolbar {
+  padding-left: var(--sidebar-width) !important;
+  position: relative !important;
+}
 
-/* OTHER CUSTOM OPTIONS */
+#PersonalToolbar {
+  padding: 2px 5px !important;
+  padding-top: 0px !important;
+  margin-top: 0px !important;
+  padding-left: calc(var(--sidebar-width) + 6px) !important;
+}
 
-/* Hide the title bar */
-#titlebar{ visibility: collapse; }
 
-/* hide normal horizontal tab bar */
-#TabsToolbar { visibility: collapse; }
 
 
-:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
-  border: none !important;
-  background: none !important;
-}
+/* OTHER CUSTOM OPTIONS */
+
+
+/* hide normal horizontal tab bar */
 
 /* --- Prevent enlargement */
 #urlbar[breakout-extend] {