249 lines
7.2 KiB
CSS
249 lines
7.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 98%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
|
|
--primary: 221.2 83.2% 53.3%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--success: 142.1 76.2% 36.3%;
|
|
--success-foreground: 355.7 100% 97.3%;
|
|
|
|
--warning: 37.7 93.1% 50.2%;
|
|
--warning-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--info: 199.4 86.4% 48.4%;
|
|
--info-foreground: 210 40% 98%;
|
|
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 221.2 83.2% 53.3%;
|
|
|
|
--radius: 0.625rem;
|
|
|
|
--sidebar-background: 222.2 47.4% 7.8%;
|
|
--sidebar-foreground: 210 40% 98%;
|
|
--sidebar-primary: 221.2 83.2% 53.3%;
|
|
--sidebar-primary-foreground: 210 40% 98%;
|
|
--sidebar-accent: 217.2 32.6% 17.5%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 217.2 32.6% 17.5%;
|
|
--sidebar-ring: 217.2 91.6% 59.8%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
|
|
--card: 222.2 47.4% 10.2%;
|
|
--card-foreground: 210 40% 98%;
|
|
|
|
--popover: 222.2 47.4% 10.2%;
|
|
--popover-foreground: 210 40% 98%;
|
|
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--success: 142.1 76.2% 36.3%;
|
|
--success-foreground: 355.7 100% 97.3%;
|
|
|
|
--warning: 37.7 93.1% 50.2%;
|
|
--warning-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--info: 199.4 86.4% 48.4%;
|
|
--info-foreground: 210 40% 98%;
|
|
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 224.3 76.3% 48%;
|
|
|
|
--sidebar-background: 222.2 47.4% 7.8%;
|
|
--sidebar-foreground: 210 40% 98%;
|
|
--sidebar-primary: 217.2 91.2% 59.8%;
|
|
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
|
--sidebar-accent: 217.2 32.6% 17.5%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 217.2 32.6% 17.5%;
|
|
--sidebar-ring: 217.2 91.6% 59.8%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.gradient-mesh {
|
|
background:
|
|
radial-gradient(
|
|
at 40% 20%,
|
|
hsla(221, 83%, 53%, 0.1) 0px,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(at 80% 0%, hsla(189, 97%, 66%, 0.1) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 0.3) 0px, transparent 50%),
|
|
radial-gradient(
|
|
at 80% 50%,
|
|
hsla(240, 75%, 98%, 0.3) 0px,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(at 0% 100%, hsla(22, 100%, 92%, 0.2) 0px, transparent 50%);
|
|
}
|
|
|
|
.glass {
|
|
@apply backdrop-blur-xl bg-white/70 dark:bg-black/70;
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.5s ease-out forwards;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.stagger-1 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
.stagger-2 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.stagger-3 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.stagger-4 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
.stagger-5 {
|
|
animation-delay: 0.5s;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:bg-primary/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-200 hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-muted-foreground transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground shadow-sm transition-all duration-200 hover:bg-destructive/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.card-modern {
|
|
@apply rounded-xl border border-border/50 bg-card p-6 shadow-sm transition-all duration-200 hover:shadow-md;
|
|
}
|
|
|
|
.card-elevated {
|
|
@apply rounded-xl border border-border/50 bg-card p-6 shadow-lg transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5;
|
|
}
|
|
|
|
.input-modern {
|
|
@apply flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
|
|
}
|
|
|
|
.badge-default {
|
|
@apply inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-300;
|
|
}
|
|
}
|