模板样式令牌化:字号落到 5 档阶梯、圆角改走 --tb-radius

11 个模板里的硬编码字号/圆角换成令牌,为之后的深色与主题一致性打底。

字号(base.css 的 --tb-fs-xs/md/lg/xl/hero = 12/14/16/24/28):
- 0.70~0.88rem、0.72rem 等五六档零碎值 → --tb-fs-xs(标签/meta) / --tb-fs-md(正文、列表、按钮)
- 0.95~1rem → --tb-fs-lg;1.5rem 大数字 → --tb-fs-xl;1.75rem 首页主标题 → --tb-fs-hero
- 以下几处**故意改变了观感**(不是等价替换,先记下来免得以后当 regression 查):
  explore 的 .explore-name 1.2rem → 1rem;.hot-vote-title 0.98 → 0.875;
  首页 .tb-stat-num 手机端 1.25 → 1rem;.hot-vote-action 0.82 → 0.875(变大)。

圆角:
- 8/9/10px → --tb-radius-sm(8) / --tb-radius(12,对话框与气泡);3/4/5/6px → --tb-radius-xs(6)
- 头像 50%、胶囊 999px 保留原样(语义值,不是视觉随意值)

其它:header 验证码输入框边框 #ccc → var(--tb-border);chat 气泡与图片的圆角走内联 var()。

仍未令牌化(留给下一轮):templates/user/profile.html 还有 16 处 font-size、base.css 自身 11 处
(0.78/0.82/0.88/0.95/1.1),邮件模板 mail/* 保持 px 不动(邮件客户端不保证 var())。
This commit is contained in:
tamakyi
2026-10-21 18:28:26 +08:00
parent dc90d96bde
commit 001306d940
11 changed files with 67 additions and 67 deletions
+17 -17
View File
@@ -24,7 +24,7 @@
min-width: 0;
}
.explore-name {
font-size: 1.2rem;
font-size: var(--tb-fs-lg);
font-weight: bold;
margin-bottom: 5px;
}
@@ -38,7 +38,7 @@
.explore-intro {
color: var(--tb-text-secondary);
margin-bottom: 10px;
font-size: 0.9rem;
font-size: var(--tb-fs-md);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -61,7 +61,7 @@
align-items: center;
padding: 10px;
background: var(--tb-surface-2);
border-radius: 8px;
border-radius: var(--tb-radius-sm);
transition: background 0.2s;
}
.recommend-card:hover {
@@ -79,7 +79,7 @@
}
.recommend-name {
font-weight: bold;
font-size: 1rem;
font-size: var(--tb-fs-lg);
}
.recommend-name a {
text-decoration: none;
@@ -92,7 +92,7 @@
margin-top: 3px;
}
.recommend-tags .uk-label {
font-size: 0.7rem;
font-size: var(--tb-fs-xs);
padding: 0 5px;
}
.hot-votes-list {
@@ -109,7 +109,7 @@
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--tb-border);
border-radius: 8px;
border-radius: var(--tb-radius-sm);
background: var(--tb-surface-2);
text-decoration: none;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
@@ -127,7 +127,7 @@
display: block;
overflow: hidden;
color: var(--tb-text);
font-size: 0.98rem;
font-size: var(--tb-fs-md);
font-weight: 600;
line-height: 1.45;
text-overflow: ellipsis;
@@ -141,13 +141,13 @@
margin-top: 8px;
}
.hot-vote-meta .uk-label {
font-size: 0.72rem;
font-size: var(--tb-fs-xs);
line-height: 1.6;
}
.hot-vote-action {
flex: 0 0 auto;
color: var(--tb-primary);
font-size: 0.82rem;
font-size: var(--tb-fs-md);
white-space: nowrap;
}
html[data-theme="dark"] .hot-vote-item {
@@ -177,17 +177,17 @@
margin: 2px auto 20px;
max-width: 320px;
border: 1px solid var(--tb-border);
border-radius: 9px;
border-radius: var(--tb-radius-sm);
background: var(--tb-surface-2);
}
.explore-tab {
border: 0;
border-radius: 6px;
border-radius: var(--tb-radius-xs);
padding: 8px 15px;
background: transparent;
color: var(--tb-text-secondary);
cursor: pointer;
font-size: 0.9rem;
font-size: var(--tb-fs-md);
transition: background 0.2s ease, color 0.2s ease;
}
.explore-tab:hover { color: var(--tb-primary); }
@@ -209,12 +209,12 @@
.vote-random-btn {
flex: 0 0 auto;
border: 1px solid #dce9ff;
border-radius: 7px;
border-radius: var(--tb-radius-sm);
padding: 7px 11px;
color: var(--tb-primary);
background: #f5faff;
cursor: pointer;
font-size: 0.84rem;
font-size: var(--tb-fs-xs);
}
.vote-random-btn:hover { border-color: var(--tb-primary); background: #edf6ff; }
.all-votes-list { display: grid; gap: 10px; }
@@ -244,9 +244,9 @@
border-left: 4px solid var(--tb-primary);
padding: 15px 20px;
margin-bottom: 20px;
border-radius: 4px;
border-radius: var(--tb-radius-xs);
color: var(--tb-text);
font-size: 0.9rem;
font-size: var(--tb-fs-md);
line-height: 1.6;
}
.explore-notice strong {
@@ -258,7 +258,7 @@
align-items: center;
gap: 6px;
padding: 5px 14px;
font-size: 0.85rem;
font-size: var(--tb-fs-md);
line-height: 1.4;
color: var(--tb-primary);
background: transparent;