AdminandClaude Sonnet 5
63de050355
Backend: - Expose GET /config/playback so the frontend can detect whether anonymous listening is enabled without requiring auth - Wire anonymous access through track streaming and YouTube resolve flows Frontend: - Allow browsing/listening without a session when the backend enables it - Redesign Inicio, Sidebar and top bar with a new dark theme, typography, and layout (top bar with live quick-search, sticky/blurred on scroll) - Populate Top música, Popular and Recomendados with real Musify + YouTube Music data instead of placeholders - Various shape, spacing, color and animation refinements across the redesigned components Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
40 lines
1.3 KiB
CSS
40 lines
1.3 KiB
CSS
:root {
|
|
--mf-bg: oklch(12.5% 0.004 95);
|
|
--mf-elevated: oklch(16% 0.005 95);
|
|
|
|
--mf-text: oklch(93% 0.004 95);
|
|
--mf-text-2: oklch(78% 0.006 95);
|
|
--mf-text-3: oklch(62% 0.007 95);
|
|
--mf-text-4: oklch(46% 0.006 95);
|
|
|
|
--mf-surface: oklch(15.5% 0.005 95);
|
|
--mf-surface-2: rgba(255, 255, 255, 0.05);
|
|
--mf-surface-hover: rgba(255, 255, 255, 0.08);
|
|
|
|
--mf-border: rgba(255, 255, 255, 0.07);
|
|
--mf-border-strong: rgba(255, 255, 255, 0.13);
|
|
--mf-track: rgba(255, 255, 255, 0.12);
|
|
|
|
--mf-accent: oklch(60% 0.1 145);
|
|
--mf-accent-soft: color-mix(in oklch, var(--mf-accent) 80%, transparent);
|
|
--mf-accent-glow: color-mix(in oklch, var(--mf-accent) 45%, transparent);
|
|
--mf-accent-dim: color-mix(in oklch, var(--mf-accent) 22%, transparent);
|
|
|
|
--mf-scrim: #000000;
|
|
--mf-on-art: #fefdfb;
|
|
|
|
--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
|
|
--mf-sidebar-w: 288px;
|
|
--mf-nav-h: 60px;
|
|
--mf-player-h: 64px;
|
|
--mf-safe-b: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
@media (width >= 48rem) {
|
|
:root {
|
|
--mf-nav-h: 0px;
|
|
--mf-player-h: 92px;
|
|
}
|
|
}
|