/* * Shared structure for every skin, ported from mocks/manual-style-variants.html. * Skins (quickstart / console / reference) set the tokens below for light and dark * and add their own decoration; the markup is identical. * is set before first paint by the * inline script in each page's . */ :root { /* Fallback tokens = Reference light, so a page still reads if a skin file fails to load. */ --bg: #ffffff; --surface: #f7f6f3; --text: #2b2f33; --lede: #2b2f33; --muted: #6b7178; --heading: #111a22; --accent: #d94118; --accent-deep: #b8360f; --cream: #fbf3dc; --ui: inherit; --nav-bg: #f7f6f3; --nav-text: #3b4046; --nav-muted: #8a9097; --top-bg: #ffffff; --top-text: #111a22; --top-border: rgba(17, 26, 34, 0.14); --popup-bg: #ffffff; --rule: #e6e3dd; --code-bg: #f1efea; --code-text: #7a2a10; --note-bg: #fbf3dc; --note-border: transparent; --warn: #c62828; --warn-bg: rgba(198, 40, 40, 0.07); --kbd-bg: #ffffff; --kbd-text: #2b2f33; --kbd-border: #cfcbc3; --font: "Charter", "Iowan Old Style", Georgia, serif; --font-head: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --radius: 8px; --top-h: 64px; color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); } a { color: var(--accent-deep); text-underline-offset: .16em; } a:hover { color: var(--accent); } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--accent); color: #fff; font-family: var(--font-head); } .skip-link:focus { left: 8px; } /* ---------- Top bar ---------- */ .top { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--top-bg); color: var(--top-text); } .brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex-shrink: 0; } .brand:hover { color: inherit; } .bolt { width: 38px; height: 24px; background: linear-gradient(105deg, #ff3c20 0%, #ff6a1d 47%, #ffc72c 100%); clip-path: polygon(0 15%, 28% 31%, 28% 0, 59% 16%, 100% 0, 100% 70%, 63% 55%, 63% 100%, 31% 78%, 0 100%); } .brand-name { font: 900 15px/1 var(--font-head); letter-spacing: .12em; } .brand-name small { font-weight: 400; opacity: .6; letter-spacing: .08em; } /* Beta marker after the name: red on every top bar (brighter on the dark bars, deeper on Reference's white one). */ .beta { font-weight: 400; letter-spacing: .08em; } .beta i { font-style: normal; opacity: .6; } .beta b { font-weight: 800; color: #ff4d4d; } :root[data-skin="reference"][data-mode="light"] .beta b { color: #d01f1f; } .nav-toggle { display: none; font: 600 12px var(--font-head); letter-spacing: .08em; padding: 8px 10px; background: transparent; color: inherit; border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer; } /* ---------- Search ---------- */ .search-box { position: relative; } .top-search { margin-left: auto; width: min(320px, 32vw); } .drawer-search { display: none; margin: 0 4px 18px; } .search { width: 100%; padding: 9px 12px; border-radius: var(--radius); font: 14px var(--font-head); border: 1px solid var(--top-border); background: rgba(127, 127, 127, .08); color: inherit; } .search:focus { outline: none; border-color: var(--accent); } .search-results { position: absolute; top: calc(100% + 6px); right: 0; width: min(440px, 92vw); max-height: 70vh; overflow: auto; z-index: 60; padding: 6px; background: var(--popup-bg); color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); font-family: var(--font-head); } .search-results a { display: block; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--text); } .search-results a:hover, .search-results a:focus { background: var(--surface); outline: none; } .search-results small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .search-results strong { display: block; margin: 2px 0; font-size: 14px; color: var(--heading); } .search-results span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); } .search-results mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; } .search-empty { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); } /* ---------- Appearance picker ---------- */ .appearance { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); flex-shrink: 0; } .style-menu { position: relative; } .style-toggle, .mode-toggle { font: 600 12px var(--font-head); letter-spacing: .03em; color: var(--top-text); background: transparent; border: 1px solid var(--top-border); border-radius: 6px; padding: 7px 10px; cursor: pointer; white-space: nowrap; } .style-toggle::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; } .style-current { margin-left: 6px; font-weight: 400; opacity: .75; } .style-current::before { content: "· "; } .style-toggle[aria-expanded="true"] { border-color: var(--accent); } .mode-toggle { min-width: 88px; } .style-toggle:hover, .mode-toggle:hover { background: rgba(127, 127, 127, .14); } .style-options { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 250px; padding: 6px; background: var(--popup-bg); color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); font-family: var(--font-head); } .style-options[hidden] { display: none; } .style-options button { display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; width: 100%; padding: 8px 10px; text-align: left; font: 600 13.5px var(--font-head); color: var(--heading); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .style-options button b { color: var(--accent); } .style-options button small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--muted); } .style-options button[aria-checked="true"]::after { content: "✓"; color: var(--accent); font-weight: 800; } .style-options button:hover, .style-options button:focus-visible { background: var(--surface); outline: none; } .style-toggle:focus-visible, .mode-toggle:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Layout ---------- */ .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px; min-height: calc(100vh - var(--top-h)); } .sidenav { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow: auto; padding: 22px 14px 40px; background: var(--nav-bg); color: var(--nav-text); font-family: var(--font-head); } .sidenav h4 { margin: 20px 10px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-muted); } .sidenav > a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 10px; font-size: 13.5px; line-height: 1.3; color: var(--nav-text); text-decoration: none; border-left: 3px solid transparent; } .sidenav > a span { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; } .sidenav > a:hover { background: rgba(127, 127, 127, .1); color: var(--nav-text); } .sidenav > a.active { border-left-color: var(--accent); background: rgba(127, 127, 127, .14); color: var(--heading); font-weight: 600; } .doc { padding: 48px clamp(20px, 5vw, 72px) 80px; min-width: 0; } .doc-inner { max-width: 760px; margin: 0 auto; } .crumbs { font: 700 12px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 10px; } /* ---------- Chapter content ---------- */ .doc h1 { font-family: var(--font-head); color: var(--heading); margin: 0 0 18px; } .doc .lede { font-size: 1.2rem; line-height: 1.55; color: var(--lede); margin: 0 0 28px; } .doc h2 { font-family: var(--font-head); color: var(--heading); margin: 52px 0 14px; font-size: 1.75rem; line-height: 1.15; scroll-margin-top: 80px; } .doc h3 { font-family: var(--font-head); color: var(--heading); margin: 30px 0 8px; font-size: 1.15rem; } .doc h4 { font-family: var(--font-head); color: var(--heading); margin: 24px 0 6px; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; } .doc p, .doc li { font-size: 1.04rem; line-height: 1.7; } .doc li + li { margin-top: 6px; } .doc strong { color: var(--heading); } .doc hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; } .flow { font-family: var(--font-head); font-weight: 800; letter-spacing: .04em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0; } .flow .n { padding: 8px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); color: var(--heading); } .flow .arr { color: var(--accent); } figure { margin: 30px 0; } figure img, .doc img { display: block; max-width: 100%; border-radius: var(--radius); } figure img { width: 100%; } figcaption { margin-top: 10px; font: 13px/1.4 var(--font-head); color: var(--muted); } code { font-family: var(--mono); font-size: .88em; padding: .12em .35em; border-radius: 3px; background: var(--code-bg); color: var(--code-text); } pre { overflow: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-text); border-left: 4px solid var(--accent); } pre code { padding: 0; background: transparent; color: inherit; } kbd { font: 600 .8em var(--mono); padding: .15em .45em; border-radius: 4px; background: var(--kbd-bg); color: var(--kbd-text); border: 1px solid var(--kbd-border); border-bottom-width: 2px; white-space: nowrap; } .key-plus { margin: 0 .12em; color: var(--muted); } .key-action { font-family: var(--font-head); font-size: .9em; font-weight: 600; } .ui { font-family: var(--font-head); font-weight: 700; font-size: .92em; letter-spacing: .03em; color: var(--ui); } .note, .doc blockquote { margin: 26px 0; padding: 16px 18px; background: var(--note-bg); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; } .note-label { display: block; font: 800 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 4px; } .note p, .doc blockquote p { margin: 0; } .note p + p { margin-top: 8px; } .note-warning, .note-caution { background: var(--warn-bg); border-left-color: var(--warn); } .note-warning .note-label, .note-caution .note-label { color: var(--warn); } .markdown-body > ol { counter-reset: step; list-style: none; padding: 0; } .markdown-body > ol > li { counter-increment: step; position: relative; padding-left: 46px; margin: 12px 0; } .markdown-body > ol > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; display: grid; place-items: center; font: 800 14px var(--font-head); border-radius: 50%; background: var(--accent); color: #fff; } table { width: 100%; border-collapse: collapse; margin: 22px 0; font: 14px/1.45 var(--font-head); } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; } th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; } .pager a { display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; font-family: var(--font-head); color: var(--heading); background: var(--surface); } .pager a small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .pager a.next { text-align: right; grid-column: 2; } .pager a:hover { border-color: var(--accent); color: var(--heading); } /* ---------- On-this-page rail ---------- */ .toc { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow: auto; padding: 52px 18px 24px 0; font-family: var(--font-head); } .toc h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .toc a { display: block; padding: 5px 0 5px 12px; font-size: 13px; line-height: 1.35; color: var(--muted); text-decoration: none; border-left: 2px solid var(--rule); } .toc a:hover, .toc a.active { color: var(--heading); border-left-color: var(--accent); } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .layout { grid-template-columns: 260px minmax(0, 1fr); } .toc { display: none; } .style-current { display: none; } } @media (max-width: 820px) { :root { --top-h: 56px; } .top { gap: 8px; padding: 0 12px; } .layout { grid-template-columns: minmax(0, 1fr); } .nav-toggle { display: block; } .top-search { display: none; } .drawer-search { display: block; } .drawer-search .search-results { position: static; width: auto; margin-top: 6px; box-shadow: none; } .brand { margin-right: auto; } .brand-name { display: none; } .mode-toggle { min-width: 0; } .mode-auto { display: none; } .appearance { gap: 6px; } .style-toggle, .mode-toggle, .glossary-toggle, .nav-toggle { padding: 7px 8px; } .style-options { position: fixed; top: calc(var(--top-h) + 6px); left: 12px; right: 12px; width: auto; } .sidenav { position: fixed; top: 0; left: 0; z-index: 40; height: 100vh; width: min(86vw, 320px); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 12px 0 30px rgba(0, 0, 0, .25); } body.nav-open .sidenav { transform: none; } .doc { padding: 32px 16px 60px; } .pager { grid-template-columns: 1fr; } .pager a.next { grid-column: 1; } table { display: block; overflow-x: auto; } } /* ---------- Glossary links ---------- */ /* The build links the first mention of each glossary term per section. is set before first paint. */ .glossary-toggle { font: 600 12px var(--font-head); letter-spacing: .03em; color: var(--top-text); background: transparent; border: 1px solid var(--top-border); border-radius: 6px; padding: 7px 10px; cursor: pointer; white-space: nowrap; } .glossary-toggle:hover { background: rgba(127, 127, 127, .14); } .glossary-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .glossary-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a.gloss { color: inherit; } :root[data-glossary="off"] a.gloss { text-decoration: none; pointer-events: none; cursor: text; } /* A tinted fill in the skin's accent, after the old web manual's highlighted terms; box-decoration-break keeps a wrapped term's padding on both lines. */ :root[data-glossary="on"] a.gloss { text-decoration: none; padding: 0 .16em; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; } :root[data-glossary="on"][data-mode="dark"] a.gloss { background: color-mix(in srgb, var(--accent) 24%, transparent); } :root[data-glossary="on"] a.gloss:hover, :root[data-glossary="on"] a.gloss:focus-visible, :root[data-glossary="on"] a.gloss[aria-describedby] { color: inherit; background: color-mix(in srgb, var(--accent) 32%, transparent); } :root[data-glossary="on"][data-mode="dark"] a.gloss:hover, :root[data-glossary="on"][data-mode="dark"] a.gloss:focus-visible, :root[data-glossary="on"][data-mode="dark"] a.gloss[aria-describedby] { background: color-mix(in srgb, var(--accent) 42%, transparent); } :root[data-glossary="on"] a.gloss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .gloss-pop { position: absolute; z-index: 70; width: min(340px, calc(100vw - 16px)); padding: 12px 14px; background: var(--popup-bg); color: var(--text); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); font: 14px/1.5 var(--font-head); } .gloss-pop-term { display: block; margin-bottom: 4px; color: var(--heading); font-size: 15px; } .gloss-pop p { margin: 0; } .gloss-pop strong { color: var(--heading); } .gloss-pop-more { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 13px; } /* Glossary page: letter bar and the entry a term link lands on. */ .gloss-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; font-family: var(--font-head); } .gloss-letters a { min-width: 34px; padding: 6px 8px; text-align: center; font-weight: 800; text-decoration: none; color: var(--heading); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .gloss-letters a:hover { color: var(--heading); border-color: var(--accent); } .gloss-entry { scroll-margin-top: calc(var(--top-h) + 24px); border-radius: var(--radius); } @keyframes gloss-land { from { background-color: color-mix(in srgb, var(--accent) 30%, transparent); } } .gloss-entry:target { animation: gloss-land 2.2s ease-out; }