130 lines
2.8 KiB
CSS
130 lines
2.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
|
|
--radius-xl: 0.75rem;
|
|
--radius-2xl: 1rem;
|
|
}
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
--border: #e5e5e5;
|
|
--input: #e5e5e5;
|
|
--ring: #171717;
|
|
|
|
--primary: #171717;
|
|
--primary-foreground: #fafafa;
|
|
--secondary: #f5f5f5;
|
|
--secondary-foreground: #171717;
|
|
--accent: #f5f5f5;
|
|
--accent-foreground: #171717;
|
|
--muted: #f5f5f5;
|
|
--muted-foreground: #737373;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
--border: #1f1f1f;
|
|
--input: #1f1f1f;
|
|
--ring: #D1FF4D;
|
|
|
|
--primary: #D1FF4D;
|
|
--primary-foreground: #0a0a0a;
|
|
--secondary: #171717;
|
|
--secondary-foreground: #ededed;
|
|
--accent: #00F0FF;
|
|
--accent-foreground: #0a0a0a;
|
|
--muted: #171717;
|
|
--muted-foreground: #a3a3a3;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
|
@apply antialiased selection:bg-primary/20;
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.bg-grid {
|
|
background-size: 40px 40px;
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
}
|
|
|
|
.animate-gradient {
|
|
background-size: 200% auto;
|
|
animation: gradient-shift 4s linear infinite;
|
|
}
|
|
|
|
.animate-marquee {
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
|
|
.animate-shine {
|
|
animation: shine 3s infinite linear;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0%); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% { transform: translateX(-100%) skewX(-15deg); }
|
|
30% { transform: translateX(200%) skewX(-15deg); }
|
|
100% { transform: translateX(200%) skewX(-15deg); }
|
|
}
|
|
|
|
/* Custom Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted-foreground);
|
|
}
|