mirror of
https://github.com/exo-explore/exo.git
synced 2025-12-23 14:17:58 -05:00
323 lines
6.9 KiB
CSS
323 lines
6.9 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
/* EXO Brand Colors - Command Center Theme (neutral dark greys) */
|
|
--exo-black: oklch(0.12 0 0);
|
|
--exo-dark-gray: oklch(0.16 0 0);
|
|
--exo-medium-gray: oklch(0.22 0 0);
|
|
--exo-light-gray: oklch(0.6 0 0);
|
|
--exo-yellow: oklch(0.85 0.18 85);
|
|
--exo-yellow-darker: oklch(0.7 0.16 85);
|
|
--exo-yellow-glow: oklch(0.9 0.2 85);
|
|
|
|
/* Gotham-inspired accent colors */
|
|
--exo-grid: oklch(0.25 0 0);
|
|
--exo-scanline: oklch(0.15 0 0);
|
|
--exo-glow-yellow: 0 0 20px oklch(0.85 0.18 85 / 0.3);
|
|
--exo-glow-yellow-strong: 0 0 40px oklch(0.85 0.18 85 / 0.5);
|
|
|
|
/* Theme Variables */
|
|
--radius: 0.375rem;
|
|
--background: var(--exo-black);
|
|
--foreground: oklch(0.9 0 0);
|
|
--card: var(--exo-dark-gray);
|
|
--card-foreground: oklch(0.9 0 0);
|
|
--popover: var(--exo-dark-gray);
|
|
--popover-foreground: oklch(0.9 0 0);
|
|
--primary: var(--exo-yellow);
|
|
--primary-foreground: var(--exo-black);
|
|
--secondary: var(--exo-medium-gray);
|
|
--secondary-foreground: oklch(0.9 0 0);
|
|
--muted: var(--exo-medium-gray);
|
|
--muted-foreground: var(--exo-light-gray);
|
|
--accent: var(--exo-medium-gray);
|
|
--accent-foreground: oklch(0.9 0 0);
|
|
--destructive: oklch(0.6 0.25 25);
|
|
--border: oklch(0.22 0 0);
|
|
--input: oklch(0.22 0 0);
|
|
--ring: var(--exo-yellow);
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 2px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
|
|
/* Custom EXO colors */
|
|
--color-exo-yellow: var(--exo-yellow);
|
|
--color-exo-yellow-darker: var(--exo-yellow-darker);
|
|
--color-exo-black: var(--exo-black);
|
|
--color-exo-dark-gray: var(--exo-dark-gray);
|
|
--color-exo-medium-gray: var(--exo-medium-gray);
|
|
--color-exo-light-gray: var(--exo-light-gray);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
html, body {
|
|
@apply bg-background text-foreground;
|
|
font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* CRT Scanline effect */
|
|
.scanlines {
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
oklch(0 0 0 / 0.03) 2px,
|
|
oklch(0 0 0 / 0.03) 4px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
/* Command panel styling */
|
|
.command-panel {
|
|
background: linear-gradient(
|
|
180deg,
|
|
oklch(0.16 0 0 / 0.95) 0%,
|
|
oklch(0.12 0 0 / 0.98) 100%
|
|
);
|
|
border: 1px solid oklch(0.25 0 0);
|
|
box-shadow:
|
|
inset 0 1px 0 oklch(1 0 0 / 0.03),
|
|
0 4px 20px oklch(0 0 0 / 0.5);
|
|
}
|
|
|
|
/* Glow text */
|
|
.glow-text {
|
|
text-shadow:
|
|
0 0 10px oklch(0.85 0.18 85 / 0.5),
|
|
0 0 20px oklch(0.85 0.18 85 / 0.3),
|
|
0 0 40px oklch(0.85 0.18 85 / 0.1);
|
|
}
|
|
|
|
/* Status indicator pulse */
|
|
.status-pulse {
|
|
animation: statusPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Grid background */
|
|
.grid-bg {
|
|
background-image:
|
|
linear-gradient(oklch(0.2 0 0 / 0.3) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.2 0 0 / 0.3) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes flowAnimation {
|
|
from {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
to {
|
|
stroke-dashoffset: -16;
|
|
}
|
|
}
|
|
|
|
@keyframes statusPulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes radarSweep {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glowPulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 5px oklch(0.85 0.18 85 / 0.3), 0 0 10px oklch(0.85 0.18 85 / 0.1);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 15px oklch(0.85 0.18 85 / 0.5), 0 0 30px oklch(0.85 0.18 85 / 0.2);
|
|
}
|
|
}
|
|
|
|
@keyframes dataPulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.graph-link {
|
|
stroke: oklch(0.85 0.18 85 / 0.4);
|
|
stroke-width: 1.5px;
|
|
stroke-dasharray: 8, 8;
|
|
animation: flowAnimation 1s linear infinite;
|
|
filter: drop-shadow(0 0 3px oklch(0.85 0.18 85 / 0.5));
|
|
}
|
|
|
|
.graph-link-active {
|
|
stroke: oklch(0.85 0.18 85 / 0.8);
|
|
stroke-width: 2px;
|
|
filter: drop-shadow(0 0 6px oklch(0.85 0.18 85 / 0.8));
|
|
}
|
|
|
|
/* CRT Screen effect for topology */
|
|
.crt-screen {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
oklch(0.16 0 0) 0%,
|
|
oklch(0.12 0 0) 50%,
|
|
oklch(0.09 0 0) 100%
|
|
);
|
|
box-shadow:
|
|
inset 0 0 100px oklch(0 0 0 / 0.5),
|
|
0 0 50px oklch(0.85 0.18 85 / 0.1);
|
|
}
|
|
|
|
/* Data readout styling */
|
|
.data-readout {
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Terminal cursor blink */
|
|
.cursor-blink {
|
|
animation: cursorBlink 1s step-end infinite;
|
|
}
|
|
|
|
@keyframes cursorBlink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Custom scrollbar for command center */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: oklch(0.1 0 0);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: oklch(0.3 0 0);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.85 0.18 85 / 0.5);
|
|
}
|
|
|
|
/* Remove focus outline/border for inputs */
|
|
input:focus, textarea:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Shooting Stars Animation */
|
|
.shooting-stars {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.shooting-star {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: oklch(0.85 0.18 85 / 1);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px oklch(0.85 0.18 85 / 0.8);
|
|
animation: shootingStar var(--duration, 3s) linear infinite;
|
|
animation-delay: var(--delay, 0s);
|
|
opacity: 0;
|
|
}
|
|
|
|
.shooting-star::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, oklch(0.85 0.18 85 / 0), oklch(0.85 0.18 85 / 0.6));
|
|
transform: rotate(45deg);
|
|
transform-origin: right center;
|
|
top: 0;
|
|
right: 2px;
|
|
}
|
|
|
|
@keyframes shootingStar {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 0);
|
|
}
|
|
0.5% {
|
|
opacity: 1;
|
|
}
|
|
2.5% {
|
|
opacity: 0.8;
|
|
transform: translate(300px, 300px);
|
|
}
|
|
3.5% {
|
|
opacity: 0;
|
|
transform: translate(400px, 400px);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(400px, 400px);
|
|
}
|
|
}
|