From 65413c954e95ef9ff6a2efef91121a4fab6f3e00 Mon Sep 17 00:00:00 2001
From: kilyabin <65072190+kilyabin@users.noreply.github.com>
Date: Sun, 19 Apr 2026 21:00:46 +0400
Subject: [PATCH] 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.
---
 src/components/FullscreenPlayer.tsx | 4 +++-
 src/styles/components.css           | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/FullscreenPlayer.tsx b/src/components/FullscreenPlayer.tsx
index 503b76d7..61e993a4 100644
--- a/src/components/FullscreenPlayer.tsx
+++ b/src/components/FullscreenPlayer.tsx
@@ -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}
diff --git a/src/styles/components.css b/src/styles/components.css
index 2b8539d8..5465ffa8 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -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;