the docs render into when the site's header and footer are switched on — the same surface either way, so it is one rule rather than two that drift. */ .bdocs-shell { margin: 0; /* Set per product from the doc settings. The fallback is the template's own default, so an unset value follows the template rather than freezing today's colour into every product. See the note above .bdocs-topbar for why the ink fallbacks are literals. */ --bdocs-ink: var(--bdocs-page-ink, #0f172a); --bdocs-ink-soft: var(--bdocs-page-ink-soft, #334155); --bdocs-muted: var(--bdocs-page-muted, #64748b); --bdocs-faint: var(--bdocs-page-faint, #94a3b8); background: var(--bdocs-page-bg, var(--bdocs-bg)); color: var(--bdocs-ink); font-family: var(--bdocs-sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /** * Inside the site's chrome the theme's stylesheet is loaded — it has to be, or * the header it draws is unstyled — so the docs restate the few things a theme * is most likely to have opinions about, and become the containing block for * anything of theirs that positions against the shell. */ .bdocs-has-chrome { position: relative; overflow-x: clip; text-align: left; } .bdocs-shell *, .bdocs-shell *::before, .bdocs-shell *::after { box-sizing: border-box; } .bdocs-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); padding: 8px 16px; } .bdocs-skip:focus { left: 8px; top: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /** * Text colour on a surface the product chose. * * Each surface redefines the palette for its own subtree rather than every * rule inside it being rewritten to read a second token — a custom property * set on an element applies to its descendants, so .bdocs-brand keeps saying * `color: var(--bdocs-ink)` and gets the right one for its surface. * * The fallbacks repeat the literals from :root because a token cannot fall * back to the value it is replacing: `--bdocs-ink: var(--bdocs-header-ink, * var(--bdocs-ink))` is a cycle and resolves to nothing. Keep these in step * with the palette at the top of this file — they are the same four colours. * * Brand::properties() emits the --bdocs-*-ink tokens only when the matching * background is set, so an unstyled product falls through to the palette * untouched and none of this applies. */ .bdocs-topbar, .bdocs-aur-top, .bdocs-hb-top, .bdocs-help-top, .bdocs-ref-top, .bdocs-tb-top { --bdocs-ink: var(--bdocs-header-ink, #1a2036); --bdocs-ink-soft: var(--bdocs-header-ink-soft, #3d4461); --bdocs-muted: var(--bdocs-header-muted, #6b7280); --bdocs-faint: var(--bdocs-header-faint, #9aa1b5); } .bdocs-sidebar, .bdocs-aur-side { --bdocs-ink: var(--bdocs-sidebar-ink, #1a2036); --bdocs-ink-soft: var(--bdocs-sidebar-ink-soft, #3d4461); --bdocs-muted: var(--bdocs-sidebar-muted, #6b7280); --bdocs-faint: var(--bdocs-sidebar-faint, #9aa1b5); } /* ------------------------------------------------------------------ topbar */ .bdocs-topbar { position: sticky; top: 0; z-index: 50; height: var(--bdocs-topbar-h, 64px); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; background: var(--bdocs-header-bg, var(--bdocs-brand, #3b4bf0)); color: var(--bdocs-header-ink, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .bdocs-topbar-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .bdocs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-size: 15px; min-width: 0; } .bdocs-logo { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; } .bdocs-brand-name { font-weight: 700; font-size: 16px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdocs-brand-sep { color: rgba(255, 255, 255, 0.4); font-weight: 300; margin: 0 2px; } .bdocs-brand-kind { color: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; } /* ------------------------------------------------------------------ search */ .bdocs-searchbox { position: relative; flex: 1; max-width: 440px; margin: 0 auto; } .bdocs-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; pointer-events: none; } .bdocs-search-input { width: 100%; font: inherit; font-size: 14px; color: var(--bdocs-ink, #0f172a); background: var(--bdocs-bg-soft, #f8fafc); border: 1px solid var(--bdocs-line, #e2e8f0); border-radius: var(--bdocs-radius, 0); padding: 8px 36px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .bdocs-search-input::placeholder { color: var(--bdocs-muted, #94a3b8); } .bdocs-search-input:focus { outline: 2px solid var(--bdocs-brand); outline-offset: 1px; border-color: var(--bdocs-brand); } .bdocs-search-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--bdocs-mono); font-size: 11px; color: #64748b; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 5px; pointer-events: none; } .bdocs-search-input:focus ~ .bdocs-search-key { display: none; } .bdocs-topbar-right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; } .bdocs-top-links { display: flex; align-items: center; gap: 20px; } .bdocs-top-link { color: rgba(255, 255, 255, 0.95); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: opacity 0.15s ease; } .bdocs-top-link:hover { color: #fff; opacity: 0.85; text-decoration: none; } .bdocs-menu-btn { display: none; /* Inherited, not #fff: the same class sits on the brand-blue topbar, the tabbed template's light bar, Aurora's mobile bar, and the floating toggle over the page — each surface already carries the right ink. */ color: inherit; background: transparent; border: 0; cursor: pointer; padding: 4px; } .bdocs-menu-btn svg { width: 24px; height: 24px; } .bdocs-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); box-shadow: 0 12px 32px -12px rgba(26, 32, 54, 0.28); padding: 4px; } .bdocs-search-results a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--bdocs-ink); } .bdocs-search-results a:hover, .bdocs-search-results a.is-selected { background: var(--bdocs-brand-light); color: var(--bdocs-brand-dark); } .bdocs-result-title { font-size: 14px; font-weight: 600; } .bdocs-result-crumb { font-size: 12px; color: var(--bdocs-muted); } .bdocs-search-empty { padding: 12px 10px; font-size: 13px; color: var(--bdocs-muted); } /* ----------------------------------------------------------------- layout */ .bdocs-layout { display: grid; grid-template-columns: var(--bdocs-sidebar-w) minmax(0, 1fr) var(--bdocs-toc-w); align-items: start; max-width: max(var(--bdocs-align-shell, 0px), 1440px); margin: 0 auto; } /* When the table of contents rail is empty or has no items, collapse its column so the main content expands and centers naturally */ .bdocs-layout.bdocs-no-toc, .bdocs-layout:has(.bdocs-toc.bdocs-toc-empty), .bdocs-layout:has(.bdocs-toc:not(:has(li))), .bdocs-ref-layout.bdocs-no-toc, .bdocs-ref-layout:has(.bdocs-toc.bdocs-toc-empty), .bdocs-ref-layout:has(.bdocs-toc:not(:has(li))) { grid-template-columns: 260px minmax(0, 1fr); } .bdocs-layout.bdocs-no-toc .bdocs-toc, .bdocs-layout:has(.bdocs-toc.bdocs-toc-empty) .bdocs-toc, .bdocs-layout:has(.bdocs-toc:not(:has(li))) .bdocs-toc, .bdocs-ref-layout.bdocs-no-toc .bdocs-toc, .bdocs-ref-layout:has(.bdocs-toc.bdocs-toc-empty) .bdocs-toc, .bdocs-ref-layout:has(.bdocs-toc:not(:has(li))) .bdocs-toc { display: none; } .bdocs-layout.bdocs-no-toc .bdocs-article, .bdocs-layout:has(.bdocs-toc.bdocs-toc-empty) .bdocs-article, .bdocs-layout:has(.bdocs-toc:not(:has(li))) .bdocs-article, .bdocs-ref-layout.bdocs-no-toc .bdocs-article, .bdocs-ref-layout:has(.bdocs-toc.bdocs-toc-empty) .bdocs-article, .bdocs-ref-layout:has(.bdocs-toc:not(:has(li))) .bdocs-article { max-width: 920px; } @media (max-width: 1180px) { .bdocs-layout { grid-template-columns: var(--bdocs-sidebar-w) minmax(0, 1fr); } .bdocs-toc { display: none; } } /* 900px, matching every other template's drawer width and the floating toggle below — at 860 the drawer existed for 40px with no button to open it. The topbar sheds what a phone has no room for: the nav links go (the hamburger's drawer carries navigation), the shortcut hint goes (there is no ⌘K on a touch screen), and the brand gains leave to ellipsize instead of pushing the search box off the right edge. */ @media (max-width: 900px) { .bdocs-layout { grid-template-columns: minmax(0, 1fr); } .bdocs-topbar { padding: 0 16px; gap: 12px; } .bdocs-topbar-left { flex: 0 1 auto; min-width: 0; } .bdocs-topbar-right { gap: 12px; } .bdocs-top-links { display: none; } .bdocs-topbar .bdocs-menu-btn { display: inline-flex; } .bdocs-search-key { display: none; } } @media (max-width: 560px) { .bdocs-brand-sep, .bdocs-brand-kind { display: none; } .bdocs-searchbox { min-width: 130px; max-width: none; } /* The dropdown escapes its now-narrow box: pinned to the viewport it is readable; pinned to a 140px search field it is a word per line. */ .bdocs-topbar .bdocs-search-results { position: fixed; left: 12px; right: 12px; top: calc(var(--bdocs-topbar-h) + 6px); } } /* ---------------------------------------------------------------- sidebar */ .bdocs-sidebar { position: sticky; top: var(--bdocs-topbar-h); max-height: calc(100vh - var(--bdocs-topbar-h)); overflow-y: auto; padding: 24px 16px 48px; background: var(--bdocs-sidebar-bg, transparent); border-right: 1px solid var(--bdocs-line); } /** * A sticky sidebar is as tall as its own links, so the rule beside it stopped a * tenth of the way down a long article and read as an unfinished border rather * than a column edge. Given the viewport height it spans the window at every * scroll position, which is what the divider is there to suggest. */ .bdocs-layout .bdocs-sidebar { height: calc(100vh - var(--bdocs-topbar-h)); } @media (max-width: 900px) { .bdocs-sidebar { position: fixed; top: var(--bdocs-topbar-h); bottom: 0; left: 0; width: min(320px, 86vw); z-index: 50; background: var(--bdocs-sidebar-bg, var(--bdocs-bg)); transform: translateX(-100%); transition: transform 0.2s ease; max-height: none; height: auto; } body.bdocs-nav-open .bdocs-sidebar { transform: translateX(0); } } .bdocs-nav-group { margin-bottom: 4px; } .bdocs-nav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bdocs-ink, #0f172a); cursor: pointer; text-align: left; outline: none; box-shadow: none; transition: color 0.15s ease, background-color 0.15s ease; -webkit-appearance: none; appearance: none; } .bdocs-nav-head:hover, .bdocs-nav-head:focus, .bdocs-nav-head:focus-visible, .bdocs-nav-head:active { background: var(--bdocs-bg-soft, #f8fafc); color: var(--bdocs-ink, #0f172a); outline: none; box-shadow: none; } .bdocs-nav-group.is-open > .bdocs-nav-head { color: var(--bdocs-ink, #0f172a); } /* A heading-mode group: the head is a link to the group's own page. */ .bdocs-nav-head-link { text-decoration: none; } @keyframes bdocsSectionFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* One section at a time. The hiding class is added by docs.js on load, so crawlers and readers without scripts always get the whole page. */ .bdocs-sectioned .bdocs-section { display: none; } .bdocs-sectioned .bdocs-section.is-active { display: block; animation: bdocsSectionFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @media (prefers-reduced-motion: reduce) { .bdocs-sectioned .bdocs-section.is-active { animation: none; } } /* The contents rail on a sectioned page shows the active section's sub-headings; when that section has none, the rail's title would label an empty list. */ .bdocs-toc.bdocs-toc-empty .bdocs-toc-title, .bdocs-toc.bdocs-toc-empty .bdocs-toc-list { display: none; } .bdocs-nav-head-link.is-active { color: var(--bdocs-brand-dark); } .bdocs-chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 0.15s ease; } .bdocs-nav-group.is-open .bdocs-chev { transform: rotate(180deg); } .bdocs-nav-items { display: none; padding-left: 6px; } .bdocs-nav-group.is-open .bdocs-nav-items { display: block; } .bdocs-nav-link { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13.5px; line-height: 1.4; color: var(--bdocs-ink-soft, #475569); text-decoration: none; border-left: 0; border-radius: 6px; margin-bottom: 2px; transition: all 0.15s ease; } /* Sub-articles. The indent is the whole point: a child rendered flush with its parent reads as a sibling, and the sidebar then shows a flat list of pages that are not flat. The rule runs down the nested block so the relationship is visible without a marker on every row. */ .bdocs-nav-subs { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--bdocs-line); } .bdocs-nav-subs .bdocs-nav-link { font-size: 13.5px; padding-top: 5px; padding-bottom: 5px; color: var(--bdocs-muted); border-left: 0; } .bdocs-nav-subs .bdocs-nav-link:hover, .bdocs-nav-subs .bdocs-nav-link.is-active { color: var(--bdocs-brand-dark); } /* A parent with children is a destination and a heading at once, so it takes the weight that says so. */ .bdocs-nav-link.has-subs { font-weight: 550; color: var(--bdocs-ink); } .bdocs-nav-link:hover { color: var(--bdocs-ink, #0f172a); background: var(--bdocs-bg-soft, #f8fafc); } .bdocs-nav-link.is-active { color: var(--bdocs-brand-dark, #3b4bf0); background: var(--bdocs-brand-light, #eef2ff); border-left: 0; font-weight: 600; } /* -------------------------------------------------- bPlugins template nav */ /* The classes above are shared with Aurora's sidebar, so everything the bPlugins design does differently is scoped to its own shell class. */ /* Closed groups point right; only an open group points down. */ .bdocs-bplugins .bdocs-chev { transform: rotate(-90deg); } .bdocs-bplugins .bdocs-nav-group.is-open .bdocs-chev { transform: rotate(0deg); } /* Air between one group and the next, so the sidebar reads as sections rather than as one continuous list. */ .bdocs-bplugins .bdocs-nav-group { margin-bottom: 8px; } /* The group the reader is inside carries the brand, whether it is folded or not — being the trail is a different fact from being open. */ .bdocs-bplugins .bdocs-nav-group.is-trail > .bdocs-nav-head { color: var(--bdocs-brand-dark); } /* The current page's pill runs to the sidebar's left edge and carries an accent bar there. The negative margin is the sidebar padding (16px) plus the items indent (6px); the padding puts the label back where every other row's label sits, less the 3px the border now occupies. */ .bdocs-bplugins .bdocs-nav-items > .bdocs-nav-link.is-active { margin-left: -22px; padding-left: 31px; border-left: 3px solid var(--bdocs-brand); border-radius: 0 8px 8px 0; } .bdocs-bplugins .bdocs-searchbox { max-width: 520px; } /* A doc's icon, left of its title in the sidebar. Sized to the text beside it and clipped round, so a screenshot dropped in as an icon still reads as a mark rather than a thumbnail. */ .bdocs-nav-icon { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; } /* The head's label: icon and title as one flex unit, so the chevron keeps its own end of the row. */ .bdocs-nav-title { display: flex; align-items: center; gap: 8px; min-width: 0; } /* ------------------------------------------- bPlugins template: sidebar head */ /* The brand row and search the sidebar gains when the product turns them on — the Aurora arrangement on the bPlugins shell. */ .bdocs-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 14px; text-decoration: none; color: var(--bdocs-ink); } .bdocs-side-logo { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; } .bdocs-side-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); font-size: 14px; font-weight: 700; flex: 0 0 auto; } .bdocs-side-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The topbar search sits on the brand surface, so its input relies on that contrast; in the sidebar the same input needs a visible hairline. */ .bdocs-side-search { margin: 0 4px 16px; } .bdocs-side-search .bdocs-search-input { border: 1px solid var(--bdocs-line); box-shadow: none; } /* ------------------------------------------------------------------- main */ .bdocs-main { min-width: 0; padding: 32px 40px 80px; } @media (max-width: 640px) { .bdocs-main { padding: 24px 20px 64px; } } .bdocs-article { max-width: var(--bdocs-content-max); /* Centred in whatever room the column has. At the default width the column is the measure plus its padding, so this changes nothing; at Wide and Full width the column is far wider, and without this the article stays pinned left with all the new space piled up on the right. */ margin-inline: auto; } /** * The trail sits outside the article element, so it needs the article's measure * and centring of its own. Without them it spanned the whole column while the * article was centred inside it, and the breadcrumb started a long way left of * the heading it belongs to. */ .bdocs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: var(--bdocs-content-max); margin-inline: auto; font-size: 13px; color: var(--bdocs-muted); margin-bottom: 16px; } .bdocs-crumb-first { display: inline-flex; align-items: center; gap: 5px; } /* Sized to the text beside it rather than to a round number, so the icon reads as part of the label and not as a button in front of it. */ .bdocs-crumb-home { width: 14px; height: 14px; flex: none; } .bdocs-crumbs a { color: var(--bdocs-muted); text-decoration: none; } .bdocs-crumbs a:hover { color: var(--bdocs-brand-dark); text-decoration: underline; } .bdocs-crumb-sep { color: var(--bdocs-faint); } .bdocs-crumb-current { color: var(--bdocs-ink-soft); } .bdocs-structure-headings .bdocs-h1, .bdocs-structure-headings .bdocs-aur-h1, .bdocs-structure-headings .bdocs-hb-h1, .bdocs-structure-headings .bdocs-ref-h1 { display: none !important; } .bdocs-h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .bdocs-content h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.018em; font-weight: 660; text-wrap: balance; margin: 44px 0 12px; scroll-margin-top: calc(var(--bdocs-topbar-h) + 16px); } .bdocs-content h3 { font-size: 1.08rem; font-weight: 650; margin: 28px 0 8px; } .bdocs-content p { margin: 0 0 16px; } .bdocs-content a { color: var(--bdocs-link, var(--bdocs-brand-dark)); text-underline-offset: 3px; } .bdocs-content ul, .bdocs-content ol { margin: 0 0 18px; padding-left: 1.4em; } .bdocs-content li { margin-bottom: 6px; } .bdocs-content > *:first-child { margin-top: 0; } /** * Heading colour, when a product chooses one. `inherit` as the fallback keeps * the un-set case exactly what it was: headings take the surface's own ink. */ .bdocs-h1, .bdocs-aur-h1, .bdocs-hb-h1, .bdocs-ref-h1, .bdocs-tb-h1, .bdocs-article h1, .bdocs-article h2, .bdocs-article h3, .bdocs-article h4, .bdocs-article h5, .bdocs-article h6, .bdocs-content h1, .bdocs-content h2, .bdocs-content h3, .bdocs-content h4, .bdocs-content h5, .bdocs-content h6, .bdocs-section h1, .bdocs-section h2, .bdocs-section h3, .bdocs-section h4, .bdocs-section h5, .bdocs-section h6, .wp-block-heading { color: var(--bdocs-heading, inherit); } /* -------------------------------------------------------------------- toc */ .bdocs-toc { position: sticky; top: var(--bdocs-topbar-h); max-height: calc(100vh - var(--bdocs-topbar-h)); overflow-y: auto; padding: 36px 24px 48px 8px; } .bdocs-toc-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--bdocs-ink, #0f172a); margin: 0 0 12px; } .bdocs-toc-list { list-style: none; margin: 0; padding: 0; } .bdocs-toc-list a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.5; color: var(--bdocs-muted, #64748b); text-decoration: none; border-left: 0; transition: color 0.15s ease; } .bdocs-toc-list a:hover { color: var(--bdocs-brand, #3b4bf0); } .bdocs-toc-list a.is-active, .bdocs-toc-list li.is-active > a { color: var(--bdocs-brand, #3b4bf0); border-left: 0; font-weight: 600; } /* ------------------------------------------------------------ article foot */ .bdocs-article-foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--bdocs-line); } .bdocs-updated { font-size: 13px; color: var(--bdocs-faint); margin: 0; } .bdocs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } @media (max-width: 560px) { .bdocs-pager { grid-template-columns: 1fr; } } .bdocs-pager-link { display: block; padding: 14px 16px; border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); text-decoration: none; color: var(--bdocs-ink); } .bdocs-pager-link:hover { border-color: var(--bdocs-brand); } .bdocs-pager-link.is-next { text-align: right; } .bdocs-pager-dir { display: block; font-size: 12px; color: var(--bdocs-muted); margin-bottom: 2px; } .bdocs-pager-title { display: block; font-size: 15px; font-weight: 600; } /* --------------------------------------------------------------- overlay */ .bdocs-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(26, 32, 54, 0.4); } /* ============================================================== BLOCKS === */ /* ------------------------------------------------------------------- lead */ .bdocs-lead { font-size: 1.14rem; line-height: 1.6; color: var(--bdocs-ink-soft); margin: 0 0 24px; } /* ---------------------------------------------------------------- callout */ .bdocs-callout { border: 1px solid var(--bdocs-line); border-left: 3px solid var(--bdocs-brand); border-radius: var(--bdocs-radius); background: var(--bdocs-bg-soft); padding: 14px 18px; margin: 0 0 20px; } .bdocs-callout-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; color: var(--bdocs-brand-dark); } .bdocs-callout > *:last-child { margin-bottom: 0; } .bdocs-callout.is-tip { border-left-color: var(--bdocs-green); } .bdocs-callout.is-tip .bdocs-callout-label { color: var(--bdocs-green); } .bdocs-callout.is-important { border-left-color: var(--bdocs-amber); } .bdocs-callout.is-important .bdocs-callout-label { color: var(--bdocs-amber); } .bdocs-callout.is-limitation { border-left-color: var(--bdocs-red); } .bdocs-callout.is-limitation .bdocs-callout-label { color: var(--bdocs-red); } /* ------------------------------------------------------------------ steps */ ol.bdocs-steps { counter-reset: bdocs-step; list-style: none; padding-left: 0; margin: 0 0 24px; } li.bdocs-step { position: relative; counter-increment: bdocs-step; padding-left: 40px; margin-bottom: 20px; } li.bdocs-step::before { content: counter(bdocs-step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-family: var(--bdocs-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--bdocs-brand-dark); background: var(--bdocs-brand-light); border-radius: 50%; } .bdocs-step-title { font-weight: 600; margin: 0 0 6px; } li.bdocs-step > *:last-child { margin-bottom: 0; } /* Timeline: a rail joins the numbers, so a long procedure reads as one path rather than a stack of islands. Drawn per-step and stopped on the last, so the rail never runs past the final number. */ ol.bdocs-steps.is-steps-timeline li.bdocs-step::after { content: ""; position: absolute; top: 31px; bottom: -16px; left: 13px; width: 2px; background: var(--bdocs-line); border-radius: 1px; } ol.bdocs-steps.is-steps-timeline li.bdocs-step:last-child::after { display: none; } /* Cards: each step boxed, with the number filled solid so it reads as the card's badge rather than floating beside it. */ ol.bdocs-steps.is-steps-cards li.bdocs-step { padding: 16px 18px 16px 58px; margin-bottom: 12px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: calc(var(--bdocs-radius) + 2px); } ol.bdocs-steps.is-steps-cards li.bdocs-step::before { top: 16px; left: 18px; color: var(--bdocs-on-brand, #fff); background: var(--bdocs-brand); } /* ------------------------------------------------------------------- code */ .bdocs-code { position: relative; margin: 0 0 20px; } .bdocs-code pre { margin: 0; overflow-x: auto; background: var(--bdocs-code-bg); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); padding: 14px 16px; } .bdocs-code code { font-family: var(--bdocs-mono); font-size: 13.5px; line-height: 1.6; color: var(--bdocs-ink); white-space: pre; } .bdocs-code-lang { display: inline-block; font-family: var(--bdocs-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bdocs-faint); margin-bottom: 4px; } .bdocs-copy-btn { position: absolute; top: 6px; right: 6px; font: inherit; font-size: 11px; padding: 3px 8px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: 6px; color: var(--bdocs-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s; } .bdocs-code:hover .bdocs-copy-btn, .bdocs-copy-btn:focus { opacity: 1; } /* Inline code inside prose. */ .bdocs-content :not(pre) > code { font-family: var(--bdocs-mono); font-size: 0.88em; background: var(--bdocs-code-bg); border: 1px solid var(--bdocs-line); border-radius: 4px; padding: 0.1em 0.36em; color: var(--bdocs-code-ink, var(--bdocs-brand-dark)); } /* ------------------------------------------------------------------ table */ .bdocs-table-wrap { overflow-x: auto; border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); margin: 0 0 20px; } .bdocs-content table, .bdocs-table-wrap table, table.bdocs-table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0; } /** * Borders are cleared before the one that is wanted is drawn. * * A table in doc content is plain markup, so anything else on the page that * styles `table` styles this one — on a WooCommerce site that means a 3px * near-black rule under thead and a top border on every cell, neither of which * follows the product's border colour. Setting only border-bottom would leave * those in place and make the border setting look like it does nothing. */ .bdocs-content table thead, .bdocs-content table tbody, .bdocs-content table tfoot, .bdocs-content table tr, .bdocs-table-wrap thead, .bdocs-table-wrap tbody, .bdocs-table-wrap tfoot, .bdocs-table-wrap tr { border: 0; } .bdocs-content table th, .bdocs-content table td, .bdocs-table-wrap th, .bdocs-table-wrap td { text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--bdocs-line); vertical-align: top; } .bdocs-content table thead th, .bdocs-table-wrap thead th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-muted); font-weight: 600; background: var(--bdocs-bg-soft); white-space: nowrap; } .bdocs-content table tbody tr:last-child td, .bdocs-table-wrap tbody tr:last-child td { border-bottom: 0; } .bdocs-table caption { caption-side: top; text-align: left; padding: 10px 14px 0; font-size: 12px; color: var(--bdocs-muted); } /* Striped: alternate rows carry the shading, so the hairlines under each row would double up — the stripes take over the row separation entirely. */ .bdocs-table-wrap.is-table-striped tbody td { border-bottom: 0; } .bdocs-table-wrap.is-table-striped tbody tr:nth-child(even) td { background: var(--bdocs-bg-soft); } /* Lined: no box around the table — hairlines only, with a heavier rule under the header to keep the column labels anchored. */ .bdocs-table-wrap.is-table-lined { border: 0; border-radius: 0; } .bdocs-table-wrap.is-table-lined thead th { background: transparent; border-bottom: 2px solid var(--bdocs-line-strong, var(--bdocs-line)); } /* Compact: dense reference tables — more rows per screen, same legibility. */ .bdocs-table-wrap.is-table-compact th, .bdocs-table-wrap.is-table-compact td { padding: 6px 10px; font-size: 13px; } .bdocs-attrs td:first-child { white-space: nowrap; } /* -------------------------------------------------------------------- faq */ .bdocs-faq { margin: 0 0 24px; } .bdocs-faq-item { margin: 0 0 10px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: calc(var(--bdocs-radius) + 2px); } .bdocs-faq-item[open] { border-color: color-mix(in srgb, var(--bdocs-brand) 30%, var(--bdocs-line)); } .bdocs-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 13px 16px; font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; user-select: none; } /* The default disclosure triangle, in both engines that draw one — the chevron on the right replaces it. */ .bdocs-faq-q::-webkit-details-marker { display: none; } .bdocs-faq-q::marker { content: ""; } .bdocs-faq-q:hover { color: var(--bdocs-link, var(--bdocs-brand)); } .bdocs-faq-chev { flex: none; width: 16px; height: 16px; color: var(--bdocs-faint); transition: transform 0.15s ease; } .bdocs-faq-item[open] > .bdocs-faq-q .bdocs-faq-chev { transform: rotate(180deg); } .bdocs-faq-a { padding: 0 16px 14px; } .bdocs-faq-a > :last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .bdocs-faq-chev { transition: none; } } /* -------------------------------------------------------------- pro badge */ .bdocs-pro { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; } .bdocs-pro-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: #ea580c; border: 0; border-radius: 4px; padding: 2px 6px; text-decoration: none; white-space: nowrap; line-height: 1.4; } a.bdocs-pro-badge:hover { background: #c2410c; color: #fff; text-decoration: none; } .bdocs-pro-badge.is-inline { font-size: 9px; padding: 1px 4px; margin-left: 4px; } .bdocs-pro-note { font-size: 14px; color: var(--bdocs-ink-soft); } /* ------------------------------------------------------------ media slot */ .bdocs-media { margin: 0 0 24px; } .bdocs-media img, .bdocs-media video { display: block; max-width: 100%; height: auto; border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); cursor: zoom-in; } .bdocs-media figcaption { font-size: 13px; color: var(--bdocs-muted); margin-top: 8px; } .bdocs-media-ph { border: 1px dashed #c9cddd; border-radius: var(--bdocs-radius); background: var(--bdocs-bg-soft); padding: 28px 20px; text-align: center; color: var(--bdocs-muted); } .bdocs-ph-icon { width: 28px; height: 28px; color: var(--bdocs-faint); } .bdocs-ph-label { font-size: 14px; font-weight: 600; color: var(--bdocs-ink-soft); margin-top: 8px; } .bdocs-ph-path { font-family: var(--bdocs-mono); font-size: 11px; color: var(--bdocs-faint); margin-top: 4px; word-break: break-all; } .bdocs-ph-hint { font-size: 12px; margin-top: 8px; } .bdocs-yt { position: relative; padding-top: 56.25%; border-radius: var(--bdocs-radius); overflow: hidden; border: 1px solid var(--bdocs-line); } .bdocs-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------------------------------------------------------------- variant */ .bdocs-variant-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); margin: 0 0 24px; } .bdocs-variant-switch-label { font-size: 13px; color: var(--bdocs-muted); } .bdocs-variant-buttons { display: flex; gap: 4px; flex-wrap: wrap; } .bdocs-variant-buttons button { font: inherit; font-size: 13px; padding: 4px 10px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: 6px; color: var(--bdocs-ink-soft); cursor: pointer; } .bdocs-variant-buttons button:hover { border-color: var(--bdocs-brand); } .bdocs-variant-buttons button.is-on { background: var(--bdocs-brand); border-color: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); font-weight: 600; } /* ----------------------------------------------------------- variant tabs */ /* The self-contained Variant Tabs block. Bordered card with a tab strip on top. docs.js adds .is-enhanced once it wires the tabs; everything that makes it read as tabs rather than a stack is scoped to that class, so the no-JS fallback — every panel shown under its own label — stays intact. */ .bdocs-vtabs { margin: 0 0 24px; border: 1px solid var(--bdocs-line); border-radius: calc(var(--bdocs-radius) + 2px); overflow: hidden; } .bdocs-vtab-list { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 8px 0; background: var(--bdocs-bg-soft); border-bottom: 1px solid var(--bdocs-line); } .bdocs-vtab-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 13px; background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--bdocs-muted); cursor: pointer; } .bdocs-vtab-btn:hover { color: var(--bdocs-ink); } .bdocs-vtab-btn.is-on { color: var(--bdocs-link, var(--bdocs-brand)); background: var(--bdocs-bg); border-color: var(--bdocs-line); /* Sits over the strip's bottom rule, so the active tab reads as joined to its panel rather than boxed off from it. */ margin-bottom: -1px; border-bottom: 1px solid var(--bdocs-bg); } .bdocs-vtab-panel { padding: 16px; } .bdocs-vtab-panel > :last-child { margin-bottom: 0; } /* The label a panel prints for itself is the no-JS wayfinder; once the tabs are live the strip names each panel, so the inline copy would just repeat it. */ .bdocs-vtabs.is-enhanced .bdocs-vtab-inline-label { display: none; } .bdocs-vtab-inline-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-faint); margin: 0 0 8px; } /* Before enhancement each panel is separated by a hairline, so a stack of them is not one undivided wall of text. */ .bdocs-vtabs:not(.is-enhanced) .bdocs-vtab-panel + .bdocs-vtab-panel { border-top: 1px solid var(--bdocs-line); } /* A variant block, and anything belonging to a heading a variant hid. */ .bdocs-variant[hidden], .bdocs-section-hidden { display: none !important; } /* --------------------------------------------------------------- feedback */ .bdocs-feedback { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 48px 0 0; padding: 16px 20px; background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-feedback-q { margin: 0; font-size: 14px; font-weight: 600; } .bdocs-feedback-buttons { display: flex; gap: 8px; } .bdocs-feedback-buttons button, .bdocs-feedback-send { font: inherit; font-size: 14px; padding: 5px 16px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: 6px; color: var(--bdocs-ink-soft); cursor: pointer; } .bdocs-feedback-buttons button:hover, .bdocs-feedback-send:hover { border-color: var(--bdocs-brand); color: var(--bdocs-brand-dark); } .bdocs-feedback-send { background: var(--bdocs-brand); border-color: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); } .bdocs-feedback-send:hover { background: var(--bdocs-brand-dark); color: var(--bdocs-on-brand, #fff); } /* The "why" step takes the full width, since it is a text box. */ .bdocs-feedback-label { flex: 0 0 100%; font-size: 14px; font-weight: 600; } .bdocs-feedback-note { flex: 1 1 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--bdocs-line); border-radius: 6px; resize: vertical; } .bdocs-feedback-note:focus { outline: 2px solid var(--bdocs-brand); outline-offset: -1px; } .bdocs-feedback-thanks { margin: 0; font-size: 14px; color: var(--bdocs-green); } /* --------------------------------------------------------------- lightbox */ .bdocs-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(16, 20, 34, 0.92); padding: 40px; } .bdocs-lightbox.is-open { display: flex; } .bdocs-lightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--bdocs-radius); } .bdocs-lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; opacity: 0.8; } .bdocs-lightbox button:hover { opacity: 1; } .bdocs-lightbox button svg { width: 28px; height: 28px; display: block; } .bdocs-lb-close { top: 16px; right: 16px; } .bdocs-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); } .bdocs-lb-next { right: 12px; top: 50%; transform: translateY(-50%); } .bdocs-lightbox.is-single .bdocs-lb-prev, .bdocs-lightbox.is-single .bdocs-lb-next { display: none; } .bdocs-lb-caption { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 13px; padding: 0 40px; } body.bdocs-lb-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .bdocs-shell * { transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ help centre */ /* A single centred column rather than the manual's three. Most visits here arrive from a search engine on one question, so the page they land on gets the whole width and nothing competes. */ .bdocs-help-top { padding: 20px 24px 40px; background: var(--bdocs-header-bg, var(--bdocs-bg-soft)); border-bottom: 1px solid var(--bdocs-line); } .bdocs-help-top .bdocs-brand { margin-bottom: 32px; } .bdocs-help-hero { max-width: 620px; margin: 0 auto; text-align: center; } .bdocs-help-hero-title { margin: 0 0 20px; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; } /* The search box is the header, not an accessory to it. */ .bdocs-help-search { max-width: none; margin: 0; } .bdocs-help-search .bdocs-search-input { font-size: 16px; padding: 14px 40px 14px 16px; background: var(--bdocs-bg); } .bdocs-help-main { max-width: max(var(--bdocs-align-shell, 0px), 900px); margin: 0 auto; padding: 32px 24px 80px; } /* The product page is a directory, so its groups are cards laid side by side — an arriving reader sees the shape of the documentation instead of an empty article beside a sidebar. */ /* Centred and column-capped rather than stretched. auto-fill over full-width columns leaves a product with one group looking like a page that failed to load; auto-fit swings the other way and stretches a three-link card to 900px. */ .bdocs-help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 20px; } /* Sub-articles inside a card, indented as the sidebar does it. */ .bdocs-help-card-subs { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--bdocs-line); } .bdocs-help-card-subs .bdocs-help-card-list a { font-size: 13px; color: var(--bdocs-muted); } .bdocs-help-card { padding: 20px 22px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-help-card-title { margin: 0 0 12px; font-size: 15px; font-weight: 650; } .bdocs-help-card-list { margin: 0; padding: 0; list-style: none; } .bdocs-help-card-list li { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; } .bdocs-help-card-list a { color: var(--bdocs-ink-soft); text-decoration: none; font-size: 14px; } .bdocs-help-card-list a:hover { color: var(--bdocs-brand-dark); text-decoration: underline; } .bdocs-help-article { max-width: var(--bdocs-content-max); margin: 0 auto; } @media (max-width: 600px) { .bdocs-help-hero-title { font-size: 21px; } .bdocs-help-top { padding-bottom: 28px; } } /* ------------------------------------------------------------- ask the docs */ .bdocs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Bottom-right, above the content but below the lightbox. Deliberately a labelled button rather than a bare icon: a circle with a speech bubble could be live chat with a person, and a reader who expects a human and gets a model feels misled. */ .bdocs-ask-btn { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: var(--bdocs-sans); font-size: 14px; font-weight: 550; color: var(--bdocs-on-brand, #fff); background: var(--bdocs-brand); border: 0; border-radius: 999px; box-shadow: 0 2px 12px rgb(26 32 54 / 18%); cursor: pointer; } .bdocs-ask-btn:hover { background: var(--bdocs-brand-dark); } .bdocs-ask-btn:focus-visible { outline: 2px solid var(--bdocs-ink); outline-offset: 2px; } .bdocs-ask-btn svg { width: 17px; height: 17px; flex: none; } .bdocs-ask { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 40px); height: min(480px, calc(100vh - 40px)); max-height: min(600px, calc(100vh - 40px)); background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); box-shadow: 0 8px 32px rgb(26 32 54 / 18%); font-family: var(--bdocs-sans); } .bdocs-ask[hidden] { display: none; } .bdocs-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bdocs-line); } .bdocs-ask-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--bdocs-ink); } .bdocs-ask-x { display: inline-flex; padding: 4px; color: var(--bdocs-muted); background: none; border: 0; border-radius: 6px; cursor: pointer; } .bdocs-ask-x:hover { color: var(--bdocs-ink); background: var(--bdocs-bg-soft); } .bdocs-ask-x svg { width: 16px; height: 16px; } .bdocs-ask-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .bdocs-ask-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--bdocs-muted); } .bdocs-ask-msg { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.65; } .bdocs-ask-text { margin: 0; /* The model answers in plain text, so newlines are the only structure an answer has — losing them turns a numbered procedure into one run-on sentence. */ white-space: pre-wrap; } .bdocs-ask-msg.is-you .bdocs-ask-text { align-self: flex-end; max-width: 85%; padding: 8px 12px; color: var(--bdocs-ink); background: var(--bdocs-bg-soft); border-radius: var(--bdocs-radius); } .bdocs-ask-msg.is-bot .bdocs-ask-text { color: var(--bdocs-ink-soft); } /* An excerpt is set as a quotation, because that is what it is. The built-in engine returns the documentation's own words, and dressing them as a composed reply invites the reader to read intent into phrasing the author never aimed at them. */ .bdocs-ask-msg.is-quoted .bdocs-ask-text { padding-left: 12px; border-left: 2px solid var(--bdocs-line); color: var(--bdocs-ink); } .bdocs-ask-quoted-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-faint); } .bdocs-ask-msg.is-error .bdocs-ask-text { color: var(--bdocs-red); } .bdocs-ask-sources { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--bdocs-line); } .bdocs-ask-sources-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-faint); } .bdocs-ask-source { font-size: 12px; color: var(--bdocs-brand); text-decoration: none; } .bdocs-ask-source:hover { text-decoration: underline; } /* The escalation link is the point of a refusal, so it is a button rather than one more line of text to notice. */ .bdocs-ask-escalate { align-self: flex-start; padding: 6px 12px; font-size: 12px; font-weight: 550; color: var(--bdocs-ink); text-decoration: none; background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-ask-escalate:hover { border-color: var(--bdocs-brand); color: var(--bdocs-brand); } .bdocs-ask-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bdocs-line); } .bdocs-ask-input { flex: 1; min-width: 0; padding: 8px 12px; font-family: inherit; font-size: 13px; color: var(--bdocs-ink); background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-ask-input:focus { outline: 2px solid var(--bdocs-brand); outline-offset: -1px; } .bdocs-ask-send { padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 550; color: var(--bdocs-on-brand, #fff); background: var(--bdocs-brand); border: 0; border-radius: var(--bdocs-radius); cursor: pointer; } .bdocs-ask-send:hover:not(:disabled) { background: var(--bdocs-brand-dark); } .bdocs-ask-send:disabled { opacity: 0.55; cursor: default; } @media (max-width: 600px) { /* Full width on a phone, and the launcher label collapses to its icon so it does not sit across the content. */ .bdocs-ask { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; } .bdocs-ask-btn span { display: none; } .bdocs-ask-btn { right: 12px; bottom: 12px; padding: 12px; } } /* ============================================================== AURORA === */ /** * The Aurora template. * * Everything here is scoped under .bdocs-aurora so it dresses only the pages * that opted into it — a product on the bPlugins template loads the same * stylesheet and must be untouched by any of it. * * There is no topbar here, so every rule that offsets for one — the sticky * sidebar, the sticky contents, the anchored-heading scroll margin — is * overridden below. --bdocs-topbar-h is deliberately left alone rather than * zeroed: it feeds calc() in the shared rules, and a zero there would leave * this template depending on those rules resolving to something sensible * instead of on its own values. */ .bdocs-aurora { --bdocs-aur-card: #fff; --bdocs-aur-gap: 28px; /* No background of its own — the site's shows through. This overrides the white .bdocs-shell paints, which is right for a standalone document and wrong here, where the docs sit on the theme's own page background. A product that does want one sets it in the doc settings. */ background: var(--bdocs-page-bg, transparent); } .bdocs-aurora .bdocs-content h2 { scroll-margin-top: 24px; } .bdocs-aurora .bdocs-content h3 { scroll-margin-top: 24px; } /* --------------------------------------------------------- aurora: layout */ .bdocs-aur-layout { display: grid; grid-template-columns: 288px minmax(0, 1fr) 244px; gap: var(--bdocs-aur-gap); align-items: start; width: 100%; max-width: max(var(--bdocs-align-shell, 0px), 1440px); margin: 0 auto; padding: 30px 28px 72px; } @media (max-width: 1240px) { .bdocs-aur-layout { grid-template-columns: 268px minmax(0, 1fr); } .bdocs-aur-toc { display: none; } } @media (max-width: 900px) { .bdocs-aur-layout { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 64px; } } /* -------------------------------------------------------- aurora: sidebar */ /** * The navigation as a floating card. It keeps the shared .bdocs-sidebar class * so the existing mobile drawer script still finds and toggles it, and the * card properties are reset inside the drawer where a rounded, shadowed panel * floating over a full-height sheet would read as a mistake. */ .bdocs-aur-side { position: sticky; top: 30px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 20px 16px 24px; background: var(--bdocs-sidebar-bg, var(--bdocs-aur-card)); border: 1px solid var(--bdocs-line); /* Tracks the product's radius rather than being fixed at 18px, so setting a square corner squares the card too instead of leaving one rounded thing. */ border-radius: calc(var(--bdocs-radius) + 8px); box-shadow: 0 18px 40px -28px rgba(26, 32, 54, 0.45); } .bdocs-aur-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bdocs-line); } .bdocs-aur-side-head .bdocs-aur-brand { padding: 0; flex: 1; min-width: 0; } .bdocs-aur-mobile-bar { display: none; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bdocs-bg); border-bottom: 1px solid var(--bdocs-line); position: sticky; top: 0; z-index: 40; } .bdocs-aur-mobile-actions { display: flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .bdocs-aur-mobile-bar { display: flex; } } .bdocs-aur-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bdocs-ink); padding: 2px 4px 16px; } .bdocs-aur-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: linear-gradient(140deg, var(--bdocs-brand), var(--bdocs-brand-dark)); color: var(--bdocs-on-brand, #fff); font-size: 15px; font-weight: 700; line-height: 1; } .bdocs-aur-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .bdocs-aur-name { font-size: 15px; font-weight: 680; letter-spacing: -0.01em; line-height: 1.25; } /* --------------------------------------------------------- aurora: search */ .bdocs-aurora .bdocs-aur-search { margin: 0 0 18px; max-width: none; } /* A bordered field on the card rather than a pill of soft grey — the search reads as the first control of the column, matching the outlined group buttons below it. */ .bdocs-aurora .bdocs-aur-search .bdocs-search-input { padding: 11px 52px 11px 38px; border-radius: 12px; background: transparent; } .bdocs-aur-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--bdocs-faint); pointer-events: none; } /* ------------------------------------------------------------ aurora: nav */ .bdocs-aur-nav { display: flex; flex-direction: column; gap: 10px; } /** * A group heading, drawn as an outlined button: accent text and folder on the * card, a hairline tinted toward the accent, and the open group filled solid. * It carries .bdocs-nav-head too, so most of what a button needs is inherited; * these rules undo the uppercase micro-label treatment that suits a bare list * but not a button, and take over colour and shape. */ .bdocs-aur-pill { padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--bdocs-brand) 22%, var(--bdocs-line)); border-radius: 12px; font-size: 13.5px; font-weight: 620; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--bdocs-link, var(--bdocs-brand)); } .bdocs-aur-pill-label { display: flex; align-items: center; gap: 10px; min-width: 0; } .bdocs-aur-pill svg { flex: none; width: 17px; height: 17px; } .bdocs-aur-pill .bdocs-chev { width: 14px; height: 14px; opacity: 0.55; } .bdocs-aur-group.is-open > .bdocs-aur-pill, .bdocs-aur-group.is-open > .bdocs-aur-pill:hover { background: var(--bdocs-brand); border-color: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); } .bdocs-aur-pill:hover { background: var(--bdocs-brand-light); border-color: color-mix(in srgb, var(--bdocs-brand) 40%, var(--bdocs-line)); /* The shared .bdocs-nav-head:hover would swap the accent for ink. */ color: var(--bdocs-link, var(--bdocs-brand)); } /* The shared rule indents .bdocs-nav-items as well, and the two together push the articles a third of the way across the card. */ .bdocs-aurora .bdocs-nav-items { padding-left: 0; } .bdocs-aur-sub { list-style: none; margin: 2px 0 8px; padding: 0 0 0 19px; } /* The guide rail sits on the nested list, so it keeps working at any depth instead of only on the first level of sub-articles. */ .bdocs-aur-sub .bdocs-aur-sub { margin: 0 0 2px; padding-left: 12px; border-left: 1px solid var(--bdocs-line); } .bdocs-aur-sub-link { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--bdocs-muted); text-decoration: none; } .bdocs-aur-sub-link:hover { background: var(--bdocs-bg-soft); color: var(--bdocs-ink); } .bdocs-aur-sub-link.is-active { background: var(--bdocs-brand-light); color: var(--bdocs-brand-dark); font-weight: 620; } /* ----------------------------------------------------------- aurora: main */ .bdocs-aur-main { min-width: 0; padding: 6px 0 0; } .bdocs-aurora .bdocs-article { max-width: var(--bdocs-content-max); margin-inline: auto; } .bdocs-aur-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: var(--bdocs-content-max); margin-inline: auto; font-size: 13px; color: var(--bdocs-muted); margin-bottom: 18px; } .bdocs-aur-crumbs a { color: var(--bdocs-muted); text-decoration: none; } .bdocs-aur-crumbs a:hover { color: var(--bdocs-brand-dark); } .bdocs-aur-home { display: inline-flex; align-items: center; gap: 5px; } .bdocs-aur-home svg { width: 14px; height: 14px; } .bdocs-aur-sep { color: var(--bdocs-faint); } .bdocs-aur-current { color: var(--bdocs-ink-soft); font-weight: 560; } .bdocs-aur-h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-size: clamp(2rem, 4.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 720; text-wrap: balance; margin: 0 0 22px; } /* ------------------------------------------------------------ aurora: toc */ .bdocs-aur-toc { position: sticky; top: 30px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 6px 4px 24px; } .bdocs-aurora .bdocs-toc-title { font-size: 12px; letter-spacing: 0.04em; text-transform: none; font-weight: 700; color: var(--bdocs-ink); margin-bottom: 8px; } .bdocs-aurora .bdocs-toc-list a { display: flex; align-items: baseline; gap: 6px; border-left: 0; padding: 5px 8px; border-radius: 8px; } .bdocs-aurora .bdocs-toc-list a:hover { background: var(--bdocs-bg-soft); } .bdocs-aurora .bdocs-toc-list a.is-active { background: var(--bdocs-brand-light); color: var(--bdocs-brand-dark); } .bdocs-aur-chev { color: var(--bdocs-faint); font-size: 14px; line-height: 1; } .bdocs-aurora .bdocs-toc-list a.is-active .bdocs-aur-chev { color: var(--bdocs-brand); } /* Sub-headings are indented rather than given their own rail, so a contents list of two levels still reads as one list. */ .bdocs-aur-toc-3 { margin-left: 14px; } .bdocs-aur-toc-3 a { font-size: 12.5px; } /* ------------------------------------------------------- aurora: in-site */ /* The sticky columns clear the top of the docs rather than the top of the window. A theme with its own sticky header will overlap them by its height; there is no way to read that from CSS, so it is left to the theme. */ .bdocs-has-chrome .bdocs-aur-side, .bdocs-has-chrome .bdocs-aur-toc { top: 16px; max-height: calc(100vh - 32px); } /* ----------------------------------------------------------- aurora: mobile */ @media (max-width: 900px) { /* The card becomes the drawer. Rounding and shadow come off — a full-height sheet with a 18px radius on all four corners reads as a panel that failed to open. */ .bdocs-aur-side { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); max-height: none; z-index: 50; border-radius: 0; border-width: 0 1px 0 0; box-shadow: none; transform: translateX(-100%); transition: transform 0.2s ease; } body.bdocs-nav-open .bdocs-aur-side { transform: translateX(0); } /* In the mobile bar, not floating: the bar exists at exactly this width and already holds the brand and the theme toggle. */ .bdocs-aur-menu { display: inline-flex; } } /* ============================================================ HANDBOOK === */ /** * The Handbook template: one centred column, no sidebar. * * The measure is the whole design, so the type is a step larger than the other * templates and the column is narrower than their content area. Everything else * is restraint — there is no furniture to style. */ .bdocs-hb-top { display: flex; align-items: center; gap: 20px; max-width: max(var(--bdocs-align-shell, 0px), 780px); margin: 0 auto; padding: 22px 24px; border-bottom: 1px solid var(--bdocs-line); } .bdocs-hb-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--bdocs-ink); font-size: 15px; min-width: 0; } .bdocs-hb-search { max-width: 220px; } .bdocs-hb-main { max-width: max(var(--bdocs-align-shell, 0px), 780px); margin: 0 auto; padding: 40px 24px 96px; } .bdocs-hb-article { /* Wider than the column it sits in would be pointless; this is the reading measure the template exists to protect. */ max-width: 680px; /* Centred in whatever room the column has. At the default width the column is the measure plus its padding, so this changes nothing; at Wide and Full width the column is far wider, and without this the article stays pinned left with all the new space piled up on the right. */ margin-inline: auto; } .bdocs-hb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--bdocs-muted); margin-bottom: 14px; } .bdocs-hb-crumbs a { color: var(--bdocs-muted); text-decoration: none; } .bdocs-hb-crumbs a:hover { color: var(--bdocs-brand-dark); } .bdocs-hb-h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-size: clamp(1.9rem, 4vw, 2.35rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; margin: 0 0 24px; } /* A longer measure wants more leading, or the eye loses the line on return. */ .bdocs-hb .bdocs-content { font-size: 1.06rem; line-height: 1.78; } .bdocs-hb .bdocs-content h2 { margin-top: 52px; } /* ------------------------------------------------------- handbook: contents */ .bdocs-hb-toc { position: static; max-height: none; overflow: visible; padding: 14px 18px; margin: 0 0 32px; background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-hb-toc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bdocs-faint); margin: 0 0 6px; } .bdocs-hb-toc .bdocs-toc-list a { border-left: 0; padding: 3px 0; font-size: 14px; } /* --------------------------------------------------- handbook: reading list */ .bdocs-hb-contents { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--bdocs-line); } .bdocs-hb-contents-title { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bdocs-faint); margin: 24px 0 4px; } .bdocs-hb-group { font-size: 13px; font-weight: 650; color: var(--bdocs-ink-soft); margin: 24px 0 4px; } .bdocs-hb-list { list-style: none; margin: 0; padding: 0; } .bdocs-hb-item { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bdocs-line); } .bdocs-hb-item:last-child { border-bottom: 0; } /* The number is the reader's position in the whole handbook, so it is set in tabular figures and never wraps away from its title. */ .bdocs-hb-num { flex: none; min-width: 1.6em; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bdocs-faint); } .bdocs-hb-item a { color: var(--bdocs-ink); text-decoration: none; font-size: 15px; } .bdocs-hb-item a:hover { color: var(--bdocs-brand-dark); text-decoration: underline; text-underline-offset: 3px; } .bdocs-hb-depth-1 { padding-left: 26px; } .bdocs-hb-depth-2 { padding-left: 52px; } /* The next page is the most prominent thing at the end of an article, because in a handbook it is what the reader does next. */ .bdocs-hb-pager { margin-top: 56px; } .bdocs-hb-pager .bdocs-pager-link.is-next { background: var(--bdocs-brand-light); border-color: var(--bdocs-brand); } @media (max-width: 640px) { .bdocs-hb-top { flex-wrap: wrap; gap: 12px; padding: 16px; } .bdocs-hb-search { max-width: none; } .bdocs-hb-main { padding: 28px 16px 72px; } } /* =========================================================== REFERENCE === */ /** * The Reference template: nav plus one wide content column, no contents rail. * * Denser than the other templates on purpose — a page that is looked things * up in wants more rows on screen, not more air between them. */ /* =========================================================== REFERENCE === */ /** * The Reference template: pages that are mostly tables. */ .bdocs-ref-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 20px; background: var(--bdocs-header-bg, var(--bdocs-bg)); border-bottom: 1px solid var(--bdocs-line); } .bdocs-ref-top .bdocs-brand-kind { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bdocs-faint); padding-left: 10px; margin-left: 10px; border-left: 1px solid var(--bdocs-line); } .bdocs-ref-search { max-width: 300px; } .bdocs-ref-search .bdocs-search-input { font-family: var(--bdocs-mono); font-size: 13px; } .bdocs-ref-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; max-width: max(var(--bdocs-align-shell, 0px), 1500px); margin: 0 auto; } .bdocs-ref-side { position: sticky; top: 56px; /* Full window height, so the divider does not stop where the links do. */ height: calc(100vh - 56px); overflow-y: auto; padding: 20px 14px 48px; background: var(--bdocs-sidebar-bg, transparent); border-right: 1px solid var(--bdocs-line); } .bdocs-ref-group + .bdocs-ref-group { margin-top: 20px; } .bdocs-ref-group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-faint); margin: 0 0 4px; padding: 0 8px; } .bdocs-ref-list { list-style: none; margin: 0; padding: 0; } .bdocs-ref-link { display: block; padding: 4px 8px; font-size: 13.5px; line-height: 1.45; color: var(--bdocs-ink-soft); text-decoration: none; border-radius: 4px; } .bdocs-ref-link:hover { background: var(--bdocs-bg-soft); color: var(--bdocs-ink); } .bdocs-ref-link.is-active { background: var(--bdocs-brand-light); color: var(--bdocs-brand-dark); font-weight: 620; } /* A rail rather than a bullet, so depth reads at a glance in a list that is never collapsed. */ .bdocs-ref-depth-1, .bdocs-ref-depth-2 { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--bdocs-line); } .bdocs-ref-main { min-width: 0; padding: 26px 32px 80px; } .bdocs-ref-article { max-width: 1040px; margin-inline: auto; } .bdocs-ref-h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 680; margin: 0 0 14px; } .bdocs-ref .bdocs-content { font-size: 15px; line-height: 1.65; } .bdocs-ref .bdocs-content h2 { font-size: 1.2rem; margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bdocs-line); scroll-margin-top: 72px; } .bdocs-ref .bdocs-content h3 { font-size: 1rem; margin: 22px 0 6px; scroll-margin-top: 72px; } .bdocs-ref .bdocs-content table { font-variant-numeric: tabular-nums; } .bdocs-ref-toc { position: static; max-height: none; padding: 0; margin: 0 0 26px; overflow-x: auto; } .bdocs-ref-chips { display: flex; gap: 6px; list-style: none; margin: 0; padding: 2px 0 6px; width: max-content; } /* ============================================================== TABBED === */ /** * The Tabbed template: groups across the top, one group's articles down the * side. * * The tabs are links to each group's first article, so a section is a real * URL. The side column therefore only ever holds one group, which is the * point — it is short enough to read. */ .bdocs-tb-top { position: sticky; top: 0; z-index: 40; background: var(--bdocs-header-bg, var(--bdocs-bg)); border-bottom: 1px solid var(--bdocs-line); } .bdocs-tb-bar { display: flex; align-items: center; gap: 20px; max-width: max(var(--bdocs-align-shell, 0px), 1440px); margin: 0 auto; padding: 14px 24px 10px; } .bdocs-tb-search { max-width: 280px; } .bdocs-tb-tabs { display: flex; gap: 2px; max-width: max(var(--bdocs-align-shell, 0px), 1440px); margin: 0 auto; padding: 0 24px; overflow-x: auto; } .bdocs-tb-tab { flex: none; padding: 9px 14px; font-size: 14px; font-weight: 560; line-height: 1.3; color: var(--bdocs-muted); text-decoration: none; white-space: nowrap; /* The indicator is a border on the tab itself rather than a separate element, so it cannot drift out of alignment when the row scrolls. */ border-bottom: 2px solid transparent; } .bdocs-tb-tab:hover { color: var(--bdocs-ink); } .bdocs-tb-tab.is-active { color: var(--bdocs-brand-dark); border-bottom-color: var(--bdocs-brand); font-weight: 650; } .bdocs-tb-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 8px; align-items: start; max-width: max(var(--bdocs-align-shell, 0px), 1440px); margin: 0 auto; } .bdocs-tb-side { position: sticky; top: 104px; height: calc(100vh - 104px); overflow-y: auto; padding: 26px 12px 48px 24px; background: var(--bdocs-sidebar-bg, transparent); /* The tab row's underline already delimits this column, and .bdocs-sidebar brings a right border that would sit a few pixels from it. */ border-right: 0; } .bdocs-tb-side-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdocs-faint); margin: 0 0 8px; padding: 0 10px; } .bdocs-tb-list { list-style: none; margin: 0; padding: 0; } .bdocs-tb-link { display: block; padding: 6px 10px; font-size: 14px; line-height: 1.45; color: var(--bdocs-ink-soft); text-decoration: none; border-radius: 6px; } .bdocs-tb-link:hover { background: var(--bdocs-bg-soft); color: var(--bdocs-ink); } .bdocs-tb-link.is-active { background: var(--bdocs-brand-light); color: var(--bdocs-brand-dark); font-weight: 620; } .bdocs-tb-depth-1, .bdocs-tb-depth-2 { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--bdocs-line); } .bdocs-tb-main { min-width: 0; padding: 30px 28px 80px; } .bdocs-tb-toc { top: 104px; max-height: calc(100vh - 104px); padding: 32px 24px 48px 4px; } .bdocs-tb-toc-3 { margin-left: 12px; } .bdocs-tb-toc-3 a { font-size: 12.5px; } .bdocs-tb .bdocs-content h2, .bdocs-tb .bdocs-content h3 { scroll-margin-top: 120px; } @media (max-width: 1180px) { .bdocs-tb-layout { grid-template-columns: 240px minmax(0, 1fr); } .bdocs-tb-toc { display: none; } } @media (max-width: 900px) { .bdocs-tb-layout { grid-template-columns: minmax(0, 1fr); } .bdocs-tb-side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: auto; max-height: none; z-index: 50; padding: 24px 16px; background: var(--bdocs-sidebar-bg, var(--bdocs-bg)); transform: translateX(-100%); transition: transform 0.2s ease; } body.bdocs-nav-open .bdocs-tb-side { transform: translateX(0); } .bdocs-tb-menu { display: block; margin-left: auto; } .bdocs-tb-main { padding: 24px 16px 72px; } } /* ============================================================== DENIED === */ /** * Shown in place of a restricted doc's content. * * Inside the product's own template, so a reader who lands on a page they * cannot open still has the documentation around them and a way back into it, * rather than a bare 403 from the server. */ .bdocs-denied { padding: 28px 24px; background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); } .bdocs-denied-lead { margin: 0; font-size: 1.02rem; color: var(--bdocs-ink-soft); } .bdocs-denied-action { display: inline-block; margin-top: 14px; padding: 9px 18px; background: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); border-radius: var(--bdocs-radius); text-decoration: none; font-weight: 600; } .bdocs-denied-action:hover { background: var(--bdocs-brand-dark); color: var(--bdocs-on-brand, #fff); } /* =============================================================== SHARE === */ .bdocs-share { display: flex; align-items: center; gap: 8px; margin: 40px 0 0; } .bdocs-share-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bdocs-faint); margin-right: 2px; } .bdocs-share-link { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--bdocs-muted); background: none; border: 1px solid var(--bdocs-line); border-radius: var(--bdocs-radius); cursor: pointer; } .bdocs-share-link:hover { color: var(--bdocs-brand-dark); border-color: var(--bdocs-brand); } .bdocs-share-link svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Confirmation is the button itself changing, so there is no toast to place and nothing to dismiss. */ .bdocs-share-copy.is-copied { color: var(--bdocs-green); border-color: var(--bdocs-green); } /* ------------------------------------------------------ floating nav toggle */ /** * Stands in for the header's menu button on a page that hides the header. * * Only at the width where the sidebar is a drawer. Above that the sidebar is a * column that is already open, so a button to open it would do nothing. */ .bdocs-menu-float { display: none; } @media (max-width: 900px) { .bdocs-menu-float { display: block; position: fixed; top: 14px; left: 14px; z-index: 60; background: var(--bdocs-sidebar-bg, var(--bdocs-bg)); box-shadow: 0 10px 24px -14px rgba(26, 32, 54, 0.5); } } /* --------------------------------------------------------- loading skeleton */ /** * Shown by docs.js the instant a reader clicks through to another doc, in * place of the finished page they are leaving. The bars shimmer so the page * reads as "coming" rather than broken. */ .bdocs-skeleton { display: grid; gap: 14px; padding: 6px 0 40px; } /* Everything the skeleton replaces disappears with it, not before it. */ .bdocs-loading > :not(.bdocs-skeleton) { display: none !important; } .bdocs-skeleton-bar { height: 14px; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bdocs-bg-soft) 25%, var(--bdocs-line) 45%, var(--bdocs-bg-soft) 65%); background-size: 300% 100%; animation: bdocs-shimmer 1.3s linear infinite; } .bdocs-skeleton-bar.is-crumb { height: 12px; width: 34%; } .bdocs-skeleton-bar.is-title { height: 28px; width: 58%; border-radius: 8px; margin-bottom: 8px; } /* An invisible bar is a paragraph break. */ .bdocs-skeleton-bar.is-gap { height: 8px; visibility: hidden; animation: none; } .bdocs-skeleton-bar.is-w95 { width: 95%; } .bdocs-skeleton-bar.is-w92 { width: 92%; } .bdocs-skeleton-bar.is-w90 { width: 90%; } .bdocs-skeleton-bar.is-w88 { width: 88%; } .bdocs-skeleton-bar.is-w85 { width: 85%; } .bdocs-skeleton-bar.is-w80 { width: 80%; } .bdocs-skeleton-bar.is-w75 { width: 75%; } .bdocs-skeleton-bar.is-w60 { width: 60%; } .bdocs-skeleton-bar.is-w45 { width: 45%; } /* The contents rail gets thinner bars, matching the list it stands in for. */ .bdocs-toc .bdocs-skeleton { gap: 12px; padding: 6px 0; } .bdocs-toc .bdocs-skeleton-bar { height: 11px; } @keyframes bdocs-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .bdocs-skeleton-bar { animation: none; } } /* --------------------------------------------------- dark theme tokens */ :root[data-theme="dark"], .bdocs-shell[data-theme="dark"], body[data-theme="dark"] .bdocs-shell { --bdocs-ink: #f8fafc; --bdocs-ink-soft: #cbd5e1; --bdocs-muted: #94a3b8; --bdocs-faint: #64748b; --bdocs-line: #1e293b; --bdocs-bg: #0b0f19; --bdocs-bg-soft: #111827; --bdocs-code-bg: #1e293b; --bdocs-page-bg: #0b0f19; --bdocs-page-ink: #f8fafc; --bdocs-page-ink-soft: #cbd5e1; --bdocs-page-muted: #94a3b8; --bdocs-page-faint: #64748b; --bdocs-brand-dark: color-mix(in srgb, var(--bdocs-brand) 82%, #fff); --bdocs-brand-light: color-mix(in srgb, var(--bdocs-brand) 20%, #111827); } [data-theme="dark"] .bdocs-topbar, [data-theme="dark"] .bdocs-hb-top, [data-theme="dark"] .bdocs-help-top, [data-theme="dark"] .bdocs-tb-top { background: rgba(11, 15, 25, 0.95); border-color: #1e293b; } [data-theme="dark"] .bdocs-sidebar { background: #0b0f19; border-color: #1e293b; } [data-theme="dark"] .bdocs-nav-head { color: #e2e8f0; } [data-theme="dark"] .bdocs-nav-head:hover, [data-theme="dark"] .bdocs-nav-head:focus { background: #111827; color: #f8fafc; } [data-theme="dark"] .bdocs-nav-group.is-open > .bdocs-nav-head { color: #f8fafc; } [data-theme="dark"] .bdocs-nav-link { color: #94a3b8; } [data-theme="dark"] .bdocs-nav-link:hover { color: #f8fafc; background: #111827; } [data-theme="dark"] .bdocs-nav-link.is-active { color: #fff; background: color-mix(in srgb, var(--bdocs-brand) 30%, #111827); } [data-theme="dark"] .bdocs-bplugins .bdocs-nav-group.is-trail > .bdocs-nav-head { color: color-mix(in srgb, var(--bdocs-brand) 75%, #fff); } [data-theme="dark"] .bdocs-bplugins .bdocs-nav-items > .bdocs-nav-link.is-active { background: color-mix(in srgb, var(--bdocs-brand) 35%, #111827); border-left-color: var(--bdocs-brand); color: #fff; } [data-theme="dark"] .bdocs-search-input, [data-theme="dark"] .bdocs-spotlight-input { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .bdocs-search-input:focus { border-color: var(--bdocs-brand) !important; outline: 2px solid var(--bdocs-brand) !important; } [data-theme="dark"] .bdocs-search-key { background: #1e293b; border-color: #334155; color: #94a3b8; } [data-theme="dark"] .bdocs-toc-title { color: #f8fafc; } [data-theme="dark"] .bdocs-toc a { color: #94a3b8; } [data-theme="dark"] .bdocs-toc a:hover, [data-theme="dark"] .bdocs-toc a.is-active { color: #f8fafc; } [data-theme="dark"] .bdocs-toc a.is-active { border-left-color: var(--bdocs-brand); } [data-theme="dark"] .bdocs-trail, [data-theme="dark"] .bdocs-trail a { color: #94a3b8; } [data-theme="dark"] .bdocs-trail a:hover { color: #f8fafc; } [data-theme="dark"] .bdocs-h1, [data-theme="dark"] .bdocs-h2, [data-theme="dark"] .bdocs-h3, [data-theme="dark"] .bdocs-h4 { color: #f8fafc; } [data-theme="dark"] .bdocs-article, [data-theme="dark"] .bdocs-main { color: #cbd5e1; } [data-theme="dark"] .bdocs-card, [data-theme="dark"] .bdocs-help-card { background: #111827; border-color: #1e293b; } [data-theme="dark"] .bdocs-variant-bar { background: #111827; border-color: #1e293b; color: #cbd5e1; } [data-theme="dark"] .bdocs-variant-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .bdocs-variant-btn:hover { background: #334155; color: #f8fafc; } [data-theme="dark"] .bdocs-variant-btn.is-active { background: var(--bdocs-brand); border-color: var(--bdocs-brand); color: #fff; } [data-theme="dark"] .bdocs-code pre { background: #0f172a; border-color: #1e293b; color: #f8fafc; } [data-theme="dark"] .bdocs-feedback { background: #111827; border-color: #1e293b; } [data-theme="dark"] .bdocs-pager-card { background: #111827; border-color: #1e293b; } [data-theme="dark"] .bdocs-pager-card:hover { border-color: var(--bdocs-brand); background: #1e293b; } /* ------------------------------------------------ reading progress bar */ .bdocs-reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 99999; pointer-events: none; background: transparent; } .bdocs-reading-progress-fill { height: 100%; width: 0%; background: var(--bdocs-brand); transition: width 0.1s linear; } /* -------------------------------------------------- reading time badge */ .bdocs-article-header, .bdocs-aur-article-header, .bdocs-hb-article-header, .bdocs-help-article-header, .bdocs-tb-article-header { margin-bottom: 20px; } .bdocs-article-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .bdocs-reading-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--bdocs-muted); } .bdocs-reading-time svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; } /* ---------------------------------------------- announcement banner bar */ .bdocs-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; font-size: 13px; font-weight: 500; position: relative; z-index: 50; transition: all 0.2s ease; } .bdocs-banner[hidden], .bdocs-banner.is-hidden { display: none !important; } .bdocs-banner--top { position: relative; } .bdocs-banner--bottom { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(920px, calc(100vw - 32px)); box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.25); z-index: 999; } /* Style: Primary (Solid Brand) */ .bdocs-banner--primary { background: var(--bdocs-brand); color: #fff; } .bdocs-banner--primary .bdocs-banner-tag { background: rgba(255, 255, 255, 0.2); color: #fff; } .bdocs-banner--primary .bdocs-banner-link { color: #fff; } .bdocs-banner--primary .bdocs-banner-close { color: rgba(255, 255, 255, 0.8); } /* Style: Dark */ .bdocs-banner--dark { background: #0f172a; color: #f8fafc; border: 1px solid #1e293b; } .bdocs-banner--dark .bdocs-banner-tag { background: var(--bdocs-brand); color: #fff; } .bdocs-banner--dark .bdocs-banner-link { color: #60a5fa; } .bdocs-banner--dark .bdocs-banner-close { color: #94a3b8; } .bdocs-banner--dark .bdocs-banner-close:hover { color: #fff; } /* Style: Vibrant Gradient */ .bdocs-banner--gradient { background: linear-gradient(135deg, var(--bdocs-brand) 0%, #6366f1 50%, #ec4899 100%); color: #fff; } .bdocs-banner--gradient .bdocs-banner-tag { background: rgba(0, 0, 0, 0.25); color: #fff; } .bdocs-banner--gradient .bdocs-banner-link { color: #fff; } .bdocs-banner--gradient .bdocs-banner-close { color: rgba(255, 255, 255, 0.85); } /* Style: Subtle Outline */ .bdocs-banner--subtle { background: var(--bdocs-card, #fff); color: var(--bdocs-ink); border: 1px solid var(--bdocs-line); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .bdocs-banner--subtle .bdocs-banner-tag { background: var(--bdocs-brand-light, #eef2ff); color: var(--bdocs-brand); border: 1px solid var(--bdocs-brand); } .bdocs-banner--subtle .bdocs-banner-link { color: var(--bdocs-brand); } .bdocs-banner--subtle .bdocs-banner-close { color: var(--bdocs-muted); } .bdocs-banner--subtle .bdocs-banner-close:hover { color: var(--bdocs-ink); } .bdocs-banner-content { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bdocs-banner-tag { font-family: var(--bdocs-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 0; } .bdocs-banner-link { text-decoration: underline; font-weight: 600; margin-left: 4px; } .bdocs-banner-link:hover { opacity: 0.85; } .bdocs-banner-close { background: transparent; border: 0; cursor: pointer; font-size: 14px; padding: 4px; line-height: 1; transition: color 0.15s ease; } /* --------------------------------------------------- theme toggle button */ .bdocs-theme-btn { background: transparent; border: 1px solid var(--bdocs-line); color: var(--bdocs-ink-soft); width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .bdocs-topbar .bdocs-theme-btn, .bdocs-hb-top .bdocs-theme-btn, .bdocs-help-top .bdocs-theme-btn, .bdocs-tb-top .bdocs-theme-btn { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); } .bdocs-topbar .bdocs-theme-btn:hover, .bdocs-hb-top .bdocs-theme-btn:hover, .bdocs-help-top .bdocs-theme-btn:hover, .bdocs-tb-top .bdocs-theme-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; color: #fff; } [data-theme="dark"] .bdocs-topbar .bdocs-theme-btn, [data-theme="dark"] .bdocs-hb-top .bdocs-theme-btn, [data-theme="dark"] .bdocs-help-top .bdocs-theme-btn, [data-theme="dark"] .bdocs-tb-top .bdocs-theme-btn { color: #f8fafc; border-color: #1e293b; background: #111827; } .bdocs-theme-btn:hover { background: var(--bdocs-bg-soft); border-color: var(--bdocs-brand); color: var(--bdocs-brand); } .bdocs-theme-btn svg { width: 18px; height: 18px; } .bdocs-theme-icon-light { display: block; } .bdocs-theme-icon-dark { display: none; } [data-theme="dark"] .bdocs-theme-icon-light { display: none; } [data-theme="dark"] .bdocs-theme-icon-dark { display: block; } /* ------------------------------------------ spotlight search (Cmd+K) */ .bdocs-spotlight-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 80px 20px 40px; } .bdocs-spotlight-modal[hidden] { display: none; } .bdocs-spotlight-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bdocs-spotlight-box { position: relative; width: 100%; max-width: 640px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; } .bdocs-spotlight-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bdocs-line); background: var(--bdocs-bg); } .bdocs-spotlight-icon { width: 20px; height: 20px; color: var(--bdocs-muted); flex-shrink: 0; } .bdocs-spotlight-input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--bdocs-ink); font-family: var(--bdocs-sans); } .bdocs-spotlight-esc { font-family: var(--bdocs-mono); font-size: 10px; font-weight: 700; color: var(--bdocs-muted); background: var(--bdocs-bg-soft); border: 1px solid var(--bdocs-line); padding: 3px 6px; cursor: pointer; } .bdocs-spotlight-body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 420px; } .bdocs-spotlight-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; text-decoration: none; color: var(--bdocs-ink); border: 1px solid transparent; transition: all 0.12s ease; cursor: pointer; } .bdocs-spotlight-item:hover, .bdocs-spotlight-item.is-selected { background: var(--bdocs-brand-light); border-color: var(--bdocs-brand); color: var(--bdocs-brand-dark); } .bdocs-spotlight-title { font-size: 14px; font-weight: 600; } .bdocs-spotlight-breadcrumb { font-size: 11px; color: var(--bdocs-muted); } .bdocs-spotlight-foot { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--bdocs-line); background: var(--bdocs-bg-soft); font-size: 11px; color: var(--bdocs-muted); } .bdocs-spotlight-foot kbd { font-family: var(--bdocs-mono); font-size: 10px; background: var(--bdocs-bg); border: 1px solid var(--bdocs-line); padding: 2px 5px; } /* ---------------------------------------------- multi-language code tabs */ .bdocs-code-tabs { display: flex; align-items: center; gap: 2px; background: #0f172a; padding: 4px 8px 0; border-top: 1px solid #1e293b; border-left: 1px solid #1e293b; border-right: 1px solid #1e293b; } .bdocs-code-tab { font-family: var(--bdocs-mono); font-size: 11px; font-weight: 600; color: #94a3b8; background: transparent; border: 0; padding: 6px 12px; cursor: pointer; transition: all 0.15s ease; } .bdocs-code-tab:hover { color: #fff; } .bdocs-code-tab.is-active { color: #fff; background: #1e293b; } /* ---------------------------------------------------- changelog block */ .bdocs-changelog { position: relative; margin: 28px 0; } .bdocs-changelog-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bdocs-changelog-ver { font-family: var(--bdocs-mono, monospace); font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--bdocs-ink); } .bdocs-changelog-badge { display: inline-flex; align-items: center; font-family: var(--bdocs-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 0; } .bdocs-changelog-badge--major { background: var(--bdocs-brand); color: var(--bdocs-on-brand, #fff); } .bdocs-changelog-badge--minor { background: #10b981; color: #fff; } .bdocs-changelog-badge--patch { background: #f59e0b; color: #fff; } .bdocs-changelog-badge--security { background: #8b5cf6; color: #fff; } .bdocs-changelog-badge--custom { background: #64748b; color: #fff; } .bdocs-changelog-date { font-size: 12.5px; color: var(--bdocs-muted); } .bdocs-changelog-title { font-size: 18px; font-weight: 700; color: var(--bdocs-ink); margin: 6px 0 10px; line-height: 1.35; } .bdocs-changelog-body { color: var(--bdocs-ink-soft); font-size: 14.5px; line-height: 1.65; } .bdocs-changelog-body ul { margin: 8px 0 12px; padding-left: 20px; } .bdocs-changelog-body li { margin-bottom: 4px; } /* Style: Timeline */ .bdocs-changelog--timeline { padding-left: 32px; } .bdocs-changelog--timeline .bdocs-changelog-rail { position: absolute; left: 7px; top: 8px; bottom: -28px; width: 2px; background: var(--bdocs-line); } .bdocs-changelog--timeline .bdocs-changelog-dot { position: absolute; left: -5px; top: 0; width: 12px; height: 12px; background: var(--bdocs-brand); border: 2px solid var(--bdocs-bg); border-radius: 0; } .bdocs-changelog--timeline:last-of-type .bdocs-changelog-rail { bottom: 0; } /* Style: Card */ .bdocs-changelog--card { padding: 24px 28px; background: var(--bdocs-card, #fff); border: 1px solid var(--bdocs-line); border-radius: 0; box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05); } .bdocs-changelog--card .bdocs-changelog-rail { display: none; } .bdocs-changelog--card .bdocs-changelog-header { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bdocs-line); } /* Style: Minimal */ .bdocs-changelog--minimal { padding: 8px 0 8px 18px; border-left: 3px solid var(--bdocs-brand); } .bdocs-changelog--minimal .bdocs-changelog-rail { display: none; } /* Style: Flat / Banner Header */ .bdocs-changelog--flat { padding-bottom: 24px; border-bottom: 1px solid var(--bdocs-line); } .bdocs-changelog--flat .bdocs-changelog-rail { display: none; } .bdocs-changelog--flat .bdocs-changelog-header { margin-bottom: 14px; } /* Release change tags */ .bdocs-tag-new, .bdocs-tag-improved, .bdocs-tag-fixed, .bdocs-tag-security, .bdocs-tag-deprecated { display: inline-block; font-family: var(--bdocs-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: 0; margin-right: 6px; vertical-align: middle; line-height: 1.4; } .bdocs-tag-new { background: #dcfce7; color: #15803d; } .bdocs-tag-improved { background: #e0e7ff; color: #4338ca; } .bdocs-tag-fixed { background: #fef3c7; color: #b45309; } .bdocs-tag-security { background: #f3e8ff; color: #7e22ce; } .bdocs-tag-deprecated { background: #fee2e2; color: #b91c1c; } /* Dark mode overrides for changelog */ [data-theme="dark"] .bdocs-changelog--card { background: #111827; border-color: #1e293b; box-shadow: none; } [data-theme="dark"] .bdocs-changelog--timeline .bdocs-changelog-dot { border-color: #0f172a; } [data-theme="dark"] .bdocs-tag-new { background: rgba(22, 163, 74, 0.2); color: #4ade80; } [data-theme="dark"] .bdocs-tag-improved { background: rgba(99, 102, 241, 0.2); color: #818cf8; } [data-theme="dark"] .bdocs-tag-fixed { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } [data-theme="dark"] .bdocs-tag-security { background: rgba(168, 85, 247, 0.2); color: #c084fc; } [data-theme="dark"] .bdocs-tag-deprecated { background: rgba(239, 68, 68, 0.2); color: #f87171; } /* ------------------------------------------------------ print stylesheet */ @media print { .bdocs-topbar, .bdocs-sidebar, .bdocs-toc, .bdocs-theme-btn, .bdocs-reading-progress, .bdocs-banner, .bdocs-spotlight-modal, .bdocs-share, .bdocs-feedback, .bdocs-pager, .bdocs-chat, .bdocs-menu-btn { display: none !important; } .bdocs-shell, .bdocs-main, .bdocs-article { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #000 !important; background: #fff !important; } .bdocs-h1 { font-size: 24pt !important; } } /* ------------------------------------------------------- canvas layout Per-doc "Canvas" layout: an app-like page (ideas board, roadmap, landing) inside a documentation product. Strips the reading chrome — sidebars, TOC, share, feedback, pager, menu toggles — and widens the content column. */ .bdocs-canvas { --bdocs-content-max: 1160px; } .bdocs-layout.bdocs-canvas, .bdocs-aur-layout.bdocs-canvas, .bdocs-tb-layout.bdocs-canvas { grid-template-columns: minmax(0, 1fr); } .bdocs-canvas .bdocs-sidebar, .bdocs-canvas .bdocs-toc, .bdocs-canvas .bdocs-hb-toc, .bdocs-canvas .bdocs-share, .bdocs-canvas .bdocs-feedback, .bdocs-canvas .bdocs-pager { display: none !important; } /* The menu toggles live in the header, outside the layout wrapper — with no sidebar on the page they would open nothing. */ body:has(.bdocs-canvas) .bdocs-menu-btn { display: none !important; } /* Single-column templates widen their main column directly. */ .bdocs-help-main.bdocs-canvas { max-width: max(var(--bdocs-align-shell, 0px), 1160px); } .bdocs-hb-main.bdocs-canvas { max-width: max(var(--bdocs-align-shell, 0px), 1160px); }