Fix visual bugs and improve overall css structure

- Fix visual bug where the border of the sidebar would display 1 extra pixel of space between menu bar and itself\n- Every theme colour is now an exportable variable\n- Remove unused css\n- Among other minor fixes

README.md

@@ -28,29 +28,23 @@ to maintaining this theme actively.
 
 ### How to install?
 
-<ol>
-<li> In Firefox, go to <code>about:config</code> and set <code>toolkit.legacyUserProfileCustomizations.stylesheets</code> to <code>True</code></li>
-<li> Make sure you have the <a href="https://www.userchrome.org/how-create-userchrome-css.html">chrome folder</a> within your firefox profile</li>
-<li> Get <a href="https://github.com/mbnuqw/sidebery/">Sidebery v5 (beta)</a> if you don't have it already installed</li>
-<li> Copy <code>userChrome.css</code>, <code>darkTheme.css</code> and <code>private.css</code> to the chrome folder</li>
-<li> Go to Sidebery settings and paste the content of my <code>sidebery.css</code> file into <i>Styles editor > Sidebar</i> </li>
-<li> Enjoy your new setup!</li>
-</ol>
-<hr>
+1. In Firefox, go to `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets` to `True`. Make sure you have the <a href="https://www.userchrome.org/how-create-userchrome-css.html">chrome folder</a> within your Firefox profile
+2. Get <a href="https://github.com/mbnuqw/sidebery/">Sidebery v5 (beta)</a> if you don't have it already installed
+3. Copy `userChrome.css`, `darkTheme.css` and `private.css` to the chrome folder
+4. Go to Sidebery settings and paste the content of my `sidebery.css` file into _Styles editor > Sidebar_
+5. Enjoy your new setup!<hr>
 
 ### Known bugs
 
-<ul>
-<li>In Sidebery beta, autoshrink triggers when you're moving a tab even though the mouse is still hovering the panel. I decided to disable that characteristic until I find a workaround.</li>
-<li><span style="text-decoration: line-through;">When moving a tab, the tab position indicator doesn't follow the <code>margin-top</code> CSS rule for tabs; if it bothers you a lot, identify <code>.Tab {margin-top: 5px;</code> and remove it.</span><b><i>&nbsp;&nbsp;Fixed!</i></b></li>
-</ul>
+- In Sidebery beta, autoshrink triggers when you're moving a tab even though the mouse is still hovering the panel. I decided to disable that characteristic until I find a workaround.
+- ~~When moving a tab, the tab position indicator doesn't follow the `margin-top` CSS rule for tabs~~  **_Fixed!_**
+
 <hr>
 
 ### Credits
 
-<ul>
-<li>to <a href="https://github.com/MrOtherGuy">@MrOtherGuy</a> for his <a href="https://github.com/MrOtherGuy/firefox-csshacks">Firefox CSS Hacks</a></li>
-<li>to <a href="https://www.reddit.com/user/captainkaba/">u/captainkaba</a> for his <a href="https://www.reddit.com/r/FirefoxCSS/comments/rqo5z6/some_people_asked_for_the_css_so_here_is_my_setup/">Denkfabrik</a> theme (which I used as a base for legacy)</li>
-<li>to Reddit user <a href="https://www.reddit.com/user/It_Was_The_Other_Guy/">u/It_Was_The_Other_Guy</a> for his <a href="https://www.reddit.com/r/FirefoxCSS/comments/vzcqzn/comment/ig8a8ba/">tip</a> which was very useful in legacy</li>
-<li>to Reddit user <a href="https://www.reddit.com/user/GainghisKhan/">u/GainghisKhan</a> for <a href="https://www.reddit.com/r/FirefoxCSS/comments/wcc9fc/comment/j2aoa8r/">finding a bug and providing a solution idea for it</a> in legacy</li>
-</ul>
+- to <a href="https://github.com/MrOtherGuy">@MrOtherGuy</a> for his <a href="https://github.com/MrOtherGuy/firefox-csshacks">Firefox CSS Hacks</a>
+- to <a href="https://www.reddit.com/user/captainkaba/">u/captainkaba</a> for his <a href="https://www.reddit.com/r/FirefoxCSS/comments/rqo5z6/some_people_asked_for_the_css_so_here_is_my_setup/">Denkfabrik</a> theme (which I used as a base for legacy)
+- to Reddit user <a href="https://www.reddit.com/user/It_Was_The_Other_Guy/">u/It_Was_The_Other_Guy</a> for his <a href="https://www.reddit.com/r/FirefoxCSS/comments/vzcqzn/comment/ig8a8ba/">tip</a> which was very useful in legacy
+- to Reddit user <a href="https://www.reddit.com/user/GainghisKhan/">u/GainghisKhan</a> for <a href="https://www.reddit.com/r/FirefoxCSS/comments/wcc9fc/comment/j2aoa8r/">finding a bug and providing a solution idea for it</a> in legacy
+

darkTheme.css

@@ -1,25 +1,37 @@
-/* Dark theme variables */
-
 :root {
-  --gg-bg: rgb(43, 42, 51); /* #2b2a33 */
-  --gg-fg: rgb(251, 251, 254); /* #fbfbfe */
-  --gg-fg-faded: rgb(153, 153, 157); /* #99999d (alt #8f8f9d) */
-  --gg-black: rgb(28, 27, 34); /* #1c1b22 */
-  --gg-grey: rgb(82, 82, 94); /* #52525e */
-  --gg-darkgrey: rgb(66, 65, 77); /* #42414d */
-  --gg-cyan: rgb(128, 235, 255); /* #80ebff */
+  /* --- Colour variables --- */
+  --gg-bg: #2a2932;
+  --gg-fg: #fbfbfe;
+  --gg-fg-alt: #d4d4d4;
+  --gg-fg-faded: #8f8f9d;
+  --gg-grey-alt: #5b5b67;
+  --gg-grey: #53535f;
+  --gg-darkgrey: #43424d;
+  --gg-black: #1c1b22;
+  --gg-black-bold: #0c0c0d;
+  --gg-pseudotransparent: rgba(0, 0, 0, 0);
+  --gg-cyan: #80ecff;
+  --gg-lightblue: #00ddff;
+  --gg-skyblue: #a8f2ff;
+  --gg-turquoise: #52ffbd;
+  --gg-purple-dark: #3c1f7a;
+  --gg-purple-mid: #ac70ff;
+  --gg-purple: #9059ff;
+  --gg-pink: #ff4aa2;
+  --gg-yellow: #ffbd4f;
+  /* Attributes */
   --button-bgcolor: var(--gg-bg) !important;
   --button-hover-bgcolor: var(--gg-grey) !important;
-  --button-active-bgcolor: rgb(91, 91, 102) !important;
-  --button-primary-bgcolor: rgb(0, 221, 255) !important;
+  --button-active-bgcolor: var(--gg-grey-alt) !important;
+  --button-primary-bgcolor: var(--gg-lightblue) !important;
   --button-primary-hover-bgcolor: var(--gg-cyan) !important;
-  --button-primary-active-bgcolor: rgb(170, 242, 255) !important;
+  --button-primary-active-bgcolor: var(--gg-skyblue) !important;
   --button-primary-color: var(--gg-bg) !important;
   --input-bgcolor: var(--gg-darkgrey) !important;
   --input-color: var(--gg-fg) !important;
   --input-border-color: var(--gg-fg-faded) !important;
   --autocomplete-popup-separator-color: var(--gg-grey) !important;
-  --panel-banner-item-update-supported-bgcolor: rgb(84, 255, 189) !important;
+  --panel-banner-item-update-supported-bgcolor: var(--gg-turquoise) !important;
   --panel-banner-item-info-icon-bgcolor: var(--gg-cyan) !important;
   --tab-icon-overlay-stroke: var(--gg-darkgrey) !important;
   --tab-icon-overlay-fill: var(--gg-fg) !important;
@@ -41,9 +53,9 @@
   --urlbar-icon-fill-opacity: 1 !important;
   --panel-separator-zap-gradient: linear-gradient(
     90deg,
-    #9059ff 0%,
-    #ff4aa2 52.08%,
-    #ffbd4f 100%
+    var(--gg-purple) 0%,
+    var(--gg-pink) 52.08%,
+    var(--gg-yellow) 100%
   ) !important;
   --lwt-accent-color: var(--gg-black) !important;
   --lwt-text-color: var(--gg-fg) !important;
@@ -52,17 +64,18 @@
   --arrowpanel-border-color: var(--gg-grey) !important;
   --toolbar-field-background-color: var(--gg-black) !important;
   --toolbar-field-color: var(--gg-fg) !important;
-  --toolbar-field-border-color: rgba(0, 0, 0, 0) !important;
+  --toolbar-field-border-color: var(--gg-pseudotransparent) !important;
   --toolbar-field-focus-background-color: var(--gg-darkgrey) !important;
   --toolbar-field-focus-color: var(--gg-fg) !important;
   --lwt-tab-text: var(--gg-fg) !important;
   --toolbar-bgcolor: var(--gg-bg) !important;
   --toolbar-color: var(--gg-fg) !important;
-  --chrome-content-separator-color: rgb(12, 12, 13) !important;
+  --chrome-content-separator-color: var(--gg-black-bold) !important;
   --toolbarbutton-icon-fill: var(--gg-fg) !important;
   --lwt-selected-tab-background-color: var(--gg-darkgrey) !important;
   --autocomplete-popup-highlight-background: var(--gg-bg) !important;
   --tabpanel-background-color: var(--gg-bg) !important;
   --sidebar-background-color: var(--gg-bg) !important;
   --sidebar-text-color: var(--gg-fg) !important;
 }
+

private.css

@@ -1,8 +1,9 @@
-:root[privatebrowsingmode="temporary"] {
-
-	--focus-outline-color: rgb(172, 112, 255) !important;
-	--toolbar-field-focus-border-color: rgb(172, 112, 255) !important;
-	--lwt-selected-tab-background-color: rgb(60, 31, 123) !important;
+@import url("darkTheme.css");
 
-	--avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
+:root[privatebrowsingmode="temporary"] {
+  --focus-outline-color: var(--gg-purple) !important;
+  --toolbar-field-focus-border-color: var(--gg-purple) !important;
+  --lwt-selected-tab-background-color: var(--gg-purple-dark) !important;
+  --avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
 }
+

sidebery.css

@@ -1,8 +1,8 @@
 #root.root {
   --s-frame-bg: #1c1b22 !important;
   --s-toolbar-bg: #2b2a33 !important;
-  /*  --s-frame-fg: #fbfbfe !important; */
-  /* --s-toolbar-fg: #fbfbfe !important; */
+  /* --s-frame-fg: #fbfbfe !important;
+	--s-toolbar-fg: #fbfbfe !important; */
 }
 
 /* --- NAV BAR --- */
@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   padding: 0 6px;
-  height: 48px;
+  height: 50px;
 }
 
 /* --- PINNED TABS --- */
@@ -44,34 +44,42 @@
   opacity: 100%;
 }
 
-.TabsPanel {
-  margin: 5px 0;
-}
-
 .TabsPanel .new-tab-btn {
   height: var(--tabs-height);
   margin: 0 4px;
 }
 
 /* --- IMPROVEMENTS --- */
 
+.TabsPanel {
+  margin: 5px 0;
+}
+
 .central-box {
   z-index: 1;
   background: var(--s-frame-bg);
   border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
 }
 
 .main-box:after {
   position: absolute;
   z-index: 0;
   top: -5px;
+  left: auto;
   right: -5px;
   content: "";
-  background: var(--s-toolbar-bg);
+  background: #2b2a33;
   height: 10px;
   width: 10px;
 }
 
+/* Uncomment if you place your sidebar to the right */
+/* .main-box:after {
+	right: auto;
+	left: -5px;
+} */
+
 .popup {
   margin-top: 50px;
   max-width: 97%;

userChrome.css

@@ -31,6 +31,7 @@
   position: relative;
 }
 
+/* Support for languages that are read from right to left */
 #sidebar-box[positionend] {
   direction: rtl;
 }
@@ -60,42 +61,23 @@
   opacity: 1;
 }
 
-/* for sidebars placed to the left (default) */
 .sidebar-placesTree {
+  position: relative;
   border-top-right-radius: 6px;
   background: var(--gg-black) !important;
-  color: #d4d4d4 !important;
-}
-
-.sidebar-placesTree:before {
-  content: "";
-  z-index: -1;
-  position: absolute;
-  height: 10px;
-  width: 10px;
-  top: 45px;
-  right: 0;
-  background: var(--gg-bg);
+  color: var(--gg-fg-alt) !important;
 }
 
-/* for sidebars placed to the right */
-/*
-.sidebar-placesTree {
+/* Uncomment if you place your sidebar to the right */
+/* .sidebar-placesTree {
+	border-top-right-radius: 0;
 	border-top-left-radius: 6px;
-	background: var(--gg-black) !important;
-	color: #d4d4d4 !important;
-}
+} */
 
 .sidebar-placesTree:before {
-	content: "";
-	z-index: -1;
-	position: absolute;
-	height: 10px;
-	width: 10px;
-	top: 45px;
-	left: 0;
+  right: auto;
+  left: 0;
 }
-*/
 
 #sidebar-title {
   font-size: 1.1rem;
@@ -114,11 +96,11 @@
 }
 
 #sidebar-splitter {
+  margin-top: -1px;
   width: 0px !important;
   border: 2px solid var(--gg-bg) !important;
 }
 
-/* Add outline border */
 #sidebar,
 #sidebar-header {
   border-inline-width: 0px 4px;
@@ -129,16 +111,17 @@
   border-inline-width: 4px 0px;
 }
 
+/* --- IMPROVEMENTS & FEATS --- */
+
 #appcontent {
   margin-top: -1px;
 }
 
-/* hide on fullscreen */
+/* Hide on fullscreen */
 #main-window[sizemode="fullscreen"] #sidebar-box,
 #main-window[sizemode="fullscreen"] #sidebar-splitter {
-  /* match the transition from the toolbar; swap to margin-right if you use the sidebar to the right
-	transition: .8s margin-left ease-out !important; */
-  /* modify the size if you use a custom one */
+  /* --- Match the transition from the toolbar; swap to margin-right if you use the sidebar to the right --- */
+  /* transition: .8s margin-left ease-out !important; */
   display: none !important;
 }