全局美化 v3

This commit is contained in:
tamakyi
2026-10-19 11:43:24 +08:00
parent b165995a1c
commit 5c7707ec0d
28 changed files with 16249 additions and 4577 deletions
+25
View File
@@ -202,3 +202,28 @@ P2 = 图标统一(UIkit icons 取代 emoji/位图 png)、标签减量、view
- 线上 `box.shiroko.one/_/tamakyi` 实际值 = `https://r2.337845818.best/tamabox/box_background.png`。
- 预览里那张"渐变图"是 `zz_preview_test.go` 造的测试数据(data: URI 渐变),**不是产品行为**;
顺带发现 Go 模板会把 `data:` URI 在属性上下文里替换成 `#ZgotmplZ`(真实 http URL 不受影响)。
## 设置页「防护设置」缺白底(用户报)
根因:其它面板都包在 `<section class="tb-pcard">`,只有内容防护面板(profile.html:842)是裸 `div.profile-panel`,
直接露出页面灰底 `--tb-bg`。修法:包一层 `section.tb-pcard`,并把 `.tb-pcard` 的 `background:#fff` 改成
`var(--tb-surface)`(删掉随之冗余的 dark 覆盖)。
实测(计算样式):account 与 security 面板 bg 亮色均 `rgb(255,255,255)`、暗色均 `rgb(36,40,48)`,圆角 10px,完全一致。
顺手把 `security` 加入 `render_test.go` 的面板渲染测试列表(原来只测 account/question/chat/vote)。
⚠️ 教训:用脚本批量缩进/hash 插入时先 dry-run。这次第一版脚本把「空行」也当成需要写 `<section>` 的行,
一次性插了 5 个多余标签;靠立刻 `sed` 复查发现并回滚。
## P1 第一步:CSS 抽离(已完成)
- 新增 `static/css/base.css`(23KB,含注释;gzip 后约 6KB),内容 = 原 header 里的
设计令牌 / UIkit 补丁 / 深色覆盖 / 质感层 / 顶栏响应式 / 标签 / Markdown / 进度条 / 移动端底栏。
- `header.html`:内联 `<style>` 从 17.5KB 降到只剩 1 个(算数验证码,跟着 `{{ if CaptchaType }}` 条件渲染);
改为 `<link href="/static/css/base.css?v=20261019a">`,位置在 UIkit 样式之后(保证覆盖顺序)。
单页 HTML 42.5KB → 30.9KB。
- `static/fs.go` 的 `//go:embed` 显式清单加 `css/base.css`(漏了就是运行期 404 + 全站无样式,编译期不报错)。
- 静态缓存沿用既有 `CacheControl: public, max-age=86400`;靠 `?v=` 版本号破缓存。
**验证方式**:改动前后各截一次同样尺寸的截图做像素比对。
home-light / home-dark / explore-light 三页差异均 **0.024%**,bbox 只有 (11,56)-(29,74) 一个 18×18 方块
= 导航栏随机动物 emoji(每次加载都变),不是样式回归。go build + 模板/i18n 测试全绿。
+7 -1
View File
@@ -81,12 +81,18 @@
## 前端样式
- 全站**无 .css 文件**,样式内联在模板;设计令牌在 `base/header.html` 顶部 `<style>`:`:root`(亮)+ `html[data-theme="dark"]`(暗)。
- 基础样式在 `static/css/base.css`(2026-10-19 从 header 内联块抽出,`/static/css/base.css?v=YYYYMMDDx`,
**改完必须把 header 里的 v 号 +1**,静态缓存 1 天)。设计令牌是文件开头的 `:root`(亮)+ `html[data-theme="dark"]`(暗)。
新样式一律用 `var(--tb-*)`,别再写死色值/圆角/阴影,也别为深色另写一套分支。
- 页面级样式仍内联在各自模板的 `<style>` 里(variance 大、复用少),但同样只能用令牌。
- 静态文件是**显式 embed 清单**(`static/fs.go`),新增 css/js 必须手动加进 `//go:embed` 那行,否则运行期 404。
- 主题属性在 head 内联脚本里打(cookie `theme`),**不能挪回 body**,否则深色用户白闪。
- 页面级样式尽量用类,不用 `style=`(深色下内联写死色值会露白,`.tb-img-uploader` 踩过)。
- ⚠️ **UIkit 3.3.3 有 `.uk-flex::before/::after{display:none}`**:给带 `uk-flex` 的元素加伪元素遮罩必须写
`.tb-cover.uk-flex::after` 这类复合选择器,否则静默失效(不报错)。
- 视觉自检:`TEST_PREVIEW=1 go test ./templates -run TestGenPreview` → `outputs/preview-*.html`;
截图必须 `chrome --headless=old`(新版 headless 在本机挂住),外部资源先落到 `outputs/preview-assets/`。
改 CSS 的正确验证法是**像素比对**(PIL 在 `~/.workbuddy/binaries/python/envs/default`),不是目测。
## 其它约定
Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

+92 -81
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · </title>
<title>预览 11:39 · </title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,36 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -86,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -98,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -114,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -126,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -136,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -256,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -270,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -289,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -312,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -340,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -367,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -399,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -408,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -436,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -458,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -508,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -530,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -601,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -630,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -670,12 +665,28 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
@@ -1275,7 +1286,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
href="/_/tester/1">查看回答</a>
<div class="uk-text-left uk-text-small uk-text-muted">
<span class="tb-pin-flag" title="已置顶">⭐</span>
2026-10-19 11:18:39
2026-10-19 11:39:50
</div>
<p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
</p>
@@ -1287,7 +1298,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
href="/_/tester/2">查看回答</a>
<div class="uk-text-left uk-text-small uk-text-muted">
2026-10-19 10:18:39
2026-10-19 10:39:50
</div>
<p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
</p>
+92 -81
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · </title>
<title>预览 11:39 · </title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,36 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -86,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -98,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -114,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -126,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -136,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -256,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -270,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -289,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -312,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -340,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -367,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -399,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -408,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -436,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -458,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -508,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -530,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -601,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -630,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -670,12 +665,28 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
@@ -1275,7 +1286,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
href="/_/tester/1">查看回答</a>
<div class="uk-text-left uk-text-small uk-text-muted">
<span class="tb-pin-flag" title="已置顶">⭐</span>
2026-10-19 11:18:39
2026-10-19 11:39:50
</div>
<p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
</p>
@@ -1287,7 +1298,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
href="/_/tester/2">查看回答</a>
<div class="uk-text-left uk-text-small uk-text-muted">
2026-10-19 10:18:39
2026-10-19 10:39:50
</div>
<p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
</p>
+90 -79
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · 投票</title>
<title>预览 11:39 · 投票</title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,36 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -86,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -98,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -114,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -126,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -136,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -256,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -270,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -289,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -312,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -340,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -367,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -399,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -408,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -436,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -458,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -508,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -530,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -601,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -630,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -670,12 +665,28 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
+90 -79
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · 投票</title>
<title>预览 11:39 · 投票</title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,36 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -86,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -98,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -114,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -126,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -136,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -256,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -270,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -289,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -312,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -340,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -367,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -399,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -408,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -436,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -458,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -508,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -530,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -601,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -630,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -670,12 +665,28 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<script src="/recaptcha/api.js" async defer></script>
<script>function onSubmit() {document.getElementById('form').submit();}</script>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
+138 -127
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · TamaBox</title>
<title>预览 11:39 · TamaBox</title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,85 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<style>
.captcha-equation-box {
display: inline-flex;
align-items: center;
background: #f0f2f5;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 8px 8px 8px 16px;
gap: 6px;
transition: border-color 0.2s;
}
.captcha-equation-box:focus-within {
border-color: #1e87f0;
box-shadow: 0 0 0 3px rgba(30,135,240,0.12);
}
.math-captcha-modal-question {
font-size: 1.4rem;
font-family: "Courier New", monospace;
font-weight: 700;
color: #333;
letter-spacing: 1px;
white-space: nowrap;
}
#captcha-modal-answer {
width: 80px;
padding: 6px 10px;
text-align: center;
font-size: 1.2rem;
font-family: "Courier New", monospace;
font-weight: 600;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fff;
}
#captcha-modal-answer:focus {
border-color: #1e87f0;
box-shadow: 0 0 0 2px rgba(30,135,240,0.2);
}
#captcha-modal-answer::-webkit-inner-spin-button,
#captcha-modal-answer::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#captcha-modal-answer {
-moz-appearance: textfield;
}
</style>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -135,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -147,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -163,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -175,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -185,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -305,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -319,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -338,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -361,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -389,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -416,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -448,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -457,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -485,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -507,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -557,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -579,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -650,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -679,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -719,14 +665,79 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<style>
.captcha-equation-box {
display: inline-flex;
align-items: center;
background: #f0f2f5;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 8px 8px 8px 16px;
gap: 6px;
transition: border-color 0.2s;
}
.captcha-equation-box:focus-within {
border-color: #1e87f0;
box-shadow: 0 0 0 3px rgba(30,135,240,0.12);
}
.math-captcha-modal-question {
font-size: 1.4rem;
font-family: "Courier New", monospace;
font-weight: 700;
color: #333;
letter-spacing: 1px;
white-space: nowrap;
}
#captcha-modal-answer {
width: 80px;
padding: 6px 10px;
text-align: center;
font-size: 1.2rem;
font-family: "Courier New", monospace;
font-weight: 600;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fff;
}
#captcha-modal-answer:focus {
border-color: #1e87f0;
box-shadow: 0 0 0 2px rgba(30,135,240,0.2);
}
#captcha-modal-answer::-webkit-inner-spin-button,
#captcha-modal-answer::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#captcha-modal-answer {
-moz-appearance: textfield;
}
</style>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
<meta property="og:type" content="website" />
<meta property="og:title" content="狼的提问箱 | 匿名提问箱" />
+138 -127
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>预览 11:18 · TamaBox</title>
<title>预览 11:39 · TamaBox</title>
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -15,7 +15,19 @@
})();
</script>
<style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<style>/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
@@ -48,85 +60,17 @@
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<style>
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<style>
.captcha-equation-box {
display: inline-flex;
align-items: center;
background: #f0f2f5;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 8px 8px 8px 16px;
gap: 6px;
transition: border-color 0.2s;
}
.captcha-equation-box:focus-within {
border-color: #1e87f0;
box-shadow: 0 0 0 3px rgba(30,135,240,0.12);
}
.math-captcha-modal-question {
font-size: 1.4rem;
font-family: "Courier New", monospace;
font-weight: 700;
color: #333;
letter-spacing: 1px;
white-space: nowrap;
}
#captcha-modal-answer {
width: 80px;
padding: 6px 10px;
text-align: center;
font-size: 1.2rem;
font-family: "Courier New", monospace;
font-weight: 600;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fff;
}
#captcha-modal-answer:focus {
border-color: #1e87f0;
box-shadow: 0 0 0 2px rgba(30,135,240,0.2);
}
#captcha-modal-answer::-webkit-inner-spin-button,
#captcha-modal-answer::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#captcha-modal-answer {
-moz-appearance: textfield;
}
</style>
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
@@ -135,8 +79,8 @@
}
.icon {
margin-left: 10px;
width: 20px;
height: auto;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
@@ -147,7 +91,7 @@
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
@@ -163,7 +107,7 @@
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
@@ -175,7 +119,7 @@
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
@@ -185,18 +129,16 @@
vertical-align: middle;
}
}
</style>
<style>
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
@@ -305,7 +247,7 @@
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
@@ -319,17 +261,16 @@
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<style>
/* 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
@@ -338,7 +279,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
@@ -361,7 +302,7 @@
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
@@ -389,23 +330,24 @@
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
@@ -416,13 +358,18 @@
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
@@ -448,7 +395,7 @@
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
@@ -457,17 +404,16 @@
animation: none;
}
}
</style>
<style>
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@@ -485,7 +431,7 @@
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
@@ -507,7 +453,9 @@
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
@@ -557,13 +505,14 @@
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<style>
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
@@ -579,22 +528,20 @@
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<style>
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -650,10 +597,10 @@
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<style>
/* 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 */
.uk-progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -679,23 +626,22 @@
html[data-theme="dark"] .uk-progressbar {
background-color: var(--tb-primary);
}
</style>
<style>
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
@@ -719,14 +665,79 @@
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
<style>
.captcha-equation-box {
display: inline-flex;
align-items: center;
background: #f0f2f5;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 8px 8px 8px 16px;
gap: 6px;
transition: border-color 0.2s;
}
.captcha-equation-box:focus-within {
border-color: #1e87f0;
box-shadow: 0 0 0 3px rgba(30,135,240,0.12);
}
.math-captcha-modal-question {
font-size: 1.4rem;
font-family: "Courier New", monospace;
font-weight: 700;
color: #333;
letter-spacing: 1px;
white-space: nowrap;
}
#captcha-modal-answer {
width: 80px;
padding: 6px 10px;
text-align: center;
font-size: 1.2rem;
font-family: "Courier New", monospace;
font-weight: 600;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fff;
}
#captcha-modal-answer:focus {
border-color: #1e87f0;
box-shadow: 0 0 0 2px rgba(30,135,240,0.2);
}
#captcha-modal-answer::-webkit-inner-spin-button,
#captcha-modal-answer::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#captcha-modal-answer {
-moz-appearance: textfield;
}
</style>
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
<meta property="og:type" content="website" />
<meta property="og:title" content="狼的提问箱 | 匿名提问箱" />
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

@@ -0,0 +1,2 @@
<a href="/">Found</a>.
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+650
View File
@@ -0,0 +1,650 @@
/* TamaBox 全站基础样式:设计令牌 / 主题覆盖 / 组件质感 / 响应式。
由 base/header.html 内联块抽出,集中一份便于缓存与维护。
⚠️ 改完务必把 header 里的 ?v= 版本号 +1,否则老访客仍用缓存。 */
/* 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 */
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
--tb-surface-2: #f4f6f8;
--tb-surface-hover: #f3f7ff;
--tb-border: #e8eaee;
--tb-text: #1f2329;
--tb-text-secondary: #5c6370;
--tb-text-muted: #8a919c;
--tb-primary: #1e87f0;
--tb-primary-weak: rgba(30, 135, 240, 0.10);
--tb-radius: 12px;
--tb-radius-sm: 8px;
--tb-radius-xs: 6px;
--tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
--tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
--tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
--tb-bg: #1a1d23;
--tb-surface: #242830;
--tb-surface-2: #2d323c;
--tb-surface-hover: rgba(92, 141, 255, 0.12);
--tb-border: #3a404c;
--tb-text: #d8dce4;
--tb-text-secondary: #a8b0bd;
--tb-text-muted: #8b93a1;
--tb-primary: #5c8dff;
--tb-primary-weak: rgba(92, 141, 255, 0.14);
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
/* UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 */
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
justify-content: center;
width: 100%;
}
.icon {
margin-left: 10px;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
animation: jump 0.5s ease-in-out;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.uk-dropbar.uk-open {
opacity: 1;
visibility: visible;
}
a.uk-button.uk-button-link {
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
}
.uk-navbar-nav a {
font-size: 0.78rem;
padding: 0 4px;
}
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
/* 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
html[data-theme="dark"] .uk-dropbar,
html[data-theme="dark"] .uk-navbar-dropdown,
html[data-theme="dark"] .uk-modal-dialog,
html[data-theme="dark"] .uk-dropdown,
html[data-theme="dark"] .uk-offcanvas-bar,
html[data-theme="dark"] .uk-section,
html[data-theme="dark"] .uk-tile,
html[data-theme="dark"] .uk-panel,
html[data-theme="dark"] .uk-background-default,
html[data-theme="dark"] .uk-search-default .uk-search-input {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-container {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-nav > li > a,
html[data-theme="dark"] .uk-card a,
html[data-theme="dark"] .uk-link,
html[data-theme="dark"] a.uk-button-link,
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a,
html[data-theme="dark"] .uk-dropdown-nav > li > a,
html[data-theme="dark"] .uk-list a {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-nav > li > a:hover,
html[data-theme="dark"] .uk-card a:hover,
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a:hover,
html[data-theme="dark"] .uk-dropdown-nav > li > a:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-input,
html[data-theme="dark"] .uk-textarea,
html[data-theme="dark"] .uk-select {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-input:focus,
html[data-theme="dark"] .uk-textarea:focus,
html[data-theme="dark"] .uk-select:focus {
border-color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-text-muted,
html[data-theme="dark"] .uk-text-meta,
html[data-theme="dark"] .uk-text-secondary,
html[data-theme="dark"] .uk-text-muted a,
html[data-theme="dark"] .uk-text-small.uk-text-muted {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] .uk-divider-icon::after,
html[data-theme="dark"] hr,
html[data-theme="dark"] .uk-table th,
html[data-theme="dark"] .uk-table td,
html[data-theme="dark"] .uk-list-divider > li:nth-child(n+2) {
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-button-default {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-modal-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .uk-card-title {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-alert-warning,
html[data-theme="dark"] .uk-alert-danger,
html[data-theme="dark"] .uk-alert-success,
html[data-theme="dark"] .uk-alert-primary {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal .uk-modal-dialog {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal .captcha-equation-box {
background-color: var(--tb-surface-2) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] #math-captcha-modal .math-captcha-modal-question {
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer::placeholder {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] #math-captcha-modal .uk-text-meta,
html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
}
html[data-theme="dark"] .explore-name a {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .explore-name a:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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"] 分支。 */
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
background-color: var(--tb-bg);
color: var(--tb-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
.uk-card-default {
background-color: var(--tb-surface);
box-shadow: var(--tb-shadow);
}
.uk-card-default.uk-card-hover:hover {
box-shadow: var(--tb-shadow-hover);
}
.uk-card-header {
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
}
.uk-card-footer {
border-radius: 0 0 var(--tb-radius) var(--tb-radius);
}
.uk-card,
.uk-button,
.uk-alert,
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
.uk-input,
.uk-select,
.uk-textarea,
.uk-form-small,
.uk-search-input {
border-radius: var(--tb-radius-sm);
}
.uk-label {
border-radius: var(--tb-radius-xs);
}
.uk-alert {
border-radius: 10px;
}
.uk-modal-dialog {
border-radius: 14px;
}
.uk-dropdown,
.uk-navbar-dropdown {
border-radius: 10px;
box-shadow: var(--tb-shadow);
}
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
display: flex;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(255, 255, 255, 0.84) 100%);
pointer-events: none;
}
.tb-cover.tb-cover-dark::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0.46) 100%);
}
.tb-cover > * {
position: relative;
z-index: 1;
}
.tb-cover h3,
.tb-cover p {
text-shadow: 0 1px 10px rgba(255, 255, 255, 0.65);
}
.tb-cover.tb-cover-dark h3,
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
.emoji-placeholder {
transition: none;
animation: none;
}
}
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@media (max-width: 1200px) {
.uk-navbar-nav a {
font-size: 0.88rem;
padding: 0 8px;
}
}
@media (max-width: 1000px) {
.uk-navbar-nav a {
font-size: 0.82rem;
padding: 0 6px;
}
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
@media (max-width: 800px) {
.uk-navbar-nav a {
font-size: 0.78rem;
padding: 0 4px;
}
.uk-logo {
font-size: 1rem;
}
.tb-nav-username {
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
min-height: 56px;
overflow: visible;
}
.tb-navbar > .uk-navbar-center {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
white-space: nowrap;
flex-wrap: nowrap;
}
.tb-navbar .uk-navbar-center-left,
.tb-navbar .uk-navbar-center-right {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: flex !important;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
}
.tb-navbar .uk-navbar-center-left > div,
.tb-navbar .uk-navbar-center-right > div {
display: flex;
align-items: center;
white-space: nowrap;
}
.tb-navbar .uk-navbar-nav {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.tb-navbar .uk-navbar-nav > li > a,
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
/* 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 */
.tb-label-btn {
border: none !important;
cursor: pointer;
font-family: inherit;
margin: 0;
vertical-align: middle;
outline: none;
background-image: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
/* Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) */
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.md-body {
line-height: 1.7;
text-align: left;
word-break: break-word;
}
.md-body p { margin: 0.5em 0; }
.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 {
margin: 0.8em 0 0.4em;
font-weight: 600;
line-height: 1.4;
}
.md-body ul, .md-body ol { padding-left: 1.6em; margin: 0.5em 0; }
.md-body li { margin: 0.2em 0; }
.md-body blockquote {
border-left: 3px solid #d3d1c7;
margin: 0.6em 0;
padding: 0.2em 1em;
color: #5f5e5a;
}
.md-body pre {
background: #f5f5f5;
padding: 0.8em 1em;
border-radius: 6px;
overflow-x: auto;
margin: 0.6em 0;
}
.md-body code {
background: #f0f0f0;
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
.md-body pre code { background: none; padding: 0; }
.md-body img { max-width: 100%; height: auto; }
.md-body table { border-collapse: collapse; margin: 0.6em 0; }
.md-body th, .md-body td {
border: 1px solid #ddd;
padding: 0.4em 0.8em;
}
.md-body hr { margin: 1em 0; }
html[data-theme="dark"] .md-body blockquote {
border-color: #3a404c;
color: #8b93a1;
}
html[data-theme="dark"] .md-body pre,
html[data-theme="dark"] .md-body code { background: #2d323c; }
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);
}
/* 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 */
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
justify-content: center;
align-items: center;
gap: 10px;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
#tb-mobile-utils .uk-select {
width: 110px;
}
html[data-theme="dark"] #tb-mobile-utils {
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
+1 -1
View File
@@ -8,5 +8,5 @@ import (
"embed"
)
//go:embed favicon.ico sitemap.xml llms.txt llms-full.txt robots.txt tamabox.changelogs.json index-now/66e5e0911b0941f2ba7dbfbbd961e9be.txt
//go:embed favicon.ico sitemap.xml llms.txt llms-full.txt robots.txt tamabox.changelogs.json index-now/66e5e0911b0941f2ba7dbfbbd961e9be.txt css/base.css
var FS embed.FS
+2 -663
View File
@@ -15,64 +15,17 @@
if (m && m[1] === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
})();
</script>
<!-- 设计令牌:亮色为默认(:root),深色在 html[data-theme="dark"] 覆盖。
页面与组件样式一律引用 var(--tb-*),不再写死色值/圆角/阴影;
var() 的第二个参数仅作兜底(旧缓存页、邮件模板等不引入本文件的场景)。
改配色只动这一块,亮暗两套自动保持一致。 -->
<style>
:root {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
--tb-surface-2: #f4f6f8;
--tb-surface-hover: #f3f7ff;
--tb-border: #e8eaee;
--tb-text: #1f2329;
--tb-text-secondary: #5c6370;
--tb-text-muted: #8a919c;
--tb-primary: #1e87f0;
--tb-primary-weak: rgba(30, 135, 240, 0.10);
--tb-radius: 12px;
--tb-radius-sm: 8px;
--tb-radius-xs: 6px;
--tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
--tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
--tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
--tb-bg: #1a1d23;
--tb-surface: #242830;
--tb-surface-2: #2d323c;
--tb-surface-hover: rgba(92, 141, 255, 0.12);
--tb-border: #3a404c;
--tb-text: #d8dce4;
--tb-text-secondary: #a8b0bd;
--tb-text-muted: #8b93a1;
--tb-primary: #5c8dff;
--tb-primary-weak: rgba(92, 141, 255, 0.14);
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
</style>
<!-- 预连接:UIkit 走公共 CDN(cdnjs.snrat.com),其余自托管库仍在本站 R2,均需预连接 -->
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
<!-- UIkit 3.3.3 切到公共 CDN(cdnjs.snrat.com,国内实测全量下载 ~0.25s,原 R2 自建 ~1.4-2.0s) -->
<link rel="stylesheet" href="https://cdnjs.snrat.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
<!-- 全站基础样式(由原内联块抽出,可被浏览器缓存):改 static/css/base.css 后把 v 版本号 +1 -->
<link rel="stylesheet" href="/static/css/base.css?v=20261019a"/>
<!-- Waline 评论区样式:非阻塞加载,不阻塞首屏渲染 -->
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
<script defer src="https://cdnjs.snrat.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
<script defer src="https://cdnjs.snrat.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
<!-- UIkit 补丁:复刻原自建版 "modify-black-font"(官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字)。
模板当前只用到 .uk-light 容器(用户背景封面,question/list.html、question-not-found.html;
其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖),故只需补该容器的 3 处投影即可保持渲染一致。
若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字,须同步扩展。 -->
<style>
.uk-light { color: rgba(0,0,0,.7); }
.uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
.uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
.uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
.uk-light .uk-table th { color: rgba(0,0,0,.7); }
</style>
<!-- dayjs/alpinejs/vconsole/waline.js 已迁 cdnjs.snrat.com(sha256 与官方一致,国内实测快 2-7x) -->
<script defer src="https://cdnjs.snrat.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
<script defer src="https://cdnjs.snrat.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
@@ -168,621 +121,7 @@
});
</script>
{{ end }}
<style>
.grecaptcha-badge {visibility: hidden;}
.icon-container {
display: flex;
justify-content: center;
width: 100%;
}
.icon {
margin-left: 10px;
width: 20px; /* 设置图标的宽度 */
height: auto; /* 保持图标的高度自动调整 */
}
.emoji-placeholder {
display: inline-block;
animation: jump 0.5s ease-in-out;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* 防止 UIkit Dropbar 初始闪烁 */
.uk-dropbar {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.uk-dropbar.uk-open {
opacity: 1;
visibility: visible;
}
a.uk-button.uk-button-link {
text-transform: none;
}
/* 移动端优化:缩小字体和间距,避免右侧空白 */
@media (max-width: 640px) {
.uk-logo {
font-size: 1rem;
}
.uk-navbar-nav a {
font-size: 0.78rem;
padding: 0 4px;
}
.emoji-placeholder {
font-size: 1rem;
}
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
.tb-nav-username {
max-width: 64px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
</style>
<!-- 深色模式:html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 -->
<style>
/* 变量(--tb-*)已上移到 head 顶部的令牌块,亮暗两套同名常量在那里定义。 */
/* 根元素与 body 一起覆盖,确保整个视口(含内容不足一屏时的空白区)都是深色背景 */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--tb-bg) !important;
color: var(--tb-text) !important;
}
/* 通用表面容器 */
html[data-theme="dark"] .uk-card,
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
html[data-theme="dark"] .uk-dropbar,
html[data-theme="dark"] .uk-navbar-dropdown,
html[data-theme="dark"] .uk-modal-dialog,
html[data-theme="dark"] .uk-dropdown,
html[data-theme="dark"] .uk-offcanvas-bar,
html[data-theme="dark"] .uk-section,
html[data-theme="dark"] .uk-tile,
html[data-theme="dark"] .uk-panel,
html[data-theme="dark"] .uk-background-default,
html[data-theme="dark"] .uk-search-default .uk-search-input {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-container {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-nav > li > a,
html[data-theme="dark"] .uk-card a,
html[data-theme="dark"] .uk-link,
html[data-theme="dark"] a.uk-button-link,
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a,
html[data-theme="dark"] .uk-dropdown-nav > li > a,
html[data-theme="dark"] .uk-list a {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-navbar-nav > li > a:hover,
html[data-theme="dark"] .uk-card a:hover,
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a:hover,
html[data-theme="dark"] .uk-dropdown-nav > li > a:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-input,
html[data-theme="dark"] .uk-textarea,
html[data-theme="dark"] .uk-select {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-input:focus,
html[data-theme="dark"] .uk-textarea:focus,
html[data-theme="dark"] .uk-select:focus {
border-color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-text-muted,
html[data-theme="dark"] .uk-text-meta,
html[data-theme="dark"] .uk-text-secondary,
html[data-theme="dark"] .uk-text-muted a,
html[data-theme="dark"] .uk-text-small.uk-text-muted {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] .uk-divider-icon::after,
html[data-theme="dark"] hr,
html[data-theme="dark"] .uk-table th,
html[data-theme="dark"] .uk-table td,
html[data-theme="dark"] .uk-list-divider > li:nth-child(n+2) {
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-button-default {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] .uk-modal-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .uk-card-title {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .uk-alert-warning,
html[data-theme="dark"] .uk-alert-danger,
html[data-theme="dark"] .uk-alert-success,
html[data-theme="dark"] .uk-alert-primary {
background-color: var(--tb-surface-2) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal .uk-modal-dialog {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal .captcha-equation-box {
background-color: var(--tb-surface-2) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] #math-captcha-modal .math-captcha-modal-question {
color: var(--tb-text) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer {
background-color: var(--tb-surface) !important;
color: var(--tb-text) !important;
border-color: var(--tb-border) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer::placeholder {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] #math-captcha-modal .uk-text-meta,
html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh {
color: var(--tb-text-muted) !important;
}
html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .uk-label {
color: #fff !important;
}
/* 自定义组件(探索页推荐卡片等)深色覆盖 */
html[data-theme="dark"] .recommend-card,
html[data-theme="dark"] .recommend-card:hover {
background-color: var(--tb-surface-2) !important;
}
html[data-theme="dark"] .explore-name a {
color: var(--tb-text) !important;
}
html[data-theme="dark"] .explore-name a:hover {
color: var(--tb-primary) !important;
}
html[data-theme="dark"] .explore-intro {
color: var(--tb-text-muted) !important;
}
/* 切换按钮图标切换 */
#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; }
</style>
<!-- 基础质感层:只调整外观(圆角/投影/字体/数字对齐),不改任何结构与布局。
颜色一律取自头部令牌,亮暗两套自动生效,因此这里不需要再写 html[data-theme="dark"] 分支。 -->
<style>
/* 根元素与 body 同时上色:内容不足一屏时,body 之外的视口区域也要是同一底色 */
html,
body {
font-family: var(--tb-font);
background-color: var(--tb-bg);
color: var(--tb-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 卡片:12px 圆角 + 一层极淡接触影 + 一层大扩散影(UIkit 默认的 0 5px 15px 偏硬) */
.uk-card {
border-radius: var(--tb-radius);
}
.uk-card-default {
background-color: var(--tb-surface);
box-shadow: var(--tb-shadow);
}
.uk-card-default.uk-card-hover:hover {
box-shadow: var(--tb-shadow-hover);
}
.uk-card-header {
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
}
.uk-card-footer {
border-radius: 0 0 var(--tb-radius) var(--tb-radius);
}
.uk-card,
.uk-button,
.uk-alert,
.uk-label {
transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 交互元素:统一 8px 圆角,标签 6px */
.uk-button {
border-radius: var(--tb-radius-sm);
}
.uk-input,
.uk-select,
.uk-textarea,
.uk-form-small,
.uk-search-input {
border-radius: var(--tb-radius-sm);
}
.uk-label {
border-radius: var(--tb-radius-xs);
}
.uk-alert {
border-radius: 10px;
}
.uk-modal-dialog {
border-radius: 14px;
}
.uk-dropdown,
.uk-navbar-dropdown {
border-radius: 10px;
box-shadow: var(--tb-shadow);
}
.uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-surface);
}
/* 键盘可达性:仅在键盘聚焦时出现描边,鼠标点击不出现 */
.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
outline: 2px solid var(--tb-primary);
outline-offset: 2px;
}
/* 次要文字统一走令牌,避免 #999 / #8a919c 混用 */
.uk-text-muted,
.uk-text-meta {
color: var(--tb-text-muted);
}
/* 统计/日期等数字列等宽对齐,避免刷新时左右跳动 */
.uk-table,
.tb-num {
font-variant-numeric: tabular-nums;
}
/* 图片上传条:原为 item/new-question 两处各写一份内联 style(写死 #f8f8f8,深色下露白),
收敛到一处并走令牌,亮暗自动适配 */
.tb-img-uploader {
width: 100%;
background-color: var(--tb-surface-2);
display: flex;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
/* 背景图封面(提问箱主页):渐变遮罩,保证用户自选文字色叠加后仍可读。
默认浅色遮罩(页面 .uk-light 补丁把文字兜底成深色);若箱主选了浅色文字,
question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
.tb-cover {
position: relative;
border-radius: var(--tb-radius) var(--tb-radius) 0 0;
overflow: hidden;
}
/* ⚠️ 必须带 .uk-flex 复合选择器:UIkit 3.3.3 里有
.uk-flex::after,.uk-flex::before{display:none}(优先级 0,2,0),
会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示(踩过一次)。
单写 .tb-cover::after 优先级不够,会被它压回 display:none。 */
.tb-cover::after,
.tb-cover.uk-flex::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(255, 255, 255, 0.84) 100%);
pointer-events: none;
}
.tb-cover.tb-cover-dark::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0.46) 100%);
}
.tb-cover > * {
position: relative;
z-index: 1;
}
.tb-cover h3,
.tb-cover p {
text-shadow: 0 1px 10px rgba(255, 255, 255, 0.65);
}
.tb-cover.tb-cover-dark h3,
.tb-cover.tb-cover-dark p {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
.uk-card,
.uk-button,
.emoji-placeholder {
transition: none;
animation: none;
}
}
</style>
<!-- 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 -->
<style>
.uk-navbar-nav a {
font-size: 0.95rem;
padding: 0 10px;
}
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
桌面端布局与改动前完全一致,不受影响。 */
.tb-mobile-balancer { display: none; }
/* 桌面端保持 UIkit 原生居中三列布局(无需额外 CSS) */
.tb-navbar .uk-logo {
white-space: nowrap;
}
@media (max-width: 1200px) {
.uk-navbar-nav a {
font-size: 0.88rem;
padding: 0 8px;
}
}
@media (max-width: 1000px) {
.uk-navbar-nav a {
font-size: 0.82rem;
padding: 0 6px;
}
.uk-logo {
font-size: 1.1rem;
}
/* 登录用户名限宽,过长省略号截断 */
.tb-nav-username {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
@media (max-width: 800px) {
.uk-navbar-nav a {
font-size: 0.78rem;
padding: 0 4px;
}
.uk-logo {
font-size: 1rem;
}
.tb-nav-username {
max-width: 80px;
}
}
/* 手机端(≤640px):沿用 UIkit 桌面端 navbar 的原生三列定位。
不再重写 .uk-navbar-center / center-left / center-right 的定位,
避免 logo 被挤到下一行;底部语言与深色模式按钮仍由下方独立栏承载。 */
@media (max-width: 640px) {
.tb-navbar {
position: relative;
min-height: 56px;
overflow: visible;
}
.tb-navbar > .uk-navbar-center {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
white-space: nowrap;
flex-wrap: nowrap;
}
.tb-navbar .uk-navbar-center-left,
.tb-navbar .uk-navbar-center-right {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: flex !important;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
}
.tb-navbar .uk-navbar-center-left > div,
.tb-navbar .uk-navbar-center-right > div {
display: flex;
align-items: center;
white-space: nowrap;
}
.tb-navbar .uk-navbar-nav {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.tb-navbar .uk-navbar-nav > li > a,
.tb-navbar .uk-logo {
white-space: nowrap;
}
/* 未登录:移动端显示与「我的」等宽的隐藏占位,使左栏「探索+占位」与
右栏「注册/登录」两项等宽,logo 真正居中,左右视觉平衡 */
.tb-mobile-balancer { display: block; }
}
</style>
<!-- 标签样式的按钮(管理页置顶等):
尺寸完全继承 .uk-label(font-size/padding/line-height/text-transform 等),
仅覆盖 button 元素特有的默认样式(边框/字体族/光标等),保证与相邻 span 标签完全一致。 -->
<style>
.tb-label-btn {
border: none !important;
cursor: pointer;
font-family: inherit;
margin: 0;
vertical-align: middle;
outline: none;
background-image: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.tb-label-btn:hover {
opacity: 0.85;
}
/* 公开页置顶小图标:仅一个图钉,不占行高、不影响原布局 */
.tb-pin-flag {
font-size: 0.9em;
margin-right: 4px;
vertical-align: -1px;
cursor: default;
}
</style>
<!-- Markdown 渲染排版(问题/回答/追问正文,左对齐以保留排版格式) -->
<style>
/* 纯文本列表:保留换行与连续空格(pre-wrap),不渲染 Markdown 大字号/彩色 */
.tb-preline {
white-space: pre-wrap;
}
/* 纯文本列表:超过 5 行截断并显示省略号(不足 5 行则完整显示) */
.tb-clamp-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.md-body {
line-height: 1.7;
text-align: left;
word-break: break-word;
}
.md-body p { margin: 0.5em 0; }
.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 {
margin: 0.8em 0 0.4em;
font-weight: 600;
line-height: 1.4;
}
.md-body ul, .md-body ol { padding-left: 1.6em; margin: 0.5em 0; }
.md-body li { margin: 0.2em 0; }
.md-body blockquote {
border-left: 3px solid #d3d1c7;
margin: 0.6em 0;
padding: 0.2em 1em;
color: #5f5e5a;
}
.md-body pre {
background: #f5f5f5;
padding: 0.8em 1em;
border-radius: 6px;
overflow-x: auto;
margin: 0.6em 0;
}
.md-body code {
background: #f0f0f0;
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
.md-body pre code { background: none; padding: 0; }
.md-body img { max-width: 100%; height: auto; }
.md-body table { border-collapse: collapse; margin: 0.6em 0; }
.md-body th, .md-body td {
border: 1px solid #ddd;
padding: 0.4em 0.8em;
}
.md-body hr { margin: 1em 0; }
html[data-theme="dark"] .md-body blockquote {
border-color: #3a404c;
color: #8b93a1;
}
html[data-theme="dark"] .md-body pre,
html[data-theme="dark"] .md-body code { background: #2d323c; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #3a404c; }
</style>
<!-- 投票结果占比条:UIkit 3 已无 .uk-progressbar 类(那是 UIkit 2 的),
模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构,需补一套填充样式,
否则内层填充无高度/背景,所有占比条都只剩外层灰色轨道,看起来一模一样。 -->
<style>
.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);
}
</style>
<!-- 移动端底部操作栏:固定底栏承载语言切换与深色模式,桌面端隐藏 -->
<style>
#tb-mobile-utils {
display: none;
}
@media (max-width: 640px) {
/* 顶栏不再容纳语言/深色按钮,恢复原有导航空间 */
.tb-nav-utils {
display: none !important;
}
/* 手机端隐藏登录用户名(左边仅保留"探索"),保证 logo 居中、
两侧各不超过 2 个短按钮,避免用户名宽度挤压布局 */
.tb-nav-username {
display: none !important;
}
/* 固定底部操作栏 */
#tb-mobile-utils {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
justify-content: center;
align-items: center;
gap: 10px;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
#tb-mobile-utils .uk-select {
width: 110px;
}
html[data-theme="dark"] #tb-mobile-utils {
background: rgba(36, 40, 48, 0.92);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}
/* 给页面底部预留空间,避免页脚内容被固定底栏遮挡 */
body {
padding-bottom: 56px;
}
}
</style>
<!-- Commit 6d0a3ad -->
<meta property="og:site_name" content="{{ t .LangCode "site.title" }}" />
+1 -1
View File
@@ -222,7 +222,7 @@ func TestRenderUserProfileTabs(t *testing.T) {
}
// 逐个面板渲染:模板能正常执行,且只有目标面板可见、其余面板带 hidden
all := []string{"account", "question", "chat", "vote"}
all := []string{"account", "question", "chat", "vote", "security"}
for _, tab := range all {
base["ActiveProfileTab"] = tab
out, err := renderToString(t, "user/profile", base)
+3 -5
View File
@@ -315,7 +315,7 @@
/* ===== profile account 面板卡片化(复用 UIkit 变量体系,暗色自动跟随) ===== */
.tb-pcard {
background: #fff;
background: var(--tb-surface);
border: 1px solid var(--tb-border);
border-radius: 10px;
padding: 13px 14px 8px;
@@ -436,10 +436,6 @@
}
#media-crop-modal .uk-modal-dialog { width: 640px; }
.tb-crop-hint { margin-top: 12px; }
html[data-theme="dark"] .tb-pcard {
border-color: var(--tb-border);
background: var(--tb-surface);
}
html[data-theme="dark"] .tb-pcard-title { color: var(--tb-text); }
html[data-theme="dark"] .tb-pcard-extra,
html[data-theme="dark"] .tb-file-hint { color: var(--tb-text-muted); }
@@ -840,6 +836,7 @@
原先散落在提问/私聊/投票三个面板(屏蔽词与审核严格度还被重复渲染 3 份),
现统一收拢到本面板;各表单 action 携带 ?tab=security,保存后回到此处。 -->
<div class="profile-panel" data-profile-panel="security"{{ if ne .ActiveProfileTab "security" }} hidden{{ end }}>
<section class="tb-pcard">
<div class="uk-margin">
<form method="post" action="/user/harassment/update?tab=security">
{{ $.CSRFTokenHTML }}
@@ -894,6 +891,7 @@
</div>
</form>
</div>
</section>
</div><!-- /内容防护面板 -->
<script>
+14
View File
@@ -99,6 +99,20 @@ func TestGenPreview(t *testing.T) {
}
writePreview(t, outDir, "preview-explore-"+theme+".html", page, theme, "../static")
}
// 设置页「内容防护」面板:核对是否与其它面板同样是白底卡片
profile := profileBaseData()
profile["ActiveProfileTab"] = "security"
profile["FeatureQuestion"] = nil
profile["FeatureChat"] = nil
profile["FeatureVote"] = nil
for _, theme := range []string{"light", "dark"} {
page, err := renderToString(t, "user/profile", profile)
if err != nil {
t.Fatalf("render profile: %v", err)
}
writePreview(t, outDir, "preview-profile-"+theme+".html", page, theme, "../static")
}
}
// writePreview 把 CDN 换成可直连的镜像、钉死主题,仅用于本地预览。