模板样式令牌化:字号落到 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:
@@ -9,18 +9,18 @@
|
||||
margin: 6px 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);
|
||||
}
|
||||
.qlist-tab {
|
||||
flex: 1 1 0;
|
||||
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;
|
||||
}
|
||||
.qlist-tab:hover { color: var(--tb-primary); }
|
||||
@@ -48,7 +48,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;
|
||||
@@ -62,8 +62,8 @@
|
||||
gap: 7px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.hot-vote-meta .uk-label { font-size: 0.72rem; line-height: 1.6; }
|
||||
.hot-vote-action { flex: 0 0 auto; color: var(--tb-primary); font-size: 0.82rem; white-space: nowrap; }
|
||||
.hot-vote-meta .uk-label { font-size: var(--tb-fs-xs); line-height: 1.6; }
|
||||
.hot-vote-action { flex: 0 0 auto; color: var(--tb-primary); font-size: var(--tb-fs-md); white-space: nowrap; }
|
||||
/* 提问列表右上角:状态标签与操作按钮统一尺寸(等宽等高、垂直居中、完全对齐)。
|
||||
每个元素显式带 .qlist-pill 类,选择器挂在 .qlist-pills 容器下提升优先级,
|
||||
避免浏览器对 <button> 的默认样式或 UIkit .uk-label 造成差异。
|
||||
@@ -77,10 +77,10 @@
|
||||
min-width: 40px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--tb-radius-xs);
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -133,13 +133,13 @@
|
||||
.qlist-stat {
|
||||
background: #fff;
|
||||
border: 1px solid var(--tb-border);
|
||||
border-radius: 9px;
|
||||
border-radius: var(--tb-radius-sm);
|
||||
padding: 8px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.qlist-stat .qlist-stat-num {
|
||||
display: block;
|
||||
font-size: 1.15rem;
|
||||
font-size: var(--tb-fs-lg);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
color: #222;
|
||||
@@ -147,7 +147,7 @@
|
||||
.qlist-stat .qlist-stat-lbl {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
color: #888;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user