mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
896 lines
22 KiB
CSS
896 lines
22 KiB
CSS
/* Sidebar */
|
||
[class*="_sidebar_"] {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* Section header */
|
||
[class*="_sectionHeader_"] {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* Rounded corners */
|
||
[class*="_thumbnail_"],
|
||
[class*="_imageWrapper_"],
|
||
[class*="_playButton_"] {
|
||
border-radius: 5px !important;
|
||
}
|
||
|
||
|
||
/* MARKER: HideUI CSS*/
|
||
|
||
/* Only apply styles when UI is hidden — hide toggle buttons */
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-lyrics"],
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-credits"],
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] {
|
||
opacity: 0 !important;
|
||
transition: opacity 0.4s ease-in-out !important;
|
||
}
|
||
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover,
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover,
|
||
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover,
|
||
.radiant-lyrics-ui-hidden.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||
opacity: 1 !important;
|
||
transition: opacity 0.4s ease-in-out !important;
|
||
}
|
||
|
||
/* Hide header, artist info, and visualizer when UI is hidden */
|
||
.radiant-lyrics-ui-hidden [data-test="header"],
|
||
.radiant-lyrics-ui-hidden [data-test="artist-info"],
|
||
.radiant-lyrics-ui-hidden .audio-visualizer-container {
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
transition: opacity 0.4s ease-in-out !important, visibility 0s linear 0.4s;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
|
||
|
||
/* MARKER: Sticky Lyrics CSS */
|
||
|
||
/* Lyrics toggle button */
|
||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||
position: relative !important;
|
||
padding-right: 38px !important;
|
||
}
|
||
|
||
/* Trigger */
|
||
.sticky-lyrics-trigger {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-left: 5px;
|
||
padding-right: 0px;
|
||
box-sizing: border-box;
|
||
cursor: default;
|
||
color: #CCCCD1;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
/* Divider line */
|
||
.sticky-lyrics-trigger::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 4px;
|
||
bottom: 4px;
|
||
width: 1px;
|
||
background: transparent;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
/* When Lyrics toggle is pressed — show divider & adjust icon */
|
||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger {
|
||
color: rgb(30, 30, 30);
|
||
cursor: pointer;
|
||
}
|
||
|
||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before {
|
||
background: rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover {
|
||
color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Animate widening when dropdown opens */
|
||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||
transition: min-width 0.12s ease-out;
|
||
}
|
||
|
||
/* Reduce top rounding, square bottom, and kill hover tint when dropdown is open */
|
||
body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||
border-radius: 12px 12px 0 0 !important;
|
||
background-color: rgb(255, 255, 255) !important;
|
||
min-width: 150px !important;
|
||
}
|
||
|
||
/* Dropdown — right-aligned under the Lyrics button */
|
||
.sticky-lyrics-dropdown {
|
||
position: fixed;
|
||
background: rgb(255, 255, 255);
|
||
border-radius: 0 0 12px 12px;
|
||
padding: 8px 12px 10px;
|
||
box-sizing: border-box;
|
||
z-index: 10000;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||
clip-path: inset(0 -20px -20px -20px);
|
||
animation: stickyLyricsDropdownIn 0.12s ease-out;
|
||
}
|
||
|
||
@keyframes stickyLyricsDropdownIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-4px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Row containing label + toggle */
|
||
.sticky-lyrics-dropdown-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sticky-lyrics-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Toggle switch */
|
||
.sticky-lyrics-switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 34px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sticky-lyrics-switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.sticky-lyrics-slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.15);
|
||
transition: 0.3s;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.sticky-lyrics-slider::before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 14px;
|
||
width: 14px;
|
||
left: 2px;
|
||
bottom: 2px;
|
||
background-color: white;
|
||
transition: 0.3s;
|
||
border-radius: 50%;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider {
|
||
background-color: rgb(30, 30, 30);
|
||
}
|
||
|
||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before {
|
||
transform: translateX(16px);
|
||
background-color: rgb(255, 255, 255);
|
||
}
|
||
|
||
/* Segmented control (Line | Word | Syllable) */
|
||
.rl-style-row {
|
||
justify-content: center;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.rl-seg-control {
|
||
display: flex;
|
||
background: rgba(0, 0, 0, 0.06);
|
||
border-radius: 10px;
|
||
padding: 2px;
|
||
gap: 2px;
|
||
width: 100%;
|
||
}
|
||
|
||
.rl-seg-btn {
|
||
flex: 1;
|
||
border: none;
|
||
background: transparent;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
padding: 5px 0;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.rl-seg-btn:hover {
|
||
color: rgba(0, 0, 0, 0.7);
|
||
background: rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.rl-seg-btn.rl-seg-active {
|
||
background: rgb(30, 30, 30);
|
||
color: rgb(255, 255, 255);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
|
||
/* MARKER: Integrated Seek Bar */
|
||
/* Moves the seekbar to the top border of the player bar (inspired by Amethyst) */
|
||
|
||
/* Scrubber row stays in flow — centers the time block as one unit */
|
||
body.rl-integrated-seekbar .rl-seekbar-container {
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
/* Single string: "current | duration" — synced from native <time> nodes */
|
||
body.rl-integrated-seekbar .rl-seekbar-combined-time {
|
||
opacity: 0.5 !important;
|
||
white-space: nowrap !important;
|
||
line-height: 1.2 !important;
|
||
flex: 0 0 auto !important;
|
||
font-variant-numeric: tabular-nums !important;
|
||
}
|
||
|
||
/* Hide Tidal's two time <p> cells (class + structural — survives React re-renders) */
|
||
body.rl-integrated-seekbar .rl-seekbar-native-time {
|
||
display: none !important;
|
||
}
|
||
|
||
body.rl-integrated-seekbar [data-test="footer-player"] .rl-seekbar-container > p:has([data-test="current-time"]),
|
||
body.rl-integrated-seekbar [data-test="footer-player"] .rl-seekbar-container > p:has([data-test="duration"]) {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Scrubber bar — top strip: same width as footer player, top corners = Floating Bar Corner Radius */
|
||
body.rl-integrated-seekbar .rl-seekbar-bar {
|
||
position: absolute !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
z-index: 100 !important;
|
||
box-sizing: border-box !important;
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
flex: none !important;
|
||
border-top-left-radius: var(--rl-integrated-seekbar-top-radius, 0px) !important;
|
||
border-top-right-radius: var(--rl-integrated-seekbar-top-radius, 0px) !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
/* Knob — pill shape, hidden until hover */
|
||
body.rl-integrated-seekbar .rl-seekbar-bar [class*="knob"] {
|
||
width: 7px !important;
|
||
height: 14px !important;
|
||
border-radius: 3px !important;
|
||
background: #fff !important;
|
||
opacity: 0 !important;
|
||
transition: opacity 0.15s ease !important;
|
||
}
|
||
|
||
body.rl-integrated-seekbar .rl-seekbar-bar:hover [class*="knob"] {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* Track elements only: top corners follow player bar radius, bottom square */
|
||
body.rl-integrated-seekbar .rl-seekbar-bar [data-test="progress-bar"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar [data-test="progress-bar"] [class*="_wrapper"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar [data-test="progress-bar"] [class*="_range"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar [data-test="progress-bar"] [data-test="progress-indicator"] {
|
||
height: 3px !important;
|
||
border-top-left-radius: var(--rl-integrated-seekbar-top-radius, 0px) !important;
|
||
border-top-right-radius: var(--rl-integrated-seekbar-top-radius, 0px) !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
transition: height 0.15s ease !important;
|
||
}
|
||
|
||
/* Expand on hover */
|
||
body.rl-integrated-seekbar .rl-seekbar-bar:hover [data-test="progress-bar"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar:hover [data-test="progress-bar"] [class*="_wrapper"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar:hover [data-test="progress-bar"] [class*="_range"],
|
||
body.rl-integrated-seekbar .rl-seekbar-bar:hover [data-test="progress-bar"] [data-test="progress-indicator"] {
|
||
height: 5px !important;
|
||
}
|
||
|
||
/* Z-Index Fix for Integrated Seekbar (Volume slider) */
|
||
body.rl-integrated-seekbar [data-test="footer-player"] [class*="playerContent"] > [class*="utilityContainer"] {
|
||
position: relative;
|
||
z-index: 110;
|
||
}
|
||
|
||
|
||
/* MARKER: Lyrics core CSS (always loaded) */
|
||
|
||
@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");
|
||
}
|
||
|
||
[data-test="now-playing-lyrics"] {
|
||
--rl-line-shift: 20px;
|
||
}
|
||
|
||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"][class*="_current_"] {
|
||
text-shadow: none;
|
||
padding-left: 0;
|
||
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;
|
||
}
|
||
|
||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||
text-shadow:
|
||
0 0 0px transparent,
|
||
0 0 0px transparent;
|
||
transition-duration: 0.25s;
|
||
color: rgba(255, 255, 255, 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;
|
||
}
|
||
|
||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"]:hover {
|
||
text-shadow: none;
|
||
/* biome-ignore lint: Hover color override */
|
||
color: lightgray !important;
|
||
padding-left: 0;
|
||
transition-duration: 0.7s;
|
||
}
|
||
|
||
/* Current line transitions */
|
||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||
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;
|
||
}
|
||
|
||
/* Honestly forgot exactly why i wrote this... i just know it's smthn to do with the fact that .rl-wbw-line already does the shift & pre-wrap*/
|
||
.rl-wbw-active {
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
/* WBW parent only (adapt to vanilla padding [stops the sudden snap in position]) */
|
||
[data-test="now-playing-lyrics"] div.rl-wbw-active:not(.rl-wbw-word) {
|
||
margin-left: 7px;
|
||
}
|
||
|
||
/* Lyrics container styling */
|
||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||
margin-bottom: 2rem;
|
||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||
opacity: 1 !important;
|
||
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;
|
||
}
|
||
|
||
/* Hide the Musixmatch attribution footer in the lyrics panel */
|
||
[data-test="now-playing-lyrics"] [class*="_footer_"] {
|
||
display: none !important;
|
||
}
|
||
|
||
/* MARKER: WBW lyrics CSS */
|
||
|
||
/* hide tidal spans for wbw */
|
||
.rl-wbw-active span[data-test="lyrics-line"] {
|
||
/* biome-ignore lint: hide original lines when word-by-word is on */
|
||
display: none !important;
|
||
}
|
||
|
||
/* Active line slide & Pre Word Wrap */
|
||
.rl-wbw-line {
|
||
--rl-line-shift: 20px;
|
||
text-align: left;
|
||
padding-left: 0;
|
||
padding-right: var(--rl-line-shift);
|
||
filter: none;
|
||
transform: translateZ(0);
|
||
transform-origin: left;
|
||
transition:
|
||
filter 0.4s ease,
|
||
padding 0.7s ease-in-out;
|
||
overflow: visible;
|
||
}
|
||
|
||
.rl-wbw-line.rl-wbw-spacer {
|
||
filter: none;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* Blur Inactive */
|
||
.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 */
|
||
.rl-wbw-line.rl-wbw-line-active,
|
||
.rl-blur-active .rl-wbw-line.rl-wbw-line-active {
|
||
padding-left: var(--rl-line-shift, 20px);
|
||
padding-right: 0;
|
||
filter: none;
|
||
}
|
||
|
||
/* Right singer: mirror shift + pre-wrap (inactive pl = shift, active pr = shift) */
|
||
.rl-wbw-line.rl-singer-right:not(.rl-wbw-line-active) {
|
||
padding-left: var(--rl-line-shift, 20px);
|
||
padding-right: 0;
|
||
}
|
||
|
||
.rl-wbw-line.rl-singer-right.rl-wbw-line-active,
|
||
.rl-blur-active .rl-wbw-line.rl-singer-right.rl-wbw-line-active {
|
||
padding-left: 0;
|
||
padding-right: var(--rl-line-shift, 20px);
|
||
}
|
||
|
||
/* Keep last-active line unblurred during instrumental gaps */
|
||
.rl-blur-active .rl-wbw-line.rl-gap-hold {
|
||
filter: none;
|
||
}
|
||
|
||
/* Bubbled Lyrics scale */
|
||
.rl-bubbled .rl-wbw-line {
|
||
scale: 0.93 0.93 0.95;
|
||
transition:
|
||
scale 0.7s ease,
|
||
filter 0.4s ease,
|
||
padding 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 0.7s ease-in-out;
|
||
}
|
||
|
||
/* Staggered scroll bounce animation (Bubbled Lyrics WIP) */
|
||
@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: none;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||
opacity: 1 !important;
|
||
line-height: 1.15;
|
||
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: none;
|
||
/* biome-ignore lint: Hover color override */
|
||
color: lightgray !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Active word */
|
||
.rl-wbw-word.rl-wbw-active {
|
||
/* biome-ignore lint: Active word uses Colorama color */
|
||
color: var(--cl-glow1, #fff) !important;
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* MARKER: Syllable sweep/wipe 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/wipe 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(255, 255, 255, 0.4), rgba(255, 255, 255, 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 */
|
||
.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(255, 255, 255, 0.4);
|
||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||
opacity: 1 !important;
|
||
text-shadow: none;
|
||
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(255, 255, 255, 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;
|
||
}
|
||
|
||
/* Duet: 20% column inset + same shift / pre-wrap as single (inactive reserves along outer edge) */
|
||
.rl-dual-side .rl-wbw-line.rl-singer-left:not(.rl-wbw-line-active) {
|
||
padding-left: 0;
|
||
padding-right: calc(20% + var(--rl-line-shift, 20px));
|
||
}
|
||
|
||
.rl-dual-side .rl-wbw-line.rl-singer-left.rl-wbw-line-active {
|
||
padding-left: var(--rl-line-shift, 20px);
|
||
padding-right: 20%;
|
||
}
|
||
|
||
.rl-dual-side .rl-wbw-line.rl-singer-right:not(.rl-wbw-line-active) {
|
||
padding-left: calc(20% + var(--rl-line-shift, 20px));
|
||
padding-right: 0;
|
||
}
|
||
|
||
.rl-dual-side .rl-wbw-line.rl-singer-right.rl-wbw-line-active {
|
||
padding-left: 20%;
|
||
padding-right: var(--rl-line-shift, 20px);
|
||
}
|
||
|
||
.rl-dual-side .rl-wbw-line.rl-singer-right .rl-wbw-bg-container {
|
||
text-align: end;
|
||
}
|
||
|
||
/* MARKER: Lyrics panel vertical fade (Tidal’s mask clips sides) */
|
||
[data-test="now-playing-lyrics"] {
|
||
/* biome-ignore lint: Override Tidal mask with vertical fade */
|
||
mask-image: linear-gradient(
|
||
to bottom,
|
||
transparent 0%,
|
||
#fff 10%,
|
||
#fff 95%,
|
||
transparent 100%
|
||
) !important;
|
||
-webkit-mask-image: linear-gradient(
|
||
to bottom,
|
||
transparent 0%,
|
||
#fff 10%,
|
||
#fff 95%,
|
||
transparent 100%
|
||
) !important;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-size: 100% 100%;
|
||
-webkit-mask-size: 100% 100%;
|
||
}
|
||
|
||
/* Lyrics Cutoff Padding (Glow radius + 4px extra) */
|
||
[data-test="now-playing-lyrics"] > div:has(.rl-wbw-active),
|
||
[data-test="now-playing-lyrics"] > div:has([data-test="lyrics-line"]) {
|
||
/* biome-ignore lint: Override Tidal inline padding on lyrics scrollport */
|
||
padding-left: calc(var(--rl-glow-outer, 20px) + 0px) !important; /* 4px cushion (not needed atm) */
|
||
padding-right: calc(var(--rl-glow-outer, 20px) + 0px) !important; /* 4px cushion (not needed atm) */
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
|
||
/* MARKER: PATCHES (Random Fixes for Tidals Changes) */
|
||
/* These change a lot so I gave them their own section */
|
||
|
||
/* Remove max-width cap on now-playing content */
|
||
[class*="_contentInner"] {
|
||
max-width: none !important;
|
||
}
|
||
|
||
/* Round now-playing artwork corners */
|
||
[data-test="now-playing-artwork"] {
|
||
/* biome-ignore lint: Override flat corners */
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
/* Hide the Overlay Scrollbar (people just use mouse scroll) */
|
||
.os-scrollbar {
|
||
display: none !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
._artworkTilt_1c6d5cc {
|
||
border: none !important;
|
||
}
|
||
|
||
/* Hide fullscreen button — breaks Radiant Lyrics */
|
||
[data-test="new-now-playing-expand"] {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
/* Restore the Old Quality Tag style | thx Aya <3 */
|
||
|
||
._gradientMax_9111fba {
|
||
background-color: #ffd4321a !important;
|
||
box-shadow: none;
|
||
border-style: none;
|
||
border-radius: 0.75em;
|
||
}
|
||
|
||
._max_894bc7c ._badgeText_1c9dd30 {
|
||
color: #ffd432 !important;
|
||
text-shadow: 0 0 10px #0000 !important;
|
||
font-weight: 600 !important;
|
||
font-size: 90% !important;
|
||
}
|
||
|
||
._gradientHigh_87f2c3b {
|
||
background-color: #073430 !important;
|
||
box-shadow: none;
|
||
border-style: none;
|
||
border-radius: 0.75em;
|
||
}
|
||
|
||
._high_4b5525b ._badgeText_1c9dd30 {
|
||
color: #33ffee !important;
|
||
text-shadow: none !important;
|
||
font-weight: 600 !important;
|
||
font-size: 90% !important;
|
||
}
|
||
|
||
._gradientLow_3f9bc0d {
|
||
background-color: #ffffff1a !important;
|
||
box-shadow: none;
|
||
border-style: none;
|
||
border-radius: 0.75em;
|
||
}
|
||
|
||
._badgeText_1c9dd30 {
|
||
color: #e4e4e7 !important;
|
||
text-shadow: none;
|
||
font-weight: 600 !important;
|
||
font-size: 90% !important;
|
||
}
|
||
|
||
._badge_7b2911e {
|
||
border: none;
|
||
box-shadow: none;
|
||
background: none;
|
||
height: 33px;
|
||
padding: 0 !important;
|
||
width: 111px;
|
||
min-width: 111px;
|
||
border-radius: 0.75em;
|
||
transform: scale(1);
|
||
}
|
||
|
||
._badge_7b2911e:hover {
|
||
transition: 100ms;
|
||
filter: saturate(1.25) brightness(1.1);
|
||
}
|
||
|
||
._glowEffect_74c5e85 {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Make the small header red */
|
||
[class*="_smallHeader_"] {
|
||
background-color: rgba(0, 0, 0, .3) !important;
|
||
backdrop-filter: blur(10px) !important;
|
||
}
|