504 lines
15 KiB
CSS
504 lines
15 KiB
CSS
/* ============================================================================
|
||
* 管理后台统一样式（合并原先散在 14 个内联模板里的 12 份重复 <style>）。
|
||
*
|
||
* 设计基调沿用原后台：黑白、直角感、系统字体、无外部依赖。
|
||
* 统一后只此一份，改样式不必再逐页改 14 处。
|
||
*
|
||
* 约定：
|
||
* 1) 布局三件套 —— body（页面底色）/ .bar（顶部导航）/ .main（内容容器）
|
||
* 2) 组件化 —— .btn / .badge / .card / .cell / .pager / .flash 等按语义命名，
|
||
* 页面只写结构，不再写内联 style
|
||
* 3) 缩略图统一 2:3 —— 与站内图片素材比例一致（后端素材为 240×360 / 720×1080）
|
||
* ==========================================================================*/
|
||
|
||
/* ---------- 基础 ---------- */
|
||
* { box-sizing: border-box; }
|
||
|
||
/* 让 hidden 属性始终生效：下面给 .batchbar/.flash/.chk 设了 display，
|
||
作者样式会盖过浏览器默认的 [hidden]{display:none}，故这里强制抬高。 */
|
||
[hidden] { display: none !important; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font: 14px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
color: #111;
|
||
background: #f4f4f5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1 { font-size: 20px; margin: 0 0 4px; }
|
||
h2 { font-size: 15px; margin: 26px 0 10px; color: #333; }
|
||
|
||
a { color: #111; }
|
||
a.view { text-decoration: underline; }
|
||
.muted { color: #777; }
|
||
code {
|
||
font-family: ui-monospace, Menlo, Consolas, monospace;
|
||
font-size: 12px;
|
||
background: #f6f6f7;
|
||
padding: 1px 5px;
|
||
border-radius: 4px;
|
||
}
|
||
.break { word-break: break-all; }
|
||
|
||
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
|
||
|
||
/* ---------- 顶部导航 ---------- */
|
||
.bar {
|
||
background: #111;
|
||
color: #fff;
|
||
padding: 10px 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
.bar a { color: #fff; text-decoration: none; }
|
||
.bar-title { font-weight: 600; white-space: nowrap; }
|
||
.bar-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
|
||
.bar-nav a {
|
||
padding: 4px 9px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
opacity: .78;
|
||
transition: background .15s, opacity .15s;
|
||
white-space: nowrap;
|
||
}
|
||
.bar-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
|
||
.bar-nav a.on { opacity: 1; background: rgba(255, 255, 255, .2); }
|
||
.bar-nav .sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .25); margin: 0 6px; }
|
||
.bar-badge {
|
||
display: inline-block;
|
||
min-width: 16px;
|
||
padding: 0 5px;
|
||
margin-left: 5px;
|
||
border-radius: 9px;
|
||
background: #f59e0b;
|
||
color: #111;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
/* ---------- 内容容器 ---------- */
|
||
.main { max-width: 1100px; margin: 24px auto 60px; padding: 0 24px; }
|
||
.main.narrow { max-width: 620px; margin-top: 32px; }
|
||
.main.mid { max-width: 900px; }
|
||
|
||
/* 登录页固定宽卡片 */
|
||
.wrap {
|
||
max-width: 360px;
|
||
margin: 80px auto;
|
||
background: #fff;
|
||
padding: 28px 28px 32px;
|
||
border: 1px solid #e2e2e3;
|
||
border-radius: 10px;
|
||
}
|
||
.wrap h1 { margin-bottom: 18px; }
|
||
.wrap button { width: 100%; margin-top: 18px; }
|
||
|
||
/* ---------- 提示条 ---------- */
|
||
.flash {
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
margin: 14px 0;
|
||
font-size: 13px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.flash.ok { background: #e6f7ec; border: 1px solid #a9dcbd; color: #1a7f43; }
|
||
.flash.err, .err { color: #c0392b; }
|
||
.flash.err { background: #fdeaea; border: 1px solid #f0b7b3; }
|
||
/* 收起按钮（提示条 / 顶部提示里的小 ✕）：必须是「无底无边」的小图标，
|
||
否则会继承下面 button 的黑底样式，变成一个突兀的黑方块。 */
|
||
.hint .x, .flash .x {
|
||
background: none;
|
||
border: 0;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
padding: 2px 6px;
|
||
margin-left: auto;
|
||
}
|
||
/* hint 是 sticky（已定位），收起按钮绝对定位到右上角，不参与文字排版 */
|
||
.hint { padding-right: 34px; }
|
||
.hint .x { position: absolute; top: 6px; right: 8px; }
|
||
.hint {
|
||
position: sticky;
|
||
top: 52px;
|
||
background: #fffbe6;
|
||
border: 1px solid #f5e08a;
|
||
color: #7a5b00;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
margin: 12px 0;
|
||
font-size: 13px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* ---------- 表单 ---------- */
|
||
label { display: block; margin: 14px 0 4px; color: #555; }
|
||
input, textarea, select {
|
||
width: 100%;
|
||
padding: 9px 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
background: #fff;
|
||
}
|
||
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
|
||
textarea { min-height: 72px; }
|
||
.row { display: flex; gap: 14px; }
|
||
.row > div { flex: 1; min-width: 0; }
|
||
|
||
button {
|
||
padding: 9px 16px;
|
||
background: #111;
|
||
color: #fff;
|
||
border: 1px solid #111;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
}
|
||
button:hover { opacity: .88; }
|
||
button.reject, button.danger { background: #c0392b; border-color: #c0392b; }
|
||
button.ghost { background: #fff; color: #111; border-color: #ccc; }
|
||
button.retry {
|
||
font-size: 12px;
|
||
padding: 4px 10px;
|
||
border-color: #c0392b;
|
||
color: #c0392b;
|
||
background: #fff;
|
||
}
|
||
button.retry:hover { background: #c0392b; color: #fff; opacity: 1; }
|
||
button:disabled { opacity: .45; cursor: default; }
|
||
|
||
/* ---------- 工具栏 / 筛选 ---------- */
|
||
.toolbar {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
margin: 16px 0;
|
||
}
|
||
.toolbar input, .toolbar select { width: auto; padding: 8px 10px; }
|
||
.toolbar a { color: #555; text-decoration: none; font-size: 13px; }
|
||
.tabs a, .kinds a {
|
||
display: inline-block;
|
||
margin: 0 8px 8px 0;
|
||
color: #111;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
padding: 4px 9px;
|
||
border-radius: 6px;
|
||
border: 1px solid transparent;
|
||
}
|
||
.kinds a { border-color: #ddd; }
|
||
.tabs a.on, .kinds a.on { background: #111; color: #fff; border-color: #111; }
|
||
.idx { line-height: 2.2; }
|
||
.idx a { margin-right: 8px; text-decoration: none; font-size: 13px; }
|
||
.idx a.on { font-weight: 700; text-decoration: underline; }
|
||
|
||
/* ---------- 表格 ---------- */
|
||
.table-wrap { overflow-x: auto; }
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: #fff;
|
||
margin-top: 12px;
|
||
border: 1px solid #e6e6e7;
|
||
border-radius: 8px;
|
||
}
|
||
th, td {
|
||
text-align: left;
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 13px;
|
||
vertical-align: top;
|
||
}
|
||
th { background: #fafafa; color: #555; font-weight: 600; white-space: nowrap; }
|
||
tbody tr:hover { background: #fbfbfc; }
|
||
tbody tr:last-child td { border-bottom: 0; }
|
||
|
||
/* ---------- 徽标 ---------- */
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.badge.pending { background: #fff4e0; color: #a85b00; }
|
||
.badge.processing { background: #eef2ff; color: #3b4bb5; }
|
||
/* published 是单表发布模型的「已通过」（旧值 approved 已被 published 取代）。 */
|
||
.badge.published, .badge.approved, .badge.done { background: #e6f7ec; color: #1a7f43; }
|
||
.badge.rejected, .badge.failed { background: #fdeaea; color: #c0392b; }
|
||
.badge.dup { background: #f3e8ff; color: #6b21a8; }
|
||
.badge.free { background: #eef2ff; color: #3b4bb5; }
|
||
.badge.vip { background: #fff4e0; color: #a85b00; }
|
||
.kind {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
padding: 1px 7px;
|
||
border-radius: 10px;
|
||
background: #eef2ff;
|
||
color: #3b4bb5;
|
||
}
|
||
.kind.street { background: #eafaf0; color: #1a7f43; }
|
||
.down { display: inline-block; padding: 2px 8px; background: #fdeaea; color: #c0392b; border-radius: 10px; font-size: 12px; }
|
||
|
||
/* ---------- 卡片（首页入口） ---------- */
|
||
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid #e2e2e3;
|
||
border-radius: 10px;
|
||
padding: 18px;
|
||
text-decoration: none;
|
||
color: #111;
|
||
display: block;
|
||
transition: border-color .15s, transform .15s;
|
||
}
|
||
.card:hover { border-color: #111; transform: translateY(-1px); }
|
||
.card .t { font-size: 15px; font-weight: 600; }
|
||
.card .d { color: #777; font-size: 13px; margin-top: 6px; }
|
||
.chips { margin-top: 10px; }
|
||
.chip { display: inline-block; background: #111; color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 10px; margin: 0 6px 6px 0; }
|
||
|
||
/* ---------- 图片网格（审核 / 图集） ---------- */
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
}
|
||
.cell {
|
||
background: #fff;
|
||
border: 1px solid #e6e6e7;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
/* 细节图 / 副图：明显的靛蓝边框 + 淡蓝底，和主图一眼区分开 */
|
||
.cell.det { background: #eef2ff; border: 2px solid #818cf8; }
|
||
/* 副图默认隐藏，点对应主图上的「显示副图」才展开（逐组，不会一次全开） */
|
||
.cell.det { display: none; }
|
||
.cell.det.shown { display: flex; }
|
||
.cell.selected { border-color: #111; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); }
|
||
/* 缩略图统一 2:3，与站内素材比例一致；点击看大图由 admin.js 接管 */
|
||
.cell .thumb {
|
||
position: relative;
|
||
display: block;
|
||
width: 100%;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: #f1f1f2;
|
||
cursor: zoom-in;
|
||
}
|
||
.cell .thumb img, .cell > img { width: 100%; display: block; aspect-ratio: 2 / 3; object-fit: cover; }
|
||
.cell > img { cursor: zoom-in; }
|
||
.cell .thumb::after {
|
||
content: "点击看大图";
|
||
position: absolute;
|
||
right: 6px;
|
||
bottom: 6px;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
background: rgba(0, 0, 0, .62);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
opacity: 0;
|
||
transition: opacity .15s;
|
||
}
|
||
.cell .thumb:hover::after { opacity: 1; }
|
||
/* 角色标签统一做成胶囊徽标：主图绿、细节图靛蓝，颜色编码一眼可分 */
|
||
.cell .role {
|
||
align-self: flex-start;
|
||
margin: 6px 8px 0;
|
||
padding: 2px 9px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #1a7f43;
|
||
background: #e6f7ec;
|
||
}
|
||
.cell.det .role { color: #fff; background: #4338ca; }
|
||
.cell .nm { display: block; padding: 2px 8px 6px; font-size: 12px; color: #555; word-break: break-all; }
|
||
.cell .acts { padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
|
||
.cell .acts button, .cell .acts .btn { margin: 0; flex: 1 1 auto; padding: 7px 8px; font-size: 13px; }
|
||
.btn {
|
||
display: inline-block;
|
||
flex: 1 1 auto;
|
||
margin: 0;
|
||
padding: 7px 10px;
|
||
background: #fff;
|
||
color: #111;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.btn:hover { border-color: #111; }
|
||
.toggle-det { background: #eef2ff; border: 1px solid #818cf8; color: #4338ca; }
|
||
|
||
/* ---------- 行内操作按钮组（列表行 / 审核操作） ---------- */
|
||
/* 把原先「编辑 · 通过 · 驳回 · 下架」那种用中点分隔的散落按钮，
|
||
收敛成一组紧凑胶囊按钮：编辑是描边链接，通过=绿、驳回=红、下架=琥珀描边。 */
|
||
.ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||
.ops .inline { display: inline-flex; margin: 0; padding: 0; }
|
||
.ops .view {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
color: #111;
|
||
background: #fff;
|
||
}
|
||
.ops .view:hover { border-color: #111; }
|
||
.op {
|
||
margin: 0;
|
||
padding: 5px 11px;
|
||
font-size: 13px;
|
||
border-radius: 6px;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
.op-primary { background: #1a7f43; border-color: #1a7f43; color: #fff; }
|
||
.op-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
|
||
.op-warn { background: #fff; border-color: #e0a800; color: #8a6d00; }
|
||
.op-primary:hover, .op-danger:hover { opacity: .9; }
|
||
.op-warn:hover { background: #fff8e6; }
|
||
|
||
/* 审核操作区（编辑页底部的通过 / 驳回）同款胶囊按钮组 */
|
||
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
|
||
.review-actions .inline { display: inline-flex; margin: 0; padding: 0; }
|
||
.chk {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
flex: 1 1 auto;
|
||
font-size: 12px;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
padding: 5px 6px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
}
|
||
.chk:hover { border-color: #111; }
|
||
.chk input { margin: 0; }
|
||
|
||
/* ---------- 看大图弹层（<dialog>，initZoom 依赖 #zoom-modal / #zoom-img） ---------- */
|
||
#zoom-modal {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
max-width: 94vw;
|
||
max-height: 94vh;
|
||
}
|
||
#zoom-modal::backdrop { background: rgba(0, 0, 0, .82); }
|
||
#zoom-img {
|
||
display: block;
|
||
max-width: 94vw;
|
||
max-height: 94vh;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
cursor: zoom-out;
|
||
}
|
||
|
||
/* ---------- 底部批量操作条 ---------- */
|
||
.batchbar {
|
||
position: sticky;
|
||
bottom: 0;
|
||
background: #fff;
|
||
border: 1px solid #e6e6e7;
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
margin-top: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
|
||
z-index: 15;
|
||
}
|
||
.batchbar button { margin: 0; }
|
||
.batchbar .spacer { flex: 1; }
|
||
|
||
/* ---------- 分页 ---------- */
|
||
.pager { margin: 18px 0; display: flex; gap: 12px; align-items: center; }
|
||
.pager a { padding: 7px 14px; border: 1px solid #ccc; border-radius: 6px; text-decoration: none; background: #fff; }
|
||
.pager a:hover { border-color: #111; }
|
||
.pager a.off { color: #bbb; border-color: #eee; pointer-events: none; }
|
||
|
||
/* ---------- 大图查看层（admin.js 用） ---------- */
|
||
.lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 100;
|
||
background: rgba(0, 0, 0, .88);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32px;
|
||
}
|
||
.lightbox[hidden] { display: none; }
|
||
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||
.lightbox .lb-close,
|
||
.lightbox .lb-prev,
|
||
.lightbox .lb-next {
|
||
position: absolute;
|
||
background: rgba(255, 255, 255, .92);
|
||
color: #111;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
}
|
||
.lightbox .lb-close { top: 18px; right: 18px; }
|
||
.lightbox .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
|
||
.lightbox .lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
|
||
.lightbox .lb-cap {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16px;
|
||
text-align: center;
|
||
color: #eee;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ---------- 窄屏 ---------- */
|
||
@media (max-width: 720px) {
|
||
.bar { padding: 10px 14px; }
|
||
.bar-title { font-size: 13px; }
|
||
.main { padding: 0 14px; margin-top: 16px; }
|
||
.row { flex-direction: column; gap: 0; }
|
||
.grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||
}
|