From 9f9fa2a49eb95af19b93b550ae83d23c821da805 Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 12:24:50 -0300
Subject: [PATCH] feat: artist name in cyan, song title in white

---
 plugin/contents/ui/dancer.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 7fae891..aa6f9b3 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -211,6 +211,9 @@ html, body {
   animation: musicScroll 18s linear infinite;
 }
 .music-text.short { animation: none; }
+#musicArtist { color: rgba(0, 200, 255, 0.85); }
+#musicTitle  { color: #ffffff; }
+.music-sep   { color: rgba(255,255,255,0.4); }
 
 @keyframes musicScroll {
   0%   { transform: translateX(100%); }
@@ -779,7 +782,9 @@ html, body {
   <div class="music-ticker">
     <span class="music-icon">♫</span>
     <div class="music-scroll-wrap">
-      <span class="music-text short" id="musicText">— —</span>
+      <span class="music-text short" id="musicText">
+        <span id="musicArtist"></span><span class="music-sep" id="musicSep"></span><span id="musicTitle"></span>
+      </span>
     </div>
   </div>
 
@@ -1090,9 +1095,10 @@ setInterval(() => {
    MUSIC INFO  (called by QML via runJavaScript)
    ============================================================ */
 function updateMusic(artist, title) {
-  const el = document.getElementById('musicText');
-  const text = (artist && title) ? `${artist}  —  ${title}`
-             : (title || artist || '— —');
+  const el      = document.getElementById('musicText');
+  const artEl   = document.getElementById('musicArtist');
+  const titleEl = document.getElementById('musicTitle');
+  const sepEl   = document.getElementById('musicSep');
   const playing = !!(artist || title);
   isPlaying = playing;
   document.querySelector('.robot-wrap').style.opacity   = playing ? '1' : '0';
@@ -1100,10 +1106,13 @@ function updateMusic(artist, title) {
   albumArtEl.style.opacity = playing ? '1' : '0';
   if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });
   if (playing) fetchTheme();
-  if (el.textContent === text) return;
-  el.textContent = text;
+  const key = artist + '|' + title;
+  if (el.dataset.key === key) return;
+  el.dataset.key = key;
+  artEl.textContent   = artist || '';
+  sepEl.textContent   = (artist && title) ? '  —  ' : '';
+  titleEl.textContent = title || (!artist ? '— —' : '');
   if (playing) pickSkeleton();
-  // scroll only if text is long
   const wrap = el.parentElement;
   el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10);
 }