Update userChrome.css - compact media player

Author: sameerasw

userChrome.css

@@ -339,13 +339,45 @@ body:has(#ctrlTab-panel[hasbeenopened="true"] .ctrlTab-preview:not([hidden="true
   filter: blur(10px) !important;
 }
 
+/* transparent glance */
+.zen-glance-background > vbox{
+  mask-image: linear-gradient(to right, 
+    black 0%, 
+    black 4%, 
+    transparent 7%,
+    transparent 93.5%,
+    black 96%, 
+    black 100%);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+}
 
-/* always open media player */
-#zen-media-controls-toolbar{
+.zen-glance-overlay > vbox{
+  background-color: light-dark(#fff7, #0007) !important;
+  margin-top: 0.5% !important;
+  margin-bottom: 0.5% !important;
+  height: 98% !important;
+}
+
+
+/* ------------------------------------------------------------------ */
+/* media player mods */
+/* #zen-media-controls-toolbar{
   display: block !important;
+  opacity: 0 !important;
+  scale: 0.5 !important;
+  margin-bottom: 15px !important;
+  transition: all 0.5s ease-in-out 10s !important;
+} */
+
+/* always open media player when playing */
+/* #zen-media-controls-toolbar.playing{
   opacity: 1 !important;
-}
+  scale: 1 !important;
+  transition: all 0.5s ease-in-out 0.3s !important;
+} */
 
+/* media player expanded layout */
 #zen-media-controls-toolbar {
   & .show-on-hover {
     max-height: unset !important;
@@ -360,42 +392,17 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
 
 #zen-media-buttons-hbox > toolbarbutton{
   opacity: 0 !important;
-/*   background-image: url("") */
   transition: all 0.3s ease-in-out !important;
   &:hover{
     opacity: 1 !important;
   }
 }
 
-/* transparent glance */
-.zen-glance-background > vbox{
-/*   filter: blur(20px) !important; */
-/*   opacity: 0.05 !important; */
-  
-  
-  mask-image: linear-gradient(to right, 
-    black 0%, 
-    black 4%, 
-    transparent 7%,
-    transparent 93.5%,
-    black 96%, 
-    black 100%);
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-}
-
-.zen-glance-overlay > vbox{
-  background-color: light-dark(#fff7, #0007) !important;
-  margin-top: 0.5% !important;
-  margin-bottom: 0.5% !important;
-  height: 98% !important;
-}
-
 #zen-media-controls-toolbar{
   #zen-media-controls-hbox{
     order: 0 !important;
     height: 0 !important;
-    opacity: 0 !important;
+    overflow: hidden !important;
   }
 
   &:hover #zen-media-controls-hbox{
@@ -408,14 +415,10 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
   order: 1 !important;
 }
 
-#zen-media-controls-toolbar toolbaritem{
-  background-color: light-dark(#fff3, #0003) !important;
-  transition: all 0.5s ease !important;
-}
-
+/* media controls glow */
 #zen-media-controls-toolbar.playing{
   toolbaritem{
-    background-color: light-dark(#fffc, #000c) !important;
+    background-color: light-dark(#fffd, #000d) !important;
   }
 
   padding: 16px 24px;
@@ -461,43 +464,50 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
 }
 
 
-/* urlbar glow */
-/* #urlbar[open][zen-floating-urlbar="true"] {
-  #urlbar-background{
-    background-color:  #000 !important;
-  padding: 16px 24px;
-  position: relative;
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.01);
-
-  &::after {
-    position: absolute;
-    content: "";
-    top: 5px;
-    left: 0;
-    right: 0;
-    z-index: -1;
-    height: 100%;
-    width: 100%;
-    transform: scale(1) translateZ(0);
-    filter: blur(25px);
-    background: linear-gradient(
-      to left,
-      #ff5770,
-      #e4428d,
-      #c42da8,
-      #9e16c3,
-      #6501de,
-      #9e16c3,
-      #c42da8,
-      #e4428d,
-      #ff5770
-    );
-    background-size: 200% 200%;
-    animation: animateGlow 3s ease-in-out infinite;
+/* compact mode player */
+#zen-main-app-wrapper[zen-compact-mode="true"] #zen-media-controls-toolbar{
+  
+  &.playing #zen-media-focus-button{
+    position: fixed !important;
+    left: 180px !important;
+    bottom:0 !important;
+    opacity: 1 !important;
+    z-index: 100000000 !important;
+  }
+  
+  position: fixed !important;
+  transform: translateX(-120%) !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  margin: 5px 5px !important;
+  z-index: 1000 !important;
+    width: 150px !important;
+    height: 50px !important;
+  
+  &:hover{
+  transform: translateX(0) !important;
+    
+  #zen-media-focus-button{
+    position: initial !important;
+    left: initial !important;
+    bottom:initial !important;
+    opacity: initial !important;
+    z-index: initial !important;
+    }
   }
 }
-} */
+
+#zen-main-app-wrapper[zen-compact-mode="true"] #navigator-toolbox{
+  opacity: 1 !important;
+}
+
+
+
+
+
+
+
+