@charset "UTF-8"; /* * z-dark.css * 蓝湾主题 · 暗色模式 * * 【实现思路】不重写一遍样式，而是把主题里反复出现的表面色 / 文字色 / 边框色 * 收敛成语义变量（--zl-*）：亮色模式的取值就是改造前的字面量（所以亮色外观 * 不变），暗色模式只重定义变量。这样卡片、面板、边框、状态标签会自动跟着变， * 不必逐条覆盖，也不会漏。 * * 变量分四组： * 表面 --zl-surface / --zl-surface-soft / --zl-primary-soft* / --zl-*-bg * 文字 --zl-text / --zl-text-sub* / --zl-text-muted* / --zl-text-faint* * 边框 --zl-border / --zl-border-soft * 杂项 --zl-switch-track* / --zl-mask / --zl-input-bg / --zl-yellow * * 品牌蓝 #0084ff 与语义色（成功绿 / 危险红 / 警告黄）保持不变： * 它们在深浅底上都有足够对比度，改了反而失去主题识别度。 * * 切换由 驱动，选择存 localStorage， * header.php 里有内联脚本在首屏渲染前套用，避免刷新时闪一下白底。 */ /* ---------- 亮色（默认，取值 = 改造前的字面量） ---------- */ :root { --zl-surface: #fff; --zl-surface-soft: #f2f5f9; --zl-primary-soft: #e8f3ff; --zl-primary-soft-2: #f2f8ff; --zl-primary-soft-3: #dfecfe; --zl-primary-soft-4: #6cb2ff; --zl-text: #2a2a2a; --zl-text-sub: #4a4a4a; --zl-text-sub-2: #4a5568; --zl-text-sub-3: #646464; --zl-text-muted: #8590a6; --zl-text-muted-2: #99a5b5; --zl-text-muted-3: #a2aab3; --zl-text-faint: #c0c4cc; --zl-text-faint-2: #cfd8e3; --zl-border: #e6e9ef; --zl-border-soft: #f2f4f6; --zl-warning-bg: #fff6e6; --zl-danger-bg: #fff5f6; --zl-danger-bg-2: #fdeeed; --zl-danger-bg-3: #fef3f3; --zl-success-bg: #e8f7f0; --zl-success-bg-2: #eaf9f0; --zl-top-flag-bg: #ffe1c0; --zl-top-flag-bg-2: #ffd3d3; --zl-hot-badge-bg: #ffedd5; --zl-new-badge-bg: #dcfce7; /* 悬赏问答：金币色（与积分语义绑定，区别于「热」徽章的橙红）。 gold-* 用于「进行中」，bounty-done-* 用于「已采纳」的青绿收尾色。 */ --zl-gold-fg: #b45309; --zl-gold-bg: #fef7e6; --zl-gold-border: #fde3a7; --zl-bounty-done-fg: #0f766e; --zl-bounty-done-bg: #e6fffa; --zl-bounty-done-border: #a7f3e4; /* 等级铭牌色阶：8 档循环使用，背景为淡彩、文字为同色系深色。 等级数超过 8 时对色阶取模（见 module.php 的 x_lanwan_level_badge）， 因此这里固定 8 组即可覆盖任意等级。 */ --zl-level-1-fg: #64748b; --zl-level-1-bg: #f1f5f9; --zl-level-2-fg: #0891b2; --zl-level-2-bg: #e0f2fe; --zl-level-3-fg: #16a34a; --zl-level-3-bg: #dcfce7; --zl-level-4-fg: #2563eb; --zl-level-4-bg: #dbeafe; --zl-level-5-fg: #7c3aed; --zl-level-5-bg: #ede9fe; --zl-level-6-fg: #db2777; --zl-level-6-bg: #fce7f3; --zl-level-7-fg: #ea580c; --zl-level-7-bg: #ffedd5; --zl-level-8-fg: #ca8a04; --zl-level-8-bg: #fef9c3; /* 侧栏标签云的 8 色循环前景色。 底色直接沿用上面等级铭牌那套淡彩（同一套 8 色相，就不重复定义）， 只有前景色单独加深：标签字号小到 10pt（≈13px）、且非加粗， 按正文标准需要 4.5:1，而铭牌那套 fg 实测只有 2.74~4.34:1， 直接用会看不清。这里取同色相里「刚好过 4.5:1」的一档， 既达标又尽量保留鲜艳度（实测值见每行末尾）。 */ --zl-tag-1-fg: #556275; /* 5.65:1 on #f1f5f9 */ --zl-tag-2-fg: #0e7490; /* 4.67:1 on #e0f2fe */ --zl-tag-3-fg: #15803d; /* 4.57:1 on #dcfce7 */ --zl-tag-4-fg: #1d4ed8; /* 5.49:1 on #dbeafe */ --zl-tag-5-fg: #7c3aed; /* 4.80:1 on #ede9fe */ --zl-tag-6-fg: #be185d; /* 5.14:1 on #fce7f3 */ --zl-tag-7-fg: #c2410c; /* 4.52:1 on #ffedd5 */ --zl-tag-8-fg: #a16207; /* 4.58:1 on #fef9c3 */ --zl-switch-track: #ccd4de; --zl-switch-track-2: #bec2cd; --zl-switch-track-3: #bcc6d2; --zl-mask: #ccc; --zl-input-bg: #f8f4f4; --zl-yellow: #fbbc05; /* 交互与阴影（仅本文件使用） */ --zl-hover: #f1f1f1; --zl-shadow: 0 1px 3px rgba(18, 18, 18, .06); --zl-shadow-btn: 0 0 10px rgba(26, 26, 26, .1); color-scheme: light; } /* ---------- 暗色 ---------- */ html[data-zl-theme="dark"] { /* 表面用带一点蓝的深灰而非纯黑：纯黑下卡片与页面背景分不出层次 */ --zl-surface: #1e2228; --zl-surface-soft: #14171c; --zl-primary-soft: #1b2a3d; --zl-primary-soft-2: #1e3049; --zl-primary-soft-3: #22364f; --zl-primary-soft-4: #3d6fa8; --zl-text: #e6e8eb; --zl-text-sub: #b8bec7; --zl-text-sub-2: #a8b0ba; --zl-text-sub-3: #9aa2ac; --zl-text-muted: #8a93a0; --zl-text-muted-2: #7d8794; --zl-text-muted-3: #767f8b; --zl-text-faint: #5f6875; --zl-text-faint-2: #545c68; --zl-border: #2c313a; --zl-border-soft: #262b33; /* 状态底：亮色是淡彩，暗色改为同色系的深彩，保持「底色 + 深字」的观感 */ --zl-warning-bg: #3a2f1c; --zl-danger-bg: #3a2426; --zl-danger-bg-2: #3a2426; --zl-danger-bg-3: #3a2426; --zl-success-bg: #1b3329; --zl-success-bg-2: #1b3329; --zl-top-flag-bg: #4a3520; --zl-top-flag-bg-2: #4a2a2c; --zl-hot-badge-bg: #4a3520; --zl-new-badge-bg: #1b3329; /* 悬赏问答：深底上提亮文字、压暗底色，保持「金」的观感 */ --zl-gold-fg: #fbbf24; --zl-gold-bg: #33280f; --zl-gold-border: #5c4715; --zl-bounty-done-fg: #5eead4; --zl-bounty-done-bg: #12312c; --zl-bounty-done-border: #1e5148; /* 等级铭牌色阶：深底上改用低饱和深彩底 + 提亮文字， 保持与亮色相同的「同色系」观感，且文字在深底上足够清晰 */ --zl-level-1-fg: #a8b3c2; --zl-level-1-bg: #2a313b; --zl-level-2-fg: #4cc9e8; --zl-level-2-bg: #16333d; --zl-level-3-fg: #4ade80; --zl-level-3-bg: #16342a; --zl-level-4-fg: #6ea8fe; --zl-level-4-bg: #1a2c47; --zl-level-5-fg: #b197fc; --zl-level-5-bg: #2a2340; --zl-level-6-fg: #f472b6; --zl-level-6-bg: #3a1f30; --zl-level-7-fg: #fb923c; --zl-level-7-bg: #3a2a1a; --zl-level-8-fg: #facc15; --zl-level-8-bg: #38320f; /* 侧栏标签云：深底上铭牌那套 fg 实测 5.59~8.41:1，本就够清晰， 直接沿用，无需像亮色那样另调一档。这里显式映射一次， 让标签的选择器在两种模式下写法一致（都只认 --zl-tag-N-fg）。 */ --zl-tag-1-fg: var(--zl-level-1-fg); --zl-tag-2-fg: var(--zl-level-2-fg); --zl-tag-3-fg: var(--zl-level-3-fg); --zl-tag-4-fg: var(--zl-level-4-fg); --zl-tag-5-fg: var(--zl-level-5-fg); --zl-tag-6-fg: var(--zl-level-6-fg); --zl-tag-7-fg: var(--zl-level-7-fg); --zl-tag-8-fg: var(--zl-level-8-fg); --zl-switch-track: #3a414b; --zl-switch-track-2: #454d59; --zl-switch-track-3: #454d59; --zl-mask: #3a414b; --zl-input-bg: #1a1e24; --zl-yellow: #fbbc05; --zl-hover: #262b33; /* 阴影在深底上要更重才看得出层级 */ --zl-shadow: 0 1px 3px rgba(0, 0, 0, .4); --zl-shadow-btn: 0 0 10px rgba(0, 0, 0, .5); /* 主题原有的两个旧变量（x_lanwan.css 的 :root 里定义）： --white 被用在头部与面包屑背景、--dark 被用在约 30 处文字色。 它们写死 #fff / #000，不翻转的话暗色下头部仍是白底、 正文与侧栏文字仍是黑的（在深底上看不清）。 */ --white: #1e2228; --dark: #e6e8eb; color-scheme: dark; } /* ========================================================= * 暗色补充修正 * * 变量替换已覆盖大部分区域；下面这些是写死的浅色或第三方 * 样式（bootstrap / emlog 核心 / 主题自带），需要单独处理。 * ========================================================= */ /* ---------- 页面底色与文字 ---------- */ html[data-zl-theme="dark"] body { background: var(--zl-surface-soft); color: var(--zl-text); } /* 主题里 a 的默认色是 var(--dark)=#000，暗色下会看不见 */ html[data-zl-theme="dark"] a { color: var(--zl-text); } html[data-zl-theme="dark"] a:hover { color: #0084ff; } /* ---------- 卡片与面板 ---------- */ /* bootstrap-bbs.css 给 .card 写死了浅灰底与渐变表头，暗色下要压掉 */ html[data-zl-theme="dark"] .card { background: var(--zl-surface); color: var(--zl-text); box-shadow: var(--zl-shadow); } html[data-zl-theme="dark"] .card > .card-header { color: var(--zl-text-sub); border-bottom-color: var(--zl-border); background-image: none; background-color: var(--zl-surface-soft); } html[data-zl-theme="dark"] .card-header-tabs > .nav-item > .nav-link.active { background-image: none; background-color: var(--zl-surface); border-color: var(--zl-border); } html[data-zl-theme="dark"] .card-header-tabs > .nav-item > .nav-link:hover:not(.active) { border-color: var(--zl-border); } html[data-zl-theme="dark"] .card-header-dropdown .dropdown .dropdown-toggle { color: var(--zl-text-sub); } /* ---------- 列表与分隔线 ---------- */ html[data-zl-theme="dark"] .thread, html[data-zl-theme="dark"] .post { border-bottom-color: var(--zl-border-soft); } html[data-zl-theme="dark"] .threadlist .thread { border-bottom-color: var(--zl-border-soft); } /* bootstrap-bbs 的 .thread:hover 写死 white，暗色下没有悬停反馈 */ html[data-zl-theme="dark"] .thread:hover, html[data-zl-theme="dark"] .threadItem:hover { background-color: var(--zl-hover); } html[data-zl-theme="dark"] hr { border-top-color: var(--zl-border); } /* ---------- 面包屑 ---------- */ html[data-zl-theme="dark"] .breadcrumb { background-color: var(--zl-surface) !important; border-color: var(--zl-border); box-shadow: none; } html[data-zl-theme="dark"] .breadcrumb:hover { background-color: var(--zl-surface) !important; } html[data-zl-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--zl-text-faint); } /* ---------- 顶部导航（本身深色，暗色下压得更深） ---------- */ html[data-zl-theme="dark"] #header { background-color: #12151a; } html[data-zl-theme="dark"] #nav_pc_2 { background: #1a1e24; } /* ---------- 表单控件 ---------- */ html[data-zl-theme="dark"] .form-control { color: var(--zl-text); background-color: var(--zl-surface-soft); border-color: var(--zl-border); } html[data-zl-theme="dark"] .form-control:focus { color: var(--zl-text); background-color: var(--zl-surface-soft); border-color: #0084ff; box-shadow: 0 0 0 .2rem rgba(0, 132, 255, .25); } html[data-zl-theme="dark"] .form-control::placeholder { color: var(--zl-text-faint); } html[data-zl-theme="dark"] .form-control:disabled, html[data-zl-theme="dark"] .form-control[readonly] { background-color: var(--zl-hover); color: var(--zl-text-muted); } html[data-zl-theme="dark"] .input-group-text { color: var(--zl-text-sub); background-color: var(--zl-surface-soft); border-color: var(--zl-border); } html[data-zl-theme="dark"] .custom-select, html[data-zl-theme="dark"] select.form-control, html[data-zl-theme="dark"] textarea.form-control { color: var(--zl-text); background-color: var(--zl-surface-soft); border-color: var(--zl-border); } /* 下拉选项在部分浏览器里由系统绘制，显式指定深底浅字 */ html[data-zl-theme="dark"] select.form-control option, html[data-zl-theme="dark"] .custom-select option { background-color: var(--zl-surface); color: var(--zl-text); } /* ---------- 按钮 ---------- */ html[data-zl-theme="dark"] .btn-light { color: var(--zl-text); background-color: var(--zl-hover); border-color: var(--zl-border); } html[data-zl-theme="dark"] .btn-light:hover { background-color: var(--zl-border); color: var(--zl-text); } html[data-zl-theme="dark"] .btn-secondary { background-color: #3a414b; border-color: #3a414b; color: #e6e8eb; } html[data-zl-theme="dark"] .btn-secondary:hover { background-color: #464e5a; border-color: #464e5a; } html[data-zl-theme="dark"] .btn-outline-secondary { color: var(--zl-text-sub); border-color: var(--zl-border); } html[data-zl-theme="dark"] .btn-outline-secondary:hover { color: #fff; background-color: #3a414b; border-color: #3a414b; } html[data-zl-theme="dark"] .btn-link { color: #4da3ff; } html[data-zl-theme="dark"] .btn-link:hover { color: #7bbaff; } /* ---------- 表格 ---------- */ html[data-zl-theme="dark"] .table { color: var(--zl-text); } html[data-zl-theme="dark"] .table th, html[data-zl-theme="dark"] .table td, html[data-zl-theme="dark"] .table thead th { border-color: var(--zl-border); } html[data-zl-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } html[data-zl-theme="dark"] .table-hover tbody tr:hover { background-color: var(--zl-hover); color: var(--zl-text); } /* 正文表格暗色模式适配 */ html[data-zl-theme="dark"] .table-scroll { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); background-color: var(--zl-surface); } html[data-zl-theme="dark"] .table-scroll::-webkit-scrollbar-track { background: var(--zl-surface-soft); } html[data-zl-theme="dark"] .table-scroll::-webkit-scrollbar-thumb { background: var(--zl-border); } html[data-zl-theme="dark"] .zpost-body table tbody tr:nth-child(even) td, html[data-zl-theme="dark"] .message table tbody tr:nth-child(even) td, html[data-zl-theme="dark"] .zpost-body table tr:nth-child(even) td, html[data-zl-theme="dark"] .message table tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.025); } html[data-zl-theme="dark"] .zpost-body table tbody tr:hover td, html[data-zl-theme="dark"] .message table tbody tr:hover td, html[data-zl-theme="dark"] .zpost-body table tr:hover td, html[data-zl-theme="dark"] .message table tr:hover td { background-color: var(--zl-primary-soft) !important; } html[data-zl-theme="dark"] .zpost-body table code, html[data-zl-theme="dark"] .message table code { background: var(--zl-primary-soft); color: #6cb2ff; border-color: rgba(108, 178, 255, 0.2); } /* ---------- 弹窗 ---------- */ html[data-zl-theme="dark"] .modal-content { background-color: var(--zl-surface); color: var(--zl-text); } html[data-zl-theme="dark"] .modal-header, html[data-zl-theme="dark"] .modal-footer { border-color: var(--zl-border); } html[data-zl-theme="dark"] .close { color: var(--zl-text); text-shadow: none; opacity: .7; } html[data-zl-theme="dark"] .close:hover { opacity: 1; } /* ---------- 下拉菜单 ---------- */ html[data-zl-theme="dark"] .dropdown-menu { background-color: var(--zl-surface); border-color: var(--zl-border); } html[data-zl-theme="dark"] .dropdown-item { color: var(--zl-text-sub); } html[data-zl-theme="dark"] .dropdown-item:hover, html[data-zl-theme="dark"] .dropdown-item:focus { color: var(--zl-text); background-color: var(--zl-hover); } html[data-zl-theme="dark"] .dropdown-divider { border-top-color: var(--zl-border); } /* 顶部用户下拉：主题自绘的菜单 */ html[data-zl-theme="dark"] .header-dropdown .my_option { background: var(--zl-surface); border-color: var(--zl-border); } html[data-zl-theme="dark"] .header-dropdown .my_option ul li a { color: var(--zl-text-sub); } html[data-zl-theme="dark"] .header-dropdown .my_option ul li a:hover { color: var(--zl-text); background: var(--zl-hover); } /* ---------- 评论与引用 ---------- */ html[data-zl-theme="dark"] .blockquote, html[data-zl-theme="dark"] li.quote { background-color: var(--zl-surface-soft); color: var(--zl-text-sub); } /* 引用动画的收尾色要跟着页面底色，否则会闪一下浅色 */ @keyframes zl_quote_animation_dark { from { background-color: #177f2e; } to { background-color: #14171c; } } html[data-zl-theme="dark"] li.quote { animation: zl_quote_animation_dark 1s; -moz-animation: zl_quote_animation_dark 1s; -webkit-animation: zl_quote_animation_dark 1s; -o-animation: zl_quote_animation_dark 1s; } /* ---------- 正文各标签暗色模式适配 ---------- */ html[data-zl-theme="dark"] .zpost-body code, html[data-zl-theme="dark"] .message code { color: #6cb2ff; background-color: rgba(61, 155, 255, 0.12); border-color: rgba(108, 178, 255, 0.22); } /* 暗黑模式代码块增强 */ html[data-zl-theme="dark"] .zcode-block { background-color: #16191e; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } html[data-zl-theme="dark"] .zcode-header { background: rgba(0, 0, 0, 0.35); border-bottom-color: rgba(255, 255, 255, 0.05); } html[data-zl-theme="dark"] .zcode-lang { color: #6c7380; } html[data-zl-theme="dark"] .zcode-copy-btn { color: #8b949e; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } html[data-zl-theme="dark"] .zcode-copy-btn:hover { color: #f0f6fc; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); } html[data-zl-theme="dark"] .zpost-body pre, html[data-zl-theme="dark"] .message pre { background-color: #16191e; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } html[data-zl-theme="dark"] .zcode-block pre, html[data-zl-theme="dark"] .zcode-block .message pre, html[data-zl-theme="dark"] .zcode-block .zpost-body pre { background: transparent; border: none; box-shadow: none; } html[data-zl-theme="dark"] .zpost-body blockquote, html[data-zl-theme="dark"] .message blockquote { color: var(--zl-text-sub); border-left-color: #0084ff; background-color: var(--zl-surface-soft); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } html[data-zl-theme="dark"] .zpost-body a, html[data-zl-theme="dark"] .message a { color: #58a6ff; border-bottom-color: rgba(88, 166, 255, 0.4); } html[data-zl-theme="dark"] .zpost-body a:hover, html[data-zl-theme="dark"] .message a:hover { color: #79b8ff; border-bottom-color: #79b8ff; background-color: rgba(88, 166, 255, 0.12); } html[data-zl-theme="dark"] .zpost-body kbd, html[data-zl-theme="dark"] .message kbd { color: var(--zl-text); background-color: #242930; border-color: #3b4250; border-bottom-color: #4f5869; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } html[data-zl-theme="dark"] .zpost-body mark, html[data-zl-theme="dark"] .message mark { background: #5c4308; color: #ffd666; } html[data-zl-theme="dark"] .zpost-body details, html[data-zl-theme="dark"] .message details { border-color: var(--zl-border); background: var(--zl-surface); } html[data-zl-theme="dark"] .zpost-body details summary, html[data-zl-theme="dark"] .message details summary { background: var(--zl-surface-soft); color: var(--zl-text); } html[data-zl-theme="dark"] .zpost-body details summary:hover, html[data-zl-theme="dark"] .message details summary:hover { background: var(--zl-primary-soft); color: #6cb2ff; } html[data-zl-theme="dark"] .zpost-body img, html[data-zl-theme="dark"] .message img, html[data-zl-theme="dark"] .markdown img { border-color: var(--zl-border); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); } html[data-zl-theme="dark"] .zpost-body hr, html[data-zl-theme="dark"] .message hr { background: linear-gradient(to right, transparent, var(--zl-border), transparent); } /* ---------- 图片灯箱 ---------- */ html[data-zl-theme="dark"] #zlightbox { background: rgba(0, 0, 0, .85); } /* ---------- 工具栏按钮 ---------- */ html[data-zl-theme="dark"] .side-btn { background: var(--zl-surface); color: var(--zl-text-muted); box-shadow: var(--zl-shadow-btn); } html[data-zl-theme="dark"] .side-btn:hover { color: #0084ff; } /* ---------- 滚动条（WebKit） ---------- 尺寸必须与亮色（x_lanwan.css 里的 6px）一致：宽度不同的话， 切换瞬间滚动条变宽/变窄会把整个页面布局挤动一下。 */ html[data-zl-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } html[data-zl-theme="dark"] ::-webkit-scrollbar-track { background: var(--zl-surface-soft); } html[data-zl-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a414b; border-radius: 5px; } html[data-zl-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a525f; } /* ---------- 原生控件与选中文字 ---------- */ html[data-zl-theme="dark"] input[type="checkbox"], html[data-zl-theme="dark"] input[type="radio"] { accent-color: #0084ff; } html[data-zl-theme="dark"] ::selection { background: #2b5f9e; color: #fff; } /* ---------- 零星硬编码的深色文字 ---------- 这些选择器在主题里写死了深色（多为 #333~#777 一类的灰黑）， 暗色下会糊在深底上看不见。亮色保持原样，这里只做暗色覆盖。 */ /* 顶部二级导航（本身是深色条）的悬停色 */ html[data-zl-theme="dark"] #nav_pc_2 a:hover { color: #fff; } /* 侧栏 / 用户面板里的小字 */ html[data-zl-theme="dark"] .list-group-item.active { color: var(--zl-text-sub); } html[data-zl-theme="dark"] .user-panel-info p, html[data-zl-theme="dark"] .user-sidebar-info p { color: var(--zl-text-muted); } html[data-zl-theme="dark"] .yide_apg_text, html[data-zl-theme="dark"] .yide_apg_text h2 { color: var(--zl-text-sub); } html[data-zl-theme="dark"] .NewGlobalWrite-answerLater { border-right-color: var(--zl-border); } /* 页脚 */ html[data-zl-theme="dark"] footer a:hover { color: var(--zl-text-muted) !important; } /* ---------- 侧栏头图渐变（关于作者 / 个人资料） ---------- 亮色是浅蓝→白的渐变打底，暗色换成同款节奏的深蓝渐变， 否则卡片上半截是一大块亮色。头像的白描边同步改为卡片底色， 深底上白圈会格外突兀。 */ html[data-zl-theme="dark"] .zauthor-hero, html[data-zl-theme="dark"] .blogger-hero { background-image: linear-gradient(165deg, #24384f 0%, #1d2c3f 55%, #1a2431 100%); } html[data-zl-theme="dark"] .zauthor-avatar img, html[data-zl-theme="dark"] .blogger-avatar img { border-color: var(--zl-surface); } /* ---------- 无封面占位底（侧栏热门文章 / 相关推荐） ---------- */ html[data-zl-theme="dark"] .zhot-cover, html[data-zl-theme="dark"] .zrel-cover.is-empty { background-image: linear-gradient(135deg, #26303c, #1c232c); color: #5d6a79; } /* ---------- 图标底（列表页信息头 / 首页快捷入口） ---------- 底色改深后图标主色 #0084ff 对比不足，提到亮一档的蓝。 */ html[data-zl-theme="dark"] .zhint-icon, html[data-zl-theme="dark"] .zquick-icon, html[data-zl-theme="dark"] .ztl-guest-icon { background-image: linear-gradient(150deg, #22364f, #1b2a3d); color: #4da3ff; } /* ---------- 微语时间轴 ---------- 发布框输入区、时间轴连接线与内容卡在暗色下都已走语义变量； 这里只补两处需要额外调整的： 1) 输入区和卡片同色时聚焦看不出变化，暗色下改用更浅一档的表面色； 2) 输入区聚焦描边用亮一档的蓝，与图标底保持一致。 */ html[data-zl-theme="dark"] .ztl-compose-input { background: var(--zl-surface-soft); } html[data-zl-theme="dark"] .ztl-compose-input:focus { border-color: #4da3ff; background: var(--zl-surface); } /* :not(.is-open) 排除展开态：展开时按钮是蓝底白字， 若这里再覆盖文字色会变成蓝底蓝字，对比度不足。 */ html[data-zl-theme="dark"] .ztl-tool:not(.is-open) { color: #4da3ff; } /* ---------- 游客投稿说明条 ---------- */ html[data-zl-theme="dark"] .zwrite-guest-head { background: linear-gradient(135deg, #22364f, #1b2a3d); border-color: #2f4a6b; } html[data-zl-theme="dark"] .zwrite-guest-title { color: #9fc3f0; } /* ---------- 隐藏内容锁定框 ---------- */ html[data-zl-theme="dark"] .zhide { border-color: #35507a; background: linear-gradient(135deg, #1b2a3d, #1e2228); } /* 暗色下正文链接的悬停规则是 html[data-zl-theme="dark"] .zpost-body a:hover (0,3,2)， 比 emlog-bridge.css 里 .zhide .zhide-btn:hover (0,3,0) 高，会把按钮悬停的 深蓝底换成链接的浅蓝半透明底 —— 按钮看着「没反应」。这里补一条同前缀的规则 压回去，与 emlog-bridge.css 的 .zhide-btn 保持同一套悬停配色。 */ html[data-zl-theme="dark"] .zhide .zhide-btn:hover, html[data-zl-theme="dark"] .zhide-btn:hover { background: #0068cc; color: #fff; border-bottom: 0; } /* ---------- 侧栏登录引导卡 ---------- .css-jgg5hn 写死白底、子元素写死深灰字，暗色下是一块白底黑字。 「注册」按钮的浅灰底已从 module.php 的内联样式挪进 x_lanwan.css， 这里由下方 .btn-light 的通用覆盖接管。 */ html[data-zl-theme="dark"] .css-jgg5hn { background: var(--zl-surface-soft); } html[data-zl-theme="dark"] .css-1jwmvwg { color: var(--zl-text); } html[data-zl-theme="dark"] .css-11camqh { color: var(--zl-text-muted); } /* ---------- 正文链接 ---------- #175199 / #1f4977 是按白底配的深蓝，深底上几乎看不清。 */ html[data-zl-theme="dark"] .message a, html[data-zl-theme="dark"] .card.card-thread .message a { color: #7bbaff; text-decoration-color: rgba(123, 186, 255, .4); } html[data-zl-theme="dark"] .message a:hover, html[data-zl-theme="dark"] .card.card-thread .message a:hover { color: #a8d4ff; } /* ---------- 写死的浅色边框 ---------- 这些边框色按白底配，深底上是一条条亮线，压到 --zl-border 系。 */ html[data-zl-theme="dark"] .captcha-container input, html[data-zl-theme="dark"] .ztag, html[data-zl-theme="dark"] .ztag-suggest, html[data-zl-theme="dark"] .zwrite-side-body .form-control, html[data-zl-theme="dark"] .zwrite-side-body .ztag, html[data-zl-theme="dark"] .zvote-btn, html[data-zl-theme="dark"] .zcover-pick, html[data-zl-theme="dark"] .zwrite-main .tox-tinymce { border-color: var(--zl-border); } html[data-zl-theme="dark"] .zsign-recent li, html[data-zl-theme="dark"] .zsign-rank li { border-bottom-color: var(--zl-border-soft); } html[data-zl-theme="dark"] footer .left ul { border-top-color: var(--zl-border); } html[data-zl-theme="dark"] .znotice { border-top-color: var(--zl-border-soft); } html[data-zl-theme="dark"] .loglist-sort a { border-color: rgba(0, 132, 255, .4); } html[data-zl-theme="dark"] .zwrite-title { border-left-color: #35507a; } /* 投稿页工具栏里插件面板内部的文字链接：悬停色 #0068cc 是按白底选的， 深底上偏暗发灰，提到与主题其它深色链接一致的亮蓝。 只针对面板内的链接 —— 工具栏直接子级（主题按钮与插件胶囊标签）走的是 胶囊配色，悬停转品牌蓝，不该被这条改掉。 */ html[data-zl-theme="dark"] .zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn):hover, html[data-zl-theme="dark"] .zwrite-bar > form:not(.modal) a:not(.zwrite-bar-btn):hover { color: #a8d4ff; } /* 投稿页的聚焦描边写死浅蓝，统一改为主色系的中间蓝 */ html[data-zl-theme="dark"] .zwrite .form-control:not(.zwrite-title):not(.zwrite-content):focus, html[data-zl-theme="dark"] .ztag:focus-within, html[data-zl-theme="dark"] .zwrite-side-body .form-control:focus, html[data-zl-theme="dark"] .zwrite-side-body select.form-control:focus, html[data-zl-theme="dark"] .zwrite-side-body textarea.form-control:focus { border-color: #2f6bb0; } /* ---------- 消息角标的白圈 ---------- box-shadow 用来在列表底色上挖出一圈底色，亮色是白、暗色跟卡片底。 */ html[data-zl-theme="dark"] .znav-msg-dot { box-shadow: 0 0 0 2px var(--zl-surface); } /* ---------- 登录弹窗的提示条 ---------- bootstrap 的 alert 写死浅粉 / 浅绿底 + 深字，深底上是一块亮色。 */ html[data-zl-theme="dark"] .alert-danger { color: #f2b8bd; background-color: #3a2426; border-color: #5a3438; } html[data-zl-theme="dark"] .alert-success { color: #98e0bd; background-color: #1b3329; border-color: #2f5a45; } /* ---------- 暗色切换的圆形揭示动画 ---------- 切换走 document.startViewTransition()：浏览器默认的整页交叉淡入 要关掉——old 快照铺底保持不动，new 快照被裁成从切换按钮处逐渐 扩大的圆（圆心/半径由 x_lanwan-emlog.js 写进 --zl-anim-* 变量， 从右下角扫向左上角）。动画声明在 CSS 上，随伪元素树同帧生效； 如果放在 JS 的 ready 回调里再挂，那个空档里 new 快照会整页 裸露一帧再缩回圆心，正是切换闪屏的来源之一。 */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html[data-zl-anim]::view-transition-new(root) { animation: zl-theme-reveal 550ms ease-in-out; } @keyframes zl-theme-reveal { from { clip-path: circle(0 at var(--zl-anim-x, 100vw) var(--zl-anim-y, 100vh)); } to { clip-path: circle(var(--zl-anim-r, 150vmax) at var(--zl-anim-x, 100vw) var(--zl-anim-y, 100vh)); } } /* 切换瞬间全局禁用颜色过渡：主题里链接/卡片/按钮普遍带 .15s~.5s 的 transition，主题属性翻转后这些过渡才刚起步， 「新快照」截到的还是旧颜色——圆形揭开时露出错色，过渡结束后 整页再跳一次色（表现为闪屏）。切换期间统一关掉。 */ html.zl-switching *, html.zl-switching *::before, html.zl-switching *::after { transition: none !important; } /* ---------- 切换按钮的图标 ---------- */ /* 亮色显示月亮（点它切到暗色），暗色显示太阳 */ .zl-theme-btn .zl-icon-sun { display: none; } html[data-zl-theme="dark"] .zl-theme-btn .zl-icon-moon { display: none; } html[data-zl-theme="dark"] .zl-theme-btn .zl-icon-sun { display: block; } /* ---------- 暗黑模式：悬赏问答归档页（page_bounty.php）适配 ---------- */ html[data-zl-theme="dark"] .zbq-hero { background: linear-gradient(135deg, #1c1f26 0%, #262116 100%); border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } html[data-zl-theme="dark"] .zbq-hero-stat-card { background: rgba(30, 34, 42, 0.85); border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } html[data-zl-theme="dark"] .zbq-item { background: var(--zl-surface); border-color: var(--zl-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } html[data-zl-theme="dark"] .zbq-item:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html[data-zl-theme="dark"] .zbq-a { background: rgba(245, 158, 11, 0.05); border-left-color: #10b981; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } html[data-zl-theme="dark"] .zbq-meta-link { background: rgba(0, 132, 255, 0.15); color: #58a6ff; } html[data-zl-theme="dark"] .zbq-meta-link:hover { background: #0084ff; color: #ffffff; } html[data-zl-theme="dark"] .zbq-empty-icon { background: #2b2313; border-color: #4a3a1b; } /* 暗黑模式图片懒加载占位 */ html[data-zl-theme="dark"] img.zlazy { background-color: #1a1e24; } html[data-zl-theme="dark"] img.zlazy.zlazy-error { background-color: #1e2229; border: 1px solid var(--zl-border); }