189 lines
7.5 KiB
CSS
189 lines
7.5 KiB
CSS
/* Inference Cooperative theme for Open WebUI — v3
|
|
House style: cream #faf8f5, ink #2d3327, greens #5b8c5a/#6ba86b/#7ab87a,
|
|
bronze #a97a4a, earthy red #b3543a. Figtree served same-origin.
|
|
|
|
v3 approach: STOP remapping Tailwind's gray tokens wholesale (v1/v2 broke
|
|
text contrast in both modes). Instead:
|
|
- Key everything off the app's OWN class strategy (html.dark), not
|
|
prefers-color-scheme, so the app's theme toggle stays authoritative.
|
|
- Tint only large surfaces (app background, sidebar, message bubbles).
|
|
- Leave ALL text tokens alone; add explicit high-contrast rules only where
|
|
Open WebUI's own defaults are too faint. */
|
|
|
|
/* ---------- Font (same-origin, no CORS needed) ---------- */
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/static/fonts/figtree-400.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url('/static/fonts/figtree-500.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url('/static/fonts/figtree-600.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('/static/fonts/figtree-700.woff2') format('woff2');
|
|
}
|
|
|
|
html, body {
|
|
font-family: 'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
|
|
}
|
|
|
|
/* ---------- Light mode (no .dark class): cream surfaces ---------- */
|
|
html:not(.dark) body {
|
|
background-color: #faf8f5 !important;
|
|
}
|
|
|
|
html:not(.dark) #sidebar {
|
|
background: linear-gradient(180deg, #f6f3ee 0%, #f1ede5 100%) !important;
|
|
border-right: 1px solid #e4e0d8 !important;
|
|
}
|
|
|
|
/* Chat text: near-black, explicitly (defense in depth — Open WebUI's own
|
|
text tokens are untouched, this only backstops) */
|
|
html:not(.dark) .markdown-prose {
|
|
color: #262b21;
|
|
}
|
|
|
|
/* ---------- Dark mode (.dark class): warm greens, bright text ---------- */
|
|
html.dark body {
|
|
background-color: #1f241b !important;
|
|
}
|
|
|
|
html.dark #sidebar {
|
|
background: linear-gradient(180deg, #262b21 0%, #1f241b 100%) !important;
|
|
border-right: 1px solid #3e4636 !important;
|
|
}
|
|
|
|
html.dark .markdown-prose {
|
|
color: #f0f3ea;
|
|
}
|
|
|
|
/* ---------- Accent: co-op green (emerald token family) ---------- */
|
|
:root {
|
|
--color-emerald-300: #7ab87a;
|
|
--color-emerald-400: #6ba86b;
|
|
--color-emerald-500: #5b8c5a;
|
|
--color-emerald-600: #4e7a4d;
|
|
}
|
|
|
|
/* Primary buttons (submit arrow, CTAs) */
|
|
button.bg-black, .btn-primary {
|
|
background-color: #5b8c5a !important;
|
|
color: #fff !important;
|
|
}
|
|
button.bg-black:hover, .btn-primary:hover {
|
|
background-color: #4e7a4d !important;
|
|
}
|
|
|
|
/* Toggles / selected states */
|
|
.peer:checked ~ .bg-emerald-500,
|
|
.bg-emerald-500 {
|
|
background-color: #6ba86b !important;
|
|
}
|
|
|
|
/* User message bubble: soft green tint (matches Open WebUI's gray-100 bubble) */
|
|
html:not(.dark) div.bg-gray-100[class*="rounded"] {
|
|
background-color: #eaf3ea !important;
|
|
}
|
|
html.dark div.bg-gray-100[class*="rounded"] {
|
|
background-color: #333a2d !important;
|
|
}
|
|
|
|
/* ---------- Code blocks ---------- */
|
|
.codeblock {
|
|
border-radius: 12px !important;
|
|
border: 1px solid #e4e0d8;
|
|
}
|
|
html.dark .codeblock {
|
|
border-color: #3e4636;
|
|
}
|
|
pre, code {
|
|
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace !important;
|
|
}
|
|
|
|
/* ---------- Scrollbars ---------- */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-thumb { background: #c9d3c5; border-radius: 8px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #6ba86b; }
|
|
html.dark ::-webkit-scrollbar-thumb { background: #3e4636; }
|
|
html.dark ::-webkit-scrollbar-thumb:hover { background: #6ba86b; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
/* ---------- Selection ---------- */
|
|
::selection { background: #cfe4cf; }
|
|
html.dark ::selection { background: #3e5a3d; }
|
|
|
|
/* ---------- Links ---------- */
|
|
html:not(.dark) a { color: #3f6e3e; }
|
|
html.dark a { color: #8fc98f; }
|
|
|
|
/* ---------- Background dots (homepage motif echo) ----------
|
|
Open WebUI's app root is an OPAQUE full-viewport wrapper (bg-white/dark:bg-gray-900),
|
|
so a background layer (body::before, z-index 0) only shows pre-hydration — the
|
|
"flash then disappear" effect. Instead: a fixed overlay of pale dots sits ON TOP of
|
|
everything (pointer-events: none) at very low opacity, below modals/menus (z-40+). */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2; /* above app shell bg & content surfaces, below z-40 overlays */
|
|
pointer-events: none; /* never intercept clicks/hover */
|
|
background-image:
|
|
radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 20px at 28% 52%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 24px at 55% 30%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 18px at 68% 42%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 22px at 86% 38%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 17px at 81% 72%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 16px at 9% 88%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 18px at 70% 80%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 18px at 66% 30%, #d9c3a8 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 4% 12%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 12% 34%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 16% 78%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 9px at 24% 6%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 31% 22%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 38% 70%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 6px at 47% 10%, #b7d8c2 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 52% 55%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 63% 14%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 6px at 61% 66%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 72% 58%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 8px at 78% 8%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 83% 26%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 6px at 76% 48%, #bfdccd 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 93% 16%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 90% 60%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 95% 46%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 89% 86%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 40% 88%, #b5d4c0 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 57% 84%, #a8cdb4 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 20% 44%, #d9c3a8 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 44% 38%, #e0cbb2 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 87% 70%, #e0cbb2 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 33% 76%, #d9c3a8 0 100%, transparent 100%),
|
|
radial-gradient(circle 5px at 58% 72%, #e0cbb2 0 100%, transparent 100%),
|
|
radial-gradient(circle 6px at 97% 78%, #d9c3a8 0 100%, transparent 100%),
|
|
radial-gradient(circle 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%);
|
|
opacity: 0.35;
|
|
}
|
|
html.dark body::before { opacity: 0.18; }
|
|
/* Keep code blocks readable above the dots */
|
|
pre, code, .codeblock { position: relative; z-index: 3; background-color: inherit; }
|