/* ============================================================ CloudProbe 面板样式 设计语言：柔和圆角 + 极浅描边 + 多层淡阴影 + 蓝紫渐变主色 双主题：由 控制 ============================================================ */ /* ---------------------------------------------------------- 1. 设计变量 */ :root { /* 品牌色 */ --primary: #4f6cf7; --primary-2: #8b5cf6; --primary-soft: #eef1ff; /* 语义色 */ --green: #10b981; --green-soft: #e7f8f1; --orange: #f59e0b; --orange-soft: #fef6e7; /* 「软橙底上的橙色文字」必须单独一个令牌。 直接用 --orange 当文字只有 2.0:1 —— 那是一个 11px 的徽章， 远低于 AA 要求的 4.5:1，观感就是「一片糊掉的黄字」。 这个值在 #fef6e7 上是 6.6:1。 */ --orange-ink: #92400e; --red: #ef4444; --red-soft: #fdeeee; --cyan: #06b6d4; --cyan-soft: #e6f8fb; --violet: #8b5cf6; --violet-soft: #f2ecff; /* 表面与线条 */ --bg: #f3f5f9; --panel: #ffffff; --panel-2: #fafbfd; --panel-3: #f4f6fa; --track: #eaedf4; --border: #e7eaf2; --border-2: #d8ddea; --glow-1: rgba(79, 108, 247, .10); --glow-2: rgba(139, 92, 246, .09); /* 文字。 --muted 用在 10.5~11.5px 的标签上，比正文小得多，必须单独保证可读性： 旧值 #8b93a5 在卡片底 #f4f6fa 上只有 2.85:1，远低于 WCAG AA 要求的 4.5:1， 实际观感就是「一片发灰的字」。换成 #646a77 后是 5.02:1（白底 5.43:1）， 仍明显浅于 --text-2，层级没有被压平。 --muted-2 只用于占位符、悬停描边、离线状态点这类「非信息性」位置， 所以只做适度提亮（2.17 → 3.08），不追求达到 AA。 */ --text: #161922; --text-2: #4b5364; --muted: #646a77; --muted-2: #8b93a5; /* 阴影 */ --sh-1: 0 1px 2px rgba(22, 25, 34, .05); --sh-2: 0 1px 2px rgba(22, 25, 34, .05), 0 8px 20px -10px rgba(22, 25, 34, .14); --sh-3: 0 12px 32px -12px rgba(22, 25, 34, .22), 0 2px 6px rgba(22, 25, 34, .05); --sh-primary: 0 6px 16px -6px rgba(79, 108, 247, .55); /* 几何 */ --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --sidebar-w: 222px; /* 终端始终为深色，不受主题影响 */ --term-bg: #15171e; --term-fg: #d7dbe4; --term-ok: #5fd39a; --term-er: #ff8b8b; color-scheme: light; } [data-theme="dark"] { --primary: #6d86ff; --primary-2: #a78bfa; --primary-soft: rgba(109, 134, 255, .14); --green: #34d399; --green-soft: rgba(52, 211, 153, .14); --orange: #fbbf24; --orange-soft: rgba(251, 191, 36, .14); /* 深色下橙字本来就够亮，软橙底又很暗，直接复用 --orange 就有 7.7:1。 */ --orange-ink: #fbbf24; --red: #f87171; --red-soft: rgba(248, 113, 113, .14); --cyan: #22d3ee; --cyan-soft: rgba(34, 211, 238, .14); --violet: #a78bfa; --violet-soft: rgba(167, 139, 250, .14); --bg: #0e1015; --panel: #171a21; --panel-2: #1c2029; --panel-3: #21252f; --track: #262b36; --border: #252a35; --border-2: #333a48; --glow-1: rgba(109, 134, 255, .10); --glow-2: rgba(167, 139, 250, .09); /* 深色下最差的底色不是面板本身而是 --panel-3（#21252f，标签/进度条轨道在用）： 旧值 #7b8496 在它上面只有 4.07:1，同样不达标。换成 #8c96aa 后为 5.15:1。 */ --text: #e9ebf1; --text-2: #b4bbc9; --muted: #8c96aa; --muted-2: #6f7a8e; --sh-1: 0 1px 2px rgba(0, 0, 0, .3); --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -12px rgba(0, 0, 0, .6); --sh-3: 0 16px 40px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4); --sh-primary: 0 6px 18px -6px rgba(109, 134, 255, .45); color-scheme: dark; } /* Nebula：玻璃拟态。半透明的浅色面板浮在深色照片背景之上。 --blur 是关键——参考实现（Komari 主题）用的正是 blur(64px)， 这是它那种「背景被彻底揉成一片柔光」质感的来源。 */ [data-theme="nebula"] { --primary: #6d5bd0; --primary-2: #9b7bf0; --primary-soft: rgba(109, 91, 208, .16); /* 语义色整体压深一档：面板是浅色玻璃，浅色系的文字/图标会糊掉 */ --green: #0b8f5a; --green-soft: rgba(16, 185, 129, .20); --orange: #b8720a; --orange-soft: rgba(245, 158, 11, .22); /* 星云是浅色玻璃底，--orange 在软橙底上只有 3.0:1。 再压深一档到 #8a4d00，按「22% 橙叠在浅色玻璃上」算出来是 5.2:1。 */ --orange-ink: #8a4d00; --red: #cf3131; --red-soft: rgba(239, 68, 68, .20); --cyan: #0b8299; --cyan-soft: rgba(6, 182, 212, .20); --violet: #7443d6; --violet-soft: rgba(139, 92, 246, .20); /* 背景交给 #bg-layer，所有面板一律半透明 */ --bg: transparent; --panel: rgba(255, 255, 255, .58); --panel-2: rgba(255, 255, 255, .42); --panel-3: rgba(255, 255, 255, .30); --track: rgba(255, 255, 255, .52); --border: rgba(255, 255, 255, .55); --border-2: rgba(255, 255, 255, .80); --glow-1: rgba(255, 255, 255, .06); --glow-2: rgba(167, 139, 250, .12); /* 蓝调街景亮暗变化大，玻璃面板上的文字比普通浅色主题再压深一档， 小标签和表格表头也保持足够的对比度。 */ --text: #0d1320; --text-2: #283247; --muted: #3b4659; --muted-2: #566276; --sh-1: 0 1px 2px rgba(10, 14, 26, .10); --sh-2: 0 2px 6px rgba(10, 14, 26, .14), 0 10px 30px -12px rgba(10, 14, 26, .30); --sh-3: 0 18px 48px -16px rgba(6, 10, 22, .48), 0 2px 8px rgba(10, 14, 26, .18); --sh-primary: 0 8px 20px -8px rgba(109, 91, 208, .55); --blur: 64px; /* 大面板毛玻璃半径 */ --blur-card: 22px; /* 节点卡片数量多，用较小半径，视觉几乎无差但省 GPU */ color-scheme: light; } /* ---------------------------------------------------------- 2. 基础 */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* macOS 的灰阶抗锯齿会让半透明玻璃上的细字显得发虚；星云主题改用更实的字形。 */ [data-theme="nebula"] body { -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; } /* 空状态、表头、表单标签等大量使用 .muted；在玻璃背景上增加一点字重， 让“暂无通知渠道”这类必要提示不再像背景噪点。 */ [data-theme="nebula"] .muted, [data-theme="nebula"] .field-label, [data-theme="nebula"] table.tbl th, [data-theme="nebula"] .kv-line .k { font-weight: 550; } /* 加载动画（index.html loading 状态） */ @keyframes spin { to { transform: rotate(360deg); } } [data-theme="nebula"] #loading { animation: none; /* 星云主题下背景图可能还没加载，避免闪烁 */ } /* 页面角落的柔和光晕，避免大色块过于死板 */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 460px at 8% -8%, var(--glow-1), transparent 62%), radial-gradient(760px 420px at 102% -4%, var(--glow-2), transparent 58%); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { letter-spacing: -.01em; } svg { display: block; } .num { font-variant-numeric: tabular-nums; } /* 键盘焦点：统一成主色描边。 不写这条就吃浏览器默认的 auto 描边 —— 实测是 1px 的 #101010，落在深色主题的面板 （--panel #171a21）上对比度只有约 1.1:1，等于完全没有焦点提示； 在浅色主题下也只是根细细的黑线，和这套圆角柔边的设计语言不搭。 只在 :focus-visible 生效，所以鼠标点击不会平白多出一圈描边。 */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 文本输入类已经有自己的高亮环（边框变色 + 3.5px 柔光），只补复选框 */ input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 滚动条 */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; } /* ---------------------------------------------------------- 3. 演示提示条 */ #demo-bar { display: none; } body.demo #demo-bar { display: block; position: relative; z-index: 5; text-align: center; font-size: 12.5px; padding: 6px 12px; background: linear-gradient(90deg, rgba(79,108,247,.10), rgba(139,92,246,.10)); color: var(--primary); border-bottom: 1px solid var(--border); } /* ---------------------------------------------------------- 4. 布局 */ /* 100vh 在移动端是「地址栏收起时的高度」，地址栏一露出来底部就会被切掉 （实测侧栏高度已经比可视区多 10px）。100dvh 跟随动态视口，写两行做降级。 */ #app { display: flex; min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; } #sidebar { width: var(--sidebar-w); flex: 0 0 auto; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; } /* 品牌区：渐变方块 + 白色心跳线 */ .brand { display: flex; align-items: center; gap: 10px; padding: 17px 18px 15px; font-weight: 700; font-size: 16px; color: var(--text); } .brand::before { content: ""; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 13 8 13 10.2 6.5 13.8 18 16 13 21 13'/%3E%3C/svg%3E") center / 17px no-repeat, linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: var(--sh-primary); } #nav { flex: 1; overflow-y: auto; padding: 2px 12px 12px; } #nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin: 2px 0; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px; font-weight: 500; transition: background .16s, color .16s, box-shadow .16s; } #nav a svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; } #nav a:hover { background: var(--panel-3); color: var(--text); } #nav a:hover svg { opacity: 1; } #nav a.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 600; box-shadow: var(--sh-primary); } #nav a.active svg { opacity: 1; } /* 侧栏底部用户信息 */ #nav-user { margin: 0 12px 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; } #nav-user:empty { display: none; } #nav-user::before { content: ""; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: var(--sh-primary); } #main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---------------------------------------------------------- 5. 顶栏 */ #topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 11px 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .tb-left { display: flex; align-items: center; gap: 10px; } .tb-left .site-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding-right: 4px; } .tb-stats { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .tb-stat { display: flex; flex-direction: column; gap: 1px; padding: 0 14px; position: relative; } .tb-stat + .tb-stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--border); } .tb-stat .l { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; white-space: nowrap; } .tb-stat .v { font-size: 13.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; } .tb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; } #content { padding: 20px; flex: 1; } /* ---------------------------------------------------------- 6. 卡片与标题 */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-1); padding: 16px; } .page-title { font-size: 17.5px; font-weight: 700; margin: 0 0 14px; } .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .page-head .page-title { margin: 0; } /* ---------------------------------------------------------- 7. 按钮 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-radius: var(--radius-sm); padding: 7px 15px; font-size: 13px; font-weight: 550; box-shadow: var(--sh-primary); transition: filter .16s, transform .08s, box-shadow .16s, background .16s; white-space: nowrap; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .btn svg { width: 15px; height: 15px; } .btn.ghost { background: var(--panel); color: var(--text-2); border-color: var(--border-2); box-shadow: var(--sh-1); } .btn.ghost:hover { background: var(--panel-3); color: var(--text); filter: none; } .btn.ghost.paused { color: var(--orange); border-color: var(--orange); } .btn.danger { background: var(--panel); color: var(--red); border-color: var(--border-2); box-shadow: var(--sh-1); } .btn.danger:hover { background: var(--red-soft); border-color: var(--red); filter: none; } .btn.sm { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-xs); box-shadow: none; } .btn.icon-only { padding: 7px 9px; } /* 主题切换按钮：三个图标常驻 DOM，靠 CSS 按 data-theme 决定显示哪一个 */ .theme-toggle .ic-sun, .theme-toggle .ic-moon, .theme-toggle .ic-glass { width: 16px; height: 16px; } .theme-toggle .ic-sun, .theme-toggle .ic-moon, .theme-toggle .ic-glass { display: none; } [data-theme="light"] .theme-toggle .ic-sun { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: block; } [data-theme="nebula"] .theme-toggle .ic-glass { display: block; } /* 登录页的悬浮主题按钮（该页没有顶栏，不给入口就会卡在 Nebula 里出不来） */ .login-theme { position: fixed; top: 18px; right: 18px; z-index: 5; } /* 输入控件 */ .inp, select.inp, textarea.inp { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 13px; font-family: inherit; background: var(--panel); color: var(--text); transition: border-color .16s, box-shadow .16s, background .16s; } .inp::placeholder { color: var(--muted-2); } .inp:hover { border-color: var(--muted-2); } .inp:focus, select.inp:focus, textarea.inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-soft); } textarea.inp { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; resize: vertical; } select.inp { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; } /* ---------------------------------------------------------- 8. 统计卡片 */ .stats-grid { display: grid; gap: 11px; margin-bottom: 16px; /* 这里一共 8 张卡。用 auto-fit + minmax 的话列数由可用宽度决定、并不整除 8 —— 实测 1400px 屏上是 7 列，第 8 张「未恢复告警」被挤到第二行独占一格， 右边空出 954px，看起来像布局崩了。改成显式列数，只保留能整除 8 的档位。 */ grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat-box { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; min-width: 0; } .sb-icon { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .sb-icon svg { width: 16px; height: 16px; } .sb-body { min-width: 0; flex: 1; } .stat-box .l { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-box .v { font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .stat-box .vs { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 图标色调 */ .tone-blue { background: var(--primary-soft); color: var(--primary); } .tone-green { background: var(--green-soft); color: var(--green); } .tone-cyan { background: var(--cyan-soft); color: var(--cyan); } .tone-violet { background: var(--violet-soft); color: var(--violet); } .tone-orange { background: var(--orange-soft); color: var(--orange-ink); } .tone-red { background: var(--red-soft); color: var(--red); } /* ---------------------------------------------------------- 9. 工具条 */ .toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .toolbar .inp { width: auto; min-width: 168px; } /* ---------------------------------------------------------- 10. 节点卡片 */ .node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; } .node-card { cursor: pointer; position: relative; overflow: hidden; padding: 15px 16px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .node-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--cyan)); opacity: .85; } .node-card.offline::after { background: linear-gradient(90deg, var(--muted-2), var(--border-2)); } .node-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-2); } /* 离线节点：卡片上留下的数据是「最后一次上报」的残影。 只降一点点透明度是不够的——一条绿色的 34% 进度条还挂在那儿， 一眼扫过去很容易把已经掉线的机器误读成「跑得好好的」。 所以连同进度条一起灰掉，让「在线」这件事在颜色层面就能区分。 这里覆盖的是 --c1/--c2 两个渐变变量，而不是直接写 background， 这样不必跟 .bar-fill.warn / .danger 甚至 nebula 主题抢优先级。 */ .node-card.offline { opacity: .88; } .node-card.offline:hover { opacity: 1; } .node-card.offline .bar-fill { --c1: var(--muted-2); --c2: var(--border-2); } .nc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nc-name { font-weight: 650; font-size: 14.5px; } .nc-sub { color: var(--muted); font-size: 11.5px; margin: 5px 0 12px; } /* 状态点：带呼吸光晕 */ .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--green); box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: pulse 2.4s infinite; } .dot.off { background: var(--muted-2); box-shadow: none; animation: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* 标签 */ .tag { font-size: 11px; background: var(--panel-3); color: var(--text-2); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; white-space: nowrap; } .tag.grp { background: var(--primary-soft); color: var(--primary); border-color: transparent; } /* --------- 国旗 / 系统图标 / 地区 --------- */ /* 国旗 SVG 与系统图标都来自 MIT 许可的 PurCarte 主题，均为本地文件，不走 CDN */ .flag { width: 18px; height: 13px; flex: 0 0 auto; object-fit: cover; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .12); } .os-ic { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; opacity: .92; } .flag-lg { width: 23px; height: 17px; border-radius: 3px; } .os-ic-lg { width: 19px; height: 19px; } /* 表格里「图标 + 系统名」的单元格 */ .os-cell { display: inline-flex; align-items: center; gap: 6px; } /* 卡片副标题（地区 · 系统）：图标和文字要基线对齐 */ .nc-sub { display: flex; align-items: center; gap: 5px; } .nc-sub .pin { display: inline-flex; flex: 0 0 auto; opacity: .7; } .nc-sub .pin svg { width: 12px; height: 12px; display: block; } /* Nebula 卡片里副标题紧贴规格条，不要留出默认的下边距 */ .node-card.neb .nc-sub { margin: 4px 0 0; } /* --------- 点亮地区 --------- */ .lit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 15px; margin-bottom: 14px; } .lit-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .lit-title { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .lit-title svg { width: 14px; height: 14px; flex: 0 0 auto; } .lit-head b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .lit-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; } .lit-list { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; } .lit-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--border); white-space: nowrap; } /* 必须排在 .flag 之后：两者特异性相同，靠顺序决定谁生效 */ .lit-item .lit-flag { width: 15px; height: 11px; } .lit-item em { font-style: normal; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .lit-item.unknown { color: var(--muted); padding-left: 9px; } .lit-item.unknown svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .65; } .lit-item.unknown em { color: var(--muted); } /* 进度条 */ .bar-row { display: grid; grid-template-columns: 36px 1fr 58px; align-items: center; gap: 9px; margin: 7px 0; } .bar-label { font-size: 11.5px; color: var(--muted); } .bar { height: 6px; background: var(--track); border-radius: 99px; overflow: hidden; } .bar-fill { --c1: var(--green); --c2: #6ee7b7; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .5s cubic-bezier(.4, 0, .2, 1); } .bar-fill.warn { --c1: var(--orange); --c2: #fcd34d; } .bar-fill.danger { --c1: var(--red); --c2: #fca5a5; } .bar-val { font-size: 11.5px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 卡片底部信息网格 */ /* 卡片上的「本周期流量」条。 颜色全走主题令牌，所以浅色 / 深色 / 星云三套主题都不用单独适配； 星云那套的卡片是半透明玻璃，另外补一层更淡的白底。 */ .nc-period { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-xs); background: var(--panel-3); font-size: 11.5px; color: var(--muted); } [data-theme="nebula"] .nc-period { background: rgba(255, 255, 255, .07); } .nc-period .p-k { flex: 0 0 auto; } .nc-period .p-v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .nc-period .p-d { color: var(--muted-2); font-variant-numeric: tabular-nums; } .nc-period .p-days { margin-left: auto; white-space: nowrap; } .nc-period.urgent { background: var(--orange-soft); } .nc-period.urgent .p-days { color: var(--orange-ink); font-weight: 600; } /* 节点列表里的「到期 / 本周期」单元格 */ .due-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; } .due-cell .ln { display: flex; align-items: baseline; gap: 5px; } .due-cell b { font-weight: 600; font-variant-numeric: tabular-nums; } .due-cell .sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .due-cell.urgent b { color: var(--orange); } /* 「年付」标记：这类节点的到期日和流量重置日差得很远， 不加标记的话「28 天后重置」会被误读成「快到期了」。 */ .due-cell .cyc { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; line-height: 14px; white-space: nowrap; } /* 超配额：整个倒计时转红，比只在进度条上变色更容易被扫到 */ .due-cell.over b { color: var(--red); } /* 配额进度条。只在设了配额（traffic_quota > 0）的节点上出现。 颜色全走主题令牌，所以浅色 / 深色 / 星云三套主题都不用单独适配。 flex: 1 0 100% 让它独占一整行 —— .nc-period 是 wrap 的， 想跟在「本周期 12.7 GB … 24 天后重置」后面同一行会挤成一团。 */ .quota { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; margin-top: 2px; } .quota .q-bar { flex: 1 1 auto; min-width: 56px; height: 4px; background: var(--track); border-radius: 999px; overflow: hidden; } .quota .q-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .3s ease; } .quota .q-txt { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted-2); } .quota.warn .q-bar > i { background: var(--orange); } .quota.warn .q-txt { color: var(--orange); font-weight: 600; } .quota.over .q-bar > i { background: var(--red); } .quota.over .q-txt { color: var(--red); font-weight: 600; } [data-theme="nebula"] .quota .q-bar { background: rgba(255, 255, 255, .16); } @media (prefers-reduced-motion: reduce) { .quota .q-bar > i { transition: none; } } /* 表单里的「数值 + 单位」并排（流量配额） min-width: 0 不能少：否则输入框在窄屏会把 select 挤出容器。 */ .inline-2 { display: flex; gap: 8px; align-items: center; } .inline-2 > input { flex: 1 1 auto; min-width: 0; } .inline-2 > select { flex: 0 0 auto; width: auto; } .nc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); } .nc-foot > div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; } .nc-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------------------------------------------------- 11. 表格 */ table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); /* 这里必须是 clip 而不是 hidden。 overflow:hidden 会把表格自身变成一个滚动容器，而表格的高度又等于内容高度、 永远滚不动 —— 里面的 position:sticky 表头因此没有任何可移动空间，等于死代码 （实测滚动时 th.top 与 table.top 一比一同步下移：162→82→2→-66，从未吸附）。 clip 同样能按圆角裁掉行背景，但不创建滚动容器，表头才吸得住。 两个值的浏览器支持面基本一致，可以放心用。 */ overflow: clip; box-shadow: var(--sh-1); } table.tbl th, table.tbl td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--border); } table.tbl th { color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; background: var(--panel-2); /* 吸附位置 = 顶栏实际高度（由 app.js 的 syncTopbarH 写入）。 写 0 的话表头会钻到顶栏底下被盖住（顶栏 z-index 20，表头只有 1）。 三个主题的顶栏高度并不一样，所以不能写死，留 61px 只是 JS 跑起来前的兜底。 */ position: sticky; top: var(--topbar-h, 61px); z-index: 1; } table.tbl tbody tr:last-child td { border-bottom: none; } table.tbl tbody tr { transition: background .14s; } table.tbl tbody tr:hover td { background: var(--panel-2); } /* 表格的横向滚动容器（由 app.js 的 setupTableScroll() 自动包一层）。 宽表在窄屏上撑破整页是真的会发生的：实测「节点管理」表的 min-content 宽是 559px， 放进 390px 的屏里，整页 horizontal scrollWidth 变成 573 —— 比视口多出 193px， 页面能左右拖，表头和顶栏也跟着错位。 只在窄屏开启滚动：宽屏上这个容器不创建滚动容器，表头的 position:sticky 才仍然 相对视口吸附（见上面 table.tbl th 的注释）。窄屏代价是表头不再吸附，可接受。 */ .tbl-wrap { max-width: 100%; } @media (max-width: 900px) { .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* 横拖到头时别把整个页面带着一起滚 */ } /* 让表格按内容宽度展开（而不是被压到容器宽），列才不会被挤成一列一个字 */ .tbl-wrap > table.tbl { width: max-content; min-width: 100%; } /* 表体圆角由外层接管，避免滚动时左右边缘露白 */ .tbl-wrap > table.tbl { border-radius: var(--radius); } /* 窄屏必须把表头改回 static。 .tbl-wrap 一旦 overflow-x:auto 就成了滚动容器（overflow-y 会被计算成 auto， 显式写 clip 也没用，实测 Edge 会降级成 hidden），而 table.tbl th 上挂着 position:sticky; top:var(--topbar-h) —— 于是"吸附线"变成了容器内的 102px， 表头被硬生生压到第一行数据**下面**（实测 th.top 比 table.top 大 102px）。 这里横向滚动优先，表头不再吸附；宽屏（>900px）容器不滚，吸附照常生效。 试过的另一条路：给容器加 overflow-y:clip 想保留吸附 —— Edge 实测无效，已排除。 */ .tbl-wrap > table.tbl th { position: static; } /* 冻结首列：宽表横滑时「名称」一直在，否则要滑到最右看操作、再滑回来才知道改的是哪台。 单元格必须给不透明底色，不然横向滑过的列会从底下透出来。 top:auto 不能漏 —— 基础规则给的 top:var(--topbar-h) 会继续生效， 首列一 sticky 就又被那条 102px 的吸附线压下去（实测截图里「名称」跑到了第二行）。 */ .tbl-wrap > table.tbl th:first-child, .tbl-wrap > table.tbl td:first-child { position: sticky; left: 0; top: auto; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); /* 和后面滚过去的列之间留一道分隔线 */ } .tbl-wrap > table.tbl thead th:first-child { background: var(--panel-2); z-index: 2; } } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .muted { color: var(--muted); } /* 开关 */ .switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 auto; } /* 不能用 display:none —— 那会让复选框彻底退出 Tab 顺序，开关就变成纯鼠标控件了。 改成铺满整个开关的透明覆盖层：照样能聚焦、能吃到直接点击（它是 label 的子元素）。 选择器要带 [type="checkbox"]：下面第 16 节还有一条同特异性的 `input[type="checkbox"] { width:14px; height:14px }`，只写 `.switch input` 会被它压成 14×14。 */ .switch > input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } /* 这一条的优先级刚好压过第 2 节给复选框的通用焦点环，避免出现内外两圈描边 */ .switch > input[type="checkbox"]:focus-visible { outline: none; } .switch > input[type="checkbox"]:focus-visible + .sl { outline: 2px solid var(--primary); outline-offset: 2px; } .switch .sl { position: absolute; inset: 0; background: var(--border-2); border-radius: 99px; transition: background .2s; } .switch .sl::before { content: ""; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .switch input:checked + .sl { background: linear-gradient(135deg, var(--primary), var(--primary-2)); } .switch input:checked + .sl::before { transform: translateX(17px); } /* 键值行（账号信息这类简单展示） */ .kv-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .kv-line:last-of-type { border-bottom: none; } .kv-line .k { color: var(--muted); } /* 徽章 */ .badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 99px; background: var(--panel-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .badge.firing { background: var(--red-soft); color: var(--red); border-color: transparent; } .badge.resolved { background: var(--green-soft); color: var(--green); border-color: transparent; } .badge.up { background: var(--green-soft); color: var(--green); border-color: transparent; } .badge.down { background: var(--panel-3); color: var(--muted); } .badge.done { background: var(--panel-3); color: var(--text-2); } .badge.running { background: var(--primary-soft); color: var(--primary); border-color: transparent; } /* 节点在线状态单独两个类。 之前表格里「在线」用的是裸 .badge（灰底，没有任何正向信号）， 「离线」借了 .badge.firing（那是「告警中」的语义），跟总览卡片上的绿色状态点也对不上。 节点状态和任务/告警状态是两套语义，不该共用类名。 */ .badge.on { background: var(--green-soft); color: var(--green); border-color: transparent; } .badge.off { background: var(--red-soft); color: var(--red); border-color: transparent; } /* 「重试中」：探测失败但还没到连续失败阈值。 必须是琥珀色，不能借 .off 的红——偶发一次超时就翻红，用户很快就会 学会无视这个颜色，真故障来的时候也看不见了。 */ .badge.warn { background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; } /* 等宽字体 + 单行省略。用在「拨测地址」这类可能很长的字段上： 不省略的话，一条长 URL 会把整张表格的列宽撑开，后面几列全被挤扁。 */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .ellip { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* 说明条：放在页面标题下面，讲清楚这个页面在做什么。 不能用 --muted 之外的颜色，它是 12.5px 的正文级说明，不是小字标签。 */ .hint-box { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 10px 13px; margin-bottom: 14px; color: var(--text-2); font-size: 12.5px; line-height: 1.75; } /* 空状态：告诉用户下一步该做什么，而不是留一片空白 */ .empty-box { background: var(--panel); border: 1px dashed var(--border-2); border-radius: var(--radius); padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px; } /* 弹窗里的一行统计（可用率 / 探测次数 / 平均响应） */ .mon-stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 12.5px; } .mon-stat .k { color: var(--muted); } .mon-stat b { color: var(--text); font-variant-numeric: tabular-nums; margin-right: 8px; } /* 表格里的命令、令牌等代码片段 */ .tbl code, td code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--text-2); background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; word-break: break-all; } /* ---------------------------------------------------------- 12. 节点详情 */ .detail-header { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; flex-wrap: wrap; } .detail-header h2 { margin: 0; font-size: 20px; } .detail-header .sub { color: var(--muted); font-size: 13px; } .info-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; margin: 14px 0 18px; padding: 15px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-1); } .info-table .it { font-size: 12.5px; display: flex; gap: 8px; min-width: 0; } .info-table .it .k { color: var(--muted); flex: 0 0 auto; } .info-table .it span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 「连接地址」行。它和上面那些行不一样： 值可能长达 128 字符（跳板机 / 带端口的域名写法），所以： · grid-column: 1 / -1 —— 让它独占一整行。挂在网格的某个格子里时，一行有 5 列，地址会被压成「depl…」，而这一栏存在的唯一意义就是能看清、能复制； · b 允许截断，超长时也不会把卡片撑破（完整值另有 title 兜底）； · 来源标注和复制按钮固定宽度不参与收缩——窄屏下按钮被地址挤掉的话， 这行就只剩个没法用的地址了。 */ .info-table .it.addr { align-items: center; grid-column: 1 / -1; } .info-table .it.addr b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .info-table .it.addr .addr-src { flex: 0 0 auto; font-size: 11px; color: var(--muted); } .info-table .it.addr .btn { flex: 0 0 auto; } /* 时间范围：分段控件 */ .range-bar { display: inline-flex; gap: 3px; margin-bottom: 14px; padding: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--sh-1); } .range-bar button { border: none; background: transparent; color: var(--text-2); border-radius: 99px; padding: 5px 15px; font-size: 12.5px; font-weight: 550; transition: background .16s, color .16s, box-shadow .16s; } .range-bar button:hover { background: var(--panel-3); color: var(--text); } .range-bar button.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: var(--sh-primary); } .charts { display: grid; grid-template-columns: 1fr; gap: 14px; } .chart { width: 100%; height: 300px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-1); } /* ---------------------------------------------------------- 13. 渠道卡片 */ .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; } .ch-card { display: flex; flex-direction: column; } .ch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ch-head > span:first-child { font-weight: 650; font-size: 14.5px; } .ch-type { font-size: 11px; color: var(--muted); background: var(--panel-3); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; } .ch-body { margin-top: 9px; font-size: 11.5px; color: var(--muted); word-break: break-all; } .ch-actions { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); display: flex; gap: 6px; flex-wrap: wrap; } .test-result { margin-top: 9px; font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 9px 10px; white-space: pre-wrap; word-break: break-all; color: var(--text-2); font-family: ui-monospace, Consolas, monospace; } /* ---------------------------------------------------------- 14. 告警时间线 */ .timeline { display: flex; flex-direction: column; gap: 10px; } .evt { display: flex; gap: 12px; } .evt .bar-col { width: 3px; border-radius: 99px; background: var(--muted-2); flex: 0 0 auto; } .evt.critical .bar-col { background: linear-gradient(180deg, var(--red), #fca5a5); } .evt.warning .bar-col { background: linear-gradient(180deg, var(--orange), #fcd34d); } .evt.info .bar-col { background: linear-gradient(180deg, var(--primary), var(--primary-2)); } .evt.resolved .bar-col { background: linear-gradient(180deg, var(--green), #6ee7b7); } .evt .ev-body { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--sh-1); transition: box-shadow .16s, border-color .16s; } .evt .ev-body:hover { box-shadow: var(--sh-2); border-color: var(--border-2); } .evt.resolved .ev-body { opacity: .72; } .evt .ev-title { font-weight: 620; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .evt .ev-meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; gap: 14px; flex-wrap: wrap; } /* ---------------------------------------------------------- 16. 表单 / 弹窗 */ .field { display: block; margin-bottom: 13px; } .field-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; font-weight: 550; } .field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; } /* 渠道/节点的多选列表（告警规则页在用），不是任务页专用 */ .check-list { display: flex; flex-direction: column; gap: 7px; } .check-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); } input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; } .modal-overlay { position: fixed; inset: 0; z-index: 100; padding: 16px; background: rgba(14, 17, 24, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; animation: fade .16s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 490px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-3); animation: pop .18s cubic-bezier(.2, .9, .3, 1.1); } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); font-weight: 680; font-size: 15px; } .icon-btn { border: none; background: none; font-size: 19px; line-height: 1; color: var(--muted); padding: 2px 4px; border-radius: var(--radius-xs); } .icon-btn:hover { background: var(--panel-3); color: var(--text); } .modal-body { padding: 16px 18px; } .modal-foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--panel-2); position: sticky; bottom: 0; } .install-cmd { background: var(--term-bg); color: var(--term-fg); font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 12px 13px; border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; margin: 9px 0; border: 1px solid var(--border-2); } .warn-box { background: var(--orange-soft); border: 1px solid transparent; color: var(--orange); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; margin-top: 9px; font-weight: 500; } .token-box { font-family: ui-monospace, Consolas, monospace; word-break: break-all; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; } /* ---------------------------------------------------------- 17. Toast */ /* bottom 让开手势条 / 刘海屏的安全区，否则最后一条 toast 会被系统 UI 压住 */ #toast-wrap { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 9px; z-index: 200; } .toast { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; box-shadow: var(--sh-3); max-width: 350px; transition: opacity .3s, transform .3s; } .toast.error { border-left-color: var(--red); color: var(--red); } .toast.success { border-left-color: var(--green); color: var(--green); } .toast.hide { opacity: 0; transform: translateY(8px); } /* ---------------------------------------------------------- 18. 登录页 */ .login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 1; } .login-form { width: 100%; max-width: 372px; padding: 28px 26px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-3); } .login-form::before { content: ""; display: block; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 13 8 13 10.2 6.5 13.8 18 16 13 21 13'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: var(--sh-primary); } .login-form h1 { font-size: 21px; margin: 0 0 3px; } .login-form .desc { color: var(--muted); font-size: 12.5px; margin-bottom: 20px; } /* ---------------------------------------------------------- 19. 响应式 */ .menu-btn { display: none; border: 1px solid var(--border-2); background: var(--panel); color: var(--text-2); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; } @media (max-width: 900px) { #sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sh-3); } body.nav-open #sidebar { transform: translateX(0); } .menu-btn { display: inline-flex; } /* 抽屉展开时的遮罩。注意必须挂在 #main 上，不能挂 body：`#app` 自带 `position:relative; z-index:1`，构成了一个层叠上下文，body 级伪元素的 z-index 是在 #app **之外**比较的 —— 结果遮罩会盖住整个 #app（含侧栏）， backdrop-filter 把抽屉自己的导航文字也糊了（截图里一片虚）。 挂在 #main 上就回到 #app 这个上下文里：#sidebar(60) > 遮罩(55) > #topbar(20)。 */ body.nav-open #main::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(9, 13, 22, .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* 抽屉展开时锁住背景滚动，否则手指在遮罩上一划，底下的页面跟着滚 */ body.nav-open { overflow: hidden; } /* 指标条：标签和数值改成并排（原来竖排 38px 高，现在 21px），顶栏少占 17px。 竖向空间在手机上比横向金贵，这条本身就是横向滚动的。 另外 .tb-stat 必须禁止收缩（flex-shrink 默认 1）：只写 nowrap 的话容器确实 不换行，但子项会被压扁、标签文字自己折行 —— 实测这条因此涨到 113px 高、 单个标签折到 5 行，顶栏整体 194px，吃掉手机视口两成。 */ .tb-stats { width: 100%; order: 3; margin-top: 6px; flex-wrap: nowrap; overflow-x: auto; } .tb-stats::-webkit-scrollbar { height: 0; } .tb-stat { padding: 0 12px; flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 5px; } .tb-stat .l { font-size: 11.5px; } .tb-stat:first-child { padding-left: 0; } /* 顶栏本身也压一压：18px 的行间距在窄屏上正好凑出多出来的那一行 */ #topbar { gap: 10px; padding: 9px 14px; } #content { padding: 14px; } /* 触摸目标：手机上没有鼠标指针，按钮太矮很容易点空 */ .btn { padding: 9px 14px; } .row-actions { gap: 8px; } .row-actions .btn { padding: 8px 11px; } /* 表格里的链接（节点名、渠道名）只有 20px 高，补点纵向内边距 */ table.tbl td a { display: inline-block; padding: 4px 0; } /* 开关视觉尺寸保持 38x21（改大了跟桌面端不一致），但把点击热区纵向撑开 4px。 单元格自身有 11px 内边距，所以不会盖到相邻行上。 */ .switch input { inset: -4px 0; } } @media (max-width: 620px) { /* 同样要能整除 8，改成 2 列（原来是 auto-fit，会排出 3 列 → 末行落单） */ .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .node-grid, .ch-grid { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 32px 1fr 52px; } /* 顶栏按钮收成纯图标，三个都保留。纵向留 9px 让触摸目标接近 40px 高， 和上面 ≤900 那档的 .btn 保持一致（写 7px 会把它压回 31px）。 */ .tb-right .btn { padding: 9px 11px; } .tb-right .btn > span { display: none; } .menu-btn { padding: 8px 11px; } #demo-bar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-title { font-size: 16.5px; } /* toast 在窄屏铺满，350px 的 max-width 在 320px 屏上会横向溢出 */ #toast-wrap { left: 14px; right: 14px; } .toast { max-width: none; } } /* ============================================================ Nebula 主题：玻璃拟态 ------------------------------------------------------------ 与参考实现保持一致的三个要点： 1. 全屏照片背景 + 半透明面板，面板靠 backdrop-filter 把背景揉成一片柔光； 2. 面板底色是「半透明白」而非纯白，四周一圈发丝级亮边； 3. 信息密度高：指标用细轨道条，明细用「左标签 / 右数值」两列。 颜色令牌已在上面的 [data-theme="nebula"] 里换过，这里只补结构性的差异。 ============================================================ */ /* --------- 背景层：浅色/深色主题下整体隐藏，零开销 --------- */ #bg-layer { display: none; } [data-theme="nebula"] #bg-layer { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* 图片没加载出来时的兜底底色，避免白屏 */ [data-theme="nebula"] body { background: #0d1119; } /* 平面的角落光晕在照片背景上会显脏，关掉 */ [data-theme="nebula"] body::before { display: none; } #bg-image { position: absolute; inset: -2%; /* 略微外扩，避免 cover 取整时露出边缘 */ /* JS 尚未运行时先显示内置蓝调街道；运行后统一改由 /background 输出。 */ background-image: url("bg/night-street.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; } /* 压暗用的遮罩：上浅下深，保证任何一张背景图下文字都够清晰。 默认背景是张明亮的街景，这组数值本来就是照着这类照片调的。 */ #bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 13, 24, .14) 0%, rgba(9, 13, 24, .24) 50%, rgba(7, 10, 19, .40) 100%); } /* --------- 面板毛玻璃 --------- */ [data-theme="nebula"] .card, [data-theme="nebula"] .toolbar, [data-theme="nebula"] .modal, [data-theme="nebula"] #sidebar, [data-theme="nebula"] #topbar { backdrop-filter: blur(var(--blur-card)); -webkit-backdrop-filter: blur(var(--blur-card)); } /* 侧栏/顶栏/弹窗面积大且位置固定，用完整半径，质感更接近参考实现 */ [data-theme="nebula"] #sidebar, [data-theme="nebula"] #topbar, [data-theme="nebula"] .modal { backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } [data-theme="nebula"] #sidebar { border-right: 1px solid var(--border); } [data-theme="nebula"] #topbar { border-bottom: 1px solid var(--border); } /* 页面标题直接压在照片上，白字 + 投影才读得清 */ [data-theme="nebula"] .page-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 6px 22px rgba(0, 0, 0, .35); } /* --------- 汇总横栏：一整条玻璃，内部多列「标签 / 数值」 --------- */ .neb-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 11px 16px; padding: 13px 18px; margin-bottom: 14px; } .neb-sum-item { min-width: 0; } .neb-sum-item .l { font-size: 11.5px; color: var(--muted); white-space: nowrap; } .neb-sum-item .v { font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .neb-sum-item .v small { font-size: 11.5px; font-weight: 500; color: var(--muted); } /* --------- 分组筛选药丸 --------- */ /* 说明：类名带 neb- 前缀是历史原因，但它其实**三个主题都在用** （总览页的分组筛选只在星云主题出现，设置页的主题/背景图选择则是三个主题共用）。 */ .neb-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; } .neb-pills .k { font-size: 12px; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } .neb-pill { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); padding: 4px 13px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--panel); transition: background .15s ease, border-color .15s ease, color .15s ease; } .neb-pill:hover { background: var(--panel-3); border-color: var(--muted-2); } /* 选中态。 旧实现把这个「已选中」写成了半透明白（rgba(255,255,255,.90)），那是给星云主题压照片用的； 可设置页把它放进白卡片里，白底白药丸 —— 选中态就只剩「文字变蓝」这一个线索， 看起来像链接而不是选中项，实测几乎分辨不出来。改成主色淡底 + 主色描边。 */ .neb-pill.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; } /* 星云主题：药丸是浮在照片上的，实底白玻璃比浅色染底更清楚，保留原样 */ [data-theme="nebula"] .neb-pill { background: rgba(255, 255, 255, .32); border-color: var(--border); backdrop-filter: blur(var(--blur-card)); -webkit-backdrop-filter: blur(var(--blur-card)); } [data-theme="nebula"] .neb-pill:hover { background: rgba(255, 255, 255, .52); border-color: var(--border); } [data-theme="nebula"] .neb-pill.on { background: rgba(255, 255, 255, .90); border-color: var(--border-2); } /* --------- 节点卡片 --------- */ /* 规格条：核心数 / 内存 / 磁盘 */ .neb-spec { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 10px 0 6px; padding: 7px 10px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .44); border-radius: 10px; } .neb-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .neb-chip svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .62; } /* 明细两列：左标签 / 右数值 */ .neb-rows { display: flex; flex-direction: column; margin-top: 8px; } .neb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; } .neb-row + .neb-row { border-top: 1px solid rgba(255, 255, 255, .36); } .neb-row .k { color: var(--muted); white-space: nowrap; flex: 0 0 auto; } .neb-row .v { font-weight: 600; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 轨道条：底色比面板更亮一档，填充走主色渐变 */ [data-theme="nebula"] .bar { background: rgba(255, 255, 255, .62); height: 8px; } /* 浅色主题配的渐变尾巴（#6ee7b7 那种薄荷绿）落在半透明轨道上会发白， 这里换成同色系、明度差更小的一组，填充色才立得住 */ [data-theme="nebula"] .bar-fill { --c1: var(--green); --c2: #35c98c; } [data-theme="nebula"] .bar-fill.warn { --c1: var(--orange); --c2: #e0a01e; } [data-theme="nebula"] .bar-fill.danger { --c1: var(--red); --c2: #e86565; } /* 顶端一道更亮的高光，模拟玻璃的边缘反光 */ [data-theme="nebula"] .card, [data-theme="nebula"] #sidebar, [data-theme="nebula"] #topbar { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .62); } [data-theme="nebula"] .node-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } [data-theme="nebula"] .node-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .70); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .7); } /* 总览页的统计卡已经把这几个指标列全了，顶栏再挂一份就是同屏两组一模一样的数字。 原来这条只对星云主题生效（那边叫汇总横栏），浅色/深色主题下一直重复着， 这里统一到所有主题；其余页面顶栏是唯一的展示位，保留。 */ body.route-overview .tb-stats { display: none; } /* 演示提示条：底色用的是 --primary-soft，在照片上几乎不可见，单独给它一块够实的玻璃。 注意选择器必须带 body.demo —— 基础规则是 `body.demo #demo-bar`（特异性 0,1,1,1）， 只写 `[data-theme="nebula"] #demo-bar`（0,1,1,0）是压不过它的。 */ [data-theme="nebula"] body.demo #demo-bar { background: rgba(255, 255, 255, .84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--text-2); border-bottom: 1px solid var(--border); } /* --------- 移动端 --------- */ @media (max-width: 900px) { /* 侧栏变成抽屉后是浮层，需要完全不透明才盖得住背景 */ [data-theme="nebula"] #sidebar { background: rgba(247, 249, 253, .96); } } @media (max-width: 620px) { .neb-summary { grid-template-columns: repeat(2, 1fr); padding: 12px 14px; } .neb-spec { gap: 4px 10px; } } /* ---------------------------------------------------------- 20. 减少动效 */ /* 尊重系统的「减少动态效果」偏好。这份样式表原先完全没有处理它： 在线状态点的呼吸脉冲是**每张卡片一个**常驻动画（50 台机器就是 50 个）， 卡片悬浮位移、弹窗进出场、进度条过渡也都关不掉，对晕动症用户和低端设备都不友好。 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* 悬浮位移是纯装饰，直接取消（只缩短时长的话仍会「跳」一下） */ .node-card:hover { transform: none; } [data-theme="nebula"] .node-card:hover { transform: none; } /* 状态点保留颜色，只去掉那圈呼吸光晕 */ .dot { box-shadow: none; } }