106 lines
2.3 KiB
CSS
106 lines
2.3 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 纸感设计 token（UX_SPEC §2.1） */
|
||
:root,
|
||
[data-theme="paper"] {
|
||
--color-bg: #f5f1e8;
|
||
--color-panel: #fbf8f1;
|
||
--color-ink: #2b2620;
|
||
--color-ink-soft: #6b6356;
|
||
--color-line: #e5ddcd;
|
||
--color-cinnabar: #a23b2e;
|
||
--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;
|
||
}
|
||
|
||
[data-theme="night"] {
|
||
--color-bg: #181614;
|
||
--color-panel: #221f1b;
|
||
--color-ink: #efe6d7;
|
||
--color-ink-soft: #b9ab96;
|
||
--color-line: #3c352c;
|
||
--color-cinnabar: #e07866;
|
||
--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);
|
||
}
|
||
}
|