/* mihomo 测活中心 — 面板样式 * * 主题：`:root` 是浅色，`[data-theme="dark"]` 覆盖成深色。主题由 app.js 在 * 上设 `data-theme`（localStorage 优先，否则跟随系统），所以这里 * **不要**写 `@media (prefers-color-scheme)` —— 那样用户手动切换就失效了。 * * 契约：本文件只负责外观。一批离线验证脚本用正则解析渲染后的 DOM * （`verify_page.py` 等），它们匹配的是 `class="card"`、``、 * ``、`` 这些**结构字符串**。 * 改样式可以，改结构字符串不行。 */ :root { --bg: #f4f6f9; --bg-grad: radial-gradient(1200px 480px at 50% -200px, #e6ecf7 0%, transparent 70%); --panel: #ffffff; --panel-2: #fafbfd; --line: #e3e7ee; --line-strong: #cfd6e2; --fg: #1a1f29; --fg-soft: #475063; --dim: #6b7488; --accent: #2563eb; --accent-soft: #eaf1ff; --ok: #15803d; --warn: #b45309; --bad: #dc2626; --info: #2563eb; --ok-line: #b6e3c4; --warn-line: #f2d9a8; --bad-line: #f5bcbc; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); --shadow-lg: 0 4px 10px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .07); --r-sm: 7px; --r: 11px; --r-lg: 15px; --ring: 0 0 0 3px rgba(37, 99, 235, .22); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } :root[data-theme="dark"] { --bg: #0d1016; --bg-grad: radial-gradient(1200px 480px at 50% -200px, #1a2436 0%, transparent 70%); --panel: #161a22; --panel-2: #1b2029; --line: #262c38; --line-strong: #333c4c; --fg: #e8ebf1; --fg-soft: #b9c0cf; --dim: #8b94a8; --accent: #4d8bfa; --accent-soft: #17233c; --ok: #3fb950; --warn: #d29922; --bad: #f85149; --ok-line: #1f4d2b; --warn-line: #57431a; --bad-line: #5c2220; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3); --shadow-lg: 0 6px 16px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .35); --ring: 0 0 0 3px rgba(77, 139, 250, .28); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); background-image: var(--bg-grad); background-repeat: no-repeat; color: var(--fg); font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; } .hide { display: none !important; } /* ---------------- 顶栏 ---------------- */ header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 22px; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } header .logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed)); color: #fff; font-size: 15px; box-shadow: var(--shadow); flex: none; } h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: .2px; white-space: nowrap; } header .pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } header .spacer { flex: 1 1 auto; } header .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .pill.ok { color: var(--ok); border-color: var(--ok-line); background: color-mix(in srgb, var(--ok) 8%, transparent); } .pill.bad { color: var(--bad); border-color: var(--bad-line); background: color-mix(in srgb, var(--bad) 8%, transparent); } .pill.warn { color: var(--warn); border-color: var(--warn-line); background: color-mix(in srgb, var(--warn) 9%, transparent); } /* 忙碌 pill 前面的呼吸点：一眼看出「正在跑」，不用读文字。 */ .pill.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 1.4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* 轮次进度条：贴顶栏下沿，只有忙时才有内容。 */ .progress { height: 2px; background: transparent; overflow: hidden; } .progress i { display: block; height: 100%; width: 34%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: slide 1.3s linear infinite; } @keyframes slide { from { transform: translateX(-120%); } to { transform: translateX(320%); } } /* ---------------- 布局 ---------------- */ main { padding: 18px 22px 40px; display: grid; gap: 16px; max-width: 1680px; margin: 0 auto; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; } .panel > h2 { margin: 0; padding: 12px 16px; font-size: 13px; font-weight: 650; letter-spacing: .2px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel-2); } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ---------------- 按钮 / 表单 ---------------- */ button { background: var(--panel); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 13px; cursor: pointer; font-size: 13px; font-family: inherit; line-height: 1.45; transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .06s; } button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } button:active:not(:disabled) { transform: translateY(1px); } button:focus-visible { outline: none; box-shadow: var(--ring); } button:disabled { opacity: .45; cursor: default; } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; box-shadow: var(--shadow); } button.primary:hover:not(:disabled) { color: #fff; background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); } button.icon { padding: 6px 10px; font-size: 14px; line-height: 1.2; } input, select, textarea { background: var(--panel); border: 1px solid var(--line-strong); color: var(--fg); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; font-family: inherit; transition: border-color .14s, box-shadow .14s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } input:disabled, select:disabled { opacity: .5; cursor: not-allowed; } input[type=checkbox] { accent-color: var(--accent); } label { display: flex; flex-direction: column; gap: 5px; color: var(--dim); font-size: 12px; } label.inline { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; } /* ---------------- 概览卡片 ---------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; } .card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px 14px; box-shadow: var(--shadow); overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; } .card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-strong); transition: background .16s; } .card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .card:hover::before { background: var(--accent); } .card .k { color: var(--dim); font-size: 12px; letter-spacing: .2px; } .card .v { font-size: 24px; font-weight: 650; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; } /* ---------------- 表格 ---------------- */ .scroll { overflow: auto; overscroll-behavior: contain; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { color: var(--dim); font-weight: 550; font-size: 12px; position: sticky; top: 0; z-index: 2; background: var(--panel-2); border-bottom: 1px solid var(--line-strong); } th:first-child { padding-left: 16px; } tbody tr { transition: background .1s; } tbody tr:hover td { background: var(--panel-2); } tbody tr:last-child td { border-bottom: 0; } tbody td:first-child { padding-left: 16px; } td.name { max-width: 340px; overflow: hidden; text-overflow: ellipsis; } td.num, .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-size: 12px; } .s-ok { color: var(--ok); } .s-dead { color: var(--bad); } .s-pending { color: var(--warn); } .s-unknown { color: var(--dim); } .trend { letter-spacing: 2px; font-size: 11px; } .trend i { font-style: normal; } .detail { color: var(--dim); font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; } .tiny { font-size: 12px; color: var(--dim); } /* ---------------- 徽章 ---------------- */ .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.7; border: 1px solid var(--line); background: var(--panel-2); color: var(--dim); white-space: nowrap; } .badge.collection { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 9%, transparent); } .badge.sub { color: #8250df; border-color: color-mix(in srgb, #8250df 35%, transparent); background: color-mix(in srgb, #8250df 9%, transparent); } :root[data-theme="dark"] .badge.sub { color: #d2a8ff; } .badge.on { color: var(--ok); border-color: var(--ok-line); background: color-mix(in srgb, var(--ok) 9%, transparent); } .badge.cat-direct { color: var(--ok); border-color: var(--ok-line); background: color-mix(in srgb, var(--ok) 9%, transparent); } .badge.cat-relay { color: var(--warn); border-color: var(--warn-line); background: color-mix(in srgb, var(--warn) 9%, transparent); } .badge.cat-chain { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 9%, transparent); } /* ---------------- 订阅输出 / 通用条 ---------------- */ .urlbox { display: flex; gap: 8px; align-items: center; padding: 9px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .urlbox:last-child { border-bottom: 0; } .urlbox input { flex: 1; min-width: 240px; font-family: var(--mono); font-size: 12px; background: var(--panel-2); } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 14px 16px; } /* ---------------- 日志 ---------------- */ #log { max-height: 250px; overflow: auto; padding: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--dim); line-height: 1.7; } #log div { padding: 1px 0; border-radius: 4px; } #log .warn { color: var(--warn); } #log .error { color: var(--bad); } /* ---------------- 数据源表 ---------------- */ .srcbar { display: flex; gap: 8px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--panel-2); } .srcbar input { flex: 1; min-width: 190px; } #src-table td { vertical-align: middle; } #src-table tr.off td { opacity: .52; } #src-table tr.off td:last-child { opacity: .8; } #src-table input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; } /* 表头的批量开关：点复选框或列名 = 本列全选 / 全不选。只作用于当前渲染出来的行。 */ #src-table th label.thall { flex-direction: row; align-items: center; gap: 5px; color: inherit; font-size: 12px; cursor: pointer; user-select: none; } #src-table th label.thall:hover { color: var(--fg); } #src-table th input[data-all] { margin: 0; flex: none; } .keyinput { width: 132px; font-family: var(--mono); font-size: 12px; padding: 4px 8px; background: var(--panel-2); } /* ---------------- 分类统计 ---------------- */ .catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px 16px; } .catcard { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; background: var(--panel-2); box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s; } .catcard:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .catcard h3 { margin: 0 0 9px; font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 8px; } .catcard .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); } .catcard .big { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.3px; } .catcard .sub { color: var(--dim); font-size: 11px; margin-top: 2px; } .catcard .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; } .catcard .kv span:first-child { color: var(--dim); } .catcard .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .catcard .tag { font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); background: var(--panel); font-variant-numeric: tabular-nums; } .catcard .tags-title { color: var(--dim); font-size: 11px; margin-top: 9px; letter-spacing: .3px; } /* 存活/观察/已死/未测 的比例条 —— 纯 CSS，不引依赖。 */ .catbar { display: flex; height: 5px; border-radius: 999px; overflow: hidden; margin: 9px 0 4px; background: var(--line); } .catbar i { display: block; height: 100%; } .catbar .b-alive { background: var(--ok); } .catbar .b-pending { background: var(--warn); } .catbar .b-dead { background: var(--bad); } .catbar .b-unknown { background: var(--line-strong); } /* ---------------- 结果提示 ---------------- */ #notice { border-left: 3px solid var(--accent); animation: drop .22s ease-out; } #notice.lv-ok { border-left-color: var(--ok); } #notice.lv-warn { border-left-color: var(--warn); } #notice.lv-error { border-left-color: var(--bad); } @keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } #notice .notice-body { padding: 11px 16px 13px; display: grid; gap: 6px; } #notice .notice-msg { font-size: 13px; font-weight: 650; } #notice .notice-msg.ok { color: var(--ok); } #notice .notice-msg.warn { color: var(--warn); } #notice .notice-msg.error { color: var(--bad); } #notice .notice-list { display: grid; gap: 4px; } #notice .notice-line { font-family: var(--mono); font-size: 12px; color: var(--dim); word-break: break-all; padding-left: 10px; border-left: 2px solid var(--line); } #notice .notice-line.ok { color: var(--fg-soft); border-left-color: var(--ok-line); } #notice .notice-line.warn { color: var(--warn); border-left-color: var(--warn-line); } #notice .notice-line.error { color: var(--bad); border-left-color: var(--bad-line); } /* ---------------- 令牌闸门 ---------------- */ .gate { display: grid; place-items: center; padding: 60px 20px; } .gate .box { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 26px 24px; display: grid; gap: 12px; } .gate h2 { margin: 0; font-size: 16px; font-weight: 650; } .gate p { margin: 0; color: var(--dim); font-size: 13px; } .gate .err { color: var(--bad); font-size: 12px; min-height: 16px; } /* ---------------- 窄屏 ---------------- */ @media (max-width: 720px) { header { padding: 10px 14px; gap: 8px; } header .actions { width: 100%; } header .actions button { flex: 1 1 auto; } h1 { font-size: 14px; } main { padding: 14px 14px 32px; gap: 13px; } .cards { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; } .card .v { font-size: 20px; } .panel > h2 { padding: 11px 14px; } .urlbox { padding: 9px 14px; } .urlbox input { min-width: 160px; } #log { padding: 10px 14px; } th, td { padding: 7px 10px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }