/* ================================================================== TVSpider 源管理后台 — 主题化样式 浅色为默认；深色通过 切换（localStorage 持久化） ================================================================== */ :root { --bg: #eef2f9; --bg-2: #f6f8fc; --bg-3: #e9edf5; --panel: #ffffff; --panel-2: #f7f9fd; /* 分块淡色：block-1 主面板 / block-2 次级块（卡片·嵌套·交错）/ block-3 三级内容区 */ --block-1: #ffffff; --block-2: #f3f6fc; --block-3: #edf1f9; /* 功能块色板（采集源等卡片独立底色）：淡蓝/淡紫/淡青/淡绿/淡橙/淡粉 */ --fc-1: #eef3fd; --fc-2: #f4effb; --fc-3: #eaf8f7; --fc-4: #eef7ec; --fc-5: #fdf3ec; --fc-6: #fdf0f3; --border: #e5e9f2; --border-strong: #d3dae6; --line: #e3e7f0; --text: #171b26; --text-1: #20263a; --text-2: #5b6476; --text-3: #8b94a8; --primary: #4f46e5; --primary-2: #6f6bf3; --primary-weak: #eef0fe; --primary-line: #dedffb; --accent: #4f46e5; --danger: #e11d48; --success: #16a34a; --muted: #8b94a8; --up: #e11d48; --up-weak: #fdeef1; --up-line: #f6c9d4; --down: #16a34a; --down-weak: #e8f7ef; --down-line: #c5e8d7; --warn: #b45309; --warn-bg: #fef6e7; --warn-line: #f4e2ba; --radius: 12px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(23,28,45,.05), 0 8px 24px rgba(23,28,45,.06); --shadow-lg: 0 18px 50px rgba(23,28,45,.16); --row-hover: #eef2ff; --row-zebra: #fafbfe; --track: #e9edf4; --input-bg: #ffffff; --btn-bg: #ffffff; --chip-bg: #f2f5fa; --glass: rgba(255,255,255,.84); --grad-primary: linear-gradient(135deg, #4f46e5, #7c3aed); --grad-soft: linear-gradient(135deg, #eef0fe, #f6f2ff); --ring: rgba(79,70,229,.16); --head-bg: #f7f9fd; } html[data-theme="dark"] { --bg: #0d1220; --bg-2: #151b2b; --bg-3: #1b2336; --panel: #151b2a; --panel-2: #1a2234; --block-1: #151b2a; --block-2: #1c2538; --block-3: #232e46; --fc-1: #1a2440; --fc-2: #262041; --fc-3: #16303a; --fc-4: #183426; --fc-5: #33291c; --fc-6: #331f2a; --border: #232c42; --border-strong: #303c58; --line: #222b3f; --text: #e8ecf5; --text-1: #f4f6fb; --text-2: #9aa6ba; --text-3: #6d7890; --primary: #7c7df5; --primary-2: #9394f8; --primary-weak: #262c55; --primary-line: #3a4079; --accent: #8f90f7; --danger: #f2557b; --success: #3ecf8e; --muted: #6d7890; --up: #f2557b; --up-weak: #381d2b; --up-line: #5c2a40; --down: #3ecf8e; --down-weak: #13352a; --down-line: #21503c; --warn: #e3a44e; --warn-bg: #322819; --warn-line: #57451f; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35); --shadow-lg: 0 20px 55px rgba(0,0,0,.55); --row-hover: #222b45; --row-zebra: #121827; --track: #232c40; --input-bg: #101627; --btn-bg: #1c2539; --chip-bg: #1b2336; --glass: rgba(21,27,42,.84); --grad-primary: linear-gradient(135deg, #6366f1, #8b5cf6); --grad-soft: linear-gradient(135deg, #222a4d, #1c2440); --ring: rgba(124,125,245,.25); --head-bg: #1a2234; } * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } html, body { height: 100%; } body { margin: 0; color: var(--text); background: radial-gradient(1100px 520px at 12% -8%, rgba(99,102,241,.10), transparent 60%), radial-gradient(900px 480px at 108% 4%, rgba(139,92,246,.09), transparent 55%), var(--bg); background-attachment: fixed; font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-theme="dark"] body { background: radial-gradient(1100px 520px at 12% -8%, rgba(99,102,241,.14), transparent 60%), radial-gradient(900px 480px at 108% 4%, rgba(139,92,246,.12), transparent 55%), var(--bg); } /* ---------- 布局：顶部导航（玻璃拟态） + 主区域 ---------- */ .layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .sidebar { flex: none; position: relative; z-index: 40; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 18px; padding: 10px 20px; } .side-nav { flex: 1; display: flex; align-items: center; justify-content: safe center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .side-nav::-webkit-scrollbar { height: 0; display: none; } .side-nav .tab { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; cursor: pointer; color: var(--text-2); font-weight: 500; font-size: 13.5px; border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .1s; } .side-nav .tab .ic { width: 16px; text-align: center; opacity: .8; font-size: 13px; } .side-nav .tab:hover { background: var(--bg-2); color: var(--text); } .side-nav .tab:active { transform: scale(.97); } .side-nav .tab.active { background: var(--grad-soft); color: var(--primary); border-color: var(--primary-line); font-weight: 600; box-shadow: 0 2px 10px var(--ring); } .side-nav .tab.active .ic { opacity: 1; } .main-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; margin-left: auto; } .topbar-left { display: flex; align-items: center; gap: 8px; } .topbar-right { display: flex; align-items: center; gap: 7px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--down); flex: none; box-shadow: 0 0 0 3px var(--down-weak); } .dot.busy { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: pulse 1.1s infinite; } @keyframes pulse { 50% { opacity: .25; } } main { padding: 18px 22px 26px; max-width: 1680px; width: 100%; margin: 0 auto; flex: 1; min-height: 0; overflow-y: auto; } .view { display: none; } .view.active { display: flex; flex-direction: column; min-height: 100%; animation: fade .22s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } } /* ---------- 卡片 ---------- */ .panel { background: var(--block-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; } /* 分块淡色层级：嵌套面板递进一档 */ .panel .panel { background: var(--block-2); border-color: var(--line); } .panel .panel .panel { background: var(--block-3); } /* 同层交错：两/三列网格与设置卡列表中偶数块用次级色，形成分块区分 */ .grid-2 > .panel:nth-child(even), .grid-3 > .panel:nth-child(even), .dc-grid > .panel:nth-child(even), .set-list > .panel:nth-child(even) { background: var(--block-2); } /* 面板头与主体轻微分色（次级块内嵌 head 时再递进一档） */ .panel .panel .panel-head { background: var(--block-3); border-bottom-color: var(--line); } .set-list { display: flex; flex-direction: column; gap: 12px; } .set-list > .panel { margin-bottom: 0; } .panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel); } .panel-head h3 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: center; } .panel-head h3::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--grad-primary); margin-right: 9px; flex: none; } .panel-head .spacer { margin-left: auto; } .panel-body { padding: 14px 16px; } .stat-grid { display: grid; gap: 12px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .stat { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s, border-color .16s; } .stat::before { /* 统计卡右上角水印图标 */ content: attr(data-ic); position: absolute; right: 10px; top: 8px; font-size: 26px; opacity: .15; filter: saturate(.7); pointer-events: none; } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary-line); } .stat.accent { border-left: 3px solid var(--primary); } .stat.good { border-left: 3px solid var(--down); } .stat.bad { border-left: 3px solid var(--up); } .stat.warn { border-left: 3px solid var(--warn); } .stat .label { color: var(--text-2); font-size: 12.5px; margin-bottom: 5px; } .stat .value { font-size: 24px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat .sub { color: var(--text-3); font-size: 12px; margin-top: 4px; } .stat.accent .value { color: var(--primary); } .stat.good .value { color: var(--down); } .stat.bad .value { color: var(--up); } .stat.warn .value { color: var(--warn); } /* ---------- 首页告警条 ---------- */ .alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--up-line); background: var(--up-weak); color: var(--up); } .alert.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); } .alert .a-msg { flex: 1; min-width: 200px; } .alert .a-time { color: var(--text-3); font-size: 12px; } .alert .btn { flex: none; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* 互转文本框撑满各自半栏（grid-2 已各占 1fr，textarea 默认按 cols 宽度过窄） */ .ta { width: 100%; box-sizing: border-box; resize: vertical; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 1080px) { .grid-2, .grid-3, .dash-top { grid-template-columns: 1fr; } } /* 首页两列：左侧地图稍宽，并占满视图剩余高度 */ .dash-top { grid-template-columns: 1.15fr 1fr; flex: 1 1 auto; min-height: 0; } /* 首页左侧地图：拉伸与右侧（聚合+抓取）等高 */ .dash-top > .panel { display: flex; flex-direction: column; min-height: 0; } .dash-top > .panel .panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 10px; } .dash-top .china-map { flex: 1; display: flex; flex-direction: column; min-height: 0; } .dash-top .china-map svg { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; max-height: none; min-height: 0; display: block; } /* 首页右侧列：聚合分析 + 抓取历史 纵向堆叠，按 1.4:1 均分剩余高度 */ .dash-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dash-right .panel { margin-bottom: 0; min-height: 0; } /* 聚合分析占满剩余高度（与左列地图等高） */ .dash-right .panel:first-child { flex: 1.4 1 0; display: flex; flex-direction: column; } .dash-right .panel:first-child .panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .dash-right .panel:first-child .table-wrap { flex: 1; min-height: 0; max-height: none; } /* 抓取历史：随视图高度自适应（与聚合分析均分） */ .dash-right .panel:last-child { flex: 1 1 0; display: flex; flex-direction: column; } .dash-right .panel:last-child .panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .dash-right .panel:last-child .table-wrap { flex: 1; min-height: 0; max-height: none; } /* 抓取历史去横向滚动：固定列宽 + 溢出省略 */ #tbl-runs { table-layout: fixed; width: 100%; } #tbl-runs th, #tbl-runs td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tbl-runs th:nth-child(1), #tbl-runs td:nth-child(1) { width: 25%; } #tbl-runs th:nth-child(2), #tbl-runs td:nth-child(2) { width: 25%; } #tbl-runs th:nth-child(n+3), #tbl-runs td:nth-child(n+3) { width: 8%; } /* ---------- 表单控件 ---------- */ input, select, textarea, button { font: inherit; color: inherit; } .input, .select { height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); outline: none; min-width: 0; transition: border-color .15s, box-shadow .15s, background .15s; } .input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); } .input::placeholder { color: var(--text-3); } .select { padding-right: 26px; cursor: pointer; } textarea.input { height: auto; padding: 8px 11px; resize: vertical; } .btn { height: 38px; padding: 0 17px; border-radius: 9px; cursor: pointer; font-size: 13.5px; border: 1px solid var(--border-strong); background: var(--btn-bg); color: var(--text); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s, filter .15s; } .btn:hover { background: var(--bg-2); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn.primary { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 4px 14px var(--ring); } .btn.primary:hover { filter: brightness(1.07); background: var(--grad-primary); } .btn.primary:active { filter: brightness(.97); } .btn.danger { color: var(--up); border-color: var(--up-line); background: var(--up-weak); } .btn.danger:hover { background: var(--up-line); } .btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; } .btn.mini { height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; gap: 4px; } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--bg-2); } .toolbar { display: flex; flex-wrap: wrap; gap: 9px 10px; align-items: center; } .toolbar .grow { flex: 1 1 220px; min-width: 170px; } /* 工具栏内分组竖线 / 第二行工具栏间距 */ .grp-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; flex: none; } .toolbar-2row { margin-top: 8px; } .batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; } .batch-bar b { color: var(--accent); } .batch-bar .spacer { flex: 1; } .field { display: flex; flex-direction: column; gap: 5px; } .field > label { font-size: 12.5px; color: var(--text-2); } .lbl { font-size: 12.5px; color: var(--text-2); white-space: nowrap; } .val { font-weight: 600; padding: 7px 0; color: var(--text); border-bottom: 1px dashed var(--bg-3); word-break: break-all; } /* ---------- 组播参考库：省份/运营商分组胶囊 ---------- */ .mc-groups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .mc-card { display: flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; box-shadow: var(--shadow); } .mc-card:hover { border-color: var(--primary-2); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .mc-card.active { border-color: var(--primary); background: var(--primary-weak); } .mc-card .mc-name { font-size: 14px; font-weight: 700; color: var(--text); } .mc-card .mc-sep { color: var(--text-3); font-size: 12px; } .mc-card .mc-isp { font-size: 13px; color: var(--primary); } .mc-card .mc-n { font-size: 12.5px; color: var(--text-3); } .mc-current { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--text-2); } .mc-empty { color: var(--text-3); font-size: 13px; padding: 26px 0; text-align: center; } /* ---------- 表格 ---------- */ .table-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: auto; max-height: calc(100vh - 280px); box-shadow: var(--shadow); } .table-wrap > table { border: 0; } table { width: 100%; border-collapse: collapse; font-size: 13.4px; } thead th { position: sticky; top: 0; z-index: 2; background: var(--head-bg); text-align: left; font-weight: 650; color: var(--text-1); padding: 10px 14px; border-bottom: 2px solid var(--border-strong); white-space: nowrap; letter-spacing: .3px; } thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--primary); } thead th.sortable.sort-active { color: var(--primary); } tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr { transition: background .12s; } tbody tr:nth-child(even) { background: var(--row-zebra); } tbody tr:hover { background: var(--row-hover); } tbody tr.sel { background: var(--primary-weak); } .muted { color: var(--text-3); } /* 语义识别色条：表格左侧强调，区分不同业务表格 */ .table-wrap.tw-sources { border-left: 3px solid var(--primary); } .table-wrap.tw-ref { border-left: 3px solid #0ea5e9; } .table-wrap.tw-sub { border-left: 3px solid var(--down); } .table-wrap.tw-mini { border-left: 3px solid var(--text-3); } .table-wrap.tw-drawer { border-left: 3px solid var(--primary); } /* ---------- 订阅规则表格布局 ---------- */ #tbl-sub { min-width: 860px; } #tbl-sub .st-col { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; } #tbl-sub .st-col > .tag { flex: 0 0 auto; } #tbl-sub td.st-cell { width: 1%; white-space: nowrap; } #tbl-sub .cond-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } #tbl-sub .link-cell { max-width: 360px; } #tbl-sub .link-cell input { width: 100%; box-sizing: border-box; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } #tbl-sub .rowbtns { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; } #tbl-sub .rowbtns .btn.mini { padding: 0 8px; } /* 「更多」下拉 */ .rowmenu { position: relative; display: inline-block; } .rowmenu summary { list-style: none; cursor: pointer; } .rowmenu summary::-webkit-details-marker { display: none; } .rowmenu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 118px; display: flex; flex-direction: column; gap: 4px; } .rowmenu-items .btn.mini { width: 100%; justify-content: flex-start; text-align: left; } /* 聚合分析：整行可点击跳转 */ #tb-agg tr.clickable { cursor: pointer; } #tb-agg tr.clickable:hover { background: var(--primary-weak); } #tb-agg tr.clickable td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.6px; } .nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--chip-bg); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .tag.blue { background: var(--primary-weak); color: var(--primary); border-color: var(--primary-line); } /* 本机信息紧凑标签 */ .host-chips { display: flex; flex-wrap: wrap; gap: 6px; } .host-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .host-chip b { color: var(--text); font-weight: 600; } .tag.green { background: var(--down-weak); color: var(--down); border-color: var(--down-line); } .tag.red { background: var(--up-weak); color: var(--up); border-color: var(--up-line); } .tag.amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .tag.gray { background: var(--chip-bg); color: var(--text-3); } .empty { padding: 46px 20px; text-align: center; color: var(--text-3); } .pager { display: flex; align-items: center; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pager .info { color: var(--text-2); font-size: 13px; } .pager .spacer { margin-left: auto; } /* ---------- 进度条 / 日志 ---------- */ .progress { width: 100%; } .bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--grad-primary); transition: width .3s; } /* 多执行时间编辑 */ .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .tag-list .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 13px; } .tag-list .chip b { font-family: monospace; font-weight: 600; color: var(--primary); } .tag-list .chip button { border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 3px; border-radius: 4px; } .tag-list .chip button:hover { background: var(--danger); color: #fff; } .tag-list .empty { color: var(--text-3); font-size: 12.5px; padding: 2px 0; } .inline-add { display: flex; gap: 8px; align-items: center; } .subhead { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .3px; } .console { background: #0c1220; color: #cfe3f5; border-radius: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.06); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.4px; line-height: 1.65; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-all; } .console .ok { color: #6ee7a8; } .console .err { color: #ff8f8f; } .console .dim { color: #7f8c9b; } /* ---------- 抽屉 ---------- */ .drawer-mask { position: fixed; inset: 0; background: rgba(10, 14, 26, .5); opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 40; } .drawer-mask.show { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1240px, 96vw); background: var(--bg); z-index: 41; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .26s cubic-bezier(.3, .8, .3, 1); display: flex; flex-direction: column; } .drawer.show { transform: none; } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--panel); border-bottom: 1px solid var(--border); } .drawer-head h3 { margin: 0; font-size: 15px; } .drawer-body { padding: 20px; overflow: auto; flex: 1; } .kv { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; font-size: 13.2px; } .kv2 { grid-template-columns: 1fr 1fr; gap: 8px 20px; } .kv2 > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .kv2 dt { color: var(--text-2); flex: none; white-space: nowrap; } .kv2 dd { margin: 0; flex: 1; min-width: 0; word-break: break-all; } .kv dt { color: var(--text-2); } .kv dd { margin: 0; } .kv.compact { gap: 6px 12px; font-size: 12.8px; } /* 数据中心：运行状态一行紧凑展示 */ .dc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12.8px; color: var(--text-2); } .dc-meta b { color: var(--text-1); font-weight: 600; } /* 数据中心：同步开关选项行 */ .sync-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } .sync-opts .opt { display: inline-flex; align-items: center; gap: 6px; } .sync-opts .opt .input { margin-left: 2px; } /* 运行模式分段控件占满宽度 */ .seg-full { display: flex; width: 100%; } .seg-full .seg-btn { flex: 1; text-align: center; } /* 采集源管理：三源卡片 */ .cm-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--block-2); } /* 功能卡按序分配独立淡色背景（采集源卡 / 数据中心卡 / 系统设置卡，浅色低饱和六色循环） */ .grid-2 > .cm-card:nth-child(6n+1), .set-list > .panel.set-card:nth-child(6n+1) { background: var(--fc-1); } .grid-2 > .cm-card:nth-child(6n+2), .set-list > .panel.set-card:nth-child(6n+2) { background: var(--fc-2); } .grid-2 > .cm-card:nth-child(6n+3), .set-list > .panel.set-card:nth-child(6n+3) { background: var(--fc-3); } .grid-2 > .cm-card:nth-child(6n+4), .set-list > .panel.set-card:nth-child(6n+4) { background: var(--fc-4); } .grid-2 > .cm-card:nth-child(6n+5), .set-list > .panel.set-card:nth-child(6n+5) { background: var(--fc-5); } .grid-2 > .cm-card:nth-child(6n+6), .set-list > .panel.set-card:nth-child(6n+6) { background: var(--fc-6); } /* 系统设置卡：面板头透出卡片底色（原为白色与彩色 body 冲突），仅保留底部分隔线 */ .set-card > .panel-head { background: transparent; } .cm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .cm-title { font-weight: 600; font-size: 13.5px; } /* 采集源卡片紧凑化：状态与操作按钮同行，字段间距收窄，减小模块高度 */ .cm-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .cm-state { font-size: 12.5px; color: var(--text-2); } .cm-state b { color: var(--text); font-weight: 600; } .cm-card .field { margin-top: 6px; } .cm-card .field > label { font-size: 12px; } .cm-card .callout { margin: 0 0 7px; } .cm-suspend { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; padding-top: 7px; border-top: 1px dashed var(--border, #e3e6ee); font-size: 13px; } .cm-suspend .hint { color: var(--muted, #8a93a6); } .cm-card .console { margin-top: 8px; max-height: 120px; } /* 采集源卡片紧凑型：去掉独立 label 行、收窄内距，用于参数少的小卡（远程/频道搜索） */ .cm-card.compact { padding: 9px 12px; } .cm-card.compact .cm-card-head { margin-bottom: 5px; } .cm-card.compact .cm-statusbar { margin-bottom: 5px; } /* 采集源管理：全宽单列（v1.6.53 起不再分两列），字段横排平衡高度 */ .cm-list { display: flex; flex-direction: column; gap: 14px; } .cm-list > .cm-card:nth-child(6n+1) { background: var(--fc-1); } .cm-list > .cm-card:nth-child(6n+2) { background: var(--fc-2); } .cm-list > .cm-card:nth-child(6n+3) { background: var(--fc-3); } .cm-list > .cm-card:nth-child(6n+4) { background: var(--fc-4); } .cm-list > .cm-card:nth-child(6n+5) { background: var(--fc-5); } .cm-list > .cm-card:nth-child(6n+6) { background: var(--fc-6); } /* 字段横排：flex-wrap 自动换行，输入框底对齐，平衡各卡高度 */ .cm-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-top: 8px; } .cm-fields > .field { margin-top: 0; flex: 0 1 auto; min-width: 150px; } .cm-fields > .field.grow { flex: 1 1 220px; } .cm-fields > .inline-add { margin-top: 0; } /* 主机端口扫描：竖向布局——状态/操作在上，扫描进度/结果控制台在下（放大可滚动） */ #cm-res-portscan { margin-top: 6px; max-height: 360px; } @media (max-width: 920px) { #cm-res-portscan { max-height: 240px; } } /* ---------- 统一任务状态窗口 ---------- */ .task-window { display: flex; flex-direction: column; gap: 10px; } .tw-row { border: 1px solid var(--border); border-radius: 10px; background: var(--block-2); overflow: hidden; } .tw-row-all { border-left: 3px solid var(--primary); } .tw-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; } .tw-name { font-weight: 600; font-size: 13.5px; } .tw-mode { font-size: 11.5px; color: var(--text-2); background: var(--track); border-radius: 99px; padding: 2px 9px; } .tw-sum { font-size: 12.5px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; } .tw-log { margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border); max-height: 260px; overflow: auto; background: var(--block); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; } .tw-log .ok { color: #6ee7a8; } .tw-log .err { color: #ff8f8f; } .tw-log .dim { color: #7f8c9b; } /* 采集源卡片内的任务状态行：替代原底部「统一任务状态窗口」 */ .cm-card .tw-row.cm-task { margin-top: 8px; } .tw-mode:empty { display: none; } .tw-sum:empty { display: none; } .dc-card { background: var(--block-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .dc-card-h { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .dc-compare dt { color: var(--text-2); } .dc-compare dt.empty, .dc-compare dt.center:empty { height: 1px; } /* ---------- 条形统计 ---------- */ .barlist { display: flex; flex-direction: column; gap: 7px; } .barlist .row { display: grid; grid-template-columns: 86px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; } .barlist .track { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; } .barlist .track > i { display: block; height: 100%; border-radius: 99px; background: var(--grad-primary); } .barlist .num { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; } /* ---------- 中国省份地图 ---------- */ .china-map { padding: 2px; } .map-flex { display: flex; align-items: flex-start; gap: 14px; } .china-map svg { flex: 1 1 auto; min-width: 0; width: 100%; max-height: 600px; height: auto; display: block; } .china-map svg path { transition: filter .18s ease, fill .18s ease; cursor: pointer; } .china-map svg path:hover { filter: brightness(1.05) drop-shadow(0 0 4px rgba(0,0,0,.12)); } .china-map svg text { pointer-events: none; user-select: none; } /* 图例：横向放在地图下方 */ .map-legend { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; font-size: 11.5px; color: var(--text-3); } .map-legend i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } /* 深色主题：地图底色/描边/文字为内联写死，用 CSS 覆盖呈现属性 */ html[data-theme="dark"] .china-map svg rect { fill: #121826 !important; } html[data-theme="dark"] .china-map svg path { stroke: #232c42 !important; } html[data-theme="dark"] .china-map svg path[fill="#eef1f6"] { fill: #1b2336 !important; } html[data-theme="dark"] .china-map svg text { fill: #b6c2d8 !important; stroke: rgba(13,18,32,.85) !important; } /* ---------- 提示 ---------- */ .toast-wrap { position: fixed; top: 78px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; } .toast { background: #1b2230; color: #fff; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 20px rgba(10, 14, 26, .3); font-size: 13px; max-width: 380px; animation: slide .22s ease-out; } .toast.ok { background: linear-gradient(135deg, #0f7a4d, #0b5e3c); border-color: transparent; } .toast.err { background: linear-gradient(135deg, #b42318, #8f1d14); border-color: transparent; } @keyframes slide { from { transform: translateY(-8px); opacity: 0; } } .hint { color: var(--text-2); font-size: 12.5px; } .callout { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--primary); color: var(--text-2); border-radius: 9px; padding: 12px 14px; font-size: 12.8px; line-height: 1.65; } .callout.warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: var(--warn); } .sep { height: 1px; background: var(--border); margin: 16px 0; } .chk { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; } /* 表格内多选框列：垂直居中 + 水平居中对齐排列 */ table th:has(> .chk), table td:has(> .chk) { vertical-align: middle; text-align: center; } /* 分段控件（聚合维度切换） */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-2); padding: 2px; } .seg-btn { border: 0; background: transparent; padding: 5px 13px; font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: 8px; transition: background .15s, color .15s, box-shadow .15s; } .seg-btn + .seg-btn { margin-left: 2px; } .seg-btn.active { background: var(--grad-primary); color: #fff; box-shadow: 0 2px 8px var(--ring); } .seg-btn:hover:not(.active) { background: var(--primary-weak); color: var(--primary); } /* 开关式勾选（定时重抓） */ .switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; } .switch input { width: 16px; height: 16px; accent-color: var(--primary); } /* ---------- 播放器弹窗 ---------- */ .modal { position: fixed; z-index: 70; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); width: min(760px, 94vw); max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-head h3 { margin: 0; font-size: 15px; } .modal-body { padding: 20px; } .icon-btn { border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--text-2); cursor: pointer; padding: 5px 9px; border-radius: 7px; } .icon-btn:hover { background: var(--primary-weak); color: var(--primary); } .modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); } .modal-foot .hint, .modal-body .hint { white-space: normal; word-break: break-all; line-height: 1.5; } .code { background: #0f172a; color: #e2e8f0; border-radius: 9px; padding: 11px 13px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } /* ---- 订阅/模板弹窗与设置子标签 ---- */ .btn.mini { padding: 0 9px; font-size: 12.5px; border-radius: 6px; } .set-card .panel-head h3 { font-size: 14px; } .mask { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(10, 14, 26, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mask[style*="flex"] { display: flex !important; } .mask .modal { opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%,-50%) scale(1) !important; } /* ---- 登录鉴权 ---- */ #login-mask { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; background: radial-gradient(1000px 600px at 18% 8%, rgba(99,102,241,.22), transparent 60%), radial-gradient(900px 600px at 85% 92%, rgba(139,92,246,.20), transparent 55%), linear-gradient(160deg, #12162e, #1b1f3d); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } html[data-theme="light"] #login-mask { background: radial-gradient(1000px 600px at 18% 8%, rgba(99,102,241,.16), transparent 60%), radial-gradient(900px 600px at 85% 92%, rgba(139,92,246,.14), transparent 55%), linear-gradient(160deg, #eef1fc, #e5e8fb); } .login-card { width: 360px; max-width: 86vw; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 18px; padding: 36px 30px; box-shadow: var(--shadow-lg); text-align: center; } .login-logo { width: 58px; height: 58px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; border-radius: 17px; background: var(--grad-primary); box-shadow: 0 12px 28px var(--ring); } .login-sub { color: var(--text-3); font-size: 13px; margin: 0 0 20px; } .login-input { width: 100%; height: 44px; font-size: 15px; text-align: center; margin-bottom: 14px; } .btn.block { width: 100%; height: 44px; font-size: 15px; letter-spacing: 2px; justify-content: center; text-align: center; } .login-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 10px; } /* 小屏隐藏列 */ @media (max-width: 720px) { .hide-sm { display: none !important; } } /* ============================================================ 响应式应用外壳：满高 + 各模块自适应高度 桌面：layout 占满视口，main 内部滚动；数据视图主表格占满剩余高度 ============================================================ */ /* 源管理：主表格占满剩余高度（工具栏、分页条自然高度） */ #view-sources.active > .panel { flex: 0 0 auto; } #view-sources.active > .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; } /* ---------- 响应式：窄屏侧边栏变顶栏、外壳回落为正常滚动 ---------- */ @media (max-width: 920px) { .layout { height: auto; min-height: 100vh; overflow: visible; } .main-wrap { min-height: 0; } main { overflow: visible; } .sidebar { width: 100%; flex: none; position: static; flex-direction: row; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); } .side-nav { flex-direction: row; flex: 1; overflow-x: auto; gap: 6px; } .side-nav .tab { white-space: nowrap; padding: 10px 13px; } .topbar { padding: 0 14px; } main { padding: 16px 14px 24px; } /* 视图回落为自然高度，随页面滚动 */ .view.active { min-height: 0; height: auto; } .dash-top { flex: none; } .dash-top .china-map svg { height: auto; max-height: 60vh; } } @media (max-width: 560px) { .side-nav .tab { gap: 6px; padding: 8px 9px; font-size: 12.5px; } }