/* 全站 PC 弹窗皮肤 —— 仅 ≥1024px 顶层 + pc-detail iframe(html.pc-modal)。手机端零改动。改本文件必须 bump 三个 base 模板里的 ?v=(layout / base / layout_minimal)。 2026-07-25 换皮「近黑紫扁平直角」(neon-purple-spec 1C 统一外壳): 面板=#221838+1px #4A3568 直角无阴影,标题栏底 #2E234C,遮罩 rgba(7,5,12,.82), CTA=实心 #FF3D8A(下载/消费)/#7C3AED(系统/提交),次按钮描边 #4A3568 字 #C9BEDD, 输入 #2C2148/边 #453466/聚焦 #7C3AED,卡 #261C42/边 #3B2C5C,border-radius 全 0。分区:①遮罩 ②面板 ③CTA/内部 ④尺寸档 ⑤各弹窗定位微调 ⑥活动公告 ⑦认证 ⑧18+门 ⑨页面级弹层扁平补充。每条规则镜像进 @media(min-width:1024px) 与 html.pc-modal 两块: 顶层页无 pc-modal 类 → html.pc-modal 块不命中(无害); iframe 视口窄 → @media 块不命中(无害);两块互不冲突。 */ /* ================= 顶层窗口(≥1024) ================= */ @media (min-width: 1024px) { /* ---------- ①遮罩基线 ---------- */ html.app-dark .popup-overlay { background: rgba(7,5,12,0.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } /* ---------- ②面板基线 + 柔光 ---------- */ html.app-dark .popup-panel { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; position: relative; width: 420px !important; max-width: 92vw !important; padding: 24px 24px 20px !important; } html.app-dark .popup-panel > * { position: relative; z-index: 1; } /* ---------- ③内部文字放大 ---------- */ html.app-dark .popup-title { color:#F2EEFA !important; font-size:17px !important; } html.app-dark .popup-content { color:#B6A8CC !important; font-size:13.5px !important; } } /* ================= pc-detail iframe(html.pc-modal) ================= */ /* ---------- ①遮罩基线 ---------- */ html.pc-modal .popup-overlay { background: rgba(7,5,12,0.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } /* ---------- ②面板基线 + 柔光 ---------- */ html.pc-modal .popup-panel { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; position: relative; width: 420px !important; max-width: 92vw !important; padding: 24px 24px 20px !important; } html.pc-modal .popup-panel > * { position: relative; z-index: 1; } /* ---------- ③内部文字放大 ---------- */ html.pc-modal .popup-title { color:#F2EEFA !important; font-size:17px !important; } html.pc-modal .popup-content { color:#B6A8CC !important; font-size:13.5px !important; } /* ============================================================ Task 2 · S 档紧凑确认/提示类(max-width ~420-460,居中卡) ============================================================ */ @media (min-width: 1024px) { /* ---------- 遮罩 ---------- */ html.app-dark .uninstall-confirm-mask, html.app-dark .modal-overlay, html.app-dark .modal-verification, html.app-dark .modal-success, html.app-dark .custom-select-overlay { background: rgba(7,5,12,0.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } /* layui 遮罩(礼包/游客/公众号/微信/找回等) */ html.app-dark .layui-layer-shade { background:#07050C !important; opacity:.82 !important; } /* ---------- 面板皮肤 ---------- */ html.app-dark .uninstall-confirm.uc-redesign, html.app-dark .modal-cancel-account, html.app-dark .modal-card, html.app-dark .modal-success-card, html.app-dark .alert-modal-container, html.app-dark .youke-modal, html.app-dark .public-modal, html.app-dark .open-weixin-modal, html.app-dark .custom-select-popup, html.app-dark .layui-layer:has(.alert-modal-container), html.app-dark .layui-layer:has(.youke-modal), html.app-dark .layui-layer:has(.public-modal), html.app-dark .layui-layer:has(.open-weixin-modal) { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; max-width: 420px !important; } html.app-dark .modal-card { max-width:460px !important; } html.app-dark .alert-modal-container { max-width:460px !important; } /* 仅给「靠父级 flex 居中的静态面板」加 relative 承载柔光 ::before; .uninstall-confirm / .custom-select-popup 本身 position:fixed 居中,不能改。 */ html.app-dark .modal-cancel-account, html.app-dark .modal-card, html.app-dark .modal-success-card, html.app-dark .alert-modal-container, html.app-dark .youke-modal, html.app-dark .public-modal, html.app-dark .open-weixin-modal { position: relative; } /* ---------- 文字提亮 ---------- */ html.app-dark .uc-title, html.app-dark .modal-cancel-account .modal-title, html.app-dark .verification-title, html.app-dark .modal-success-card .modal-title, html.app-dark .alert-modal-title, html.app-dark .youke-title, html.app-dark .custom-select-title { color:#F2EEFA !important; } html.app-dark .uc-body, html.app-dark .modal-description, html.app-dark .verification-info, html.app-dark .gift-tip { color:#B6A8CC !important; } /* ---------- 语义色 ---------- */ html.app-dark .uc-game-name { color:#A855F7 !important; } html.app-dark .uc-warn { color:#FF3D8A !important; } html.app-dark .uc-rule { background: #3D1F63 !important; color:#FF3D8A !important; } html.app-dark .uc-confirm-link { color:#FF3D8A !important; } /* ---------- 下拉选项/分隔线 ---------- */ html.app-dark .custom-select-header { border-bottom-color: #342A54 !important; } html.app-dark .custom-select-option { border-bottom-color: #342A54 !important; color:#F2EEFA !important; } html.app-dark .custom-select-option.selected { background: #3D1F63 !important; color:#D7C9F5 !important; } /* ---------- 中性主 CTA → 金玫 ---------- */ html.app-dark .popup-btn.__confirm, html.app-dark .modal-button-confirm, html.app-dark .verification-submit, html.app-dark .alert-modal-actions .btn-primary, html.app-dark .modal_zhuce_btn, html.app-dark .modal-success-ok, html.app-dark .public-content .copy-btn, html.app-dark .open-weixin-btn { background: #7C3AED !important; color:#fff !important; border:none !important; } /* 次级/取消键 */ html.app-dark .popup-btn.__cancel, html.app-dark .modal-button-cancel { background: transparent !important; border: 1px solid #4A3568 !important; color:#C9BEDD !important; } /* ---------- 输入框深底浅字 ---------- */ html.app-dark .verification-code-input, html.app-dark .gift-code-input, html.app-dark .youke_zhanghao, html.app-dark .youke_mima { background: #2C2148 !important; border:1px solid #453466 !important; color:#F2EEFA !important; } } /* ---- Task 2 · pc-modal 镜像(仅可在 iframe 出现者:confirm CTA + 礼包) ---- */ html.pc-modal .popup-btn.__confirm { background: #7C3AED !important; color:#fff !important; border:none !important; } html.pc-modal .popup-btn.__cancel { background: transparent !important; border: 1px solid #4A3568 !important; color:#C9BEDD !important; } html.pc-modal .layui-layer-shade { background:#07050C !important; opacity:.82 !important; } html.pc-modal .alert-modal-container, html.pc-modal .layui-layer:has(.alert-modal-container) { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; position: relative; max-width:460px !important; } html.pc-modal .alert-modal-title { color:#F2EEFA !important; } html.pc-modal .gift-tip { color:#B6A8CC !important; } html.pc-modal .alert-modal-actions .btn-primary { background: #7C3AED !important; color:#fff !important; border:none !important; } html.pc-modal .gift-code-input { background: #2C2148 !important; border:1px solid #453466 !important; color:#F2EEFA !important; } /* ============================================================ Task 3 · M 档需转色(浅色/通用深灰 → 深酒红) .dl-modal 被 #cmBuyModal 共用,故用 ID 限定 #dlModal/#tplayModal,不碰购买弹窗。 .papaya-action-sheet 本身 position:fixed 居中,不改 position。 ============================================================ */ @media (min-width: 1024px) { /* 面板皮肤(转色) */ html.app-dark .pop-pay-tips .pop-window, html.app-dark #dlModal .dl-modal, html.app-dark #tplayModal .dl-modal, html.app-dark .filter-modal .filter-modal-panel, html.app-dark .papaya-action-sheet, html.app-dark .home-notice-dialog { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; } html.app-dark .pop-pay-tips .pop-window { max-width:400px !important; } html.app-dark #dlModal .dl-modal, html.app-dark #tplayModal .dl-modal { max-width:680px !important; } html.app-dark .filter-modal .filter-modal-panel { max-width:560px !important; } html.app-dark .papaya-action-sheet { max-width:440px !important; } html.app-dark .home-notice-dialog { max-width:460px !important; border-color:#4A3568 !important; } /* 静态面板加 relative(fixed 的 papaya-action-sheet / relative 的 filter-panel 不动) */ html.app-dark .pop-pay-tips .pop-window, html.app-dark #dlModal .dl-modal, html.app-dark #tplayModal .dl-modal, html.app-dark .home-notice-dialog { position: relative; } /* 支付提示文字 */ html.app-dark .pop-pay-tips .pop-window, html.app-dark .pop-pay-tips .head .title { color:#F2EEFA !important; } /* dlModal / tplayModal 内部 */ html.app-dark #dlModal .dl-modal-title, html.app-dark #tplayModal .dl-modal-title { color:#F2EEFA !important; } html.app-dark #dlModal .dl-modal-close, html.app-dark #tplayModal .dl-modal-close { color:#B6A8CC !important; } html.app-dark #dlModal .dl-option-plain, html.app-dark #tplayModal .dl-option-plain { background: #2C2148 !important; border:1px solid #453466 !important; color:#F2EEFA !important; } html.app-dark #dlModal .dl-option-title, html.app-dark #tplayModal .dl-option-title { color:#F2EEFA !important; } html.app-dark #dlModal .dl-option-desc, html.app-dark #tplayModal .dl-option-desc { color:#B6A8CC !important; } html.app-dark #dlModal .dl-sub-ok, html.app-dark #tplayModal .dl-sub-ok { color:#4ADE80 !important; } html.app-dark #dlModal .dl-sub-empty, html.app-dark #tplayModal .dl-sub-empty { color:#FF3D8A !important; } /* 金卡(主推)选项 .dl-option-gold 整卡重定(2026-07-29 用户反馈大面积实心粉扎眼)：深紫底+系统紫描边的低刺激促销卡,粉/紫只留在小图标与箭头;ID 特异性(1,3,1) 稳压 anime 蜜桃渐变与 game-detail_pc 的实心粉 #FF3D8A(均无 ID) */ html.app-dark #dlModal .dl-option-gold, html.app-dark #tplayModal .dl-option-gold { background: #3A2566 !important; border: 1px solid #7C3AED !important; border-radius: 0 !important; box-shadow: none !important; } html.app-dark #dlModal .dl-option-gold .dl-option-icon, html.app-dark #tplayModal .dl-option-gold .dl-option-icon { background: rgba(168, 85, 247, 0.28) !important; color: #fff !important; border-radius: 0 !important; box-shadow: none !important; } html.app-dark #dlModal .dl-option-gold .dl-option-title, html.app-dark #tplayModal .dl-option-gold .dl-option-title { color:#F2EEFA !important; } html.app-dark #dlModal .dl-option-gold .dl-option-desc, html.app-dark #tplayModal .dl-option-gold .dl-option-desc { color:#CFC0E8 !important; } html.app-dark #dlModal .dl-option-gold .dl-option-arrow, html.app-dark #tplayModal .dl-option-gold .dl-option-arrow { color:#C9B8F0 !important; } /* 非金卡选项兜底(2026-07-29 用户指出次数用完态「分享好友」浅蓝白卡+统一亮白标题=看不见): 手机端白卡族(分享/等待/购买白卡等)在 PC 深色面板里全部转深色卡,与 .dl-option-plain 同板 */ html.app-dark #dlModal .dl-option:not(.dl-option-gold), html.app-dark #tplayModal .dl-option:not(.dl-option-gold) { background: #2C2148 !important; border: 1px solid #453466 !important; border-radius: 0 !important; box-shadow: none !important; } /* 分类筛选:覆盖 !important 白卡内部 */ html.app-dark .filter-modal .filter-modal-input { background: #2C2148 !important; color:#F2EEFA !important; border:1px solid #453466 !important; } html.app-dark .filter-modal .filter-modal-subtitle { color:#B6A8CC !important; } html.app-dark .filter-modal .filter-modal-footer { background: transparent !important; border-top:1px solid #342A54 !important; } html.app-dark .filter-modal .filter-btn.confirm { background: #7C3AED !important; color:#fff !important; border:none !important; } html.app-dark .filter-modal .filter-btn.reset { background: transparent !important; border: 1px solid #4A3568 !important; color:#C9BEDD !important; } /* 果酱菜单按钮 */ html.app-dark .papaya-action-sheet .btn { background: #261C42 !important; color:#F2EEFA !important; } html.app-dark .papaya-action-sheet .btn.cancel { background: transparent !important; color:#9A8FB5 !important; } /* 首页活动公告:按钮粉紫→金玫 */ html.app-dark .home-notice-go, html.app-dark .home-notice-ok { background: #FF3D8A !important; color:#fff !important; } } /* ---- Task 3 · pc-modal 镜像(iframe 内会出现:下载/试玩/筛选/支付提示) ---- */ html.pc-modal #dlModal .dl-modal, html.pc-modal #tplayModal .dl-modal, html.pc-modal .pop-pay-tips .pop-window, html.pc-modal .filter-modal .filter-modal-panel { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; color: #F2EEFA !important; } html.pc-modal #dlModal .dl-modal, html.pc-modal #tplayModal .dl-modal { max-width:680px !important; position:relative; } html.pc-modal .filter-modal .filter-modal-panel { max-width:560px !important; } html.pc-modal .pop-pay-tips .pop-window { max-width:400px !important; position:relative; } html.pc-modal #dlModal .dl-modal-title, html.pc-modal #tplayModal .dl-modal-title { color:#F2EEFA !important; } html.pc-modal #dlModal .dl-option-plain, html.pc-modal #tplayModal .dl-option-plain { background: #2C2148 !important; border:1px solid #453466 !important; color:#F2EEFA !important; } html.pc-modal #dlModal .dl-option-title, html.pc-modal #tplayModal .dl-option-title { color:#F2EEFA !important; } html.pc-modal #dlModal .dl-option-desc, html.pc-modal #tplayModal .dl-option-desc { color:#B6A8CC !important; } html.pc-modal #dlModal .dl-sub-ok, html.pc-modal #tplayModal .dl-sub-ok { color:#4ADE80 !important; } html.pc-modal #dlModal .dl-sub-empty, html.pc-modal #tplayModal .dl-sub-empty { color:#FF3D8A !important; } /* 金卡整卡重定(镜像上面 app-dark 块,2026-07-29 低刺激促销卡):深紫底+系统紫描边, ID 特异性压过 game-detail_pc 的实心粉 #FF3D8A */ html.pc-modal #dlModal .dl-option-gold, html.pc-modal #tplayModal .dl-option-gold { background: #3A2566 !important; border: 1px solid #7C3AED !important; border-radius: 0 !important; box-shadow: none !important; } html.pc-modal #dlModal .dl-option-gold .dl-option-icon, html.pc-modal #tplayModal .dl-option-gold .dl-option-icon { background: rgba(168, 85, 247, 0.28) !important; color: #fff !important; border-radius: 0 !important; box-shadow: none !important; } html.pc-modal #dlModal .dl-option-gold .dl-option-title, html.pc-modal #tplayModal .dl-option-gold .dl-option-title { color:#F2EEFA !important; } html.pc-modal #dlModal .dl-option-gold .dl-option-desc, html.pc-modal #tplayModal .dl-option-gold .dl-option-desc { color:#CFC0E8 !important; } html.pc-modal #dlModal .dl-option-gold .dl-option-arrow, html.pc-modal #tplayModal .dl-option-gold .dl-option-arrow { color:#C9B8F0 !important; } /* 非金卡选项兜底(镜像上面 app-dark 块):分享/等待等白卡族转深色卡 */ html.pc-modal #dlModal .dl-option:not(.dl-option-gold), html.pc-modal #tplayModal .dl-option:not(.dl-option-gold) { background: #2C2148 !important; border: 1px solid #453466 !important; border-radius: 0 !important; box-shadow: none !important; } html.pc-modal .filter-modal .filter-modal-input { background: #2C2148 !important; color:#F2EEFA !important; border:1px solid #453466 !important; } html.pc-modal .filter-modal .filter-btn.confirm { background: #7C3AED !important; color:#fff !important; border:none !important; } html.pc-modal .filter-modal .filter-btn.reset { background: transparent !important; border: 1px solid #4A3568 !important; color:#C9BEDD !important; } /* ============================================================ Task 4 · M 档已暗底/刻意金褐,仅加宽/居中(不改底色) ============================================================ */ @media (min-width: 1024px) { /* 安卓下载弹窗:遮罩从"右上贴边"改"居中" */ html.app-dark .pop-dl-and { justify-content: center !important; align-items: center !important; } html.app-dark .pop-dl-and .pop-window { max-width: 560px !important; height: auto !important; max-height: 90vh !important; } html.app-dark .pop-dl-ios .pop-window { max-width: 560px !important; } html.app-dark .pop-dl-pc .pop-window { max-width: 680px !important; } /* 购买弹窗:金褐付费家族,只加宽不改色 */ html.app-dark #cmBuyModal .dl-modal { max-width: 680px !important; } /* 反馈弹窗:对齐活动公告——居中扁平圆角卡(去全高侧抽屉/左描边),加宽到 narrow 档 720 */ html.app-dark .fb-modal { left: 50% !important; top: 50% !important; bottom: auto !important; width: 1040px !important; max-width: calc(100vw - 48px) !important; height: 84vh !important; max-height: 820px !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: translate(-50%, -46%) !important; opacity: 0 !important; visibility: hidden !important; } html.app-dark .fb-modal.show { transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; } /* 首页弹窗广告:加宽 */ html.app-dark .home-pop-dialog { max-width: 420px !important; } } /* ---- Task 4 · pc-modal 镜像(下载/购买/反馈在 game-detail iframe 出现) ---- */ html.pc-modal .pop-dl-and { justify-content: center !important; align-items: center !important; } html.pc-modal .pop-dl-and .pop-window { max-width: 560px !important; height:auto !important; max-height:90vh !important; } html.pc-modal .pop-dl-ios .pop-window { max-width: 560px !important; } html.pc-modal .pop-dl-pc .pop-window { max-width: 680px !important; } html.pc-modal #cmBuyModal .dl-modal { max-width: 680px !important; } html.pc-modal .fb-modal { left: 50% !important; top: 50% !important; bottom: auto !important; width: 1040px !important; max-width: calc(100vw - 48px) !important; height: 84vh !important; max-height: 820px !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: translate(-50%, -46%) !important; opacity: 0 !important; visibility: hidden !important; } html.pc-modal .fb-modal.show { transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; } /* ============================================================ Task 5 · 认证家族其余 auth_sky 子弹层(登录/注册主弹层已在 login.html:1331 内联做) layui 居中包裹,只补宽屏宽度/内边距;深酒红皮肤已由 app_dark.css .auth_sky 提供。仅顶层。 ============================================================ */ @media (min-width: 1024px) { html.app-dark .registered_modal_mob.auth_sky, html.app-dark .real_name_auth_modal.auth_sky, html.app-dark .registered_result_modal.auth_sky, html.app-dark .get_back_pwd_modal_one.auth_sky, html.app-dark .get_back_pwd_modal_two.auth_sky, html.app-dark .get_back_pwd_modal_email.auth_sky, html.app-dark .get_back_pwd_modal_question.auth_sky, html.app-dark .get_back_pwd_modal_three.auth_sky, html.app-dark .get_back_pwd_modal_four.auth_sky { width: 420px !important; max-width: 92vw !important; margin: 0 auto !important; padding: 28px 26px !important; box-sizing: border-box !important; } /* 2026-07-24 扁平化:登录/找回 CTA 与步骤条金玫渐变→实心粉(压 app_dark.css 同特异性,本文件后载取胜) */ html.app-dark .auth_sky .modal_login_btn { background: #7C3AED !important; color: #fff !important; box-shadow: none !important; } html.app-dark .step-1-active .step-1, html.app-dark .step-2-active .step-1, html.app-dark .step-2-active .step-2, html.app-dark .step-3-active .step-1, html.app-dark .step-3-active .step-2, html.app-dark .step-3-active .step-3, html.app-dark .step-4-active .step-1, html.app-dark .step-4-active .step-2, html.app-dark .step-4-active .step-3, html.app-dark .step-4-active .step-4 { background: #7C3AED !important; color: #fff !important; } html.app-dark .step-2-active .line-1, html.app-dark .step-3-active .line-1, html.app-dark .step-3-active .line-2, html.app-dark .step-4-active .line-1, html.app-dark .step-4-active .line-2, html.app-dark .step-4-active .line-3 { background: #7C3AED !important; } } /* ============================================================ Task 6 · 18+ 年龄门(limit18 片段,include 于 index → 走 base.html 的 modal_pc.css) 已是深酒红卡,仅宽屏加宽居中。仅顶层。 ============================================================ */ @media (min-width: 1024px) { /* 容器铺满视口当遮罩(原 max-width:500 只是手机宽,桌面会两侧露出首页);卡片 560 居中。 2026-07-28 底色协调:内联的玫红夜空多层径向(手机端保留) → PC 换全站主底纯色 #1C1330 */ html.app-dark .limit18-container { max-width: none !important; width: 100vw !important; background: #1C1330 !important; } html.app-dark .limit18-card { max-width: 560px !important; padding: 2.6rem 2.4rem 2rem !important; } html.app-dark .limit18-info1 { font-size: 1.5rem !important; } html.app-dark .limit18-info2 { font-size: 1.05rem !important; } /* 2026-07-24 扁平化:去毛玻璃/辉光/金玫渐变(压 limit18.html 内联无 !important 规则) */ html.app-dark .limit18-card { background: #221838 !important; border: 1px solid #4A3568 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.app-dark .limit18-logo { box-shadow: none !important; } html.app-dark .limit18-badge { background: #E01B5A !important; color: #fff !important; box-shadow: none !important; } html.app-dark .limit18-btn { background: #FF3D8A !important; color: #fff !important; box-shadow: none !important; } } /* ============================================================ Task 9 · 页面级弹层扁平补充(2026-07-24) 这些弹层皮肤在各页面 anime css(子模板 css 块比本文件后载), 同 !important 拼源序会输 → 统一 html.app-dark.pc-modal 3 类前缀压制。仅 pc-detail iframe 内出现(退出确认=settings、写点评=game-detail),手机端零改动。 ============================================================ */ /* 退出登录确认(layui, settings_anime.css) */ html.app-dark.pc-modal .layui-layer.logout-confirm-dialog { background: #221838 !important; border: 1px solid #4A3568 !important; box-shadow: none !important; } html.app-dark.pc-modal .layui-layer.logout-confirm-dialog .layui-layer-content { text-shadow: none !important; } html.app-dark.pc-modal .layui-layer.logout-confirm-dialog .layui-layer-btn0 { background: #7C3AED !important; color: #fff !important; box-shadow: none !important; } html.app-dark.pc-modal .layui-layer.logout-confirm-dialog .layui-layer-btn1 { background: #261C42 !important; color: #C9BEDD !important; border: 1px solid #4A3568 !important; } /* 写点评弹层(game-detail_anime.css)。2026-07-27 用户反馈整体太深:面板抬亮到 #221838、内部块 #2C2148、描边 #4A3568,与页面底 #1C1330 拉开明度层次(部件细则在 game-detail_pc.css 同步) */ html.app-dark.pc-modal .review-sheet { background: #221838 !important; border: 1px solid #4A3568 !important; box-shadow: none !important; } html.app-dark.pc-modal .review-sheet-input { background: #2C2148 !important; border: 1.5px solid #453466 !important; } html.app-dark.pc-modal .review-sheet-input:focus { border-color: #9F6BFF !important; box-shadow: none !important; } html.app-dark.pc-modal .review-submit { background: #7C3AED !important; color: #fff !important; border: 0 !important; box-shadow: none !important; } html.app-dark.pc-modal .review-submit:disabled { background: #2C2148 !important; color: #8B7EA5 !important; } /* ============================================================ Task 7 · 旗舰活动公告(article/index 在 pc-detail iframe,html.pc-modal) 对话框中档 960(pc-detail-modal.css .pc-dm-mid)。此处:解 500 锁 + 铺不透明底 + 卡片 flex 网格(1 条铺满/多条两列)。不改 body(避免误伤其它 iframe)。 2026-07-24 对齐 PC 首页扁平风(index_pc.css 2026-07-23 扁平改造):去粉色辉光/ 聚光带/玻璃模糊,底=首页同款深梅径向,选中态=实心粉 #FF3D8A,标签=首页公告模块实心色。注意:子模板 css(user_pages_anime 等)在 base.html 里比本文件后加载,同 !important 拼顺序会输,故这批覆盖统一用 html.app-dark.pc-modal(3 类)压 html.app-dark(2 类)。 ============================================================ */ /* 底色: 首页同款单一暗部径向(index_pc.css .page-container),不透明盖住 user_pages_anime 给 body 的四叠粉色辉光(min-height:100vh 保证铺满) */ html.app-dark.pc-modal .invest_record_page { max-width: none !important; min-height: 100vh !important; background: #1C1330 !important; } /* 顶栏: 去玻璃模糊/投影 → 扁平 + 首页同款白透分隔线 */ html.app-dark.pc-modal .page_header { background: #2E234C !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-bottom: 1px solid #453466 !important; } /* 分段切换: 选中=首页下载按钮同款实心粉(去金玫渐变/光晕),未选中=扁平白透 */ html.app-dark.pc-modal .ac-tab { color: #C9BEDD !important; background: #261C42 !important; border: 1px solid #3B2C5C !important; } html.app-dark.pc-modal .ac-tab.active { color: #D7C9F5 !important; background: #3D1F63 !important; border-color: transparent !important; box-shadow: none !important; } /* 卡片: 去渐变/辉光/金描边 → 实心深梅 + 白透描边 */ html.app-dark.pc-modal .article-card { background: #261C42 !important; border: 1px solid #3B2C5C !important; box-shadow: none !important; } html.app-dark.pc-modal .ac-thumb { border-color: #3B2C5C !important; } html.app-dark.pc-modal .ac-thumb.empty { background: #261C42 !important; } /* 分类标签: 首页「公告福利」模块同款实心色(index_pc.css category2~5),去发光描边 */ html.app-dark.pc-modal .ac-tag { border-color: transparent !important; } html.app-dark.pc-modal .ac-tag.category-activity { color: #fff !important; background: #E01B5A !important; } html.app-dark.pc-modal .ac-tag.category-notice { color: #fff !important; background: #7C3AED !important; } html.app-dark.pc-modal .ac-tag.category-news { color: #fff !important; background: #2F7A8E !important; } html.app-dark.pc-modal .ac-tag.category-guide { color: #fff !important; background: #A855F7 !important; } html.pc-modal .ac-tabs { padding: 16px 20px 4px !important; } /* flex 而非 grid:1 条公告时 flex-grow 铺满整行(避免 auto-fit 因 .ac-end 跨列不折叠而"左挤右空"), 多条时自动分列。 */ html.pc-modal .ac-list { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; padding: 16px 20px 24px !important; align-items: stretch !important; } html.pc-modal .ac-list .article-card { flex: 1 1 300px !important; margin: 0 !important; } html.pc-modal .ac-list .ac-end, html.pc-modal .ac-list .no_invest_info { flex-basis: 100% !important; width: 100% !important; } /* ============================================================ Task 10 · 统一弹窗「主框架」底色 = 活动公告同款(2026-07-24) 所有 PC 弹窗 iframe(游戏详情/消息/设置/公告等)的页面底色,统一成活动公告 (article/index)那句「单层深酒红扁平径向」,盖住各页 *_anime 铺在 body 上的多层亮粉发光,并去掉 .main-container 角落浮动装饰(玫瑰/蝴蝶/月亮),让所有主框架看起来是一家人。仅 html.app-dark.pc-modal(弹窗 iframe)生效——独立页/手机端天然无 pc-modal 类,零影响。特异度 (0,2,2)/(0,3,3) 稳压各页 anime 的 html.app-dark body / .main-container::before。活动公告 .invest_record_page 自带同款底色且盖住 body,此处 body 规则对其不可见、无副作用。 ============================================================ */ html.app-dark.pc-modal body { background: #1C1330 !important; background-attachment: fixed !important; } html.app-dark.pc-modal .main-container::before { background-image: none !important; animation: none !important; } /* ============================================================ Task 13 · 修改密码表单子页(pc-dm-form 紧凑对话框, 2026-07-24) (11/12 已被并行落盘的 vipm/设置段占用;文件内按写入时序非位置排号) 这类手机页=100vh 弹性列 + 内联 style="flex:1" 撑挡把主按钮压到视口底, 进 PC 弹窗后成了「表单在顶、按钮沉底、中间大空白」。此处配合 pc-detail-modal.css 的 520×460 紧凑档(user/password 才切,切档在 pc-detail-modal.js):解 500 容器锁让顶栏铺满对话框、隐藏内联撑挡让按钮紧跟表单、卡片/按钮居中限宽。设置弹窗留在 narrow 720,由 Task 12 负责,此处只共享「内联撑挡隐藏」防退出键沉底。仅 html.pc-modal(弹窗 iframe);手机端/独立页无此类,零改动。 ============================================================ */ /* 页容器铺满对话框(原 max-width:500 手机锁会让内容左贴、标题却居中在对话框中线) */ html.pc-modal .update_pwd_page { max-width: none !important; width: 100% !important; } /* 内联撑挡(flex:1 垫高 + 底部 70/85px 占位)一律隐藏 → 主按钮跟内容走,不再沉底 (设置页若后续把撑挡改成类名此条自动失效,不与 Task 12 冲突) */ html.pc-modal .update_pwd_page .page_body > div[style], html.pc-modal .settings-page .page_body > div[style] { display: none !important; } /* 修改密码:表单卡居中限宽,确定键同宽紧跟其下 */ html.pc-modal .update_pwd_page .password-container { width: calc(100% - 56px) !important; max-width: 440px !important; margin: 22px auto 0 !important; } html.pc-modal .update_pwd_page .update_pwd_btn { display: block; width: calc(100% - 56px) !important; max-width: 440px !important; margin: 26px auto 32px !important; } /* ============================================================ Task 12 · 设置弹窗宽屏适配(user/set, narrow 720 iframe, 2026-07-24) (编号跳过 11:与并行落盘的 Task 11 vipm 段错开,文件内按写入时序非位置排号) 作用域=settings.html 给 .main-container 加的专属类 .settings-page, 不碰同 iframe 家族的消息/详情/搜索页。手机端无 pc-modal 类,零改动。布局:解 settings.css .main-container 500px 锁 → 内容列 620 居中; 风格对齐一级页面 user-center_pc:卡片=深梅渐变+玫瑰金细描边圆角卡, 标题 #F2EEFA 800 去 serif/辉光,CTA=扁平实心粉 #FF3D8A(全站 PC 弹窗统一)。 settings_anime.css 比本文件后载且多 !important → 全部用 3 类前缀压制。 ============================================================ */ /* 解宽度锁,铺满 720 iframe */ html.app-dark.pc-modal .settings-page { max-width: none !important; width: 100% !important; } /* 内容列:620 居中,收顶部留白 */ html.app-dark.pc-modal .settings-page .page_body { width: 100% !important; max-width: 620px !important; margin: 0 auto !important; padding: 20px 24px 0 !important; gap: 16px !important; align-items: stretch !important; } /* 页眉标题:对齐一级页面标题语言(sans 800 奶白),去 serif/粉辉光 */ html.app-dark.pc-modal .settings-page .header_title { font-family: inherit !important; font-size: 16px !important; font-weight: 800 !important; /* 2026-07-25 对齐 Task 22 1A 标题栏 */ color: #F2EEFA !important; text-shadow: none !important; } /* 分区标题:user-center_pc 区块头同款 16px/800/#F2EEFA,去 serif/文字投影 */ html.app-dark.pc-modal .settings-page .section-title { font-family: inherit !important; font-size: 15px !important; font-weight: 800 !important; color: #F2EEFA !important; text-shadow: none !important; padding: 0 2px 8px !important; } /* 单元格 → 一级页面同款圆角卡(深梅渐变+玫瑰金细描边),去"贴条+底部分隔线"手机形态 */ html.app-dark.pc-modal .settings-page .cell { background: #261C42 !important; border: 1px solid #3B2C5C !important; border-radius: 0 !important; padding: 13px 16px !important; transition: background .16s ease, border-color .16s ease; } html.app-dark.pc-modal .settings-page .cell:hover { background: #332552 !important; border-color: #4A3568 !important; } html.app-dark.pc-modal .settings-page .cell + .cell { margin-top: 12px !important; } html.app-dark.pc-modal .settings-page .cell-label { font-size: 14px !important; color: #F2EEFA !important; } html.app-dark.pc-modal .settings-page .cell-value { font-size: 13px !important; color: #9A8FB5 !important; } html.app-dark.pc-modal .settings-page .cell-icon { width: 20px !important; height: 20px !important; margin-right: 10px !important; } html.app-dark.pc-modal .settings-page .chevron { width: 16px !important; height: 16px !important; } /* 退出登录:金玫渐变→全站 PC 弹窗统一扁平实心粉,收手机端 70px 底部间隙 */ html.app-dark.pc-modal .settings-page .primary-button { background: #7C3AED !important; color: #fff !important; height: 42px !important; border-radius: 0 !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; margin-bottom: 32px !important; } html.app-dark.pc-modal .settings-page .page-bottom-gap { height: 0 !important; } /* ============================================================ Task 11 · 会员开通/续购弹窗(vipm) + 购买成功/即将到期(vipd) 手机端是全屏金褐 bottom-sheet(v2/vip-modal.css);PC 收成居中扁平圆角卡, 皮肤对齐全站深酒红(面板=深梅径向+白透描边,CTA/选中态=实心粉 #FF3D8A, 金只留价格强调 #FFB020),去套餐卡玻璃高光/浮起投影与 CTA 金玫渐变光晕。 vip-modal.css 在子模板 css 块比本文件后载,同特异性拼源序会输 → 顶层块选择器统一带 .vipm/.vipd-mask 祖先加一级,iframe 块统一 html.app-dark.pc-modal 3 类前缀(同 Task 9/10)。手机端零改动。 ============================================================ */ @media (min-width: 1024px) { /* ---------- 遮罩 ---------- */ html.app-dark .vipm-mask, html.app-dark .vipd-mask { background: rgba(7,5,12,0.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } /* ---------- 面板:全屏底片 → 居中圆角卡 ---------- 基态下移 4% + 透明,show 归位淡入(对齐 fb-modal 出场语言), height:auto 随内容收,超 86vh 由 .vipm-scroll 内滚 */ html.app-dark .vipm { left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; width: 600px !important; max-width: calc(100vw - 48px) !important; height: auto !important; max-height: 86vh !important; margin: 0 !important; background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; transform: translate(-50%, -46%) !important; opacity: 0 !important; visibility: hidden !important; transition: transform .3s ease, opacity .3s ease, visibility .3s ease !important; } html.app-dark .vipm.show { transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; } html.app-dark .vipm-scroll { padding: 0 22px 20px !important; scrollbar-width: thin; scrollbar-color: #4A3568 transparent; } html.app-dark .vipm-scroll::-webkit-scrollbar { width: 6px; } html.app-dark .vipm-scroll::-webkit-scrollbar-thumb { background: #4A3568; border-radius: 0; } html.app-dark .vipm-scroll::-webkit-scrollbar-track { background: transparent; } /* 返回键:去圆底 → 纯字形(对齐详情弹窗关闭 ×)。 font-size:0 隐掉文本 ‹(否则顶掉 v2_pc 的同名 0 规则,‹× 双字形并排),× 走 ::after */ html.app-dark .vipm .vipm-back { background: #3D1F63 !important; color: #fff !important; font-size: 0 !important; border-radius: 0 !important; } html.app-dark .vipm .vipm-back::after { content: "×"; font-size: 22px; line-height: 32px; } /* ---------- 标题区:字体对齐 .popup-title/.popup-content ---------- */ html.app-dark .vipm .vipm-title { color: #F2EEFA !important; font-size: 17px !important; } html.app-dark .vipm .vipm-subtitle { color: #B6A8CC !important; font-size: 13px !important; } /* ---------- 当前状态卡 ---------- */ html.app-dark .vipm .vipm-current { box-shadow: none !important; } html.app-dark .vipm .vipm-cur-l1 { color: #B6A8CC !important; font-size: 13px !important; } html.app-dark .vipm .vipm-cur-l1 b { color: #F2EEFA; } html.app-dark .vipm .vipm-current-green .vipm-cur-l1 b { color: #4ADE80 !important; } html.app-dark .vipm .vipm-cur-l2 { color: #F2EEFA !important; font-size: 14px !important; } html.app-dark .vipm .vipm-cur-l3 { color: #8B7EA5 !important; font-size: 12px !important; } html.app-dark .vipm .vipm-cur-btn { background: transparent !important; border: 1px solid #4A3568 !important; color: #C9BEDD !important; font-size: 12px !important; } /* ---------- 分区行 ---------- */ html.app-dark .vipm .vipm-sec-title { color: #F2EEFA !important; font-size: 15px !important; } html.app-dark .vipm .vipm-sec-hint { color: #B6A8CC !important; font-size: 12px !important; } /* ---------- 套餐卡:去玻璃高光/浮起投影 → 扁平白透卡,选中=实心粉 ---------- */ html.app-dark .vipm .vipm-pkg { background: #261C42 !important; border: 1.5px solid #453466 !important; box-shadow: none !important; } html.app-dark .vipm .vipm-pkg::before { content: none !important; } html.app-dark .vipm .vipm-pkg.on { border-color: #7C3AED !important; background: #3D1F63 !important; box-shadow: none !important; } html.app-dark .vipm .vipm-pkg-name { color: #F2EEFA !important; font-size: 15px !important; } html.app-dark .vipm .vipm-pkg-price { color: #FFB020 !important; } html.app-dark .vipm .vipm-pkg-origin { color: #8B7EA5 !important; font-size: 12px !important; } html.app-dark .vipm .vipm-pkg-daily { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark .vipm .vipm-pkg-badge { background: #E01B5A !important; } html.app-dark .vipm .vipm-tag-gold { background: #3D1F63 !important; color: #FFB020 !important; } /* ---------- 权益盒 ---------- */ html.app-dark .vipm .vipm-benefits { box-shadow: none !important; border-color: #3B2C5C !important; } html.app-dark .vipm .vipm-benefits-title { color: #F2EEFA !important; } html.app-dark .vipm .vipm-benefit-row { color: #B6A8CC !important; font-size: 13px !important; } html.app-dark .vipm .vipm-benefit-row b { color: #F2EEFA; } /* ---------- 支付方式:选中金 → 粉 ---------- */ html.app-dark .vipm .vipm-pay { background: #261C42 !important; border: 1.5px solid #453466 !important; } html.app-dark .vipm .vipm-pay.on { border-color: #7C3AED !important; background: #3D1F63 !important; } html.app-dark .vipm .vipm-pay-name { color: #F2EEFA !important; font-size: 13.5px !important; } html.app-dark .vipm .vipm-pay.on .vipm-radio { border-color: #7C3AED !important; } html.app-dark .vipm .vipm-pay.on .vipm-radio::after { background: #7C3AED !important; } /* ---------- 规则说明 ---------- */ html.app-dark .vipm .vipm-note-title { color: #A855F7 !important; font-size: 13px !important; } html.app-dark .vipm .vipm-note p { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark .vipm .vipm-note b { color: #F2EEFA !important; } /* ---------- 底部支付条:黑褐实底 → 透出面板底 + 细白透分隔 ---------- */ html.app-dark .vipm .vipm-bar { background: transparent !important; border-top: 1px solid #342A54 !important; padding: 14px 28px 18px !important; } html.app-dark .vipm .vipm-bar-note { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark .vipm .vipm-bar-price { color: #B6A8CC !important; } html.app-dark .vipm .vipm-bar-price b { color: #FFB020 !important; } html.app-dark .vipm .vipm-bar-price s { color: #8B7EA5 !important; } /* 确认支付 CTA:金玫渐变+玫红光晕+光泽条 → 实心粉扁平 */ html.app-dark .vipm .vipm-pay-btn { background: #FF3D8A !important; color: #fff !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } html.app-dark .vipm .vipm-pay-btn::before { content: none !important; } /* ---------- vipd 居中小弹窗(购买成功/即将到期):同皮 ---------- */ html.app-dark .vipd-mask .vipd { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; max-width: 380px !important; } html.app-dark .vipd-mask .vipd-title { color: #F2EEFA !important; font-size: 16px !important; } html.app-dark .vipd-mask .vipd-x { color: #8B7EA5 !important; } html.app-dark .vipd-mask .vipd-primary, html.app-dark .vipd-mask .vipd-primary-orange { background: #FF3D8A !important; color: #fff !important; box-shadow: none !important; } html.app-dark .vipd-mask .vipd-link { color: #9A8FB5 !important; } /* 内嵌卡:金/橙 tint → 白透扁平 */ html.app-dark .vipd-mask .vipd-success-card, html.app-dark .vipd-mask .vipd-expire-body { background: #261C42 !important; border: 1px solid #3B2C5C !important; } html.app-dark .vipd-mask .vipd-success-l1, html.app-dark .vipd-mask .vipd-success-l2, html.app-dark .vipd-mask .vipd-success-note { color: #B6A8CC !important; } html.app-dark .vipd-mask .vipd-success-l1 b { color: #F2EEFA !important; } html.app-dark .vipd-mask .vipd-success-date { color: #FFB020 !important; } html.app-dark .vipd-mask .vipd-expire-hero { border-bottom-color: #342A54 !important; } html.app-dark .vipd-mask .vipd-expire-days-line { color: #B6A8CC !important; } html.app-dark .vipd-mask .vipd-expire-days-num { color: #FF3D8A !important; } html.app-dark .vipd-mask .vipd-expire-date { color: #FFB020 !important; } html.app-dark .vipd-mask .vipd-expire-lose { color: #F2EEFA !important; } html.app-dark .vipd-mask .vipd-expire-list li { color: #B6A8CC !important; } html.app-dark .vipd-mask .vipd-expire-ok { color: #4ADE80 !important; } } /* ---- Task 11 · pc-modal 镜像(game-detail / vip 说明页 iframe 内会弹) ---- */ html.app-dark.pc-modal .vipm-mask, html.app-dark.pc-modal .vipd-mask { background: rgba(7,5,12,0.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } html.app-dark.pc-modal .vipm { left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; width: 600px !important; max-width: calc(100vw - 48px) !important; height: auto !important; max-height: 86vh !important; margin: 0 !important; background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; transform: translate(-50%, -46%) !important; opacity: 0 !important; visibility: hidden !important; transition: transform .3s ease, opacity .3s ease, visibility .3s ease !important; } html.app-dark.pc-modal .vipm.show { transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; } html.app-dark.pc-modal .vipm-scroll { padding: 0 22px 20px !important; scrollbar-width: thin; scrollbar-color: #4A3568 transparent; } html.app-dark.pc-modal .vipm-scroll::-webkit-scrollbar { width: 6px; } html.app-dark.pc-modal .vipm-scroll::-webkit-scrollbar-thumb { background: #4A3568; border-radius: 0; } html.app-dark.pc-modal .vipm-scroll::-webkit-scrollbar-track { background: transparent; } html.app-dark.pc-modal .vipm-back { background: #3D1F63 !important; color: #fff !important; font-size: 0 !important; border-radius: 0 !important; } html.app-dark.pc-modal .vipm-back::after { content: "×"; font-size: 22px; line-height: 32px; } html.app-dark.pc-modal .vipm-title { color: #F2EEFA !important; font-size: 17px !important; } html.app-dark.pc-modal .vipm-subtitle { color: #B6A8CC !important; font-size: 13px !important; } html.app-dark.pc-modal .vipm-current { box-shadow: none !important; } html.app-dark.pc-modal .vipm-cur-l1 { color: #B6A8CC !important; font-size: 13px !important; } html.app-dark.pc-modal .vipm-cur-l1 b { color: #F2EEFA; } html.app-dark.pc-modal .vipm-current-green .vipm-cur-l1 b { color: #4ADE80 !important; } html.app-dark.pc-modal .vipm-cur-l2 { color: #F2EEFA !important; font-size: 14px !important; } html.app-dark.pc-modal .vipm-cur-l3 { color: #8B7EA5 !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-cur-btn { background: transparent !important; border: 1px solid #4A3568 !important; color: #C9BEDD !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-sec-title { color: #F2EEFA !important; font-size: 15px !important; } html.app-dark.pc-modal .vipm-sec-hint { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-pkg { background: #261C42 !important; border: 1.5px solid #453466 !important; box-shadow: none !important; } html.app-dark.pc-modal .vipm-pkg::before { content: none !important; } html.app-dark.pc-modal .vipm-pkg.on { border-color: #7C3AED !important; background: #3D1F63 !important; box-shadow: none !important; } html.app-dark.pc-modal .vipm-pkg-name { color: #F2EEFA !important; font-size: 15px !important; } html.app-dark.pc-modal .vipm-pkg-price { color: #FFB020 !important; } html.app-dark.pc-modal .vipm-pkg-origin { color: #8B7EA5 !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-pkg-daily { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-pkg-badge { background: #E01B5A !important; } html.app-dark.pc-modal .vipm-tag-gold { background: #3D1F63 !important; color: #FFB020 !important; } html.app-dark.pc-modal .vipm-benefits { box-shadow: none !important; border-color: #3B2C5C !important; } html.app-dark.pc-modal .vipm-benefits-title { color: #F2EEFA !important; } html.app-dark.pc-modal .vipm-benefit-row { color: #B6A8CC !important; font-size: 13px !important; } html.app-dark.pc-modal .vipm-benefit-row b { color: #F2EEFA; } html.app-dark.pc-modal .vipm-pay { background: #261C42 !important; border: 1.5px solid #453466 !important; } html.app-dark.pc-modal .vipm-pay.on { border-color: #7C3AED !important; background: #3D1F63 !important; } html.app-dark.pc-modal .vipm-pay-name { color: #F2EEFA !important; font-size: 13.5px !important; } html.app-dark.pc-modal .vipm-pay.on .vipm-radio { border-color: #7C3AED !important; } html.app-dark.pc-modal .vipm-pay.on .vipm-radio::after { background: #7C3AED !important; } html.app-dark.pc-modal .vipm-note-title { color: #A855F7 !important; font-size: 13px !important; } html.app-dark.pc-modal .vipm-note p { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-note b { color: #F2EEFA !important; } html.app-dark.pc-modal .vipm-bar { background: transparent !important; border-top: 1px solid #342A54 !important; padding: 14px 28px 18px !important; } html.app-dark.pc-modal .vipm-bar-note { color: #B6A8CC !important; font-size: 12px !important; } html.app-dark.pc-modal .vipm-bar-price { color: #B6A8CC !important; } html.app-dark.pc-modal .vipm-bar-price b { color: #FFB020 !important; } html.app-dark.pc-modal .vipm-bar-price s { color: #8B7EA5 !important; } html.app-dark.pc-modal .vipm-pay-btn { background: #FF3D8A !important; color: #fff !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } html.app-dark.pc-modal .vipm-pay-btn::before { content: none !important; } html.app-dark.pc-modal .vipd { background: #221838 !important; border: 1px solid #4A3568 !important; border-radius: 0 !important; box-shadow: none !important; max-width: 380px !important; } html.app-dark.pc-modal .vipd-title { color: #F2EEFA !important; font-size: 16px !important; } html.app-dark.pc-modal .vipd-x { color: #8B7EA5 !important; } html.app-dark.pc-modal .vipd-primary, html.app-dark.pc-modal .vipd-primary-orange { background: #FF3D8A !important; color: #fff !important; box-shadow: none !important; } html.app-dark.pc-modal .vipd-link { color: #9A8FB5 !important; } html.app-dark.pc-modal .vipd-success-card, html.app-dark.pc-modal .vipd-expire-body { background: #261C42 !important; border: 1px solid #3B2C5C !important; } html.app-dark.pc-modal .vipd-success-l1, html.app-dark.pc-modal .vipd-success-l2, html.app-dark.pc-modal .vipd-success-note { color: #B6A8CC !important; } html.app-dark.pc-modal .vipd-success-l1 b { color: #F2EEFA !important; } html.app-dark.pc-modal .vipd-success-date { color: #FFB020 !important; } html.app-dark.pc-modal .vipd-expire-hero { border-bottom-color: #342A54 !important; } html.app-dark.pc-modal .vipd-expire-days-line { color: #B6A8CC !important; } html.app-dark.pc-modal .vipd-expire-days-num { color: #FF3D8A !important; } html.app-dark.pc-modal .vipd-expire-date { color: #FFB020 !important; } html.app-dark.pc-modal .vipd-expire-lose { color: #F2EEFA !important; } html.app-dark.pc-modal .vipd-expire-list li { color: #B6A8CC !important; } html.app-dark.pc-modal .vipd-expire-ok { color: #4ADE80 !important; } /* ============================================================ 下载/购买弹窗族宽屏改造(2026-07-24 用户定):#dlModal/#tplayModal/#cmBuyModal 面板已加宽到 680(见上 max-width);选项 .dl-options 由竖排 → flex 换行「并排」: · 2 个选项(如购买|升级、支付宝|微信) → 各半并排; · 3 个(安卓|PC 并排 + 升级) → 末个 flex-grow 自动铺满整行做底部横幅。仅 PC:@media≥1024(顶层/独立详情页) + html.pc-modal(pc-detail iframe)。手机端竖排不动。 ============================================================ */ @media (min-width: 1024px) { html.app-dark #dlModal .dl-options, html.app-dark #tplayModal .dl-options, html.app-dark #cmBuyModal .dl-options { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; align-content: start !important; /* 行高=内容高,别拉伸填满弹窗(否则卡片变巨高) */ gap: 12px !important; } html.app-dark #dlModal .dl-options > .dl-option, html.app-dark #tplayModal .dl-options > .dl-option, html.app-dark #cmBuyModal .dl-options > .dl-option { width: auto !important; min-width: 0 !important; margin: 0 !important; align-self: start !important; } /* 奇数个时最后一项(通常是升级促销)铺满整行做底部横幅 */ html.app-dark #dlModal .dl-options > .dl-option:last-child:nth-child(odd), html.app-dark #tplayModal .dl-options > .dl-option:last-child:nth-child(odd), html.app-dark #cmBuyModal .dl-options > .dl-option:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } } html.pc-modal #dlModal .dl-options, html.pc-modal #tplayModal .dl-options, html.pc-modal #cmBuyModal .dl-options { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; align-content: start !important; gap: 12px !important; } html.pc-modal #dlModal .dl-options > .dl-option, html.pc-modal #tplayModal .dl-options > .dl-option, html.pc-modal #cmBuyModal .dl-options > .dl-option { width: auto !important; min-width: 0 !important; margin: 0 !important; align-self: start !important; } html.pc-modal #dlModal .dl-options > .dl-option:last-child:nth-child(odd), html.pc-modal #tplayModal .dl-options > .dl-option:last-child:nth-child(odd), html.pc-modal #cmBuyModal .dl-options > .dl-option:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } /* ============================================================ Task 14 · 邀请好友弹窗宽屏两列(invitation/invite_friends, 2026-07-24) c331a5ea 只做了路由(720 窄档),页内仍是 500px 手机单列长滚动。本段配合 pc-detail-modal.js 将其升到 .pc-dm-mid 960,页内改两列网格: 顶部横幅/好友列表通栏,左列=奖励规则+邀请技巧,右列=邀请码+邀请数据 (右列卡随行高伸展,内容 flex 垂直居中,避免高度差露缝)。页面自带深色皮(模板内 html.app-dark 段)只管配色,此处只动布局; 卡片原 margin:12px 归零改用 grid gap。仅 html.pc-modal,手机端零改动。 ============================================================ */ html.pc-modal .ivt-page { max-width: 900px !important; margin: 0 auto !important; padding: 20px 24px 36px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-content: start; } /* 顶部横幅通栏,切圆角成卡(手机端是通到屏边的 banner) */ html.pc-modal .ivt-page .ivt-top { grid-column: 1 / -1; grid-row: 1; border-radius: 0; overflow: hidden; } /* 卡片原 margin 归零(含 :first-of-type 的 -10px 上提),间距交给 gap */ html.pc-modal .ivt-page > .ivt-card, html.pc-modal .ivt-page > .ivt-tips { margin: 0 !important; } /* 行号显式钉死:自动放置在「col2 之后回 col1」时游标会进下一行, 导致技巧卡掉到 row4、row3 左列空洞,故逐块指定。 (.ivt-tips 两个变体 empty/data 同位,同一时刻只显示一个,不冲突) */ html.pc-modal .ivt-page > .ivt-reward-card { grid-column: 1; grid-row: 2; } html.pc-modal .ivt-page > .ivt-tips { grid-column: 1; grid-row: 3; } /* 右列:邀请码 + 邀请数据(随行伸展,内容垂直居中) */ html.pc-modal .ivt-page > .ivt-code-card, html.pc-modal .ivt-page > .ivt-stats-card { display: flex; flex-direction: column; justify-content: center; } html.pc-modal .ivt-page > .ivt-code-card { grid-column: 2; grid-row: 2; } html.pc-modal .ivt-page > .ivt-stats-card { grid-column: 2; grid-row: 3; } /* 好友列表通栏 */ html.pc-modal .ivt-page > .ivt-friends-card { grid-column: 1 / -1; grid-row: 4; } /* 横幅内部:宽卡里加点呼吸感 */ html.pc-modal .ivt-hero { padding: 10px 28px 26px !important; } html.pc-modal .ivt-hero-gift { font-size: 92px !important; } /* 规则说明弹窗:340 手机宽 → 420 */ html.pc-modal .ivt-rule-box { max-width: 420px !important; } /* 返回键「‹」→ 关闭 ×(点击关弹窗已由 pc-detail-modal.js 处理;同 vipm-back 做法: font-size:0 隐文本 ‹,::after 画 ×;3 类前缀压 invite_friends_anime 的 text-shadow/padding-bottom 光学补偿,inline-flex 居中沿用其规则) */ html.app-dark.pc-modal .ivt-back { font-size: 0 !important; text-shadow: none !important; padding-bottom: 0 !important; } html.app-dark.pc-modal .ivt-back::after { content: "×"; font-size: 26px; line-height: 1; color: #fff; } /* ============================================================ Task 15 · 订单记录弹窗宽屏适配(vip/order_list, narrow 720 iframe, 2026-07-24) 续购弹窗(vipm)「订单记录」在 PC 由 pc-detail-modal.js 拦截,720 窄档 iframe 打开(整页跳转只留手机端)。手机版单列窄卡在 720 里一条通栏拉太宽:列表改 flex 换行两列(公告列表 Task 7 同款,末行自动铺满),卡片扁平化对齐全站 (实心深梅+白透描边,去页内渐变/金描边/投影辉光),金额=vipm 价格同款金 #FFB020。页内