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

Simplify design

Browse Source
This commit is contained in:
Admin
2026-09-23 01:33:25 +02:00
parent d7199b4d1d
commit 2660c124d5
49 changed files with 356 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/(app)/albums/[id]/+page.svelte
+1 -3
View File
@@ -78,9 +78,7 @@
{/if}
</Button>
{#if isOwner}
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
Eliminar
</Button>
web-player/src/routes/(app)/explore/+page.svelte
+5 -4
View File
@@ -249,7 +249,7 @@
{/if}
<div class="flex h-22 min-w-0 flex-1 flex-col justify-center gap-3">
<div class="text-eyebrow leading-none font-semibold text-fg-3">
<div class="text-eyebrow leading-none font-semibold text-fg-2">
Mejor resultado · {TOP_RESULT_KIND_LABEL[topResult.kind]}
</div>
<div
@@ -264,7 +264,7 @@
: topResult.user.name}
</div>
{#if topResult.kind === 'track' && topResult.track.artist}
<div class="truncate text-sm leading-none text-fg-3">
<div class="truncate text-sm leading-none text-fg-2">
{topResult.track.artist}
</div>
{/if}
@@ -276,6 +276,7 @@
<svelte:element
this={topResult.kind === 'track' ? 'button' : 'a'}
type={topResult.kind === 'track' ? 'button' : undefined}
role={topResult.kind === 'track' ? 'button' : 'link'}
href={topResult.kind === 'track' ? undefined : topResultHref}
onclick={topResult.kind === 'track' ? playTopResult : undefined}
class="group/top animate-pop mt-6.5 flex w-full items-center gap-5 rounded-panel-lg bg-surface p-4.5 text-left transition hover:bg-surface-hover"
@@ -348,7 +349,7 @@
{/if}
{/snippet}
{#snippet trailing()}
<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
{fmtTime(seconds)} · {fmtPlays(track.listensCount)}
</span>
{/snippet}
@@ -383,7 +384,7 @@
oncontextmenu={(e) => openAlbumMenu(e, album.id)}
>
{#snippet trailing()}
<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
{Number(album.trackCount)} canciones
</span>
{/snippet}
web-player/src/routes/(app)/playlists/[id]/+page.svelte
+1 -3
View File
@@ -67,9 +67,7 @@
Reproducir
{/if}
</Button>
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
Eliminar
</Button>
web-player/src/routes/(app)/upload/+page.svelte
+5 -5
View File
@@ -123,7 +123,7 @@
</span>
<span class="text-sm font-medium text-fg">{step.label}</span>
</div>
<p class="mt-2.5 text-xs text-muted">{step.hint}</p>
<p class="mt-2.5 text-xs text-fg-2">{step.hint}</p>
</Surface>
</li>
{/each}
@@ -191,7 +191,7 @@
aria-label="Seleccionar archivo de audio"
/>
{#if audioName === ''}
<Headphones class="size-9 text-muted sm:size-10" strokeWidth={1.4} />
<Headphones class="size-9 text-fg-2 sm:size-10" strokeWidth={1.4} />
{:else}
<Music class="size-9 text-accent-soft sm:size-10" strokeWidth={1.4} />
{/if}
@@ -199,12 +199,12 @@
<p class="mt-4 text-sm font-medium text-fg">
Arrastra tu audio aquí o haz clic para elegir
</p>
<p class="mt-1.5 text-xs text-muted">MP3, FLAC, WAV…</p>
<p class="mt-1.5 text-xs text-fg-2">MP3, FLAC, WAV…</p>
{:else}
<p class="mt-4 max-w-full truncate text-sm font-medium text-fg">
{audioName}
</p>
<p class="mt-1.5 text-xs text-muted">{formatSize(audioSize)} · Listo para subir</p>
<p class="mt-1.5 text-xs text-fg-2">{formatSize(audioSize)} · Listo para subir</p>
{/if}
</div>
@@ -251,7 +251,7 @@
<Surface padding="sm">
<div class="flex items-center justify-between text-sm">
<span class="font-medium text-fg">Subiendo y creando la pista…</span>
<span class="text-xs text-muted">un momento</span>
<span class="text-xs text-fg-2">un momento</span>
</div>
<div class="mt-3 h-2 overflow-hidden rounded-full bg-surface-2">
<div class="h-full w-full animate-pulse rounded-full bg-accent-soft"></div>
web-player/src/routes/+layout.svelte
+4
View File
@@ -10,6 +10,7 @@
import TopBar from '$lib/components/layout/TopBar.svelte';
import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
import Modal from '$lib/components/ui/overlay/Modal.svelte';
import DialogHost from '$lib/components/ui/overlay/DialogHost.svelte';
import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
import { player } from '$lib/player/player.svelte';
import { queuePanel } from '$lib/player/queuePanel.svelte';
@@ -87,6 +88,7 @@
<svelte:head>
<link rel="icon" href={favicon} />
<!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS generado a partir de números, sin entrada de usuario -->
{@html `<style>${initialThemeCss}</style>`}
</svelte:head>
@@ -134,3 +136,5 @@
</Modal>
</div>
{/if}
<DialogHost />
web-player/src/routes/+page.svelte
+6 -8
View File
@@ -134,9 +134,7 @@
</svelte:head>
<Page>
<div
class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5"
>
<div class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5">
<div
class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
>
@@ -173,7 +171,7 @@
{#each statsList as stat (stat.label)}
<div>
<div class="text-display-2 text-fg">{stat.value}</div>
<div class="mt-1 text-xs text-fg-3">{stat.label}</div>
<div class="mt-1 text-xs text-fg-2">{stat.label}</div>
</div>
{/each}
</div>
@@ -245,7 +243,7 @@
<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
</div>
</div>
<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
<div class="flex flex-col gap-2 p-5.5 sm:p-6">
{#each spotlightRows as { track, seconds }, i (track.id)}
<ListRow
onclick={() => playSpotlightTrack(i)}
@@ -265,7 +263,7 @@
{/snippet}
</ListRow>
{:else}
<p class="p-2 text-sm text-fg-3">Esta playlist todavía no tiene canciones.</p>
<p class="p-2 text-sm text-fg-2">Esta playlist todavía no tiene canciones.</p>
{/each}
</div>
</div>
@@ -318,12 +316,12 @@
{#if isCurrent}
<EqBars size={13} paused={!player.playing} />
{:else}
<span class="text-xs text-muted tabular-nums">{i + 1}</span>
<span class="text-xs text-fg-2 tabular-nums">{i + 1}</span>
{/if}
</span>
{/snippet}
{#snippet trailing()}
<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
{fmtPlays(track.listensCount)}
</span>
{/snippet}
web-player/src/routes/layout.css
+32 -18
View File
@@ -9,15 +9,13 @@
--color-surface: var(--mf-surface);
--color-surface-2: var(--mf-surface-2);
--color-surface-hover: var(--mf-surface-hover);
--color-hover: var(--mf-surface-2);
--color-hover: var(--mf-row-hover);
--color-line: var(--mf-border);
--color-line-strong: var(--mf-border-strong);
--color-hairline: var(--mf-hairline);
--color-track: var(--mf-track);
--color-fg: var(--mf-text);
--color-fg-2: var(--mf-text-2);
--color-fg-3: var(--mf-text-3);
--color-muted: var(--mf-text-4);
--color-accent: var(--mf-accent);
--color-accent-soft: var(--mf-accent-title);
--color-accent-tint: var(--mf-accent-soft-bg);
@@ -29,17 +27,17 @@
--color-on-art: var(--mf-on-art);
--color-on-art-2: var(--mf-on-art-2);
--color-danger: oklch(63.7% 0.15 25.331);
--color-danger-fg: oklch(88.5% 0.062 18.334);
--color-btn: color-mix(
in srgb,
var(--mf-elevated) 45%,
color-mix(in srgb, var(--mf-hero-tint) 8%, var(--mf-bg))
);
--color-danger-fg: var(--mf-danger-fg);
--color-btn: var(--mf-btn-bg);
--color-btn-hover: var(--mf-btn-bg-hover);
--color-cta-strong-hover: var(--mf-cta-strong-hover);
--color-row-hover: var(--mf-row-hover);
--radius-tag: 0.25rem;
--radius-thumb: 0.5rem;
--radius-control: 0.625rem;
--radius-btn-sm: 0.6875rem;
--radius-btn: 0.75rem;
--radius-art: 0.8125rem;
--radius-art-lg: 1.125rem;
--radius-panel: 1.125rem;
@@ -66,6 +64,11 @@
--container-search: 30rem;
--container-cta: 20rem;
--text-control-sm: 0.78125rem;
--ease-snappy: var(--mf-ease);
--default-transition-duration: var(--mf-motion-fast);
--tracking-display: -0.02em;
--tracking-eyebrow: 0.1em;
--leading-body: 1.65;
@@ -122,7 +125,8 @@
}
@utility btn-transition {
transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, filter;
transition-property:
color, background-color, border-color, outline-color, opacity, box-shadow, filter;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
}
@@ -184,7 +188,7 @@
@utility app-main {
--mf-dock-h: 0px;
padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));
transition: padding 0.3s;
transition: padding var(--mf-motion-slow) var(--mf-ease);
&[data-has-track] {
--mf-dock-h: var(--mf-player-h);
@@ -197,6 +201,12 @@
oklch(var(--mf-tile-shade-l) var(--mf-tile-shade-c) var(--tile-hue))
);
}
@utility surface-active {
background-image: var(--mf-g-active);
}
@utility surface-active-hover {
background-image: var(--mf-g-hover);
}
@utility hero-surface {
background-image: var(--mf-hero-bg);
}
@@ -211,7 +221,7 @@
);
}
@utility field-control {
@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none;
@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-fg-2 focus:bg-surface-2 focus:outline-none;
}
@layer base {
@@ -258,7 +268,7 @@ button:disabled {
@keyframes pop-in {
from {
opacity: 0;
transform: scale(0.96) translateY(0.5rem);
transform: scale(0.98) translateY(0.25rem);
}
to {
opacity: 1;
@@ -307,16 +317,16 @@ button:disabled {
}
.animate-enter {
animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(min(var(--i, 0), 10) * 45ms);
animation: fade-up var(--mf-motion-slow) var(--mf-ease) both;
animation-delay: calc(min(var(--i, 0), 10) * 40ms);
}
.animate-pop {
animation: pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
animation: pop-in var(--mf-motion-base) var(--mf-ease) both;
}
.animate-fade {
animation: fade-in 0.4s ease both;
animation: fade-in var(--mf-motion-base) var(--mf-ease) both;
}
.glass-panel {
@@ -324,7 +334,11 @@ button:disabled {
background-image: var(--mf-modal-glow);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
transition: background 0.6s;
transition: background var(--mf-motion-slow) var(--mf-ease);
}
.glass-panel.glass-panel-danger {
background-image: var(--mf-modal-glow-danger);
}
@media (prefers-reduced-motion: reduce) {