From 3675146f1f8826220e18dc86b5534dd70b81ba3f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 7 Oct 2023 19:58:04 -0700
Subject: [PATCH] Fix opacity mask for unsynced lyrics container

---
 src/renderer/features/lyrics/unsynchronized-lyrics.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 023ce859d..23532559d 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -18,6 +18,14 @@ const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
     overflow: scroll;
     transform: translateY(-2rem);
 
+    -webkit-mask-image: linear-gradient(
+        180deg,
+        transparent 5%,
+        rgb(0 0 0 / 100%) 20%,
+        rgb(0 0 0 / 100%) 85%,
+        transparent 95%
+    );
+
     mask-image: linear-gradient(
         180deg,
         transparent 5%,