/* ===================================================================== JEREMYWORTH.UK — TEMPORARY TWO-SURFACE TEST (DARK + LIGHT) 16 October 2026 DARK: #000088 page / search #000055 structural / code LIGHT: #F3F0DC page / search #CFC6A5 structural / code Structural = header, tabs, footer, primary sidebar panel, code blocks, inline code, code-line highlighting, secondary panels. The backgrounds of coloured callouts and functional colour accents are NOT redesigned. INSTALL: load LAST in mkdocs.yml > extra_css, AFTER the three original stylesheets. REMOVE the two older *-dark-test.css / *-light-test.css entries; this single test replaces both. ROLLBACK: remove this entry and rebuild. Scoped to screen + the existing Material dos-dark / dos-light schemes; Vim, print CSS, type, syntax colour and page layout are untouched. ===================================================================== */ @media screen { /* ------------------------------------------------------------------- Colour assignments: two structural backgrounds per scheme. ------------------------------------------------------------------- */ [data-md-color-scheme="dos-dark"] { --jw-surface-page: #000088; --jw-surface-structure: #000055; /* Existing project variables referenced in the original CSS. */ --borland-bg: var(--jw-surface-page) !important; --borland-bg-2: var(--jw-surface-structure) !important; --borland-brand-blue: var(--jw-surface-structure) !important; --borland-surface-page: var(--jw-surface-page) !important; --borland-surface-panel: var(--jw-surface-structure) !important; --borland-surface-secondary: var(--jw-surface-structure) !important; --borland-surface-strong: var(--jw-surface-structure) !important; /* MkDocs Material background variables: no intermediate opacity blues. */ --md-default-bg-color: var(--jw-surface-page) !important; --md-default-bg-color--light: var(--jw-surface-page) !important; --md-default-bg-color--lighter: var(--jw-surface-page) !important; --md-default-bg-color--lightest: var(--jw-surface-structure) !important; --md-primary-fg-color: var(--jw-surface-structure) !important; --md-primary-fg-color--light: var(--jw-surface-structure) !important; --md-primary-fg-color--dark: var(--jw-surface-structure) !important; --md-footer-bg-color: var(--jw-surface-structure) !important; --md-footer-bg-color--dark: var(--jw-surface-structure) !important; --md-code-bg-color: var(--jw-surface-structure) !important; --md-code-hl-color: var(--jw-surface-structure) !important; } [data-md-color-scheme="dos-light"] { --jw-surface-page: #F3F0DC; --jw-surface-structure: #CFC6A5; --borland-surface-page: var(--jw-surface-page) !important; --borland-surface-panel: var(--jw-surface-structure) !important; --borland-surface-secondary: var(--jw-surface-structure) !important; --borland-surface-strong: var(--jw-surface-structure) !important; --md-default-bg-color: var(--jw-surface-page) !important; --md-default-bg-color--light: var(--jw-surface-page) !important; --md-default-bg-color--lighter: var(--jw-surface-page) !important; --md-default-bg-color--lightest: var(--jw-surface-structure) !important; --md-primary-fg-color: var(--jw-surface-structure) !important; --md-primary-fg-color--light: var(--jw-surface-structure) !important; --md-primary-fg-color--dark: var(--jw-surface-structure) !important; --md-footer-bg-color: var(--jw-surface-structure) !important; --md-footer-bg-color--dark: var(--jw-surface-structure) !important; --md-code-bg-color: var(--jw-surface-structure) !important; --md-code-hl-color: var(--jw-surface-structure) !important; /* Header/footer were previously blue with pale type. */ --md-primary-bg-color: var(--borland-paper-ink) !important; --md-primary-bg-color--light: var(--borland-paper-muted) !important; --md-footer-fg-color: var(--borland-paper-ink) !important; --md-footer-fg-color--light: var(--borland-paper-ink) !important; --md-footer-fg-color--lighter: var(--borland-paper-ink) !important; } /* ------------------------------------------------------------------- Elements shared between light and dark schemes. ------------------------------------------------------------------- */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]), :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-container, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-main, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-main__inner { background-color: var(--jw-surface-page) !important; } /* Two header rows, footer and footer-meta must be a single surface. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-header, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-tabs, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-footer, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-footer-meta { background-color: var(--jw-surface-structure) !important; } /* Inset search uses the same colour as the main reading surface. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-search__form, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-search__form:hover, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-search__form:focus-within { background-color: var(--jw-surface-page) !important; border-color: var(--jw-surface-structure) !important; box-shadow: none !important; } /* Left navigation, code containers, inline code, and tabbed code. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-sidebar--primary .md-sidebar__inner, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlight, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset pre, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset code:not(pre > code), :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .tabbed-labels, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .tabbed-content { background-color: var(--jw-surface-structure) !important; } /* Material's optional filename / line-numbered code wrappers. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlighttable, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlighttable td.code, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlighttable td.linenos, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlight .filename { background-color: var(--jw-surface-structure) !important; } /* The code itself inherits its enclosing code-block surface. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlight pre, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlight pre code, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset pre > code { background-color: transparent !important; } /* MkDocs/Pygments highlighted code lines: no third surface colour. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlight .hll, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset .highlighttable .hll { background-color: var(--jw-surface-structure) !important; } /* Original behaviour: hide a primary sidebar panel with no links. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-sidebar--primary .md-sidebar__inner:not(:has(.md-nav__link)) { background: transparent !important; } /* Mobile drawer is an extension of the reading surface. Its navigation headings and selected entries use the structural surface. */ @media (max-width: 76.234375em) { :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary .md-nav__scrollwrap, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary .md-nav__inner { background-color: var(--jw-surface-page) !important; } :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary > .md-nav__title, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary .md-nav__title[for="__drawer"], :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary .md-nav__item .md-nav__title, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-nav--primary .md-nav__item--active { background-color: var(--jw-surface-structure) !important; } } /* Booktabs-inspired tables in BOTH modes: no zebra striping. Body rows stay on the reading canvas, including alternate rows; column headings use the structural surface. Existing horizontal rules, typography and text/syntax accents are unchanged. */ :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset table:not([class]) th { background-color: var(--jw-surface-structure) !important; } :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset table:not([class]) td, :is([data-md-color-scheme="dos-dark"], [data-md-color-scheme="dos-light"]) .md-typeset table:not([class]) tr:nth-child(even) td { background-color: var(--jw-surface-page) !important; } /* Existing light-mode tooltips / copy notices also used a third paper shade. They are structural UI, so use parchment. */ [data-md-color-scheme="dos-light"] .md-dialog, [data-md-color-scheme="dos-light"] .md-tooltip, [data-md-color-scheme="dos-light"] .md-tooltip__inner { background-color: var(--jw-surface-structure) !important; } /* ------------------------------------------------------------------- Light-mode only: readable header / footer / search on parchment. ------------------------------------------------------------------- */ [data-md-color-scheme="dos-light"] .md-header, [data-md-color-scheme="dos-light"] .md-tabs, [data-md-color-scheme="dos-light"] .md-footer, [data-md-color-scheme="dos-light"] .md-footer-meta, [data-md-color-scheme="dos-light"] .md-header__title, [data-md-color-scheme="dos-light"] .md-header__topic, [data-md-color-scheme="dos-light"] .md-header__ellipsis, [data-md-color-scheme="dos-light"] .md-header__button, [data-md-color-scheme="dos-light"] .md-header__button svg { color: var(--borland-paper-ink) !important; } [data-md-color-scheme="dos-light"] .md-header__button:hover, [data-md-color-scheme="dos-light"] .md-header__button:focus, [data-md-color-scheme="dos-light"] .md-header__button:hover svg, [data-md-color-scheme="dos-light"] .md-header__button:focus svg { color: var(--borland-paper-link-hover) !important; fill: currentColor !important; } [data-md-color-scheme="dos-light"] .md-search__form, [data-md-color-scheme="dos-light"] .md-search__input, [data-md-color-scheme="dos-light"] .md-search__icon, [data-md-color-scheme="dos-light"] .md-search__options { color: var(--borland-paper-ink) !important; } [data-md-color-scheme="dos-light"] .md-search__input::placeholder { color: var(--borland-paper-muted) !important; } [data-md-color-scheme="dos-light"] .md-footer a, [data-md-color-scheme="dos-light"] .md-footer .md-social__link, [data-md-color-scheme="dos-light"] .md-footer .md-social__link svg { color: var(--borland-paper-link-hover) !important; fill: currentColor !important; } [data-md-color-scheme="dos-light"] .md-footer a:hover, [data-md-color-scheme="dos-light"] .md-footer a:focus, [data-md-color-scheme="dos-light"] .md-footer .md-social__link:hover, [data-md-color-scheme="dos-light"] .md-footer .md-social__link:focus, [data-md-color-scheme="dos-light"] .md-footer .md-social__link:hover svg, [data-md-color-scheme="dos-light"] .md-footer .md-social__link:focus svg { color: var(--borland-paper-ink) !important; fill: currentColor !important; } @media (max-width: 76.234375em) { [data-md-color-scheme="dos-light"] .md-nav--primary > .md-nav__title, [data-md-color-scheme="dos-light"] .md-nav--primary .md-nav__title[for="__drawer"] { color: var(--borland-paper-ink) !important; } } }