主题素材只有一处引用:主题 css 的 url()(分享卡是 Go 用 imaging 画的,不读素材), 所以只要让 CSS 里的地址指向对象存储即可。 - 导出面板新增「素材前缀」:空 = /static/images/themes/<slug>/(图片随二进制发布,与以前一致); 填 https://cdn.example.com/themes = CSS 写绝对 URL,zip 里的图片改为「上传用」 - 地址统一由 urlOf() 决定。修了一个重复实现:layerCSS 里复制过一份路径拼接, 只改 urlOf 会出现「背景走 CDN、装饰还指本地」 - 前缀随意切换不影响预览(预览恒用内联 dataURL);存进工程 json;?assetbase= 可自检 - INSTALL 文案按是否托管分叉,写清图片传到哪、换域名要重新导出 - 新增 docs/theme-assets-cdn.md:三种做法(生成器前缀 / 应用内 301 / 边缘改写)、 缓存与 ?v=、CORS 不需要、深色无素材、迁移用的 sed 命令 - README 更新;UI 修正:240px 面板里 4 字标签会被 flex 压窄,需 flex:0 0 auto + 84px
4.1 KiB
4.1 KiB
前端样式(长版明细)
前端样式
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只留给语义状态(置顶/私密/被举报/已读、投票四态)。 - 字号阶梯 5 档:
--tb-fs-xs/md/lg/xl/hero(12/14/16/24/28)。散落的.9/.95/.98rem一律映射到档位, 别新增第 6 个值。⚠️ 已令牌化的是模板层;base.css自身仍留 11 处硬编码(0.78/0.82/0.88/0.95/1.1),templates/user/profile.html还留 16 处 —— 想彻底统一得先扫这两处。 - 圆角只用
--tb-radius(-sm/-xs);50%与999px是语义(头像、胶囊),不要换成令牌。 - ⚠️
.uk-text-muted/.uk-text-meta必须带!important:UIkit 3.3.3 自带color:#999!important, 普通声明压不过(现象:规则写了但全站还是 #999)。 - 文字色下限 WCAG AA 4.5:1(正文级)。
--tb-text-muted=#6b7280(白底 4.83)。 旧值#8a919c3.18、#9992.85 —— 肉眼"淡一点"其实已经不合格。 主色还没达标(#1e87f03.26 /#4a7fc13.69 / sakura#e5678f2.80),要动得连主题一起改。 - ⚠️ 改 base.css 的配色令牌必须同步检查
static/css/themes/*.css:主题覆盖同名令牌, 基座修了但主题页纹丝不动(sakura/shiroko 的 muted 就曾是 2.8:1,是这次才补到 4.6)。 - 顶栏链接:亮色用
--tb-text-secondary、hover/当前页--tb-primary;深色块原本!important定成--tb-text,会让同一顶栏在深浅两模式权重跳一档 → 已加 dark secondary 覆盖。 - 主色要达到 AA 4.5:1(它同时是 14px 链接/按钮文字色)。现值:base
#0e6fd0、shiroko#3b6dac、 sakura#ba3e66(都是同色相压亮度)。改主色必须三处一起:base.css :root+themes/default.css+ 该主题。 - ⚠️
--tb-on-primary(亮#ffffff/ 暗#0b1016)是「主色作背景时的文字色」。 深色模式的强调色偏亮(#5c8dff),白字只有 2.2~3.1:1 —— 用一个令牌同时伺候「链接色要深」和 「按钮底要深」是矛盾的,所以拆成两个。.uk-button-primary、.uk-label:not(语义色)都吃它。 - 字号阶梯已全部落地(模板 + base.css);
0.9em(相对父级)、验证码等宽字形、mail/*是有意例外。 - 视觉自检:
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)而非目测;扫描循环上界不能与物体边界重合。 - ⚠️ 后台页不是都有卡片:
/user/questions的列表是<hr>裸行,模板里唯一一处.uk-card是投票 tab 的标题条。默认主题 #fff 看不出来,换带整页插画的主题就"整页透上来"。 已在.qlist-panel上补卡片底;新增后台页时别假设外层已有卡片。