Update userChrome.css - transparent compact sidebar

Author: sameerasw

userChrome.css

@@ -330,6 +330,7 @@ tab[busy] {
   margin-top: 0.5% !important;
   margin-bottom: 0.5% !important;
   height: 98% !important;
+  border-radius: 1.5em !important;
 }
 
 /*******************************************************************************
@@ -729,7 +730,7 @@ body:has(
 
 /* Permanently transparent compact sidebar - fix for zen bug */
 #zen-main-app-wrapper[zen-compact-mode="true"] #navigator-toolbox {
-  opacity: 0 !important;
+/*   opacity: 0 !important; */
 }
 
 /* auto hide toolbar buttons */
@@ -792,3 +793,28 @@ tab[discarded=""]:hover,
 tab[pending="true"]:hover {
   filter: grayscale(0) !important;
 }
+
+
+/* transparent sidebar WIP */
+#titlebar::before{
+  width: 18 !important;
+  z-index: 0 !important;
+  background-color: #222a !important; 
+/*   backdrop-filter: blur(20px) !important; */
+}
+
+#tabbrowser-tabbox{
+/*   filter: blur(20px) !important; */
+}
+
+#zen-main-app-wrapper[zen-compact-mode="true"]:has([zen-user-show=""]){
+#tabbrowser-tabbox {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 17em, black 17em, black 100%) !important;
+  mask-image: linear-gradient(to right, transparent 0, transparent 15.5em, black 15.5em, black 100%) !important;
+  -webkit-mask-repeat: no-repeat !important;
+  mask-repeat: no-repeat !important;
+  -webkit-mask-size: 100% 100% !important;
+  mask-size: 100% 100% !important;
+}
+
+}