mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
285 lines
8.8 KiB
CSS
285 lines
8.8 KiB
CSS
/* 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 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
|
|
/* biome-ignore lint: Required to override app glow strength */
|
|
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
|
|
padding-left: 20px;
|
|
transition-duration: 0.7s;
|
|
font-size: 55px;
|
|
/* biome-ignore lint: Needs priority for active lyric color */
|
|
color: white !important;
|
|
font-family:
|
|
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
[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;
|
|
font-family:
|
|
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
[class*="_lyricsText"] > div > span:hover {
|
|
text-shadow:
|
|
0 0 var(--rl-glow-inner, 2px) lightgray,
|
|
/* biome-ignore lint: Hover glow should override defaults */
|
|
0 0 var(--rl-glow-outer, 20px) lightgray !important;
|
|
/* biome-ignore lint: Hover color override */
|
|
color: lightgray !important;
|
|
padding-left: 20px;
|
|
transition-duration: 0.7s;
|
|
}
|
|
|
|
/* Track title glow */
|
|
[data-test="now-playing-track-title"] {
|
|
/* Title text color/gradient is left to default app styling; only glow is customized. */
|
|
text-shadow:
|
|
0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff),
|
|
/* biome-ignore lint: Title glow needs priority */
|
|
0 0 var(--rl-glow-outer, 30px) #fff !important;
|
|
/* biome-ignore lint: Reset vendor background clip */
|
|
-webkit-background-clip: initial !important;
|
|
/* biome-ignore lint: Reset background clip */
|
|
background-clip: initial !important;
|
|
/* biome-ignore lint: Reset vendor text fill */
|
|
-webkit-text-fill-color: initial !important;
|
|
/* biome-ignore lint: Ensure inherited color takes precedence */
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* When track title glow setting is disabled, remove glow regardless of Colorama */
|
|
.rl-title-glow-disabled[data-test="now-playing-track-title"] {
|
|
/* biome-ignore lint: Full reset required */
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
/* Current line transitions */
|
|
[class*="_lyricsText"] > div > span {
|
|
transition:
|
|
text-shadow 0.7s ease-in-out,
|
|
color 0.7s ease-in-out,
|
|
/* biome-ignore lint: Transition priority needed */
|
|
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;
|
|
/* biome-ignore lint: Typography override for readability */
|
|
font-size: 38px !important;
|
|
}
|
|
|
|
/* MARKER: WBW lyrics CSS */
|
|
|
|
/* hide tidal spans for wbw */
|
|
.rl-wbw-active span[data-test="lyrics-line"] {
|
|
/* biome-ignore lint: Must hide original lines when word-by-word is on */
|
|
display: none !important;
|
|
}
|
|
|
|
/* Active line slide */
|
|
.rl-wbw-line {
|
|
padding-left: 0;
|
|
transition:
|
|
padding-left 0.7s ease-in-out;
|
|
}
|
|
|
|
.rl-wbw-line.rl-wbw-line-active {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Word span */
|
|
.rl-wbw-word {
|
|
text-shadow:
|
|
0 0 0px transparent,
|
|
0 0 0px transparent;
|
|
color: rgba(128, 128, 128, 0.4);
|
|
transition:
|
|
text-shadow 0.15s ease-out,
|
|
color 0.15s ease-out;
|
|
}
|
|
|
|
/* Hover word (Grouped Syllables) */
|
|
.rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word:hover,
|
|
.rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word.rl-wbw-word-hover {
|
|
text-shadow:
|
|
0 0 var(--rl-glow-inner, 2px) lightgray,
|
|
/* biome-ignore lint: Hover glow should override defaults */
|
|
0 0 var(--rl-glow-outer, 20px) lightgray !important;
|
|
/* biome-ignore lint: Hover color override */
|
|
color: lightgray !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Active word */
|
|
.rl-wbw-word.rl-wbw-active {
|
|
text-shadow:
|
|
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;
|
|
}
|
|
|
|
/* MARKER: Syllable sweep animation CSS */
|
|
|
|
@keyframes rl-wipe {
|
|
from {
|
|
background-size: 0.75em 100%, 0% 100%, 100% 100%;
|
|
background-position: -0.375em 0%, left, left;
|
|
}
|
|
to {
|
|
background-size: 0.75em 100%, 100% 100%, 100% 100%;
|
|
background-position: calc(100% + 0.375em) 0%, left, left;
|
|
}
|
|
}
|
|
|
|
/* Syllable active: gradient sweep L-to-R via background-clip */
|
|
.rl-wbw-word.rl-syl-active {
|
|
/* biome-ignore lint: Kill base transitions so class swaps are instant */
|
|
transition: none !important;
|
|
/* biome-ignore lint: Transparent fill so gradient paints the text */
|
|
color: transparent !important;
|
|
/* biome-ignore lint: Clip gradient to text glyphs */
|
|
-webkit-background-clip: text !important;
|
|
/* biome-ignore lint: Clip gradient to text glyphs */
|
|
background-clip: text !important;
|
|
background-repeat: no-repeat;
|
|
background-image:
|
|
linear-gradient(90deg, transparent 0%, var(--cl-glow1, #fff) 50%, transparent 100%),
|
|
linear-gradient(90deg, var(--cl-glow1, #fff) 100%, transparent 100%),
|
|
linear-gradient(90deg, rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.4));
|
|
background-size: 0.75em 100%, 0% 100%, 100% 100%;
|
|
background-position: -0.375em 0%, left, left;
|
|
/* biome-ignore lint: No glow for syllable mode */
|
|
text-shadow: none !important;
|
|
/* biome-ignore lint: No glow for syllable mode */
|
|
filter: none !important;
|
|
}
|
|
|
|
/* Syllable finished: word stays white, 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: No glow for syllable mode */
|
|
text-shadow: none !important;
|
|
/* biome-ignore lint: No glow for syllable mode */
|
|
filter: none !important;
|
|
}
|
|
|
|
/* MARKER: Syllable animations CSS (WIP coming soon) */
|
|
/* syllableStyle: 0 = none, 1 = Pop!, 2 = Jump */
|
|
|
|
@keyframes rl-pop {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
25%, 35% {
|
|
transform: scale(1.03) translateY(-0.5%);
|
|
}
|
|
}
|
|
|
|
@keyframes rl-jump {
|
|
0% { transform: translateY(8px); }
|
|
50% { transform: translateY(-3px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
/* Pop! for word mode */
|
|
.rl-syl-pop .rl-wbw-word.rl-wbw-active {
|
|
transform-origin: center bottom;
|
|
animation: rl-pop 0.6s ease-out;
|
|
}
|
|
|
|
/* Pop! for syllable mode */
|
|
.rl-syl-pop .rl-wbw-word.rl-syl-active {
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
/* Jump for word mode */
|
|
.rl-syl-jump .rl-wbw-word.rl-wbw-active {
|
|
animation: rl-jump 0.35s ease-out;
|
|
}
|
|
|
|
/* Tidals "..." at the top of the container */
|
|
.rl-wbw-active > span:not([data-test="lyrics-line"]) {
|
|
display: block;
|
|
font-size: 40px;
|
|
font-family:
|
|
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
font-weight: 700;
|
|
color: rgba(128, 128, 128, 0.4);
|
|
text-shadow: 0 0 0px transparent;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Reset lyrics styling 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 */
|
|
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 */ |