141 lines
3.7 KiB
CSS
141 lines
3.7 KiB
CSS
/* 唯一允许出现颜色字面量的文件。其余 CSS 只能 var(--*)。 */
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--bg: #f7f7f6;
|
|
--surface: #fff;
|
|
--line: rgb(0 0 0 / 8%);
|
|
--text: #1a1a1a;
|
|
--text-dim: #6b6b6b;
|
|
--accent: #1a1a1a;
|
|
--on-accent: #fff;
|
|
--on-danger: #fff;
|
|
|
|
--ok: #1f7a4d;
|
|
--warn: #b25e00;
|
|
--danger: #b3261e;
|
|
--busy: #3b6ea8;
|
|
--role-purple: #7b4fb3;
|
|
--grad-sunset: linear-gradient(90deg, #ff8a3d, #f0366b);
|
|
--grad-ocean: linear-gradient(90deg, #1ea7d8, #5b5be0);
|
|
--grad-aurora: linear-gradient(90deg, #19b97a, #2c8fe6, #9a5bf0);
|
|
--grad-candy: linear-gradient(90deg, #f06bb3, #8b6bf0);
|
|
--grad-gold: linear-gradient(90deg, #d99a1c, #f2c94c, #c27a0a);
|
|
--grad-rainbow: linear-gradient(90deg, #e5484d, #f5a524, #3fb950, #2c8fe6, #9a5bf0);
|
|
|
|
--surface-2: #efefed;
|
|
--line-strong: rgb(0 0 0 / 14%);
|
|
--accent-soft: rgb(0 0 0 / 5%);
|
|
|
|
--glass: rgb(247 247 246 / 72%);
|
|
--scrim: rgb(0 0 0 / 40%);
|
|
/* 二维码必须深色码点配浅色底,暗色主题下也不反转,否则很多扫码器识别不了 */
|
|
--qr-bg: #fff;
|
|
--qr-fg: #000;
|
|
--shadow-pop: 0 4px 16px rgb(0 0 0 / 12%);
|
|
--shadow-sheet: 0 12px 40px rgb(0 0 0 / 18%);
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-avatar: 50%;
|
|
--blur-bar: blur(10px);
|
|
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-6: 24px;
|
|
|
|
--font-sans: "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;
|
|
|
|
--bar-h: 52px;
|
|
|
|
/* 渐变只表达状态与层次,低饱和、小面积 */
|
|
--ok-soft: color-mix(in srgb, var(--ok) 16%, transparent);
|
|
--warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
|
|
--danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
|
|
--busy-soft: color-mix(in srgb, var(--busy) 14%, transparent);
|
|
--fade-down: linear-gradient(to bottom, var(--glass), transparent);
|
|
--tile-gradient: linear-gradient(145deg, var(--surface), var(--surface-2));
|
|
--progress-gradient: linear-gradient(90deg, var(--busy-soft), var(--busy));
|
|
--warn-bar: linear-gradient(90deg, var(--warn), transparent);
|
|
|
|
--duration-exit: 150ms;
|
|
--duration-enter: 210ms;
|
|
--duration-move: 400ms;
|
|
}
|
|
|
|
/* 暗色变量出现两次:跟随系统(未手动选亮色时),和手动指定暗色。改一处必须同步另一处 */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
color-scheme: dark;
|
|
|
|
--bg: #141414;
|
|
--surface: #1c1c1c;
|
|
--line: rgb(255 255 255 / 9%);
|
|
--text: #ececec;
|
|
--text-dim: #8a8a8a;
|
|
--accent: #ececec;
|
|
--on-accent: #141414;
|
|
--on-danger: #141414;
|
|
|
|
--ok: #5bc48a;
|
|
--warn: #e0a050;
|
|
--danger: #f2877f;
|
|
--busy: #7fb0e6;
|
|
--role-purple: #b79af0;
|
|
|
|
--surface-2: #262626;
|
|
--line-strong: rgb(255 255 255 / 16%);
|
|
--accent-soft: rgb(255 255 255 / 6%);
|
|
|
|
--glass: rgb(20 20 20 / 72%);
|
|
--scrim: rgb(0 0 0 / 60%);
|
|
--shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
|
|
--shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);
|
|
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--bg: #141414;
|
|
--surface: #1c1c1c;
|
|
--line: rgb(255 255 255 / 9%);
|
|
--text: #ececec;
|
|
--text-dim: #8a8a8a;
|
|
--accent: #ececec;
|
|
--on-accent: #141414;
|
|
--on-danger: #141414;
|
|
|
|
--ok: #5bc48a;
|
|
--warn: #e0a050;
|
|
--danger: #f2877f;
|
|
--busy: #7fb0e6;
|
|
--role-purple: #b79af0;
|
|
|
|
--surface-2: #262626;
|
|
--line-strong: rgb(255 255 255 / 16%);
|
|
--accent-soft: rgb(255 255 255 / 6%);
|
|
|
|
--glass: rgb(20 20 20 / 72%);
|
|
--scrim: rgb(0 0 0 / 60%);
|
|
--shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
|
|
--shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);
|
|
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
:root:root {
|
|
--glass: var(--bg);
|
|
--blur-bar: none;
|
|
}
|
|
}
|