refactor media controls animations and styles; add marquee effect for media title

src/browser/base/content/zen-images/note-indicator.svg

@@ -1,13 +1,13 @@
 <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" fill="none"/>
-  
+
     <style type="text/css"><![CDATA[
     .note {
-      fill: white;
+      fill: currentColor;
       transform-box: fill-box;
       transform-origin: center;
     }
-    
+
     @keyframes flyUpLeft {
       from {
         opacity: 1;
@@ -41,7 +41,7 @@
     }*/
   ]]></style>
 
-  
+
   <g class="note-group">
     <g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
@@ -51,7 +51,7 @@
         c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
         C475.403,321.974,514.2,236.599,448.231,166.755z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
       <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
         c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
@@ -60,7 +60,7 @@
         c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
         H512V90.785V2.152L133.703,45.86z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
         c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -78,7 +78,7 @@
         c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
         H512V90.785V2.152L133.703,45.86z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
         c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -87,7 +87,7 @@
         c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
         C475.403,321.974,514.2,236.599,448.231,166.755z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
       <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
         c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292

src/browser/base/content/zen-styles/zen-animations.css

@@ -290,3 +290,16 @@
     transform: scale(1);
   }
 }
+
+@keyframes zen-marquee-h {
+  0%,
+  20%,
+  80%,
+  100% {
+    transform: translateX(0px);
+  }
+  40%,
+  60% {
+    transform: translateX(calc(-1 * max(0px, 100% - 266px)));
+  }
+}

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -50,8 +50,8 @@
     &::-moz-range-thumb {
       background: var(--zen-primary-color);
       border: none;
-      width: calc(var(--progress-height) * 2.5);
-      height: calc(var(--progress-height) * 2.5);
+      width: calc(var(--progress-height) * 2);
+      height: calc(var(--progress-height) * 2);
       border-radius: 50%;
       cursor: pointer;
     }
@@ -69,7 +69,7 @@
       padding-top: 6px;
       margin-bottom: 0;
       opacity: 1;
-      transform: translateY(0);
+      transform: translateY(0) !important;
       pointer-events: auto;
     }
   }
@@ -98,6 +98,7 @@
   }
 
   toolbaritem {
+    --zen-media-control-bg: light-dark(rgb(255, 255, 255), rgb(10, 10, 10)) !important;
     flex-grow: 1;
     padding: 0;
     transition: padding 0.3s ease-out;
@@ -106,22 +107,23 @@
     bottom: 0;
     padding: 4px;
     border-radius: var(--border-radius-medium);
-    background: light-dark(rgb(255, 255, 255), rgb(7, 7, 7)) !important;
+    background: var(--zen-media-control-bg) !important;
     width: 100%;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
   }
 
   .show-on-hover {
     max-height: 0;
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(1rem);
     padding: 0 6px;
     pointer-events: none;
     transition:
-      max-height 0.2s ease-out,
-      opacity 0.2s ease-out,
-      transform 0.2s ease-out,
-      padding 0.2s ease-out;
+      max-height 0.3s ease,
+      opacity 0.3s ease,
+      transform 0.3s ease,
+      padding 0.3s ease;
   }
 
   #zen-media-current-time,
@@ -147,13 +149,6 @@
   }
 }
 
-#zen-media-title,
-#zen-media-artist {
-  white-space: nowrap;
-  width: 0;
-  margin-left: 0;
-}
-
 #zen-media-title,
 #zen-media-artist {
   align-self: start;
@@ -178,22 +173,25 @@
 }
 
 #zen-media-info-vbox {
-  transition-delay: 0.01s;
+  transition-delay: 0.01s !important;
+  transform: translateY(-0.4rem) !important;
+  overflow-x: hidden;
+  white-space: nowrap;
+  /* Overflow inner box shadow from the left to simulate overflow */
+  mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
   & label {
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     min-height: 16px;
+    margin-left: 0;
+    animation: zen-marquee-h 10s ease-in-out infinite;
   }
 }
 
 #zen-media-main-vbox {
   height: 100%;
   justify-content: space-between;
-  transition: gap 0.1s ease-out;
-  transition-delay: 0.1s;
+  transition: gap 0.3s ease;
   gap: 0px;
+  mask-image: linear-gradient(to right, transparent, var(--zen-media-control-bg) 0.6em);
 }
 
 #zen-media-progress-hbox {

src/browser/base/zen-components/ZenMediaController.mjs

@@ -34,10 +34,16 @@ class ZenMediaController {
       if (this._currentBrowser) {
         if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
           gZenUIManager.motion
-            .animate(this.mediaControlBar, {
-              opacity: [1, 0],
-              y: [0, 10],
-            })
+            .animate(
+              this.mediaControlBar,
+              {
+                opacity: [1, 0],
+                y: [0, 10],
+              },
+              {
+                duration: 0.1,
+              }
+            )
             .then(() => {
               this.mediaControlBar.setAttribute('hidden', 'true');
             });
@@ -46,6 +52,7 @@ class ZenMediaController {
           window.requestAnimationFrame(() => {
             this.mediaControlBar.style.height =
               this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
+            this.mediaControlBar.style.opacity = 0;
             gZenUIManager.motion.animate(
               this.mediaControlBar,
               {
@@ -92,10 +99,16 @@ class ZenMediaController {
     }
 
     gZenUIManager.motion
-      .animate(this.mediaControlBar, {
-        opacity: [1, 0],
-        y: [0, 10],
-      })
+      .animate(
+        this.mediaControlBar,
+        {
+          opacity: [1, 0],
+          y: [0, 10],
+        },
+        {
+          duration: 0.1,
+        }
+      )
       .then(() => {
         this.mediaControlBar.setAttribute('hidden', 'true');
         gZenUIManager.updateTabsToolbar();