Admin
06b7a08bfa
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.
34 lines
1.1 KiB
Svelte
34 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { player } from '$lib/player/player.svelte';
|
|
import { fmtTime } from '$lib/format';
|
|
|
|
function seek(event: MouseEvent) {
|
|
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
|
|
player.seekFraction((event.clientX - rect.left) / rect.width);
|
|
}
|
|
</script>
|
|
|
|
<div class="flex w-full max-w-172 items-center gap-3">
|
|
<span class="text-right text-xs text-muted tabular-nums">
|
|
{fmtTime(player.progress)}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onclick={seek}
|
|
aria-label="Barra de progreso"
|
|
class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
|
|
>
|
|
<div
|
|
class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"
|
|
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-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-muted tabular-nums">
|
|
{fmtTime(player.current.duration)}
|
|
</span>
|
|
</div>
|