v12022.11.21 :: Fixed sidebar flickering

Author: Drannex42

.gitignore

@@ -1 +1,2 @@
-custom.css
+./custom.css
+./prefs.css

custom.css

@@ -1 +1,61 @@
 /* Custom Styles */
+
+#titlebar {
+appearance: none !important;
+}
+
+#sidebar-header {
+  padding: 5px 8px !important;
+  padding-top: 11px !important;
+}
+
+#nav-bar {
+  padding-top: 2px !important;
+}
+
+/* #main-window {
+	background-color: rgba(0,0,0,0.45) !important;
+	background: linear-gradient(8deg, rgba(0,0,0,0.4) 96%, #000) !important; /* gradient to hide the required windows control buttons in bg 
+	-moz-appearance: -moz-win-glass !important;
+} */
+/* #navigator-toolbox {
+	background: transparent !important;
+}
+#TabsToolbar {
+	background-image: none !important;    /* Windows 7 */
+} 
+/* 
+/* referenced from what FF does when using some persona themes */
+/* :root {
+	--toolbar-bgcolor: rgba(255,255,255,.4) !important;
+	--toolbar-field-background-color: rgba(255,255,255,.8) !important;
+	--urlbar-box-bgcolor: var(--button-bgcolor) !important;   
+	--button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important;
+	--button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important;
+}
+#urlbar-background, #searchbar {
+	background-color: rgba(255,255,255,0.4) !important;
+}
+#urlbar[open="true"] > #urlbar-background {
+	background-color: rgb(255,255,255) !important;
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+	 	--toolbar-bgcolor: rgba(0,0,0,.2) !important;
+		--toolbar-field-background-color: rgba(0,0,0,.8) !important;
+	}
+	#urlbar-background, #searchbar {
+		background-color: rgba(0,0,0,0.2) !important;
+	}
+	#urlbar[open="true"] > #urlbar-background {
+		background-color: rgb(0,0,0) !important;
+	}
+}
+#nav-bar {
+	box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)) !important;    
+	color: var(--toolbar-color) !important;
+}
+.tab-background[selected="true"] {
+	background-color: transparent !important;
+	background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
+} */

extensions/sidebar.css

@@ -1,8 +1,8 @@
 /*
   Extension (Core): Sidebar
-  Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
-  Repository URL: https://github.com/drannex42/
-  Version: v12022.04.17 
+  Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar.
+  Repository URL: https://github.com/drannex42/FirefoxSidebar
+  Version: v12022.11.22 (YYYYY.MM.DD) 
 */
 
 #main-window #TabsToolbar {
@@ -23,29 +23,62 @@
 }
 
 /*Collapse in default state and add transition*/
-#sidebar-box #sidebar:hover {
+#sidebar-box {
   /*! overflow: visible !important; */
-  min-width: 40px;
-  max-width: 40px;
   border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
   z-index: 2;
+  border-right: none !important;
+  width: 100% !important;
+  background: var(--custom-sidebar-bg, --sidebar-background);
+  
+  /* lock sidebar to height by doing the inverse margin of the toolbar element */
+  z-index: 1000 !important;
+  position: relative !important;
+  margin-top: var(--menubar-height) !important;
+  border-right: none;
+  transition: none !important;
+
+  /* lock sidebar to specified width */
+  min-width: var(--sidebar-width) !important;
+  max-width: var(--sidebar-width) !important;
+  overflow: hidden !important;
+  transition-property: width;
+  transition-duration: 0.25s;
+  transition-delay: 0.25s;
+  transition-timing-function: ease-in;
+}
+
+#sidebar-box::after {
+  background: var(--sidebar-border-color) !important;
+  margin-left: 207px;
+  z-index: 9999999;
+  position: absolute;
+  content: " ";
+  width: 1px;
+  height: 100%;
+  top: 0;
+  right: 0px;
+}
+
+#sidebar-box:hover:after {
+  top: 42px;
 }
 
 /*All other sidebar-boxes should be larger on hover*/
-#sidebar-box:hover {
+#sidebar-box:hover, #sidebar-box #sidebar:hover {
   min-width: 350px !important;
   max-width: 350px !important;
-  z-index: 1;
+  z-index: 999;
   margin-right: -300px !important;
 }
 
 /*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 {
+#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
+#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar:hover {
   min-width: 260px !important;
   max-width: 260px !important;
-  z-index: 1;
   margin-right: -210px !important;
 }
 
@@ -74,40 +107,7 @@
   outline: none !important;
 }
 
-#sidebar-box {
-  /* lock sidebar to height by doing the inverse margin of the toolbar element */
-  z-index: 1000 !important;
-  position: relative !important;
-  margin-top: var(--menubar-height) !important;
-  border-right: none;
-  transition: none !important;
-  background: transparent !important;
-
-  /* lock sidebar to specified width */
-  min-width: var(--sidebar-width) !important;
-  max-width: var(--sidebar-width) !important;
-  overflow: hidden !important;
-  transition-property: width;
-  transition-duration: 0.25s;
-  transition-delay: 0.25s;
-  transition-timing-function: ease-in;
-}
-
-#sidebar-box::after {
-  background: var(--sidebar-border-color) !important;
-  margin-left: 207px;
-  z-index: 9999999;
-  position: absolute;
-  content: " ";
-  width: 1px;
-  height: 100%;
-  top: 0;
-  right: 0px;
-}
 
-#sidebar-box:hover:after {
-  top: 42px;
-}
 
 .sidebar-splitter {
   opacity: 0 !important;
@@ -126,15 +126,6 @@ toolbarseparator {
   display: none;
 }
 
-#sidebar {
-  border-right: none !important;
-  overflow: hidden;
-  width: 50px !important;
-  min-width: 50px !important;
-  width: 100% !important;
-  background: var(--custom-sidebar-bg, --sidebar-background);
-}
-
 #nav-bar-customization-target {
   z-index: 99999;
   position: relative;

prefs.css

@@ -15,7 +15,7 @@
      This sets the background for the other sidebar options (bookmarks, history, in case it is transparent from a theme that is not set up properly 
   */
     /* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */
-    /* --custom-sidebar-header-bg: Field; /* Default: Field (Disabled) */
+    --custom-sidebar-header-bg: #000; /* Default: Field (Disabled) */
 
   /* ====== Extension Settings ====== */
 
@@ -25,7 +25,7 @@
     =========================================================================
   */
     --csd-width: 100px;
-    --csd-top: 6px;
+    --csd-top: 8px;
 
     /*  
       CSD - Left Side === 
@@ -42,8 +42,8 @@
       Defaults: --csd-right: 0px; --csd-margin-right: 95px;
     */ 
 
-      --csd-right: 0px;
-      --csd-margin-right: 95px;
+      --csd-right: 36px;
+      --csd-margin-right: 130px;
 
   /* === END: Window Control / Client Side Display Settings === */
 

userChrome.css

@@ -29,13 +29,13 @@
     @import url("./extensions/window_controls.css");
 
   /* Bookmark Arrows :: add a little arrow next to folders in bookmarks toolbar */
-    @import url("./extensions/bookmark_arrow.css");
+  /*  @import url("./extensions/bookmark_arrow.css"); */
 
   /* Superbox Removal :: heavily customize superbox (flat look, colors, smaller entries,...) */
     @import url("./extensions/superbox_removal.css");
 
   /* Avatar Size :: change the avatar size for the Firefox Account to what makes sense */
-    @import url("./extensions/avatar_size.css");
+   /*  @import url("./extensions/avatar_size.css"); */
 
   /* fix sidebar switcher if bookmarks toolbar is hidden */
     /* @import url("./extensions/fix_hidden_bookmarks.css"); */
@@ -69,3 +69,6 @@
   @import url("./custom.css");
 
 /* ========================================================================= */
+
+
+