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

Web Player Refactor #2

Merged
NotS1mp merged 50 commits from web-player-ref into master 2026-09-23 15:05:12 +00:00
Conversation 0 Commits 50 Files Changed 115
+13 -11
5 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fe21c19810 - Show all commits
web-player/src/lib/components/layout/MobileHeader.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
</script> </script>
<header <header
class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden" class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-chrome/85 page-x backdrop-blur-md sm:hidden"
> >
<a href="/"> <a href="/">
<Logo size="sm" /> <Logo size="sm" />
web-player/src/lib/components/layout/Sidebar.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
</script> </script>
<aside <aside
class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex" class="hidden shrink-0 flex-col border-r border-hairline bg-chrome p-5 lg:flex"
style="width:var(--mf-sidebar-w)" style="width:var(--mf-sidebar-w)"
> >
<nav class="flex flex-col gap-1"> <nav class="flex flex-col gap-1">
web-player/src/lib/components/player/Queue.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
{#if queuePanel.open} {#if queuePanel.open}
<aside <aside
transition:fly={{ x: 24, duration: 220, easing: cubicOut }} transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex" class="hidden shrink-0 flex-col border-l border-hairline bg-chrome px-4 pt-5 sm:flex"
style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)" style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
> >
<div class="mb-5 flex items-center justify-between"> <div class="mb-5 flex items-center justify-between">
web-player/src/lib/theme/tokens.ts
+8 -7
View File
@@ -8,8 +8,8 @@ function r(value: number, digits = 4): string {
} }
function tc(alpha: number, l: number, hue: number): string { function tc(alpha: number, l: number, hue: number): string {
const lightness = 0.34 - l / 380; const lightness = 0.37 - l / 380;
const chroma = Math.max(0, 0.11 - l / 1600); const chroma = Math.max(0, 0.15 - l / 1600);
return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`; return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
} }
@@ -47,11 +47,12 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`, '--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
'--mf-accent-btn-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`, '--mf-accent-btn-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`,
'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`, '--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.068 0.008 ${H})`, '--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.075 0.02 ${H})`,
'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.11 0.012 ${H})`, '--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.025 ${H})`,
'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`, '--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`, '--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`, '--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
'--mf-chrome-bg': light ? 'var(--mf-bg)' : `color-mix(in srgb, ${tc(1, 42, h)} 40%, var(--mf-bg))`,
'--mf-ambient': light '--mf-ambient': light
? 'none' ? 'none'
: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`, : `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
web-player/src/routes/layout.css
+2 -1
View File
@@ -5,6 +5,7 @@
--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif; --font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
--color-bg: var(--mf-bg); --color-bg: var(--mf-bg);
--color-chrome: var(--mf-chrome-bg);
--color-elevated: var(--mf-elevated); --color-elevated: var(--mf-elevated);
--color-surface: var(--mf-surface); --color-surface: var(--mf-surface);
--color-surface-2: var(--mf-surface-2); --color-surface-2: var(--mf-surface-2);
@@ -127,7 +128,7 @@
transition-duration: var(--default-transition-duration); transition-duration: var(--default-transition-duration);
} }
@utility glass-bar { @utility glass-bar {
background-image: var(--mf-bar-bg); background-color: var(--mf-bar-bg);
border-top: 1px solid var(--mf-hairline); border-top: 1px solid var(--mf-hairline);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
} }