diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 10cc7f5..3a905ce 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -48,6 +48,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { blurInactive: true, bubbledLyrics: true, syllableLogging: false, + lyricsFontSize: 100, }); export const Settings = () => { @@ -132,6 +133,9 @@ export const Settings = () => { window.updateLyricsStyleSetting = undefined; }; }, []); + const [lyricsFontSize, setLyricsFontSize] = React.useState( + settings.lyricsFontSize, + ); const [contextAwareLyrics, setContextAwareLyrics] = React.useState( settings.contextAwareLyrics, ); @@ -156,7 +160,7 @@ export const Settings = () => { { settings.lyricsGlowEnabled = checked; @@ -212,6 +216,21 @@ export const Settings = () => { } }} /> + { + settings.lyricsFontSize = value; + setLyricsFontSize(value); + if (window.updateRadiantLyricsTextGlow) { + window.updateRadiantLyricsTextGlow(); + } + }} + /> { @@ -28,10 +28,8 @@ const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads); const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads); const floatingPlayerBarStyleTag = new StyleTag("RadiantLyrics-floating-player-bar", unloads); -// Apply lyrics glow styles if enabled -if (settings.lyricsGlowEnabled) { - lyricsGlowStyleTag.css = lyricsGlow; -} +// Always load lyrics CSS (glow is toggled via .lyrics-glow-disabled class) +lyricsGlowStyleTag.css = lyricsGlow; // MARKER: Floating Player Bar @@ -135,13 +133,24 @@ if (settings.qualityProgressColor) { // Apply base styles always (I kinda dont really remember what this does but it's important i guess) baseStyleTag.css = baseStyles; -// Update CSS variables for lyrics text glow based on settings +// Update CSS variables for lyrics glow + font scale const updateRadiantLyricsTextGlow = function (): void { const root = document.documentElement; - root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`); - root.style.setProperty("--rl-glow-inner", "2px"); + if (settings.lyricsGlowEnabled) { + root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`); + root.style.setProperty("--rl-glow-inner", "2px"); + root.classList.remove("lyrics-glow-disabled"); + } else { + root.style.setProperty("--rl-glow-outer", "0px"); + root.style.setProperty("--rl-glow-inner", "0px"); + root.classList.add("lyrics-glow-disabled"); + } + root.style.setProperty("--rl-font-scale", `${settings.lyricsFontSize / 100}`); }; +// Apply glow state immediately at startup +updateRadiantLyricsTextGlow(); + // Function to update styles when settings change const updateRadiantLyricsStyles = function (): void { // Handle Player Bar Visibility @@ -158,32 +167,8 @@ const updateRadiantLyricsStyles = function (): void { // Handle Floating Player Bar applyFloatingPlayerBar(); - // Update lyrics glow based on setting (Always apply if enabled, even when UI is hidden) - const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); - if (lyricsContainer) { - if (settings.lyricsGlowEnabled) { - (lyricsContainer as HTMLElement).classList.remove("lyrics-glow-disabled"); - lyricsGlowStyleTag.css = lyricsGlow; - updateRadiantLyricsTextGlow(); - } else { - (lyricsContainer as HTMLElement).classList.add("lyrics-glow-disabled"); - lyricsGlowStyleTag.remove(); - } - } else { - observePromise(unloads, '[class^="_lyricsContainer"]') - .then((el) => { - if (!el) return; - if (settings.lyricsGlowEnabled) { - el.classList.remove("lyrics-glow-disabled"); - lyricsGlowStyleTag.css = lyricsGlow; - updateRadiantLyricsTextGlow(); - } else { - el.classList.add("lyrics-glow-disabled"); - lyricsGlowStyleTag.remove(); - } - }) - .catch(() => {}); - } + // Toggle glow via CSS vars + class on :root (always available, no timing issues) + updateRadiantLyricsTextGlow(); // Track title glow toggle based on settings const trackTitleEl = document.querySelector( @@ -1757,7 +1742,7 @@ const buildWordSpans = (): { "margin-bottom": "2rem", "padding-top": "0", "padding-bottom": "0", - "font-size": "40px", + "font-size": "calc(40px * var(--rl-font-scale, 1))", "font-family": FONT_STACK, "font-weight": "700", color: "rgba(128, 128, 128, 0.4)", diff --git a/plugins/radiant-lyrics-luna/src/lyrics-glow.css b/plugins/radiant-lyrics-luna/src/lyrics-glow.css index 0b4c7a5..05a1cde 100644 --- a/plugins/radiant-lyrics-luna/src/lyrics-glow.css +++ b/plugins/radiant-lyrics-luna/src/lyrics-glow.css @@ -32,7 +32,7 @@ 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important; padding-left: 20px; transition-duration: 0.7s; - font-size: 55px; + font-size: calc(55px * var(--rl-font-scale, 1)); /* biome-ignore lint: Active lyric uses Colorama color */ color: var(--cl-glow1, #fff) !important; font-family: @@ -47,7 +47,7 @@ 0 0 0px transparent; transition-duration: 0.25s; color: rgba(128, 128, 128, 0.4); - font-size: 40px; + font-size: calc(40px * var(--rl-font-scale, 1)); font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; @@ -106,7 +106,7 @@ Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 700; /* biome-ignore lint: Typography override for readability */ - font-size: 38px !important; + font-size: calc(38px * var(--rl-font-scale, 1)) !important; } /* MARKER: WBW lyrics CSS */ @@ -328,7 +328,7 @@ /* Tidals "..." at the top of the container */ .rl-wbw-active > span:not([data-test="lyrics-line"]) { display: block; - font-size: 40px; + font-size: calc(40px * var(--rl-font-scale, 1)); font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; @@ -383,30 +383,24 @@ padding-left: 20px; } -/* Reset lyrics styling when disabled */ +/* Reset glow when disabled */ .lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"], -.lyrics-glow-disabled [class*="_lyricsText"] > div > span, -.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover, -.lyrics-glow-disabled [data-test="now-playing-track-title"], -.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span { - /* biome-ignore lint: Hard reset when disabled */ +.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover { + /* biome-ignore lint: Kill glow on active/hover lines */ text-shadow: none !important; - /* biome-ignore lint: Hard reset when disabled */ - padding-left: 0 !important; - /* biome-ignore lint: Hard reset when disabled */ - transition: none !important; - /* biome-ignore lint: Hard reset when disabled */ - font-size: inherit !important; - /* biome-ignore lint: Hard reset when disabled */ - color: inherit !important; - /* biome-ignore lint: Hard reset when disabled */ - font-family: inherit !important; - /* biome-ignore lint: Hard reset when disabled */ - font-weight: inherit !important; - /* biome-ignore lint: Hard reset when disabled */ - margin-bottom: inherit !important; - /* biome-ignore lint: Hard reset when disabled */ - opacity: inherit !important; } -/* thats right biome.. shut upp */ \ No newline at end of file +/* kill glow on active word */ +.lyrics-glow-disabled .rl-wbw-word.rl-wbw-active { + /* biome-ignore lint: Kill glow on active word */ + text-shadow: none !important; +} + +/* kill glow on hovered word */ +.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word:hover, +.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word.rl-wbw-word-hover, +.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word:hover, +.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word.rl-wbw-word-hover { + /* biome-ignore lint: Kill glow on hovered word */ + text-shadow: none !important; +} \ No newline at end of file