/* ════════════════════════════════════════════════════════════════ 历史宇宙 · 设计系统 (Cosmos Design System) v1.0 提炼自「早期文明 · 时间长河」项目，用于快速设计同风格的新板块。用法：给加 data-theme="museum|textbook|parchment"（不加=默认深蓝） ────────────────────────────────────────────────────────────── 命名约定：所有组件类以 ds- 前缀；设计令牌为 CSS 变量。字体需在页面引入： Noto Serif SC / Noto Sans SC / JetBrains Mono / Cinzel ════════════════════════════════════════════════════════════════ */ /* ───────── 1. 设计令牌 · 主题无关 ───────── */ :root{ /* 字体族 */ --serif:'Noto Serif SC',serif; --sans:'Noto Sans SC',sans-serif; --mono:'JetBrains Mono',monospace; --latin:'Cinzel',serif; /* 圆角 */ --r-xs:7px; --r-sm:10px; --r-md:12px; --r-lg:18px; --r-pill:99px; /* 阴影 */ --sh-sm:0 4px 14px rgba(0,0,0,.25); --sh-md:0 8px 22px rgba(0,0,0,.3); --sh-lg:0 20px 60px rgba(0,0,0,.3); /* 间距刻度 */ --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px; /* 圆形操作按钮尺寸 */ --fab:56px; /* 强调辅助色 (各主题恒定) */ --cyan:#7adcf0; --purple:#a070ff; /* 阅读卡片 = 暖纸 (各主题保持一致优雅) */ --paper:#fbf6e9; --paper-ink:#2c1a08; --paper-ink2:#5c4530; --paper-ink3:#8a7050; --gold-deep:#8a6028; /* FAB 渐变四色 (角色色) */ --fab-gold:linear-gradient(135deg,#d4a858,#c87850); --fab-green:linear-gradient(135deg,#3a8868,#2a6850); --fab-purple:linear-gradient(135deg,#8a6cb0,#5a4080); --fab-blue:linear-gradient(135deg,#5a7aa8,#2d4a7c); } /* ───────── 2. 四套主题 · 语义色令牌 ───────── */ /* 默认：静夜深蓝 (深色) */ :root{ --bg:#131a2a; --bg-grad:linear-gradient(180deg,#131a2a 0%,#0e1422 55%,#131a2a 100%); --neb1:rgba(120,150,235,.20); --neb2:rgba(214,168,90,.14); --star:.30; --twinkle:.18; --ink:#e8e4d8; --ink2:#a6aec4; --ink3:#6b7088; --gold:#d4a858; --warm:#e0b070; --vermilion:#c87850; --cyan:#5ab0e0; --purple:#a08aff; --label-ink:#fff; --label-shadow:0 2px 8px rgba(0,0,0,.95); --line:rgba(212,168,88,.10); --grid-ink:rgba(232,212,170,.78); --panel-bg:rgba(16,22,38,.82); --panel-line:rgba(212,168,88,.22); --topbar-bg:rgba(14,18,30,.6); --overlay:rgba(8,10,18,.82); --scrim:0,0,0; } /* 博物馆典藏 (米白) */ body[data-theme="museum"]{ --bg:#f7f3ea; --bg-grad:radial-gradient(ellipse at 50% 30%,#fdfbf5,#f2ece0); --neb1:transparent; --neb2:transparent; --star:0; --twinkle:0; --ink:#2a2622; --ink2:#6a6258; --ink3:#9a9286; --gold:#9c5b34; --warm:#b07a4a; --vermilion:#9c5b34; --vermilion:#a8455a; --cyan:#2f8a7a; --purple:#7a5a9a; --label-ink:#2a2622; --label-shadow:none; --line:rgba(60,50,40,.10); --grid-ink:rgba(90,75,55,.7); --panel-bg:rgba(255,253,247,.92); --panel-line:rgba(156,91,52,.25); --topbar-bg:rgba(247,243,234,.85); --overlay:rgba(120,108,90,.45); } /* 现代教科书 (白) */ body[data-theme="textbook"]{ --bg:#ffffff; --bg-grad:linear-gradient(180deg,#ffffff,#f4f7fb); --neb1:transparent; --neb2:transparent; --star:0; --twinkle:0; --ink:#1a2a3a; --ink2:#5a6678; --ink3:#9aa4b2; --gold:#2d4a7c; --warm:#3a6ea5; --vermilion:#c0392b; --cyan:#1f8a8a; --purple:#6a4a90; --label-ink:#1a2a3a; --label-shadow:none; --line:rgba(45,74,124,.10); --grid-ink:rgba(45,74,124,.6); --panel-bg:rgba(255,255,255,.96); --panel-line:rgba(45,74,124,.18); --topbar-bg:rgba(255,255,255,.9); --overlay:rgba(40,55,80,.4); } /* 羊皮纸古卷 (米黄) */ body[data-theme="parchment"]{ --bg:#efe3c8; --bg-grad:radial-gradient(ellipse at 50% 25%,#f5ead2,#e8dabb); --neb1:rgba(180,130,70,.08); --neb2:rgba(150,110,60,.06); --star:0; --twinkle:0; --ink:#3a2a18; --ink2:#6e5536; --ink3:#9a8460; --gold:#b5642a; --warm:#c47a3a; --vermilion:#a8451e; --cyan:#2f8a7a; --purple:#7a5a9a; --label-ink:#3a2a18; --label-shadow:none; --line:rgba(120,90,40,.14); --grid-ink:rgba(120,90,40,.7); --panel-bg:rgba(250,242,224,.92); --panel-line:rgba(181,100,42,.3); --topbar-bg:rgba(239,227,200,.85); --overlay:rgba(120,95,55,.45); } /* ───────── 3. 基础 ───────── */ *{box-sizing:border-box;margin:0;padding:0} /* 极光 (aurora · 青碧极光) */ body[data-theme="aurora"]{ --bg:#08161a; --bg-grad:linear-gradient(180deg,#0a1c20 0%,#06120f 55%,#0a201a 100%); --neb1:rgba(60,224,176,.22); --neb2:rgba(140,90,235,.20); --star:.34; --twinkle:.22; --ink:#e8f5ef; --ink2:#9fc8bc; --ink3:#5f8077; --gold:#46e0b0; --warm:#7fe6c8; --vermilion:#3fd0c4; --vermilion:#7fd8ff; --cyan:#a8f060; --purple:#b09cff; --label-ink:#fff; --label-shadow:0 2px 8px rgba(0,0,0,.95); --line:rgba(70,224,176,.12); --grid-ink:rgba(180,240,225,.72); --panel-bg:rgba(9,28,28,.84); --panel-line:rgba(70,224,176,.26); --topbar-bg:rgba(7,18,18,.6); --overlay:rgba(4,12,12,.85); } /* 暮霞 (sunset · 玫瑰暮光) */ body[data-theme="sunset"]{ --bg:#1a0e1a; --bg-grad:linear-gradient(180deg,#221022 0%,#150a16 55%,#281024 100%); --neb1:rgba(255,110,150,.22); --neb2:rgba(255,170,80,.18); --star:.30; --twinkle:.2; --ink:#f6e8f0; --ink2:#cda8bb; --ink3:#8c6a7c; --gold:#ff9a5a; --warm:#ffb87a; --vermilion:#ff6a8a; --cyan:#f0a0c0; --purple:#d88ae0; --label-ink:#fff; --label-shadow:0 2px 8px rgba(0,0,0,.95); --line:rgba(255,154,90,.12); --grid-ink:rgba(255,214,184,.72); --panel-bg:rgba(32,14,30,.86); --panel-line:rgba(255,154,90,.26); --topbar-bg:rgba(22,10,20,.6); --overlay:rgba(12,6,12,.85); } /* 星云 (nebula · 紫蓝星云) */ body[data-theme="nebula"]{ --bg:#0c0a1f; --bg-grad:linear-gradient(180deg,#130e28 0%,#0a081a 55%,#170e2c 100%); --neb1:rgba(150,90,255,.24); --neb2:rgba(60,180,255,.18); --star:.38; --twinkle:.24; --ink:#ece6ff; --ink2:#b2a8d6; --ink3:#746a90; --gold:#b894ff; --warm:#c8a6ff; --vermilion:#8a7ad0; --cyan:#7ad8ff; --purple:#c8a6ff; --label-ink:#fff; --label-shadow:0 2px 8px rgba(0,0,0,.95); --line:rgba(150,120,255,.12); --grid-ink:rgba(212,196,255,.72); --panel-bg:rgba(18,12,36,.86); --panel-line:rgba(150,120,255,.26); --topbar-bg:rgba(12,8,24,.6); --overlay:rgba(8,6,18,.85); } /* 故宫 (palace · 黛蓝夜 + 朱红石青明黄) */ body[data-theme="palace"]{ --bg:#15202e; --bg-grad:linear-gradient(180deg,#1a2738 0%,#121b27 55%,#1b2434 100%); --neb1:rgba(200,74,62,.16); --neb2:rgba(46,125,154,.18); --star:.28; --twinkle:.17; --ink:#f2ead9; --ink2:#b7c0ca; --ink3:#7c8794; --gold:#dca93f; --warm:#e8c468; --vermilion:#c84a3e; --cyan:#3e90b0; --purple:#9a7ab0; --label-ink:#fff; --label-shadow:0 2px 8px rgba(0,0,0,.95); --line:rgba(220,169,63,.13); --grid-ink:rgba(242,234,217,.72); --panel-bg:rgba(21,30,46,.88); --panel-line:rgba(220,169,63,.26); --topbar-bg:rgba(16,23,34,.62); --overlay:rgba(8,13,22,.85); } /* 暖阳·童趣 (warm · 奶油暖底,适合孩子) */ body[data-theme="warm"]{ --bg:#fdf3e3; --bg-grad:radial-gradient(ellipse at 50% 20%,#fffaf2 0%,#f8ebd6 60%,#f3e3ca 100%); --neb1:rgba(244,160,86,.14); --neb2:rgba(92,190,168,.12); --star:0; --twinkle:0; --ink:#4a3320; --ink2:#8a6e54; --ink3:#b29a7e; --gold:#e08a2c; --warm:#f3aa50; --vermilion:#e2603f; --cyan:#2f9e86; --purple:#b06aa0; --label-ink:#4a3320; --label-shadow:none; --line:rgba(224,138,44,.16); --grid-ink:rgba(110,80,50,.55); --panel-bg:rgba(255,250,242,.95); --panel-line:rgba(224,138,44,.30); --topbar-bg:rgba(253,243,227,.9); --overlay:rgba(110,82,55,.42); --scrim:250,242,228; } html,body{min-height:100%;font-family:var(--sans);background:var(--bg);color:var(--ink);transition:background .4s ease} /* ───────── 4. 宇宙背景 (固定铺底) ───────── */ .ds-cosmos{position:fixed;inset:0;z-index:0;pointer-events:none} .ds-cosmos .nebula{position:absolute;inset:0;transition:background .4s ease; background: radial-gradient(ellipse 45% 55% at 15% 20%, var(--neb1) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 85% 80%, var(--neb2) 0%, transparent 60%), var(--bg-grad); } .ds-cosmos .stars{position:absolute;inset:0;opacity:var(--star); background-image: radial-gradient(1px 1px at 5% 12%,#fff,transparent), radial-gradient(1.2px 1.2px at 15% 25%,#fff,transparent), radial-gradient(.8px .8px at 28% 8%,#ffd47a,transparent), radial-gradient(1px 1px at 42% 18%,#fff,transparent), radial-gradient(1.5px 1.5px at 55% 32%,#fff,transparent), radial-gradient(1px 1px at 68% 11%,#c8d4ff,transparent), radial-gradient(1.2px 1.2px at 82% 24%,#fff,transparent), radial-gradient(1px 1px at 8% 45%,#fff,transparent), radial-gradient(1.3px 1.3px at 22% 58%,#fff,transparent), radial-gradient(1px 1px at 38% 65%,#c8d4ff,transparent), radial-gradient(1px 1px at 65% 48%,#ffd47a,transparent), radial-gradient(1.2px 1.2px at 78% 64%,#fff,transparent), radial-gradient(1px 1px at 12% 88%,#fff,transparent), radial-gradient(1.4px 1.4px at 28% 82%,#c8d4ff,transparent), radial-gradient(1px 1px at 45% 95%,#fff,transparent), radial-gradient(1.2px 1.2px at 62% 88%,#ffd47a,transparent); } .ds-cosmos .stars.twinkle{opacity:var(--twinkle);animation:ds-twinkle 11s ease-in-out infinite;will-change:opacity} @keyframes ds-twinkle{0%,100%{opacity:var(--twinkle)}50%{opacity:calc(var(--twinkle)*.55)}} /* ───────── 5. 排版工具类 ───────── */ .ds-h1{font-family:var(--serif);font-weight:900;font-size:clamp(22px,3.4vw,34px);color:var(--ink);text-shadow:var(--label-shadow)} .ds-h2{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink)} .ds-serif{font-family:var(--serif)} .ds-body{font-family:var(--sans);font-size:13.5px;line-height:1.75;color:var(--ink)} .ds-muted{color:var(--ink2)} /* 等宽小标签 (kicker)：金色、大字距、大写 */ .ds-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700} /* 章节标题：标题 + 渐隐分隔线 */ .ds-sec-title{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:700;font-size:15px;color:var(--gold);letter-spacing:.04em} .ds-sec-title::after{content:'';flex:1;height:1px;background:var(--panel-line)} /* ───────── 6. 顶栏 + 胶囊链接 ───────── */ .ds-topbar{position:fixed;top:0;left:0;right:0;z-index:30;padding:16px 26px;display:flex;align-items:center;gap:16px;pointer-events:none;flex-wrap:wrap} .ds-topbar>*{pointer-events:auto} .ds-pill{font-family:var(--mono);font-size:11px;color:var(--gold);text-decoration:none;letter-spacing:.16em;background:var(--topbar-bg);backdrop-filter:blur(10px);padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--panel-line);transition:all .2s;cursor:pointer} .ds-pill:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)} /* ───────── 7. 主题切换器 ───────── */ .ds-theme-switch{display:flex;gap:6px;background:var(--topbar-bg);backdrop-filter:blur(10px);border:1px solid var(--panel-line);border-radius:var(--r-pill);padding:5px} .ds-theme-switch button{width:26px;height:26px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;padding:0;transition:transform .15s,border-color .15s} .ds-theme-switch button:hover{transform:scale(1.12)} .ds-theme-switch button.active{border-color:var(--gold)} .ds-theme-switch button[data-t="deepblue"]{background:#131a2a} .ds-theme-switch button[data-t="museum"]{background:#f2ece0} .ds-theme-switch button[data-t="textbook"]{background:#2d4a7c} .ds-theme-switch button[data-t="parchment"]{background:#e8dabb} .ds-theme-switch button[data-t="aurora"]{background:linear-gradient(135deg,#0a1a16,#46e0b0)} .ds-theme-switch button[data-t="sunset"]{background:linear-gradient(135deg,#241020,#ff6a8a)} .ds-theme-switch button[data-t="nebula"]{background:linear-gradient(135deg,#0d0a1f,#b894ff)} .ds-theme-switch button[data-t="palace"]{background:linear-gradient(135deg,#15202e,#c84a3e 60%,#dca93f)} .ds-theme-switch button[data-t="warm"]{background:linear-gradient(135deg,#fdf3e3,#f3aa50 55%,#e2603f)} /* ───────── 8. 圆形浮动操作按钮 (FAB) ───────── */ .ds-fab{width:var(--fab);height:var(--fab);border-radius:50%;background:var(--fab-gold);color:#fff;border:none;cursor:pointer;font-size:24px;box-shadow:var(--sh-md);transition:transform .2s;display:flex;align-items:center;justify-content:center} .ds-fab:hover{transform:scale(1.08)} .ds-fab.green{background:var(--fab-green)} .ds-fab.purple{background:var(--fab-purple)} .ds-fab.blue{background:var(--fab-blue)} /* 右下竖排 FAB 列容器 */ .ds-fab-rail{position:fixed;right:22px;bottom:22px;z-index:25;display:flex;flex-direction:column-reverse;gap:10px} /* ───────── 9. 实心 / 幽灵按钮 ───────── */ .ds-btn{font-family:var(--sans);font-weight:700;font-size:13px;border-radius:var(--r-sm);border:none;cursor:pointer;padding:10px 18px;background:var(--gold);color:#fff;transition:transform .15s,opacity .15s} .ds-btn:hover{transform:translateY(-1px)} .ds-btn:disabled{opacity:.5;cursor:default} .ds-btn-ghost{background:transparent;color:var(--ink2);border:1px solid var(--panel-line)} .ds-btn-ghost:hover{border-color:var(--gold);color:var(--gold)} /* ───────── 10. 磨砂面板 / 卡片 ───────── */ .ds-panel{background:var(--panel-bg);backdrop-filter:blur(12px);border:1px solid var(--panel-line);border-radius:var(--r-md);padding:var(--sp-4)} /* 可点击卡片：悬浮上浮 + 金边 */ .ds-card{background:var(--panel-bg);backdrop-filter:blur(6px);border:1px solid var(--panel-line);border-radius:14px;padding:18px 16px;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s} .ds-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.12)} .ds-card .icon{font-size:24px;margin-bottom:8px} .ds-card .title{font-family:var(--serif);font-weight:700;color:var(--ink)} /* ───────── 11. 遮罩弹窗 (暖纸内容) ───────── */ .ds-modal{position:fixed;inset:0;z-index:50;background:var(--overlay);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto} .ds-modal.open{display:flex} .ds-modal-content{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-lg);max-width:1100px;width:100%;padding:32px;margin:auto;position:relative} .ds-modal-content .head{text-align:center;margin-bottom:24px} .ds-modal-content h2{font-family:var(--serif);font-size:30px;font-weight:900;color:var(--paper-ink)} .ds-modal-content .sub{font-family:var(--mono);letter-spacing:.3em;color:var(--gold);font-size:11px;margin-top:4px;text-transform:uppercase} .ds-close{position:absolute;top:24px;right:24px;width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--panel-line);cursor:pointer;font-size:14px;color:var(--paper-ink2);transition:all .15s} .ds-close:hover{background:var(--vermilion);color:#fff;border-color:var(--vermilion)} /* ───────── 12. 信息胶囊 (chip) ───────── */ .ds-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);background:var(--panel-bg);border:1px solid var(--panel-line);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s} .ds-chip:hover{transform:translateY(-2px)} .ds-chip .yr{font-family:var(--mono);font-size:10px;color:var(--ink3)} /* 语义变体：事件(暖橙) / 人物(蓝) */ .ds-chip.event:hover{background:rgba(200,115,42,.2);border-color:#c8732a} .ds-chip.person:hover{background:rgba(96,128,176,.24);border-color:#5a7aa8} /* ───────── 13. 悬浮提示卡 (主题感知，永远可读) ───────── */ .ds-tooltip{position:fixed;z-index:60;background:var(--panel-bg);backdrop-filter:blur(20px);border:1px solid var(--panel-line);border-radius:var(--r-md);padding:14px 18px;max-width:340px;pointer-events:none;box-shadow:0 12px 36px rgba(0,0,0,.25)} .ds-tooltip .nm{font-family:var(--serif);font-size:16px;font-weight:900;color:var(--gold);margin-bottom:4px} .ds-tooltip .meta{font-family:var(--mono);font-size:10px;color:var(--ink2);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase} .ds-tooltip .desc{font-size:12.5px;line-height:1.65;color:var(--ink)} /* ───────── 14. 对比 / 数据表 ───────── */ .ds-table-wrap{overflow:auto;border:1px solid var(--panel-line);border-radius:var(--r-md)} .ds-table{border-collapse:separate;border-spacing:0;font-size:11.5px;width:100%} .ds-table th,.ds-table td{border-bottom:1px solid var(--panel-line);border-right:1px solid var(--panel-line);padding:8px 10px;vertical-align:top;text-align:left} .ds-table thead th{position:sticky;top:0;z-index:2;background:var(--panel-bg);font-family:var(--serif);font-weight:700;color:var(--ink);text-align:center;white-space:nowrap} .ds-table td.row-h{font-family:var(--serif);font-weight:700;color:var(--vermilion);background:var(--panel-bg);position:sticky;left:0;white-space:nowrap} .ds-table tbody tr:hover td{background:rgba(128,128,128,.06)} /* ───────── 15. 球体 (orb) · HTML 版 ───────── */ .ds-orb{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.92) 0%, var(--orb,#c86820) 30%, rgba(0,0,0,.35) 120%); box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.35)} /* ───────── 16. 图例 ───────── */ .ds-legend{background:var(--panel-bg);backdrop-filter:blur(12px);border:1px solid var(--panel-line);border-radius:14px;padding:12px 16px} .ds-legend .ds-kicker{margin-bottom:7px;display:block} .ds-legend .items{display:flex;gap:14px;font-size:11px;color:var(--ink2);flex-wrap:wrap} /* ───────── 17. 移动端 ───────── */ @media(max-width:768px){ .ds-topbar{padding:10px 12px;gap:8px} .ds-modal-content{padding:18px} .ds-modal-content h2{font-size:22px} .ds-fab{width:48px;height:48px;font-size:21px} } /* 仅保留故宫国风一种风格,隐藏切换器 */ .ds-theme-switch{display:none !important}