/* Kiln default theme — a fresh, modern documentation theme. Light/dark schemes are driven by the [data-palette] attribute on , set before paint by the inline script in base.leaf. Brand colours come from the --kiln-primary / --kiln-accent variables injected per-site. */ :root { --kiln-font-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kiln-font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --kiln-radius: 10px; --kiln-header-height: 60px; --kiln-sidebar-width: 280px; --kiln-toc-width: 240px; --kiln-max-width: 1500px; } /* ---- Colour schemes ---- */ [data-palette="light"] { --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eef0f3; --text: #1c1c1e; --muted: #5b6270; --border: #e3e6ea; --code-bg: #f4f5f7; --code-text: #24292f; --header-bg: rgba(255, 255, 255, 0.85); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04); --primary: var(--kiln-primary, #1c1c1e); --accent: var(--kiln-accent, #2f6feb); --on-primary: #ffffff; } [data-palette="dark"] { --bg: #0f1115; --surface: #161922; --surface-2: #1f2330; --text: #e6e8ec; --muted: #9aa3b2; --border: #2a2f3a; --code-bg: #1a1d26; --code-text: #e6e8ec; --header-bg: rgba(15, 17, 21, 0.85); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --primary: var(--kiln-accent, #5b8dff); --accent: var(--kiln-accent, #5b8dff); --on-primary: #0f1115; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kiln-header-height) + 16px); } body { margin: 0; font-family: var(--kiln-font-text); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Header ---- */ .kiln-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; height: var(--kiln-header-height); padding: 0 20px; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .kiln-logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1.05rem; } .kiln-logo:hover { text-decoration: none; } .kiln-logo-img { height: 30px; width: auto; display: block; } .kiln-header-spacer { flex: 1; } .kiln-header button, .kiln-controls button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer; padding: 8px; } .kiln-header button:hover, .kiln-controls button:hover { color: var(--text); background: var(--surface-2); } /* Header / drawer control groups (version + language switchers, palette, repo). */ .kiln-controls { display: flex; align-items: center; gap: 12px; } .kiln-controls-drawer { display: none; } /* shown only in the mobile drawer */ /* Hidden on large screens (the qualified selector beats `.kiln-header button`). */ .kiln-header .kiln-search-toggle { display: none; } /* Hidden on large screens (selector beats `.kiln-header button`); shown on mobile in the responsive block below. */ .kiln-header .kiln-menu-toggle { display: none; } .kiln-repo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.85rem; } .kiln-repo:hover { background: var(--surface-2); text-decoration: none; } .kiln-palette-toggle .kiln-icon-moon { display: none; } [data-palette="dark"] .kiln-palette-toggle .kiln-icon-sun { display: none; } [data-palette="dark"] .kiln-palette-toggle .kiln-icon-moon { display: block; } /* ---- Layout ---- */ .kiln-layout { display: grid; grid-template-columns: var(--kiln-sidebar-width) minmax(0, 1fr) var(--kiln-toc-width); gap: 36px; max-width: var(--kiln-max-width); margin: 0 auto; padding: 0 24px; } .kiln-sidebar { position: sticky; top: var(--kiln-header-height); align-self: start; height: calc(100vh - var(--kiln-header-height)); overflow-y: auto; padding: 24px 8px 48px 0; } .kiln-toc { position: sticky; top: var(--kiln-header-height); align-self: start; height: calc(100vh - var(--kiln-header-height)); overflow-y: auto; padding: 28px 0 48px; } .kiln-main { min-width: 0; padding: 28px 0 80px; } /* ---- Sidebar navigation ---- */ .kiln-nav-list { list-style: none; margin: 0; padding: 0; } .kiln-nav-list .kiln-nav-list { margin-left: 12px; border-left: 1px solid var(--border); padding-left: 8px; } .kiln-nav-link { display: block; padding: 6px 12px; border-radius: 7px; color: var(--muted); font-size: 0.9rem; } .kiln-nav-link:hover { background: var(--surface); color: var(--text); text-decoration: none; } .kiln-nav-link.kiln-current { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; } .kiln-nav-section { margin: 2px 0; } .kiln-nav-summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); } .kiln-nav-summary::-webkit-details-marker { display: none; } .kiln-nav-summary::before { content: "›"; display: inline-block; width: 1em; transition: transform 0.15s ease; color: var(--muted); } .kiln-nav-section[open] > .kiln-nav-summary::before { transform: rotate(90deg); } /* ---- Article ---- */ .kiln-article { max-width: 820px; } .kiln-article h1, .kiln-article h2, .kiln-article h3, .kiln-article h4 { line-height: 1.25; scroll-margin-top: calc(var(--kiln-header-height) + 16px); } .kiln-article h1 { font-size: 2.1rem; margin: 0 0 0.6em; } .kiln-article h2 { font-size: 1.5rem; margin: 1.8em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); } .kiln-article h3 { font-size: 1.2rem; margin: 1.6em 0 0.5em; } .kiln-article h4 { font-size: 1.02rem; margin: 1.4em 0 0.5em; } .kiln-article p, .kiln-article ul, .kiln-article ol { margin: 0.8em 0; } .kiln-article img { max-width: 100%; height: auto; border-radius: var(--kiln-radius); } .kiln-article blockquote { margin: 1em 0; padding: 0.2em 1.1em; border-left: 4px solid var(--border); color: var(--muted); } .headerlink { margin-left: 0.4em; color: var(--muted); opacity: 0; text-decoration: none; transition: opacity 0.1s ease; } .kiln-article h1:hover .headerlink, .kiln-article h2:hover .headerlink, .kiln-article h3:hover .headerlink, .kiln-article h4:hover .headerlink { opacity: 1; } /* ---- Code ---- */ code { font-family: var(--kiln-font-code); font-size: 0.88em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 5px; } pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--kiln-radius); padding: 16px 18px; overflow-x: auto; line-height: 1.5; } pre code { background: none; padding: 0; font-size: 0.85rem; color: var(--code-text); } /* ---- Tables ---- */ .kiln-article table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.92rem; } .kiln-article th, .kiln-article td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .kiln-article thead th { background: var(--surface); } .kiln-article tbody tr:nth-child(even) { background: var(--surface); } /* ---- Admonitions ---- */ .admonition { margin: 1.2em 0; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--kiln-radius); background: var(--surface); } .admonition > :first-child { margin-top: 0; } .admonition > :last-child { margin-bottom: 0; } .admonition-title { margin: 0 0 0.5em; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; } details.admonition > summary.admonition-title { cursor: pointer; list-style: none; } details.admonition > summary.admonition-title::-webkit-details-marker { display: none; } .admonition.note, .admonition.seealso { border-left-color: #3b82f6; } .admonition.note .admonition-title, .admonition.seealso .admonition-title { color: #3b82f6; } .admonition.tip, .admonition.success, .admonition.hint { border-left-color: #10b981; } .admonition.tip .admonition-title, .admonition.success .admonition-title, .admonition.hint .admonition-title { color: #10b981; } .admonition.warning, .admonition.caution, .admonition.attention { border-left-color: #f59e0b; } .admonition.warning .admonition-title, .admonition.caution .admonition-title, .admonition.attention .admonition-title { color: #f59e0b; } .admonition.danger, .admonition.error, .admonition.bug { border-left-color: #ef4444; } .admonition.danger .admonition-title, .admonition.error .admonition-title, .admonition.bug .admonition-title { color: #ef4444; } .admonition.info { border-left-color: #06b6d4; } .admonition.info .admonition-title { color: #06b6d4; } /* ---- Table of contents ---- */ .kiln-toc-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; } .kiln-toc-list, .kiln-toc-sublist { list-style: none; margin: 0; padding: 0; } .kiln-toc-sublist { margin-left: 12px; } .kiln-toc-entry a { display: block; padding: 3px 0; color: var(--muted); font-size: 0.85rem; border-left: 2px solid transparent; padding-left: 10px; margin-left: -2px; } .kiln-toc-entry a:hover { color: var(--text); text-decoration: none; } .kiln-toc-entry a.kiln-toc-active { color: var(--accent); border-left-color: var(--accent); } /* ---- Page navigation (prev/next) ---- */ .kiln-page-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .kiln-page-nav a { flex: 1; display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--kiln-radius); } .kiln-page-nav a:hover { border-color: var(--accent); text-decoration: none; } .kiln-next { text-align: right; align-items: flex-end; } .kiln-page-nav-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .kiln-page-nav-title { font-weight: 600; color: var(--text); } .kiln-edit-link { display: inline-block; margin-top: 24px; font-size: 0.85rem; color: var(--muted); } .kiln-fallback { border-left-color: #f59e0b; } .kiln-fallback .admonition-title { color: #f59e0b; } /* ---- Search ---- */ .kiln-search { position: relative; display: flex; align-items: center; } .kiln-search-icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; } .kiln-search-input { width: 220px; max-width: 40vw; padding: 8px 12px 8px 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.9rem; } .kiln-search-input:focus { outline: none; border-color: var(--accent); background: var(--bg); } .kiln-search-results { position: absolute; top: calc(100% + 8px); right: 0; width: min(520px, 90vw); max-height: 70vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--kiln-radius); box-shadow: var(--shadow); padding: 8px; z-index: 100; } .kiln-search-result { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); } .kiln-search-result:hover, .kiln-search-result.kiln-active { background: var(--surface); text-decoration: none; } .kiln-search-result-title { font-weight: 600; display: block; } .kiln-search-result-context { font-size: 0.82rem; color: var(--muted); display: block; } .kiln-search-result mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; } .kiln-search-empty { padding: 14px; color: var(--muted); text-align: center; } /* ---- Language switcher ---- */ .kiln-lang-switcher { position: relative; } .kiln-lang-button { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; } .kiln-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; list-style: none; margin: 0; padding: 6px; min-width: 160px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--kiln-radius); box-shadow: var(--shadow); display: none; z-index: 100; } .kiln-lang-switcher.kiln-open .kiln-lang-menu { display: block; } .kiln-lang-option { display: block; padding: 8px 12px; border-radius: 7px; color: var(--text); font-size: 0.88rem; } .kiln-lang-option:hover { background: var(--surface); text-decoration: none; } .kiln-lang-option.kiln-current { color: var(--accent); font-weight: 600; } /* Version switcher */ .kiln-version-switcher { position: relative; } .kiln-version-button { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); } .kiln-version-button:hover { border-color: var(--accent); } .kiln-version-menu { position: absolute; top: calc(100% + 8px); right: 0; list-style: none; margin: 0; padding: 6px; min-width: 180px; max-height: 60vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--kiln-radius); box-shadow: var(--shadow); display: none; z-index: 100; } .kiln-version-switcher.kiln-open .kiln-version-menu { display: block; } .kiln-version-option { display: block; padding: 8px 12px; border-radius: 7px; color: var(--text); font-size: 0.88rem; } .kiln-version-option:hover { background: var(--surface); text-decoration: none; } .kiln-version-option.kiln-current { color: var(--accent); font-weight: 600; } .kiln-version-option.kiln-prerelease::after { content: " · pre"; opacity: 0.6; font-size: 0.78em; } .kiln-version-option.kiln-deprecated { opacity: 0.65; } /* "Viewing an older version" notice */ .kiln-version-notice { margin-bottom: 1.5rem; } /* ---- Footer ---- */ .kiln-footer { border-top: 1px solid var(--border); margin-top: 40px; } .kiln-footer-inner { max-width: var(--kiln-max-width); margin: 0 auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; } .kiln-social { display: flex; gap: 14px; } .kiln-social-link { color: var(--muted); display: inline-flex; } .kiln-social-link:hover { color: var(--accent); } .kiln-social-link svg { display: block; } .kiln-copyright, .kiln-built-with { margin: 0; font-size: 0.82rem; color: var(--muted); } /* ---- Error page ---- */ .kiln-error { text-align: center; padding: 80px 0; } .kiln-error h1 { font-size: 5rem; margin: 0; color: var(--accent); } /* ---- Sidebar backdrop (mobile) ---- */ .kiln-backdrop { display: none; } /* ---- Responsive ---- */ @media (max-width: 1200px) { .kiln-layout { grid-template-columns: var(--kiln-sidebar-width) minmax(0, 1fr); } .kiln-toc { display: none; } } @media (max-width: 900px) { .kiln-layout { grid-template-columns: minmax(0, 1fr); padding: 0 18px; } .kiln-header .kiln-menu-toggle { display: inline-flex; } /* Mobile header: hamburger + logo + search button only. The switchers, palette toggle and repo link move into the drawer. */ .kiln-controls-header { display: none; } .kiln-header .kiln-search-toggle { display: inline-flex; } /* Search becomes a full-width overlay panel below the header. */ .kiln-search { position: fixed; top: var(--kiln-header-height); left: 0; right: 0; display: none; flex-direction: column; padding: 12px 18px 16px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); z-index: 60; } body.kiln-search-open .kiln-search { display: flex; } .kiln-search-icon { display: none; } .kiln-search-input { width: 100%; max-width: none; padding-left: 12px; } .kiln-search-results { position: static; width: 100%; margin-top: 8px; max-height: calc(100vh - var(--kiln-header-height) - 96px); border: none; box-shadow: none; padding: 4px 0 0; } /* Controls in the drawer, wrapping onto multiple rows. */ .kiln-controls-drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } /* Dropdowns open inward (left-aligned) so they don't clip off the drawer. */ .kiln-controls-drawer .kiln-lang-menu, .kiln-controls-drawer .kiln-version-menu { left: 0; right: auto; } .kiln-sidebar { position: fixed; top: var(--kiln-header-height); left: 0; width: 86%; max-width: 320px; background: var(--bg); border-right: 1px solid var(--border); padding: 16px; transform: translateX(-100%); transition: transform 0.2s ease; z-index: 60; } body.kiln-nav-open .kiln-sidebar { transform: translateX(0); } body.kiln-nav-open .kiln-backdrop { display: block; position: fixed; inset: var(--kiln-header-height) 0 0 0; background: rgba(0, 0, 0, 0.4); z-index: 55; } } /* ---- Syntax highlighting (highlight.js token colours) ---- */ .hljs { color: var(--code-text); background: transparent; } [data-palette="light"] .hljs-comment, [data-palette="light"] .hljs-quote { color: #6a737d; font-style: italic; } [data-palette="light"] .hljs-keyword, [data-palette="light"] .hljs-selector-tag, [data-palette="light"] .hljs-built_in, [data-palette="light"] .hljs-literal { color: #d73a49; } [data-palette="light"] .hljs-string, [data-palette="light"] .hljs-regexp, [data-palette="light"] .hljs-meta-string { color: #032f62; } [data-palette="light"] .hljs-number, [data-palette="light"] .hljs-symbol, [data-palette="light"] .hljs-bullet { color: #005cc5; } [data-palette="light"] .hljs-title, [data-palette="light"] .hljs-section, [data-palette="light"] .hljs-function .hljs-title { color: #6f42c1; } [data-palette="light"] .hljs-type, [data-palette="light"] .hljs-class .hljs-title, [data-palette="light"] .hljs-attr, [data-palette="light"] .hljs-attribute { color: #e36209; } [data-palette="light"] .hljs-meta { color: #6a737d; } [data-palette="dark"] .hljs-comment, [data-palette="dark"] .hljs-quote { color: #8b949e; font-style: italic; } [data-palette="dark"] .hljs-keyword, [data-palette="dark"] .hljs-selector-tag, [data-palette="dark"] .hljs-built_in, [data-palette="dark"] .hljs-literal { color: #ff7b72; } [data-palette="dark"] .hljs-string, [data-palette="dark"] .hljs-regexp, [data-palette="dark"] .hljs-meta-string { color: #a5d6ff; } [data-palette="dark"] .hljs-number, [data-palette="dark"] .hljs-symbol, [data-palette="dark"] .hljs-bullet { color: #79c0ff; } [data-palette="dark"] .hljs-title, [data-palette="dark"] .hljs-section, [data-palette="dark"] .hljs-function .hljs-title { color: #d2a8ff; } [data-palette="dark"] .hljs-type, [data-palette="dark"] .hljs-class .hljs-title, [data-palette="dark"] .hljs-attr, [data-palette="dark"] .hljs-attribute { color: #ffa657; } [data-palette="dark"] .hljs-meta { color: #8b949e; } /* ---- Carbon ads (in the TOC sidebar) ---- */ .kiln-carbon { margin-top: 24px; } #carbonads { font-size: 12px; font-family: var(--kiln-font-text); } #carbonads > span { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--kiln-radius); } #carbonads a { color: var(--text); text-decoration: none; } #carbonads a:hover { color: var(--accent); } #carbonads .carbon-wrap { display: flex; flex-direction: column; gap: 10px; } #carbonads .carbon-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; } #carbonads .carbon-text { line-height: 1.4; color: var(--muted); } #carbonads .carbon-poweredby { display: block; margin-top: 4px; color: var(--muted); font-size: 0.65em; letter-spacing: 0.15ch; text-transform: uppercase; }