96 lines
2.8 KiB
CSS
96 lines
2.8 KiB
CSS
/* ============================================================
|
|
* design/_base.css — 原型共享基底
|
|
* ============================================================
|
|
*
|
|
* 用途：供 design/*.html 原型 <link> 引用。集中此前在每个原型
|
|
* <style> 里字面重复的 reset / body / 极光铜晕 / 字体类 /
|
|
* reduced-motion，消除 24 份副本。
|
|
*
|
|
* 依赖：必须在本文件之前 <link href="tokens.css"> —— 下方的
|
|
* body 背景与极光底色均引用 token 变量。
|
|
*
|
|
* 字体策略：与生产 src/styles/globals.css 的 --font-sans 对齐，
|
|
* 优先系统字体，避免 CJK 网页字体（15MB+）。
|
|
* .serif 用宋族做显示字，.mono 用 JetBrains Mono 做数据/标签。
|
|
* ============================================================ */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--ink);
|
|
color: var(--fg);
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
|
|
"Helvetica Neue", system-ui, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 极光铜晕：铜绿主导，把暗底拉向 verdigris-on-bronze。
|
|
* 各原型此前字面一致，固定为设计语言的氛围底色。 */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: -10vmax;
|
|
z-index: -1;
|
|
background:
|
|
radial-gradient(
|
|
54vmax 54vmax at 12% 4%,
|
|
rgba(111, 163, 137, 0.2),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
40vmax 40vmax at 92% 8%,
|
|
rgba(201, 162, 74, 0.1),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
60vmax 60vmax at 50% 112%,
|
|
rgba(184, 57, 46, 0.06),
|
|
transparent 60%
|
|
);
|
|
filter: blur(28px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.serif {
|
|
font-family:
|
|
"Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
|
|
}
|
|
.mono {
|
|
font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* iframe 缩略图态：被 index.html 的 live <iframe> 嵌入时（_theme.js 加 .in-frame），
|
|
动画瞬间完成到末态、过渡归零——避免 25 个缩略图同时持续重绘耗 CPU。
|
|
用 duration 归零而非 play-state:paused：确保入场动画（如 opacity 0→1）跑到
|
|
末帧可见态，不会停在首帧导致元素消失。JS（rAF/setTimeout）驱动的动画
|
|
（仅 chat）开销可控，不在此处理。 */
|
|
.in-frame *,
|
|
.in-frame *::before,
|
|
.in-frame *::after {
|
|
animation-duration: 0.001s !important;
|
|
animation-delay: 0s !important;
|
|
transition-duration: 0.001s !important;
|
|
}
|