/* ============================================================================= Modown 夜间模式统一美化 — dark-mode.css v1.0.0 工作原理：模版兔主题在用户开启夜间模式时向追加 .night 类，本文件所有规则均以 body.night 作为父选择器，确保在白天模式下完全不影响原始样式。覆盖范围： 1. MoPlay 游戏悬浮预览 2. Modown 随机游戏推荐 3. 游戏日历 + 排行榜 Widget ============================================================================= */ /* ============================================================================= * 0. 全局 CSS 自定义属性（夜间调色板） * 与 Modown 主题 body.night 的颜色体系对齐 * ============================================================================= */ body.night { --mdbt-bg-0: #0d0d0d; /* 最深背景（Modal 遮罩内层等） */ --mdbt-bg-1: #121212; /* 页面基础背景（与主题一致） */ --mdbt-bg-2: #1a1a1a; /* 卡片/容器背景 */ --mdbt-bg-3: #232323; /* 次级容器背景（与主题 header 一致） */ --mdbt-bg-4: #2a2a2a; /* hover / 高亮背景 */ --mdbt-bg-5: #323232; /* 最浅深色背景（输入框、代码块） */ --mdbt-border: #383838; /* 边框颜色 */ --mdbt-border-sub: #2e2e2e; /* 次级边框 */ --mdbt-text: #cccccc; /* 主文字 */ --mdbt-text-sub: #999999; /* 次级文字 */ --mdbt-text-muted: #666666; /* 暗淡文字 */ --mdbt-shadow: rgba(0, 0, 0, 0.6); /* 阴影 */ } /* ============================================================================= * 2. MoPlay 游戏悬浮预览 — 夜间适配 * 只需覆盖白色背景 + 浅色文字即可 * ============================================================================= */ /* ── 全局：移除面板顶部分割线（日间/夜间通用） ── */ .moplay-desc-panel { border-top: 0px solid rgba(0, 0, 0, 0.06); } /* ── 简介展开面板 ── */ body.night .moplay-desc-panel { background-color: #181818 !important; border-top-color: rgba(255, 255, 255, 0.07) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } /* ── 简介文字 ── */ body.night .moplay-desc-text { color: #aaaaaa !important; } /* ── 收藏 / 点赞操作行 ── */ body.night .moplay-actions { border-top-color: rgba(255, 255, 255, 0.07) !important; } body.night .moplay-actions a { color: #666 !important; } body.night .moplay-actions a:hover, body.night .moplay-actions a.active { color: var(--theme-color, #e54d42) !important; } /* ── 视频覆盖层在夜间模式下增强遮挡感 ── */ body.night .moplay-video-layer { background-color: #000 !important; } /* ============================================================================= * 3. Modown 随机游戏推荐 — 夜间适配 * 覆盖白色区块背景、灰色文字、Modal 白底 * ============================================================================= */ /* ── 整体区块 ── */ body.night .modown-roll-game { background-color: var(--mdbt-bg-2) !important; color: var(--mdbt-text) !important; border-bottom-color: var(--mdbt-border) !important; } /* ── 姓名输入行标签文字 ── */ body.night .roll-input-wrap label { color: rgba(255, 255, 255, 0.6) !important; } /* ── 文字输入框 ── */ body.night .roll-input-wrap input[type="text"] { background-color: var(--mdbt-bg-4) !important; border-color: #444 !important; color: #cccccc !important; } body.night .roll-input-wrap input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.25) !important; } body.night .roll-input-wrap input[type="text"]:focus { background-color: var(--mdbt-bg-5) !important; border-color: #666 !important; } /* ── 提示文字 ── */ body.night .roll-hint, body.night #roll-hint-text { color: rgba(255, 255, 255, 0.38) !important; } /* ── 加载指示器文字 ── */ body.night .roll-loading > span { color: rgba(255, 255, 255, 0.38) !important; } /* ── 占位文字 ── */ body.night .roll-placeholder-text { color: rgba(255, 255, 255, 0.35) !important; } /* ── "再来一次"按钮（灰色按钮在夜间模式下对比度不足） ── */ body.night .roll-modal-actions .btn-again { background-color: #3a3a3a !important; color: #cccccc !important; } body.night .roll-modal-actions .btn-again:hover { background-color: #484848 !important; } /* ── 结果弹窗 ── */ body.night .roll-modal { background-color: var(--mdbt-bg-2) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75) !important; } /* ── 弹窗顶部 Banner（保留红色渐变，不做修改，但可微调透明度） ── */ body.night .roll-modal-header-banner { /* 已有深色渐变，夜间模式下保持一致 */ } /* ── 弹窗主体内容 ── */ body.night .roll-modal-body { color: var(--mdbt-text) !important; } /* ── 弹窗游戏标题 ── */ body.night .roll-modal-title, body.night #roll-modal-game-title { color: #e0e0e0 !important; } /* ── 弹窗推荐文案文字 ── */ body.night .roll-modal-recommend-text { color: rgba(255, 255, 255, 0.88) !important; } /* ── 弹窗内各段落 ── */ body.night .roll-modal-body p, body.night .roll-modal-body span:not(.roll-modal-trophy) { color: var(--mdbt-text-sub) !important; } /* ── 弹窗关闭按钮 ── */ body.night .roll-modal-close { background-color: rgba(255, 255, 255, 0.15) !important; color: #ddd !important; } body.night .roll-modal-close:hover { background-color: rgba(255, 255, 255, 0.28) !important; } /* ============================================================================= * 4. 游戏日历 + 每日排行榜 Widget — 夜间适配 * 类名前缀：.mgc-（日历）/ .mgr-（排行榜） * ============================================================================= */ /* ── 卡片容器背景 ── */ body.night .mgc-card { background: #181818 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; } /* ── 标题栏底部分割线 ── */ body.night .mgc-head { border-bottom-color: var(--mdbt-border) !important; } /* ── 标题文字 ── */ body.night .mgc-head-left strong { color: #999 !important; } /* ── 月份标签文字 ── */ body.night .mgc-ml { color: #999 !important; } /* ── 月份切换按钮 ── */ body.night .mgc-nb { background: #181818 !important; color: #999 !important; border: 1px solid var(--mdbt-border) !important; } body.night .mgc-nb:hover { background: #e5312b !important; color: #fff !important; border-color: #e5312b !important; } /* ── 星期表头文字 ── */ body.night .mgc-wdays > div { color: #666 !important; } body.night .mgc-wdays > div:first-child { color: #c0392b !important; } body.night .mgc-wdays > div:last-child { color: #3a78c9 !important; } /* ── 日期数字 ── */ body.night .mgc-dn { color: #aaa !important; } body.night .mgc-cell.om .mgc-dn { color: #444 !important; } /* ── 游戏图标占位背景 ── */ body.night .mgc-icon { background: #2a2a2a !important; } /* ── 弹出层 ── */ body.night .mgc-pb { background: #181818 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important; } /* ── 弹出层列表项 ── */ body.night .mgc-pi { color: #aaa !important; border-bottom-color: var(--mdbt-border) !important; } body.night .mgc-pi:hover { color: #e5312b !important; } /* ── 排行榜列表项 ── */ body.night .mgr-item { color: #aaa !important; border-bottom-color: var(--mdbt-border) !important; } body.night .mgr-item:hover { background: rgba(229, 49, 43, 0.08) !important; color: #e5312b !important; } /* ── 排行榜名次数字 ── */ body.night .mgr-rank { color: #555 !important; } /* ── 游戏缩略图占位背景 ── */ body.night .mgr-thumb { background: #2a2a2a !important; box-shadow: 0 0 0 2px #2a2a2a !important; }