mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-03 10:28:43 +02:00
feat: Luminous Depth UI redesign
Complete visual overhaul of the Aryx application with the Luminous Depth design language — blue-tinted dark surfaces, brand gradient accents, glass-morphism effects, and refined typography. Design Foundation: - New color system with CSS custom properties for all surfaces, borders, text, accents, and status colors - Typography: Outfit (display), DM Sans (body), JetBrains Mono (code) - Animations: accent-flow, thinking-wave, ambient-glow - Utility classes: glass-surface, glow-border, brand-gradient-bg/text - Light theme with cool-tinted whites and blue-tinted shadows Components Updated: - UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.) - AppShell with ambient glow background - Sidebar with brand gradient selection and accent-flow running bars - ChatPane with semantic phase tinting and gradient user avatars - WelcomePane with nebula background and motion entrance animations - All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.) - ActivityPanel and RunTimeline with glass-surface cards - Settings panels, modals, and editor shells - TerminalPanel with harmonized ANSI palette - PatternGraph nodes with glass-surface styling - MarkdownComposer toolbar Zero hardcoded zinc/indigo color classes remain in renderer components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
+279
-129
@@ -1,79 +1,133 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ── Design tokens: "Luminous Depth" ────────────────────────── */
|
||||
|
||||
@theme {
|
||||
--color-surface-0: #09090b;
|
||||
--color-surface-1: #18181b;
|
||||
--color-surface-2: #27272a;
|
||||
--color-surface-3: #3f3f46;
|
||||
--color-border: #27272a;
|
||||
--color-border-subtle: #1e1e22;
|
||||
--color-accent: #6366f1;
|
||||
--color-accent-hover: #818cf8;
|
||||
--color-accent-muted: rgba(99, 102, 241, 0.15);
|
||||
/* Surface palette — blue-tinted darks */
|
||||
--color-surface-0: #07080e;
|
||||
--color-surface-1: #0e1019;
|
||||
--color-surface-2: #161924;
|
||||
--color-surface-3: #1e2233;
|
||||
--color-surface-4: #272b3d;
|
||||
--color-border: #1a1e2e;
|
||||
--color-border-subtle: #121520;
|
||||
|
||||
/* Brand accents — derived from logo */
|
||||
--color-accent: #245CF9;
|
||||
--color-accent-hover: #4b7bfa;
|
||||
--color-accent-muted: rgba(36, 92, 249, 0.12);
|
||||
--color-accent-sky: #248CFD;
|
||||
--color-accent-indigo: #0E13A4;
|
||||
--color-accent-purple: #8A29E6;
|
||||
--color-accent-royal: #5A20E0;
|
||||
--color-accent-violet: #3615CF;
|
||||
|
||||
/* Text palette */
|
||||
--color-text-primary: #e8eaf0;
|
||||
--color-text-secondary: #8b90a5;
|
||||
--color-text-muted: #4e5368;
|
||||
--color-text-accent: #7ba1fc;
|
||||
|
||||
/* Status palette */
|
||||
--color-status-success: #34d399;
|
||||
--color-status-warning: #fbbf24;
|
||||
--color-status-error: #f87171;
|
||||
--color-status-info: #248CFD;
|
||||
|
||||
/* Glow / glass effects */
|
||||
--color-border-glow: rgba(36, 92, 249, 0.25);
|
||||
--color-glass: rgba(14, 16, 25, 0.7);
|
||||
--color-glass-hover: rgba(22, 25, 36, 0.8);
|
||||
--color-glass-border: rgba(26, 30, 46, 0.6);
|
||||
|
||||
/* Pill text */
|
||||
--text-pill: 0.6875rem;
|
||||
--text-pill--line-height: 1.2;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
font-family: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
--font-display: "Outfit Variable", "Outfit", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
/* Gradient presets */
|
||||
--gradient-brand: linear-gradient(135deg, #245CF9, #8A29E6);
|
||||
--gradient-brand-hover: linear-gradient(135deg, #4b7bfa, #a04ff0);
|
||||
--gradient-surface: linear-gradient(180deg, #0e1019, #07080e);
|
||||
--gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.06), transparent 70%);
|
||||
--gradient-border: linear-gradient(135deg, #245CF9, #3615CF);
|
||||
}
|
||||
|
||||
/* ── Light mode colour overrides ────────────────────────────── */
|
||||
/* ── Light mode overrides ────────────────────────────────────── */
|
||||
|
||||
[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* Remap semantic surface tokens */
|
||||
--color-surface-0: #ffffff;
|
||||
--color-surface-1: #f4f4f5;
|
||||
--color-surface-2: #e4e4e7;
|
||||
--color-surface-3: #d4d4d8;
|
||||
--color-border: #e4e4e7;
|
||||
--color-border-subtle: #f0f0f2;
|
||||
--color-accent-muted: rgba(99, 102, 241, 0.10);
|
||||
/* Surfaces — cool-tinted whites */
|
||||
--color-surface-0: #f8f9fc;
|
||||
--color-surface-1: #f0f1f6;
|
||||
--color-surface-2: #e6e8f0;
|
||||
--color-surface-3: #d8dbe6;
|
||||
--color-surface-4: #c8cdd9;
|
||||
--color-border: #dfe1ea;
|
||||
--color-border-subtle: #eeeff4;
|
||||
|
||||
/* Swap zinc scale: dark values become light equivalents.
|
||||
Tailwind v4 exposes these as --color-zinc-{step}. */
|
||||
--color-zinc-50: #18181b;
|
||||
--color-zinc-100: #27272a;
|
||||
--color-zinc-200: #3f3f46;
|
||||
--color-zinc-300: #52525b;
|
||||
--color-zinc-400: #71717a;
|
||||
--color-zinc-500: #71717a;
|
||||
--color-zinc-600: #a1a1aa;
|
||||
--color-zinc-700: #d4d4d8;
|
||||
--color-zinc-800: #e4e4e7;
|
||||
--color-zinc-900: #f4f4f5;
|
||||
--color-zinc-950: #ffffff;
|
||||
/* Text — deep blue-blacks */
|
||||
--color-text-primary: #0f1729;
|
||||
--color-text-secondary: #5a6078;
|
||||
--color-text-muted: #9298ad;
|
||||
--color-text-accent: #245CF9;
|
||||
|
||||
/* Glass — light translucency */
|
||||
--color-glass: rgba(240, 241, 246, 0.75);
|
||||
--color-glass-hover: rgba(230, 232, 240, 0.8);
|
||||
--color-glass-border: rgba(223, 225, 234, 0.6);
|
||||
--color-border-glow: rgba(36, 92, 249, 0.2);
|
||||
--color-accent-muted: rgba(36, 92, 249, 0.08);
|
||||
|
||||
/* Gradients — lighter versions */
|
||||
--gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.04), transparent 70%);
|
||||
--gradient-surface: linear-gradient(180deg, #f0f1f6, #f8f9fc);
|
||||
|
||||
/* Remap Tailwind zinc scale for light mode */
|
||||
--color-zinc-50: #0f1729;
|
||||
--color-zinc-100: #1e2233;
|
||||
--color-zinc-200: #3a3f54;
|
||||
--color-zinc-300: #5a6078;
|
||||
--color-zinc-400: #7a7f94;
|
||||
--color-zinc-500: #8b90a5;
|
||||
--color-zinc-600: #9298ad;
|
||||
--color-zinc-700: #c8cdd9;
|
||||
--color-zinc-800: #dfe1ea;
|
||||
--color-zinc-900: #f0f1f6;
|
||||
--color-zinc-950: #f8f9fc;
|
||||
|
||||
/* Keep black/white correct for light mode */
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
}
|
||||
|
||||
/* ── Global base styles ──────────────────────────────────────── */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--color-surface-0);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
/* ── Scrollbar ───────────────────────────────────────────────── */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -86,14 +140,11 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-hover, #52525b);
|
||||
background: var(--color-surface-4);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--scrollbar-hover: #a1a1aa;
|
||||
}
|
||||
/* ── Window drag regions ─────────────────────────────────────── */
|
||||
|
||||
/* Window drag regions for custom title bar */
|
||||
.drag-region {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
@@ -102,22 +153,58 @@ body {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Thinking dots animation */
|
||||
/* ── Utility classes ─────────────────────────────────────────── */
|
||||
|
||||
.glass-surface {
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-glass-border);
|
||||
}
|
||||
|
||||
.glow-border {
|
||||
border: 1px solid var(--color-border-glow);
|
||||
box-shadow: 0 0 12px rgba(36, 92, 249, 0.08), inset 0 0 12px rgba(36, 92, 249, 0.04);
|
||||
}
|
||||
|
||||
.brand-gradient-text {
|
||||
background: var(--gradient-brand);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.brand-gradient-bg {
|
||||
background: var(--gradient-brand);
|
||||
}
|
||||
|
||||
.brand-gradient-bg:hover {
|
||||
background: var(--gradient-brand-hover);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ── Thinking dots animation ─────────────────────────────────── */
|
||||
|
||||
@keyframes thinking-dot {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
0%, 80%, 100% {
|
||||
opacity: 0.25;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
30% {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.thinking-dot {
|
||||
animation: thinking-dot 1.4s ease-in-out infinite;
|
||||
animation: thinking-dot 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.thinking-dot:nth-child(2) {
|
||||
@@ -128,14 +215,38 @@ body {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
/* Auto-resize textarea helper */
|
||||
/* Flowing gradient wave for thinking state */
|
||||
@keyframes thinking-wave {
|
||||
0% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.thinking-wave {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(36, 92, 249, 0.3) 25%,
|
||||
rgba(138, 41, 230, 0.3) 50%,
|
||||
rgba(36, 140, 253, 0.3) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: thinking-wave 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Auto-resize textarea ────────────────────────────────────── */
|
||||
|
||||
.auto-resize-textarea {
|
||||
field-sizing: content;
|
||||
min-height: 44px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* ── Markdown composer (Lexical) ────────────────────────── */
|
||||
/* ── Markdown composer (Lexical) ─────────────────────────────── */
|
||||
|
||||
.markdown-composer-content {
|
||||
position: relative;
|
||||
@@ -146,9 +257,9 @@ body {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 10px 16px 4px 16px;
|
||||
font-size: 14px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
color: #f4f4f5;
|
||||
color: var(--color-text-primary);
|
||||
outline: none;
|
||||
cursor: text;
|
||||
}
|
||||
@@ -162,9 +273,9 @@ body {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 16px;
|
||||
font-size: 14px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
color: #52525b;
|
||||
color: var(--color-text-muted);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -176,6 +287,7 @@ body {
|
||||
|
||||
/* Headings */
|
||||
.mc-h1, .mc-h2, .mc-h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
@@ -190,11 +302,11 @@ body {
|
||||
.mc-strikethrough { text-decoration: line-through; }
|
||||
.mc-underline { text-decoration: underline; }
|
||||
.mc-inline-code {
|
||||
background: rgba(63, 63, 70, 0.6);
|
||||
border-radius: 3px;
|
||||
padding: 1px 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.9em;
|
||||
background: rgba(30, 34, 51, 0.7);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
@@ -214,28 +326,28 @@ body {
|
||||
|
||||
/* Blockquote */
|
||||
.mc-blockquote {
|
||||
border-left: 3px solid #3f3f46;
|
||||
border-left: 3px solid var(--color-surface-4);
|
||||
padding-left: 0.75em;
|
||||
color: #a1a1aa;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
.mc-code-block {
|
||||
display: block;
|
||||
background: rgba(24, 24, 27, 0.8);
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 6px;
|
||||
padding: 26px 10px 6px 10px;
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.9em;
|
||||
background: rgba(7, 8, 14, 0.8);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 26px 12px 8px 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.88em;
|
||||
white-space: pre-wrap;
|
||||
tab-size: 2;
|
||||
margin: 4px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Language selector overlays positioned outside Lexical-managed DOM */
|
||||
/* Language selector overlays */
|
||||
.mc-code-overlays-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -256,74 +368,76 @@ body {
|
||||
.mc-code-lang-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(39, 39, 42, 0.9);
|
||||
border: 1px solid #3f3f46;
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
color: #a1a1aa;
|
||||
color: var(--color-text-secondary);
|
||||
font-family: inherit;
|
||||
font-size: 10px;
|
||||
padding: 2px 18px 2px 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 3px center;
|
||||
background-size: 10px;
|
||||
}
|
||||
|
||||
.mc-code-lang-select:hover {
|
||||
border-color: #52525b;
|
||||
color: #d4d4d8;
|
||||
border-color: var(--color-surface-4);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mc-code-lang-select:focus {
|
||||
border-color: rgba(99, 102, 241, 0.5);
|
||||
border-color: var(--color-border-glow);
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.mc-link {
|
||||
color: #818cf8;
|
||||
color: var(--color-text-accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Syntax highlighting tokens (dark theme) */
|
||||
.mc-tok-comment { color: #6b7280; font-style: italic; }
|
||||
.mc-tok-keyword { color: #c084fc; }
|
||||
.mc-tok-string { color: #86efac; }
|
||||
.mc-tok-number { color: #fbbf24; }
|
||||
.mc-tok-boolean { color: #fbbf24; }
|
||||
.mc-tok-constant { color: #fbbf24; }
|
||||
.mc-tok-function { color: #93c5fd; }
|
||||
.mc-tok-builtin { color: #67e8f9; }
|
||||
.mc-tok-operator { color: #f9a8d4; }
|
||||
.mc-tok-punctuation { color: #a1a1aa; }
|
||||
.mc-tok-property { color: #7dd3fc; }
|
||||
.mc-tok-variable { color: #fca5a5; }
|
||||
.mc-tok-tag { color: #f87171; }
|
||||
.mc-tok-attr { color: #fdba74; }
|
||||
.mc-tok-atrule { color: #c084fc; }
|
||||
.mc-tok-selector { color: #86efac; }
|
||||
.mc-tok-regex { color: #fcd34d; }
|
||||
.mc-tok-symbol { color: #fbbf24; }
|
||||
.mc-tok-namespace { color: #f87171; opacity: 0.8; }
|
||||
.mc-tok-deleted { color: #fca5a5; text-decoration: line-through; }
|
||||
.mc-tok-inserted { color: #86efac; }
|
||||
/* ── Syntax highlighting tokens ──────────────────────────────── */
|
||||
|
||||
.mc-tok-comment { color: #5a6078; font-style: italic; }
|
||||
.mc-tok-keyword { color: #b07ef5; }
|
||||
.mc-tok-string { color: #6ee7b7; }
|
||||
.mc-tok-number { color: #f9c846; }
|
||||
.mc-tok-boolean { color: #f9c846; }
|
||||
.mc-tok-constant { color: #f9c846; }
|
||||
.mc-tok-function { color: #7ba1fc; }
|
||||
.mc-tok-builtin { color: #5ccbee; }
|
||||
.mc-tok-operator { color: #e8a0c8; }
|
||||
.mc-tok-punctuation { color: #8b90a5; }
|
||||
.mc-tok-property { color: #65b8f7; }
|
||||
.mc-tok-variable { color: #f5a0a0; }
|
||||
.mc-tok-tag { color: #f07070; }
|
||||
.mc-tok-attr { color: #f0b070; }
|
||||
.mc-tok-atrule { color: #b07ef5; }
|
||||
.mc-tok-selector { color: #6ee7b7; }
|
||||
.mc-tok-regex { color: #f0d860; }
|
||||
.mc-tok-symbol { color: #f9c846; }
|
||||
.mc-tok-namespace { color: #f07070; opacity: 0.8; }
|
||||
.mc-tok-deleted { color: #f5a0a0; text-decoration: line-through; }
|
||||
.mc-tok-inserted { color: #6ee7b7; }
|
||||
|
||||
/* ── React Flow overrides ────────────────────────────────────── */
|
||||
|
||||
/* React Flow dark theme overrides */
|
||||
.react-flow__node {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.react-flow__edge-path {
|
||||
stroke: #52525b;
|
||||
stroke: var(--color-surface-4);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.react-flow__edge.selected .react-flow__edge-path {
|
||||
stroke: #818cf8;
|
||||
stroke: #245CF9;
|
||||
stroke-width: 2.5;
|
||||
filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.4));
|
||||
filter: drop-shadow(0 0 6px rgba(36, 92, 249, 0.4));
|
||||
}
|
||||
|
||||
.react-flow__edge.animated .react-flow__edge-path {
|
||||
@@ -338,32 +452,33 @@ body {
|
||||
}
|
||||
|
||||
.react-flow__controls {
|
||||
border: 1px solid #27272a;
|
||||
background: #18181b;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface-1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.react-flow__controls button {
|
||||
background: #18181b;
|
||||
border-color: #27272a;
|
||||
color: #a1a1aa;
|
||||
background: var(--color-surface-1);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.react-flow__controls button:hover {
|
||||
background: #27272a;
|
||||
color: #e4e4e7;
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.react-flow__minimap {
|
||||
background: #09090b;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 8px;
|
||||
background: var(--color-surface-0);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Sidebar running-session pulse animation */
|
||||
/* ── Sidebar running-session pulse ───────────────────────────── */
|
||||
|
||||
@keyframes sidebar-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
@@ -373,7 +488,41 @@ body {
|
||||
animation: sidebar-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Markdown prose styles for chat messages */
|
||||
/* Flowing accent bar for running sessions */
|
||||
@keyframes accent-flow {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 0% 200%; }
|
||||
}
|
||||
|
||||
.accent-flow {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#245CF9 0%,
|
||||
#8A29E6 50%,
|
||||
#245CF9 100%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
animation: accent-flow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Ambient glow effect ─────────────────────────────────────── */
|
||||
|
||||
@keyframes ambient-pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.ambient-glow {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.4;
|
||||
animation: ambient-pulse 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Markdown prose styles ───────────────────────────────────── */
|
||||
|
||||
.markdown-content {
|
||||
line-height: 1.7;
|
||||
word-break: break-word;
|
||||
@@ -393,11 +542,12 @@ body {
|
||||
.markdown-content h4,
|
||||
.markdown-content h5,
|
||||
.markdown-content h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
color: var(--color-zinc-200);
|
||||
color: var(--color-text-primary);
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.4;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.markdown-content h1 { font-size: 1.125rem; }
|
||||
@@ -430,9 +580,9 @@ body {
|
||||
}
|
||||
|
||||
.markdown-content blockquote {
|
||||
border-left: 3px solid var(--color-surface-3);
|
||||
border-left: 3px solid var(--color-surface-4);
|
||||
padding-left: 1em;
|
||||
color: var(--color-zinc-400);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
@@ -455,7 +605,7 @@ body {
|
||||
.markdown-content th {
|
||||
background: var(--color-surface-1);
|
||||
font-weight: 600;
|
||||
color: var(--color-zinc-300);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.markdown-content hr {
|
||||
@@ -466,7 +616,7 @@ body {
|
||||
|
||||
.markdown-content strong {
|
||||
font-weight: 600;
|
||||
color: var(--color-zinc-200);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.markdown-content em {
|
||||
|
||||
Reference in New Issue
Block a user