/* ================================================================== pages/library.css — 资料库（左侧目录 + 右侧预览/文献列表） ------------------------------------------------------------------ 依赖 static/base.css（公共层，唯一视觉来源）： · 版心与页头：.page-container/.page-head/.page-title/.page-subtitle · 卡片家族：.preview-card（预览卡：白底 + 细边 + 圆角 + 阴影） · 按钮：.btn/.btn-primary/.btn-outline/.btn-sm（下载、文献翻译、目录空态） · 徽标：.chip（文献标签）· 空态 .g-empty/.g-empty-icon/.g-empty-title/.g-empty-desc · 骨架：.g-skeleton/.g-skeleton-card · 错误条：.g-error · 状态：.toast（阴影/居中/时长，需 JS 补 .show 才可见） · 横滚壳：.tabs（position:relative + .has-scroll 右缘渐隐，类由 fx.js 挂） · 文本工具：.text-mute/.text-xs；焦点环由 base 的 :focus-visible 统一提供 纪律（《前端显示优化方案_20260925.md》§3/§9）： 1. 无强制覆盖（important 关键字 0 处），不重复定义 base 已有的组件； 2. 无字面色值，颜色一律 var(--g-*)； 3. 字号一律走 --g-fs-*（最小 12.5px），标签类不低于 12.5px； 4. 不声明 outline，焦点样式全交 base.css； 5. 不改 HTML 既有 class 名与任何 id（页内 JS 依赖），只补布局类。 本页修：4-9 旧蓝残留（下载键/文献左轨/DOI 链接的旧蓝 → --g-primary/--g-info）、 4-15 键盘可达（树行/分类行/文献行由 div+onclick 改 button 或补 role+键盘）、 4-16 对比度（旧灰蓝小字 → --g-mute，纯装饰箭头留 --g-mute-2）、 4-20 窄屏（Tab 提到侧栏外做横向条、侧栏单独限高、列表行允许换行）、 4-27 字阶（卡片标题 16px 不小于正文、标签 12.5px）。 ================================================================== */ /* ---------- 1. 页面骨架 ---------- */ body[data-page="library"] { display: flex; flex-direction: column; min-height: 100vh; /* 降级：不支持 dvh 的浏览器 */ min-height: 100dvh; /* 移动端地址栏收展时页脚仍贴底 */ } .page-container { flex: 1 1 auto; } /* 主栅格：桌面「左栏（Tab 条 + 目录卡）／右栏（内容）」。 Tab 条在 DOM 上是 .main-layout 的直接子项而不是 .sidebar 的子项—— 这样窄屏才能把它提到侧栏之外变成横向条，侧栏与内容不再共用一块滚动区（4-20）。 */ .main-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "tabs content" "side content"; gap: var(--g-sp-4); align-items: start; } .tab-bar { grid-area: tabs; } .sidebar { grid-area: side; } .content { grid-area: content; } /* ---------- 2. Tab 条：分段控件；窄屏转横向可滚条（第 8 段） ---------- base 提供 .tab-btn 结构基线（并档第二批），这里只留 library 的"分段式"差异： 等宽拉伸、紧凑内距、active 渐变白字（admin 是文件夹式，两种皮肤并存）。 .tab-bar 的网格定位（grid-area: tabs）见第 1 段。 */ .tab-bar { display: flex; gap: 2px; padding: 3px; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-r-md); box-shadow: var(--g-sh-sm); scrollbar-width: none; /* 窄屏横滚不显滚动条（与 .nav-links 一致） */ } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { flex: 1 1 0; min-width: 0; padding: 6px var(--g-sp-1); } .tab-btn.active { background: var(--g-grad); color: var(--g-on-primary); box-shadow: var(--g-sh-primary); } /* 面板显隐机制走 base 的 .tab-panel（并档第二批），本页不再重复 */ /* ---------- 3. 左侧栏卡 ---------- */ .sidebar { min-width: 0; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-r-lg); box-shadow: var(--g-sh-sm); overflow-x: hidden; overflow-y: auto; /* 目录自己滚：不把内容区顶长 */ overscroll-behavior: contain; /* 滚到底不带动整页 */ } /* 桌面：目录卡吸住并限高（比视口矮一截时不会再被拉成整页高） */ @media (min-width: 861px) { .sidebar { position: sticky; top: calc(var(--g-nav-h) + var(--g-sp-4)); max-height: calc(100vh - var(--g-nav-h) - var(--g-sp-6)); max-height: calc(100dvh - var(--g-nav-h) - var(--g-sp-6)); } } /* ---------- 4. 侧栏区头 + 资料目录树 ---------- */ .tree-header, .side-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-2); padding: var(--g-sp-3); background: var(--g-surface); border-bottom: 1px solid var(--g-line-2); color: var(--g-ink-2); font-size: var(--g-fs-sm); font-weight: 700; } .side-count { color: var(--g-mute); font-size: var(--g-fs-xs); font-weight: 400; } /* 留出左右 8px：行的焦点环（base 的 :focus-visible，2px + 2px 偏移）不被卡片圆角裁掉 */ #tree-container, #final-tree-container, #topic-tree { padding: 0 var(--g-sp-2) var(--g-sp-2); } /* 目录行：