/* Theme: cc-noir (黑色电影/雨夜) * 由 gen-theme.cjs 生成 · 题材候选池采样 + 对比度自校验 * 启用方式： * 或运行时切换：document.documentElement.dataset.theme = 'cc-noir'; */ :root[data-theme="cc-noir"] { /* 主色板 */ --bg: #0c0f14; --bg2: #11151b; --panel: #171c24; --panel2: #1e242e; --panel3: #272e3a; --line: #303847; --line2: #45515f; --text: #d6dade; --muted: #949da9; --dim: #5f6975; /* 强调色 */ --blood: #a92f28; --blood2: #83221c; --gold: #76a9bd; --gold2: #55889e; /* 状态色 */ --ok: #6a9573; --info: #76a9bd; --warn: #c39e56; --danger: #b9362c; /* 字体 */ --font-disp: 'Libre Baskerville', Georgia, serif; --font-body: 'Cormorant Garamond', Georgia, 'Songti SC', serif; --font-mono: 'Courier New', Consolas, monospace; /* 装饰 */ --radius: 8px; --radius-sm: 5px; --shadow: 0 8px 30px rgba(0, 0, 0, .6); --shadow-lg: 0 14px 52px rgba(0, 0, 0, .72); --ornament: '❖'; } /* 氛围层 */ [data-theme="cc-noir"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; background: radial-gradient(ellipse at 18% 22%, rgba(151, 188, 207, 0.06) 0%, transparent 40%), radial-gradient(ellipse at 84% 76%, rgba(169, 47, 40, 0.05) 0%, transparent 38%), repeating-linear-gradient(96deg, transparent 0px, transparent 36px, rgba(118, 169, 189, 0.03) 36px, rgba(118, 169, 189, 0.03) 37px); } /* 顶部栏 */ [data-theme="cc-noir"] .topbar { background: rgba(12, 15, 20, 0.92); border-bottom: 1px solid var(--line2); } [data-theme="cc-noir"] .brand .logo { font-family: var(--font-disp); letter-spacing: 3px; color: var(--gold); } [data-theme="cc-noir"] .side-sub { color: var(--muted); letter-spacing: 4px; font-family: var(--font-disp); font-size: 11px; } /* 卡片 */ [data-theme="cc-noir"] .card { background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%); border: 1px solid var(--line2); position: relative; } [data-theme="cc-noir"] .card::before, [data-theme="cc-noir"] .card::after { content: var(--ornament); position: absolute; color: var(--gold); font-size: 13px; opacity: .35; } [data-theme="cc-noir"] .card::before { top: 4px; left: 7px; } [data-theme="cc-noir"] .card::after { bottom: 4px; right: 7px; } /* AP 行动点 */ [data-theme="cc-noir"] .ap-pill { border: 1px solid var(--gold); background: var(--panel); color: var(--gold); font-family: var(--font-disp); letter-spacing: 2px; } /* code chip */ [data-theme="cc-noir"] .code-chip { font-family: var(--font-mono); background: rgba(0, 0, 0, .3); color: var(--gold); border: 1px dashed var(--gold); } /* 真相 · 封印 */ [data-theme="cc-noir"] .truth-card { background: linear-gradient(180deg, var(--panel) 0%, var(--bg2) 100%); border: 2px double var(--blood); position: relative; } [data-theme="cc-noir"] .truth-card::before { content: "T R U T H"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 14px; font-family: var(--font-disp); letter-spacing: 12px; color: var(--blood); font-size: 14px; } /* 未解锁 · 帷幕 */ [data-theme="cc-noir"] .lock-mask { background: rgba(12, 15, 20, 0.62); border: 1px dashed var(--gold2); color: var(--gold); } /* 揭示提示 */ [data-theme="cc-noir"] .toast.reveal { border: 1px double var(--blood); background: linear-gradient(180deg, rgba(169, 47, 40, 0.16) 0%, rgba(12, 15, 20, 0.96) 100%), radial-gradient(circle at center, rgba(214, 218, 222, 0.08), transparent 70%); box-shadow: 0 0 32px rgba(118, 169, 189, 0.22); } /* 投票卡片 */ [data-theme="cc-noir"] .vote-card.suspect { border-left: 3px solid var(--blood); } [data-theme="cc-noir"] .vote-card.mine { border-left: 3px solid var(--gold); } /* 特色动画 */ /* 霓虹呼吸 · 用于强调 chip */ @keyframes neonbreathe { 0%, 100% { box-shadow: 0 0 6px rgba(151, 188, 207, 0.5); } 50% { box-shadow: 0 0 18px rgba(151, 188, 207, 0.5), 0 0 30px rgba(169, 47, 40, 0.4); } } [data-theme="cc-noir"] .timer-chip.gold, [data-theme="cc-noir"] #phaseChip { animation: neonbreathe 2.8s ease-in-out infinite; } /* 移动端适配（继承 reference 07 断点行为，只做视觉增强） */ @media (max-width: 820px) { [data-theme="cc-noir"] .ap-pill { padding: 4px 10px; font-size: 12px; } [data-theme="cc-noir"] .topbar { padding-left: 12px; } [data-theme="cc-noir"] .chip { padding: 3px 8px; font-size: 11px; } } /* 角色主题色覆盖（可选微调） * 说明：以下按剧本角色 id 微调 .cname 高亮色，生成时按 data.json 的 * characters[].id / .color 替换。若不想微调可整段删除——style.css 的 * .cname[data-color] 已用内联 --c 变量兜底角色主题色。 * 示例： * [data-theme="cc-noir"] .cname[data-color="角色id"] { color: var(--gold); } */