/* ========================================================================= * 音悦声 · 电视（TV）遥控器焦点样式 * ------------------------------------------------------------------------- * 只在 时生效（tv.js 判定为电视终端后加上）。 * 桌面 / 手机端完全不加载这些规则（选择器全部带 .tv-mode 前缀）。 * * 电视端的核心矛盾：**用户离屏幕 3 米，看不见细描边**。 * 所以焦点态必须满足： * 1) 有足够粗的外扩描边（不是 inset，要往外长，不然被卡片裁掉） * 2) 配合底色高亮 + 轻微放大 —— 三种信号叠加，扫一眼就能找到 * 3) 动画极短（TV 芯片 GPU 弱，长动画会掉帧） * ========================================================================= */ :root { /* TV 上字号整体放大一档：3 米视距下 14px 完全看不清 */ --tv-focus-color: #7ee0ff; --tv-focus-glow: 0 0 0 4px rgba(126, 224, 255, 0.9), 0 0 28px 6px rgba(126, 224, 255, 0.45); } html.tv-mode { /* 电视端把整体基准字号提到 18px，各组件按 rem/em 的相对关系自动放大 */ font-size: 18px; /* 电视浏览器普遍不支持平滑滚动，且平滑滚动在低端芯片上会卡 → 关掉 */ scroll-behavior: auto; } html.tv-mode body { /* 遥控器不需要细腻的悬停反馈；同时避免静止时的鼠标光标挡视线 */ cursor: none; /* 电视端调大行高，远距离更易读 */ line-height: 1.65; } /* 电视端允许保留光标（接鼠标的盒子）—— 用 JS 聚焦时会临时显示 */ html.tv-mode body * { cursor: none !important; } /* ------------------------- 焦点态（核心） ------------------------- */ html.tv-mode .tv-focus { outline: none !important; box-shadow: var(--tv-focus-glow) !important; border-radius: 12px; position: relative; z-index: 5; /* 放大一点点就够，TV 上太夸张会互相遮挡 */ transform: scale(1.045); transition: transform 0.08s linear, box-shadow 0.08s linear; /* 卡片类元素加上内发光，深色卡片上更醒目 */ background-color: color-mix(in srgb, var(--tv-focus-color) 12%, transparent) !important; } /* 卡片 / 列表项这类「大块」元素：不放大（会盖住邻居），只描边 + 提亮 */ html.tv-mode .card.tv-focus, html.tv-mode .rail-item.tv-focus, html.tv-mode .song-row.tv-focus { transform: none; box-shadow: var(--tv-focus-glow) !important; } /* 按钮 / 图标这类小元素可以明显放大 */ html.tv-mode button.tv-focus, html.tv-mode .icon-btn.tv-focus, html.tv-mode .chip.tv-focus, html.tv-mode .nav-item.tv-focus { transform: scale(1.08); } /* 焦点元素的文字提亮，避免焦点块里字看不清 */ html.tv-mode .tv-focus b, html.tv-mode .tv-focus strong { color: #fff !important; } /* ------------------------- 焦点时自动展开导航 ------------------------- TV 上没有「鼠标悬停」，侧栏的展开是靠 hover 触发的 → 遥控器聚焦侧栏项时要强制展开。 用 :focus-within + .tv-focus 双保险。 */ html.tv-mode .sidenav:focus-within, html.tv-mode body.nav-wide .sidenav { width: var(--nav-w-wide); } html.tv-mode .sidenav:focus-within ~ .app, html.tv-mode body.nav-wide .app { padding-left: calc(var(--nav-left) + var(--nav-w-wide) + var(--nav-gap)); } /* ------------------------- 遥控器操作提示条 ------------------------- 首次进入 TV 版显示 3 秒操作提示，告诉用户遥控器怎么用。 */ .tv-hint { position: fixed; left: 50%; bottom: 8vh; transform: translateX(-50%) translateY(20px); z-index: 9999; display: flex; align-items: center; gap: 22px; padding: 18px 30px; border-radius: 16px; background: rgba(12, 14, 20, 0.94); border: 1px solid rgba(126, 224, 255, 0.35); color: #eaf4ff; font-size: 17px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .tv-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); } .tv-hint .k { display: inline-block; min-width: 40px; padding: 4px 10px; margin-right: 8px; border-radius: 8px; background: rgba(126, 224, 255, 0.16); border: 1px solid rgba(126, 224, 255, 0.4); font-weight: 600; text-align: center; } .tv-hint .sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.18); } /* ------------------------- 电视端：滚动条极简化 ------------------------- 坐在 3 米外看不到 8px 滚动条，且 TV 浏览器滚动条常是亮白色很刺眼 */ html.tv-mode ::-webkit-scrollbar { width: 0; height: 0; } /* ------------------------- 电视端：关掉所有 hover 特效 ------------------------- 遥控器没有 hover，这些效果在 TV 上要么不触发、要么造成「闪烁」 */ html.tv-mode .card:hover, html.tv-mode .rail-item:hover, html.tv-mode button:hover { transform: none; } /* ------------------------- 电视端：播放条加高、按钮加大 ------------------------- 电视上播放条是主要操作区，按钮必须够大够好按。 */ html.tv-mode .playerbar { --player-h: 104px; height: var(--player-h); } html.tv-mode .playerbar button, html.tv-mode .playerbar .icon-btn { width: 48px; height: 48px; } html.tv-mode .playerbar .btn-play { width: 56px; height: 56px; } /* ------------------------- 电视端：网格列数收敛 ------------------------- 电视屏宽（1920）按 1440 的布局跑会挤成一片小卡片；TM 上卡片要更大更少 */ @media (min-width: 1600px) { html.tv-mode .grid-cards { --fit-min: 260px; } html.tv-mode .grid-auto { --fit-min: 220px; } html.tv-mode .page-title { font-size: 38px; } html.tv-mode .section-title { font-size: 26px; } } @media (min-width: 2560px) { html.tv-mode { font-size: 22px; } html.tv-mode .grid-cards { --fit-min: 320px; } html.tv-mode .grid-auto { --fit-min: 280px; } } /* ------------------------- 电视端：顶部栏高度 ------------------------- 86px 在 1080p 电视上偏矮，字号放大后要同步加高，否则字被裁 */ html.tv-mode { --top-h: 104px; } @media (max-width: 1023px) { html.tv-mode { --top-h: 88px; } } /* ------------------------- 电视端：隐藏只在触屏/鼠标下有用的东西 ------------------------- */ html.tv-mode .hide-tv { display: none !important; } /* 下载页入口在 TV 上没意义（TV 不能装手机包），隐藏 */ html.tv-mode [data-route="download"] { display: none !important; } /* ------------------------- 加载中/骨架屏 ------------------------- */ html.tv-mode .skeleton { animation-duration: 1.4s; }