Blizzard
91 lines
2.0 KiB
CSS
91 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* ── 设计 token（设计稿 v0.2）────────────────────────────
|
|
青瓷绿单强调色；中性色整体向青绿偏移；
|
|
终端窗双主题共用深色。 */
|
|
:root {
|
|
--ground: #f6f8f7;
|
|
--surface: #ffffff;
|
|
--ink: #16211d;
|
|
--ink-2: #55665f;
|
|
--ink-3: #8a9891;
|
|
--hairline: #e1e8e4;
|
|
--hairline-strong: #c9d4cf;
|
|
--accent: #0e7c6b;
|
|
--accent-ink: #0a5a4e;
|
|
--accent-soft: #e3f1ec;
|
|
--code-bg: #edf2f0;
|
|
--term-bg: #10201b;
|
|
--term-ink: #c7e8de;
|
|
}
|
|
|
|
.dark {
|
|
--ground: #0d1311;
|
|
--surface: #131b18;
|
|
--ink: #e7efeb;
|
|
--ink-2: #93a69f;
|
|
--ink-3: #64756e;
|
|
--hairline: #22302b;
|
|
--hairline-strong: #35453f;
|
|
--accent: #3ecdad;
|
|
--accent-ink: #6fdfc6;
|
|
--accent-soft: #12352d;
|
|
--code-bg: #182420;
|
|
--term-bg: #0a1512;
|
|
--term-ink: #a9d8cb;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-ground: var(--ground);
|
|
--color-surface: var(--surface);
|
|
--color-ink: var(--ink);
|
|
--color-ink-2: var(--ink-2);
|
|
--color-ink-3: var(--ink-3);
|
|
--color-hairline: var(--hairline);
|
|
--color-hairline-strong: var(--hairline-strong);
|
|
--color-accent: var(--accent);
|
|
--color-accent-ink: var(--accent-ink);
|
|
--color-accent-soft: var(--accent-soft);
|
|
--color-code: var(--code-bg);
|
|
--color-term: var(--term-bg);
|
|
--color-term-ink: var(--term-ink);
|
|
|
|
--font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB",
|
|
"Microsoft YaHei", "Noto Sans SC", sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
|
|
monospace;
|
|
}
|
|
|
|
html {
|
|
background: var(--ground);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-ground text-ink font-sans antialiased;
|
|
font-size: 16px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent-soft);
|
|
color: var(--accent-ink);
|
|
}
|
|
|
|
/* 终端光标 */
|
|
@keyframes caret-blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.caret-blink {
|
|
animation: caret-blink 1.1s steps(1) infinite;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.caret-blink {
|
|
animation: none;
|
|
}
|
|
}
|