106 lines
1.8 KiB
CSS
106 lines
1.8 KiB
CSS
|
@import "tailwindcss";
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--background: #0a0a12;
|
||
|
|
--foreground: #ededed;
|
||
|
|
--accent: #00d4ff;
|
||
|
|
--accent-secondary: #7c3aed;
|
||
|
|
--accent-dim: #0099cc;
|
||
|
|
--card-bg: #12121a;
|
||
|
|
--card-border: #1e1e2e;
|
||
|
|
--success: #22c55e;
|
||
|
|
--warning: #f59e0b;
|
||
|
|
--danger: #ef4444;
|
||
|
|
}
|
||
|
|
|
||
|
|
@theme inline {
|
||
|
|
--color-background: var(--background);
|
||
|
|
--color-foreground: var(--foreground);
|
||
|
|
--font-sans: var(--font-geist-sans);
|
||
|
|
--font-mono: var(--font-geist-mono);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: var(--background);
|
||
|
|
color: var(--foreground);
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Custom scrollbar */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: var(--card-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--card-border);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #2a2a3a;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animations */
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-glow {
|
||
|
|
0%, 100% {
|
||
|
|
box-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-fadeIn {
|
||
|
|
animation: fadeIn 0.3s ease-out forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-pulse-glow {
|
||
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-spin {
|
||
|
|
animation: spin 1s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Gradient text */
|
||
|
|
.gradient-text {
|
||
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Glow effects */
|
||
|
|
.glow-accent {
|
||
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-purple {
|
||
|
|
box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
|
||
|
|
}
|