Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix(lyrics): hide scrollbars + fade edges + reduce active scale

Browse Source 
- overflow-x:hidden prevents horizontal scroll indicator from
  scale(1.2) transform on active line
- scrollbar-width:none + ::-webkit-scrollbar hide vertical scrollbar
- mask-image gradient fades lyrics at top/bottom edges so text
  doesn't clip abruptly against the container border
- Active line scale reduced from 1.2 to 1.08 (less overflow risk)
- padding-top removed from lyrics-view (mask handles visual spacing)
- lyrics-plain gets padding-top:24px for better visual breathing room

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-27 19:32:28 +02:00
1 parent ec681b9057
commit 14e8226d1d
1 file changed
+4 -3
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+4 -3
View File
@@ -615,13 +615,14 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
#np-queue-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding-top:8px}
.np-overlay.queue-mode #np-player-view{display:none}
.np-overlay.queue-mode #np-queue-view{display:flex}
#np-lyrics-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding:16px 28px 48px;scroll-behavior:smooth}
#np-lyrics-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 28px 48px;scroll-behavior:smooth;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(transparent,black 12%,black 88%,transparent)}
#np-lyrics-view::-webkit-scrollbar{display:none}
.np-overlay.lyrics-mode #np-player-view{display:none}
.np-overlay.lyrics-mode #np-lyrics-view{display:flex}
.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-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}
.lyrics-line.active{color:#fff;font-weight:700;transform:scale(1.08);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;padding-top:24px}
.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}
.card-dl-btn{position:absolute;top:5px;right:5px;z-index:3;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.65);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s;backdrop-filter:blur(6px)}