feat: initialize global styles with theme-aware CSS variables and utility components

This commit is contained in:
Michael committed 2026-04-16 15:20:29 +02:00
1 parent 3bb2dfc009
commit 67d45b72ee
9 files changed
+19 -15

No files matched your search

+3 -3
View File
@@ -126,7 +126,7 @@ export default function AddPodcast() {
<main className="max-w-5xl mx-auto">
{/* RSS Input Area */}
<div className="premium-glass p-8 rounded-[3rem] mb-12 relative overflow-hidden">
<div className="premium-glass p-8 rounded-[var(--radius-panel)] mb-12 relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-primary)]/5 blur-[50px]" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-6">
@@ -208,7 +208,7 @@ export default function AddPodcast() {
) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
{searchResults.podcasts.map((podcast) => (
<div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
<div key={podcast.id} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
<div className="relative aspect-[16/10] overflow-hidden">
{podcast.imageUrl ? (
<img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
@@ -249,7 +249,7 @@ export default function AddPodcast() {
))}
</div>
) : searchQuery.length >= 2 ? (
<div className="premium-glass p-20 rounded-[3rem] text-center max-w-lg mx-auto">
<div className="premium-glass p-20 rounded-[var(--radius-panel)] text-center max-w-lg mx-auto">
<Globe className="w-12 h-12 text-slate-700 mx-auto mb-6" />
<p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</p>
<p className="text-[var(--text-secondary)] text-xs">Vérifiez l'orthographe ou essayez un nom d'auteur.</p>
+2 -2
View File
@@ -104,7 +104,7 @@ export default function Dashboard() {
<main className="">
{/* Welcome Section / Hero */}
<div className="premium-glass rounded-[3rem] p-8 lg:p-12 mb-12 relative overflow-hidden group">
<div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 mb-12 relative overflow-hidden group">
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
<div className="relative z-10">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
@@ -205,7 +205,7 @@ export default function Dashboard() {
)}
</>
) : (
<div className="premium-glass p-16 rounded-[3rem] text-center max-w-2xl mx-auto border-dashed border-white/10">
<div className="premium-glass p-16 rounded-[var(--radius-panel)] text-center max-w-2xl mx-auto border-dashed border-white/10">
<div className="text-4xl mb-6 opacity-40">🧘</div>
<p className="text-white font-bold text-lg mb-2">Silence radio...</p>
<p className="text-slate-500 text-sm leading-relaxed mb-8">
+1 -1
View File
@@ -66,7 +66,7 @@ export default function Login() {
</div>
{/* Form Card */}
<div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl">
<div className="premium-glass p-8 lg:p-12 rounded-[var(--radius-panel)] shadow-2xl">
<div className="flex p-1.5 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] mb-10">
<button
onClick={() => { setIsLogin(true); setError(null); }}
+1 -1
View File
@@ -173,7 +173,7 @@ export default function Trending() {
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{podcasts.map((podcast, index) => (
<div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
<div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
<div className="relative aspect-[16/10] overflow-hidden">
{podcast.imageUrl ? (
<img