/* ========================================================================== BiTBA 2027 深色主题 —— 全站唯一样式文件合并自原来 8 个各自独立的页面样式文件：index.css / item.css / filter.css / search.css / play.css / down.css / ranking.css / help.css。这 8 个页面现在全部只引用这一份文件。为什么需要 body 上的 pg-xxx 这个类(每个页面的标签都加了一个)：合并前不同页面各自的文件里，同一个选择器名字有的地方写的规则不一样—— 最典型的是播放页要隐藏左侧栏目菜单(#nav{display:none})、把页脚固定藏在播放器底下(#bottom 完全不同的定位方式)，首页的二级分类(#navchild)是可见的胶囊行而其它页面都是藏起来的，首页/排行榜页还各自有一套长得完全不一样的"排行列表" (.rank-list/.rank-num/.rank-title 同名但结构不同)。合并成一份文件后，这些选择器只能出现一次，靠"哪个页面"来决定用哪条规则，只能用 body 类名区分，写成 body.pg-xxx 选择器，不然这些差异没法共存在同一份文件里。下面每处用到 pg-xxx 的地方都在注释里写清楚是跟哪个页面的差异。 z-index 数值统一说明：原来 index.css 里 .pcard-score/.pcard-year/.pcard-badge 用的是 1、.pcard-info 用的是 2；其它页面(item/filter/search)用的是 2 和 3—— 这只是内部相对大小一致的两套数字（分别都是"角标在下、悬浮层在上"），实际视觉效果因为同层级时后出现的 DOM 节点本来就会盖在前面(.pcard-info 在 HTML 里排在角标后面)，两套数字混着用也不会有视觉差异，这里统一用 item/filter/search 那套（2 和 3），首页不用单独覆盖。 */ :root{ /* 告诉浏览器这是个深色页面：没有这行的话，macOS 上 Safari/Chrome 会按系统的明暗模式偏好去渲染"页面没有明确样式管到"的区域(典型的是滚动到头/到底继续下拉的橡皮筋回弹区域、原生表单控件默认配色)，系统是浅色模式时这些区域就会用浏览器自己的浅色默认值(通常是白色)，滚动时突然闪出一块白色背景，跟页面 CSS 本身无关 */ --bg:#0A0D10; --surface:#12161B; --surface-2:#171C22; --border:#232A32; --border-soft:#1B2129; --text:#E7ECEF; --text-dim:#7C8894; --text-faint:#4B535C; --accent:#35D07F; --accent-dim:rgba(53,208,127,0.14); --warn:#F5A623; --warn-dim:rgba(245,166,35,0.14); --error:#FF5D5D; --info:#4FA8FF; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } *{ box-sizing:border-box; } a{ color:inherit; } img{ max-width:100%; } /* html 始终撑满至少视口高度，不受下面 body 的差异影响 */ html{ min-height:100%; } /* body 默认值：7 个页面(除播放页)都是这样。播放页(pg-play)背景改纯黑、且不设 min-height——之前 body 一旦有确定高度，播放器容器那句内联样式 max-height:60% 会意外从"不生效"变成"生效"(60% 是相对 body 高度算的)，播放器反而比原来更大，用户反馈"自动放大了播放器"说的就是这个，所以播放页这里故意不设 min-height */ body{ margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); } body.pg-play{ min-height:0; background:#000; } /* ---------- 顶部通栏：logo + 搜索 + 消息/签到，一条 fixed 通栏，全站一致 ---------- */ ul.header{ position:fixed; top:0; left:0; right:0; z-index:30; min-height:64px; list-style:none; margin:0; display:flex; align-items:center; gap:24px; padding:14px 28px; background:linear-gradient(180deg, rgba(10,13,16,0.78), rgba(10,13,16,0.22)); border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease; } body.scrolled ul.header{ background:var(--surface); border-bottom-color:var(--border); } ul.header li#logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; } ul.header li#logo a{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-family:var(--mono); font-weight:700; font-size:19px; flex-shrink:0; text-shadow:0 1px 4px rgba(0,0,0,0.6); } ul.header li#logo img{ height:30px; width:auto; } ul.header li#logo .tagline{ flex-shrink:0; font-family:var(--sans); font-weight:400; font-size:14px; color:rgba(231,236,239,0.65); text-shadow:0 1px 3px rgba(0,0,0,0.6); white-space:nowrap; } ul.header li.center{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:500px; } #search{ display:flex; width:100%; } #search input[type=text]{ flex:1; min-width:0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-right:none; border-radius:9px 0 0 9px; padding:10px 14px; color:var(--text); font-size:13.5px; font-family:var(--sans); outline:none; transition:border-color .15s, background .15s; } body.scrolled #search input[type=text]{ background:var(--surface-2); border-color:var(--border); } #search input[type=text]:focus{ border-color:var(--accent); } #search input[type=text]::placeholder{ color:rgba(231,236,239,0.55); } #search input[type=submit]{ background:var(--accent); color:#06130B; border:none; border-radius:0 9px 9px 0; padding:0 20px; font-weight:700; font-size:13.5px; cursor:pointer; transition:filter .15s; } #search input[type=submit]:hover{ filter:brightness(1.08); } ul.header li.utility{ display:flex; align-items:center; gap:14px; flex-shrink:0; margin-left:auto; font-size:12px; color:rgba(231,236,239,0.72); white-space:nowrap; } ul.header li.utility #autologin{ display:flex; align-items:center; gap:14px; } ul.header li.utility a{ color:inherit; text-decoration:none; } ul.header li.utility a:hover{ color:var(--accent); } ul.header li.utility #qiandao{ color:var(--warn); cursor:pointer; } ul.header li.utility #qiandao:hover{ text-decoration:underline; } /* 已经签到过：跟未签到时的强调色区分开，不再是可点击态 */ ul.header li.utility #qiandao.done{ color:var(--text-faint); cursor:default; } ul.header li.utility #qiandao.done:hover{ text-decoration:none; } #user_box{ display:flex; align-items:center; gap:10px; } #user_box .ub-badge{ padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; } /* 尊享VIP 徽章：只有 vip_expired 未过期才会渲染这个样式，用金黄色渐变+深色字，跟站内其它金色元素(比如排行榜 top1 奖牌 #F5C518)是同一套"金色=尊贵"配色语言 */ #user_box .ub-badge.ub-vip{ background:linear-gradient(135deg, #F5D875, #D4A017); color:#1A1200; border:1px solid #F5C518; text-shadow:0 1px 0 rgba(255,255,255,0.35); } /* 已过期：跟上面金色的"当前有效"状态明显区分开，用素净的灰色，不再强调尊贵感 */ #user_box .ub-badge.ub-vip-expired{ background:var(--surface-2); color:var(--text-faint); border:1px solid var(--border); } #user_box .ub-name{ color:var(--text); } #user_box .ub-gold b{ color:var(--warn); font-family:var(--mono); font-weight:700; } #user_box .ub-quit:hover{ color:var(--error); } /* 消息角标：整个"消息"链接默认不在 DOM 里，只有 clr_message.php 返回非空列表时才由 JS 一起插进来，所以这里不需要默认隐藏。用醒目的红色圆点+数字，跟 "未过期尊享VIP"的金色刻意区分开——一个是喜讯，一个是提醒你有事要看，颜色语义不能混 */ #user_box .i{ position:relative; } #user_box .msg-badge{ display:inline-block; position:absolute; top:-7px; right:-11px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--error); color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center; } /* ---------- 左侧栏目菜单：竖排固定侧栏，带小图标。播放页(pg-play)整个隐藏 ---------- */ #nav{ position:fixed; left:0; top:0; bottom:0; width:220px; z-index:20; background:linear-gradient(180deg, rgba(10,13,16,0.6), rgba(10,13,16,0.28)); border-right:1px solid transparent; overflow-y:auto; transition:background .25s ease, border-color .25s ease; } body.scrolled #nav{ background:var(--surface); border-right-color:var(--border); } #nav ul{ list-style:none; margin:0; padding:76px 0 12px; display:flex; flex-direction:column; gap:2px; } #nav ul a{ display:flex; align-items:center; gap:10px; padding:12px 20px; white-space:nowrap; color:var(--text-dim); text-decoration:none; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,0.55); border-left:3px solid transparent; transition:color .15s, border-color .15s, background .15s; } #nav ul a .nav-icon{ flex-shrink:0; width:16px; height:16px; background-color:currentColor; opacity:.75; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; transition:opacity .15s; } #nav ul a:hover .nav-icon, #nav ul a.active .nav-icon{ opacity:1; } #nav ul a .nav-icon-house{ -webkit-mask-image:url(../image/nav-icons/house.svg); mask-image:url(../image/nav-icons/house.svg); } #nav ul a .nav-icon-clapperboard{ -webkit-mask-image:url(../image/nav-icons/clapperboard.svg); mask-image:url(../image/nav-icons/clapperboard.svg); } #nav ul a .nav-icon-tv{ -webkit-mask-image:url(../image/nav-icons/tv.svg); mask-image:url(../image/nav-icons/tv.svg); } #nav ul a .nav-icon-mic{ -webkit-mask-image:url(../image/nav-icons/mic.svg); mask-image:url(../image/nav-icons/mic.svg); } #nav ul a .nav-icon-camera{ -webkit-mask-image:url(../image/nav-icons/camera.svg); mask-image:url(../image/nav-icons/camera.svg); } #nav ul a .nav-icon-film{ -webkit-mask-image:url(../image/nav-icons/film.svg); mask-image:url(../image/nav-icons/film.svg); } #nav ul a .nav-icon-magnet{ -webkit-mask-image:url(../image/nav-icons/magnet.svg); mask-image:url(../image/nav-icons/magnet.svg); } #nav ul a .nav-icon-play{ -webkit-mask-image:url(../image/nav-icons/play.svg); mask-image:url(../image/nav-icons/play.svg); } #nav ul a .nav-icon-users{ -webkit-mask-image:url(../image/nav-icons/users.svg); mask-image:url(../image/nav-icons/users.svg); } #nav ul a .nav-icon-trophy{ -webkit-mask-image:url(../image/nav-icons/trophy.svg); mask-image:url(../image/nav-icons/trophy.svg); } #nav ul a .nav-icon-tags{ -webkit-mask-image:url(../image/nav-icons/tags.svg); mask-image:url(../image/nav-icons/tags.svg); } #nav ul a:hover{ background:rgba(255,255,255,0.06); color:var(--text); } #nav ul a.active{ color:var(--accent); border-left-color:var(--accent); background:var(--accent-dim); font-weight:600; } body.scrolled #nav ul a:hover{ background:var(--surface-2); } body.pg-play #nav{ display:none; } /* 二级分类：默认藏起来，只有首页(pg-index)覆盖回完整可见样式 */ #navchild{ display:none; } body.pg-index #navchild{ display:flex; list-style:none; margin:0; overflow-x:auto; gap:8px; padding:72px 28px 10px 248px; background:var(--bg); } body.pg-index #navchild li{ flex-shrink:0; } body.pg-index #navchild li a{ display:block; padding:6px 14px; border-radius:999px; white-space:nowrap; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); text-decoration:none; font-size:12.5px; transition:border-color .15s, color .15s; } body.pg-index #navchild li a:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- 页脚：让开左侧栏目菜单。播放页(pg-play)之前用 fixed 定位+负 z-index 把它藏在空白处、不占版面又不从 HTML 里删掉(具体原因未知，可能是 SEO/合规要求要留着这段文字)——但集数一多、选集列表变高需要滚动时，固定在屏幕底部的页脚会跟滚动到底部的选集按钮压在同一块屏幕区域，负 z-index 只在没有别的内容挡着时才隐身，按钮间的空隙就会被页脚文字透出来，糊成一片(2026-07-08 修)。改成跟其它页面一样走正常文档流，排在 .play-wrap 最下面，不会再有重叠的可能 ---------- */ #bottom{ margin:48px 0 0 220px; padding:28px 24px; background:var(--surface); border-top:1px solid var(--border); text-align:center; } #bottom ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; justify-content:center; gap:22px; flex-wrap:wrap; } #bottom ul li a{ color:var(--text-dim); text-decoration:none; font-size:13px; } #bottom ul li a:hover{ color:var(--accent); } #bottom>div{ max-width:900px; margin:0 auto; color:var(--text-faint); font-size:11.5px; line-height:1.85; } body.pg-play #bottom{ margin:0; border-top:1px solid var(--border); border-radius:0; background:var(--bg); padding:0; text-align:left; } body.pg-play #bottom ul{ padding:8px 16px; } body.pg-play #bottom ul li a{ color:var(--text-faint); font-size:12px; } body.pg-play #bottom>div{ max-width:none; margin:0; padding:0 16px 12px; font-size:11px; line-height:1.7; } /* ---------- 主体容器默认值：让开左侧栏目菜单 + 悬浮顶栏。首页(pg-index)覆盖了 padding(它的二级分类可见，顶部空间算法不一样)。播放页用的是完全不同的 .play-wrap 类名，这条规则对它无效，播放页自己的 .play-wrap 在下面播放页专属部分单独定义 ---------- */ .home-wrap{ margin-left:220px; padding:88px 28px 40px; } body.pg-index .home-wrap{ padding:1.25rem 28px 8px; } /* ---------- 面包屑默认样式。播放页(pg-play)覆盖成自己的极简条+返回链接样式；首页没有面包屑(不使用这个 class，下面的默认规则闲置无副作用) ---------- */ .breadcrumb{ font-size:12.5px; color:var(--text-faint); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; } .breadcrumb a{ color:var(--text-dim); text-decoration:none; } .breadcrumb a:hover{ color:var(--accent); } /* 播放页面包屑：返回详情页的链接合并进面包屑最后一项，播放器上面不再单独占一条，播放器本身用 max-width:90em+margin:auto 居中，但面包屑要靠左对齐，所以不跟播放器一样加居中限制，直接占满 .play-wrap 从左边开始排 */ body.pg-play .breadcrumb{ padding:0 0 14px; margin-bottom:0; text-align:left; } body.pg-play .breadcrumb .ep{ color:var(--accent); font-family:var(--mono); font-weight:700; margin-left:4px; } /* ---------- 回到顶部：全站一致 ---------- */ .back-top{ position:fixed; right:24px; bottom:24px; z-index:60; width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; box-shadow:0 14px 28px -14px rgba(0,0,0,0.65); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s, color .2s, border-color .2s; } .back-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } .back-top:hover{ color:var(--accent); border-color:var(--accent); } /* ---------- 通用"海报卡片"组件：首页/筛选页/搜索页的结果网格、详情页"猜你感兴趣" 共用同一套卡片长相(评分/年份/版本角标 + 悬停信息层)。.pgrid 本身的列数算法首页跟筛选页/搜索页不一样(首页靠 JS 算出 --cols 变量，筛选页/搜索页结果条数不固定、用 auto-fill+minmax 自适应)，这里放筛选页/搜索页的版本当默认值，首页(pg-index)覆盖成 --cols 版本 ---------- */ .pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,201px)); gap:22px 18px; list-style:none; margin:0; padding:0; } body.pg-index .pgrid{ grid-template-columns:repeat(var(--cols,4),1fr); } .pcard-link{ display:block; text-decoration:none; } .pcard-poster{ position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); } .pcard-poster img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; } .pcard-link:hover .pcard-poster img{ transform:scale(1.05); } .pcard-link:hover .pcard-poster{ border-color:var(--accent); } .pcard-score{ position:absolute; top:6px; left:6px; z-index:2; background:rgba(10,13,16,0.72); color:var(--accent); font-family:var(--mono); font-weight:700; font-size:11.5px; padding:2px 6px; border-radius:6px; } .pcard-year{ position:absolute; top:6px; right:6px; z-index:2; background:rgba(10,13,16,0.6); color:var(--text-dim); font-family:var(--mono); font-size:10.5px; padding:2px 6px; border-radius:6px; } /* 首页专用：右上角"最近更新"角标（其它页面没有这个用途，class 名不冲突） */ .pcard-updated{ position:absolute; top:0; right:0; z-index:3; background:var(--accent); color:#06130B; font-weight:700; font-size:10.5px; padding:3px 8px; border-radius:0 0 0 8px; } .pcard-badge{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 8px 5px; background:linear-gradient(0deg, rgba(0,0,0,0.8), transparent); color:#fff; font-size:11px; line-height:1.3; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 筛选页"只看可在线播放"角标变绿；搜索页没有这个状态，class 不冲突 */ .pcard-badge.is-play{ color:var(--accent); } .pcard-title{ margin-top:8px; font-size:14px; line-height:1.45; color:var(--text); text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; } .pcard-link:hover .pcard-title{ color:var(--accent); } .pcard-info{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:10px 8px 8px; text-align:left; background:linear-gradient(0deg, rgba(6,8,10,0.6) 55%, rgba(6,8,10,0.35) 85%, transparent); opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; } .pcard-link:hover .pcard-info{ opacity:1; transform:translateY(0); } .pcard-info p{ margin:0 0 5px; font-size:12.5px; line-height:1.5; color:var(--text); text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pcard-info p:last-child{ margin-bottom:0; } .pcard-info b{ color:var(--accent); font-weight:700; margin-right:5px; text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7); } /* 空结果提示：默认(筛选页)padding 64px，搜索页(pg-search)覆盖成 120px + 加一个错误色的强调文字样式(搜索页用来标红关键词等) */ .empty-state{ text-align:center; padding:64px 20px; color:var(--text-dim); font-size:14px; } body.pg-search .empty-state{ padding:120px 20px; } body.pg-search .empty-state b{ color:var(--error); font-weight:700; } /* ---------- 分页（筛选页/搜索页共用，完全一致） ---------- */ .pagination-wrap{ display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0 8px; font-family:var(--mono); font-size:13px; } .pagination-wrap li{ list-style:none; margin:0; padding:0; display:flex; align-items:center; } .pagination-wrap a, .pagination-wrap li.active b{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--border); color:var(--text-dim); text-decoration:none; background:var(--surface); font-family:var(--mono); font-size:13px; font-weight:inherit; transition:background .15s, color .15s, border-color .15s; } .pagination-wrap a:hover{ border-color:var(--text-faint); color:var(--text); } .pagination-wrap li.active b{ background:var(--accent-dim); border-color:rgba(53,208,127,0.35); color:var(--accent); font-weight:600; } /* ---------- 通用区块标题：详情页/下载页/帮助页共用的"猜你感兴趣/种子信息/资源操作/ 下载提示"这类小标题样式。默认(下载页/帮助页)margin:24px + h2 字号15px，详情页 (pg-item)覆盖成 28px + 16px ---------- */ .item-section{ margin:0 0 24px; } .item-section h2{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:15px; font-weight:700; color:var(--text); } .item-section h2::before{ content:''; width:4px; height:15px; border-radius:2px; background:var(--accent); flex-shrink:0; } body.pg-item .item-section{ margin:0 0 28px; } body.pg-item .item-section h2{ margin:0 0 16px; font-size:16px; } body.pg-item .item-section h2::before{ height:16px; } /* 种子信息标题栏右侧的排序功能(详情页专属，class 名不跟其它页面冲突)： margin-left:auto 把这一组链接顶到 h2 这一行最右边，h2 本身已经是 display:flex 了，不用额外包一层 */ .item-section h2 .torrent-sort{ margin-left:auto; display:flex; gap:16px; } .item-section h2 .torrent-sort a{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:400; color:var(--text-faint); text-decoration:none; cursor:pointer; transition:color .15s; } .item-section h2 .torrent-sort a:hover{ color:var(--accent); } .item-section h2 .torrent-sort a.active{ color:var(--accent); font-weight:600; } /* 小三角图标：border 拼三角形这个画法本身 content box 是 0x0，实际可点击热区只有边框那几个像素(量出来大概 8x5px)，鼠标很难精确点中。改成外层 .sort-icon 撑出一个 16x16 的正常点击热区(仍然是的子元素，点这个范围一样会冒泡触发父级 onclick)，小三角本身挪到 ::after 里居中显示，视觉大小不变，只是好点多了。默认态和"激活+倒序"态用不同的角度：默认(未激活) -90 度侧向、激活+倒序 0 度朝下、激活+正序(.asc) 180 度朝上，保证每一次点击都会看到图标转动 */ .item-section h2 .torrent-sort .sort-icon{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; cursor:pointer; } .item-section h2 .torrent-sort .sort-icon::after{ content:''; display:block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.45; transform:rotate(0deg); transition:transform .15s, opacity .15s; } .item-section h2 .torrent-sort a.active .sort-icon::after{ opacity:1; transform:rotate(180deg); } .item-section h2 .torrent-sort a.asc .sort-icon::after{ transform:rotate(0deg); } /* ---------- 播放列表(pills)：详情页/播放页共用，播放页多一个"当前不可点击"的 span.active 状态(item 页这个 DOM 结构里不会出现 span.active，规则闲置无副作用) ---------- */ .playlist-pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .playlist-pills a, .playlist-pills span.active{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; padding:8px 14px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); text-decoration:none; font-size:13px; transition:border-color .15s, color .15s, background .15s; } .playlist-pills a:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); } /* 正在播放的这一集是 span 不是 a(不可点击)，用强调色高亮标出来(播放页用) */ .playlist-pills span.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); font-weight:700; cursor:default; } /* ---------- 侧边栏：最近更新 / 热门（详情页/下载页共用，完全一致的紧凑横向列表项） ---------- */ .side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .side-item{ display:flex; gap:14px; } .side-item>a:first-child{ /* 实际下载过站内海报图核对过比例(540x800/270x400，都是 2:3)，确实是 2:3 没错；之前给到 108px 宽 (=162px 高)，比这一列文字内容明显高出一截，看着"图片过高"，缩小到 76px 宽 (=114px 高) 跟旁边 3~4 行文字的高度更匹配 */ position:relative; flex-shrink:0; width:76px; aspect-ratio:2/3; overflow:hidden; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); display:block; } .side-item>a:first-child img{ width:100%; height:100%; object-fit:cover; display:block; } .side-item-score{ position:absolute; top:6px; left:6px; z-index:2; background:rgba(10,13,16,0.72); color:var(--accent); font-family:var(--mono); font-weight:700; font-size:11.5px; padding:2px 6px; border-radius:6px; } .side-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-top:2px; } .side-item-title{ display:flex; align-items:baseline; gap:6px; } .side-item-title a{ color:var(--text); text-decoration:none; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .side-item-title a:hover{ color:var(--accent); } .side-item-title span{ flex-shrink:0; font-family:var(--mono); font-size:11.5px; color:var(--info); background:rgba(79,168,255,0.14); padding:1px 6px; border-radius:5px; } .side-item-meta{ font-size:12.5px; color:var(--text-faint); line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .side-item-meta a{ color:var(--text-dim); text-decoration:none; } .side-item-meta a:hover{ color:var(--accent); } .side-item-heat{ font-size:12.5px; color:var(--warn); font-family:var(--mono); } /* 详情页(pg-item)侧栏缩略图比下载页宽一点(114px vs 76px)，就这一个尺寸不一样 */ body.pg-item .side-item>a:first-child{ width:114px; } /* ========================================================================== 下面这些都是只有单个页面会用到的类名，互相之间没有重名冲突，按页面分段放，不需要 body.pg-xxx 限定 ========================================================================== */ /* ---------- 首页(pg-index)专属 ---------- */ .notice-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; margin-bottom:28px; background:var(--warn-dim); border:1px solid rgba(245,166,35,0.35); border-radius:10px; color:var(--warn); font-size:13px; line-height:1.6; } .notice-bar a{ margin-left:auto; flex-shrink:0; color:var(--warn); font-weight:600; text-decoration:underline; } .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:36px 0 16px; } .sec-head:first-of-type{ margin-top:0; } .sec-head h2{ display:flex; align-items:center; gap:10px; margin:0; font-size:18px; font-weight:700; color:var(--text); } .sec-head h2::before{ content:''; width:4px; height:18px; border-radius:2px; background:var(--accent); flex-shrink:0; } .sec-head a{ font-size:12.5px; font-family:var(--mono); color:var(--text-dim); text-decoration:none; white-space:nowrap; } .sec-head a:hover{ color:var(--accent); } /* 首页"今日热榜"：跟排行榜页(pg-ranking)的 .rank-list 系列同名但结构完全不同，这里必须用 body.pg-index 限定，不然会跟排行榜页那份互相覆盖 */ body.pg-index .rank-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:6px 24px; } .rank-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text-dim); font-size:13px; transition:background .15s, color .15s; } .rank-item:hover{ background:var(--surface-2); color:var(--text); } body.pg-index .rank-num{ flex-shrink:0; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; color:var(--text-faint); } .rank-item.top1 .rank-num{ background:#F5C518; color:#1A1200; } .rank-item.top2 .rank-num{ background:#C9D2DA; color:#14181C; } .rank-item.top3 .rank-num{ background:#D08A4F; color:#1A1200; } body.pg-index .rank-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rank-heat{ flex-shrink:0; font-family:var(--mono); font-size:11.5px; color:var(--text-faint); } /* ---------- 筛选页(pg-filter)专属 ---------- */ .filter-bar{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px 20px; margin-bottom:22px; } .filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--border-soft); } .filter-row:last-child{ border-bottom:none; } .filter-label{ flex-shrink:0; width:52px; font-family:var(--mono); font-size:12.5px; color:var(--text-faint); letter-spacing:0.3px; } .filter-row a{ display:inline-block; padding:5px 13px; border-radius:999px; font-size:13px; color:var(--text-dim); text-decoration:none; border:1px solid transparent; transition:background .15s, color .15s, border-color .15s; } .filter-row a:hover{ background:var(--surface-2); color:var(--text); } .filter-row a.s{ background:var(--accent-dim); color:var(--accent); font-weight:600; border-color:rgba(53,208,127,0.35); } .filter-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .filter-toolbar .explain{ font-size:13.5px; color:var(--text-dim); } .filter-toolbar .explain i{ font-style:normal; color:var(--accent); font-weight:600; } .toolbar-toggles{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } /* 开关本身：真正的滑动开关样式，不是裸的原生 checkbox。原生视觉隐藏但保留可点击/可访问性，视觉轨道+滑块是紧跟在它后面的 .switch-track，靠 :checked + .switch-track 兄弟选择器联动变色/滑动 */ .isbt-toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--text-dim); user-select:none; } .isbt-toggle:hover{ color:var(--text); } .isbt-toggle input{ position:absolute; opacity:0; width:1px; height:1px; } .isbt-toggle .switch-track{ position:relative; flex-shrink:0; width:38px; height:22px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); transition:background .2s ease, border-color .2s ease; } .isbt-toggle .switch-track::before{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:transform .2s ease, background .2s ease; } .isbt-toggle input:checked + .switch-track{ background:var(--accent-dim); border-color:rgba(53,208,127,0.45); } .isbt-toggle input:checked + .switch-track::before{ transform:translateX(16px); background:var(--accent); } .isbt-toggle input:focus-visible + .switch-track{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------- 搜索页(pg-search)专属 ---------- */ em{ font-style:normal; color:var(--accent); font-weight:700; } /* 万一以后给搜索结果加了高亮命中词()，先备好样式 */ .search-summary{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:22px; font-size:14px; color:var(--text-dim); } .search-summary .kw{ color:var(--accent); font-weight:700; } .search-summary .num{ color:var(--text); font-family:var(--mono); font-weight:700; } /* ---------- 详情页(pg-item)专属 ---------- */ /* 顶部快捷导航里的锚链接(#download/#play_list/#comment)点击跳转后，目标区块顶部会被 fixed 的 ul.header 挡住一截。scroll-margin-top 告诉浏览器原生锚点跳转/scrollIntoView 时目标上方要留多少空当，跟 .home-wrap 顶部 padding:88px 用的是同一个头部高度基准 */ #download, #play_list, #comment{ scroll-margin-top:88px; } .item-layout{ display:flex; align-items:flex-start; gap:28px; } .item-main{ flex:1 1 0; min-width:0; } .item-aside{ flex:0 0 360px; width:360px; display:flex; flex-direction:column; gap:24px; } .item-hero{ display:flex; gap:28px; margin-bottom:28px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; } .item-poster{ flex-shrink:0; width:220px; height:325px; overflow:hidden; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); } .item-poster img{ width:100%; height:100%; object-fit:cover; display:block; } .item-meta{ flex:1; min-width:0; } .item-meta h1{ margin:0 0 6px; font-size:22px; font-weight:700; color:var(--text); line-height:1.3; } .item-othertitle{ margin:0 0 12px; font-size:13px; color:var(--text-faint); } .item-othertitle span{ margin-right:10px; } .item-info-row{ font-size:13.5px; color:var(--text-dim); margin:0 0 8px; line-height:1.7; } .item-info-row b.label{ color:var(--text-faint); font-weight:500; margin-right:6px; font-family:var(--mono); font-size:12px; } .item-info-row a{ color:var(--info); text-decoration:none; margin-right:4px; } .item-info-row a:hover{ text-decoration:underline; } .item-info-row .score{ color:var(--warn); font-weight:700; font-family:var(--mono); } .item-quicknav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .item-quicknav a{ display:inline-flex; align-items:center; padding:7px 16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); text-decoration:none; font-size:13px; transition:border-color .15s, color .15s; } .item-quicknav a:hover{ border-color:var(--accent); color:var(--accent); } /* 猜你感兴趣：固定一排最多 7 个，每个格子按 1fr 平分 item-main 的宽度 */ .related-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:16px 14px; list-style:none; margin:0; padding:0; } .related-grid a{ display:block; text-decoration:none; } .related-poster{ position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); margin-bottom:6px; } .related-poster img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; } .related-grid a:hover .related-poster img{ transform:scale(1.05); } .related-grid a:hover .related-poster{ border-color:var(--accent); } .related-title{ text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; font-weight:500; color:var(--text-dim); line-height:1.4; } .related-grid a:hover .related-title{ color:var(--accent); } .related-info{ position:absolute; left:0; right:0; bottom:0; z-index:3; text-align:left; padding:10px 8px 8px; background:linear-gradient(0deg, rgba(6,8,10,0.6) 55%, rgba(6,8,10,0.35) 85%, transparent); opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; } .related-grid a:hover .related-info{ opacity:1; transform:translateY(0); } .related-info p{ margin:0 0 5px; font-size:12px; line-height:1.5; color:var(--text); text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .related-info p:last-child{ margin-bottom:0; } .related-info b{ color:var(--accent); font-weight:700; margin-right:5px; text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7); } .related-grid a:hover b{ color:var(--accent); } /* 剧情简介：.detail 这个类名是 JS 依赖的，不能改（限制级内容需要登录才显示剧照） */ .detail{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px 22px; } .detail>div{ font-size:14px; line-height:1.9; color:var(--text-dim); } .detail>div img{ border-radius:8px; margin:10px 0; max-width:100%; height:auto;display: block; } .detail>div h1{ font-size:14px; color:var(--text-dim); font-weight:500; } /* 未登录时的"登录显示剧照图片"提示文案 */ /* 种子信息 */ .torrent-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .torrent-list>li{ position:relative; /* down.box() 弹窗(.down_box)是 position:absolute 挂在这一行 li 里的， li 必须是定位上下文，不然弹窗会跑到页面其它地方去 */ padding:14px 16px; border-radius:10px; background:var(--surface); border:1px solid var(--border); margin-bottom:10px; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:5px; } .torrent-list>li>a:nth-of-type(1){ order:1; flex:1 1 0%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); text-decoration:none; font-size:14px; line-height:1.6; cursor:pointer; /* 付费种子这个没有 href(靠 onClick 触发 down.box() 弹窗)，没有 href 的浏览器默认不会显示手型指针，看着就跟不能点一样，这里显式声明 */ } .torrent-list>li>a:nth-of-type(1):hover{ color:var(--accent); text-decoration:underline; } .torrent-list>li>a:nth-of-type(1) i{ font-style:normal; color:var(--accent); font-weight:700; margin-right:4px; } .torrent-list>li>b{ order:2; flex-shrink:0; font-family:var(--mono); font-size:12px; color:var(--warn); margin:0; } .button{ display:inline-block; flex-shrink:0; padding:4px 12px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); text-decoration:none; font-size:12px; cursor:pointer; transition:border-color .15s, color .15s; } .button:hover{ border-color:var(--accent); color:var(--accent); } .button.success{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); font-weight:600; } .button[disable]{ pointer-events:none; opacity:.6; } .torrent-list>li>a:nth-of-type(2){ order:3; flex-shrink:0; margin-left:auto; } .torrent-list>li>a:nth-of-type(3){ order:4; flex-shrink:0; } .torrent-list>li>u{ order:5; flex-basis:100%;text-decoration: none;} .torrent-list dl{ order:6; flex-basis:100%; margin:0; padding:10px 12px; background:var(--surface-2); border-radius:8px; border:1px solid var(--border-soft); display:none; font-size:12.5px; color:var(--text-dim); } .torrent-list dl dd{ margin:0 0 4px; list-style:none; } .torrent-list dl dd i{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:4px; } .torrent-list dl p{ margin:2px 0 2px 20px; color:var(--text-faint); } .torrent-list dl p i{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:4px; } .torrent-list u{ font-style:normal; font-size:11.5px; color:var(--text-faint); font-family:var(--mono); } .torrent-empty{ color:var(--text-dim); font-size:13.5px; padding:16px 0; } /* 磁力下载（兜底，没有解析出正式种子信息时显示） */ .magnet-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .magnet-list li{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:12.5px; color:var(--text-dim); word-break:break-all; } .magnet-list li>a:first-child{ flex:1; min-width:0; } /* VIP 付费下载弹窗：down.box() 这个 JS 函数动态生成的，不是模板里写死的 HTML。原来 min-width:240px/padding:14px 16px/font-size:13px 跟种子列表本身的字号差不多，混在一堆种子行里很不显眼，容易被当成页面里其它小字提示——放大尺寸、用醒目的金色描边+外发光，让它一弹出来就很明确是个需要处理的弹窗，不是普通文字 */ .down_box{ position:absolute; z-index:40; top:40px; left:18px; min-width:500px; max-width:min(560px, 90vw); background:var(--surface); border:1px solid #F5C518; border-radius:14px; box-shadow:0 24px 48px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(245,197,24,0.15), 0 0 32px -8px rgba(245,197,24,0.35); padding:20px 22px; font-size:14.5px; animation:downBoxIn .18s ease; } @keyframes downBoxIn{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } .down_box .a{ color:#F5C518; font-weight:700; font-size:15.5px; margin-bottom:10px; } .down_box .b{ color:var(--text-dim); line-height:1.7; margin-bottom:14px; } .down_box .b a{ color:var(--info); } /* .g/.r 是 down.start() 成功/提示文案自己套的，跟上面 .b a 是同一层级(套在 .b 里面)、都是两个 class + 一个标签选择器，特异度打平的话源码顺序靠后的赢；这里改成三层选择器，明确保证不管以后源码顺序怎么调整都盖得过 .b a */ .down_box .c{ display:flex; gap:10px; } .down_box .c input[type=button]{ flex:1; padding:11px 14px; border-radius:9px; border:none; cursor:pointer; background:var(--accent); color:#06130B; font-weight:700; font-size:13.5px; transition:filter .15s; } .down_box .c input[type=button]:hover{ filter:brightness(1.08); } .down_box .c input.d{ background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border); } .down_box textarea{ width:100%; margin:10px 0; padding:10px; border-radius:8px; resize:vertical; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:12.5px; } .down_box .b a.g{ color:var(--accent); font-size:13px; font-weight:700; } .down_box .b a.r{ color:var(--text-faint); font-size:12px; } .down_box .e{ color:var(--text-faint); } /* 网友评论：#comment/.bt_comment 是第三方评论组件(comment.xiaoeryi.com)的挂载点 */ .comment{ font-size:14px; } .comment .bt_comment{ margin-bottom:6px; } .comment>ul{ list-style:none; margin:0; padding:0; } .comment>ul img{ width:20px; height:20px; } .comment>ul>li{ display:flex; margin-bottom:18px; } .comment>ul>li div img{ width:44px; height:44px; border-radius:50%; object-fit:cover; } .comment>ul>li ol{ margin:0 0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; width:100%; list-style:none; } .comment>ul>li ol li{ display:inherit; align-items:center; color:var(--text); font-size:13.5px; } .comment>ul>li ol li:first-child{ color:var(--text-faint); font-size:12.5px; } .comment>ul>li ol li:nth-child(3){ color:var(--text-faint); font-size:12px; } .comment>ul>li ol li a{ color:var(--info); margin:0 16px; cursor:pointer; text-decoration:none; } .comment>ul>li ol li i{ display:inline-block; width:16px; height:16px; cursor:pointer; font-style:normal; color:var(--text-faint); font-family:var(--mono); font-size:12px; transition:transform .15s, color .15s; } .comment>ul>li ol li i.active{ color:var(--error); } .comment>ul>li ol li i:hover{ transform:scale(1.15); } /* ---------- 播放页(pg-play)专属 ---------- */ .play-wrap{ margin-left:0; padding:88px 28px 40px; } .play-episodes{ max-width:90em; margin:24px auto 0; padding-top:24px; border-top:1px solid var(--border); } .play-episodes h2{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:15px; font-weight:700; color:var(--text); } .play-episodes h2::before{ content:''; width:4px; height:15px; border-radius:2px; background:var(--accent); flex-shrink:0; } .resolution-button{ position:relative; width:70px; font-size:16px; font-weight:600; color:rgba(255,255,255,0.9); letter-spacing:.2px; } .resolution-button::after{ content:''; display:inline-block; width:0; height:0; margin-left:5px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid rgba(255,255,255,0.65); vertical-align:2px; } /* bug 修复：.resolution-button 自带 shaka 官方的 .shaka-tooltip 类，鼠标移上去会弹出提示气泡把小三角 ::after 换掉；.resolution-menu 挂在 .resolution-button 内部， hover 会冒泡上去，气泡也跟着弹出来抢位置。这里用同样特异度 + 更靠后的样式表顺序把 ::after 重新按小三角声明一遍，官方 tooltip 属性就不生效了 */ .resolution-button.shaka-tooltip:hover::after{ content:''; display:inline-block; width:0; height:0; margin-left:5px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid rgba(255,255,255,0.65); vertical-align:2px; position:static; bottom:auto; left:auto; transform:none; background:none; color:inherit; font-size:inherit; line-height:normal; white-space:normal; border-radius:0; padding:0; } .resolution-menu{ position:absolute; bottom:42px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; max-height:220px; overflow-y:auto; padding:6px; display:flex; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 16px 36px -12px rgba(0,0,0,0.75); color:rgba(231,236,239,0.85); transition:opacity cubic-bezier(.4,0,.6,1) .6s; } .resolution-menu button{ display:flex; align-items:center; gap:14px; min-height:32px; padding:6px 12px; border-radius:6px; background:none; border:none; color:var(--text); font-size:14px; cursor:pointer; transition:background .15s, color .15s; } /* 当前正在播放的清晰度：不用对勾这种额外的标记元素(定位在这种容器里一直不可靠)，直接用背景色加深 + 文字变大来区分"当前选中" */ .resolution-menu button.current{ color:var(--accent); font-weight:700; font-size:16px; background:var(--accent-dim); } .resolution-menu button i{ font-style:normal; flex-shrink:0; background:var(--warn); color:#1A1200; font-size:10px; font-weight:800; letter-spacing:.3px; padding:1px 5px; border-radius:4px; } .web-fullscreen-button{ width:48px; height:48px; padding:0 2px; background:none; border:none; color:#fff; opacity:.9; cursor:pointer; transition:opacity .1s; } .web-fullscreen-button:hover{ opacity:1; } .web-fullscreen-button.active{ color:var(--accent); } .shaka-video-container .web-fullscreen-button.material-icons-round{ font-size:24px; font-weight:bold; } [data-shaka-player-container].web-fullscreen{ position:fixed !important; inset:0; z-index:1000; width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important; min-height:0 !important; margin:0 !important; border-radius:0 !important; } body.web-fullscreen-active{ overflow:hidden; } .pop{ position:absolute; bottom:60px; left:10px; z-index:1; min-height:18px; padding:5px 10px; font-size:14px; line-height:1.4; white-space:nowrap; background:rgba(18,22,27,0.75); color:var(--text); border-radius:6px; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease; } .pop.visible{ opacity:1; visibility:visible; } .pop b{ color:var(--accent); } .pop a{ color:var(--warn); } /* ---------- 下载页(pg-down)专属 ---------- */ .down-layout{ display:flex; align-items:flex-start; gap:28px; } .down-main{ flex:1 1 0; min-width:0; } .down-aside{ flex:0 0 340px; width:340px; } .down-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .down-name{ font-size:15px; color:var(--text); word-break:break-all; } .down-size{ margin-left:10px; font-family:var(--mono); font-size:12.5px; color:var(--warn); white-space:nowrap; } .torrent-tree{ list-style:none; margin:0; padding:0; } .torrent-tree>li{ padding:8px 4px; font-size:13.5px; color:var(--text-dim); border-bottom:1px solid var(--border-soft); } .torrent-tree>li:last-child{ border-bottom:none; } .torrent-tree>li.has-children{ cursor:pointer; } .torrent-tree>li.has-children:hover{ color:var(--text); } .torrent-tree>li>i{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:6px; } .torrent-tree>li>b{ float:right; font-family:var(--mono); font-size:12px; color:var(--warn); font-weight:400; } .torrent-tree-children{ display:none; margin:8px 0 0; padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border-soft); } .torrent-tree>li.open>.torrent-tree-children{ display:block; } .torrent-tree-children p{ margin:0 0 6px; font-size:12.5px; color:var(--text-faint); } .torrent-tree-children p:last-child{ margin-bottom:0; } .torrent-tree-children p>i{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:6px; } .torrent-tree-children b{ float:right; font-family:var(--mono); font-weight:400; color:var(--warn); } .down-actions{ display:flex; flex-wrap:wrap; gap:12px; } .down-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:120px; padding:11px 20px; border-radius:9px; background:var(--accent); color:#06130B; text-decoration:none; font-size:14px; font-weight:700; cursor:pointer; transition:filter .15s, opacity .15s; } .down-btn:hover{ filter:brightness(1.08); } .down-btn[disable]{ pointer-events:none; opacity:.65; } .down-btn.done{ background:var(--surface-2); color:var(--text-dim); } /* ---------- 排行榜页(pg-ranking)专属 ---------- */ .rank-layout{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:start; } .rank-section{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; } .rank-section h2{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 16px; font-size:16px; font-weight:700; color:var(--text); } .rank-section h2::before{ content:''; width:4px; height:16px; border-radius:2px; background:var(--accent); flex-shrink:0; } .rank-total{ font-size:12px; font-weight:400; color:var(--text-faint); } .rank-total b{ color:var(--warn); font-family:var(--mono); font-weight:700; } /* 跟首页(pg-index)的 .rank-list 系列同名但结构完全不同，必须用 body.pg-ranking 限定 */ body.pg-ranking .rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } body.pg-ranking .rank-list li{ /* flex-wrap:wrap 必须要有：.rank-extra 靠 flex-basis:100% 强制换到下一行显示，这个换行判断依赖父级允许换行，不然 .rank-extra 照样挤在同一行，会把 .rank-title (flex:1 1 0; min-width:0，允许收缩到 0) 越挤越窄，会员名字看起来就跟消失了一样 */ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border-soft); font-size:13.5px; color:var(--text-dim); } body.pg-ranking .rank-list li:last-child{ border-bottom:none; } /* 排名徽标：前三名用强调色高亮，跟站内"选中/激活"状态统一同一套配色语言，不额外引入金银铜这种跟主题色系不搭的颜色 */ body.pg-ranking .rank-num{ flex-shrink:0; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; background:var(--surface-2); color:var(--text-faint); } body.pg-ranking .rank-num.top{ background:var(--accent-dim); color:var(--accent); } body.pg-ranking .rank-title{ /* 不再 flex-grow 占满一整行：时间要紧跟在名字右边，name 只占内容需要的宽度 (太长就省略号截断，最多让到 55%)，剩下的空间留给右边的时间/统计数据 */ flex:0 1 auto; max-width:55%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); text-decoration:none; font-size:14px; } a.rank-title:hover{ color:var(--accent); } .rank-extra{ flex-shrink:0; font-size:11px; color:var(--text-faint); font-family:var(--mono); } .rank-stat{ flex-shrink:0; margin-left:auto; font-size:12px; color:var(--text-faint); } .rank-stat b{ color:var(--warn); font-family:var(--mono); font-weight:700; margin-left:4px; } .rank-empty{ color:var(--text-faint); font-size:13px; padding:16px 4px; border-bottom:none; justify-content:center; } /* ---------- 帮助/求片页(pg-help)专属 ---------- */ .help-layout{ max-width:760px; } .help-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; } .help-notice p{ margin:0 0 10px; font-size:13.5px; color:var(--text-dim); line-height:1.8; } .help-notice p:last-child{ margin-bottom:0; } .help-notice b{ color:var(--warn); } .help-notice a{ color:var(--info); text-decoration:none; } .help-notice a:hover{ text-decoration:underline; } .help-hint{ margin:0 0 12px; font-size:13px; color:var(--text-faint); } .help-hint b{ color:var(--accent); font-family:var(--mono); } .help-card textarea{ width:100%; height:110px; padding:12px 14px; resize:vertical; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; font-family:var(--sans); outline:none; transition:border-color .15s; } .help-card textarea:focus{ border-color:var(--accent); } .help-card textarea::placeholder{ color:var(--text-faint); } .help-submit-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; } .help-count{ font-size:12px; color:var(--text-faint); font-family:var(--mono); } #helpSubmit{ padding:10px 24px; border-radius:8px; border:none; cursor:pointer; background:var(--accent); color:#06130B; font-weight:700; font-size:13.5px; transition:filter .15s, opacity .15s; } #helpSubmit:hover{ filter:brightness(1.08); } #helpSubmit:disabled{ opacity:.65; cursor:default; } .help-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .help-list li{ display:flex; align-items:baseline; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border-soft); font-size:13.5px; color:var(--text-dim); } .help-list li:last-child{ border-bottom:none; } .help-list-num{ flex-shrink:0; color:var(--text-faint); font-family:var(--mono); font-size:12px; } .help-list-text{ flex:1 1 0; min-width:0; word-break:break-all; color:var(--text-dim); } .help-list-time{ flex-shrink:0; font-size:11px; color:var(--text-faint); font-family:var(--mono); } .help-maintenance{ max-width:760px; text-align:center; padding:80px 20px; font-size:16px; color:var(--text-dim); } .help-maintenance a{ color:var(--accent); text-decoration:none; } .help-maintenance a:hover{ text-decoration:underline; } /* ========================================================================== 响应式 ========================================================================== */ @media (max-width:1080px){ .item-layout{ flex-direction:column; } .item-aside{ flex:1 1 100%; width:100%; flex-direction:row; flex-wrap:wrap; } .item-aside .item-section{ flex:1; min-width:260px; } .down-layout{ flex-direction:column; } .down-aside{ flex:1 1 100%; width:100%; display:flex; flex-wrap:wrap; gap:24px; } .down-aside .item-section{ flex:1; min-width:260px; } .rank-layout{ grid-template-columns:repeat(2, 1fr); } .rank-section:first-child{ grid-column:1 / -1; } } /* 860px 以下放不下固定侧栏 + 悬浮顶栏，退回单栏布局。小屏幕上不搞透明渐变那一套（内容本来就挤，没有大图背景衬底，半透明也没意义），顶栏/侧栏都改回普通文档流里的实色栏 */ @media (max-width:860px){ ul.header{ position:sticky; top:0; flex-wrap:wrap; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); } ul.header li.center{ position:static; transform:none; order:3; flex-basis:100%; width:auto; } ul.header li.utility{ margin-left:0; color:var(--text-faint); } ul.header li#logo .tagline{ display:none; } #search input[type=text]{ background:var(--surface-2); border-color:var(--border); } #nav{ position:static; width:auto; height:auto; top:auto; bottom:auto; background:var(--surface); border-right:none; border-bottom:1px solid var(--border); } #nav ul{ flex-direction:row; overflow-x:auto; gap:2px; padding:0 16px; } #nav ul a{ padding:12px 16px; border-left:none; border-bottom:2px solid transparent; text-shadow:none; } #nav ul a.active{ border-left-color:transparent; border-bottom-color:var(--accent); } .home-wrap{ margin-left:0; padding:1.25rem 16px 40px; } #bottom{ margin-left:0; } /* 播放页(pg-play)：#nav 已经整个隐藏，不需要上面这套移动端 #nav 调整； .play-wrap 走自己的 margin/padding，不跟 .home-wrap 共用 */ body.pg-play .play-wrap{ margin-left:0; padding:1.25rem 16px 40px; } /* 首页(pg-index)：#navchild 是可见的，移动端也要跟着调整；.home-wrap 的 padding-top 更小(4px 不是 40px)，因为首页顶部空间算法本来就跟其它页不一样 */ body.pg-index #navchild{ margin-left:0; padding:10px 16px; } body.pg-index .home-wrap{ margin-left:0; padding:1.25rem 16px 4px; } body.pg-index .pgrid{ gap:16px 14px; } /* 详情页(pg-item)：移动端顶栏换成 sticky 并且换行成两行，比桌面端固定头部更高，锚点跳转要留的空当也要跟着变大；主体两栏布局、海报大小也要缩小 */ body.pg-item #download, body.pg-item #play_list, body.pg-item #comment{ scroll-margin-top:130px; } .item-hero{ flex-direction:column; } .item-poster{ width:150px; height:225px; margin:0 auto; } .related-grid{ grid-template-columns:repeat(4, 1fr); } /* 筛选页(pg-filter)/搜索页(pg-search)：筛选条换行、卡片网格缩小 */ .filter-row{ gap:8px; } .filter-label{ width:100%; margin-bottom:-2px; } .pgrid{ grid-template-columns:repeat(auto-fill, minmax(130px,150px)); gap:16px 14px; } /* 下载页(pg-down)：操作按钮改成两个一排 */ .down-btn{ flex:1 1 45%; min-width:0; } } @media (max-width:640px){ /* 播放页的回到顶部按钮比其它页面提前一个断点(640px 不是 480px)缩小，跟原来 play.css 单独的断点保持一致 */ body.pg-play .back-top{ right:16px; bottom:16px; width:40px; height:40px; } } @media (max-width:480px){ .back-top{ right:16px; bottom:16px; width:40px; height:40px; } .item-aside{ flex-direction:column; } .related-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; } .pgrid{ grid-template-columns:repeat(auto-fill, minmax(100px,120px)); gap:10px; } .pcard-info{ display:none; } /* 手机上没有鼠标悬停这回事，藏起来更省地方 */ body.pg-index .pgrid{ gap:10px; } body.pg-index .rank-list{ grid-template-columns:1fr; } .sec-head{ margin:28px 0 12px; } .down-aside{ flex-direction:column; } }