(top tab bar, full width)
(left nav)
...DocsPage or DocsIndex...
--- */
.scribekit-docs {
display: flex;
flex-direction: column;
/* Full-width app by default; set --scribekit-docs-max-width to cap and centre the whole shell. */
max-width: var(--scribekit-docs-max-width, none);
margin-inline: auto;
min-height: var(--scribekit-docs-min-height, auto);
color: var(--scribekit-ink, #0b1b36);
background: var(--scribekit-surface, #ffffff);
font-family: var(--scribekit-font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* The docs UI assumes `box-sizing: border-box`; scope it to the docs subtree (and the palette, which
renders as a sibling of the shell) so the layout is correct even when the host app ships no global
reset. Without it, padding falls outside the grid tracks and the index section cards overflow and
wrap oddly. */
.scribekit-docs,
.scribekit-docs *,
.scribekit-docs *::before,
.scribekit-docs *::after,
.scribekit-docs-palette-backdrop,
.scribekit-docs-palette-backdrop *,
.scribekit-docs-palette-backdrop *::before,
.scribekit-docs-palette-backdrop *::after {
box-sizing: border-box;
}
/* The command palette portals visually outside `.scribekit-docs` (a sibling of the shell, so it can
overlay the whole viewport), so it cannot inherit the shell's font. Set it here so the palette
matches the docs even when the host `body` font differs (or is unset). */
.scribekit-docs-palette-backdrop {
font-family: var(--scribekit-font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.scribekit-docs-body {
display: flex;
align-items: stretch;
min-height: var(--scribekit-docs-body-min-height, 60vh);
}
/* The sticky columns (left nav, right ToC) must start exactly where the sticky chrome above them
ends, or they slide underneath it as the article scrolls. Which chrome exists is a render-time
fact (DocsTabs renders nothing for a single tab), so derive the offset from the DOM: each rule
below matches only when that chrome is actually present as a sibling. `--scribekit-docs-content-top`
stays the consumer's override and always wins (e.g. a docs shell under an app-level header). */
.scribekit-docs-body {
--scribekit-docs-chrome-top: 0px;
}
.scribekit-docs-navbar ~ .scribekit-docs-body {
--scribekit-docs-chrome-top: var(--scribekit-docs-navbar-height, 64px);
}
.scribekit-docs-tabbar ~ .scribekit-docs-body {
--scribekit-docs-chrome-top: var(--scribekit-docs-tabbar-height, 47px);
}
.scribekit-docs-navbar ~ .scribekit-docs-tabbar ~ .scribekit-docs-body {
--scribekit-docs-chrome-top: calc(var(--scribekit-docs-navbar-height, 64px) + var(--scribekit-docs-tabbar-height, 47px));
}
.scribekit-docs-main {
flex: 1;
min-width: 0;
display: flex;
}
/* --- Docs top tab bar (only rendered when getNavTree reports more than one tab) --- */
.scribekit-docs-tabbar {
position: sticky;
top: var(--scribekit-docs-tabbar-top, 0);
z-index: 25;
display: flex;
align-items: center;
height: var(--scribekit-docs-tabbar-height, 47px);
padding: 0 22px;
border-bottom: 1px solid var(--scribekit-border-strong, #eaeef4);
background: var(--scribekit-surface, #ffffff);
overflow-x: auto;
scrollbar-width: none;
}
.scribekit-docs-tabbar::-webkit-scrollbar {
display: none;
}
/* With a navbar above it, the tab bar sticks below the navbar rather than at the viewport top. */
.scribekit-docs-navbar ~ .scribekit-docs-tabbar {
top: var(--scribekit-docs-tabbar-top, var(--scribekit-docs-navbar-height, 64px));
}
.scribekit-docs-tabbar-inner {
position: relative;
display: flex;
align-items: stretch;
gap: 2px;
height: 100%;
}
.scribekit-docs-tab {
display: flex;
align-items: center;
height: 100%;
padding: 0 13px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
color: var(--scribekit-ink-soft, #5a6b82);
text-decoration: none;
transition: color 0.15s ease;
}
.scribekit-docs-tab:hover {
color: var(--scribekit-ink, #0b1b36);
}
.scribekit-docs-tab.is-active {
color: var(--scribekit-ink, #0b1b36);
font-weight: 600;
}
/* The sliding underline; positioned in JS from the active tab's offset/width. */
.scribekit-docs-tab-indicator {
position: absolute;
bottom: -1px;
height: 3px;
border-radius: 3px 3px 0 0;
background: linear-gradient(90deg, var(--scribekit-primary, #2563eb), var(--scribekit-violet, #6d5df6));
transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- Docs left navigation --- */
.scribekit-docs-nav {
flex: 0 0 var(--scribekit-docs-nav-width, 300px);
width: var(--scribekit-docs-nav-width, 300px);
border-right: 1px solid var(--scribekit-border-strong, #eaeef4);
background: var(--scribekit-docs-nav-bg, linear-gradient(180deg, #fcfdfe, #fbfcfe));
}
.scribekit-docs-nav-inner {
position: sticky;
top: var(--scribekit-docs-content-top, var(--scribekit-docs-chrome-top, 0px));
max-height: calc(100vh - var(--scribekit-docs-content-top, var(--scribekit-docs-chrome-top, 0px)));
overflow-y: auto;
padding: 22px 16px 40px;
}
/* --- Docs top bar (DocsNavbar) --- */
.scribekit-docs-navbar {
position: sticky;
top: var(--scribekit-docs-navbar-top, 0);
z-index: 30;
display: flex;
align-items: center;
gap: 20px;
height: var(--scribekit-docs-navbar-height, 64px);
padding: 0 22px;
border-bottom: 1px solid var(--scribekit-border-strong, #eaeef4);
background: var(--scribekit-navbar-bg, rgba(255, 255, 255, 0.9));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.scribekit-docs-navbar-brand {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
text-decoration: none;
}
/*
* The nav-drawer button. It sits in the TOP BAR rather than in the sidebar so a phone spends one
* bar of chrome instead of two - the sidebar's own "Documentation" toggle used to occupy a second
* 72px strip above every page, and expanding it pushed the article down instead of overlaying it.
* Hidden above the layout breakpoint, where the sidebar is a permanent column and there is nothing
* to open. `DocsNavbar` renders it only when a `DocsSidebar` is actually mounted.
*/
.scribekit-docs-navbar-burger {
display: none;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 12px;
background: transparent;
color: var(--scribekit-ink, #0b1b36);
cursor: pointer;
}
.scribekit-docs-navbar-burger:hover {
background: var(--scribekit-bg-subtle, #f7f9fc);
}
.scribekit-docs-navbar-burger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.scribekit-docs-burger {
display: flex;
flex-direction: column;
gap: 5px;
width: 19px;
}
.scribekit-docs-burger-bar {
display: block;
height: 2px;
border-radius: 2px;
background: currentColor;
/* Animated so the bars morph into the cross instead of the icon popping between two shapes. */
transition:
transform 0.24s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.16s ease;
}
/* Open: the outer bars converge and cross, the middle one fades out beneath them. */
.scribekit-docs-navbar-burger[aria-expanded="true"] .scribekit-docs-burger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.scribekit-docs-navbar-burger[aria-expanded="true"] .scribekit-docs-burger-bar:nth-child(2) {
opacity: 0;
}
.scribekit-docs-navbar-burger[aria-expanded="true"] .scribekit-docs-burger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/*
* The drawer's dimmed backdrop. Rendered only while the drawer is open, and only in drawer mode.
* The `min-width` reset below is the safety net for a reader who opens the drawer on a phone and
* then rotates to a tablet: the state survives the resize, and without this the backdrop would sit
* over a desktop layout whose sidebar is a permanent column with no way to dismiss it.
*/
.scribekit-docs-nav-backdrop {
position: fixed;
inset: 0;
z-index: 65;
background: rgba(16, 18, 48, 0.42);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: scribekit-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1081px) {
.scribekit-docs-nav-backdrop {
display: none;
}
}
/*
* Drawer header: the nav's title and its close button, shown in place of the inline toggle.
*
* HIDDEN BY DEFAULT and switched on only inside the drawer breakpoint below. The markup renders at
* every width (whether the sidebar is a drawer is a JS decision, not a media query), so without this
* a desktop reader got a "Documentation ✕" header above a permanent sidebar column - a close button
* for something that cannot be closed.
*/
.scribekit-docs-nav-head {
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
padding-bottom: 12px;
border-bottom: 1px solid var(--scribekit-border, #e5eaf0);
}
.scribekit-docs-nav-head-title {
font-size: 15px;
font-weight: 600;
color: var(--scribekit-ink, #0b1b36);
}
/*
* The drawer's search FIELD (not the bar's icon). Drawer chrome, so hidden by default and switched
* on inside the drawer breakpoint - the desktop sidebar column sits under a navbar that already has
* its own search box, and a second one there would just be a duplicate.
*/
.scribekit-docs-nav-search {
display: none;
margin-top: 14px;
}
.scribekit-docs-nav-search .scribekit-docs-search-trigger {
width: 100%;
max-width: none;
}
.scribekit-docs-nav-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 34px;
height: 34px;
margin-right: -6px;
padding: 0;
border: none;
border-radius: 9px;
background: transparent;
color: var(--scribekit-ink-muted, #4a5568);
cursor: pointer;
}
.scribekit-docs-nav-close:hover {
background: var(--scribekit-bg-subtle, #f7f9fc);
color: var(--scribekit-ink, #0b1b36);
}
/*
* The `footer` slot, pinned below the nav groups. It exists for the chrome the top bar cannot fit,
* so it is shown exactly when the bar has given up on it: on a phone (below) or whenever the bar
* measures itself cramped (see the `data-cramped` rules above). Above that, the bar has the room
* back and shows the controls itself.
*
* Hidden by default rather than by the consumer, because a consumer hiding their own content here
* leaves this wrapper's border and margin behind: an empty ruled box under the nav. See
* `DocsSidebarProps.footer`.
*/
.scribekit-docs-nav-foot {
display: none;
/* A COLUMN: this is where the top bar's actions go on a phone, and a CTA reads as a CTA at full
width. A row would shrink each one toward its label and line up three different shapes. */
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--scribekit-border, #e5eaf0);
}
@media (max-width: 640px) {
.scribekit-docs-nav-foot {
display: flex;
}
}
.scribekit-docs-navbar-logo {
display: inline-flex;
align-items: center;
flex: none;
}
.scribekit-docs-navbar-logo svg,
.scribekit-docs-navbar-logo img,
.scribekit-docs-navbar-logo > * {
height: 100%;
width: auto;
display: block;
}
.scribekit-docs-navbar-name {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--scribekit-ink, #0b1b36);
}
.scribekit-docs-navbar-pill {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--scribekit-violet, #6d5df6);
background: var(--scribekit-violet-subtle, #f0eefe);
border: 1px solid var(--scribekit-violet-line, #e4e0fc);
padding: 2px 8px;
border-radius: 999px;
}
.scribekit-docs-navbar-search {
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
}
.scribekit-docs-navbar-search .scribekit-docs-search-trigger {
max-width: var(--scribekit-docs-navbar-search-width, 440px);
/*
* A FLOOR, and it is what makes the auto-hide fire at all. The slot is `flex: 1`, so without one
* the field just keeps giving up width to whatever the actions need - measured at 71px on a
* 660px window, a search box narrower than its own placeholder, while the CTA beside it sat at
* full size. Below this width the row is genuinely out of room and the ACTIONS are what should
* go, which is the decision `DocsNavbar` makes (it reads this value; see that effect).
*/
min-width: 200px;
}
.scribekit-docs-navbar-spacer {
flex: 1;
}
.scribekit-docs-navbar-right {
display: flex;
align-items: center;
gap: 18px;
flex: 0 0 auto;
font-size: 14px;
}
/*
* TOO NARROW FOR THE ACTIONS. `DocsNavbar` measures the row and sets `data-cramped` when the brand,
* the search and the menu button no longer leave room for them - see the effect in that file for why
* this is measured rather than a breakpoint.
*
* The two rules are ONE decision and must stay together: the actions leave the bar, and the drawer's
* `footer` slot - where the consumer renders the same controls - is what shows them instead. Ship the
* first without the second and a narrow window simply loses the CTA.
*/
.scribekit-docs-navbar[data-cramped] .scribekit-docs-navbar-right {
display: none;
}
.scribekit-docs-navbar[data-cramped] ~ * .scribekit-docs-nav-foot {
display: flex;
}
/* Fallback styling for RAW top-level