mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Made Compatible (Not Rewritten)
This commit is contained in:
@@ -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
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) */
|
||||||
|
|||||||
Reference in New Issue
Block a user