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

Checkpoint web-player design-system refactor and backend track genre tagging

Browse Source 
Advances the ongoing token/componentization cleanup (anchored player dock,
border-based panels instead of floating shadows, corrected light-mode
accent/gradient tokens) alongside in-progress backend support for track
genre tags.
This commit is contained in:
Admin
2026-09-17 17:43:37 +02:00
parent 5ae9955bd0
commit c14db5a711
83 changed files with 1872 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/theme.css
+21 -14
View File
@@ -33,10 +33,12 @@
rgba(6, 6, 9, 0) 70%
);
--mf-logo-grad: linear-gradient(140deg, oklch(0.78 0.15 145), oklch(0.62 0.13 185) 92%);
--mf-logo-glow: 0 0 20px oklch(0.74 0.145 145 / 0.3);
--mf-cover-grad: linear-gradient(150deg, oklch(0.5 0.13 145), oklch(0.16 0.035 145));
--mf-liked-grad: linear-gradient(150deg, oklch(0.4 0.09 330), oklch(0.18 0.04 10));
--mf-tile-shade: rgba(9, 9, 12, 0.95);
--mf-tile-l: 0.34;
--mf-tile-c: 0.13;
--mf-tile-shade-l: 0.14;
--mf-tile-shade-c: 0.05;
--mf-accent: oklch(0.74 0.145 145);
--mf-accent-title: oklch(0.87 0.07 145);
@@ -65,6 +67,7 @@
--mf-scrim: #000000;
--mf-on-art: #fefdfb;
--mf-on-art-2: #cac8c3;
--mf-ink: #0a0a0d;
--mf-cta-strong-bg: #ffffff;
@@ -125,28 +128,32 @@
--mf-ink: #ffffff;
--mf-cta-strong-bg: #17171a;
--mf-ambient:
radial-gradient(52% 38% at 14% 0%, oklch(0.9 0.06 145 / 0.26), transparent 54%),
radial-gradient(46% 34% at 78% 0%, oklch(0.9121 0.0497 145 / 0.2), transparent 56%);
--mf-tile-l: 0.58;
--mf-tile-c: 0.15;
--mf-tile-shade-l: 0.42;
--mf-tile-shade-c: 0.12;
--mf-liked-grad: linear-gradient(150deg, oklch(0.62 0.12 330), oklch(0.46 0.08 10));
--mf-ambient: radial-gradient(46% 34% at 78% 0%, oklch(0.7476 0.121 145 / 0.2), transparent 56%);
--mf-hero-bg: linear-gradient(
105deg,
oklch(0.9145 0.0476 145 / 0.34) 0%,
oklch(0.9483 0.0186 145 / 0.11) 37%,
oklch(0.97 0 145 / 0.03) 65%,
oklch(0.7531 0.1172 145 / 0.34) 0%,
oklch(0.8303 0.0641 145 / 0.11) 37%,
oklch(0.88 0.03 145 / 0.03) 65%,
rgba(255, 255, 255, 0) 92%
);
--mf-spotlight-bg: linear-gradient(
100deg,
oklch(0.9193 0.0434 145 / 0.28) 0%,
oklch(0.9531 0.0145 145 / 0.1) 40%,
oklch(0.97 0 145 / 0.03) 69%,
oklch(0.7641 0.1097 145 / 0.28) 0%,
oklch(0.8414 0.0566 145 / 0.1) 40%,
oklch(0.88 0.03 145 / 0.03) 69%,
rgba(255, 255, 255, 0) 96%
);
--mf-modal-glow: linear-gradient(
135deg,
oklch(0.9145 0.0476 145 / 0.34) 0%,
oklch(0.9483 0.0186 145 / 0.11) 28%,
oklch(0.97 0 145 / 0.03) 50%,
oklch(0.7531 0.1172 145 / 0.34) 0%,
oklch(0.8303 0.0641 145 / 0.11) 28%,
oklch(0.88 0.03 145 / 0.03) 50%,
rgba(255, 255, 255, 0) 70%
);
}