/* ========================================================================== 「单词」主场 · /vocabulary 规格真相源:docs/VOCABULARY_SYSTEM_DESIGN.md §4–§6 / §8 / §9 (几何/字号/文案照抄,不自创;释义体例见 docs/VOCABULARY_GLOSS_PRESENTATION.md) 颜色只用 design-tokens.css 的 --dl-*;唯一例外 = §4.4 单词本 5 色板(--wb-c1..5) 与 §5.1 指定的遮罩值。**全文件不得出现 inset Npx 0 0 <色> 或 border-left: Npx solid <色>** —— §1.6 全面禁止标签左侧颜色竖条,选中态只用底色 + 词头字重。动效:悬停瞬时(--dl-t-hover = 0);列表/详情切换 120/80ms(§8); prefers-reduced-motion 下全部归零。 ========================================================================== */ :root { /* §4.4 色板(唯一真相源,低饱和不艳丽);--wb-t* = 同色 8% 淡底,只用于选中 chip */ --wb-c1: #4A6A8A; --wb-c2: #4F7561; --wb-c3: #A0755C; --wb-c4: #6E6A8C; --wb-c5: #94564E; --wb-t1: rgba(74, 106, 138, .08); --wb-t2: rgba(79, 117, 97, .08); --wb-t3: rgba(160, 117, 92, .08); --wb-t4: rgba(110, 106, 140, .08); --wb-t5: rgba(148, 86, 78, .08); } .vocab-c1 { --wb: var(--wb-c1); --wb-t: var(--wb-t1); } .vocab-c2 { --wb: var(--wb-c2); --wb-t: var(--wb-t2); } .vocab-c3 { --wb: var(--wb-c3); --wb-t: var(--wb-t3); } .vocab-c4 { --wb: var(--wb-c4); --wb-t: var(--wb-t4); } .vocab-c5 { --wb: var(--wb-c5); --wb-t: var(--wb-t5); } /* style.css:494 给加了 overflow-y: auto(注释写「防止滚动条导致的内容位移」, 但 html 的 overflow-y: scroll 已经做到了这件事)。它让 body 成为滚动容器, 页内一切 position: sticky; bottom: 0 都不再吸附(实测:资源库入口条掉到文末)。只在有本页时还原成默认值;:has 不支持的浏览器里入口条退化成列表末尾一行,不报错。 */ /* 页面底改浅灰(§18.6.1):区分靠「白面板浮起来」,不靠颜色。零新颜色,用既有令牌。底色挂在 body 上(而非 .vocab-page)才能铺满视口 gutter,否则灰只占内容宽度。主选择器 = 模板经 base.html 的 {% block body_class %} 挂上的类(确定性、无浏览器条件); :has() 那条只作兜底,不支持它的浏览器不会整页退回白底。 */ body.has-vocab-page, body:has(.vocab-page) { overflow-y: visible; background: var(--dl-surface-2); } body.vocab-locked { overflow: hidden; } /* 分段面板显隐(§18.2.2):切换只换这两块,今日卡在两块之上不受影响 */ .vocab-seg-panel[hidden] { display: none; } .vocab-page { /* 站点 .container 已给 12px 内边距;这里补 12 → 视口边距合计 24(规格值) */ max-width: 1200px; margin: 0 auto; padding: 0 12px; font-family: var(--dl-font); /* 字母分组头与详情面板 sticky 的基准 = 站点顶栏高(.header-inner 60px) */ --vocab-header-h: 60px; /* 单词本切换行 .vocab-books 吸顶后自己占掉的高,手量的估值,没有运行时测量。 52 = 36 + 2×8:36 来自 .vocab-books-right 里的 .vocab-seg(height: var(--dl-ctl)), 它比左边的 .vocab-books-chips(30 chip + 上下各 4 的环留白,被等量负外边距抵回 30)高, 所以撑高这一行的是 .vocab-seg 而不是 chip;8 是 .vocab-books 自己的上下 padding。依赖它的有两处,都在 .vocab-detail-col 上:sticky 的 top 起点、以及内层 .vocab-detail 的 max-height。改 .vocab-seg 的 --dl-ctl、.vocab-books 的 padding、或让 chip 高过 36 的任何改动,都必须同步把这个 52 重算,否则详情列会被切换行盖住 / 高度算错。 */ --vocab-books-h: 52px; } /* ── 标题行 ───────────────────────────────────────────────────────── */ .vocab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-sp-16); } /* 分段切换器(§18.2.3):两文字项,选中 --dl-ink + 600 + 下方 2px 与文字对齐的实线; 未选 --dl-ink-3 + 400,悬停 --dl-ink-2。留在灰底上,不做成面板。 */ .vocab-tabs { display: flex; align-items: baseline; gap: var(--dl-sp-24); flex: 1 1 auto; min-width: 0; } .vocab-tab { appearance: none; border: none; background: transparent; padding: 0 0 4px; font-family: var(--dl-font); font-size: var(--dl-fs-section); line-height: var(--dl-lh-section); font-weight: 400; color: var(--dl-ink-3); cursor: pointer; /* 下划线用 border-bottom(与文字左右对齐,不撑满);未选时透明占位,选中不跳行 */ border-bottom: 2px solid transparent; } .vocab-tab[aria-selected="true"] { color: var(--dl-ink); font-weight: 600; border-bottom-color: var(--dl-ink); } @media (hover: hover) { .vocab-tab:not([aria-selected="true"]):hover { color: var(--dl-ink-2); } } /* ── 进度段(§18.5) ────────────────────────────────────────────────── 区块次序 = §18.5.2 自上而下:概览条 / 接下来要复习的量 / 熟练度分布 / 不熟悉的词。日历热力图(第 5 区)已撤下;「每天做了多少」「真实保持率」(第 6/7 区)要复习流水表, 本轮不出现 —— 见 ReviewService.get_progress。补的时候在这里各加一个 .vocab-prog-block。零新颜色:图表的四档与柱子全部用全站那套渐进色阶(--dl-seq-1 → -2 → -3 → -5, 热力图、试卷难度同一套),深浅本身就是「越来越熟」,不另立一套语义色。 */ .vocab-seg-panel { margin-top: var(--dl-sp-24); } /* 未登录 / 零收藏 / 加载失败:留在灰底上,不做成面板(它不是内容,是一句交代) */ .vocab-prog-state { margin: var(--dl-sp-24) 0 0; padding: 0 var(--dl-sp-4); font-size: var(--dl-fs-body); line-height: var(--dl-lh-body); color: var(--dl-ink-2); } .vocab-prog-state[hidden] { display: none; } /* 每个区块 = 白面板(§6.4:卡片间距 16、卡片内衬 24) */ .vocab-prog-block { padding: var(--dl-sp-24); background: var(--dl-surface); border-radius: var(--dl-r-panel); box-shadow: var(--dl-sh-1); } .vocab-prog-block + .vocab-prog-block { margin-top: var(--dl-sp-16); } .vocab-prog-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dl-sp-8) var(--dl-sp-12); min-height: var(--dl-ctl); } /* §6.4:区块标题 16/600（原 20/28 与「大数」抢重量,数才是这一页的主角） */ .vocab-prog-title { margin: 0; font-size: var(--dl-fs-headword); line-height: var(--dl-lh-headword); font-weight: 600; color: var(--dl-ink); } /* 区块标题右侧的一句机器结论(如「最高的一天 12 个」);切换器占这个位置时它为空 */ .vocab-prog-note { margin-left: auto; font-size: var(--dl-fs-caption); line-height: var(--dl-lh-caption); color: var(--dl-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 「按词 / 按真题」切换器:沿用页内既有的分段控件语言(.vocab-seg),不新造一种控件。 .vocab-seg 是 inline-flex,不补这一条 [hidden] 收不住(空态时它不该出现)。 */ .vocab-prog-head .vocab-seg { margin-left: auto; } .vocab-prog-head .vocab-seg[hidden] { display: none; } /* 标题下的一行解释(门槛、口径)。串由后端拼,这里只管排。 */ .vocab-prog-cap { margin: var(--dl-sp-4) 0 0; font-size: var(--dl-fs-caption); line-height: var(--dl-lh-caption); color: var(--dl-ink-3); } /* 指标四格(§6.4 第 2 条):连续天数 · 收藏 · 长期记忆 · 距考研。标签 12 弱墨、数 24/600 */ .vocab-prog-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; font-size: var(--dl-fs-body); line-height: var(--dl-lh-body); color: var(--dl-ink); font-variant-numeric: tabular-nums; } .vocab-prog-metric { display: flex; flex-direction: column; gap: 6px; /* 入口格是