/* 北城反作弊 · 后台 — 双主题 (dark = 08 工业石墨灰 / light = 23 浅薰衣草), 通过 切换,localStorage key = "km-theme"。 */ :root, [data-theme="dark"] { /* 08 · 工业石墨灰 — 暖橙 accent + 石墨底 */ --bg: #18181b; --bg-soft: #27272a; --panel: #3f3f46; --border: #3f3f46; --border2: #52525b; --text: #fafafa; --text2: #d4d4d8; --text3: #a1a1aa; --accent: #fb923c; --accent2: #f97316; --accent-rgb: 251,146,60; --green: #84cc16; --green-rgb: 132,204,22; --red: #f87171; --red-rgb: 248,113,113; --yellow: #facc15; --blue: #38bdf8; --blue-rgb: 56,189,248; --btn-text: #18181b; --login-glow: rgba(251,146,60,0.10); --shadow: 0 12px 32px rgba(0,0,0,0.5); --modal-mask: rgba(0,0,0,0.65); } [data-theme="light"] { /* 23 · 浅薰衣草 — 紫 accent + 接近白的薰衣草底 */ --bg: #faf5ff; --bg-soft: #ffffff; --panel: #f3e8ff; --border: #e9d5ff; --border2: #d8b4fe; --text: #3b0764; --text2: #6b21a8; --text3: #9333ea; --accent: #7c3aed; --accent2: #6d28d9; --accent-rgb: 124,58,237; --green: #15803d; --green-rgb: 21,128,61; --red: #b91c1c; --red-rgb: 185,28,28; --yellow: #b45309; --blue: #0369a1; --blue-rgb: 3,105,161; --btn-text: #ffffff; --login-glow: rgba(124,58,237,0.10); --shadow: 0 10px 28px rgba(124,58,237,0.12); --modal-mask: rgba(59,7,100,0.30); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI", "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } button { font: inherit; cursor: pointer; } /* ── Login ────────────────────────────────────────────────────────────── */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, var(--login-glow), transparent 60%) var(--bg); } .login-card { width: 360px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 32px 28px 24px; box-shadow: var(--shadow); } .brand .brand-zh { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; } .brand .brand-en { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1.5px; margin-top: 2px; } .login-card .brand { margin-bottom: 24px; } .login-card form { display: flex; flex-direction: column; gap: 12px; } .login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text3); } .login-card input[type="text"], .login-card input[type="password"] { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; color: var(--text); font-size: 13px; outline: none; } .login-card input:focus { border-color: var(--accent); } .login-card button[type="submit"] { margin-top: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--btn-text); border: none; border-radius: 4px; padding: 9px 0; font-size: 14px; font-weight: 600; } .login-card button[type="submit"]:hover { background: var(--accent2); } .login-card button[type="submit"]:disabled { background: var(--border2); color: var(--text3); cursor: default; } .status { font-size: 12px; min-height: 18px; padding-top: 4px; } .status.err { color: var(--red); } .status.ok { color: var(--green); } .status.warn { color: var(--yellow); } /* ── Dashboard ────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .topbar .brand-zh { margin-right: 6px; } .topbar .brand-en { margin-left: 6px; } .topbar-right { display: flex; align-items: center; gap: 12px; } .badge { background: rgba(var(--accent-rgb), 0.15); border: 1px solid var(--border2); color: var(--accent); padding: 4px 10px; border-radius: 999px; font-size: 12px; } .btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); padding: 5px 14px; border-radius: 4px; font-size: 12px; } .btn-ghost:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--btn-text); border: none; padding: 7px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; } .btn-primary:hover { background: var(--accent2); } .tabs { display: flex; gap: 2px; padding: 0 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .tabs .tab { background: transparent; border: none; color: var(--text3); padding: 12px 18px; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; } .tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tabs .tab:hover { color: var(--text); } main { padding: 24px; } .card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 16px; } .card-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--text); } .card-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .card-toolbar input, .card-toolbar select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 6px 10px; font-size: 12px; outline: none; } .card-toolbar input:focus, .card-toolbar select:focus { border-color: var(--accent); } table { width: 100%; border-collapse: collapse; font-size: 12px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--text3); font-weight: 500; background: var(--panel); position: sticky; top: 0; } tr:hover td { background: rgba(var(--accent-rgb), 0.04); } .tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.5px; } .tag.admin { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); } .tag.operator{ background: rgba(var(--blue-rgb), 0.18); color: var(--blue); } .tag.active { background: rgba(var(--green-rgb), 0.16); color: var(--green); } .tag.used { background: rgba(var(--blue-rgb), 0.16); color: var(--blue); } .tag.expired { background: rgba(var(--red-rgb), 0.16); color: var(--red); } .tag.success { background: rgba(var(--green-rgb), 0.16); color: var(--green); } .tag.fail { background: rgba(var(--red-rgb), 0.16); color: var(--red); } .muted { color: var(--text3); } .mono { font-family: Consolas, "JetBrains Mono", monospace; } .code { font-family: Consolas, "JetBrains Mono", monospace; color: var(--accent); } .row-actions button { background: transparent; border: 1px solid var(--border2); color: var(--text2); border-radius: 4px; padding: 3px 10px; font-size: 11px; margin-right: 6px; } .row-actions button:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text); } .row-actions button.danger { color: var(--red); border-color: rgba(var(--red-rgb), 0.30); } .row-actions button.danger:hover { background: rgba(var(--red-rgb), 0.10); } /* 倒计时态:按钮用绿色提示"已生成成功",外部 span 显示剩余秒数, 两者紧贴 (span 左边距 -2px 抵消 button 的 margin-right 一半,视觉上联动) */ .row-actions button.dv-issue-copied { color: var(--green); border-color: rgba(var(--green-rgb), 0.35); background: rgba(var(--green-rgb), 0.08); } .row-actions button.dv-issue-copied:hover { background: rgba(var(--green-rgb), 0.16); color: var(--green); } .dv-countdown { font-size: 11px; margin-left: -4px; margin-right: 6px; color: var(--text3); user-select: none; } /* 订阅号已被使用态:按钮置灰禁用,文字直接提示"订阅号已使用!" */ .row-actions button.dv-issue-used, .row-actions button.dv-issue-used:hover { color: var(--text3); border-color: var(--border2); background: transparent; cursor: default; opacity: 0.85; } .pagination { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--text3); } .pagination button { background: transparent; border: 1px solid var(--border2); color: var(--text2); border-radius: 4px; padding: 4px 10px; font-size: 12px; } .pagination button:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.10); color: var(--text); } .pagination button:disabled { color: var(--text3); cursor: default; opacity: 0.5; } .empty { padding: 32px; text-align: center; color: var(--text3); } /* ── Modal ───────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--modal-mask); z-index: 100; } .modal.hidden { display: none; } .modal-card { background: var(--bg-soft); border: 1px solid var(--border2); border-radius: 10px; width: 420px; padding: 24px; } .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text); } .km-code { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 18px; font-family: Consolas, monospace; font-size: 22px; font-weight: 700; color: var(--accent); text-align: center; letter-spacing: 2px; margin-bottom: 14px; word-break: break-all; } .km-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); padding: 4px 0; } .km-meta span:last-child { color: var(--text); font-family: Consolas, monospace; } .km-countdown { color: var(--yellow) !important; font-weight: 600; } .km-countdown.warn { color: var(--red) !important; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* ── 软件分发条 (订阅号设备 tab 顶部) ────────────────────────────────── */ .distrib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; font-size: 12px; } .distrib-label { color: var(--text3); font-size: 11px; margin-right: 4px; } .distrib-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; background: var(--bg-soft); border: 1px solid var(--border2); border-radius: 4px; } .distrib-name { color: var(--text); font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .distrib-btn { font-size: 10px; padding: 3px 8px; border-radius: 3px; background: transparent; color: var(--text2); border: 1px solid var(--border2); font-weight: 500; } .distrib-btn:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text); } .distrib-btn.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--btn-text); border: none; padding: 4px 9px; } .distrib-btn.btn-primary:hover { background: var(--accent2); } /* 复制成功/失败提示 — 推到分发条最右边,2.5s 后自动消失 */ .distrib-toast { margin-left: auto; color: var(--green); font-size: 12px; font-weight: 500; padding: 4px 10px; background: rgba(var(--green-rgb), 0.12); border-radius: 4px; animation: distribToastIn 0.18s ease-out; } .distrib-toast.err { color: var(--red); background: rgba(var(--red-rgb), 0.12); } @keyframes distribToastIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* 硬件型号列 — 名称太长截断,悬停 title 看全名 */ .hw-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } /* ── 设备详情弹窗 ────────────────────────────────────────────────────── */ .dd-card { width: 680px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; } .dd-body { flex: 1; overflow-y: auto; padding-right: 6px; } .dd-section { margin-bottom: 14px; } .dd-section-title { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .dd-table { width: 100%; border-collapse: collapse; } .dd-table td { padding: 4px 8px; font-size: 12px; vertical-align: top; border: none; } .dd-table tr:hover td { background: rgba(var(--accent-rgb), 0.04); } .dd-key { color: var(--text3); width: 100px; white-space: nowrap; } .dd-val { color: var(--text); font-family: Consolas, "JetBrains Mono", monospace; word-break: break-all; } /* ── 首页统计卡片 ────────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .stat-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; position: relative; } .stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius: 10px 0 0 10px; } .stat-label { color: var(--text3); font-size: 12px; margin-bottom: 8px; letter-spacing: 0.3px; } .stat-value { color: var(--text); font-size: 36px; font-weight: 700; font-family: Consolas, "JetBrains Mono", monospace; line-height: 1; margin-bottom: 6px; } .stat-meta { color: var(--text3); font-size: 10px; } /* ── 下载命令弹窗 ────────────────────────────────────────────────────── */ .dl-card { width: 640px; max-width: 92vw; } .dl-meta { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; font-size: 13px; } .dl-meta .mono { color: var(--text); word-break: break-all; } .dl-section { margin-bottom: 14px; } .dl-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .dl-label { font-size: 12px; color: var(--text2); font-weight: 600; } .dl-cmd { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin: 0; font-family: Consolas, "JetBrains Mono", monospace; font-size: 12px; color: var(--text); overflow-x: auto; white-space: pre; line-height: 1.5; } .dl-tip { font-size: 11px; line-height: 1.6; padding-top: 6px; } .dl-tip strong { color: var(--yellow); } /* 软件分发列表里的 size / 时间 等弱化色 */ .dl-row-size { color: var(--text3); font-family: Consolas, monospace; } /* Form helpers (user create / edit) */ .form-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .form-row label { width: 80px; color: var(--text3); font-size: 12px; } .form-row input, .form-row select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 6px 10px; font-size: 12px; outline: none; flex: 1; } .form-row input:focus, .form-row select:focus { border-color: var(--accent); } /* ── 主题切换按钮 (顶栏右侧) ─────────────────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border2); color: var(--text2); border-radius: 4px; padding: 5px 8px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; } .theme-toggle:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text); }