Major rework (#17)

* Update userChrome.css

* Update userChrome.css

* formatting

* make csd top configurable

* fix Z index of CSD

* fix background (and round corners in GNOME)

* remove unnecessary background color fix

* more formatting

* move sidebar switcher code to css file

* even more formatting, fix typos

* remove ugly border near sidebar switcher

* add custom presets

* Revert "remove ugly border near sidebar switcher"

This reverts commit b8fd71d97c23c860a84c68aba74fb8e4253aaa7f.

* remove empty space in fullscreen mode, remove unnecessary stuff

* heavy rework, add first theme

* rename first theme, add second

* add KDE Plastik (same spacing as Oxygen)

* somehow my system messed up..., fixed theme names

.gitignore

@@ -0,0 +1 @@
+custom.css

changelog.md

@@ -0,0 +1,5 @@
+# unreleased
+Heavy rework, formatting, more extensions, first theme.
+
+# 12022.02.23
+Implemented an extension system, and seperated different components into their own files.

custom.css

@@ -1,6 +0,0 @@
-/* OTHER CUSTOM OPTIONS */
-
-/* Change the Avatar size for the Firefox Account to what makes sense */
-[label="Firefox Account"] #fxa-avatar-image {
-    scale: 1.25;
-}

extensions/avatar_size.css

@@ -0,0 +1,3 @@
+[label="Firefox Account"] #fxa-avatar-image {
+  scale: 1.25;
+}

extensions/fix_hidden_bookmarks.css

@@ -0,0 +1,3 @@
+#sidebar-box {
+  --menubar-height: -42px !important;
+}

extensions/hide_sidebar_switcher.css

@@ -0,0 +1,11 @@
+#sidebar-header {
+  display: none;
+}
+
+#sidebar-box {
+  --menubar-height: 0px !important;
+}
+
+.browser-toolbar {
+  padding-left: unset !important;
+}

extensions/sidebar.css

@@ -9,9 +9,12 @@
 }
 
 #sidebar-box > #browser,
-#webextpanels-window{ background: transparent !important }
+#webextpanels-window {
+  background: transparent !important;
+}
 
-#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
+#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
+  #sidebar-header {
   /*! display: none; */
 }
 
@@ -20,7 +23,7 @@
   /*! overflow: visible !important; */
   min-width: 40px;
   max-width: 40px;
-    border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */
+  border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
   z-index: 2;
 }
 
@@ -46,10 +49,11 @@
   border: none !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 {
+#sidebar-close,
+#sidebar-title,
+#sidebar-switcher-arrow {
   display: none;
   border: none;
 }
@@ -61,33 +65,30 @@
   padding-bottom: 6px !important;
 }
 
-#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
+#sidebar-switcher-target:focus-visible:not(:hover, [open]),
+#sidebar-close:focus-visible:not(:hover, [open]) {
   outline: none !important;
 }
 
-
-/* lock sidebar to height by doing the inverse margin of the toolbar element */
 #sidebar-box {
+  /* lock sidebar to height by doing the inverse margin of the toolbar element */
   background: var(--custom-sidebar-bg) !important;
   z-index: 1000 !important;
   position: relative !important;
   margin-top: var(--menubar-height) !important;
   border-right: none;
   transition: none !important;
-}
 
   /* lock sidebar to specified width */
-#sidebar-box {
   min-width: var(--sidebar-width) !important;
   max-width: var(--sidebar-width) !important;
   overflow: hidden !important;
   transition-property: width;
-    transition-duration: .25s;
+  transition-duration: 0.25s;
-    transition-delay: .25s;
+  transition-delay: 0.25s;
   transition-timing-function: ease-in;
 }
 
-
 #sidebar-box::after {
   background: var(--sidebar-border-color) !important;
   margin-left: 207px;
@@ -96,7 +97,6 @@
   content: " ";
   width: 1px;
   height: 100%;
-  z-index: 999999999;
   top: 0;
   right: 0px;
 }
@@ -105,25 +105,30 @@
   top: 42px;
 }
 
-
 .sidebar-splitter {
   opacity: 0 !important;
   width: 0px !important;
-  border: none !Important;
+  border: none !important;
   --avatar-image-url: none !important;
 }
 
 #sidebarMenu-popup .subviewbutton {
   min-width: 0px;
   padding: 0;
-    margin: 0 !Important;
+  margin: 0 !important;
 }
 
 toolbarseparator {
   display: none;
 }
 
-#sidebar { border-right: none !important; 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;

extensions/superbox_removal.css

@@ -5,9 +5,10 @@
 */
 
 /* --- Prevent enlargement */
-
 #urlbar[breakout-extend] {
-    top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
+  top: calc(
+    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
+  ) !important;
   left: 0 !important;
   width: 100% !important;
 }
@@ -26,7 +27,7 @@
 /*/* --- Reduce row paddings to make them more compact */
 .urlbarView-row {
   padding: 2px 0px !important;
-    line-height: 1.2em !imortant;
+  line-height: 1.2em !important;
   margin: -1px;
   margin-bottom: 0px;
 }
@@ -40,25 +41,33 @@
 /* END Reduce row paddings to make them more compact --- */
 
 /* Disable Urlbar Animation */
-#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
+#urlbar[breakout][breakout-extend][breakout-extend-animate]
+  > #urlbar-background {
   animation-name: none !important;
   animation: none !important;
 }
+/* END Disable Urlbar Animation */
 
 /* --- More compact "Search with Google" rows */
 .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
   min-height: auto !important;
   width: auto !important;
 }
-.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+.urlbarView-row[dynamicType="onboardTabToSearch"]
+  > .urlbarView-row-inner
+  > .urlbarView-no-wrap
+  > .urlbarView-favicon {
   margin-bottom: -1px;
 }
 /* END More compact "Search with Google" rows --- */
 
 /* Remove active border on the addressbar when in focus */
- #nav-bar{ --toolbar-field-focus-border-color: #ccc }
+#nav-bar {
+  --toolbar-field-focus-border-color: #ccc;
+}
 
 /* Remove box shadow on address bar */
-#urlbar-background, #searchbar {
+#urlbar-background,
+#searchbar {
   box-shadow: none !important;
 }

extensions/window_controls.css

@@ -13,7 +13,7 @@
 
 /* reserve space for buttons */
 #nav-bar {
-  padding-right: var(--csd-margin-right, 10px) !important;  /* The addition of the "10px" is so that there will be an area where you can grab and move the window */ 
+  padding-right: var(--csd-margin-right) !important;
   margin-left: var(--csd-margin-left) !important;
 }
 
@@ -22,28 +22,22 @@
   visibility: visible !important;
   position: fixed !important;
   display: block;
-  top: 5px; 
+  z-index: 999999999;
+  top: var(--csd-top, inherit);
   right: var(--csd-right, inherit);
   left: var(--csd-left, inherit);
-  z-index: 10;
   max-width: var(--csd-width);
 }
 
-/* fix ugly background color */
-#navigator-toolbox {
-  background-color: transparent !important;
-}
-
 /* hide buttons in fullscreen mode (video player and F11) */
 #main-window[inFullscreen="true"] .titlebar-buttonbox-container,
 #main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
-  /* display: none !important; */
   visibility: hidden !important;
 }
 
 /* remove empty space when in fullscreen mode (F11) */
 #main-window[inFullscreen="true"] #nav-bar {
-  margin-right: var(--csd-left) !important; 
+  padding-right: 0px !important;
-  margin-left: var(--csd-right) !important; 
+  margin-left: 0px !important;
 }
 /* END Client Side Decorations / Window Controls */

firefox/treestyletabs-legacy/treestyletabs.css

@@ -1,4 +1,3 @@
- 
 /*
   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.
@@ -17,8 +16,9 @@
   --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"])
-#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
+  #TabsToolbar
+  > .toolbar-items {
   opacity: 0;
   pointer-events: none;
 }
@@ -26,7 +26,8 @@
   visibility: collapse !important;
 }
 
-#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
+#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
+  #sidebar-header {
   /*! display: none; */
 }
 
@@ -57,13 +58,14 @@
   margin-right: -210px !important;
 }
 
-
 #sidebar-header {
   border: none !important;
   background: var(--sidebar-bg-color) !important;
 }
 
-#sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
+#sidebar-close,
+#sidebar-title,
+#sidebar-switcher-arrow {
   display: none;
   border: none;
 }
@@ -75,11 +77,11 @@
   padding-bottom: 3px !important;
 }
 
-#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
+#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;
@@ -87,7 +89,6 @@
   margin-top: -3px !important;
 }
 
-
 /* lock sidebar to height by doing the inverse margin of the toolbar element */
 #sidebar-box {
   z-index: 1000 !important;
@@ -108,8 +109,8 @@
   max-width: var(--sidebar-width) !important;
   overflow: hidden !important;
   transition-property: width;
-    transition-duration: .25s;
+  transition-duration: 0.25s;
-    transition-delay: .25s;
+  transition-delay: 0.25s;
   transition-timing-function: ease-in;
 }
 
@@ -120,36 +121,45 @@
 .sidebar-splitter {
   opacity: 0 !important;
   width: 0px !important;
-  border: none !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 {
+#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
+  #sidebar-header {
   /*! display: none; */
 }
 
 #sidebarMenu-popup .subviewbutton {
   min-width: 0px;
   padding: 0;
-    margin: 0 !Important;
+  margin: 0 !important;
 }
 
 toolbarseparator {
   display: none;
 }
 
-#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
+#sidebar {
-
+  border-right: 0px solid #ccc;
+  overflow: hidden;
+  width: 50px !important;
+  min-width: 50px !important;
+  width: 100% !important;
+}
 
 /* OTHER CUSTOM OPTIONS */
 
 /* Hide the title bar */
-#titlebar{ visibility: collapse; }
+#titlebar {
+  visibility: collapse;
+}
 
 /* hide normal horizontal tab bar */
-#TabsToolbar { visibility: collapse; }
+#TabsToolbar {
-
+  visibility: collapse;
+}
 
 :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
   border: none !important;
@@ -158,7 +168,9 @@ toolbarseparator {
 
 /* --- Prevent enlargement */
 #urlbar[breakout-extend] {
-    top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
+  top: calc(
+    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
+  ) !important;
   left: 0 !important;
   width: 100% !important;
 }
@@ -177,7 +189,7 @@ toolbarseparator {
 /*/* --- Reduce row paddings to make them more compact */
 .urlbarView-row {
   padding: 2px 0px !important;
-    line-height: 1.2em !imortant;
+  line-height: 1.2em !important;
   margin: -1px;
   margin-bottom: 0px;
 }
@@ -191,7 +203,8 @@ toolbarseparator {
 /* END Reduce row paddings to make them more compact --- */
 
 /* Disable Urlbar Animation */
-#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
+#urlbar[breakout][breakout-extend][breakout-extend-animate]
+  > #urlbar-background {
   animation-name: none !important;
   animation: none !important;
 }
@@ -201,16 +214,22 @@ toolbarseparator {
   min-height: auto !important;
   width: auto !important;
 }
-.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+.urlbarView-row[dynamicType="onboardTabToSearch"]
+  > .urlbarView-row-inner
+  > .urlbarView-no-wrap
+  > .urlbarView-favicon {
   margin-bottom: -1px;
 }
 /* END More compact "Search with Google" rows --- */
 
 /* Remove active border on the addressbar when in focus */
- #nav-bar{ --toolbar-field-focus-border-color: #ccc }
+#nav-bar {
+  --toolbar-field-focus-border-color: #ccc;
+}
 
 /* Remove box shadow on address bar */
-#urlbar-background, #searchbar {
+#urlbar-background,
+#searchbar {
   box-shadow: none !important;
 }
 
@@ -221,7 +240,6 @@ toolbarseparator {
   margin-right: -1px !important;
 }
 
-
 /* Add down arrow to folders on the bookmark bar */
 .bookmark-item[container]::after {
   content: "ˇ";
@@ -237,4 +255,3 @@ toolbarseparator {
 [label="Firefox Account"] #fxa-avatar-image {
   scale: 1.175;
 }
-

prefs.css

@@ -4,34 +4,43 @@
   --menubar-height: -74px;
   --sidebar-padding: calc(var(--sidebar-width) + 5px);
   --toolbar-start-end-padding: 5px !important;
-  --toolbar-start-end-padding: 5px !important;
-  /* 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; */
 
+  /*
+    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 === */
   --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*/
+  /*
+    If you are putting this on the left or right side uncomment the side
+    preferences below and comment the other
+  */
 
-      /* Left Side: 
+  /* 
+    Left Side
     Default: --csd-left: 50px; --csd-margin-left: 92px;
-           
+  */
+  /*
   --csd-left: 50px;
   --csd-margin-left: 92px;
   */
+  /* ====== */
 
-      /* Right Side:
+  /*
+    Right Side
     Defaults: --csd-right: 0px; --csd-margin-right: 95px;
   */
+
   --csd-right: 0px;
   --csd-margin-right: 95px;
 
+  /* ====== */
+
   /* === END: Window Control / Client Side Display Settings === */
-
-
-
-
 }

readme.md

@@ -75,13 +75,7 @@ For ease of use I suggest using the `custom.css` file to for your personal tweak
 
 ### If you use FF without the bookmarks bar
 
-Then the sidebar switcher will be missing, you need to add this to your custom.css
+Then the sidebar switcher will be missing, edit `custom.css` and uncomment the relevant section.
-
-```
-#sidebar-box {
-  --menubar-height: -42px !important;
-}
-```
 
 ## TreeStyleTabs (Legacy)
 

themes/gtk_adwaita.css

@@ -0,0 +1,25 @@
+@import url("../extensions/window_controls.css");
+@import url("../extensions/hide_sidebar_switcher.css");
+
+.browser-toolbar {
+  padding-left: 2px !important;
+  position: unset !important;
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+#nav-bar {
+  padding-right: 127px !important;
+}
+
+.titlebar-buttonbox-container {
+  right: 20px;
+}
+
+toolbarbutton {
+  margin: 3px !important;
+}
+
+toolbar[id="nav-bar"] {
+  min-height: 46px !important;
+}

themes/gtk_breeze.css

@@ -0,0 +1,30 @@
+@import url("../extensions/window_controls.css");
+@import url("../extensions/hide_sidebar_switcher.css");
+
+.browser-toolbar {
+  padding-left: 2px !important;
+  position: unset !important;
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+#nav-bar {
+  padding-right: 84px !important;
+}
+
+.titlebar-buttonbox-container {
+  top: 12px !important;
+  right: 0px !important;
+}
+
+toolbarbutton {
+  margin: 1px !important;
+}
+
+.titlebar-buttonbox-container > .titlebar-buttonbox > toolbarbutton {
+  margin-right: -2px !important;
+}
+
+toolbar[id="nav-bar"] {
+  min-height: 46px !important;
+}

userChrome.css

@@ -1,27 +1,71 @@
- 
 /*
   Title: Drannex42's FirefoxSidebar / Vertical Tabs
-  Description:  Vertical tab design for Firefox with dynamic indentation:: Sideberry and TreeStyleTabs (Legacy) themes available! 
+  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 :: Implemented an extension system, and seperated different components into their own files.
+  Version: 12022.02.23
 */
 
- /* Preferences / Settings :: 
+/*
-    Use this file to set your preferences (left or right window controls, colors, margins, this will save them in one place for easier future updating 
+  Preferences / Settings
+  Use this file to set your preferences (left or right window controls,
+  colors, margins, this will save them in one place for easier future updating
 */
-  @import url('./prefs.css');
 
- /* Sidebar :: 
+@import url("./prefs.css");
+
+/* ========================================================================= */
+
+/*
+  Sidebar
   This file is for the sidebar implementation
 */
-  @import url('./extensions/sidebar.css');
+@import url("./extensions/sidebar.css");
 
-/* Extensions ::
+/*
-   To enable or disable specific extensions just comment/uncomment the line below 
+  Extensions
+  To enable/disable specific extensions just comment/uncomment the line below.
 */
 
-@import url('./extensions/window_controls.css');
+/* add CSD / window controls */
-@import url('./extensions/bookmark_arrow.css');
+@import url("./extensions/window_controls.css");
-@import url('./extensions/superbox_removal.css');
 
-@import url('./custom.css');
+/* add a little arrow next to folders in bookmarks toolbar */
+@import url("./extensions/bookmark_arrow.css");
+
+/* heavily customize superbox (flat look, colors, smaller entries,...) */
+@import url("./extensions/superbox_removal.css");
+
+/* change the avatar size for the Firefox Account to what makes sense */
+@import url("./extensions/avatar_size.css");
+
+/* fix sidebar switcher if bookmarks toolbar is hidden */
+/* @import url("./extensions/fix_hidden_bookmarks.css"); */
+
+/* hide sidebar switcher */
+/* @import url("./extensions/hide_sidebar_switcher.css"); */
+
+/* ========================================================================= */
+
+/*
+  Themes
+  To enable/disable specific theme just comment/uncomment the line below.
+  Please enable only one theme at a time!
+*/
+
+/* GTK Adwaita */
+/* @import url("./themes/gtk_adwaita.css"); */
+
+/* GTK Breeze */
+/* @import url("./themes/gtk_breeze.css"); */
+
+/* ========================================================================= */
+
+/*
+  Custom tweaks
+  Create a file called `custom.css` and place your tweaks there.
+*/
+
+@import url("./custom.css");
+
+/* ========================================================================= */