/* 首页(推荐页) PC 版正式适配 —— 仅本文件、仅首页引入、仅 min-width:1024px 生效。改动后 bump ?v=。 目标：真·PC 版（元素大小合理、用宽屏展示数据），中等密度。 首页走 base.html（不走 layout.html），故侧栏规则在本文件自带一份（与 v2_pc.css 同款）。 选择器统一 html.app-dark 前缀（ 恒带 app-dark），配合足够特异性压过 index_anime.css。 */ @media (min-width: 1024px) { /* ================= 左侧竖栏（底部 tab → 左侧 200px）================= */ html.app-dark .bottom-nav { flex-direction: column !important; justify-content: flex-start !important; top: 0 !important; bottom: auto !important; left: 0 !important; transform: none !important; width: 200px !important; max-width: 200px !important; height: 100vh !important; padding: 24px 0 !important; box-shadow: 2px 0 12px rgba(0,0,0,.12) !important; gap: 6px; } html.app-dark .bottom-nav .nav-item { flex: 0 0 auto !important; flex-direction: row !important; justify-content: flex-start !important; gap: 14px; width: 100%; height: 52px; padding: 0 26px !important; box-sizing: border-box; } html.app-dark .bottom-nav .nav-label { font-size: 15px !important; } /* ================= 内容框架：填满侧栏右侧、封顶 1600 居中 ================= */ /* 解锁全站 500px body 锁 + 让位侧栏；用 body padding-left（而非 page-container margin）避免盒模型溢出。 ⚠️ body 必须 border-box：否则 width:100%(=视口) + padding-left:200 会让 body 总宽=视口+200， 内容被顶向右、与其它页(其 _pc 都已显式 border-box)左边缘不对齐。 */ html.app-dark body { box-sizing: border-box !important; max-width: none !important; box-shadow: none !important; padding-left: 200px !important; } /* page-container 填满 body 内容盒(=视口−200)，border-box 防溢出；保留 base 的 align-items:center */ html.app-dark .page-container { max-width: none !important; box-sizing: border-box !important; } /* 内容封顶 1360 居中(方案A 门户式)；≤1360 填满 */ html.app-dark .mainHeader, html.app-dark .indexpage { max-width: 1360px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* 方案A：.indexpage 变两列 grid —— 通栏(欢迎横幅 + 轮播) + 左主区(栏目网格) + 右信息栏(公告 sticky)。 显式 grid-row 精确排位(避免 grid 稀疏自动排布把主区挤到下一行留空档)。 无需改模板：直接给 indexpage 的 4 个直接子节点定位。 */ html.app-dark .indexpage { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; column-gap: 24px !important; row-gap: 14px !important; align-items: start !important; align-content: start !important; } /* 横幅只占左主列、margin 清零(顶与右栏对齐)；空轮播占位隐藏(原型此处无轮播,消掉大空档)； 今日上架直接接在横幅下方；右栏 col2 从第 1 行贯穿(顶与横幅对齐)。 */ html.app-dark .indexpage > .em-hero { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; } html.app-dark .indexpage > .swiperHeader { display: none !important; } html.app-dark .indexpage > .games-container { grid-column: 1 !important; grid-row: 2 !important; min-width: 0 !important; margin-top: 0 !important; } html.app-dark .indexpage > .home-rail { grid-column: 2 !important; grid-row: 1 / span 2 !important; position: static !important; align-self: start !important; /* 随整页一起滚动，不再 sticky 固定 */ display: flex !important; flex-direction: column !important; gap: 16px !important; min-width: 0 !important; margin-top: 0 !important; } /* 公告卡顶部与 WELCOME 横幅顶对齐(去掉 base 的 margin-top:1.1rem) */ html.app-dark .home-rail .activity-module { margin-top: 0 !important; } /* 顶部留白：搜索栏上方 + 搜索栏↔横幅/右栏之间(横幅与右栏一起下移,保持顶对齐) —— 贴原型 */ html.app-dark .mainHeader { padding-top: 14px !important; } html.app-dark .indexpage { padding-top: 22px !important; } /* ================= 顶栏：桌面导航条 ================= */ html.app-dark .header_menu { display: flex !important; align-items: center !important; gap: 20px; padding: 10px 8px !important; } html.app-dark .header_menu .header_search { flex: 1 1 auto !important; max-width: 560px !important; } /* ================= 欢迎横幅 + 轮播 ================= */ html.app-dark .em-hero { margin: 16px 0 10px !important; padding: 22px 28px !important; min-height: 96px !important; } html.app-dark .swiperHeader { margin: 16px 0 10px !important; } /* .one .swiper-slide 用 padding-top:40% 撑高、img 是 absolute+object-fit:cover；限高改容器 */ html.app-dark .swiperHeader .one .swiper-slide { padding-top: 0 !important; height: 300px !important; } /* ================= 游戏栏目：中等密度多列 ================= */ /* 今日上架 = category_0（anime 用 .category_0[style] 锁成 3 列方图卡）。 用 .games-content.category_0[style]（特异性 0,4,1）压过 anime，并用 !important 覆盖 JS 内联 flow。 卡片(.game-item width:100%;aspect-ratio:1/1，anime 已定义)会自动填满每个网格格子。~5 列。 */ html.app-dark .games-content.category_0, html.app-dark .games-content.category_0[style] { display: grid !important; grid-auto-flow: row !important; grid-template-rows: none !important; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; column-gap: 12px !important; row-gap: 14px !important; } /* 竖海报 category_2：2 列 → 更小卡多列 */ html.app-dark .category_2 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; } /* 横大卡 category_3：单列全宽堆叠 → 更小卡多列网格；.up 海报改 16:9 随卡缩放 */ html.app-dark .category_3 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; align-items: stretch !important; gap: 16px !important; } html.app-dark .category_3 .game-item { width: 100% !important; } html.app-dark .category_3 .up { height: auto !important; aspect-ratio: 16 / 9 !important; } /* 推荐2 = category_1（swiper 横滑，PC 下单张会宽到 ~1450 太宽）→ 用 CSS 转成换行网格， 与其他栏目一致。覆盖 swiper 写的内联 transform(wrapper) / width+margin(slide)，让其按 grid 排布； swiper observer 重算的内联样式是非-important，被这里的 !important 压过。不改 JS。 */ html.app-dark .category_1 { overflow: visible !important; } html.app-dark .category_1 .swiper-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 14px !important; transform: none !important; } html.app-dark .category_1 .swiper-slide { width: auto !important; margin: 0 !important; height: auto !important; } /* ================= 公告区：单列·纯文字列表(不显示缩略图) ================= 手机版首条是大图 hero、其余带小缩略图；PC 下用户要「只文字、单列」。 → body 单列；隐藏所有缩略图；首条复位成与其余一致的普通文字行。 */ html.app-dark .activity-module .body { display: block !important; } /* 隐藏所有公告缩略图（含首条 hero 大图）*/ html.app-dark .activity-module .body .activity_article .activity_image { display: none !important; } /* 首条从大图 hero 复位成普通文字行(与其余行一致) */ html.app-dark .activity-module .body .activity_article:first-child { position: static !important; display: flex !important; align-items: center !important; gap: 12px !important; height: auto !important; padding: 11px 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; border-bottom: 1px solid rgba(255, 192, 159, 0.14) !important; } html.app-dark .activity-module .body .activity_article:first-child .activity_content { position: static !important; padding: 0 !important; background: none !important; } html.app-dark .activity-module .body .activity_article:first-child .activity_content .title { color: var(--acg-text-1) !important; font-size: 13.5px !important; font-weight: 600 !important; text-shadow: none !important; } /* 悬浮书签提示(请先添加到主屏幕):2026-07-28 用户指定 PC 放屏幕底部居中 (原挪右下);PC 无底部导航,底距收到 24px(手机端 base 的 ~70px 是给 tab 让位) */ html.app-dark .bookmark-btn { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 24px !important; } } /* ===== 卡片按稿子重做 2026-07-23（追加；在现有规则之后，平局取胜）===== */ @media (min-width: 1024px) { /* ① 推荐2 category_1：16:9 海报铺满 + 圆头像标题底栏 */ /* 2026-07-29 修正:原「锁固定 2 列」按推荐2 仅两张大横卡的稿子写死——正式服把「今日上架」 配成 category_1(swiper 型)且条目多,2 列巨卡+swiper 内联宽度没压干净 → 卡片大小不一、 横向溢出压到右栏(用户报正式服版面乱)。改为固定尺寸卡自动换行网格(每卡同宽、16:9 由 .game-item aspect-ratio 锁高),并带 [style] 变体把 swiper 写的内联 transform/width/margin 全部压死,不论后台把哪个栏目配成 category_1、配多少条,块大小恒定。 */ html.app-dark .category_1.swiper-container { height: auto !important; overflow: visible !important; } html.app-dark .category_1 .swiper-wrapper, html.app-dark .category_1 .swiper-wrapper[style] { display: grid !important; /* 2026-07-29 用户反馈 320 档卡太大:收到与 category_0 瓷砖同宽的 175 档(~6 列),间距同步 12/14 */ grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; grid-auto-flow: row !important; gap: 14px 12px !important; width: auto !important; height: auto !important; transform: none !important; } html.app-dark .category_1 .swiper-slide, html.app-dark .category_1 .swiper-slide[style] { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; height: auto !important; } html.app-dark .category_1 .game-item { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; border-radius: 14px !important; overflow: visible !important; /* 折角出血 */ box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; } html.app-dark .category_1 .game-item .game-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 14px !important; margin: 0 !important; } /* 底部渐变标题栏（.game-name 撑满底部） */ html.app-dark .category_1 .game-item .game-name { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; /* 用 block（非 flex）：text-overflow:ellipsis 对 flex 容器里的匿名文本节点不可靠 （anonymous flex item 的 min-width:auto 在 white-space:nowrap 下取 min-content=全文宽度， 导致溢出裁切但不出省略号、且忽略 padding-right）。block+单行 padding 定位更稳。 基线 .category_1 .game-name 自带 justify-content:center（index_category.css，flex 布局）， 改 block 后该属性自然失效，无需再显式覆盖。 */ display: block !important; padding: 22px 14px 17px 52px !important; /* 左留 52 给圆头像；上下 padding 配合 line-height 让单行文字纵向对齐圆头像中心 */ margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #fff !important; line-height: 17px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: linear-gradient(to top, rgba(20,8,16,.92) 0%, rgba(20,8,16,.55) 55%, transparent 100%) !important; border-radius: 0 0 14px 14px !important; z-index: 2 !important; box-sizing: border-box !important; } /* 圆头像（.game-icon 定位到底栏左侧） */ html.app-dark .category_1 .game-item .game-icon { position: absolute !important; left: 10px !important; bottom: 9px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid rgba(255,255,255,.85) !important; z-index: 3 !important; box-shadow: 0 2px 6px rgba(0,0,0,.4) !important; } /* 平台徽章右下（组件默认 right/bottom:9，稿子在标题栏上方 → 上抬避让底栏） */ html.app-dark .category_1 .game-item > .gpm-wrap { bottom: 46px !important; right: 9px !important; } /* ② 火热黄油 category_2：竖版封面卡 */ html.app-dark .category_2 { grid-template-columns: repeat(auto-fill, minmax(168px,1fr)) !important; gap: 16px !important; } html.app-dark .category_2 .gcm-cell { border-radius: 14px !important; } html.app-dark .category_2 .game-item { display: block !important; border-radius: 14px !important; overflow: visible !important; } html.app-dark .category_2 .cover { position: relative !important; width: 100% !important; aspect-ratio: 3/4 !important; height: auto !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 16px rgba(0,0,0,.26) !important; } html.app-dark .category_2 .cover .cover-img, html.app-dark .category_2 .cover .swiper-slide img { width:100% !important; height:100% !important; object-fit: cover !important; } /* 分类胶囊：封面左下浅色胶囊 */ html.app-dark .category_2 .cover .type-tag { position: absolute !important; left: 8px !important; bottom: 8px !important; top: auto !important; right: auto !important; background: rgba(248,232,216,.92) !important; border-radius: 999px !important; padding: 3px 10px !important; z-index: 3 !important; } html.app-dark .category_2 .cover .type-tag .tag-value { color: #b0486e !important; font: 700 11px/1 "PingFang SC",sans-serif !important; } /* 标题行 */ html.app-dark .category_2 .info { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 2px 2px !important; } html.app-dark .category_2 .info .icon { width: 26px !important; height: 26px !important; border-radius: 7px !important; flex: 0 0 auto !important; } html.app-dark .category_2 .info .name { font-size: 13px !important; font-weight: 600 !important; color: var(--acg-text-1,#fbeef2) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ④ 横大卡 category_3 */ html.app-dark .category_3 { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)) !important; gap: 16px !important; } html.app-dark .category_3 .game-item { background: linear-gradient(165deg, rgba(58,18,40,.72), rgba(42,15,31,.72)) !important; border: 1px solid rgba(255,209,159,.18) !important; border-radius: 16px !important; overflow: visible !important; padding: 0 0 10px !important; } html.app-dark .category_3 .up { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16/9 !important; height: auto !important; border-radius: 16px 16px 0 0 !important; overflow: hidden !important; } html.app-dark .category_3 .up .poster { width:100% !important; height:100% !important; object-fit: cover !important; margin:0 !important; } html.app-dark .category_3 .down { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px 2px !important; } html.app-dark .category_3 .down .icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; flex: 0 0 auto !important; } html.app-dark .category_3 .down .text { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; align-items: stretch !important; /* 基线 align-items:flex-start 会让子项按内容宽度撑出去、盖住去玩按钮 → 改拉伸撑满 */ } html.app-dark .category_3 .down .text .name { font-size: 14px !important; font-weight: 700 !important; color: #fbeef2 !important; width: auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html.app-dark .category_3 .down .text .desc { font-size: 12px !important; color: rgba(251,238,242,.6) !important; width: auto !important; /* 覆盖基线 width:95% 硬编码，配合 stretch 让省略号按实际可用宽裁 */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 2px !important; } html.app-dark .category_3 .down .play { flex: 0 0 auto !important; align-self: center !important; padding: 7px 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; background: linear-gradient(135deg,#B47CFF,#FF8FB1) !important; } /* ⑤ 右栏公告卡片化 */ html.app-dark .activity-module { background: linear-gradient(165deg,#3A1228,#2A0F1F) !important; border: 1px solid rgba(255,209,159,.22) !important; border-radius: 16px !important; padding: 14px 14px 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; } html.app-dark .activity-module .header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; } html.app-dark .activity-module .header .title { font-size: 15px !important; font-weight: 800 !important; color: #fbeef2 !important; border-left: 3px solid #FF8FB1 !important; padding-left: 8px !important; } html.app-dark .activity-module .header .more { font-size: 12px !important; color: rgba(251,238,242,.55) !important; } /* 首条(:first-child)也纳入：现有 index_pc.css:168-180 的 :first-child 规则(特异性 0,5,1)会把首条锁成 display:flex/旧分隔线，本处补 :first-child 变体(同特异性、更靠后)让首条与其余行一致。 .body{display:block} 已由 index_pc.css:160 定义，此处不重复。 */ html.app-dark .activity-module .body .activity_article, html.app-dark .activity-module .body .activity_article:first-child { display: block !important; padding: 10px 0 !important; border-bottom: 1px solid rgba(255,209,159,.12) !important; } html.app-dark .activity-module .body .activity_article:last-child { border-bottom: 0 !important; } html.app-dark .activity-module .body .activity_article .activity_up { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 5px !important; } /* 仅布局(尺寸/圆角/字重)，不设 color/background：真实页 .type.category2~5 的彩色文字+底色 由 index_anime.css 按分类区分(资讯青绿/活动暖金/公告玫红/攻略梦紫)，本选择器特异性更高， 若在此设 color 会连底色语义一并压平成同一种颜色，破坏活动/公告的可辨识度 */ html.app-dark .activity-module .body .activity_article .activity_up .type { font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 999px !important; } html.app-dark .activity-module .body .activity_article .activity_up .time { margin-left: auto !important; font-size: 11px !important; color: rgba(251,238,242,.45) !important; } html.app-dark .activity-module .body .activity_article .title, html.app-dark .activity-module .body .activity_article:first-child .activity_content .title { font-size: 13px !important; font-weight: 600 !important; color: #fbeef2 !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* 缩略图仍隐藏（右栏窄，保持列表密度）——沿用现有规则即可，无需重复 */ } /* ===== 向参考稿看齐：窄图标导航栏 2026-07-23 ===== */ @media (min-width: 1024px) { /* 左导航：200px 胖条 → 88px 窄图标栏（图标在上、小字在下）；body 让位同步收窄到 88 */ html.app-dark body { padding-left: 88px !important; } html.app-dark .bottom-nav { width: 88px !important; max-width: 88px !important; padding: 16px 0 !important; gap: 6px !important; align-items: center !important; } /* 导航栏顶部 LOGO 贴片：用站点 G 品牌图标(从 index_logo1 裁出的方形 G)。用 ::before 免改模板。 */ html.app-dark .bottom-nav::before { content: "" !important; display: block !important; flex: 0 0 auto !important; width: 48px !important; height: 48px !important; margin: 4px auto 18px !important; background: url('/themes/simpleboot3/mobilepublic/assets/images/common/nav_g_icon.png') no-repeat center / contain !important; border-radius: 0 !important; box-shadow: none !important; } html.app-dark .bottom-nav .nav-item { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 6px !important; width: 72px !important; height: 62px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 14px !important; } html.app-dark .bottom-nav .nav-item.active { background: linear-gradient(160deg, rgba(255,143,177,.20), rgba(180,124,255,.14)) !important; } html.app-dark .bottom-nav .nav-item .nav-icon { width: 24px !important; height: 24px !important; margin: 0 !important; } html.app-dark .bottom-nav .nav-label { font-size: 11px !important; line-height: 1 !important; margin: 0 !important; } } /* 手机端(<1024)：右栏是 PC 专属。包裹层 display:contents 透明化(公告在手机端仍按原流渲染)， 排行榜隐藏 → 手机端零视觉改动。以下两条【故意不在 @media 内】。 */ .home-rail { display: contents; } .home-rank { display: none; } /* ===== 向参考稿看齐：右栏「热游排行榜」卡 2026-07-23（复用 recommend_game 现有数据） ===== */ @media (min-width: 1024px) { html.app-dark .home-rank { display: block !important; background: linear-gradient(165deg, #3A1228, #2A0F1F) !important; border: 1px solid rgba(255,209,159,.22) !important; border-radius: 16px !important; padding: 14px 14px 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; } html.app-dark .home-rank .hr-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; } html.app-dark .home-rank .hr-title { font-size: 15px !important; font-weight: 800 !important; color: #fbeef2 !important; border-left: 3px solid #FF8FB1 !important; padding-left: 8px !important; } html.app-dark .home-rank .hr-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255,209,159,.1) !important; text-decoration: none !important; } html.app-dark .home-rank .hr-item:last-child { border-bottom: 0 !important; } html.app-dark .home-rank .hr-rank { width: 20px !important; text-align: center !important; font-weight: 800 !important; font-style: italic !important; font-size: 15px !important; color: rgba(251,238,242,.4) !important; flex: 0 0 auto !important; } html.app-dark .home-rank .hr-item:nth-child(2) .hr-rank { color: #FF8FB1 !important; } html.app-dark .home-rank .hr-item:nth-child(3) .hr-rank { color: #f5a742 !important; } html.app-dark .home-rank .hr-item:nth-child(4) .hr-rank { color: #b47cff !important; } html.app-dark .home-rank .hr-cover { width: 38px !important; height: 38px !important; border-radius: 9px !important; object-fit: cover !important; flex: 0 0 auto !important; background: #4a2038 !important; } html.app-dark .home-rank .hr-name { font-size: 13px !important; color: #fbeef2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ===== 向参考稿看齐 · 卡片放大 + 扁平角标 2026-07-23 ===== */ @media (min-width: 1024px) { /* 内容更宽给大卡空间 */ html.app-dark .mainHeader, html.app-dark .indexpage { max-width: 1600px !important; } /* 评级角标 → 扁平圆角胶囊(去折角/光环/流光/星光)，保留档位色，左上小内缩 */ html.app-dark .games-container .gcm-badge-wrap { top: 10px !important; left: 10px !important; right: auto !important; } html.app-dark .games-container .gcm-badge-wrap::before, html.app-dark .games-container .gcm-badge-wrap::after { display: none !important; } html.app-dark .games-container .game-badge { clip-path: none !important; border-radius: 7px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(0,0,0,.35) !important; border: 0 !important; } html.app-dark .games-container .game-badge::before, html.app-dark .games-container .game-badge::after { display: none !important; } /* 今日上架 category_0 → 大竖版封面卡(3:4)，图铺满 + 标题底栏 + 平台右上 */ html.app-dark .games-content.category_0, html.app-dark .games-content.category_0[style] { grid-template-columns: repeat(5, 1fr) !important; /* 固定 5 列，贴稿子 */ grid-template-rows: none !important; column-gap: 16px !important; row-gap: 16px !important; height: auto !important; } html.app-dark .category_0 .game-item { position: relative !important; aspect-ratio: 3 / 4 !important; height: auto !important; width: auto !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 16px rgba(0,0,0,.26) !important; } html.app-dark .category_0 .game-item .icon-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 14px !important; } html.app-dark .category_0 .game-item .game-icon { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 14px !important; } html.app-dark .category_0 .game-item .game-name { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 22px 10px 9px !important; margin: 0 !important; background: linear-gradient(to top, rgba(20,8,16,.92), rgba(20,8,16,.4) 60%, transparent) !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; z-index: 2 !important; border-radius: 0 !important; } html.app-dark .category_0 .game-item > .gpm-wrap { top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; } /* 火热黄油 category_2 → 5 列大卡 + 分类胶囊移到封面右上(浅色) */ html.app-dark .category_2 { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; } html.app-dark .category_2 .cover .type-tag { top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; background: rgba(248,232,216,.92) !important; border-radius: 999px !important; padding: 3px 10px !important; } html.app-dark .category_2 .cover .type-tag .tag-value { color: #b0486e !important; font: 700 11px/1 "PingFang SC", sans-serif !important; } /* 横大卡 category_3(推荐模块4) → 固定 2 列大卡 */ html.app-dark .category_3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } /* ===== 完全复刻原型配色(仅 PC ≥1024，手机端不动) 2026-07-23 ===== */ @media (min-width: 1024px) { /* 1. 用原型色板重定义 anime 主题变量(广域一致上色) */ html.app-dark { --acg-bg-deep: #1a0c16 !important; --acg-bg-1: #22101d !important; --acg-bg-2: #2a1220 !important; --acg-surface: #4a2038 !important; --acg-surface-hi: #f08cbb !important; --acg-gold: #f7c948 !important; --acg-gold-light: #f0912a !important; --acg-gold-soft: #f7c0da !important; --acg-rose: #f06aa6 !important; --acg-rose-deep: #b23a86 !important; --acg-peach: #f0912a !important; --acg-border: rgba(240,106,166,.28) !important; --acg-border-strong: rgba(240,106,166,.5) !important; } /* 2. 页面底色 = 与速玩/分类/日常/我的统一款(顶部居中粉柔光 + 180deg 深酒紫,papaya-space_pc 同值) */ html.app-dark, html.app-dark body { background: radial-gradient(120% 40% at 50% 0%, rgba(240,106,166,0.10) 0%, transparent 60%), linear-gradient(180deg, #1A0C16 0%, #22101D 55%, #1A0C16 100%) !important; background-attachment: fixed !important; } /* 2b. 去掉 anime 主题给 .page-container 叠的粉光径向(rgba(255,90,160,.25) 顶部中心), 那层粉光让整页比原型更亮更粉。清掉后只留 body 的暗酒红径向 → 贴原型干净暗底。 */ html.app-dark .page-container { background: none !important; } /* 搜索栏底色调暗(原 rgba(74,42,64,.72) 偏亮 → 贴原型的近黑酒红) */ html.app-dark .header_menu .header_search { background: rgba(34,16,29,0.55) !important; } /* 3. 关掉漂浮装饰(蝴蝶/星光) → 原型是干净暗底 */ html.app-dark .page-container::before, html.app-dark .page-container::after, html.app-dark .em-hero .em-hero-bg::after { display: none !important; } /* 4. WELCOME 横幅 = 原型酒红渐变 */ html.app-dark .em-hero { background: linear-gradient(120deg, #7a2350, #3a1430 60%, #5a1c44) !important; } html.app-dark .em-hero .em-hero-bg { background: transparent !important; } /* 5. 右栏面板(公告/排行榜) = 原型深板 + 细粉描边 */ html.app-dark .activity-module, html.app-dark .home-rank { background: linear-gradient(180deg, #341629, #22101d) !important; border: 1px solid rgba(240,106,166,.22) !important; box-shadow: 0 8px 24px rgba(0,0,0,.34) !important; } html.app-dark .activity-module .header .title, html.app-dark .home-rank .hr-title { border-left-color: #f06aa6 !important; color: #f3d3e2 !important; } html.app-dark .home-rank .hr-name, html.app-dark .activity-module .body .activity_article .title { color: #efd7e3 !important; } html.app-dark .home-rank .hr-item:nth-child(2) .hr-rank { color: #f06aa6 !important; } html.app-dark .home-rank .hr-item:nth-child(3) .hr-rank { color: #f06aa6 !important; } html.app-dark .home-rank .hr-item:nth-child(4) .hr-rank { color: #f7c948 !important; } /* 6. 评级角标按原型: 夯/NPC=红, 顶级/人上人=金, 拉完了=灰 */ html.app-dark .games-container .game-badge--hong, html.app-dark .games-container .game-badge--npc { background: #c94a3a !important; color: #fff !important; } html.app-dark .games-container .game-badge--ding, html.app-dark .games-container .game-badge--ren { background: linear-gradient(90deg, #f7c948, #f0912a) !important; color: #5a3a00 !important; } html.app-dark .games-container .game-badge--la { background: #5a5a6a !important; color: #e6e6ec !important; } /* 7. 栏目标题前的小圆点(原型是圆点,不是方块) */ html.app-dark .games-title { padding-left: 22px !important; } html.app-dark .games-title::before { position: absolute !important; left: 3px !important; top: 50% !important; transform: translateY(-50%) !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #f06aa6 !important; } } /* ===== 右栏细节贴原型 2026-07-23：公告胶囊配色 / 查看全部纯文字 / 排行榜 tab ===== */ @media (min-width: 1024px) { /* 公告 type 胶囊：活动=红, 公告=紫, 资讯=青绿, 攻略=品红(原型: 活动红/公告紫), 小圆角实心 */ html.app-dark .activity-module .type { border-radius: 5px !important; border: 0 !important; padding: 2px 9px !important; } html.app-dark .activity-module .type.category3 { background: #c14a3f !important; color: #ffe4de !important; } /* 活动=红 */ html.app-dark .activity-module .type.category4 { background: #6e4f9c !important; color: #ece0f7 !important; } /* 公告=紫 */ html.app-dark .activity-module .type.category2 { background: #2f7d6a !important; color: #d8fff2 !important; } /* 资讯=青绿 */ html.app-dark .activity-module .type.category5 { background: #b23a86 !important; color: #ffe0f2 !important; } /* 攻略=品红 */ /* 查看全部 → 纯文字链接(去掉粉色实心胶囊/描边/投影) */ html.app-dark .activity-module .header .more { background: none !important; padding: 0 !important; height: auto !important; border: none !important; box-shadow: none !important; color: rgba(240,106,166,.85) !important; font-weight: 600 !important; } /* 热游排行榜表头(单标题,带下划线) */ html.app-dark .home-rank .hr-head { justify-content: flex-start !important; gap: 22px !important; border-bottom: 1px solid rgba(240,106,166,.14) !important; margin-bottom: 10px !important; padding-bottom: 0 !important; } html.app-dark .home-rank .hr-title { border-left: 0 !important; padding: 0 0 9px 0 !important; border-bottom: 2px solid #f06aa6 !important; color: #f3d3e2 !important; font-size: 15px !important; } } /* ===== 公告行密度收紧贴原型(原本行距偏大约1.3x) 2026-07-23 ===== */ @media (min-width: 1024px) { html.app-dark .activity-module { padding: 13px 14px 4px !important; } html.app-dark .activity-module .body .activity_article, html.app-dark .activity-module .body .activity_article:first-child { padding: 7px 0 !important; } html.app-dark .activity-module .body .activity_article .activity_up { margin-bottom: 2px !important; } html.app-dark .activity-module .body .activity_article .title, html.app-dark .activity-module .body .activity_article:first-child .activity_content .title { line-height: 1.3 !important; } } /* ===== 公告卡细节贴原型(标签胶囊→圆角矩形 / 标题白色 / 查看全部清晰 / 描边淡) 2026-07-23 ===== */ @media (min-width: 1024px) { /* 标签: 999px 胶囊 → 6px 小圆角矩形(高特异性覆盖 Task5 的 999px) */ html.app-dark .activity-module .body .activity_article .activity_up .type { border-radius: 6px !important; padding: 3px 9px !important; } /* 公告福利 标题: 去 anime 渐变文字(background-clip:text) → 纯白, 贴原型 */ html.app-dark .activity-module .header .title { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; } /* 查看全部: 更清晰的粉(避免 anime 文字填充变淡) */ html.app-dark .activity-module .header .more { color: #ff8fb1 !important; -webkit-text-fill-color: #ff8fb1 !important; } /* 卡片描边: 亮粉 0.22 → 更淡 0.12(原型近乎不可见) */ html.app-dark .activity-module, html.app-dark .home-rank { border-color: rgba(240,106,166,0.12) !important; } } /* ===== 推荐页字体贴原型: Noto Sans SC(设计稿用字) 2026-07-23 ===== */ @media (min-width: 1024px) { html.app-dark .page-container, html.app-dark .page-container * { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important; } } /* ===== 去掉公告/排行榜标题 anime 的 ::before 竖线(与我的 border-left 重复致双竖线) 2026-07-23 ===== */ @media (min-width: 1024px) { html.app-dark .activity-module .header .title::before, html.app-dark .home-rank .hr-title::before { display: none !important; } } /* ===== 顶栏 logo 去掉 G 图标(只留"姫游社"),导航栏已有 G 品牌,顶栏不重复 2026-07-23 ===== */ @media (min-width: 1024px) { html.app-dark .header_logo { overflow: hidden !important; width: 90px !important; } html.app-dark .header_logo img { margin-left: -38px !important; max-width: none !important; } } /* ===== 扁平风格: 横幅去装饰 + 下载/去玩 按钮扁平实心(去渐变/高光/光晕/✦) 2026-07-23 ===== */ @media (min-width: 1024px) { /* 横幅所有 anime 装饰(玫瑰/蝴蝶/星光/光晕)隐藏 → 干净扁平横幅 */ html.app-dark .em-hero .acg-hero-deco { display: none !important; } /* 下载按钮 → 扁平实心粉;去 ✦ 前缀、去高光 ::after、去光晕阴影、去渐变 */ html.app-dark .em-dl { background: #f0568f !important; color: #fff !important; box-shadow: none !important; border: 0 !important; font-weight: 700 !important; } html.app-dark .em-dl::before { content: none !important; } html.app-dark .em-dl::after { display: none !important; content: none !important; } /* 去玩按钮 → 扁平实心粉;去渐变/高光/光晕 */ html.app-dark .category_3 .down .play { background: #f0568f !important; color: #fff !important; box-shadow: none !important; border: 0 !important; } html.app-dark .category_3 .down .play::after { display: none !important; content: none !important; } } /* ===== 分隔线(贴原型): 导航栏↔内容 竖线 + 顶栏↔内容 横线 2026-07-23 ===== */ @media (min-width: 1024px) { html.app-dark .bottom-nav { border-right: 1px solid rgba(255,255,255,0.07) !important; } /* 顶栏↔内容 横线仅在此页去掉(用户要求, 2026-07-24): 只留 padding-bottom 保持搜索条区域高度与其余页一致(bot=83)。分类/速玩/日常/我的仍保留 v2_pc.css 的 #headerTitle 分隔线。 */ html.app-dark .mainHeader { padding-bottom: 12px !important; } } /* ===== 导航激活态(贴设计稿, 2026-07-24): 柔和圆角高亮块 + 原生粉紫渐变图标 + 粉字 ===== 首页(推荐)走 base.html + 本文件，【不加载 v2_pc.css】，故单独一份;另一套 layout.html (分类/速玩/日常/我的)同款规则在 v2_pc.css —— 两套 layout 各覆盖各的，不是冗余。 nav-item 本就竖排(图标上/文字下)、圆角 14、透明底;只给激活项加高亮底 + 图标去滤镜(显原生 #FF8FB1→#B47CFF 粉紫渐变) + 文字上粉。用 body 压 app_dark.css:191(激活图标玫红滤镜)。 */ @media (min-width: 1024px) { html.app-dark body .bottom-nav .nav-item.active { background: rgba(240, 106, 166, 0.22) !important; /* ≈#461E33 深酒红块(贴设计稿取色) */ border-radius: 14px !important; } html.app-dark body .bottom-nav .nav-item.active .nav-icon { background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; -webkit-mask: none !important; mask: none !important; filter: none !important; } html.app-dark body .bottom-nav .nav-item.active .nav-icon img { display: inline-block !important; width: 26px !important; height: 26px !important; filter: brightness(0) invert(1) !important; /* 纯白图标(贴设计稿取色 #FFFFFF) */ opacity: 1 !important; } html.app-dark body .bottom-nav .nav-item.active .nav-label { color: #FFFFFF !important; text-shadow: none !important; } } /* ===== 宽屏重设计·近黑紫扁平直角(claude.ai/design「姬游社 宽屏重设计」1A) 2026-07-25 ===== 权威换肤层——文件末尾整块追加,平局靠后取胜,压过上方全部旧深酒红/金玫值: 底 #0B0812 / 面板 #120C1E / 卡 #150F22 / 边 #241B36 / 主CTA #FF3D8A / 系统紫 #7C3AED·#A855F7 / 评分金仅 #FFB020;全局直角零光晕零渐变。仅 ≥1024,手机端零改动。 */ @media (min-width: 1024px) { /* 令牌重映射(广域上色,压过上方 449 段的旧板) */ html.app-dark { --acg-bg-deep: #07050C !important; --acg-bg-1: #0B0812 !important; --acg-bg-2: #150F22 !important; --acg-surface: #1F1233 !important; --acg-surface-hi: #A855F7 !important; --acg-gold: #FFB020 !important; --acg-gold-light: #FFB020 !important; --acg-gold-soft: #C4B5FD !important; --acg-rose: #FF3D8A !important; --acg-rose-deep: #7C3AED !important; --acg-peach: #FFB020 !important; --acg-border: #241B36 !important; --acg-border-strong: #3A2258 !important; --acg-text-1: #F2EEFA !important; --acg-text-2: #B6A8CC !important; --acg-text-3: #8B7EA5 !important; } /* 页面底:纯色近黑紫(替换径向粉光+渐变) */ html.app-dark, html.app-dark body { background: #0B0812 !important; } /* 左导航:面板紫黑+细边;选中=直角 #1F1233 块+左 3px 电紫竖条(压 604 段圆角高亮) */ html.app-dark .bottom-nav { background: #120C1E !important; border-right: 1px solid #241B36 !important; box-shadow: none !important; } html.app-dark body .bottom-nav .nav-item { border-radius: 0 !important; } html.app-dark .bottom-nav .nav-label { color: #7E718F !important; } html.app-dark body .bottom-nav .nav-item.active { background: #1F1233 !important; border-radius: 0 !important; border-left: 3px solid #7C3AED !important; } html.app-dark body .bottom-nav .nav-item.active .nav-label { color: #F2EEFA !important; } /* 顶栏搜索框:直角扁平输入条 */ html.app-dark .header_menu .header_search { background: #1A1228 !important; border: 1px solid #2C2140 !important; border-radius: 0 !important; box-shadow: none !important; } html.app-dark .header_menu .header_search input { color: #F2EEFA !important; } html.app-dark .header_menu .header_search input::placeholder { color: #7E718F !important; } /* Hero 横幅:纯色强调块 #2A1046 + 左 4px 荧光粉边(去酒红渐变) */ html.app-dark .em-hero { background: #2A1046 !important; border: 0 !important; border-left: 4px solid #FF3D8A !important; border-radius: 0 !important; box-shadow: none !important; color: #F7F3FF !important; } html.app-dark .em-dl { background: #FF3D8A !important; border-radius: 0 !important; } /* 栏目标题:去渐变字,10px 亮紫方块(圆点→方块) */ html.app-dark .games-title { background: none !important; -webkit-text-fill-color: #F2EEFA !important; color: #F2EEFA !important; font-weight: 800 !important; text-shadow: none !important; } html.app-dark .games-title::before { border-radius: 0 !important; background: #A855F7 !important; width: 10px !important; height: 10px !important; } /* 卡片一律直角零光晕 */ html.app-dark .category_0 .game-item, html.app-dark .category_0 .game-item .icon-wrap, html.app-dark .category_0 .game-item .game-icon, html.app-dark .category_1 .game-item, html.app-dark .category_1 .game-item .game-poster, html.app-dark .category_2 .gcm-cell, html.app-dark .category_2 .game-item, html.app-dark .category_2 .cover, html.app-dark .category_2 .info .icon, html.app-dark .category_3 .game-item, html.app-dark .category_3 .up, html.app-dark .category_3 .down .icon { border-radius: 0 !important; box-shadow: none !important; } /* 标题底栏遮罩重着色(功能性可读性遮罩保留,色相从酒红黑→近黑紫) */ html.app-dark .category_0 .game-item .game-name { border-radius: 0 !important; background: linear-gradient(to top, rgba(7,5,12,.94), rgba(7,5,12,.45) 60%, transparent) !important; } html.app-dark .category_1 .game-item .game-name { border-radius: 0 !important; background: linear-gradient(to top, rgba(7,5,12,.94) 0%, rgba(7,5,12,.55) 55%, transparent 100%) !important; } html.app-dark .category_1 .game-item .game-icon { border-radius: 0 !important; border: 1px solid #3A2258 !important; box-shadow: none !important; } /* 竖版卡分类角标:近黑直角小块 */ html.app-dark .category_2 .cover .type-tag { background: rgba(7,5,12,.85) !important; border-radius: 0 !important; } html.app-dark .category_2 .cover .type-tag .tag-value { color: #D7C9F5 !important; } html.app-dark .category_2 .info .name { color: #EDE7F8 !important; } /* 横大卡:实心卡底+细边;去玩=实心荧光粉直角 */ html.app-dark .category_3 .game-item { background: #150F22 !important; border: 1px solid #241B36 !important; } html.app-dark .category_3 .down .text .name { color: #EDE7F8 !important; } html.app-dark .category_3 .down .text .desc { color: #8B7EA5 !important; } html.app-dark .category_3 .down .play { background: #FF3D8A !important; border-radius: 0 !important; } /* 评级角标:直角实心(夯/NPC 深粉、顶级/人上人 评分金、拉完了 暗紫) */ html.app-dark .games-container .game-badge { border-radius: 0 !important; box-shadow: none !important; } html.app-dark .games-container .game-badge--hong, html.app-dark .games-container .game-badge--npc { background: #E01B5A !important; color: #fff !important; } html.app-dark .games-container .game-badge--ding, html.app-dark .games-container .game-badge--ren { background: #FFB020 !important; color: #07050C !important; } html.app-dark .games-container .game-badge--la { background: #4A3568 !important; color: #C9BEDD !important; } /* 右栏面板(公告/排行榜):实心卡底+细边直角 */ html.app-dark .activity-module, html.app-dark .home-rank { background: #150F22 !important; border: 1px solid #241B36 !important; border-radius: 0 !important; box-shadow: none !important; } html.app-dark .activity-module .header .title { border-left: 3px solid #A855F7 !important; color: #F2EEFA !important; -webkit-text-fill-color: #F2EEFA !important; } html.app-dark .activity-module .header .more { color: #FF3D8A !important; -webkit-text-fill-color: #FF3D8A !important; } html.app-dark .activity-module .body .activity_article, html.app-dark .activity-module .body .activity_article:first-child { border-bottom: 1px solid #1E1730 !important; } html.app-dark .activity-module .body .activity_article:last-child { border-bottom: 0 !important; } html.app-dark .activity-module .body .activity_article .title, html.app-dark .activity-module .body .activity_article:first-child .activity_content .title { color: #CFC4E2 !important; } html.app-dark .activity-module .body .activity_article .activity_up .time { color: #6C5F80 !important; } /* 公告 tag:实心直角(活动深粉/公告电紫/资讯青/攻略亮紫) */ html.app-dark .activity-module .body .activity_article .activity_up .type { border-radius: 0 !important; } html.app-dark .activity-module .type.category3 { background: #E01B5A !important; color: #fff !important; } html.app-dark .activity-module .type.category4 { background: #7C3AED !important; color: #fff !important; } html.app-dark .activity-module .type.category2 { background: #2F7A8E !important; color: #fff !important; } html.app-dark .activity-module .type.category5 { background: #A855F7 !important; color: #fff !important; } /* 排行榜:tab 下划线粉,前三序号粉,余 #4A3568;封面直角 */ html.app-dark .home-rank .hr-head { border-bottom: 1px solid #241B36 !important; } html.app-dark .home-rank .hr-title { border-bottom: 2px solid #FF3D8A !important; color: #F2EEFA !important; } html.app-dark .home-rank .hr-item { border-bottom: 1px solid #1E1730 !important; } html.app-dark .home-rank .hr-item:last-child { border-bottom: 0 !important; } html.app-dark .home-rank .hr-rank { font-style: normal !important; color: #4A3568 !important; } html.app-dark .home-rank .hr-item:nth-child(2) .hr-rank, html.app-dark .home-rank .hr-item:nth-child(3) .hr-rank, html.app-dark .home-rank .hr-item:nth-child(4) .hr-rank { color: #FF3D8A !important; } html.app-dark .home-rank .hr-cover { border-radius: 0 !important; background: #1F1233 !important; } html.app-dark .home-rank .hr-name { color: #DED5EE !important; } } /* ===== 宽屏重设计·1A 细化:hero 下载条补齐 + 卡片贴稿比例缩小 2026-07-25(2) ===== 设计稿 hero=150 高左文右钮(眉标粉 12/ls4、主标 32/900、副文 14 灰紫、48px 大粉键); 卡片=6 列小卡「图上(4:5)+名称在卡底」而非大卡悬浮名;右栏贴稿 360px。 */ @media (min-width: 1024px) { /* —— Hero 横幅 —— */ html.app-dark .em-hero { min-height: 150px !important; padding: 0 210px 0 32px !important; /* 右侧让位绝对定位的下载键 */ display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 8px !important; position: relative !important; margin: 0 !important; } html.app-dark .em-kicker { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 4px !important; color: #FF3D8A !important; -webkit-text-fill-color: #FF3D8A !important; background: none !important; text-shadow: none !important; margin: 0 !important; } html.app-dark .em-htitle { font-size: 32px !important; font-weight: 900 !important; line-height: 1.25 !important; color: #F7F3FF !important; -webkit-text-fill-color: #F7F3FF !important; background: none !important; text-shadow: none !important; margin: 0 !important; } /* 副文(设计稿文案,DOM 无此节点,纯视觉用 ::after 补) */ html.app-dark .em-htitle::after { content: "每日签到领福利 · 会员专享高速线路 · 免安装即点即玩"; display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: #B6A8CC; -webkit-text-fill-color: #B6A8CC; } /* 下载键:48px 大粉键,右侧垂直居中;文案「下载」→「立即下载」(font-size:0+::after,纯展示) */ html.app-dark .em-dl { position: absolute !important; right: 32px !important; top: 50% !important; transform: translateY(-50%) !important; height: 48px !important; padding: 0 32px !important; width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; } /* ::after 被 index_anime.css:977 定义为绝对定位高光条(left/right 12%),复用放文案必须整体复位 */ html.app-dark .em-dl::after { content: "立即下载" !important; display: inline !important; position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; white-space: nowrap !important; } /* —— 右栏贴稿 360px —— */ html.app-dark .indexpage { grid-template-columns: minmax(0, 1fr) 360px !important; } /* —— 今日上架 category_0:6 列小卡,图(4:5)上/名称卡底,去悬浮名 —— */ html.app-dark .games-content.category_0, html.app-dark .games-content.category_0[style] { grid-template-columns: repeat(6, 1fr) !important; column-gap: 16px !important; row-gap: 16px !important; } html.app-dark .category_0 .game-item { aspect-ratio: auto !important; display: flex !important; flex-direction: column !important; background: #150F22 !important; border: 1px solid #241B36 !important; overflow: hidden !important; } html.app-dark .category_0 .game-item .icon-wrap { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; flex: 0 0 auto !important; } html.app-dark .category_0 .game-item .game-name { position: static !important; background: none !important; padding: 10px 12px 12px !important; color: #EDE7F8 !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* —— 推荐2 category_1:2 大卡→4 列,海报(16:9)上/名称卡底,头像落名称行左侧 —— */ html.app-dark .category_1 .swiper-wrapper { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; } html.app-dark .category_1 .game-item { aspect-ratio: auto !important; display: flex !important; flex-direction: column !important; background: #150F22 !important; border: 1px solid #241B36 !important; overflow: hidden !important; } html.app-dark .category_1 .game-item .game-poster { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; flex: 0 0 auto !important; } html.app-dark .category_1 .game-item .game-name { position: static !important; background: none !important; padding: 12px 12px 12px 50px !important; color: #EDE7F8 !important; font-size: 13.5px !important; } html.app-dark .category_1 .game-item .game-icon { left: 10px !important; bottom: 10px !important; width: 30px !important; height: 30px !important; } html.app-dark .category_1 .game-item > .gpm-wrap { top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; } /* —— 火热黄油 category_2:5→6 列,补卡壳(图+名称行同卡) —— */ html.app-dark .category_2 { grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; } html.app-dark .category_2 .game-item { background: #150F22 !important; border: 1px solid #241B36 !important; overflow: hidden !important; } html.app-dark .category_2 .cover { box-shadow: none !important; } html.app-dark .category_2 .info { padding: 9px 10px 11px !important; } /* —— 横大卡 category_3:2→3 列 —— */ html.app-dark .category_3 { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } } /* ===== 1A 主列整体缩小 ~30%(用户反馈元素过大) 2026-07-25(3) ===== hero 150→108 高/主标 32→22;栏目标题 15px/方块 8px;卡片列数加密: category_0/2 6→8 列、category_1 4→6 列、category_3 3→4 列,间距 16→12。右栏不动。 */ @media (min-width: 1024px) { /* —— Hero —— */ html.app-dark .em-hero { min-height: 108px !important; padding: 0 170px 0 24px !important; gap: 5px !important; } html.app-dark .em-kicker { font-size: 10px !important; letter-spacing: 3px !important; } html.app-dark .em-htitle { font-size: 22px !important; } html.app-dark .em-htitle::after { font-size: 12.5px; margin-top: 5px; } html.app-dark .em-dl { right: 24px !important; height: 36px !important; padding: 0 22px !important; } html.app-dark .em-dl::after { font-size: 14px !important; } /* —— 栏目头 —— */ html.app-dark .games-title { font-size: 15px !important; padding-left: 18px !important; } html.app-dark .games-title::before { width: 8px !important; height: 8px !important; } /* —— 卡片加密缩小 —— */ html.app-dark .games-content.category_0, html.app-dark .games-content.category_0[style] { grid-template-columns: repeat(8, 1fr) !important; column-gap: 12px !important; row-gap: 12px !important; } html.app-dark .category_0 .game-item .game-name { font-size: 12px !important; padding: 8px 10px 10px !important; } html.app-dark .category_1 .swiper-wrapper { grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; } html.app-dark .category_1 .game-item .game-name { font-size: 12px !important; padding: 10px 10px 10px 42px !important; } html.app-dark .category_1 .game-item .game-icon { width: 24px !important; height: 24px !important; left: 9px !important; bottom: 9px !important; } html.app-dark .category_2 { grid-template-columns: repeat(8, 1fr) !important; gap: 12px !important; } html.app-dark .category_2 .info { padding: 7px 9px 9px !important; } html.app-dark .category_2 .info .icon { width: 22px !important; height: 22px !important; } html.app-dark .category_2 .info .name { font-size: 12px !important; } html.app-dark .category_3 { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; } html.app-dark .category_3 .down .icon { width: 32px !important; height: 32px !important; } html.app-dark .category_3 .down .text .name { font-size: 12.5px !important; } html.app-dark .category_3 .down .play { padding: 5px 12px !important; font-size: 12px !important; } /* 评级/NPC 角标随卡缩小 */ html.app-dark .games-container .game-badge { padding: 3px 8px !important; font-size: 11px !important; } /* 懒加载图未载入时卡片露白底(暗底滚动闪白) → 图区统一深紫占位底。 注意 ethereal 给的是 img 元素本身的浅底(#e5eeff/.cover-img/.game-icon/.poster),容器层压不住,img 层必须一并压 */ html.app-dark .category_0 .game-item .icon-wrap, html.app-dark .category_1 .game-item .game-poster, html.app-dark .category_2 .gcm-cell, html.app-dark .category_2 .cover, html.app-dark .category_3 .up { background: #1F1233 !important; } html.app-dark .games-container .game-icon, html.app-dark .category_2 .cover .cover-img, html.app-dark .category_2 .info .icon, html.app-dark .category_3 .up .poster { background-color: #1F1233 !important; } } /* ================= 2026-07-25 顶栏搜索图标 / 页面滚动条 归一(用户圈出离群点) ================= */ @media (min-width: 1024px) { /* 搜索条里的玫红爱心放大镜(anime 品牌 icon #EC4899) → 中性灰紫,与输入条同调 */ html.app-dark .header_menu .header_search .search-icon { filter: grayscale(1) brightness(1.7) !important; opacity: .55 !important; } /* 页面滚动条:金→玫渐变(index_anime.css:939) → 近黑紫细条直角(neon-purple) */ html.app-dark .indexpage { scrollbar-width: thin; scrollbar-color: #3A2258 transparent; } html.app-dark .indexpage::-webkit-scrollbar-thumb { background: #3A2258 !important; border-radius: 0 !important; } html.app-dark .indexpage::-webkit-scrollbar-thumb:hover { background: #4A2F6E !important; } html.app-dark .indexpage::-webkit-scrollbar-track { background: transparent !important; } } /* ===== 右栏排行榜双 tab(热游排行榜/今日上架,各 Top10) 2026-07-29 ===== 条目从 .home-rank 直属包进 .hr-list 面板:旧「前三名序号」nth-child(2..4) 基于 hr-head 占首位的兄弟结构,包壳后会错染 2~4 名,这里按新结构以更高特异性重定; 非激活 tab 去下划线转灰紫,点击切换由 index.html 内联脚本处理。 */ @media (min-width: 1024px) { html.app-dark .home-rank .hr-tab { cursor: pointer !important; user-select: none !important; } html.app-dark .home-rank .hr-tab:not(.is-active) { border-bottom-color: transparent !important; color: #8E7FAB !important; font-weight: 600 !important; } html.app-dark .home-rank .hr-list[hidden] { display: none !important; } html.app-dark .home-rank .hr-list .hr-item .hr-rank { color: #4A3568 !important; } html.app-dark .home-rank .hr-list .hr-item:nth-child(-n+3) .hr-rank { color: #FF3D8A !important; } }