NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Restore master hero and spotlight gradients and sway them in place

Browse Source
This commit is contained in:
Admin
2026-09-23 23:15:15 +02:00
parent cb046bba9e
commit b39e55fd87
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/tokens.ts
+6 -6
View File
@@ -53,18 +53,18 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
? `linear-gradient(90deg, oklch(0.5 0.1 ${H}), oklch(0.68 0.11 ${r(h + 18, 1)}), oklch(0.5 0.1 ${H}))` ? `linear-gradient(90deg, oklch(0.5 0.1 ${H}), oklch(0.68 0.11 ${r(h + 18, 1)}), oklch(0.5 0.1 ${H}))`
: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`, : `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`, '--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
'--mf-hero-bg': light '--mf-hero-c1': light ? glow(0.9, 0.04, 0.6) : glow(0.24, 0.04, 0.55),
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.93, 0.03, 0.52)} 60%)` '--mf-hero-c2': light ? glow(0.96, 0.02, 0.4) : glow(0.14, 0.02, 0.35),
: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`, '--mf-hero-c3': light ? glow(0.96, 0.02, 0.4) : glow(0.12, 0.015, 0.25),
'--mf-modal-glow': light '--mf-modal-glow': light
? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)` ? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
: `linear-gradient(135deg, ${glow(0.3, 0.045, 0.4)} 0%, ${glow(0.2, 0.03, 0.15)} 35%, transparent 70%)`, : `linear-gradient(135deg, ${glow(0.3, 0.045, 0.4)} 0%, ${glow(0.2, 0.03, 0.15)} 35%, transparent 70%)`,
'--mf-modal-glow-danger': light '--mf-modal-glow-danger': light
? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)` ? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`, : `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
'--mf-spotlight-bg': light '--mf-spotlight-c1': light ? glow(0.9, 0.04, 0.55) : glow(0.22, 0.04, 0.5),
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.93, 0.03, 0.47)} 55%)` '--mf-spotlight-c2': light ? glow(0.96, 0.02, 0.35) : glow(0.13, 0.02, 0.3),
: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`, '--mf-spotlight-c3': light ? glow(0.96, 0.02, 0.35) : glow(0.11, 0.015, 0.2),
'--mf-cover-grad': light '--mf-cover-grad': light
? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))` ? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))` : `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
web-player/src/routes/layout.css
+37 -8
View File
@@ -251,17 +251,23 @@
animation: gradient-drift 14s ease-in-out infinite alternate; animation: gradient-drift 14s ease-in-out infinite alternate;
} }
@utility hero-surface { @utility hero-surface {
background-image: var(--mf-hero-bg); background-image: linear-gradient(
background-size: 125% 100%; var(--gd-angle),
animation: gradient-drift 18s ease-in-out infinite alternate; var(--mf-hero-c1),
var(--mf-hero-c2) calc(60% + var(--gd-shift)),
var(--mf-hero-c3)
);
animation: gradient-sway 18s ease-in-out infinite alternate;
} }
@utility spotlight-surface { @utility spotlight-surface {
background-size: animation: gradient-sway 18s ease-in-out infinite alternate;
125% 100%,
100% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate;
background-image: background-image:
var(--mf-spotlight-bg), linear-gradient(
var(--gd-angle),
var(--mf-spotlight-c1),
var(--mf-spotlight-c2) calc(55% + var(--gd-shift)),
var(--mf-spotlight-c3)
),
linear-gradient( linear-gradient(
to right, to right,
transparent 50%, transparent 50%,
@@ -372,6 +378,29 @@ button:disabled {
} }
} }
@property --gd-angle {
syntax: '<angle>';
inherits: false;
initial-value: 120deg;
}
@property --gd-shift {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@keyframes gradient-sway {
from {
--gd-angle: 110deg;
--gd-shift: -8%;
}
to {
--gd-angle: 132deg;
--gd-shift: 12%;
}
}
@keyframes gradient-drift { @keyframes gradient-drift {
from { from {
background-position: 0% 50%; background-position: 0% 50%;