初始化提交
This commit is contained in:
chenxin committed
commit
887c1f449e
963 files changed
+166869
No files matched your search
@@ -0,0 +1,24 @@
|
||||
# 样式架构
|
||||
|
||||
`globals.css` 是唯一的全局入口，负责导入 Tailwind 与领域样式；它只应保留以下内容：
|
||||
|
||||
- 主题与设计 token；
|
||||
- 字体声明；
|
||||
- reset、可访问性基础规则；
|
||||
- 跨领域 visual primitive，例如 glass、mirror、vermilion、grain、星盘词法。
|
||||
|
||||
页面或领域专属规则放在 `features/`：
|
||||
|
||||
| 文件 | 职责 |
|
||||
| ----------------- | ------------------------------ |
|
||||
| `chat.css` | Markdown、代码高亮与 KaTeX |
|
||||
| `characters.css` | 魂册、生命周期与人物档案 |
|
||||
| `memory.css` | 记忆筛选、列表与侧栏 |
|
||||
| `time.css` | 日晷、时态因子与事件快照 |
|
||||
| `drive.css` | 太一目标、好奇、天平与阴阳制衡 |
|
||||
| `world.css` | 河图关系图、实体与世界观共振 |
|
||||
| `evolution.css` | 周天四镜、候选与版本层积 |
|
||||
| `personality.css` | 十镜、人格种子、明德与版本层 |
|
||||
| `cosmos.css` | 灵枢太极、四象与八卦详注 |
|
||||
|
||||
新增领域样式时，先使用现有 token 与 primitive；只有确实跨领域复用时才回流至 `globals.css`。迁移样式不得改动选择器或视觉行为，并运行 `docs/visual-regression.md` 定义的矩阵进行确认。
|
||||
@@ -0,0 +1,311 @@
|
||||
/* 人物魂册专属镜面与生命周期样式。 */
|
||||
@layer utilities {
|
||||
/*
|
||||
* 魂册镜面卡（soul-card）：人物页激活档案的镜面材质 Hero。
|
||||
* 设计稿 characters-preview.html §soul-card — 三层纹理（镜面光泽 + 扫描漫反射 + 铜颗粒）。
|
||||
* 在 mirror-face 基础上增加 ::before（静态光泽）与 ::after（feTurbulence 颗粒）。
|
||||
*/
|
||||
.soul-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
padding: 28px 30px;
|
||||
background:
|
||||
var(--face-sheen), color-mix(in srgb, var(--surface) 40%, transparent);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
inset 0 -1px 0 var(--face-in-bot),
|
||||
var(--shadow);
|
||||
}
|
||||
.soul-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
130deg,
|
||||
transparent 0%,
|
||||
transparent 28%,
|
||||
rgba(201, 162, 74, 0.025) 34%,
|
||||
rgba(255, 255, 255, 0.06) 40%,
|
||||
rgba(201, 162, 74, 0.025) 48%,
|
||||
transparent 55%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
background-position: 35% 35%;
|
||||
opacity: 0.42;
|
||||
}
|
||||
.soul-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||||
opacity: 0.018;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.dark .soul-card::after {
|
||||
opacity: 0.028;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.soul-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.soul-top {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.soul-mirror {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
position: relative;
|
||||
}
|
||||
.soul-mirror .inner {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(160deg, var(--patina-bright), var(--patina));
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.soul-mirror .halo {
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border-radius: 50%;
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.soul-id {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.soul-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.soul-realname {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.soul-mood {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.pulse-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--patina);
|
||||
flex-shrink: 0;
|
||||
animation: pulse-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||||
}
|
||||
.soul-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
color: var(--patina);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 七阶生命周期轨 */
|
||||
.lifecycle {
|
||||
margin-top: 22px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.lifecycle-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-faint);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lifecycle-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lc-station {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.lc-dot {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--fg-faint);
|
||||
background: transparent;
|
||||
}
|
||||
.lc-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lc-station.reached .lc-dot {
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-dim);
|
||||
}
|
||||
.lc-station.reached .lc-name {
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.lc-station.current .lc-dot {
|
||||
border-color: var(--gilt);
|
||||
background: var(--gilt);
|
||||
box-shadow: 0 0 0 4px var(--gilt-faint);
|
||||
}
|
||||
.lc-station.current .lc-name {
|
||||
color: var(--gilt);
|
||||
font-weight: 600;
|
||||
}
|
||||
.lc-link {
|
||||
height: 1.5px;
|
||||
align-self: flex-start;
|
||||
margin-top: 4.75px;
|
||||
background: var(--rule);
|
||||
width: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lc-link.reached {
|
||||
background: var(--patina-dim);
|
||||
}
|
||||
|
||||
/* 档案字段网格 + 关键指标 */
|
||||
.soul-grid {
|
||||
margin-top: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 240px;
|
||||
gap: 26px;
|
||||
}
|
||||
.soul-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px 28px;
|
||||
}
|
||||
.soul-fields .field dt {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.soul-fields .field dd {
|
||||
margin: 3px 0 0;
|
||||
font-size: 13.5px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.soul-fields .field dd.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.soul-bg {
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.soul-bg .lab {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.soul-bg p {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--fg-dim);
|
||||
margin: 0;
|
||||
}
|
||||
.soul-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.soul-stat {
|
||||
background: var(--ink);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.soul-stat .k {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.soul-stat .v {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--gilt);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.soul-stat .v small {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-dim);
|
||||
font-family: var(--font-mono);
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.soul-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.soul-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.soul-mirror {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
.soul-mirror .inner {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.soul-name {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
/* 对话 Markdown 专属排版与代码高亮。 */
|
||||
/*
|
||||
* Markdown 排版（.md-body）：用于 assistant 消息正文。
|
||||
* 代码块固定深色背景（IDE 风格），亮 / 暗主题下一致；hljs token 取 github-dark 风格。
|
||||
*/
|
||||
.md-body {
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
/* 暗色宋体笔画偏细，镜面气泡内加重 + 轻锐化提升可读性（亮色宋体无此问题） */
|
||||
.dark .mirror-sweep .md-body {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.012em;
|
||||
text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.md-body > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.md-body > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.md-body p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.md-body ul,
|
||||
.md-body ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 1.3em;
|
||||
}
|
||||
.md-body li {
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
.md-body li::marker {
|
||||
color: var(--muted);
|
||||
}
|
||||
.md-body h1,
|
||||
.md-body h2,
|
||||
.md-body h3,
|
||||
.md-body h4 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: 0.7em 0 0.3em;
|
||||
}
|
||||
.md-body h1 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.md-body h2 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
.md-body h3,
|
||||
.md-body h4 {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.md-body blockquote {
|
||||
border-left: 2px solid var(--gold);
|
||||
margin: 0.6em 0;
|
||||
padding-left: 0.8em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.md-body a {
|
||||
color: var(--jade);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.md-body table {
|
||||
border-collapse: collapse;
|
||||
margin: 0.6em 0;
|
||||
font-size: 0.85em;
|
||||
width: 100%;
|
||||
}
|
||||
.md-body th,
|
||||
.md-body td {
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0.3em 0.6em;
|
||||
text-align: left;
|
||||
}
|
||||
.md-body th {
|
||||
background: var(--glass);
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-body hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
/* highlight.js token 色（github-dark 风格，配深色代码窗口） */
|
||||
.md-body .hljs {
|
||||
color: #c9d1d9;
|
||||
background: transparent;
|
||||
}
|
||||
.md-body .hljs-comment,
|
||||
.md-body .hljs-quote {
|
||||
color: #6b746e;
|
||||
font-style: italic;
|
||||
}
|
||||
.md-body .hljs-keyword,
|
||||
.md-body .hljs-selector-tag,
|
||||
.md-body .hljs-built_in,
|
||||
.md-body .hljs-name,
|
||||
.md-body .hljs-tag,
|
||||
.md-body .hljs-meta {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.md-body .hljs-string,
|
||||
.md-body .hljs-attr,
|
||||
.md-body .hljs-addition,
|
||||
.md-body .hljs-template-string {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.md-body .hljs-number,
|
||||
.md-body .hljs-literal,
|
||||
.md-body .hljs-variable,
|
||||
.md-body .hljs-template-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.md-body .hljs-title,
|
||||
.md-body .hljs-title.function_,
|
||||
.md-body .hljs-section {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
.md-body .hljs-type,
|
||||
.md-body .hljs-class .hljs-title,
|
||||
.md-body .hljs-params {
|
||||
color: #ffa657;
|
||||
}
|
||||
.md-body .hljs-attribute,
|
||||
.md-body .hljs-symbol,
|
||||
.md-body .hljs-bullet,
|
||||
.md-body .hljs-link {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.md-body .hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.md-body .hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
/* diff 删除行（新增行 .hljs-addition 已归入 string 浅蓝 #a5d6ff，删除行取朱红成对比） */
|
||||
.md-body .hljs-deletion {
|
||||
color: #ff7b72;
|
||||
}
|
||||
/* KaTeX：随 --fg 着色（亮暗皆可读）；块级公式横向可滚，避免宽式撑破气泡 */
|
||||
.md-body .katex {
|
||||
color: var(--fg);
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.md-body .katex-display {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0.3em 0;
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
/* 灵枢页专属样式：从页面内联样式迁出，保持现有视觉与断点。 */
|
||||
/* ═══ 太极旋转 (90s) ═══ */
|
||||
@keyframes taiji-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.taiji-disc {
|
||||
animation: taiji-spin 90s linear infinite;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
/* ═══ 眼 pulse (3.2s) ═══ */
|
||||
@keyframes eye-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
.taiji-eye-pulse {
|
||||
animation: eye-pulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||||
transform-origin: 100px 52px;
|
||||
}
|
||||
.taiji-eye-pulse.late {
|
||||
animation-delay: 1.6s;
|
||||
transform-origin: 100px 148px;
|
||||
}
|
||||
|
||||
/* ═══ 铜镜噪点颗粒 (feTurbulence overlay) ═══ */
|
||||
.noise-after::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||||
opacity: 0.018;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.noise-after > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ═══ Slate 色值（未在 @theme 映射，局部定义）═══ */
|
||||
.cosmos-root {
|
||||
--slate: #6b7785;
|
||||
--slate-dim: rgba(107, 119, 133, 0.4);
|
||||
--slate-wash: rgba(107, 119, 133, 0.08);
|
||||
}
|
||||
|
||||
/* ═══ 四象象限卡片定位 ═══ */
|
||||
.sq-qinglong {
|
||||
position: absolute;
|
||||
top: 31%;
|
||||
left: 0;
|
||||
width: 38%;
|
||||
}
|
||||
.sq-zhuque {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 31%;
|
||||
width: 38%;
|
||||
}
|
||||
.sq-baihu {
|
||||
position: absolute;
|
||||
top: 31%;
|
||||
right: 0;
|
||||
width: 38%;
|
||||
}
|
||||
.sq-xuanwu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 31%;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.sq-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--surface);
|
||||
}
|
||||
.sq-zhuque .sq-card {
|
||||
border-color: var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.07);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sq-qinglong {
|
||||
width: 44%;
|
||||
}
|
||||
.sq-zhuque {
|
||||
width: 44%;
|
||||
left: 28%;
|
||||
}
|
||||
.sq-baihu {
|
||||
width: 44%;
|
||||
}
|
||||
.sq-xuanwu {
|
||||
width: 44%;
|
||||
left: 28%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 八卦详注网格 ═══ */
|
||||
.bg-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.bg-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 阴阳平衡度 gauge ticks ═══ */
|
||||
.br-tick {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--rule);
|
||||
}
|
||||
.br-tick-label {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
transform: translateX(-50%);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.br-marker {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
bottom: -3px;
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--gilt);
|
||||
box-shadow: 0 0 10px -1px rgba(201, 162, 74, 0.6);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.br-marker::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 6px solid var(--gilt);
|
||||
}
|
||||
|
||||
/* ═══ 八卦 SVG 节点 meta 文字 ═══ */
|
||||
.bagua-svg text.node-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
text-anchor: middle;
|
||||
fill: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ═══ 流弧线 ═══ */
|
||||
.flow-arc {
|
||||
fill: none;
|
||||
stroke: var(--patina-dim);
|
||||
stroke-width: 1.4;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* ═══ 八卦详注网格 ═══ */
|
||||
.bg-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.bg-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 八卦详注组卡片 ═══ */
|
||||
.bg-group {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 11px;
|
||||
}
|
||||
.bg-group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.bg-group-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.bg-group-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ═══ 单卦注记排布 ═══ */
|
||||
.bg-tri {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.bg-tri + .bg-tri {
|
||||
border-top: 1px dashed var(--rule);
|
||||
}
|
||||
.bg-tri-glyph-col {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 42px;
|
||||
}
|
||||
.bg-tri-glyph-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.bg-tri-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.bg-tri-role {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.bg-tri-map {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.bg-tri-duty {
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
margin-top: 4px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.bg-tri-behave {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* ═══ 愿景边界条 ═══ */
|
||||
.vision-strip {
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
border-left: 3px solid var(--gilt-dim);
|
||||
border-radius: 6px;
|
||||
padding: 13px 18px;
|
||||
background: var(--gilt-faint);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.vision-seal {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
letter-spacing: 0.06em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vision-desc {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.55;
|
||||
flex: 1;
|
||||
}
|
||||
.vision-desc code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--gilt);
|
||||
background: var(--surface);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.vision-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 9999px;
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
color: var(--gilt);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ═══ Section label ═══ */
|
||||
.section-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.section-label .sub {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--fg-dim);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.section-label .glyph {
|
||||
color: var(--gilt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ═══ 旋转 90s 的旧版 class（fallback）═══ */
|
||||
.animate-taiji-spin {
|
||||
animation: taiji-spin 90s linear infinite !important;
|
||||
}
|
||||
@@ -0,0 +1,565 @@
|
||||
/* drive 领域专属样式。 */
|
||||
/* ============================================================
|
||||
* 铜镜鉴心 v2.1 — 内驱力页（drive-preview.html）
|
||||
* 太一目标 + 好奇萤火 + 探索天平 + 阴阳制衡
|
||||
* ============================================================ */
|
||||
|
||||
/* -- 页头元信息 -- */
|
||||
.page-meta {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.page-meta b {
|
||||
color: var(--gilt);
|
||||
font-weight: 600;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* -- 太一目标 -- */
|
||||
.taiyi-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.taiyi-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.taiyi-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--fg-faint);
|
||||
}
|
||||
.taiyi-dot.active {
|
||||
background: var(--patina);
|
||||
box-shadow: 0 0 0 3px var(--patina-wash);
|
||||
animation: taiyi-pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||||
}
|
||||
.taiyi-dot.completed {
|
||||
background: var(--gilt);
|
||||
}
|
||||
@keyframes taiyi-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 3px var(--patina-wash);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 7px transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 3px var(--patina-wash);
|
||||
}
|
||||
}
|
||||
.taiyi-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.taiyi-tag {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.taiyi-status {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.taiyi-prog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.taiyi-prog .track {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.taiyi-prog .fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.taiyi-prog .tv {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
color: var(--fg-dim);
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* -- 好奇萤火 -- */
|
||||
.curio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.curio {
|
||||
position: relative;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
padding: 14px 16px 14px 18px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.curio:hover {
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.curio-fire {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 5px;
|
||||
background: var(--patina);
|
||||
position: relative;
|
||||
}
|
||||
.curio-fire::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, currentColor, transparent 70%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.curio-fire.hi {
|
||||
background: var(--gilt);
|
||||
}
|
||||
.curio-fire.hi::after {
|
||||
opacity: 0.6;
|
||||
animation: fire-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||||
}
|
||||
@keyframes fire-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.curio-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.curio-q {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.curio-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.src-tag {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--rule);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.src-tag .sdot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.src-world {
|
||||
color: var(--patina);
|
||||
}
|
||||
.src-world .sdot {
|
||||
background: var(--patina);
|
||||
}
|
||||
.src-memory {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.src-memory .sdot {
|
||||
background: var(--gilt);
|
||||
}
|
||||
.src-percept {
|
||||
color: var(--cinnabar);
|
||||
}
|
||||
.src-percept .sdot {
|
||||
background: var(--cinnabar);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.src-goal {
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.src-goal .sdot {
|
||||
background: var(--fg-dim);
|
||||
}
|
||||
.src-reflect {
|
||||
color: var(--patina-bright);
|
||||
}
|
||||
.src-reflect .sdot {
|
||||
background: var(--patina-bright);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.src-time {
|
||||
color: var(--gilt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.src-time .sdot {
|
||||
background: var(--gilt);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.risk-pill {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.risk-pill.L2 {
|
||||
color: var(--gilt);
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.risk-pill.L4 {
|
||||
color: var(--cinnabar);
|
||||
border-color: var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.1);
|
||||
}
|
||||
.ent-link {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.curio-bars {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.cbar {
|
||||
flex: 1;
|
||||
}
|
||||
.cbar .ck {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.cbar .ctrack {
|
||||
margin-top: 3px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cbar .cfill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.cbar.value .cfill {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.cbar.urg .cfill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar));
|
||||
}
|
||||
|
||||
/* -- 探索天平 -- */
|
||||
.sub-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-left: 3px solid var(--patina-dim);
|
||||
border-radius: 6px;
|
||||
padding: 16px 20px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.sub-card.deferred {
|
||||
border-left-color: var(--fg-faint);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.sub-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sub-from {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--patina);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.sub-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.sub-status {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.sub-status.candidate {
|
||||
color: var(--gilt);
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.sub-status.approved {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.sub-status.deferred {
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.sub-desc {
|
||||
font-size: 13px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.balance {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 56px 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
.pan {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.pan.right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.pan .plabel {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.pan .ptrack {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.pan.gain .ptrack {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina-wash));
|
||||
}
|
||||
.pan.cost .ptrack {
|
||||
background: linear-gradient(90deg, var(--patina-wash), var(--cinnabar-dim));
|
||||
}
|
||||
.pan .pfill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.pan.gain .pfill {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.pan.cost .pfill {
|
||||
right: 0;
|
||||
background: linear-gradient(90deg, var(--cinnabar-dim), var(--cinnabar));
|
||||
}
|
||||
.pan .pval {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
.pan.gain .pval {
|
||||
color: var(--patina);
|
||||
}
|
||||
.pan.cost .pval {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.88;
|
||||
}
|
||||
.fulcrum {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.fulcrum .beam {
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
background: var(--gilt-dim);
|
||||
position: relative;
|
||||
}
|
||||
.fulcrum .beam::before,
|
||||
.fulcrum .beam::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--gilt-dim);
|
||||
}
|
||||
.fulcrum .beam::before {
|
||||
left: 0;
|
||||
}
|
||||
.fulcrum .beam::after {
|
||||
right: 0;
|
||||
}
|
||||
.fulcrum .pivot {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 8px solid var(--gilt-dim);
|
||||
}
|
||||
.fulcrum .risk {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--gilt);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.sub-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
padding-top: 4px;
|
||||
border-top: 1px dashed var(--rule);
|
||||
}
|
||||
.vbtn {
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--rule);
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
transition:
|
||||
background 0.12s,
|
||||
border-color 0.12s;
|
||||
}
|
||||
.vbtn:hover {
|
||||
background: var(--surface-hi);
|
||||
}
|
||||
.vbtn.patina {
|
||||
border-color: var(--patina-dim);
|
||||
color: var(--patina);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.vbtn.patina:hover {
|
||||
background: rgba(111, 163, 137, 0.14);
|
||||
}
|
||||
.vbtn.note {
|
||||
font-size: 11px;
|
||||
color: var(--fg-faint);
|
||||
align-self: center;
|
||||
margin-right: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
letter-spacing: 0.02em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* -- 阴阳制衡 -- */
|
||||
.yin-yang {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
var(--patina-wash),
|
||||
transparent 50%,
|
||||
rgba(184, 57, 46, 0.06)
|
||||
),
|
||||
var(--surface);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
.yy-taiji {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
flex-shrink: 0;
|
||||
animation: yy-spin 80s linear infinite;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
@keyframes yy-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.yy-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.yy-text b {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
}
|
||||
.yy-text .yang {
|
||||
color: var(--patina);
|
||||
}
|
||||
.yy-text .yin {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.yy-meta {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: 5px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.yy-meta b {
|
||||
color: var(--patina);
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
/* evolution 领域专属样式。 */
|
||||
/* ============================================================
|
||||
* 铜镜鉴心 v2.1 — 演化页（evolution-preview.html）
|
||||
* 周天四镜 + 候选层积 + 朱砂待裁 + 应用沉积
|
||||
* ============================================================ */
|
||||
.cycle-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
background: var(--face-sheen), var(--surface);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
inset 0 -1px 0 var(--face-in-bot),
|
||||
var(--shadow);
|
||||
padding: 22px 26px 20px;
|
||||
}
|
||||
|
||||
.cycle-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.cycle-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cycle-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.cycle-id {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.cycle-state {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
color: var(--gilt);
|
||||
padding: 3px 10px;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 999px;
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.mirror-chain {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
.mc-step {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.mc-mirror {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mc-mirror .disc {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--fg-faint);
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.mc-step.done .mc-mirror .disc {
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
color: var(--patina);
|
||||
}
|
||||
.mc-step.active .mc-mirror .disc {
|
||||
border-color: var(--gilt);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 38% 32%,
|
||||
rgba(255, 255, 255, 0.32),
|
||||
transparent 60%
|
||||
),
|
||||
linear-gradient(160deg, var(--gilt), rgba(201, 162, 74, 0.55));
|
||||
color: var(--ink);
|
||||
box-shadow:
|
||||
0 0 0 4px var(--gilt-faint),
|
||||
0 0 22px -4px rgba(201, 162, 74, 0.5);
|
||||
animation: mc-pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||||
}
|
||||
.mc-step.active .mc-mirror::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
@keyframes mc-pulse {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 0 0 4px var(--gilt-faint),
|
||||
0 0 22px -4px rgba(201, 162, 74, 0.5);
|
||||
}
|
||||
70% {
|
||||
box-shadow:
|
||||
0 0 0 9px transparent,
|
||||
0 0 22px -4px rgba(201, 162, 74, 0.5);
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 0 4px var(--gilt-faint),
|
||||
0 0 22px -4px rgba(201, 162, 74, 0.5);
|
||||
}
|
||||
}
|
||||
.mc-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.mc-step.done .mc-name {
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.mc-step.active .mc-name {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.mc-sub {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.mc-yield {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--patina);
|
||||
}
|
||||
.mc-step.active .mc-yield {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.mc-link {
|
||||
align-self: center;
|
||||
margin-top: 18px;
|
||||
width: 22px;
|
||||
height: 1.5px;
|
||||
background: var(--rule);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mc-link.done {
|
||||
background: var(--patina-dim);
|
||||
}
|
||||
.snapshot-row {
|
||||
margin-top: 20px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.snap-mini .k {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.snap-mini .v {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
.snap-mini .v small {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-dim);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
.snap-verdict {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 6px;
|
||||
padding: 11px 14px;
|
||||
border-left: 2px solid var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
border-radius: 0 5px 5px 0;
|
||||
font-size: 13px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.snap-verdict b {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--gilt);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* -- 候选层积 + 应用沉积 -- */
|
||||
.cand-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
.strata-rail {
|
||||
width: 290px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.proposal {
|
||||
border: 1px solid var(--cinnabar);
|
||||
border-left: 3px solid var(--cinnabar);
|
||||
border-radius: 6px;
|
||||
padding: 17px 20px;
|
||||
background:
|
||||
radial-gradient(
|
||||
120% 100% at 0% 0%,
|
||||
rgba(184, 57, 46, 0.22),
|
||||
transparent 55%
|
||||
),
|
||||
rgba(184, 57, 46, 0.1);
|
||||
box-shadow: 0 0 28px -8px rgba(184, 57, 46, 0.35);
|
||||
}
|
||||
.prop-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.prop-seal {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--cinnabar);
|
||||
font-weight: 700;
|
||||
font-size: 14.5px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.prop-type {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
color: var(--fg-dim);
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.prop-risk {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.78;
|
||||
margin-left: auto;
|
||||
}
|
||||
.prop-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.prop-reason {
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
line-height: 1.65;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.prop-diff {
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
border: 1px solid var(--cinnabar-dim);
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.prop-diff .del {
|
||||
color: var(--cinnabar);
|
||||
text-decoration: line-through;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.prop-diff .add {
|
||||
color: var(--patina);
|
||||
}
|
||||
.prop-diff .field-tag {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--gilt);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.prop-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.vbtn.cinnabar {
|
||||
border-color: var(--cinnabar);
|
||||
color: var(--cinnabar);
|
||||
background: rgba(184, 57, 46, 0.08);
|
||||
}
|
||||
.vbtn.cinnabar:hover {
|
||||
background: rgba(184, 57, 46, 0.16);
|
||||
}
|
||||
|
||||
.cand-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
padding: 14px 16px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.cand-card:hover {
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.cand-card.auto {
|
||||
border-left: 3px solid var(--patina-dim);
|
||||
}
|
||||
.cand-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cand-glyph {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
}
|
||||
.cand-card.auto .cand-glyph {
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
color: var(--patina);
|
||||
}
|
||||
.cand-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.cand-tag {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.cand-judge {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cand-judge.auto {
|
||||
color: var(--patina);
|
||||
}
|
||||
.cand-judge.manual {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.cand-desc {
|
||||
font-size: 13px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.score-trio {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.score .k {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.score .track {
|
||||
margin-top: 4px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.score .fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.score.benefit .fill {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.score.risk .fill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar));
|
||||
}
|
||||
.score.conf .fill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--gilt));
|
||||
}
|
||||
.score .tv {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-dim);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.strata-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
padding: 18px 18px 16px;
|
||||
}
|
||||
.strata-list {
|
||||
position: relative;
|
||||
}
|
||||
.strata-list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 14px;
|
||||
bottom: 14px;
|
||||
width: 1px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--patina-dim),
|
||||
var(--rule) 50%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.stratum {
|
||||
position: relative;
|
||||
padding: 10px 0 10px 32px;
|
||||
}
|
||||
.stratum + .stratum {
|
||||
border-top: 1px dashed var(--rule);
|
||||
}
|
||||
.stratum .node {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: var(--patina-dim);
|
||||
border: 1.5px solid var(--patina-dim);
|
||||
z-index: 1;
|
||||
}
|
||||
.stratum.rejected .node {
|
||||
background: transparent;
|
||||
border-color: var(--cinnabar-dim);
|
||||
border-style: dashed;
|
||||
}
|
||||
.stratum-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
.stratum-ver {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.stratum.rejected .stratum-ver {
|
||||
color: var(--fg-dim);
|
||||
text-decoration: line-through;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.stratum-when {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
margin-left: auto;
|
||||
}
|
||||
.stratum-reason {
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
margin-top: 3px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.stratum-rollback {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--gilt);
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
.stratum-rollback:hover {
|
||||
color: var(--cinnabar);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.lower-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.strata-rail {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.curio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.snapshot-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.mc-link {
|
||||
width: 14px;
|
||||
}
|
||||
.ent-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.graph-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.graph-side {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
.graph-side .side-card {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.graph-side {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
/* 记忆页专属列表、筛选与侧栏样式。 */
|
||||
/*
|
||||
* 记忆页：双栏布局 + 分类标签 + 右栏
|
||||
* 设计稿 memory-preview.html
|
||||
*/
|
||||
.mem-region {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.mem-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.mem-rail {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
}
|
||||
.type-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.type-chip {
|
||||
font-size: 12.5px;
|
||||
padding: 5px 13px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg-dim);
|
||||
cursor: pointer;
|
||||
background: var(--surface);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition:
|
||||
background 0.12s,
|
||||
color 0.12s,
|
||||
border-color 0.12s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.type-chip:hover {
|
||||
color: var(--fg);
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.type-chip.active {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.type-chip .cnt {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mem-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.mem-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
background: var(--surface);
|
||||
padding: 13px 15px;
|
||||
transition: border-color 0.12s;
|
||||
}
|
||||
.mem-card:hover {
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.mem-card.high-sens {
|
||||
border-color: var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.04);
|
||||
}
|
||||
.mem-card.pending {
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.mem-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mem-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.mem-type {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mem-type.identity,
|
||||
.mem-type.user {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
}
|
||||
.mem-type.episodic,
|
||||
.mem-type.semantic {
|
||||
color: var(--gilt);
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.mem-type.procedural {
|
||||
color: #5a7fa6;
|
||||
border-color: rgba(90, 127, 166, 0.38);
|
||||
}
|
||||
.mem-type.relational {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
}
|
||||
.mem-type.emotional {
|
||||
color: var(--cinnabar);
|
||||
border-color: var(--cinnabar-dim);
|
||||
}
|
||||
.mem-type.reflection {
|
||||
color: var(--gilt);
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.mem-content {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
margin-top: 6px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.mem-meta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.meta-item {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-dim);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.meta-item .lab {
|
||||
color: var(--fg-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.meta-bar {
|
||||
width: 54px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.meta-bar .fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.meta-item.conf .fill {
|
||||
background: var(--patina);
|
||||
}
|
||||
.meta-item.imp .fill {
|
||||
background: var(--gilt);
|
||||
}
|
||||
.meta-item .vv {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
.meta-item.conf .vv {
|
||||
color: var(--patina);
|
||||
}
|
||||
.meta-item.imp .vv {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.mem-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-size: 11px;
|
||||
color: var(--fg-faint);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mem-foot .evi {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.mem-foot .act {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.mem-foot .act button {
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--surface);
|
||||
color: var(--fg-dim);
|
||||
cursor: pointer;
|
||||
}
|
||||
.mem-foot .act button:hover {
|
||||
color: var(--fg);
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.mem-foot .act button.primary {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.rail-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
.rail-card h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
background: var(--ink);
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
.search-box input::placeholder {
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.review-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.review-rule {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.review-rule .mark {
|
||||
color: var(--cinnabar);
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 700;
|
||||
}
|
||||
.review-rule.allow .mark {
|
||||
color: var(--patina);
|
||||
}
|
||||
.conflict-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 9px 11px;
|
||||
border-radius: 5px;
|
||||
background: var(--ink);
|
||||
border: 1px solid var(--cinnabar-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
.conflict-row .pair {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--cinnabar);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.conflict-row .desc {
|
||||
color: var(--fg-dim);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.conflict-row .verdict {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--gilt);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.mem-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.mem-rail {
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
/* personality 领域专属样式。 */
|
||||
/* ============================================================
|
||||
* 人格页面（PersonalityWorkspace）
|
||||
* 十镜网格 + 种子带 + 明德条 + 版本层积
|
||||
* 对齐 personality-core §7/§8 设计稿
|
||||
* ============================================================ */
|
||||
|
||||
.section-heading {
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* 种子带 */
|
||||
.seed-band {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
background: var(--face-sheen), var(--surface);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
inset 0 -1px 0 var(--face-in-bot),
|
||||
var(--shadow);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.seed-band::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||||
opacity: 0.018;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.seed-band > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.seed-mirror {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid var(--patina-dim);
|
||||
background:
|
||||
radial-gradient(circle at 35% 30%, var(--face-in-top), transparent 60%),
|
||||
var(--patina-wash);
|
||||
}
|
||||
.seed-mirror .glyph {
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
}
|
||||
.seed-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.seed-lab {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.seed-text {
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.tier-legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tier-legend b {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tier-legend .l1 {
|
||||
color: var(--patina);
|
||||
}
|
||||
.tier-legend .l2 {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.tier-legend .l4 {
|
||||
color: var(--cinnabar);
|
||||
}
|
||||
|
||||
/* 十镜网格 */
|
||||
.mirror-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 11px;
|
||||
}
|
||||
.mcell {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
padding: 13px 14px 12px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
min-height: 138px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.mcell.landed {
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.mcell.reserved {
|
||||
border-style: dashed;
|
||||
opacity: 0.62;
|
||||
}
|
||||
.mc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.mc-glyph {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
}
|
||||
.mc-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
.mc-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mc-src {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.mc-status {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 9.5px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--gilt-faint);
|
||||
color: var(--gilt);
|
||||
border: 1px solid var(--gilt-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mc-status.landed {
|
||||
background: var(--surface);
|
||||
}
|
||||
.mc-val {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.45;
|
||||
}
|
||||
.mc-val .em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 人格权重条 */
|
||||
.mc-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.mc-bars .br {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.mc-bars .tn {
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 11px;
|
||||
color: var(--fg-dim);
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mc-bars .tbar {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.mc-bars .tbar .fl {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.mc-bars .tv {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
width: 18px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 明德恒定层 */
|
||||
.mingde-strip {
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
border-left: 3px solid var(--gilt-dim);
|
||||
border-radius: 6px;
|
||||
padding: 13px 18px;
|
||||
background: var(--gilt-faint);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.mingde-strip .seal {
|
||||
font-family: "Songti SC", serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
letter-spacing: 0.06em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mingde-strip .desc {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.mingde-strip .desc code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 11.5px;
|
||||
color: var(--gilt);
|
||||
background: var(--surface);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.mingde-strip .tag {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 10px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px dashed var(--gilt-dim);
|
||||
color: var(--gilt);
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 下方双栏 */
|
||||
.lower-region {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.lower-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.strata-rail {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.mirror-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.lower-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.strata-rail {
|
||||
width: 100%;
|
||||
}
|
||||
.mirror-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.mirror-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.seed-band {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tier-legend {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
/* time 领域专属样式。 */
|
||||
/*
|
||||
* 日晷时辰盘：圆形 SVG 日晷 + 调制因子
|
||||
* 设计稿 time-preview.html
|
||||
*/
|
||||
.sundial-region {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.dial-card {
|
||||
position: relative;
|
||||
flex: 0 0 420px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
var(--face-sheen), color-mix(in srgb, var(--surface) 60%, transparent);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
inset 0 -1px 0 var(--face-in-bot),
|
||||
var(--shadow);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dial-svg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.dial-svg .ring-outer {
|
||||
fill: none;
|
||||
stroke: var(--rule);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dial-svg .ring-inner {
|
||||
fill: none;
|
||||
stroke: var(--gilt-dim);
|
||||
stroke-width: 0.8;
|
||||
stroke-dasharray: 2 4;
|
||||
}
|
||||
.dial-svg .tick {
|
||||
stroke: var(--fg-faint);
|
||||
stroke-width: 1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dial-svg .tick-major {
|
||||
stroke: var(--gilt-dim);
|
||||
stroke-width: 1.2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.dial-svg .shichen {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
fill: var(--fg-faint);
|
||||
}
|
||||
.dial-svg .shichen.current {
|
||||
fill: var(--gilt);
|
||||
font-size: 22px;
|
||||
}
|
||||
.dial-svg .shichen-hours {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 7.5px;
|
||||
text-anchor: middle;
|
||||
fill: var(--fg-faint);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.dial-svg .gnomon {
|
||||
stroke: var(--gilt);
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
filter: drop-shadow(0 0 4px rgba(201, 162, 74, 0.5));
|
||||
}
|
||||
.dial-svg .gnomon-tip {
|
||||
fill: var(--gilt);
|
||||
}
|
||||
.dial-svg .center-bg {
|
||||
fill: var(--ink);
|
||||
stroke: var(--gilt-dim);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dial-svg .center-time {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
text-anchor: middle;
|
||||
fill: var(--fg);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.dial-svg .center-shichen {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-anchor: middle;
|
||||
fill: var(--gilt);
|
||||
}
|
||||
.dial-svg .center-period {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 10px;
|
||||
text-anchor: middle;
|
||||
fill: var(--fg-dim);
|
||||
}
|
||||
.dial-foot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.lunar-pill {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.festival-pill {
|
||||
font-size: 12px;
|
||||
color: var(--cinnabar);
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--cinnabar-dim);
|
||||
border-radius: 999px;
|
||||
background: rgba(184, 57, 46, 0.1);
|
||||
}
|
||||
.term-pill {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 12.5px;
|
||||
color: var(--patina);
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--patina-dim);
|
||||
border-radius: 999px;
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
|
||||
/* 调制因子卡片 */
|
||||
.factor-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.factor-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
flex: 1;
|
||||
}
|
||||
.factor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.factor .fk {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
width: 78px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.factor .ftrack {
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.factor .ffill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.factor .fv {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
width: 28px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.f-joy .ffill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--gilt));
|
||||
}
|
||||
.f-joy .fv {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.f-frag .ffill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar));
|
||||
}
|
||||
.f-frag .fv {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.f-reun .ffill {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.f-reun .fv {
|
||||
color: var(--patina);
|
||||
}
|
||||
.f-wknd .ffill {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina-bright));
|
||||
}
|
||||
.f-wknd .fv {
|
||||
color: var(--patina);
|
||||
}
|
||||
.f-season .ffill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--patina));
|
||||
}
|
||||
.f-season .fv {
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.f-period .ffill {
|
||||
background: linear-gradient(90deg, var(--gilt-dim), var(--gilt));
|
||||
}
|
||||
.f-period .fv {
|
||||
color: var(--gilt);
|
||||
}
|
||||
.f-care .ffill {
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--cinnabar));
|
||||
}
|
||||
.f-care .fv {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.care-note {
|
||||
margin-top: 14px;
|
||||
padding: 10px 12px;
|
||||
border-left: 2px solid var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.06);
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.care-note b {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--cinnabar);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* snapshot 四格 */
|
||||
.snap-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.snap-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
background: var(--surface);
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.snap-card .k {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.snap-card .v {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.snap-card .v small {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-dim);
|
||||
font-family: var(--font-mono);
|
||||
margin-left: 4px;
|
||||
}
|
||||
.snap-card .sub {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.snap-card.milestone {
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.snap-card.milestone .v {
|
||||
color: var(--gilt);
|
||||
}
|
||||
|
||||
/* 底部双栏 */
|
||||
.lower-region {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.event-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.anniv-rail {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.snap-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.lower-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.anniv-rail {
|
||||
width: 100%;
|
||||
}
|
||||
.sundial-region {
|
||||
flex-direction: column;
|
||||
}
|
||||
.dial-card {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
/* world 领域专属样式。 */
|
||||
/* ============================================================
|
||||
* 铜镜鉴心 v2.1 — 世界页（world-preview.html）
|
||||
* 河图关系图谱 + 实体名册 + 不确定性 + 世界观共振
|
||||
* ============================================================ */
|
||||
|
||||
.btn-ghost {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 5px;
|
||||
padding: 6px 12px;
|
||||
color: var(--fg-faint);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
color: var(--fg);
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
|
||||
/* -- 河图关系图谱 -- */
|
||||
.graph-region {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.graph-card {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 8px;
|
||||
background: var(--face-sheen), var(--surface);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--face-in-top),
|
||||
inset 0 -1px 0 var(--face-in-bot),
|
||||
var(--shadow);
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.graph-svg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.graph-side {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.side-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.side-title {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-faint);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.legend-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
padding: 3px 0;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
border: 1.5px solid;
|
||||
}
|
||||
.legend-line {
|
||||
width: 22px;
|
||||
height: 0;
|
||||
border-top: 2px solid var(--patina-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.legend-line.tent {
|
||||
border-top: 1.5px dashed var(--cinnabar-dim);
|
||||
}
|
||||
.dist-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.dist-bar .dk {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 12px;
|
||||
color: var(--fg-dim);
|
||||
width: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dist-bar .dtrack {
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dist-bar .dfill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dist-bar .dv {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10.5px;
|
||||
color: var(--fg-faint);
|
||||
width: 22px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* -- 实体名册 -- */
|
||||
.ent-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.ent-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
padding: 14px 16px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.ent-card:hover {
|
||||
border-color: var(--gilt-dim);
|
||||
}
|
||||
.ent-card.pending {
|
||||
border-style: dashed;
|
||||
border-color: var(--cinnabar-dim);
|
||||
}
|
||||
.ent-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ent-disc {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--patina);
|
||||
}
|
||||
.ent-disc.t-person {
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
color: var(--gilt);
|
||||
}
|
||||
.ent-disc.t-project {
|
||||
border-color: var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.1);
|
||||
color: var(--cinnabar);
|
||||
}
|
||||
.ent-disc.t-concept {
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
color: var(--patina-bright);
|
||||
}
|
||||
.ent-disc.t-device {
|
||||
border-color: var(--fg-faint);
|
||||
background: transparent;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.ent-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.ent-type {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: 1px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.ent-state {
|
||||
margin-left: auto;
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ent-state.fact {
|
||||
color: var(--patina);
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.ent-state.inference {
|
||||
color: var(--gilt);
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
}
|
||||
.ent-state.hypothesis {
|
||||
color: var(--cinnabar);
|
||||
border-color: var(--cinnabar-dim);
|
||||
background: rgba(184, 57, 46, 0.08);
|
||||
}
|
||||
.ent-attrs {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ent-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.conf-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
.conf-mini .ck {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.conf-mini .ctrack {
|
||||
flex: 1;
|
||||
max-width: 70px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.conf-mini .cfill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||||
}
|
||||
.conf-mini .cv {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
.evi-link {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--fg-faint);
|
||||
padding: 1px 6px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* -- 不确定性 -- */
|
||||
.unc-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
}
|
||||
.unc-card {
|
||||
border: 1px dashed var(--cinnabar-dim);
|
||||
border-left: 3px solid var(--cinnabar);
|
||||
border-radius: 6px;
|
||||
padding: 13px 16px;
|
||||
background: rgba(184, 57, 46, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.unc-claim {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.unc-text {
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.unc-text code {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 11.5px;
|
||||
color: var(--gilt);
|
||||
background: var(--gilt-faint);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.unc-reason {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: 3px;
|
||||
}
|
||||
.unc-conf {
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.unc-conf .v {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: var(--cinnabar);
|
||||
}
|
||||
.unc-conf .k {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.unc-verify {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: var(--gilt);
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--gilt-dim);
|
||||
border-radius: 999px;
|
||||
background: var(--gilt-faint);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* -- 世界观共振 -- */
|
||||
.wv-card {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.wv-pair {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 64px 1fr;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
.wv-side {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 7px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
}
|
||||
.wv-side.qingwu {
|
||||
border-color: var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
}
|
||||
.wv-side.yunlan {
|
||||
border-color: var(--gilt-dim);
|
||||
background: var(--gilt-faint);
|
||||
border-style: dashed;
|
||||
}
|
||||
.wv-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.wv-disc {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid var(--patina-dim);
|
||||
background: var(--patina-wash);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--patina);
|
||||
}
|
||||
.wv-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.wv-tag {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: auto;
|
||||
}
|
||||
.wv-tag.shared {
|
||||
color: var(--patina);
|
||||
}
|
||||
.wv-tag.divergent {
|
||||
color: var(--cinnabar);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.wv-stance {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: var(--fg);
|
||||
border-left: 2px solid var(--rule);
|
||||
padding-left: 10px;
|
||||
}
|
||||
.wv-side.qingwu .wv-stance {
|
||||
border-left-color: var(--patina-dim);
|
||||
}
|
||||
.wv-side.yunlan .wv-stance {
|
||||
border-left-color: var(--gilt-dim);
|
||||
}
|
||||
.wv-anchors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.wv-anchor {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg-dim);
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.wv-anchor::before {
|
||||
content: "·";
|
||||
color: var(--fg-faint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wv-conf {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9.5px;
|
||||
color: var(--fg-faint);
|
||||
margin-top: auto;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.wv-bridge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.wv-bridge .b-disc {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
background: var(--ink);
|
||||
border: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wv-bridge .b-fill {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 41%;
|
||||
background: linear-gradient(90deg, var(--patina-dim), var(--gilt-dim));
|
||||
opacity: 0.55;
|
||||
}
|
||||
.wv-bridge .b-val {
|
||||
position: relative;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--gilt);
|
||||
}
|
||||
.wv-bridge .b-label {
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 9px;
|
||||
color: var(--fg-faint);
|
||||
letter-spacing: 0.04em;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user