/* ========================================================================================== 顶栏 V1「三島」—— 2026-09-25。稿子 `preview/navbar-unify/`（V1），Allen：「采用 V1」+ 字重 600。 这一份管两件事： 1. 全站顶栏的字重：导航项 / 返回 / AI 一律 600（原来 500）。 2. 阅读类页面的顶栏（`#site-nav.is-doc`，`_topbar.html` 的 `doc_bar` 宏）： ← 返回 ｜ [ 这一篇（标题 + 操作）· courselah · 去处（兄弟页）] ｜ ✦ AI 讲义 / 课程笔记本 / 刷题 / 错题本 / Project 阅读 / PDF / Project 笔记本共用这一份。 ⚠️ 这个文件排在 `updates.css` / `home-nav.css` 后面（`base.html`）。下面的选择器大多和 `updates.css` 里 `#site-nav:not(.is-classic) …` 同一个特异性 (1,2,0)，**靠"后到"赢** —— 别把它挪到 `updates.css` 前面去。 ⚠️ 字重 600：中文走苹方 Semibold；英文 Satoshi 没有 600 这一档，实际落到 700（Allen 选的就是这一档， 预览里并排比过）。当前项**不再额外加粗**：所有项同一个字重，切页时中岛宽度不跳（updates.css 那条老约束）。 ========================================================================================== */ /* ---------------------------------------------------------------- 1. 字重 */ #site-nav:not(.is-classic) .top-nav-link, #site-nav:not(.is-classic) .nav-pill--home > .top-nav-link, #site-nav:not(.is-classic) .nav-back { font-weight: 600; } /* ---------------------------------------------------------------- 2. 阅读类页面的外壳 ⚠️ `display:grid` 必须写：讲义页根上有 `.focus-mode`，tw.css 里那条 `.focus-mode #site-nav{display:none}` 和这里同权重，靠后到才压得住。 ⚠️ `container-type`：兄弟页收图标、AI 收成圆钮、手机那一档，都按**顶栏自己的宽度**判， 不按视口 —— AI 侧栏开着时顶栏只剩正文那一块宽，视口宽不代表放得下。 ⚠️ 顶距 24（≥861）是阅读页原来的几何：药丸浮在大卡片里、离卡片上沿留一道缝 （Allen 2026-09-17「menubar 不要紧贴这个框的上边」）。课程笔记本页 `notebook-course.css` 的 `--cn-topbar-top` 跟这里是同一笔账。 */ #site-nav.is-doc { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); column-gap: 12px; align-items: center; margin: 24px 20px 0; padding: 0; min-height: 0; height: 48px; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; container: docnav / inline-size; transition: right .36s cubic-bezier(.22, 1, .36, 1); } /* Project 阅读 / PDF / 笔记本：卡片上沿在 22 左右、正文眉题在 77（reader-cards 的几何）， 药丸放 12（底边 60），和全站页同一个顶距。课程那几页卡片从 8 开始，才用上面那个 24。 */ #ff-root #site-nav.is-doc { margin-top: 12px; } #site-nav.is-doc .site-nav-side { min-width: 0; } #site-nav.is-doc .site-nav-center { position: relative; grid-column: 2; justify-self: center; display: flex; min-width: 0; max-width: 100%; gap: 0; } /* AI 侧栏开着：顶栏右缘收到侧栏左缘，中岛在剩下的正文区里重新居中（侧栏外层宽 = --ai-w + 24 / 32） */ /* 右缘对齐正文卡片的右缘：讲义页卡片 = 视口 − 侧栏外层（--ai-w + 24）− main 内边距 24； 刷题页多一层 `.drill-workspace`（右内边距 24 + 和侧栏之间的 gap 20）。顶栏自己还有 20 的外边距。 */ @media (min-width: 768px) { #course-root.ai-open #site-nav.is-doc { right: calc(var(--ai-w) + 28px); } #course-root.drill-reader.ai-open #site-nav.is-doc { right: calc(var(--ai-w) + 48px); } #ff-root.ai-open #site-nav.is-doc { right: calc(var(--ai-w) + 32px); } } /* 返回：阅读页只留箭头。讲义卡片左缘在 70px（大纲把手让的位），带「返回」两个字会压上去 —— 这是 2026-09-17 Allen 要求缩小的那一枚，别把字加回来。 */ #site-nav.is-doc .nav-back { display: flex; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; } #site-nav.is-doc .nav-back > span { display: none; } /* ---------------------------------------------------------------- 3. 中岛 左右两轨等宽（`minmax(0,1fr)`），字标永远在正中 —— 和首页中岛同一条规则。 */ #site-nav.is-doc .nav-pill--doc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2px; padding: 6px; min-width: 0; max-width: 100%; transition: opacity .28s ease, transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease; } #site-nav.is-doc .nav-track { display: flex; align-items: center; min-width: 0; height: 36px; } #site-nav.is-doc .nav-track--r { justify-content: flex-end; } #site-nav.is-doc .nav-group { display: flex; align-items: center; gap: 2px; flex: none; min-width: 0; } #site-nav.is-doc #grpDocL { flex: 0 1 auto; } #site-nav.is-doc .nav-sibs { position: relative; } /* 标题（`data-reader-title` 是 reader-cards.js / nb.js 的钩子） */ #site-nav.is-doc .lecture-title { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 300px; height: 36px; padding: 0 12px 0 14px; border-radius: 999px; color: var(--text-main); text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 600; transition: background-color .18s ease; } #site-nav.is-doc .lecture-title b { flex: none; font-weight: 700; } #site-nav.is-doc .lecture-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #site-nav.is-doc .lecture-title .ico { flex: none; width: 13px; height: 13px; color: var(--text-muted); } #site-nav.is-doc a.lecture-title:hover { background: rgba(17, 17, 19, .045); } #site-nav.is-doc .lecture-title:focus-visible { outline: 2px solid #8e809f; outline-offset: -2px; } /* 操作（排版 / 布局 / 添加 / 下载 / 目录 / 单卡 …）：图标按钮，名字在 title / aria-label 里 */ #site-nav.is-doc .nav-slot { display: contents; } #site-nav.is-doc .nav-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; text-decoration: none; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .18s ease, color .18s ease, transform .18s ease; } #site-nav.is-doc .nav-tool--text { padding: 0 12px; } #site-nav.is-doc .nav-tool[hidden] { display: none; } #site-nav.is-doc .nav-tool:hover, #site-nav.is-doc .nav-tool[aria-expanded="true"], #site-nav.is-doc .nav-tool.is-on { background: rgba(17, 17, 19, .06); color: var(--text-main); } #site-nav.is-doc .nav-tool:active { transform: scale(.95); } #site-nav.is-doc .nav-tool:focus-visible { outline: 2px solid #8e809f; outline-offset: -2px; } #site-nav.is-doc .nav-tool .ico { width: 15px; height: 15px; } #site-nav.is-doc .nav-tool-glyph { font-size: 13px; font-weight: 700; letter-spacing: -.02em; } /* 笔记本页塞进槽里的「列表 / 导图」小段控件 */ #site-nav.is-doc .nav-seg { display: inline-flex; align-items: center; flex: none; padding: 2px; border-radius: 999px; background: rgba(17, 17, 19, .045); } #site-nav.is-doc .nav-seg .nav-tool { height: 32px; min-width: 0; padding: 0 11px; } #site-nav.is-doc .nav-seg .nav-tool.is-on { background: #fff; color: var(--text-main); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); } /* Project 笔记本：nb.js 把当前卡的栏头（`.nb-note-menubar`）整条搬进槽里（floatNotebookMenu）。 栏头自己的站标 / 标题不要（顶栏有），「回正文」就是右轨的「正文」，AI 在右岛 —— 只留操作那几枚， 皮换成顶栏的 `.nav-tool`。⚠️ 栏头是 `display:contents`：它自己的 absolute / 圆角 / 影子全都不生效。 */ #site-nav.is-doc .nav-slot .nb-note-menubar { display: contents; } #site-nav.is-doc .nav-slot .nb-phead-acts { display: flex; align-items: center; gap: 2px; flex: none; min-width: 0; max-width: none; margin: 0; overflow: visible; opacity: 1; visibility: visible; transform: none; } #site-nav.is-doc .nav-slot .nb-tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, color .18s ease; } #site-nav.is-doc .nav-slot .nb-tbtn.is-icon { width: 36px; padding: 0; } #site-nav.is-doc .nav-slot .nb-tbtn:hover { background: rgba(17, 17, 19, .06); color: var(--text-main); } #site-nav.is-doc .nav-slot .nb-tbtn svg { width: 15px; height: 15px; } #site-nav.is-doc .nav-slot .nb-seg { display: inline-flex; align-items: center; flex: none; gap: 0; padding: 2px; border: 0; border-radius: 999px; background: rgba(17, 17, 19, .045); } #site-nav.is-doc .nav-slot .nb-seg .nb-tbtn { height: 32px; padding: 0 11px; border: 0; } #site-nav.is-doc .nav-slot .nb-seg .nb-tbtn.is-on { background: #fff; color: var(--text-main); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); } /* ⚠️ 这条要压过上面 `.nb-tbtn` 那条 display（同为 (1,3,0) 时后到的赢），所以多带一层 `.nb-note-menubar` */ #site-nav.is-doc .nav-slot .nb-note-menubar :is(.nb-menubar-brand, .nb-phead-title, .nb-phead-tag, [data-note-ai], [data-act="read"]) { display: none; } [data-ff-theme="dark"] #site-nav.is-doc .nav-slot .nb-seg { background: rgba(255, 255, 255, .06); } [data-ff-theme="dark"] #site-nav.is-doc .nav-slot .nb-seg .nb-tbtn.is-on { background: rgba(255, 255, 255, .14); color: var(--nb-ink, #f4f4f6); } [data-ff-theme="dark"] #site-nav.is-doc .nav-slot .nb-tbtn:hover { background: rgba(255, 255, 255, .08); color: var(--nb-ink, #f4f4f6); } /* 笔记本页的顶栏落在画布上方那条 59px 的带子里（nb.js `sizeDeck` 量的 `--canvas-menu-y` 是带子中线）， 并且以画布中线（`--canvas-menu-x`）为中心：AI 卡片开着时画布让到左边，中岛跟着过去，和阅读页 AI 开着时一个道理。 左右各收 |2·中线 − 视口宽|，两边只有一边非零。 */ .nb-app #site-nav.is-doc { top: calc(var(--canvas-menu-y, 58px) - 24px); margin-top: 0; left: max(0px, calc(2 * var(--canvas-menu-x, 50vw) - 100vw)); right: max(0px, calc(100vw - 2 * var(--canvas-menu-x, 50vw))); } /* 字标：常驻长字标（手机那档换成标记） */ #site-nav.is-doc .nav-brand-v1 { display: grid; place-items: center; width: auto; height: 36px; margin: 0; padding: 0 8px; border-radius: 999px; flex: none; transition: background-color .18s ease; } #site-nav.is-doc .nav-brand-v1:hover { background: rgba(17, 17, 19, .045); } #site-nav.is-doc .nav-brand-v1-word { display: block; width: 82px; height: auto; } #site-nav.is-doc .nav-brand-v1-mark { display: none; width: 26px; height: auto; } /* 去处（兄弟页）。当前那格停着滑片（topbar.js 只在这一组里滑），不可点 */ #site-nav.is-doc .nav-sib { gap: 6px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } #site-nav.is-doc .nav-sib .ico { flex: none; width: 14px; height: 14px; } #site-nav.is-doc .nav-sib.is-active { color: var(--text-main); cursor: default; } #site-nav.is-doc .nav-sib-count { align-self: flex-start; margin: 8px 0 0 -3px; font-size: 10px; font-weight: 700; color: #C06A7E; } #site-nav.is-doc .nav-sib-chev { display: none; } #site-nav.is-doc .nav-sib-chev .ico { width: 12px; height: 12px; } #site-nav.is-doc .nav-sib:focus-visible { outline: 2px solid #8e809f; outline-offset: -2px; } /* ---------------------------------------------------------------- 4. 右岛：AI 开着时墨底 —— 这一枚同时是收起键（✕ 按 Allen 2026-09-15 的要求删掉了，收起只剩它和 Esc）。 */ #site-nav.is-doc .nav-ai { gap: 7px; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, background-color .18s ease, color .18s ease; } #site-nav.is-doc .nav-ai .ico { width: 15px; height: 15px; } #site-nav.is-doc .nav-ai:hover { color: var(--text-main); } #site-nav.is-doc .nav-ai[aria-expanded="true"], #site-nav.is-doc .nav-ai[aria-pressed="true"] { background: var(--text-main); border-color: transparent; color: #fff; } #site-nav.is-doc .nav-ai:focus-visible { outline: 2px solid #8e809f; outline-offset: 2px; } /* ---------------------------------------------------------------- 5. 静置变淡 3 秒没碰顶栏就淡到 .56（Project 导航 A 那套，原来讲义页是"收成小 logo"，统一成这一种）。 */ #site-nav.is-doc.is-idle .nav-pill { opacity: .56; } /* 开着侧栏的那枚 AI 不跟着淡：它这时是收起键，淡成灰像是按不动 */ #site-nav.is-doc.is-idle .nav-ai:is([aria-expanded="true"], [aria-pressed="true"]) { opacity: 1; } #site-nav.is-doc .nav-pill { transition: opacity .28s ease, transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, background-color .18s ease, color .18s ease; } /* ---------------------------------------------------------------- 6. 浮层（排版 / 手机上的「页面与操作」） */ #site-nav.is-doc .nav-pop { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 5; transform: translateX(-50%); pointer-events: auto; padding: 12px 14px; border: 1px solid rgba(28, 28, 30, .08); border-radius: 18px; background: #fff; box-shadow: 0 2px 6px rgba(28, 28, 30, .06), 0 22px 44px -22px rgba(28, 28, 30, .42); } #site-nav.is-doc .nav-pop[hidden] { display: none; } #site-nav.is-doc #nav-type-pop .reader-type-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; max-width: none; margin: 0; padding: 0; color: #717780; font-size: 12px; white-space: nowrap; } #site-nav.is-doc .nav-menu { min-width: 200px; max-width: calc(100vw - 24px); padding: 6px; } #site-nav.is-doc .nav-menu a, #site-nav.is-doc .nav-menu button, #site-nav.is-doc .nav-menu .is-current { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--text-main); text-align: left; text-decoration: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } #site-nav.is-doc .nav-menu a:hover, #site-nav.is-doc .nav-menu button:hover { background: rgba(17, 17, 19, .05); } #site-nav.is-doc .nav-menu .is-current { background: rgba(17, 17, 19, .065); cursor: default; } #site-nav.is-doc .nav-menu .ico { flex: none; width: 15px; height: 15px; color: var(--text-muted); } #site-nav.is-doc .nav-menu .nav-tool-glyph { flex: none; width: 15px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: center; } #site-nav.is-doc .nav-menu hr { margin: 6px 8px; border: 0; border-top: 1px solid rgba(28, 28, 30, .08); } /* ---------------------------------------------------------------- 7. 讲义页进场动画 起点靠 ``（course.html 的 同步加）：站点那两组露出来、 这一篇 / 去处两组收着；`reader-morph.js` 逐帧写宽度，走完把内联样式交回 CSS。 稳态就是 CSS 默认值 —— JS 没跑时顶栏停在可用的稳态。 */ #site-nav.is-doc .nav-group--site { display: none; } #site-nav.is-doc .nav-group--site .top-nav-link { padding: 0 14px; font-size: 12.5px; } html.is-morphing #site-nav.is-doc .nav-group--site { display: flex; } html.is-morphing #site-nav.is-doc .nav-group { overflow: hidden; } html.is-morphing #site-nav.is-doc .nav-group--doc { width: 0; opacity: 0; } /* 动画期间两轨都**贴着字标**：左轨靠右、右轨靠左；右边两组的内容再贴自己的右缘 —— 这样收的时候内容朝字标滑进去、长的时候从字标底下滑出来。两组最后都长到轨道全宽， 左组内容贴左、右组内容贴右，正好就是稳态的样子，收尾不跳。 */ html.is-morphing #site-nav.is-doc .nav-track--l { justify-content: flex-end; } html.is-morphing #site-nav.is-doc .nav-track--r { justify-content: flex-start; } html.is-morphing #site-nav.is-doc :is(#grpSiteR, #grpDocR) { justify-content: flex-end; } /* ---------------------------------------------------------------- 8. 按顶栏自己的宽度收 ⚠️ 这几档是按「讲义页 1440 / 1180 / 1024 / 820 + AI 开关」扫出来的，改了标题 / 字标 / 图标尺寸要重扫。 */ @container docnav (max-width: 1180px) { #site-nav.is-doc .lecture-title { max-width: 240px; } } /* 去处只留图标（当前那格留字）：名字在 title / aria-label 里 */ @container docnav (max-width: 1060px) { #site-nav.is-doc .nav-sib:not(.is-active) { position: relative; width: 36px; padding: 0; justify-content: center; } #site-nav.is-doc .nav-sib:not(.is-active) .nav-sib-lbl { display: none; } #site-nav.is-doc .nav-sib:not(.is-active) .nav-sib-count { position: absolute; top: 3px; right: 4px; margin: 0; } } /* AI 收成圆钮 */ @container docnav (max-width: 860px) { #site-nav.is-doc .nav-ai { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; } #site-nav.is-doc .nav-ai > span { display: none; } #site-nav.is-doc .lecture-title { max-width: 200px; } } /* 手机：C ｜ 标题… ｜「当前 ⌄」。其余兄弟页和操作收进「当前 ⌄」弹出的菜单（reader-morph.js 现拼）。 ⚠️ 这一档的判据是顶栏宽 ≤600：手机竖屏 375（顶栏 351）、以及 iPad 竖屏开着 AI 时都会落进来。 */ @container docnav (max-width: 600px) { /* 高度跟着顶栏那一行走（≥640 是 48、手机 44）：iPad 竖屏开着 AI 时顶栏只剩 300 来宽也会落进这一档， 那时视口还是平板，药丸不该突然矮一截、上沿错开 2px */ #site-nav.is-doc :is(.site-nav-center, .site-nav-side) { align-self: stretch; } /* 下面的 height:100% 才有参照 */ /* 内边距 3：36 的格子 + 3×2 + 1px 描边×2 = 44，正好是手机那一行；写 4 会被内容撑到 46 */ #site-nav.is-doc .nav-pill--doc { display: flex; height: 100%; padding: 3px; gap: 0; } #site-nav.is-doc .nav-track { display: contents; } #site-nav.is-doc .nav-brand-v1 { order: -1; padding: 0 6px; } #site-nav.is-doc .nav-brand-v1-word { display: none; } #site-nav.is-doc .nav-brand-v1-mark { display: block; } #site-nav.is-doc .nav-tool, #site-nav.is-doc .nav-seg, #site-nav.is-doc .nav-slot, #site-nav.is-doc .nav-sib:not(.is-active) { display: none; } #site-nav.is-doc #grpDocL { flex: 1 1 auto; } #site-nav.is-doc .lecture-title { flex: 1 1 auto; max-width: none; padding: 0 8px; font-size: 12.5px; } #site-nav.is-doc .lecture-title b { display: none; } #site-nav.is-doc .nav-sib.is-active { cursor: pointer; padding: 0 10px 0 11px; gap: 5px; } #site-nav.is-doc .nav-sib-chev { display: inline-flex; } #site-nav.is-doc .nav-back, #site-nav.is-doc .nav-ai { width: auto; height: 100%; aspect-ratio: 1; } #site-nav.is-doc .nav-pop { top: calc(100% + 8px); } } @media (max-width: 860px) { #site-nav.is-doc { margin-top: 12px; } } @media (max-width: 639px) { #site-nav.is-doc { margin: 12px 12px 0; column-gap: 8px; height: 44px; } } /* ≤767 侧栏是盖满全屏的浮层：顶栏抬到浮层上面（右岛那枚 AI 就是收起键），不再给侧栏让位 */ @media (max-width: 767px) { :is(#course-root, #ff-root).ai-open #site-nav.is-doc { right: 0; z-index: 80; } } /* ---------------------------------------------------------------- 9. 深色（Project 笔记本页可切深色） */ [data-ff-theme="dark"] #site-nav.is-doc .nav-pill { background: var(--nb-panel, #101014); border-color: var(--nb-hair, rgba(255, 255, 255, .1)); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7); } [data-ff-theme="dark"] #site-nav.is-doc .lecture-title, [data-ff-theme="dark"] #site-nav.is-doc .nav-sib.is-active, [data-ff-theme="dark"] #site-nav.is-doc .nav-tool:hover, [data-ff-theme="dark"] #site-nav.is-doc .nav-tool.is-on, [data-ff-theme="dark"] #site-nav.is-doc .nav-ai:hover { color: var(--nb-ink, #f4f4f6); } [data-ff-theme="dark"] #site-nav.is-doc :is(.nav-tool:hover, .nav-tool.is-on, a.lecture-title:hover, .nav-brand-v1:hover) { background: rgba(255, 255, 255, .08); } [data-ff-theme="dark"] #site-nav.is-doc .nav-glider { background: rgba(255, 255, 255, .1); } [data-ff-theme="dark"] #site-nav.is-doc .nav-seg { background: rgba(255, 255, 255, .06); } [data-ff-theme="dark"] #site-nav.is-doc .nav-seg .nav-tool.is-on { background: rgba(255, 255, 255, .14); } [data-ff-theme="dark"] #site-nav.is-doc :is(.nav-brand-v1-word, .nav-brand-v1-mark) { filter: invert(1); } [data-ff-theme="dark"] #site-nav.is-doc .nav-ai[aria-pressed="true"] { background: var(--nb-ink, #f4f4f6); color: var(--nb-bg, #08080b); } [data-ff-theme="dark"] #site-nav.is-doc .nav-pop { background: var(--nb-panel, #101014); border-color: var(--nb-hair, rgba(255, 255, 255, .1)); } [data-ff-theme="dark"] #site-nav.is-doc .nav-menu :is(a, button) { color: var(--nb-ink, #f4f4f6); } @media (prefers-reduced-motion: reduce) { #site-nav.is-doc, #site-nav.is-doc .nav-pill, #site-nav.is-doc .nav-pill--doc, #site-nav.is-doc .nav-tool, #site-nav.is-doc .nav-ai, #site-nav.is-doc .lecture-title { transition: none; } }