130 lines
3.9 KiB
CSS
130 lines
3.9 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;
|
|
|
|
/* 亚克力（毛玻璃）用色：展示端所有玻璃面都从这五个取色，比例、模糊和阴影在 display.css 的「亚克力规范」里 */
|
|
--glass-tint: var(--app-card); /* 玻璃底色 */
|
|
--glass-light: var(--app-card); /* 上沿的反光色 */
|
|
--glass-line: var(--app-ink); /* 细描边、标题栏的分隔线 */
|
|
--glass-shade: var(--app-shadow); /* 投影 */
|
|
--glass-veil: var(--app-bg); /* 盖在背景图上的那层底色 */
|
|
|
|
/* 雪花的颜色：亮色背景是白的，纯白的雪看不见，所以用偏蓝的灰；暗色就是白色 */
|
|
--weather-core: #f3f7ff; /* 不用纯白：带一点点冷色的白 */
|
|
--weather-halo: #bfd0f0; /* 粒子边缘羽化出去的颜色 */
|
|
|
|
--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;
|
|
|
|
/* 暗色的玻璃：偏蓝紫的冷色深蓝灰（和背景插画的色调一致），描边和上沿反光用白色，投影用带一点蓝的近黑 */
|
|
/* 暗色的玻璃和盖在背景图上的底色：从背景图自己的平均色算出来（见 display/src/backgroundTint.ts 写进 --bg-tint 的值，压暗、降低饱和度），不再是固定的蓝；没算出来之前用下面的回退色 */
|
|
--glass-tint: var(--bg-tint, #1d1c24);
|
|
--glass-light: #ffffff;
|
|
--glass-line: #ffffff;
|
|
--glass-shade: #04061a;
|
|
--glass-veil: var(--bg-veil-tint, #131217);
|
|
|
|
--weather-core: #e6edfb;
|
|
--weather-halo: #b4c4ea;
|
|
|
|
--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;
|
|
}
|