/* * A light modernization of the readthedocs theme, plus a dark mode. * * The theme hardcodes its palette, so the colors it uses are re-declared here * as tokens and the handful of rules that matter are pointed back at them. * `data-theme` is set on before first paint by the inline script in * overrides/main.html. */ :root { --bg: #fff; --bg-soft: #f4f6f8; --bg-code: #f6f8fa; --fg: #1f2328; --fg-soft: #5c6570; --border: #dde2e7; --accent: #1668c1; --accent-hover: #1f7ada; --btn: #1668c1; --sidebar-bg: #1b2027; --sidebar-header: #12518f; --sidebar-fg: #c3c9d1; --sidebar-hover: #262c35; --sidebar-section: #7f8b99; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04); /* Admonition tones, keyed to the theme's own admonition classes. */ --tone-note: #1668c1; --tone-tip: #10804f; --tone-warn: #a1650b; --tone-danger: #c0322b; } /* Dark is screen-only, so print falls back to the light tokens above rather than needing a second palette. */ @media screen { [data-theme="dark"] { --bg: #10151c; --bg-soft: #19202a; --bg-code: #161d26; --fg: #dae2ec; --fg-soft: #93a0b0; --border: #27303c; --accent: #79b8ff; --accent-hover: #9ccbff; --btn: #2f6fd0; --sidebar-bg: #141a22; --sidebar-header: #17324f; --sidebar-fg: #b6c0cd; --sidebar-hover: #202833; --sidebar-section: #8794a4; --shadow: none; color-scheme: dark; --tone-note: #79b8ff; --tone-tip: #56d364; --tone-warn: #e3b341; --tone-danger: #ff7b72; } } /* Layout: a wider measure and no gutter stripe beside the content. */ .wy-body-for-nav, .wy-nav-content-wrap, .wy-nav-content { background: var(--bg); } .wy-nav-content { max-width: 900px; padding: 2.4rem 3rem 4rem; } /* Typography: sans headings, slightly tighter, with room for anchor jumps. */ body, .rst-content .toctree-wrapper > p.caption, h1, h2, h3, h4, h5, h6, legend, .rst-content .sidebar .sidebar-title { font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--fg); } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.011em; scroll-margin-top: 1rem; } h1 { font-size: 2.1rem; } h2 { font-size: 1.55rem; margin-top: 2.2rem; } h3 { font-size: 1.2rem; margin-top: 1.8rem; } .rst-content p, .rst-content li { line-height: 1.7; } a, a:visited { color: var(--accent); } a:hover { color: var(--accent-hover); } .rst-content a code, .rst-content a:visited code { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Code: system mono stack, softer surfaces, rounded corners. */ code, .rst-content code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } .rst-content code, .rst-content .admonition code { color: var(--fg); background: var(--bg-soft); border-color: var(--border); border-radius: 6px; font-size: 87%; } .codehilite { background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } .codehilite pre { margin: 0; } .rst-content pre code { background: transparent; border: 0; color: var(--fg); font-size: 13px; line-height: 1.6; } /* Admonitions: a tinted card with a colored rule and a colored title, rather than the theme's solid header band, which is heavy on a dark background. Each type sets --tone and the shared rules below mix it into the surface. */ .rst-content .admonition { --tone: var(--tone-note); background: color-mix(in srgb, var(--tone) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--bg)); border-left: 3px solid var(--tone); border-radius: 8px; color: var(--fg); box-shadow: var(--shadow); } .rst-content .tip, .rst-content .hint, .rst-content .important { --tone: var(--tone-tip); } .rst-content .warning, .rst-content .attention, .rst-content .caution { --tone: var(--tone-warn); } .rst-content .danger, .rst-content .error { --tone: var(--tone-danger); } .rst-content .admonition > .admonition-title { background: transparent; color: var(--tone); padding: 0; margin: 0 0 6px; font-size: 92%; letter-spacing: 0.02em; text-transform: uppercase; } .rst-content .admonition > .admonition-title:before { color: var(--tone); } .rst-content .admonition > :last-child, .rst-content .admonition p:last-child { margin-bottom: 0; } .rst-content .admonition a { color: var(--accent); } /* Tables. The theme's JS tags each one .docutils at load, and its own rules are what has to be answered: cell borders are !important in theme_extra.css, the striping carries :not(.field-list), and thead is painted black. Its nowrap also clips wide tables, so let cells wrap instead. */ .rst-content table td, .rst-content table th { border-color: var(--border) !important; } .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td { background: var(--bg-soft); } .rst-content table.docutils thead, .wy-table thead { color: var(--fg); white-space: normal; } .rst-content table.docutils thead th { border-bottom: 2px solid var(--border); } .wy-table-responsive table td, .wy-table-responsive table th { white-space: normal; } .rst-content blockquote { border-left: 3px solid var(--border); padding-left: 1rem; color: var(--fg-soft); margin-left: 0; } hr { border-color: var(--border); } /* Sidebar: neutral slate instead of the theme's warm brown. */ .wy-nav-side { background: var(--sidebar-bg); } .wy-side-nav-search, .wy-nav-top { background: var(--sidebar-header); } .wy-side-nav-search > a { color: #fff; font-weight: 600; } .wy-side-nav-search input[type="text"] { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: #fff; box-shadow: none; } .wy-side-nav-search input[type="text"]::placeholder { color: #97a1ad; } .wy-menu-vertical a { color: var(--sidebar-fg); } .wy-menu-vertical a:hover { background: var(--sidebar-hover); } /* The theme paints the open subtree in light greys, which the dark rail cannot carry: flatten every level and mark the current page with a rule instead. The toctree-l2/l3 selectors are the theme's own, restated to match specificity. */ .wy-menu-vertical li.current, .wy-menu-vertical li.current a, .wy-menu-vertical li.toctree-l2.current > a, .wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a, .wy-menu-vertical li.toctree-l3.current > a, .wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a { background: transparent; border: none; color: var(--sidebar-fg); } .wy-menu-vertical li.current a:hover { background: var(--sidebar-hover); } .wy-menu-vertical li.current > a { color: #fff; font-weight: 600; } .wy-menu-vertical li.toctree-l1.current > a { background: var(--sidebar-hover); box-shadow: inset 3px 0 0 var(--accent-hover); } .wy-menu-vertical li button.toctree-expand { color: var(--sidebar-section); } .wy-menu-vertical li.current > a button.toctree-expand { color: #fff; } .wy-menu-vertical p.caption { color: var(--sidebar-section); } .wy-nav-side .wy-menu-vertical a:active { background: var(--accent); } /* Footer, breadcrumbs and the version bar follow the same tokens. */ .rst-content .wy-breadcrumbs, .wy-breadcrumbs li a { color: var(--fg-soft); } .wy-breadcrumbs li a:hover { color: var(--accent); } footer, footer p, footer span { color: var(--fg-soft); } [data-theme="dark"] .rst-versions, [data-theme="dark"] .rst-versions .rst-current-version { background: var(--sidebar-bg); color: var(--fg); } .btn-neutral { background: var(--bg-soft) !important; /* theme.css sets these !important */ color: var(--fg) !important; border-color: var(--border); } /* The search results page. Scope the input rule: an unscoped one would also catch the sidebar search box sitting on the header band. */ #mkdocs-search-results { color: var(--fg); } .search-results article { border-color: var(--border); } #mkdocs-search-query { background: var(--bg-soft); border-color: var(--border); color: var(--fg); } /* Theme toggle: a pill under the sidebar search, an icon in the mobile bar. The theme's print stylesheet hides both of its containers. */ .theme-toggle { display: block; margin: 0.6em auto 0; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #e6eaef; font-size: 80%; line-height: 1.6; cursor: pointer; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.14); } .theme-toggle .fa { margin-right: 6px; } .wy-nav-top .theme-toggle { position: absolute; top: 50%; right: 0.809em; transform: translateY(-50%); margin: 0; padding: 0 10px; font-size: 100%; } .theme-toggle-compact .fa { margin: 0; } /* Page tree plugin: its caret is a black SVG background, so flip it in dark mode, and let its buttons pick up the accent instead of the theme green. */ [data-theme="dark"] .pagetree summary::before { filter: invert(1); } .pagetree-toggle { background: var(--btn); color: #fff; border: 0; border-radius: 6px; padding: 4px 12px; box-shadow: none; } .pagetree-toggle:hover { filter: brightness(1.1); }