338 lines
17 KiB
CSS
338 lines
17 KiB
CSS
/* MeowPanel — 前端样式
|
||
* 主题模型：风格族（ui.style: md3 / miuix）× 明暗（display.theme: dark / light）
|
||
* 双层变量：
|
||
* [data-style] 定形状（radius / spacing / outline 宽）+ 主色（--primary）——对齐 SDK §8.1.3
|
||
* [data-theme] 定中性色 / 语义色（bg/surface/on-surface/outline/error/...）
|
||
* 默认（:root 无覆盖）= MD3 dark；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 更大圆角 / 略大间距 / 细描边 / 偏品牌主色（更饱和） */
|
||
:root[data-style="miuix"]{
|
||
--space:10px;
|
||
--radius-s:12px;
|
||
--radius-m:18px; /* 按钮 ≈18px */
|
||
--radius-l:24px; /* 卡片 ≈24px */
|
||
--outline-w:1px; /* 细描边 */
|
||
}
|
||
|
||
/* ---------- 深色（默认主深色） ---------- */
|
||
:root[data-theme="dark"]{
|
||
--bg:#0a0a0a; /* 背景底（黑）*/
|
||
--surface:#141414;
|
||
--surface-variant:#1e1e1e;
|
||
--surface-dim:#000000;
|
||
--on-surface:#ececec;
|
||
--on-surface-variant:#a3a3a3;
|
||
--outline:#3a3a3a;
|
||
--outline-variant:#2a2a2a;
|
||
--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);
|
||
}
|
||
/* 深色 × MIUIx 主色更饱和 */
|
||
:root[data-theme="dark"][data-style="md3"]{ --primary:#4a8bf5; --on-primary:#fff; }
|
||
:root[data-theme="dark"][data-style="miuix"]{--primary:#ff7a00; --on-primary:#fff; }
|
||
|
||
/* ---------- 浅色 ---------- */
|
||
:root[data-theme="light"]{
|
||
--bg:#f4f5f7;
|
||
--surface:#ffffff;
|
||
--surface-variant:#ececee;
|
||
--surface-dim:#e1e1e4;
|
||
--on-surface:#1b1b1d;
|
||
--on-surface-variant:#5c5c60;
|
||
--outline:#d2d2d6;
|
||
--outline-variant:#e4e4e8;
|
||
--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);
|
||
}
|
||
:root[data-theme="light"][data-style="md3"]{ --primary:#2f6fe0; --on-primary:#fff; }
|
||
:root[data-theme="light"][data-style="miuix"]{--primary:#f57200; --on-primary:#fff; }
|
||
|
||
/* ---------- 布局 ---------- */
|
||
*{ 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; }
|
||
|
||
/* 危险区 */
|
||
.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); }
|
||
|
||
/* 通知列表 */
|
||
.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; }
|
||
}
|