tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

全局美化 v4

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
outputs/preview-profile-light.html
+54 -37
View File
@@ -2,8 +2,8 @@
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:39 · 设置</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>预览 12:01 · 设置</title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -261,12 +261,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"] 分支。 */
@@ -341,7 +348,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;
@@ -598,34 +624,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 {
@@ -706,7 +724,6 @@
<meta name="google-site-verification" content="fEPwRRJfiGsgwc5SINBQwZhPK8F0cwRaOvRx0YRurI4" />
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<script>
window.addEventListener("load", function () {
@@ -815,7 +832,7 @@ window.tbRenderQR = function (el, getOptions) {
<ul class="uk-navbar-nav tb-nav-utils">
<li>
<a href="#" aria-label="语言" title="语言">🌐</a>
<a href="#" aria-label="语言" title="语言"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3.2 9h17.6M3.2 15h17.6"/><ellipse cx="12" cy="12" rx="4" ry="9"/></svg></a>
<div class="uk-navbar-dropdown" uk-drop="mode: click; pos: bottom-right">
<ul class="uk-nav uk-navbar-dropdown-nav">
@@ -832,7 +849,7 @@ window.tbRenderQR = function (el, getOptions) {
<ul class="uk-navbar-nav tb-nav-utils">
<li>
<a href="#" id="theme-toggle" title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
<span class="tb-icon-light">🌙</span><span class="tb-icon-dark">☀️</span>
<span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
</a>
</li>
</ul>
@@ -862,7 +879,7 @@ document.addEventListener("DOMContentLoaded", function() {
<button type="button" id="theme-toggle-mobile" class="uk-button uk-button-default uk-button-small"
title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
<span class="tb-icon-light">🌙</span><span class="tb-icon-dark">☀️</span>
<span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
</button>
</div>