/* CC Admin Vivid Theme - Applies DARK styles only when the app is in dark mode. - Applies LIGHT styles only when the app is in light mode. */ /* ---------- LIGHT MODE ---------- */ /* Filament uses classes on for theme. We target the common patterns: - html:not(.dark) - html.fi-theme-light (some setups) */ html:not(.dark) { --cc-border: rgba(15, 23, 42, .10); --cc-card: rgba(255, 255, 255, .92); --cc-card-2: rgba(248, 250, 252, .92); --cc-shadow: 0 12px 30px rgba(2, 6, 23, .08); --cc-shadow-hover: 0 16px 38px rgba(2, 6, 23, .12); --cc-glow: 0 0 0 1px rgba(245, 158, 11, .14), 0 18px 50px rgba(2, 6, 23, .10); } /* Background */ html:not(.dark) .fi-body, html:not(.dark) .fi-main, html:not(.dark) .fi-layout { background: radial-gradient(1100px 800px at 20% 0%, rgba(245, 158, 11, .12), transparent 55%), radial-gradient(900px 700px at 95% 10%, rgba(56, 189, 248, .12), transparent 60%), radial-gradient(900px 700px at 35% 95%, rgba(16, 185, 129, .10), transparent 60%), #f8fafc !important; } /* Sidebar */ html:not(.dark) .fi-sidebar { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)) !important; border-right: 1px solid var(--cc-border) !important; } html:not(.dark) .fi-sidebar .fi-sidebar-item a { border-radius: 12px !important; } html:not(.dark) .fi-sidebar .fi-sidebar-item a:hover { background: rgba(245, 158, 11, .10) !important; } /* Topbar */ html:not(.dark) .fi-topbar { backdrop-filter: blur(10px); background: rgba(255, 255, 255, .70) !important; border-bottom: 1px solid var(--cc-border) !important; } /* Cards / Widgets */ html:not(.dark) .fi-wi, html:not(.dark) .fi-section, html:not(.dark) .fi-card, html:not(.dark) .fi-widget { border: 1px solid var(--cc-border) !important; border-radius: 18px !important; background: var(--cc-card) !important; box-shadow: var(--cc-shadow) !important; } html:not(.dark) .fi-wi:hover, html:not(.dark) .fi-section:hover, html:not(.dark) .fi-card:hover, html:not(.dark) .fi-widget:hover { transform: translateY(-1px); box-shadow: var(--cc-glow) !important; border-color: rgba(245, 158, 11, .28) !important; transition: all .16s ease; } /* Tables */ html:not(.dark) .fi-ta, html:not(.dark) .fi-ta-content { border-radius: 16px !important; } html:not(.dark) .fi-ta-header, html:not(.dark) .fi-ta-row { border-color: rgba(15,23,42,.10) !important; } /* Buttons */ html:not(.dark) .fi-btn { border-radius: 14px !important; } html:not(.dark) .fi-btn.fi-color-primary { box-shadow: 0 10px 28px rgba(245, 158, 11, .18) !important; } /* Badges */ html:not(.dark) .fi-badge { border-radius: 999px !important; border: 1px solid rgba(15,23,42,.10) !important; } /* ---------- DARK MODE ---------- */ html.dark { --cc-glow: 0 0 0 1px rgba(255, 193, 7, .18), 0 18px 50px rgba(0, 0, 0, .45); --cc-border: rgba(148, 163, 184, .18); } /* Background */ html.dark .fi-body, html.dark .fi-main, html.dark .fi-layout { background: radial-gradient(1200px 800px at 20% 0%, rgba(255,193,7,.08), transparent 55%), radial-gradient(900px 700px at 90% 20%, rgba(56,189,248,.08), transparent 60%), radial-gradient(900px 700px at 40% 90%, rgba(16,185,129,.06), transparent 60%), rgba(2, 6, 23, 1) !important; } /* Sidebar */ html.dark .fi-sidebar { background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.95)) !important; border-right: 1px solid var(--cc-border) !important; } html.dark .fi-sidebar .fi-sidebar-item a { border-radius: 12px !important; } html.dark .fi-sidebar .fi-sidebar-item a:hover { background: rgba(255, 193, 7, .08) !important; } /* Topbar */ html.dark .fi-topbar { backdrop-filter: blur(10px); background: rgba(2, 6, 23, .55) !important; border-bottom: 1px solid var(--cc-border) !important; } /* Cards / Widgets */ html.dark .fi-wi, html.dark .fi-section, html.dark .fi-card, html.dark .fi-widget { border: 1px solid var(--cc-border) !important; border-radius: 18px !important; background: rgba(15, 23, 42, .72) !important; box-shadow: 0 12px 40px rgba(0,0,0,.35) !important; } html.dark .fi-wi:hover, html.dark .fi-section:hover, html.dark .fi-card:hover, html.dark .fi-widget:hover { transform: translateY(-1px); box-shadow: var(--cc-glow) !important; border-color: rgba(255, 193, 7, .28) !important; transition: all .16s ease; } /* Tables */ html.dark .fi-ta, html.dark .fi-ta-content { border-radius: 16px !important; } html.dark .fi-ta-header, html.dark .fi-ta-row { border-color: rgba(148,163,184,.14) !important; } /* Buttons */ html.dark .fi-btn { border-radius: 14px !important; } html.dark .fi-btn.fi-color-primary { box-shadow: 0 10px 28px rgba(255, 193, 7, .18) !important; } /* Badges */ html.dark .fi-badge { border-radius: 999px !important; border: 1px solid rgba(148,163,184,.18) !important; }