全局美化 v4

This commit is contained in:
tamakyi
2026-10-19 12:07:21 +08:00
parent 5c7707ec0d
commit d7c1782bb6
50 changed files with 18372 additions and 401 deletions
+49 -31
View File
@@ -239,12 +239,19 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
/* 切换按钮图标切换(内联 SVG,不依赖 UIkit 图标库) */
#theme-toggle .tb-icon-light, #theme-toggle-mobile .tb-icon-light,
#theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark {
display: inline-flex;
align-items: center;
}
#theme-toggle .tb-icon-light svg, #theme-toggle-mobile .tb-icon-light svg,
#theme-toggle .tb-icon-dark svg, #theme-toggle-mobile .tb-icon-dark svg { display: block; }
#theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark { display: none; }
html[data-theme="dark"] #theme-toggle .tb-icon-light,
html[data-theme="dark"] #theme-toggle-mobile .tb-icon-light { display: none; }
html[data-theme="dark"] #theme-toggle .tb-icon-dark,
html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline; }
html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline-flex; }
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
@@ -319,7 +326,26 @@
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
/* 轻量胶囊:用于投票类型、热门标签等「只是分类信息」的位置。
实心 uk-label 一屏多个会变成一排色块,这里统一降级为浅底 + 次要色文字。 */
.tb-chip {
display: inline-block;
padding: 1px 8px;
border-radius: var(--tb-radius-xs);
background-color: var(--tb-surface-2);
color: var(--tb-text-secondary);
font-size: 0.72rem;
line-height: 1.7;
white-space: nowrap;
}
a.tb-chip:hover {
background-color: var(--tb-primary-weak);
color: var(--tb-primary);
text-decoration: none;
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
@@ -576,34 +602,26 @@
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 10px;
margin: 0;
border: none;
border-radius: 6px;
background-color: #e5e5e5;
overflow: hidden;
box-shadow: none;
}
.uk-progressbar {
display: block;
height: 100%;
background-color: #1e87f0;
border-radius: 6px 0 0 6px;
transition: width 0.3s ease;
}
html[data-theme="dark"] .uk-progress {
background-color: var(--tb-border);
}
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
/* 投票结果占比条:模板已改用 UIkit 3 原生 <progress class="uk-progress" value max>,
这里只把默认的 15px 高 / 500px 圆角 / 20px 外边距收紧到与页面一致的规格。
(原先为 UIkit 2 的 .uk-progressbar 结构打的补丁已删除) */
.uk-progress {
height: 10px;
margin: 0;
border-radius: var(--tb-radius-xs);
background-color: var(--tb-surface-2);
}
.uk-progress::-webkit-progress-bar {
background-color: var(--tb-surface-2);
border-radius: var(--tb-radius-xs);
}
.uk-progress::-webkit-progress-value {
background-color: var(--tb-primary);
border-radius: var(--tb-radius-xs) 0 0 var(--tb-radius-xs);
}
.uk-progress::-moz-progress-bar {
background-color: var(--tb-primary);
}
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {