mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-24 05:28:46 +02:00
David KayaandCopilot
05b3771544
- Fix useElapsedTimer to use completedAt instead of Date.now() for finished runs, preventing wildly inaccurate durations (e.g. 9802m) when reopening old sessions - Extract formatElapsedMs as a shared pure formatter; reuse in SubagentActivityCard - Standardize icon column alignment across all activity row types using consistent w-4 + h-[18px] icon containers - Redesign collapsed header: status dot with pulse animation, bolder status label, tabular-nums on elapsed time, cleaner hierarchy - Polish expanded stream: timeline spine connecting activity items, more prominent intent dividers with pill-style background, tightened vertical rhythm - Add unit tests for formatElapsedMs Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1085 lines
25 KiB
CSS
1085 lines
25 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);
|
|
}
|
|
|
|
/* ── Update banner slide-up ──────────────────────────────────── */
|
|
|
|
@keyframes update-banner-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.update-banner-enter {
|
|
animation: update-banner-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ── Turn activity panel ─────────────────────────────────────── */
|
|
|
|
@keyframes turn-activity-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
.turn-activity-enter {
|
|
animation: turn-activity-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes turn-activity-row-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-6px);
|
|
}
|
|
}
|
|
|
|
.turn-activity-row {
|
|
animation: turn-activity-row-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes intent-divider-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleX(0.7);
|
|
}
|
|
}
|
|
|
|
.turn-activity-row[role="separator"] {
|
|
animation: intent-divider-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* Timeline spine connecting activity items */
|
|
.activity-timeline-spine > .turn-activity-row:not([role="separator"]) {
|
|
position: relative;
|
|
}
|
|
|
|
.activity-timeline-spine > .turn-activity-row:not([role="separator"]):not(:last-child)::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 7px; /* center of the 16px (w-4) icon column */
|
|
top: 22px; /* below the icon center */
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: var(--color-border);
|
|
opacity: 0.25;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Batch selection animations ──────────────────────────────── */
|
|
|
|
@keyframes selection-checkbox-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes selection-checkbox-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
.selection-checkbox-enter {
|
|
animation: selection-checkbox-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.selection-checkbox-exit {
|
|
animation: selection-checkbox-out 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes checkbox-check {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
40% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.checkbox-check {
|
|
animation: checkbox-check 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes batch-action-bar-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.batch-action-bar-enter {
|
|
animation: batch-action-bar-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes undo-toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes undo-toast-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.96);
|
|
}
|
|
}
|
|
|
|
.undo-toast-enter {
|
|
animation: undo-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.undo-toast-exit {
|
|
animation: undo-toast-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes toast-progress {
|
|
from {
|
|
transform: scaleX(1);
|
|
}
|
|
to {
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
|
|
/* ── 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,
|
|
.update-banner-enter,
|
|
.turn-activity-enter,
|
|
.turn-activity-row,
|
|
.turn-activity-row[role="separator"],
|
|
.qp-panel-enter,
|
|
.qp-response-enter,
|
|
.qp-actions-enter,
|
|
.qp-dropdown-enter {
|
|
animation: none;
|
|
}
|
|
|
|
.selection-checkbox-enter,
|
|
.selection-checkbox-exit,
|
|
.checkbox-check,
|
|
.batch-action-bar-enter,
|
|
.undo-toast-enter,
|
|
.undo-toast-exit {
|
|
animation: none;
|
|
}
|
|
|
|
.qp-border-streaming {
|
|
animation: none;
|
|
border-color: var(--color-accent);
|
|
}
|
|
}
|
|
|
|
/* ── Quick Prompt — Glass Command Bar ────────────────────────── */
|
|
|
|
/* Override body/root backgrounds when inside the quickprompt window so the
|
|
transparent BrowserWindow doesn't show a colored rectangle behind the
|
|
rounded panel. The data attribute is set on the <body> in quickprompt.html. */
|
|
body[data-quickprompt],
|
|
body[data-quickprompt] #root {
|
|
background: transparent !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
html:has(body[data-quickprompt]) {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.qp-container {
|
|
background: transparent;
|
|
}
|
|
|
|
.qp-panel {
|
|
background: var(--color-surface-1);
|
|
/* No box-shadow — on Windows transparent windows, shadows paint visibly
|
|
on the transparent canvas and create a visible dark rectangle. */
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
/* Border states */
|
|
.qp-border-idle {
|
|
border: 1px solid var(--color-glass-border);
|
|
}
|
|
|
|
.qp-border-complete {
|
|
border: 1px solid var(--color-border-glow);
|
|
}
|
|
|
|
/* Animated breathing border during streaming */
|
|
@keyframes qp-border-breathe {
|
|
0%, 100% {
|
|
border-color: rgba(36, 92, 249, 0.35);
|
|
}
|
|
50% {
|
|
border-color: rgba(138, 41, 230, 0.4);
|
|
}
|
|
}
|
|
|
|
.qp-border-streaming {
|
|
border: 1px solid rgba(36, 92, 249, 0.35);
|
|
animation: qp-border-breathe 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Panel entrance animation */
|
|
@keyframes qp-panel-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.96) translateY(-6px);
|
|
}
|
|
}
|
|
|
|
.qp-panel-enter {
|
|
animation: qp-panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* Response area entrance */
|
|
@keyframes qp-response-in {
|
|
from {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
max-height: min(55vh, 520px);
|
|
}
|
|
}
|
|
|
|
.qp-response-enter {
|
|
animation: qp-response-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* Action bar entrance */
|
|
@keyframes qp-actions-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
.qp-actions-enter {
|
|
animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
|
|
}
|
|
|
|
/* Dropdown entrance — opens downward */
|
|
@keyframes qp-dropdown-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-6px) scale(0.97);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.qp-dropdown-enter {
|
|
animation: qp-dropdown-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.markdown-content code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85em;
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: 0.25rem;
|
|
padding: 0.15em 0.35em;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background: var(--color-surface-0);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.875em 1em;
|
|
overflow-x: auto;
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: var(--color-text-accent);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-text-accent);
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
color: var(--color-accent-hover);
|
|
}
|