b9f9134748
- 面色阶 surface-soft/card/strong + 文字 5 级 body-strong/body/muted-soft - 边框 line-soft、coral 状态 cinnabar-active/disabled（按压变深 + 奶油化禁用） - 圆角刻度 xs..xl/full：按钮 rounded-md、卡片 rounded-lg、徽章 pill - 排版档 display/title/caption/eyebrow/prose（衬线负字距） - 动效 token duration-fast/base + ease-standard，transitionUi 常量统一过渡 - 焦点环统一 cinnabar/35；双主题成对定义
139 lines
3.5 KiB
CSS
139 lines
3.5 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 纸感设计 token（UX_SPEC §2.1） */
|
||
:root,
|
||
[data-theme="paper"] {
|
||
/* 面色阶：底 → 分隔带 → 内容卡（比底暗一步）→ 选中强调 → 浮起面板 */
|
||
--color-bg: #f5f1e8;
|
||
--color-surface-soft: #efe9dc;
|
||
--color-surface-card: #ece4d3;
|
||
--color-surface-strong: #e4d9c4;
|
||
--color-panel: #fbf8f1;
|
||
/* 文字色阶（5 级）：标题 → 强调段 → 正文 → 次级 → 说明/细则 */
|
||
--color-ink: #2b2620;
|
||
--color-body-strong: #3a342b;
|
||
--color-body: #4a4234;
|
||
--color-ink-soft: #6b6356;
|
||
--color-muted-soft: #8a8073;
|
||
/* 边框：主边框 + 同带内更弱分隔 */
|
||
--color-line: #e5ddcd;
|
||
--color-line-soft: #ece4d5;
|
||
/* 朱砂 coral：主色 + 按压变深 + 奶油化禁用 + 淡底 */
|
||
--color-cinnabar: #a23b2e;
|
||
--color-cinnabar-active: #8a2f24;
|
||
--color-cinnabar-disabled: #d9cdbd;
|
||
--color-cinnabar-wash: #a23b2e14;
|
||
--color-conflict: #b5543a;
|
||
--color-overdue: #c8893a;
|
||
--color-pass: #5a6b4f;
|
||
--color-info: #4a5a6b;
|
||
--color-conflict-mark: #b5543a26;
|
||
--color-conflict-mark-strong: #b5543a8c;
|
||
--shadow-paper: #2b26200f;
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* 动效 token（与主题无关，单处定义；夜读模式不覆盖） */
|
||
:root {
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
--dur-fast: 120ms;
|
||
--dur-base: 180ms;
|
||
}
|
||
|
||
[data-theme="night"] {
|
||
/* 面色阶：底 → 分隔带 → 浮起面板 → 内容卡（暗面向上抬）→ 选中强调 */
|
||
--color-bg: #181614;
|
||
--color-surface-soft: #1e1b17;
|
||
--color-surface-card: #2a2620;
|
||
--color-surface-strong: #332e26;
|
||
--color-panel: #221f1b;
|
||
/* 文字色阶（5 级） */
|
||
--color-ink: #efe6d7;
|
||
--color-body-strong: #ddd2c0;
|
||
--color-body: #cdc0ab;
|
||
--color-ink-soft: #b9ab96;
|
||
--color-muted-soft: #8f8474;
|
||
/* 边框 */
|
||
--color-line: #3c352c;
|
||
--color-line-soft: #2f2a23;
|
||
/* 朱砂 coral */
|
||
--color-cinnabar: #e07866;
|
||
--color-cinnabar-active: #c85f4d;
|
||
--color-cinnabar-disabled: #3c352c;
|
||
--color-cinnabar-wash: #e0786620;
|
||
--color-conflict: #ef8a72;
|
||
--color-overdue: #d8a65d;
|
||
--color-pass: #95b47d;
|
||
--color-info: #8ca8ca;
|
||
--color-conflict-mark: #ef8a7230;
|
||
--color-conflict-mark-strong: #ef8a7290;
|
||
--shadow-paper: #00000045;
|
||
color-scheme: dark;
|
||
}
|
||
|
||
html {
|
||
background: var(--color-bg);
|
||
}
|
||
|
||
body {
|
||
background: var(--color-bg);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
::selection {
|
||
background: var(--color-cinnabar-wash);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
/* 流式打字机光标：朱砂闪烁；尊重 prefers-reduced-motion（UX §10）。 */
|
||
.typewriter-cursor {
|
||
animation: typewriter-blink 1s step-end infinite;
|
||
}
|
||
|
||
@keyframes typewriter-blink {
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 冲突就地标注锚点：朱砂波浪下划线（UX §8.3）。 */
|
||
.conflict-anchor {
|
||
text-decoration: underline wavy var(--color-conflict);
|
||
text-underline-offset: 3px;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
/* 终稿正文：冲突原文持续高亮（朱砂淡底），点锚点定位时闪烁一下（UX §8.3）。 */
|
||
.draft-mark {
|
||
background-color: var(--color-conflict-mark);
|
||
border-radius: 2px;
|
||
}
|
||
.draft-mark-flash {
|
||
animation: draft-mark-flash 0.9s ease-out;
|
||
}
|
||
|
||
@keyframes draft-mark-flash {
|
||
0%,
|
||
100% {
|
||
background-color: var(--color-conflict-mark);
|
||
}
|
||
30% {
|
||
background-color: var(--color-conflict-mark-strong);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.typewriter-cursor {
|
||
animation: none;
|
||
}
|
||
.conflict-anchor {
|
||
transition: none;
|
||
}
|
||
.draft-mark-flash {
|
||
animation: none;
|
||
outline: 2px solid var(--color-conflict);
|
||
}
|
||
}
|