Jeffrey Smith
6fff84f40a
Fix v0.6.13 spacing regressions with half-step tokens (--sp-1h 6px, --sp-2h 10px). Purge ~65 stale hex/rgba fallback values from var() calls including all old gold #b38a4e references. Self-host DM Sans and JetBrains Mono woff2 fonts, eliminating Google Fonts CDN dependency. Standardize border-radius to three tokens (--radius-sm 4px, --radius 8px, --radius-lg 12px) across all kernel CSS and 12 extension packages. Also fixes: theme settings showing resolved mode instead of stored preference, surface-inner overflow causing notes scrollbar and chat input clipping at high zoom, user menu drift at scale >100% from zoom-unaware fixed positioning, and three undefined CSS variable references. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
193 lines
7.1 KiB
CSS
193 lines
7.1 KiB
CSS
/* ── variables.css ────────────────────────────
|
|
Theme variables, reset, base styles
|
|
──────────────────────────────────────────── */
|
|
|
|
/* ── Self-hosted fonts (zero external dependencies) ── */
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
font-style: normal;
|
|
font-weight: 300 700;
|
|
font-display: swap;
|
|
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
font-style: normal;
|
|
font-weight: 300 700;
|
|
font-display: swap;
|
|
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
|
|
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400 500;
|
|
font-display: swap;
|
|
src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400 500;
|
|
font-display: swap;
|
|
src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
|
|
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
/* ==========================================
|
|
Armature
|
|
Clean utility layout · Open WebUI inspired
|
|
========================================== */
|
|
|
|
:root {
|
|
/* ── Core palette (Dark — default) ────────── */
|
|
--bg: #0e0e10;
|
|
--bg-surface: #18181b;
|
|
--bg-raised: #222227;
|
|
--bg-hover: #2a2a30;
|
|
--bg-active: #2f2f38;
|
|
--bg-elevated: #42424e;
|
|
--border: #2e2e35;
|
|
--border-elevated: #555560;
|
|
--border-light: #3a3a42;
|
|
--text: #e8e8ed;
|
|
--text-2: #9898a8;
|
|
--text-3: #6b6b7b;
|
|
--accent: #6c9fff;
|
|
--accent-hover: #84b0ff;
|
|
--accent-dim: rgba(108,159,255,0.12);
|
|
--danger: #ef4444;
|
|
--success: #22c55e;
|
|
--warning: #eab308;
|
|
--purple: #a78bfa;
|
|
--purple-dim: rgba(167,139,250,0.10);
|
|
|
|
/* ── Contrast text for solid-color backgrounds ── */
|
|
--text-on-color: #fff;
|
|
--text-on-warning: #000;
|
|
|
|
/* ── Light variants (badge/pill text on dim backgrounds) ── */
|
|
--accent-light: #93c5fd;
|
|
--danger-light: #f87171;
|
|
--success-light: #4ade80;
|
|
--warning-light: #fbbf24;
|
|
|
|
/* ── Dim variants (badge/pill backgrounds) ── */
|
|
--danger-dim: rgba(239,68,68,0.2);
|
|
--success-dim: rgba(34,197,94,0.2);
|
|
--warning-dim: rgba(234,179,8,0.2);
|
|
|
|
/* ── Surfaces ────────────────────────────── */
|
|
--bg-primary: #0e0e10;
|
|
--bg-secondary: #151517;
|
|
--overlay: rgba(0,0,0,0.55);
|
|
--glass: rgba(255,255,255,0.03);
|
|
--input-bg: #1a1a1f;
|
|
--user-bubble: rgba(108,159,255,0.08);
|
|
--danger-bg: rgba(239,68,68,0.12);
|
|
--bg-code: #1a1a22;
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
|
|
|
/* ── Layout ──────────────────────────────── */
|
|
--radius-sm: 4px;
|
|
--radius: 8px;
|
|
--radius-lg: 12px;
|
|
--sidebar-w: 260px;
|
|
--sidebar-rail: 52px;
|
|
--font: 'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--mono: 'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
--transition: 180ms ease;
|
|
|
|
/* -- Spacing (4px grid + half-steps) ------- */
|
|
--sp-1: 0.25rem; /* 4px */
|
|
--sp-1h: 0.375rem; /* 6px */
|
|
--sp-2: 0.5rem; /* 8px */
|
|
--sp-2h: 0.625rem; /* 10px */
|
|
--sp-3: 0.75rem; /* 12px */
|
|
--sp-4: 1rem; /* 16px */
|
|
--sp-5: 1.25rem; /* 20px */
|
|
--sp-6: 1.5rem; /* 24px */
|
|
--sp-8: 2rem; /* 32px */
|
|
--sp-10: 2.5rem; /* 40px */
|
|
--sp-12: 3rem; /* 48px */
|
|
|
|
/* -- Breakpoints --------------------------
|
|
Mobile: max-width: 768px
|
|
Tablet: max-width: 1024px
|
|
Desktop: default (no query)
|
|
----------------------------------------- */
|
|
|
|
/* Banner system — set by JS from /api/v1/admin/settings/banner */
|
|
--banner-top-height: 0px;
|
|
--banner-bottom-height: 0px;
|
|
--banner-bg: transparent;
|
|
--banner-fg: transparent;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ── Light Theme ─────────────────────────────── */
|
|
[data-theme="light"] {
|
|
--bg: #f7f7fa;
|
|
--bg-surface: #ffffff;
|
|
--bg-raised: #eff0f3;
|
|
--bg-hover: #e5e6eb;
|
|
--bg-active: #dddee5;
|
|
--bg-elevated: #ffffff;
|
|
--border: #d5d6dc;
|
|
--border-elevated: #c0c0c8;
|
|
--border-light: #c2c3cb;
|
|
--text: #1a1a2e;
|
|
--text-2: #555770;
|
|
--text-3: #8b8da3;
|
|
--accent: #4a7cdb;
|
|
--accent-hover: #3968c4;
|
|
--accent-dim: rgba(74,124,219,0.09);
|
|
--danger: #dc2626;
|
|
--success: #16a34a;
|
|
--warning: #ca8a04;
|
|
--purple: #7c3aed;
|
|
--purple-dim: rgba(124,58,237,0.08);
|
|
|
|
--text-on-color: #fff;
|
|
--text-on-warning: #000;
|
|
|
|
--accent-light: #2563eb;
|
|
--danger-light: #dc2626;
|
|
--success-light: #16a34a;
|
|
--warning-light: #ca8a04;
|
|
|
|
--danger-dim: rgba(220,38,38,0.09);
|
|
--success-dim: rgba(22,163,74,0.09);
|
|
--warning-dim: rgba(202,138,4,0.09);
|
|
|
|
--bg-primary: #f7f7fa;
|
|
--bg-secondary: #ecedf2;
|
|
--overlay: rgba(0,0,0,0.25);
|
|
--glass: rgba(0,0,0,0.02);
|
|
--input-bg: #f2f3f6;
|
|
--user-bubble: rgba(74,124,219,0.06);
|
|
--danger-bg: #fef2f2;
|
|
--bg-code: #f0f0f2;
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
|
|
|
|
/* Global scrollbar styling */
|
|
* { 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: var(--radius-sm); }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
::selection { background: var(--accent-dim); }
|
|
|