Made Compatible (Not Rewritten)

This commit is contained in:
2026-03-27 23:47:56 +11:00
parent 5189d2bbea
commit 8f995d8474
4 changed files with 818 additions and 634 deletions
@@ -43,6 +43,18 @@
backface-visibility: hidden; backface-visibility: hidden;
} }
/* Hide Tidal's native now-playing background color overlay */
[data-test="new-now-playing"] > [class*="_background_"] {
/* biome-ignore lint: Must override native album-art-derived background */
display: none !important;
}
/* Ensure the now-playing container itself is transparent */
[class*="_nowPlayingContainer"] {
/* biome-ignore lint: Must override any inline background styles */
background: transparent !important;
}
/* Now Playing Background Container Optimization */ /* Now Playing Background Container Optimization */
.now-playing-background-container { .now-playing-background-container {
position: absolute; position: absolute;
@@ -50,7 +62,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -3; z-index: 0;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
/* Hardware acceleration */ /* Hardware acceleration */
@@ -58,6 +70,14 @@
backface-visibility: hidden; backface-visibility: hidden;
} }
/* Ensure now-playing content renders above the dynamic background */
[data-test="new-now-playing"] > header,
[data-test="new-now-playing"] > [class*="_content_"],
[data-test="new-now-playing"] > .unhide-ui-button {
position: relative;
z-index: 1;
}
/* Optimized keyframe animations with GPU acceleration */ /* Optimized keyframe animations with GPU acceleration */
@keyframes spinGlobal { @keyframes spinGlobal {
from { from {
File diff suppressed because it is too large Load Diff
+26 -20
View File
@@ -28,7 +28,7 @@
} }
/* Enhanced lyrics styling with glow effects */ /* Enhanced lyrics styling with glow effects */
[class*="_lyricsText"] > div > span[data-current="true"] { [data-test="now-playing-lyrics"] span[data-test="lyrics-line"][class*="_current_"] {
text-shadow: text-shadow:
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
/* biome-ignore lint: Required to override app glow strength */ /* biome-ignore lint: Required to override app glow strength */
@@ -44,12 +44,12 @@
font-weight: 700; font-weight: 700;
} }
[class*="_lyricsText"] > div > span { [data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
text-shadow: text-shadow:
0 0 0px transparent, 0 0 0px transparent,
0 0 0px transparent; 0 0 0px transparent;
transition-duration: 0.25s; transition-duration: 0.25s;
color: rgba(128, 128, 128, 0.4); color: rgba(255, 255, 255, 0.4);
font-size: calc(40px * var(--rl-font-scale, 1)); font-size: calc(40px * var(--rl-font-scale, 1));
font-family: font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -57,7 +57,7 @@
font-weight: 700; font-weight: 700;
} }
[class*="_lyricsText"] > div > span:hover { [data-test="now-playing-lyrics"] span[data-test="lyrics-line"]:hover {
text-shadow: text-shadow:
0 0 var(--rl-glow-inner, 2px) lightgray, 0 0 var(--rl-glow-inner, 2px) lightgray,
/* biome-ignore lint: Hover glow should override defaults */ /* biome-ignore lint: Hover glow should override defaults */
@@ -69,7 +69,7 @@
} }
/* Track title glow */ /* Track title glow */
[data-test="now-playing-track-title"] { [data-test="new-now-playing"] [class*="_titleContainer_"] {
/* Title text color/gradient is left to default app styling; only glow is customized. */ /* Title text color/gradient is left to default app styling; only glow is customized. */
text-shadow: text-shadow:
0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff),
@@ -86,13 +86,13 @@
} }
/* When track title glow setting is disabled, remove glow regardless of Colorama */ /* When track title glow setting is disabled, remove glow regardless of Colorama */
.rl-title-glow-disabled[data-test="now-playing-track-title"] { [data-test="new-now-playing"] [class*="_titleContainer_"].rl-title-glow-disabled {
/* biome-ignore lint: Full reset required */ /* biome-ignore lint: Full reset required */
text-shadow: none !important; text-shadow: none !important;
} }
/* Current line transitions */ /* Current line transitions */
[class*="_lyricsText"] > div > span { [data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
transition: transition:
text-shadow 0.7s ease-in-out, text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out, color 0.7s ease-in-out,
@@ -105,14 +105,11 @@
padding-left: var(--rl-glow-outer) !important; padding-left: var(--rl-glow-outer) !important;
} }
[data-rl-injected][role="tabpanel"] {
transform: translateX(calc(var(--rl-glow-outer) * -1)) !important;
}
/* Lyrics container styling */ /* Lyrics container styling */
[class^="_lyricsContainer"] > div > div > span { [data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
margin-bottom: 2rem; margin-bottom: 2rem;
opacity: 1; /* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
opacity: 1 !important;
font-family: font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -121,6 +118,11 @@
font-size: calc(38px * var(--rl-font-scale, 1)) !important; font-size: calc(38px * var(--rl-font-scale, 1)) !important;
} }
/* Hide the old Musixmatch attribution footer in the lyrics panel */
[data-test="now-playing-lyrics"] [class*="_footer_"] {
display: none !important;
}
/* MARKER: WBW lyrics CSS */ /* MARKER: WBW lyrics CSS */
/* hide tidal spans for wbw */ /* hide tidal spans for wbw */
@@ -220,12 +222,14 @@
animation-delay: var(--rl-line-delay, 0ms); animation-delay: var(--rl-line-delay, 0ms);
} }
/* Word span */ /* Word span — opacity override needed to beat Tidal's ._hasCues_ span { opacity:.35 } */
.rl-wbw-word { .rl-wbw-word {
text-shadow: text-shadow:
0 0 0px transparent, 0 0 0px transparent,
0 0 0px transparent; 0 0 0px transparent;
color: rgba(128, 128, 128, 0.4); color: rgba(255, 255, 255, 0.4);
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
opacity: 1 !important;
transition: transition:
text-shadow 0.15s ease-out, text-shadow 0.15s ease-out,
color 0.15s ease-out; color 0.15s ease-out;
@@ -302,7 +306,7 @@
transparent 100% transparent 100%
), ),
linear-gradient(90deg, var(--cl-glow1, #fff) 100%, 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)); linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
background-size: background-size:
0.75em 100%, 0.75em 100%,
0% 100%, 0% 100%,
@@ -379,7 +383,9 @@
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700; font-weight: 700;
color: rgba(128, 128, 128, 0.4); color: rgba(255, 255, 255, 0.4);
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
opacity: 1 !important;
text-shadow: 0 0 0px transparent; text-shadow: 0 0 0px transparent;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -396,7 +402,7 @@
transition: transition:
max-height 0.3s ease, max-height 0.3s ease,
opacity 0.5s ease; opacity 0.5s ease;
color: rgba(128, 128, 128, 0.4); color: rgba(255, 255, 255, 0.4);
} }
.rl-wbw-line.rl-wbw-line-active .rl-wbw-bg-container { .rl-wbw-line.rl-wbw-line-active .rl-wbw-bg-container {
@@ -434,8 +440,8 @@
} }
/* Reset glow when disabled */ /* Reset glow when disabled */
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"], .lyrics-glow-disabled [data-test="now-playing-lyrics"] span[data-test="lyrics-line"][class*="_current_"],
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover { .lyrics-glow-disabled [data-test="now-playing-lyrics"] span[data-test="lyrics-line"]:hover {
/* biome-ignore lint: Kill glow on active/hover lines */ /* biome-ignore lint: Kill glow on active/hover lines */
text-shadow: none !important; text-shadow: none !important;
} }
+36 -30
View File
@@ -20,18 +20,22 @@
/* MARKER: HideUI CSS*/ /* MARKER: HideUI CSS*/
/* Only apply styles when UI is hidden */ /* Only apply styles when UI is hidden — hide toggle buttons */
.radiant-lyrics-ui-hidden [class*="tabItems"] { .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; opacity: 0 !important;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
} }
.radiant-lyrics-ui-hidden [class*="tabItems"]:hover { .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 {
opacity: 1 !important; opacity: 1 !important;
} }
/* Hide header container (search, minimize, fullscreen) when UI is hidden */ /* Hide header container (search, minimize, fullscreen) when UI is hidden */
.radiant-lyrics-ui-hidden [data-test="header-container"] { .radiant-lyrics-ui-hidden [data-test="header"] {
opacity: 0 !important; opacity: 0 !important;
visibility: hidden !important; visibility: hidden !important;
transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s; transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
@@ -79,8 +83,8 @@
/* MARKER: Sticky Lyrics CSS */ /* MARKER: Sticky Lyrics CSS */
/* Lyrics tab */ /* Lyrics toggle button */
[data-test="tabs-lyrics"]:has(.sticky-lyrics-trigger) { [data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
position: relative !important; position: relative !important;
padding-right: 38px !important; padding-right: 38px !important;
} }
@@ -115,35 +119,36 @@
transition: background 0.2s ease; transition: background 0.2s ease;
} }
/* When Lyrics tab is active — show divider & make icon black*/ /* When Lyrics toggle is pressed — show divider & adjust icon */
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger { [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger {
color: black; color: white;
cursor: pointer; cursor: pointer;
} }
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger::before { [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before {
background: rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.25);
} }
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger:hover { [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover {
color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.6);
} }
/* Square the Lyrics button bottom corners when dropdown is open */ /* Square the Lyrics button bottom-right corner when dropdown is open (right-aligned) */
[data-test="tabs-lyrics"].sticky-lyrics-open { [data-test="toggle-lyrics"].sticky-lyrics-open {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
} }
/* Dropdown */ /* Dropdown — right-aligned under the Lyrics button */
.sticky-lyrics-dropdown { .sticky-lyrics-dropdown {
position: fixed; position: fixed;
background: white; background: rgba(30, 30, 30, 0.92);
border-radius: 0 0 16px 16px; backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px 0 16px 16px;
padding: 8px 12px 10px; padding: 8px 12px 10px;
box-sizing: border-box; box-sizing: border-box;
z-index: 10000; z-index: 10000;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
clip-path: inset(0 -20px -20px -20px); clip-path: inset(0 -20px -20px -20px);
animation: stickyLyricsDropdownIn 0.12s ease-out; animation: stickyLyricsDropdownIn 0.12s ease-out;
} }
@@ -170,7 +175,7 @@
.sticky-lyrics-label { .sticky-lyrics-label {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9);
white-space: nowrap; white-space: nowrap;
} }
@@ -196,7 +201,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.2);
transition: 0.3s; transition: 0.3s;
border-radius: 18px; border-radius: 18px;
} }
@@ -215,11 +220,12 @@
} }
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider { .sticky-lyrics-switch input:checked + .sticky-lyrics-slider {
background-color: black; background-color: rgb(255, 255, 255);
} }
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before { .sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before {
transform: translateX(16px); transform: translateX(16px);
background-color: rgb(30, 30, 30);
} }
/* Segmented control (Line | Word | Syllable) */ /* Segmented control (Line | Word | Syllable) */
@@ -230,7 +236,7 @@
.rl-seg-control { .rl-seg-control {
display: flex; display: flex;
background: rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.08);
border-radius: 10px; border-radius: 10px;
padding: 2px; padding: 2px;
gap: 2px; gap: 2px;
@@ -241,7 +247,7 @@
flex: 1; flex: 1;
border: none; border: none;
background: transparent; background: transparent;
color: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
padding: 5px 0; padding: 5px 0;
@@ -252,14 +258,14 @@
} }
.rl-seg-btn:hover { .rl-seg-btn:hover {
color: rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.8);
background: rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.08);
} }
.rl-seg-btn.rl-seg-active { .rl-seg-btn.rl-seg-active {
background: white; background: rgba(255, 255, 255, 0.9);
color: black; color: rgb(16, 16, 16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
} }
/* MARKER: PATCHES (Random Fixes for Tidals Changes) */ /* MARKER: PATCHES (Random Fixes for Tidals Changes) */