/* ============================================================================
OMNYX Design System v1.0
Cyberpunk/Futuristic Dark UI for Docker Management
Pure CSS - No build tools, no React, no npm
============================================================================ */
/* ============================================================================
1. GOOGLE FONTS
Add this to :
============================================================================ */
/* ============================================================================
2. CSS CUSTOM PROPERTIES (shadcn-style HSL design tokens)
============================================================================ */
:root {
/* --- Core palette (HSL for shadcn compatibility) --- */
--background: 150 30% 3%; /* #060d08 - deepest dark */
--background-secondary: 150 16% 7%; /* #0a1210 - panels */
--background-tertiary: 150 14% 9%; /* #111a15 - elevated surfaces */
--background-elevated: 150 10% 12%; /* #182019 - raised cards */
--foreground: 150 15% 90%; /* #e0ede4 - primary text */
--foreground-secondary: 150 10% 55%; /* #808f85 - secondary text */
--foreground-muted: 150 8% 35%; /* #505c53 - muted/disabled */
--card: 150 16% 7%; /* same as bg-secondary */
--card-foreground: 150 15% 90%;
--primary: 152 100% 50%; /* #00ff88 - neon green */
--primary-foreground: 150 30% 3%; /* dark text on green */
--secondary: 105 100% 56%; /* #39ff14 - lime neon */
--secondary-foreground: 150 30% 3%;
--accent: 152 80% 40%; /* #14cc6e - muted green */
--accent-foreground: 150 15% 90%;
--muted: 150 10% 14%; /* #1e2820 */
--muted-foreground: 150 10% 55%;
--destructive: 0 72% 51%; /* #e23838 - red */
--destructive-foreground: 0 0% 100%;
--warning: 39 90% 56%; /* #f0a030 - amber */
--warning-foreground: 39 90% 10%;
--info: 200 80% 50%; /* #1a8cd8 - blue */
--info-foreground: 200 80% 95%;
--border: 150 15% 14%; /* #1c291e - subtle border */
--border-glow: 150 20% 20%; /* hover border */
--input: 150 14% 9%;
--ring: 152 100% 50%; /* focus ring = primary */
--radius: 8px;
/* --- Cyberpunk-specific tokens --- */
--glow-primary: 0 0% 0% / 0, 152 100% 50% / 0.15, 152 100% 50% / 0.05;
--neon-green: #00ff88;
--neon-lime: #39ff14;
--neon-green-dim: #00ff8833;
--neon-green-subtle: #00ff8815;
--neon-green-glow: 0 0 8px #00ff8855, 0 0 20px #00ff8822;
--neon-green-glow-lg: 0 0 10px #00ff8866, 0 0 30px #00ff8833, 0 0 60px #00ff8811;
--neon-text-glow: 0 0 7px #00ff8888, 0 0 15px #00ff8844;
--neon-text-glow-sm: 0 0 4px #00ff8866;
--gradient-dark: linear-gradient(135deg, #060d08 0%, #0a1210 50%, #0d1510 100%);
--gradient-card: linear-gradient(145deg, hsl(150 16% 7%) 0%, hsl(150 18% 5%) 100%);
--gradient-glow: linear-gradient(135deg, #00ff8822 0%, #39ff1411 50%, transparent 100%);
--gradient-border: linear-gradient(135deg, #00ff8844, #39ff1422, #00ff8811);
--scanline-color: rgba(0, 255, 136, 0.03);
--scanline-gap: 4px;
--grid-color: rgba(0, 255, 136, 0.04);
--grid-size: 40px;
--circuit-color: rgba(0, 255, 136, 0.06);
/* --- Transition tokens --- */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* --- Typography scale --- */
--font-heading: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
--text-xs: 0.6875rem; /* 11px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 0.9375rem; /* 15px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* --- Z-index layers --- */
--z-dropdown: 50;
--z-sticky: 60;
--z-modal: 100;
--z-toast: 150;
--z-terminal: 200;
--z-tooltip: 250;
}
/* ============================================================================
3. RESET & BASE
============================================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
background: hsl(var(--background));
color: hsl(var(--foreground));
min-height: 100vh;
overflow-x: hidden;
}
/* Subtle grid + scanline overlay on body */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background:
repeating-linear-gradient(
0deg,
var(--scanline-color) 0px,
var(--scanline-color) 1px,
transparent 1px,
transparent var(--scanline-gap)
);
opacity: 0.5;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
linear-gradient(0deg, var(--grid-color) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
::selection {
background: hsl(152 100% 50% / 0.2);
color: hsl(var(--foreground));
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--foreground-muted));
}
/* ============================================================================
4. TYPOGRAPHY
============================================================================ */
h1, h2, h3, h4, h5, h6,
.heading {
font-family: var(--font-heading);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Text glow for headings */
.text-glow,
h1, h2 {
text-shadow: var(--neon-text-glow-sm);
}
.text-glow-lg {
text-shadow: var(--neon-text-glow);
}
.text-neon {
color: var(--neon-green);
text-shadow: var(--neon-text-glow);
}
.text-neon-dim {
color: hsl(var(--accent));
text-shadow: 0 0 4px hsl(var(--accent) / 0.4);
}
.font-mono {
font-family: var(--font-mono);
}
.text-muted {
color: hsl(var(--foreground-secondary));
}
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--foreground-muted));
font-family: var(--font-body);
font-weight: 600;
}
/* ============================================================================
5. BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
line-height: 1;
cursor: pointer;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-base),
transform var(--transition-fast);
outline: none;
text-decoration: none;
white-space: nowrap;
user-select: none;
position: relative;
overflow: hidden;
}
.btn:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
.btn:active {
transform: translateY(1px) scale(0.99);
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Primary - neon green glow */
.btn-primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-color: hsl(var(--primary));
font-weight: 600;
text-shadow: none;
}
.btn-primary:hover {
background: hsl(152 100% 55%);
box-shadow: var(--neon-green-glow);
}
.btn-primary:active {
background: hsl(152 100% 45%);
}
/* Secondary */
.btn-secondary {
background: hsl(var(--muted));
color: hsl(var(--foreground));
border-color: hsl(var(--border));
}
.btn-secondary:hover {
background: hsl(var(--background-elevated));
border-color: hsl(var(--border-glow));
}
/* Destructive - red with glow */
.btn-danger,
.btn-destructive {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
border-color: hsl(var(--destructive));
}
.btn-danger:hover,
.btn-destructive:hover {
background: hsl(0 72% 56%);
box-shadow: 0 0 8px hsl(0 72% 51% / 0.4), 0 0 20px hsl(0 72% 51% / 0.15);
}
/* Info/Blue */
.btn-blue,
.btn-info {
background: hsl(var(--info));
color: hsl(var(--info-foreground));
border-color: hsl(var(--info));
}
.btn-blue:hover,
.btn-info:hover {
background: hsl(200 80% 55%);
box-shadow: 0 0 8px hsl(200 80% 50% / 0.4), 0 0 20px hsl(200 80% 50% / 0.15);
}
/* Success */
.btn-success {
background: hsl(152 70% 40%);
color: #fff;
border-color: hsl(152 70% 40%);
}
.btn-success:hover {
background: hsl(152 70% 45%);
box-shadow: 0 0 8px hsl(152 70% 40% / 0.4), 0 0 20px hsl(152 70% 40% / 0.15);
}
/* Outline */
.btn-outline {
background: transparent;
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground-secondary));
}
.btn-outline:hover {
border-color: var(--neon-green);
color: var(--neon-green);
box-shadow: 0 0 6px var(--neon-green-dim), inset 0 0 6px var(--neon-green-subtle);
}
/* Ghost */
.btn-ghost {
background: transparent;
border-color: transparent;
color: hsl(var(--foreground-secondary));
}
.btn-ghost:hover {
background: hsl(var(--muted));
color: hsl(var(--foreground));
}
/* Sizes */
.btn-sm {
padding: 6px 14px;
font-size: var(--text-sm);
border-radius: 6px;
}
.btn-xs {
padding: 4px 10px;
font-size: var(--text-xs);
border-radius: 6px;
font-weight: 500;
}
.btn-lg {
padding: 14px 28px;
font-size: var(--text-md);
border-radius: 10px;
}
.btn-icon {
padding: 8px;
aspect-ratio: 1;
}
.btn-full {
width: 100%;
}
/* ============================================================================
6. CARDS
============================================================================ */
.card {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
padding: 16px;
position: relative;
transition:
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.card:hover {
border-color: hsl(var(--border-glow));
}
/* Card with neon border glow on hover */
.card-glow {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
padding: 16px;
position: relative;
transition:
border-color var(--transition-base),
box-shadow var(--transition-slow);
}
.card-glow:hover {
border-color: hsl(152 100% 50% / 0.3);
box-shadow:
0 0 1px hsl(152 100% 50% / 0.1),
0 0 8px hsl(152 100% 50% / 0.06),
inset 0 0 8px hsl(152 100% 50% / 0.03);
}
/* Card with animated border */
.card-animated-border {
background: var(--gradient-card);
border-radius: calc(var(--radius) + 2px);
padding: 16px;
position: relative;
z-index: 0;
}
.card-animated-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
135deg,
hsl(152 100% 50% / 0.2),
hsl(152 100% 50% / 0.05),
hsl(152 100% 50% / 0.1),
hsl(152 100% 50% / 0.05)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: opacity var(--transition-base);
opacity: 0.5;
}
.card-animated-border:hover::before {
opacity: 1;
background: linear-gradient(
135deg,
hsl(152 100% 50% / 0.5),
hsl(152 100% 50% / 0.1),
hsl(152 100% 50% / 0.3),
hsl(152 100% 50% / 0.1)
);
}
/* Agent card specifics */
.agent-card {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
padding: 16px;
position: relative;
transition:
border-color var(--transition-base),
box-shadow var(--transition-slow),
transform var(--transition-fast);
}
.agent-card:hover {
border-color: hsl(152 100% 50% / 0.2);
box-shadow: 0 0 12px hsl(152 100% 50% / 0.05);
transform: translateY(-1px);
}
.agent-card.manager {
border-left: 3px solid hsl(var(--warning));
}
.agent-card.manager:hover {
box-shadow: 0 0 12px hsl(39 90% 56% / 0.08);
}
.agent-card.worker {
border-left: 3px solid hsl(var(--info));
}
.agent-card.worker:hover {
box-shadow: 0 0 12px hsl(200 80% 50% / 0.08);
}
.agent-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.agent-card-name {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.agent-card-badges {
display: flex;
gap: 6px;
}
.agent-card-info {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: hsl(var(--foreground-secondary));
margin-bottom: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.agent-card-info .label {
color: hsl(var(--foreground-muted));
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.agent-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding-top: 10px;
border-top: 1px solid hsl(var(--border));
}
.agent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 12px;
}
/* ============================================================================
7. BADGES
============================================================================ */
.badge {
font-family: var(--font-body);
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 20px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.4;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
.badge-online {
background: hsl(152 100% 50% / 0.1);
color: var(--neon-green);
border-color: hsl(152 100% 50% / 0.15);
}
/* Pulse dot for online */
.badge-online::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--neon-green);
box-shadow: 0 0 4px var(--neon-green);
animation: pulse-dot 2s ease-in-out infinite;
}
.badge-offline {
background: hsl(0 72% 51% / 0.1);
color: hsl(0 72% 65%);
border-color: hsl(0 72% 51% / 0.15);
}
.badge-offline::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: hsl(0 72% 55%);
opacity: 0.6;
}
.badge-manager {
background: hsl(39 90% 56% / 0.1);
color: hsl(39 90% 66%);
border-color: hsl(39 90% 56% / 0.15);
}
.badge-worker {
background: hsl(200 80% 50% / 0.1);
color: hsl(200 80% 65%);
border-color: hsl(200 80% 50% / 0.15);
}
.badge-standalone {
background: hsl(var(--muted));
color: hsl(var(--foreground-secondary));
border-color: hsl(var(--border));
}
/* ============================================================================
8. FORM INPUTS
============================================================================ */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: var(--text-sm);
color: hsl(var(--foreground-secondary));
margin-bottom: 6px;
font-weight: 500;
letter-spacing: 0.01em;
}
.form-group input,
.form-group select,
.form-group textarea,
.input {
width: 100%;
padding: 10px 14px;
background: hsl(var(--input));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--foreground));
font-family: var(--font-body);
font-size: var(--text-base);
outline: none;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.input::placeholder {
color: hsl(var(--foreground-muted));
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 3px hsl(152 100% 50% / 0.1), var(--neon-green-glow);
}
/* Input with mono font for code/commands */
.input-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
}
/* ============================================================================
9. MODALS / DIALOGS
============================================================================ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(6, 13, 8, 0.88);
z-index: var(--z-modal);
align-items: center;
justify-content: center;
}
.modal-overlay.active {
display: flex;
animation: overlay-fade-in 150ms ease-out both;
}
.modal-overlay.active .modal {
animation: modal-slide-in 250ms var(--transition-spring) both;
border-color: transparent;
box-shadow:
0 0 0 1px hsl(152 100% 50% / 0.15),
0 0 30px hsl(152 100% 50% / 0.08),
0 0 60px hsl(152 100% 50% / 0.03),
0 28px 56px rgba(0, 0, 0, 0.55);
}
/* ── Lightning ray: sharp 1px border ring ─────────────────────────────────── */
.modal-overlay.active .modal::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from var(--modal-ray),
transparent 0deg,
transparent 315deg,
hsl(152 100% 50% / 0.08) 338deg,
hsl(152 100% 50% / 0.55) 350deg,
hsl(152 100% 50%) 354deg,
#e0fff0 356.5deg,
hsl(152 100% 50%) 358deg,
hsl(152 100% 50% / 0.12) 360deg
);
/* Show only the 1px border ring, not the interior */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
animation: modal-ray-spin 3s linear infinite;
pointer-events: none;
z-index: 0;
will-change: transform;
}
/* ── Lightning glow halo: wider ring + blur ───────────────────────────────── */
.modal-overlay.active .modal::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 5px;
background: conic-gradient(
from var(--modal-ray),
transparent 0deg,
transparent 325deg,
hsl(152 100% 50% / 0.05) 340deg,
hsl(152 100% 50% / 0.40) 351deg,
hsl(152 100% 50% / 0.70) 356deg,
hsl(152 100% 50% / 0.25) 359deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
filter: blur(6px);
animation: modal-ray-spin 3s linear infinite;
pointer-events: none;
z-index: 0;
will-change: transform;
}
.modal {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 4px);
padding: 28px;
width: 480px;
max-height: 85vh;
overflow-y: auto;
position: relative;
isolation: isolate;
box-shadow:
0 0 1px hsl(152 100% 50% / 0.1),
0 0 30px hsl(152 100% 50% / 0.05),
0 25px 50px rgba(0, 0, 0, 0.5);
}
.modal.wide {
width: 700px;
}
.modal h2 {
font-family: var(--font-heading);
font-size: var(--text-lg);
margin-bottom: 20px;
color: hsl(var(--foreground));
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: var(--neon-text-glow-sm);
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid hsl(var(--border));
}
/* Confirm dialog (replacement for browser confirm()) */
.confirm-dialog .modal {
width: 400px;
text-align: center;
}
.confirm-dialog .confirm-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: hsl(var(--destructive) / 0.1);
border: 1px solid hsl(var(--destructive) / 0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 20px;
}
.confirm-dialog .confirm-message {
color: hsl(var(--foreground-secondary));
font-size: var(--text-base);
margin-bottom: 8px;
line-height: var(--leading-relaxed);
}
.confirm-dialog .modal-actions {
justify-content: center;
}
/* ============================================================================
10. MODAL TABS
============================================================================ */
/* Tab bar — linha de navegação dentro de modais */
.modal-tabs {
display: flex;
gap: 0;
margin-bottom: 24px;
border-bottom: 1px solid hsl(var(--border));
position: relative;
}
/* Indicador deslizante — posicionado via JS (--tab-left, --tab-width) */
.modal-tabs::after {
content: '';
position: absolute;
bottom: -1px;
left: var(--tab-left, 0px);
width: var(--tab-width, 0px);
height: 2px;
background: var(--neon-green);
box-shadow: 0 0 8px hsl(152 100% 50% / 0.6), 0 0 20px hsl(152 100% 50% / 0.2);
border-radius: 1px;
transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.modal-tab-btn {
padding: 8px 18px;
background: none;
border: none;
color: hsl(var(--foreground-muted));
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--transition-fast);
outline: none;
white-space: nowrap;
}
.modal-tab-btn:hover {
color: hsl(var(--foreground));
}
.modal-tab-btn:focus-visible {
outline: 2px solid hsl(var(--ring) / 0.5);
outline-offset: -2px;
border-radius: 4px 4px 0 0;
}
/* Aba ativa: texto neon */
.modal-tab-btn.active {
color: var(--neon-green);
text-shadow: 0 0 6px hsl(152 100% 50% / 0.5);
}
/* ============================================================================
11. TOAST NOTIFICATIONS
============================================================================ */
.toast-container {
position: fixed;
top: 16px;
right: 16px;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: hsl(var(--background-tertiary));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
font-size: var(--text-sm);
color: hsl(var(--foreground));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
pointer-events: auto;
animation: toast-slide-in 300ms ease-out;
max-width: 380px;
backdrop-filter: blur(12px);
}
.toast.toast-exit {
animation: toast-slide-out 200ms ease-in forwards;
}
.toast-success {
border-left: 3px solid var(--neon-green);
}
.toast-success .toast-icon {
color: var(--neon-green);
}
.toast-error {
border-left: 3px solid hsl(var(--destructive));
}
.toast-error .toast-icon {
color: hsl(var(--destructive));
}
.toast-warning {
border-left: 3px solid hsl(var(--warning));
}
.toast-warning .toast-icon {
color: hsl(var(--warning));
}
.toast-info {
border-left: 3px solid hsl(var(--info));
}
.toast-info .toast-icon {
color: hsl(var(--info));
}
.toast-icon {
font-size: 16px;
flex-shrink: 0;
}
.toast-message {
flex: 1;
line-height: var(--leading-normal);
}
.toast-close {
background: none;
border: none;
color: hsl(var(--foreground-muted));
cursor: pointer;
padding: 2px;
font-size: 14px;
transition: color var(--transition-fast);
}
.toast-close:hover {
color: hsl(var(--foreground));
}
/* ============================================================================
11. AUTH SCREEN
============================================================================ */
.auth-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--gradient-dark);
position: relative;
}
/* Circuit pattern background for auth */
.auth-container::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, hsl(152 100% 50% / 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, hsl(152 100% 50% / 0.02) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, hsl(152 100% 50% / 0.01) 0%, transparent 70%);
pointer-events: none;
}
.auth-box {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 4px);
padding: 40px;
width: 420px;
position: relative;
box-shadow:
0 0 1px hsl(152 100% 50% / 0.15),
0 0 40px hsl(152 100% 50% / 0.04),
0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Subtle animated border glow */
.auth-box::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
135deg,
hsl(152 100% 50% / 0.3),
transparent 40%,
transparent 60%,
hsl(152 100% 50% / 0.15)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Logo area in auth */
.auth-logo {
text-align: center;
margin-bottom: 28px;
}
.auth-logo .logo-x {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 900;
color: var(--neon-green);
text-shadow: var(--neon-text-glow);
letter-spacing: 0.15em;
display: inline-block;
animation: logo-pulse 3s ease-in-out infinite;
}
.auth-logo .logo-brand {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
color: hsl(var(--foreground));
letter-spacing: 0.2em;
text-transform: uppercase;
display: block;
margin-top: 4px;
text-shadow: var(--neon-text-glow-sm);
}
.auth-box h1 {
font-family: var(--font-heading);
font-size: var(--text-xl);
margin-bottom: 6px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.auth-box p {
color: hsl(var(--foreground-secondary));
margin-bottom: 24px;
font-size: var(--text-sm);
}
.auth-toggle {
text-align: center;
margin-top: 20px;
font-size: var(--text-sm);
color: hsl(var(--foreground-secondary));
}
.auth-toggle a {
color: var(--neon-green);
cursor: pointer;
text-decoration: none;
font-weight: 500;
transition: text-shadow var(--transition-base);
}
.auth-toggle a:hover {
text-shadow: var(--neon-text-glow-sm);
}
.error-msg {
color: hsl(var(--destructive));
font-size: var(--text-sm);
margin-bottom: 12px;
padding: 8px 12px;
background: hsl(var(--destructive) / 0.08);
border: 1px solid hsl(var(--destructive) / 0.15);
border-radius: var(--radius);
}
/* ============================================================================
12. APP LAYOUT
============================================================================ */
.app {
display: flex;
min-height: 100vh;
}
/* --- Sidebar --- */
.sidebar {
width: 260px;
background: hsl(var(--background-secondary));
border-right: 1px solid hsl(var(--border));
display: flex;
flex-direction: column;
position: relative;
flex-shrink: 0;
}
/* Subtle glow on sidebar right edge */
.sidebar::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: linear-gradient(
180deg,
transparent,
hsl(152 100% 50% / 0.1) 30%,
hsl(152 100% 50% / 0.05) 70%,
transparent
);
pointer-events: none;
}
.sidebar-header {
padding: 20px;
border-bottom: 1px solid hsl(var(--border));
}
.sidebar-header h2 {
font-family: var(--font-heading);
font-size: var(--text-md);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
color: hsl(var(--foreground));
}
/* OMNYX text logo with glow */
.sidebar-logo {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: 0.18em;
color: var(--neon-green);
text-shadow: var(--neon-text-glow);
text-transform: uppercase;
}
.sidebar-logo .logo-x {
color: var(--neon-green);
text-shadow: var(--neon-text-glow);
}
.sidebar-nav {
flex: 1;
padding: 12px;
overflow-y: auto;
}
.nav-section-title {
font-family: var(--font-body);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: hsl(var(--foreground-muted));
padding: 8px 12px 4px;
font-weight: 600;
}
.nav-item {
padding: 10px 12px;
border-radius: var(--radius);
cursor: pointer;
font-size: var(--text-base);
display: flex;
align-items: center;
justify-content: space-between;
transition:
background var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-base);
color: hsl(var(--foreground-secondary));
border: 1px solid transparent;
margin-bottom: 2px;
position: relative;
}
.nav-item:hover {
background: hsl(var(--background-tertiary));
color: hsl(var(--foreground));
}
.nav-item.active {
background: hsl(152 100% 50% / 0.1);
color: var(--neon-green);
border-color: hsl(152 100% 50% / 0.15);
box-shadow: inset 0 0 8px hsl(152 100% 50% / 0.05);
}
/* Active glow bar on left */
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--neon-green);
box-shadow: 0 0 6px var(--neon-green);
}
.nav-item-add {
color: var(--neon-green) !important;
font-weight: 500;
}
.nav-item-add:hover {
background: hsl(152 100% 50% / 0.06);
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid hsl(var(--border));
font-size: var(--text-sm);
color: hsl(var(--foreground-secondary));
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-footer a {
color: hsl(var(--destructive));
cursor: pointer;
text-decoration: none;
font-size: var(--text-sm);
transition: color var(--transition-fast), text-shadow var(--transition-base);
}
.sidebar-footer a:hover {
text-shadow: 0 0 6px hsl(var(--destructive) / 0.5);
}
/* --- Main content area --- */
.main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.topbar {
padding: 16px 24px;
border-bottom: 1px solid hsl(var(--border));
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
background: hsl(var(--background-secondary));
}
.topbar h1 {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-shadow: var(--neon-text-glow-sm);
}
.topbar-actions {
display: flex;
gap: 8px;
}
.content {
flex: 1;
padding: 24px;
overflow-y: auto;
isolation: isolate;
}
/* ============================================================================
13. SECTIONS (Cluster / Standalone groups)
============================================================================ */
.section {
margin-bottom: 28px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid hsl(var(--border));
position: relative;
}
/* Circuit decoration on section header border */
.section-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 60px;
height: 1px;
background: linear-gradient(90deg, var(--neon-green), transparent);
box-shadow: 0 0 4px var(--neon-green-dim);
}
.section-title {
font-family: var(--font-heading);
font-size: var(--text-md);
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.section-title .icon {
font-size: var(--text-lg);
color: var(--neon-green);
text-shadow: var(--neon-text-glow-sm);
}
.section-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: hsl(var(--foreground-secondary));
display: flex;
gap: 16px;
margin-top: 4px;
}
.section-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.section-actions {
display: flex;
gap: 6px;
}
/* ============================================================================
14. DOCKER CMD & EXEC OUTPUT
============================================================================ */
.docker-cmd {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 14px 14px 14px 16px;
font-family: var(--font-mono);
font-size: var(--text-sm);
word-break: break-all;
color: var(--neon-green);
position: relative;
margin-top: 12px;
text-shadow: var(--neon-text-glow-sm);
border-left: 3px solid hsl(152 100% 50% / 0.3);
}
.docker-cmd .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: hsl(var(--background-tertiary));
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground-secondary));
padding: 4px 10px;
border-radius: 6px;
font-family: var(--font-body);
font-size: var(--text-xs);
cursor: pointer;
transition: all var(--transition-fast);
}
.docker-cmd .copy-btn:hover {
border-color: var(--neon-green);
color: var(--neon-green);
}
.exec-output {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 14px;
font-family: var(--font-mono);
font-size: var(--text-sm);
white-space: pre-wrap;
word-break: break-all;
color: hsl(var(--foreground));
max-height: 400px;
overflow-y: auto;
margin-top: 12px;
line-height: 1.6;
}
.exec-cmd-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: hsl(var(--foreground-secondary));
margin-top: 12px;
}
.exec-cmd-label span {
color: var(--neon-green);
}
/* ============================================================================
15. TERMINAL
============================================================================ */
.terminal-container {
display: none;
position: fixed;
inset: 0;
background: hsl(var(--background));
z-index: var(--z-terminal);
flex-direction: column;
}
.terminal-container.active {
display: flex;
animation: terminal-slide-in 250ms ease-out both;
}
.terminal-header {
padding: 10px 16px;
background: hsl(var(--background-secondary));
border-bottom: 1px solid hsl(var(--border));
display: flex;
align-items: center;
justify-content: space-between;
}
.terminal-header .info {
font-family: var(--font-heading);
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
}
.terminal-header .info .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-green);
box-shadow: 0 0 6px var(--neon-green);
animation: pulse-dot 2s ease-in-out infinite;
}
/* Agent info tags in terminal header */
.terminal-meta {
display: flex;
gap: 12px;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: hsl(var(--foreground-secondary));
}
.terminal-meta-tag {
padding: 2px 8px;
background: hsl(var(--muted));
border-radius: 4px;
border: 1px solid hsl(var(--border));
}
.terminal-body {
flex: 1;
padding: 4px;
}
/* ============================================================================
16. EMPTY STATES
============================================================================ */
.empty {
text-align: center;
padding: 80px 20px;
color: hsl(var(--foreground-secondary));
animation: fade-in 300ms ease-out both;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
}
.empty h3 {
font-family: var(--font-heading);
font-size: var(--text-lg);
margin-bottom: 8px;
color: hsl(var(--foreground));
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: var(--neon-text-glow-sm);
}
.empty p {
font-size: var(--text-base);
margin-bottom: 24px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
line-height: var(--leading-relaxed);
}
/* Empty state with circuit decoration */
.empty::before {
content: '';
display: block;
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(152 100% 50% / 0.2), transparent);
margin: 0 auto 20px;
}
/* ============================================================================
17. LOADING SKELETONS
============================================================================ */
.skeleton {
background: linear-gradient(
90deg,
hsl(var(--muted)) 25%,
hsl(var(--background-elevated)) 50%,
hsl(var(--muted)) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.8s linear infinite;
border-radius: var(--radius);
}
.skeleton-text {
height: 14px;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-text.short {
width: 60%;
}
.skeleton-text.medium {
width: 80%;
}
.skeleton-card {
height: 160px;
border-radius: calc(var(--radius) + 2px);
}
.skeleton-badge {
height: 22px;
width: 70px;
border-radius: 20px;
display: inline-block;
}
.skeleton-button {
height: 32px;
width: 80px;
border-radius: 6px;
display: inline-block;
}
/* Skeleton card layout */
.skeleton-agent-card {
background: var(--gradient-card);
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
padding: 16px;
}
.skeleton-agent-card .skeleton-header {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.skeleton-agent-card .skeleton-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 14px;
}
.skeleton-agent-card .skeleton-footer {
display: flex;
gap: 6px;
padding-top: 10px;
border-top: 1px solid hsl(var(--border));
}
/* ============================================================================
18. LOADING SPINNER
============================================================================ */
.loading {
color: hsl(var(--foreground-secondary));
font-family: var(--font-mono);
font-size: var(--text-sm);
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.loading::before {
content: '';
width: 14px;
height: 14px;
border: 2px solid hsl(var(--border));
border-top-color: var(--neon-green);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-overlay {
position: absolute;
inset: 0;
background: hsl(var(--background) / 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
backdrop-filter: blur(2px);
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid hsl(var(--border));
border-top-color: var(--neon-green);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* ============================================================================
19. ANIMATIONS & KEYFRAMES
============================================================================ */
/* ── Modal lightning border (Cyberpunk ray sweep) ───────────────────────────
Uses CSS Houdini @property to animate a conic-gradient angle.
Supported: Chrome 85+, Edge 85+, Safari 15.4+, Firefox 128+
──────────────────────────────────────────────────────────────────────────── */
@property --modal-ray {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes modal-ray-spin {
to { --modal-ray: 360deg; }
}
/* Pulse dot for online status */
@keyframes pulse-dot {
0%, 100% {
box-shadow: 0 0 4px currentColor;
opacity: 1;
}
50% {
box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
opacity: 0.7;
}
}
/* Logo subtle pulse */
@keyframes logo-pulse {
0%, 100% {
text-shadow: 0 0 7px #00ff8888, 0 0 15px #00ff8844;
}
50% {
text-shadow: 0 0 10px #00ff88aa, 0 0 25px #00ff8855, 0 0 40px #00ff8822;
}
}
/* Skeleton shimmer */
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Spinner */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Modal entrance */
@keyframes overlay-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-slide-in {
from {
opacity: 0;
transform: translateY(-12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Toast slide */
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateX(100%) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes toast-slide-out {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(100%) scale(0.95);
}
}
/* Border glow sweep animation (for special cards) */
@keyframes border-glow-sweep {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Terminal full-screen entrance */
@keyframes terminal-slide-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tab content entrance */
@keyframes tab-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade in */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Slide up (for content transitions) */
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================================
20. UTILITY CLASSES
============================================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }
.hidden { display: none; }
.relative { position: relative; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: calc(var(--radius) + 4px); }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Transition helpers */
.transition-all { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
/* Animate in on load */
.animate-in {
animation: slide-up 400ms ease-out;
}
.animate-fade {
animation: fade-in 300ms ease-out;
}
/* ============================================================================
21. CYBERPUNK DECORATIVE ELEMENTS
============================================================================ */
/* Corner brackets decoration */
.cyber-corners {
position: relative;
}
.cyber-corners::before,
.cyber-corners::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-color: hsl(152 100% 50% / 0.3);
border-style: solid;
pointer-events: none;
}
.cyber-corners::before {
top: -1px;
left: -1px;
border-width: 1px 0 0 1px;
}
.cyber-corners::after {
bottom: -1px;
right: -1px;
border-width: 0 1px 1px 0;
}
/* Horizontal rule with circuit style */
.cyber-hr {
border: none;
height: 1px;
background: linear-gradient(
90deg,
transparent,
hsl(var(--border)) 10%,
hsl(152 100% 50% / 0.2) 50%,
hsl(var(--border)) 90%,
transparent
);
margin: 16px 0;
position: relative;
}
.cyber-hr::after {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: hsl(var(--background));
border: 1px solid hsl(152 100% 50% / 0.3);
transform: translateX(-50%) rotate(45deg);
}
/* Circuit line decoration for section headers */
.circuit-line {
flex: 1;
height: 1px;
background: repeating-linear-gradient(
90deg,
hsl(152 100% 50% / 0.15) 0px,
hsl(152 100% 50% / 0.15) 4px,
transparent 4px,
transparent 8px
);
margin-left: 12px;
}
/* Data readout style (for cluster stats) */
.cyber-stat {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: 3px 8px;
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 4px;
color: var(--neon-green);
display: inline-flex;
align-items: center;
gap: 4px;
}
.cyber-stat .stat-label {
color: hsl(var(--foreground-muted));
}
/* Hex badge (for IDs) */
.hex-id {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: hsl(var(--foreground-muted));
opacity: 0.7;
}
/* ============================================================================
22. XTERM.JS THEME OVERRIDES
============================================================================ */
.xterm {
padding: 8px;
}
.xterm-viewport::-webkit-scrollbar {
width: 6px;
}
.xterm-viewport::-webkit-scrollbar-track {
background: transparent;
}
.xterm-viewport::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 3px;
}
/* ============================================================================
23. RESPONSIVE / MOBILE
============================================================================ */
@media (max-width: 768px) {
.sidebar {
width: 220px;
}
.agent-grid {
grid-template-columns: 1fr;
}
.modal {
width: calc(100% - 32px);
margin: 16px;
}
.modal.wide {
width: calc(100% - 32px);
}
.content {
padding: 16px;
}
.topbar h1 {
font-size: var(--text-md);
}
}
@media (max-width: 640px) {
.app {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid hsl(var(--border));
}
.sidebar-nav {
max-height: 200px;
}
.auth-box {
width: calc(100% - 32px);
padding: 28px;
}
}