init: initial commit
This commit is contained in:
Blizzard
+146
@@ -0,0 +1,146 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--color-background: oklch(0.98 0.01 145);
|
||||
--color-foreground: oklch(0.15 0.02 145);
|
||||
--color-card: oklch(1 0 0);
|
||||
--color-card-foreground: oklch(0.15 0.02 145);
|
||||
--color-popover: oklch(1 0 0);
|
||||
--color-popover-foreground: oklch(0.15 0.02 145);
|
||||
--color-primary: oklch(0.55 0.12 145);
|
||||
--color-primary-foreground: oklch(1 0 0);
|
||||
--color-secondary: oklch(0.96 0.01 145);
|
||||
--color-secondary-foreground: oklch(0.35 0.08 145);
|
||||
--color-muted: oklch(0.96 0.01 145);
|
||||
--color-muted-foreground: oklch(0.55 0.02 145);
|
||||
--color-accent: oklch(0.96 0.01 145);
|
||||
--color-accent-foreground: oklch(0.35 0.08 145);
|
||||
--color-destructive: oklch(0.58 0.18 25);
|
||||
--color-destructive-foreground: oklch(1 0 0);
|
||||
--color-border: oklch(0.92 0.01 145);
|
||||
--color-input: oklch(0.92 0.01 145);
|
||||
--color-ring: oklch(0.55 0.12 145);
|
||||
|
||||
--color-sidebar-background: oklch(0.985 0.005 100 / 0.8);
|
||||
--color-sidebar-foreground: oklch(0.30 0.02 140);
|
||||
--color-sidebar-primary: oklch(0.55 0.12 145);
|
||||
--color-sidebar-primary-foreground: oklch(0.99 0 0);
|
||||
--color-sidebar-accent: oklch(0.95 0.02 135);
|
||||
--color-sidebar-accent-foreground: oklch(0.35 0.08 145);
|
||||
--color-sidebar-border: oklch(0.90 0.01 110 / 0.3);
|
||||
--color-sidebar-ring: oklch(0.55 0.12 145);
|
||||
|
||||
--radius-lg: 1.5rem;
|
||||
--radius-md: 1rem;
|
||||
--radius-sm: 0.6rem;
|
||||
|
||||
--shadow-soft: 0 4px 20px -2px oklch(0 0 0 / 0.05), 0 0 3px oklch(0 0 0 / 0.02);
|
||||
--shadow-soft-lg: 0 10px 40px -4px oklch(0 0 0 / 0.08), 0 0 4px oklch(0 0 0 / 0.03);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--color-background: oklch(0.18 0.02 145);
|
||||
--color-foreground: oklch(0.96 0.01 130);
|
||||
--color-card: oklch(0.22 0.02 145);
|
||||
--color-card-foreground: oklch(0.96 0.01 130);
|
||||
--color-popover: oklch(0.22 0.02 145);
|
||||
--color-popover-foreground: oklch(0.96 0.01 130);
|
||||
--color-primary: oklch(0.65 0.15 145);
|
||||
--color-primary-foreground: oklch(0.12 0.02 145);
|
||||
--color-secondary: oklch(0.28 0.03 145);
|
||||
--color-secondary-foreground: oklch(0.92 0.02 145);
|
||||
--color-muted: oklch(0.25 0.02 145);
|
||||
--color-muted-foreground: oklch(0.70 0.02 145);
|
||||
--color-accent: oklch(0.28 0.03 145);
|
||||
--color-accent-foreground: oklch(0.92 0.02 145);
|
||||
--color-destructive: oklch(0.58 0.18 25);
|
||||
--color-destructive-foreground: oklch(0.99 0 0);
|
||||
--color-border: oklch(0.32 0.03 145);
|
||||
--color-input: oklch(0.32 0.03 145);
|
||||
--color-ring: oklch(0.65 0.15 145);
|
||||
|
||||
--color-sidebar-background: oklch(0.16 0.02 145 / 0.8);
|
||||
--color-sidebar-foreground: oklch(0.85 0.02 145);
|
||||
--color-sidebar-primary: oklch(0.65 0.15 145);
|
||||
--color-sidebar-primary-foreground: oklch(0.12 0.02 145);
|
||||
--color-sidebar-accent: oklch(0.28 0.03 145);
|
||||
--color-sidebar-accent-foreground: oklch(0.92 0.02 145);
|
||||
--color-sidebar-border: oklch(0.32 0.03 145 / 0.3);
|
||||
--color-sidebar-ring: oklch(0.65 0.15 145);
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
font-feature-settings: "cv11", "ss01", "ss03";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.015em;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 145 / 0.05), transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 170 / 0.06), transparent 25%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
:root.dark body {
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 145 / 0.15), transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 170 / 0.15), transparent 25%);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: oklch(0.75 0 0 / 0.3); border-radius: 999px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: oklch(0.6 0 0 / 0.5); }
|
||||
|
||||
/* Focus */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.animate-fadeIn { animation: fadeIn 0.2s ease-out; }
|
||||
.animate-slideIn { animation: slideIn 0.2s ease-out; }
|
||||
.animate-fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
||||
|
||||
/* Card & Table enhancements */
|
||||
.card-hover { @apply transition-all duration-200; }
|
||||
.card-hover:hover { @apply shadow-md; transform: translateY(-1px); }
|
||||
tr { @apply transition-colors duration-150; }
|
||||
button { @apply transition-all duration-150; }
|
||||
button:active:not(:disabled) { transform: scale(0.97); }
|
||||
input:focus, textarea:focus, select:focus { @apply transition-shadow duration-150; }
|
||||
|
||||
/* Status colors */
|
||||
.status-success { @apply bg-emerald-500/10 text-emerald-600; }
|
||||
.status-warning { @apply bg-amber-500/10 text-amber-600; }
|
||||
.status-error { @apply bg-red-500/10 text-red-600; }
|
||||
.status-info { @apply bg-blue-500/10 text-blue-600; }
|
||||
|
||||
/* Gradients */
|
||||
.gradient-primary { background: linear-gradient(135deg, oklch(0.52 0.14 150), oklch(0.58 0.12 160)); }
|
||||
|
||||
/* Glassmorphism */
|
||||
.glass-panel { @apply bg-background/60 backdrop-blur-2xl border-white/40 dark:border-white/10 shadow-soft; }
|
||||
.glass-card { @apply bg-card/80 backdrop-blur-xl border border-white/60 dark:border-white/10 shadow-soft transition-all duration-300; }
|
||||
.glass-card:hover { @apply shadow-soft-lg -translate-y-1 bg-card/90 border-white/80 dark:border-white/20; }
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton { @apply bg-muted animate-pulse rounded;
|
||||
}
|
||||
Reference in New Issue
Block a user