mirror of
https://github.com/samvallad33/vestige.git
synced 2026-04-25 00:36:22 +02:00
d98cf6136a
Dashboard v2.1 "Nuclear" upgrade: - Dark glassmorphism UI system (4-tier glass utilities, ambient orbs, nav glow) - Graph3D decomposed from 806-line monolith into 10 focused modules - Custom GLSL shaders (nebula FBM background, chromatic aberration, film grain, vignette) - Enhanced dream mode with smooth 2s lerped transitions and aurora cycling - Cognitive pipeline visualizer (7-stage search cascade animation) - Temporal playback slider (scrub through memory evolution over time) - Bioluminescent color palette for node types and events Fix flaky CI test on macOS: - vector::tests::test_add_and_search used near-identical test vectors (additive phase shift) - Changed to multiplicative frequency so each seed produces a distinct vector Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
236 lines
6.3 KiB
CSS
236 lines
6.3 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
/* Vestige cosmic dark palette */
|
|
--color-void: #050510;
|
|
--color-abyss: #0a0a1a;
|
|
--color-deep: #10102a;
|
|
--color-surface: #161638;
|
|
--color-elevated: #1e1e4a;
|
|
--color-subtle: #2a2a5e;
|
|
--color-muted: #4a4a7a;
|
|
--color-dim: #7a7aaa;
|
|
--color-text: #e0e0ff;
|
|
--color-bright: #ffffff;
|
|
|
|
/* Accent colors */
|
|
--color-synapse: #6366f1;
|
|
--color-synapse-glow: #818cf8;
|
|
--color-dream: #a855f7;
|
|
--color-dream-glow: #c084fc;
|
|
--color-memory: #3b82f6;
|
|
--color-recall: #10b981;
|
|
--color-decay: #ef4444;
|
|
--color-warning: #f59e0b;
|
|
|
|
/* Node type colors */
|
|
--color-node-fact: #3b82f6;
|
|
--color-node-concept: #8b5cf6;
|
|
--color-node-event: #f59e0b;
|
|
--color-node-person: #10b981;
|
|
--color-node-place: #06b6d4;
|
|
--color-node-note: #6b7280;
|
|
--color-node-pattern: #ec4899;
|
|
--color-node-decision: #ef4444;
|
|
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
|
|
}
|
|
|
|
/* Base styles */
|
|
html {
|
|
background: var(--color-void);
|
|
color: var(--color-text);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-subtle);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-muted);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
GLASSMORPHISM SYSTEM
|
|
═══════════════════════════════════════════ */
|
|
|
|
.glass {
|
|
background: rgba(22, 22, 56, 0.45);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(99, 102, 241, 0.08);
|
|
box-shadow:
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
|
|
0 4px 24px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.glass-subtle {
|
|
background: rgba(16, 16, 42, 0.4);
|
|
backdrop-filter: blur(12px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
border: 1px solid rgba(99, 102, 241, 0.06);
|
|
box-shadow:
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
|
|
0 2px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.glass-sidebar {
|
|
background: rgba(10, 10, 26, 0.6);
|
|
backdrop-filter: blur(24px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
|
border-right: 1px solid rgba(99, 102, 241, 0.1);
|
|
box-shadow:
|
|
inset -1px 0 0 0 rgba(255, 255, 255, 0.02),
|
|
4px 0 24px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: rgba(10, 10, 26, 0.8);
|
|
backdrop-filter: blur(24px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
|
border: 1px solid rgba(99, 102, 241, 0.1);
|
|
box-shadow:
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
|
|
0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
GLOW EFFECTS
|
|
═══════════════════════════════════════════ */
|
|
|
|
.glow-synapse {
|
|
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1);
|
|
}
|
|
.glow-dream {
|
|
box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);
|
|
}
|
|
.glow-memory {
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
ANIMATIONS
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* Pulse animation for live indicators */
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Ambient background orbs */
|
|
@keyframes orb-float-1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(60px, -40px) scale(1.1); }
|
|
50% { transform: translate(-30px, -80px) scale(0.95); }
|
|
75% { transform: translate(-60px, -20px) scale(1.05); }
|
|
}
|
|
|
|
@keyframes orb-float-2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(-50px, 30px) scale(1.08); }
|
|
50% { transform: translate(40px, 60px) scale(0.92); }
|
|
75% { transform: translate(20px, -40px) scale(1.03); }
|
|
}
|
|
|
|
@keyframes orb-float-3 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(30px, 50px) scale(1.05); }
|
|
50% { transform: translate(-60px, 20px) scale(0.98); }
|
|
75% { transform: translate(40px, -30px) scale(1.1); }
|
|
}
|
|
|
|
.ambient-orb {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.ambient-orb-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent 70%);
|
|
top: -10%;
|
|
right: -5%;
|
|
animation: orb-float-1 20s ease-in-out infinite;
|
|
}
|
|
|
|
.ambient-orb-2 {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
|
|
bottom: -15%;
|
|
left: -5%;
|
|
animation: orb-float-2 25s ease-in-out infinite;
|
|
}
|
|
|
|
.ambient-orb-3 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%);
|
|
top: 40%;
|
|
left: 40%;
|
|
animation: orb-float-3 22s ease-in-out infinite;
|
|
}
|
|
|
|
/* Active nav indicator with animated gradient border */
|
|
.nav-active-border {
|
|
position: relative;
|
|
}
|
|
.nav-active-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 2px;
|
|
border-radius: 1px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--color-synapse),
|
|
var(--color-dream),
|
|
var(--color-synapse)
|
|
);
|
|
background-size: 100% 200%;
|
|
animation: gradient-shift 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 0%; }
|
|
50% { background-position: 0% 100%; }
|
|
}
|
|
|
|
/* Neural particle animation */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
25% { transform: translateY(-10px) translateX(5px); }
|
|
50% { transform: translateY(-5px) translateX(-5px); }
|
|
75% { transform: translateY(-15px) translateX(3px); }
|
|
}
|
|
|
|
/* Retention bar colors */
|
|
.retention-critical { color: var(--color-decay); }
|
|
.retention-low { color: var(--color-warning); }
|
|
.retention-good { color: var(--color-recall); }
|
|
.retention-strong { color: var(--color-synapse); }
|