feat(synced-lyrics): Better-Lyrics Styling for Synced-Lyrics (#2554)

Co-authored-by: JellyBrick <shlee1503@naver.com>

src/plugins/synced-lyrics/style.css

@@ -8,18 +8,40 @@
   display: block !important;
 }
 
-/* :root {
-  --ytmusic-text-primary: #fff;
-  --ytmusic-text-secondary: #aaa;
-} */
-
+/* Variables are overridden by selected line effect */
 :root {
+  /* Layout */
   --global-margin: 0.7rem;
-  --previous-lyrics: var(--ytmusic-text-primary);
-  --current-lyrics: var(--ytmusic-text-primary);
-  --upcoming-lyrics: var(--ytmusic-text-secondary);
-  --size-lyrics: 1.2em;
-  --offset-lyrics: 1em;
+  --lyrics-padding: 0;
+
+  /* Typography */
+  --lyrics-font-family: Satoshi, Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+  Open Sans, Helvetica Neue, sans-serif;
+  --lyrics-font-size: 1.4rem;
+  --lyrics-line-height: var(--ytmusic-body-line-height);
+  --lyrics-width: 100%;
+
+  /* Inactive Lyrics */
+  --lyrics-inactive-font-weight: 400;
+  --lyrics-inactive-opacity: 0.33;
+  --lyrics-inactive-scale: 1;
+  --lyrics-inactive-offset: 0;
+
+  /* Active Lyrics */
+  --lyrics-active-font-weight: 700;
+  --lyrics-active-opacity: 1;
+  --lyrics-active-scale: 1;
+  --lyrics-active-offset: 0;
+
+  /* Animations */
+  --lyrics-animations: lyrics-glow var(--lyrics-glow-duration) forwards, lyrics-wobble var(--lyrics-wobble-duration) forwards;
+  --lyrics-scale-duration: 0.166s;
+  --lyrics-opacity-transition: 0.33s;
+  --lyrics-glow-duration: var(--lyrics-duration, 2s);
+  --lyrics-wobble-duration: calc(var(--lyrics-duration, 2s) / 2);
+
+  /* Colors */
+  --glow-color: rgba(255, 255, 255, 0.5);
 }
 
 .lyric-container {
@@ -32,7 +54,7 @@
 }
 
 .synced-line {
-  width: var(--lyric-width, 100%);
+  width: var(--lyrics-width, 100%);
 
   & > .text-lyrics {
     cursor: pointer;
@@ -43,8 +65,7 @@
   display: block;
   justify-content: left;
   text-align: left;
-  margin: 0.5rem 0;
-  margin-right: 20px;
+  margin: 0.5rem 20px 0.5rem 0;
   transition: all 0.3s ease-in-out;
 }
 
@@ -54,35 +75,46 @@
 }
 
 .text-lyrics {
+  font-family: var(--lyrics-font-family) !important;
+  font-size: var(--lyrics-font-size) !important;
+  font-weight: var(--lyrics-inactive-font-weight) !important;
+  line-height: var(--lyrics-line-height) !important;
+  padding-top: var(--lyrics-padding);
+  padding-bottom: var(--lyrics-padding);
+  scale: var(--lyrics-inactive-scale);
+  translate: var(--lyrics-inactive-offset);
+  transition:
+    scale var(--lyrics-scale-duration),
+    translate 0.3s ease-in-out;
+
   display: block;
   text-align: left;
   margin: var(--global-margin) 0;
-  transition:
-    scale 0.3s ease-in-out,
-    translate 0.3s ease-in-out,
-    color 0.1s ease-in-out;
   transform-origin: 0 50%;
 }
 
 .text-lyrics > span {
-  margin-inline: 0.1em;
+  display: inline-block;
+  white-space: pre-wrap;
+  opacity: var(--lyrics-inactive-opacity);
+  transition: opacity var(--lyrics-opacity-transition);
 }
 
 .previous > .text-lyrics {
-  color: var(--previous-lyrics);
-  font-weight: normal;
 }
 
 .current > .text-lyrics {
-  color: var(--current-lyrics);
-  font-weight: bold;
-  scale: var(--size-lyrics);
-  translate: var(--offset-lyrics) 0;
+  font-weight: var(--lyrics-active-font-weight) !important;
+  scale: var(--lyrics-active-scale);
+  translate: var(--lyrics-active-offset);
+}
+
+.current > .text-lyrics > span {
+  opacity: var(--lyrics-active-opacity);
+  animation: var(--lyrics-animations);
 }
 
 .upcoming > .text-lyrics {
-  color: var(--upcoming-lyrics);
-  font-weight: normal;
 }
 
 .lyrics-renderer {
@@ -162,3 +194,28 @@
 
   transition: top 325ms ease-in-out;
 }
+
+/* Animations */
+@keyframes lyrics-wobble {
+  from {
+    transform: translateY(0px);
+  }
+  33.33% {
+    transform: translateY(1.75px);
+  }
+  66.66% {
+    transform: translateY(-1.75px);
+  }
+  to {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes lyrics-glow {
+  0% {
+    text-shadow: 0 0 1.5rem var(--glow-color);
+  }
+  to {
+    text-shadow: 0 0 0 var(--glow-color);
+  }
+}