Fix Lyrics Glow & Clipping

plugins/clean-view-luna/src/index.ts

@@ -6,6 +6,7 @@ import { settings, Settings } from "./Settings";
 import baseStyles from "file://styles.css?minify";
 import separatedLyrics from "file://separated-lyrics.css?minify";
 import playerBarHidden from "file://player-bar-hidden.css?minify";
+import lyricsGlow from "file://lyrics-glow.css?minify";
 
 export const { trace } = Tracer("[Clean View]");
 export { Settings };
@@ -17,6 +18,10 @@ export const unloads = new Set<LunaUnload>();
 const lyricsStyleTag = new StyleTag("CleanView-lyrics", unloads);
 const baseStyleTag = new StyleTag("CleanView-base", unloads);
 const playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads);
+const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads);
+
+// Apply lyrics glow styles immediately and keep them always active
+lyricsGlowStyleTag.css = lyricsGlow;
 
 var isCleanView = false;
 var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates

plugins/clean-view-luna/src/lyrics-glow.css

@@ -0,0 +1,66 @@
+/* Font imports for lyrics */
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 400;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 500;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 600;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 700;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
+}
+
+/* Enhanced lyrics styling with glow effects */
+[class*="_lyricsText"] > div > span[data-current="true"] {
+    text-shadow: 0 0 2px #fff, 0 0 20px #fff !important;
+    padding-left: 20px;
+    transition-duration: 0.7s;
+    font-size: 55px;
+    color: white !important;
+}
+
+[class*="_lyricsText"] > div > span {
+    text-shadow: 0 0 0px transparent, 0 0 0px transparent;
+    transition-duration: 0.25s;
+    color: rgba(128, 128, 128, 0.4);
+    font-size: 40px;
+}
+
+[class*="_lyricsText"] > div > span:hover {
+    text-shadow: 0 0 2px lightgray, 0 0 20px lightgray !important;
+    color: lightgray !important;
+    padding-left: 20px;
+    transition-duration: 0.7s;
+}
+
+/* Track title glow */
+[data-test="now-playing-track-title"] {
+    text-shadow: 0 0 1px #fff, 0 0 30px #fff !important;
+}
+
+/* Current line transitions */
+[class*="_lyricsText"] > div > span {
+    transition: text-shadow 0.7s ease-in-out, color 0.7s ease-in-out, padding 0.7s ease-in-out !important;
+}
+
+/* Lyrics container styling */
+[class^="_lyricsContainer"] > div > div > span {
+    margin-bottom: 2rem;
+    opacity: 1;
+    font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 38px !important;
+} 

plugins/clean-view-luna/src/separated-lyrics.css

@@ -1,3 +1,29 @@
+/* Font imports for lyrics */
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 400;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 500;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 600;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "AbyssFont";
+    font-weight: 700;
+    src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
+}
+
+/* Tab and container visibility */
 [class*="tabItems"] {
     opacity: 0 !important;
     transition: opacity 0.3s ease-in-out;
@@ -16,6 +42,81 @@
     margin: -40px;
 }
 
+/* Hide bottom gradient */
+[class^="_bottomGradient"] {
+    visibility: hidden;
+}
+
+/* Credits button positioning */
+[aria-label="Show credits"] {
+    top: calc(var(--headerHeight) + 80px);
+}
+
+/* Hide lyrics provider */
+[class^="_lyricsProvider"] {
+    visibility: hidden;
+}
+
+/* Sync button margin */
+[class^="_syncButton"] {
+    margin-bottom: 10px;
+}
+
+/* Smooth scrolling for lyrics */
+[class^="_lyricsContainer"] {
+    scroll-behavior: smooth;
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* Clean view specific styles */
+[class*="_lyricsText"] > div {
+    padding: 0 !important;
+    background-color: transparent !important;
+    transition: none !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+}
+
+[class*="_lyricsText"] > div:hover {
+    background-color: transparent !important;
+}
+
+/* Ensure lyrics don't get cut off */
+[class^="_lyricsContainer"] {
+    padding-bottom: 200px !important;
+    margin-bottom: 0 !important;
+}
+
+/* Remove any hover effects on lyrics container */
+[class^="_lyricsContainer"] > div > div {
+    background-color: transparent !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+}
+
+[class^="_lyricsContainer"] > div > div:hover {
+    background-color: transparent !important;
+}
+
+/* Ensure lyrics text has proper spacing */
+[class*="_lyricsText"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+
 /* Lyrics text styling */
 [class^="_lyricsText"] {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -31,11 +132,6 @@
     transform: scale(1.05);
 }
 
-/* Smooth scrolling for lyrics */
-[class^="_lyricsContainer"] {
-    scroll-behavior: smooth;
-}
-
 /* Enhanced lyrics visibility */
 [class^="_lyricsText"] > div {
     padding: 8px 0;