/* ========================================================= Article Reading - Docsify 文章/内容页统一阅读系统 (P001) 依据: docs/_meta/ui-redesign/pages/01-mainline-article.md (权威) 继承: docs/_meta/HOMEPAGE_DESIGN_AND_IMPLEMENTATION.md (视觉母体, 不修改) 作用域: body.is-article (由 bootstrap.js 的路由状态插件在 doneEach 切换) 隔离: body.is-home (首页) 不命中本文件任何规则; 首页 V2 冻结不受影响 依赖: studio-tokens.css (只读取令牌, 不重新定义值) 原则: 只补齐文章页阅读外壳/排版/插件样式/响应式; 不改 Docsify 路由/插件/终端/搜索 注意: modern-theme.css 大量使用 !important, 本文件对应覆盖也使用 !important (与 homepage-v2.css 同样的覆盖策略), 仅作用域 body.is-article, 不污染首页 ========================================================= */ /* ========================================================= §1. 作用域守卫 + 基础 ========================================================= */ body.is-article { /* z-index 层级系统 */ --z-reading-progress: 121; --z-drawer-overlay: 800; --z-drawer: 900; --z-drawer-toggle: 950; --z-back-to-top: 998; --z-terminal-trigger: 999; --z-terminal-input-line: 1; background: var(--studio-paper-100) !important; color: var(--studio-text) !important; font-family: var(--studio-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ========================================================= §2. 顶部导航 (暖石墨, 规范 §3.1 / 设计契约 graphite topnav) 首页 V2 已用 body.is-home .app-nav 设深色; 文章页在此对齐深色导航 ========================================================= */ body.is-article .app-nav { background: var(--studio-ink-950) !important; border-bottom: 1px solid var(--studio-line-dark) !important; box-shadow: none !important; } body.is-article .nav-brand, body.is-article .nav-brand-mark { color: var(--studio-on-dark) !important; } body.is-article .nav-brand-sep, body.is-article .nav-brand-sub { color: var(--studio-on-dark-muted) !important; } body.is-article .app-nav .top-nav-link { color: var(--studio-on-dark-muted) !important; background: transparent !important; border-color: transparent !important; } body.is-article .app-nav .top-nav-link:hover { color: var(--studio-on-dark) !important; background: rgba(242, 239, 231, 0.08) !important; } /* 当前项 "知识库" 用旧金短线标记 (规范 §3.1 / §5.1) */ body.is-article .app-nav .top-nav-link[href="#/README"] { position: relative; color: var(--studio-gold) !important; } body.is-article .app-nav .top-nav-link[href="#/README"]::after { content: ""; position: absolute; right: 12px; bottom: -13px; left: 12px; height: 2px; background: var(--studio-gold); } body.is-article .nav-icon-btn { color: var(--studio-on-dark-muted) !important; background: transparent !important; border-color: transparent !important; } body.is-article .nav-icon-btn:hover { color: var(--studio-on-dark) !important; background: rgba(242, 239, 231, 0.08) !important; border-color: var(--studio-line-dark) !important; } body.is-article .nav-terminal-btn { color: var(--studio-on-dark-muted) !important; border-color: var(--studio-line-dark) !important; background: transparent !important; } body.is-article .nav-terminal-btn:hover { color: var(--studio-on-dark) !important; background: rgba(242, 239, 231, 0.06) !important; border-color: var(--studio-gold) !important; } /* 侧栏抽屉按钮 (窄屏出现): 在深色导航上保持可读 */ body.is-article .sidebar-toggle { background: var(--studio-ink-900) !important; border-color: var(--studio-line-dark) !important; } body.is-article .sidebar-toggle span { background-color: var(--studio-on-dark) !important; } /* ========================================================= §3. 左侧知识目录 (规范 §3.1 左栏 / §5.2) 复用 Docsify 原生 .sidebar + _sidebar.md 真实数据, 只重绘 ========================================================= */ body.is-article .sidebar { top: 60px !important; width: 280px !important; padding: 28px 22px 40px !important; background: var(--studio-paper-100) !important; border-right: 1px solid var(--studio-line-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 侧栏搜索框: 检索台 (P007 站内搜索结果体验, 规范 pages/07-search-results §3/§5) 不绑定 Ctrl/Cmd+K, 该快捷键只属于终端; 焦点=信号绿, 命中=旧金底+绿下划线 真实数据来源: Docsify Search 插件 .search / .results-panel / .matching-post / .empty 不伪造结果数量/耗时/领域筛选/最近搜索/搜索语法 (规范 §1/§2.3 真相来源) */ body.is-article .sidebar .search { margin: 0 0 18px !important; padding: 0 !important; border-bottom: 0 !important; } body.is-article .sidebar .search input { width: 100% !important; height: 44px !important; padding: 0 14px !important; border: 1px solid rgba(201, 195, 183, 0.45) !important; border-radius: var(--studio-radius-sm) !important; background: var(--studio-paper-50) !important; color: var(--studio-text) !important; font-size: 14px !important; font-family: var(--studio-font-body) !important; letter-spacing: 0 !important; box-shadow: none !important; overflow-wrap: anywhere !important; transition: border-color var(--studio-dur-fast) var(--studio-ease), box-shadow var(--studio-dur-fast) var(--studio-ease) !important; } /* 焦点=信号绿 (规范 §3.3 信号绿用于搜索输入焦点) */ body.is-article .sidebar .search input:focus { border-color: var(--studio-green) !important; box-shadow: 0 0 0 2px rgba(36, 209, 143, 0.18) !important; outline: none !important; } body.is-article .sidebar .search input::placeholder { color: var(--studio-text-muted) !important; } /* 结果项: 横向分隔线, 非卡片堆叠 (规范 §5.1 / §2.1) */ body.is-article .sidebar .search .matching-post { margin: 0 !important; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--studio-line-paper) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-wrap: anywhere !important; word-break: break-word !important; transition: background var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .sidebar .search .matching-post:hover { background: rgba(32, 33, 29, 0.03) !important; } /* 命中关键词: 低饱和旧金底 + 信号绿下划线, 文本保持墨色 (规范 §3.3) */ body.is-article .sidebar .search .search-keyword { color: var(--studio-text) !important; background: rgba(200, 169, 107, 0.22) !important; border-bottom: 1px solid rgba(36, 209, 143, 0.45) !important; padding: 0 2px !important; border-radius: 2px !important; font-weight: 500 !important; } /* 目录三级层次 (规范 §3.1): 一级大标题(计算机基础) > 二级小标题(编程语言) > 文章链接(Java 与 JVM) 嵌套 ul 一律零缩进, 层级完全由 padding-left 显式控制 (10 → 22 → 34px), 保证三级严格对齐 */ body.is-article .sidebar-nav { line-height: 1.5 !important; } body.is-article .sidebar-nav img.emoji { display: none !important; /* 隐藏 octicon/emoji 噪声, 编号由 _sidebar.md 文本承担 */ } body.is-article .sidebar-nav ul, body.is-article .sidebar-nav li { margin: 0 !important; padding: 0 !important; } body.is-article .sidebar-nav > ul > li { margin: 10px 0 16px !important; } /* 一级大标题 (如 "计算机基础") 与顶部入口 (首页/全站地图…): 字大加重 */ body.is-article .sidebar-nav > ul > li > p, body.is-article .sidebar-nav > ul > li > a { display: flex !important; align-items: center !important; min-height: 32px !important; margin: 0 0 6px !important; padding: 4px 10px !important; color: var(--studio-text) !important; font-family: var(--studio-font-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; border-radius: var(--studio-radius-sm) !important; background: transparent !important; border: 0 !important; } /* 二级小标题 (如 "编程语言"): 从大标题右移一档, 作为分组标签 */ body.is-article .sidebar-nav > ul > li > ul > li { position: relative !important; margin: 12px 0 14px !important; padding-left: 24px !important; } body.is-article .sidebar-nav > ul > li > ul > li::before { content: "" !important; position: absolute !important; top: 7px !important; bottom: 7px !important; left: 8px !important; width: 1px !important; border-radius: 999px !important; background: rgba(200, 169, 107, 0.38) !important; } body.is-article .sidebar-nav > ul > li > ul > li > p { position: relative !important; display: inline-flex !important; align-items: center !important; min-height: 26px !important; margin: 6px 0 8px 24px !important; padding: 2px 0 2px 18px !important; color: var(--studio-text-muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; cursor: pointer !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; text-transform: none !important; transition: color var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .sidebar-nav > ul > li > ul > li > p::before { content: "" !important; position: absolute !important; top: 50% !important; left: 6px !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: rgba(200, 169, 107, 0.6) !important; transform: translateY(-50%) !important; } body.is-article .sidebar-nav > ul > li > ul > li > p:hover { color: var(--studio-text) !important; } /* 目录文章链接 */ body.is-article .sidebar-nav a { display: block !important; padding: 5px 10px 5px 18px !important; border-radius: var(--studio-radius-sm) !important; color: var(--studio-text-muted) !important; background: transparent !important; border: 1px solid transparent !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; transition: color var(--studio-dur-fast) var(--studio-ease), background var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .sidebar-nav a:hover { color: var(--studio-text) !important; background: rgba(32, 33, 29, 0.04) !important; border-color: transparent !important; text-decoration: none !important; transform: none !important; } /* 二级文章链接 (直接挂在一级分类下的文章): 往右收一格, 但比中标题更轻 */ body.is-article .sidebar-nav > ul > li > ul > li > a { padding-left: 42px !important; color: var(--studio-text-muted) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* 三级文章链接 (如 "Java 与 JVM"): 再右移一档, 用更小的圆点区分 */ body.is-article .sidebar-nav > ul > li > ul > li > ul > li > a { position: relative !important; padding-left: 48px !important; color: var(--studio-text-muted) !important; font-size: 12.5px !important; line-height: 1.45 !important; } body.is-article .sidebar-nav > ul > li > ul > li > ul > li > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 24px !important; width: 4px !important; height: 4px !important; border-radius: 999px !important; background: currentColor !important; opacity: 0.26 !important; transform: translateY(-50%) !important; transition: opacity var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .sidebar-nav > ul > li > ul > li > ul > li > a:hover::before { opacity: 0.5 !important; } /* 四级: subMaxLevel 在当前文章下注入的页内目录 (.app-sub-sidebar), 再进一档; 去掉 Docsify 默认 "-" 前缀, 层级只靠缩进表达 */ body.is-article .sidebar-nav .app-sub-sidebar li::before { content: none !important; } body.is-article .sidebar-nav .app-sub-sidebar a { padding-left: 34px !important; font-size: 12px !important; } /* 当前文档: 旧金书签强调 (规范 §3.1 / §5.2); border-left 占 2px, padding-left 各档减 2px, 保证当前项文字与其余项严格对齐 */ body.is-article .sidebar-nav .active, body.is-article .sidebar-nav li.active > a { color: var(--studio-text) !important; background: rgba(200, 169, 107, 0.14) !important; border-left: 2px solid var(--studio-gold) !important; font-weight: 600 !important; } body.is-article .sidebar-nav li.active > a { padding-left: 16px !important; } body.is-article .sidebar-nav > ul > li > ul > li.active > a { padding-left: 42px !important; } body.is-article .sidebar-nav > ul > li > ul > li > ul > li.active > a { padding-left: 48px !important; } /* ========================================================= §4. 内容区布局 (三栏平铺 grid: 侧栏 + 正文 + 右栏 TOC) 原生文档流三栏: 嵌套 CSS grid, 三栏全部入流 (取代 fixed/absolute + 浮动卡片) 栏间 1px 分隔线, 无卡片/阴影/圆角浮层 (参考 image-01.png, 规范 §2.5/§5) 实测 DOM (无 #app 挂载点): body > main > (.sidebar-toggle[fixed] + aside.sidebar + section.content) .content > (aside.toc-nav + article#main) ← TOC 插件插在 .content 内 Gitalk 容器由 bootstrap.js 注入 article#main 尾部(见 §12), 不参与本网格 故采用嵌套 grid: main 两轨 [侧栏|中栏], .content 内两轨 [正文|TOC] main 选择器用 body > main: md/Index.md 内嵌
自带 grid, 不能误伤 外壳全宽铺满 (2026-08-25 需求变更): 三栏撑满视口, 左右不再露出 body 底色, 取代原 1584px 居中外壳 (--shell-max-width); 顶栏本就全出血, 无需联动 ========================================================= */ /* :not(.sm-main) 仅用于提升特异性, 压过 §20 同优先级的 body.is-article main{max-width:100%} (.sm-main 是文章内嵌元素, 本就不可能是 body 直接子元素) */ body.is-article > main:not(.sm-main) { display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important; column-gap: 0 !important; max-width: 100% !important; /* 全宽铺满: 侧栏贴左缘, TOC 贴右缘 */ margin: 0 auto !important; padding-top: 60px; /* 顶部导航占位, 从 .content 上移到 main */ height: auto !important; /* 解 vue.css main{height:100%} —— 否则 main 仅视口高, sticky 被限制在 900px 盒内失效 */ overflow: visible !important; /* 解 vue.css main{overflow:hidden} —— sticky 成立前提 */ overflow-x: clip !important; /* 保留 §20 缺陷#3 横向裁剪 (clip 不建滚动容器) */ background: var(--studio-paper-100) !important; } /* 左栏: sticky 入流 (定位属性覆盖 vue.css/modern-theme 的 fixed) */ body.is-article .sidebar { grid-column: 1; position: sticky !important; left: auto !important; bottom: auto !important; height: calc(100vh - 60px) !important; /* 移动端地址栏收放会改变 vh 导致侧栏跳动; dvh 为动态视口高度, 不支持的浏览器忽略本行 */ height: calc(100dvh - 60px) !important; overflow-y: auto !important; border-left: 0 !important; /* 抵消 modern-theme shell 块 border-left */ z-index: 2; /* close 过渡期间压在中栏之上 */ } /* 中栏: 阅读面整列 paper-50, 随 grid stretch 满行高; 卡片感消除 (§5 透明化配合) 自身为嵌套 grid: [正文 | TOC] 两轨, TOC 空态 (.nothing) 时 auto 轨自动塌 */ body.is-article .content { grid-column: 2; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 0 !important; position: static !important; /* 覆盖 vue.css absolute, 旧 left/right 全部 inert */ top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; min-width: 0; /* grid 防溢出, 等价 flex 的 min-width:0 */ padding-top: 0 !important; /* 60px 已上移 main */ background: var(--studio-paper-50) !important; min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); } /* 正文列: article / Gitalk / 分页等 .content 直接子元素全部进第 1 轨 */ body.is-article .content > * { grid-column: 1; min-width: 0; } /* 正文钉第 1 行: toc-nav 在 DOM 中先于 article, 网格自动放置时游标列从 2 回退到 1 会触发行递增, 把 article 推到第 2 行 (行高=TOC 视口高), 形成中栏顶部整屏空白。 用 [id] 属性选择器保持类级特异性, 避免 #main ID 提权压死移动端覆盖 (§5 同款顾虑) */ body.is-article .content > article[id="main"] { grid-row: 1; } /* TOC 列: 第 2 轨, 纵跨全部内容行 (定位与视觉见 §11); 跨行使 sticky 在整篇文档滚动行程内持续吸附, 而非只在第 1 行高度内有效 */ body.is-article .content > .toc-nav { grid-column: 2; grid-row: 1 / span 10; } body.is-article .content > #main { grid-row: 1; } body.is-article .content > .toc-nav { grid-row: 1; } /* ========================================================= §5. 阅读面 (规范 §5.3) 三栏平铺: paper-50 阅读面由 .content 整列承担 (§4), 此处只控行宽与排版, 背景透明 + 零边框, 消除卡片感 (参考 image-01.png) ========================================================= */ /* 注意: 不要在此加 #main 提权 —— ID 特异性 (1,1,1) 会压死 §14/§17 全部移动端 max-width/padding 覆盖 (0,1,2), 导致 ≤1024px 视口阅读面保持桌面 820px+36px 内边距而横向溢出 (实测 390px 视口 ms 宽 460px, 文字被 overflow-x:clip 切断). 本规则 (0,1,2) 已足够压 modern-theme .markdown-section (0,1,0) 的 860px/64px。 */ body.is-article .markdown-section { max-width: 820px !important; margin: 0 auto !important; padding: 44px 36px 96px !important; background: transparent !important; color: var(--studio-text) !important; font-size: 16px !important; line-height: 1.82 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } /* "编辑此页" 入口 (Docsify 插件注入 .markdown-section 顶部) */ body.is-article .markdown-section > .edit-page-link { margin: 0 0 24px !important; max-width: none !important; text-align: right !important; } body.is-article .edit-page-link a { display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: 4px 10px !important; color: var(--studio-text-muted) !important; background: var(--studio-paper-100) !important; border: 1px solid var(--studio-line-paper) !important; border-radius: var(--studio-radius-sm) !important; font-size: 12px !important; font-family: var(--studio-font-mono) !important; font-weight: 500 !important; text-decoration: none !important; box-shadow: none !important; transition: color var(--studio-dur-fast) var(--studio-ease), border-color var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .edit-page-link a:hover { color: var(--studio-text) !important; border-color: var(--studio-gold) !important; text-decoration: none !important; } /* ========================================================= §6. 排版层级: 衬线标题 / 无衬线正文 / 等宽元信息 (规范 §2.4 / §5.3) ========================================================= */ body.is-article .markdown-section h1, body.is-article .markdown-section h2, body.is-article .markdown-section h3, body.is-article .markdown-section h4, body.is-article .markdown-section h5, body.is-article .markdown-section h6 { font-family: var(--studio-font-display) !important; color: var(--studio-text) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3 !important; border: 0 !important; margin-top: 1.8em !important; margin-bottom: 0.6em !important; } /* 层级靠字阶+留白区分, 不用下划线 (参考 image-01.png, 规范 §5.3: H1 44-48/1.18) */ body.is-article .markdown-section h1 { font-size: 44px !important; line-height: 1.18 !important; margin-top: 0.2em !important; margin-bottom: 0.55em !important; padding-bottom: 0 !important; border-bottom: 0 !important; } body.is-article .markdown-section h2 { font-size: 26px !important; line-height: 1.35 !important; margin-top: 40px !important; /* 规范 §5.3: H2 上边距 36-44px */ padding-bottom: 0 !important; border-bottom: 0 !important; } body.is-article .markdown-section h3 { font-size: 21px !important; line-height: 1.4 !important; margin-top: 32px !important; /* 规范 §5.3: H3 上边距 28-34px */ } body.is-article .markdown-section h4 { font-size: 17px !important; margin-top: 1.5em !important; /* 不再用 muted: 标题是层级信号, 不是辅助文字 */ } body.is-article .markdown-section h5, body.is-article .markdown-section h6 { font-size: 15px !important; font-family: var(--studio-font-body) !important; /* 深层级退回无衬线, 避免过小衬线发虚 */ } /* 标题锚点: Docsify 把标题【全文】包进 标题文字, 必须 color:inherit + 去下划线, 否则整行标题被刷成旧金(1.9:1 不可读)并带金色下划线 (此处特异性需压过 §6 正文链接的 a{border-bottom:1px gold}, 故逐标签列全 h1-h6) */ body.is-article .markdown-section h1 .anchor, body.is-article .markdown-section h2 .anchor, body.is-article .markdown-section h3 .anchor, body.is-article .markdown-section h4 .anchor, body.is-article .markdown-section h5 .anchor, body.is-article .markdown-section h6 .anchor { color: inherit !important; border-bottom: 0 !important; text-decoration: none !important; } body.is-article .markdown-section h1 .anchor span, body.is-article .markdown-section h2 .anchor span, body.is-article .markdown-section h3 .anchor span, body.is-article .markdown-section h4 .anchor span, body.is-article .markdown-section h5 .anchor span, body.is-article .markdown-section h6 .anchor span { color: inherit !important; } body.is-article .markdown-section h1 .anchor:hover, body.is-article .markdown-section h2 .anchor:hover, body.is-article .markdown-section h3 .anchor:hover, body.is-article .markdown-section h4 .anchor:hover, body.is-article .markdown-section h5 .anchor:hover, body.is-article .markdown-section h6 .anchor:hover { color: inherit !important; /* 压 §6 a:hover 的信号绿, 标题 hover 不变色 */ border-bottom: 0 !important; } body.is-article .markdown-section p, body.is-article .markdown-section li { font-family: var(--studio-font-body) !important; font-size: 16px !important; line-height: 1.82 !important; color: var(--studio-text) !important; } body.is-article .markdown-section p { margin: 0 0 1em !important; } body.is-article .markdown-section strong { color: var(--studio-text) !important; font-weight: 600 !important; } body.is-article .markdown-section a { color: var(--studio-text) !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--studio-gold) !important; text-decoration: none !important; text-underline-offset: 3px !important; font-weight: 500 !important; transition: color var(--studio-dur-fast) var(--studio-ease), border-color var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .markdown-section a:hover { color: var(--studio-green-ink) !important; border-bottom-color: var(--studio-green-ink) !important; text-decoration: none !important; } /* ========================================================= §7. 行内代码 + 代码块 (终端化深墨, 规范 §5.4) ========================================================= */ body.is-article .markdown-section code, body.is-article .markdown-section pre code { font-family: var(--studio-font-mono) !important; font-size: 13px !important; } /* 行内代码: 纸面打字机感 */ body.is-article .markdown-section :not(pre) > code { background: var(--studio-paper-100) !important; color: var(--studio-text) !important; /* 参考 image-01.png: 墨色等宽+浅纸底, 不用朱砂 */ padding: 1px 5px !important; border-radius: var(--studio-radius-sm) !important; border: 1px solid var(--studio-line-paper) !important; font-size: 0.88em !important; font-weight: 500 !important; } /* 代码块: 终端化深墨, 圆角, 不要红黄绿窗口点 (规范 §5.4) */ body.is-article .markdown-section pre { background: var(--studio-ink-900) !important; color: var(--studio-on-dark) !important; /* pre 自身也要指定等宽栈: vue.css 给 pre 设的是 "Roboto Mono", Monaco, courier —— Roboto Mono 由 fonts.gstatic.com 提供(国内不可靠), 失败后会退到 Windows 的 courier。复制按钮与 pre 内的非 code 文本都继承此字体, 故在这里统一, 使整块代码区与行内代码使用同一套系统等宽字体。 */ font-family: var(--studio-font-mono) !important; border-radius: var(--studio-radius-md) !important; border: 1px solid var(--studio-line-dark) !important; padding: 42px 22px 18px !important; /* 顶部 42px 给复制按钮 (规范 §5.4: 36-42px), 防压首行代码 */ overflow-x: auto !important; font-size: 13px !important; line-height: 1.65 !important; box-shadow: none !important; margin: 1.5em 0 !important; } body.is-article .markdown-section pre code { color: inherit !important; background: transparent !important; padding: 0 !important; border: 0 !important; font-size: 13px !important; line-height: 1.65 !important; } /* Prism 语法高亮: 深墨底上的书房信号色 (规范 §4.4 色板, 只读取令牌) */ body.is-article .markdown-section pre .token.comment, body.is-article .markdown-section pre .token.prolog, body.is-article .markdown-section pre .token.cdata { color: var(--studio-on-dark-muted) !important; font-style: italic; } body.is-article .markdown-section pre .token.keyword, body.is-article .markdown-section pre .token.tag, body.is-article .markdown-section pre .token.important, body.is-article .markdown-section pre .token.atrule, body.is-article .markdown-section pre .token.rule, body.is-article .markdown-section pre .token.selector { color: var(--studio-green) !important; } body.is-article .markdown-section pre .token.string, body.is-article .markdown-section pre .token.char, body.is-article .markdown-section pre .token.attr-value, body.is-article .markdown-section pre .token.regex { color: var(--studio-gold) !important; } body.is-article .markdown-section pre .token.number, body.is-article .markdown-section pre .token.boolean, body.is-article .markdown-section pre .token.constant, body.is-article .markdown-section pre .token.symbol, body.is-article .markdown-section pre .token.unit { color: var(--studio-cyan) !important; } body.is-article .markdown-section pre .token.function, body.is-article .markdown-section pre .token.class-name, body.is-article .markdown-section pre .token.namespace, body.is-article .markdown-section pre .token.builtin { color: var(--studio-focus) !important; } body.is-article .markdown-section pre .token.attr-name, body.is-article .markdown-section pre .token.property, body.is-article .markdown-section pre .token.annotation, body.is-article .markdown-section pre .token.decorator { color: var(--studio-rust) !important; } body.is-article .markdown-section pre .token.operator, body.is-article .markdown-section pre .token.punctuation, body.is-article .markdown-section pre .token.entity, body.is-article .markdown-section pre .token.url { color: var(--studio-on-dark-muted) !important; background: transparent !important; } body.is-article .markdown-section pre .token.variable { color: var(--studio-on-dark) !important; } body.is-article .markdown-section pre .token.inserted { color: var(--studio-green) !important; } body.is-article .markdown-section pre .token.deleted { color: var(--studio-vermilion) !important; } /* docsify-copy-code 插件按钮: 右上角可见 (规范 §5.4) */ body.is-article .markdown-section .docsify-copy-code-button, body.is-article .markdown-section pre[data-lang] + .docsify-copy-code-button, body.is-article .markdown-section pre + button.docsify-copy-code-button { right: 6px !important; top: 6px !important; height: 28px !important; padding: 0 8px !important; border-radius: var(--studio-radius-sm) !important; background: rgba(242, 239, 231, 0.08) !important; color: var(--studio-on-dark-muted) !important; border: 1px solid var(--studio-line-dark) !important; font-family: var(--studio-font-mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; cursor: pointer !important; transition: background var(--studio-dur-fast) var(--studio-ease), color var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .markdown-section .docsify-copy-code-button:hover { background: rgba(242, 239, 231, 0.16) !important; color: var(--studio-on-dark) !important; } body.is-article .markdown-section .docsify-copy-code-button:focus-visible { outline: 2px solid var(--studio-focus) !important; outline-offset: 1px !important; } /* 触屏设备无 hover 能力: 插件靠 `pre:hover .docsify-copy-code-button { opacity:1 }` 才显形, 触屏下按钮将永远 opacity:0 —— 不可见却仍可点中的"隐形按钮"。 此处让粗指针设备常驻显示复制按钮(保留桌面端 hover 显形的克制观感)。 */ @media (hover: none), (pointer: coarse) { body.is-article .markdown-section .docsify-copy-code-button, body.is-article .markdown-section pre:hover .docsify-copy-code-button { opacity: 1 !important; } } /* Mermaid 图: 纸白底, 不被深色代码样式误伤 (规范 §5.4) */ body.is-article .markdown-section .mermaid, body.is-article .markdown-section div.mermaid { background: var(--studio-paper-50) !important; border: 1px solid var(--studio-line-paper) !important; border-radius: var(--studio-radius-md) !important; padding: 18px !important; margin: 1.5em 0 !important; text-align: center !important; box-shadow: none !important; } body.is-article .markdown-section .mermaid + figcaption, body.is-article .markdown-section p > em:only-child { display: block; text-align: center; color: var(--studio-text-muted) !important; font-size: 13px !important; font-family: var(--studio-font-mono) !important; margin-top: -0.6em; margin-bottom: 1.4em; } /* kbd 键盘样式 */ body.is-article .markdown-section kbd { border: 1px solid var(--studio-line-paper) !important; background: var(--studio-paper-100) !important; color: var(--studio-text) !important; border-radius: var(--studio-radius-sm) !important; font-family: var(--studio-font-mono) !important; font-size: 12px !important; } /* ========================================================= §8. 引用 / 提示 / 警告 (规范 §6 写作规范 + §5.3) - 默认引用: 旧金左线 (手稿感) - > 💡 补充：AI 补充背景知识 -> 浅金底 - ⚠️ 已过时 / ⛔ 重要提示 -> 朱砂左线 ========================================================= */ body.is-article .markdown-section blockquote { margin: 1.4em 0 !important; padding: 10px 18px !important; border: 0 !important; border-left: 3px solid var(--studio-gold) !important; background: var(--studio-paper-100) !important; color: var(--studio-text-muted) !important; font-size: 15px !important; line-height: 1.75 !important; border-radius: 0 var(--studio-radius-sm) var(--studio-radius-sm) 0 !important; box-shadow: none !important; } body.is-article .markdown-section blockquote p { color: var(--studio-text-muted) !important; font-size: 15px !important; margin: 0.4em 0 !important; } body.is-article .markdown-section blockquote p:first-child { margin-top: 0 !important; } body.is-article .markdown-section blockquote p:last-child { margin-bottom: 0 !important; } /* 引用内长链接/路径换行, 避免撑破窄屏 (归档来源链接常见) */ body.is-article .markdown-section blockquote a { overflow-wrap: anywhere !important; word-break: break-all !important; } /* 引用内二级标题 (如 ⛔ 重要提示) */ body.is-article .markdown-section blockquote h2, body.is-article .markdown-section blockquote h3 { margin-top: 0.6em !important; font-size: 16px !important; } /* AI 补充标记 "> 💡 补充：..." 与 ⚠️ 已过时 / ⛔ 标记: CSS 无法匹配文本内容, 故两类标记统一走默认旧金引用样式; 其语义由 Markdown 中的 emoji 与文字本身承担 (规范 §6 第6/7条). 过时分类 (08-过时技术) 的 H1 含 "⚠️ 已过时" 文字, 视觉已足够区分. */ /* ========================================================= §9. 表格: 纸面编目, 横线为主, 防溢出 (规范 §5.3) ========================================================= */ body.is-article .markdown-section table { display: block !important; width: 100% !important; overflow-x: auto !important; border-collapse: collapse !important; border-spacing: 0 !important; margin: 1.5em 0 !important; font-size: 14.5px !important; background: var(--studio-paper-50) !important; border: 1px solid var(--studio-line-paper) !important; border-radius: var(--studio-radius-sm) !important; box-shadow: none !important; } body.is-article .markdown-section th, body.is-article .markdown-section td { padding: 9px 13px !important; border-bottom: 1px solid var(--studio-line-paper) !important; border-top: 0 !important; text-align: left !important; vertical-align: top !important; } body.is-article .markdown-section th { font-family: var(--studio-font-body) !important; font-weight: 600 !important; color: var(--studio-text) !important; background: var(--studio-paper-100) !important; border-bottom: 2px solid var(--studio-paper-line) !important; font-size: 13px !important; letter-spacing: 0.02em !important; text-transform: none !important; } body.is-article .markdown-section td { color: var(--studio-text) !important; } body.is-article .markdown-section tr:last-child td { border-bottom: 0 !important; } /* 取消斑马纹和 hover 蓝底, 改为极轻纸纹 */ body.is-article .markdown-section table tr:nth-child(even) { background: rgba(32, 33, 29, 0.02) !important; } body.is-article .markdown-section table tr:hover { background: rgba(200, 169, 107, 0.08) !important; } /* 修改记录表: 文末最后一个表格, 用旧金标签感 (规范 §7 / §5.6) 通过 :has(> caption) 或紧跟 ## 修改记录 标题的表格识别. Docsify 不生成 caption, 此处用通用表格样式 + 文末 hr 分隔即可, 不强制视觉区分, 避免误伤正文表格. */ /* ========================================================= §10. 水平线 / 图片 / 列表 (规范 §5.3) ========================================================= */ body.is-article .markdown-section hr { border: 0 !important; border-top: 1px solid var(--studio-paper-line) !important; margin: 2.4em 0 !important; background: transparent !important; height: 1px !important; } body.is-article .markdown-section img { max-width: 100% !important; height: auto !important; border-radius: var(--studio-radius-md) !important; border: 1px solid var(--studio-line-paper) !important; display: block !important; margin: 1.4em auto !important; box-shadow: none !important; transition: transform var(--studio-dur-base) var(--studio-ease) !important; } body.is-article .markdown-section img:hover { transform: none !important; box-shadow: none !important; } body.is-article .markdown-section ul, body.is-article .markdown-section ol { padding-left: 1.6em !important; margin: 0.8em 0 1.2em !important; } body.is-article .markdown-section li { margin: 0.3em 0 !important; } body.is-article .markdown-section li::marker { color: var(--studio-gold) !important; } /*
折叠区 (README 快速导航用) */ body.is-article .markdown-section details { margin: 1.2em 0 !important; padding: 12px 16px !important; background: var(--studio-paper-100) !important; border: 1px solid var(--studio-line-paper) !important; border-radius: var(--studio-radius-sm) !important; box-shadow: none !important; } body.is-article .markdown-section details summary { color: var(--studio-text) !important; font-weight: 600 !important; font-family: var(--studio-font-body) !important; cursor: pointer !important; } body.is-article .markdown-section details[open] summary { margin-bottom: 10px !important; color: var(--studio-text) !important; } /* ========================================================= §11. 右栏: 本页目录 TOC (规范 §3.1 右栏 / §5.5) docsify-plugin-toc (v1.3.1) 真实 DOM: main > aside.toc-nav > div.page_toc > div.lv2/lv3/lv4 > a.anchor 插件在 .page_toc > div 上滚动监听并切换 .active。 右栏只显示本页目录; 无真实页边批注数据源时保持留白, 不伪造。 ========================================================= */ body:not(.is-article) .toc-nav, body.is-article[data-page="md/Index.md"] .toc-nav { display: none !important; } /* 三栏平铺: TOC 入文档流作右栏 (.content 嵌套 grid 第 2 轨, 见 §4), sticky 钉住; 去浮卡四件套 (背景/边框/圆角/z-index), 仅留 border-left 分隔线; 高度撑满视口, 分隔线贯通全屏 (参考 image-01.png) */ body.is-article .toc-nav { position: sticky !important; right: auto !important; top: 84px !important; width: 240px !important; height: calc(100vh - 84px) !important; height: calc(100dvh - 84px) !important; padding: 16px 16px 12px !important; overflow-y: auto !important; background: transparent !important; border: 0 !important; border-left: 1px solid var(--studio-line-paper) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--studio-font-body) !important; z-index: auto !important; scrollbar-width: thin; scrollbar-color: rgba(32, 33, 29, 0.14) transparent; } body.is-article .toc-nav::-webkit-scrollbar { width: 4px; } body.is-article .toc-nav::-webkit-scrollbar-track { background: transparent; } body.is-article .toc-nav::-webkit-scrollbar-thumb { background: rgba(32, 33, 29, 0.14); border-radius: 2px; } body.is-article .toc-nav::-webkit-scrollbar-thumb:hover { background: rgba(32, 33, 29, 0.24); } /* 空目录(无 h2/h3/h4)时隐藏右栏, 不留空白大栏 */ body.is-article .toc-nav.nothing { display: none !important; } /* 目录标题: "本页目录" + 旧金短线 (规范 §5.5) */ body.is-article .toc-nav::before { content: "本页目录"; display: block !important; margin: 0 0 10px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--studio-line-paper) !important; background: linear-gradient(var(--studio-gold), var(--studio-gold)) left bottom / 36px 2px no-repeat !important; color: var(--studio-text) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* 重置插件内层 .page_toc 的 fixed/白色/模糊等样式(原 modern-theme 遗留) */ body.is-article .toc-nav .page_toc { position: static !important; width: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 目录条目行: 左侧透明竖条, active 时旧金高亮 */ body.is-article .toc-nav .page_toc > div { border-left: 2px solid transparent !important; border-radius: 0 var(--studio-radius-sm) var(--studio-radius-sm) 0 !important; } body.is-article .toc-nav .page_toc > div > a { display: block !important; padding: 5px 8px 5px 10px !important; color: var(--studio-text-muted) !important; background: transparent !important; border-bottom: 0 !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; text-decoration: none !important; transition: color var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .toc-nav .page_toc > div > a:hover { color: var(--studio-text) !important; } body.is-article .toc-nav .page_toc > div.active { background: rgba(200, 169, 107, 0.1) !important; border-left-color: var(--studio-gold) !important; } body.is-article .toc-nav .page_toc > div.active > a { color: var(--studio-text) !important; font-weight: 600 !important; } /* TOC 条目的内层 必须显式继承父级 的颜色。 插件把条目文本渲染为 `a.anchor > span`, 而 modern-theme.css 有 `.anchor span { color: var(--notion-primary) !important }` —— 它作用在 上, 是「直接声明」, 永远压过从 继承来的颜色(继承值不参与特异性比较)。 正文标题已在 §标题锚点 用 `h1..h6 .anchor span` 覆盖, 但 TOC 不在 .markdown-section 内, 不受那条保护, 于是 94 处条目文字泄漏成紫色(#6d4aff, 纸白底 4.45:1)。 用 inherit 一条即可覆盖常态/hover/active 三种状态, 无需逐态复写。 */ body.is-article .toc-nav .page_toc > div > a.anchor > span { color: inherit !important; } /* 三级/四级缩进, 字号递减 */ body.is-article .toc-nav .page_toc > div.lv3 > a { padding-left: 22px !important; font-size: 12.5px !important; } body.is-article .toc-nav .page_toc > div.lv4 > a { padding-left: 34px !important; font-size: 12px !important; } /* ========================================================= §12. 分页 / Gitalk / 页脚 (规范 §5.6) ========================================================= */ body.is-article .pagination-item { margin: 10px 4px !important; padding: 12px 16px !important; border: 1px solid var(--studio-line-paper) !important; border-radius: var(--studio-radius-sm) !important; background: var(--studio-paper-50) !important; color: var(--studio-text) !important; box-shadow: none !important; transition: border-color var(--studio-dur-fast) var(--studio-ease), background var(--studio-dur-fast) var(--studio-ease) !important; } body.is-article .pagination-item:hover { transform: none !important; border-color: var(--studio-gold) !important; background: var(--studio-paper-100) !important; box-shadow: none !important; } body.is-article .pagination-item a { color: var(--studio-text) !important; border: 0 !important; } /* Gitalk 评论: 纸白风格, 不遮挡正文 (规范 §5.6) 容器由 bootstrap.js 注入 #main 内部(尾部), 宽度即正文列内容宽 —— 不再由 JS 读 #main.clientWidth 计算(旧做法每次 doneEach/resize 强制重排), 也不再是 .content 的 grid item, 故此处无需再声明宽度 */ body.is-article .gitalk-container { width: auto !important; margin: 32px 0 0 !important; padding: 20px 0 !important; box-sizing: border-box; } body.is-article .markdown-section .gitalk-container .gt-btn { border-radius: var(--studio-radius-sm) !important; } /* Docsify 页脚插件注入的