mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
feat(fs-lyrics): fade bottom edge of plain lyrics scroll viewport
Synced lyrics always fill the screen due to auto-scroll, so the existing fsa-fade-bottom overlay naturally fades content below the active line. Plain (unsynced) lyrics start from the top and may not fill the viewport, leaving no content for that overlay to fade. Add mask-image to .fsa-lyrics-container when rendering plain lyrics (--plain modifier class). The mask operates on the visible scroll viewport rather than the content, so the bottom fade is always present regardless of scroll position.
This commit is contained in:
@@ -143,9 +143,11 @@ const FsLyricsApple = memo(function FsLyricsApple({ currentTrack }: { currentTra
|
||||
|
||||
if (!currentTrack || loading) return null;
|
||||
|
||||
const isPlain = !hasSynced && !!plainLyrics;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fsa-lyrics-container"
|
||||
className={`fsa-lyrics-container${isPlain ? ' fsa-lyrics-container--plain' : ''}`}
|
||||
ref={setContainerRef}
|
||||
onWheel={handleUserScroll}
|
||||
onTouchMove={handleUserScroll}
|
||||
|
||||
@@ -3621,6 +3621,12 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fade the bottom of the scroll viewport when showing plain lyrics */
|
||||
.fsa-lyrics-container--plain {
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
||||
}
|
||||
|
||||
.fsa-plain-line {
|
||||
font-size: clamp(1.1rem, 2.5vh, 2.2rem);
|
||||
font-weight: 500;
|
||||
|
||||
Reference in New Issue
Block a user