全局美化 v3
@@ -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 测试全绿。
|
||||
|
||||
@@ -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`),不是目测。
|
||||
|
||||
## 其它约定
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 108 KiB |
@@ -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,13 +665,29 @@
|
||||
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>
|
||||
|
||||
<script src="/recaptcha/api.js" async defer></script>
|
||||
<script>function onSubmit() {document.getElementById('form').submit();}</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
|
||||
<meta property="og:type" content="website" />
|
||||
@@ -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>
|
||||
|
||||
@@ -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,13 +665,29 @@
|
||||
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>
|
||||
|
||||
<script src="/recaptcha/api.js" async defer></script>
|
||||
<script>function onSubmit() {document.getElementById('form').submit();}</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
|
||||
<meta property="og:type" content="website" />
|
||||
@@ -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>
|
||||
|
||||
@@ -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,13 +665,29 @@
|
||||
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>
|
||||
|
||||
<script src="/recaptcha/api.js" async defer></script>
|
||||
<script>function onSubmit() {document.getElementById('form').submit();}</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
@@ -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,13 +665,29 @@
|
||||
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>
|
||||
|
||||
<script src="/recaptcha/api.js" async defer></script>
|
||||
<script>function onSubmit() {document.getElementById('form').submit();}</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
@@ -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,13 +665,78 @@
|
||||
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" />
|
||||
|
||||
@@ -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,13 +665,78 @@
|
||||
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" />
|
||||
|
||||
|
After Width: | Height: | Size: 110 KiB |
@@ -0,0 +1,2 @@
|
||||
<a href="/">Found</a>.
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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" }}" />
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 换成可直连的镜像、钉死主题,仅用于本地预览。
|
||||
|
||||