486 lines
25 KiB
CSS
486 lines
25 KiB
CSS
/* MeowPanel — 前端样式
|
||
* 主题模型：风格族（ui.style: md3 / miuix）× 明暗（data-mode: dark / light），四套主题表。
|
||
* [data-style] 定形状（radius / spacing / outline 宽）——对齐 SDK meow_ui_theme.c §8.1.3
|
||
* [data-style][data-mode] 定完整色板（bg/surface/on-surface/outline/primary/error/...），
|
||
* MIUIx 色值取自设备端 meow_ui_theme.c 的 MIUIx 配色（暖色基面 + 橙强调）。
|
||
* 默认（index.html 根属性）= MD3 dark；面板内可覆盖（meowpanel.js 写 data-style/data-mode）。
|
||
*/
|
||
|
||
/* ---------- 结构基线（MD3 形状） ---------- */
|
||
:root{
|
||
--space:8px;
|
||
--radius-s:8px; /* 小：chip/内嵌 */
|
||
--radius-m:12px; /* 中：按钮/输入 */
|
||
--radius-l:16px; /* 大：卡片 */
|
||
--outline-w:0px; /* MD3 无描边 */
|
||
--nav-w:212px;
|
||
--topbar-h:56px;
|
||
--font: -apple-system, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
|
||
--mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
|
||
--speed:.16s;
|
||
}
|
||
|
||
/* 风格族：MIUIx 更大圆角（20/28，对齐设备 radius/radius_card）/ 更松间距 / 细描边 */
|
||
:root[data-style="miuix"]{
|
||
--space:12px;
|
||
--radius-s:14px;
|
||
--radius-m:20px; /* 按钮 ≈20px */
|
||
--radius-l:28px; /* 卡片 ≈28px */
|
||
--outline-w:1px; /* 细描边 */
|
||
}
|
||
|
||
/* ---------- MD3 × 深色 ---------- */
|
||
:root[data-style="md3"][data-mode="dark"]{
|
||
--bg:#0a0a0a; /* 背景底（黑）*/
|
||
--surface:#141414;
|
||
--surface-variant:#1e1e1e;
|
||
--surface-dim:#000000;
|
||
--on-surface:#ececec;
|
||
--on-surface-variant:#a3a3a3;
|
||
--outline:#3a3a3a;
|
||
--outline-variant:#2a2a2a;
|
||
--primary:#4a8bf5; --on-primary:#ffffff;
|
||
--error:#cf6679; --on-error:#0a0a0a;
|
||
--success:#4caf50; --warning:#ffb300;
|
||
--shadow:0 2px 10px rgba(0,0,0,.5);
|
||
--scrim:rgba(0,0,0,.55);
|
||
--hover:rgba(255,255,255,.06);
|
||
}
|
||
|
||
/* ---------- MD3 × 浅色 ---------- */
|
||
:root[data-style="md3"][data-mode="light"]{
|
||
--bg:#f4f5f7;
|
||
--surface:#ffffff;
|
||
--surface-variant:#ececee;
|
||
--surface-dim:#e1e1e4;
|
||
--on-surface:#1b1b1d;
|
||
--on-surface-variant:#5c5c60;
|
||
--outline:#d2d2d6;
|
||
--outline-variant:#e4e4e8;
|
||
--primary:#2f6fe0; --on-primary:#ffffff;
|
||
--error:#ba1a1a; --on-error:#ffffff;
|
||
--success:#2e7d32; --warning:#ed6c02;
|
||
--shadow:0 2px 10px rgba(0,0,0,.12);
|
||
--scrim:rgba(0,0,0,.35);
|
||
--hover:rgba(0,0,0,.05);
|
||
}
|
||
|
||
/* ---------- MIUIx × 深色（暖黑 181310 + 橙 FF8C4A，色值对齐 meow_ui_theme.c） ---------- */
|
||
:root[data-style="miuix"][data-mode="dark"]{
|
||
--bg:#181310;
|
||
--surface:#262019; /* surfaceContainer */
|
||
--surface-variant:#332b25;
|
||
--surface-dim:#120e0b;
|
||
--on-surface:#ede5dc;
|
||
--on-surface-variant:#ab9884;
|
||
--outline:#4a3f35;
|
||
--outline-variant:#3a3229;
|
||
--primary:#ff8c4a; --on-primary:#241100;
|
||
--error:#ffb4ab; --on-error:#690005;
|
||
--success:#4caf50; --warning:#ffb300;
|
||
--shadow:0 2px 10px rgba(0,0,0,.55);
|
||
--scrim:rgba(0,0,0,.55);
|
||
--hover:rgba(255,255,255,.06);
|
||
}
|
||
|
||
/* ---------- MIUIx × 浅色（暖白 F7F3EE + 橙 F57200，色值对齐 meow_ui_theme.c） ---------- */
|
||
:root[data-style="miuix"][data-mode="light"]{
|
||
--bg:#f7f3ee;
|
||
--surface:#fffbf6; /* surfaceBright */
|
||
--surface-variant:#ede2d7;
|
||
--surface-dim:#dfd3c4;
|
||
--on-surface:#251a10;
|
||
--on-surface-variant:#7d6a5a;
|
||
--outline:#cbbfb2;
|
||
--outline-variant:#e9dfd0;
|
||
--primary:#f57200; --on-primary:#ffffff;
|
||
--error:#b3261e; --on-error:#ffffff;
|
||
--success:#2e7d32; --warning:#ed6c02;
|
||
--shadow:0 2px 10px rgba(60,40,20,.12);
|
||
--scrim:rgba(30,20,10,.35);
|
||
--hover:rgba(0,0,0,.05);
|
||
}
|
||
|
||
/* ---------- 布局 ---------- */
|
||
*{ box-sizing:border-box; }
|
||
html,body{ height:100%; margin:0; }
|
||
body{
|
||
background:var(--bg); color:var(--on-surface);
|
||
font-family:var(--font); font-size:14px; line-height:1.5;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
.app{ display:flex; height:100vh; overflow:hidden; }
|
||
|
||
/* 侧栏 */
|
||
.sidebar{
|
||
width:var(--nav-w); flex:0 0 var(--nav-w);
|
||
background:var(--surface); border-right:1px solid var(--outline-variant);
|
||
display:flex; flex-direction:column; transition:margin-left var(--speed) ease;
|
||
}
|
||
.brand{ display:flex; align-items:center; gap:10px; padding:16px 18px; }
|
||
.brand-mark{
|
||
width:30px; height:30px; border-radius:var(--radius-m);
|
||
background:var(--primary); color:var(--on-primary);
|
||
display:flex; align-items:center; justify-content:center; font-weight:700;
|
||
}
|
||
.brand-name{ font-weight:600; font-size:15px; }
|
||
.nav{ flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
|
||
.nav-item{
|
||
display:flex; align-items:center; gap:12px; padding:10px 12px;
|
||
border:none; background:transparent; color:var(--on-surface-variant);
|
||
border-radius:var(--radius-m); cursor:pointer; text-align:left;
|
||
font:inherit; font-size:14px; transition:background var(--speed), color var(--speed);
|
||
}
|
||
.nav-item:hover{ background:var(--hover); color:var(--on-surface); }
|
||
.nav-item.active{ background:var(--primary); color:var(--on-primary); }
|
||
.nav-ico{ width:22px; height:22px; flex:0 0 22px; }
|
||
.nav-ico svg{ width:100%; height:100%; display:block; }
|
||
.nav-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
|
||
/* 主区 */
|
||
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
|
||
.topbar{
|
||
height:var(--topbar-h); flex:0 0 var(--topbar-h);
|
||
display:flex; align-items:center; gap:12px; padding:0 16px;
|
||
background:var(--surface); border-bottom:1px solid var(--outline-variant);
|
||
}
|
||
.topbar-title{ font-size:17px; font-weight:600; margin:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.icon-btn{
|
||
width:38px; height:38px; border:none; border-radius:var(--radius-m);
|
||
background:transparent; color:var(--on-surface-variant); cursor:pointer;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.icon-btn:hover{ background:var(--hover); color:var(--on-surface); }
|
||
.icon-btn svg{ width:22px; height:22px; }
|
||
.menu-btn{ display:none; }
|
||
|
||
/* 顶栏分段控件（风格/明暗） */
|
||
.seg{ display:inline-flex; background:var(--surface-variant); border-radius:var(--radius-m); padding:3px; }
|
||
.seg-btn{
|
||
border:none; background:transparent; color:var(--on-surface-variant);
|
||
padding:6px 12px; border-radius:calc(var(--radius-m) - 2px);
|
||
cursor:pointer; font:inherit; font-size:13px; white-space:nowrap;
|
||
transition:background var(--speed), color var(--speed);
|
||
}
|
||
.seg-btn.active{ background:var(--surface); color:var(--on-surface); box-shadow:var(--shadow); }
|
||
|
||
/* 连接状态点 */
|
||
.conn{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-m); background:var(--surface-variant); color:var(--on-surface-variant); font-size:12px; }
|
||
.conn-dot{ width:9px; height:9px; border-radius:50%; background:var(--on-surface-variant); }
|
||
.conn[data-state="ok"] .conn-dot{ background:var(--success); }
|
||
.conn[data-state="bad"] .conn-dot{ background:var(--error); }
|
||
.conn[data-state="ok"]{ color:var(--success); }
|
||
.conn[data-state="bad"]{ color:var(--error); }
|
||
|
||
/* 内容区 */
|
||
.content{ flex:1; overflow-y:auto; padding:20px; }
|
||
.page{ max-width:1100px; margin:0 auto; }
|
||
.placeholder{ color:var(--on-surface-variant); text-align:center; padding:60px 0; }
|
||
|
||
/* 卡片 */
|
||
.card{
|
||
background:var(--surface); border-radius:var(--radius-l);
|
||
border:var(--outline-w) solid var(--outline); /* MD3 无描边；MIUIx 1px */
|
||
box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;
|
||
overflow-x:auto; /* 窄屏表格/内容横向滚动，避免整页外溢 */
|
||
}
|
||
.card-title{ font-size:15px; font-weight:600; margin:0 0 14px; }
|
||
|
||
/* 统计格子（性能页） */
|
||
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
|
||
.stat{
|
||
background:var(--surface-variant); border-radius:var(--radius-m);
|
||
padding:14px 16px; border:var(--outline-w) solid var(--outline-variant);
|
||
}
|
||
.stat-label{ color:var(--on-surface-variant); font-size:12px; margin-bottom:6px; }
|
||
.stat-value{ font-size:22px; font-weight:700; letter-spacing:.3px; }
|
||
.stat-unit{ font-size:13px; font-weight:400; color:var(--on-surface-variant); margin-left:4px; }
|
||
.stat-sub{ font-size:12px; color:var(--on-surface-variant); margin-top:6px; }
|
||
|
||
/* 进度条 */
|
||
.bar{ height:8px; border-radius:99px; background:var(--surface-dim); overflow:hidden; margin-top:8px; }
|
||
.bar > span{ display:block; height:100%; border-radius:99px; background:var(--primary); transition:width .4s ease; }
|
||
.bar.warn > span{ background:var(--warning); }
|
||
.bar.danger > span{ background:var(--error); }
|
||
|
||
/* 按钮 */
|
||
.btn{
|
||
border:none; padding:9px 16px; border-radius:var(--radius-m);
|
||
background:var(--surface-variant); color:var(--on-surface);
|
||
cursor:pointer; font:inherit; font-size:14px;
|
||
display:inline-flex; align-items:center; gap:6px;
|
||
transition:filter var(--speed), background var(--speed), transform .05s;
|
||
}
|
||
.btn:hover{ filter:brightness(1.08); }
|
||
.btn:active{ transform:scale(.98); }
|
||
.btn:disabled{ opacity:.5; cursor:not-allowed; }
|
||
.btn-primary{ background:var(--primary); color:var(--on-primary); }
|
||
.btn-danger{ background:var(--error); color:var(--on-error); }
|
||
.btn-ghost{ background:transparent; }
|
||
.icon-txt{ font-size:16px; }
|
||
|
||
/* 表格（文件/日志） */
|
||
.table{ width:100%; border-collapse:collapse; }
|
||
.table th, .table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--outline-variant); }
|
||
.table th{ color:var(--on-surface-variant); font-weight:500; font-size:12px; }
|
||
.table tr:hover td{ background:var(--hover); }
|
||
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
|
||
.muted{ color:var(--on-surface-variant); font-size:12px; }
|
||
.mono{ font-family:var(--mono); font-size:12px; word-break:break-all; }
|
||
|
||
/* 面包屑 */
|
||
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:12px; }
|
||
.crumbs a{ color:var(--primary); cursor:pointer; text-decoration:none; }
|
||
.crumbs a:hover{ text-decoration:underline; }
|
||
|
||
/* 表单行 */
|
||
.field{ margin-bottom:16px; }
|
||
.field-label{ display:block; margin-bottom:6px; color:var(--on-surface-variant); font-size:13px; }
|
||
.field-row{ display:flex; align-items:center; gap:12px; }
|
||
.field-row.wrap{ flex-wrap:wrap; }
|
||
input[type=text], input[type=number], select, textarea{
|
||
width:100%; padding:9px 12px; border-radius:var(--radius-m);
|
||
border:var(--outline-w) solid var(--outline); background:var(--surface-variant);
|
||
color:var(--on-surface); font:inherit; font-size:14px; border:0;
|
||
}
|
||
textarea{ resize:vertical; font-family:var(--mono); font-size:12px; }
|
||
input[type=range]{ width:100%; accent-color:var(--primary); }
|
||
.field-row input[type=range]{ flex:1; min-width:0; }
|
||
|
||
/* 开关 */
|
||
.switch{ position:relative; width:46px; height:26px; flex:0 0 46px; }
|
||
.switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
|
||
.switch .track{ position:absolute; inset:0; border-radius:99px; background:var(--surface-dim); transition:background var(--speed); border:var(--outline-w) solid var(--outline-variant); }
|
||
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); transition:left var(--speed); }
|
||
.switch input:checked + .track{ background:var(--primary); }
|
||
.switch input:checked + .track .thumb{ left:23px; background:var(--on-primary); }
|
||
|
||
/* 应用卡片 */
|
||
.app-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
|
||
.app-card{
|
||
background:var(--surface-variant); border-radius:var(--radius-l);
|
||
border:var(--outline-w) solid var(--outline-variant); padding:16px;
|
||
display:flex; flex-direction:column; gap:8px;
|
||
}
|
||
.app-card .app-head{ display:flex; align-items:center; gap:12px; }
|
||
.app-card .app-ico{ width:40px; height:40px; border-radius:var(--radius-m); background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:0 0 40px; }
|
||
.app-card .app-name{ font-weight:600; }
|
||
.app-card .app-pkg{ font-size:12px; color:var(--on-surface-variant); font-family:var(--mono); }
|
||
.app-card .app-meta{ font-size:12px; color:var(--on-surface-variant); }
|
||
.app-card .app-actions{ display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; }
|
||
|
||
/* 实时屏幕（屏幕页） */
|
||
.screen-frame{ display:flex; justify-content:center; max-width:480px; margin:0 auto; }
|
||
.screen-frame img{
|
||
width:100%; max-width:480px; height:auto; display:block;
|
||
border-radius:var(--radius-m); background:#000; cursor:crosshair;
|
||
aspect-ratio:480/720; object-fit:contain; border:var(--outline-w) solid var(--outline-variant);
|
||
}
|
||
.screen-frame canvas{
|
||
width:100%; max-width:480px; height:auto; display:none;
|
||
border-radius:var(--radius-m); background:#000; cursor:crosshair;
|
||
aspect-ratio:480/720; border:var(--outline-w) solid var(--outline-variant);
|
||
}
|
||
|
||
/* 远程按键区 */
|
||
.key-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
|
||
.key-btn{
|
||
padding:14px; border:none; border-radius:var(--radius-m);
|
||
background:var(--surface-variant); color:var(--on-surface);
|
||
border:var(--outline-w) solid var(--outline-variant);
|
||
cursor:pointer; font:inherit; text-align:center; transition:background var(--speed);
|
||
}
|
||
.key-btn:hover{ background:var(--hover); }
|
||
.key-btn .k-ico{ font-size:20px; display:block; margin-bottom:4px; }
|
||
|
||
/* 屏幕·遥控 合并页：左screen右遥控板 */
|
||
.screen-remote{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
|
||
.screen-col{ flex:1 1 340px; min-width:280px; max-width:520px; }
|
||
.remote-col{ flex:0 1 260px; min-width:220px; }
|
||
.remote-col .card{ padding:14px 16px; }
|
||
.remote-pad{ display:flex; flex-direction:column; gap:12px; }
|
||
.remote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
|
||
.remote-btn{
|
||
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
|
||
padding:12px 6px; border:none; border-radius:var(--radius-m);
|
||
background:var(--surface-variant); color:var(--on-surface);
|
||
border:var(--outline-w) solid var(--outline-variant);
|
||
cursor:pointer; font:inherit; text-align:center; transition:background var(--speed);
|
||
}
|
||
.remote-btn:hover{ background:var(--hover); }
|
||
.remote-btn .r-ico{ width:26px; height:26px; display:block; }
|
||
.remote-btn .r-ico svg{ width:26px; height:26px; display:block; }
|
||
.remote-btn .r-lbl{ font-size:12px; line-height:1.2; }
|
||
.remote-bright{ display:flex; align-items:center; gap:8px; }
|
||
.remote-bright .r-lbl{ font-size:12px; color:var(--on-surface-variant); white-space:nowrap; }
|
||
.remote-bright input{ flex:1; }
|
||
|
||
/* 危险区 */
|
||
.danger-box{ border:1px solid var(--error); border-radius:var(--radius-l); padding:16px 18px; }
|
||
.danger-box .card-title{ color:var(--error); }
|
||
.warn-note{ color:var(--warning); font-size:12px; margin-top:8px; }
|
||
|
||
/* 日志查看 */
|
||
.log-view{ background:var(--surface-dim); border-radius:var(--radius-m); padding:12px; max-height:60vh; overflow:auto; font-family:var(--mono); font-size:12px; white-space:pre-wrap; color:var(--on-surface); }
|
||
|
||
/* 网络管理页（meow_netmgrd） */
|
||
.net-kind{ color:var(--on-surface-variant); font-size:12px; }
|
||
.net-state{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:var(--surface-variant); color:var(--on-surface-variant); }
|
||
.net-state.ok{ background:rgba(76,175,80,.15); color:var(--success); }
|
||
.net-state.warn{ background:rgba(255,179,0,.15); color:var(--warning); }
|
||
.net-state.listen{ background:rgba(74,139,245,.15); color:var(--primary); }
|
||
.net-state.down{ background:rgba(207,102,121,.15); color:var(--error); }
|
||
.net-badge{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-family:var(--mono); background:var(--surface-variant); color:var(--on-surface-variant); margin-right:2px; }
|
||
.net-badge.app{ background:rgba(74,139,245,.18); color:var(--primary); }
|
||
.net-badge.svc{ background:rgba(76,175,80,.18); color:var(--success); }
|
||
.net-badge.proc{ background:rgba(255,179,0,.18); color:var(--warning); }
|
||
.net-entity{ font-family:var(--mono); font-size:12px; word-break:break-all; }
|
||
|
||
/* 通知列表 */
|
||
.notif{ display:flex; gap:12px; padding:12px; border-radius:var(--radius-m); background:var(--surface-variant); margin-bottom:10px; align-items:flex-start; border:var(--outline-w) solid var(--outline-variant); }
|
||
.notif .n-ico{ width:36px; height:36px; border-radius:var(--radius-m); background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; flex:0 0 36px; font-weight:700; }
|
||
.notif .n-body{ flex:1; min-width:0; }
|
||
.notif .n-title{ font-weight:600; }
|
||
.notif .n-text{ color:var(--on-surface-variant); font-size:13px; margin-top:2px; }
|
||
.notif .n-meta{ display:flex; gap:8px; margin-top:6px; color:var(--on-surface-variant); font-size:11px; }
|
||
.urgency-hi{ color:var(--error); }
|
||
|
||
/* 横幅 / toast / modal */
|
||
.offline-banner{
|
||
position:sticky; top:0; z-index:30; padding:10px 16px;
|
||
background:var(--error); color:var(--on-error); font-size:13px;
|
||
}
|
||
.offline-banner code{ background:rgba(0,0,0,.2); padding:1px 5px; border-radius:4px; }
|
||
|
||
.toast{
|
||
position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
|
||
z-index:60; background:var(--surface); color:var(--on-surface);
|
||
padding:11px 18px; border-radius:var(--radius-m); box-shadow:var(--shadow);
|
||
border:var(--outline-w) solid var(--outline-variant); font-size:13px;
|
||
max-width:80vw;
|
||
}
|
||
|
||
.modal-scrim{
|
||
position:fixed; inset:0; z-index:50; background:var(--scrim);
|
||
display:flex; align-items:center; justify-content:center; padding:20px;
|
||
}
|
||
.modal-scrim[hidden]{ display:none; } /* 覆盖上方 display:flex，否则 hidden 失效 */
|
||
.modal{ background:var(--surface); border-radius:var(--radius-l); width:min(420px,100%); padding:22px; box-shadow:var(--shadow); border:var(--outline-w) solid var(--outline-variant); }
|
||
.modal-title{ font-size:16px; margin:0 0 10px; }
|
||
.modal-body{ color:var(--on-surface-variant); margin:0 0 18px; word-break:break-all; }
|
||
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
|
||
|
||
/* 登录页（面板鉴权） */
|
||
.login-scrim{ position:fixed; inset:0; z-index:70; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:20px; }
|
||
.login-scrim[hidden]{ display:none; }
|
||
.login-box{ background:var(--surface); border-radius:var(--radius-l); width:min(360px,100%); padding:28px 26px; box-shadow:var(--shadow); border:var(--outline-w) solid var(--outline-variant); text-align:center; }
|
||
.login-brand{ display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:600; margin-bottom:6px; }
|
||
.login-brand-mark{ width:30px; height:30px; border-radius:8px; background:var(--primary); color:var(--on-primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
|
||
.login-sub{ color:var(--on-surface-variant); font-size:13px; margin:0 0 18px; }
|
||
.login-input{ width:100%; padding:11px 12px; border-radius:var(--radius-m); border:var(--outline-w) solid var(--outline-variant); background:var(--surface); color:var(--on-surface); font-size:14px; margin-bottom:12px; box-sizing:border-box; }
|
||
.login-input:focus{ outline:none; border-color:var(--primary); }
|
||
.login-err{ color:var(--error); font-size:13px; margin:0 0 12px; text-align:left; }
|
||
.login-btn{ display:block; width:100%; }
|
||
.modal .login-input{ margin-top:4px; }
|
||
|
||
/* 空态 / 加载 */
|
||
.empty{ text-align:center; color:var(--on-surface-variant); padding:48px 0; }
|
||
.skel{ color:var(--on-surface-variant); }
|
||
.spinner{ display:inline-block; width:18px; height:18px; border:2px solid var(--outline-variant); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
|
||
@keyframes spin{ to{ transform:rotate(360deg); } }
|
||
|
||
/* 响应式：窄屏收起侧栏 */
|
||
@media (max-width:820px){
|
||
:root{ --nav-w:216px; }
|
||
.sidebar{ position:fixed; left:0; top:0; bottom:0; z-index:40; margin-left:calc(-1 * var(--nav-w)); }
|
||
.sidebar.open{ margin-left:0; box-shadow:var(--shadow); }
|
||
.menu-btn{ display:flex; }
|
||
.brand-name{ display:none; }
|
||
.conn-text{ display:none; }
|
||
}
|
||
@media (max-width:520px){
|
||
.content{ padding:14px; }
|
||
.topbar{ padding:0 10px; gap:8px; }
|
||
.seg-btn{ padding:6px 9px; }
|
||
}
|
||
|
||
/* ================= 批1-B：首页仪表盘 / 电平表 / 电源 / 进程 / PIN / 网络横幅 ================= */
|
||
|
||
/* 首页卡片网格 */
|
||
.home-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
|
||
.home-grid .card{ margin-bottom:0; }
|
||
.home-sub{ color:var(--on-surface-variant); font-size:12px; margin-top:4px; }
|
||
.home-dash{ font-size:20px; font-weight:700; }
|
||
.home-unit{ font-size:12px; font-weight:400; color:var(--on-surface-variant); margin-left:4px; }
|
||
.home-bigval{ font-size:30px; font-weight:700; line-height:1.1; }
|
||
.home-bigunit{ font-size:14px; font-weight:400; color:var(--on-surface-variant); margin-left:4px; }
|
||
.home-chip{ display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; vertical-align:middle; }
|
||
.home-chip.ok{ background:rgba(76,175,80,.18); color:var(--success); }
|
||
.home-chip.warn{ background:rgba(255,179,0,.18); color:var(--warning); }
|
||
.home-chip.bad{ background:rgba(207,102,121,.18); color:var(--error); }
|
||
.home-chip.mut{ background:var(--surface-variant); color:var(--on-surface-variant); }
|
||
.home-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
|
||
.home-kv{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; }
|
||
.home-kv .k{ color:var(--on-surface-variant); }
|
||
.home-kv .v{ text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.dash-strip{ display:flex; align-items:center; gap:8px; margin-top:8px; }
|
||
|
||
/* 电平表（rms 青绿 / peak 黄，刻度 -60..0 dBFS） */
|
||
.lvl{ margin-top:8px; }
|
||
.lvl-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
|
||
.lvl-lbl{ width:44px; color:var(--on-surface-variant); font-size:12px; font-weight:600; }
|
||
.lvl-meter{ flex:1; height:14px; border-radius:99px; background:var(--surface-dim); overflow:hidden; border:var(--outline-w) solid var(--outline-variant); }
|
||
.lvl-fill{ height:100%; border-radius:99px; transition:width .18s ease; }
|
||
.lvl-fill.rms{ background:#00bfa5; }
|
||
.lvl-fill.peak{ background:#ffb300; }
|
||
.lvl-val{ width:58px; text-align:right; font-family:var(--mono); font-size:12px; color:var(--on-surface-variant); }
|
||
.lvl-scale{ display:flex; justify-content:space-between; color:var(--on-surface-variant); font-size:10px; padding:2px 68px 0 54px; }
|
||
.lvl-spark{ display:block; width:100%; height:46px; margin-top:8px; }
|
||
.lvl-spark .grid{ stroke:var(--outline-variant); stroke-width:1; }
|
||
.lvl-note{ color:var(--on-surface-variant); font-size:12px; margin-top:6px; }
|
||
|
||
/* 置信度徽标（measured/derived/estimated） */
|
||
.conf-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 12px; border-radius:999px; font-size:12px; font-weight:600; }
|
||
.conf-badge.measured{ background:rgba(76,175,80,.18); color:var(--success); }
|
||
.conf-badge.derived{ background:rgba(74,139,245,.18); color:var(--primary); }
|
||
.conf-badge.estimated{ background:rgba(255,179,0,.18); color:var(--warning); }
|
||
.conf-badge.none{ background:var(--surface-variant); color:var(--on-surface-variant); }
|
||
|
||
/* 子系统分解堆叠条 */
|
||
.stack{ display:flex; height:24px; border-radius:99px; overflow:hidden; background:var(--surface-dim); border:var(--outline-w) solid var(--outline-variant); margin-top:10px; }
|
||
.stack > span{ height:100%; }
|
||
.stack-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:12px; }
|
||
.stack-legend .sw{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:middle; }
|
||
.stack-legend .seg{ display:inline-flex; align-items:center; }
|
||
.up-strip{ display:flex; align-items:center; gap:10px; }
|
||
|
||
/* 电池展示 */
|
||
.batt{ display:flex; align-items:center; gap:14px; }
|
||
.batt-icon{ position:relative; width:40px; height:20px; border:2px solid var(--on-surface-variant); border-radius:4px; overflow:hidden; flex:0 0 40px; }
|
||
.batt-icon::after{ content:""; position:absolute; right:-5px; top:5px; width:3px; height:8px; background:var(--on-surface-variant); border-radius:0 2px 2px 0; }
|
||
.batt-icon .lvl-fill{ background:var(--success); }
|
||
.batt-icon .lvl-fill.warn{ background:var(--warning); }
|
||
.batt-icon .lvl-fill.bad{ background:var(--error); }
|
||
.batt-icon .lvl-fill.charge{ background:var(--primary); }
|
||
|
||
/* 进程/服务页高亮与行内日志 */
|
||
.restart-hi{ color:var(--error); font-weight:700; }
|
||
.crash-hi{ color:var(--error); font-weight:700; }
|
||
.proc-row{ cursor:pointer; }
|
||
.proc-tail{ margin-top:8px; }
|
||
.proc-badge{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-family:var(--mono); background:var(--surface-variant); color:var(--on-surface-variant); margin-right:4px; }
|
||
.proc-badge.board{ background:rgba(74,139,245,.18); color:var(--primary); }
|
||
.proc-badge.tf{ background:rgba(255,179,0,.18); color:var(--warning); }
|
||
|
||
/* 网络页内联错误横幅（不再整页踢「不可用」占位） */
|
||
.page-banner{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-m); background:rgba(207,102,121,.13); color:var(--error); margin-bottom:14px; border:var(--outline-w) solid var(--outline-variant); font-size:13px; }
|
||
.page-banner .ico{ font-size:16px; }
|
||
.page-banner button{ margin-left:auto; }
|
||
|
||
/* 设置页 PIN 卡 */
|
||
.pin-status{ font-size:13px; }
|
||
.pin-status .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
|
||
.pin-status .dot.set{ background:var(--success); }
|
||
.pin-status .dot.unset{ background:var(--warning); }
|
||
.pin-status .dot.locked{ background:var(--error); }
|