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

refactor(web-player): centralise styles and drop dead code

Browse Source 
Styles: adds the scrim and on-art tokens so the black overlays and the
white marks drawn over artwork stop being raw tailwind colours, and
routes every component through the semantic layer instead of reaching
into the --mf-* palette. Renames --mf-accent-60, which was actually an
80% mix, to --mf-accent-soft, and removes the unused --mf-radius and
the --color-neutral-950 override.

Dead code: the root +layout.server.ts already redirects everything
except /login, so the anonymous branches in the home and explore loads
and the needsAuth empty state could never run. Deletes the unused
accentSoft helper, and stops exporting helpers nobody imports.

fmtTime and fmtDate move out of theme/color.ts into $lib/format.ts;
they are not colour concerns.

The accent animation now cancels its pending frame on teardown.
This commit is contained in:
Admin
2026-07-20 14:35:45 +02:00
parent e10c24cad0
commit d4a66e4320
22 changed files with 68 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/player/SeekBar.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { player } from '$lib/player/player.svelte';
import { fmtTime } from '$lib/theme/color';
import { fmtTime } from '$lib/format';
function seek(event: MouseEvent) {
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
@@ -23,11 +23,11 @@
style="width:{player.progressPercent}%"
></div>
<span
class="pointer-events-none absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 shadow-[0_1px_4px_rgba(0,0,0,0.5)] transition-opacity duration-75 group-hover:opacity-100"
class="pointer-events-none absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-art opacity-0 shadow-[0_1px_4px_rgba(0,0,0,0.5)] transition-opacity duration-75 group-hover:opacity-100"
style="left:{player.progressPercent}%"
></span>
</button>
<span class="text-xs text-(--mf-text-4) tabular-nums">
<span class="text-xs text-muted tabular-nums">
{fmtTime(player.current.duration)}
</span>
</div>
web-player/src/lib/components/player/VolumeControl.svelte
+3 -3
View File
@@ -17,7 +17,7 @@
oninput={handleVolumeChange}
aria-label="Volumen"
class="mf-volume"
style="background:linear-gradient(to right, var(--mf-accent-60) {player.volume}%, var(--mf-track) {player.volume}%)"
style="background:linear-gradient(to right, var(--color-accent-soft) {player.volume}%, var(--color-track) {player.volume}%)"
/>
</div>
@@ -37,14 +37,14 @@
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--mf-text);
background: var(--color-fg);
cursor: pointer;
}
.mf-volume::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--mf-text);
background: var(--color-fg);
border: none;
cursor: pointer;
}