196 lines
5.8 KiB
CSS
196 lines
5.8 KiB
CSS
/* ── Layout variables ──────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
--topbar-height: 40px;
|
|
--sidebar-width: 240px;
|
|
--copilot-width: 420px;
|
|
|
|
/* Brand accent — warm terracotta */
|
|
--accent: #d95d4e;
|
|
--accent-rgb: 217, 93, 78;
|
|
--accent-hover: #c04a3c;
|
|
--accent-soft: rgba(217, 93, 78, 0.12);
|
|
--accent-ring: rgba(217, 93, 78, 0.28);
|
|
|
|
/* Tool-card accents — one hue per tool category (semantic icon key).
|
|
Light mode; the dark block below lifts them for contrast. */
|
|
--tool-edit: #2563eb;
|
|
--tool-read: #0891b2;
|
|
--tool-list: #7c3aed;
|
|
--tool-search: #9333ea;
|
|
--tool-shell: #475569;
|
|
--tool-subagent: #0d9488;
|
|
--tool-image: #db2777;
|
|
--tool-config: #ca8a04;
|
|
--tool-introspection: #6b7280;
|
|
--tool-mcp: var(--accent);
|
|
--tool-generic: #8a7a66;
|
|
|
|
/* Radius scale — friendly, generous */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
|
|
/* Sidebar — warm cream */
|
|
--sidebar-bg: #f6f0e6;
|
|
--sidebar-hover: rgba(63, 52, 40, 0.06);
|
|
--sidebar-active-bg: rgba(217, 93, 78, 0.13);
|
|
--sidebar-label-color: #9c8a70;
|
|
--sidebar-text: #7a6a58;
|
|
--sidebar-text-active: #a63f31;
|
|
--sidebar-divider: #e9dfcf;
|
|
--sidebar-brand-color: #3f3428;
|
|
|
|
/* Main area — light mode */
|
|
--toolbar-border: #e9dfd3;
|
|
--placeholder-color: #a89a85;
|
|
--copilot-bg: #fbf8f3;
|
|
|
|
/* Copilot messages — light mode */
|
|
--msg-assistant-bg: #f4ede2;
|
|
--msg-assistant-text: #3f3428;
|
|
--msg-user-bg: #d95d4e;
|
|
--msg-user-text: #ffffff;
|
|
|
|
/* Card surfaces */
|
|
--card-bg: #ffffff;
|
|
--card-border: #e9dfd3;
|
|
--card-shadow: 0 1px 3px rgba(63, 52, 40, 0.06), 0 1px 2px rgba(63, 52, 40, 0.04);
|
|
--card-radius: var(--radius-md);
|
|
|
|
/* Bootstrap overrides */
|
|
--bs-primary: #d95d4e;
|
|
--bs-primary-rgb: 217, 93, 78;
|
|
--bs-link-color: #c04a3c;
|
|
--bs-link-color-rgb: 192, 74, 60;
|
|
--bs-body-bg: #faf7f2;
|
|
--bs-body-bg-rgb: 250, 247, 242;
|
|
--bs-secondary-bg: #f0e9dc;
|
|
--bs-tertiary-bg: #f6f0e6;
|
|
--bs-border-color: #e9dfd3;
|
|
--bs-border-radius: 0.6rem;
|
|
--bs-border-radius-sm: 0.45rem;
|
|
--bs-border-radius-lg: 0.9rem;
|
|
}
|
|
|
|
[data-bs-theme="dark"] {
|
|
--accent: #e8836f;
|
|
--accent-rgb: 232, 131, 111;
|
|
--accent-hover: #f0967f;
|
|
--accent-soft: rgba(232, 131, 111, 0.16);
|
|
--accent-ring: rgba(232, 131, 111, 0.35);
|
|
|
|
/* Tool-card accents — lifted for dark backgrounds */
|
|
--tool-edit: #60a5fa;
|
|
--tool-read: #22d3ee;
|
|
--tool-list: #a78bfa;
|
|
--tool-search: #c084fc;
|
|
--tool-shell: #94a3b8;
|
|
--tool-subagent: #2dd4bf;
|
|
--tool-image: #f472b6;
|
|
--tool-config: #eab308;
|
|
--tool-introspection: #9ca3af;
|
|
--tool-generic: #b3a28c;
|
|
|
|
--sidebar-bg: #241f1a;
|
|
--sidebar-hover: rgba(236, 225, 211, 0.06);
|
|
--sidebar-active-bg: rgba(232, 131, 111, 0.16);
|
|
--sidebar-label-color: #7a6a55;
|
|
--sidebar-text: #b3a28c;
|
|
--sidebar-text-active: #f0a495;
|
|
--sidebar-divider: #3d332a;
|
|
--sidebar-brand-color: #ece1d3;
|
|
|
|
--toolbar-border: #3d332a;
|
|
--placeholder-color: #8a7a66;
|
|
--copilot-bg: #211c17;
|
|
|
|
--msg-assistant-bg: #2e2721;
|
|
--msg-assistant-text: #ece1d3;
|
|
--msg-user-bg: #b6493b;
|
|
--msg-user-text: #ffffff;
|
|
|
|
--bs-primary: #e8836f;
|
|
--bs-primary-rgb: 232, 131, 111;
|
|
--bs-link-color: #e8836f;
|
|
--bs-link-color-rgb: 232, 131, 111;
|
|
|
|
--bs-body-bg: #1c1814;
|
|
--bs-body-bg-rgb: 28, 24, 20;
|
|
--bs-secondary-bg: #2e2721;
|
|
--bs-tertiary-bg: #2e2721;
|
|
--bs-border-color: #3d332a;
|
|
|
|
/* Card surfaces — dark mode */
|
|
--card-bg: #27211b;
|
|
--card-border: #3d332a;
|
|
--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ── Reset ─────────────────────────────────────────────────────────────────── */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', var(--bs-font-sans-serif);
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
/* Keyboard users get a clear, warm focus ring everywhere. */
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Respect users who ask for less motion. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ── Root layout ───────────────────────────────────────────────────────────── */
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-body {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Global card surface ────────────────────────────────────────────────────── */
|
|
|
|
.agent-card,
|
|
.llm-card,
|
|
.model-card,
|
|
.models-type-card,
|
|
.inbox-card,
|
|
.approval-card,
|
|
.clarification-card,
|
|
.approval-rule-card,
|
|
.task-card {
|
|
background: var(--card-bg) !important;
|
|
border-color: var(--card-border) !important;
|
|
border-radius: var(--card-radius) !important;
|
|
box-shadow: var(--card-shadow) !important;
|
|
}
|