Major rework (wizrdsh#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 b8fd71d. * 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
CaptaiNiveau · Mar 16, 2022 · d3f8439 · d3f8439
1 parent 270b90c
commit d3f8439
Show file tree

Hide file tree

Showing 16 changed files with 381 additions and 237 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+custom.css
diff --git a/changelog.md b/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.
diff --git a/custom.css b/custom.css
diff --git a/extensions/avatar_size.css b/extensions/avatar_size.css
@@ -0,0 +1,3 @@
+[label="Firefox Account"] #fxa-avatar-image {
+  scale: 1.25;
+}
diff --git a/extensions/bookmark_arrow.css b/extensions/bookmark_arrow.css
@@ -1,4 +1,4 @@
-/* 
+/*
   Extension: Bookmark Arrow
   Description: Adds an arrow next to the bookmark folder.
 */
@@ -16,4 +16,4 @@
   display: inline-block;
   position: absolute;
   top: 6.9px;
-}
+}
diff --git a/extensions/fix_hidden_bookmarks.css b/extensions/fix_hidden_bookmarks.css
@@ -0,0 +1,3 @@
+#sidebar-box {
+  --menubar-height: -42px !important;
+}
diff --git a/extensions/hide_sidebar_switcher.css b/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;
+}
diff --git a/extensions/sidebar.css b/extensions/sidebar.css
@@ -1,5 +1,5 @@
-/* 
-  Extension (Core): Sidebar 
+/*
+  Extension (Core): Sidebar
   Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
   Repository URL: https://github.com/drannex42/FirefoxSidebar
 */
@@ -9,19 +9,22 @@
 }
 
 #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; */
 }
 
 /*Collapse in default state and add transition*/
 #sidebar-box #sidebar:hover {
-    /*! 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;
+  /*! 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;
 }
 
 /*All other sidebar-boxes should be larger on hover*/
@@ -36,58 +39,56 @@
 
 #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
 #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
-      min-width: 260px !important;
-      max-width: 260px !important;
-      z-index: 1;
-      margin-right: -210px !important;
+  min-width: 260px !important;
+  max-width: 260px !important;
+  z-index: 1;
+  margin-right: -210px !important;
 }
 
 #sidebar-header {
   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 {
-    display: none;
-    border: none;
-  }
+#sidebar-close,
+#sidebar-title,
+#sidebar-switcher-arrow {
+  display: none;
+  border: none;
+}
 
 #sidebar-switcher-target {
-    border: none !important;
-    margin-left: 4.5px !important;
-    padding-top: 4px !important;
-    padding-bottom: 6px !important;
+  border: none !important;
+  margin-left: 4.5px !important;
+  padding-top: 4px !important;
+  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-delay: .25s;
-    transition-timing-function: ease-in;
+  /* 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;
@@ -96,34 +97,38 @@
   content: " ";
   width: 1px;
   height: 100%;
-  z-index: 999999999;
   top: 0;
   right: 0px;
 }
 
 #sidebar-box:hover:after {
-    top: 42px;
+  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;
+  min-width: 0px;
+  padding: 0;
+  margin: 0 !important;
 }
 
 toolbarseparator {
-    display: none;
+  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;
@@ -140,4 +145,4 @@ toolbarseparator {
   padding-top: 0px !important;
   margin-top: 0px !important;
   padding-left: calc(var(--sidebar-width) + 6px) !important;
-}
+}
diff --git a/extensions/superbox_removal.css b/extensions/superbox_removal.css
@@ -1,64 +1,73 @@
-/* 
-  Extension: Superbox Removal (and compaction) 
-  Description: This removes the superbox and fixes some padding around the urlbar. 
+/*
+  Extension: Superbox Removal (and compaction)
+  Description: This removes the superbox and fixes some padding around the urlbar.
   Repository URL: https://github.com/drannex42/FirefoxSidebar
 */
 
 /* --- Prevent enlargement */
-
 #urlbar[breakout-extend] {
-    top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
-    left: 0 !important;
-    width: 100% !important;
+  top: calc(
+    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
+  ) !important;
+  left: 0 !important;
+  width: 100% !important;
 }
 
 #urlbar[breakout-extend] #urlbar-input-container {
-    height: var(--urlbar-height) !important;
-    /*padding: 0px !important;*/
-    padding-block: 0px !important;
-    padding-inline: 0px !important;
+  height: var(--urlbar-height) !important;
+  /* padding: 0px !important; */
+  padding-block: 0px !important;
+  padding-inline: 0px !important;
 }
 .urlbarView-row {
-    padding: 0px 2px 0px 2px;
+  padding: 0px 2px 0px 2px;
 }
 /* END Prevent enlargement --- */
 
 /*/* --- Reduce row paddings to make them more compact */
 .urlbarView-row {
-    padding: 2px 0px !important;
-    line-height: 1.2em !imortant;
-    margin: -1px;
-    margin-bottom:0px;
+  padding: 2px 0px !important;
+  line-height: 1.2em !important;
+  margin: -1px;
+  margin-bottom: 0px;
 }
 .urlbarView-row-inner {
-    padding-bottom: 6px !important;
+  padding-bottom: 6px !important;
 }
 .urlbarView {
-    margin: 0px !important;
-    width: 100% !important;
+  margin: 0px !important;
+  width: 100% !important;
 }
 /* END Reduce row paddings to make them more compact --- */
 
 /* Disable Urlbar Animation */
-#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
-    animation-name: none !important;
-    animation: none !important;
+#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;
+  min-height: auto !important;
+  width: auto !important;
 }
-.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
-    margin-bottom: -1px;
+.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;
 }
diff --git a/extensions/window_controls.css b/extensions/window_controls.css
@@ -1,4 +1,4 @@
-/* 
+/*
   Extension: Window Controls / Client Side Decorations (CSD)
   Description: This brings the window controls into the main bar (where the address bar exists). Please see the prefs.css folder for switching the sides from left to right. 
   Repository URL: https://github.com/drannex42/FirefoxSidebar
@@ -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; 
-  margin-left: var(--csd-right) !important; 
+  padding-right: 0px !important;
+  margin-left: 0px !important;
 }
 /* END Client Side Decorations / Window Controls */