@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; --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-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"] .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"] .message code { color: #f0a4a4; background-color: var(--zl-surface-soft); } html[data-zl-theme="dark"] .message pre { background-color: #16191e; border-color: var(--zl-border); } html[data-zl-theme="dark"] .message blockquote { color: var(--zl-text-sub); border-left-color: var(--zl-border); background-color: var(--zl-surface-soft); } /* 正文图片的浅灰边框在深底上太扎眼 */ html[data-zl-theme="dark"] .message img, html[data-zl-theme="dark"] .markdown img { border-color: var(--zl-border); } /* ---------- 图片灯箱 ---------- */ 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 { background-image: linear-gradient(150deg, #22364f, #1b2a3d); 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); } /* ---------- 侧栏登录引导卡 ---------- .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; } /* 投稿页的聚焦描边写死浅蓝，统一改为主色系的中间蓝 */ 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; }