From ec25abf6f5d25832ed340f9e99036c116e44c26b Mon Sep 17 00:00:00 2001 From: meowarex Date: Wed, 25 Feb 2026 20:38:30 +1100 Subject: [PATCH] Fixed Colorama lyrics --- plugins/colorama-lyrics-luna/src/styles.css | 92 +++++++++++++++++++ .../radiant-lyrics-luna/src/lyrics-glow.css | 14 +-- 2 files changed, 99 insertions(+), 7 deletions(-) diff --git a/plugins/colorama-lyrics-luna/src/styles.css b/plugins/colorama-lyrics-luna/src/styles.css index 6c6596a..72ac5fa 100644 --- a/plugins/colorama-lyrics-luna/src/styles.css +++ b/plugins/colorama-lyrics-luna/src/styles.css @@ -104,6 +104,98 @@ /* Do not increase glow strength on hover for gradients */ } +/* MARKER: Radiant WBW Lyrics Support */ + +/* Single color: active wbw words & syllable finished */ +.colorama-single .rl-wbw-word.rl-wbw-active, +.colorama-single .rl-wbw-word.rl-syl-finished { + color: var(--cl-lyrics-color) !important; + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + -webkit-text-fill-color: initial !important; +} + +/* Single color: glow on active wbw words */ +.colorama-single .rl-wbw-word.rl-wbw-active { + text-shadow: + 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff), + 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important; +} + +/* Gradient: active wbw words */ +.colorama-gradient .rl-wbw-word.rl-wbw-active { + background: linear-gradient( + var(--cl-grad-angle), + var(--cl-grad-start), + var(--cl-grad-end) + ) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + -webkit-text-fill-color: transparent !important; +} + +/* Gradient: syllable finished (solid color — gradient conflicts with sweep animation) */ +.colorama-gradient .rl-wbw-word.rl-syl-finished { + color: var(--cl-glow1, #ffffff) !important; +} + +/* Gradient: active wbw word glow */ +.colorama-gradient .rl-wbw-word.rl-wbw-active { + text-shadow: + 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff), + 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important; +} + +/* Hover: wbw words pick up Colorama colors */ +.colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover, +.colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover { + color: var(--cl-lyrics-color) !important; + text-shadow: + 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff), + 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important; +} + +.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover, +.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover { + background: linear-gradient( + var(--cl-grad-angle), + var(--cl-grad-start), + var(--cl-grad-end) + ) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + -webkit-text-fill-color: transparent !important; +} + +/* Only-active: wbw words on inactive lines stay default */ +body.colorama-only-active.colorama-single + .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word, +body.colorama-only-active.colorama-gradient + .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word { + color: rgba(128, 128, 128, 0.4) !important; + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + -webkit-text-fill-color: initial !important; + text-shadow: initial !important; +} + +/* Only-active: hover on inactive wbw lines keeps default */ +body.colorama-only-active.colorama-single + .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover, +body.colorama-only-active.colorama-gradient + .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover { + color: lightgray !important; + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + -webkit-text-fill-color: initial !important; + text-shadow: initial !important; +} + /* Only color active line mode */ body.colorama-only-active.colorama-single [class*="_lyricsText"] > div diff --git a/plugins/radiant-lyrics-luna/src/lyrics-glow.css b/plugins/radiant-lyrics-luna/src/lyrics-glow.css index 0686f01..0b4c7a5 100644 --- a/plugins/radiant-lyrics-luna/src/lyrics-glow.css +++ b/plugins/radiant-lyrics-luna/src/lyrics-glow.css @@ -33,8 +33,8 @@ padding-left: 20px; transition-duration: 0.7s; font-size: 55px; - /* biome-ignore lint: Needs priority for active lyric color */ - color: white !important; + /* biome-ignore lint: Active lyric uses Colorama color */ + color: var(--cl-glow1, #fff) !important; font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; @@ -239,8 +239,8 @@ 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff), /* biome-ignore lint: Glow priority for active word */ 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important; - /* biome-ignore lint: Active word must be white */ - color: white !important; + /* biome-ignore lint: Active word uses Colorama color */ + color: var(--cl-glow1, #fff) !important; } /* MARKER: Syllable sweep animation CSS */ @@ -279,12 +279,12 @@ filter: none !important; } -/* Syllable finished: word stays white, no glow */ +/* Syllable finished: word stays Colorama color, no glow */ .rl-wbw-word.rl-syl-finished { /* biome-ignore lint: Kill base transitions so class swaps are instant */ transition: none !important; - /* biome-ignore lint: Finished syllable word stays white */ - color: white !important; + /* biome-ignore lint: Finished syllable uses Colorama color */ + color: var(--cl-glow1, #fff) !important; /* biome-ignore lint: No glow for syllable mode */ text-shadow: none !important; /* biome-ignore lint: No glow for syllable mode */