From cf43bf360e5d96430e19883fa9ca3db366c7b78e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 4 Jun 2023 15:45:55 -0700
Subject: [PATCH] Use scale instead of font-size for active lyric

---
 src/renderer/features/lyrics/lyric-line.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/lyrics/lyric-line.tsx b/src/renderer/features/lyrics/lyric-line.tsx
index d46f7ddf..2fdd56a5 100644
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/src/renderer/features/lyrics/lyric-line.tsx
@@ -8,19 +8,19 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
 
 const StyledText = styled(TextTitle)`
   color: var(--main-fg);
-  font-weight: 100;
-  font-size: 2vmax;
-  line-height: 3.5vmax;
+  font-weight: 400;
+  font-size: 2.5vmax;
+  line-height: 1.5;
+  transform: scale(0.95);
   opacity: 0.5;
 
   &.active {
     font-weight: 800;
-    font-size: 2.5vmax;
-    line-height: 4vmax;
+    transform: scale(1);
     opacity: 1;
   }
 
-  transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 `;
 
 export const LyricLine = ({ text, ...props }: LyricLineProps) => {