151 行
6.0 KiB
CSS
151 行
6.0 KiB
CSS
/* PhoneRail 机架 —— 仪器前面板风格。
|
|
一处用力：每块板是一块「面板」，五个槽是凹进去的「刀片槽」，槽里是状态灯 + 读数 + 电流小曲线。
|
|
其余一律安静：冷灰阳极铝底、细线分隔、读数用 DIN 系等宽数字。
|
|
颜色只有两类职责：
|
|
· 状态（运行 / 忙 / 异常 / 故障 / 断电 / 空槽 / 失联）—— 只用来表示状态，旁边一定有文字；
|
|
· 交互（选中、链接、主按钮）—— 阳极蓝。
|
|
图表的系列色在 chart.js 里（dataviz 参考调色板第 1/2 槽，按本页底色校验过）。 */
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--plane: #eceff2; /* 页面底 */
|
|
--panel: #fbfcfd; /* 面板 */
|
|
--bay: #f2f4f7; /* 凹槽（比面板深一档） */
|
|
--bay-edge: #dde2e8;
|
|
--ink: #16202b;
|
|
--ink-2: #566270;
|
|
--muted: #8a94a0;
|
|
--line: #d9dee4;
|
|
--line-soft: #e8ecf0;
|
|
--accent: #1d5fd1;
|
|
--accent-soft: #e3ecfb;
|
|
--bar: #fbfcfd;
|
|
|
|
--st-ok: #0c8a0c; /* 运行（比 dataviz 的 good 深一档：它要当文字用） */
|
|
--st-busy: #1d5fd1;
|
|
--st-warn: #b07a00;
|
|
--st-bad: #c62f2f;
|
|
--st-off: #5d6875;
|
|
--st-empty: #b9c1ca;
|
|
--st-lost: #98a1ab;
|
|
--led-ok: #16b416; /* 灯本身：亮一点，但只当圆点用，不当文字 */
|
|
--led-warn: #fab219;
|
|
--led-bad: #e04343;
|
|
/* 能量流（拓扑图）：只画线和条，不当文字用。橙 = 与 BoardChart「主板合计功率」同一色相 */
|
|
--flow: #e0621f;
|
|
--flow-dim: #f5d6c4;
|
|
--flow-glow: rgba(224, 98, 31, .28);
|
|
--data: #6b7785; /* USB 数据链路 */
|
|
|
|
/* 两套字体都随前端打包（main.js 引入），系统字体只在字体文件还没下完时顶一下 */
|
|
--readout: "Barlow", "Noto Sans SC Variable", sans-serif;
|
|
--ui: "Noto Sans SC Variable", sans-serif;
|
|
|
|
--r-panel: 10px;
|
|
--r-bay: 6px;
|
|
|
|
/* Element Plus：主色换成阳极蓝，其余跟着面板走 */
|
|
--el-color-primary: #1d5fd1;
|
|
--el-color-primary-light-3: #6190e0;
|
|
--el-color-primary-light-5: #8eafe8;
|
|
--el-color-primary-light-7: #bbcff1;
|
|
--el-color-primary-light-8: #d2dff6;
|
|
--el-color-primary-light-9: #e8effb;
|
|
--el-color-primary-dark-2: #184ca7;
|
|
--el-font-family: var(--ui);
|
|
--el-border-radius-base: 6px;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
--plane: #0f1216;
|
|
--panel: #171b21;
|
|
--bay: #12161b;
|
|
--bay-edge: #262c34;
|
|
--ink: #e8ecf1;
|
|
--ink-2: #a7b0bb;
|
|
--muted: #76808b;
|
|
--line: #2a3038;
|
|
--line-soft: #20252c;
|
|
--accent: #5b95f2;
|
|
--accent-soft: #1b2a44;
|
|
--bar: #13171c;
|
|
|
|
--st-ok: #3cc43c;
|
|
--st-busy: #5b95f2;
|
|
--st-warn: #f0b23a;
|
|
--st-bad: #ef6464;
|
|
--st-off: #8a95a1;
|
|
--st-empty: #3a414a;
|
|
--st-lost: #5d6671;
|
|
--led-ok: #2fd12f;
|
|
--led-warn: #fab219;
|
|
--led-bad: #ef5353;
|
|
--flow: #f07a3a;
|
|
--flow-dim: #4a2c1c;
|
|
--flow-glow: rgba(240, 122, 58, .35);
|
|
--data: #8d98a5;
|
|
|
|
--el-color-primary: #5b95f2;
|
|
--el-color-primary-light-3: #3f6fb8;
|
|
--el-color-primary-light-5: #2f548b;
|
|
--el-color-primary-light-7: #203a5f;
|
|
--el-color-primary-light-8: #1a2f4c;
|
|
--el-color-primary-light-9: #142338;
|
|
--el-color-primary-dark-2: #7eabf5;
|
|
--el-bg-color: #171b21;
|
|
--el-bg-color-overlay: #1c2128;
|
|
--el-fill-color-blank: #171b21;
|
|
--el-border-color: #2f363f;
|
|
--el-border-color-light: #2a3038;
|
|
--el-border-color-lighter: #242a31;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { background: var(--plane); }
|
|
body { margin: 0; font-family: var(--ui); color: var(--ink); font-size: 14px; line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased; }
|
|
a { color: var(--accent); }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* 面板：页面上的一级容器 */
|
|
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; }
|
|
.muted { color: var(--muted); font-size: 13px; }
|
|
.readout { font-family: var(--readout); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
|
|
.bad { color: var(--st-bad); }
|
|
.warn { color: var(--st-warn); }
|
|
|
|
/* 面板标题：粗一点的正文字，不加眉标、不全大写 */
|
|
.ttl { font-weight: 600; font-size: 15px; margin: 0 0 10px; color: var(--ink); }
|
|
|
|
/* 状态灯 */
|
|
.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
|
|
background: var(--st-empty); box-shadow: 0 0 0 2px var(--panel); }
|
|
.led.ok { background: var(--led-ok); }
|
|
.led.busy { background: var(--st-busy); }
|
|
.led.warn { background: var(--led-warn); }
|
|
.led.bad { background: var(--led-bad); }
|
|
.led.off { background: var(--st-off); }
|
|
.led.lost { background: var(--st-lost); }
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.led.busy { animation: led-blink 1s steps(2, jump-none) infinite; }
|
|
}
|
|
@keyframes led-blink { 50% { opacity: .35; } }
|
|
|
|
/* 表格：去掉 Element Plus 的斑马感，行线用细线 */
|
|
.el-table { --el-table-border-color: var(--line-soft); --el-table-header-bg-color: transparent;
|
|
--el-table-tr-bg-color: transparent; --el-table-bg-color: transparent; --el-table-row-hover-bg-color: var(--bay);
|
|
--el-table-text-color: var(--ink); --el-table-header-text-color: var(--muted); }
|
|
.el-table th.el-table__cell { font-weight: 500; }
|
|
code { font-size: 12px; background: var(--bay); border: 1px solid var(--line-soft); padding: 0 4px; border-radius: 4px;
|
|
word-break: break-all; }
|
|
|
|
/* 曲线卡：标题 + 时间范围一行，下面一行小图例，再下面是图，最底下一行灰字说明 */
|
|
.chart-card .hh { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
|
|
.chart-card .hh .ttl { margin: 0; }
|
|
.chart-card .legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--ink-2);
|
|
margin-top: 10px; min-height: 20px; align-items: center; }
|
|
.chart-card .legend .hint { color: var(--muted); }
|
|
.chart-card .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
|
|
.chart-card .note { margin: 2px 0 0; font-size: 12px; }
|