465 lines
14 KiB
CSS
465 lines
14 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@theme {
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-card: hsl(var(--card));
|
|
--color-card-foreground: hsl(var(--card-foreground));
|
|
--color-popover: hsl(var(--popover));
|
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
--color-primary: hsl(var(--primary));
|
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
--color-secondary: hsl(var(--secondary));
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
--color-muted: hsl(var(--muted));
|
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
--color-accent: hsl(var(--accent));
|
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
--color-destructive: hsl(var(--destructive));
|
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
--color-border: hsl(var(--border));
|
|
--color-input: hsl(var(--input));
|
|
--color-ring: hsl(var(--ring));
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
}
|
|
|
|
@layer base {
|
|
/* ========================================================================
|
|
THEME: Purple (Default) - Vibrant purple with teal & pink accents
|
|
======================================================================== */
|
|
:root,
|
|
.theme-purple {
|
|
--background: 270 50% 98%;
|
|
--foreground: 270 50% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 270 50% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 270 50% 10%;
|
|
--primary: 270 80% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 175 60% 45%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 270 30% 94%;
|
|
--muted-foreground: 270 20% 45%;
|
|
--accent: 330 80% 65%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 270 30% 88%;
|
|
--input: 270 30% 88%;
|
|
--ring: 270 80% 60%;
|
|
--radius: 1rem;
|
|
--theme-gradient: linear-gradient(135deg, hsl(270 80% 60%) 0%, hsl(330 85% 60%) 50%, hsl(175 70% 50%) 100%);
|
|
}
|
|
|
|
.dark.theme-purple,
|
|
.dark:not([class*="theme-"]) {
|
|
--background: 270 40% 8%;
|
|
--foreground: 270 20% 95%;
|
|
--card: 270 40% 12%;
|
|
--card-foreground: 270 20% 95%;
|
|
--popover: 270 40% 12%;
|
|
--popover-foreground: 270 20% 95%;
|
|
--primary: 270 80% 65%;
|
|
--primary-foreground: 270 40% 8%;
|
|
--secondary: 175 70% 50%;
|
|
--secondary-foreground: 270 40% 8%;
|
|
--muted: 270 30% 18%;
|
|
--muted-foreground: 270 15% 65%;
|
|
--accent: 330 85% 60%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 270 30% 22%;
|
|
--input: 270 30% 22%;
|
|
--ring: 270 80% 65%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
THEME: Ocean - Deep blues with cyan accents
|
|
======================================================================== */
|
|
.theme-ocean {
|
|
--background: 210 50% 98%;
|
|
--foreground: 210 50% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 210 50% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 210 50% 10%;
|
|
--primary: 210 90% 55%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 185 80% 45%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 210 30% 94%;
|
|
--muted-foreground: 210 20% 45%;
|
|
--accent: 195 85% 50%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 210 30% 88%;
|
|
--input: 210 30% 88%;
|
|
--ring: 210 90% 55%;
|
|
--theme-gradient: linear-gradient(135deg, hsl(210 90% 55%) 0%, hsl(185 80% 45%) 50%, hsl(195 85% 50%) 100%);
|
|
}
|
|
|
|
.dark.theme-ocean {
|
|
--background: 210 50% 6%;
|
|
--foreground: 210 20% 95%;
|
|
--card: 210 45% 10%;
|
|
--card-foreground: 210 20% 95%;
|
|
--popover: 210 45% 10%;
|
|
--popover-foreground: 210 20% 95%;
|
|
--primary: 210 85% 60%;
|
|
--primary-foreground: 210 50% 6%;
|
|
--secondary: 185 75% 50%;
|
|
--secondary-foreground: 210 50% 6%;
|
|
--muted: 210 35% 16%;
|
|
--muted-foreground: 210 15% 65%;
|
|
--accent: 195 80% 55%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 210 35% 20%;
|
|
--input: 210 35% 20%;
|
|
--ring: 210 85% 60%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
THEME: Sunset - Warm oranges and reds
|
|
======================================================================== */
|
|
.theme-sunset {
|
|
--background: 30 50% 98%;
|
|
--foreground: 20 50% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 20 50% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 20 50% 10%;
|
|
--primary: 25 95% 55%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 350 80% 55%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 30 30% 94%;
|
|
--muted-foreground: 20 20% 45%;
|
|
--accent: 45 90% 55%;
|
|
--accent-foreground: 20 50% 10%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 30 30% 88%;
|
|
--input: 30 30% 88%;
|
|
--ring: 25 95% 55%;
|
|
--theme-gradient: linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(350 80% 55%) 50%, hsl(45 90% 55%) 100%);
|
|
}
|
|
|
|
.dark.theme-sunset {
|
|
--background: 20 40% 7%;
|
|
--foreground: 30 20% 95%;
|
|
--card: 20 40% 11%;
|
|
--card-foreground: 30 20% 95%;
|
|
--popover: 20 40% 11%;
|
|
--popover-foreground: 30 20% 95%;
|
|
--primary: 25 90% 58%;
|
|
--primary-foreground: 20 40% 7%;
|
|
--secondary: 350 75% 58%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 20 30% 16%;
|
|
--muted-foreground: 30 15% 65%;
|
|
--accent: 45 85% 58%;
|
|
--accent-foreground: 20 50% 10%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 20 30% 20%;
|
|
--input: 20 30% 20%;
|
|
--ring: 25 90% 58%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
THEME: Forest - Earthy greens with warm accents
|
|
======================================================================== */
|
|
.theme-forest {
|
|
--background: 140 30% 97%;
|
|
--foreground: 140 40% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 140 40% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 140 40% 10%;
|
|
--primary: 145 70% 40%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 85 55% 45%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 140 20% 93%;
|
|
--muted-foreground: 140 15% 40%;
|
|
--accent: 35 80% 50%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 140 20% 87%;
|
|
--input: 140 20% 87%;
|
|
--ring: 145 70% 40%;
|
|
--theme-gradient: linear-gradient(135deg, hsl(145 70% 40%) 0%, hsl(85 55% 45%) 50%, hsl(35 80% 50%) 100%);
|
|
}
|
|
|
|
.dark.theme-forest {
|
|
--background: 140 35% 7%;
|
|
--foreground: 140 15% 95%;
|
|
--card: 140 35% 11%;
|
|
--card-foreground: 140 15% 95%;
|
|
--popover: 140 35% 11%;
|
|
--popover-foreground: 140 15% 95%;
|
|
--primary: 145 65% 45%;
|
|
--primary-foreground: 140 35% 7%;
|
|
--secondary: 85 50% 50%;
|
|
--secondary-foreground: 140 35% 7%;
|
|
--muted: 140 25% 16%;
|
|
--muted-foreground: 140 10% 65%;
|
|
--accent: 35 75% 55%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 140 25% 20%;
|
|
--input: 140 25% 20%;
|
|
--ring: 145 65% 45%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
THEME: Rose - Soft pinks with elegant accents
|
|
======================================================================== */
|
|
.theme-rose {
|
|
--background: 350 50% 98%;
|
|
--foreground: 350 40% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 350 40% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 350 40% 10%;
|
|
--primary: 350 80% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 320 70% 55%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 350 25% 94%;
|
|
--muted-foreground: 350 20% 45%;
|
|
--accent: 15 85% 60%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 350 25% 88%;
|
|
--input: 350 25% 88%;
|
|
--ring: 350 80% 60%;
|
|
--theme-gradient: linear-gradient(135deg, hsl(350 80% 60%) 0%, hsl(320 70% 55%) 50%, hsl(15 85% 60%) 100%);
|
|
}
|
|
|
|
.dark.theme-rose {
|
|
--background: 350 35% 7%;
|
|
--foreground: 350 15% 95%;
|
|
--card: 350 35% 11%;
|
|
--card-foreground: 350 15% 95%;
|
|
--popover: 350 35% 11%;
|
|
--popover-foreground: 350 15% 95%;
|
|
--primary: 350 75% 62%;
|
|
--primary-foreground: 350 35% 7%;
|
|
--secondary: 320 65% 58%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 350 25% 16%;
|
|
--muted-foreground: 350 12% 65%;
|
|
--accent: 15 80% 62%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 350 25% 20%;
|
|
--input: 350 25% 20%;
|
|
--ring: 350 75% 62%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
THEME: Slate - Minimal and professional
|
|
======================================================================== */
|
|
.theme-slate {
|
|
--background: 0 0% 98%;
|
|
--foreground: 220 15% 15%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 220 15% 15%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 220 15% 15%;
|
|
--primary: 220 15% 25%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 10% 50%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 220 10% 94%;
|
|
--muted-foreground: 220 10% 45%;
|
|
--accent: 220 15% 35%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 75% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 10% 88%;
|
|
--input: 220 10% 88%;
|
|
--ring: 220 15% 25%;
|
|
--theme-gradient: linear-gradient(135deg, hsl(220 15% 25%) 0%, hsl(220 10% 50%) 50%, hsl(220 15% 35%) 100%);
|
|
}
|
|
|
|
.dark.theme-slate {
|
|
--background: 220 20% 6%;
|
|
--foreground: 220 10% 95%;
|
|
--card: 220 18% 10%;
|
|
--card-foreground: 220 10% 95%;
|
|
--popover: 220 18% 10%;
|
|
--popover-foreground: 220 10% 95%;
|
|
--primary: 220 12% 70%;
|
|
--primary-foreground: 220 20% 6%;
|
|
--secondary: 220 10% 55%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 220 15% 15%;
|
|
--muted-foreground: 220 8% 60%;
|
|
--accent: 220 12% 45%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 15% 18%;
|
|
--input: 220 15% 18%;
|
|
--ring: 220 12% 70%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
|
|
.container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
max-width: 1400px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Animated gradient background - uses theme gradient */
|
|
.gradient-bg {
|
|
background: linear-gradient(
|
|
135deg,
|
|
hsl(var(--primary) / 0.08) 0%,
|
|
hsl(var(--secondary) / 0.08) 50%,
|
|
hsl(var(--accent) / 0.08) 100%
|
|
);
|
|
animation: gradient-shift 8s ease infinite;
|
|
background-size: 200% 200%;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Card hover effects */
|
|
.card-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
box-shadow: 0 20px 40px -12px hsl(var(--primary) / 0.25);
|
|
}
|
|
|
|
/* Glassmorphism card */
|
|
.glass-card {
|
|
background: hsl(var(--card) / 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
/* Gradient text - uses theme colors */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 50%, hsl(var(--secondary)) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Glow effects - use theme primary */
|
|
.glow-primary {
|
|
box-shadow: 0 0 20px hsl(var(--primary) / 0.3), 0 0 40px hsl(var(--primary) / 0.1);
|
|
}
|
|
|
|
.glow-secondary {
|
|
box-shadow: 0 0 20px hsl(var(--secondary) / 0.3), 0 0 40px hsl(var(--secondary) / 0.1);
|
|
}
|
|
|
|
.glow-accent {
|
|
box-shadow: 0 0 20px hsl(var(--accent) / 0.3), 0 0 40px hsl(var(--accent) / 0.1);
|
|
}
|
|
|
|
/* Item row hover */
|
|
.item-row {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.item-row:hover {
|
|
background: hsl(var(--muted) / 0.8);
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge-success {
|
|
background: linear-gradient(135deg, hsl(160 80% 40% / 0.2) 0%, hsl(175 70% 50% / 0.2) 100%);
|
|
color: hsl(160 80% 40%);
|
|
border: 1px solid hsl(160 80% 40% / 0.3);
|
|
}
|
|
|
|
.dark .badge-success {
|
|
background: linear-gradient(135deg, hsl(160 70% 45% / 0.2) 0%, hsl(175 70% 50% / 0.2) 100%);
|
|
color: hsl(160 70% 65%);
|
|
}
|
|
|
|
.badge-warning {
|
|
background: linear-gradient(135deg, hsl(45 90% 50% / 0.2) 0%, hsl(35 90% 55% / 0.2) 100%);
|
|
color: hsl(35 90% 40%);
|
|
border: 1px solid hsl(45 90% 50% / 0.3);
|
|
}
|
|
|
|
.dark .badge-warning {
|
|
background: linear-gradient(135deg, hsl(45 90% 50% / 0.2) 0%, hsl(35 90% 55% / 0.2) 100%);
|
|
color: hsl(45 90% 65%);
|
|
}
|
|
|
|
/* Pulse animation for loader */
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.5)); }
|
|
50% { opacity: 0.7; filter: drop-shadow(0 0 16px hsl(var(--primary) / 0.8)); }
|
|
}
|
|
|
|
/* Theme picker swatch */
|
|
.theme-swatch {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-swatch:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.theme-swatch.active {
|
|
border-color: hsl(var(--foreground));
|
|
box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--foreground) / 0.3);
|
|
}
|
|
|
|
@keyframes accordion-down {
|
|
from { height: 0; }
|
|
to { height: var(--radix-accordion-content-height); }
|
|
}
|
|
|
|
@keyframes accordion-up {
|
|
from { height: var(--radix-accordion-content-height); }
|
|
to { height: 0; }
|
|
} |