mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-08-26 22:37:45 +10:00
Cover Everywhere (Stock Support)
This commit is contained in:
@@ -1,6 +1,105 @@
|
||||
/* Cover-art backdrop container styles
|
||||
*/
|
||||
|
||||
/* Stock backdrop projected app wide */
|
||||
.rl-stock-background-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.rl-stock-rotator {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100vmax;
|
||||
height: 100vmax;
|
||||
margin-left: -50vmax;
|
||||
margin-top: -50vmax;
|
||||
will-change: transform;
|
||||
animation: rl-stock-spin 33s linear infinite;
|
||||
}
|
||||
|
||||
/* Tidal lays 40% of the container & then scales it 4x which is actually kinda smart (i should have thought of this..)*/
|
||||
.rl-stock-overscan {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 40vmax;
|
||||
height: 40vmax;
|
||||
margin-left: -20vmax;
|
||||
margin-top: -20vmax;
|
||||
transform: scale(4);
|
||||
}
|
||||
|
||||
.rl-stock-art {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(28px) saturate(1.3);
|
||||
transform: scale(1.26);
|
||||
opacity: 0;
|
||||
/* Crossfade between the two layers on track change (again.. NOT AUDIO CROSSFADE) */
|
||||
transition: opacity 600ms ease;
|
||||
}
|
||||
|
||||
.rl-stock-art.rl-stock-art-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rl-stock-scrim {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Both Tidal gradients */
|
||||
background:
|
||||
radial-gradient(
|
||||
120% 100% at 50% 38%,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.12) 62%,
|
||||
rgba(0, 0, 0, 0.28) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
rgba(0, 0, 0, 0.34) 0%,
|
||||
rgba(0, 0, 0, 0.42) 24%,
|
||||
rgba(0, 0, 0, 0.5) 45%,
|
||||
rgba(0, 0, 0, 0.62) 72%,
|
||||
rgba(0, 0, 0, 0.76) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Tidal stops its spin while paused */
|
||||
.rl-stock-paused .rl-stock-rotator {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes rl-stock-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rl-stock-rotator {
|
||||
/* biome-ignore lint: Accessibility override needs priority */
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.global-background-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
Reference in New Issue
Block a user