@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap"); :root { --text-color: black; --bg-color: white; --menu-title-color: black; --active-text-color: white; --active-bg-color: black; --hover-color: black; --scrollbar-thumb: #d0d0d0; --scrollbar-thumb-hover: #a0a0a0; --scrollbar: #d0d0d0 !important; } @media (prefers-color-scheme: dark) { :root { --text-color: #ffffff; --bg-color: #000000; --menu-title-color: #ffffff; --active-text-color: #000000; --active-bg-color: #ffffff; --hover-color: #ffffff; --scrollbar-thumb: #444444; --scrollbar-thumb-hover: #555555; --scrollbar: #444444 !important; } } /* Match the web app's palette. Override mdbook's per-theme tokens so the page picks up our colors regardless of which theme class mdbook applies to . Sidebar bg is intentionally one step off main bg so the sidebar reads as its own region without a hard border. */ /* Light: white main, near-white sidebar, pure-black text, monochrome links. */ html.light, html.rust { --bg: #ffffff; --fg: #000000; --sidebar-bg: #f5f5f5; --sidebar-fg: #000000; --sidebar-non-existant: #999999; --sidebar-active: #000000; --sidebar-spacer: #e0e0e0; --scrollbar: #d0d0d0; --icons: #666666; --icons-hover: #000000; --links: #000000; --inline-code-color: #000000; --theme-popup-bg: #ffffff; --theme-popup-border: #e0e0e0; --theme-hover: #f0f0f0; --quote-bg: #f5f5f5; --quote-border: #e0e0e0; --table-border-color: #e0e0e0; --table-header-bg: #fafafa; --table-alternate-bg: #f5f5f5; --searchbar-border-color: #d0d0d0; --searchbar-bg: #ffffff; --searchbar-fg: #000000; --searchbar-shadow-color: #d0d0d0; --searchresults-header-fg: #666666; --searchresults-border-color: #e0e0e0; --searchresults-li-bg: #f5f5f5; --search-mark-bg: #000000; } /* Dark: black main, near-black sidebar, pure-white text. */ html.ayu, html.coal, html.navy { --bg: #000000; --fg: #ffffff; --sidebar-bg: #0a0a0a; --sidebar-fg: #ffffff; --sidebar-non-existant: #666666; --sidebar-active: #ffffff; --sidebar-spacer: #333333; --scrollbar: #444444; --icons: #999999; --icons-hover: #ffffff; --links: #ffffff; --inline-code-color: #ffffff; --theme-popup-bg: #000000; --theme-popup-border: #333333; --theme-hover: #1a1a1a; --quote-bg: #1a1a1a; --quote-border: #333333; --table-border-color: #333333; --table-header-bg: #1a1a1a; --table-alternate-bg: #0a0a0a; --searchbar-border-color: #333333; --searchbar-bg: #1a1a1a; --searchbar-fg: #ffffff; --searchbar-shadow-color: #333333; --searchresults-header-fg: #999999; --searchresults-border-color: #333333; --searchresults-li-bg: #1a1a1a; --search-mark-bg: #ffffff; } /* JS-disabled fallback. mdbook's stylesheet sets light values on html:not(.js); we re-apply ours here so the no-JS render matches. */ html:not(.js) { --bg: #ffffff; --fg: #000000; --sidebar-bg: #f5f5f5; --sidebar-fg: #000000; --sidebar-active: #000000; --sidebar-spacer: #e0e0e0; --links: #000000; --inline-code-color: #000000; --quote-bg: #f5f5f5; --quote-border: #e0e0e0; --table-border-color: #e0e0e0; --table-header-bg: #fafafa; --table-alternate-bg: #f5f5f5; } @media (prefers-color-scheme: dark) { html:not(.js) { --bg: #000000; --fg: #ffffff; --sidebar-bg: #0a0a0a; --sidebar-fg: #ffffff; --sidebar-non-existant: #666666; --sidebar-active: #ffffff; --sidebar-spacer: #333333; --scrollbar: #444444; --icons: #999999; --icons-hover: #ffffff; --links: #ffffff; --inline-code-color: #ffffff; --theme-popup-bg: #000000; --theme-popup-border: #333333; --theme-hover: #1a1a1a; --quote-bg: #1a1a1a; --quote-border: #333333; --table-border-color: #333333; --table-header-bg: #1a1a1a; --table-alternate-bg: #0a0a0a; } } html { scrollbar-color: auto !important; scrollbar-width: auto !important; } ::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 0; } ::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } html { font-family: "Fira Code", monospace; font-optical-sizing: auto; font-style: normal; } code { font-family: "Fira Code", monospace; font-size: 14px; line-height: 1.6; } .menu-title { font-weight: bold; color: var(--menu-title-color); } .chapter-item { .active { color: var(--active-text-color) !important; background: var(--active-bg-color); } .active:hover { color: var(--active-text-color) !important; } } .chapter-link-wrapper > a:hover { color: var(--hover-color) !important; } #mdbook-theme-toggle, #mdbook-theme-list { display: none !important; } /* Stop the sidebar from replaying its slide animation on every page load. Each mdBook page is a full reload, so the table-of-contents `transform` transition can re-run on refresh and on every sidebar link click, reading as the sidebar "closing and reopening". We disable the transition until the page has finished loading — sidebar-load-guard.js adds `transitions-ready` to after the load event — so the initial render is instant while the deliberate open/close toggle still animates afterwards. Selectors cover the current theme (`.sidebar` / `.page-wrapper`) and older mdBook themes (`#sidebar` / `#page-wrapper`). */ html:not(.transitions-ready) #sidebar, html:not(.transitions-ready) .sidebar, html:not(.transitions-ready) #page-wrapper, html:not(.transitions-ready) .page-wrapper { transition: none !important; }