150 lines
No EOL
3.8 KiB
CSS
150 lines
No EOL
3.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--radius: var(--radius);
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Light Mode - Slate Refresh */
|
|
--background: #F8FAFC;
|
|
/* Slate-50 */
|
|
--foreground: #0F172A;
|
|
/* Slate-900 */
|
|
--card: #FFFFFF;
|
|
--card-foreground: #1E293B;
|
|
/* Slate-800 */
|
|
--popover: rgba(255, 255, 255, 0.8);
|
|
--popover-foreground: #0F172A;
|
|
--primary: #7C3AED;
|
|
/* Violet-600 */
|
|
--primary-foreground: #FFFFFF;
|
|
--secondary: #E2E8F0;
|
|
/* Slate-200 */
|
|
--secondary-foreground: #0F172A;
|
|
--muted: #F1F5F9;
|
|
/* Slate-100 */
|
|
--muted-foreground: #64748B;
|
|
/* Slate-500 */
|
|
--accent: #E2E8F0;
|
|
--accent-foreground: #0F172A;
|
|
--destructive: #EF4444;
|
|
--destructive-foreground: #FFFFFF;
|
|
--border: #E2E8F0;
|
|
/* Slate-200 */
|
|
--input: #F1F5F9;
|
|
--ring: rgba(124, 58, 237, 0.4);
|
|
--radius: 1.25rem;
|
|
/* Modern rounded corners (20px) */
|
|
|
|
/* Spacing & Effects */
|
|
--header-height: 4rem;
|
|
--nav-height: 5rem;
|
|
--shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
|
|
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Mode - Deep Navy Slate */
|
|
--background: #0F172A;
|
|
/* Slate-900 */
|
|
--foreground: #F8FAFC;
|
|
/* Slate-50 */
|
|
--card: #1E293B;
|
|
/* Slate-800 */
|
|
--card-foreground: #F1F5F9;
|
|
--popover: rgba(30, 41, 59, 0.8);
|
|
--popover-foreground: #F8FAFC;
|
|
--primary: #8B5CF6;
|
|
/* Violet-500 (brighter for dark) */
|
|
--primary-foreground: #FFFFFF;
|
|
--secondary: #334155;
|
|
/* Slate-700 */
|
|
--secondary-foreground: #F8FAFC;
|
|
--muted: #334155;
|
|
/* Slate-700 */
|
|
--muted-foreground: #94A3B8;
|
|
/* Slate-400 */
|
|
--accent: #334155;
|
|
--accent-foreground: #F8FAFC;
|
|
--destructive: #F87171;
|
|
--destructive-foreground: #FFFFFF;
|
|
--border: #334155;
|
|
/* Slate-700 */
|
|
--input: #0F172A;
|
|
--ring: rgba(139, 92, 246, 0.5);
|
|
|
|
--shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
--shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
|
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground transition-colors duration-300;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar - Minimal & Modern */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--muted);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
/* Utility Classes for Modern Look */
|
|
.glass-panel {
|
|
@apply bg-popover backdrop-blur-xl border border-white/10 dark:border-white/5;
|
|
}
|
|
|
|
.shadow-premium {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.shadow-premium-lg {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
} |