/* ============================================================ AIDC Docs — documentation layout (light theme) Loads after site.css; pages set ============================================================ */ body { padding-top: var(--nav-h); } .docs-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: clamp(32px, 4vw, 64px); max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); align-items: start; } /* ---------- sidebar ---------- */ .docs-side { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); /* 抄 Console .side（globals.css）：flex 三段式，只有导航段滚动。 原来整条侧栏是滚动容器，头行会跟着滚进固定顶栏底下（实测 scrollTop=72 时折叠钮 top 100→28）。 */ display: flex; flex-direction: column; overflow: visible; padding: 10px; /* 侧栏内文字（secbtn 8px + 行内 10px + 自身 10px）比顶栏 logo 多缩进 20px， 整条侧栏左移 20px 让首字与 logo 同一条线；--pad-x 最小 20px，不会出视口 */ margin-left: -20px; border-right: 1px solid var(--line-soft); } .docs-side-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* 滚动与焦点环补偿都下放到导航段；overflow-y:auto 会强制 overflow-x:clip， 故留 5px 内衬 + 负外边距给 4px 焦点环，视觉位置不变 */ .docs-nav, .docs-results { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 0 6px 5px; margin-left: -5px; } .docs-search { width: 100%; font-family: var(--font-body); font-size: 0.875rem; height: 32px; padding: 0 0.75rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink-strong); margin-bottom: 0; /* 间距改由 .docs-nav 的 padding-top 承担 */ border-radius: var(--radius); transition: border-color .15s; } .docs-search:hover { border-color: var(--mut-2); } .docs-search::placeholder { color: var(--mut-2); } /* ---------- section switcher (occupies the brand slot) + scoped page list ---------- The sidebar head is the switcher — same shape as the console shell's .side-brandrow: mark + current name + swap caret, with the fold button beside it. The docs-home link moved into the menu's last row. */ .docs-secwrap { position: relative; flex: 1; min-width: 0; } .docs-secbtn { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 36px; padding: 0 8px; background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; color: var(--ink-strong); transition: background .15s var(--ease); } .docs-secbtn:hover { background: var(--bg-2); } .docs-secbtn .mark { display: inline-flex; gap: 2px; flex: none; } .docs-secbtn .mark i { width: 3px; height: 12px; background: var(--signal); transform: skewX(-16deg); display: block; } .docs-secbtn .sb-name { flex: 1; min-width: 0; text-align: left; font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-secbtn .car { display: inline-flex; flex: none; color: var(--mut-2); } .docs-secbtn .car svg { width: 13px; height: 13px; } .docs-secmenu { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; min-width: 220px; padding: 0.3rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-pop, var(--shadow-card)); max-height: 60vh; overflow-y: auto; } .docs-secmenu[hidden] { display: none; } .docs-secmenu .sm-h { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut-2); padding: 0.5rem 0.55rem 0.3rem; } .docs-secmenu .sm-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink); border: 0; padding: 0.4rem 0.55rem; border-radius: var(--radius); } .docs-secmenu .sm-item:hover { background: var(--bg-2); color: var(--ink-strong); } .docs-secmenu .sm-item.on { color: var(--signal); background: var(--signal-soft); } .docs-secmenu .sm-item > span:first-child { flex: 1; min-width: 0; } .docs-secmenu .sm-n { font-family: var(--font-mono); font-size: 0.64rem; color: var(--mut-2); } .docs-secmenu .sm-item.on .sm-n { color: var(--signal); } .docs-secmenu .sm-ck { display: inline-flex; } .docs-secmenu .sm-ck svg { width: 13px; height: 13px; } .docs-secmenu .sm-all { /* the docs-home exit lives at the menu's foot; the list scrolls past 60vh, so it sticks — an exit you have to scroll for is an exit people miss */ position: sticky; bottom: -0.3rem; background: var(--bg); display: flex; align-items: center; gap: 0.45rem; margin-top: 0.25rem; padding: 0.45rem 0.55rem; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut-2); } .docs-secmenu .sm-all svg { width: 13px; height: 13px; flex: none; } .docs-secmenu .sm-all:hover { color: var(--signal); } .side-list { list-style: none; margin: 0; padding: 0; } .side-list li { margin: 0; } .side-list a { display: flex; align-items: center; min-height: 32px; /* 抄 .navitem{height:32px}，用 min- 因为长标题会折行 */ font-size: 0.82rem; color: var(--mut); padding: 0.3rem 10px; margin: 1px 0; border: 0; border-radius: var(--radius); transition: color .15s var(--ease), background .15s var(--ease); } .side-list a:hover { color: var(--ink-strong); background: var(--bg-2); } .side-list a.active { color: var(--signal); background: var(--signal-soft); font-weight: 500; } .docs-nav[hidden] { display: none; } /* cross-section search results replace the scoped list while typing */ .docs-results[hidden] { display: none; } .docs-results .rs-g { margin-bottom: 0.7rem; } .docs-results .rs-h { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut-2); padding: 0.4rem 0.65rem 0.25rem; } .docs-results ul { list-style: none; margin: 0; padding: 0; } .docs-results li { margin: 0; } .docs-results a { display: block; font-size: 0.86rem; color: var(--mut); padding: 0.32rem 0.65rem; border: 0; border-radius: var(--radius); } .docs-results a:hover { color: var(--ink-strong); background: var(--bg-2); } .docs-results a.active { color: var(--signal); } .docs-results .rs-none { padding: 0.6rem 0.65rem; font-size: 0.84rem; color: var(--mut-2); } /* ---------- article ---------- */ .docs-main { padding: 13px 0 5rem; min-width: 0; } .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; min-height: 30px; /* 行高＝折叠钮高，中心自动落在同一条轴（top 64+13=77，cy 92） */ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--mut-2); margin-bottom: 2rem; text-transform: uppercase; } .crumbs .sep { color: var(--signal); } /* 「下载 PDF」按钮：高度与两侧折叠钮、面包屑行高同为 30px */ .doc-print { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em; height: 30px; padding: 0 0.6rem; flex: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--mut); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .doc-print svg { width: 14px; height: 14px; flex: none; } .doc-print:hover { color: var(--ink-strong); border-color: var(--mut-2); background: var(--bg-2); } @media (max-width: 860px) { .doc-print span { display: none; } .doc-print { padding: 0 0.45rem; } } .crumbs a:hover { color: var(--ink-strong); } /* docs 自己的规律：导航类 hover 用 ink-strong，signal 留给正文链接 */ .docs-main h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.5rem; } .docs-main .doc-sub { font-size: 1.05rem; color: var(--mut); line-height: 1.75; max-width: 660px; margin-bottom: 2.4rem; } .docs-main h2 { font-size: 1.45rem; margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--nav-h) + 24px); } .docs-main h3 { font-size: 1.08rem; margin-top: 2rem; scroll-margin-top: calc(var(--nav-h) + 24px); } /* 讲义类页面比常规文档多一层（章 > 节 > 小节）；不进右侧目录，只做正文分隔。 限定直接子元素：其余 8 个 docs 页的 h4 全长在 ol.numlist 的条目里， site.css 的 h1-h4 基线 + .numlist h4 已经管着它们，不该被这条波及。 */ .docs-main > h4 { font-size: 0.98rem; font-weight: 600; color: var(--ink-strong); margin-top: 1.6rem; margin-bottom: 0.4rem; } .docs-main p, .docs-main li { font-size: 0.96rem; color: var(--ink); } .docs-main ul, .docs-main ol { padding-left: 1.3rem; margin: 0 0 1.2em; } .docs-main li { margin-bottom: 0.45em; } .docs-main li::marker { color: var(--signal); } /* 正文插图：此前没有基础规则，裸 会按原始像素宽溢出正文列 */ .docs-main img { max-width: 100%; height: auto; display: block; margin: 1.6rem 0; } /* heading anchors */ .h-anchor { opacity: 0; margin-left: 0.4em; color: var(--signal); border: 0 !important; font-weight: 400; } h2:hover .h-anchor, h3:hover .h-anchor { opacity: 1; } /* ---------- callouts ---------- */ .callout { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--radius); background: var(--bg-2); padding: 1.1rem 1.3rem; margin: 1.6rem 0; font-size: 0.92rem; } .callout .ci { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); padding-top: 0.25rem; } .callout p { margin: 0; } .callout p + p { margin-top: 0.6em; } .callout--rule { border-left-color: var(--ink-strong); } .callout--rule .ci { color: var(--ink-strong); } .callout--warn { border-left-color: #c2410c; background: rgba(194, 65, 12, 0.06); } .callout--warn .ci { color: #c2410c; } /* ---------- definition rows (object/action reference) ---------- */ .def-row { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; padding: 1.2rem 0; border-top: 1px solid var(--line-soft); } .def-row code.def-name { font-size: 0.85rem; font-weight: 600; color: var(--signal); background: none; border: 0; padding: 0; } .def-row .def-kind { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut-2); margin-top: 0.4rem; } .def-row p { margin: 0 0 0.5em; font-size: 0.92rem; } /* ---------- prev / next ---------- */ .doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 1.5rem; } .doc-pager a { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); padding: 1rem 1.25rem; transition: border-color .15s, box-shadow .15s var(--ease); } .doc-pager a:hover { border-color: var(--mut-2); box-shadow: var(--shadow-card); } .doc-pager a:hover .pt { color: var(--signal); } .doc-pager .pl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut-2); display: block; margin-bottom: 0.4rem; } .doc-pager .pt { font-weight: 600; color: var(--ink-strong); font-size: 0.92rem; transition: color .15s; } .doc-pager a.next { text-align: right; grid-column: 2; } .doc-pager a.prev { grid-column: 1; } /* ---------- right TOC ---------- */ .docs-toc { position: sticky; top: calc(var(--nav-h) + 10px); padding: 0 0 2rem; font-size: 0.8rem; max-height: calc(100vh - var(--nav-h) - 50px); overflow-y: auto; overflow-x: clip; } .toc-head { display: flex; align-items: center; gap: 0.4rem; margin: 3px 0 0.8rem; /* 74+3=77，30px 钮 → cy 92，与左侧同轴 */ } .toc-fold { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; flex: none; margin-left: auto; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--mut-2); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .toc-fold svg { width: 15px; height: 15px; } .toc-fold:hover { color: var(--ink-strong); background: var(--bg-2); } .docs-toc h6 { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut-2); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* collapsed: the rail keeps only the toggle, and the article takes the width */ html.docs-toc-collapsed .docs-toc h6, html.docs-toc-collapsed .toc-body { display: none; } html.docs-toc-collapsed .toc-fold { margin-left: 0; color: var(--mut); } .docs-toc ul { list-style: none; margin: 0; padding: 0; } .docs-toc a { display: block; color: var(--mut); padding: 0.32rem 0; border: 0; line-height: 1.45; transition: color .15s; } .docs-toc a:hover { color: var(--ink-strong); } .docs-toc a.active { color: var(--signal); } .docs-toc a.lvl-3 { padding-left: 0.9rem; font-size: 0.75rem; } /* ---------- docs tables ---------- */ .docs-main table { font-size: 0.88rem; } .docs-main th { background: var(--bg-2); } /* ---------- mobile drawer ---------- */ .docs-drawer-btn { display: none; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-strong); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.85rem 1rem; cursor: pointer; border-radius: var(--radius); } .docs-drawer-btn .tw { float: right; transition: transform .2s; } .docs-side.open .docs-drawer-btn .tw { transform: rotate(180deg); } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .docs-shell { grid-template-columns: 240px minmax(0, 1fr); } .docs-toc { display: none; } } @media (max-width: 860px) { .docs-shell { grid-template-columns: 1fr; } .docs-side { position: static; height: auto; max-height: none; overflow: visible; /* drawer does not scroll — let focus rings out */ border-right: 0; border-bottom: 1px solid var(--line); padding: 1rem 0; margin-left: 0; } .docs-drawer-btn { display: block; } .docs-side-body { display: none; padding-top: 1.2rem; } .docs-side.open .docs-side-body { display: block; } .docs-main { padding-top: 1.6rem; } .docs-main h1 { font-size: 1.7rem; } .crumbs { flex-wrap: wrap; row-gap: 0.3rem; margin-bottom: 1.4rem; } .def-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1rem 0; } .callout { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.95rem 1rem; } .doc-pager { grid-template-columns: 1fr; } .doc-pager a.next { grid-column: 1; } } /* ============================================================ Sidebar chrome — mirrors the console shell (docs/ui-style.md): home link + fold button on top, search row under it, groups below. ============================================================ */ .docs-side-head { display: flex; align-items: center; gap: 4px; padding: 0 0 8px; } .docs-fold, .docs-fab { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; /* 壳级图标钮统一 .iconbtn 规格 */ padding: 0; /* 不吃 UA 默认 1px 6px，否则 svg 被挤成 14×15 */ flex: none; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--mut-2); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); } .docs-fold svg, .docs-fab svg { width: 15px; height: 15px; } .docs-fold:hover { color: var(--ink-strong); background: var(--bg-2); } .docs-searchrow { position: relative; padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); } .docs-searchrow .docs-search { padding-right: 3.1rem; } .docs-kbd { position: absolute; right: 0.45rem; top: 6px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em; border: 1px solid var(--line); border-radius: 4px; padding: 0.05rem 0.3rem; color: var(--mut-2); pointer-events: none; } /* ---------- fold state (persisted in aidc-docs-side) ---------- */ .docs-fab { position: fixed; top: calc(var(--nav-h) + 12px); left: 12px; /* 对齐 .side-fab；让位量才凑得出 --fab-x=56 */ z-index: 40; display: none; width: 32px; height: 32px; border-color: var(--line); background: var(--bg); box-shadow: var(--shadow-card); } .docs-fab:hover { color: var(--ink-strong); background: var(--bg-2); } /* folding drops a rail out of the grid entirely, so every surviving combination of columns must be declared — otherwise main slides into the slot the hidden rail used to occupy */ html.docs-collapsed .docs-side { display: none; } html.docs-collapsed .docs-fab { display: inline-flex; } /* --pad-x 是 clamp(20px,4vw,56px)，常数让位会随视口漂；补差额后左缘恒为 56，与浮钮对齐 */ html.docs-collapsed .docs-main { padding-left: max(0px, calc(var(--fab-x) - var(--pad-x))); } html.docs-collapsed .docs-shell { grid-template-columns: minmax(0, 1fr) 220px; } html.docs-toc-collapsed .docs-shell { grid-template-columns: 240px minmax(0, 1fr) 34px; } html.docs-collapsed.docs-toc-collapsed .docs-shell { grid-template-columns: minmax(0, 1fr) 34px; } html.docs-toc-collapsed .docs-shell { gap: clamp(24px, 3vw, 44px); } /* a page with no headings has no rail to fold */ html.docs-toc-empty .docs-toc { display: none; } html.docs-toc-empty .docs-shell { grid-template-columns: 240px minmax(0, 1fr); } html.docs-toc-empty.docs-collapsed .docs-shell { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1180px) { html.docs-collapsed .docs-shell, html.docs-toc-empty .docs-shell, html.docs-collapsed.docs-toc-collapsed .docs-shell { grid-template-columns: minmax(0, 1fr); } html.docs-toc-collapsed .docs-shell { grid-template-columns: 240px minmax(0, 1fr); } } /* ============================================================ Docs home — full-width section hub (no sidebar) ============================================================ */ .docs-hub { max-width: 1200px; margin: 0 auto; padding: clamp(2.4rem, 5vw, 4.2rem) var(--pad-x) 5rem; } .hub-kicker { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut-2); margin-bottom: 1rem; } .hub-kicker .num { color: var(--signal); } .docs-hub h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.02em; margin-bottom: 0.8rem; } .hub-sub { font-size: 1.05rem; color: var(--mut); line-height: 1.75; max-width: 680px; margin-bottom: 2.2rem; } .hub-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); } .hub-quick a { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-full, 999px); padding: 0.42rem 0.95rem; font-size: 0.84rem; color: var(--ink); background: var(--bg); transition: border-color .15s var(--ease), background .15s var(--ease); } .hub-quick a:hover { border-color: var(--mut-2); background: var(--bg-2); } .hub-quick a .qk { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); } .hub-h2 { font-size: 0.7rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut-2); border-top: 1px solid var(--line-soft); padding-top: 1.4rem; margin: 0 0 1.6rem; } /* ---------- the six section cards ---------- */ .sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(2.6rem, 5vw, 4rem); } .sec-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; transition: border-color .15s var(--ease), box-shadow .2s var(--ease); } .sec-card:hover { border-color: var(--mut-2); box-shadow: var(--shadow-card); } .sec-art { display: block; width: 100%; height: 128px; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); } .sec-bd { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .sec-bd h3 { font-size: 1.02rem; margin: 0 0 0.45rem; letter-spacing: -0.01em; } .sec-bd h3 a { color: var(--ink-strong); border: 0; } .sec-bd h3 a:hover { color: var(--signal); } .sec-bd .sec-p { font-size: 0.85rem; color: var(--mut); line-height: 1.6; margin: 0 0 1rem; } .sec-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); } .sec-links li { margin: 0; } .sec-links a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.86rem; color: var(--ink); border: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); transition: color .15s var(--ease); } .sec-links li:last-child a { border-bottom: 0; } .sec-links a:hover { color: var(--signal); } .sec-links a .ar { color: var(--mut-2); transition: transform .15s var(--ease), color .15s var(--ease); } .sec-links a:hover .ar { color: var(--signal); transform: translateX(2px); } .sec-all { margin-top: auto; padding-top: 0.85rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut-2); border: 0; } .sec-all:hover { color: var(--signal); } /* ---------- secondary strips (start / journey / developers) ---------- */ .hub-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(2.6rem, 5vw, 4rem); } .hub-strip .st { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.15rem 1.25rem 1.25rem; background: var(--bg); transition: border-color .15s var(--ease), box-shadow .2s var(--ease); } .hub-strip .st:hover { border-color: var(--mut-2); box-shadow: var(--shadow-card); } .hub-strip .st h3 { font-size: 0.95rem; margin: 0 0 0.4rem; } .hub-strip .st p { font-size: 0.84rem; color: var(--mut); line-height: 1.6; margin: 0 0 0.85rem; } .hub-strip .st ul { list-style: none; margin: 0; padding: 0; } .hub-strip .st li { margin: 0; } .hub-strip .st li a { display: block; font-size: 0.84rem; color: var(--ink); border: 0; padding: 0.3rem 0; } .hub-strip .st li a:hover { color: var(--signal); } .hub-strip .st li a::before { content: "// "; color: var(--mut-2); font-family: var(--font-mono); font-size: 0.75em; } /* role table on the hub */ .docs-hub table { font-size: 0.88rem; width: 100%; } .docs-hub th { background: var(--bg-2); } /* ---------- section overview pages: card list of every page ---------- */ .doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.4rem 0 2rem; } .doc-cards a { display: block; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.95rem 1.1rem; background: var(--bg); transition: border-color .15s var(--ease), box-shadow .2s var(--ease); } .doc-cards a:hover { border-color: var(--mut-2); box-shadow: var(--shadow-card); } .doc-cards a strong { display: block; font-size: 0.92rem; color: var(--ink-strong); margin-bottom: 0.3rem; } .doc-cards a:hover strong { color: var(--signal); } .doc-cards a span { font-size: 0.82rem; color: var(--mut); line-height: 1.55; } /* ---------- key/value spec rows used by the new reference pages ---------- */ .kv-table { width: 100%; font-size: 0.88rem; } .kv-table td:first-child { white-space: nowrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-strong); } @media (max-width: 1060px) { .sec-grid, .hub-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .sec-grid, .hub-strip, .doc-cards { grid-template-columns: 1fr; } .docs-hub h1 { font-size: 1.8rem; } .docs-fab { display: none !important; } /* below the drawer breakpoint neither rail folds — the drawer already hides them */ html.docs-collapsed .docs-side { display: block; } html.docs-collapsed .docs-shell, html.docs-toc-collapsed .docs-shell, html.docs-toc-empty .docs-shell, html.docs-collapsed.docs-toc-collapsed .docs-shell { grid-template-columns: 1fr; } html.docs-collapsed .docs-main { padding-left: 0; } } /* ---------- docs home search ---------- */ .hub-search { position: relative; max-width: 520px; margin-bottom: 1.6rem; } .hs-box { display: flex; align-items: center; gap: 0.6rem; height: 42px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .15s var(--ease), box-shadow .2s var(--ease); } .hs-box:focus-within { border-color: var(--mut-2); box-shadow: var(--shadow-card); } .hs-box svg { width: 16px; height: 16px; color: var(--mut-2); flex: none; } .hs-box input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-strong); outline: none; } .hs-box input::placeholder { color: var(--mut-2); } .hs-res { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-pop, var(--shadow-card)); overflow: hidden; max-height: 340px; overflow-y: auto; } .hs-res a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.85rem; border: 0; border-bottom: 1px solid var(--line-soft); } .hs-res a:last-child { border-bottom: 0; } .hs-res a:hover { background: var(--bg-2); } .hs-res a b { font-weight: 500; font-size: 0.88rem; color: var(--ink-strong); } .hs-res a span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2); white-space: nowrap; } .hs-none { padding: 0.75rem 0.85rem; font-size: 0.85rem; color: var(--mut-2); } /* ---------- the entry board spans the grid and lays out horizontally ---------- */ .sec-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .sec-card--wide .sec-art { width: 300px; height: auto; flex: none; border-bottom: 0; border-right: 1px solid var(--line-soft); } .sec-card--wide .sec-bd { padding: 1.35rem 1.5rem 1.45rem; } .sec-card--wide .sec-p { max-width: 720px; } .sec-links--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.6rem; border-top: 1px solid var(--line-soft); } .sec-links--row a { border-bottom: 0; } @media (max-width: 860px) { .sec-card--wide { flex-direction: column; } .sec-card--wide .sec-art { width: 100%; height: 128px; border-right: 0; border-bottom: 1px solid var(--line-soft); } .sec-links--row { grid-template-columns: 1fr; } .sec-links--row a { border-bottom: 1px solid var(--line-soft); } .sec-links--row li:last-child a { border-bottom: 0; } } /* ============================================================ 纸面 —— 「下载 PDF」= window.print()，不引任何 PDF 库 与讲义面 public/assets/css/lecture.css 的 @media print 同一套做法。 ⚠️ 必须追加在 docs.css 末尾：文件里 @media (max-width:860px) 的移动端 规则在纸面上是会命中的（A4 内容宽约 680 CSS px），只有排在它们之后 才能覆盖 .docs-main / .crumbs / h1 的移动端值。 ============================================================ */ @media print { /* 读者在中国：默认 A4，不跟打印机的 Letter 走 */ @page { size: A4; margin: 16mm 15mm; } /* ---------- 一、深色主题也印成白纸黑字 ---------- site.css 里裸 :root 就是深色盘，[data-theme="light"] 才是浅色覆盖， theme.js 又总会把 data-theme 显式写死。所以不逐个元素改颜色，直接 把整套令牌在 :root 上重写成纸面盘 —— callout / 表格 / 弱化文字全部 跟着变。docs.css 在 site.css 之后加载，同分特异性后来者胜； :root[data-theme=…] 多一分权重，挡住将来可能新增的主题块。 */ :root, :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-2: #ffffff; --bg-3: #f4f4f4; --ink: #1a1a1a; --ink-strong: #000000; --mut: #444444; --mut-2: #666666; --line: #bbbbbb; --line-soft: #d8d8d8; --signal: #b23600; --signal-soft: transparent; --shadow-card: none; --shadow-menu: none; --nav-h: 0px; } html, body { background: #fff; color: #000; } /* ---------- 二、不上纸的件 ---------- .nav（下拉面板长在它里面）/ .nav-veil / .footer 是 site.js 注入到 body 上的站点壳 —— 讲义页没有这三件，这是两版 print CSS 唯一的结构差别； .docs-fab 是侧栏折叠后的浮钮；.doc-pager 上下页在纸上没有意义。 */ .nav, .nav-veil, .footer, .docs-side, .docs-toc, .docs-fab, .doc-pager, .doc-print, .h-anchor, .dv { display: none !important; } /* .dv = 视频播放器（docs-video.js），与 lecture.css 同口径 */ /* ---------- 三、正文占满页宽 ---------- .docs-shell 是 264px / 1fr / 220px 三列 grid：只藏两栏而不改 display， 正文会掉进 264px 那一列，印出一条细长字带。 */ body { padding-top: 0; } .docs-shell { display: block; max-width: none; padding: 0; } .docs-main, html.docs-collapsed .docs-main { padding: 0; } /* ---------- 四、排印 ---------- */ .docs-main, .docs-main p, .docs-main li, .docs-main td { color: #1a1a1a; font-size: 10.5pt; line-height: 1.62; } .docs-main h1 { font-size: 20pt; margin: 0 0 0.3em; } .docs-main .doc-sub { font-size: 10.5pt; color: #444; max-width: none; margin-bottom: 1.5em; } .docs-main h2 { font-size: 14.5pt; margin-top: 1.4em; padding-top: 0.7em; border-top: 1px solid #ccc; } .docs-main h3 { font-size: 12pt; margin-top: 1.2em; } .docs-main > h4, .numlist h4 { font-size: 10.8pt; margin-top: 1em; } .crumbs { font-size: 7.5pt; color: #666; margin: 0 0 1.2em; } .crumbs .sep { color: #999; } .docs-main li::marker { color: #666; } /* ---------- 五、分页 ---------- 标题不落单在页底；块级件不被切断；正文段只防孤行寡行 （整段 break-inside:avoid 会把长段推到下一页，留下半页空白）。 */ h1, h2, h3, h4 { break-after: avoid; break-inside: avoid; } .callout, .figure, .numlist > li, tr, .doc-cards a, .sec-card { break-inside: avoid; } /* .def-row 不整块 avoid：185 个 def-row 里有一大半整块包着一张 8 行属性表， 整块避让会把大半页顶空。只保证「名字栏」不和它的正文分家。 */ .def-row > div:first-child { break-after: avoid; } thead { display: table-header-group; } /* 跨页表格每页重出表头 */ tfoot { display: table-footer-group; } .docs-main img, .docs-main svg { break-inside: avoid; max-width: 100%; } .docs-main p, .docs-main li { orphans: 3; widows: 3; } /* ---------- 六、不靠底色的形态 ---------- 打印默认关掉「背景图形」（CDP printToPDF 的 printBackground 也默认 false）， 凡是靠 background 区分的件在纸上会整块消失。所以 callout / th / pre 一律 改用边框和字重承担识别 —— 用户勾不勾「背景图形」，出来的 PDF 一模一样。 */ .callout { background: none; padding: 0.7rem 0.95rem; margin: 1rem 0; } .callout--warn { background: none; } th { background: none; color: #000; border-bottom: 1.2pt solid #666; padding: 0.4rem 0.6rem; } td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #ddd; } code { background: none; border: 0; padding: 0 0.15em; color: #000; } pre { background: none; white-space: pre-wrap; /* pre 原本 overflow-x:auto，纸上会被裁掉右半边 */ word-break: break-word; overflow: visible; font-size: 8.5pt; } .figure { background: none; } /* ⚠️ site.css 的 @media (max-width:860px) 在纸上是会命中的 —— A4 内容宽只有 约 680 CSS px。那一段里 `table { display:block; overflow-x:auto }` 在纸面上 一条顶三条祸：表格不再撑满页宽、跨页时 thead 不再逐页重出、溢出的列被裁掉。 跨文件覆盖同分特异性，靠加载顺序不稳，这里显式加权。 */ table { display: table !important; overflow: visible !important; width: 100%; } th, td { word-break: break-word; } th { white-space: normal; } /* site.css @860 的 th{nowrap} 在纸上同样命中，加长表头会被页边裁掉 */ /* ---------- 七、链接留字不留 URL 尾巴 ---------- docs 全站是相对链接，印出 ../data/overview.html 只是噪音。 */ a { color: inherit; } .docs-main p a, .docs-main li a, .docs-main td a { border-bottom: 1px solid #999; } }