diff --git a/styles.css b/styles.css index ca8a2cf..524a951 100644 --- a/styles.css +++ b/styles.css @@ -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)}