diff --git a/web-player/docs/design-system-refactor-plan.md b/web-player/docs/design-system-refactor-plan.md index 9480fcb..6ada010 100644 --- a/web-player/docs/design-system-refactor-plan.md +++ b/web-player/docs/design-system-refactor-plan.md @@ -6,6 +6,30 @@ > No es necesario ejecutar todo de una vez: está pensado para trabajarse página por > página o componente por componente, en PRs pequeños y verificables. +> **Estado (sesión de seguimiento posterior):** §1–§3 y §5 de este documento (hex +> literales, tamaños de fuente arbitrarios, menú "de cristal" duplicado, componentes +> huérfanos listados) ya están resueltos. El problema había reaparecido con otra forma: +> valores de opacidad sueltos sobre `white`/`black` (`bg-white/[6%]`, `border-white/10`, +> etc.) fuera de los tokens `--mf-surface*`/`--mf-border*`, sombras/gradientes de portada +> duplicados sin token, un bloque de "cabecera de colección" reimplementado 5 veces, un +> menú de cuenta duplicado en `TopBar`/`MobileHeader`, y textos de estado vacío con +> redacción inconsistente ("Aún no..." vs "Todavía no..."). Todo eso se corrigió: se +> añadieron tokens `--shadow-cover-lg/md/sm/xs` y `--mf-liked-grad` a +> `layout.css`/`theme.css`, se migraron los literales `white`/`black` a +> `bg-surface*`/`border-line*`/`hover:bg-hover`/`text-on-art` según si el color está +> sobre el "chrome" de la app o sobre arte/gradiente saturado, se extrajeron +> `lib/components/ui/CollectionHeader.svelte` (portada + título + meta + acciones, usado +> en `AlbumHeader`, `PlaylistHeader`, `liked/+page.svelte`, `mixes/[id]/+page.svelte`, +> `albums/external/.../+page.svelte`) y `lib/components/AccountMenu.svelte` (estado de +> apertura + panel del menú de cuenta, usado en `TopBar`/`MobileHeader`), y se corrigió +> `--color-hover` en `layout.css`, que estaba hardcodeado en vez de apuntar a +> `--mf-surface-2` (rompía el modo claro para cualquier `hover:bg-hover`). Pendiente de +> quien retome esto: verificación visual en el navegador con una sesión autenticada real +> (esta sesión no tenía credenciales del IdP de Zitadel ni acceso para activar +> `allowAnonymousListening`), y `lib/components/ui/Rail.svelte`, que el grep de +> huérfanos de §5 marca sin importadores — no se tocó porque no forma parte de este +> barrido, pero conviene confirmarlo a mano y borrarlo si procede. + ## 0. Objetivo Tres problemas, en orden de aparición histórica pero **no** de prioridad recomendada: diff --git a/web-player/src/lib/components/AccountMenu.svelte b/web-player/src/lib/components/AccountMenu.svelte new file mode 100644 index 0000000..b7db86e --- /dev/null +++ b/web-player/src/lib/components/AccountMenu.svelte @@ -0,0 +1,73 @@ + + +
+ {@render trigger({ toggle, open })} + + {#if open} + + + {@render extraItems?.({ close })} + {#if accountUrl} + + {/if} + themeMode.toggle()} + /> +
+ + +
+ {/if} +
+ + diff --git a/web-player/src/lib/components/AlbumContextMenu.svelte b/web-player/src/lib/components/AlbumContextMenu.svelte index b29dc4b..1249bd4 100644 --- a/web-player/src/lib/components/AlbumContextMenu.svelte +++ b/web-player/src/lib/components/AlbumContextMenu.svelte @@ -60,7 +60,7 @@ - - {#if menuOpen} - - (menuOpen = false)} - /> - (menuOpen = false)} - /> - (menuOpen = false)} - /> - {#if accountUrl} - (menuOpen = false)} - /> - {/if} - themeMode.toggle()} - /> -
- - -
- {/if} + {#snippet trigger({ toggle, open })} + + {/snippet} + {#snippet extraItems({ close })} + + + {/snippet} + {:else} - - diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/Sidebar.svelte index 15cb9c4..ed415dc 100644 --- a/web-player/src/lib/components/Sidebar.svelte +++ b/web-player/src/lib/components/Sidebar.svelte @@ -52,7 +52,7 @@ style="width:var(--mf-sidebar-w)" > - Musify + Musify {#if user} -
+
- Tus playlistsTus playlists {#if playlists.length > 0} @@ -87,7 +74,7 @@
-
+
{#if user} - - {#if menuOpen} - - (menuOpen = false)} - /> - {#if accountUrl} - (menuOpen = false)} - /> - {/if} - themeMode.toggle()} - /> - - - - - {/if} + {#if user.picture} + + {:else} + + {user.name.charAt(0)} + + {/if} + + {/snippet} + {:else} - - diff --git a/web-player/src/lib/components/TrackContextMenu.svelte b/web-player/src/lib/components/TrackContextMenu.svelte index 43b4ad5..2e569a9 100644 --- a/web-player/src/lib/components/TrackContextMenu.svelte +++ b/web-player/src/lib/components/TrackContextMenu.svelte @@ -53,7 +53,7 @@
{#if player.current.id} -

+

Reproduciendo

@@ -45,13 +45,13 @@ class="h-10 w-10 shrink-0 rounded-[9px]" />
-
+
{player.current.title}
@@ -59,7 +59,7 @@
A continuación @@ -67,7 +67,7 @@ @@ -96,15 +96,15 @@ class="h-9 w-9 shrink-0 rounded-lg opacity-90" />
-
{track.title}
+
{track.title}
{#if track.duration} - {fmtTime(track.duration)} {/if} diff --git a/web-player/src/lib/components/player/SeekBar.svelte b/web-player/src/lib/components/player/SeekBar.svelte index ce8eb0b..5f36f89 100644 --- a/web-player/src/lib/components/player/SeekBar.svelte +++ b/web-player/src/lib/components/player/SeekBar.svelte @@ -28,7 +28,7 @@ {:else}
- + {fmtTime(player.progress)}
- + {fmtTime(player.current.duration)}
diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte index b360665..8d98a24 100644 --- a/web-player/src/lib/components/player/TrackInfo.svelte +++ b/web-player/src/lib/components/player/TrackInfo.svelte @@ -35,26 +35,24 @@ src={player.current.coverUrl} size="small" alt={player.current.title} - class="h-11 w-11 shrink-0 rounded-[11px] shadow-[0_8px_20px_rgba(0,0,0,0.5)] md:h-12 md:w-12" + class="h-11 w-11 shrink-0 rounded-[11px] shadow-cover-xs md:h-12 md:w-12" /> {:else} -
+
{/if}
{#if player.current.explicit} {/if} - {player.current.title}
{#if !compact} diff --git a/web-player/src/lib/components/ui/ArtistAvatar.svelte b/web-player/src/lib/components/ui/ArtistAvatar.svelte index a205e06..90f2c7d 100644 --- a/web-player/src/lib/components/ui/ArtistAvatar.svelte +++ b/web-player/src/lib/components/ui/ArtistAvatar.svelte @@ -27,9 +27,9 @@ {:else}
- {initials} + {initials} {/if}
{name}
diff --git a/web-player/src/lib/components/ui/Button.svelte b/web-player/src/lib/components/ui/Button.svelte index ac627ed..f771fa2 100644 --- a/web-player/src/lib/components/ui/Button.svelte +++ b/web-player/src/lib/components/ui/Button.svelte @@ -29,12 +29,12 @@ }: Props = $props(); const sizes = { - sm: 'px-4 py-2.5 text-[12.5px]', - md: 'px-5 py-3 text-[13px]', + sm: 'px-4 py-2.5 text-xs', + md: 'px-5 py-3 text-sm', lg: 'px-6 py-3.5 text-sm' }; - const subtleButton = 'bg-white/[6%] text-fg-2 hover:bg-white/[9%] hover:text-fg'; + const subtleButton = 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'; const variants = { primary: subtleButton, diff --git a/web-player/src/lib/components/ui/CollectionHeader.svelte b/web-player/src/lib/components/ui/CollectionHeader.svelte new file mode 100644 index 0000000..e040e84 --- /dev/null +++ b/web-player/src/lib/components/ui/CollectionHeader.svelte @@ -0,0 +1,43 @@ + + +
+ {@render cover()} +
+

{eyebrow}

+

+ {title} +

+ {#if description} +

{description}

+ {/if} + {#if meta} +

{meta}

+ {/if} +
+
+ +
+ {@render actions()} +
diff --git a/web-player/src/lib/components/ui/EmptyState.svelte b/web-player/src/lib/components/ui/EmptyState.svelte index 7c9ccbd..8a38e5b 100644 --- a/web-player/src/lib/components/ui/EmptyState.svelte +++ b/web-player/src/lib/components/ui/EmptyState.svelte @@ -23,7 +23,7 @@ {/if} {#if description} -

{description}

+

{description}

{/if} {#if actions}
{@render actions()}
diff --git a/web-player/src/lib/components/ui/ExplicitBadge.svelte b/web-player/src/lib/components/ui/ExplicitBadge.svelte index 9b1ac4b..222f402 100644 --- a/web-player/src/lib/components/ui/ExplicitBadge.svelte +++ b/web-player/src/lib/components/ui/ExplicitBadge.svelte @@ -7,7 +7,7 @@ E diff --git a/web-player/src/lib/components/ui/ImageDropzone.svelte b/web-player/src/lib/components/ui/ImageDropzone.svelte index b7e8445..2673510 100644 --- a/web-player/src/lib/components/ui/ImageDropzone.svelte +++ b/web-player/src/lib/components/ui/ImageDropzone.svelte @@ -57,6 +57,6 @@ class="h-full w-full object-cover" /> {:else} - + {/if} diff --git a/web-player/src/lib/components/ui/MediaCard.svelte b/web-player/src/lib/components/ui/MediaCard.svelte index ea69595..14f022f 100644 --- a/web-player/src/lib/components/ui/MediaCard.svelte +++ b/web-player/src/lib/components/ui/MediaCard.svelte @@ -27,6 +27,6 @@ {@render art(mediaCardArt)}
{title}
{#if subtitle} -
{subtitle}
+
{subtitle}
{/if} diff --git a/web-player/src/lib/components/ui/MenuItem.svelte b/web-player/src/lib/components/ui/MenuItem.svelte index 91cfd6d..4325a9b 100644 --- a/web-player/src/lib/components/ui/MenuItem.svelte +++ b/web-player/src/lib/components/ui/MenuItem.svelte @@ -24,7 +24,7 @@ }: Props = $props(); const classes = $derived( - `flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-[13.5px] font-medium text-fg-2 transition hover:bg-hover ${klass}` + `flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm font-medium text-fg-2 transition hover:bg-hover ${klass}` ); diff --git a/web-player/src/lib/components/ui/MixTile.svelte b/web-player/src/lib/components/ui/MixTile.svelte index a1b7bb8..52d671c 100644 --- a/web-player/src/lib/components/ui/MixTile.svelte +++ b/web-player/src/lib/components/ui/MixTile.svelte @@ -37,15 +37,15 @@ type="button" onclick={play} aria-label="Reproducir {mix.title}" - class="absolute right-2.5 bottom-2.5 grid h-9.5 w-9.5 place-items-center rounded-full border border-white/12 bg-ink/76 text-fg opacity-0 backdrop-blur-[8px] transition-opacity duration-150 group-hover/tile:opacity-100" + class="absolute right-2.5 bottom-2.5 grid h-9.5 w-9.5 place-items-center rounded-full border border-on-art/12 bg-ink/76 text-fg opacity-0 backdrop-blur-[8px] transition-opacity duration-150 group-hover/tile:opacity-100" > -
+
{mix.title}
{#if mix.subtitle} -
{mix.subtitle}
+
{mix.subtitle}
{/if} diff --git a/web-player/src/lib/components/ui/PageHeader.svelte b/web-player/src/lib/components/ui/PageHeader.svelte index dd9e70e..689df0a 100644 --- a/web-player/src/lib/components/ui/PageHeader.svelte +++ b/web-player/src/lib/components/ui/PageHeader.svelte @@ -13,11 +13,11 @@
-

+

{title}

{#if subtitle} -

{subtitle}

+

{subtitle}

{/if}
{#if actions} diff --git a/web-player/src/lib/components/ui/SearchResultRow.svelte b/web-player/src/lib/components/ui/SearchResultRow.svelte index 22e97a4..6756f28 100644 --- a/web-player/src/lib/components/ui/SearchResultRow.svelte +++ b/web-player/src/lib/components/ui/SearchResultRow.svelte @@ -49,14 +49,14 @@ {#if explicit} {/if} - {title} + {title}
{#if subtitle} -
{subtitle}
+
{subtitle}
{/if}
{#if meta} - {meta} + {meta} {/if} {/snippet} diff --git a/web-player/src/lib/components/ui/SectionHeading.svelte b/web-player/src/lib/components/ui/SectionHeading.svelte index d161890..d3edae0 100644 --- a/web-player/src/lib/components/ui/SectionHeading.svelte +++ b/web-player/src/lib/components/ui/SectionHeading.svelte @@ -12,7 +12,7 @@ {#snippet heading()} -

+

{title}

{#if subtitle} diff --git a/web-player/src/lib/components/ui/TrackMeta.svelte b/web-player/src/lib/components/ui/TrackMeta.svelte index 3cf10a2..f330e5d 100644 --- a/web-player/src/lib/components/ui/TrackMeta.svelte +++ b/web-player/src/lib/components/ui/TrackMeta.svelte @@ -9,6 +9,6 @@ let { class: klass = '', children }: Props = $props(); - + {@render children()} diff --git a/web-player/src/lib/components/ui/TrackRow.svelte b/web-player/src/lib/components/ui/TrackRow.svelte index aeee3da..444fa9d 100644 --- a/web-player/src/lib/components/ui/TrackRow.svelte +++ b/web-player/src/lib/components/ui/TrackRow.svelte @@ -19,7 +19,7 @@
diff --git a/web-player/src/lib/components/ui/TrackTable.svelte b/web-player/src/lib/components/ui/TrackTable.svelte index d989d00..89e38ac 100644 --- a/web-player/src/lib/components/ui/TrackTable.svelte +++ b/web-player/src/lib/components/ui/TrackTable.svelte @@ -56,7 +56,7 @@
{#if index} diff --git a/web-player/src/lib/components/ui/TrackTitleCell.svelte b/web-player/src/lib/components/ui/TrackTitleCell.svelte index 81dcd73..bbd525a 100644 --- a/web-player/src/lib/components/ui/TrackTitleCell.svelte +++ b/web-player/src/lib/components/ui/TrackTitleCell.svelte @@ -69,6 +69,6 @@ > {@render badge?.()}
- +
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css index 1c16796..c52730f 100644 --- a/web-player/src/lib/theme/theme.css +++ b/web-player/src/lib/theme/theme.css @@ -35,6 +35,7 @@ --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-accent: oklch(0.74 0.145 145); --mf-accent-title: oklch(0.87 0.07 145); diff --git a/web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte b/web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte index 3f9b4a8..bffdad3 100644 --- a/web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte +++ b/web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte @@ -6,6 +6,7 @@ import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte'; import BackLink from '$lib/components/ui/BackLink.svelte'; import Button from '$lib/components/ui/Button.svelte'; + import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte'; interface Props { title: string; @@ -48,45 +49,34 @@ label={isOwner ? 'Volver a tus álbumes' : 'Volver al inicio'} /> -
- -
-

Álbum

-

- {title} -

- {#if description} -

{description}

- {/if} -

{meta}

-
-
- -
- - {#if isOwner} - - - {/if} -
+ {#if isOwner} + + + {/if} + {/snippet} + diff --git a/web-player/src/routes/(app)/albums/external/[source]/[externalId]/+page.svelte b/web-player/src/routes/(app)/albums/external/[source]/[externalId]/+page.svelte index 2f9892c..3916628 100644 --- a/web-player/src/routes/(app)/albums/external/[source]/[externalId]/+page.svelte +++ b/web-player/src/routes/(app)/albums/external/[source]/[externalId]/+page.svelte @@ -8,6 +8,7 @@ import Button from '$lib/components/ui/Button.svelte'; import Cover from '$lib/components/ui/Cover.svelte'; import Alert from '$lib/components/ui/Alert.svelte'; + import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte'; import TrackTable from '$lib/components/ui/TrackTable.svelte'; import TrackRow from '$lib/components/ui/TrackRow.svelte'; import TrackMeta from '$lib/components/ui/TrackMeta.svelte'; @@ -79,48 +80,40 @@ -
- (albumMenu = albumContextMenuStateFor(e, 'youtube', album.albumId))} - /> -
-

- {album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} -

-

- {album.title} -

-

{album.artist}

-

- {[ - album.releaseYear ? String(album.releaseYear) : undefined, - `${tracks.length} ${tracks.length === 1 ? 'canción' : 'canciones'}`, - fmtTime(Number(data.album.totalDurationSeconds)) - ] - .filter((part) => !!part) - .join(' · ')} -

-
-
- -
- -
+ !!part) + .join(' · ')} + > + {#snippet cover()} + (albumMenu = albumContextMenuStateFor(e, 'youtube', album.albumId))} + /> + {/snippet} + {#snippet actions()} + + {/snippet} + {#if form?.message} {form.message} diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte index ab08ff2..1a068fe 100644 --- a/web-player/src/routes/(app)/explore/+page.svelte +++ b/web-player/src/routes/(app)/explore/+page.svelte @@ -313,7 +313,7 @@ Resultados de búsqueda

Resultados para «{data.query}»

@@ -331,13 +331,11 @@ class="flex items-center gap-1.75 rounded-full px-3.5 py-1.75 text-xs font-medium transition {sfilter === chip.label ? 'bg-cta-strong text-ink' - : 'bg-white/[3.5%] text-fg-2 hover:bg-white/7 hover:text-fg'}" + : 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'}" > {chip.label} - {chip.count}{chip.count} {/each} @@ -394,9 +392,7 @@ {/if}
-
+
Mejor resultado · {TOP_RESULT_KIND_LABEL[topResult.kind]}
Sin resultados para «{data.query}» -

+

Revisa la ortografía o prueba con un término más corto. También puedes buscar por álbum o por playlist.

@@ -464,7 +460,7 @@ {#each genreTiles.slice(0, 4) as genre (genre.query)} {genre.label} @@ -481,12 +477,12 @@ href={buildHref(genre.query)} class="animate-enter group relative block h-28 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-125" style="animation-delay:{Math.min(i, 10) * - 40}ms; background:linear-gradient(140deg, oklch(0.24 0.07 {genre.hue}), rgba(9,9,12,.95))" + 40}ms; background:linear-gradient(140deg, oklch(0.24 0.07 {genre.hue}), var(--mf-ink))" > -
+
{genre.label}
-
{genre.tagline}
+
{genre.tagline}
{/each}
@@ -500,7 +496,7 @@ {#snippet actions()}
- + {searchCounts.Canciones} {searchCounts.Canciones === 1 ? 'Resultado' : 'Resultados'} @@ -553,7 +549,7 @@ {#snippet actions()}
- + {searchCounts.Álbumes} {searchCounts.Álbumes === 1 ? 'Resultado' : 'Resultados'} @@ -605,7 +601,7 @@ {#snippet actions()}
- + {searchCounts.Usuarios} {searchCounts.Usuarios === 1 ? 'Resultado' : 'Resultados'} @@ -638,7 +634,7 @@ {#snippet actions()}
- + {searchCounts.Playlists} {searchCounts.Playlists === 1 ? 'Resultado' : 'Resultados'} diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte index 4c85f5a..dc9d6ad 100644 --- a/web-player/src/routes/(app)/liked/+page.svelte +++ b/web-player/src/routes/(app)/liked/+page.svelte @@ -7,6 +7,7 @@ import { liked } from '$lib/player/liked.svelte'; import { fmtDate } from '$lib/format'; import Page from '$lib/components/ui/Page.svelte'; + import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte'; import Button from '$lib/components/ui/Button.svelte'; import IconButton from '$lib/components/ui/IconButton.svelte'; import EmptyState from '$lib/components/ui/EmptyState.svelte'; @@ -46,38 +47,31 @@ -
-
- -
-
-

Colección

-

+ {#snippet cover()} +
- Me gusta -

-

- {tracks.length} - {tracks.length === 1 ? 'canción' : 'canciones'} -

-
-
- -
- -
+ +
+ {/snippet} + {#snippet actions()} + + {/snippet} + {#if tracks.length > 0} -
- -
-

Mezcla

-

- {mix.title} -

- {#if mix.subtitle} -

{mix.subtitle}

- {/if} -

- {items.length} - {items.length === 1 ? 'canción' : 'canciones'} · {fmtTime(totalSeconds)} -

-
-
- -
- - -
+ + {#snippet cover()} + + {/snippet} + {#snippet actions()} + + + {/snippet} + {#if form?.message} {form.message} diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte index 92e6479..9ec5f94 100644 --- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte +++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte @@ -82,7 +82,7 @@

¿Eliminar «{playlist.name}»?

-

+

Esta acción no se puede deshacer, la playlist se eliminará de tu biblioteca y de todos los dispositivos donde la tengas guardada.

diff --git a/web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte b/web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte index e9fc8a8..0f0f366 100644 --- a/web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte +++ b/web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte @@ -1,10 +1,7 @@ -
- -
-

Lista

-

- {name} -

- {#if description} -

{description}

- {/if} -

- {trackIds.length} - {trackIds.length === 1 ? 'canción' : 'canciones'} · {visibility === 'Public' - ? 'Pública' - : 'Privada'} -

-
-
- -
- - - -
+ + {#snippet cover()} + + {/snippet} + {#snippet actions()} + + + + {/snippet} + diff --git a/web-player/src/routes/(app)/u/[id]/+page.svelte b/web-player/src/routes/(app)/u/[id]/+page.svelte index c79a869..b355f5b 100644 --- a/web-player/src/routes/(app)/u/[id]/+page.svelte +++ b/web-player/src/routes/(app)/u/[id]/+page.svelte @@ -32,13 +32,13 @@
-

Perfil

+

Perfil

{profile.name}

-

+

{profile.followersCount} {profile.followersCount === 1 ? 'seguidor' : 'seguidores'} · {profile.followingCount} siguiendo

diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte index 887faa4..e158b02 100644 --- a/web-player/src/routes/(app)/upload/+page.svelte +++ b/web-player/src/routes/(app)/upload/+page.svelte @@ -115,7 +115,7 @@ class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold {stepStates[ i ] === 'idle' - ? 'bg-white/[3.5%] text-fg-2' + ? 'bg-surface-2 text-fg-2' : 'bg-accent-btn text-accent-soft'}" > {#if stepStates[i] === 'done'} @@ -228,7 +228,7 @@ {#if coverPreview !== ''} Portada {:else} - + {/if} diff --git a/web-player/src/routes/+error.svelte b/web-player/src/routes/+error.svelte index 311b477..b458b6e 100644 --- a/web-player/src/routes/+error.svelte +++ b/web-player/src/routes/+error.svelte @@ -7,7 +7,7 @@

{page.status === 404 ? 'Página no encontrada' : 'No se pudo cargar tu música'}

-

+

{page.status === 404 ? 'Comprueba el enlace o vuelve al inicio.' : 'La conexión se interrumpió. Lo que tengas descargado seguirá disponible sin conexión.'} diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte index b84fc6f..89087ec 100644 --- a/web-player/src/routes/+page.svelte +++ b/web-player/src/routes/+page.svelte @@ -152,11 +152,11 @@ >

{data.greeting}

-

+

Sube lo tuyo, descubre lo nuevo y escúchalo todo en un solo sitio.

@@ -177,22 +177,22 @@ {#await data.listeningStats then stats}
-
+
{stats.tracksThisWeek}
-
Canciones nuevas escuchadas esta semana
+
Canciones nuevas escuchadas esta semana
-
+
{fmtDurationLong(Number(stats.secondsThisWeek))}
-
Tiempo de escucha esta semana
+
Tiempo de escucha esta semana
-
+
{stats.streakDays}
-
Días consecutivos escuchando
+
Días consecutivos escuchando
{/await} @@ -220,7 +220,7 @@ oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(item))} class="group/cont animate-enter flex items-center gap-3.25 rounded-[13px] p-2.25 pr-3.5 text-left transition-colors {isCurrent ? 'bg-accent-tint' - : 'hover:bg-white/[3%]'}" + : 'hover:bg-hover'}" style="animation-delay:{Math.min(i, 10) * 40}ms" >
@@ -250,7 +250,7 @@ {:else} {#snippet actions()} @@ -273,18 +273,18 @@ trackIds={spotlight.coverTrackIds} version={spotlight.updatedAt} size="large" - class="h-28 w-28 shrink-0 rounded-[16px] shadow-[0_16px_40px_rgba(0,0,0,.5)]" + class="h-28 w-28 shrink-0 rounded-[16px] shadow-cover-md" />
-

+

Playlist destacada

{spotlight.name}

-

{spotlightMeta}

+

{spotlightMeta}

@@ -312,18 +312,16 @@ e.preventDefault(); playSpotlightTrack(i); }} - class="flex items-center gap-3 rounded-[10px] p-2 text-left transition-colors hover:bg-white/[3%] {isTargetCurrent( + class="flex items-center gap-3 rounded-[10px] p-2 text-left transition-colors hover:bg-hover {isTargetCurrent( target ) ? 'bg-accent-tint' : ''}" > - {i + 1} + {i + 1}

@@ -332,10 +330,10 @@
- + {durationSeconds !== undefined ? fmtTime(durationSeconds) : '—'}
@@ -359,7 +357,7 @@ {:else} {/if} @@ -387,7 +385,7 @@ oncontextmenu={(e) => openContextMenu(e, target)} class="flex items-center gap-3.5 rounded-[11px] p-2 text-left transition-colors {isCurrent ? 'bg-accent-tint' - : 'hover:bg-white/[3%]'}" + : 'hover:bg-hover'}" > {#if isCurrent} @@ -409,9 +407,7 @@ {/if} {targetTitle(target)} @@ -419,7 +415,7 @@
@@ -428,7 +424,7 @@ {:else} {#snippet actions()} @@ -445,7 +441,7 @@ {#if data.playlistsHasMore} Ver todas @@ -457,7 +453,7 @@ {#each playlists as playlist, i (playlist.id)}
-
+
{playlist.name}
{#if playlist.description} -
{playlist.description}
+
{playlist.description}
{/if}
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css index bc87a01..b74048d 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -9,7 +9,7 @@ --color-surface: var(--mf-surface); --color-surface-2: var(--mf-surface-2); --color-surface-hover: var(--mf-surface-hover); - --color-hover: rgba(255, 255, 255, 0.045); + --color-hover: var(--mf-surface-2); --color-line: var(--mf-border); --color-line-strong: var(--mf-border-strong); --color-hairline: var(--mf-hairline); @@ -48,6 +48,11 @@ --shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6); --shadow-player: 0 20px 56px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 0 1px var(--mf-border-strong), 0 20px 45px -20px var(--mf-accent-glow); + + --shadow-cover-lg: 0 24px 56px rgba(0, 0, 0, 0.55); + --shadow-cover-md: 0 16px 40px rgba(0, 0, 0, 0.5); + --shadow-cover-sm: 0 10px 24px rgba(0, 0, 0, 0.42); + --shadow-cover-xs: 0 8px 20px rgba(0, 0, 0, 0.5); } @utility page-x {