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 <noreply@anthropic.com>
This commit is contained in:
1 parent
9bf6d189df
commit
af03061f75
1 file changed
+2
-2
+2
-2
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user