Cleaned up the comments, made them slightly more readable

prefs.css

@@ -1,3 +1,9 @@
+/*
+  Preferences / Settings
+  Use this file to set your preferences this will save them in one place for easier future updating
+  =========================================================================
+*/
+
 :root {
   --sidebar-width: 50px;
   --toolbar-height: -50px;
@@ -5,42 +11,46 @@
   --sidebar-padding: calc(var(--sidebar-width) + 5px);
   --toolbar-start-end-padding: 5px !important;
 
-  /*
-    Uncomment this if you want a custom sidebar header color,
-    this shouldn't be needed anymore but might be!
-  */
-  /* --custom-sidebar-bg: #000 !important; */
-
   /* ====== Extension Settings ====== */
 
-  /* === Window Control / Client Side Display Settings === */
+  /* Window Control / Client Side Display Settings === 
-  --csd-width: 100px;
-  --csd-top: 6px;
-
-  /*
     If you are putting this on the left or right side uncomment the side 
     preferences below and comment the other
+    =========================================================================
   */
+    --csd-width: 100px;
+    --csd-top: 6px;
 
-  /* 
+    /*  
-    Left Side
+      CSD - Left Side === 
-    Default: --csd-left: 50px; --csd-margin-left: 92px;
+      Default: --csd-left: 50px; --csd-margin-left: 92px;
-  */
+    /*
-  /*
-  --csd-left: 50px;
-  --csd-margin-left: 92px;
-  */
-  /* ====== */
 
-  /*
+      --csd-left: 50px;
-    Right Side
+      --csd-margin-left: 92px;
-    Defaults: --csd-right: 0px; --csd-margin-right: 95px;
-  */
 
-  --csd-right: 0px;
+    /* END: CSD - Left Side ====== */
-  --csd-margin-right: 95px;
 
-  /* ====== */
+    /*
+      CSD - Right Side ===
+      Defaults: --csd-right: 0px; --csd-margin-right: 95px;
+    */ 
+
+      --csd-right: 0px;
+      --csd-margin-right: 95px;
+
+    */
+    /* END: CSD - Right Side ====== */
 
   /* === END: Window Control / Client Side Display Settings === */
+
+
+  /* === Custom Sidebar Header Background (Legacy) === */
+ 
+    /* --custom-sidebar-bg: #000 !important; */
+ 
+  /* === END: Custom Sidebar Header Background (Legacy) === */
+
+/* === END: Extension Settings === */
+
 }

userChrome.css

@@ -3,69 +3,69 @@
   Description: Vertical tab design for Firefox with dynamic indentation::
     Sideberry and TreeStyleTabs (Legacy) themes available!
   Repository URL: https://github.com/drannex42/FirefoxSidebar
-  Version: 12022.02.23
+  Version: 12022.03.15
 */
 
 /*
-  Preferences / Settings
+  Preferences / Settings ::
-  Use this file to set your preferences (left or right window controls,
+  Use this file to set your preferences this will save them in one place for easier future updating
-  colors, margins, this will save them in one place for easier future updating
+  =========================================================================
 */
 
 @import url("./prefs.css");
 
 /* ========================================================================= */
 
-/*
+/* Sidebar (Core) :: This file is for the sidebar implementation */
-  Sidebar
+  @import url("./extensions/sidebar.css");
-  This file is for the sidebar implementation
-*/
-@import url("./extensions/sidebar.css");
 
 /*
-  Extensions
+  Extensions :: 
   To enable/disable specific extensions just comment/uncomment the line below. 
+  =========================================================================
 */
 
-/* add CSD / window controls */
+  /* CSD / Window Controls */
-@import url("./extensions/window_controls.css");
+    @import url("./extensions/window_controls.css");
 
-/* add a little arrow next to folders in bookmarks toolbar */
+  /* Bookmark Arrows :: add a little arrow next to folders in bookmarks toolbar */
-@import url("./extensions/bookmark_arrow.css");
+    @import url("./extensions/bookmark_arrow.css");
 
-/* heavily customize superbox (flat look, colors, smaller entries,...) */
+  /* Superbox Removal :: heavily customize superbox (flat look, colors, smaller entries,...) */
-@import url("./extensions/superbox_removal.css");
+    @import url("./extensions/superbox_removal.css");
 
-/* change the avatar size for the Firefox Account to what makes sense */
+  /* 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 */
+  /* fix sidebar switcher if bookmarks toolbar is hidden */
-/* @import url("./extensions/fix_hidden_bookmarks.css"); */
+    /* @import url("./extensions/fix_hidden_bookmarks.css"); */
 
-/* hide sidebar switcher */
+  /* hide sidebar switcher */
-/* @import url("./extensions/hide_sidebar_switcher.css"); */
+    /* @import url("./extensions/hide_sidebar_switcher.css"); */
 
-/* ========================================================================= */
+/* END EXTENSIONS ========================================================== */
 
 /*
-  Themes
+  Themes ::
   To enable/disable specific theme just comment/uncomment the line below.
   Please enable only one theme at a time!
+  =========================================================================
 */
 
-/* GTK Adwaita */
+  /* GTK Adwaita */
-/* @import url("./themes/gtk_adwaita.css"); */
+    /* @import url("./themes/gtk_adwaita.css"); */
 
-/* GTK Breeze */
+  /* GTK Breeze */
-/* @import url("./themes/gtk_breeze.css"); */
+    /* @import url("./themes/gtk_breeze.css"); */
 
-/* ========================================================================= */
+/* END THEMES ========================================================== */
 
 /*
-  Custom tweaks
+  Custom tweaks ::
-  Create a file called `custom.css` and place your tweaks there.
+  If you have any custom CSS for Firefox, place them in this file.
+  =========================================================================
 */
 
-@import url("./custom.css");
+  @import url("./custom.css");
 
 /* ========================================================================= */