diff --git a/web/css/app.css b/web/css/app.css index 6da0b25..12f56f4 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -23,62 +23,20 @@ a:hover{color:var(--accent-glow)} table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:960px} table.data thead th{position:sticky;top:0;background:var(--surface-soft);font-weight:700;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);padding:.7rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap} table.data tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;white-space:nowrap} -/* 防止数值变化导致列抖动:为月流量(7)/当前网络(8)/总流量(9)设置固定宽度并使用等宽数字 */ +/* 防止数值变化导致列抖动 */ table.data th,table.data td{font-variant-numeric:tabular-nums} -/* 月流量(2) 左对齐;当前网络(8)/总流量(9) 居中 */ -#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){ - /* 月流量列:向左贴近协议(减小左 padding),同时加大右 padding 拉开与节点距离 */ - width:128px;min-width:128px;max-width:128px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;padding:0 1.05rem 0 .15rem; -} -/* 节点列加宽,避免被月流量胶囊视觉挤压 */ -#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){ - width:160px;min-width:160px;max-width:160px; -} -/* 协议列继续收紧右侧 padding 与固定宽度 */ -#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){ - padding-right:.14rem;width:78px;min-width:78px;max-width:78px; /* 扩大协议列并恢复适度间距 */ -} -/* 让双色胶囊更靠近协议列 */ -#serversTable tbody td:nth-child(2) .caps-traffic.duo{margin-left:-6px;} /* 向协议方向微移,视觉更靠近;右侧 padding 增大避免靠近节点 */ -#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8), -#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){ - width:132px;min-width:132px;max-width:132px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center; - /* 进一步拉开与 CPU/内存/硬盘 组的视觉距离 */ - padding-right:1.95rem; -} -/* CPU / 内存 / 硬盘 列:居中 + 固定宽度 与仪表盘一致 */ -#serversTable thead th:nth-child(10),#serversTable tbody td:nth-child(10), -#serversTable thead th:nth-child(11),#serversTable tbody td:nth-child(11), -#serversTable thead th:nth-child(12),#serversTable tbody td:nth-child(12){ - width:70px;min-width:70px;max-width:70px;text-align:center;padding-left:1.1rem;padding-right:0; /* 继续右移并贴近右侧列 */ -} /* 月流量胶囊 */ .caps-traffic{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);padding:3px 12px 3px 10px;border-radius:999px;font-size:12px;line-height:1;font-weight:500;position:relative;box-shadow:0 2px 4px -2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03);} .caps-traffic:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 70%);pointer-events:none;} -.caps-traffic .io{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;letter-spacing:.3px;} -.caps-traffic .io.in{color:var(--ok);} -.caps-traffic .io.out{color:var(--accent);} -.caps-traffic .sep{opacity:.4;font-size:11px;display:none;} .caps-traffic.sm{padding:2px 8px 2px 7px;font-size:11px;gap:5px;} -.caps-traffic.sm .io{font-size:11px;} /* 双色胶囊 */ .caps-traffic.duo{background:none;border:0;gap:0;padding:0;box-shadow:none;position:relative;border-radius:999px;overflow:hidden;font-size:12px;} -/* 宽度按内容自适应(不再拉伸占满列),每半边仅为其文本 + padding,可容纳最大 111.1MB */ +/* 宽度按内容自适应,每半边仅为其文本 + padding */ .caps-traffic.duo .half{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:2px 4px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.25; /* 与 .pill 保持一致高度 */ letter-spacing:.25px;color:#fff;font-size:12px;white-space:nowrap;} -/* 双色胶囊配色: - normal (默认): 左绿右蓝 - heavy (>=1000GB 总量): 黄色提醒,不再使用故障红 -*/ -/* normal 初始:淡绿色(入) + 淡蓝色(出) */ .caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;} /* emerald-100 / text-emerald-800 */ -body.light .caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;} .caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;} /* blue-200 / text-blue-900 */ -body.light .caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;} - .caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;} -body.light .caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;} .caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;} -body.light .caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;} /* 半之间分隔线 */ .caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.18);} @@ -108,16 +66,6 @@ table.data tbody tr:hover{background:rgba(59,130,246,.045)} .kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .75rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);border-radius:10px} .kv span{white-space:nowrap} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px} -/* 资源使用百分比色彩标签 */ -/* 回退:移除资源使用百分比彩色标签样式 */ - -/* 详情弹窗三列信息行 */ - -/* 旧 spark 样式已移除,现使用半圆仪表盘 */ -/* 全圆旧样式(保留以便回退) */ -.gauge{--p:0;--col:var(--accent);width:74px;height:74px;position:relative;display:grid;place-items:center;font-size:11px;font-family:ui-monospace,monospace;font-weight:600;color:var(--text);} -.gauge:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--col) calc(var(--p)*1turn),rgba(255,255,255,0.06) 0);mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);border:1px solid var(--border);box-shadow:0 2px 6px -2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);} -.gauge span{position:relative;z-index:1} /* 半圆仪表盘 */ .gauge-half{--p:0;width:60px;height:34px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:ui-monospace,monospace;font-size:10px;font-weight:600;gap:0;color:var(--text);} @@ -131,12 +79,10 @@ table.data tbody tr:hover{background:rgba(59,130,246,.045)} /* 阈值颜色:CPU>=75%、内存>=80%、硬盘>=85% 警告黄,>=90% 危险红 */ .gauge-half[data-warn] path.arc{stroke:var(--warn)} .gauge-half[data-bad] path.arc{stroke:var(--danger)} -/* 指针:以中心(50,50)为原点旋转;半圆角度范围 180deg -> 从 180deg (左) 到 0deg(右) */ .gauge-half span{line-height:1;position:relative;top:-6px;font-size:12px;} /* 亮色模式细化对比度 */ body.light .gauge-half path.track{stroke:color-mix(in srgb,var(--text-dim) 28%,transparent)} body.light .gauge-half path.arc{filter:none} -body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text-dim))} /* status pill */ .pill{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600;border-radius:999px;letter-spacing:.45px;min-width:48px;text-align:center;line-height:1.25;border:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);transition:var(--trans);color:#fff} @@ -144,6 +90,14 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text .pill.off{background:var(--danger)} .pill.on:hover{filter:brightness(1.1)} .pill.off:hover{filter:brightness(1.1)} +.proto-signal{display:inline-grid;grid-template-columns:1fr 1fr;width:18px;height:18px;border-radius:50%;overflow:hidden;vertical-align:middle;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);box-shadow:0 2px 5px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)} +.proto-signal i{display:block;min-width:0;background:color-mix(in srgb,var(--text-dim) 42%,var(--bg-alt));} +.proto-signal[data-v4="1"] .v4,.proto-signal[data-v6="1"] .v6{background:#22c55e} +.proto-signal[data-state="ipv4"] .v4{background:#22c55e} +.proto-signal[data-state="ipv6"] .v6{background:#22c55e} +.proto-signal[data-state="offline"] .v4,.proto-signal[data-state="offline"] .v6{background:var(--danger)} +body.light .proto-signal{border-color:color-mix(in srgb,var(--border) 92%,#94a3b8);box-shadow:0 1px 3px rgba(15,23,42,.12)} +body.light .proto-signal i{background:#cbd5e1} .virt-pill{--virt:var(--accent);display:inline-flex;align-items:center;justify-content:center;min-width:50px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--virt) 42%,var(--border));background:color-mix(in srgb,var(--virt) 14%,var(--bg-alt));color:color-mix(in srgb,var(--virt) 72%,#fff);font-size:12px;font-weight:650;line-height:1.2;letter-spacing:.25px;white-space:nowrap} body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:color-mix(in srgb,var(--virt) 68%,#111827)} .node-name{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:750;letter-spacing:.15px;color:var(--text)} @@ -163,12 +117,6 @@ body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff) .bucket label{position:absolute;left:0;right:0;bottom:2px;font-size:10px;text-align:center;color:var(--text-dim);pointer-events:none} .bucket:hover label{color:var(--text)} -/* 居中联通电信移动列 */ -#serversTable thead th:last-child, #serversTable tbody td:last-child { text-align:center; } -/* 放大第13列宽度以容纳更宽水桶 */ -#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){ - width:150px;min-width:150px;max-width:150px;padding-left:0;padding-right:.55rem; /* 去除左 padding 进一步贴近 */ -} /* 调整“总流量”表头(第9列)padding 使标题文字居中,不受正文额外右 padding 影响 */ #serversTable thead th:nth-child(9){padding-left:.75rem;padding-right:.75rem;} .buckets{justify-content:center} @@ -205,37 +153,38 @@ body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff) .modal-content{max-height:65vh;overflow:auto;} } -/* SSL 表(证书)列宽与换行修正,避免复用服务器列宽导致名称与域名重叠 */ -#sslTable th,#sslTable td{white-space:nowrap;padding:.55rem .75rem;} -#sslTable th:nth-child(1),#sslTable td:nth-child(1){width:140px;min-width:120px;} -/* 域名允许换行以防过长挤压 */ -#sslTable th:nth-child(2),#sslTable td:nth-child(2){white-space:normal;max-width:320px;overflow-wrap:anywhere;} - -/* === 覆盖:要求三个表 (servers / monitors / ssl) 全部改为自动宽度 === */ -/* 1. 取消全局 table.data 的 min-width 对这三个表的影响 */ +/* 三个数据表使用自动宽度,按关键列单独约束 */ #serversTable,#monitorsTable,#sslTable{min-width:0;} -/* 2. 统一去除之前为 serversTable 设定的列固定宽度,允许浏览器自动分配 */ #serversTable thead th,#serversTable tbody td, #monitorsTable thead th,#monitorsTable tbody td, #sslTable thead th,#sslTable tbody td{ width:auto!important;min-width:0!important;max-width:none!important; padding:.55rem .7rem; } -/* 3. 允许证书域名不受 max-width 限制(如仍需换行可保留 overflow-wrap) */ #sslTable th:nth-child(2),#sslTable td:nth-child(2){max-width:none;white-space:normal;overflow-wrap:anywhere;} -/* 4. 取消“联通|电信|移动”列固定宽度 */ -#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:auto!important;min-width:0!important;} -/* 5. 如需稍微限制仪表盘相关列最小可读宽度,可设定一个较小下限 (可选) -- 暂不设置,完全交由自动布局 */ +#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:112px!important;min-width:112px!important;max-width:112px!important;padding-left:0!important;padding-right:0!important;text-align:center;} -/* === 新增:为“月流量 / 当前网络 / 总流量”三列设置最小宽度,防止内容被压缩换行或挤压 === */ -/* 目标最小宽度按示例 "111.1GB|111.1GB" 设计(13 个字符左右),取 16ch 留余量 */ -#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2), #serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8), #serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){ - min-width:22ch !important; /* 保留自动宽度,但不小于此值 */ + min-width:20ch !important; /* 保留自动宽度,但不小于此值 */ text-align:center; font-variant-numeric:tabular-nums; } +#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){ + width:134px!important;min-width:134px!important;max-width:134px!important;text-align:center;padding-left:.35rem!important;padding-right:.35rem!important;font-variant-numeric:tabular-nums; +} +#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){ + width:46px!important;min-width:46px!important;max-width:46px!important;text-align:center;padding-left:0!important;padding-right:0!important; +} +#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){ + text-align:left;padding-left:18px!important; +} +#serversTable tbody td:nth-child(13) .buckets{ + min-width:112px; + gap:6px; + margin:0 auto; + justify-content:center; +} .cards .card{border:1px solid var(--border);border-radius:12px;padding:.75rem .85rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));display:flex;flex-direction:column;gap:.45rem;position:relative;} .cards .card.offline{filter:saturate(.92);} .cards .card.alert-critical{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.12)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.48),0 6px 18px -6px rgba(239,68,68,.28);} diff --git a/web/index.html b/web/index.html index 291cb91..f6b2deb 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,7 @@