/*
:filename: bigi_hdr_theme.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Color theme for bigi_hdr.html. Dark red, gold accents.
-------------------------------------------------------------------------
Copyright (C) 2026 Brigitte Bigi, CNRS
Laboratoire Parole et Langage, Aix-en-Provence, France
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see .
This banner notice must not be removed.
-------------------------------------------------------------------------
Registered via ThemeManager only -- never load with a static ,
bigi_hdr.css already does that for the page's non-theme rules:
themes.register('dossier', './bigi_hdr_theme.css');
Architecture:
- Color variables are unlayered so they win over all wexa.css @layer rules
regardless of load order.
- --custom-color1/--custom-color2 (chapter/slide accents) are inside
@layer theme so that unlayered page-specific CSS (e.g. book.css) can
override them without specificity games.
*/
/* =========================================================================
Typography. Base (normal mode)
========================================================================= */
:root:not(.contrast) {
--font-family-sans: SansFont, system-ui, Arial, sans-serif;
--font-family-serif: var(--font-family-sans);
}
/* =========================================================================
Light mode. CSS variable overrides (unlayered)
========================================================================= */
:root:not(.dark) {
--body-bg-color: linear-gradient(135deg, rgb(77, 5, 8) 0%, rgb(77, 5, 8) 10%, rgb(150, 20, 20) 35%, rgb(210, 184, 20) 100%);;
--bg-color: rgb(246, 245, 238);
--bg-color-alt: rgb(250, 250, 235);
--blockquote-border-color: rgb(80, 25, 40);
--border-color: rgb(210, 184, 20);
--border-color-alt: rgba(28, 28, 28, 0.5);
--outline-color: rgb(234 71 93);
/* The ground of the bars is the darkest red of the gradient of the page:
its first stop. The ink is the pale one, a dark red being unreadable
on it. */
--nav-fg-color: rgb(237, 237, 204);
--nav-bg-color: rgb(77, 5, 8);
--buttons-bg-color: rgb(80, 25, 40);
--buttons-fg-color: rgb(247, 244, 230);
/* Text: warm browns instead of the wexa blues */
--fg-color: rgb(38, 24, 24);
--fg-color-alt: rgb(78, 52, 48);
--hr-color: rgba(120, 60, 50, 0.35);
--shadow-color: rgba(78, 52, 48, 0.2);
/* Headings */
--h1-color: rgb(38, 24, 24);
--h2-color: rgb(58, 38, 36);
--h3-color: rgb(78, 52, 48);
--h4-color: rgb(98, 60, 54);
--h5-color: rgb(110, 62, 54);
--h6-color: rgb(120, 62, 54);
/* Links, list markers and quotes */
--a-color: rgb(150, 90, 105);
--li-color: rgb(128, 45, 40);
--blockquote-footer-color: rgb(110, 70, 60);
/* Buttons, header and footer */
--buttons-bg-color-hover: rgb(110, 38, 52);
--header-fg-color: rgb(38, 18, 14);
--header-bg-color: rgba(246, 245, 238, 0.6);
--footer-bg-color: rgb(248, 246, 236);
--footer-fg-color: rgb(58, 38, 34);
--dialog-icon-color: rgb(247, 244, 230);
--img-bg-color: rgba(250, 250, 250, 0.4);
/* Marked text, code, inputs and progress */
--mark-bg-color: rgba(210, 184, 20, 0.35);
--mark-fg-color: rgb(38, 24, 24);
--code-bg-color: rgba(210, 184, 20, 0.18);
--inputs-bg-color: rgb(252, 251, 245);
--progress-bg-color: rgb(228, 224, 206);
--progress-fg-color: rgb(150, 20, 20);
/* Tables */
--table-border-color: rgba(110, 22, 22, 0.18);
--table-cell-bg-color: rgb(250, 249, 244);
--table-row-stripped-bg-color: rgb(242, 241, 234);;
--table-head-bg-color: rgb(254, 253, 247);
--table-head-fg-color: rgb(38, 24, 24);
--table-caption-bg-color: rgb(248, 242, 218);
--table-caption-fg-color: rgb(78, 52, 48);
/* Neutral alerts, tuned to the palette. Warning, error and success keep
their wexa defaults: their meaning comes before the decoration.
--info-color: rgb(120, 60, 20);
--info-bg-color: rgba(250, 242, 220, 0.75);
--tips-color: rgb(128, 92, 8);
--tips-bg-color: rgba(250, 246, 224, 0.75);*/
}
/* =========================================================================
Dark mode. CSS variable overrides (unlayered)
Wrapped in @media not print, like the .dark block of wexa.css: on paper
these values would beat the :root of print.css, which is less specific,
and the document would be printed with the colors of the dark theme.
========================================================================= */
@media not print {
:root.dark {
--body-bg-color: linear-gradient(135deg, rgb(47, 4, 6) 0%, rgb(110, 16, 17) 35%, rgb(160, 134, 18) 100%);;
/* Main colors
--body-bg-color: rgb(20, 12, 12);*/
--bg-color: rgb(26, 16, 16);
--bg-color-alt: rgb(16, 6, 6);
--fg-color: rgb(240, 234, 216);
--fg-color-alt: rgb(206, 190, 168);
--border-color: rgb(150, 120, 96);
--border-color-alt: rgba(210, 184, 20, 0.14);
--hr-color: rgba(210, 184, 20, 0.30);
--outline-color: rgba(255, 200, 60, 0.85);
--shadow-color: rgba(210, 184, 20, 0.20);
--columns-sep-color-light: rgb(70, 50, 40);
--columns-sep-color-dark: rgb(30, 20, 20);
/* Header, navigation and footer */
--header-bg-color: rgb(26, 16, 16);
--header-fg-color: rgb(247, 244, 230);
--nav-bg-color: rgb(47, 4, 6);
--nav-fg-color: rgb(237, 237, 204);
--footer-bg-color: rgb(24, 15, 15);
--footer-fg-color: rgb(206, 190, 168);
--img-bg-color: rgba(247, 244, 244, 0.75);
/* Buttons */
--buttons-bg-color: rgb(150, 30, 34);
--buttons-bg-color-hover: rgb(178, 44, 46);
--buttons-fg-color: rgb(247, 244, 230);
--dialog-icon-color: rgb(26, 16, 16);
/* Headings */
--h1-color: rgb(240, 216, 140);
--h2-color: rgb(232, 200, 120);
--h3-color: rgb(222, 186, 112);
--h4-color: rgb(222, 186, 112);
--h5-color: rgb(210, 172, 106);
--h6-color: rgb(200, 160, 100);
/* Links, list markers and quotes */
--a-color: rgb(232, 196, 96);
--li-color: rgb(214, 168, 104);
--blockquote-border-color: rgb(210, 184, 20);
--blockquote-footer-color: rgb(190, 170, 148);
/* Marked text, code, inputs and progress */
--mark-bg-color: rgba(210, 184, 20, 0.40);
--mark-fg-color: rgb(26, 16, 16);
--code-bg-color: rgba(210, 184, 20, 0.14);
--inputs-bg-color: rgb(36, 23, 23);
--progress-bg-color: rgb(38, 24, 24);
--progress-fg-color: rgb(210, 184, 20);
/* Switch */
--switch-bg-color: rgb(48, 24, 24);
--switch-slider-off-color: rgb(140, 110, 90);
--switch-slider-on-color: rgb(210, 184, 20);
/* Tables */
--table-border-color: rgba(210, 184, 20, 0.18);
--table-cell-bg-color: rgb(30, 19, 19);
--table-row-stripped-bg-color: rgb(38, 24, 24);
--table-head-bg-color: rgb(48, 14, 16);
--table-head-fg-color: rgb(240, 234, 216);
--table-caption-bg-color: rgb(48, 14, 16);
--table-caption-fg-color: rgb(206, 190, 168);
/* Neutral alerts, tuned to the palette */
--info-color: rgb(240, 200, 130);
--info-bg-color: rgb(48, 32, 12);
--tips-color: rgb(255, 220, 130);
--tips-bg-color: rgb(52, 42, 12);
}
}
/* =========================================================================
Decoration overrides, inside @layer theme
========================================================================= */
@layer theme {
/* Chapter/slide accent colors, override book.css/slides.css defaults */
:root {
--custom-color1: rgb(110, 22, 22);
--custom-color2: rgb(247, 244, 230);
}
.dark {
--custom-color1: rgb(210, 184, 20);
--custom-color2: rgb(26, 16, 16);
}
}