mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-23 21:18:40 +02:00
David KayaandCopilot
deb5c96d58
Wire message-reclassified sidecar events through the main process to the renderer, where reclassified messages are filtered out of the main transcript and collected into a collapsible ThinkingProcess component. Main process changes: - Route message-reclassified via dedicated onMessageReclassified callback - Add applyMessageReclassified handler that sets messageKind and emits the session event for the renderer - Forward assistant-intent and reasoning-delta as turn-scoped events Renderer changes: - Split session.messages into visibleMessages and thinkingMessages - Render ThinkingProcess above the last assistant message - ThinkingProcess auto-expands during active turns, collapses on finish - Update messagePhase to skip thinking-kind messages for final detection Tests: - 3 new sessionWorkspace tests for reclassification apply/dedup/ignore - 2 new messagePhase tests for thinking-kind handling - Updated runTurnPending test fixtures for new callback Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
765 lines
18 KiB
CSS
765 lines
18 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ── Design tokens: "Luminous Depth" ────────────────────────── */
|
|
|
|
@theme {
|
|
/* 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: "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 overrides ────────────────────────────────────── */
|
|
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* 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;
|
|
|
|
/* 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;
|
|
|
|
--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 ───────────────────────────────────────────────── */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-surface-3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-surface-4);
|
|
}
|
|
|
|
/* ── Window drag regions ─────────────────────────────────────── */
|
|
|
|
.drag-region {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* ── 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%, 80%, 100% {
|
|
opacity: 0.25;
|
|
transform: scale(0.8);
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.thinking-dot {
|
|
animation: thinking-dot 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.thinking-dot:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.thinking-dot:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* 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-content {
|
|
position: relative;
|
|
}
|
|
|
|
.markdown-composer-editable {
|
|
min-height: 52px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
padding: 10px 16px 4px 16px;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
color: var(--color-text-primary);
|
|
outline: none;
|
|
cursor: text;
|
|
}
|
|
|
|
.markdown-composer-editable[contenteditable="false"] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.markdown-composer-placeholder {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 16px;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
color: var(--color-text-muted);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
.mc-p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Headings */
|
|
.mc-h1, .mc-h2, .mc-h3 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
.mc-h1 { font-size: 1.1em; }
|
|
.mc-h2 { font-size: 1.05em; }
|
|
.mc-h3 { font-size: 1em; }
|
|
|
|
/* Inline formatting */
|
|
.mc-bold { font-weight: 600; }
|
|
.mc-italic { font-style: italic; }
|
|
.mc-strikethrough { text-decoration: line-through; }
|
|
.mc-underline { text-decoration: underline; }
|
|
.mc-inline-code {
|
|
background: rgba(30, 34, 51, 0.7);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
/* Lists */
|
|
.mc-ul {
|
|
list-style-type: disc;
|
|
padding-left: 1.5em;
|
|
margin: 2px 0;
|
|
}
|
|
.mc-ol {
|
|
list-style-type: decimal;
|
|
padding-left: 1.5em;
|
|
margin: 2px 0;
|
|
}
|
|
.mc-li {
|
|
margin: 1px 0;
|
|
}
|
|
|
|
/* Blockquote */
|
|
.mc-blockquote {
|
|
border-left: 3px solid var(--color-surface-4);
|
|
padding-left: 0.75em;
|
|
color: var(--color-text-secondary);
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* Code block */
|
|
.mc-code-block {
|
|
display: block;
|
|
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 */
|
|
.mc-code-overlays-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mc-code-lang-overlay {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
user-select: none;
|
|
}
|
|
|
|
.mc-code-lang-select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
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='%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: var(--color-surface-4);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.mc-code-lang-select:focus {
|
|
border-color: var(--color-border-glow);
|
|
}
|
|
|
|
/* Link */
|
|
.mc-link {
|
|
color: var(--color-text-accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ── 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__node {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.react-flow__edge-path {
|
|
stroke: var(--color-surface-4);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.react-flow__edge.selected .react-flow__edge-path {
|
|
stroke: #245CF9;
|
|
stroke-width: 2.5;
|
|
filter: drop-shadow(0 0 6px rgba(36, 92, 249, 0.4));
|
|
}
|
|
|
|
.react-flow__edge.animated .react-flow__edge-path {
|
|
stroke-dasharray: 5;
|
|
animation: reactflow-dash 0.5s linear infinite;
|
|
}
|
|
|
|
@keyframes reactflow-dash {
|
|
to {
|
|
stroke-dashoffset: -10;
|
|
}
|
|
}
|
|
|
|
.react-flow__controls {
|
|
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: var(--color-surface-1);
|
|
border-color: var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.react-flow__controls button:hover {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.react-flow__minimap {
|
|
background: var(--color-surface-0);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* ── Sidebar running-session pulse ───────────────────────────── */
|
|
|
|
@keyframes sidebar-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.sidebar-pulse {
|
|
animation: sidebar-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ── Command palette ──────────────────────────────────────────── */
|
|
|
|
@keyframes palette-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.98);
|
|
}
|
|
}
|
|
|
|
.palette-enter {
|
|
animation: palette-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes palette-backdrop-enter {
|
|
from { opacity: 0; }
|
|
}
|
|
|
|
.palette-backdrop-enter {
|
|
animation: palette-backdrop-enter 0.15s ease-out;
|
|
}
|
|
|
|
/* ── Overlay transitions ─────────────────────────────────────── */
|
|
|
|
@keyframes overlay-backdrop-in {
|
|
from { opacity: 0; }
|
|
}
|
|
|
|
@keyframes overlay-panel-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px) scale(0.99);
|
|
}
|
|
}
|
|
|
|
@keyframes overlay-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(12px);
|
|
}
|
|
}
|
|
|
|
.overlay-backdrop-enter {
|
|
animation: overlay-backdrop-in 0.18s ease-out;
|
|
}
|
|
|
|
.overlay-panel-enter {
|
|
animation: overlay-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.overlay-slide-enter {
|
|
animation: overlay-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ── Chat message appearance ─────────────────────────────────── */
|
|
|
|
@keyframes message-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
.message-enter {
|
|
animation: message-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* ── Message action toolbar ──────────────────────────────────── */
|
|
|
|
@keyframes msg-actions-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(2px) scale(0.96);
|
|
}
|
|
}
|
|
|
|
.msg-actions-enter {
|
|
animation: msg-actions-in 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* ── Sidebar session item ────────────────────────────────────── */
|
|
|
|
@keyframes session-item-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-6px);
|
|
}
|
|
}
|
|
|
|
.session-item-enter {
|
|
animation: session-item-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* ── Approval banner slide ───────────────────────────────────── */
|
|
|
|
@keyframes banner-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
.banner-slide-enter {
|
|
animation: banner-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ── Thinking process section ────────────────────────────────── */
|
|
|
|
@keyframes thinking-process-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
.thinking-process-enter {
|
|
animation: thinking-process-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* ── Respect reduced motion ──────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.palette-enter,
|
|
.palette-backdrop-enter,
|
|
.overlay-backdrop-enter,
|
|
.overlay-panel-enter,
|
|
.overlay-slide-enter,
|
|
.message-enter,
|
|
.msg-actions-enter,
|
|
.session-item-enter,
|
|
.banner-slide-enter,
|
|
.thinking-process-enter {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ── Markdown prose styles ───────────────────────────────────── */
|
|
|
|
.markdown-content {
|
|
line-height: 1.7;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.markdown-content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-content > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
margin-top: 1.25em;
|
|
margin-bottom: 0.5em;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.markdown-content h1 { font-size: 1.125rem; }
|
|
.markdown-content h2 { font-size: 1rem; }
|
|
.markdown-content h3 { font-size: 0.9375rem; }
|
|
|
|
.markdown-content p {
|
|
margin-top: 0.625em;
|
|
margin-bottom: 0.625em;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.markdown-content ul { list-style-type: disc; }
|
|
.markdown-content ol { list-style-type: decimal; }
|
|
|
|
.markdown-content li {
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.markdown-content li > p {
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 3px solid var(--color-surface-4);
|
|
padding-left: 1em;
|
|
color: var(--color-text-secondary);
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.markdown-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.markdown-content th,
|
|
.markdown-content td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.5em 0.75em;
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-content th {
|
|
background: var(--color-surface-1);
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.markdown-content hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 1.5em 0;
|
|
}
|
|
|
|
.markdown-content strong {
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.markdown-content em {
|
|
font-style: italic;
|
|
}
|
|
|
|
.markdown-content img {
|
|
max-width: 100%;
|
|
border-radius: 0.5rem;
|
|
}
|