/* ========================================================= 跑团DM · 「烛光档案馆」设计系统 v2.0 (2026-09-09, Tier A) --------------------------------------------------------- 三层令牌架构： [L1 原始层] :root 原始色板/字体/肌理 —— 名字自 v1 保持不变，页面内联样式引用它，向后兼容 [L2 语义层] bg/edge/accent/text/状态色 —— 每个主题包重定义 [L3 组件层] 按钮/卡片/羊皮纸/滚动条的具体外观令牌主题包机制：默认包 = candlelight（未设 data-theme 时同默认）。切换： theme.js（URL ?theme= 或 localStorage['wb-theme']）新剧本换肤 = 复制一个主题包块改值，零组件改动。 ========================================================= */ /* ============ L1 · 原始层（勿在组件里直接引用新代码；存量引用兼容） ============ */ :root{ /* 墨与底 */ --ink-950:#100c07; /* 最深炭墨（地图底） */ --ink-900:#151009; --ink-850:#1d1712; /* 页面底：深革木 */ --ink-800:#241d15; --ink-750:#282016; /* 面板：旧木 */ --ink-700:#2f271b; --ink-600:#3a2e1c; /* 选中面 */ /* 边框 */ --edge-dim:#3a2f1f; --edge:#4a3b26; --edge-strong:#574530; --edge-gold:#8a6f3f; /* 金与铜 */ --gold:#c9963f; --gold-bright:#d9a94a; --gold-deep:#a8752e; --gold-pale:#e6d3a3; /* 烛火 / 血 / 苔 / 玄 */ --ember:#d4622a; --blood:#c96b5a; --blood-deep:#8f3b2d; --moss:#93b06b; --moss-bright:#a9c284; --steel:#7da7b0; --arcane:#9c86c9; /* 文 */ --text:#e8dcc0; --text-bright:#f2e8cd; --text-dim:#a3906c; --text-faint:#7d6f52; /* 羊皮纸 */ --parch:#e8d9b0; --parch-dim:#d6c394; --parch-ink:#33291c; --parch-ink-dim:#6b5a35; /* 字体 */ --font-display:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"STZhongsong","Noto Serif SC","Source Han Serif SC","SimSun",serif; --font-body:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; --font-quote:"KaiTi","STKaiti","DFKai-SB",var(--font-display); --font-mono:Consolas,"Courier New",monospace; /* 肌理（SVG 噪声，纯 CSS，无外部资源） */ --grain-veil:url("data:image/svg+xml;utf8,"); --grain-paper:url("data:image/svg+xml;utf8,"); } /* ============ L2+L3 · 主题包：candlelight（默认） ============ */ :root, [data-theme="candlelight"]{ /* ---- L2 语义层 ---- */ --bg-page:var(--ink-850); /* 页面底 */ --bg-sunken:var(--ink-900); /* 内凹：输入框 */ --bg-selected:var(--ink-600); /* 选中面 */ --bg-wash:rgba(var(--accent-rgb),.08); /* 悬停水洗 */ --edge-1:var(--edge-dim); --edge-2:var(--edge); --edge-3:var(--edge-strong); --edge-accent:var(--edge-gold); --accent:var(--gold); /* 主强调：卷轴暗金 */ --accent-bright:var(--gold-bright); --accent-deep:var(--gold-deep); --accent-soft:var(--gold-pale); /* 标题浅金 */ --accent-rgb:201,150,63; /* 供 rgba(var(--accent-rgb),α) */ --on-accent:#241a08; /* 压在主强调上的墨字 */ --t-body:var(--text); --t-bright:var(--text-bright); --t-dim:var(--text-dim); --t-faint:var(--text-faint); --t-heading:var(--gold-pale); --ok:var(--moss-bright); --err:var(--blood); --err-deep:var(--blood-deep); --err-bright:#e0a494; --err-on-deep:#e0a494; /* 深红底上的错误亮字（danger 按钮面） */ --focus-ring:rgba(var(--accent-rgb),.65); --sel-bg:rgba(var(--accent-rgb),.35); --scrim:rgba(0,0,0,.5); /* 暗角/遮罩 */ /* ---- L3 组件层 ---- */ /* 黄铜铭牌按钮 */ --btn-face-1:#dcb066; --btn-face-2:#c08a3e; --btn-face-3:#a8752e; --btn-edge:#6e5426; --btn-hi:rgba(255,240,200,.45); --btn-ghost-bg:linear-gradient(180deg,rgba(58,46,28,.55),rgba(36,29,21,.7)); --btn-go-face-1:#a9c284; --btn-go-face-2:#7e9a55; --btn-go-edge:#4e6034; --btn-go-ink:#1c2408; --btn-danger-edge:#6e3a26; /* 旧木面板 */ --card-face-1:#2b2318; --card-face-2:#262015; --rivet:#d3aa64; --rivet-ring:rgba(122,90,38,.85); /* 印章标签 */ --tag-face-1:#2b2318; --tag-face-2:#241d15; /* 羊皮纸 */ --parch-1:#ecdbb0; --parch-2:#e2cd9c; --parch-3:#d7bf8a; --parch-edge:#a98f55; --parch-burn:rgba(146,105,44,.28); --parch-sheen:rgba(255,252,240,.4); --parch-title:#4a3620; --parch-diamond:#8a6f3f; /* 滚动条 */ --scroll-track:#191309; --scroll-thumb:#4a3b26; --scroll-thumb-hover:#8a6f3f; /* 烛光氛围 */ --glow:rgba(var(--accent-rgb),.11); --glow-hover:rgba(var(--accent-rgb),.28); } /* ============ 主题包：inknight（玄夜墨兰 · 恐怖/悬疑剧本演示包） ============ 证明机制：重定义语义层 + 关键原始层 + 组件层，组件零改动整体换肤。 */ [data-theme="inknight"]{ /* 原始层覆盖（页面内联 var(--gold)/var(--text) 等随之联动） */ --ink-950:#070a0f; --ink-900:#0a0e14; --ink-850:#0d1117; --ink-800:#11161e; --ink-750:#141a23; --ink-700:#1a2230; --ink-600:#222c3e; --edge-dim:#20293a; --edge:#2b3648; --edge-strong:#3a4a63; --edge-gold:#4d6584; --gold:#7d9cc0; --gold-bright:#9cb8d9; --gold-deep:#5a7699; --gold-pale:#c2d4e8; --text:#c3ccd9; --text-bright:#dbe4ef; --text-dim:#7f8ea3; --text-faint:#5a677a; --parch:#d9dde4; --parch-dim:#c3c9d4; --parch-ink:#1e242f; --parch-ink-dim:#4a5568; /* 语义层 */ --accent-rgb:125,156,192; --bg-wash:rgba(125,156,192,.08); --ok:#9ec9a8; --err:#c97a6e; --err-bright:#e6b0a6; --err-on-deep:#e6b0a6; --focus-ring:rgba(125,156,192,.65); --sel-bg:rgba(125,156,192,.35); /* 组件层 */ --btn-face-1:#8faccb; --btn-face-2:#6f8fb5; --btn-face-3:#54718f; --btn-edge:#46608a; --btn-hi:rgba(220,235,255,.4); --on-accent:#0c1220; --btn-ghost-bg:linear-gradient(180deg,rgba(34,44,62,.55),rgba(17,22,30,.7)); --btn-go-face-1:#8fb5a9; --btn-go-face-2:#558f7e; --btn-go-edge:#34604e; --btn-go-ink:#0a1a14; --btn-danger-edge:#5e3a4a; --card-face-1:#1a2230; --card-face-2:#161d29; --rivet:#8fa8c9; --rivet-ring:rgba(60,80,110,.85); --tag-face-1:#1a2230; --tag-face-2:#141a23; --parch-1:#e3e6ec; --parch-2:#d4d9e2; --parch-3:#c2c9d6; --parch-edge:#8fa0b8; --parch-burn:rgba(70,95,130,.28); --parch-sheen:rgba(245,250,255,.4); --parch-title:#2a3446; --parch-diamond:#4d6584; --scroll-track:#0a0e14; --scroll-thumb:#2b3648; --scroll-thumb-hover:#4d6584; --glow:rgba(125,156,192,.10); --glow-hover:rgba(125,156,192,.26); } /* ============ 主题包：lemongrass（柠檬清绿 · 浅色轻快包） ============ 首个浅色包：柠檬黄绿主强调 + 浅苔纸底。同 inknight，仅重定义令牌层。 */ [data-theme="lemongrass"]{ /* 原始层覆盖 */ --ink-950:#22300f; --ink-900:#2c3a16; --ink-850:#eef2dc; --ink-800:#e4ebcd; --ink-750:#dbe4c0; --ink-700:#c9d6a8; --ink-600:#b9cc90; --edge-dim:#c3cfa4; --edge:#a8b884; --edge-strong:#8fa070; --edge-gold:#7d9c46; --gold:#96b23e; --gold-bright:#a8c44e; --gold-deep:#75902e; --gold-pale:#d8e4ac; --text:#3a4226; --text-bright:#2c341c; --text-dim:#5f6a34; --text-faint:#757e4a; --parch:#f4f0d8; --parch-dim:#e8e2c0; --parch-ink:#3a4420; --parch-ink-dim:#6b7542; /* 语义层 */ --accent-rgb:150,178,62; /* 浅色包专属修正：标题/浅强调在浅底上必须翻深（深色区的 gold-pale 直引不受影响） */ --t-heading:#556218; /* h2/h3：深橄榄金，浅卡上 4.8:1 */ --accent-soft:#4f5c14; /* ghost 按钮字 / 导航悬停与当前页字 */ --bg-wash:rgba(150,178,62,.12); --ok:#5f8f3a; --err:#c05a48; --err-deep:#8f3b2d; --err-bright:#9c3a26; /* 浅包：错误强调字翻深（印章/toast 在浅卡上） */ --err-on-deep:#f0d8cf; /* 深红按钮面上的浅字 */ --focus-ring:rgba(150,178,62,.7); --sel-bg:rgba(150,178,62,.35); /* 组件层 */ --btn-face-1:#c6d878; --btn-face-2:#a9c14e; --btn-face-3:#8ba636; --btn-edge:#6f8a2c; --btn-hi:rgba(255,255,240,.6); --on-accent:#26300c; --btn-ghost-bg:linear-gradient(180deg,rgba(201,214,168,.55),rgba(219,228,192,.7)); --btn-go-face-1:#9ec46e; --btn-go-face-2:#7ba14c; --btn-go-edge:#5a7a34; --btn-go-ink:#1a2408; --btn-danger-edge:#a34a30; --card-face-1:#e6edcf; --card-face-2:#dfe8c4; --rivet:#a8b878; --rivet-ring:rgba(122,138,74,.6); --tag-face-1:#e6edcf; --tag-face-2:#dfe8c4; --parch-1:#f7f3da; --parch-2:#efe9c8; --parch-3:#e4dcb2; --parch-edge:#b3ab7c; --parch-burn:rgba(150,140,80,.22); --parch-sheen:rgba(255,255,250,.5); --parch-title:#4a5222; --parch-diamond:#8a9a3f; --scroll-track:#dbe4c0; --scroll-thumb:#a8b884; --scroll-thumb-hover:#7d9c46; --glow:rgba(150,178,62,.15); --glow-hover:rgba(150,178,62,.3); } /* ============ 主题包：monochrome（黑白极简 · 墨骨素影） ============ 黑白灰单色系：无彩强调（银白），状态色去饱和但保留可辨识度。适合：规则严谨向 / 正剧向剧本，以及喜欢素净的用户。 */ [data-theme="monochrome"]{ /* 原始层覆盖 */ --ink-950:#060606; --ink-900:#0a0a0a; --ink-850:#101010; --ink-800:#161616; --ink-750:#1b1b1b; --ink-700:#222222; --ink-600:#2b2b2b; --edge-dim:#262626; --edge:#303030; --edge-strong:#3d3d3d; --edge-gold:#5a5a5a; --gold:#c9c9c9; --gold-bright:#e8e8e8; --gold-deep:#8f8f8f; --gold-pale:#f2f2f2; --ember:#cfcfcf; --blood:#9a6a62; --blood-deep:#5e3a34; --moss:#8aa08a; --moss-bright:#a5bda5; --steel:#9ab0b5; --arcane:#a3a3b8; --text:#cfcfcf; --text-bright:#f0f0f0; --text-dim:#8f8f8f; --text-faint:#5f5f5f; --parch:#e6e6e3; --parch-dim:#d6d6d2; --parch-ink:#1c1c1c; --parch-ink-dim:#555555; /* 语义层 */ --accent-rgb:201,201,201; --bg-wash:rgba(255,255,255,.07); --ok:#a5bda5; --err:#b07a6e; --err-deep:#5e3a34; --err-bright:#d8b0a6; --err-on-deep:#e8cfc8; --focus-ring:rgba(255,255,255,.5); --sel-bg:rgba(255,255,255,.22); --scrim:rgba(0,0,0,.55); /* 组件层 */ --btn-face-1:#e0e0e0; --btn-face-2:#c9c9c9; --btn-face-3:#b0b0b0; --btn-edge:#4a4a4a; --btn-hi:rgba(255,255,255,.5); --on-accent:#111111; --btn-ghost-bg:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); --btn-go-face-1:#d8d8d8; --btn-go-face-2:#bcbcbc; --btn-go-edge:#7a7a7a; --btn-go-ink:#141414; --btn-danger-edge:#6e504a; --card-face-1:#1a1a1a; --card-face-2:#151515; --rivet:#8a8a8a; --rivet-ring:rgba(90,90,90,.8); --tag-face-1:#1a1a1a; --tag-face-2:#151515; --parch-1:#ececea; --parch-2:#e0e0dd; --parch-3:#d2d2cf; --parch-edge:#9a9a97; --parch-burn:rgba(120,120,120,.2); --parch-sheen:rgba(255,255,255,.35); --parch-title:#222222; --parch-diamond:#666666; --scroll-track:#0a0a0a; --scroll-thumb:#333333; --scroll-thumb-hover:#666666; --glow:rgba(255,255,255,.05); --glow-hover:rgba(255,255,255,.15); } /* ============ 主题包：dread（恐怖氛围 · 血烛墓窟） ============ 暗黑压抑：近黑紫红底 + 暗血红强调 + 重暗角，纸面发黄陈旧。与 inknight（冷墨悬疑）区分：dread 更黑、更红、更沉。适合恐怖向剧本。 */ [data-theme="dread"]{ /* 原始层覆盖 */ --ink-950:#050304; --ink-900:#0a0507; --ink-850:#0d0709; --ink-800:#140a0d; --ink-750:#180d10; --ink-700:#1f1215; --ink-600:#2a171b; --edge-dim:#2a1418; --edge:#381d22; --edge-strong:#4a2830; --edge-gold:#6e3a42; --gold:#9c3530; --gold-bright:#c05248; --gold-deep:#6e2220; --gold-pale:#d8a099; --ember:#c04a30; --blood:#b04038; --blood-deep:#70231e; --moss:#6a7a58; --moss-bright:#84966e; --steel:#7a8f96; --arcane:#8a6a9c; --text:#c8b8b4; --text-bright:#e2d4cf; --text-dim:#8f7470; --text-faint:#5f4c4a; --parch:#d8cba8; --parch-dim:#c4b690; --parch-ink:#2a1414; --parch-ink-dim:#6e5048; /* 语义层 */ --accent-rgb:156,53,48; --bg-wash:rgba(156,53,48,.10); --ok:#84966e; --err:#c05248; --err-deep:#70231e; --err-bright:#d89488; --err-on-deep:#d89488; --focus-ring:rgba(192,82,72,.6); --sel-bg:rgba(156,53,48,.35); --scrim:rgba(0,0,0,.68); /* 暗角加重：压抑感来源之一 */ /* 组件层 */ --btn-face-1:#7a4038; --btn-face-2:#5e2e28; --btn-face-3:#46201c; --btn-edge:#351412; --btn-hi:rgba(255,220,200,.18); --on-accent:#f2e2dc; --btn-ghost-bg:linear-gradient(180deg,rgba(60,25,25,.5),rgba(30,12,14,.7)); --btn-go-face-1:#6e7a58; --btn-go-face-2:#4e5c3e; --btn-go-edge:#303a24; --btn-go-ink:#101408; --btn-danger-edge:#5e2018; --card-face-1:#180e11; --card-face-2:#120a0c; --rivet:#8a5248; --rivet-ring:rgba(90,40,40,.85); --tag-face-1:#180e11; --tag-face-2:#120a0c; --parch-1:#ddd0ac; --parch-2:#d0c29c; --parch-3:#c0b28a; --parch-edge:#96865e; --parch-burn:rgba(120,60,40,.3); --parch-sheen:rgba(255,250,235,.3); --parch-title:#38201a; --parch-diamond:#7a5a3a; --scroll-track:#080405; --scroll-thumb:#3a2024; --scroll-thumb-hover:#6e3a42; --glow:rgba(156,53,48,.10); --glow-hover:rgba(156,53,48,.25); } /* ============ 组件层实现（全部走 L2/L3 令牌） ============ */ /* ---------- 纸面基底：烛光 + 暗角 + 细噪 ---------- */ body{ font-family:var(--font-body); color:var(--t-body); background-color:var(--bg-page); background-image: radial-gradient(ellipse 60% 38% at 50% -6%, var(--glow), rgba(0,0,0,0) 70%), radial-gradient(ellipse 130% 105% at 50% 55%, rgba(0,0,0,0) 55%, var(--scrim) 100%), var(--grain-veil); background-attachment:fixed; } /* ---------- 版式：衬线题字 + 金色题线 ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;} h1{font-size:23px;color:var(--t-bright);} h2{font-size:16px;color:var(--t-heading);} h3{font-size:15px;color:var(--t-heading);} h2::before{content:"◆ ";color:var(--accent);font-size:.68em;vertical-align:.14em;letter-spacing:0;} /* ---------- 按钮：黄铜铭牌（方角 + 内高光 + 落压感） ---------- */ button,.btn{ font-family:var(--font-body); border-radius:2px; border:1px solid var(--btn-edge); background:linear-gradient(180deg,var(--btn-face-1) 0%,var(--btn-face-2) 45%,var(--btn-face-3) 100%); color:var(--on-accent); font-weight:700; letter-spacing:.06em; cursor:pointer; box-shadow:inset 0 1px 0 var(--btn-hi), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.45); transition:filter .16s ease, transform .16s ease, box-shadow .16s ease; } button:hover,.btn:hover{ filter:brightness(1.09); transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--btn-hi), inset 0 -1px 0 rgba(0,0,0,.3), 0 4px 14px var(--glow-hover); } button:active,.btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.4);filter:brightness(.97);} button:disabled,.btn:disabled{filter:saturate(.45) brightness(.72);cursor:not-allowed;transform:none;box-shadow:none;} button.ghost,.btn.ghost{ background:var(--btn-ghost-bg); color:var(--accent-soft); border:1px solid var(--edge-3); font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } button.ghost:hover,.btn.ghost:hover{ border-color:var(--accent);color:var(--accent-bright); background:var(--bg-wash); box-shadow:0 2px 10px rgba(0,0,0,.35); } button.go,.btn.go{ background:linear-gradient(180deg,var(--btn-go-face-1),var(--btn-go-face-2)); border:1px solid var(--btn-go-edge);color:var(--btn-go-ink); } button.go:hover,.btn.go:hover{filter:brightness(1.07);} button.danger{ background:transparent;border:1px solid var(--btn-danger-edge);color:var(--err); } button.danger:hover{border-color:var(--err-deep);background:var(--bg-wash);color:var(--err-on-deep);} /* 内联深色底的次级按钮（JS 模板里遗留的 background:#3a2e1c/#8f3b2d/#6f8f4a）统一压成刻印风 */ button[style*="background:#3a2e1c"]{color:var(--accent-soft)!important;border:1px solid var(--edge-3)!important;background-image:none!important;} button[style*="background:#8f3b2d"]{color:var(--err-on-deep)!important;border:1px solid var(--btn-danger-edge)!important;background-image:none!important;} button[style*="background:#6f8f4a"]{color:var(--btn-go-ink)!important;border:1px solid var(--btn-go-edge)!important;background-image:none!important;} /* ---------- 输入：内凹墨槽 ---------- */ input,select,textarea{ font-family:var(--font-body); border-radius:2px; border:1px solid var(--edge-3); background:var(--bg-sunken); color:var(--t-body); box-shadow:inset 0 2px 5px rgba(0,0,0,.45); transition:border-color .15s ease, box-shadow .15s ease; } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent); box-shadow:inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 3px rgba(var(--accent-rgb),.18); } input::placeholder,textarea::placeholder{color:var(--t-faint);} /* ---------- 卡片：旧木面板 + 四角铆钉 ---------- */ .card{ position:relative; background: radial-gradient(circle 3px at 8px 8px, var(--rivet) 0 1.5px, var(--rivet-ring) 1.5px 2.6px, transparent 3px), radial-gradient(circle 3px at calc(100% - 8px) 8px, var(--rivet) 0 1.5px, var(--rivet-ring) 1.5px 2.6px, transparent 3px), radial-gradient(circle 3px at 8px calc(100% - 8px), var(--rivet) 0 1.5px, var(--rivet-ring) 1.5px 2.6px, transparent 3px), radial-gradient(circle 3px at calc(100% - 8px) calc(100% - 8px), var(--rivet) 0 1.5px, var(--rivet-ring) 1.5px 2.6px, transparent 3px), linear-gradient(180deg,var(--card-face-1),var(--card-face-2)); border:1px solid var(--edge-2); border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.35); } /* ---------- 羊皮纸（叙事文书面） ---------- */ .parchment,.sheet{ position:relative; color:var(--parch-ink); background: radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), radial-gradient(90% 70% at 88% 100%, var(--parch-burn), rgba(0,0,0,0) 60%), radial-gradient(70% 55% at 6% 92%, var(--parch-burn), transparent 60%), linear-gradient(180deg,var(--parch-1),var(--parch-2) 55%,var(--parch-3)); border:1px solid var(--parch-edge); border-radius:2px; box-shadow:inset 0 0 0 1px var(--parch-sheen), inset 0 0 34px var(--parch-burn), 0 8px 26px rgba(0,0,0,.5); } .parchment::after,.sheet::after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none; background-image:var(--grain-paper);opacity:.5;border-radius:inherit; } .parchment h2,.parchment h3,.sheet h2,.sheet h3{color:var(--parch-title);} .parchment h2::before,.sheet h2::before{color:var(--parch-diamond);} /* ---------- 徽记：印章式标签 ---------- */ .tag{ display:inline-block; border-radius:1px; border:1px solid var(--edge-3); background:linear-gradient(180deg,var(--tag-face-1),var(--tag-face-2)); color:var(--accent-bright); letter-spacing:.18em; padding:2px 6px 2px 9px; font-size:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .tag.admin{ border-color:var(--err-deep); color:var(--err-bright); background:linear-gradient(180deg,rgba(143,59,45,.25),rgba(143,59,45,.1)); } /* ---------- 杂项 ---------- */ .msg{font-size:13px;line-height:1.6;} .msg.ok{color:var(--ok);} .msg.err{color:var(--err);} .msg.gray{color:var(--t-dim);} .code{font-family:var(--font-mono);color:var(--accent-bright);font-weight:700;letter-spacing:.22em;} a{color:var(--accent);text-decoration:none;border-bottom:1px dotted rgba(var(--accent-rgb),.45);transition:color .15s,border-color .15s;} a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright);} code{font-family:var(--font-mono);} .hidden{display:none;} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;} ::selection{background:var(--sel-bg);color:var(--t-bright);} /* 卷轴滚动条 */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:var(--scroll-track);} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:1px solid var(--scroll-track);} ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);} *{scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin;} /* ========================================================= Tier C 组件层补充（2026-09-09）：Shell 顶栏 / 转场 / toast / z-index 令牌 ========================================================= */ /* ---------- z-index 令牌（C6）：弹层类统一走令牌，禁止页面自由发挥 ---------- */ :root{ --z-nav:30; /* 顶栏/内嵌导航 */ --z-drawer:40; /* 抽屉/侧滑面板 */ --z-modal:60; /* 全屏遮罩/弹窗 */ --z-toast:90; /* 全局提示（最高，仅次于调试层） */ } /* ---------- 页面转场（C4）：进入淡入 + 内容区轻微上移 ---------- */ @keyframes wbPageIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} } body{animation:wbPageIn .38s ease both;} @media (prefers-reduced-motion: reduce){ body{animation:none;} .wb-toast{transition:none;} } /* ---------- 档案馆导航顶栏（C1/C2） ---------- fixed 贴视口顶：部分页面 body 是 flex 容器，sticky 会沦为 flex item 被挤压； body 顶部让位由 shell.js 插入时按各页原 padding 动态补偿 */ .wb-shell-topbar{ position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 18px;height:46px; background:linear-gradient(180deg,var(--ink-750),var(--ink-850)); border-bottom:1px solid var(--edge-2); box-shadow:0 2px 10px rgba(0,0,0,.35); } .wb-shell-left{display:flex;align-items:center;gap:14px;min-width:0;} .wb-shell-actions{display:flex;align-items:center;gap:10px;} /* 导航链接：宋体小字 + 当前页金色题线 */ .wb-nav{display:flex;align-items:center;gap:4px;} .wb-nav-link{ display:inline-block; padding:12px 10px 10px; font-family:var(--font-display); font-size:14px;letter-spacing:.14em; color:var(--t-dim); border-bottom:2px solid transparent; transition:color .15s ease,border-color .15s ease; } .wb-nav-link:hover{color:var(--accent-soft);border-bottom-color:rgba(var(--accent-rgb),.35);} /* hidden 必须压得住上面的 display:inline-block：作者样式优先于 UA 的 [hidden]{display:none}，所以「管理员专属导航项」光靠 hidden 属性是藏不住的，得在这里显式声明。 */ .wb-nav-link[hidden]{display:none;} .wb-nav-link.on{ color:var(--accent-soft); border-bottom-color:var(--accent); /* 金色题线 */ text-shadow:0 0 12px rgba(var(--accent-rgb),.4); } /* 内嵌模式（game/map_editor 页自有功能条内挂载） */ span.wb-nav,span#wbNav{display:inline-flex;align-items:center;} /* ---------- 全局 toast（C5） ---------- */ .wb-toast-wrap{ position:fixed;top:56px;right:16px;z-index:var(--z-toast); display:flex;flex-direction:column;gap:8px;align-items:flex-end; pointer-events:none;max-width:min(380px,86vw); } .wb-toast{ pointer-events:auto; padding:10px 14px; font-size:13px;line-height:1.55;white-space:pre-line; color:var(--t-bright); background:linear-gradient(180deg,var(--card-face-1),var(--card-face-2)); border:1px solid var(--edge-2);border-left:3px solid var(--accent); border-radius:2px; box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); opacity:0;transform:translateX(14px); transition:opacity .24s ease, transform .24s ease; } .wb-toast.wb-toast-in{opacity:1;transform:translateX(0);} .wb-toast.wb-toast-out{opacity:0;transform:translateX(14px);} .wb-toast-ok{border-left-color:var(--ok);} .wb-toast-err{border-left-color:var(--err);color:var(--err-bright);} .wb-toast-info{border-left-color:var(--accent);} /* ---- 皮肤切换按钮（T4） ---- */ .wb-theme-btn{ appearance:none;border:1px solid var(--edge-2);background:transparent; color:var(--text-dim);font-family:inherit;font-size:12px;letter-spacing:.06em; padding:5px 10px;border-radius:3px;cursor:pointer;white-space:nowrap; transition:color .18s,border-color .18s; } .wb-theme-btn:hover{color:var(--accent-bright);border-color:var(--accent);} .wb-theme-btn:focus-visible{outline:1px solid var(--accent-bright);outline-offset:1px;} /* ---------- 档案页公共排版（Tier B2 收敛） ---------- 作用域：body.wb-std —— 仅 index/characters/character_create/adventure 四页家族挂载；game/map_editor 不挂，样式不受影响。从四页