feat: implement global audio player with playback controls, progress tracking, and persistent settings

This commit is contained in:
Michael committed 2026-04-16 15:34:09 +02:00
1 parent c9127c70c1
commit 17f2496dda
9 files changed
+274 -109

No files matched your search

+17 -17
View File
@@ -16,25 +16,25 @@
--glass-blur: blur(24px) saturate(180%);
--shadow-premium: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
--input-bg: rgba(255, 255, 255, 0.03);
--radius-card: 1.5rem; /* 24px */
--radius-panel: 2rem; /* 32px */
--radius-card: 1rem; /* 16px - Sharper, Industrial */
--radius-panel: 1.25rem; /* 20px */
}
/* ── Premium Gold (Light Theme) ── */
:root.light-theme, .light-theme {
--bg-primary: #FDFCFB; /* Off-white */
--bg-secondary: rgba(212, 175, 55, 0.05); /* Very light gold tint */
--text-primary: #0a0a0a; /* True black */
--text-secondary: #4b5563; /* Slate 600 */
--accent-primary: #C5A028; /* Premium Gold */
--accent-secondary: #856404; /* Darker Gold */
--accent-glow: rgba(197, 160, 40, 0.2);
--border-color: rgba(197, 160, 40, 0.15);
--glass-blur: blur(20px) saturate(120%);
--shadow-premium: 0 20px 50px rgba(197, 160, 40, 0.15), 0 10px 30px rgba(0, 0, 0, 0.06);
--radius-card: 1.5rem;
--radius-panel: 2rem;
--input-bg: #ffffff;
--bg-primary: #ffffff; /* Pure white for maximum clarity */
--bg-secondary: #f8fafc; /* Slate 50 tint */
--text-primary: #0f172a; /* Slate 900 */
--text-secondary: #64748b; /* Slate 500 */
--accent-primary: #6366f1; /* Consistent Indigo across themes for brand */
--accent-secondary: #06b6d4;
--accent-glow: rgba(99, 102, 241, 0.1);
--border-color: #e2e8f0; /* Soft slate border */
--glass-blur: blur(12px);
--shadow-premium: 0 10px 40px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.05);
--radius-card: 1rem;
--radius-panel: 1.25rem;
--input-bg: #f1f5f9;
}
}
@@ -68,8 +68,8 @@ body.light-theme::before {
inset: 0;
z-index: -1;
background-image:
radial-gradient(ellipse 80% 40% at 10% 10%, rgba(197, 160, 40, 0.05) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 60%);
radial-gradient(ellipse 80% 40% at 10% 10%, rgba(99, 102, 241, 0.03) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 90%, rgba(255, 255, 255, 1) 0%, transparent 60%);
pointer-events: none;
}