/* ============================================================ 创作灯光 · StudioLight — 全站灯光氛围插件 色温与亮度参考：Xie et al. 2024（视觉疲劳与色温）、 ANSI/IES RP-1（办公照度）、复禾健康（舒适色温 4000-5000K）。 ============================================================ */ /* ---- 色温覆盖层 ---- */ #sl-overlay { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toolbar); opacity: 0; transition: opacity .6s ease, background .6s ease; /* 默认：暖色覆盖层（偏暖方向） */ background: rgba(255, 180, 80, 0); mix-blend-mode: multiply; } /* 冷色方向：切换为滤色模式，让冷色叠亮 */ html[data-sl-ct="cool"] #sl-overlay { mix-blend-mode: screen; } /* 覆盖层激活 */ html[data-sl="on"] #sl-overlay { opacity: 1; } /* ---- 亮度覆盖层（替代 body filter，避免破坏 fixed 定位基准） ---- */ #sl-bri-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toolbar-1); mix-blend-mode: screen; transition: background .5s ease; } /* ---- 浮动控制按钮 ---- */ #sl-toggle { position: fixed; left: 24px; bottom: 24px; z-index: var(--z-toolbar-3); width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .55); backdrop-filter: blur(18px) saturate(175%); -webkit-backdrop-filter: blur(18px) saturate(175%); box-shadow: 0 4px 20px rgba(31, 60, 120, .10), 0 1px 6px rgba(31, 60, 120, .06); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; -webkit-tap-highlight-color: transparent; user-select: none; } #sl-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(31, 60, 120, .14), 0 2px 10px rgba(31, 60, 120, .08); border-color: rgba(47, 111, 237, .35); } #sl-toggle:active { transform: scale(.95); } #sl-toggle .sl-icon { font-size: 20px; line-height: 1; color: #2f6fed; transition: transform .25s ease; } #sl-toggle .sl-icon svg { display: block; } /* 激活态：图标亮起 */ #sl-toggle[data-active="true"] { border-color: rgba(255, 190, 60, .50); background: rgba(255, 240, 210, .65); box-shadow: 0 4px 20px rgba(200, 150, 50, .15), 0 0 0 3px rgba(255, 190, 60, .12); } #sl-toggle[data-active="true"] .sl-icon { filter: drop-shadow(0 0 4px rgba(255, 170, 30, .4)); } /* ---- 浮动控制面板 ---- */ #sl-panel { position: fixed; left: 24px; bottom: 80px; z-index: var(--z-toolbar-3); width: 296px; padding: 18px 20px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 14px 40px rgba(31, 60, 120, .12), 0 2px 10px rgba(31, 60, 120, .06), inset 0 1px 0 rgba(255, 255, 255, .65); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } #sl-panel.sl-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* 面板标题行 */ #sl-panel .sl-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } #sl-panel .sl-hdr h4 { margin: 0; font-size: 14px; font-weight: 600; color: #1c2536; letter-spacing: .02em; } #sl-panel .sl-hdr .sl-badge { font-size: 10.5px; color: #8b95a8; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .04); letter-spacing: .01em; } /* ---- 预设按钮组 ---- */ #sl-panel .sl-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; } #sl-panel .sl-preset { padding: 10px 8px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .06); background: rgba(255, 255, 255, .5); cursor: pointer; text-align: center; transition: all .2s ease; -webkit-tap-highlight-color: transparent; } #sl-panel .sl-preset:hover { background: rgba(47, 111, 237, .06); border-color: rgba(47, 111, 237, .18); } #sl-panel .sl-preset[data-active="true"] { background: rgba(47, 111, 237, .10); border-color: rgba(47, 111, 237, .30); box-shadow: 0 0 0 2px rgba(47, 111, 237, .08); } #sl-panel .sl-preset .sl-emoji { font-size: 20px; display: block; margin-bottom: 4px; } #sl-panel .sl-preset .sl-pname { font-size: 12px; font-weight: 600; color: #1c2536; display: block; } #sl-panel .sl-preset .sl-ptemp { font-size: 10px; color: #8b95a8; display: block; margin-top: 1px; } /* ---- 滑杆组 ---- */ #sl-panel .sl-sliders { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } #sl-panel .sl-row { display: flex; flex-direction: column; gap: 6px; } #sl-panel .sl-row-head { display: flex; justify-content: space-between; align-items: center; } #sl-panel .sl-label { font-size: 12px; color: #46536b; font-weight: 500; } #sl-panel .sl-value { font-size: 12px; color: #2f6fed; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } /* 自定义滑杆样式 */ #sl-panel input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; transition: background .2s ease; } #sl-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2f6fed; box-shadow: 0 2px 8px rgba(47, 111, 237, .2); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } #sl-panel input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 3px 12px rgba(47, 111, 237, .3); } #sl-panel input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2f6fed; box-shadow: 0 2px 8px rgba(47, 111, 237, .2); cursor: pointer; } /* 色温滑杆渐变背景 */ #sl-ct-range { background: linear-gradient(to right, #ff8a00, #ffb347, #ffd699, #fff4e0, #ffffff, #e8f0ff, #c7dcfc, #a0c4ff ); } /* 亮度滑杆渐变背景 */ #sl-bri-range { background: linear-gradient(to right, #555, #bbb, #fff); } /* ---- 智能建议 ---- */ #sl-panel .sl-tip { padding: 8px 12px; border-radius: 8px; background: rgba(47, 111, 237, .05); border: 1px solid rgba(47, 111, 237, .10); font-size: 11.5px; color: #46536b; line-height: 1.5; margin-bottom: 12px; } #sl-panel .sl-tip strong { color: #2f6fed; font-weight: 600; } /* ---- 操作行 ---- */ #sl-panel .sl-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .05); } #sl-panel .sl-reset { font-size: 12px; color: #8b95a8; background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .15s ease, background .15s ease; } #sl-panel .sl-reset:hover { color: #e5484d; background: rgba(229, 72, 77, .06); } #sl-panel .sl-off-btn { font-size: 12px; font-weight: 500; color: #fff; background: #2f6fed; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; transition: background .15s ease, transform .15s ease; } #sl-panel .sl-off-btn:hover { background: #1d4fc0; } #sl-panel .sl-off-btn:active { transform: scale(.96); } /* ---- 关闭动画增强 ---- */ html[data-sl="on"] #sl-toggle .sl-icon-lamp { animation: sl-glow 2.5s ease-in-out infinite alternate; } @keyframes sl-glow { from { filter: drop-shadow(0 0 3px rgba(255, 170, 30, .2)); } to { filter: drop-shadow(0 0 8px rgba(255, 170, 30, .5)); } } /* ---- 移动端适配 ---- */ @media (max-width: 640px) { #sl-toggle { left: 16px; bottom: 16px; width: 40px; height: 40px; } #sl-panel { right: 12px; left: 12px; bottom: 66px; width: auto; padding: 14px 16px 12px; } #sl-panel .sl-presets { grid-template-columns: repeat(4, 1fr); gap: 6px; } #sl-panel .sl-preset { padding: 8px 4px; } #sl-panel .sl-preset .sl-emoji { font-size: 18px; } #sl-panel .sl-preset .sl-pname { font-size: 11px; } } /* ============================================================ 深色模式（独立于灯效） 由 #sl-dark-btn 独占控制 html[data-sl-dark]，开/关灯互不影响 ============================================================ */ /* ---- 深色模式：全站 CSS 变量覆盖（所有模块共用一套变量） ---- 原则：浅色模式下所有反馈/交互色都已改为 token（见 style.css :root）， 此处只重定义 token，整套站点（含 hover/focus/active/disabled 交互态）自动转深色， 不再为每个组件写死 rgba 覆盖。—— 这就是「100% 重做」的地基。 */ html[data-sl-dark] { color-scheme: dark; /* —— 基础面 —— */ --bg: #0e1117; --bg-soft: #151a23; --surface: #181d28; --surface-2: #1f2532; --bg-card: #181d28; /* —— 文字 —— */ --ink: #e7ecf5; --ink-soft: #aab3c5; --muted: #7e8aa0; /* —— 品牌（深色下提亮，保证对比） —— */ --brand: #5b9bff; --brand-strong: #7fb0ff; --brand-soft: #16233f; --brand-line: #2c4a7d; /* —— 线条 —— */ --line: #2a3140; --hairline: #232a37; --field-line: #3a4456; --field-line-hover: #51607a; /* —— 语义色（深色下提亮，保证可读） —— */ --danger: #ff6b70; --ok: #4ade80; --warn: #fbbf24; /* —— 输入/按钮底面（替代浅色写死的 #fff） —— */ --input-bg: #1a1f2b; --surface-btn: var(--surface); --on-primary: #ffffff; /* —— 交互态叠层（浅色用暗叠加、深色用亮叠加，靠 token 翻转） —— */ --hover: rgba(255, 255, 255, .06); --hover-strong: rgba(255, 255, 255, .10); --active: rgba(255, 255, 255, .12); --surface-hover: rgba(255, 255, 255, .05); --focus-ring: rgba(91, 155, 255, .45); --sel-bg: rgba(91, 155, 255, .30); --code-bg: #11151d; --note-bg: rgba(255, 255, 255, .05); /* —— 阴影 / 玻璃 —— */ --shadow: 0 12px 32px rgba(0, 0, 0, .45); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --glass-high: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .09); } /* ---- 通用交互态（token 驱动，全站统一，不再逐组件写死） ---- */ html[data-sl-dark] ::selection { background: var(--sel-bg); color: var(--ink); } html[data-sl-dark] * { scrollbar-color: var(--line) var(--bg-soft); scrollbar-width: thin; } html[data-sl-dark] :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } html[data-sl-dark] :-webkit-scrollbar { width: 10px; height: 10px; } html[data-sl-dark] ::-webkit-scrollbar-track { background: var(--bg-soft); } html[data-sl-dark] ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--bg-soft); } html[data-sl-dark] ::-webkit-scrollbar-thumb:hover { background: var(--field-line); } /* 导航下拉项悬停：浅色写死的浅蓝渐变在深色下改走 token 叠层 */ html[data-sl-dark] .nav-dd-menu a:hover { background: var(--hover); color: var(--brand-strong); } html[data-sl-dark] .nav-dd-menu a.active { background: var(--brand-soft); } /* 卡片 / 面板悬停叠层（凡是用 rgba(0,0,0,*) 提亮的浅色组件，深色下统一走 --surface-hover） */ html[data-sl-dark] .card:hover, html[data-sl-dark] .panel:hover, html[data-sl-dark] .news-card:hover, html[data-sl-dark] .post-card:hover, html[data-sl-dark] .svc-card:hover, html[data-sl-dark] .about-item:hover { background-color: var(--surface-hover); } /* ---- 深色模式按钮（与开/关灯按钮视觉对齐） ---- */ #sl-panel .sl-dark-btn { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); background: transparent; color: #46536b; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; } #sl-panel .sl-dark-btn:hover { background: rgba(47, 111, 237, .06); border-color: rgba(47, 111, 237, .30); color: #2f6fed; } #sl-panel .sl-dark-btn:active { transform: scale(.96); } #sl-panel .sl-dark-btn[data-active="true"] { background: #2f6fed; color: #fff; border-color: #2f6fed; } #sl-panel .sl-dark-btn[data-active="true"]:hover { background: #1d4fc0; } /* ---- 深色模式下控制面板自身可读 ---- */ html[data-sl-dark] #sl-panel { background: rgba(30, 34, 48, .88); border-color: rgba(255, 255, 255, .12); box-shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-sl-dark] #sl-panel .sl-hdr h4 { color: #e6e9f2; } html[data-sl-dark] #sl-panel .sl-hdr .sl-badge { color: #a8b1c5; background: rgba(255, 255, 255, .08); } html[data-sl-dark] #sl-panel .sl-preset { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); } html[data-sl-dark] #sl-panel .sl-preset .sl-pname { color: #e6e9f2; } html[data-sl-dark] #sl-panel .sl-preset .sl-ptemp { color: #a8b1c5; } html[data-sl-dark] #sl-panel .sl-label { color: #a8b1c5; } html[data-sl-dark] #sl-panel .sl-value { color: #7fb0ff; } html[data-sl-dark] #sl-panel .sl-tip { background: rgba(47, 111, 237, .14); border-color: rgba(47, 111, 237, .28); color: #a8b1c5; } html[data-sl-dark] #sl-panel .sl-dark-btn { border-color: rgba(255, 255, 255, .18); color: #a8b1c5; } html[data-sl-dark] #sl-panel .sl-dark-btn:hover { color: #fff; border-color: #2f6fed; } html[data-sl-dark] #sl-panel .sl-dark-btn[data-active="true"] { background: #2f6fed; color: #fff; border-color: #2f6fed; } html[data-sl-dark] #sl-panel .sl-actions { border-top-color: rgba(255, 255, 255, .10); } /* 深色模式下面板内滑杆描边更清晰 */ html[data-sl-dark] #sl-panel input[type="range"] { background: #3a4154; } /* ---- 深色模式：表单控件深色适配（输入框不再刺眼白底） ---- */ html[data-sl-dark] input[type="text"], html[data-sl-dark] input[type="email"], html[data-sl-dark] input[type="password"], html[data-sl-dark] input[type="number"], html[data-sl-dark] input[type="search"], html[data-sl-dark] input[type="tel"], html[data-sl-dark] input[type="url"], html[data-sl-dark] textarea, html[data-sl-dark] select { background: #1a1d27; color: #e6e9f2; border-color: #3a4154; caret-color: #7fb0ff; } html[data-sl-dark] input::placeholder, html[data-sl-dark] textarea::placeholder { color: #6d7890; } /* 验证码输入框：收窄到适合 4~6 位数字的宽度，避免占满整行 */ html[data-sl-dark] .captcha-field input[type="text"] { flex: 0 1 150px; max-width: 150px; min-width: 120px; } /* ---- 媒体元素不做反色处理（图片/视频保持原样） ---- */ /* ============================================================ 深色模式：业务组件亮色残留统一覆盖 （原则：变量覆盖 → 组件覆盖 → 模板内联特例；全部置于 html[data-sl-dark] 之下） ============================================================ */ /* 补全变量：--bg-card（部分模板内联使用 var(--bg-card,#fff)） */ html[data-sl-dark] { --bg-card: #1e2230; } /* ---------- 1. 全站框架：顶栏 / 底栏 / 导航面板 / 玻璃容器 ---------- */ html[data-sl-dark] .site-header { background: rgba(18, 20, 28, .78); } html[data-sl-dark] .site-footer { background: rgba(18, 20, 28, .78); } html[data-sl-dark] .nav-dd-menu { background: rgba(26, 29, 39, .97); border-color: rgba(255, 255, 255, .10); } html[data-sl-dark] .admin-side { background: #1a1d27; } html[data-sl-dark] .panel, html[data-sl-dark] .login-card { background: rgba(26, 29, 39, .80); } html[data-sl-dark] .up-toast, html[data-sl-dark] .admin-up-toast { background: linear-gradient(150deg, rgba(30, 34, 48, .94), rgba(26, 32, 45, .88)); } html[data-sl-dark] .cm-dialog { background: linear-gradient(150deg, rgba(26, 29, 39, .97), rgba(24, 28, 38, .94)); } html[data-sl-dark] .ver-block, html[data-sl-dark] .glass { background: linear-gradient(150deg, rgba(30, 34, 48, .78), rgba(26, 29, 39, .55)); } html[data-sl-dark] .doc-semver { background: linear-gradient(160deg, rgba(27, 42, 74, .9), rgba(26, 29, 39, .85)); } html[data-sl-dark] .about-item, html[data-sl-dark] .svc-card { background: rgba(26, 29, 39, .72); } html[data-sl-dark] .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #a8b1c5; } html[data-sl-dark] .btn-ghost:hover { color: #fff; border-color: #2f6fed; } /* ---------- 2. 模块级主题变量深色化（部落暖橙 / 论坛紫） ---------- */ html[data-sl-dark] .thm-circles { --accent: #fb923c; --accent-strong: #fdba74; --accent-soft: rgba(249, 115, 22, .16); --accent-line: rgba(249, 115, 22, .34); } html[data-sl-dark] .thm-forum { --accent: #a78bfa; --accent-strong: #c4b5fd; --accent-soft: rgba(139, 92, 246, .16); --accent-line: rgba(139, 92, 246, .34); } /* ---------- 3. 应用中心 ---------- */ html[data-sl-dark] .apps-hero { background: radial-gradient(900px 380px at 84% -18%, rgba(47, 111, 237, .22), transparent 60%), linear-gradient(160deg, #101826, #161c28 55%, #10131a); } html[data-sl-dark] .apps-alert { background: rgba(229, 72, 77, .12); border-color: rgba(229, 72, 77, .32); color: #fda4af; } /* ---------- 4. 博客 ---------- */ html[data-sl-dark] .blog-note, html[data-sl-dark] .blog-byline, html[data-sl-dark] .blog-invite, html[data-sl-dark] .blog-cover { background: rgba(26, 29, 39, .74); border-color: rgba(255, 255, 255, .08); } html[data-sl-dark] .blog-byline-role { background: rgba(255, 255, 255, .08); color: #a8b1c5; } /* ---------- 5. 活动 ---------- */ html[data-sl-dark] .thm-events .event-hero { background: radial-gradient(960px 400px at 88% -16%, rgba(217, 119, 6, .16), transparent 58%), radial-gradient(840px 380px at 2% 120%, rgba(14, 148, 136, .18), transparent 56%), linear-gradient(158deg, #141a24 0%, #151d2b 52%, #1b1a1c 100%); } html[data-sl-dark] .thm-events .event-hero-flow i { color: rgba(20, 184, 166, .80); } html[data-sl-dark] .thm-events .event-note { background: rgba(26, 29, 39, .80); border-color: rgba(20, 184, 166, .35); } html[data-sl-dark] .thm-events .event-kicker { background: rgba(26, 29, 39, .80); border-color: rgba(20, 184, 166, .35); } html[data-sl-dark] .thm-events .event-cal { background: rgba(26, 29, 39, .88); } html[data-sl-dark] .thm-events .event-cal-day { color: #7fb0ff; } html[data-sl-dark] .thm-events .event-tab { background: rgba(26, 29, 39, .72); } html[data-sl-dark] .thm-events .event-tab.on { background: #2f6fed; } html[data-sl-dark] .thm-events .event-code-input:focus { background: #1a1d27; } /* 事件状态徽章（模板内联改为 class，亮色默认在 events.css，深色在此覆盖） */ html[data-sl-dark] .event-state { background: rgba(26, 29, 39, .85); } html[data-sl-dark] .event-state-0 { color: #67e8f9; border-color: rgba(103, 232, 249, .40); } html[data-sl-dark] .event-state-1 { color: #fde047; border-color: rgba(253, 224, 71, .40); } html[data-sl-dark] .event-state-2 { color: #93c5fd; border-color: rgba(147, 197, 253, .40); } html[data-sl-dark] .event-state-3 { color: #d1d5db; border-color: rgba(209, 213, 219, .35); } html[data-sl-dark] .event-state-4 { color: #c4b5fd; border-color: rgba(196, 181, 253, .40); } /* 直播/回放提示框（模板内联改为 class） */ html[data-sl-dark] .ticket-box { background: rgba(26, 29, 39, .88); border-color: rgba(139, 92, 246, .40); } html[data-sl-dark] .ticket-box .ticket-title { color: #c4b5fd; } html[data-sl-dark] .ticket-box .ticket-sub { color: #a8b1c5; } html[data-sl-dark] .ticket-box.ticket-replay { border-color: rgba(74, 222, 128, .40); } html[data-sl-dark] .ticket-box.ticket-replay .ticket-title { color: #86efac; } /* ---------- 6. 部落 / 营地 ---------- */ html[data-sl-dark] .thm-circles .mod-kicker { background: linear-gradient(120deg, rgba(249, 115, 22, .18), rgba(249, 115, 22, .08)); } html[data-sl-dark] .thm-circles .camp-hero { background: radial-gradient(1100px 420px at 82% -10%, rgba(249, 115, 22, .18), transparent 58%), radial-gradient(760px 360px at 4% 118%, rgba(234, 88, 12, .12), transparent 55%), linear-gradient(158deg, #1c1410 0%, #1d1712 55%, #16181d 100%); } html[data-sl-dark] .thm-circles .camp-hero-note { background: rgba(26, 29, 39, .82); border-color: rgba(253, 186, 116, .50); color: #e2c9ab; } html[data-sl-dark] .thm-circles .camp-kicker { background: rgba(26, 29, 39, .82); border-color: rgba(249, 115, 22, .45); } html[data-sl-dark] .thm-circles .camp-title { color: #fde8cf; } html[data-sl-dark] .thm-circles .camp-sub { color: #cbb7a2; } html[data-sl-dark] .thm-circles .camp-sub b { color: #fdba74; } html[data-sl-dark] .thm-circles .camp-feet span { background: rgba(26, 29, 39, .82); border-color: rgba(253, 186, 116, .45); color: #e2c9ab; } html[data-sl-dark] .thm-circles .tribe-card { background: linear-gradient(180deg, #1d1912, #191b20 34%); } html[data-sl-dark] .thm-circles .tribe-cover::before { background: linear-gradient(180deg, rgba(10, 11, 16, .45), rgba(10, 11, 16, 0)); } html[data-sl-dark] .thm-circles .camp-tout { background: radial-gradient(600px 200px at 90% -30%, rgba(249, 115, 22, .14), transparent 60%), linear-gradient(180deg, rgba(30, 28, 22, .94), rgba(24, 26, 32, .88)); } html[data-sl-dark] .thm-circles .camp-tout-title { color: #f5d9b8; } html[data-sl-dark] .thm-circles .camp-tout-item { background: rgba(26, 29, 39, .72); } html[data-sl-dark] .thm-circles .tribe-rule-panel { background: rgba(26, 29, 39, .85); color: #cbb7a2; } html[data-sl-dark] .thm-circles .tribe-valley { background: linear-gradient(180deg, rgba(249, 115, 22, .14), #16181d); } html[data-sl-dark] .thm-circles .tribe-post-folded { background: linear-gradient(160deg, #1e1c28, #1c2028); } html[data-sl-dark] .thm-circles .tribe-cover .tribe-mood { background: rgba(18, 20, 28, .82); } html[data-sl-dark] .thm-circles .tribe-heat-flag { background: rgba(18, 20, 28, .82); color: #e6e9f2; } html[data-sl-dark] .thm-circles .tribe-mood-hot { background: rgba(244, 63, 94, .18); color: #fda4af; border-color: rgba(244, 63, 94, .38); } html[data-sl-dark] .thm-circles .tribe-mood-quiet { background: rgba(148, 163, 184, .16); color: #cbd5e1; border-color: rgba(148, 163, 184, .34); } html[data-sl-dark] .thm-circles .tribe-mood-pro { background: rgba(96, 165, 250, .16); color: #93c5fd; border-color: rgba(96, 165, 250, .38); } html[data-sl-dark] .thm-circles .tribe-mood-chill { background: rgba(74, 222, 128, .14); color: #86efac; border-color: rgba(74, 222, 128, .34); } html[data-sl-dark] .thm-circles .tribe-mood-brain { background: rgba(167, 139, 250, .16); color: #c4b5fd; border-color: rgba(167, 139, 250, .38); } html[data-sl-dark] .thm-circles .tribe-post-fields input:focus, html[data-sl-dark] .thm-circles .tribe-post-form textarea:focus { background: #1a1d27; } /* 模板内联 CoverCSS（无封面图时的暖渐变 banner）→ 深色覆盖 */ html[data-sl-dark] .thm-circles [style*="linear-gradient"] { background-image: radial-gradient(760px 320px at 80% -14%, rgba(249, 115, 22, .22), transparent 62%), linear-gradient(158deg, #241510, #171a1f 60%, #1c1420) !important; } /* ---------- 7. 论坛共鸣板（echo）与帖子类型组件 ---------- */ html[data-sl-dark] .thm-forum .echo-hero { background: radial-gradient(1100px 420px at 82% -10%, rgba(139, 92, 246, .22), transparent 58%), radial-gradient(760px 360px at 4% 118%, rgba(124, 58, 237, .14), transparent 55%), linear-gradient(158deg, #171221, #1b1626 55%, #14161c 100%); } html[data-sl-dark] .thm-forum .echo-hero .ph-kicker { background: rgba(26, 29, 39, .76); border-color: rgba(139, 92, 246, .45); } html[data-sl-dark] .thm-forum .echo-hero .ph-title { color: #ddd6fe; } html[data-sl-dark] .thm-forum .echo-hero .ph-note { color: #b9a8dd; } html[data-sl-dark] .thm-forum .echo-hero-note { background: rgba(26, 29, 39, .78); border-color: rgba(139, 92, 246, .45); color: #c4b5fd; } html[data-sl-dark] .thm-forum .echo-stat { background: linear-gradient(160deg, rgba(26, 29, 39, .88), rgba(76, 29, 149, .30)); } html[data-sl-dark] .thm-forum .echo-post { background: linear-gradient(160deg, rgba(26, 29, 39, .92), rgba(76, 29, 149, .28)); } html[data-sl-dark] .thm-forum .echo-post input:focus, html[data-sl-dark] .thm-forum .echo-post textarea:focus { background: #1a1d27; } html[data-sl-dark] .thm-forum .echo-badge-hot, html[data-sl-dark] .thm-forum .echo-badge-echo { background: rgba(139, 92, 246, .16); color: #c4b5fd; border-color: rgba(139, 92, 246, .34); } html[data-sl-dark] .thm-forum .echo-badge-cold { background: rgba(148, 163, 184, .14); color: #cbd5e1; } html[data-sl-dark] .thm-forum .echo-badge-fire { background: rgba(244, 63, 94, .16); color: #fda4af; } html[data-sl-dark] .thm-forum .echo-badge-deep { background: rgba(74, 222, 128, .14); color: #86efac; } /* threads.css：投票 / 商品 / 辩论 / 视频抽屉 */ html[data-sl-dark] .thm-forum .pt-poll, html[data-sl-dark] .thm-forum .pt-prod-card, html[data-sl-dark] .thm-forum .pt-debate-side, html[data-sl-dark] .thm-forum .pt-debate-ed-side, html[data-sl-dark] .thm-forum .pt-video-side { background: linear-gradient(160deg, rgba(26, 29, 39, .92), rgba(76, 29, 149, .26)); } html[data-sl-dark] .thm-forum .pt-poll-opt, html[data-sl-dark] .thm-forum .pt-opt-row input, html[data-sl-dark] .thm-forum .pt-debate-ed-side input, html[data-sl-dark] .thm-forum .pt-debate-ed-side textarea { background: #1a1d27; border-color: rgba(139, 92, 246, .32); color: #e6e9f2; } html[data-sl-dark] .thm-forum .pt-prod-img, html[data-sl-dark] .thm-forum .pt-prod-fallback { background: rgba(255, 255, 255, .06); } html[data-sl-dark] .thm-forum .pt-type-tab span { background: rgba(26, 29, 39, .82); } html[data-sl-dark] .thm-forum .pt-video-jump, html[data-sl-dark] .thm-forum .pt-drawer-btn, html[data-sl-dark] .thm-forum .pt-layout-btn { background: rgba(255, 255, 255, .07); } html[data-sl-dark] .thm-forum .pt-drawer-close { background: rgba(255, 255, 255, .08); } /* ---------- 8. 新闻 / 官方 / 价格 / 演示 ---------- */ html[data-sl-dark] .news-tab { background: rgba(26, 29, 39, .82); } html[data-sl-dark] .news-badge-new, html[data-sl-dark] .news-badge-hot { background: rgba(47, 111, 237, .16); color: #93c5fd; } html[data-sl-dark] .off-tab { background: rgba(26, 29, 39, .82); } html[data-sl-dark] .pro-perk { background: rgba(26, 29, 39, .86); border-color: rgba(47, 111, 237, .22); } html[data-sl-dark] .price-card { background: linear-gradient(180deg, rgba(30, 34, 48, .96), rgba(26, 29, 39, .92)); } html[data-sl-dark] .price-qr { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); } html[data-sl-dark] .price-faq-item { background: rgba(26, 29, 39, .82); } html[data-sl-dark] .off-download { background: linear-gradient(135deg, rgba(47, 111, 237, .22), rgba(30, 34, 48, .6)); } html[data-sl-dark] .demo-modal { background: rgba(18, 20, 28, .96); } html[data-sl-dark] .demo-x { background: rgba(255, 255, 255, .08); } html[data-sl-dark] .demo-terms { background: rgba(255, 255, 255, .05); } html[data-sl-dark] .demo-err { background: rgba(229, 72, 77, .12); color: #fda4af; } html[data-sl-dark] .demo-kv code { background: rgba(255, 255, 255, .08); } html[data-sl-dark] .demo-key-banner { background: rgba(47, 111, 237, .18); border-color: rgba(47, 111, 237, .42); } html[data-sl-dark] .demo-terms li.key { background: rgba(255, 255, 255, .06); } html[data-sl-dark] .off-ann-pin { background: rgba(47, 111, 237, .12); border-color: rgba(47, 111, 237, .32); color: #93c5fd; } /* ---------- 9. 公告板 ---------- */ html[data-sl-dark] .bulletin-item { background: rgba(26, 29, 39, .90); } html[data-sl-dark] .bulletin-tags span { background: rgba(255, 255, 255, .08); } html[data-sl-dark] .bulletin-badge-pin, html[data-sl-dark] .bulletin-badge-new { background: rgba(47, 111, 237, .16); color: #93c5fd; } /* ---------- 10. 报纸 / 官媒 ---------- */ html[data-sl-dark] .press-flow { background: radial-gradient(800px 320px at 92% -6%, rgba(194, 65, 12, .12), transparent 60%), linear-gradient(180deg, #1c1a14, #191915); border-color: #2c3142; } html[data-sl-dark] .press-lead { background: linear-gradient(180deg, #1e1b14, #1d1a13); border-color: #3a3042; } html[data-sl-dark] .press-clip { background: linear-gradient(180deg, #1c1a13, #1a1915); border-color: #3a3042; } html[data-sl-dark] .press-stat { background: rgba(26, 29, 39, .82); border-color: rgba(185, 28, 28, .35); } html[data-sl-dark] .press-hero-badge { background: rgba(26, 29, 39, .86); border-color: rgba(185, 28, 28, .42); color: #fda4af; } html[data-sl-dark] .press-hero-note { color: #d4c3a5; } html[data-sl-dark] .press-hero-note b, html[data-sl-dark] .press-stat b { color: #f87171; } html[data-sl-dark] .press-stat span { color: #b7a37e; } html[data-sl-dark] .press-clip-title, html[data-sl-dark] .press-clip-title a, html[data-sl-dark] .press-lead-title, html[data-sl-dark] .press-lead-title a { color: #fca5a5; } html[data-sl-dark] .press-clip-summary, html[data-sl-dark] .press-lead-summary { color: #d4c3a5; } html[data-sl-dark] .press-clip-meta, html[data-sl-dark] .press-lead-meta { color: #b7a37e; } html[data-sl-dark] .press-clip-more, html[data-sl-dark] .press-lead-more { color: #f87171; } /* ---------- 11. 工具 / 用户页 / 图库 / 文档 / 公告 ---------- */ html[data-sl-dark] .tool-hero { background: linear-gradient(135deg, #14203a, #17202e); border-color: rgba(79, 155, 255, .30); } html[data-sl-dark] .profile-hero { background: linear-gradient(150deg, #101826, #161c28 60%, #10131a); } html[data-sl-dark] .doc-note { background: linear-gradient(160deg, rgba(27, 42, 74, .55), rgba(26, 29, 39, .55)); border-color: rgba(255, 255, 255, .08); } html[data-sl-dark] .pin-badge { background: rgba(249, 115, 22, .18); color: #fdba74; } html[data-sl-dark] .gallery-copy { background: linear-gradient(90deg, rgba(27, 42, 74, .65), rgba(26, 29, 39, .5)); } /* ============================================================ 深色模式：第二批覆盖（更新日志 / 关于页 / 活动全组件 / 文字色） ============================================================ */ /* ---------- 12. 更新日志 ---------- */ html[data-sl-dark] .ver-anniversary { background: radial-gradient(2.5px 2.5px at 12% 18%, rgba(246, 212, 138, .45), transparent 62%), radial-gradient(2px 2px at 86% 12%, rgba(232, 163, 61, .35), transparent 62%), linear-gradient(150deg, #211a10, #221b11 50%, #1a1712); } html[data-sl-dark] .ver-anniversary h3 { color: #f2dfc0; } html[data-sl-dark] .ver-anniversary p, html[data-sl-dark] .ver-anniversary ul, html[data-sl-dark] .ver-anniversary ol, html[data-sl-dark] .ver-anniversary li { color: #cdbfa5; } html[data-sl-dark] .ver-anniversary strong, html[data-sl-dark] .ver-anniversary strong.hl { color: #f5c46a; background: rgba(217, 155, 43, .16); border-color: rgba(217, 155, 43, .30); } html[data-sl-dark] .anniversary-badge { background: linear-gradient(135deg, rgba(217, 155, 43, .85), rgba(232, 163, 61, .75)); color: #2a1c04; } html[data-sl-dark] .chg-tag.t-new { color: #6ee7a0; } html[data-sl-dark] .chg-tag.t-opt { color: #7db4ff; } html[data-sl-dark] .chg-tag.t-fix { color: #fbbf77; } html[data-sl-dark] .chg-tag.t-sec { color: #fda4af; } html[data-sl-dark] .chg-tag.t-adj { color: #c4b5fd; } /* ---------- 13. 关于页（ab-*） ---------- */ html[data-sl-dark] .ab-hero { background: radial-gradient(1100px 420px at 8% -30%, rgba(47, 111, 237, .20), transparent 60%), radial-gradient(760px 360px at 100% 0%, rgba(74, 141, 255, .14), transparent 55%), linear-gradient(165deg, #101826 0%, #141c2c 100%); border-color: rgba(74, 141, 255, .28); } html[data-sl-dark] .ab-title { color: #dbe7ff; } html[data-sl-dark] .ab-lead { color: #a9b8d4; } html[data-sl-dark] .ab-cta .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(124, 158, 255, .40); color: #9db9ff; } html[data-sl-dark] .ab-stat, html[data-sl-dark] .ab-band, html[data-sl-dark] .ab-scene, html[data-sl-dark] .ab-price, html[data-sl-dark] .ab-story-who, html[data-sl-dark] .ab-step, html[data-sl-dark] .ab-q { background: rgba(26, 29, 39, .92); border-color: rgba(255, 255, 255, .08); } html[data-sl-dark] .ab-stat b, html[data-sl-dark] .ab-band > h2, html[data-sl-dark] .ab-scene b, html[data-sl-dark] .ab-price b, html[data-sl-dark] .ab-step-body h3, html[data-sl-dark] .ab-q summary { color: #dbe7ff; } html[data-sl-dark] .ab-stat span, html[data-sl-dark] .ab-band > .ab-sub, html[data-sl-dark] .ab-note, html[data-sl-dark] .ab-price span, html[data-sl-dark] .ab-price strong i, html[data-sl-dark] .ab-scene em { color: #8f9cb3; } html[data-sl-dark] .ab-layer, html[data-sl-dark] .ab-trust-item { background: rgba(24, 27, 38, .85); border-color: rgba(255, 255, 255, .08); } html[data-sl-dark] .ab-layer b, html[data-sl-dark] .ab-trust-item b { color: #7db4ff; } html[data-sl-dark] .ab-layer p, html[data-sl-dark] .ab-trust-item p, html[data-sl-dark] .ab-step-body p, html[data-sl-dark] .ab-step-body li, html[data-sl-dark] .ab-story-who p, html[data-sl-dark] .ab-scene p, html[data-sl-dark] .ab-q-body { color: #b6c2d8; } html[data-sl-dark] .ab-free { background: linear-gradient(160deg, rgba(201, 135, 26, .16), rgba(201, 135, 26, .08)); border-color: rgba(246, 197, 94, .35); } html[data-sl-dark] .ab-free b { color: #f6c95e; } html[data-sl-dark] .ab-free p { color: #d4c3a5; } html[data-sl-dark] .ab-q summary::before { background: rgba(47, 111, 237, .22); color: #7db4ff; } html[data-sl-dark] .ab-q[open] summary::before { background: #2f6fed; color: #fff; } html[data-sl-dark] .ab-q-body code { background: rgba(255, 255, 255, .08); color: #dbe7ff; } html[data-sl-dark] .ab-step-no { color: rgba(219, 232, 255, .25); } /* ---------- 14. 活动详情 / 报名 / 票根 / 核验 ---------- */ html[data-sl-dark] .thm-events .event-article, html[data-sl-dark] .thm-events .event-facts, html[data-sl-dark] .thm-events .event-ticket, html[data-sl-dark] .thm-events .event-scan, html[data-sl-dark] .thm-events .event-manual, html[data-sl-dark] .thm-events .event-result, html[data-sl-dark] .thm-events .event-slip { background: rgba(26, 29, 39, .88); } html[data-sl-dark] .thm-events .event-badge, html[data-sl-dark] .thm-events .event-token, html[data-sl-dark] .thm-events .event-kind-text { background: rgba(26, 29, 39, .82); } html[data-sl-dark] .thm-events .event-field { background: rgba(18, 20, 28, .85); color: #e6e9f2; } html[data-sl-dark] .thm-events .event-field:focus { background: #1a1d27; } html[data-sl-dark] .thm-events .event-code-input { background: rgba(18, 20, 28, .85); color: #e6e9f2; } html[data-sl-dark] .thm-events .event-code-input:focus { background: #1a1d27; } html[data-sl-dark] .thm-events .event-tab.on em { background: rgba(255, 255, 255, .18); } html[data-sl-dark] .thm-events .event-pro a { background: rgba(26, 29, 39, .82); } /* ---------- 15. 论坛 / 公告板文字与标签 ---------- */ html[data-sl-dark] .thm-forum .echo-stat b, html[data-sl-dark] .thm-forum .echo-post-title a { color: #ddd6fe; } html[data-sl-dark] .bulletin-title a { color: #d6dde8; } html[data-sl-dark] .bulletin-title a:hover { color: #a3d977; } html[data-sl-dark] .bulletin-summary { color: #9aa7b8; } html[data-sl-dark] .bulletin-meta { color: #8b97a8; } html[data-sl-dark] .bulletin-tags span { color: #a3d977; } html[data-sl-dark] .bulletin-badge-pin { background: rgba(217, 155, 43, .16); color: #fcd34d; } html[data-sl-dark] .bulletin-badge-new { background: rgba(244, 63, 94, .14); color: #fda4af; } /* ============================================================ 16. 图库（gallery_detail 底部操作栏 / 创建页）深色统一 根因：.gal-tab 未激活态写死 rgba(255,255,255,.72) 半透明白， 深色下无覆盖 → 大图/折叠浅灰突兀；激活态保持品牌蓝。 ============================================================ */ html[data-sl-dark] .gal-tab { background: rgba(26, 29, 39, .72); border-color: rgba(255, 255, 255, .14); color: #a8b1c5; } html[data-sl-dark] .gal-tab:hover { border-color: rgba(47, 111, 237, .45); color: #7db4ff; } html[data-sl-dark] .gal-tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } /* 收藏按钮：fav_button 通用 .btn-ghost 深色覆盖已存在，此处按详情页上下文再兜一层 */ html[data-sl-dark] .mod-detail-meta .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #a8b1c5; } html[data-sl-dark] .mod-detail-meta .btn-ghost:hover { border-color: #2f6fed; color: #fff; } /* 创建页卡片 / 表单 / 折叠提示 */ html[data-sl-dark] .gal-new { background: rgba(30, 34, 48, .72); border-color: rgba(255, 255, 255, .08); } html[data-sl-dark] .gal-field input, html[data-sl-dark] .gal-field textarea { background: rgba(18, 20, 28, .78); color: #e6e9f2; border-color: rgba(255, 255, 255, .12); } html[data-sl-dark] .gal-field input:focus, html[data-sl-dark] .gal-field textarea:focus { background: #1a1d27; } html[data-sl-dark] .gal-field input[readonly] { background: rgba(18, 20, 28, .6); color: #a8b1c5; } html[data-sl-dark] .gal-note-ro { background: rgba(18, 20, 28, .6); color: #a8b1c5; } html[data-sl-dark] .gal-btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #a8b1c5; } html[data-sl-dark] .gal-fold-note { background: rgba(30, 34, 48, .80); color: #a8b1c5; } /* ============================================================ 17. 通用面板 .mod-panel 深色化（问题2根因） 根因：events_detail 的「参加方式/报名截止/到场指引/补充信息/ 选座购票/活动信息」等卡片全部使用 style.css 的 .mod-panel， 其 background 写死浅色渐变 linear-gradient(160deg, rgba(255,255,255,.92), rgba(238,246,255,.62))，深色下未覆盖， 与已深色化的 .event-article 深浅混排 → “卡片重叠错乱”观感。 ============================================================ */ html[data-sl-dark] .mod-panel { background: linear-gradient(160deg, rgba(30, 34, 48, .92), rgba(26, 29, 39, .84)); border-color: rgba(255, 255, 255, .08); } /* 版权声明区恢复既有深色渐变（避免被上一条同特异性规则覆盖） */ html[data-sl-dark] .mod-panel.gallery-copy { background: linear-gradient(90deg, rgba(27, 42, 74, .65), rgba(26, 29, 39, .50)); } /* ============================================================ 18. 活动详情补充：内联虚线框 / 补充信息 iframe 白底深色化 ============================================================ */ html[data-sl-dark] .thm-events .mod-panel[style*="#94a3b8"] { border-color: rgba(255, 255, 255, .18) !important; } html[data-sl-dark] .thm-events iframe { background: #1a1d27 !important; border-color: rgba(255, 255, 255, .12) !important; } /* ============================================================ 19. 悬浮灯按钮深色适配（定位规则不变：桌面 left:24px bottom:24px， 移动端 ≤640px left:16px bottom:16px） ============================================================ */ html[data-sl-dark] #sl-toggle { background: rgba(30, 34, 48, .85); border-color: rgba(255, 255, 255, .20); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); } html[data-sl-dark] #sl-toggle[data-active="true"] { background: rgba(58, 42, 20, .90); border-color: rgba(255, 190, 60, .55); } /* ============================================================ 20. 移动端悬浮灯按钮收口：五格底栏（≤900px，54px+安全区）出现后， 悬浮灯抬到底栏上方，与右侧无障碍球、contact-fab 同一水平线， 不再压住底栏标签。写在文件末尾确保压过 363 行的 ≤640 旧定位。 ============================================================ */ @media (max-width: 900px) { #sl-toggle { left: 14px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } } /* ============================================================ 21. 装饰性主题子页（archive/bazaar/bulletin/calendar/camp/career/ solve/survey/theater/timeline/ember/lens/desk/frame/extra）深色根文字—— 这些页是独立"小站"品牌主题，根节点透明、页级文字写死深色（如 #3a2f22）， 深色下根节点继承 --bg（暗），导致页级文字不可见。此处统一把根文字翻为 --ink， 卡片仍保留其浅色底面（可读，仅风格未全暗）。各卡片内部文字有自身颜色，保持可读。 ============================================================ */ html[data-sl-dark] .theme-archive, html[data-sl-dark] .archive-page, html[data-sl-dark] .theme-bazaar, html[data-sl-dark] .bazaar-page, html[data-sl-dark] .theme-bulletin, html[data-sl-dark] .bulletin-page, html[data-sl-dark] .theme-calendar, html[data-sl-dark] .calendar-page, html[data-sl-dark] .theme-camp, html[data-sl-dark] .camp-page, html[data-sl-dark] .theme-career, html[data-sl-dark] .career-page, html[data-sl-dark] .theme-solve, html[data-sl-dark] .solve-page, html[data-sl-dark] .theme-survey, html[data-sl-dark] .survey-page, html[data-sl-dark] .theme-theater, html[data-sl-dark] .theater-page, html[data-sl-dark] .theme-timeline, html[data-sl-dark] .tl-page, html[data-sl-dark] .theme-ember, html[data-sl-dark] .ember-page, html[data-sl-dark] .theme-lens, html[data-sl-dark] .lens-page, html[data-sl-dark] .theme-desk, html[data-sl-dark] .desk-page, html[data-sl-dark] .theme-frame, html[data-sl-dark] .frame-page, html[data-sl-dark] .theme-extra, html[data-sl-dark] .extra-page { color: var(--ink); } /* ============================================================ 深色模式：第三批覆盖（14 装饰子页 + admin + homeland + 模板页 + 本地UI） ============================================================ */ /* ---------- archive ---------- */ html[data-sl-dark] :is(.theme-archive,.archive-page) .archive-hero-eyebrow, :is(.theme-archive,.archive-page) .archive-hero-card, :is(.theme-archive,.archive-page) .archive-card, :is(.theme-archive,.archive-page) .archive-card-cat, :is(.theme-archive,.archive-page) .archive-rank-item, :is(.theme-archive,.archive-page) .archive-rank-num, :is(.theme-archive,.archive-page) .archive-tabs a, :is(.theme-archive,.archive-page) .archive-tabs a:hover, :is(.theme-archive,.archive-page) .archive-record-stamp, :is(.theme-archive,.archive-page) .archive-panel, :is(.theme-archive,.archive-page) .archive-poem { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-archive,.archive-page) :is(.archive-hero-eyebrow, .archive-hero-card, .archive-card, .archive-card-cat, .archive-rank-item, .archive-rank-num, .archive-tabs a, .archive-tabs a:hover, .archive-record-stamp, .archive-panel, .archive-poem) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- bazaar ---------- */ html[data-sl-dark] :is(.theme-bazaar,.bazaar-page) .bazaar-hero-eyebrow, :is(.theme-bazaar,.bazaar-page) .bazaar-hero-tags span, :is(.theme-bazaar,.bazaar-page) .bazaar-booth, :is(.theme-bazaar,.bazaar-page) .bazaar-cats a, :is(.theme-bazaar,.bazaar-page) .bazaar-stall, :is(.theme-bazaar,.bazaar-page) .bazaar-stall-cat, :is(.theme-bazaar,.bazaar-page) .bazaar-open-badge, :is(.theme-bazaar,.bazaar-page) .bazaar-trust { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-bazaar,.bazaar-page) :is(.bazaar-hero-eyebrow, .bazaar-hero-tags span, .bazaar-booth, .bazaar-cats a, .bazaar-stall, .bazaar-stall-cat, .bazaar-open-badge, .bazaar-trust) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- calendar ---------- */ html[data-sl-dark] :is(.theme-calendar,.calendar-page) .cal-eyebrow, :is(.theme-calendar,.calendar-page) .cal-stamp, :is(.theme-calendar,.calendar-page) .cal-mode a, :is(.theme-calendar,.calendar-page) .cal-slip, :is(.theme-calendar,.calendar-page) .cal-state-open, :is(.theme-calendar,.calendar-page) .cal-state-closed, :is(.theme-calendar,.calendar-page) .cal-state-full, :is(.theme-calendar,.calendar-page) .cal-filter a, :is(.theme-calendar,.calendar-page) .cal-paperedge, :is(.theme-calendar,.calendar-page) .cal-ticket-body, :is(.theme-calendar,.calendar-page) .cal-tape.tape-1, :is(.theme-calendar,.calendar-page) .cal-tape.tape-2 { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-calendar,.calendar-page) :is(.cal-eyebrow, .cal-stamp, .cal-mode a, .cal-slip, .cal-state-open, .cal-state-closed, .cal-state-full, .cal-filter a, .cal-paperedge, .cal-ticket-body, .cal-tape.tape-1, .cal-tape.tape-2) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- camp ---------- */ html[data-sl-dark] :is(.theme-camp,.camp-page) .camp-hero-eyebrow, :is(.theme-camp,.camp-page) .camp-hero-flags span, :is(.theme-camp,.camp-page) .camp-planet, :is(.theme-camp,.camp-page) .camp-planet-tag, :is(.theme-camp,.camp-page) .camp-post, :is(.theme-camp,.camp-page) .camp-post-folded, :is(.theme-camp,.camp-page) .camp-post-login, :is(.theme-camp,.camp-page) .camp-panel, :is(.theme-camp,.camp-page) .camp-tout-item { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-camp,.camp-page) :is(.camp-hero-eyebrow, .camp-hero-flags span, .camp-planet, .camp-planet-tag, .camp-post, .camp-post-folded, .camp-post-login, .camp-panel, .camp-tout-item) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- career ---------- */ html[data-sl-dark] :is(.theme-career,.career-page) .career-hero-eyebrow, :is(.theme-career,.career-page) .career-hero-signs span, :is(.theme-career,.career-page) .career-post, :is(.theme-career,.career-page) .career-chip, :is(.theme-career,.career-page) .career-card, :is(.theme-career,.career-page) .career-fresh, :is(.theme-career,.career-page) .career-card-meta span, :is(.theme-career,.career-page) .career-wall-panel, :is(.theme-career,.career-page) .career-wall-title, :is(.theme-career,.career-page) .career-wall-row:hover, :is(.theme-career,.career-page) .career-perk, :is(.theme-career,.career-page) .career-trust, :is(.theme-career,.career-page) .career-light, :is(.theme-career,.career-page) .career-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-career,.career-page) :is(.career-hero-eyebrow, .career-hero-signs span, .career-post, .career-chip, .career-card, .career-fresh, .career-card-meta span, .career-wall-panel, .career-wall-title, .career-wall-row:hover, .career-perk, .career-trust, .career-light, .career-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- solve ---------- */ html[data-sl-dark] :is(.theme-solve,.solve-page) .solve-eyebrow, :is(.theme-solve,.solve-page) .solve-signs span, :is(.theme-solve,.solve-page) .solve-channel, :is(.theme-solve,.solve-page) .solve-card, :is(.theme-solve,.solve-page) .solve-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-solve,.solve-page) :is(.solve-eyebrow, .solve-signs span, .solve-channel, .solve-card, .solve-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- survey ---------- */ html[data-sl-dark] :is(.theme-survey,.survey-page) .survey-eyebrow, :is(.theme-survey,.survey-page) .survey-register, :is(.theme-survey,.survey-page) .survey-register:hover, :is(.theme-survey,.survey-page) .survey-order, :is(.theme-survey,.survey-page) .survey-order-act, :is(.theme-survey,.survey-page) .survey-stamp-open, :is(.theme-survey,.survey-page) .survey-stamp-closed, :is(.theme-survey,.survey-page) .survey-badge-open, :is(.theme-survey,.survey-page) .survey-badge-closed, :is(.theme-survey,.survey-page) .survey-subs, :is(.theme-survey,.survey-page) .survey-file-no, :is(.theme-survey,.survey-page) .survey-ticket-preview, :is(.theme-survey,.survey-page) .survey-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-survey,.survey-page) :is(.survey-eyebrow, .survey-register, .survey-register:hover, .survey-order, .survey-order-act, .survey-stamp-open, .survey-stamp-closed, .survey-badge-open, .survey-badge-closed, .survey-subs, .survey-file-no, .survey-ticket-preview, .survey-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- theater ---------- */ html[data-sl-dark] :is(.theme-theater,.theater-page) .theater-eyebrow, :is(.theme-theater,.theater-page) .theater-board-tag, :is(.theme-theater,.theater-page) .theater-board-tag:hover, :is(.theme-theater,.theater-page) .theater-card, :is(.theme-theater,.theater-page) .theater-kind, :is(.theme-theater,.theater-page) .theater-tag, :is(.theme-theater,.theater-page) .theater-lead-tag, :is(.theme-theater,.theater-page) .theater-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-theater,.theater-page) :is(.theater-eyebrow, .theater-board-tag, .theater-board-tag:hover, .theater-card, .theater-kind, .theater-tag, .theater-lead-tag, .theater-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- timeline ---------- */ html[data-sl-dark] :is(.theme-timeline,.tl-page) .tl-hero-eyebrow, :is(.theme-timeline,.tl-page) .tl-hero-timeline em, :is(.theme-timeline,.tl-page) .tl-quiet, :is(.theme-timeline,.tl-page) .tl-post, :is(.theme-timeline,.tl-page) .tl-post textarea, :is(.theme-timeline,.tl-page) .tl-panel, :is(.theme-timeline,.tl-page) .tl-item-body, :is(.theme-timeline,.tl-page) .tl-pin, :is(.theme-timeline,.tl-page) .tl-hot li, :is(.theme-timeline,.tl-page) .momo-empty, :is(.theme-timeline,.tl-page) .momo-like button { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-timeline,.tl-page) :is(.tl-hero-eyebrow, .tl-hero-timeline em, .tl-quiet, .tl-post, .tl-post textarea, .tl-panel, .tl-item-body, .tl-pin, .tl-hot li, .momo-empty, .momo-like button) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- ember ---------- */ html[data-sl-dark] :is(.theme-ember,.ember-page) .ember-hero-eyebrow, :is(.theme-ember,.ember-page) .ember-hot-flame, :is(.theme-ember,.ember-page) .ember-hot-flame-solved, :is(.theme-ember,.ember-page) .ember-hot-flame-hot, :is(.theme-ember,.ember-page) .ember-fire-card, :is(.theme-ember,.ember-page) .ember-badge-echo, :is(.theme-ember,.ember-page) .ember-badge-deep, :is(.theme-ember,.ember-page) .ember-thread, :is(.theme-ember,.ember-page) .ember-pin, :is(.theme-ember,.ember-page) .ember-empty, :is(.theme-ember,.ember-page) .ember-thread-score { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-ember,.ember-page) :is(.ember-hero-eyebrow, .ember-hot-flame, .ember-hot-flame-solved, .ember-hot-flame-hot, .ember-fire-card, .ember-badge-echo, .ember-badge-deep, .ember-thread, .ember-pin, .ember-empty, .ember-thread-score) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- lens ---------- */ html[data-sl-dark] :is(.theme-lens,.lens-page) .lens-eyebrow, :is(.theme-lens,.lens-page) .lens-search-field, :is(.theme-lens,.lens-page) .lens-group, :is(.theme-lens,.lens-page) .lens-group-title, :is(.theme-lens,.lens-page) .lens-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-lens,.lens-page) :is(.lens-eyebrow, .lens-search-field, .lens-group, .lens-group-title, .lens-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- desk ---------- */ html[data-sl-dark] :is(.theme-desk,.desk-page) .desk-eyebrow, :is(.theme-desk,.desk-page) .desk-slots span, :is(.theme-desk,.desk-page) .desk-post, :is(.theme-desk,.desk-page) .desk-shop, :is(.theme-desk,.desk-page) .desk-drawers span, :is(.theme-desk,.desk-page) .desk-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-desk,.desk-page) :is(.desk-eyebrow, .desk-slots span, .desk-post, .desk-shop, .desk-drawers span, .desk-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- frame ---------- */ html[data-sl-dark] :is(.theme-frame,.frame-page) .frame-label, :is(.theme-frame,.frame-page) .frame-rail, :is(.theme-frame,.frame-page) .frame-art, :is(.theme-frame,.frame-page) .frame-new, :is(.theme-frame,.frame-page) .frame-piece, :is(.theme-frame,.frame-page) .frame-new-badge, :is(.theme-frame,.frame-page) .frame-wall-detail, :is(.theme-frame,.frame-page) .frame-empty { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-frame,.frame-page) :is(.frame-label, .frame-rail, .frame-art, .frame-new, .frame-piece, .frame-new-badge, .frame-wall-detail, .frame-empty) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- extra ---------- */ html[data-sl-dark] :is(.theme-extra,.extra-page) .extra-eyebrow, :is(.theme-extra,.extra-page) .extra-flow span, :is(.theme-extra,.extra-page) .extra-clip, :is(.theme-extra,.extra-page) .extra-post, :is(.theme-extra,.extra-page) .extra-masthead, :is(.theme-extra,.extra-page) .extra-chip, :is(.theme-extra,.extra-page) .extra-post-login { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(.theme-extra,.extra-page) :is(.extra-eyebrow, .extra-flow span, .extra-clip, .extra-post, .extra-masthead, .extra-chip, .extra-post-login) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ---------- admin internal components ---------- */ html[data-sl-dark] body, .admin-side, .admin-brand-mark-img, .mod-tpl select, .admin-nav a:hover, .admin-nav a.active, .admin-nav .nav-acc > summary:hover, .admin-nav .nav-acc[open] > summary, .admin-nav .nav-sub a.active, .admin-top, .admin-top-acts .top-act:hover, .admin-top-acts .top-act.on, .admin-top-acts .top-logout:hover, .admin-menu-btn, .admin-menu-btn:active, .stat-card, .panel, .table th, .table tr:hover td, .admin-apps .apps-alert, .app-cell .app-icon, .admin-apps .app-state.on, .admin-apps .app-state.off, .admin-apps .app-trial.run, .admin-apps .app-trial.wait, .admin-apps .app-trial.pause, .admin-apps .app-trial.out, .admin-apps .app-trial.ok, .trial-float, .tf-fold, .tf-fold:hover, .tf-row, .admin-apps .app-card, .admin-apps .apps-tab, .admin-apps .apps-tab-count, .admin-apps .apps-tab.active .apps-tab-count, .badge-pub, .badge-draft, .badge-hidden, .badge-ghost, input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], select, textarea, /* 原生文件选择控件：套用与输入框一致的外观， 否则 Chrome / Edge 会退回系统默认的「选择文件」灰按钮（相册上传、LOGO 上传都受影响） */ input[type=file], .btn-primary, .btn-primary:hover, .btn-ghost, .btn-danger, .btn-danger:hover, .settings-tab, .settings-copy code, .tag, .tag-ok, .cl-tab, .cl-tab.is-on, .cache-fab, .ld-fact, .ld-card, .ld-card.is-over, .ld-ico, .ld-card code, .ld-tab, .ld-tab.is-on, .logo-preview, .settings-empty, .select-sm, .input-sm, .perm-chip, .update-copy code, .update-hint code, .update-empty, .alert-ok, .alert-err, .changelog-body .callout, 统一调用，只此一处定尺寸） */ .ver-tag, .changelog-body .tag, .changelog-toc a:hover, .pagination a, .pagination span, .pagination a:hover, .admin-mask.show, .changelog-toc a, .changelog-toc a.active, .changelog-toc .toc-2 a, .changelog-toc .toc-3 a, .echo-badge-hot, .echo-badge-cold, .echo-badge-fire, .echo-badge-echo, .echo-badge-deep, .job-status-pill, .job-status-pill.paused, .job-status-pill.filled, .shop-tag-ok, .shop-tag-low, .shop-tag-out, .tribe-mood-hot, .tribe-mood-quiet, .tribe-mood-pro, .tribe-mood-chill, .tribe-mood-brain, /* ============================================================ 动态 · 晴空瞬语（后台） 时刻标记 / 共鸣数小徽标（.moment-* 前缀，与前台同一套暖调视觉） ============================================================ */ .moment-when, .moment-like, .changelog-toc .toc-k-ny a:hover, .changelog-toc .toc-k-ann a:hover, .changelog-toc .toc-k-major a:hover, /* ============================================================ 后台右下角：发现新版本提醒（仅管理员可见） ============================================================ */ .admin-up-toast, .aut-dot, .upd-done .upd-ico, /* ============================================================ 自绘确认弹窗（替代浏览器原生 confirm） ============================================================ */ .cm-mask, .cm-dialog, .cm-preview, .cm-crop-mask, .cm-crop-dialog, .cm-crop-ratio, .cm-crop-close, .seo-check, .seo-check.ok, .seo-check.bad, .seo-code, .cm-table tr.is-pending, .stat-card.stat-alert { background: rgba(26,29,39,.92) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink-soft) !important; box-shadow: var(--shadow-sm) !important; } html[data-sl-dark] :is(body, .admin-side, .admin-brand-mark-img, .mod-tpl select, .admin-nav a:hover, .admin-nav a.active, .admin-nav .nav-acc > summary:hover, .admin-nav .nav-acc[open] > summary, .admin-nav .nav-sub a.active, .admin-top, .admin-top-acts .top-act:hover, .admin-top-acts .top-act.on, .admin-top-acts .top-logout:hover, .admin-menu-btn, .admin-menu-btn:active, .stat-card, .panel, .table th, .table tr:hover td, .admin-apps .apps-alert, .app-cell .app-icon, .admin-apps .app-state.on, .admin-apps .app-state.off, .admin-apps .app-trial.run, .admin-apps .app-trial.wait, .admin-apps .app-trial.pause, .admin-apps .app-trial.out, .admin-apps .app-trial.ok, .trial-float, .tf-fold, .tf-fold:hover, .tf-row, .admin-apps .app-card, .admin-apps .apps-tab, .admin-apps .apps-tab-count, .admin-apps .apps-tab.active .apps-tab-count, .badge-pub, .badge-draft, .badge-hidden, .badge-ghost, input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], select, textarea, /* 原生文件选择控件：套用与输入框一致的外观， 否则 Chrome / Edge 会退回系统默认的「选择文件」灰按钮（相册上传、LOGO 上传都受影响） */ input[type=file], .btn-primary, .btn-primary:hover, .btn-ghost, .btn-danger, .btn-danger:hover, .settings-tab, .settings-copy code, .tag, .tag-ok, .cl-tab, .cl-tab.is-on, .cache-fab, .ld-fact, .ld-card, .ld-card.is-over, .ld-ico, .ld-card code, .ld-tab, .ld-tab.is-on, .logo-preview, .settings-empty, .select-sm, .input-sm, .perm-chip, .update-copy code, .update-hint code, .update-empty, .alert-ok, .alert-err, .changelog-body .callout, 统一调用，只此一处定尺寸） */ .ver-tag, .changelog-body .tag, .changelog-toc a:hover, .pagination a, .pagination span, .pagination a:hover, .admin-mask.show, .changelog-toc a, .changelog-toc a.active, .changelog-toc .toc-2 a, .changelog-toc .toc-3 a, .echo-badge-hot, .echo-badge-cold, .echo-badge-fire, .echo-badge-echo, .echo-badge-deep, .job-status-pill, .job-status-pill.paused, .job-status-pill.filled, .shop-tag-ok, .shop-tag-low, .shop-tag-out, .tribe-mood-hot, .tribe-mood-quiet, .tribe-mood-pro, .tribe-mood-chill, .tribe-mood-brain, /* ============================================================ 动态 · 晴空瞬语（后台） 时刻标记 / 共鸣数小徽标（.moment-* 前缀，与前台同一套暖调视觉） ============================================================ */ .moment-when, .moment-like, .changelog-toc .toc-k-ny a:hover, .changelog-toc .toc-k-ann a:hover, .changelog-toc .toc-k-major a:hover, /* ============================================================ 后台右下角：发现新版本提醒（仅管理员可见） ============================================================ */ .admin-up-toast, .aut-dot, .upd-done .upd-ico, /* ============================================================ 自绘确认弹窗（替代浏览器原生 confirm） ============================================================ */ .cm-mask, .cm-dialog, .cm-preview, .cm-crop-mask, .cm-crop-dialog, .cm-crop-ratio, .cm-crop-close, .seo-check, .seo-check.ok, .seo-check.bad, .seo-code, .cm-table tr.is-pending, .stat-card.stat-alert) :where(p,h1,h2,h3,h4,h5,h6,span,a,li,label,td,th,div,strong,b,small,i,em) { color: inherit !important; } /* ============================================================ 22. 家园 homeland —— 自有 --hm-* token 深色重定义（P0） 根因：homeland.html 用独立 --hm-* 令牌，studiolight.css 原零覆盖， 开全局深色后家园仍为亮白页。此处重定义整套令牌为深色，组件自动转暗。 ============================================================ */ html[data-sl-dark] .homeland{ --hm-bg:#0e1117;--hm-card:#181d28;--hm-ink:#e7ecf5;--hm-soft:#aab3c5; --hm-line:#2a3140;--hm-brand:#5b9bff;--hm-deep:#7fb0ff;--hm-soft-bg:#1f2532;--hm-strong:#7fb0ff; --hm-accent:#f0b429;--hm-pop:#ff8a6a;--hm-sage:#6d9b74; --hm-wood:#9a6b42;--hm-wood-d:#6e5138;--hm-wood-l:#c79c6e;--hm-wood-x:#4f3a26; --hm-paper:#1a1f2b;--hm-paper-d:#222a38;--hm-paper-line:#2a3140; --hm-grass:#4e7a58;--hm-grass-d:#3a5d43; --hm-sky-1:#2c5a66;--hm-sky-2:#16242e;--hm-sky-3:#3a4a2e; --hm-tile:#1d424c;--hm-tile-d:#122c33;--hm-wall:#1a1f2b; --hm-sh1:0 1px 2px rgba(0,0,0,.40);--hm-sh2:0 4px 16px rgba(0,0,0,.50);--hm-sh3:0 12px 36px rgba(0,0,0,.55); } html[data-sl-dark] .homeland{ color: var(--ink); } /* 家园内若混用全局令牌落白底，统一翻浅 */ html[data-sl-dark] .homeland :where(h1,h2,h3,h4,h5,h6,p,span,a,li,label,td,th,div,strong,b,small){ color: inherit; } /* ============================================================ 23. 模板内联