Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-23 15:08:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: initialize global styles with theme variables, Tailwind configuration, and custom UI components

Browse Source
This commit is contained in:
Michael committed 2026-04-16 15:39:32 +02:00
1 parent 030ddfba81
commit acd9a1a2c5
6 files changed
+39 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/styles/globals.css
+28 -3
View File
@@ -14,10 +14,10 @@
--accent-glow: rgba(99, 102, 241, 0.35);
--border-color: rgba(255, 255, 255, 0.07);
--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: 1rem; /* 16px - Sharper, Industrial */
--radius-panel: 1.25rem; /* 20px */
--shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
--shadow-hover: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2);
}
/* ── Premium Gold (Light Theme) ── */
@@ -31,11 +31,36 @@
--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);
--shadow-premium: 0 12px 30px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 25px 50px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.05);
--radius-card: 1rem;
--radius-panel: 1.25rem;
--input-bg: #f1f5f9;
}
/* ── Explicit Dark Theme (for nesting/inversion) ── */
.dark-theme {
--bg-primary: #080d1a;
--bg-secondary: rgba(255, 255, 255, 0.025);
--text-primary: #ffffff;
--text-secondary: #94a3b8;
--accent-primary: #6366f1;
--accent-secondary: #06b6d4;
--accent-glow: rgba(99, 102, 241, 0.35);
--border-color: rgba(255, 255, 255, 0.07);
--input-bg: rgba(255, 255, 255, 0.03);
--shadow-premium: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
--shadow-hover: 0 35px 80px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
}
}
.premium-card {
@apply transition-all duration-300;
box-shadow: var(--shadow-premium);
}
.premium-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
* { @apply box-border; }