/* ========================================================================== 36sy 双主题：黑夜模式（默认，暗黑+星空） / 白天模式（清新浅色） -------------------------------------------------------------------------- 设计原则： 1) 黑夜模式就是原样 —— 本文件不改任何原来的样式，只新增 html[data-theme="light"] 覆盖层，所以暗色表现 100% 不变、零回归风险； 2) 白天模式只覆盖「颜色/背景/描边/阴影」，不碰任何布局（padding/圆角/尺寸）， 所以两个主题的结构完全一致，不会因为换主题导致错位； 3) 橙色主色（渐变按钮、强调色）两个主题都保留，品牌一致； 4) 纯 CSS + 静态文件，浏览器缓存，服务器零额外开销（不加查询、不加请求）。 切换机制： - 页面 （服务端读 Cookie 输出，无闪屏） - 右上角按钮由 /static/js/theme.js 生成并切换（同时写 Cookie + localStorage） ========================================================================== */ /* ---------- 悬浮控件用的变量（两个主题各一套） ---------- */ :root { --fab-bg: rgba(6, 8, 16, 0.92); --fab-line: rgba(255, 168, 0, 0.35); --fab-ink: #ffb366; --fab-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); color-scheme: dark; /* 让滚动条/表单控件跟随主题 */ } html[data-theme="light"] { --fab-bg: rgba(255, 255, 255, 0.96); --fab-line: rgba(226, 130, 0, 0.34); --fab-ink: #d97706; --fab-shadow: 0 6px 18px rgba(22, 34, 62, 0.12); color-scheme: light; /* 白天模式调色板（仅供调试阅读，实际以选择器覆盖为准） */ --t-bg1: #f7fafe; --t-bg2: #e9f0f8; --t-surface: #ffffff; --t-surface2: #f2f6fb; --t-ink: #1d2430; --t-ink2: #545e75; --t-ink3: #8a93a8; --t-line: rgba(22, 34, 62, 0.10); --t-accent: #d97706; --t-accent-soft: rgba(240, 138, 0, 0.10); --t-accent-line: rgba(226, 130, 0, 0.30); --t-shadow: 0 6px 18px rgba(22, 34, 62, 0.07); } /* ========================================================================== 一、白天模式 —— 基础与骨架 ========================================================================== */ html[data-theme="light"] body { background: linear-gradient(180deg, #f7fafe 0%, #e9f0f8 100%); color: #1d2430; } html[data-theme="light"] .app { background: transparent; } /* 星空只在黑夜模式出现；白天换成干净的浅色底 */ html[data-theme="light"] .sky { display: none; } html[data-theme="light"] .header { background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%); } html[data-theme="light"] .header::before { background: radial-gradient(ellipse at center, rgba(255, 168, 0, 0.16) 0%, transparent 62%); } html[data-theme="light"] .header::after { background: linear-gradient(90deg, transparent, #ffa800, transparent); } html[data-theme="light"] .logo, html[data-theme="light"] .page-top h1, html[data-theme="light"] h1, html[data-theme="light"] .list-head h1 { color: #d97706; } /* 站点 LOGO：暗色下是「橙色渐变字 + 光晕」，白天保留渐变但换成更沉的橙、 并且去掉光晕（白光晕在白底上会糊） */ html[data-theme="light"] .logo { color: transparent; background: linear-gradient(135deg, #e07d00 0%, #f58220 50%, #ff6b00 100%); -webkit-background-clip: text; background-clip: text; filter: none; } /* ========================================================================== 二、白天模式 —— 导航 / 筛选 / 搜索 ========================================================================== */ html[data-theme="light"] .tab-bar, html[data-theme="light"] .new-tab-bar { background: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(226, 130, 0, 0.20); } html[data-theme="light"] .tab-item, html[data-theme="light"] .new-cat-item { color: #6b7688; } /* 顶部 tab 选中态：保持橙色强调 */ html[data-theme="light"] .tab-item.active { color: #d97706; } /* 分类胶囊选中态：必须把橙色渐变底一起补回来。 原因：基础规则 html[data-theme="light"] .cat-item 带了 html 类型， 权重(0,2,1) 高于页面里的 .cat-item.active (0,2,0)，会把选中态的底色冲掉， 结果"选中"只剩字加粗一点，看不出来。 */ html[data-theme="light"] .new-cat-item.active, html[data-theme="light"] .cat-item.active { background: linear-gradient(135deg, #ffa800 0%, #ff6b00 100%); color: #1a1a2e; border-color: transparent; box-shadow: 0 3px 10px rgba(255, 150, 0, 0.34); } html[data-theme="light"] .category-bar { background: rgba(255, 255, 255, 0.70); border-bottom-color: rgba(226, 130, 0, 0.18); } html[data-theme="light"] .cat-item, html[data-theme="light"] .new-cat-item { background: #ffffff; color: #5a6478; border-color: rgba(22, 34, 62, 0.10); box-shadow: 0 1px 3px rgba(22, 34, 62, 0.04); } html[data-theme="light"] .search-bar { background: rgba(255, 255, 255, 0.55); } html[data-theme="light"] .search-bar input { background: #ffffff; color: #1d2430; border-color: rgba(226, 130, 0, 0.30); box-shadow: inset 0 1px 2px rgba(22, 34, 62, 0.04); } html[data-theme="light"] .search-bar input::placeholder { color: #9aa3b6; } html[data-theme="light"] .search-bar input:focus { border-color: #ffa800; background: #ffffff; box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.16); } html[data-theme="light"] .search-clear { color: #8a93a8; } html[data-theme="light"] .search-tip { color: #8a93a8; } html[data-theme="light"] .search-tip a { color: #d97706; } /* ========================================================================== 三、白天模式 —— 通用文字与容器（全站共用类名） ========================================================================== */ html[data-theme="light"] .crumb, html[data-theme="light"] .meta, html[data-theme="light"] .list-meta, html[data-theme="light"] .list-head .cnt, html[data-theme="light"] .page-sum, html[data-theme="light"] .list-summary, html[data-theme="light"] .detail-updated { color: #8a93a8; } html[data-theme="light"] .crumb a, html[data-theme="light"] .list-meta a { color: #6b7688; } html[data-theme="light"] .crumb a:hover { color: #d97706; } html[data-theme="light"] .block > h2, html[data-theme="light"] .block h2, html[data-theme="light"] h2 { color: #d97706; } html[data-theme="light"] .block p, html[data-theme="light"] .block li, html[data-theme="light"] .seo-block p, html[data-theme="light"] .intro { color: #545e75; } /* 只给「正文里的行内链接」上橙色。 ⚠️ 这里绝不能写成 .block a —— 那会把 block 内部的按钮一起染成橙色 （详情页右上角的「点击下载」mini-dl、相关推荐卡片里的「查看福利」game-btn）， 橙字压橙底会糊成一片、看不清。 :not(.seo-keys) 是为了排除页脚"热门搜索"那行 —— 它在暗色下是刻意的浅灰， 不该变成橙色（那行属于低调的内链，不抢视线）。 */ html[data-theme="light"] .block p a, html[data-theme="light"] .block li a, html[data-theme="light"] .seo-block p:not(.seo-keys) a, html[data-theme="light"] .faq-item a { color: #d97706; } html[data-theme="light"] .seo-keys, html[data-theme="light"] .seo-keys a, html[data-theme="light"] .seo-keys a:hover { color: #8a93a8; } html[data-theme="light"] .stat { background: #ffffff; border-color: rgba(226, 130, 0, 0.18); box-shadow: var(--t-shadow); } html[data-theme="light"] .stat b { color: #d97706; } html[data-theme="light"] .stat span { color: #7b8497; } html[data-theme="light"] .empty, html[data-theme="light"] .day-empty, html[data-theme="light"] .empty-state, html[data-theme="light"] .gift-loading { color: #8a93a8; } html[data-theme="light"] .empty a, html[data-theme="light"] .day-empty a { color: #d97706; } /* 常见问题：全站只有 rebate.php 把它做成了卡片，其余页面都是纯文字问答 （只有 margin，没有底色）。所以这里默认不动背景 —— 否则首页 / 详情页 会出现一块突兀的白色"贴图"；rebate.php 那种卡片用 body 上的 page-rebate 单独补浅色底。 */ html[data-theme="light"] .page-rebate .faq-item { background: #ffffff; border-color: rgba(226, 130, 0, 0.14); box-shadow: var(--t-shadow); } html[data-theme="light"] .faq-item h3 { color: #2a3242; } html[data-theme="light"] .faq-item p { color: #5a6478; } html[data-theme="light"] .footer, html[data-theme="light"] .site-footer { color: #8a93a8; border-top-color: rgba(22, 34, 62, 0.08); } html[data-theme="light"] .footer a, html[data-theme="light"] .site-footer a, html[data-theme="light"] .footer-links a { color: #6b7688; } html[data-theme="light"] .pager a, html[data-theme="light"] .pager span { background: #ffffff; color: #5a6478; border-color: rgba(226, 130, 0, 0.20); } html[data-theme="light"] .pager a:hover { color: #d97706; } html[data-theme="light"] .links a, html[data-theme="light"] .combo-tags a, html[data-theme="light"] .nav-row a, html[data-theme="light"] .hot-keys .hk { background: #ffffff; color: #545e75; border-color: rgba(226, 130, 0, 0.18); box-shadow: 0 1px 3px rgba(22, 34, 62, 0.04); } html[data-theme="light"] .links a:hover, html[data-theme="light"] .combo-tags a:hover { color: #d97706; } html[data-theme="light"] .combo-tags a b { color: #8a93a8; } html[data-theme="light"] .hot-keys .hk-label { color: #8a93a8; } html[data-theme="light"] .toast { background: rgba(29, 36, 48, 0.92); color: #ffe0b0; border-color: rgba(226, 130, 0, 0.35); } /* ========================================================================== 四、白天模式 —— 卡片 / 列表（全站各类卡片统一成白卡） ========================================================================== */ /* 只给「暗色下本来就是卡片」的元素换成白卡 —— 暗色下没有底色的元素 （.faq-item / .mine-item / .up-list li 等）绝不能加白底，否则会变成突兀的白色贴图 */ html[data-theme="light"] .game-card, html[data-theme="light"] .lb-card, html[data-theme="light"] .act-flat-item, html[data-theme="light"] .act-item, html[data-theme="light"] .activity-item, html[data-theme="light"] .gift, html[data-theme="light"] .data-item, html[data-theme="light"] .rule-list { background: #ffffff; border-color: rgba(226, 130, 0, 0.16); box-shadow: var(--t-shadow); } html[data-theme="light"] .game-card { background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%); border-color: rgba(226, 130, 0, 0.14); } html[data-theme="light"] .game-card:hover { border-color: rgba(226, 130, 0, 0.34); box-shadow: 0 10px 24px rgba(22, 34, 62, 0.12); } html[data-theme="light"] .game-title, html[data-theme="light"] .lb-head .t, html[data-theme="light"] .act-flat-title, html[data-theme="light"] .act-item-title, html[data-theme="light"] .gift-name, html[data-theme="light"] .data-item .v, html[data-theme="light"] .rule-v { color: #1d2430; } html[data-theme="light"] .game-time, html[data-theme="light"] .lb-head .c, html[data-theme="light"] .act-flat-game, html[data-theme="light"] .act-flat-arrow, html[data-theme="light"] .gift-meta, html[data-theme="light"] .data-item .k, html[data-theme="light"] .mine-item span { color: #8a93a8; } html[data-theme="light"] .game-meta-tags span { background: rgba(240, 138, 0, 0.12); color: #b45309; border-color: rgba(226, 130, 0, 0.22); } html[data-theme="light"] .gift-content { color: #4a5468; } html[data-theme="light"] .gift-code code { background: #f4f7fb; border-color: rgba(226, 130, 0, 0.38); color: #b45309; } html[data-theme="light"] .gift-code span.done { background: #e8edf5; color: #7b8497; } html[data-theme="light"] .up-list li b { color: #d97706; } html[data-theme="light"] .up-list a { color: #d97706; } /* 周报榜单这种"分隔线行"（暗色下无底色，只有一条分隔线）保持无底色 */ html[data-theme="light"] .up-list li { color: #4a5468; border-bottom-color: rgba(22, 34, 62, 0.07); } html[data-theme="light"] .rule-k { color: #b45309; } html[data-theme="light"] .rule-row { border-bottom-color: rgba(22, 34, 62, 0.07); } html[data-theme="light"] .desc, html[data-theme="light"] .activity { background: #ffffff; color: #3c4657; border-color: rgba(226, 130, 0, 0.16); } html[data-theme="light"] .welfare { background: rgba(255, 168, 0, 0.10); border-color: rgba(226, 130, 0, 0.28); color: #92600a; } html[data-theme="light"] .activity-note { color: #8a93a8; } html[data-theme="light"] .activity-note a, html[data-theme="light"] .activity-more { color: #d97706; } html[data-theme="light"] .activity-item-text { color: #2a3242; } html[data-theme="light"] .activity-item:hover, html[data-theme="light"] .activity-item:active { border-color: rgba(226, 130, 0, 0.42); } html[data-theme="light"] .rel-keys a { background: #ffffff; color: #545e75; border-color: rgba(226, 130, 0, 0.18); box-shadow: 0 1px 3px rgba(22, 34, 62, 0.04); } /* ========================================================================== 五、白天模式 —— 游戏详情页（game.php / yuyue.php） ========================================================================== */ html[data-theme="light"] .detail-header { background: linear-gradient(180deg, #eef4fb 0%, #f9fcff 100%); } html[data-theme="light"] .detail-cover { opacity: 0.10; } html[data-theme="light"] .detail-info { background: linear-gradient(transparent, #f9fcff); } html[data-theme="light"] .detail-text h1 { color: #1d2430; } html[data-theme="light"] .detail-sub { color: #7b8497; } html[data-theme="light"] .detail-sub .hl { color: #d97706; } html[data-theme="light"] .tool-btn { background: #ffffff; color: #545e75; border-color: rgba(226, 130, 0, 0.28); box-shadow: 0 1px 3px rgba(22, 34, 62, 0.05); } html[data-theme="light"] .back-btn { background: rgba(255, 255, 255, 0.86); color: #1d2430; border: 1px solid rgba(22, 34, 62, 0.08); } html[data-theme="light"] .shots img, html[data-theme="light"] .gcard img { border-color: rgba(226, 130, 0, 0.22); } html[data-theme="light"] .gcard { background: #ffffff; border-color: rgba(226, 130, 0, 0.18); box-shadow: var(--t-shadow); } html[data-theme="light"] .gcard .t { color: #1d2430; } html[data-theme="light"] .gcard .s { color: #8a93a8; } /* 活动详情页：幽灵按钮（浅色底上用浅橙看不清，压深一档） */ html[data-theme="light"] .btn-ghost { border-color: rgba(226, 130, 0, 0.40); color: #d97706; background: #ffffff; } /* 活动详情页：微信客服名片 */ html[data-theme="light"] .kefu-card { background: linear-gradient(135deg, rgba(255, 168, 0, 0.16), rgba(255, 107, 0, 0.07)); border-color: rgba(226, 130, 0, 0.34); box-shadow: var(--t-shadow); } html[data-theme="light"] .kefu-title { color: #b45309; } html[data-theme="light"] .kefu-desc { color: #6b7688; } html[data-theme="light"] .kefu-btn-static { background: #eef2f8; color: #b45309; } /* ========================================================================== 六、白天模式 —— 首页（index.php） ========================================================================== */ html[data-theme="light"] .mine-mask { background: rgba(20, 30, 50, 0.32); } html[data-theme="light"] .mine-drawer { background: #ffffff; border-top-color: rgba(226, 130, 0, 0.25); box-shadow: 0 -8px 30px rgba(22, 34, 62, 0.14); } html[data-theme="light"] .mine-drawer-head .ttl { color: #1d2430; } html[data-theme="light"] .mine-close { color: #8a93a8; } html[data-theme="light"] .mine-tab { background: #f4f7fb; color: #5a6478; } html[data-theme="light"] .mine-tab.active { color: #1d2430; } html[data-theme="light"] .mine-util, html[data-theme="light"] .mine-clear { color: #8a93a8; } html[data-theme="light"] .load-more span { background: rgba(255, 168, 0, 0.12); color: #b45309; border-color: rgba(226, 130, 0, 0.28); } html[data-theme="light"] .day-head h2, html[data-theme="light"] .day-head .wd, html[data-theme="light"] .day-head .num, html[data-theme="light"] .day-head .now { color: #545e75; } html[data-theme="light"] .day-head .now { color: #d97706; } /* ========================================================================== 七、选中态强化（两个主题通用）+ 白天模式下被"基础规则"盖掉的几个选中态 ========================================================================== */ /* 二级导航（热榜 / 免费版 / 新游首发…）选中态加强： 橙色渐变底 + 投影 + 轻微上浮放大，一眼就能看出选的是哪个。 这条是两个主题通用的（暗色下原本就有渐变底，这里再补投影和上浮）。 */ .cat-item.active, .new-cat-item.active { font-weight: 700; position: relative; z-index: 1; box-shadow: 0 3px 10px rgba(255, 150, 0, 0.42); transform: translateY(-1px) scale(1.05); } /* 白天模式：下面这些 .active / .on / .cur 变体的样式同样会被基础规则按权重盖掉， 必须显式补回来，否则"选中了"和"没选中"看起来几乎一样。 */ /* 详情页「收藏 / 分享」按钮选中（已收藏） */ html[data-theme="light"] .tool-btn.on { background: linear-gradient(135deg, #ffa800 0%, #ff6b00 100%); color: #1a1a2e; border-color: transparent; box-shadow: 0 2px 8px rgba(255, 150, 0, 0.32); } /* 首页"我的"抽屉里的 最近浏览 / 我的收藏 切换 */ html[data-theme="light"] .mine-tab.active { color: #d97706; border-bottom-color: #d97706; } /* 活动返利总览等的分页"当前页" */ html[data-theme="light"] .pager a.cur, html[data-theme="light"] .pager span.cur { background: linear-gradient(135deg, #ffa800 0%, #ff6b00 100%); color: #1a1a2e; border-color: transparent; font-weight: 700; } /* 活动列表卡片的 hover 描边（基础规则权重更高，会把 hover 效果吃掉） */ html[data-theme="light"] .act-item:hover, html[data-theme="light"] .act-item:active, html[data-theme="light"] .act-flat-item:hover, html[data-theme="light"] .act-flat-item:active { border-color: rgba(226, 130, 0, 0.50); } /* ========================================================================== 八、切换按钮（右上角）+ 盒子悬浮按钮（右下角） —— 这两个控件由 /static/js/theme.js 生成，两个主题都显示 ========================================================================== */ .theme-toggle { position: fixed; top: 12px; right: max(12px, calc((100vw - 480px) / 2 + 12px)); z-index: 1400; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--fab-bg); border: 1px solid var(--fab-line); color: var(--fab-ink); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: var(--fab-shadow); -webkit-tap-highlight-color: transparent; transition: transform .18s ease, opacity .18s ease; font-family: inherit; } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .tt-ico { font-size: 13px; line-height: 1; } /* 右下角「下载盒子」： 静态 = 42px 圆形小图标，配色与「收藏 / 回到顶部」一致（低调、不抢视线）； 每隔一段时间做一次轻动画：圆形轻微放大 + 渐变为品牌橙 → 图标淡出 → 显示「下载 / 盒子」两行字 → 停留几秒 → 收回圆形。鼠标移上去也会展开。 */ .box-fab { position: fixed; right: max(14px, calc((100vw - 480px) / 2 + 14px)); bottom: 20px; z-index: 950; width: 42px; height: 42px; border-radius: 50%; display: block; overflow: hidden; background: var(--fab-bg); border: 1px solid var(--fab-line); color: var(--fab-ink); text-decoration: none; box-shadow: var(--fab-shadow); -webkit-tap-highlight-color: transparent; font-family: inherit; transition: width .34s cubic-bezier(.34, 1.3, .5, 1), height .34s cubic-bezier(.34, 1.3, .5, 1), color .26s ease, border-color .26s ease, box-shadow .34s ease; } /* 展开时才亮起的橙色底（用伪元素淡入，渐变才能平滑过渡） */ .box-fab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #ffa800 0%, #ff6b00 100%); opacity: 0; transition: opacity .28s ease; } .box-fab.is-open { width: 54px; height: 54px; color: #1a1a2e; border-color: transparent; box-shadow: 0 6px 20px rgba(255, 168, 0, 0.44); } .box-fab.is-open::before { opacity: 1; } /* 图标层（收起时的样子） */ .box-fab .bf-ico { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .3s ease; } .box-fab .bf-ico svg { width: 19px; height: 19px; display: block; } /* 文字层（展开时）：上下两行 —— 上「下载」下「盒子」，逐字旋入 */ .box-fab .bf-txt { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; line-height: 1.05; letter-spacing: .5px; opacity: 0; transition: opacity .14s ease; } .box-fab .bf-l { display: flex; } /* 每个字单独入场：从下往上旋入 + 由小放大弹出，4 个字依次延迟（下→载→盒→子） */ .box-fab .bf-c { display: inline-block; opacity: 0; transform: translateY(7px) rotate(-22deg) scale(.55); transform-origin: 50% 70%; transition: opacity .14s ease, transform .3s cubic-bezier(.34, 1.55, .5, 1); transition-delay: 0s; /* 收回时不带延迟，避免拖沓 */ } .box-fab.is-open .bf-ico { opacity: 0; transform: scale(.45); } .box-fab.is-open .bf-txt { opacity: 1; } .box-fab.is-open .bf-c { opacity: 1; transform: none; } .box-fab.is-open .bf-c1 { transition-delay: .05s; } .box-fab.is-open .bf-c2 { transition-delay: .14s; } .box-fab.is-open .bf-c3 { transition-delay: .23s; } .box-fab.is-open .bf-c4 { transition-delay: .32s; } .box-fab:active { transform: scale(.93); } /* 尊重系统"减少动态效果"：不做自动展开，也不做逐字动画，点了/指上去直接显示 */ @media (prefers-reduced-motion: reduce) { .box-fab, .box-fab .bf-ico, .box-fab .bf-txt, .box-fab .bf-c { transition: none; } .box-fab .bf-c { opacity: 1; transform: none; } } /* 小屏时收成图标，避免和底部主下载按钮挤在一起 */ @media (max-width: 360px) { .theme-toggle { padding: 0 9px; } .theme-toggle .tt-txt { display: none; } } /* -------------------------------------------------------------------------- 顺带修正：站内是 480px 手机框布局，但原有的悬浮按钮用的是 right:14px （贴浏览器窗口右边缘），在电脑宽屏上会飘到离内容很远的地方。 下面统一把它们对齐到 480px 内容框右边 —— 窄屏（手机）下取值不变，零影响。 如果不想改这一处，删掉本段即可。 -------------------------------------------------------------------------- */ .to-top, .mine-btn { right: max(14px, calc((100vw - 480px) / 2 + 14px)); }