/* ============================================================================================ Documentation chrome: the persistent sidebar, breadcrumb, pager and language switch. Written to sit on top of BOTH generations of guide styling without either having to be rewritten. It touches only its own elements plus a left offset on , so a page keeps its own typography and cards and gains the navigation. ============================================================================================ */ :root { --docnav-w: 286px; /* Both guide generations define these; the fallbacks keep the chrome sane if one does not. */ --dc-surface: var(--surface, #fff); --dc-bg: var(--bg, #f6f7fb); --dc-bg2: var(--bg-2, #eceef5); --dc-ink: var(--ink, #14172a); --dc-ink2: var(--ink-2, #3a4056); --dc-muted: var(--muted, #6a7189); --dc-line: var(--line, #e2e5f0); --dc-line2: var(--line-2, #d3d7e6); --dc-accent: var(--gold, #f4c744); --dc-teal: var(--teal-2, #3e97a0); --dc-radius: 12px; --dc-sans: var(--sans, "Segoe UI", system-ui, sans-serif); --dc-mono: var(--mono, ui-monospace, Consolas, monospace); } /* ---------------------------------------------------------------- sidebar */ .docnav { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--docnav-w); background: var(--dc-surface); border-inline-end: 1px solid var(--dc-line); overflow-y: auto; z-index: 60; padding-bottom: 40px; font-family: var(--dc-sans); } .docnav::-webkit-scrollbar { width: 9px; } .docnav::-webkit-scrollbar-thumb { background: var(--dc-line2); border-radius: 9px; } .docnav-head { position: sticky; top: 0; background: var(--dc-surface); border-bottom: 1px solid var(--dc-line); padding: 17px 20px 14px; z-index: 1; } .docnav-title { font-weight: 800; font-size: .96rem; letter-spacing: -.01em; color: var(--dc-ink); } .docnav-tree { padding: 10px 12px; } .docnav-secbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; cursor: pointer; font: 700 .74rem/1 var(--dc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dc-muted); padding: 11px 10px 9px; border-radius: 8px; text-align: start; } .docnav-secbtn:hover { background: var(--dc-bg2); color: var(--dc-ink2); } .docnav-secbtn svg { flex: none; transition: transform .16s ease; } .docnav-sec.open > .docnav-secbtn svg { transform: rotate(180deg); } .docnav-list { list-style: none; margin: 0 0 6px; padding: 0; display: none; } .docnav-sec.open .docnav-list { display: block; } .docnav-list a { display: block; padding: 7px 12px; margin-inline-start: 4px; border-inline-start: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--dc-ink2); text-decoration: none; font-size: .875rem; line-height: 1.4; } [dir="rtl"] .docnav-list a { border-radius: 8px 0 0 8px; } .docnav-list a:hover { background: var(--dc-bg2); color: var(--dc-ink); } .docnav-list a.here { background: var(--dc-bg2); color: var(--dc-ink); font-weight: 700; border-inline-start-color: var(--dc-accent); } /* The page gets out of the sidebar's way rather than the sidebar overlapping it. */ @media (min-width: 1100px) { body.has-docnav { padding-inline-start: var(--docnav-w); } .docnav-toggle, .docnav-scrim { display: none !important; } } /* ---------------------------------------------------------------- mobile */ @media (max-width: 1099.98px) { .docnav { transform: translateX(calc(-1 * var(--docnav-w))); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.18); } [dir="rtl"] .docnav { transform: translateX(var(--docnav-w)); } body.docnav-open .docnav { transform: none; } .docnav-toggle { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 62; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--dc-line2); background: var(--dc-surface); color: var(--dc-ink); font: 700 .82rem var(--dc-sans); box-shadow: 0 6px 22px rgba(0,0,0,.16); cursor: pointer; } .docnav-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(10,14,22,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; } body.docnav-open .docnav-scrim { opacity: 1; pointer-events: auto; } } /* ---------------------------------------------------------------- breadcrumb */ .doccrumb { max-width: 1160px; margin: 0 auto; padding: 18px 22px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .82rem; color: var(--dc-muted); font-family: var(--dc-sans); } .doccrumb a { color: var(--dc-muted); text-decoration: none; } .doccrumb a:hover { color: var(--dc-ink); text-decoration: underline; } .doccrumb .sep { color: var(--dc-line2); } .doccrumb .cur { color: var(--dc-ink2); font-weight: 650; } /* ---------------------------------------------------------------- pager */ .docpager { max-width: 1160px; margin: 10px auto 46px; padding: 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-family: var(--dc-sans); } @media (max-width: 700px) { .docpager { grid-template-columns: 1fr; } } .docpager-card { display: block; padding: 16px 18px; border: 1px solid var(--dc-line); border-radius: var(--dc-radius); background: var(--dc-surface); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .docpager-card:hover { border-color: var(--dc-teal); transform: translateY(-1px); } .docpager-card.next { text-align: end; } .docpager-card .k { display: block; font: 700 .68rem/1 var(--dc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-teal); margin-bottom: 7px; } .docpager-card .t { display: block; font-weight: 750; font-size: 1rem; color: var(--dc-ink); } .docpager-card .d { display: block; font-size: .84rem; color: var(--dc-muted); margin-top: 3px; } /* ---------------------------------------------------------------- language switch */ .docnav-inline { display: flex !important; align-items: center; gap: 8px; margin-inline-start: auto; } .doclang { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--dc-line2); border-radius: 999px; background: var(--dc-surface); color: var(--dc-ink2); font: 650 .8rem var(--dc-sans); text-decoration: none; white-space: nowrap; } .doclang:hover { background: var(--dc-bg2); color: var(--dc-ink); } .doclang svg { flex: none; opacity: .75; } /* ---------------------------------------------------------------- RTL prose */ [dir="rtl"] body { font-family: "Segoe UI", "Cairo", "Noto Naskh Arabic", Tahoma, system-ui, sans-serif; } [dir="rtl"] .doccrumb .sep { transform: scaleX(-1); } [dir="rtl"] .docpager-card.next { text-align: start; } [dir="rtl"] .docpager-card.prev { text-align: end; } /* Arabic reads better a shade larger and looser than the Latin sizing this design was tuned on. */ [dir="rtl"] .lead, [dir="rtl"] .intro, [dir="rtl"] p { line-height: 1.9; } [dir="rtl"] .mono, [dir="rtl"] code, [dir="rtl"] pre { direction: ltr; text-align: start; unicode-bidi: embed; }