mrleo1nidandClaude Opus 5.5
1c4e209e86
- Ambient background in the app shell: three drifting blurred blobs,
the third one tinted with the current track's cover; can be turned off
in settings and stays still with reduced motion.
- Island player variant (floating glass panel) next to the bar, chosen
in settings; player source line ("Album · …", "My Wave"), reactions
around the transport controls, queue drawer.
- Sidebar: like / dislike counters, pending uploads badge on Queue,
admin Settings page holding the upload queue limits.
- Collection: header tile with kicker, underline tabs, time / number
lead column with an equalizer for the current track, album column,
dimmed dislikes with undo, Play all / Shuffle pills.
- Album: cover-tinted header and Play / Shuffle; artist: artist wave,
Play and popular tracks (new GET /artists/{id}/top-tracks).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
109 lines
2.0 KiB
CSS
109 lines
2.0 KiB
CSS
.ambient {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
opacity: var(--amb-op);
|
|
animation: pipuHue 30s linear infinite;
|
|
}
|
|
|
|
.ambient span {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(30px);
|
|
will-change: transform;
|
|
}
|
|
|
|
.a {
|
|
left: -22vmax;
|
|
top: -28vmax;
|
|
width: 70vmax;
|
|
height: 70vmax;
|
|
background: radial-gradient(circle, rgba(47, 128, 255, 0.75) 0%, transparent 62%);
|
|
animation: pipuDrift1 16s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.b {
|
|
right: -20vmax;
|
|
top: 8vh;
|
|
width: 60vmax;
|
|
height: 60vmax;
|
|
background: radial-gradient(circle, rgba(124, 92, 255, 0.6) 0%, transparent 62%);
|
|
animation: pipuDrift2 21s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.c {
|
|
left: 22vw;
|
|
bottom: -32vmax;
|
|
width: 55vmax;
|
|
height: 55vmax;
|
|
background: radial-gradient(circle, var(--amb-c3, rgba(53, 211, 255, 0.6)) 0%, transparent 62%);
|
|
animation: pipuDrift3 26s ease-in-out infinite alternate;
|
|
transition: background 1.2s;
|
|
}
|
|
|
|
@keyframes pipuDrift1 {
|
|
0% {
|
|
transform: translate(-6%, -4%) scale(1);
|
|
}
|
|
35% {
|
|
transform: translate(45%, 28%) scale(1.2);
|
|
}
|
|
70% {
|
|
transform: translate(15%, 60%) scale(0.9);
|
|
}
|
|
100% {
|
|
transform: translate(60%, -5%) scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuDrift2 {
|
|
0% {
|
|
transform: translate(4%, 0) scale(1.05);
|
|
}
|
|
40% {
|
|
transform: translate(-50%, 40%) scale(0.9);
|
|
}
|
|
75% {
|
|
transform: translate(-20%, -25%) scale(1.2);
|
|
}
|
|
100% {
|
|
transform: translate(-60%, 15%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuDrift3 {
|
|
0% {
|
|
transform: translate(0, 0) scale(0.95);
|
|
}
|
|
30% {
|
|
transform: translate(-40%, -45%) scale(1.15);
|
|
}
|
|
65% {
|
|
transform: translate(45%, -25%) scale(1);
|
|
}
|
|
100% {
|
|
transform: translate(10%, -55%) scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuHue {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(-35deg);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ambient,
|
|
.ambient span {
|
|
animation: none;
|
|
}
|
|
}
|