Add support for private window among other UI improvements

README.md

@@ -30,9 +30,9 @@ to maintaining this theme actively.
 
 <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 <code>userChrome.css</code> file and folder path created <a href="https://www.userchrome.org/how-create-userchrome-css.html">properly</a></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</a> if you don't have it already installed</li>
-<li> Copy the content in my <i>userChrome.css</i> to your file (I don't support this method) or replace/copy it in the corresponding folder path</li>
+<li> Copy <code>userChrome.css</code>, <code>darkTheme.css</code> and <code>privTheme.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>

darkTheme.css

@@ -0,0 +1,79 @@
+/* Force default dark theme */
+
+:root {
+	--gg-black: rgb(28, 27, 34); /* #1c1b22 */
+	--gg-bg: rgb(43, 42, 51); /* #2b2a33 */
+	--gg-fg: rgb(251, 251, 254); /* #fbfbfe */
+
+	--button-bgcolor: rgb(43, 42, 51) !important;
+	--button-hover-bgcolor: rgb(82, 82, 94) !important;
+	--button-active-bgcolor: rgb(91, 91, 102) !important;
+	--button-primary-bgcolor: rgb(0, 221, 255) !important;
+	--button-primary-hover-bgcolor: rgb(128, 235, 255) !important;
+	--button-primary-active-bgcolor: rgb(170, 242, 255) !important;
+	--button-primary-color: rgb(43, 42, 51) !important;
+	--input-bgcolor: rgb(66, 65, 77) !important;
+	--input-color: rgb(251, 251, 254) !important;
+	--input-border-color: rgb(143, 143, 157) !important;
+	--autocomplete-popup-separator-color: rgb(82, 82, 94) !important;
+	--panel-banner-item-update-supported-bgcolor: rgb(84, 255, 189) !important;
+	--panel-banner-item-info-icon-bgcolor: rgb(128, 235, 255) !important;
+	--tab-icon-overlay-stroke: rgb(66, 65, 77) !important;
+	--tab-icon-overlay-fill: rgb(251, 251, 254) !important;
+	--panel-item-hover-bgcolor: color-mix(in srgb, currentColor 9%, transparent) !important;
+	--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 14%, transparent) !important;
+	--panel-item-active-bgcolor: color-mix(in srgb, currentColor 25%, transparent) !important;
+	--urlbar-icon-fill-opacity: 1 !important;
+	--panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) !important;
+	--lwt-accent-color: rgb(28, 27, 34) !important;
+	--lwt-text-color: rgba(251, 251, 254) !important;
+	--arrowpanel-background: rgb(66, 65, 77) !important;
+	--arrowpanel-color: rgb(251, 251, 254) !important;
+	--arrowpanel-border-color: rgb(82, 82, 94) !important;
+	--toolbar-field-background-color: rgb(28, 27, 34) !important;
+	--toolbar-field-color: rgb(251, 251, 254) !important;
+	--toolbar-field-border-color: rgba(0, 0, 0, 0) !important;
+	--toolbar-field-focus-background-color: rgba(66, 65, 77, 1) !important;
+	--toolbar-field-focus-color: rgb(251, 251, 254) !important;
+	--lwt-tab-text: rgb(251, 251, 254) !important;
+	--toolbar-bgcolor: rgb(43, 42, 51) !important;
+	--toolbar-color: rgb(251, 251, 254) !important;
+	--chrome-content-separator-color: rgb(12, 12, 13) !important;
+	--toolbarbutton-icon-fill: rgb(251, 251, 254) !important;
+	--lwt-selected-tab-background-color: rgb(66, 65, 77) !important;
+	--autocomplete-popup-highlight-background: rgb(43, 42, 51) !important;
+	--tabpanel-background-color: rgb(43, 42, 51) !important;
+	--sidebar-background-color: var(--gg-bg) !important;
+  --sidebar-text-color: var(--gg-fg) !important;
+}
+
+.content-header {
+  background: var(--gg-bg) !important;
+}
+
+.content-scrollable {
+  background: var(--gg-black) !important;
+}
+
+#sidebar,
+#sidebar-header {
+  background-color: var(--gg-bg) !important;
+  border-inline: 4px solid var(--gg-bg);
+}
+
+.sidebar-panel {
+	background: var(--gg-bg) !important;
+}
+
+.sidebar-placesTree {
+  background: var(--gg-black) !important;
+  color: #d4d4d4 !important;
+}
+
+.sidebar-placesTree:before {
+  background: var(--gg-bg);
+}
+
+.sidebar-panel[lwt-sidebar] {
+	background: var(--gg-bg);
+}

privTheme.css

@@ -0,0 +1,8 @@
+: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;
+
+	--avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
+}

userChrome-linux.css

@@ -1,37 +1,20 @@
-/* --- TAB AND TITLE BAR --- */
+@import url("darkTheme.css");
+@import url("privTheme.css");
 
 :root {
-  --sidebar-width: 267px;
-  --sidebar-background-color: #2b2a33;
-  --sidebar-text-color: #fbfbfe;
+	--sidebar-width: 267px;
 }
 
-/* hide native tabs and title bar */
+/* --- TAB AND TITLE BAR --- */
+
 #TabsToolbar {
-  visibility: collapse !important;
+  display: none !important;
   height: 0 !important;
 }
 
-/* mini patch to hide native tabs correctly */
-.tabbrowser-tab {
-  visibility: collapse;
-  height: 0px;
-}
-
-.tabbrowser-tab[visuallyselected="true"] {
-  visibility: collvariables apse;
-  height: 0px;
-}
-
-.tab[selected="true"] {
-  visibility: collapse;
-  height: 0px;
-}
-
 /* --- SIDEBAR --- */
 
 #sidebar-header {
-  /* uncomment to hide the sidebar header */
   display: none !important;
   border-bottom: none !important;
   border: none !important;
@@ -40,8 +23,6 @@
 #sidebar-box {
   margin-top: -1px;
   position: relative;
-  --sidebar-background-color: #2b2a33 !important;
-  --sidebar-text-color: #fbfbfe !important;
   min-width: var(--sidebar-width) !important;
   width: var(--sidebar-width) !important;
   max-width: var(--sidebar-width) !important;
@@ -51,6 +32,7 @@
 #sidebar-box[positionend] {
   direction: rtl;
 }
+
 #sidebar-box[positionend] > * {
   direction: ltr;
 }
@@ -63,30 +45,15 @@
   direction: rtl;
 }
 
-.content-header {
-  background: #2b2a33 !important;
-}
-
-.content-scrollable {
-  background: #1c1b22 !important;
-}
-
 #sidebar-icon {
   filter: contrast(150%);
   opacity: 1;
 }
 
-.sidebar-placesTree {
-  border-top-right-radius: 6px;
-  background: #1c1b22 !important;
-  color: #d4d4d4;
-}
-
 /* for sidebars placed to the left (default) */
 .sidebar-placesTree:before {
   content: "";
   z-index: -1;
-  background: #2b2a33 !important;
   position: absolute;
   height: 10px;
   width: 10px;
@@ -95,22 +62,24 @@
 }
 
 .sidebar-placesTree {
-  border-top-left-radius: 6px;
-  background: #1c1b22 !important;
-  color: #aaaaaa !important;
+  border-top-right-radius: 6px;
 }
 
 /* for sidebars placed to the right */
 /* .sidebar-placesTree:before {
   content: "";
   z-index: -1;
-  background: #2b2a33 !important;
   position: absolute;
   height: 10px;
   width: 10px;
   top: 45px;
   left: 0;
-} */
+}
+
+.sidebar-placesTree {
+  border-top-left-radius: 6px;
+}
+*/
 
 #sidebar-title {
   font-size: 1.1rem;
@@ -132,11 +101,9 @@
   display: none;
 }
 
-/* add outline border */
+/* Add outline border */
 #sidebar,
 #sidebar-header {
-  background-color: inherit !important;
-  border-inline: 4px solid #2b2a33;
   border-inline-width: 0px 4px;
 }
 
@@ -145,15 +112,15 @@
   border-inline-width: 4px 0px;
 }
 
+#appcontent {
+	margin-top: -1px;
+}
+
 /* hide on fullscreen */
 #main-window[sizemode="fullscreen"] #sidebar-box {
-  /* 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; */
-  margin-left: -267px !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; */
+  /* modify the size if you use a custom one */
+  margin-left: -267px !important;
 }
 
-/* --- SEARCH BAR --- */
-
-#sidebar-search-container {
-  background-color: #2b2a33 !important;
-}