Added auto scroll when text is too long

now-playing/themes/compact/style.css

@@ -35,6 +35,10 @@
     -webkit-mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%); */
 }
 
+#progress-bar-track {
+    transition: all 1s ease-in-out;
+}
+
 .progress {
 	box-sizing: border-box;
 	padding: 0.25em 0.75em;
@@ -53,7 +57,7 @@
 	gap: 0.5em;
 	min-width: 100%;
 	justify-content: var(--justify-content);
-	overflow: visible;
+	overflow: hidden;
 }
 
 #artist-label,
@@ -69,23 +73,39 @@
 }
 
 .text-label {
-	white-space: nowrap;
-    /* overflow: hidden; */
     transition: opacity 0.25s ease-in-out;
 }
 
-
-/* TODO: Marquee doesn't work that well, disabling for now */
-/* .scrolling-text {
-    animation: marquee var(--scroll-duration, 15s) linear infinite;
-    display: inline-block;
+/* Inner wrapper holding track + artist inline */
+#song-label .scroll-content,
+#song-label-background .scroll-content {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 0.5em; /* Spacing between Track and Artist */
+    white-space: nowrap;
+    will-change: transform;
 }
 
-@keyframes marquee {
-    0% { 
-        transform: translateX(var(--container-width)); 
-    }
-    100% { 
-        transform: translateX(var(--text-width));
-    }
-} */
+/* Preserve original font weights */
+.track-label {
+    font-weight: 700;
+}
+
+.artist-label {
+    font-size: 0.8em;
+    font-weight: 400;
+    opacity: 0.7;
+}
+
+/* Marquee scroll animation */
+#song-label.is-overflowing .scroll-content,
+#song-label-background.is-overflowing .scroll-content {
+    animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite;
+}
+
+/* Mask animation applied to container */
+#song-label.is-overflowing,
+#song-label-background.is-overflowing {
+    animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite;
+}