233 lines
7.2 KiB
CSS
233 lines
7.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'Ubuntu Sans';
|
|
src: url('/fonts/ubuntu-sans/UbuntuSans[wght].woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Ubuntu Sans';
|
|
src: url('/fonts/ubuntu-sans/UbuntuSans-Italic[wght].woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
[v-cloak] { display: none; }
|
|
|
|
html, body { background: transparent; }
|
|
|
|
:root {
|
|
/* ── Typography ── */
|
|
--font-sans: 'Ubuntu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'Ubuntu Sans Mono', 'Consolas', 'Monaco', monospace;
|
|
--text-base: 0.875rem; /* 14px — single base size for all UI text */
|
|
|
|
/* Surface colors - slate blue */
|
|
--bg: #0f172a;
|
|
--surface: #1e293b;
|
|
--border: #334155;
|
|
--chat-bg: #0f172a;
|
|
--agent: #1e293b;
|
|
--agent-border:#475569;
|
|
--muted: #334155;
|
|
--muted-text: #94a3b8;
|
|
|
|
/* Text */
|
|
--text: #eee;
|
|
--text-dim: #888;
|
|
|
|
/* Semantic colors */
|
|
--accent: #818cf8; /* indigo — primary action / UI chrome */
|
|
--user-bubble: #2d5a3d; /* muted green — user messages */
|
|
--primary: #3b82f6; /* blue — info, links */
|
|
--secondary: #6366f1; /* indigo — secondary badges */
|
|
--success: #22c55e; /* green — yes, wrap up, positive */
|
|
--success-dim: #4ade80; /* light green — connected lamp */
|
|
--warn: #fbbf24; /* yellow — connecting, caution */
|
|
--error: #f87171; /* red-light — errors, destructive */
|
|
--focus: #4ade80; /* green — input focus rings */
|
|
|
|
/* Dim surface — used by system groups, subtle containers */
|
|
--bg-dim: #1a2133;
|
|
|
|
/* Disabled */
|
|
--disabled-opacity: 0.4;
|
|
|
|
/* Layout tokens */
|
|
--space-page: 32px; /* horizontal page gutter */
|
|
--space-gap: 8px; /* gap between stacked sections */
|
|
--space-inset: 12px; /* padding inside components */
|
|
--radius: 8px; /* cards, inputs, large buttons */
|
|
--radius-sm: 6px; /* toolbar buttons, badges */
|
|
--radius-panel: 12px; /* floating panels (sidebar, toolbar groups) */
|
|
--height-nav: 40px; /* top nav bar */
|
|
--height-btn: 32px; /* toolbar buttons */
|
|
--text-sm: var(--text-base); /* legacy alias — same as base now */
|
|
--text-xs: var(--text-base); /* legacy alias — same as base now */
|
|
|
|
/* Panel system — elevated floating containers */
|
|
--panel-bg: #1a2540;
|
|
--panel-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05);
|
|
--panel-gap: 6px; /* gap between panels and edges */
|
|
}
|
|
|
|
/* Mobile overrides: applied per-element in view CSS files, not via global var changes.
|
|
CSS vars stay constant across all breakpoints to prevent resize flicker. */
|
|
|
|
/* ── ERAS theme (bright) ────────────────────────────────────── */
|
|
[data-theme="eras"] {
|
|
--bg: #ffffff;
|
|
--surface: #f5f5f5;
|
|
--border: #e2e2e2;
|
|
--chat-bg: #fafafa;
|
|
--agent: #f0f0f0;
|
|
--agent-border:#d0d0d0;
|
|
--muted: #e8e8e8;
|
|
--muted-text: #8f8f8f;
|
|
|
|
--text: #212121;
|
|
--text-dim: #646464;
|
|
|
|
--accent: #005e83; /* eras teal-blue — nav, active, UI chrome */
|
|
--user-bubble: #fef3e5; /* warm orange tint for user messages */
|
|
--primary: #e25303; /* eras orange — links, actions */
|
|
--secondary: #3567fd;
|
|
--success: #009490; /* eras teal */
|
|
--success-dim: #00b8b3;
|
|
--warn: #ff8044;
|
|
--error: #df3131;
|
|
--focus: #e25303;
|
|
|
|
--bg-dim: #f0ece8;
|
|
--disabled-opacity: 0.4;
|
|
|
|
/* Markdown code blocks */
|
|
--code-bg: #f0f0f0;
|
|
--text-bright: #212121;
|
|
|
|
/* Nav links */
|
|
--nav-link: #005e83;
|
|
--nav-link-active: #005e83;
|
|
|
|
/* Send button */
|
|
--send-btn-bg: #e25303;
|
|
--send-btn-color: #ffffff;
|
|
|
|
/* Panel system */
|
|
--panel-bg: #ffffff;
|
|
--panel-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
/* iOS safe areas (notch, home indicator) */
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
}
|
|
|
|
/* Prevent iOS auto-zoom on input focus — set base to 16px globally
|
|
(iOS zooms when font-size < 16px). No breakpoint needed. */
|
|
input, select, textarea { font-size: 1rem; }
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-base);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-theme="eras"] {
|
|
--font-sans: 'Raleway', 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
/* ── Workhorse theme (neutral dark + 6 happy kids colors) ─── */
|
|
/* Palette: #73B96E #46915C #F25E44 #489FB2 #FFD96C #C895C0 */
|
|
/* Backgrounds: neutral grays, not from palette */
|
|
[data-theme="loop42"] {
|
|
--bg: #1A212C;
|
|
--surface: #222a36;
|
|
--border: #1D7872;
|
|
--chat-bg: #1e2630;
|
|
--agent: #222a36;
|
|
--agent-border:#1D7872;
|
|
--muted: #2a3340;
|
|
--muted-text: #71B095;
|
|
|
|
--text: #e8e6e0;
|
|
--text-dim: #71B095;
|
|
|
|
--accent: #1D7872; /* deep teal — grounded */
|
|
--user-bubble: #2a3340;
|
|
--primary: #71B095; /* sage green — links */
|
|
--btn-bg: #1D7872;
|
|
--btn-text: #e8e6e0;
|
|
--btn-hover: #71B095;
|
|
|
|
--input-bg: #222a36;
|
|
--input-border:#1D7872;
|
|
--input-text: #e8e6e0;
|
|
|
|
/* Panel system */
|
|
--panel-bg: #1e2630;
|
|
--panel-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 0 1px rgba(29,120,114,0.15);
|
|
}
|
|
|
|
/* Scrollbars — OverlayScrollbars handles main containers.
|
|
Fallback for any native scrollbar we missed. */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
|
/* Hide native scrollbar inside OverlayScrollbars viewports */
|
|
[data-overlayscrollbars-viewport] { scrollbar-width: none; }
|
|
[data-overlayscrollbars-viewport]::-webkit-scrollbar { display: none; }
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: var(--disabled-opacity); }
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Emoji: use system font so sizing is consistent across platforms */
|
|
.emoji, [role="img"] {
|
|
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Touch: prevent tap highlight on mobile */
|
|
* { -webkit-tap-highlight-color: transparent; }
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Mobile: tighter spacing ── */
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
--space-page: 12px;
|
|
--space-inset: 8px;
|
|
}
|
|
}
|