20 lines
1.7 KiB
Markdown
20 lines
1.7 KiB
Markdown
# 前端样式（长版明细）
|
||
|
||
## 前端样式
|
||
|
||
- `static/css/base.css`（`?v=` 取 `conf.StaticVersion`，**改完必须 +1**）。令牌在 `:root`（亮）+
|
||
`html[data-theme="dark"]`（暗）。新样式一律 `var(--tb-*)`，别写死色值，也别为深色另写分支。
|
||
- 页面级样式内联在各自模板 `<style>`；尽量用类不用 `style=`（深色下内联写死色值会露白）。
|
||
- 主题属性在 head 内联脚本里打（cookie `theme`），**不能挪回 body**，否则深色用户白闪。
|
||
- **移动端（≤640px）语言切换与主题按钮在固定底栏** `#tb-mobile-utils`（`.tb-nav-utils` 被隐藏，
|
||
body 留 `padding-bottom:56px`）。用户曾误以为"按钮不见了"，先解释位置。
|
||
⚠️ `/_/{domain}` 箱主页 `IsUserPage = true`（`route/question/page.go:133`），语言切换包在
|
||
`{{ if not .IsUserPage }}` 里 → **箱主页没有语言切换入口，有意设计**（用户 2026-10-19 确认），别当 bug 修。
|
||
- ⚠️ **UIkit 3.3.3 的 `.uk-flex::before/::after{display:none}`**：给带 `uk-flex` 的元素加伪元素必须写
|
||
复合选择器（`.tb-cover.uk-flex::after`），否则静默失效。
|
||
- 分类/题型标签一律 `.tb-chip`；彩色 `uk-label` 只留给语义状态（置顶/私密/被举报/已读、投票四态）。
|
||
- 视觉自检：`TEST_PREVIEW=1 go test ./templates -run TestGenPreview` → `outputs/preview-*.html`；
|
||
截图必须 `chrome --headless=old --force-device-scale-factor=1`（新版 headless 本机挂住）。
|
||
⚠️ `--window-size` ≠ CSS 视口；要精确视口就用 iframe 指定 width/height。验证 CSS 靠**像素比对**
|
||
（PIL 在 venv）而非目测；扫描循环上界不能与物体边界重合。
|