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

Keep light mode gradients visible while drifting

Browse Source
This commit is contained in:
Admin
2026-09-23 22:07:50 +02:00
parent d8530b9209
commit 2cb560fda4
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/tokens.ts
+2 -2
View File
@@ -54,7 +54,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
: `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-bg': light
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)` ? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.93, 0.03, 0.52)} 60%)`
: `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)})`, : `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-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%)`
@@ -63,7 +63,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
? `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-bg': light
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)` ? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.93, 0.03, 0.47)} 55%)`
: `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)})`, : `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-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}))`
web-player/src/routes/layout.css
+5 -5
View File
@@ -224,22 +224,22 @@
} }
@utility surface-active { @utility surface-active {
background-image: var(--mf-g-active); background-image: var(--mf-g-active);
background-size: 180% 100%; background-size: 125% 100%;
animation: gradient-drift 14s ease-in-out infinite alternate; animation: gradient-drift 14s ease-in-out infinite alternate;
} }
@utility surface-active-hover { @utility surface-active-hover {
background-image: var(--mf-g-hover); background-image: var(--mf-g-hover);
background-size: 180% 100%; background-size: 125% 100%;
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: var(--mf-hero-bg);
background-size: 180% 100%; background-size: 125% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate; animation: gradient-drift 18s ease-in-out infinite alternate;
} }
@utility spotlight-surface { @utility spotlight-surface {
background-size: background-size:
180% 100%, 125% 100%,
100% 100%; 100% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate; animation: gradient-drift 18s ease-in-out infinite alternate;
background-image: background-image:
@@ -252,7 +252,7 @@
); );
} }
@utility glow-drift { @utility glow-drift {
background-size: 180% 100%; background-size: 125% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate; animation: gradient-drift 18s ease-in-out infinite alternate;
} }
@utility field-control { @utility field-control {