From af03061f75e486cb5e1557d6abe681e4853b8ad6 Mon Sep 17 00:00:00 2001 From: Honey Date: Sun, 26 Apr 2026 22:35:29 +0200 Subject: [PATCH] fix: lyrics active line uses transform scale instead of font-size Prevents other lines from shifting when active line grows. Adds subtle glow effect on active line for karaoke feel. Co-Authored-By: Claude Sonnet 4.6 --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 43999de..ca8a2cf 100644 --- a/styles.css +++ b/styles.css @@ -618,9 +618,9 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} #np-lyrics-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding:16px 28px 48px;scroll-behavior:smooth} .np-overlay.lyrics-mode #np-player-view{display:none} .np-overlay.lyrics-mode #np-lyrics-view{display:flex} -.lyrics-line{font-size:16px;line-height:1.75;color:rgba(255,255,255,.22);transition:color .35s,font-size .35s,font-weight .2s;padding:2px 0;cursor:pointer;text-align:center} +.lyrics-line{font-size:18px;line-height:1.85;color:rgba(255,255,255,.22);transition:color .3s,transform .3s,opacity .3s,text-shadow .3s;padding:5px 0;cursor:pointer;text-align:center;transform:scale(1);transform-origin:center center;will-change:transform} .lyrics-line.past{color:rgba(255,255,255,.45)} -.lyrics-line.active{color:#fff;font-size:21px;font-weight:600} +.lyrics-line.active{color:#fff;font-weight:700;transform:scale(1.2);text-shadow:0 0 24px rgba(255,255,255,.3)} .lyrics-plain{font-size:15px;line-height:1.9;color:rgba(255,255,255,.65);white-space:pre-wrap;text-align:center} .section-count{font-size:11px;font-weight:500;color:var(--text3);background:var(--surface2);padding:2px 8px;border-radius:10px;flex-shrink:0} .album-partial-badge{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:2}