Update userChrome.css - player at bottom of the sidebar

Author: sameerasw

userChrome.css

@@ -362,20 +362,6 @@ body:has(#ctrlTab-panel[hasbeenopened="true"] .ctrlTab-preview:not([hidden="true
 
 /* ------------------------------------------------------------------ */
 /* 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 {
@@ -419,17 +405,7 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
 }
 
 /* media controls glow */
-#zen-media-controls-toolbar.playing{
-  toolbaritem{
-    background-color: light-dark(#fffd, #000d) !important;
-  }
-  
-  padding: 16px 24px;
-  position: relative;
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.01);
-
-  &::after {
+#zen-media-controls-toolbar::after{
     position: absolute;
     content: "";
     bottom: 0px;
@@ -440,6 +416,8 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
     width: 100%;
     transform: scale(0.9) translateZ(0);
     filter: blur(15px);
+  opacity: 0 !important;
+  transition: all 0.3s ease-in-out !important;
     background: linear-gradient(
   135deg,
   color-mix(in srgb, var(--zen-primary-color) 10%, black),
@@ -464,6 +442,20 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
 );
 
     background-size: 200% 200%;
+}
+
+#zen-media-controls-toolbar.playing{
+  toolbaritem{
+    background-color: light-dark(#fffd, #000d) !important;
+  }
+  
+  padding: 16px 24px;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.01);
+
+  &::after {
+    opacity: 1 !important;
     animation: animateGlow 5s cubic-bezier(0.1, 0.7, 0.5, 0.1) infinite;
   }
 
@@ -472,6 +464,7 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
   }
 }
 
+/* glow animation */
 @keyframes animateGlow {
   0% {
     background-position: 0% 20%;
@@ -491,13 +484,14 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
     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;
+  margin: 0px !important;
   z-index: 1000 !important;
     width: 150px !important;
     height: 50px !important;
@@ -515,18 +509,39 @@ max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
   }
 }
 
+
+/* hover to show workspace dots */
 #zen-main-app-wrapper[zen-compact-mode="true"] #navigator-toolbox{
   opacity: 1 !important;
 }
 
+#zen-sidebar-bottom-buttons{
+  bottom: -25px !important;
+  opacity: 0 !important;
+  transition: all 0.3s ease-in-out !important;
+}
 
 
+#navigator-toolbox:hover{
+  #zen-sidebar-bottom-buttons, #zen-media-controls-toolbar{
+  bottom: 0px !important;
+  opacity: 1 !important;
+}
+}
 
 
+#zen-sidebar-bottom-buttons{
+  order: 1 !important;
+}
 
+#zen-media-controls-toolbar{
+  order: 2 !important;
+}
 
-
-
+/* no workspace indicator */
+#zen-current-workspace-indicator-container{
+  display: none !important;
+}