justme
83f54978d2
Acrylic cards and topbar over a blurred background, country flags, ISP and OS icons, per-node version tags, a build info footer and an admin versions tab. Overview cards drop the sparkline and widen the hover area.
108 lines
2.6 KiB
CSS
108 lines
2.6 KiB
CSS
/*
|
|
* 「纸墨」主题令牌：暖中性纸白底、深墨主色、唯一的强调色钢笔墨水蓝、复古低饱和的状态色。
|
|
* 颜色只在这个文件里出现；其他样式一律引用令牌（stylelint 会拦住 hex / rgb / 具名色）。
|
|
*/
|
|
:root {
|
|
/* 运营商小图标的底色（自己画的简化图标，不是官方 Logo） */
|
|
--isp-mobile: #1c9be0;
|
|
--isp-telecom: #1459a8;
|
|
--isp-unicom: #d8261f;
|
|
--isp-broadnet: #de6a1b;
|
|
--isp-ink: #ffffff;
|
|
|
|
color-scheme: light;
|
|
|
|
--app-bg: #f4f2ed;
|
|
--app-card: #fbfaf7;
|
|
--app-card-inset: #ece9e2;
|
|
--app-card-hover: #f0ede6;
|
|
--app-outline: #d8d4c9;
|
|
--app-outline-soft: #e5e1d7;
|
|
|
|
--app-ink: #1f1d18;
|
|
--app-ink-muted: #5c5950;
|
|
--app-ink-faint: #8b877b;
|
|
|
|
--app-primary: #2a2720;
|
|
--app-on-primary: #f7f6f3;
|
|
|
|
--app-accent: #2a5da8;
|
|
--app-accent-container: #dce6f4;
|
|
--app-on-accent-container: #12305c;
|
|
|
|
--app-ok: #566f2c;
|
|
--app-ok-container: #e3ead2;
|
|
--app-warn: #9c6b0e;
|
|
--app-warn-container: #f1e4c4;
|
|
--app-bad: #a23e2c;
|
|
--app-bad-container: #f2d9d2;
|
|
--app-idle: #8b877b;
|
|
|
|
--app-scrim: #1f1d18;
|
|
--app-shadow: #1f1d18;
|
|
|
|
--chart-1: #2a5da8;
|
|
--chart-2: #b9770e;
|
|
--chart-3: #a23e2c;
|
|
--chart-4: #566f2c;
|
|
--chart-5: #7a4f7a;
|
|
--chart-6: #2f7a76;
|
|
--chart-grid: #e1ddd2;
|
|
--chart-axis: #7a766b;
|
|
|
|
--r-card: 24px;
|
|
--r-group-outer: 28px;
|
|
--r-group-inner: 8px;
|
|
--r-control: 12px;
|
|
--r-pill: 999px;
|
|
|
|
--state-hover: 0.08;
|
|
--state-press: 0.12;
|
|
|
|
--font-sans: "Source Han Sans SC", "Noto Sans SC", "Source Han Sans CN", "Microsoft YaHei UI", "PingFang SC", sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
/* 暗色下的阴影和遮罩要用纯黑，不然和深色背景差不多，看不出层次 */
|
|
--app-shadow: #000000;
|
|
--app-scrim: #000000;
|
|
|
|
--app-bg: #181714;
|
|
--app-card: #211f1b;
|
|
--app-card-inset: #2b2924;
|
|
--app-card-hover: #28261f;
|
|
--app-outline: #3b3830;
|
|
--app-outline-soft: #2f2d27;
|
|
|
|
--app-ink: #ece9e1;
|
|
--app-ink-muted: #b0ab9e;
|
|
--app-ink-faint: #7f7b70;
|
|
|
|
--app-primary: #ece9e1;
|
|
--app-on-primary: #1f1d18;
|
|
|
|
--app-accent: #8db0e6;
|
|
--app-accent-container: #26364f;
|
|
--app-on-accent-container: #cfe0f8;
|
|
|
|
--app-ok: #a6c06c;
|
|
--app-ok-container: #2c3520;
|
|
--app-warn: #dcae52;
|
|
--app-warn-container: #3a2f16;
|
|
--app-bad: #e3917f;
|
|
--app-bad-container: #432720;
|
|
--app-idle: #7f7b70;
|
|
|
|
--chart-1: #8db0e6;
|
|
--chart-2: #e0a74d;
|
|
--chart-3: #e3917f;
|
|
--chart-4: #a6c06c;
|
|
--chart-5: #c79ac7;
|
|
--chart-6: #72c0bb;
|
|
--chart-grid: #32302a;
|
|
--chart-axis: #8f8b7f;
|
|
}
|