mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
406 lines
12 KiB
CSS
406 lines
12 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: calc(55px * var(--rl-font-scale, 1));
|
|
/* 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;
|
|
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: 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;
|
|
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: calc(38px * var(--rl-font-scale, 1)) !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 {
|
|
text-align: left;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
filter: none;
|
|
transform: translateZ(0);
|
|
transform-origin: left;
|
|
transition:
|
|
filter 0.4s ease,
|
|
padding-left 0.7s ease-in-out,
|
|
padding-right 0.7s ease-in-out;
|
|
overflow: visible;
|
|
}
|
|
|
|
.rl-wbw-line.rl-wbw-spacer {
|
|
filter: none;
|
|
}
|
|
|
|
/* Blur Inactive (opt-in via .rl-blur-active on container) */
|
|
.rl-blur-active .rl-wbw-line {
|
|
filter: blur(0.07em);
|
|
}
|
|
|
|
.rl-blur-active .rl-wbw-line.rl-pos-1 {
|
|
filter: blur(0.035em);
|
|
}
|
|
|
|
.rl-blur-active .rl-wbw-line.rl-pos-2 {
|
|
filter: blur(0.05em);
|
|
}
|
|
|
|
.rl-blur-active .rl-wbw-line.rl-pos-3 {
|
|
filter: blur(0.06em);
|
|
}
|
|
|
|
/* Active line overrides (MUST come after blur rules to win on equal specificity) */
|
|
.rl-wbw-line.rl-wbw-line-active,
|
|
.rl-blur-active .rl-wbw-line.rl-wbw-line-active {
|
|
padding-left: 20px;
|
|
filter: none;
|
|
}
|
|
|
|
/* Keep last-active line unblurred during instrumental gaps */
|
|
.rl-blur-active .rl-wbw-line.rl-gap-hold {
|
|
filter: none;
|
|
}
|
|
|
|
/* Bubbled Lyrics scale (opt-in via .rl-bubbled on container) */
|
|
.rl-bubbled .rl-wbw-line {
|
|
scale: 0.93 0.93 0.95;
|
|
transition:
|
|
scale 0.7s ease,
|
|
filter 0.4s ease,
|
|
padding-left 0.7s ease-in-out,
|
|
padding-right 0.7s ease-in-out;
|
|
will-change: scale, translate, filter;
|
|
}
|
|
|
|
.rl-bubbled .rl-wbw-line.rl-wbw-spacer {
|
|
scale: none;
|
|
}
|
|
|
|
.rl-bubbled .rl-wbw-line.rl-wbw-line-active {
|
|
scale: 1;
|
|
transition:
|
|
scale 0.5s ease,
|
|
filter 0.4s ease,
|
|
padding-left 0.7s ease-in-out,
|
|
padding-right 0.7s ease-in-out;
|
|
}
|
|
|
|
/* Staggered scroll bounce animation (part of Bubbled Lyrics) */
|
|
@keyframes rl-scroll-bounce {
|
|
from {
|
|
translate: 0 var(--rl-scroll-delta);
|
|
}
|
|
to {
|
|
translate: 0 0;
|
|
}
|
|
}
|
|
|
|
.rl-wbw-line:not(.rl-scroll-animate) {
|
|
animation: none;
|
|
}
|
|
|
|
.rl-scroll-animate {
|
|
animation: rl-scroll-bounce 400ms cubic-bezier(0.41, 0, 0.12, 0.99) both;
|
|
animation-delay: var(--rl-line-delay, 0ms);
|
|
}
|
|
|
|
/* 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,
|
|
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word:hover,
|
|
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .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 uses Colorama color */
|
|
color: var(--cl-glow1, #fff) !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 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 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 */
|
|
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: 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;
|
|
font-weight: 700;
|
|
color: rgba(128, 128, 128, 0.4);
|
|
text-shadow: 0 0 0px transparent;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* MARKER: Context Aware Lyrics CSS */
|
|
|
|
/* Background vocal sub-container */
|
|
.rl-wbw-bg-container {
|
|
max-height: 0;
|
|
overflow: visible;
|
|
opacity: 0;
|
|
font-size: 0.55em;
|
|
padding-top: 0.15em;
|
|
transition: max-height 0.3s ease, opacity 0.5s ease;
|
|
color: rgba(128, 128, 128, 0.4);
|
|
}
|
|
|
|
.rl-wbw-line.rl-wbw-line-active .rl-wbw-bg-container {
|
|
max-height: 3em;
|
|
opacity: 1;
|
|
transition: max-height 0.5s ease, opacity 0.5s ease;
|
|
}
|
|
|
|
/* Singer duet positioning */
|
|
.rl-wbw-line.rl-singer-right {
|
|
text-align: end;
|
|
transform-origin: right;
|
|
}
|
|
|
|
.rl-dual-side .rl-wbw-line.rl-singer-left {
|
|
padding-right: 20%;
|
|
}
|
|
|
|
.rl-dual-side .rl-wbw-line.rl-singer-right {
|
|
padding-left: 20%;
|
|
}
|
|
|
|
.rl-dual-side .rl-wbw-line.rl-singer-right .rl-wbw-bg-container {
|
|
text-align: end;
|
|
}
|
|
|
|
.rl-dual-side .rl-wbw-line.rl-singer-right.rl-wbw-line-active {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.rl-dual-side .rl-wbw-line.rl-singer-left.rl-wbw-line-active {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Reset glow when disabled */
|
|
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"],
|
|
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover {
|
|
/* biome-ignore lint: Kill glow on active/hover lines */
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
/* 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;
|
|
} |