itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(fs-lyrics): fade bottom edge of plain lyrics scroll viewport

Browse Source 
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:
kilyabin
2026-04-19 21:00:46 +04:00
parent 059900e85e
commit 65413c954e
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+6
View File
@@ -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;