/* immersive.css — Immersive player (.immersive-* + .imm-*): bg, frame, controls, panels infra */ .immersive-player { position: fixed; inset: 0; z-index: 2000; background: #000; color: #fff; transform: translate3d(0, 100%, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* [Perf v4] 移除永久 will-change: transform — 沉浸式播放器只在 toggleImmersive 时动画 (打开/关闭), translate3d 已经促合成. 永久 will-change 会让 GPU 一直为它保留一张全屏图层 (即使关闭) — 在中低端机型上长期占用显存, 也阻止合成器把它和其它层合并优化. */ /* [v5] 0.4s → 0.32s：直播电台追求"即时感"而非"华丽感"，缩短滑入动画让用户更快进入沉浸态。 */ transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; overflow: hidden; touch-action: none; contain: strict; } .immersive-player.show { transform: translate3d(0, 0, 0); } /* 动画进行中由 JS 加 .is-animating, 短暂申请 GPU 层, 完成后移除 */ .immersive-player.is-animating { will-change: transform; } /* [Perf v7] 沉浸式滑入/滑出分档： - lite: 0.32s → 0.22s，缓动改为纯 ease-out 无回弹（更线性，肉眼难分辨但 GPU 更稳） - min: 直接 0.15s 近瞬切（视觉等同硬切，但保留一点滑感避免突兀） */ body.perf-lite .immersive-player { transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body.perf-min .immersive-player { transition: transform 0.15s linear; } .immersive-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #111; transform: translate3d(0,0,0); /* [Perf v4] paint 隔离: 切电台时只在 bg 内部重绘, 不影响前景控件 */ contain: layout paint style; } .immersive-bg img, .imm-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* [Perf v4] blur 半径 60→30: GPU 模糊成本与半径平方近似成正比, 30px 视觉与 60px 差异极小, 但中低端机型 GPU 压力大幅下降, 切台时长期不再有"卡一下"的现象. scale(1.25) 保留: 防止 blur 边缘穿帮; saturate 保留: 提升暗色背景观感. */ filter: blur(30px) saturate(1.4); transform: translateZ(0) scale(1.25); opacity: 0; /* [v5] 0.7s → 0.35s：避免背景"慢半拍"造成与 mini player / 锁屏的不同步错觉。模糊背景 fade 太慢会有明显拖影感。 */ transition: opacity 0.35s ease-out; /* [Perf v4] 移除 will-change: opacity — opacity 过渡每次仅 0.35s, 浏览器会自动促合成; 永久 will-change 会强制保留两张全屏 GPU 图层. 旧逻辑下双层背景 a/b 各持有一张 1920×1080 的 GPU 纹理, 内存压力可观. */ } .imm-bg-img.is-active { opacity: 0.55; } /* 切换瞬间申请 GPU 层 (JS 加 .is-fading, transitionend 后移除) */ .imm-bg-img.is-fading { will-change: opacity; } /* ======================================================================== * [Perf v7] 性能模式分档 —— 由 Utils.applyPerfMode() 在加 class * * .perf-high (默认): 保持现有 blur(30px) 全屏背景 + 完整 FLIP + 0.32s 沉浸式滑入 * .perf-lite: 中低端 Android (deviceMemory ≤ 4 + 4 核及以下，或 saveData) * - 背景 blur 走「降采样 + scale」trick (~300× 便宜) * - 沉浸式滑入 0.22s 标准 ease-out * - 前景封面 crossfade 缩到 0.18s * .perf-min: 极弱设备 / prefers-reduced-motion: reduce * - 跳过模糊背景图层，用纯色背景 * - 沉浸式滑入 0.15s 近瞬切 * - 前景封面硬切（无动画） * - FLIP 硬切（无飞行动画） * - 所有 transition 时长 ≤ 0.15s * * 降采样 blur 的原理： * filter 卷积成本 ∝ 像素数 × 半径²。原全屏 (1920×1080 ≈ 2.07M 像素) + * blur(30px) 在 Mali-G52 / Adreno 610 这档 GPU 上单帧约 8-14ms， * crossfade 时双层并存即 16-28ms → 必掉帧。 * 做法：把渲染盒缩到 120×68 (≈8.1k 像素)，blur 半径降到 10px。 * GPU 工作量从 ~2.07M × 900 → ~8.1k × 100 ≈ 减少 ~2300 倍。 * 再用 transform: scale 把合成结果放大回视口，scale 在 GPU compositor * 层完成（接近免费），最终视觉与 30px 全屏 blur 几乎不可分辨—— * 因为 30px blur 本来就把高频细节全抹光了，再降一档采样肉眼看不出。 * ====================================================================== */ /* —— perf-lite: 降采样 blur，时间缩短 —— */ body.perf-lite .imm-bg-img { width: 120px; height: 68px; left: 50%; top: 50%; margin-left: -60px; margin-top: -34px; inset: auto; filter: blur(10px) saturate(1.4); transform: translateZ(0) scale(18); transform-origin: center center; transition: opacity 0.18s ease-out; } body.perf-lite .imm-logo-wrap .imm-art-img { transition: opacity 0.18s ease-out; } /* —— perf-min: 彻底跳过模糊背景，用纯色，所有动画硬切或最短 —— */ body.perf-min .imm-bg-img { display: none; } body.perf-min .immersive-bg { background: #0d0d12; } body.perf-min .imm-bg-img.is-active, body.perf-min .imm-bg-img.is-fading { will-change: auto; } body.perf-min .imm-logo-wrap .imm-art-img { transition: none; /* 前景封面硬切，零延迟 */ } body.perf-min .imm-logo-wrap { transition: none; /* FLIP 由 JS 端跳过，CSS 也确保无残留过渡 */ } /* —— prefers-reduced-motion: Apple HIG / Material A11Y 强制要求 —— */ @media (prefers-reduced-motion: reduce) { .imm-bg-img, .imm-logo-wrap .imm-art-img, .imm-logo-wrap, .player-logo, .immersive-player, .popup-glass, .category-detail-view, .toast-notification, .announce-sheet { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .immersive-bg img.loading { opacity: 0; } .immersive-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.55)); pointer-events: none; } .immersive-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); justify-content: flex-start; } .pull-bar-area { width: 100%; padding: 12px 0 6px; cursor: pointer; display: flex; justify-content: center; z-index: 30; position: relative; flex-shrink: 0; } .pull-bar { width: 40px; height: 5px; background: rgba(255,255,255,0.3); border-radius: 10px; } .imm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 22px 20px; gap: 0; position: relative; } .imm-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin-bottom: 0; overflow: hidden; } .imm-artwork-row { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 0; width: 100%; gap: 12px; } .imm-logo-wrap { width: 100%; max-width: min(calc(100vw - 40px), 42vh); aspect-ratio: 1 / 1; border-radius: 12px; background: transparent; overflow: hidden; flex-shrink: 0; position: relative; cursor: default; align-self: center; transition: border-radius 0.42s ease; filter: none; } .imm-logo-wrap img.art-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; } .imm-logo-wrap .imm-art-img { position: absolute; inset: 0; opacity: 0; /* [v5] 0.6s → 0.22s：用户对"封面变化"非常敏感，超过 300ms 就会感到"还没换"。缩短到 0.22s 让沉浸式与 mini player 在感知上同步。 */ transition: opacity 0.22s ease-out; /* [Perf v4] 移除 will-change: opacity, 切电台时由 JS 临时加 .is-fading */ } .imm-logo-wrap .imm-art-img.is-active { opacity: 1; } .imm-logo-wrap .imm-art-img.is-fading { will-change: opacity; } .imm-logo-wrap img.art-img.loading { opacity: 0; } #imm-body.panel-active .imm-artwork-row { justify-content: flex-start; margin-bottom: 14px; } #imm-body.panel-active .imm-logo-wrap { max-width: 56px; border-radius: 12px; filter: none; cursor: pointer; } .imm-compact-meta { display: none; flex: 1; min-width: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; opacity: 0; transition: opacity 0.28s ease; align-self: stretch; } #imm-body.panel-active .imm-compact-meta { display: flex; opacity: 1; } .imm-compact-meta-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; justify-content: center; } .imm-compact-title { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; letter-spacing: -0.01em; } .imm-compact-artist { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-top: 1px; } .imm-compact-close-btn { display: none; } .imm-panel { flex: 0 0 0; min-height: 0; opacity: 0; pointer-events: none; overflow: hidden; height: 0; transition: opacity 0.26s ease; display: flex; flex-direction: column; background: transparent; border: none; border-radius: 0; } #imm-body.panel-active .imm-panel { flex: 1 1 auto; height: auto; opacity: 1; pointer-events: auto; transition: opacity 0.32s ease 0.10s; } .imm-panel-section { width: 100%; height: 100%; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; background: transparent; } .imm-panel-section[hidden] { display: none !important; } .imm-panel-section::-webkit-scrollbar { display: none; } .imm-panel-fade { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%); } .imm-panel-lyrics-content { width: 100%; height: 100%; color: rgba(255, 255, 255, 0.6); font-size: 22px; line-height: 2.2; font-weight: 600; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); padding: 20px 4px 40px 4px; text-align: center; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .imm-panel-lyrics-content::-webkit-scrollbar { display: none; } .imm-epg-list { display: flex; flex-direction: column; gap: 0; padding: 4px 0 24px 0; } .imm-epg-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: none; cursor: default; transition: background 0.15s; border-radius: 6px; background: transparent; } .imm-epg-item.has-desc { cursor: pointer; } .imm-epg-item.has-desc:active { background: rgba(255,255,255,0.06); } .imm-epg-item.current { background: transparent; } .imm-epg-item.past .imm-epg-item-time, .imm-epg-item.past .imm-epg-item-title { opacity: 0.40; } .imm-epg-item-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.5); min-width: 56px; flex-shrink: 0; padding-top: 1px; line-height: 1.4; letter-spacing: 0.02em; } .imm-epg-item.current .imm-epg-item-time { color: #ff4a50; } .imm-epg-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .imm-epg-item-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.35; display: flex; align-items: center; gap: 6px; min-width: 0; } .imm-epg-item-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .imm-epg-item.current .imm-epg-item-title { color: #fff; font-weight: 700; } .imm-epg-item-time-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .imm-epg-item-badge { display: inline-flex; align-items: center; background: #ff4a50; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; vertical-align: middle; letter-spacing: 0.3px; flex-shrink: 0; } .imm-epg-item-desc-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1.4px solid rgba(255,255,255,0.45); color: rgba(255,255,255,0.65); font-size: 9px; font-weight: 700; flex-shrink: 0; font-style: italic; font-family: Georgia, serif; } .imm-epg-item-cover { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); align-self: center; } .imm-epg-item-cover-placeholder { width: 44px; height: 44px; border-radius: 6px; background: rgba(255,255,255,0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; align-self: center; } .imm-favs-panel-list { display: flex; flex-direction: column; gap: 0; padding: 4px 0 24px 0; } .imm-fav-panel-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: none; cursor: pointer; border-radius: 6px; transition: background 0.15s; background: transparent; } .imm-fav-panel-item:active { background: rgba(255,255,255,0.06); } .imm-fav-panel-item.active { background: transparent; } .imm-fav-panel-item.active .imm-fav-panel-prog-name { color: #ff4a50; } .imm-fav-panel-logo { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; flex-shrink: 0; background: rgba(255,255,255,0.06); } .imm-fav-panel-logo-placeholder { width: 44px; height: 44px; border-radius: 6px; background: rgba(255,255,255,0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(255,255,255,0.3); } .imm-fav-panel-epg { flex: 1; min-width: 0; } .imm-fav-panel-prog-name { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } .imm-fav-panel-prog-time { font-size: 12px; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; margin-top: 2px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imm-fav-panel-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff4a50; animation: pulse-live 1.5s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .imm-panel-desc-inner { padding: 12px 4px 36px 4px; } .imm-panel-back-btn { display: flex; align-items: center; gap: 5px; background: transparent; border: none; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 0; margin-bottom: 14px; -webkit-tap-highlight-color: transparent; transition: color 0.15s; } .imm-panel-back-btn svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } .imm-panel-back-btn:active { color: #fff; } .imm-panel-desc-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .imm-panel-desc-title { font-size: 17px; font-weight: 700; color: #fff; flex: 1; min-width: 0; line-height: 1.4; } .imm-panel-desc-time { font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 99px; flex-shrink: 0; white-space: nowrap; } .imm-panel-desc-text { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.82); white-space: pre-wrap; word-break: break-word; } .imm-info-row { width: 100%; flex-shrink: 0; margin: auto 0; display: block; position: relative; } #imm-body.panel-active .imm-info-row { display: none; } .imm-title-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 32px; position: relative; } .imm-name-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .imm-live-bar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 28px 0; flex-shrink: 0; opacity: 1; } .imm-live-bar-line { flex: 1; height: 5px; border-radius: 2.5px; } .imm-live-bar-line:first-child { background: linear-gradient(to right, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 100%); } .imm-live-bar-line:last-child { background: linear-gradient(to right, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.45) 100%); } .imm-live-bar-text { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.95); letter-spacing: 0.08em; white-space: nowrap; } .imm-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; margin-top: 1px; } .imm-sub-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; } .imm-sub-program { font-size: 20px; font-weight: 500; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; min-width: 0; flex: 0 1 auto; } .imm-sub-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .imm-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px; margin: 0; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 8px; transition: color 0.18s, transform 0.12s, background 0.18s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .imm-icon-btn:hover { color: #fff; } .imm-icon-btn:active { transform: scale(0.88); } .imm-icon-btn.is-active { color: #fff; } .imm-icon-btn svg { display: block; width: 26px; height: 26px; } .imm-epg-btn { padding: 2px 4px; } .imm-epg-btn svg { width: 28px; height: 20px; } .imm-list-btn svg { width: 28px; height: 28px; } .imm-fav-btn.is-fav { color: #ffcc00; } .imm-desc-btn { width: 18px; height: 18px; border-radius: 50%; border: none; color: rgba(255,255,255,0.5); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; margin: 0; transition: color 0.18s, transform 0.12s; -webkit-tap-highlight-color: transparent; } .imm-desc-btn:active { transform: scale(0.88); color: #fff; } .imm-desc-btn svg { width: 18px; height: 18px; display: block; } .imm-dots-btn { position: relative; z-index: 2; } .imm-dots-btn svg { width: 4px; height: 16px; display: block; } .imm-transport-area { display: flex; align-items: center; justify-content: center; gap: 56px; width: 100%; padding: 0; flex-shrink: 0; margin: 0 0 28px 0; } .imm-bottom-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 0; flex-shrink: 0; margin: 0; } .imm-bottom-spacer { flex: 1; } .imm-controls-grid { display: none; } .imm-controls-row { display: contents; } .imm-transport-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 6px; color: rgba(255,255,255,0.92); cursor: pointer; transition: color 0.18s, transform 0.12s; -webkit-tap-highlight-color: transparent; } .imm-transport-btn:hover { color: #fff; } .imm-transport-btn:active { transform: scale(0.9); } .imm-transport-btn svg { width: 38px; height: 38px; } .imm-play-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px; color: #fff; cursor: pointer; transition: transform 0.12s; -webkit-tap-highlight-color: transparent; } .imm-play-btn:active { transform: scale(0.92); } .imm-play-btn svg { width: 50px; height: 50px; } .imm-share-btn svg, .imm-list-btn svg { color: rgba(255,255,255,0.55); } .imm-lyrics-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .imm-dots-capsule { flex-shrink: 0; display: flex; align-items: center; gap: 14px; height: 30px; background: rgba(40,40,40,0.92); /* [Perf v4] 28→18 px blur, 胶囊背景已有 0.92 不透明度兜底, 视觉几乎相同 */ -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 999px; white-space: nowrap; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.45); max-width: 0; padding: 0; margin-right: 0; opacity: 0; pointer-events: none; border-color: transparent; box-shadow: 0 0 0 rgba(0,0,0,0); transition: max-width 0.42s cubic-bezier(0.32, 0.72, 0, 1), padding 0.42s cubic-bezier(0.32, 0.72, 0, 1), margin-right 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, border-color 0.24s ease, box-shadow 0.32s ease; } .imm-dots-capsule.open { max-width: 240px; padding: 0 14px; margin-right: 8px; opacity: 1; pointer-events: auto; border-color: rgba(255,255,255,0.12); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } .imm-dots-capsule:empty { display: none; } .imm-dots-capsule-icon { width: 22px; height: 22px; object-fit: contain; cursor: pointer; border-radius: 5px; transition: transform 0.15s, opacity 0.15s; -webkit-tap-highlight-color: transparent; display: block; flex-shrink: 0; } .imm-dots-capsule-icon:active { transform: scale(0.86); opacity: 0.7; } #imm-epg-btn.is-active { color: #fff !important; filter: drop-shadow(0 0 6px rgba(255,59,48,0.55)); } #imm-lyrics-btn.is-active { color: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); } #imm-desc-btn.is-active { color: #fff; } #imm-list-btn.is-active { color: #fff; } #imm-name, #imm-program { white-space: nowrap; overflow: hidden; min-width: 0; }