/* ============================================================ rl-control 学习指南站点样式 专业排版 · 清晰层次 · light/dark 双模式 · 移动/打印友好 ============================================================ 约束：纯 CSS（含 CSS 变量），不改 JS/HTML/Python。 兼容：保留全部既有 class/id，新增 .evo-* / img.svg-lineage 等统一样式（即便渲染器另注入内联 样式也不会冲突——内联优先级更高）。 ============================================================ */ /* ---------- 设计 tokens（light） ---------- */ :root { color-scheme: light; /* 背景与前景 */ --c-bg: #eceff3; /* 页面底色（比 #fff 深约 6%，容器/表格明确浮起） */ --c-text: #1f2328; /* 主要正文 */ --c-muted: #57606a; /* 辅助文字 */ --c-faint: #8c959f; /* 更弱的辅助 */ /* 品牌与强调（WCAG AA on white） */ --c-primary: #0969da; /* 蓝 */ --c-primary-h: #0550ae; /* 蓝 hover 加深 */ --c-accent: #6f42c1; /* 紫 */ --c-accent-h: #4c2889; --c-warn: #9a6700; --c-good: #1a7f37; --c-warn-h: #bf8700; --c-good-h: #2da44e; --c-danger: #cf222e; /* 卡片 / 边框 */ --c-card: #ffffff; --c-card-alt: #f6f8fa; --c-border: #d0d7de; --c-border-h: #afb8c1; /* 标签 */ --c-tag-bg: #ddf4ff; --c-tag-text: #0969da; /* 语义 callout 底色 */ --c-warn-bg: #fff8c5; --c-good-bg: #dafbe1; --c-tip-bg: #fbefff; --c-info-bg: #ddf4ff; /* 代码 */ --c-code-bg: #f6f8fa; --c-code-text: #24292f; /* 阴影 / 圆角 / 节奏 */ --shadow-xs: 0 1px 0 rgba(31,35,40,.04); --shadow-sm: 0 1px 3px rgba(31,35,40,.06), 0 1px 2px rgba(31,35,40,.04); --shadow-md: 0 3px 8px rgba(31,35,40,.08), 0 2px 4px rgba(31,35,40,.06); --shadow-lg: 0 12px 28px rgba(31,35,40,.12), 0 4px 8px rgba(31,35,40,.06); --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* 字体 */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", Menlo, monospace; /* 节奏 */ --content-max: 820px; /* 正文最大宽度 */ --transition: 150ms cubic-bezier(.4,0,.2,1); } /* ---------- 设计 tokens（dark） ---------- 手动 + 系统 dark 双触发： - [data-theme="dark"] → 用户手动选 dark（任意系统） - @media prefers-color-scheme: dark :root:not([data-theme="light"]) → 系统 dark 且用户未手动选 light 两块变量完全一致；render_research.py / render_content.py 在 内联 一段 pre-DOM 脚本读 localStorage 立即写 data-theme，避免 FOUC。 ------------------------------------------------------------ */ /* A. 手动 dark：[data-theme="dark"]（与系统主题无关） */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: #0d1117; --c-text: #e6edf3; --c-muted: #8b949e; --c-faint: #6e7681; --c-primary: #58a6ff; --c-primary-h: #79c0ff; --c-accent: #bc8cff; --c-accent-h: #d2a8ff; --c-warn: #d29922; --c-good: #3fb950; --c-warn-h: #e3b341; --c-good-h: #56d364; --c-danger: #f85149; --c-card: #161b22; --c-card-alt: #1c2128; --c-border: #30363d; --c-border-h: #484f58; --c-tag-bg: rgba(56,139,253,.18); --c-tag-text: #79c0ff; --c-warn-bg: rgba(187,128,9,.18); --c-good-bg: rgba(63,185,80,.16); --c-tip-bg: rgba(188,140,255,.16); --c-info-bg: rgba(56,139,253,.16); --c-code-bg: #161b22; --c-code-text: #e6edf3; --shadow-xs: 0 1px 0 rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 3px 8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.45); --shadow-lg: 0 12px 28px rgba(0,0,0,.65), 0 4px 8px rgba(0,0,0,.45); } /* B. 系统 dark：仅当用户未手动选 light（:not([data-theme="light"]）。 无 data-theme 属性 = 跟随系统；data-theme="dark" 时 A 已覆盖，此处重复无害。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-bg: #0d1117; --c-text: #e6edf3; --c-muted: #8b949e; --c-faint: #6e7681; --c-primary: #58a6ff; --c-primary-h: #79c0ff; --c-accent: #bc8cff; --c-accent-h: #d2a8ff; --c-warn: #d29922; --c-good: #3fb950; --c-warn-h: #e3b341; --c-good-h: #56d364; --c-danger: #f85149; --c-card: #161b22; --c-card-alt: #1c2128; --c-border: #30363d; --c-border-h: #484f58; --c-tag-bg: rgba(56,139,253,.18); --c-tag-text: #79c0ff; --c-warn-bg: rgba(187,128,9,.18); --c-good-bg: rgba(63,185,80,.16); --c-tip-bg: rgba(188,140,255,.16); --c-info-bg: rgba(56,139,253,.16); --c-code-bg: #161b22; --c-code-text: #e6edf3; --shadow-xs: 0 1px 0 rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 3px 8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.45); --shadow-lg: 0 12px 28px rgba(0,0,0,.65), 0 4px 8px rgba(0,0,0,.45); } } /* ---------- 全局 / reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* 给锚点跳转留出 sticky 顶栏的空间 */ scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.75; letter-spacing: .003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--c-primary); text-decoration: none; transition: color var(--transition), border-color var(--transition); } a:hover { color: var(--c-primary-h); text-decoration: underline; } a:active { color: var(--c-primary-h); } a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--c-tag-bg); color: var(--c-tag-text); } /* 自定义滚动条（仅 webkit） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; border: 2px solid var(--c-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--c-border-h); } /* ============================================================ 布局 ============================================================ */ .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1400px; width: 100%; margin: 0 auto; min-height: 100vh; } /* ---------- 侧边栏 ---------- */ .sidebar { position: sticky; top: 0; min-width: 0; height: 100vh; overflow-y: auto; padding: 28px 18px 40px; border-right: 1px solid var(--c-border); background: var(--c-card); background-image: linear-gradient(to bottom, var(--c-card), var(--c-card)); } .sidebar .brand { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; color: var(--c-text); /* 品牌行改 flex：左标题 + 右主题切换按钮 */ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar .brand-sub { font-size: 12px; color: var(--c-muted); margin-bottom: 24px; line-height: 1.5; } /* 主题切换按钮（sidebar 品牌区右侧；onclick="toggleTheme()"，theme.js 提供） */ .theme-toggle { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-card-alt); color: var(--c-text); font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .theme-toggle:hover { border-color: var(--c-primary); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 3px solid var(--c-tag-bg); outline-offset: 2px; } .theme-toggle:active { transform: translateY(0); } .sidebar nav .group { margin-bottom: 20px; } .sidebar nav .group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); font-weight: 700; padding: 0 8px 6px; } .sidebar nav a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--c-text); font-size: 14px; line-height: 1.45; border-left: 2px solid transparent; transition: background var(--transition), color var(--transition); } .sidebar nav a:hover { background: var(--c-card-alt); text-decoration: none; color: var(--c-primary); } .sidebar nav a.active { background: var(--c-tag-bg); color: var(--c-tag-text); font-weight: 600; } /* ============================================================ 主内容（正文） ============================================================ */ .main { padding: 40px 56px 96px; max-width: calc(var(--content-max) + 112px); /* 正文宽 + 左右 padding */ min-width: 0; width: 100%; overflow-wrap: break-word; word-break: break-word; } .main > *, .paper-widgets { min-width: 0; } /* 正文内部的可读区块（不约束全宽 grid/table） */ .main > p, .main > ul, .main > ol, .main > blockquote, .main > pre, .main > .callout, .main > .paper-card, .main > .timeline, .main > figure { max-width: var(--content-max); } /* ---------- 标题层次 ---------- */ .main h1 { font-size: 2em; /* 32 px */ line-height: 1.2; letter-spacing: -.02em; font-weight: 800; margin: 0 0 10px; color: var(--c-text); } .main h2 { font-size: 1.5em; /* 24 px */ line-height: 1.3; letter-spacing: -.01em; font-weight: 700; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .main h3 { font-size: 1.25em; /* 20 px */ line-height: 1.35; letter-spacing: -.005em; font-weight: 700; margin: 32px 0 8px; color: var(--c-text); } .main h4 { font-size: 1em; /* 16 px */ font-weight: 700; margin: 22px 0 6px; color: var(--c-text); } .main h5, .main h6 { font-size: .92em; font-weight: 700; color: var(--c-muted); margin: 18px 0 6px; } .main p { margin: 12px 0; } .main ul, .main ol { padding-left: 26px; margin: 12px 0; } .main li { margin: 6px 0; } .main li::marker { color: var(--c-muted); } .main strong, .main b { font-weight: 700; color: var(--c-text); } .main em, .main i { font-style: italic; } /* 引文 / 引用块 */ .main blockquote { margin: 18px 0; padding: 8px 18px; border-left: 4px solid var(--c-border); color: var(--c-muted); background: var(--c-card-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .main blockquote p { margin: 6px 0; } /* 段落小注 */ .muted { color: var(--c-muted); } .hint { font-size: 13px; color: var(--c-muted); } /* 水平分隔 */ .main hr { border: 0; border-top: 1px solid var(--c-border); margin: 36px 0; } /* ============================================================ 卡片 / 提示（callout） ============================================================ */ .callout { background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; box-shadow: var(--shadow-sm); color: var(--c-text); transition: box-shadow var(--transition); } .callout:hover { box-shadow: var(--shadow-md); } .callout > p:first-child { margin-top: 0; } .callout > p:last-child { margin-bottom: 0; } .callout.warn { border-left-color: var(--c-warn-h); background: var(--c-warn-bg); } .callout.good { border-left-color: var(--c-good-h); background: var(--c-good-bg); } .callout.tip { border-left-color: var(--c-accent); background: var(--c-tip-bg); } .callout .ttl, .callout > strong:first-child { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 14px; letter-spacing: .01em; color: var(--c-text); } /* ============================================================ 标签 / chip / badge ============================================================ */ .tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--c-tag-bg); color: var(--c-tag-text); font-size: 12px; font-weight: 600; letter-spacing: .02em; margin: 0 4px 4px 0; line-height: 1.6; white-space: nowrap; } .tag.year { background: var(--c-card-alt); color: var(--c-muted); } .tag.amp { background: #fbe6ff; color: #8957e5; } /* dark：手动 [data-theme="dark"] 或系统 dark 且未手动选 light */ :root[data-theme="dark"] .tag.amp { background: rgba(188,140,255,.18); color: #d2a8ff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.amp { background: rgba(188,140,255,.18); color: #d2a8ff; } } .chip, .badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-card-alt); color: var(--c-muted); } .badge-ok { color: var(--c-good); border-color: var(--c-good-h); background: var(--c-good-bg); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } /* ============================================================ 论文卡片 ============================================================ */ .paper-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 20px; margin: 18px 0; background: var(--c-card); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .paper-card:hover { box-shadow: var(--shadow-md); } .paper-card h4 { margin-top: 0; font-size: 17px; letter-spacing: -.005em; } .paper-card .meta { color: var(--c-muted); font-size: 13px; margin: 4px 0 10px; } .paper-card .links a { margin-right: 14px; font-size: 13px; } .paper-card .summary { margin: 8px 0; } .paper-card .analysis { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-border); font-size: 14px; color: var(--c-text); } .paper-card .analysis b { color: var(--c-accent); } /* ============================================================ 时间线 ============================================================ */ .timeline { position: relative; padding-left: 30px; margin: 22px 0; } .timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(to bottom, var(--c-primary), var(--c-border)); } .timeline .ev { position: relative; margin-bottom: 20px; } .timeline .ev::before { content: ''; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-primary); border: 2px solid var(--c-bg); box-shadow: 0 0 0 2px var(--c-border); } .timeline .ev .when { font-size: 12px; color: var(--c-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .timeline .ev .what { font-size: 15px; margin-top: 2px; } /* ============================================================ 表格 ============================================================ */ .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; margin: 16px 0; } table { border-collapse: collapse; background: var(--c-card); /* 白底，明确浮在 #eceff3 页面上 */ width: 100%; margin: 16px 0; font-size: 14px; line-height: 1.5; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; } thead { background: #e8ebee; } /* 比 --c-card(#fff) 深约 7%，表头清晰可辨 */ th, td { border: 1px solid var(--c-border); padding: 10px 14px; text-align: left; vertical-align: top; } th { font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--c-text); background: #e8ebee; /* 表头底（比 #fff 深约 7%），与 white 表底形成层次 */ position: sticky; top: 0; } tbody tr { transition: background var(--transition); } tbody tr:nth-child(even) td { background: #f5f6f8; } /* 斑马纹（比 #fff 深约 3%，可见） */ tbody tr:hover td { background: var(--c-info-bg); } td > p:first-child, th > p:first-child { margin-top: 0; } td > p:last-child, th > p:last-child { margin-bottom: 0; } /* dark mode：light 把 thead/th/zebra 硬编码为浅色（在 white 表底上加深）， dark 表底是 --c-card(#161b22) 深色，需改回 --c-card-alt(#1c2128，更浅) 才能在深表底上辨识。覆盖 both 手动 [data-theme="dark"] 与系统 dark。 */ :root[data-theme="dark"] thead, :root[data-theme="dark"] th { background: var(--c-card-alt); } :root[data-theme="dark"] tbody tr:nth-child(even) td { background: var(--c-card-alt); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) thead, :root:not([data-theme="light"]) th { background: var(--c-card-alt); } :root:not([data-theme="light"]) tbody tr:nth-child(even) td { background: var(--c-card-alt); } } /* ============================================================ 代码 ============================================================ */ pre, code, kbd, samp { font-family: var(--font-mono); font-size: .9em; } code { background: var(--c-code-bg); color: var(--c-code-text); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--c-border); font-size: 85%; overflow-wrap: anywhere; word-break: normal; } pre { background: var(--c-code-bg); color: var(--c-code-text); padding: 16px 18px; border-radius: var(--radius); overflow-x: auto; max-width: 100%; overscroll-behavior-inline: contain; border: 1px solid var(--c-border); box-shadow: var(--shadow-xs); font-size: 13px; line-height: 1.6; } pre code { background: transparent; padding: 0; border: 0; font-size: inherit; word-break: normal; } /* ============================================================ SVG / 图（含 svg-lineage 谱系图） ============================================================ */ figure { margin: 28px 0; text-align: center; } figure svg, figure img { max-width: 100%; height: auto; } figcaption { font-size: 13px; color: var(--c-muted); margin-top: 10px; font-style: italic; } /* 渲染器把谱系 SVG 作为 引入 */ img.svg-lineage, .svg-lineage { display: block; margin: 24px auto; max-width: 100%; height: auto; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } img.svg-lineage:hover { box-shadow: var(--shadow-md); } /* 引用关系图容器 */ .citation-graph { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; margin: 18px 0; overflow-x: auto; box-shadow: var(--shadow-sm); } /* ============================================================ 章节导航（上 / 下一篇） ============================================================ */ .chapter-nav { display: flex; justify-content: space-between; gap: 12px; margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--c-border); } .chapter-nav a { padding: 10px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 14px; background: var(--c-card); transition: all var(--transition); max-width: 48%; } .chapter-nav a:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; box-shadow: var(--shadow-sm); transform: translateY(-1px); } /* ============================================================ 线索页章节 TOC（浮动迷你目录） - 仅在 render_page 检测到 ≥4 个 H2 时注入（短页不渲染）。 - 桌面：sticky + float:right，正文右侧常驻；正文自动让出宽度环绕。 - 移动（≤900px）：static + 100% 宽，正文顶部完整展示。 - 与 .chapter-nav（页脚导航）和 .breadcrumb（位置）配套：知道在哪 + 怎么跳。 ============================================================ */ .page-toc { float: right; width: 200px; margin: 12px 0 16px 24px; padding: 10px 14px 12px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); position: sticky; top: 20px; z-index: 4; font-size: 0.85em; color: var(--c-muted); align-self: start; } .page-toc__title { margin: 0; font-weight: 700; color: var(--c-text); font-size: 0.95em; padding-bottom: 4px; } .page-toc ul { list-style: none; padding: 6px 0 0; margin: 0; border-top: 1px dashed var(--c-border); } .page-toc li { margin: 3px 0; line-height: 1.45; } .page-toc a { display: block; padding: 3px 4px; color: var(--c-muted); text-decoration: none; border-radius: var(--radius-xs); transition: background var(--transition), color var(--transition); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-toc a:hover { background: var(--c-card-alt); color: var(--c-primary); } /* 主题页补充内容与手机目录：都用原生 disclosure，不依赖脚本。 */ .page-toc-mobile { display: none; } .optional-review, .page-toc-mobile { margin: 18px 0; padding: 0 14px 12px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .optional-review > summary, .page-toc-mobile > summary { padding: 12px 0; color: var(--c-text); cursor: pointer; font-weight: 700; } .optional-review > summary::marker, .page-toc-mobile > summary::marker { color: var(--c-primary); } .page-toc-mobile ul { margin: 0; padding: 8px 0 0 20px; border-top: 1px dashed var(--c-border); } .page-toc-mobile li { margin: 6px 0; } .page-toc-mobile a { color: var(--c-muted); } .page-toc-mobile a:hover { color: var(--c-primary); } /* ============================================================ 回到顶部浮动按钮（全站） - 滚动后一键回顶；纯 inline onclick，无 JS 依赖。 - 移动端也显示；打印时隐藏（与 .chapter-nav 等导航一致）。 ============================================================ */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--c-border); background: rgba(255, 255, 255, 0.78); color: var(--c-text); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; } .back-to-top:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .back-to-top:focus-visible { outline: 3px solid var(--c-tag-bg); outline-offset: 2px; } :root[data-theme="dark"] .back-to-top { background: rgba(22, 27, 34, 0.78); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .back-to-top { background: rgba(22, 27, 34, 0.78); } } /* ============================================================ 首页 hero ============================================================ */ .hero { background: linear-gradient(135deg, #0969da 0%, #6f42c1 60%, #bf3989 100%); color: #fff; padding: 52px 44px; border-radius: var(--radius-lg); margin-bottom: 36px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; } .hero h1 { color: #fff; font-size: 2.25em; margin: 0 0 10px; border: none; padding: 0; letter-spacing: -.02em; position: relative; } .hero p { font-size: 1.0625em; opacity: .96; margin: 8px 0; position: relative; } .hero .meta-line { margin-top: 18px; font-size: 13px; opacity: .88; letter-spacing: .02em; position: relative; } .hero .glossary-stats { color: rgba(255, 255, 255, .88); } /* ============================================================ 网格卡片（首页方向入口） ============================================================ */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; } .dir-card { display: block; padding: 20px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .dir-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-primary); text-decoration: none; } .dir-card .icon { font-size: 26px; display: inline-block; margin-bottom: 4px; } .dir-card .ttl { font-weight: 700; font-size: 16px; margin: 6px 0 4px; letter-spacing: -.005em; } .dir-card .desc { font-size: 13px; color: var(--c-muted); line-height: 1.55; } /* ============================================================ 教学页内容层级 -------------------------------------------------------- data-layer 只用于结构着色；所有正文层级始终展示。 ============================================================ */ /* 深度区块的左侧色带（教学页 section[data-layer]；data-layer 仅内部管线用） */ main section[data-layer], .main section[data-layer] { border-left: 3px solid transparent; padding: 4px 0 4px 16px; margin-left: -16px; border-radius: 2px; transition: background var(--transition); } main section[data-layer="D0"], .main section[data-layer="D0"] { border-left-color: var(--c-good-h); } main section[data-layer="D1"], .main section[data-layer="D1"] { border-left-color: var(--c-primary); } main section[data-layer="D2"], .main section[data-layer="D2"] { border-left-color: var(--c-accent); } main section[data-layer="D3"], .main section[data-layer="D3"] { border-left-color: var(--c-warn-h); } main section[data-layer="V"], .main section[data-layer="V"] { border-left-color: #bf3989; } /* ============================================================ 演进位置框（evo-box）：建立在前作 / 催生 / 同线索 ============================================================ */ .callout.evo-box { margin: 18px 0 22px; padding: 14px 18px 16px; border-left-color: var(--c-accent); background: var(--c-tip-bg); } .callout.evo-box .ttl { font-size: 14px; color: var(--c-accent); } .evo-row { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; align-items: baseline; } .evo-row > .evo-k { font-size: 11px; color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; width: 5.5em; } .evo-row > .evo-v { flex: 1 1 auto; min-width: 0; } .evo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; } .evo-list li { font-size: 13px; line-height: 1.6; } .evo-list li::before { content: "·"; color: var(--c-muted); margin-right: 6px; } .evo-list li:first-child::before { content: none; } .evo-list a { color: var(--c-text); border-bottom: 1px dashed var(--c-border); transition: color var(--transition), border-color var(--transition); } .evo-list a:hover { color: var(--c-primary); border-bottom-style: solid; border-color: var(--c-primary); text-decoration: none; } .evo-empty { font-size: 13px; color: var(--c-muted); font-style: italic; } /* ============================================================ 术语自动注解（DESIGN §4.2） -------------------------------------------------------- 渲染器把教学页首次出现的术语包成 ， 原生 title 属性即 hover tooltip（无 JS / 无 CDN）。 ============================================================ */ dfn.term, .term { font-style: inherit; font-weight: 500; border-bottom: 1px dotted var(--c-muted); cursor: help; text-decoration: none; color: inherit; transition: color var(--transition), border-color var(--transition); } dfn.term:hover, .term:hover { border-bottom-style: solid; border-color: var(--c-primary); color: var(--c-primary); background: var(--c-tag-bg); border-radius: 2px; } /* ============================================================ MathJax 公式样式 ============================================================ */ mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding: 4px 0; } mjx-container[display="true"] { margin: 14px 0; background: var(--c-card-alt); border-radius: var(--radius-sm); padding: 16px; border: 1px solid var(--c-border); } /* ============================================================ glossary / 术语表（共用 base；完整样式见文末「术语表页」节） -------------------------------------------------------- 沿用既有 class（.glossary-list / .glossary-item / .glossary-alias / .glossary-cat / .glossary-count）作为最小排版底座；增强的字母导航、 分类 chip、卡片、badge 样式统一在本文件末尾定义（后定义优先级更高）。 ============================================================ */ .glossary-list { margin: 18px 0; } .glossary-item > b, .glossary-item > strong { font-size: 1em; color: var(--c-text); } .glossary-alias { color: var(--c-muted); font-size: 13px; } .glossary-count { color: var(--c-muted); font-size: 13px; } /* 内容页页脚 */ .content-footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--c-border); color: var(--c-muted); font-size: 13px; } /* 通用 stats 行 */ .stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; font-size: 13px; color: var(--c-muted); } /* ============================================================ 响应式 ============================================================ */ @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; } .sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--c-border); padding: 20px 18px; } .main { width: 100%; max-width: 100%; padding: 28px 22px 72px; } .main > p, .main > ul, .main > ol, .main > blockquote, .main > pre, .main > .callout, .main > .paper-card, .main > .timeline, .main > figure { max-width: none; } /* 主题页：首屏摘要后只显示按需打开的紧凑目录。 */ .page-toc { display: none; } .page-toc-mobile { display: block; } } /* 真正的移动端：折叠侧栏更紧凑 */ @media (max-width: 768px) { body { font-size: 15px; } .main { padding: 22px 16px 60px; } .main h1 { font-size: 1.7em; } .main h2 { font-size: 1.3em; margin: 32px 0 10px; } .main h3 { font-size: 1.1em; } .hero { padding: 36px 22px; border-radius: var(--radius); } .hero h1 { font-size: 1.7em; } .grid { grid-template-columns: 1fr; gap: 12px; } .chapter-nav { flex-direction: column; } .chapter-nav a { max-width: 100%; } .paper-card { padding: 14px 16px; } pre { padding: 12px; font-size: 12px; } mjx-container[display="true"] { padding: 10px; font-size: .9em; } } @media (max-width: 480px) { .main { padding: 18px 12px 52px; } .hero { padding: 24px 16px; } .paper-card, .callout, figure { padding-left: 12px; padding-right: 12px; } .featured-grid, .entry-grid, .mini-grid, .bottom-links { grid-template-columns: minmax(0, 1fr); } .ts-title { min-width: 0; flex-basis: calc(100% - 2.5rem); } } @media (max-width: 360px) { /* 极窄屏已有页脚“顶部”链接；隐藏浮动按钮可避免它与宽表滚动区争抢空间。 */ .back-to-top { display: none; } } /* ============================================================ 打印 ============================================================ */ @media print { :root { --c-bg: #fff; --c-text: #000; --c-muted: #444; --c-card: #fff; --c-card-alt: #fff; --c-border: #ccc; --c-code-bg: #f5f5f5; --c-tag-bg: #f0f0f0; --c-tag-text: #000; } html { scroll-behavior: auto; } body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.5; } .layout { display: block; max-width: none; } .sidebar, .chapter-nav, .hero, .search-bar, .page-toc, .page-toc-mobile, .back-to-top { display: none !important; } .main { padding: 0; margin: 0; max-width: none; } .main > p, .main > ul, .main > ol, .main > blockquote, .main > pre, .main > .callout, .main > .paper-card, .main > .timeline, .main > figure { max-width: none; } /* depth 分层永远展开 */ main section[data-layer][hidden], .main section[data-layer][hidden] { display: block !important; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } a[href^="#"]::after, a[href^="javascript"]::after { content: none; } pre, code { background: #f5f5f5 !important; color: #000 !important; } .callout, .paper-card, .dir-card { box-shadow: none !important; border: 1px solid #ccc; page-break-inside: avoid; } img.svg-lineage { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } } /* ============================================================ 过动效降级（无障碍） ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ============================================================ 面包屑（教学页内：首页 › 自学教材 › 线索 › 当前页） - 易学性：学习者一进门就知道自己在知识树的哪条枝上。 - 与 .chapter-nav（页脚导航）配套，组成「知道在哪 + 怎么继续」。 ============================================================ */ .breadcrumb { font-size: 0.85em; color: var(--c-muted); padding: 0 2px 10px; margin: 0 0 14px; line-height: 1.6; border-bottom: 1px dashed var(--c-border); word-break: break-word; } .breadcrumb a { color: var(--c-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; } /* › 分隔符：每个链接后追加，最后一个 （当前页）不是 故自动无分隔 */ .breadcrumb a::after { content: " ›"; margin: 0 6px 0 4px; color: var(--c-muted); opacity: 0.65; font-weight: 400; } .breadcrumb span { color: var(--c-text); font-weight: 600; } /* 移动端：面包屑换行不溢出 */ @media (max-width: 720px) { .breadcrumb { font-size: 0.8em; } .breadcrumb a::after { margin: 0 4px 0 3px; } } /* 打印：面包屑与页脚导航一并隐藏（与既有 .chapter-nav 打印规则一致） */ @media print { .breadcrumb { display: none !important; } } /* ============================================================ 教学页 Q&A 卡片（scripts/render_content.py） - 检查点 → 编号卡片组（蓝） - 常见误区 → 误区/正确 警告卡片（红/绿） - FAQ → 问题与回答直接展示 纯 CSS；复用全局 tokens；light/dark 双模式；移动/打印友好。 ============================================================ */ /* ---------- 检查点：编号卡片组 ---------- */ .checkpoint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 18px 0 24px; } .checkpoint-card { position: relative; background: var(--c-info-bg); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 14px 16px 14px 56px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .checkpoint-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .checkpoint-num { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; } .checkpoint-body { min-width: 0; } .checkpoint-body > p:first-child { margin-top: 0; } .checkpoint-body > p:last-child { margin-bottom: 0; } .checkpoint-body code { font-size: .9em; } /* ---------- 常见误区：警告卡片 ---------- */ .misconception-grid { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 24px; } .misconception-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } .misconception-card:hover { box-shadow: var(--shadow-md); } .misconception-warn, .misconception-fix { padding: 10px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } .misconception-warn { background: var(--c-warn-bg); border-left: 4px solid var(--c-warn-h); } .misconception-fix { background: var(--c-good-bg); border-left: 4px solid var(--c-good-h); border-top: 1px solid var(--c-border); } .ms-icon { font-weight: 700; font-size: 13px; line-height: 1.65; white-space: nowrap; color: var(--c-text); } .ms-text { min-width: 0; } .ms-text > p:first-child { margin-top: 0; } .ms-text > p:last-child { margin-bottom: 0; } .ms-text code { font-size: .9em; } /* ---------- FAQ：平铺问答 ---------- */ .faq-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 24px; } .faq-item { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } .faq-item:hover { box-shadow: var(--shadow-md); } .faq-q { margin: 0; padding: 11px 14px; font-weight: 600; font-size: 15px; color: var(--c-text); line-height: 1.55; border-bottom: 1px solid var(--c-border); background: var(--c-card-alt); } .faq-a { padding: 12px 14px; color: var(--c-text); font-size: 14.5px; line-height: 1.7; } .faq-a > p:first-child { margin-top: 0; } .faq-a > p:last-child { margin-bottom: 0; } .faq-a code { font-size: .9em; } /* ---------- 移动端：检查点单列 ---------- */ @media (max-width: 720px) { .checkpoint-grid { grid-template-columns: 1fr; } .checkpoint-card { padding-left: 52px; } } /* ---------- 打印：卡片保持完整 ---------- */ @media print { .checkpoint-card, .misconception-card, .faq-item { box-shadow: none; break-inside: avoid; } } /* ---------- dark 模式微调（卡片背景已用 token，badge 反色保持可读） ---------- */ :root[data-theme="dark"] .checkpoint-num { color: #0d1117; } /* 蓝 badge 上深色字更清晰 */ :root[data-theme="dark"] .ms-icon { opacity: .95; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checkpoint-num { color: #0d1117; } :root:not([data-theme="light"]) .ms-icon { opacity: .95; } } /* ============================================================ 移动端 + 无障碍审计修复（追加；2026-07） -------------------------------------------------------- audit: mobile (≤768px) - 表格：markdown 渲染的 未包 .table-wrap，宽表会挤压 单元格到不可读；追加 block + overflow-x 让小屏水平滚动。 - tap target：ds-chip / ds-reset / search-bar input / sidebar 链接原始高度 ~28-32px，低于 WCAG 2.5.5 推荐 44px；统一拉到 ≥40px（触屏可用阈值，兼顾信息密度）。 - search-bar：flex 单行在小屏会截断；改为 wrap，hint 换行。 - sidebar：900px 已转 relative；768px 再收紧 padding，让正文 更早进入视口（无 JS 折叠，padding 是纯 CSS 能做的极限）。 - SVG / figure：全局已有 max-width:100%，再加一层 .main 限定 保险，防止内联 style 透传。 a11y - .sr-only 工具类：HTML 暂未用，但提供后渲染器/未来页可立即用。 - .skip-link 容器样式：HTML 若加