Nathan Schneider
d86483e5a1
The Oct 19 theming (light = #eaf3ea dashboard green wash, white cards/surfaces, per approval) was never committed - the Oct 21 pin-migration rebuild from this repo silently reverted the deployed theme to the older cream iteration. - custom.css: light block restored to the approved green-wash palette (primary #eaf3ea, white secondary/chat cards, green hover/tertiary/border); loading screen + bare page background match. - Dockerfile: manifest theme_color/background_color and the index.html theme-color media pair now follow the live palette (#eaf3ea light / #22271f deep pine dark). - custom2.js: sync ONE meta theme-color to the app's resolved theme (html.dark class + prefers-color-scheme listener) so Android status/nav bands and iOS safe areas track the theme at runtime; the static media pair remains as the no-JS fallback.
127 lines
4.4 KiB
CSS
127 lines
4.4 KiB
CSS
/* ============================================================
|
|
Inference Co-op branding — LibreChat overlay (v3)
|
|
Colors are pulled from the co-op homepage's own CSS variables
|
|
(inference.coop): --cream #faf8f5, --wash #eef4ea, --green-deep
|
|
#5b8c5a, --green-mid #6ba86b, --green-light #7ab87a, --ink
|
|
#2d3327, --muted #6b7a62, --border #e8e2d8, font Figtree.
|
|
LibreChat resolves its Tailwind colors through CSS variables on
|
|
html.light / html.dark (space-separated RGB) — overriding them
|
|
rebrands the WHOLE app through the existing theme system.
|
|
============================================================ */
|
|
|
|
html.light {
|
|
--surface-primary: 234 243 234; /* #eaf3ea — dashboard green wash, page background */
|
|
--surface-secondary: 255 255 255; /* sidebar + composer box: white cards */
|
|
--surface-tertiary: 240 246 239; /* light green chip background */
|
|
--surface-hover: 223 237 222; /* deeper green hover */
|
|
--surface-submit: 91 140 90; /* --green-deep #5b8c5a */
|
|
--surface-submit-hover: 107 168 107; /* --green-mid #6ba86b */
|
|
--accent-primary: 91 140 90; /* --green-deep */
|
|
--accent-primary-hover: 107 168 107; /* --green-mid */
|
|
--ring-primary: 91 140 90;
|
|
--link: 74 122 74;
|
|
--text-primary: 45 51 39; /* --ink #2d3327 */
|
|
--text-secondary: 107 122 98; /* --muted #6b7a62 */
|
|
--border-light: 205 224 203; /* green-tinted border */
|
|
--presentation: 234 243 234; /* composer band matches page */
|
|
--surface-chat: 255 255 255; /* chat box text areas: white */
|
|
--surface-composer-hover: 223 237 222;
|
|
}
|
|
|
|
html.dark {
|
|
--surface-primary: 34 39 31; /* deep pine */
|
|
--surface-secondary: 42 48 39;
|
|
--surface-tertiary: 52 59 48;
|
|
--surface-hover: 45 51 39; /* --ink */
|
|
--surface-submit: 122 184 122; /* --green-light #7ab87a */
|
|
--surface-submit-hover: 142 200 142;
|
|
--accent-primary: 122 184 122;
|
|
--accent-primary-hover: 142 200 142;
|
|
--ring-primary: 142 200 142;
|
|
--link: 142 200 142;
|
|
--text-primary: 232 245 232; /* #e8f5e8 */
|
|
--text-secondary: 148 160 140;
|
|
--border-light: 74 82 64;
|
|
--presentation: 34 39 31;
|
|
--surface-chat: 34 39 31;
|
|
--surface-composer-hover: 42 48 39;
|
|
}
|
|
|
|
/* ---- Figtree font (design kit, SIL OFL) — matches homepage & dashboard ---- */
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url('/assets/fonts/figtree-400.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url('/assets/fonts/figtree-500.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url('/assets/fonts/figtree-600.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url('/assets/fonts/figtree-700.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ---- Loading screen: brand the pre-React flash instead of white/black ---- */
|
|
#loading-container {
|
|
background-color: rgb(234, 243, 234); /* green wash */
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#loading-container {
|
|
background-color: rgb(34, 39, 31); /* deep pine */
|
|
}
|
|
}
|
|
|
|
|
|
/* Homepage font stack — Figtree first, self-hosted above */
|
|
html, body, button, input, select, textarea, [class*='font-'] {
|
|
font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
|
|
}
|
|
|
|
/* ---- Remove the "Don't have an account? Sign up" line ----
|
|
The <p> wraps the register link on auth pages. :has() hides the
|
|
whole paragraph (custom2.js is the MutationObserver fallback). */
|
|
p:has(> a[href*="register"]) {
|
|
display: none !important;
|
|
}
|
|
/* Belt-and-braces: hide any residual register/signup links */
|
|
a[href*="register"],
|
|
a[href*="signup"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ---- Footer: the LibreChat tagline is replaced at build time
|
|
(patch_ui_strings.py) with the co-op footer text; CSS just centers it ---- */
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
footer a {
|
|
color: rgb(var(--accent-primary));
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Bare page background: green wash in light, deep pine in dark — so any viewport
|
|
area the app UI does not cover (e.g. PWA navigation-bar insets) matches. */
|
|
html:not(.dark), html:not(.dark) body { background-color: rgb(234, 243, 234); }
|
|
html.dark, html.dark body { background-color: rgb(34, 39, 31); }
|