,
* 但 keys / users / models / guide 四个模板漏了,于是同一个站有两种行为。
* 统一成一个类,谁都不用再手写内联样式。 */
.table-wrap {
overflow-x: auto;
/* 触屏上带惯性滚动,并让滚动条不覆盖最后一行内容。 */
-webkit-overflow-scrolling: touch;
}
/* ── 响应式:第一档(≤1180px)导航先瘦身 ──────────────────────────────────────
* 管理员导航现在有 9 项(用户/Key/模型/团队/活跃/会话/日志/错误/运维)。
* .nav 是 overflow-x:auto 且刻意隐藏了滚动条 —— 意思是宽度不够时后面几项
* 【无声无息地被裁掉】,页面上没有任何线索说明「右边还有东西」。
* 「运维」正好排在最后,于是最不常点但最要紧的那一页最容易消失。
* 先靠缩小内边距与字号把 9 项塞回可视区,能不滚就不滚。 */
@media (max-width: 1180px) {
.topbar {
gap: 14px;
padding: 0 16px;
}
.nav a {
padding: 8px 9px;
font-size: 14px;
}
}
/* ── 响应式:第二档(≤900px)导航独占一行 ────────────────────────────────────
* 让导航换到第二行整行铺开。
* 【滚动条那两条规则已删除】原方案是「横向滚动 + 显示细滚动条」,但 .nav 现在
* 直接换行(见 .nav 的说明),没有可滚动的溢出,那两条规则不再有任何作用 ——
* 而且它们在触屏上从来没生效过(overlay 滚动条静止时不渲染)。 */
@media (max-width: 900px) {
.topbar {
padding: 8px 16px;
gap: 8px 14px;
}
.nav {
order: 3;
flex-basis: 100%;
}
.content {
margin: 16px auto 32px;
padding: 0 16px;
}
.grid {
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 10px;
}
.stat {
padding: 13px;
}
.stat .num {
font-size: 22px;
}
}
/* ── 响应式:第三档(≤640px)单列 ──────────────────────────────────────────── */
@media (max-width: 640px) {
/* 筛选项各占一行:并排两个 140px 的下拉在手机上都放不下标签文字。 */
.f-item,
.f-item.f-time,
.f-item.f-model {
flex: 1 1 100%;
}
/* 键值行(「我的接入」整页由它构成)改成上下堆叠:
.k 固定 88px 宽 + .v 里 white-space:nowrap 的长 Key,在手机上必然挤爆。 */
.kv {
flex-wrap: wrap;
}
.kv .k {
width: auto;
flex-basis: 100%;
}
.card,
.chart,
.filter-card {
padding: 14px;
}
h1 {
font-size: 20px;
}
}
/* ── 运维页:命令块 ───────────────────────────────────────────────────────────
* 一条命令一个块,配一句说明和自己的复制按钮。
* 【为什么值得单独做一个组件】原来是「一个
里堆多条命令 + 一个复制按钮」,
* 而复制按钮取的是整块文本 —— 剪贴板里会混进 `down.sh --purge` 这种不可逆命令,
* 粘进终端后逐行执行。视觉上把「说明 / 命令 / 复制」绑成一组,才能让
* 「这个按钮复制的到底是哪几行」在页面上一目了然。 */
.cmd {
margin: 0 0 14px;
}
.cmd-desc {
color: var(--muted);
font-size: 13px;
line-height: 1.55;
margin-bottom: 6px;
}
.cmd .snippet {
margin-bottom: 6px;
}
/* 破坏性命令:整块用警示色包起来,并且【没有】复制按钮(见 ops.html 的说明)。
* 用红左边框而不是整块红底:红底会让人本能地跳过,而这些命令是要被读清楚的。 */
.cmd-danger {
border-left: 3px solid var(--alert);
padding: 8px 0 2px 12px;
background: #fff8f7;
border-radius: 0 8px 8px 0;
}
.cmd-danger .cmd-desc {
color: #8c2f22;
}
/* ── 2026-09-10 设计评审:补齐「有类名却没有规则」与几处硬伤 ──────────────────── */
/* .nowrap / .tag 在 audit.html、models.html 里用了,但 CSS 里【从来没有规则】。
* 后果:「2026-09-10 12:34」在窄列被折成两行、models 的两个操作按钮各占一行;
* .tag 渲染成裸文字,和旁边的徽标不成套。 */
.nowrap {
white-space: nowrap;
}
.tag {
display: inline-block;
padding: 1px 7px;
border-radius: 6px;
font-size: 12px;
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
/* .badge 无修饰态(ops 的「未知」、logs 的「正文 N」)原来没有底色,
* 渲染成带内边距的粗体字,和旁边的胶囊不成套。 */
.badge {
background: #f1f5f9;
color: #475569;
}
/* 等宽详情串(错误原文、request_id、探测详情)必须能在任意窄列里断行,
* 否则一条长串就把整表推出横向滚动。 */
.mono-detail {
overflow-wrap: anywhere;
}
/* 控件边框:见 :root 里 --line-ctl 的说明(1.4.11 要求 3:1)。 */
input,
textarea,
select,
.copy,
.danger,
.seg,
.dt-trigger,
.filter-bar select,
.filter-bar input {
border-color: var(--line-ctl);
}
/* 三处 11px 小字原来写死 #9ca3af(白底 2.54),而它们承载的是数据不是装饰。 */
.raw-sub,
.hit-sub,
.ev-none {
color: var(--muted-2);
}
/* 复制失败态:失败必须比"文案变一下"更明显(见 copy.js 的 flash)。 */
.copy.copy-bad {
color: var(--alert);
border-color: var(--alert);
}
/* 「用量占比 ≥80% 标黄」原来【只靠颜色】表达(WCAG 1.4.1),而这句说明只写在表头气泡里。
* 补一个字形,并在 Windows 高对比度下用轮廓兜底 —— 那种模式会把全站底色统一替换掉,
* .pct-warn / log-fail / log-warn / 日期选中态的区分会【同时全部消失】。 */
.pct-warn::after {
content: " ⚠";
font-size: 11px;
}
/* 同理(见上一条):.pct-bad 也不能只靠颜色。字形与 .pct-warn 刻意不同,
* 否则「快到了」和「已经在被拒了」在灰度打印或色觉障碍下仍然无法区分。 */
.pct-bad::after {
content: " ⛔";
font-size: 11px;
}
@media (forced-colors: active) {
.pct-warn,
.pct-bad,
tr.log-warn > td:first-child {
outline: 2px dotted;
outline-offset: -2px;
}
tr.log-fail > td:first-child {
outline: 3px solid;
outline-offset: -3px;
}
.dt-day.dt-sel {
outline: 2px solid;
outline-offset: -2px;
forced-color-adjust: none;
}
.dt-day.dt-in {
outline: 1px dashed;
outline-offset: -2px;
}
.kv-warn,
.kv-bad {
border-left-width: 6px;
border-left-style: double;
}
.badge {
border: 1px solid;
}
}
/* 慢操作的「正在进行」态(见 static/busy.js)。无动画,不必进 reduced-motion 块。 */
.busy-bar {
margin: 10px 0 0;
padding: 8px 12px;
border-radius: 8px;
background: #eef2ff;
border: 1px solid #c7d2fe;
color: #1e3a8a;
font-size: 14px;
}
[aria-busy="true"] .filter-bar,
[aria-busy="true"] .dt-pop {
opacity: .55;
pointer-events: none;
}
/* 可排序表头:键盘可达后要有明确的可点提示(见 static/table-sort.js)。 */
.sort-th {
cursor: pointer;
}
/* ══ 管理页长表的「检索 + 筛选 + 排序」工具条(2026-09-11)═══════════════════════
* 配合 layout.html 的 adminlistinfo / adminpager 两个片段与 adminpaging.go。
* 翻页条本身复用已有的 .pager(见上面),这里只补工具条与计数行。 */
.list-tools {
display: flex;
/* 【必须 wrap】里面是「搜索框 + 按钮 + 一排状态链接 + 一排排序链接」,窄屏放不下;
* 不 wrap 时 flex 项会被压缩,搜索框先被挤成两三个字宽 —— 一个存在但没法用的输入框。 */
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 10px;
font-size: 14px;
}
/* .pager .spacer 是按 .pager 限定的,这里要自己声明一份,否则「排序」那一组不会靠右。 */
.list-tools .spacer {
flex: 1;
/* 窄屏 wrap 之后 spacer 会独占一行:min-width:0 让它可以被压成 0 宽而不留一条空行。 */
min-width: 0;
}
/* 服务端排序 / 状态筛选选项。做成一排链接而不是