| `）。
* 加列时两边都要改 —— 这是这一节唯一需要人工同步的地方。
*/
.wq-admin-tabs {
display: flex;
gap: 6px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
}
.wq-admin-tabs::-webkit-scrollbar { display: none; }
/* 搜索栏与批量操作区共用。align-items: flex-end 是为了让按钮底边与输入框底边
对齐 —— 标签占了上面一行，用 center 会让按钮浮到标签那一行的位置上。 */
.wq-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
margin: 0 0 16px;
}
.wq-toolbar .wq-field { flex: 1 1 210px; margin-bottom: 0; }
.wq-toolbar .wq-form-actions { margin: 0; }
/* 批量区（「下架理由」+ 四个按钮）在表格**下面**，所以上边距要单独给。 */
.wq-toolbar-top { margin: 18px 0 0; }
.wq-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.wq-table th,
.wq-table td {
padding: 9px 10px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.wq-table thead th {
color: var(--muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
border-bottom-color: var(--fg-2);
}
.wq-table tbody tr:hover { background: var(--bg); }
.wq-table .wq-btn { white-space: nowrap; }
/* 勾选框只占一个方块，别跟着别的列一起被撑开 */
.wq-col-check { width: 34px; }
.wq-col-check input { width: 16px; height: 16px; vertical-align: middle; }
.wq-t-title { min-width: 190px; font-weight: 600; }
.wq-t-title a { color: var(--fg); }
.wq-t-title a:hover { color: var(--accent); }
.wq-t-sub { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.wq-t-votes { white-space: nowrap; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.wq-t-when { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.wq-t-acts { white-space: nowrap; }
.wq-pager {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin: 18px 0 0;
}
.wq-pager-info { margin-right: 6px; color: var(--muted); font-size: 12.5px; }
/* ---- 窄屏：表格 → 一行一张卡 ---- */
@media (max-width: 760px) {
.wq-table thead { display: none; }
.wq-table, .wq-table tbody, .wq-table tr, .wq-table td { display: block; width: 100%; }
.wq-table tr {
padding: 12px 13px 10px;
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--card);
}
.wq-table td { display: flex; gap: 8px; padding: 3px 0; border: 0; }
/* 列名自报。伪装成 .wq-label 的观感，与站内其它表单一致。 */
.wq-table td::before {
content: attr(data-th);
flex: 0 0 46px;
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
line-height: 1.9;
}
.wq-table .wq-col-check { width: 100%; }
/* 标题单独一行、列名自己占一行：标题+作者名是两块，与列名并排会读成一句话。 */
.wq-table .wq-t-title { display: block; min-width: 0; }
.wq-table .wq-t-title::before { display: block; margin-bottom: 2px; line-height: 1.5; }
.wq-t-votes, .wq-t-when { white-space: normal; }
}
/* ---- WQ_STYLE_OVERFLOW_FIX_V1（2026-09-21）----
* 正文最后那段「参考：」是裸文本 + 整条 URL，中间没有空格可断。手机上正文容器
* 只有 313px 宽，带长查询串的 URL（真实例子：
* https://www.kepuchina.cn/article/articleinfo?business_type=100&ar_id=207937）
* 会顶破卡片边框：实测溢出 90px，并沿着 .wq-article-body -> .wq-article ->
* .wq-col-main -> .wq-grid -> .wq-shell 一路把整页顶出 59px 横向滚动条。
*
* overflow-wrap 是继承属性，放在容器上就覆盖了里面所有 ，不用逐个改。 * 用 break-word / anywhere 而不是 word-break: break-all —— 前者只在「整词一行 * 都放不下」时才断，不会把正文里正常的英文单词拆得支离破碎。 * （break-word 那行是给老 Safari 兜底的别名，不能放到 anywhere 之后，否则会把它 * 覆盖回 break-word。） */ .wq-article-body { word-break: break-word; overflow-wrap: break-word; overflow-wrap: anywhere; } |