99 lines
1.9 KiB
CSS
99 lines
1.9 KiB
CSS
/* 站牌导视（轨道交通导视系统）：白底粗黑、线路色圆标、站名牌。
|
|
颜色语义：琥珀 = direct 直连出口，青 = WARP 净出口；协议各有线路色。 */
|
|
:root {
|
|
--bg: #f7f7f4;
|
|
--panel: #ffffff;
|
|
--panel-raised: #ffffff;
|
|
--line: #e2e2dd;
|
|
--line-soft: #ecece8;
|
|
--direct: #b26a00;
|
|
--direct-dim: #faf1e2;
|
|
--warp: #007a72;
|
|
--warp-dim: #e2f2f0;
|
|
--text: #212529;
|
|
--muted: #6e7073;
|
|
--danger: #c0392b;
|
|
/* 重点色：深藏青（站名牌、主按钮、导航下划线），比纯黑柔和 */
|
|
--ink: #2b3f5c;
|
|
--ink-hover: #24354e;
|
|
|
|
/* 协议线路色（导视系统的线路标识） */
|
|
--proto-vmess: #275ad1;
|
|
--proto-trojan: #8348c7;
|
|
--proto-shadowsocks: #2f7d3b;
|
|
--proto-hysteria2: #c23d5d;
|
|
|
|
--font-body: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* 页面大标题：导视级粗黑 */
|
|
.display {
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* 导视小标签：加粗 + 字距 */
|
|
.label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.egress-direct {
|
|
color: var(--direct);
|
|
}
|
|
|
|
.egress-warp {
|
|
color: var(--warp);
|
|
}
|
|
|
|
/* 语义圆点（图例、标签内） */
|
|
.lamp {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lamp-direct {
|
|
background: var(--direct);
|
|
}
|
|
|
|
.lamp-warp {
|
|
background: var(--warp);
|
|
}
|
|
|
|
.lamp-off {
|
|
background: #b9bab5;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--text);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|