feat: add back-and-forth animation for media title and artist overflow labels

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

@@ -290,3 +290,23 @@
     transform: scale(1);
   }
 }
+
+@keyframes zen-back-and-forth-text {
+  0%,
+  20% {
+    transform: translateX(0);
+    left: 0;
+  }
+
+  50%,
+  60% {
+    transform: translateX(calc(-100% - 5px));
+    left: 100%;
+  }
+
+  80%,
+  100% {
+    transform: translateX(0);
+    left: 0;
+  }
+}

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

@@ -75,11 +75,6 @@
   }
 
   &:hover {
-    & #zen-media-main-vbox {
-      transition-delay: 0s;
-      gap: 6px;
-    }
-
     .show-on-hover {
       max-height: 50px;
       padding: 5px;
@@ -220,7 +215,7 @@
     background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
     pointer-events: none;
     top: 6px;
-    left: -2px;
+    left: 0;
     height: calc(100% - 6px);
     z-index: 1;
   }
@@ -229,14 +224,17 @@
     min-height: 16px;
     margin-left: 0;
     font-weight: 500;
+    position: relative; /* For the animation */
+
+    &[overflow] {
+      animation: zen-back-and-forth-text 8s infinite ease-in-out;
+    }
   }
 }
 
 #zen-media-main-vbox {
   height: 100%;
   justify-content: space-between;
-  transition: gap 0.3s ease;
-  gap: 0px;
 }
 
 #zen-media-progress-hbox {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -269,7 +269,7 @@
       &:not([src]),
       &:-moz-broken {
         content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
-        background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%);
+        background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
       }
     }
 

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

@@ -168,9 +168,22 @@ class ZenMediaController {
         },
         {}
       );
+      this.addLabelOverflows();
     });
   }
 
+  addLabelOverflows() {
+    const elements = [this.mediaTitle, this.mediaArtist];
+    for (const element of elements) {
+      const parent = element.parentElement;
+      if (element.scrollWidth > parent.clientWidth) {
+        element.setAttribute('overflow', '');
+      } else {
+        element.removeAttribute('overflow');
+      }
+    }
+  }
+
   setupMediaController(mediaController, browser) {
     this._currentMediaController = mediaController;
     this._currentBrowser = browser;