im0o
7a764f5fe1
设计基调定为：层次靠底色和一像素描边而不是投影，一屏最多两层容器，间距给足。 tokens.css 顶部写了这三条规则，后面的组件都是它们的推论。 入站列表把两套写法合并成一张表：老式顶层端口字段（mixed-port 这些）和 listeners 数组。 只画 listeners 的话，一台只用 mixed-port 的机器打开会是空板，而那个端口正在跑—— 这等于对用户撒谎。合并逻辑在 shared/inbounds.ts，带 10 个测试。 后端顺带能提供打包后的静态文件了，一个进程就能跑起来。
144 lines
2.6 KiB
CSS
144 lines
2.6 KiB
CSS
/*
|
|
* 设计基调。
|
|
*
|
|
* 三条规则，其余都是它们的推论：
|
|
* 1. 层次靠底色深浅和一像素描边，不靠投影
|
|
* 2. 不要卡片套卡片。一屏最多两层容器，再深就换成分割线
|
|
* 3. 信息密度偏低。行高、间距给足，宁可多滚动也不要挤
|
|
*
|
|
* 颜色只留一个强调色，用在「当前选中」和「主要操作」上。状态色（成功/警告/危险）
|
|
* 只在真的表示状态时用，不拿来装饰。
|
|
*/
|
|
|
|
:root {
|
|
/* 中性色阶。带一点点冷调，避免纯灰的死板 */
|
|
--c-bg: #fbfbfc;
|
|
--c-surface: #ffffff;
|
|
--c-surface-sunken: #f4f5f7;
|
|
--c-border: #e4e6ea;
|
|
--c-border-strong: #d0d3d9;
|
|
|
|
--c-text: #1c1e21;
|
|
--c-text-soft: #5c6169;
|
|
--c-text-faint: #8b9098;
|
|
|
|
/* 强调色：偏青的蓝，冷静，不抢戏 */
|
|
--c-accent: #2b7a78;
|
|
--c-accent-soft: #e6f2f1;
|
|
--c-accent-text: #1f5c5a;
|
|
|
|
--c-danger: #b3261e;
|
|
--c-danger-soft: #fdedec;
|
|
--c-warn: #8a6100;
|
|
--c-warn-soft: #fdf5e3;
|
|
--c-ok: #1f6b3a;
|
|
--c-ok-soft: #e9f5ed;
|
|
|
|
/* 间距。低密度的来源，别调小 */
|
|
--s-1: 4px;
|
|
--s-2: 8px;
|
|
--s-3: 12px;
|
|
--s-4: 16px;
|
|
--s-5: 24px;
|
|
--s-6: 32px;
|
|
--s-7: 48px;
|
|
|
|
--r-sm: 6px;
|
|
--r-md: 10px;
|
|
--r-lg: 14px;
|
|
|
|
--f-sans:
|
|
system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC',
|
|
sans-serif;
|
|
--f-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
|
|
|
|
--t-xs: 12px;
|
|
--t-sm: 13px;
|
|
--t-base: 14px;
|
|
--t-lg: 16px;
|
|
--t-xl: 20px;
|
|
--t-2xl: 26px;
|
|
|
|
--line: 1.7;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--c-bg: #16181c;
|
|
--c-surface: #1d2025;
|
|
--c-surface-sunken: #121417;
|
|
--c-border: #2b2f36;
|
|
--c-border-strong: #3a3f48;
|
|
|
|
--c-text: #e6e8eb;
|
|
--c-text-soft: #9ba1a9;
|
|
--c-text-faint: #6c727a;
|
|
|
|
--c-accent: #4db6ac;
|
|
--c-accent-soft: #1b3330;
|
|
--c-accent-text: #7fd4cb;
|
|
|
|
--c-danger: #f2b8b5;
|
|
--c-danger-soft: #3a1f1e;
|
|
--c-warn: #e8c37a;
|
|
--c-warn-soft: #33290f;
|
|
--c-ok: #86d6a0;
|
|
--c-ok-soft: #16301f;
|
|
}
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--c-bg);
|
|
color: var(--c-text);
|
|
font-family: var(--f-sans);
|
|
font-size: var(--t-base);
|
|
line-height: var(--line);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p,
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
.mono {
|
|
font-family: var(--f-mono);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--c-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-accent-soft);
|
|
color: var(--c-accent-text);
|
|
}
|