111 lines
4.6 KiB
CSS
111 lines
4.6 KiB
CSS
/* ================================================================
|
|
nexus-tokens.css — Nexus Mission Control V2 Design Tokens
|
|
Geladen NACH main.css, überschreibt shadcn/v1-Standards.
|
|
================================================================ */
|
|
|
|
:root {
|
|
/* ── Surfaces ─────────────────────────────────────── */
|
|
--space-0: #050410;
|
|
--space-1: #0a0818;
|
|
--space-2: #0e0c20;
|
|
--space-3: #141130;
|
|
--space-4: #1b1742;
|
|
--glass: rgba(20, 17, 48, 0.55);
|
|
--glass-2: rgba(28, 24, 64, 0.55);
|
|
|
|
/* ── Lines ────────────────────────────────────────── */
|
|
--line: rgba(150, 140, 255, 0.10);
|
|
--line-2: rgba(150, 140, 255, 0.18);
|
|
--line-3: rgba(150, 140, 255, 0.30);
|
|
|
|
/* ── Text ─────────────────────────────────────────── */
|
|
--tx: #ece9ff;
|
|
--tx-2: #a8a3d6;
|
|
--tx-3: #6f6aa0;
|
|
|
|
/* ── Accent Gradient ──────────────────────────────── */
|
|
--a-blue: #4f7cff;
|
|
--a-purple: #b557f6;
|
|
--a-mid: #7c6cff;
|
|
--grad: linear-gradient(120deg, var(--a-blue), var(--a-purple));
|
|
--grad-soft: linear-gradient(120deg, rgba(79,124,255,.18), rgba(181,87,246,.18));
|
|
|
|
/* ── Status ───────────────────────────────────────── */
|
|
--st-work: #3ddc97;
|
|
--st-think: #34d6f5;
|
|
--st-queue: #fbbf24;
|
|
--st-block: #fb7185;
|
|
--st-idle: #6b6796;
|
|
|
|
/* ── Glows ────────────────────────────────────────── */
|
|
--glow: 0 0 0 1px rgba(124,108,255,.20), 0 0 28px -4px rgba(124,108,255,.55);
|
|
--glow-blue: 0 0 24px -2px rgba(79,124,255,.65);
|
|
--glow-purple: 0 0 24px -2px rgba(181,87,246,.60);
|
|
--glow-work: 0 0 16px -1px rgba(61,220,151,.70);
|
|
--glow-think: 0 0 16px -1px rgba(52,214,245,.65);
|
|
|
|
/* ── Radius ───────────────────────────────────────── */
|
|
--r: 14px;
|
|
--r-sm: 10px;
|
|
--r-lg: 20px;
|
|
|
|
/* ── Layout ───────────────────────────────────────── */
|
|
--sidebar-w: 248px;
|
|
--topbar-h: 62px;
|
|
--rail-w: 360px;
|
|
}
|
|
|
|
/* ── Glass card utility ────────────────────────────── */
|
|
.glass-panel {
|
|
background: var(--glass);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* ── Gradient text ─────────────────────────────────── */
|
|
.grad-text {
|
|
background: var(--grad);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* ── Status dot keyframes ──────────────────────────── */
|
|
@keyframes pulse-work {
|
|
0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
|
|
70% { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
|
|
}
|
|
@keyframes pulse-think {
|
|
0% { box-shadow: 0 0 0 0 rgba(52,214,245,.55); }
|
|
70% { box-shadow: 0 0 0 7px rgba(52,214,245,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(52,214,245,0); }
|
|
}
|
|
@keyframes pulse-block {
|
|
0% { box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
|
|
70% { box-shadow: 0 0 0 7px rgba(251,113,133,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(180%); }
|
|
}
|
|
/* ── V2 Scrollbars ─────────────────────────────────── */
|
|
.v2-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
|
|
.v2-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(124,108,255,.22);
|
|
border-radius: 9px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.v2-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(124,108,255,.4);
|
|
background-clip: padding-box;
|
|
}
|
|
.v2-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
/* ── Typography helpers ────────────────────────────── */
|
|
.font-display { font-family: 'Space Grotesk', sans-serif; }
|
|
.font-mono-v2 { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
|