/* docs-tabler-theme — custom overrides on top of Tabler v1.4 (Bootstrap 5.3-based). */
/* --- Fixed navbar ---
Navbar uses position: fixed; keep page content clear of it and let
anchor navigation land below the navbar. */
body {
padding-top: 4.5rem;
}
/* Navbar logo: swap between the light (site.logo) and dark (site.logo_dark)
versions via the data-bs-theme attribute set on by the theme
toggle. If logo_dark is omitted, only the light exists, so the
light logo is used in both modes. */
.navbar-logo-dark {
display: none;
}
[data-bs-theme="dark"] .navbar-logo-light {
display: none;
}
[data-bs-theme="dark"] .navbar-logo-dark {
display: inline-block;
}
/* Navbar and footer nav-link icons (feather): scale with the font and align
to the baseline. The external-link indicator uses a muted color so it
reads as a suffix, not part of the label. */
.navbar .nav-link .feather,
.navbar .dropdown-item .feather,
footer .nav-link .feather {
width: 1em;
height: 1em;
vertical-align: -0.125em;
margin-right: 0.375rem;
}
.navbar .nav-link .feather.feather-external-link,
.navbar .dropdown-item .feather.feather-external-link,
footer .nav-link .feather.feather-external-link {
width: 0.875em;
height: 0.875em;
margin-right: 0;
color: var(--tblr-secondary-color);
}
/* Nav items with `collapsed: true` hide their label in the expanded md+
navbar, showing only the icon; the label returns in the mobile (< md)
collapsed menu. The title is still used as the accessible name via
aria-label, so the icon-only link stays readable to screen readers. */
@media (min-width: 768px) {
.navbar-expand-md .nav-item.collapsed>.nav-link .nav-link-label,
.navbar-expand-md .nav-item.collapsed>.dropdown-toggle .nav-link-label,
.navbar-expand-md .dropdown-item.collapsed .nav-link-label {
display: none;
}
.navbar-expand-md .nav-item.collapsed>.nav-link .feather,
.navbar-expand-md .nav-item.collapsed>.dropdown-toggle .feather,
.navbar-expand-md .dropdown-item.collapsed .feather {
margin-right: 0;
}
}
/* Footer: the container-xl class sets its own padding (gutter/2) and outranks
a bare `footer` rule, so scope with .container-xl. Give the footer a roomier
horizontal padding, tied to the theme gutter var (4rem desktop / 2rem
mobile). */
footer.container-xl {
padding-inline: calc(var(--tblr-gutter-x) * 2);
}
/* Nav parents without a link render as
(see navbar.html). Give them a pointer cursor — a span has none by default;
Bootstrap's caret ::after still renders on any element. */
.navbar .nav-link.dropdown-toggle[data-bs-toggle="dropdown"] {
cursor: pointer;
}
/* Mobile navbar collapse as an overlay: below md the menu drops down below the
fixed navbar as a panel instead of growing the navbar, so the brand (logo +
title) never moves when the hamburger is toggled. */
@media (max-width: 767.98px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1020;
background-color: var(--tblr-bg-surface);
border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-translucent);
box-shadow: var(--tblr-shadow-dropdown);
max-height: calc(100vh - 4.5rem);
overflow-y: auto;
padding: 0.75rem 1rem 1rem;
}
}
/* Breathing room between the brand (logo + title) and the nav links. Only in
the expanded md+ layout; the collapsed mobile menu is unaffected. */
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav {
margin-left: 1.5rem;
gap: 0.5rem;
}
}
/* --- Monochrome (black & white) palette ---
Tabler's semantic colours are blue-tinted (#066fd1 primary, #4299e1 info).
Override them to greyscale in BOTH schemes so the whole UI — links, buttons,
badges, focus rings, pagination, active states — becomes black & white.
These run after tabler.min.css, so they win. Code blocks / Rouge tokens
stay coloured (separate --tblr-rouge-* vars). */
:root {
--tblr-primary: #000000;
--tblr-primary-rgb: 0, 0, 0;
--tblr-primary-fg: #ffffff;
--tblr-primary-bg-subtle: #f3f4f6;
--tblr-primary-border-subtle: #d1d5db;
--tblr-primary-text-emphasis: #111827;
--tblr-link-color: #000000;
--tblr-link-color-rgb: 0, 0, 0;
--tblr-link-hover-color: #4b5563;
--tblr-link-hover-color-rgb: 75, 85, 99;
--tblr-info: #6b7280;
--tblr-info-rgb: 107, 114, 128;
--tblr-info-bg-subtle: #f3f4f6;
--tblr-info-border-subtle: #d1d5db;
--tblr-info-text-emphasis: #374151;
--tblr-active-bg: rgba(0, 0, 0, 0.06);
--tblr-bg-forms: #ffffff;
}
/* --- Pure black dark color scheme ---
Tabler's dark palette is blue-tinted (#111827 / #1f2937). These overrides
run after tabler.min.css, so they win and neutralize the blue. */
[data-bs-theme="dark"] {
--tblr-body-bg: #000000;
--tblr-bg-surface: #0d0d0d;
--tblr-bg-surface-secondary: #0d0d0d;
--tblr-bg-surface-tertiary: #111111;
--tblr-bg-surface-primary: #0d0d0d;
--tblr-bg-surface-dark: #111111;
--tblr-bg-surface-inverted: #ffffff;
--tblr-border-color: #2a2a2a;
--tblr-border-color-translucent: rgba(255, 255, 255, 0.12);
--tblr-primary: #ffffff;
--tblr-primary-rgb: 255, 255, 255;
--tblr-primary-fg: #000000;
--tblr-primary-bg-subtle: #1f2937;
--tblr-primary-border-subtle: #374151;
--tblr-primary-text-emphasis: #f3f4f6;
--tblr-link-color: #e5e7eb;
--tblr-link-color-rgb: 229, 231, 235;
--tblr-link-hover-color: #ffffff;
--tblr-link-hover-color-rgb: 255, 255, 255;
--tblr-info: #9ca3af;
--tblr-info-rgb: 156, 163, 175;
--tblr-info-bg-subtle: #1f2937;
--tblr-info-border-subtle: #374151;
--tblr-info-text-emphasis: #e5e7eb;
--tblr-active-bg: rgba(255, 255, 255, 0.08);
--tblr-bg-forms: #0d0d0d;
}
:target,
.docs-content h1[id],
.docs-content h2[id],
.docs-content h3[id],
.docs-content h4[id] {
scroll-margin-top: 5rem;
}
/* --- Docs content --- */
.docs-content {
min-width: 0;
padding-inline: calc(var(--tblr-gutter-x) * 2);
}
.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4 {
font-weight: 600;
scroll-margin-top: 5rem;
}
.docs-content h2 {
margin-top: 2.5rem;
}
/* Accordion headers use an h2 but must not get the section spacing. */
.docs-content h2.accordion-header {
margin-top: 0;
}
.docs-content h3 {
margin-top: 2rem;
}
.docs-content h4 {
margin-top: 1.5rem;
}
.docs-content img {
max-width: 100%;
height: auto;
}
/* Feather icons: scale with the surrounding text and align to the baseline.
Authors can override size per icon via inline style (e.g. width/height) —
feather copies attributes from the onto the generated SVG. */
.docs-content .feather {
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
}
/* Buttons with a Feather icon (declared via the kramdown IAL attribute
data-feather="name", or a raw in the link text): flex so the icon and
label center and space evenly, whatever order they appear in. Scoped to
.docs-content so navbar/UI buttons (.btn btn-ghost-dark, etc.) keep their
Tabler inline-block layout. */
.docs-content .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
margin-bottom: 1rem;
}
/* Inline : Tabler supplies --tblr-code-bg/--tblr-code-color, which adapt
via light-dark() and are separate from the always-dark block code vars. */
.docs-content code {
font-size: 0.875em;
padding: 2px 4px;
border-radius: var(--tblr-border-radius);
background-color: var(--tblr-code-bg);
color: var(--tblr-code-color);
}
.docs-content pre {
padding: 1rem;
border-radius: var(--tblr-border-radius);
background-color: var(--docs-code-bg);
color: var(--docs-code-fg);
font-size: 0.8rem;
line-height: 1.6;
}
/* Reset inside code blocks: the inline padding/background above must
not leak into
blocks (higher specificity beats the inline rule). */
.docs-content pre code {
font-size: 1em;
padding: 0;
background: transparent;
color: inherit;
border-radius: 0;
}
/* --- Code blocks: syntax highlighting (Rouge) ---
Code blocks keep a fixed dark background in BOTH color schemes, so the
token palette is always the light-on-dark set (no themed re-declaration). */
:root {
--docs-code-bg: #111111;
--docs-code-fg: #e6edf3;
--tblr-rouge-comment: #8b949e;
--tblr-rouge-keyword: #ff7b72;
--tblr-rouge-string: #a5d6ff;
--tblr-rouge-number: #79c0ff;
--tblr-rouge-name: #7ee787;
--tblr-rouge-attribute: #d2a8ff;
--tblr-rouge-operator: #ff7b72;
--tblr-rouge-symbol: #ffa657;
--tblr-rouge-punctuation: #c9d1d9;
}
.docs-content .highlight {
border-radius: var(--tblr-border-radius);
background-color: var(--docs-code-bg);
margin-bottom: 1rem;
}
.docs-content .highlight pre {
margin: 0;
padding: 1rem;
background: transparent;
}
/* Rouge renders the line-numbered block inside a ; neutralize the
browser's default figure margin so padding matches plain code blocks. */
.docs-content figure.highlight {
margin: 0 0 1rem;
}
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs {
color: var(--tblr-rouge-comment);
font-style: italic;
}
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
color: var(--tblr-rouge-keyword);
font-weight: 600;
}
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .ss,
.highlight .sx {
color: var(--tblr-rouge-string);
}
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
color: var(--tblr-rouge-number);
}
.highlight .n,
.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .nd,
.highlight .nf,
.highlight .nh,
.highlight .ni,
.highlight .nl,
.highlight .nn,
.highlight .no,
.highlight .nx {
color: var(--tblr-rouge-name);
}
.highlight .err {
color: var(--tblr-rouge-keyword);
}
.highlight .o,
.highlight .ow {
color: var(--tblr-rouge-operator);
}
.highlight .p {
color: var(--tblr-rouge-punctuation);
}
/* --- Code blocks: line numbers ({% highlight lang linenos %}) ---
Rouge renders line-numbered blocks as a table with a number gutter
and a code cell. Override the generic .docs-content table styles. */
.docs-content .highlight pre:has(> code > table.rouge-table) {
padding: 0;
}
.docs-content .highlight table.rouge-table {
width: 100%;
margin-bottom: 0;
border-collapse: collapse;
}
.docs-content .highlight table.rouge-table td {
padding: 0;
border: 0;
vertical-align: top;
}
.docs-content .highlight table.rouge-table td.gutter.gl {
padding: 1rem 0.75rem 1rem 1rem;
border-right: var(--tblr-border-width) solid var(--tblr-border-color-translucent);
background-color: var(--docs-code-bg);
color: var(--tblr-rouge-comment);
user-select: none;
-webkit-user-select: none;
}
.docs-content .highlight table.rouge-table pre.lineno {
padding: 0;
text-align: right;
color: var(--tblr-rouge-comment);
white-space: pre;
}
.docs-content .highlight table.rouge-table td.code {
min-width: 0;
padding: 1rem;
}
.docs-content .highlight table.rouge-table td.code pre {
padding: 0;
overflow-x: auto;
}
/* --- Text selection inside code ---
Tabler's global ::selection is a 10% primary tint that is nearly invisible
on the always-dark code background. ::selection is resolved per element, so
selected text in a code block lives in and its token s, not the
itself: cover the whole pre subtree with a visible light-on-dark bar
(works in both color schemes), and give inline (outside pre) a solid
primary inversion (black/white), scoped so general prose selection stays
Tabler's default. */
.docs-content code::selection {
background-color: var(--tblr-primary);
color: var(--tblr-primary-fg);
}
.docs-content pre::selection,
.docs-content pre code::selection,
.docs-content pre code *::selection {
/* Plain rgba fallback for browsers without color-mix() support, where the
declaration below would otherwise be dropped entirely. */
background-color: rgba(230, 237, 243, 0.35);
background-color: color-mix(in srgb, var(--docs-code-fg) 30%, transparent);
color: var(--docs-code-fg);
}
/* --- Copy button on code blocks ---
Injected by theme.js into each .highlight / plain pre. Anchored to the top
right of the block; lives outside the