194 lines
4.6 KiB
CSS
194 lines
4.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
/* Font variables - will be overridden by Next.js Font */
|
|
--font-orbitron: "Orbitron", sans-serif;
|
|
--font-rajdhani: "Rajdhani", sans-serif;
|
|
|
|
/* Dark cyan theme (default) */
|
|
--background: #001d2e;
|
|
--foreground: #ffffff;
|
|
--card: rgba(0, 29, 46, 0.6);
|
|
--card-hover: rgba(0, 29, 46, 0.8);
|
|
--card-column: rgba(0, 29, 46, 0.8);
|
|
--border: rgba(29, 254, 228, 0.3);
|
|
--input: rgba(0, 29, 46, 0.6);
|
|
--primary: #1dfee4;
|
|
--primary-foreground: #001d2e;
|
|
--muted: #9ca3af;
|
|
--muted-foreground: #9ca3af;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
--accent: #1dfee4;
|
|
--destructive: #ef4444;
|
|
--success: #10b981;
|
|
--purple: #8b5cf6;
|
|
--yellow: #eab308;
|
|
--green: #10b981;
|
|
--blue: #3b82f6;
|
|
--pixel-gold: #1dfee4;
|
|
--accent-color: #1dfee4;
|
|
}
|
|
|
|
.dark {
|
|
/* Dark gold theme (original) */
|
|
--background: #000000;
|
|
--foreground: #ffffff;
|
|
--card: rgba(0, 0, 0, 0.6);
|
|
--card-hover: rgba(0, 0, 0, 0.8);
|
|
--card-column: rgba(0, 0, 0, 0.8);
|
|
--border: rgba(218, 165, 32, 0.3);
|
|
--input: rgba(0, 0, 0, 0.6);
|
|
--primary: #06b6d4;
|
|
--primary-foreground: #ffffff;
|
|
--muted: #9ca3af;
|
|
--muted-foreground: #9ca3af;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
--accent: #ff8c00;
|
|
--destructive: #ef4444;
|
|
--success: #10b981;
|
|
--purple: #8b5cf6;
|
|
--yellow: #eab308;
|
|
--green: #10b981;
|
|
--blue: #3b82f6;
|
|
--pixel-gold: #daa520;
|
|
--accent-color: #daa520;
|
|
}
|
|
|
|
.dark-cyan {
|
|
/* Dark cyan theme (new) */
|
|
--background: #001d2e;
|
|
--foreground: #ffffff;
|
|
--card: rgba(0, 29, 46, 0.6);
|
|
--card-hover: rgba(0, 29, 46, 0.8);
|
|
--card-column: rgba(0, 29, 46, 0.8);
|
|
--border: rgba(29, 254, 228, 0.3);
|
|
--input: rgba(0, 29, 46, 0.6);
|
|
--primary: #1dfee4;
|
|
--primary-foreground: #001d2e;
|
|
--muted: #9ca3af;
|
|
--muted-foreground: #9ca3af;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
--accent: #1dfee4;
|
|
--destructive: #ef4444;
|
|
--success: #10b981;
|
|
--purple: #8b5cf6;
|
|
--yellow: #eab308;
|
|
--green: #10b981;
|
|
--blue: #3b82f6;
|
|
--pixel-gold: #1dfee4;
|
|
--accent-color: #1dfee4;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
|
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.pixel-border {
|
|
border: 2px solid;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
.text-pixel {
|
|
font-family: "Courier New", monospace;
|
|
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.title-animated {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
/* Button hover states using CSS variables */
|
|
.btn-primary {
|
|
border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
|
|
background-color: color-mix(in srgb, var(--background) 60%, transparent);
|
|
color: var(--foreground);
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
border-color: var(--accent-color);
|
|
background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
|
|
}
|
|
|
|
.btn-secondary {
|
|
border-color: rgba(107, 114, 128, 0.5);
|
|
background-color: rgba(31, 41, 55, 0.2);
|
|
color: var(--gray-400);
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
border-color: var(--gray-500);
|
|
background-color: rgba(31, 41, 55, 0.3);
|
|
}
|
|
|
|
.btn-success {
|
|
border-color: rgba(16, 185, 129, 0.5);
|
|
background-color: rgba(16, 185, 129, 0.2);
|
|
color: var(--success);
|
|
}
|
|
.btn-success:hover:not(:disabled) {
|
|
background-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.btn-danger {
|
|
border-color: rgba(239, 68, 68, 0.5);
|
|
background-color: rgba(239, 68, 68, 0.2);
|
|
color: var(--destructive);
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
background-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.btn-ghost {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: var(--foreground);
|
|
}
|
|
.btn-ghost:hover:not(:disabled) {
|
|
color: var(--accent-color);
|
|
}
|
|
}
|