:root{ --bg-0:#d0c8d4; --bg-1:#ddd6e0; --bg-2:#c8c0d0; --bg-elevated:#ffffff; --glass:rgba(255,255,255,0.72); --glass-strong:rgba(255,255,255,0.88); --glass-border:rgba(40,30,20,0.08); --line:rgba(40,30,20,0.10); --green:#FC3C44; --green-dim:#d92b34; --green-glow:rgba(252,60,68,0.28); --accent-rgb:252,60,68; --gold:#ff9f0a; --text-0:#1c1916; --text-1:rgba(40,32,26,0.72); --text-2:rgba(40,32,26,0.42); --danger:#FF453A; --radius-s:12px; --radius-m:14px; --radius-l:20px; --blur-1:20px; --blur-2:40px; --blur-3:60px; --ease:cubic-bezier(0.25,0.1,0.25,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-smooth:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif; --font-num:"SF Pro Rounded","SF Pro Text",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; /* 与 Native --fm-safe-* 去重合并；平板横屏 env() 常为 0 */ --safe-t:max(var(--fm-safe-top, 0px), env(safe-area-inset-top, 0px)); --safe-b:max(var(--fm-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)); --safe-l:max(var(--fm-safe-left, 0px), env(safe-area-inset-left, 0px)); --safe-r:max(var(--fm-safe-right, 0px), env(safe-area-inset-right, 0px)); --pad-x:28px; } html[data-theme="qq"]{ --green:#31c27c; --green-dim:#28a86a; --green-glow:rgba(49,194,124,0.30); --accent-rgb:49,194,124; } html[data-theme="kuwo"]{ --green:#ffb000; --green-dim:#e09a00; --green-glow:rgba(255,176,0,0.30); --accent-rgb:255,176,0; } html[data-theme="kugou"]{ --green:#00A9FF; --green-dim:#0088cc; --green-glow:rgba(0,169,255,0.30); --accent-rgb:0,169,255; } html[data-theme="bilibili"]{ --green:#FB7299; --green-dim:#e45a82; --green-glow:rgba(251,114,153,0.32); --accent-rgb:251,114,153; } html[data-theme="netease"]{ --green:#EC4141; --green-dim:#c73434; --green-glow:rgba(236,65,65,0.32); --accent-rgb:236,65,65; } html[data-theme="migu"]{ --green:#ED2177; --green-dim:#c91a64; --green-glow:rgba(237,33,119,0.32); --accent-rgb:237,33,119; } /* iOS：封面加载成功后强制可见，避免 img-err 残留 */ html.is-ios img.img-err[src]:not([src=""]) { /* 仍允许 onerror 隐藏；成功后 setImgSrc 会移除 img-err */ } html.is-ios .card-cover img:not(.img-err), html.is-ios .pb-cover img:not(.img-err), html.is-ios .fp-vinyl img:not(.img-err), html.is-ios .daily-card img:not(.img-err){ opacity:1!important; visibility:visible!important; } /* ===== iOS 全屏顶部空白（对齐 IPA edgeToEdge，不改安卓） ===== */ @supports (-webkit-touch-callout: none) { html.is-ios, html.is-ios body { margin: 0 !important; padding-top: 0 !important; min-height: 100% !important; min-height: 100dvh !important; } html.is-ios #app, html.is-ios .app { padding-top: 0 !important; } /* 顶部安全区：max(宿主, env) 一次；禁止相加 */ html.is-ios { --safe-t: max(var(--fm-safe-top, 0px), env(safe-area-inset-top, 0px)); } html.is-ios.fm-native:not(.fm-chrome-full):not(.chrome-full) { /* 非沉浸：宿主可能已避开状态栏，少叠 */ --safe-t: max(0px, var(--fm-safe-top, 0px)); } html.is-ios.fm-chrome-full, html.is-ios.chrome-full { --safe-t: max(var(--fm-safe-top, 0px), env(safe-area-inset-top, 0px)); } } /* iOS：日推/雷达圆钮防挤压（霓虹主题 box-shadow + flex 下易被压扁） */ @supports (-webkit-touch-callout: none) { html.is-ios .daily-card .dc-play, html.is-ios .card-cover .play-fab { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; flex-shrink: 0 !important; flex-grow: 0 !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; box-sizing: border-box !important; -webkit-transform: translateZ(0); transform: translateZ(0); } html.is-ios .daily-card .dc-play svg, html.is-ios .card-cover .play-fab svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; } /* 霓虹：阴影过大时 iOS 合成层会把圆钮视觉拉扁，收一点 glow */ html.is-ios[data-mode="neon"] .daily-card .dc-play, html.is-ios[data-mode="neon"] .card-cover .play-fab { box-shadow: 0 0 12px rgba(0, 246, 255, 0.45), 0 0 20px rgba(255, 43, 214, 0.22) !important; } /* 窄屏日推卡仍保持正圆 */ @media (max-width: 380px) { html.is-ios .daily-card .dc-play { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; } } } html[data-theme="apple"]{ --green:#FC3C44; --green-dim:#d92b34; --green-glow:rgba(252,60,68,0.28); --accent-rgb:252,60,68; } /* ===== 默认/light 主题背景（纸感紫灰） ===== */ html[data-mode="light"], html[data-mode="light"] body, html:not([data-mode]), html:not([data-mode]) body{ background:var(--bg-0)!important; color:var(--text-0)!important; } html[data-mode="light"] body, html:not([data-mode]) body{ background: radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb),0.08) 0%, transparent 50%), linear-gradient(165deg, #ddd6e0 0%, #d0c8d4 40%, #c8c0d0 100%)!important; } html[data-mode="light"] #ambientBg, html:not([data-mode]) #ambientBg{ background: linear-gradient(165deg, #e8e0e8 0%, #d0c8d4 40%, #c0b8c8 100%)!important; filter:none!important; animation:none!important; } html[data-mode="light"] #ambientVeil, html:not([data-mode]) #ambientVeil{ background:linear-gradient(180deg,rgba(208,200,212,.2) 0%,rgba(208,200,212,.05) 40%,rgba(208,200,212,.25) 100%)!important; opacity:1!important; } html[data-mode="light"] #grain, html:not([data-mode]) #grain{ opacity:.08!important; mix-blend-mode:multiply!important; } html[data-mode="light"] #topbar, html:not([data-mode]) #topbar{ background:linear-gradient(180deg,rgba(208,200,212,.92) 0%,rgba(208,200,212,0) 100%)!important; } html[data-mode="light"] .search-box, html:not([data-mode]) .search-box{ background:rgba(255,255,255,0.75)!important; border:1px solid rgba(40,30,20,0.10)!important; } html[data-mode="light"] .sec-title, html:not([data-mode]) .sec-title{color:#1c1916!important;} html[data-mode="light"] .card-name, html[data-mode="light"] .song-title, html:not([data-mode]) .card-name, html:not([data-mode]) .song-title{color:#1c1916!important;} html[data-mode="light"] .card-sub, html[data-mode="light"] .song-sub, html:not([data-mode]) .card-sub, html:not([data-mode]) .song-sub{color:rgba(40,32,26,0.5)!important;} /* ===== 默认/light：迷你播放器 — 加亮、不加重（淡粉紫） ===== */ html[data-mode="light"] #playerBar, html:not([data-mode]) #playerBar{ background: radial-gradient(120% 140% at 10% -25%, rgba(var(--accent-rgb),0.16) 0%, transparent 52%), radial-gradient(90% 120% at 95% 120%, rgba(210,160,230,0.22) 0%, transparent 50%), linear-gradient(155deg, #fff8fc 0%, #ffeef8 30%, #f8e4f4 58%, #f0d6ee 100%)!important; border:1px solid rgba(170,120,190,0.16)!important; border-top-color:rgba(255,255,255,0.95)!important; backdrop-filter:blur(22px) saturate(1.25)!important; -webkit-backdrop-filter:blur(22px) saturate(1.25)!important; box-shadow: 0 12px 30px rgba(130,70,160,0.14), 0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(110,60,140,0.05) inset!important; } html[data-mode="light"] #playerBar::before, html:not([data-mode]) #playerBar::before{ background: linear-gradient(115deg, rgba(255,255,255,0.68) 0%, rgba(var(--accent-rgb),0.12) 42%, rgba(230,180,240,0.16) 72%, rgba(255,255,255,0.38) 100%)!important; opacity:1!important; animation:none!important; display:block!important; } html[data-mode="light"] #playerBar.show, html:not([data-mode]) #playerBar.show{ background: radial-gradient(120% 140% at 10% -25%, rgba(var(--accent-rgb),0.16) 0%, transparent 52%), radial-gradient(90% 120% at 95% 120%, rgba(210,160,230,0.22) 0%, transparent 50%), linear-gradient(155deg, #fff8fc 0%, #ffeef8 30%, #f8e4f4 58%, #f0d6ee 100%)!important; } html[data-mode="light"] #playerBar .pb-title, html:not([data-mode]) #playerBar .pb-title{ color:#1c1916!important; text-shadow:none!important; } html[data-mode="light"] #playerBar .pb-artist, html:not([data-mode]) #playerBar .pb-artist, html[data-mode="light"] #playerBar .pb-lyric, html:not([data-mode]) #playerBar .pb-lyric{ color:rgba(40,32,26,0.58)!important; text-shadow:none!important; } html[data-mode="light"] #playerBar .pb-lyric .pb-lyric-tr, html:not([data-mode]) #playerBar .pb-lyric .pb-lyric-tr{ color:rgba(40,32,26,0.42)!important; } html[data-mode="light"] #playerBar .pb-list-btn, html:not([data-mode]) #playerBar .pb-list-btn{ /* 扁平浅灰圆，无描边 */ background:rgba(0,0,0,0.08)!important; border:none!important; box-shadow:none!important; color:rgba(40,32,26,0.75)!important; } html[data-mode="light"] #playerBar .pb-list-btn:hover, html:not([data-mode]) #playerBar .pb-list-btn:hover{ background:rgba(0,0,0,0.12)!important; } html[data-mode="light"] #playerBar .pb-list-btn svg, html:not([data-mode]) #playerBar .pb-list-btn svg{ color:rgba(40,32,26,0.78)!important; } html[data-mode="light"] #playerBar .pb-play, html:not([data-mode]) #playerBar .pb-play{ /* 播放按钮白底（与纸白绿底区分） */ background:#ffffff!important; color:rgba(40,32,26,0.88)!important; border:none!important; box-shadow:0 2px 10px rgba(40,30,50,0.12)!important; } html[data-mode="light"] #playerBar .pb-play svg, html:not([data-mode]) #playerBar .pb-play svg{ color:rgba(40,32,26,0.88)!important; } html[data-mode="light"] #playerBar .pb-mini-progress-fill, html:not([data-mode]) #playerBar .pb-mini-progress-fill, html[data-mode="light"] #playerBar .pb-bar-fill, html:not([data-mode]) #playerBar .pb-bar-fill{ background:var(--green)!important; } html[data-mode="light"] #playerBar .pb-bar-knob, html:not([data-mode]) #playerBar .pb-bar-knob{ background:#fff!important; box-shadow:0 1px 4px rgba(40,30,40,0.25)!important; } /* ===== 默认/light：登录框（避免沿用深色半透明底） ===== */ html[data-mode="light"] #loginView, html:not([data-mode]) #loginView{ background: radial-gradient(100% 70% at 50% 0%, rgba(var(--accent-rgb),0.18) 0%, transparent 55%), radial-gradient(80% 50% at 20% 90%, rgba(180,140,210,0.22) 0%, transparent 50%), radial-gradient(70% 40% at 90% 70%, rgba(160,180,230,0.16) 0%, transparent 45%), linear-gradient(165deg, #e8e0e8 0%, #d0c8d4 40%, #c8c0d0 100%)!important; } html[data-mode="light"] .login-card, html:not([data-mode]) .login-card{ background:rgba(255,255,255,0.82)!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow: 0 20px 56px rgba(80,50,100,0.14), 0 1px 0 rgba(255,255,255,0.9) inset!important; backdrop-filter:blur(40px) saturate(1.35)!important; -webkit-backdrop-filter:blur(40px) saturate(1.35)!important; } html[data-mode="light"] .login-title, html:not([data-mode]) .login-title{ color:#1c1916!important; } html[data-mode="light"] .login-sub, html[data-mode="light"] .login-hint, html:not([data-mode]) .login-sub, html:not([data-mode]) .login-hint{ color:rgba(40,32,26,0.50)!important; } html[data-mode="light"] .login-hint b, html:not([data-mode]) .login-hint b{ color:#c27800!important; } html[data-mode="light"] .cookie-area, html:not([data-mode]) .cookie-area{ background:rgba(255,255,255,0.72)!important; border:1px solid rgba(40,30,20,0.12)!important; color:#1c1916!important; } html[data-mode="light"] .cookie-area:focus, html:not([data-mode]) .cookie-area:focus{ border-color:var(--green)!important; background:rgba(255,255,255,0.92)!important; } html[data-mode="light"] .cookie-area::placeholder, html:not([data-mode]) .cookie-area::placeholder{ color:rgba(40,32,26,0.38)!important; } html[data-mode="light"] .login-btn-primary, html:not([data-mode]) .login-btn-primary{ background:#1c1916!important; color:#fff!important; box-shadow:0 8px 24px rgba(40,30,50,0.18)!important; } html[data-mode="light"] .login-btn-primary:hover, html:not([data-mode]) .login-btn-primary:hover{ box-shadow:0 10px 28px rgba(40,30,50,0.24)!important; } html[data-mode="light"] .login-btn-guest, html:not([data-mode]) .login-btn-guest{ background:rgba(255,255,255,0.55)!important; color:#1c1916!important; border:1px solid rgba(40,30,20,0.12)!important; box-shadow:none!important; } html[data-mode="light"] .login-btn-guest:hover, html:not([data-mode]) .login-btn-guest:hover{ background:rgba(255,255,255,0.78)!important; } /* 关闭按钮在浅色卡上可见 */ html[data-mode="light"] #loginView .login-close, html:not([data-mode]) #loginView .login-close, html[data-mode="light"] #loginView .login-x, html:not([data-mode]) #loginView .login-x{ color:rgba(40,32,26,0.55)!important; background:rgba(0,0,0,0.05)!important; } html[data-mode="light"] #loginCloseBtn, html:not([data-mode]) #loginCloseBtn{ background:rgba(0,0,0,0.06)!important; color:rgba(40,32,26,0.55)!important; } html[data-mode="dark"]{ --bg-0:#000000;--bg-1:#000000;--bg-2:#111111;--bg-elevated:#1a1a1a; --glass:rgba(255,255,255,0.06);--glass-strong:rgba(28,28,30,0.88); --glass-border:rgba(255,255,255,0.10);--line:rgba(255,255,255,0.10); --text-0:#ffffff;--text-1:rgba(235,235,245,0.72);--text-2:rgba(235,235,245,0.42); } html[data-mode="dark"], html[data-mode="dark"] body{background:#000!important;color:var(--text-0);} html[data-mode="dark"] #ambientBg{background:#000!important;} html[data-mode="dark"] #ambientVeil{background:transparent!important;} html[data-mode="dark"] #grain{opacity:0;} /* Dark theme: cards black (synced from reference) */ html[data-mode="dark"] .daily-card, html[data-mode="dark"] .daily-card.daily30, html[data-mode="dark"] .daily-card.brush, html[data-mode="dark"] .daily-card:not(.daily30):not(.brush), html[data-mode="dark"] .daily-card.ne-skin, html[data-mode="dark"] .daily-card.period-morning, html[data-mode="dark"] .daily-card.period-noon, html[data-mode="dark"] .daily-card.period-afternoon, html[data-mode="dark"] .daily-card.period-evening, html[data-mode="dark"] .daily-card.period-night{ background:#000!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:none!important; } html[data-mode="dark"] .daily-card.is-playing{ background:#0a0a0a!important; border-color:rgba(255,255,255,.18)!important; } html[data-mode="dark"] .card-cover, html[data-mode="dark"] .rank-card .card-cover, html[data-mode="dark"] .mv-card .card-cover{ background:#000!important; box-shadow:0 4px 14px rgba(0,0,0,.45)!important; } html[data-mode="dark"] .card, html[data-mode="dark"] .rank-card, html[data-mode="dark"] .mv-card, html[data-mode="dark"] .radio-card{ background:transparent!important; } html[data-mode="dark"] .glass, html[data-mode="dark"] .glass-strong{ background:rgba(0,0,0,.72)!important; } html[data-mode="dark"] .login-btn-primary, html[data-mode="dark"] .hero-play, html[data-mode="dark"] .pb-play, html[data-mode="dark"] .daily-card .dc-play, html[data-mode="dark"] .card-cover .play-fab, html[data-mode="dark"] #biliSessSave, html[data-mode="dark"] #neCkSave, html[data-mode="dark"] .nav-item.active{ background:#fff!important;color:#111!important;border-color:transparent!important; box-shadow:0 4px 16px rgba(0,0,0,.35)!important; } html[data-mode="dark"] .detail-play-all{ background:#fff!important;color:#111!important;border-color:transparent!important; box-shadow:none!important; } html[data-mode="dark"] .login-btn-primary svg, html[data-mode="dark"] .hero-play svg, html[data-mode="dark"] .pb-play svg, html[data-mode="dark"] .daily-card .dc-play svg, html[data-mode="dark"] .card-cover .play-fab svg{color:#111!important;} html[data-mode="dark"] #sourceTabs.sr-tabs{ background:rgba(118,118,128,0.28);border:none; } html[data-mode="dark"] #sourceTabs .sr-indicator{ background:#fff!important; box-shadow:none!important; } html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="qq"], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="kuwo"], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="netease"], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="kugou"], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="migu"], html[data-mode="dark"] #sourceTabs .sr-tab.active[data-src="bilibili"]{ color:#111!important;background:transparent!important;border-color:transparent!important; box-shadow:none!important; } html[data-mode="dark"] .hot-search-tag, html[data-mode="dark"] .login-btn-guest, html[data-mode="dark"] #searchEmptyBack{ background:rgba(255,255,255,0.1)!important;color:#fff!important; } html[data-mode="dark"] #playerBar{ background:rgba(22,22,26,0.58)!important; border-color:rgba(255,255,255,0.14)!important; border-top-color:rgba(255,255,255,0.16)!important; backdrop-filter:blur(36px) saturate(1.35) brightness(1.02)!important; -webkit-backdrop-filter:blur(36px) saturate(1.35) brightness(1.02)!important; } html[data-mode="dark"] #playerBar::before{ background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(var(--accent-rgb),0.10) 50%, rgba(255,255,255,0.03) 100%); opacity:.9; animation:none!important; } html[data-mode="dark"] #topbar{ background:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,0) 100%); } html[data-mode="dark"] .search-box{ background:rgba(255,255,255,0.10)!important;border-color:rgba(255,255,255,0.08)!important; } html[data-mode="dark"] .search-box.focused{ background:rgba(255,255,255,0.16)!important; border-color:rgba(255,255,255,0.16)!important; } html[data-mode="dark"] .pb-bar-fill, html[data-mode="dark"] .fp-bar-fill{background:#fff!important;} html[data-mode="dark"] .pb-bar-knob, html[data-mode="dark"] .fp-bar-knob{background:#fff!important;} html[data-mode="dark"] #fullPlayer{background:#000!important;color:#fff!important;} html[data-mode="dark"] #fpBg{background:#000!important;} html[data-mode="dark"] #fpBg.has-cover{background:#000!important;} html[data-mode="dark"] #fpBg .fp-bg-amb{ -webkit-filter:blur(48px) saturate(1.2) brightness(0.80); filter:blur(48px) saturate(1.2) brightness(0.80); } html[data-mode="dark"] #fpBg .fp-bg-veil{ background:transparent!important;opacity:0!important; } html[data-mode="dark"] #fullPlayer .fp-track-name{color:#fff!important;} html[data-mode="dark"] #fullPlayer .fp-track-artist{color:rgba(235,235,245,.55)!important;} html[data-mode="dark"] #fullPlayer .fp-tab{color:rgba(235,235,245,.4)!important;} html[data-mode="dark"] #fullPlayer .fp-tab.active{color:#fff!important;border-color:var(--green)!important;} html[data-mode="dark"] #fullPlayer .lyric-line{color:rgba(235,235,245,.72)!important;} html[data-mode="dark"] #fullPlayer .lyric-line:hover{color:rgba(235,235,245,.90)!important;} html[data-mode="dark"] #fullPlayer .lyric-line.active{color:#fff!important;} html[data-mode="dark"] #fullPlayer .lyric-line.active .lyric-tr{color:var(--green)!important;} html[data-mode="dark"] #fullPlayer .lyric-tr{color:rgba(235,235,245,.58)!important;} html[data-mode="dark"] #fullPlayer .fp-time{color:rgba(235,235,245,.45)!important;} html[data-mode="dark"] #fullPlayer .fp-bar{background:rgba(255,255,255,.18)!important;} html[data-mode="dark"] #fullPlayer .fp-bar-fill{background:#fff!important;} html[data-mode="dark"] #fullPlayer .fp-bar-knob{background:#fff!important;box-shadow:0 1px 4px rgba(0,0,0,.4)!important;} html[data-mode="dark"] #fullPlayer .fp-ctrl-btn{color:rgba(235,235,245,.85)!important;} html[data-mode="dark"] #fullPlayer .fp-quick button{color:rgba(235,235,245,.75)!important;} html[data-mode="dark"] #fullPlayer .fp-quick button.on{color:var(--danger)!important;} html[data-mode="dark"] #fullPlayer .fp-quality-btn, html[data-mode="dark"] #fullPlayer .fp-speed-btn{color:rgba(235,235,245,.75)!important;} html[data-mode="dark"] #fullPlayer .fp-speed-btn.on{color:var(--green)!important;} html[data-mode="dark"] #fullPlayer .pl-panel-row{color:#fff!important;} @media (hover: hover) and (pointer: fine){ html[data-mode="dark"] #fullPlayer .pl-panel-row:hover{background:rgba(255,255,255,.06)!important;} html[data-mode="dark"] #fullPlayer .pl-panel-row.playing:hover{ background:rgba(255,255,255,0.16)!important; } } html[data-mode="dark"] #fullPlayer .pl-panel-row.playing{ color:var(--green)!important; background:rgba(255,255,255,0.12)!important; box-shadow:none!important; } html[data-mode="dark"] #fullPlayer .empty-state{color:rgba(235,235,245,.4)!important;} html[data-mode="dark"] #fullPlayer .empty-state .e-title{color:rgba(235,235,245,.7)!important;} html[data-mode="dark"] #fullPlayer .fp-close{ color:#fff!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important; } html[data-mode="dark"] #fullPlayer .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="dark"] #fullPlayer .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="dark"] .fp-dock, html[data-mode="dark"] #fullPlayer .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } html[data-mode="dark"] .fp-dock .fp-quick button, html[data-mode="dark"] .fp-dock .fp-ctrl-btn, html[data-mode="dark"] .fp-dock .fp-quality-btn{ color:#fff!important; } html[data-mode="dark"] .fp-dock .fp-time{color:rgba(235,235,245,.5)!important;} html[data-mode="dark"] .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="dark"] .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="neon"]{ --bg-0:#03010a;--bg-1:#06031a;--bg-2:#0e0828;--bg-elevated:#160e32; --glass:rgba(0,240,255,0.08);--glass-strong:rgba(12,6,32,0.88); --glass-border:rgba(0,255,255,0.32);--line:rgba(255,0,170,0.28); --text-0:#f5f9ff;--text-1:rgba(210,235,255,0.9);--text-2:rgba(180,205,235,0.72); --green:#00f6ff; --green-dim:#00c8d8; --green-glow:rgba(0,246,255,0.55); --accent-rgb:0,246,255; --gold:#ff2bd6; --danger:#ff4d8a; /* 首页 / 播放页共用同一套霓虹氛围层 */ --neon-ambient: radial-gradient(ellipse 95% 70% at 8% -5%, rgba(255,0,170,0.55) 0%, transparent 52%), radial-gradient(ellipse 85% 65% at 100% 5%, rgba(0,246,255,0.42) 0%, transparent 52%), radial-gradient(ellipse 80% 60% at 85% 95%, rgba(120,40,255,0.48) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 5% 90%, rgba(0,255,180,0.28) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(80,20,160,0.25) 0%, transparent 70%), linear-gradient(165deg, #0c0620 0%, #03010a 40%, #0a0418 100%); } html[data-mode="neon"], html[data-mode="neon"] body{ background:#03010a!important;color:var(--text-0)!important; } html[data-mode="neon"] body{ background:#03010a!important; } html[data-mode="neon"] #ambientBg{ background:var(--neon-ambient)!important; animation:neonAmbientPulse 8s ease-in-out infinite alternate; filter:saturate(1.35); } @keyframes neonAmbientPulse{ 0%{ filter:saturate(1.2) brightness(0.95); transform:scale(1); } 100%{ filter:saturate(1.55) brightness(1.08); transform:scale(1.03); } } html[data-mode="neon"] #ambientVeil{ background: linear-gradient(180deg, rgba(3,1,10,.25) 0%, rgba(3,1,10,.08) 35%, rgba(3,1,10,.45) 100%), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,246,255,.03) 2px, rgba(0,246,255,.03) 3px)!important; opacity:1!important; } html[data-mode="neon"] #grain{ opacity:1!important; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 3px, rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px ), radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%)!important; mix-blend-mode:overlay; pointer-events:none; animation:neonScan 9s linear infinite; } @keyframes neonScan{ 0%{ background-position:0 0, center; } 100%{ background-position:0 120px, center; } } html[data-mode="neon"] #topbar{ background:linear-gradient(180deg,rgba(3,1,10,.95) 0%,rgba(3,1,10,.4) 70%,rgba(3,1,10,0) 100%)!important; } html[data-mode="neon"] .search-box{ background:rgba(0,246,255,0.07)!important; border:1px solid rgba(0,246,255,0.4)!important; box-shadow: 0 0 0 1px rgba(255,43,214,0.12), 0 0 18px rgba(0,246,255,0.18), inset 0 0 16px rgba(255,0,170,0.06)!important; } html[data-mode="neon"] .search-box.focused{ background:rgba(0,246,255,0.12)!important; border-color:rgba(0,246,255,0.7)!important; box-shadow: 0 0 0 2px rgba(0,246,255,0.25), 0 0 28px rgba(0,246,255,0.35), 0 0 40px rgba(255,43,214,0.2)!important; } html[data-mode="neon"] .brand-mark{ background:transparent!important; --logo-circle:#ff2bd6; --logo-mark:#00f6ff; box-shadow:none!important; animation:none!important; } html[data-mode="neon"] .brand-mark svg{ filter:drop-shadow(0 0 6px rgba(0,246,255,.55)) drop-shadow(0 0 12px rgba(255,43,214,.35)); } html[data-mode="neon"] .sec-title{ color:#f5f9ff!important; text-shadow:0 0 16px rgba(0,246,255,.35), 0 0 2px rgba(255,255,255,.3); letter-spacing:0.02em; } html[data-mode="neon"] .sec-more{ color:#00f6ff!important; text-shadow:0 0 12px rgba(0,246,255,.55); } html[data-mode="neon"] .nav-item.active{ color:#03010a!important; background:linear-gradient(120deg,#00f6ff,#ff2bd6)!important; box-shadow:0 0 20px rgba(0,246,255,.45)!important; } html[data-mode="neon"] #bottomNav{ background:rgba(6,3,18,0.96)!important; border-top:1px solid rgba(0,246,255,0.28)!important; box-shadow:0 -4px 24px rgba(0,246,255,.12)!important; } html[data-mode="neon"] #bottomNav .nav-item.active{ color:#00f6ff!important; background:rgba(0,246,255,0.14)!important; box-shadow:0 0 16px rgba(0,246,255,.28), inset 0 0 12px rgba(0,246,255,.08)!important; } html[data-mode="neon"] #bottomNav .nav-item.active svg{ color:#00f6ff!important; filter:drop-shadow(0 0 6px rgba(0,246,255,.7)); } html[data-mode="neon"] .login-btn-primary, html[data-mode="neon"] .hero-play, html[data-mode="neon"] .pb-play, html[data-mode="neon"] .daily-card .dc-play, html[data-mode="neon"] .card-cover .play-fab, html[data-mode="neon"] #biliSessSave, html[data-mode="neon"] #neCkSave{ background:linear-gradient(135deg,#00f6ff 0%,#8a4dff 50%,#ff2bd6 100%)!important; color:#03010a!important;border:none!important; box-shadow: 0 0 22px rgba(0,246,255,.55), 0 0 40px rgba(255,43,214,.3)!important; } html[data-mode="neon"] .detail-play-all{ background:#fff!important;color:#111!important;border:none!important; box-shadow:none!important; } html[data-mode="neon"] .login-btn-primary svg, html[data-mode="neon"] .hero-play svg, html[data-mode="neon"] .pb-play svg, html[data-mode="neon"] .daily-card .dc-play svg, html[data-mode="neon"] .card-cover .play-fab svg{color:#03010a!important;} html[data-mode="neon"] .login-btn-guest, html[data-mode="neon"] .hot-search-tag, html[data-mode="neon"] #searchEmptyBack{ background:rgba(0,246,255,0.08)!important;color:#e8f7ff!important; border:1px solid rgba(0,246,255,0.38)!important; box-shadow:0 0 12px rgba(0,246,255,.15)!important; } html[data-mode="neon"] .hot-search-tag:hover{ border-color:rgba(255,43,214,0.55)!important; box-shadow:0 0 16px rgba(255,43,214,.25)!important; } html[data-mode="neon"] #sourceTabs.sr-tabs{ background:rgba(12,6,32,0.8)!important; border:1px solid rgba(0,246,255,0.35)!important; box-shadow:0 0 20px rgba(255,0,170,0.15), inset 0 0 20px rgba(0,246,255,0.05)!important; } html[data-mode="neon"] #sourceTabs .sr-indicator{ background:linear-gradient(120deg,#00f6ff,#ff2bd6)!important; box-shadow:0 0 18px rgba(0,246,255,.6), 0 0 28px rgba(255,43,214,.3)!important; } html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="qq"], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="kuwo"], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="netease"], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="kugou"], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="migu"], html[data-mode="neon"] #sourceTabs .sr-tab.active[data-src="bilibili"]{ color:#03010a!important;background:transparent!important; } html[data-mode="neon"] .card-cover{ box-shadow:0 0 0 1px rgba(0,246,255,0.2), 0 8px 24px rgba(0,0,0,.35)!important; } html[data-mode="neon"] .card:hover .card-cover, html[data-mode="neon"] .rank-card:hover{ box-shadow:0 0 0 1px rgba(0,246,255,0.45), 0 0 20px rgba(0,246,255,.2)!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="neon"] .song-row:hover{ background:rgba(0,246,255,0.06)!important; } } html[data-mode="neon"] .song-row.playing{ background:linear-gradient(90deg, rgba(0,246,255,0.14), rgba(255,43,214,0.08))!important; box-shadow:inset 3px 0 0 #00f6ff; } html[data-mode="neon"] .song-row.playing .song-title, html[data-mode="neon"] .song-row.playing .song-idx{ color:#00f6ff!important; text-shadow:0 0 10px rgba(0,246,255,.5); } html[data-mode="neon"] .tag-sq{ border-color:rgba(0,246,255,.65)!important;color:#00f6ff!important; text-shadow:0 0 6px rgba(0,246,255,.4); } /* 霓虹：歌单/详情列表跟随霓虹主题（宽选择器，避免未命中 #view-detail） */ html[data-mode="neon"].detail-mode .detail-title, html[data-mode="neon"].detail-mode .detail-hero .detail-title, html[data-mode="neon"].detail-mode #view-detail .detail-title{ color:#f5f9ff!important; text-shadow:0 0 16px rgba(0,246,255,.35), 0 1px 8px rgba(0,0,0,.4)!important; } html[data-mode="neon"].detail-mode .detail-sub, html[data-mode="neon"].detail-mode .detail-desc, html[data-mode="neon"].detail-mode #view-detail .detail-sub, html[data-mode="neon"].detail-mode #view-detail .detail-desc{ color:rgba(200,230,255,0.80)!important; text-shadow:0 1px 6px rgba(0,0,0,.3)!important; } html[data-mode="neon"].detail-mode .detail-back, html[data-mode="neon"].detail-mode .detail-back svg, html[data-mode="neon"].detail-mode .detail-action, html[data-mode="neon"].detail-mode .detail-action svg, html[data-mode="neon"].detail-mode .detail-shuffle-btn, html[data-mode="neon"].detail-mode .detail-shuffle-btn svg{ color:#00f6ff!important; filter:drop-shadow(0 0 6px rgba(0,246,255,.45)); } html[data-mode="neon"].detail-mode .detail-back{ background:rgba(0,246,255,0.12)!important; border:1px solid rgba(0,246,255,0.35)!important; } html[data-mode="neon"].detail-mode .detail-shuffle-btn{ background:rgba(0,246,255,0.10)!important; border:1px solid rgba(0,246,255,0.32)!important; } html[data-mode="neon"].detail-mode .song-title, html[data-mode="neon"].detail-mode #view-detail .song-title, html[data-mode="neon"].detail-mode #detailSongs .song-title{ color:#eef7ff!important; } html[data-mode="neon"].detail-mode .song-sub, html[data-mode="neon"].detail-mode .song-idx, html[data-mode="neon"].detail-mode .song-dur, html[data-mode="neon"].detail-mode #view-detail .song-sub, html[data-mode="neon"].detail-mode #view-detail .song-idx, html[data-mode="neon"].detail-mode #view-detail .song-dur, html[data-mode="neon"].detail-mode #detailSongs .song-sub, html[data-mode="neon"].detail-mode #detailSongs .song-idx, html[data-mode="neon"].detail-mode #detailSongs .song-dur{ color:rgba(180,210,240,0.62)!important; } html[data-mode="neon"].detail-mode .song-row.playing, html[data-mode="neon"].detail-mode #detailSongs .song-row.playing{ background:linear-gradient(90deg, rgba(0,246,255,0.14), rgba(255,43,214,0.08))!important; box-shadow:inset 3px 0 0 #00f6ff!important; } html[data-mode="neon"].detail-mode .song-row.playing .song-title, html[data-mode="neon"].detail-mode .song-row.playing .song-idx, html[data-mode="neon"].detail-mode #detailSongs .song-row.playing .song-title, html[data-mode="neon"].detail-mode #detailSongs .song-row.playing .song-idx{ color:#00f6ff!important; text-shadow:0 0 10px rgba(0,246,255,.5)!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="neon"].detail-mode .song-row:hover{ background:rgba(0,246,255,0.06)!important; } } html[data-mode="neon"].detail-mode .tag-sq, html[data-mode="neon"].detail-mode #detailSongs .tag-sq{ border-color:rgba(0,246,255,.65)!important; color:#00f6ff!important; text-shadow:0 0 6px rgba(0,246,255,.4)!important; } html[data-mode="neon"].detail-mode .empty-state, html[data-mode="neon"].detail-mode .empty-state .e-title, html[data-mode="neon"].detail-mode .empty-state .e-sub{ color:rgba(180,210,240,0.65)!important; } html[data-mode="neon"].detail-mode #detailLoadMore{ color:rgba(180,210,240,0.55)!important; } html[data-mode="neon"] .daily-card{ position:relative!important; border:1px solid rgba(0,246,255,0.4)!important; box-shadow:none!important; overflow:hidden!important; } html[data-mode="neon"] .daily-card::before{ content:""!important; position:absolute!important;inset:0!important;border-radius:inherit!important; pointer-events:none!important;z-index:3!important; background: linear-gradient(90deg, rgba(0,246,255,.85) 0%, transparent 28%, transparent 72%, rgba(255,43,214,.75) 100%) top / 100% 1.5px no-repeat, linear-gradient(90deg, rgba(255,43,214,.75) 0%, transparent 28%, transparent 72%, rgba(0,246,255,.85) 100%) bottom / 100% 1.5px no-repeat, linear-gradient(180deg, rgba(0,246,255,.85) 0%, transparent 30%, transparent 70%, rgba(255,43,214,.7) 100%) left / 1.5px 100% no-repeat, linear-gradient(180deg, rgba(255,43,214,.75) 0%, transparent 30%, transparent 70%, rgba(0,246,255,.85) 100%) right / 1.5px 100% no-repeat!important; opacity:.9; } html[data-mode="neon"] .daily-card::after{ content:""!important; position:absolute!important;inset:6px!important;border-radius:12px!important; pointer-events:none!important;z-index:3!important; background: linear-gradient(#00f6ff,#00f6ff) top left / 18px 2px no-repeat, linear-gradient(#00f6ff,#00f6ff) top left / 2px 18px no-repeat, linear-gradient(#ff2bd6,#ff2bd6) top right / 18px 2px no-repeat, linear-gradient(#ff2bd6,#ff2bd6) top right / 2px 18px no-repeat, linear-gradient(#ff2bd6,#ff2bd6) bottom left / 18px 2px no-repeat, linear-gradient(#ff2bd6,#ff2bd6) bottom left / 2px 18px no-repeat, linear-gradient(#00f6ff,#00f6ff) bottom right / 18px 2px no-repeat, linear-gradient(#00f6ff,#00f6ff) bottom right / 2px 18px no-repeat!important; filter:drop-shadow(0 0 4px rgba(0,246,255,.6)); opacity:.95; } html[data-mode="neon"] .daily-card.daily30, html[data-mode="neon"] .daily-card.daily30.period-morning, html[data-mode="neon"] .daily-card.daily30.period-noon, html[data-mode="neon"] .daily-card.daily30.period-afternoon, html[data-mode="neon"] .daily-card.daily30.period-evening, html[data-mode="neon"] .daily-card.daily30.period-night{ background: linear-gradient(135deg, rgba(0,246,255,0.22) 0%, transparent 42%), linear-gradient(225deg, rgba(255,43,214,0.25) 0%, transparent 48%), linear-gradient(155deg, #140620 0%, #060a20 50%, #0e0420 100%)!important; } .daily-card.daily30.ne-skin{ background: linear-gradient(135deg, rgba(0,246,255,0.25) 0%, transparent 40%), linear-gradient(225deg, rgba(255,43,214,0.3) 0%, transparent 45%), linear-gradient(160deg, #0a1a3a 0%, #1a0a32 45%, #0c1830 100%)!important; } html[data-mode="neon"] .daily-card.period-morning, html[data-mode="neon"] .daily-card.period-noon, html[data-mode="neon"] .daily-card.period-afternoon, html[data-mode="neon"] .daily-card.period-evening, html[data-mode="neon"] .daily-card.period-night, html[data-mode="neon"] .daily-card.ne-skin, html[data-mode="neon"] .daily-card.brush, html[data-mode="neon"] .daily-card.brush.period-morning, html[data-mode="neon"] .daily-card.brush.period-noon, html[data-mode="neon"] .daily-card.brush.period-afternoon, html[data-mode="neon"] .daily-card.brush.period-evening, html[data-mode="neon"] .daily-card.brush.period-night, html[data-mode="neon"] .daily-card.brush.ne-skin{ background: linear-gradient(135deg, rgba(255,80,140,0.35) 0%, transparent 42%), linear-gradient(225deg, rgba(255,43,214,0.28) 0%, transparent 48%), linear-gradient(155deg, #2a0a22 0%, #1a0820 50%, #220818 100%)!important; } html[data-mode="neon"] .daily-card:not(.daily30):not(.brush){ background: linear-gradient(135deg, rgba(255,43,214,0.28) 0%, transparent 42%), linear-gradient(225deg, rgba(0,246,255,0.22) 0%, transparent 48%), linear-gradient(155deg, #1a0830 0%, #0a1228 50%, #14082a 100%)!important; } html[data-mode="neon"] .daily-card .dc-title{ color:#fff!important; text-shadow:0 0 12px rgba(0,246,255,.4), 0 0 2px rgba(255,255,255,.4)!important; } html[data-mode="neon"] .daily-card .dc-sub{ color:rgba(200,230,255,.88)!important; } html[data-mode="neon"] .daily-card .dc-play{ background:linear-gradient(135deg,#00f6ff,#ff2bd6)!important; color:#03010a!important; box-shadow:0 0 16px rgba(0,246,255,.5), 0 0 28px rgba(255,43,214,.3)!important; } html[data-mode="neon"] .daily-card .dc-play svg{color:#03010a!important;} html[data-mode="neon"] .daily-card .dc-art-inner{ box-shadow:0 0 0 1px rgba(0,246,255,0.35), 0 0 14px rgba(0,246,255,.25)!important; } html[data-mode="neon"] .daily-card .dc-vinyl{ box-shadow:0 0 16px rgba(255,43,214,.25)!important; } html[data-mode="neon"] .daily-card.is-playing{ box-shadow:none!important; } html[data-mode="neon"] .daily-card.is-playing::before{ opacity:1; filter:brightness(1.2); } html[data-mode="neon"] #playerBar{ background:rgba(8,4,22,0.78)!important; border:1px solid rgba(0,246,255,0.18)!important; border-image:none!important; background-clip:padding-box!important; box-shadow: 0 0 28px rgba(0,246,255,.22), 0 0 48px rgba(255,0,170,.12), 0 12px 32px rgba(0,0,0,.45)!important; backdrop-filter:blur(32px) saturate(1.6)!important; -webkit-backdrop-filter:blur(32px) saturate(1.6)!important; animation:neonBarPulse 4s ease-in-out infinite alternate; } @keyframes neonBarPulse{ 0%{ box-shadow:0 0 22px rgba(0,246,255,.18), 0 0 40px rgba(255,0,170,.10), 0 12px 32px rgba(0,0,0,.45); } 100%{ box-shadow:0 0 32px rgba(0,246,255,.30), 0 0 56px rgba(255,0,170,.18), 0 12px 32px rgba(0,0,0,.45); } } html[data-mode="neon"] #playerBar::before{ background:linear-gradient(135deg, rgba(0,246,255,0.18) 0%, rgba(255,43,214,0.2) 45%, rgba(120,40,255,0.14) 100%)!important; opacity:1!important;animation:none!important; } html[data-mode="neon"] .pb-title{ text-shadow:0 0 8px rgba(0,246,255,.25); } html[data-mode="neon"] .pb-bar-fill, html[data-mode="neon"] .fp-bar-fill, html[data-mode="neon"] .pb-mini-progress-fill{ background:linear-gradient(90deg,#00f6ff,#ff2bd6 70%,#b44dff)!important; box-shadow:0 0 10px rgba(0,246,255,.6), 0 0 18px rgba(255,43,214,.3)!important; } html[data-mode="neon"] .pb-bar-knob, html[data-mode="neon"] .fp-bar-knob{ background:#fff!important; box-shadow:0 0 12px rgba(0,246,255,.85), 0 0 20px rgba(255,43,214,.4)!important; } html[data-mode="neon"] .pb-play{ animation:neonBtnPulse 2.4s ease-in-out infinite alternate; } @keyframes neonBtnPulse{ 0%{ box-shadow:0 0 16px rgba(0,246,255,.4), 0 0 28px rgba(255,43,214,.2); } 100%{ box-shadow:0 0 28px rgba(0,246,255,.65), 0 0 44px rgba(255,43,214,.35); } } html[data-mode="neon"] #fullPlayer{background:#03010a!important;color:#f5f9ff!important;} /* 播放页：同色系，但去掉底部碎光斑，改成干净的上下过渡 */ html[data-mode="neon"] #fpBg{ background:#03010a!important; animation:none!important; filter:none!important; transform:none!important; } html[data-mode="neon"] #fpBg.has-cover{background:#03010a!important;} html[data-mode="neon"] #fpBg .fp-bg-amb{ -webkit-filter:blur(48px) saturate(1.35) brightness(0.80); filter:blur(48px) saturate(1.35) brightness(0.80); } html[data-mode="neon"] #fpBg .fp-bg-veil{background:transparent!important;opacity:0!important;} html[data-mode="neon"] #fpBg::before{ display:none!important; content:none!important; } html[data-mode="neon"] #fpBg::after{display:none!important;content:none!important;} html[data-mode="neon"] #fullPlayer .fp-track-name{ color:#fff!important; text-shadow:0 0 20px rgba(0,246,255,.45), 0 0 40px rgba(255,43,214,.2); } html[data-mode="neon"] #fullPlayer .fp-track-artist{color:rgba(190,230,255,.65)!important;} html[data-mode="neon"] #fullPlayer .fp-tab{color:rgba(180,200,230,.4)!important;} html[data-mode="neon"] #fullPlayer .fp-tab.active{ color:#00f6ff!important;border-color:#ff2bd6!important; text-shadow:0 0 14px rgba(0,246,255,.55); box-shadow:0 2px 0 0 #ff2bd6; } html[data-mode="neon"] #fullPlayer .lyric-line{color:rgba(210,235,255,.72)!important;} html[data-mode="neon"] #fullPlayer .lyric-line:hover{color:rgba(220,240,255,.90)!important;} html[data-mode="neon"] #fullPlayer .lyric-line.active{ color:#fff!important; } html[data-mode="neon"] #fullPlayer .lyric-line.active .lyric-tr{ color:#ff2bd6!important; } html[data-mode="neon"] #fullPlayer .lyric-tr{color:rgba(200,230,255,.58)!important;} html[data-mode="neon"] #fullPlayer .fp-time{color:rgba(180,210,240,.55)!important;} html[data-mode="neon"] #fullPlayer .fp-bar{background:rgba(0,246,255,.18)!important;} html[data-mode="neon"] #fullPlayer .fp-ctrl-btn{color:rgba(210,235,255,.9)!important;} html[data-mode="neon"] #fullPlayer .fp-quick button{color:rgba(210,235,255,.8)!important;} html[data-mode="neon"] #fullPlayer .fp-quick button.on{ color:#ff4d8a!important;filter:drop-shadow(0 0 6px rgba(255,77,138,.6)); } html[data-mode="neon"] #fullPlayer .fp-close{ color:#00f6ff!important;background:rgba(0,246,255,.14)!important; border:1px solid rgba(0,246,255,.35)!important; box-shadow:0 0 14px rgba(0,246,255,.3)!important; } html[data-mode="neon"] #fullPlayer .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="neon"] #fullPlayer .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="neon"] .fp-dock, html[data-mode="neon"] #fullPlayer .fp-dock{ /* 完全透明，不另铺底色，整页就是一块渐变 */ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } html[data-mode="neon"] .fp-dock .fp-quick button, html[data-mode="neon"] .fp-dock .fp-ctrl-btn, html[data-mode="neon"] .fp-dock .fp-quality-btn{color:#eef7ff!important;} html[data-mode="neon"] .fp-dock .fp-time{color:rgba(180,210,240,.55)!important;} html[data-mode="neon"] .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="neon"] .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="neon"] #fullPlayer .pl-panel-row{ color:rgba(240,248,255,.95)!important; } html[data-mode="neon"] #fullPlayer .pl-panel-row > span{ color:inherit!important; } html[data-mode="neon"] #fullPlayer .pl-panel-row > span:last-child{ color:rgba(190,215,245,.78)!important; } html[data-mode="neon"] #fullPlayer .pl-panel-row > span:first-child{ color:rgba(200,220,255,.8)!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="neon"] #fullPlayer .pl-panel-row:hover{ background:rgba(0,246,255,.1)!important; color:#fff!important; } html[data-mode="neon"] #fullPlayer .pl-panel-row.playing:hover{ background:rgba(255,255,255,0.14)!important; } } html[data-mode="neon"] #fullPlayer .pl-panel-row.playing{ background:rgba(255,255,255,0.10)!important; box-shadow:none!important; } html[data-mode="neon"] #fullPlayer .pl-panel-row.playing, html[data-mode="neon"] #fullPlayer .pl-panel-row.playing > span{ color:#00f6ff!important; text-shadow:0 0 10px rgba(0,246,255,.4); } html[data-mode="neon"] #fullPlayer .pl-panel-row.playing > span:last-child{ color:rgba(0,246,255,.9)!important; } html[data-mode="neon"] #fullPlayer #playlistPanel, html[data-mode="neon"] #fullPlayer .pl-panel, html[data-mode="neon"] #fullPlayer .pl-list{ color:rgba(240,248,255,.95)!important; } html[data-mode="neon"] #fullPlayer .fp-tab{ color:rgba(200,220,245,.55)!important; } html[data-mode="neon"] .queue-sheet{ background:rgba(8,4,20,.97)!important; border:1px solid rgba(0,246,255,.3)!important; box-shadow:0 -10px 40px rgba(0,246,255,.15), 0 -4px 24px rgba(255,0,170,.1)!important; } html[data-mode="neon"] .queue-sheet-row.playing{ color:#00f6ff!important;text-shadow:0 0 8px rgba(0,246,255,.4); } html[data-mode="neon"] .avatar-btn{ border:1.5px solid rgba(0,246,255,.5)!important; box-shadow:0 0 14px rgba(255,43,214,.3), 0 0 20px rgba(0,246,255,.2)!important; } html[data-mode="neon"] .login-card{ background:rgba(12,6,28,0.82)!important; border:1px solid rgba(0,246,255,0.38)!important; box-shadow: 0 0 0 1px rgba(255,43,214,0.15), 0 0 48px rgba(0,246,255,.18), 0 0 64px rgba(255,0,170,.12), 0 24px 80px rgba(0,0,0,.55)!important; } html[data-mode="neon"] .fp-art .fp-vinyl{ box-shadow: 0 0 0 1px rgba(0,246,255,0.25), 0 0 32px rgba(0,246,255,0.2), 0 0 48px rgba(255,43,214,0.12), 0 16px 40px rgba(0,0,0,.4)!important; } html[data-mode="neon"] .mini-disc{ box-shadow: 0 0 0 1px rgba(0,246,255,0.35), 0 0 16px rgba(0,246,255,0.3), 0 6px 18px rgba(0,0,0,.4)!important; } /* ===== 纸白主题 paper：纯白纸张感 + 轻微纹理 ===== */ html[data-mode="paper"]{ --bg-0:#f6f3ed; --bg-1:#faf8f4; --bg-2:#f0ebe3; --bg-elevated:#ffffff; --glass:rgba(255,255,255,0.72); --glass-strong:rgba(255,255,255,0.88); --glass-border:rgba(40,30,20,0.08); --line:rgba(40,30,20,0.10); --text-0:#1c1916; --text-1:rgba(40,32,26,0.72); --text-2:rgba(40,32,26,0.42); --danger:#E03E3E; } html[data-mode="paper"], html[data-mode="paper"] body{ background:#f6f3ed!important; color:var(--text-0)!important; } html[data-mode="paper"] body{ background: radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb),0.06) 0%, transparent 50%), #f6f3ed!important; } html[data-mode="paper"] #ambientBg{ background: linear-gradient(165deg, #faf7f2 0%, #f6f3ed 40%, #f3efe8 100%)!important; filter:none!important; animation:none!important; } html[data-mode="paper"] #ambientVeil{ background: linear-gradient(180deg, rgba(246,243,237,.15) 0%, rgba(246,243,237,.02) 40%, rgba(246,243,237,.20) 100%)!important; opacity:1!important; } /* 纸张纤维纹理 */ html[data-mode="paper"] #grain{ opacity:.14!important; mix-blend-mode:multiply!important; background-image: url("data:image/svg+xml;utf8,"), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(80,60,40,.018) 3px, rgba(80,60,40,.018) 4px)!important; animation:none!important; } html[data-mode="paper"] #topbar{ background:linear-gradient(180deg,rgba(246,243,237,.96) 0%,rgba(246,243,237,0) 100%)!important; } html[data-mode="paper"] .search-box{ background:rgba(255,255,255,0.88)!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:0 1px 4px rgba(40,30,20,0.04)!important; } html[data-mode="paper"] .search-box.focused{ background:#fff!important; border-color:rgba(var(--accent-rgb),0.35)!important; box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.12), 0 2px 8px rgba(40,30,20,0.06)!important; } html[data-mode="paper"] .search-box svg, html[data-mode="paper"] .search-box > svg{color:rgba(40,32,26,0.50)!important;} html[data-mode="paper"] .search-box.focused svg, html[data-mode="paper"] .search-box.focused > svg{color:rgba(40,32,26,0.70)!important;} html[data-mode="paper"] .search-box input, html[data-mode="paper"] #searchInput{ color:#1c1916!important; /* 不要写 -webkit-text-fill-color，否则 WebView 会把占位符也染成输入色 */ } /* 占位字：中灰，略浅于图标 */ html[data-mode="paper"] .search-box input::placeholder, html[data-mode="paper"] .search-box input::-webkit-input-placeholder, html[data-mode="paper"] .search-box input::-moz-placeholder, html[data-mode="paper"] .search-box input::-ms-input-placeholder, html[data-mode="paper"] #searchInput::placeholder, html[data-mode="paper"] #searchInput::-webkit-input-placeholder{ color:#9a928a!important; opacity:1!important; } /* 聚焦后隐藏占位符 */ html[data-mode="paper"] .search-box.focused input::placeholder, html[data-mode="paper"] .search-box.focused input::-webkit-input-placeholder, html[data-mode="paper"] .search-box.focused input::-moz-placeholder, html[data-mode="paper"] #searchInput:focus::placeholder, html[data-mode="paper"] #searchInput:focus::-webkit-input-placeholder{ color:transparent!important; -webkit-text-fill-color:transparent!important; opacity:0!important; } html[data-mode="paper"] .sec-title{ color:#1c1916!important; text-shadow:none!important; } html[data-mode="paper"] .sec-more{color:var(--green)!important;text-shadow:none!important;} html[data-mode="paper"] .card-name, html[data-mode="paper"] .card-sub, html[data-mode="paper"] .song-title, html[data-mode="paper"] .song-sub, html[data-mode="paper"] .song-idx, html[data-mode="paper"] .df-name, html[data-mode="paper"] .df-sub, html[data-mode="paper"] .mv-title, html[data-mode="paper"] .mv-sub{color:inherit;} html[data-mode="paper"] .card-name, html[data-mode="paper"] .df-name, html[data-mode="paper"] .song-title, html[data-mode="paper"] .mv-title{color:#1c1916!important;} html[data-mode="paper"] .card-sub, html[data-mode="paper"] .df-sub, html[data-mode="paper"] .song-sub, html[data-mode="paper"] .mv-sub, html[data-mode="paper"] .song-idx{color:rgba(40,32,26,0.45)!important;} html[data-mode="paper"] .nav-item.active{ color:#fff!important; background:var(--green)!important; box-shadow:0 4px 14px rgba(var(--accent-rgb),0.28)!important; } html[data-mode="paper"] .login-btn-primary, html[data-mode="paper"] .hero-play, html[data-mode="paper"] .pb-play, html[data-mode="paper"] .daily-card .dc-play, html[data-mode="paper"] .card-cover .play-fab, html[data-mode="paper"] #biliSessSave, html[data-mode="paper"] #neCkSave{ background:var(--green)!important;color:#fff!important;border:none!important; box-shadow:0 4px 14px rgba(var(--accent-rgb),0.28)!important; } html[data-mode="paper"] .detail-play-all{ background:var(--green)!important;color:#fff!important;border:none!important; box-shadow:none!important; } html[data-mode="paper"] .login-btn-primary svg, html[data-mode="paper"] .hero-play svg, html[data-mode="paper"] .pb-play svg, html[data-mode="paper"] .daily-card .dc-play svg, html[data-mode="paper"] .card-cover .play-fab svg{color:#fff!important;} html[data-mode="paper"] .login-btn-guest, html[data-mode="paper"] .hot-search-tag, html[data-mode="paper"] #searchEmptyBack{ background:rgba(40,30,20,0.06)!important;color:#1c1916!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:none!important; } html[data-mode="paper"] #sourceTabs.sr-tabs{ background:rgba(40,30,20,0.07)!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:none!important; } html[data-mode="paper"] #sourceTabs .sr-indicator{ background:#ffffff!important; box-shadow:0 2px 8px rgba(40,30,20,0.12), 0 1px 0 rgba(255,255,255,1) inset!important; } html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="qq"], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="kuwo"], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="netease"], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="kugou"], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="migu"], html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src="bilibili"]{ color:#1c1916!important;background:transparent!important; } html[data-mode="paper"] .song-row.playing{ background:rgba(var(--accent-rgb),0.08)!important; box-shadow:inset 3px 0 0 var(--green); } html[data-mode="paper"] .song-row.playing .song-title, html[data-mode="paper"] .song-row.playing .song-idx{ color:var(--green)!important; text-shadow:none!important; } html[data-mode="paper"] .card-cover{ box-shadow:0 2px 12px rgba(40,30,20,0.10)!important; } /* 纸白：日推/Daily30 折纸白卡（不跟时段变色）；刷歌卡保持原样 */ html[data-mode="paper"] .daily-card:not(.brush), html[data-mode="paper"] .daily-card.daily30:not(.brush), html[data-mode="paper"] .daily-card.period-morning:not(.brush), html[data-mode="paper"] .daily-card.period-noon:not(.brush), html[data-mode="paper"] .daily-card.period-afternoon:not(.brush), html[data-mode="paper"] .daily-card.period-evening:not(.brush), html[data-mode="paper"] .daily-card.period-night:not(.brush), html[data-mode="paper"] .daily-card.daily30.period-morning:not(.brush), html[data-mode="paper"] .daily-card.daily30.period-noon:not(.brush), html[data-mode="paper"] .daily-card.daily30.period-afternoon:not(.brush), html[data-mode="paper"] .daily-card.daily30.period-evening:not(.brush), html[data-mode="paper"] .daily-card.daily30.period-night:not(.brush), html[data-mode="paper"] .daily-card.ne-skin:not(.brush), html[data-mode="paper"] .daily-card.daily30.ne-skin:not(.brush){ background: linear-gradient(145deg, #ffffff 0%, #ffffff 60%, #fdfcfa 100%)!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:0 1px 0 rgba(255,255,255,1) inset!important; } html[data-mode="paper"] .daily-card:not(.brush).is-playing{ box-shadow:0 1px 0 rgba(255,255,255,1) inset!important; } html[data-mode="paper"] .daily-card:not(.brush)::before, html[data-mode="paper"] .daily-card:not(.brush)::after{ display:none!important;content:none!important; } /* 折角暗影，纸感 */ html[data-mode="paper"] .daily-card:not(.brush) .dc-body{ position:relative; } html[data-mode="paper"] .daily-card:not(.brush) .dc-title{ color:#2c2824!important; text-shadow:none!important; } html[data-mode="paper"] .daily-card:not(.brush) .dc-sub{ color:rgba(40,32,26,0.50)!important; text-shadow:none!important; } html[data-mode="paper"] .daily-card:not(.brush) .dc-play{ background:var(--green)!important; color:#fff!important; box-shadow:0 1px 4px rgba(var(--accent-rgb),0.18)!important; } html[data-mode="paper"] .daily-card:not(.brush) .dc-play svg{ color:#fff!important; } html[data-mode="paper"] .daily-card:not(.brush) .dc-art-inner{ box-shadow:0 1px 3px rgba(40,30,20,0.06)!important; background:#ebe6de!important; } html[data-mode="paper"] .daily-card:not(.brush) .dc-vinyl{ background:radial-gradient(circle at 40% 40%,#ccc 0%,#999 60%,#777 100%)!important; opacity:.55!important; } html[data-mode="paper"] #playerBar{ background:rgba(255,255,255,0.88)!important; border:1px solid rgba(40,30,20,0.08)!important; border-image:none!important; box-shadow:0 8px 28px rgba(40,30,20,0.10)!important; backdrop-filter:blur(24px) saturate(1.2)!important; -webkit-backdrop-filter:blur(24px) saturate(1.2)!important; animation:none!important; } html[data-mode="paper"] #playerBar::before{ background:linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(var(--accent-rgb),0.06) 50%, rgba(255,255,255,0.3) 100%)!important; opacity:1!important;animation:none!important; } html[data-mode="paper"] .pb-title{color:#1c1916!important;text-shadow:none!important;} html[data-mode="paper"] .pb-artist, html[data-mode="paper"] .pb-time{color:rgba(40,32,26,0.45)!important;} html[data-mode="paper"] .pb-bar{background:rgba(40,30,20,0.10)!important;} html[data-mode="paper"] .pb-bar-fill, html[data-mode="paper"] .fp-bar-fill, html[data-mode="paper"] .pb-mini-progress-fill{ background:var(--green)!important; box-shadow:none!important; } html[data-mode="paper"] .pb-bar-knob, html[data-mode="paper"] .fp-bar-knob{ background:var(--green)!important; box-shadow:0 1px 4px rgba(40,30,20,0.2)!important; } html[data-mode="paper"] .pb-ctrl-btn{color:rgba(40,32,26,0.75)!important;} html[data-mode="paper"] #fullPlayer{background:#f6f3ed!important;color:#1c1916!important;} html[data-mode="paper"] #fpBg{ background:#f0ebe3!important; animation:none!important;filter:none!important; } html[data-mode="paper"] #fpBg.has-cover{background:#2a2622!important;} html[data-mode="paper"] #fpBg .fp-bg-amb{ -webkit-filter:blur(48px) saturate(1.15) brightness(0.80); filter:blur(48px) saturate(1.15) brightness(0.80); } html[data-mode="paper"] #fpBg .fp-bg-veil{background:transparent!important;opacity:0!important;} html[data-mode="paper"] #fpBg.has-cover .fp-bg-veil{background:transparent!important;opacity:0!important;} html[data-mode="paper"] #fullPlayer .fp-track-name{ color:#4a4540!important;text-shadow:none!important; } html[data-mode="paper"] #fullPlayer .fp-track-artist{color:rgba(40,32,26,0.42)!important;} html[data-mode="paper"] #fullPlayer .fp-tab{color:rgba(40,32,26,0.36)!important;} html[data-mode="paper"] #fullPlayer .fp-tab.active{ color:var(--green)!important;border-color:var(--green)!important; text-shadow:none!important;box-shadow:0 2px 0 0 var(--green); } html[data-mode="paper"] #fullPlayer .lyric-line{color:rgba(40,32,26,0.72)!important;} html[data-mode="paper"] #fullPlayer .lyric-line:hover{color:rgba(40,32,26,0.88)!important;} html[data-mode="paper"] #fullPlayer .lyric-line.active{ color:#4a4540!important;text-shadow:none!important; } html[data-mode="paper"] #fullPlayer .lyric-line.active .lyric-tr{color:var(--green)!important;text-shadow:none!important;} html[data-mode="paper"] #fullPlayer .lyric-tr{color:rgba(40,32,26,0.58)!important;} html[data-mode="paper"] #fullPlayer .fp-time{color:rgba(40,32,26,0.40)!important;} html[data-mode="paper"] #fullPlayer .fp-bar{background:rgba(40,30,20,0.10)!important;} /* 播放页控件：中灰，不要纯黑 */ html[data-mode="paper"] #fullPlayer .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer .fp-ctrl-btn svg{color:#8a837c!important;} html[data-mode="paper"] #fullPlayer .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-quick button svg{color:#8a837c!important;} html[data-mode="paper"] #fullPlayer .fp-quick button.on{color:var(--danger)!important;filter:none;} html[data-mode="paper"] #fullPlayer .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-speed-btn{color:#8a837c!important;} html[data-mode="paper"] #fullPlayer .fp-speed-btn.on{color:var(--green)!important;} html[data-mode="paper"] #fullPlayer .fp-close{ color:#8a837c!important;background:rgba(40,30,20,0.06)!important; border:1px solid rgba(40,30,20,0.08)!important;box-shadow:none!important; } html[data-mode="paper"] #fullPlayer .fp-close svg{color:#8a837c!important;} html[data-mode="paper"] #fullPlayer .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="paper"] #fullPlayer .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="paper"] .fp-dock, html[data-mode="paper"] #fullPlayer .fp-dock{ background:transparent!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; box-shadow:none!important; } html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-quick button, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-quality-btn, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-speed-btn, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-quick button svg, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-ctrl-btn svg{ color:rgba(255,255,255,.92)!important; } html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-time{color:rgba(255,255,255,.55)!important;} html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="paper"] .fp-dock .fp-quick button, html[data-mode="paper"] .fp-dock .fp-ctrl-btn, html[data-mode="paper"] .fp-dock .fp-quality-btn, html[data-mode="paper"] .fp-dock .fp-quick button svg, html[data-mode="paper"] .fp-dock .fp-ctrl-btn svg{color:#8a837c!important;} html[data-mode="paper"] .fp-dock .fp-time{color:rgba(40,32,26,0.40)!important;} html[data-mode="paper"] .pl-panel-row{color:#1c1916!important;} @media (hover: hover) and (pointer: fine){ html[data-mode="paper"] .pl-panel-row:hover{background:rgba(40,30,20,0.05)!important;} } html[data-mode="paper"] .pl-panel-row.playing{ color:var(--green)!important; background:rgba(var(--accent-rgb),0.08)!important; } html[data-mode="paper"] .empty-state{color:rgba(40,32,26,0.4)!important;} html[data-mode="paper"] .empty-state .e-title{color:rgba(40,32,26,0.7)!important;} html[data-mode="paper"] .avatar-btn{ background:rgba(255,255,255,0.95)!important; border:1.5px solid rgba(40,30,20,0.14)!important; box-shadow:0 1px 4px rgba(40,30,20,0.06)!important; } html[data-mode="paper"] .avatar-btn .avatar-fallback{ color:rgba(40,32,26,0.55)!important; } html[data-mode="paper"] .glass{ background:rgba(255,255,255,0.82)!important; border-color:rgba(40,30,20,0.10)!important; } html[data-mode="paper"] .glass-strong{ background:rgba(255,255,255,0.92)!important; border-color:rgba(40,30,20,0.10)!important; } html[data-mode="paper"] .brand-mark{ --logo-circle:#f0c94d; --logo-mark:var(--green); } /* —— 纸白：补齐硬编码浅色字/图标 —— */ html[data-mode="paper"] .search-box svg, html[data-mode="paper"] .search-box > svg{ color:rgba(40,32,26,0.50)!important; } html[data-mode="paper"] .search-box.focused svg, html[data-mode="paper"] .search-box.focused > svg{ color:rgba(40,32,26,0.70)!important; } html[data-mode="paper"] .search-mode-btn[data-kind="music"]{ color:#fff!important; background:var(--green)!important; box-shadow:0 1px 6px rgba(var(--accent-rgb),0.28)!important; } html[data-mode="paper"] .search-mode-btn[data-kind="music"] svg{ color:#fff!important; } html[data-mode="paper"] .sec-head, html[data-mode="paper"] .sec-title, html[data-mode="paper"] .sec-title span{ color:#1c1916!important; } html[data-mode="paper"] .sec-more, html[data-mode="paper"] .sec-more span{ color:var(--green)!important; } html[data-mode="paper"] .card-name, html[data-mode="paper"] .singer-chip-name, html[data-mode="paper"] .rank-name, html[data-mode="paper"] .channel-name, html[data-mode="paper"] .mv-title, html[data-mode="paper"] .song-title, html[data-mode="paper"] .df-name{ color:#1c1916!important; } html[data-mode="paper"] .card-sub, html[data-mode="paper"] .rank-sub, html[data-mode="paper"] .channel-sub, html[data-mode="paper"] .mv-sub, html[data-mode="paper"] .song-sub, html[data-mode="paper"] .song-dur, html[data-mode="paper"] .song-idx, html[data-mode="paper"] .df-sub{ color:rgba(40,32,26,0.50)!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="paper"] .song-row:hover{ background:rgba(40,30,20,0.05)!important; } } html[data-mode="paper"] .song-row.playing .song-title, html[data-mode="paper"] .song-row.playing .song-idx{ color:var(--green)!important; } html[data-mode="paper"] .tag-sq{ border-color:rgba(var(--accent-rgb),0.55)!important; color:var(--green)!important; } html[data-mode="paper"] .empty-state, html[data-mode="paper"] .empty-state svg{ color:rgba(40,32,26,0.40)!important; } html[data-mode="paper"] .empty-state .e-title{color:rgba(40,32,26,0.72)!important;} html[data-mode="paper"] .empty-state .e-sub{color:rgba(40,32,26,0.45)!important;} html[data-mode="paper"] .skeleton{ background:linear-gradient(100deg,rgba(40,30,20,0.06) 30%,rgba(40,30,20,0.12) 50%,rgba(40,30,20,0.06) 70%)!important; background-size:200% 100%!important; } html[data-mode="paper"] .card-cover .plays{ background:rgba(0,0,0,.42)!important; color:#fff!important; } /* 播放栏：覆盖 #fff!important 硬编码 */ html[data-mode="paper"] #playerBar .pb-title, html[data-mode="paper"] .pb-title{ color:#1c1916!important; text-shadow:none!important; } html[data-mode="paper"] #playerBar .pb-artist, html[data-mode="paper"] .pb-artist{ color:rgba(40,32,26,0.55)!important; text-shadow:none!important; } html[data-mode="paper"] #playerBar .pb-lyric{ color:#1c1916!important; text-shadow:none!important; } html[data-mode="paper"] #playerBar .pb-lyric .pb-lyric-tr{ color:rgba(40,32,26,0.55)!important; } html[data-mode="paper"] #playerBar .pb-list-btn, html[data-mode="paper"] #playerBar .pb-list-btn svg, html[data-mode="paper"] .pb-ctrl-btn, html[data-mode="paper"] .pb-ctrl-btn svg{ color:rgba(40,32,26,0.78)!important; } /* 纯白主题：列表圆圈按钮背景由半透明白改为淡灰，避免与白底播放器融为一体 */ html[data-mode="paper"] #playerBar .pb-list-btn{ background:rgba(0,0,0,0.14)!important; } html[data-mode="paper"] #playerBar .pb-list-btn:hover{ background:rgba(0,0,0,0.20)!important; } html[data-mode="paper"] .pb-ctrl-btn:hover{ color:#1c1916!important; background:rgba(40,30,20,0.06)!important; } html[data-mode="paper"] #playerBar .pb-play, html[data-mode="paper"] .pb-play{ background:var(--green)!important; color:#fff!important; } html[data-mode="paper"] #playerBar .pb-play svg, html[data-mode="paper"] .pb-play svg{ color:#fff!important; } html[data-mode="paper"] #pbQuality.pb-ctrl-btn{ color:var(--green)!important; } /* 日推卡片内文案本身是白字叠在彩色卡上，保持白字可读 */ /* brush 刷歌卡仍白字；日推/30 已在上方设深色字 */ html[data-mode="paper"] .daily-card.brush .dc-title{color:#fff!important;} html[data-mode="paper"] .daily-card.brush .dc-sub{color:rgba(255,255,255,.9)!important;} /* 详情页 */ /* 歌单/详情页：叠在封面模糊底上，统一白字保证可读 */ html[data-mode="paper"].detail-mode #view-detail, html[data-mode="paper"].detail-mode #view-detail .detail-title, html[data-mode="paper"].detail-mode #view-detail .detail-hero .detail-title{ color:#fff!important; text-shadow:0 1px 8px rgba(0,0,0,.35); } html[data-mode="paper"].detail-mode #view-detail .detail-sub, html[data-mode="paper"].detail-mode #view-detail .detail-desc{ color:rgba(255,255,255,0.78)!important; text-shadow:0 1px 6px rgba(0,0,0,.28); } html[data-mode="paper"].detail-mode #view-detail .detail-back, html[data-mode="paper"].detail-mode #view-detail .detail-back svg, html[data-mode="paper"].detail-mode #view-detail .detail-action, html[data-mode="paper"].detail-mode #view-detail .detail-action svg{ color:#fff!important; filter:drop-shadow(0 1px 4px rgba(0,0,0,.35)); } html[data-mode="paper"].detail-mode #view-detail .detail-back{ background:rgba(0,0,0,0.28)!important; border:1px solid rgba(255,255,255,0.18)!important; } html[data-mode="paper"].detail-mode #view-detail .detail-play-all{ background:var(--green)!important;color:#fff!important; } html[data-mode="paper"].detail-mode #view-detail .detail-play-all svg{color:#fff!important;} html[data-mode="paper"].detail-mode #view-detail .song-row .song-title, html[data-mode="paper"].detail-mode #view-detail .song-title{ color:#fff!important; text-shadow:none!important; } html[data-mode="paper"].detail-mode #view-detail .song-row .song-sub, html[data-mode="paper"].detail-mode #view-detail .song-sub, html[data-mode="paper"].detail-mode #view-detail .song-idx, html[data-mode="paper"].detail-mode #view-detail .song-dur{ color:rgba(255,255,255,0.62)!important; text-shadow:none!important; } html[data-mode="paper"].detail-mode #view-detail .song-row.playing .song-title, html[data-mode="paper"].detail-mode #view-detail .song-row.playing .song-idx{ color:var(--green)!important; text-shadow:none!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="paper"].detail-mode #view-detail .song-row:hover{ background:rgba(255,255,255,0.08)!important; } } html[data-mode="paper"].detail-mode #view-detail .song-row.playing{ background:rgba(255,255,255,0.10)!important; } html[data-mode="paper"].detail-mode #view-detail .tag-sq{ border-color:rgba(255,255,255,0.45)!important; color:#fff!important; text-shadow:none!important; } html[data-mode="paper"].detail-mode #view-detail .empty-state, html[data-mode="paper"].detail-mode #view-detail .empty-state .e-title, html[data-mode="paper"].detail-mode #view-detail .empty-state .e-sub{ color:rgba(255,255,255,0.7)!important; text-shadow:none!important; } html[data-mode="paper"].detail-mode #view-detail .detail-sk-meta .skeleton{ background:linear-gradient(100deg,rgba(255,255,255,0.12) 30%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.12) 70%)!important; background-size:200% 100%!important; } /* 纸白 · 听书「查看全部」：与主页同色纸白底，不用封面高斯模糊墙；标题/Tab 对齐歌单广场 */ html[data-mode="paper"].detail-mode.voice-all-mode #ambientBg, html[data-mode="paper"].detail-mode.voice-all-mode #ambientVeil, html[data-mode="paper"].detail-mode.voice-all-mode #grain{ opacity:1!important;visibility:visible!important; } html[data-mode="paper"].detail-mode.voice-all-mode .detail-wall{ opacity:0!important;visibility:hidden!important;pointer-events:none!important; } html[data-mode="paper"].detail-mode.voice-all-mode #view-detail.view, html[data-mode="paper"].detail-mode.voice-all-mode #viewport #view-detail{ background:transparent!important; color:var(--text-0)!important; } html[data-mode="paper"].detail-mode.voice-all-mode #view-detail .sec-title, html[data-mode="paper"].detail-mode.voice-all-mode #view-detail html[data-mode="paper"].detail-mode.voice-all-mode #view-detail .voice-sub, html[data-mode="paper"].detail-mode.voice-all-mode #view-detail html[data-mode="paper"].detail-mode.voice-all-mode #view-detail #detailBackBtn{ background:rgba(40,30,20,0.06)!important; color:#1c1916!important; border:1px solid rgba(40,30,20,0.10)!important; } /* Tab：与歌单广场 sr-tab 纯白主题一致 */ html[data-mode="paper"] .voice-all-tab, html[data-mode="paper"].detail-mode.voice-all-mode html[data-mode="paper"] .voice-all-tab.active, html[data-mode="paper"].detail-mode.voice-all-mode html[data-mode="paper"] .voice-sort-btn{ color:rgba(40,32,26,0.55)!important; background:rgba(40,30,20,0.06)!important; border:1px solid transparent!important; } html[data-mode="paper"] .voice-sort-btn.active{ color:#1c1916!important; background:#ffffff!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; font-weight:700!important; } html[data-mode="paper"] html[data-mode="paper"] .voice-sub{color:rgba(40,32,26,0.45)!important;} /* 搜索/热词/筛选 */ html[data-mode="paper"] .hot-search-tag, html[data-mode="paper"] #searchEmptyBack, /* 纸白：歌单/频道选中 tab 纯白底，和背景拉开 */ html[data-mode="paper"] .sr-tab, html[data-mode="paper"] #plTabs .sr-tab, html[data-mode="paper"] #srTabs .sr-tab{ color:rgba(40,32,26,0.55)!important; background:rgba(40,30,20,0.06)!important; } html[data-mode="paper"] .sr-tab.active, html[data-mode="paper"] #plTabs .sr-tab.active, html[data-mode="paper"] #srTabs .sr-tab.active{ color:#1c1916!important; background:#ffffff!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; font-weight:700!important; } html[data-mode="paper"] .channel-tab{ color:rgba(40,32,26,0.50)!important; background:transparent!important; } html[data-mode="paper"] .channel-tab.active{ color:#1c1916!important; background:#ffffff!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; font-weight:600!important; } html[data-mode="paper"] #plRefreshBtn, html[data-mode="paper"] #homePlRefresh{ background:#ffffff!important; color:rgba(40,32,26,0.65)!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:0 1px 3px rgba(40,30,20,0.06)!important; } html[data-mode="paper"] #homeKwBangRefresh{ background:#ffffff!important; color:rgba(40,32,26,0.65)!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:0 1px 3px rgba(40,30,20,0.06)!important; } html[data-mode="paper"] .login-title{color:#1c1916!important;} html[data-mode="paper"] .login-sub, html[data-mode="paper"] .login-hint{color:rgba(40,32,26,0.50)!important;} html[data-mode="paper"] .cookie-area{ background:rgba(255,255,255,0.9)!important; border-color:rgba(40,30,20,0.12)!important; color:#1c1916!important; } html[data-mode="paper"] #loginView{ background: radial-gradient(100% 70% at 50% 0%, rgba(var(--accent-rgb),0.12) 0%, transparent 55%), #f6f3ed!important; } html[data-mode="paper"] .login-card{ background:rgba(255,255,255,0.92)!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:0 12px 40px rgba(40,30,20,0.10)!important; } /* 全屏播放器补充 */ html[data-mode="paper"] #fullPlayer .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-speed-btn, html[data-mode="paper"] #fullPlayer .fp-ctrl-btn svg, html[data-mode="paper"] #fullPlayer .fp-quick button svg{ color:#8a837c!important; } html[data-mode="paper"] #fullPlayer .fp-speed-btn.on{ color:var(--green)!important; } html[data-mode="paper"] #fullPlayer .pl-panel-row.playing{ color:var(--green)!important; } html[data-mode="paper"] #fullPlayer .empty-state, html[data-mode="paper"] #lyricsList .empty-state{ color:rgba(40,32,26,0.42)!important; } html[data-mode="paper"] #fullPlayer .empty-state .e-title, html[data-mode="paper"] #lyricsList .empty-state .e-title{ color:rgba(40,32,26,0.72)!important; text-shadow:none!important; } /* 纹理略降，避免压暗文字 */ html[data-mode="paper"] #grain{ opacity:.08!important; } /* toast 在浅底上更清晰 */ html[data-mode="paper"] #toast, html[data-mode="paper"] .toast{ background:rgba(28,25,22,0.90)!important; color:#fff!important; } /* 默认/浅色：加载提示白底黑字 */ html[data-mode="light"] #toast, html:not([data-mode]) #toast, html[data-mode="light"] .toast, html:not([data-mode]) .toast{ background:rgba(255,255,255,0.96)!important; color:#1c1916!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:0 8px 28px rgba(40,30,50,0.14)!important; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{height:100%;margin:0;background:#0b0b0f;color:var(--text-0); font-family:var(--font-body);overscroll-behavior:none;-webkit-user-select:none;user-select:none; overflow-x:hidden;max-width:100vw;width:100%;touch-action:pan-y; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;} body{position:relative;overflow:hidden;overflow-x:hidden;touch-action:pan-y; background: radial-gradient(110% 80% at 50% -20%, rgba(var(--accent-rgb),0.18) 0%, transparent 55%), radial-gradient(90% 60% at 100% 30%, rgba(88,70,160,0.14) 0%, transparent 50%), radial-gradient(80% 50% at 0% 80%, rgba(40,90,160,0.12) 0%, transparent 45%), #0b0b0f;} ::-webkit-scrollbar{width:0;height:0;} img{-webkit-user-drag:none;max-width:100%;} button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;outline:none; transition:transform .35s var(--ease-spring), opacity .2s var(--ease);} button:active{transform:scale(0.94);opacity:.88;} a{color:inherit;text-decoration:none;} input{font-family:inherit;color:inherit;background:none;border:none;outline:none;} @keyframes amFadeUp{ from{opacity:0;transform:translate3d(0,16px,0);} to{opacity:1;transform:none;} } @keyframes amPop{ 0%{opacity:0;transform:scale(.92);} 70%{transform:scale(1.03);} 100%{opacity:1;transform:scale(1);} } @keyframes amTabIn{ from{opacity:0;transform:translate3d(0,8px,0);} to{opacity:1;transform:none;} } .view.active .sec, .view.active .daily-row, .view.active .hscroll, .view.active .grid-cols, .view.active .song-list{ animation:amFadeUp .48s var(--ease-smooth) both; } .view.active .sec:nth-child(1){animation-delay:.02s;} .view.active .sec:nth-child(2){animation-delay:.06s;} .view.active .sec:nth-child(3){animation-delay:.1s;} .view.active .sec:nth-child(4){animation-delay:.14s;} .view.active .sec:nth-child(5){animation-delay:.18s;} .card,.rank-card,.radio-card,.mv-card,.daily-card{ transition:transform .4s var(--ease-spring), box-shadow .3s var(--ease); } .card:active,.rank-card:active,.radio-card:active,.mv-card:active,.daily-card:active{ transform:scale(0.96); } .card-cover,.daily-card .dc-art-inner{ transition:transform .45s var(--ease-spring); } .nav-item{ transition:transform .35s var(--ease-spring), background .25s var(--ease), color .2s; } .nav-item:active{transform:scale(0.92);} .nav-item.active{transform:scale(1);} #bottomNav .nav-item.active svg, #bottomNav .nav-item.active span{transition:transform .4s var(--ease-spring);} .avatar-btn{transition:transform .4s var(--ease-spring);} .avatar-btn:active{transform:scale(0.9);} .search-box{transition:background .25s var(--ease);} .search-box.focused{transform:none;} .song-row{transition:background .2s var(--ease), transform .3s var(--ease-spring);} .song-row:active{transform:scale(0.985);} #toast{ transition:transform .45s var(--ease-spring), opacity .3s var(--ease)!important; } #playerBar{ transition:transform .45s var(--ease-spring), opacity .3s var(--ease); } #playerBar.show{animation:none;} #fullPlayer.show{ opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0);visibility:visible!important; } #fullPlayer:not(.show){ opacity:0!important;pointer-events:none!important;visibility:hidden!important; } #fullPlayer:not(.show) *{ pointer-events:none!important; } .fp-play,.pb-play{ transition:transform .4s var(--ease-spring), background .2s, box-shadow .3s!important; } .fp-play:active,.pb-play:active{transform:scale(0.9)!important;} .fp-ctrl-btn,.pb-ctrl-btn,.fp-quick button{ transition:transform .35s var(--ease-spring), color .2s!important; } .fp-ctrl-btn:active,.pb-ctrl-btn:active,.fp-quick button:active{transform:scale(0.88)!important;} .fp-tab,.sr-tab{ transition:transform .35s var(--ease-spring), color .2s, border-color .2s, background .2s; } .fp-tab:active,.sr-tab:active{transform:scale(0.94);} .login-card{animation:amPop .5s var(--ease-spring) both;} .hero-play,.login-btn,.detail-play-all{ transition:transform .4s var(--ease-spring), opacity .2s, box-shadow .3s!important; } .hero-play:active,.login-btn:active,.detail-play-all:active{transform:scale(0.95)!important;} .brand-mark{transition:transform .4s var(--ease-spring);} .brand-mark:active{transform:scale(0.9);} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } #ambientBg{ position:fixed;inset:0;z-index:0;pointer-events:none; overflow:hidden; background: radial-gradient(ellipse 90% 70% at 10% 5%, rgba(255,120,160,0.55) 0%, transparent 55%), radial-gradient(ellipse 80% 65% at 95% 8%, rgba(100,150,255,0.50) 0%, transparent 55%), radial-gradient(ellipse 75% 60% at 85% 90%, rgba(160,120,255,0.48) 0%, transparent 55%), radial-gradient(ellipse 70% 55% at 5% 88%, rgba(60,200,160,0.42) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 48% 48%, rgba(255,180,100,0.28) 0%, transparent 58%), linear-gradient(165deg, #1a1218 0%, #12161e 40%, #121a18 70%, #161218 100%); } #ambientVeil{ position:fixed;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg, rgba(12,12,18,.42) 0%, rgba(12,12,18,.22) 22%, rgba(12,12,18,.12) 45%, rgba(12,12,18,.28) 72%, rgba(12,12,18,.55) 100%); } #grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,");} #app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;overflow-x:hidden;max-width:100vw;width:100%;background:transparent;} .glass{background:var(--glass);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1)); border:1px solid var(--glass-border);} .glass-strong{background:var(--glass-strong);backdrop-filter:blur(var(--blur-2));-webkit-backdrop-filter:blur(var(--blur-2)); border:1px solid var(--glass-border);} #loginView{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center; background: radial-gradient(100% 70% at 50% 0%, rgba(var(--accent-rgb),0.35) 0%, transparent 55%), radial-gradient(80% 50% at 20% 90%, rgba(90,60,160,0.28) 0%, transparent 50%), radial-gradient(70% 40% at 90% 70%, rgba(40,100,180,0.2) 0%, transparent 45%), #121218;} #loginView.hidden{display:none;} #ckSettingsView{position:fixed;inset:0;z-index:230;display:flex;align-items:center;justify-content:center; background: radial-gradient(100% 70% at 50% 0%, rgba(var(--accent-rgb),0.32) 0%, transparent 55%), rgba(0,0,0,.55); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} #ckSettingsView.hidden{display:none;} #ckSettingsView .ck-settings-card{align-items:stretch;padding:22px 18px 16px;gap:0;} #ckSettingsView .ck-close-x{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%; background:rgba(118,118,128,.18);color:var(--text-0);font-size:18px;line-height:30px;text-align:center;border:none;cursor:pointer;z-index:2;} #ckSettingsView .ck-head{margin-bottom:14px;padding-right:28px;} #ckSettingsView .ck-head-title{font-size:18px;font-weight:700;letter-spacing:-.2px;} #ckSettingsView .ck-head-sub{font-size:12px;color:var(--text-2);margin-top:2px;} #ckSettingsView .ck-sec{margin-top:14px;padding-top:12px;border-top:1px solid rgba(128,128,128,.18);} #ckSettingsView .ck-sec:first-of-type{border-top:none;padding-top:0;margin-top:4px;} #ckSettingsView .ck-sec-title{font-size:13px;font-weight:700;color:var(--text-0);margin-bottom:2px;display:flex;align-items:center;gap:8px;} #ckSettingsView .ck-sec-hint{font-size:11px;color:var(--text-2);margin-bottom:8px;line-height:1.4;} #ckSettingsView .ck-sec-hint.is-on{color:var(--green);} #ckSettingsView .ck-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:980px; background:rgba(118,118,128,.2);color:var(--text-2);} #ckSettingsView .ck-badge.on{background:rgba(52,199,89,.18);color:#34c759;} #ckSettingsView .ck-area-sm{height:72px!important;font-size:11px!important;padding:8px 10px!important;border-radius:10px!important;} #ckSettingsView .ck-btn-row{display:flex;gap:8px;margin-top:8px;} #ckSettingsView .ck-btn{flex:1;padding:8px 0;border-radius:10px;font-size:13px;font-weight:600;border:none;cursor:pointer; transition:transform .15s,opacity .15s;} #ckSettingsView .ck-btn:active{transform:scale(.97);} #ckSettingsView .ck-btn-main{background:var(--green,#0daf52);color:#fff;} #ckSettingsView .ck-btn-ghost{background:rgba(118,118,128,.16);color:var(--text-0);} #ckSettingsView .ck-plat-row{display:flex;gap:8px;} #ckSettingsView .ck-plat{flex:1;padding:9px 0;border-radius:10px;font-size:13px;font-weight:600;border:none;cursor:pointer; background:rgba(118,118,128,.14);color:var(--text-1);transition:background .15s,color .15s,transform .15s;} #ckSettingsView .ck-plat:active{transform:scale(.97);} #ckSettingsView .ck-plat.active{background:var(--green,#0daf52);color:#fff;} #ckSettingsView .ck-src-list{display:flex;flex-direction:column;gap:0;} /* 复用 .mine-pl-tabs / .mine-pl-tab / .mine-pl-indicator，与个人中心同一套，避免自造滑动闪烁 */ #ckSettingsView .mine-pl-tabs{margin:0 0 12px;} #ckSettingsView .mine-pl-tab{font-size:12px;padding:7px 2px;} #ckSettingsView .ck-mir-panes{ position:relative;height:228px;min-height:228px;max-height:228px;overflow:hidden; } #ckSettingsView .ck-mir-pane{ display:none;flex-direction:column;gap:8px;height:100%;box-sizing:border-box; } #ckSettingsView .ck-mir-pane.active{display:flex;} #ckSettingsView .ck-src-row{flex-shrink:0;} #ckSettingsView .ck-src-row{ display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px; background:rgba(118,118,128,.12); } #ckSettingsView .ck-src-info{flex:1;min-width:0;} #ckSettingsView .ck-src-name{font-size:13px;font-weight:700;color:var(--text-0);line-height:1.3;} #ckSettingsView .ck-src-desc{font-size:11px;color:var(--text-2);margin-top:2px;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #ckSettingsView .ck-switch{ position:relative;width:44px;height:26px;border-radius:980px;border:none;cursor:pointer;flex-shrink:0; background:rgba(118,118,128,.35);transition:background .2s; } #ckSettingsView .ck-switch.on{background:var(--green,#0daf52);} #ckSettingsView .ck-switch::after{ content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s; } #ckSettingsView .ck-switch.on::after{transform:translateX(18px);} #ckSettingsView .ck-switch:disabled{opacity:.4;cursor:not-allowed;} #ckSettingsView .ck-foot{margin-top:14px;font-size:11px;color:var(--text-2);text-align:center;} html[data-mode="light"] #ckSettingsView, html:not([data-mode]) #ckSettingsView, html[data-mode="paper"] #ckSettingsView{ background:rgba(20,16,12,.4); } html[data-mode="light"] #ckSettingsView .login-card, html:not([data-mode]) #ckSettingsView .login-card, html[data-mode="paper"] #ckSettingsView .login-card{ background:rgba(255,255,255,0.92); border:1px solid rgba(40,30,20,0.1); color:#1c1916; } html[data-mode="light"] #ckSettingsView .cookie-area, html:not([data-mode]) #ckSettingsView .cookie-area, html[data-mode="paper"] #ckSettingsView .cookie-area{ background:rgba(40,30,20,0.05); border-color:rgba(40,30,20,0.12); color:#1c1916; } .login-card{width:380px;max-width:88vw;padding:40px 34px 30px;border-radius:24px; background:rgba(40,40,46,0.55);backdrop-filter:blur(60px) saturate(1.6);-webkit-backdrop-filter:blur(60px) saturate(1.6); border:1px solid rgba(255,255,255,0.14);box-shadow:0 24px 80px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08) inset; display:flex;flex-direction:column;align-items:center;} .login-title{font-size:22px;font-weight:700;letter-spacing:-0.3px;margin-bottom:4px;} .login-sub{font-size:13px;color:var(--text-2);margin-bottom:26px;} .login-pane-cookie{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:0;} .login-actions{display:flex;gap:12px;width:100%;margin-top:14px;} .login-btn{flex:1;padding:14px 0;border-radius:980px;font-weight:600;font-size:16px; transition:transform .28s var(--ease-spring), opacity .2s, box-shadow .25s, background .2s, color .2s, border-color .2s;} .login-btn:active{transform:scale(.97);} .login-btn[disabled]{opacity:.5;pointer-events:none;} .login-btn-primary{background:#fff;color:#111; box-shadow:0 8px 28px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.35) inset;} .login-btn-primary:hover{box-shadow:0 10px 32px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.4) inset;} .login-btn-guest{background:rgba(255,255,255,.08);color:var(--text-0); border:1px solid rgba(255,255,255,.22); box-shadow:none;} .login-btn-guest:hover{background:rgba(255,255,255,.14);} .login-hint{font-size:11px;color:var(--text-2);line-height:1.7;margin-top:14px;text-align:center;padding:0 6px;} .login-hint b{color:var(--gold);} .cookie-area{width:100%;height:110px;padding:12px 14px;border-radius:var(--radius-s);background:rgba(255,255,255,.05); border:1px solid var(--line);font-size:12px;line-height:1.6;resize:none;-webkit-user-select:text;user-select:text; box-sizing:border-box;color:var(--text-0);caret-color:var(--text-0);-webkit-text-fill-color:var(--text-0);} .cookie-area:focus{border-color:var(--green);background:rgba(255,255,255,.07);color:var(--text-0);-webkit-text-fill-color:var(--text-0);} .cookie-area::placeholder{color:var(--text-2);-webkit-text-fill-color:var(--text-2);opacity:1;} /* 设置页输入框：暗色/霓虹/鱿鱼强制浅字，避免被 light 规则盖成黑字 */ html[data-mode="dark"] #ckSettingsView .cookie-area, html[data-mode="neon"] #ckSettingsView .cookie-area, html[data-mode="squid"] #ckSettingsView .cookie-area, html[data-mode="dark"] .cookie-area, html[data-mode="neon"] .cookie-area, html[data-mode="squid"] .cookie-area{ color:#f2f2f7!important;-webkit-text-fill-color:#f2f2f7!important; background:rgba(255,255,255,.08)!important;caret-color:#f2f2f7!important; } html[data-mode="dark"] #ckSettingsView .cookie-area::placeholder, html[data-mode="neon"] #ckSettingsView .cookie-area::placeholder, html[data-mode="squid"] #ckSettingsView .cookie-area::placeholder, html[data-mode="dark"] .cookie-area::placeholder, html[data-mode="neon"] .cookie-area::placeholder, html[data-mode="squid"] .cookie-area::placeholder{ color:rgba(235,235,245,.45)!important;-webkit-text-fill-color:rgba(235,235,245,.45)!important; } #topbar{position:relative;z-index:10;display:grid; grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;column-gap:12px; /* 非全屏：小间距与原生顶栏分隔，不叠状态栏安全区；全屏由 html.fm-ext-fullscreen 覆盖 */ padding:13px calc(var(--pad-x) + var(--safe-r)) 10px calc(var(--pad-x) + var(--safe-l)); flex-shrink:0;box-sizing:border-box; background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 100%);} html.fm-ext-fullscreen #topbar{ padding-top:calc(11px + var(--safe-t)); } .brand{display:flex;align-items:center;justify-content:center;flex-shrink:0;grid-column:1;width:36px;height:36px;} .brand-mark{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; line-height:0; position:relative;overflow:visible; background:transparent; box-shadow:none; border:none; cursor:pointer; -webkit-user-select:none;user-select:none; /* 底圆固定金黄；音符跟随当前音源/主题 --green，切 tab 同步变色 */ --logo-circle:#fdcd18; --logo-mark:var(--green); transition:transform .28s var(--ease-spring), box-shadow .25s ease, filter .25s ease; } .brand-mark::before{display:none!important;content:none!important;} .brand-mark::after{display:none!important;content:none!important;} .brand-mark svg{ width:32px;height:32px;position:relative;z-index:1; color:inherit; display:block; transform:none; transform-origin:50% 50%; filter:none; transition:transform .25s var(--ease-spring); } .brand-mark svg circle, .brand-mark svg path{ transition:fill .28s ease; } .brand-mark:active{transform:scale(0.9);box-shadow:none;} .brand-mark:active svg{transform:scale(0.92);} .brand-name{display:none!important;} .brand-mark .logo-hint{ position:absolute;left:50%;bottom:-6px;transform:translateX(-50%); font-size:10px;color:var(--text-2);white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .25s;z-index:2; } .brand-mark.show-hint .logo-hint{opacity:1;} #mainNav{display:none;} .nav-item{padding:8px 16px;font-size:14px;color:var(--text-1);border-radius:980px; transition:transform .35s var(--ease-spring), background .25s var(--ease), color .2s;position:relative;font-weight:500;} .nav-item:hover{color:var(--text-0);background:rgba(255,255,255,.08);} .nav-item.active{color:#111;background:rgba(255,255,255,.92);font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.22);} #bottomNav{ display:none;position:relative;z-index:18;flex-shrink:0; flex-direction:row;align-items:stretch;justify-content:space-around; padding:8px 12px calc(12px + var(--safe-b)); background:rgba(12,12,16,0.94);border-top:1px solid rgba(255,255,255,0.10); backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3); box-sizing:border-box;max-width:100%;width:100%; } #bottomNav .nav-item{ flex:1;min-width:0;border:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:12px 6px 10px;border-radius:14px;background:transparent;box-shadow:none; color:rgba(235,235,245,0.45);font-size:14px;font-weight:500;line-height:1.2;text-align:center; } #bottomNav .nav-item svg{width:28px;height:28px;margin-bottom:4px;opacity:0.85;color:inherit;} #bottomNav .nav-item.active{color:var(--green);background:rgba(var(--accent-rgb),0.14);box-shadow:none;font-weight:600;} #bottomNav .nav-item.active svg{opacity:1;color:var(--green);} html[data-mode="dark"] #bottomNav{background:rgba(0,0,0,0.96);border-top-color:rgba(255,255,255,0.08);} html[data-mode="dark"] #bottomNav .nav-item.active{color:#fff!important;background:rgba(255,255,255,0.12)!important;} html[data-mode="dark"] #bottomNav .nav-item.active svg{color:#fff!important;} /* 底栏已移除 */ html #bottomNav,html.tv-mode #bottomNav,html:not(.tv-mode) #bottomNav{ display:none!important;pointer-events:none!important;height:0!important;overflow:hidden!important; padding:0!important;margin:0!important;border:none!important; } #topActions{display:contents;} #mainNav{grid-column:1/-1;display:none;} .search-box{display:flex;align-items:center;gap:9px;padding:0 14px;height:36px;box-sizing:border-box; border-radius:999px;min-width:0;width:100%;grid-column:2; background:rgba(255,255,255,0.10)!important; border:1px solid rgba(255,255,255,0.08)!important; backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15); box-shadow:none; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;} .search-box.focused{ background:rgba(255,255,255,0.16)!important; border-color:rgba(255,255,255,0.18)!important; box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.22)!important; } .search-box svg{width:15px;height:15px;flex-shrink:0;color:rgba(235,235,245,0.45);transition:color .2s;} .search-box.focused svg{color:rgba(235,235,245,0.75);} .search-box input{flex:1;min-width:0;font-size:15px;line-height:1.3;color:var(--text-0); font-weight:400;letter-spacing:-0.1px; -webkit-user-select:text;user-select:text; pointer-events:auto;touch-action:manipulation;background:transparent;border:0;outline:none;} .search-box input::placeholder{ color:rgba(235,235,245,0.42); font-size:14.5px;font-weight:400; opacity:1; } .search-box input::-webkit-input-placeholder{ color:rgba(235,235,245,0.42); font-size:14.5px; opacity:1; } .search-box input::-moz-placeholder{ color:rgba(235,235,245,0.42); font-size:14.5px; opacity:1; } .search-box.focused input::placeholder, .search-box.focused input::-webkit-input-placeholder, .search-box.focused input::-moz-placeholder, #searchInput:focus::placeholder, #searchInput:focus::-webkit-input-placeholder{ color:transparent!important; -webkit-text-fill-color:transparent!important; opacity:0!important; } .search-box input:disabled{opacity:.6;} .search-box{padding-right:3px!important;} .search-mode-toggle{display:none!important;width:0!important;height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:none!important;} .search-mode-btn{display:none!important;} .search-mode-btn svg, .search-box .search-mode-btn svg{ width:15px;height:15px;flex-shrink:0; color:inherit!important; fill:currentColor; opacity:1!important; display:block; margin:0 auto; /* 覆盖 .search-box svg 的默认色，并保证在圆钮内几何居中 */ position:relative; top:0;left:0; } .search-mode-btn .sm-label{display:none!important;} .search-mode-btn:active{transform:scale(0.9);} .search-mode-btn[data-kind="music"]{ color:#111!important; background:#fff!important; box-shadow:0 1px 8px rgba(0,0,0,.25); } .search-mode-btn[data-kind="voice"]{ color:#fff!important; background:linear-gradient(135deg,#ff9500,#ff5e3a)!important; box-shadow:0 1px 8px rgba(255,120,40,.4); } html[data-mode="dark"] .search-mode-btn[data-kind="music"]{ color:#111!important;background:#fff!important; } html[data-mode="neon"] .search-mode-btn[data-kind="music"]{ color:#03010a!important; background:linear-gradient(135deg,#00f6ff,#8cf)!important; box-shadow:0 0 12px rgba(0,246,255,.45)!important; } html[data-mode="neon"] .search-mode-btn[data-kind="voice"]{ background:linear-gradient(135deg,#ff2bd6,#ff9a3c)!important; box-shadow:0 0 12px rgba(255,43,214,.45)!important; } .avatar-btn{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0; grid-column:3;justify-self:center;align-self:center;position:relative; display:flex;align-items:center;justify-content:center; border:1.5px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);} .avatar-btn .avatar-fallback{width:54%;height:54%;color:rgba(235,235,245,0.72);flex-shrink:0;pointer-events:none;} .avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;border-radius:50%;} .avatar-btn img.img-err{opacity:0;visibility:hidden;pointer-events:none;} #viewport{flex:1;position:relative;overflow:hidden;overflow-x:hidden;max-width:100%;width:100%;} .view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:6px calc(var(--pad-x) + var(--safe-r)) calc(92px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));background:transparent; opacity:0;pointer-events:none;transform:translate3d(0,14px,0); transition:opacity .38s var(--ease-smooth),transform .48s var(--ease-spring); max-width:100%;width:100%;-webkit-overflow-scrolling:touch;} .view.active{opacity:1;pointer-events:auto;transform:translate3d(0,0,0);} .sec{margin:28px 0 12px;} .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;} .sec-title{font-size:22px;font-weight:700;letter-spacing:-0.2px;display:flex;align-items:center;gap:8px;} .sec-title .dot{width:0;height:0;opacity:0;display:none;} .sec-more{font-size:15px;color:var(--green);display:flex;align-items:center;gap:3px;font-weight:500;} .daily-row{ display:flex;gap:11px;margin-top:6px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding-bottom:2px;scrollbar-width:none; } .daily-row::-webkit-scrollbar{display:none;width:0;height:0;} .daily-card{position:relative;border-radius:18px;overflow:hidden;min-height:148px; flex:0 0 calc((100% - 11px) * 0.48);min-width:150px;max-width:240px;scroll-snap-align:start; display:flex;align-items:stretch;cursor:pointer; background:linear-gradient(135deg,#5B9DFF 0%,#7EB6FF 55%,#A8D0FF 100%); transition:transform .2s var(--ease), background .35s var(--ease);} @media (min-width:900px){ .daily-row{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:visible;scroll-snap-type:none;} .daily-card{flex:unset;width:auto;min-width:0;max-width:none;} } .daily-card:active{transform:scale(.98);} .daily-card:focus,.daily-card:focus-visible{outline:none;box-shadow:none;} .daily-card.daily30{background:linear-gradient(135deg,#3D7CFF 0%,#6AA1FF 50%,#9EC5FF 100%);} .daily-card.brush{background:linear-gradient(135deg,#FF6B8A 0%,#FF8FAB 45%,#FFB4C8 100%);} .daily-card.brush.period-morning{background:linear-gradient(135deg,#FF7A9A 0%,#FF9BB5 50%,#FFC2D4 100%);} .daily-card.brush.period-noon{background:linear-gradient(135deg,#FF5C82 0%,#FF8AA8 50%,#FFB0C8 100%);} .daily-card.brush.period-afternoon{background:linear-gradient(135deg,#F2557A 0%,#FF7E9C 50%,#FFA8BE 100%);} .daily-card.brush.period-evening{background:linear-gradient(135deg,#E84B78 0%,#FF6B9A 50%,#FF9AB8 100%);} .daily-card.brush.period-night{background:linear-gradient(135deg,#C43D66 0%,#E85A88 50%,#F08AAB 100%);} .daily-card.brush.ne-skin{background:linear-gradient(135deg,#EC4141 0%,#FF6B8A 50%,#FFA0B8 100%);} .daily-card.period-morning{ background:linear-gradient(135deg,#1FAF6B 0%,#31C27C 45%,#6FE0A8 100%);} .daily-card.daily30.period-morning{ background:linear-gradient(135deg,#169A5C 0%,#28A86A 50%,#4FD494 100%);} .daily-card.period-noon{ background:linear-gradient(135deg,#2F8CFF 0%,#5AA8FF 50%,#9CCBFF 100%);} .daily-card.daily30.period-noon{ background:linear-gradient(135deg,#1A6FE0 0%,#3D8CFF 50%,#7AB4FF 100%);} .daily-card.period-afternoon{ background:linear-gradient(135deg,#FF7A2F 0%,#FF9A4D 45%,#FFC07A 100%);} .daily-card.daily30.period-afternoon{ background:linear-gradient(135deg,#E8681A 0%,#FF8533 50%,#FFB060 100%);} .daily-card.period-evening{ background:linear-gradient(135deg,#6B4CE0 0%,#8B6CFF 45%,#B8A0FF 100%);} .daily-card.daily30.period-evening{ background:linear-gradient(135deg,#5438C4 0%,#7354E8 50%,#A088FF 100%);} .daily-card.period-night{ background: radial-gradient(ellipse 120% 80% at 10% -20%, rgba(80,140,255,.35) 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 100% 110%, rgba(40,80,180,.4) 0%, transparent 50%), linear-gradient(145deg,#071428 0%,#0d2a52 38%,#163a72 68%,#0a1c38 100%);} .daily-card.daily30.period-night{ background: radial-gradient(ellipse 110% 90% at 90% -10%, rgba(100,160,255,.28) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(30,70,160,.45) 0%, transparent 55%), linear-gradient(150deg,#050f22 0%,#0a2248 42%,#12406e 72%,#081830 100%);} /* 时段动效层（刷歌卡保持原样） */ .daily-card.period-morning:not(.brush)::before, .daily-card.period-noon:not(.brush)::before, .daily-card.period-afternoon:not(.brush)::before, .daily-card.period-evening:not(.brush)::before, .daily-card.period-night:not(.brush)::before, .daily-card.period-morning:not(.brush)::after, .daily-card.period-noon:not(.brush)::after, .daily-card.period-afternoon:not(.brush)::after, .daily-card.period-evening:not(.brush)::after{ content:""; position:absolute;pointer-events:none;z-index:0; border-radius:inherit; } /* 清晨：薄雾上浮 + 朝光呼吸 */ .daily-card.period-morning:not(.brush)::before{ inset:0; background: radial-gradient(ellipse 80% 60% at 18% 115%, rgba(255,255,255,.38) 0%, transparent 62%), radial-gradient(ellipse 50% 40% at 88% -10%, rgba(255,255,220,.28) 0%, transparent 55%); animation:periodMorningMist 6.5s ease-in-out infinite alternate; } .daily-card.period-morning:not(.brush)::after{ width:86px;height:86px;right:-18px;top:-22px;border-radius:50%; background:radial-gradient(circle, rgba(255,255,230,.55) 0%, rgba(180,255,210,.18) 42%, transparent 70%); animation:periodGlowPulse 5.2s ease-in-out infinite alternate; } /* 正午：日轮高光 + 热浪微晃 */ .daily-card.period-noon:not(.brush)::before{ inset:0; background: radial-gradient(ellipse 70% 55% at 82% -8%, rgba(255,255,255,.42) 0%, transparent 58%), linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 45%); animation:periodNoonShimmer 4.8s ease-in-out infinite alternate; } .daily-card.period-noon:not(.brush)::after{ width:72px;height:72px;right:-10px;top:-16px;border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(180,220,255,.28) 38%, transparent 68%); box-shadow:0 0 28px 8px rgba(160,210,255,.18); animation:periodGlowPulse 3.8s ease-in-out infinite alternate; } /* 午后：暖阳下沉 + 金雾漂移 */ .daily-card.period-afternoon:not(.brush)::before{ inset:0; background: radial-gradient(ellipse 90% 70% at 108% 18%, rgba(255,220,140,.38) 0%, transparent 58%), radial-gradient(ellipse 60% 50% at -10% 90%, rgba(255,180,80,.18) 0%, transparent 60%); animation:periodAfternoonHaze 7s ease-in-out infinite alternate; } .daily-card.period-afternoon:not(.brush)::after{ width:90px;height:90px;right:-22px;top:8%;border-radius:50%; background:radial-gradient(circle, rgba(255,230,160,.62) 0%, rgba(255,160,60,.22) 40%, transparent 70%); animation:periodGlowPulse 5.6s ease-in-out infinite alternate; } /* 傍晚：暮光晕 + 细碎亮点 */ .daily-card.period-evening:not(.brush)::before{ inset:0; background-image: radial-gradient(ellipse 80% 70% at 92% 0%, rgba(210,180,255,.32) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 0% 110%, rgba(80,40,160,.28) 0%, transparent 58%), radial-gradient(1.2px 1.2px at 22% 24%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 68% 18%, rgba(230,210,255,.65), transparent), radial-gradient(1.3px 1.3px at 84% 62%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 40% 78%, rgba(210,190,255,.5), transparent); animation:periodEveningSpark 5.4s ease-in-out infinite alternate; } .daily-card.period-evening:not(.brush)::after{ width:78px;height:78px;right:-16px;top:-20px;border-radius:50%; background:radial-gradient(circle, rgba(230,200,255,.5) 0%, rgba(140,100,255,.2) 42%, transparent 70%); animation:periodGlowPulse 4.6s ease-in-out infinite alternate; } /* 深夜：星点微闪（无流星） */ .daily-card.period-night:not(.brush)::before{ inset:0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.95), transparent), radial-gradient(1px 1px at 28% 42%, rgba(200,220,255,.85), transparent), radial-gradient(1.4px 1.4px at 48% 12%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 62% 55%, rgba(180,210,255,.75), transparent), radial-gradient(1.3px 1.3px at 78% 28%, rgba(255,255,255,.88), transparent), radial-gradient(1px 1px at 88% 68%, rgba(190,220,255,.7), transparent), radial-gradient(1.1px 1.1px at 18% 72%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 38% 88%, rgba(170,200,255,.65), transparent), radial-gradient(1.5px 1.5px at 72% 82%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 55% 38%, rgba(210,230,255,.7), transparent), radial-gradient(1.2px 1.2px at 8% 52%, rgba(255,255,255,.75), transparent), radial-gradient(1px 1px at 92% 15%, rgba(180,210,255,.8), transparent); animation:nightStarTwinkle 3.6s ease-in-out infinite alternate; opacity:.92; } @keyframes nightStarTwinkle{ 0%{opacity:.55;filter:brightness(.9);} 50%{opacity:.95;filter:brightness(1.15);} 100%{opacity:.7;filter:brightness(1);} } @keyframes periodGlowPulse{ 0%{opacity:.55;transform:scale(.92);} 100%{opacity:1;transform:scale(1.08);} } @keyframes periodMorningMist{ 0%{opacity:.55;transform:translateY(8px);} 100%{opacity:1;transform:translateY(-4px);} } @keyframes periodNoonShimmer{ 0%{opacity:.5;} 100%{opacity:1;} } @keyframes periodAfternoonHaze{ 0%{opacity:.55;transform:translateX(-6px);} 100%{opacity:1;transform:translateX(8px);} } @keyframes periodEveningSpark{ 0%{opacity:.6;filter:brightness(.9);} 100%{opacity:1;filter:brightness(1.18);} } .daily-card.ne-skin{ background:linear-gradient(135deg,#E84545 0%,#F06A6A 55%,#F5A0A0 100%);} .daily-card.daily30.ne-skin{ background:linear-gradient(135deg,#C62828 0%,#E53935 50%,#EF9A9A 100%);} .daily-card .dc-body{flex:1;padding:16px 12px 14px 16px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;z-index:1;} .daily-card .dc-title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.2px;line-height:1.28; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .daily-card .dc-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:6px;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .daily-card .dc-play{width:38px;height:38px;min-width:38px;min-height:38px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;background:#fff;color:#111; display:flex;align-items:center;justify-content:center;margin-top:12px;box-sizing:border-box; box-shadow:0 4px 16px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.5) inset;border:none; transition:background .2s var(--ease), color .2s, transform .35s var(--ease-spring), box-shadow .25s;} .daily-card .dc-play svg{width:15px;height:15px;margin-left:1.5px;} .daily-card .dc-play.is-playing{background:#fff;color:#111;} .daily-card .dc-play.is-playing svg{margin-left:0;} .daily-card .dc-art{width:42%;max-width:130px;position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center;padding:12px 10px 12px 0;} .daily-card .dc-art-inner{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.30);background:#1c1c1e;position:relative;} .daily-card .dc-art-inner img{width:100%;height:100%;object-fit:cover;display:block;} .daily-card .dc-art-inner img.img-err{opacity:0;} .daily-card .dc-vinyl{position:absolute;right:-18%;top:50%;width:70%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 40% 40%,#444 0%,#111 60%,#000 100%); transform:translateY(-50%);z-index:0;opacity:.9;} .daily-foot{margin-top:12px;padding:0 2px;overflow:hidden;} .daily-foot-track{display:flex;gap:11px;will-change:transform;} .daily-foot .df-item{flex:0 0 calc((100% - 11px) * 0.48);min-width:150px;max-width:240px;} .daily-foot .df-name{font-size:13px;color:var(--text-0);font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .daily-foot .df-sub{font-size:12px;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media (max-width:860px){ .daily-foot-track{gap:10px;} .daily-foot .df-item{flex-basis:calc((100% - 10px) * 0.5);min-width:140px;} } @media (min-width:900px){ .daily-foot-track{display:grid;grid-template-columns:1fr 1fr 1fr;transform:none!important;} .daily-foot .df-item{flex:unset;width:auto;min-width:0;max-width:none;} } @media (max-width:860px){ .daily-row{gap:10px;} .daily-card{min-height:132px;border-radius:14px;flex-basis:calc((100% - 10px) * 0.5);min-width:140px;} .daily-card .dc-title{font-size:16px;} .daily-card .dc-sub{font-size:11px;} .daily-card .dc-play{width:32px;height:32px;} .daily-card .dc-art{width:40%;max-width:110px;} } .hero{position:relative;height:340px;border-radius:var(--radius-l);overflow:hidden;margin-top:4px;touch-action:pan-y; box-shadow:0 12px 40px rgba(0,0,0,.35);} .hero-track{position:absolute;inset:0;display:flex;transition:transform .35s var(--ease);will-change:transform;} .hero-slide{position:relative;flex:0 0 100%;height:100%;background-size:cover;background-position:center;background-color:var(--bg-2);} .hero-slide::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(8,12,10,.92) 0%,rgba(8,12,10,.35) 55%,rgba(8,12,10,.1) 100%);} .hero-info{position:absolute;left:36px;bottom:32px;right:36px;z-index:2;} .hero-tag{display:inline-block;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.18);color:#fff; font-size:11px;font-weight:600;margin-bottom:12px;backdrop-filter:blur(8px);} .hero-title{font-size:32px;font-weight:700;margin:0 0 8px;letter-spacing:-0.5px;text-shadow:0 2px 16px rgba(0,0,0,.45);max-width:60%;} .hero-desc{font-size:13px;color:var(--text-1);max-width:52%;line-height:1.6;margin-bottom:16px; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .hero-play{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:980px; background:rgba(255,255,255,.95);border:none;color:#111; font-size:14px;font-weight:600;letter-spacing:-0.2px; box-shadow:none; transition:transform .28s var(--ease-spring), opacity .2s;} .hero-play:hover{box-shadow:none;opacity:.96;} .hero-play:active{transform:scale(.96);opacity:.92;} .hero-play svg{width:14px;height:14px;} /* 播放全部 / hero 播放：无阴影 */ .hero-play,.detail-play-all,.detail-hero .detail-play-all, #playAllSinger,#playAllDetail{ box-shadow:none!important; } .hero-play:hover,.detail-play-all:hover,.detail-hero .detail-play-all:hover{ box-shadow:none!important; } .hero-dots{position:absolute;right:36px;bottom:34px;z-index:2;display:flex;gap:6px;} .hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .3s var(--ease);} .hero-dot.active{width:6px;border-radius:50%;background:#fff;transform:scale(1.25);} .hscroll{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding-bottom:6px;margin:0; width:100%;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;} .hscroll::-webkit-scrollbar{display:none;} .card{flex:0 0 auto;width:150px;cursor:pointer;} .card-cover{position:relative;width:150px;height:150px;border-radius:14px;overflow:hidden; background:linear-gradient(145deg,#2c2c2e,#1c1c1e);transition:transform .22s var(--ease); /* 阴影减半，封面更透亮 */ box-shadow:0 4px 14px rgba(0,0,0,.11);} .card-cover::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,") center/28% no-repeat;pointer-events:none;z-index:0;} .card:hover .card-cover{transform:scale(1.02);} .card-cover img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;background:transparent;} .card-cover img.img-err{opacity:0;} .grid-cols .card{width:100%;} .grid-cols .card-cover{width:100%;height:auto;aspect-ratio:1/1;} .card-cover .play-fab{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%; background:#fff;display:flex;align-items:center;justify-content:center;opacity:0; transform:scale(.7);transition:transform .4s var(--ease-spring), opacity .25s var(--ease); box-shadow:0 6px 18px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.5) inset;} .card:hover .play-fab{opacity:1;transform:scale(1);} .card-cover .play-fab svg{width:14px;height:14px;color:#000;margin-left:1px;} .card-cover .plays{position:absolute;left:8px;top:8px;font-size:11px;background:rgba(0,0,0,.45); backdrop-filter:blur(10px);padding:3px 8px;border-radius:100px;display:flex;align-items:center;gap:3px;font-weight:500;} .card-cover .plays svg{width:9px;height:9px;} .card-name{font-size:13px;margin-top:8px;line-height:1.4;color:var(--text-0);font-weight:500; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card-sub{font-size:11.5px;color:var(--text-2);margin-top:2px;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .card.round .card-cover{border-radius:50%;} .singer-hscroll{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px;margin:0;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;} .singer-hscroll::-webkit-scrollbar{display:none;} .singer-chip{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;cursor:pointer;text-align:center;} .singer-chip-avatar{width:68px;height:68px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#2c2c2e,#1c1c1e);box-shadow:0 4px 14px rgba(0,0,0,.22);border:1.5px solid rgba(255,255,255,.1);} .singer-chip-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .singer-chip-name{font-size:12px;color:var(--text-0);margin-top:8px;line-height:1.3;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;} .singer-chip:active{opacity:.85;transform:scale(.96);} @media (max-width:860px){ .singer-chip{width:70px;} .singer-chip-avatar{width:62px;height:62px;} .singer-chip-name{font-size:11px;} } .rank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .rank-card{display:flex;align-items:center;gap:13px;padding:12px;border-radius:var(--radius-m);cursor:pointer; transition:background .2s var(--ease);} .rank-card:hover{background:var(--glass);} .rank-cover{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;position:relative;background:linear-gradient(145deg,#1a2a22,#0d1512);} .rank-cover img{width:100%;height:100%;object-fit:cover;background:transparent;} .rank-name{font-size:13.5px;font-weight:600;} .rank-desc{font-size:11px;color:var(--text-2);margin-top:3px;} .rank-num{font-family:var(--font-num);font-size:15px;font-weight:800;color:var(--text-2);width:20px;text-align:center;flex-shrink:0;} .rank-num.top1{color:var(--green);} .rank-num.top2{color:#ff9f0a;} .rank-num.top3{color:#ffd60a;} .song-list{display:flex;flex-direction:column;} .song-row{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;cursor:pointer;transition:background .16s;-webkit-tap-highlight-color:transparent;} .song-row.playing{background:rgba(var(--accent-rgb),.1);} /* 仅鼠标精细指针显示 hover；触摸端禁止粘住选中条，只保留 .playing */ @media (hover: hover) and (pointer: fine){ .song-row:hover{background:rgba(255,255,255,.06);} .song-row.playing:hover{background:rgba(var(--accent-rgb),.14);} } @media (hover: none), (pointer: coarse){ .song-row:hover:not(.playing), .song-row:active:not(.playing), .song-row:focus:not(.playing){ background:transparent!important; box-shadow:none!important; } } html:not(.tv-mode) .song-row:active:not(.playing){ background:transparent; } .song-row.playing .song-title{color:var(--green);} .song-idx{width:22px;text-align:center;font-size:15px;color:var(--text-2);font-family:var(--font-num);flex-shrink:0;font-weight:500;} .song-row.playing .song-idx{color:var(--green);} /* 手机端点按不保留选中/焦点框，只保留 .playing 当前播放高亮 */ html:not(.tv-mode) .song-row:focus, html:not(.tv-mode) .song-row:focus-visible{ outline:none;box-shadow:none;background:transparent; } html:not(.tv-mode) .song-row.playing:focus, html:not(.tv-mode) .song-row.playing:focus-visible{ background:rgba(var(--accent-rgb),.1); } .song-cover{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-2);} .song-cover img{width:100%;height:100%;object-fit:cover;} .song-meta{flex:1;min-width:0;} .song-title{font-size:16px;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;font-weight:400;letter-spacing:-0.2px;} .song-sub{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;} .tag-sq{font-size:9px;padding:1px 5px;border-radius:4px;border:1px solid rgba(var(--accent-rgb),.45);color:var(--green);flex-shrink:0;font-weight:600;} .tag-vip{font-size:9px;padding:1px 5px;border-radius:4px;flex-shrink:0;font-weight:700;letter-spacing:0.02em; background:var(--gold);color:#1c1200;} .tag-vip.vip-qq,.tag-vip[data-src="qq"]{ background:linear-gradient(135deg,#3ad48a,#28a86a);color:#fff;} .tag-vip.vip-kuwo,.tag-vip[data-src="kuwo"]{ background:linear-gradient(135deg,#ffc43a,#e09a00);color:#1c1200;} .tag-vip.vip-netease,.tag-vip[data-src="netease"]{ background:linear-gradient(135deg,#f05555,#d32f2f);color:#fff;} .tag-vip.vip-kugou,.tag-vip[data-src="kugou"], .tag-vip.vip-migu,.tag-vip[data-src="migu"]{ background:linear-gradient(135deg,#33b8ff,#0088cc);color:#fff;} .tag-vip.vip-bilibili,.tag-vip[data-src="bilibili"]{ background:linear-gradient(135deg,#ff3355,#cc0029);color:#fff;} .tag-vip.vip-theme{ background:rgba(var(--accent-rgb),0.92);color:#fff;} .song-dur{font-size:13px;color:var(--text-2);font-family:var(--font-num);flex-shrink:0;min-width:42px;margin-left:auto;text-align:right;padding-right:2px;} .song-actions{display:none!important;} .grid-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 11px;} .grid-cols .card{width:100%;} .grid-cols .card-cover{width:100%;height:auto;aspect-ratio:1/1;} /* 竖版固定三列三排；横版/宽屏固定七列三排 */ .grid-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 11px;} @media (min-width:900px){ .grid-cols, html.fp-land .grid-cols, html.is-landscape .grid-cols{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px 12px; } } @media (orientation:landscape) and (min-width:700px){ .grid-cols, html.fp-land .grid-cols, html.is-landscape .grid-cols{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px 12px; } } @media (max-width:699px){ .grid-cols, html.fp-land .grid-cols, html.is-landscape .grid-cols{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 11px!important; } } .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px;color:var(--text-2);gap:10px;text-align:center;} .empty-state svg{width:40px;height:40px;opacity:.4;} .empty-state .e-title{font-size:13.5px;color:var(--text-1);} .empty-state .e-sub{font-size:11.5px;} /* 歌词区空状态：上下居中，保证纯音乐提示可见 */ #lyricsList:has(.lyric-empty), #lyricsList:has(.lyric-pure), #lyricsList.is-lyric-empty{ min-height:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; position:relative; } /* 仅在歌词 Tab 可见时做居中；切到播放列表时由 switchFpTab 设 display:none，切勿 !important 覆盖 */ #lyricsWrap:has(.lyric-empty), #lyricsWrap:has(.lyric-pure), #lyricsWrap.is-lyric-empty{ flex-direction:column; align-items:stretch; justify-content:center; min-height:0; } #lyricsWrap.is-lyric-empty #lyricsList, #lyricsWrap:has(.lyric-empty) #lyricsList, #lyricsWrap:has(.lyric-pure) #lyricsList{ flex:1 1 auto; min-height:120px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; } #lyricsList .empty-state.lyric-empty, #lyricsList .empty-state.lyric-pure, #lyricsList .empty-state.lyric-loading{ flex:1 1 auto; width:100%; min-height:160px; padding:32px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; opacity:1!important; visibility:visible!important; } /* 纯音乐/空歌词提示：默认跟随亮色主题歌词色（黑灰） */ #lyricsList .empty-state.lyric-pure .e-title, #fullPlayer .empty-state.lyric-pure .e-title, #fullPlayer .empty-state.lyric-empty .e-title{ font-size:18px!important; font-weight:600!important; letter-spacing:0.06em; color:#1c1c1e!important; opacity:1!important; } #lyricsList .empty-state.lyric-empty .e-title, #lyricsList .empty-state.lyric-loading .e-title{ font-size:16px!important; font-weight:500!important; color:rgba(60,60,67,.72)!important; opacity:1!important; } #lyricsList .empty-state.lyric-empty .e-sub, #lyricsList .empty-state.lyric-loading .e-sub, #fullPlayer .empty-state.lyric-empty .e-sub, #fullPlayer .empty-state.lyric-pure .e-sub{ color:rgba(60,60,67,.45)!important; font-size:13px; margin-top:6px; } #fullPlayer .empty-state{ color:rgba(60,60,67,.45)!important; } #fullPlayer .empty-state .e-title{ color:rgba(60,60,67,.78)!important; } /* 暗色：与歌词 active 同系白字 */ html[data-mode="dark"] #fullPlayer .empty-state, html[data-mode="dark"] #lyricsList .empty-state{ color:rgba(235,235,245,.4)!important; } html[data-mode="dark"] #fullPlayer .empty-state .e-title, html[data-mode="dark"] #fullPlayer .empty-state.lyric-pure .e-title, html[data-mode="dark"] #fullPlayer .empty-state.lyric-empty .e-title, html[data-mode="dark"] #lyricsList .empty-state.lyric-pure .e-title, html[data-mode="dark"] #lyricsList .empty-state.lyric-empty .e-title, html[data-mode="dark"] #lyricsList .empty-state.lyric-loading .e-title{ color:rgba(255,255,255,.88)!important; } html[data-mode="dark"] #fullPlayer .empty-state .e-sub, html[data-mode="dark"] #fullPlayer .empty-state.lyric-empty .e-sub, html[data-mode="dark"] #fullPlayer .empty-state.lyric-pure .e-sub, html[data-mode="dark"] #lyricsList .empty-state.lyric-empty .e-sub, html[data-mode="dark"] #lyricsList .empty-state.lyric-loading .e-sub{ color:rgba(235,235,245,.45)!important; } /* 霓虹：与歌词高亮同系青色 */ html[data-mode="neon"] #fullPlayer .empty-state, html[data-mode="neon"] #lyricsList .empty-state{ color:rgba(180,210,240,.45)!important; } html[data-mode="neon"] #fullPlayer .empty-state .e-title, html[data-mode="neon"] #fullPlayer .empty-state.lyric-pure .e-title, html[data-mode="neon"] #fullPlayer .empty-state.lyric-empty .e-title, html[data-mode="neon"] #lyricsList .empty-state.lyric-pure .e-title, html[data-mode="neon"] #lyricsList .empty-state.lyric-empty .e-title, html[data-mode="neon"] #lyricsList .empty-state.lyric-loading .e-title{ color:#00f6ff!important; text-shadow:0 0 14px rgba(0,246,255,.45); } html[data-mode="neon"] #fullPlayer .empty-state .e-sub, html[data-mode="neon"] #fullPlayer .empty-state.lyric-empty .e-sub, html[data-mode="neon"] #fullPlayer .empty-state.lyric-pure .e-sub, html[data-mode="neon"] #lyricsList .empty-state.lyric-empty .e-sub, html[data-mode="neon"] #lyricsList .empty-state.lyric-loading .e-sub{ color:rgba(180,210,240,.55)!important; } /* 骨架屏：半透明玻璃块，贴近歌单详情 song-row / hero 结构 */ .skeleton{ background:linear-gradient(105deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.22) 42%, rgba(255,255,255,0.10) 78%); background-size:220% 100%; animation:shimmer 1.55s ease-in-out infinite; border-radius:8px; border:none; box-shadow:none; opacity:.78; } @keyframes shimmer{ 0%{background-position:160% 0;} 100%{background-position:-60% 0;} } /* 默认/浅色：偏纸感的半透明深灰块，不抢主页渐变 */ html[data-mode="light"] .skeleton, html:not([data-mode]) .skeleton{ background:linear-gradient(105deg, rgba(40,32,40,0.05) 0%, rgba(40,32,40,0.11) 45%, rgba(40,32,40,0.05) 80%)!important; border:none!important; opacity:.9!important; } html[data-mode="paper"] .skeleton{ background:linear-gradient(105deg, rgba(80,60,40,0.05) 0%, rgba(80,60,40,0.10) 45%, rgba(80,60,40,0.05) 80%)!important; border:none!important; opacity:.88!important; } html[data-mode="dark"] .skeleton{ background:linear-gradient(105deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.05) 80%)!important; border:none!important; opacity:.75!important; } html[data-mode="neon"] .skeleton{ background:linear-gradient(105deg, rgba(0,246,255,0.06) 0%, rgba(255,43,214,0.10) 48%, rgba(0,246,255,0.06) 100%)!important; border:none!important; opacity:.7!important; box-shadow:0 0 12px rgba(0,246,255,0.06)!important; } .detail-skeleton{ /* 与正式 detail-hero 对齐：避开状态栏 + 顶部返回区 */ padding:calc(54px + var(--safe-t)) 0 24px; pointer-events:none; box-sizing:border-box; } .detail-sk-hero{ display:flex;gap:16px;align-items:flex-end; padding:18px 4px 20px;margin-bottom:8px; } .detail-sk-cover{ width:120px;height:120px;border-radius:16px;flex-shrink:0; box-shadow:0 10px 24px rgba(0,0,0,.14); opacity:.85; } .detail-sk-meta{flex:1;min-width:0;padding-bottom:4px;} .detail-sk-meta .skeleton{opacity:.75;} .detail-sk-list{margin-top:4px;} .detail-sk-list .song-row{ pointer-events:none; opacity:.72; background:transparent!important; } .detail-sk-list .song-row + .song-row{border-top:none;} .detail-sk-list .song-cover.skeleton{ border-radius:10px; opacity:.8; } .detail-sk-list .song-meta .skeleton{opacity:.7;} @media (max-width:380px){ .detail-sk-cover{width:96px;height:96px;border-radius:14px;} .detail-sk-hero{gap:12px;} } /* 列表骨架行：贴近真实 song-row 间距与封面尺寸 */ .sk-song-row{ display:flex;align-items:center;gap:12px; padding:10px 4px; pointer-events:none; } .sk-song-cover{ width:48px;height:48px;border-radius:10px;flex-shrink:0; } .sk-song-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .sk-song-line{height:12px;border-radius:6px;max-width:100%;} .sk-song-line.short{height:10px;width:32%;} .sk-song-line.mid{width:48%;} .sk-song-line.long{width:68%;} #playerBar{ position:relative;z-index:20;flex-shrink:0;display:flex;align-items:center;gap:12px; padding:12px 16px 12px; margin:0 12px calc(10px + var(--safe-b));width:auto; border-radius:999px; border:1px solid rgba(255,255,255,.16); border-top:1px solid rgba(255,255,255,.20); background:rgba(28,28,32,0.55); backdrop-filter:blur(36px) saturate(1.4) brightness(1.02); -webkit-backdrop-filter:blur(36px) saturate(1.4) brightness(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.10) inset; transform:translateY(100%); transition:transform .4s var(--ease); max-width:100%;overflow:visible;box-sizing:border-box; min-height:64px; isolation:isolate; } #playerBar > *{position:relative;z-index:1;} #playerBar::before{ content:""; position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(var(--accent-rgb),0.12) 50%, rgba(255,255,255,0.04) 100%); background-size:100% 100%; opacity:.85; animation:none; } @keyframes pbBarBreathe{ 0%,100%{ background-position:0% 40%; opacity:.55; filter:saturate(.95) brightness(.98); } 50%{ background-position:100% 60%; opacity:.82; filter:saturate(1.15) brightness(1.06); } } @media (prefers-reduced-motion: reduce){ #playerBar::before{animation:none!important;opacity:.7;filter:none;background-position:50% 50%;} } /* #playerBar.show transform 由下方 var(--pb-pop-*) 统一控制 */ #playerBar{ position:fixed!important; left:50%!important; right:auto!important; bottom:calc(12px + var(--safe-b))!important; z-index:30!important; flex-shrink:0; display:flex!important; justify-content:flex-start!important; align-items:center!important; gap:10px!important; padding:6px 12px 6px 4px!important; min-height:52px!important; height:52px!important; width:min(400px, calc(100% - 36px))!important; max-width:min(400px, calc(100% - 36px))!important; margin:0!important; box-sizing:border-box!important; overflow:visible!important; pointer-events:none; opacity:0; transform:translate(-50%, 140%)!important; transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s cubic-bezier(0.22, 1, 0.36, 1)!important; } /* iOS only：迷你条贴底（对齐 Apple Music dock）；安卓保持上面的 12px+safe-b，不过低 */ html.is-ios #playerBar, html.is-ios #playerBar.pb-collapsed.show{ bottom:calc(4px + min(var(--safe-b), 10px))!important; } #playerBar.show{ pointer-events:auto; opacity:1; /* 用变量承接弹入位移，避免 !important 把 keyframes 压死 */ transform:translate(-50%, var(--pb-pop-y, 0px)) scale(var(--pb-pop-s, 1))!important; } #playerBar.show.pb-from-full{ transition: transform .48s cubic-bezier(0.34, 1.45, 0.64, 1), opacity .32s ease!important; } /* 迷你条：右滑收起为右下角转盘 */ #playerBar{ transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s cubic-bezier(0.22, 1, 0.36, 1), width .45s cubic-bezier(0.22, 1, 0.36, 1), max-width .45s cubic-bezier(0.22, 1, 0.36, 1), left .45s cubic-bezier(0.22, 1, 0.36, 1), right .45s cubic-bezier(0.22, 1, 0.36, 1), border-radius .4s cubic-bezier(0.22, 1, 0.36, 1), padding .4s cubic-bezier(0.22, 1, 0.36, 1), min-height .4s cubic-bezier(0.22, 1, 0.36, 1), height .4s cubic-bezier(0.22, 1, 0.36, 1)!important; } #playerBar .pb-meta, #playerBar .pb-play, #playerBar .pb-list-btn, #playerBar .pb-mini-progress{ transition: opacity .28s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1), max-width .35s ease; } #playerBar.pb-collapsed.show{ left:50%!important; right:auto!important; bottom:calc(14px + var(--safe-b))!important; width:96px!important; max-width:96px!important; min-width:96px!important; height:96px!important; min-height:96px!important; padding:0!important; gap:0!important; border-radius:50%!important; justify-content:center!important; align-items:center!important; transform:translate(-50%, var(--pb-pop-y, 0px)) scale(var(--pb-pop-s, 1))!important; /* visible：避免转盘阴影/沟纹被裁切 */ overflow:visible!important; /* 收起后去掉条本身的玻璃底，避免转盘外漏一圈 */ background:transparent!important; border:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } #playerBar.pb-collapsed.show::before{ display:none!important; opacity:0!important; } #playerBar.pb-collapsed .pb-meta, #playerBar.pb-collapsed .pb-play, #playerBar.pb-collapsed .pb-list-btn, #playerBar.pb-collapsed .pb-mini-progress{ opacity:0!important; pointer-events:none!important; max-width:0!important; width:0!important; min-width:0!important; padding:0!important; margin:0!important; overflow:hidden!important; border:none!important; transform:translateX(12px)!important; } #playerBar.pb-collapsed .pb-cover{ margin:0!important; width:96px!important; height:96px!important; left:auto!important; flex-shrink:0!important; border-radius:50%!important; overflow:hidden!important; box-shadow: 0 12px 32px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.16) inset!important; cursor:pointer; } #playerBar.pb-collapsed .pb-cover.spin{ animation: pbDiscSpin 8s linear infinite!important; } #playerBar .pb-cover{ display:block!important; position:relative!important; left:auto!important; top:auto!important; width:76px!important; height:76px!important; margin: -14px 0 -14px -19px!important; border-radius:50%!important; flex-shrink:0!important; overflow:hidden!important; cursor:pointer; z-index:2; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.16) 0%, transparent 28%), radial-gradient(circle at 70% 72%, rgba(255,255,255,.04) 0%, transparent 32%), radial-gradient(circle at 50% 50%, #2a2a30 0%, #1a1a20 38%, #121216 62%, #0a0a0e 82%, #060608 100%)!important; box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12), 0 0 0 2px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.45)!important; animation:pbDiscSpin 18s linear infinite; animation-play-state:paused; will-change:transform; } #playerBar .pb-cover::before{ content:""; position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2; background: repeating-radial-gradient(circle at center, transparent 0 1.5px, rgba(255,255,255,.045) 1.5px 2px), repeating-radial-gradient(circle at center, transparent 0 3.5px, rgba(0,0,0,.28) 3.5px 4px), repeating-radial-gradient(circle at center, transparent 0 7px, rgba(255,255,255,.03) 7px 7.5px); -webkit-mask:radial-gradient(circle at center, transparent 0 28%, #000 29% 96%, transparent 100%); mask:radial-gradient(circle at center, transparent 0 28%, #000 29% 96%, transparent 100%); opacity:.95; } #playerBar .pb-cover::after{ content:""!important; display:block!important; position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4; background: conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(255,255,255,.0) 18deg, rgba(255,255,255,.14) 38deg, rgba(255,255,255,.04) 52deg, transparent 70deg, transparent 200deg, rgba(255,255,255,.06) 230deg, transparent 260deg, transparent 360deg), radial-gradient(circle at center, transparent 0 47%, rgba(255,255,255,.18) 48.2%, transparent 49.5%, transparent 100%); opacity:.85; mix-blend-mode:screen; } #playerBar .pb-cover img{ position:absolute!important; left:50%!important;top:50%!important; width:56%!important;height:56%!important; margin:0!important; transform:translate(-50%,-50%)!important; object-fit:cover!important; border-radius:50%!important; border:2px solid rgba(255,255,255,.14)!important; z-index:3!important; background: radial-gradient(circle at 40% 35%, #3a3a42 0%, #1e1e24 100%)!important; opacity:1!important; display:block!important; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 3px rgba(18,18,22,.95), inset 0 1px 0 rgba(255,255,255,.12); } #playerBar .pb-cover img.img-err{ opacity:0!important; } #playerBar .pb-cover.spin{ animation-play-state:running!important; } #playerBar .pb-cover.spin img{ animation:none!important; } @keyframes pbDiscSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } #playerBar .pb-meta{ display:flex!important; flex-direction:column!important; justify-content:center!important; flex:1 1 0!important; min-width:0!important; max-width:none!important; padding:0 6px 0 6px!important; overflow:hidden!important; cursor:pointer; position:relative;z-index:3; height:100%; } #playerBar .pb-meta-info{ display:flex;flex-direction:column;justify-content:center; min-width:0;overflow:hidden; transition:opacity .35s ease, transform .35s ease; } #playerBar .pb-meta-info.is-hidden{ position:absolute;opacity:0;pointer-events:none; transform:translateY(-6px); } #playerBar .pb-lyric{ display:none; font-size:14px;font-weight:600;line-height:1.35; color:#fff; text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-shadow:0 1px 4px rgba(0,0,0,.55); letter-spacing:-0.1px; width:100%; } #playerBar .pb-lyric.is-on{ display:block; animation:pbLyricIn .35s ease both; } #playerBar .pb-lyric .pb-lyric-tr{ display:block;font-size:12px;font-weight:400; color:rgba(255,255,255,.72);margin-top:2px; text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } @keyframes pbLyricIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } #playerBar .pb-title{ display:block!important; font-size:14px!important; font-weight:600!important; color:#fff!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-shadow:0 1px 3px rgba(0,0,0,.5)!important; line-height:1.25!important; } #playerBar .pb-artist{ display:block!important; font-size:12px!important; color:rgba(255,255,255,.8)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; margin-top:2px!important; text-shadow:0 1px 2px rgba(0,0,0,.45)!important; line-height:1.2!important; } #playerBar .pb-play{ width:40px!important;height:40px!important; margin:0 0 0 auto!important; flex-shrink:0!important; position:relative;z-index:3; } #playerBar .pb-play svg{width:17px!important;height:17px!important;} #playerBar .pb-list-btn{ width:36px!important;height:36px!important; color:#fff!important; background:rgba(255,255,255,.12)!important; border-radius:50%!important; flex-shrink:0!important; position:relative;z-index:3; } #playerBar .pb-list-btn svg{width:18px!important;height:18px!important;color:#fff!important;} #playerBar .pb-mini-progress{left:12px;right:12px;border-radius:999px;} #playerBar [hidden]{display:none!important;} @media (max-width:400px){ #playerBar{ width:min(100%, calc(100% - 24px))!important; max-width:calc(100% - 24px)!important; gap:10px!important; padding:5px 10px 5px 4px!important; height:50px!important; min-height:50px!important; } #playerBar .pb-cover{ width:68px!important;height:68px!important; margin:-12px 0 -12px -22px!important; } #playerBar .pb-title{font-size:13px!important;} #playerBar .pb-artist{font-size:11px!important;} #playerBar .pb-play{width:36px!important;height:36px!important;} #playerBar .pb-list-btn{width:34px!important;height:34px!important;} } /* 横版：迷你播放器放大 */ @media (orientation:landscape), (max-height:520px) and (min-width:620px){ #playerBar{ height:66px!important; min-height:66px!important; width:min(520px, calc(100% - 48px))!important; max-width:min(520px, calc(100% - 48px))!important; gap:12px!important; padding:8px 16px 8px 6px!important; bottom:calc(14px + var(--safe-b))!important; } #playerBar .pb-cover{ width:96px!important; height:96px!important; margin:-18px 0 -18px -28px!important; } #playerBar .pb-title{font-size:16px!important;} #playerBar .pb-artist{font-size:13px!important;} #playerBar .pb-lyric{font-size:15px!important;} #playerBar .pb-lyric .pb-lyric-tr{font-size:13px!important;} #playerBar .pb-play{ width:48px!important; height:48px!important; } #playerBar .pb-play svg{width:20px!important;height:20px!important;} #playerBar .pb-list-btn{ width:42px!important; height:42px!important; } #playerBar .pb-list-btn svg{width:20px!important;height:20px!important;} } /* JS 真横屏 class 兜底（与 orientation 媒体查询互补） */ html.fp-land #playerBar{ height:66px!important; min-height:66px!important; width:min(520px, calc(100% - 48px))!important; max-width:min(520px, calc(100% - 48px))!important; gap:12px!important; padding:8px 16px 8px 6px!important; bottom:calc(14px + var(--safe-b))!important; } html.fp-land #playerBar .pb-cover{ width:96px!important; height:96px!important; margin:-18px 0 -18px -28px!important; } html.fp-land #playerBar .pb-title{font-size:16px!important;} html.fp-land #playerBar .pb-artist{font-size:13px!important;} /* iOS 迷你条底部：压过横屏/媒体查询里的 12/14px+safe-b（安卓不受影响） */ html.is-ios #playerBar, html.is-ios #playerBar.show, html.is-ios #playerBar.pb-collapsed.show, html.is-ios.fp-land #playerBar{ bottom:calc(4px + min(var(--safe-b), 10px))!important; } html.fp-land #playerBar .pb-lyric{font-size:15px!important;} html.fp-land #playerBar .pb-play{width:48px!important;height:48px!important;} html.fp-land #playerBar .pb-play svg{width:20px!important;height:20px!important;} html.fp-land #playerBar .pb-list-btn{width:42px!important;height:42px!important;} html.fp-land #playerBar .pb-list-btn svg{width:20px!important;height:20px!important;} #app > #viewport .view, .view{ padding-bottom:calc(92px + var(--safe-b))!important; } @media (max-width:860px){ .view{padding-bottom:calc(88px + var(--safe-b))!important;} } html.tv-mode .view{padding-bottom:calc(102px + var(--safe-b))!important;} .queue-sheet-mask{ position:fixed;inset:0;z-index:40; background:rgba(0,0,0,.45); opacity:0;pointer-events:none; transition:opacity .28s ease; } .queue-sheet-mask.show{opacity:1;pointer-events:auto;} .queue-sheet{ position:fixed;left:0;right:0;bottom:0;z-index:41; max-height:min(72vh, 560px); background:rgba(28,28,32,.96); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); border-radius:18px 18px 0 0; border:1px solid rgba(255,255,255,.12); border-bottom:none; box-shadow:0 -12px 40px rgba(0,0,0,.4); transform:translateY(105%); transition:transform .38s cubic-bezier(0.22,1,0.36,1); display:flex;flex-direction:column; padding:0 0 calc(12px + var(--safe-b)); color:#fff; pointer-events:none; touch-action:pan-y; will-change:transform; } .queue-sheet.show{transform:translateY(0);pointer-events:auto;} .queue-sheet.dragging{transition:none!important;} .queue-sheet-handle{ width:36px;height:4px;border-radius:4px; background:rgba(255,255,255,.28); margin:10px auto 6px;flex-shrink:0; position:relative; } .queue-sheet-handle::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:80px;height:28px; } .queue-sheet-head{ display:flex;align-items:center;gap:10px; padding:6px 16px 12px;flex-shrink:0; } .queue-sheet-title{ flex:1;font-size:16px;font-weight:700;letter-spacing:-0.2px; } .queue-sheet-title span{font-weight:500;color:rgba(235,235,245,.55);font-size:14px;margin-left:4px;} .queue-sheet-mode,.queue-sheet-close{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:rgba(235,235,245,.85);background:rgba(255,255,255,.08); font-size:22px;line-height:1;border:none;cursor:pointer; } .queue-sheet-mode svg{width:18px;height:18px;} .queue-sheet-list{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:0 8px 8px;min-height:0; } .queue-sheet-row{ display:flex;align-items:center;gap:10px; padding:12px 10px;border-radius:12px;cursor:pointer; transition:background .15s; -webkit-tap-highlight-color:transparent; } /* 仅鼠标精细指针才显示 hover；触摸不因轻触残留选中条 */ @media (hover: hover) and (pointer: fine){ .queue-sheet-row:hover{background:rgba(255,255,255,.06);} } html:not(.tv-mode) .queue-sheet-row:active:not(.playing){background:transparent;} .queue-sheet-row.playing{color:var(--green);} .queue-sheet-row .qs-idx{width:24px;text-align:center;font-size:13px;color:rgba(235,235,245,.4);flex-shrink:0;} .queue-sheet-row.playing .qs-idx{color:var(--green);} .queue-sheet-row .qs-meta{flex:1;min-width:0;} .queue-sheet-row .qs-name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .queue-sheet-row .qs-sub{font-size:12px;color:rgba(235,235,245,.45);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .queue-sheet-row .qs-dur{font-size:12px;color:rgba(235,235,245,.4);flex-shrink:0;} .queue-sheet-empty{padding:40px 20px;text-align:center;color:rgba(235,235,245,.4);font-size:14px;} html[data-mode="dark"] .queue-sheet{background:rgba(0,0,0,.96);} html[data-mode="dark"] .pb-title{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.7);} html[data-mode="dark"] .pb-artist{color:rgba(255,255,255,.8)!important;text-shadow:0 1px 2px rgba(0,0,0,.6);} /* 纸白：迷你播放器播放列表纯白底 + 黑灰字 */ html[data-mode="paper"] .queue-sheet{ background:#ffffff!important; border:1px solid rgba(40,30,20,0.08)!important; border-bottom:none!important; box-shadow:0 -8px 32px rgba(40,30,20,0.10)!important; color:#2c2824!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html[data-mode="paper"] .queue-sheet-mask{ background:rgba(40,30,20,0.28)!important; } html[data-mode="paper"] .queue-sheet-handle{ background:rgba(40,30,20,0.18)!important; } html[data-mode="paper"] .queue-sheet-title{ color:#2c2824!important; } html[data-mode="paper"] .queue-sheet-title span{ color:rgba(40,32,26,0.45)!important; } html[data-mode="paper"] .queue-sheet-mode, html[data-mode="paper"] .queue-sheet-close{ color:#6b6560!important; background:rgba(40,30,20,0.06)!important; } html[data-mode="paper"] .queue-sheet-mode svg{ color:#6b6560!important; } html[data-mode="paper"] .queue-sheet-row{ color:#2c2824!important; } @media (hover: hover) and (pointer: fine){ html[data-mode="paper"] .queue-sheet-row:hover{ background:rgba(40,30,20,0.05)!important; } } html[data-mode="paper"]:not(.tv-mode) .queue-sheet-row:active:not(.playing){ background:transparent!important; } html[data-mode="paper"] .queue-sheet-row.playing{ color:var(--green)!important; background:rgba(var(--accent-rgb),0.08)!important; } html[data-mode="paper"] .queue-sheet-row .qs-idx{ color:rgba(40,32,26,0.40)!important; } html[data-mode="paper"] .queue-sheet-row.playing .qs-idx{ color:var(--green)!important; } html[data-mode="paper"] .queue-sheet-row .qs-name{ color:inherit!important; } html[data-mode="paper"] .queue-sheet-row .qs-sub, html[data-mode="paper"] .queue-sheet-row .qs-dur{ color:rgba(40,32,26,0.42)!important; } html[data-mode="paper"] .queue-sheet-row.playing .qs-sub{ color:rgba(var(--accent-rgb),0.75)!important; } html[data-mode="paper"] .queue-sheet-empty{ color:rgba(40,32,26,0.40)!important; } .pb-mini-progress{display:block;position:absolute;left:20px;right:20px;top:0;height:3px;background:rgba(255,255,255,.12);border-radius:999px 999px 0 0;overflow:hidden;width:auto;} .pb-mini-progress-fill{height:100%;width:0%;background:var(--green);border-radius:0 1.5px 1.5px 0;box-shadow:0 0 8px var(--green-glow);} .pb-cover{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;background:var(--bg-2); position:relative;box-shadow:0 3px 12px rgba(0,0,0,.38); background-image:url("data:image/svg+xml;utf8,"); background-size:45%;background-repeat:no-repeat;background-position:center;} .pb-cover img{width:100%;height:100%;object-fit:cover;transition:transform 8s linear;display:block;} .pb-cover img.img-err{opacity:0;} .pb-cover.spin img{animation:none;} @keyframes spin{to{transform:rotate(360deg);}} .pb-meta{ width:auto;flex:1 1 auto;min-width:96px;max-width:none;padding-right:8px;cursor:pointer; position:relative;z-index:2;overflow:hidden; } .pb-title{ font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.2px; color:#fff!important; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.25); } .pb-artist{ font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px; color:rgba(255,255,255,.82)!important; text-shadow:0 1px 2px rgba(0,0,0,.5); } .pb-like{display:none;} .pb-like.on{color:var(--danger);} .pb-like svg{width:18px;height:18px;} .pb-center{ flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:4px; max-width:48%;margin:0;min-width:0;position:relative;z-index:2; } .pb-ctrls{display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0;} .pb-ctrl-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-1); transition:color .15s, background .2s, transform .3s var(--ease-spring);flex-shrink:0;} .pb-ctrl-btn:hover{color:var(--text-0);background:rgba(255,255,255,.08);} .pb-ctrl-btn svg{width:22px;height:22px;} .pb-play{width:48px;height:48px;border-radius:50%;background:#fff;color:#111; display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 4px 18px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.55) inset; transition:transform .32s var(--ease-spring), box-shadow .25s;} .pb-play:hover{box-shadow:0 6px 22px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.6) inset;} .pb-play:active{transform:scale(.9);} .pb-play svg{width:22px;height:22px;} #pbQuality.pb-ctrl-btn{font-size:13px;font-weight:700;letter-spacing:0.02em;} .pb-progress{display:none;} .pb-time{font-size:10.5px;color:var(--text-2);font-family:var(--font-num);width:34px;flex-shrink:0;} .pb-time.right{text-align:right;} .pb-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;} .pb-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#fff;width:0%;} .pb-bar-knob{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);left:0%;opacity:0;transition:opacity .15s;} .pb-bar:hover .pb-bar-knob{opacity:1;} .pb-right{display:none;} .pb-vol{display:none;align-items:center;gap:7px;width:88px;} .pb-vol svg{width:15px;height:15px;color:var(--text-1);flex-shrink:0;} .pb-vol-bar{flex:1;height:3px;border-radius:2px;background:var(--line);position:relative;cursor:pointer;} .pb-vol-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--text-1);width:80%;} .pb-icon-btn{display:none!important;width:28px;height:28px;align-items:center;justify-content:center;color:var(--text-1);flex-shrink:0;} .pb-icon-btn.on{color:var(--green);} .pb-icon-btn svg{width:15px;height:15px;} #app.overlay-hidden{visibility:hidden;pointer-events:none;} #fullPlayer{ position:fixed;inset:0;z-index:200;display:flex;flex-direction:row;opacity:0;pointer-events:none; transform:translate3d(0,8%,0);transition:opacity .35s var(--ease-smooth),transform .5s var(--ease-spring); overflow:hidden;max-width:100vw;width:100%; background:transparent;color:#1c1c1e; touch-action:pan-y; } #fullPlayer.show{opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0);visibility:visible!important;} /* ===== 刷歌 · 类抖音竖滑切歌 ===== */ #fullPlayer.brush-mode{ flex-direction:column!important; touch-action:none; } #fullPlayer.brush-mode .fp-right{ display:none!important; } #fullPlayer.brush-mode .fp-tabs, #fullPlayer.brush-mode #lyricsWrap, #fullPlayer.brush-mode #playlistPanel{ display:none!important; } /* 顶栏：无返回键，歌名居中略下移，颜色跟随主题 */ #fullPlayer.brush-mode .fp-topbar{ position:absolute!important;left:0;right:0;top:0;z-index:40!important; display:flex!important;align-items:flex-start!important;justify-content:center!important; gap:0!important; padding:calc(18px + var(--safe-t)) 28px 0!important; min-height:calc(56px + var(--safe-t))!important; pointer-events:none!important; background:transparent!important; } #fullPlayer.brush-mode .fp-topbar .fp-close{ display:none!important; } #fullPlayer.brush-mode .fp-topbar .fp-top-spacer{ display:none!important; } #fullPlayer.brush-mode .fp-topbar .fp-track-info{ display:flex!important; flex:1!important;min-width:0!important;max-width:100%!important; flex-direction:column!important; align-items:center!important;justify-content:flex-start!important; text-align:center!important; /* 单击歌名切换原盘/歌词 */ pointer-events:auto!important; cursor:pointer!important; padding:6px 8px 0!important; margin-top:6px!important; gap:3px!important; -webkit-tap-highlight-color:transparent; } #fullPlayer.brush-mode .fp-topbar .fp-track-info:active{ opacity:.75; } /* 歌名加大两号，默认深色；各主题单独适配 */ #fullPlayer.brush-mode .fp-topbar .fp-track-name, #fullPlayer.brush-mode #fpTitle{ display:block!important; width:100%!important; font-size:20px!important; font-weight:700!important; line-height:1.25!important; letter-spacing:-0.2px!important; color:#1c1c1e!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #fullPlayer.brush-mode .fp-topbar .fp-track-artist, #fullPlayer.brush-mode #fpArtist{ display:block!important; width:100%!important; font-size:12px!important; font-weight:500!important; color:rgba(60,60,67,.55)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* 刷歌竖屏：歌名再放大（仅歌名，歌手名不动） */ #fullPlayer.brush-mode:not(.is-landscape) .fp-topbar .fp-track-name, #fullPlayer.brush-mode:not(.is-landscape) #fpTitle{ font-size:18px!important; line-height:1.22!important; letter-spacing:0!important; } html[data-mode="dark"] #fullPlayer.brush-mode .fp-topbar .fp-close{ background:rgba(255,255,255,.14)!important;color:#fff!important; } html[data-mode="dark"] #fullPlayer.brush-mode .fp-topbar .fp-track-name, html[data-mode="dark"] #fullPlayer.brush-mode #fpTitle{ color:#fff!important; } html[data-mode="dark"] #fullPlayer.brush-mode .fp-topbar .fp-track-artist, html[data-mode="dark"] #fullPlayer.brush-mode #fpArtist{ color:rgba(235,235,245,.55)!important; } html[data-mode="neon"] #fullPlayer.brush-mode .fp-topbar .fp-close{ background:rgba(0,246,255,.14)!important;color:#00f6ff!important; border:1px solid rgba(0,246,255,.35)!important; } html[data-mode="neon"] #fullPlayer.brush-mode .fp-topbar .fp-track-name, html[data-mode="neon"] #fullPlayer.brush-mode #fpTitle{ color:#f5f9ff!important; text-shadow:0 0 16px rgba(0,246,255,.35); } html[data-mode="neon"] #fullPlayer.brush-mode .fp-topbar .fp-track-artist, html[data-mode="neon"] #fullPlayer.brush-mode #fpArtist{ color:rgba(190,230,255,.65)!important; } /* 封面在上 */ #fullPlayer.brush-mode .fp-left{ order:1!important; width:100%!important;flex:1 1 auto!important; padding:calc(88px + var(--safe-t)) 20px 12px!important; justify-content:center!important;align-items:center!important; min-height:0!important; position:relative!important;z-index:2!important; } #fullPlayer.brush-mode .fp-art{width:100%;align-items:center;} #fullPlayer.brush-mode .fp-art-stage{ width:min(68vw, 320px)!important; height:min(68vw, 320px)!important; } /* 刷歌竖屏：原盘居中屏幕、尺寸适中 */ #fullPlayer.brush-mode:not(.is-landscape) .fp-left{ flex:1 1 auto!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; padding:calc(168px + var(--safe-t)) 20px calc(96px + var(--safe-t))!important; min-height:0!important; box-sizing:border-box!important; } #fullPlayer.brush-mode:not(.is-landscape) .fp-art-stage{ width:min(70vw, 320px)!important; height:min(70vw, 320px)!important; } /* 控件在下：进度 + 播放键 + 快捷操作（歌名已在顶栏） */ #fullPlayer.brush-mode .fp-dock{ order:2!important; position:relative!important; left:auto!important;right:auto!important;bottom:auto!important; width:100%!important;max-width:100%!important; flex:0 0 auto!important; display:flex!important;flex-direction:column!important;align-items:center!important; padding:8px 22px calc(18px + var(--safe-b))!important; background:transparent!important; box-sizing:border-box!important; z-index:30!important; } #fullPlayer.brush-mode .fp-dock .fp-controls{ max-width:100%!important;width:100%!important; display:flex!important;flex-direction:column!important;align-items:center!important; gap:10px!important;margin:0!important;padding:0!important; order:1!important; } #fullPlayer.brush-mode .fp-dock .fp-quick{order:2!important;} #fullPlayer.brush-mode .fp-brush-hint{order:3!important;} /* 底部重复歌名隐藏 */ #fullPlayer.brush-mode .fp-brush-meta, #fullPlayer:not(.brush-mode) .fp-brush-meta{ display:none!important; } #fullPlayer.brush-mode .fp-dock .fp-ctrls{ order:1;display:flex!important;align-items:center;justify-content:center; gap:36px;width:100%; } #fullPlayer.brush-mode .fp-dock .fp-progress{ order:2;display:flex!important;width:100%;align-items:center;gap:8px; margin:0 0 2px;padding:0; } #fullPlayer.brush-mode .fp-dock .fp-quick{ order:3;display:flex!important;align-items:center;justify-content:center; gap:28px;margin:14px 0 0!important;width:100%; } /* 进度条视觉居中：贴近控制键，与底栏工具拉开 */ #fullPlayer .fp-dock .fp-controls{gap:10px!important;} #fullPlayer .fp-dock .fp-progress{margin:0!important;padding:0!important;} #fullPlayer .fp-dock .fp-quick{margin-top:16px!important;} #fullPlayer.brush-mode .fp-dock .fp-controls{gap:10px!important;} #fullPlayer.brush-mode .fp-dock .fp-quick{margin-top:16px!important;} #fullPlayer.brush-mode .fp-brush-hint{ order:4; display:flex;align-items:center;justify-content:center;gap:6px; font-size:11px;font-weight:500;letter-spacing:.04em; /* 默认（明亮）主题：深色字，避免看不见 */ color:rgba(28,28,30,.52); padding:8px 0 0;pointer-events:none;user-select:none; opacity:1;transition:opacity .3s, color .25s; } #fullPlayer:not(.brush-mode) .fp-brush-hint{display:none!important;} #fullPlayer.brush-mode .fp-brush-hint svg{width:13px;height:13px;opacity:.75;color:inherit;} html[data-mode="dark"] #fullPlayer.brush-mode .fp-brush-hint{ color:rgba(235,235,245,.58); } html[data-mode="neon"] #fullPlayer.brush-mode .fp-brush-hint{ color:rgba(180,230,255,.72); text-shadow:0 0 10px rgba(0,246,255,.25); } /* 刷歌 · 单击歌名切换歌词（与普通页隔离） 关键：黑胶必须原地消失，禁止 scale / 改 justify / 改 position，否则会先上移再淡出像残影 */ #fullPlayer.brush-mode.brush-lyrics .fp-art{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; /* 不改 transform、不改 position，避免任何位移 */ transition:none!important; animation:none!important; } #fullPlayer.brush-mode.brush-lyrics .fp-left{ /* 布局与原盘态完全一致，只是不接收点击 */ justify-content:center!important; align-items:center!important; pointer-events:none!important; } #fullPlayer.brush-mode.brush-lyrics .fp-right{ display:flex!important; position:absolute!important; left:0!important;right:0!important; /* 贴近顶栏歌名与底部控件，底部再多露出几行 */ top:calc(96px + var(--safe-t))!important; bottom:calc(72px + var(--safe-b))!important; width:100%!important; padding:0 16px!important; z-index:25!important; flex-direction:column!important; box-sizing:border-box!important; pointer-events:auto!important; } #fullPlayer.brush-mode.brush-lyrics .fp-tabs{display:none!important;} /* 刷歌内容态：默认歌词；点列表图标后由 .fp-show-list 切换 */ #fullPlayer.brush-mode.brush-lyrics:not(.fp-show-list) #playlistPanel{display:none!important;} #fullPlayer.brush-mode.brush-lyrics.fp-show-list #lyricsWrap{display:none!important;} #fullPlayer.brush-mode.brush-lyrics.fp-show-list #playlistPanel{ display:block!important; flex:1 1 auto!important; height:100%!important; max-height:100%!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; padding:4px 8px 12px!important; box-sizing:border-box!important; } #fullPlayer.brush-mode.brush-lyrics #lyricsWrap{ display:block!important; flex:1 1 auto!important; height:100%!important; max-height:100%!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; /* 边缘淡出更轻，上下空白也能看到歌词 */ mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 96%,transparent 100%)!important; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 96%,transparent 100%)!important; padding:4px 8px 8px!important; box-sizing:border-box!important; touch-action:pan-y!important; } #fullPlayer.brush-mode.brush-lyrics #lyricsList{ text-align:center!important; /* 底部内边距再收，多露出几行歌词 */ padding-top:min(8vh, 56px)!important; padding-bottom:8px!important; } #fullPlayer.brush-mode.brush-lyrics .lyric-line{ font-size:17px!important; line-height:1.85!important; padding:6px 10px!important; } #fullPlayer.brush-mode.brush-lyrics .lyric-line.active{ font-size:24px!important; font-weight:700!important; } #fullPlayer.brush-mode.brush-lyrics-hint{ /* reserved */ } #fullPlayer.brush-mode .fp-art{cursor:pointer;} #fullPlayer.brush-mode.brush-swiping .fp-art{ transition:transform .08s linear, opacity .08s linear; } #fullPlayer.brush-mode .fp-art{ transition:none; will-change:transform, opacity; } #fullPlayer.brush-mode .fp-art-stage{ will-change:transform, opacity; } /* 滑出 / 滑入关键帧 */ @keyframes brushArtOutUp{ 0%{ transform:translate3d(0,0,0) scale(1); opacity:1; } 100%{ transform:translate3d(0,-42%,0) scale(.86); opacity:0; } } @keyframes brushArtOutDown{ 0%{ transform:translate3d(0,0,0) scale(1); opacity:1; } 100%{ transform:translate3d(0,42%,0) scale(.86); opacity:0; } } @keyframes brushArtInUp{ 0%{ transform:translate3d(0,48%,0) scale(.86); opacity:0; } 100%{ transform:translate3d(0,0,0) scale(1); opacity:1; } } @keyframes brushArtInDown{ 0%{ transform:translate3d(0,-48%,0) scale(.86); opacity:0; } 100%{ transform:translate3d(0,0,0) scale(1); opacity:1; } } @keyframes brushTitleOut{ 0%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; transform:translateY(-8px); } } @keyframes brushTitleIn{ 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } } #fullPlayer.brush-mode.brush-out-up .fp-art{ animation:brushArtOutUp .28s cubic-bezier(0.22,1,0.36,1) both; } #fullPlayer.brush-mode.brush-out-down .fp-art{ animation:brushArtOutDown .28s cubic-bezier(0.22,1,0.36,1) both; } #fullPlayer.brush-mode.brush-in-up .fp-art{ animation:brushArtInUp .38s cubic-bezier(0.34,1.2,0.64,1) both; } #fullPlayer.brush-mode.brush-in-down .fp-art{ animation:brushArtInDown .38s cubic-bezier(0.34,1.2,0.64,1) both; } #fullPlayer.brush-mode.brush-out-up .fp-topbar .fp-track-info, #fullPlayer.brush-mode.brush-out-down .fp-topbar .fp-track-info{ animation:brushTitleOut .22s ease both; } #fullPlayer.brush-mode.brush-in-up .fp-topbar .fp-track-info, #fullPlayer.brush-mode.brush-in-down .fp-topbar .fp-track-info{ animation:brushTitleIn .32s ease both; } #fullPlayer.brush-mode #fpModeBtn{opacity:.55;} /* 横屏：左封面右控件 */ #fullPlayer.brush-mode.is-landscape{ flex-direction:row!important; } /* 横屏刷歌：左封面+控件，右半直接歌词（无列表/无 Tab） */ #fullPlayer.brush-mode.is-landscape .fp-left{ order:1!important;width:50%!important;flex:0 0 50%!important; padding:calc(28px + var(--safe-t)) 16px calc(120px + var(--safe-b))!important; justify-content:center!important;align-items:center!important; } #fullPlayer.brush-mode.is-landscape .fp-art-stage{ width:min(52vh,260px)!important;height:min(52vh,260px)!important; } /* 控件固定在左半底部 */ #fullPlayer.brush-mode.is-landscape .fp-dock{ order:0!important; position:absolute!important;left:0!important;right:auto!important; width:50%!important;flex:none!important; bottom:0!important;top:auto!important; justify-content:center!important;align-items:center!important; padding:10px 20px calc(14px + var(--safe-b))!important; background:transparent!important; z-index:6!important; } /* 横屏刷歌：歌名/歌手在左半边居中（点歌名不切换歌词，见 JS） */ #fullPlayer.brush-mode.is-landscape .fp-topbar{ left:0!important;right:auto!important;width:50%!important;max-width:50%!important; display:flex!important;justify-content:center!important;align-items:center!important; pointer-events:none!important;z-index:8!important; } #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-track-info{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; text-align:center!important; width:auto!important;max-width:calc(100% - 88px)!important; margin:0 auto!important; pointer-events:none!important;cursor:default!important; } #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-track-name, #fullPlayer.brush-mode.is-landscape #fpTitle{ display:block!important;font-size:32px!important;font-weight:700!important;text-align:center!important;width:100%!important;line-height:1.25!important; } #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-track-artist, #fullPlayer.brush-mode.is-landscape #fpArtist{ display:block!important;font-size:15px!important;text-align:center!important;width:100%!important;line-height:1.3!important;margin-top:4px!important;font-weight:500!important; } #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-track-info{ margin-top:20px!important; } #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-close{ display:flex!important; position:absolute!important;left:max(10px, var(--safe-l))!important; top:calc(10px + var(--safe-t))!important; transform:none!important; margin:0!important; pointer-events:auto!important;z-index:12!important; width:40px!important;height:40px!important;opacity:1!important; } /* 右半：仅歌词 */ #fullPlayer.brush-mode.is-landscape .fp-right{ display:flex!important;flex-direction:column!important; order:2!important;width:50%!important;flex:0 0 50%!important; height:100%!important;max-width:50%!important; padding:calc(16px + var(--safe-t)) 24px calc(16px + var(--safe-b))!important; position:relative!important;z-index:5!important; box-sizing:border-box!important;overflow:hidden!important; background:transparent!important; } #fullPlayer.brush-mode.is-landscape .fp-tabs{display:none!important;} #fullPlayer.brush-mode.is-landscape:not(.fp-show-list) #playlistPanel{display:none!important;} #fullPlayer.brush-mode.is-landscape.fp-show-list #lyricsWrap{display:none!important;} #fullPlayer.brush-mode.is-landscape.fp-show-list #playlistPanel{ display:block!important; flex:1 1 auto!important;min-height:0!important;max-height:none!important; margin:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch; padding:12px 8px 24px!important; } #fullPlayer.brush-mode.is-landscape #lyricsWrap{ display:block!important; flex:1 1 auto!important;min-height:0!important;max-height:none!important; margin:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch; } #fullPlayer.brush-mode.is-landscape #lyricsList{ padding:20px 0 40px!important; } #fullPlayer.brush-mode.is-landscape .lyric-line{ font-size:15px!important;line-height:1.75!important;text-align:center!important;padding:3px 12px!important; } #fullPlayer.brush-mode.is-landscape .lyric-line.active{ font-size:24px!important; } #fullPlayer.brush-mode.is-landscape #lyricsList{ text-align:center!important; } #fullPlayer.brush-mode.is-landscape .empty-state.lyric-empty, #fullPlayer.brush-mode.is-landscape .empty-state.lyric-pure{ text-align:center!important;align-items:center!important; } /* 横屏刷歌不再依赖「单击歌名看歌词」 */ #fullPlayer.brush-mode.is-landscape .fp-brush-hint{ display:none!important; } /* 横屏下 brush-lyrics 状态与默认一致：始终右栏歌词，封面不隐藏 */ #fullPlayer.brush-mode.is-landscape.brush-lyrics .fp-art{ display:flex!important;visibility:visible!important;opacity:1!important; transform:none!important;pointer-events:auto!important; } #fullPlayer.brush-mode.is-landscape.brush-lyrics .fp-left{ display:flex!important; } #fullPlayer.brush-mode.is-landscape.brush-lyrics .fp-right{ display:flex!important; } #fullPlayer.brush-mode.is-landscape.brush-lyrics #lyricsWrap{ display:block!important; } /* 播放页背景：海报高斯模糊（底层）→ 遮罩 → 内容 */ #fpBg{ position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; background:#1a1820; } #fpBg::before,#fpBg::after{display:none;content:none;} #fpBg .fp-bg-amb{ position:absolute;left:-18%;right:-18%;top:-18%;bottom:-18%; background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-filter:blur(48px) saturate(1.25) brightness(0.80); filter:blur(48px) saturate(1.25) brightness(0.80); transform:scale(1.12); opacity:0; transition:opacity .45s ease; will-change:opacity, background-image; } #fpBg .fp-bg-amb.on{opacity:1;} #fpBg .fp-bg-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; /* 去掉压暗遮罩，保留海报模糊通透感（类 iOS） */ background:transparent; opacity:0; transition:opacity .4s ease, background .4s ease; } /* 白亮封面：背景明度压暗约 40%，保证歌词可读 */ #fpBg.is-bright-cover .fp-bg-amb{ -webkit-filter:blur(48px) saturate(1.15) brightness(0.60)!important; filter:blur(48px) saturate(1.15) brightness(0.60)!important; } #fpBg.is-bright-cover .fp-bg-veil{ background:rgba(0,0,0,0.28)!important; opacity:1!important; } /* 无封面时保留柔和渐变兜底 */ #fpBg:not(.has-cover){ background: radial-gradient(ellipse 90% 70% at 10% 5%, #ffb3c9 0%, transparent 55%), radial-gradient(ellipse 80% 65% at 95% 8%, #a8c8ff 0%, transparent 55%), radial-gradient(ellipse 75% 60% at 85% 90%, #c8b0ff 0%, transparent 55%), radial-gradient(ellipse 70% 55% at 5% 88%, #9aefd0 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 48% 48%, #ffe0b0 0%, transparent 58%), linear-gradient(165deg, #f5e6f0 0%, #e8eef8 40%, #e8f5f0 70%, #f0e8f5 100%); } #fpBg:not(.has-cover) .fp-bg-veil{ background:transparent!important; opacity:0!important; } #fpOrbs{display:none!important;} /* 有海报模糊时：浅色主题文字改亮，保证可读（层级：bg0 → veil1 → 内容2+） */ #fullPlayer.fp-has-cover .fp-track-name, #fullPlayer.fp-has-cover #fpTitle{ color:#fff!important; text-shadow:0 1px 8px rgba(0,0,0,.35); } #fullPlayer.fp-has-cover .fp-track-artist, #fullPlayer.fp-has-cover #fpArtist{ color:rgba(255,255,255,.72)!important; text-shadow:0 1px 6px rgba(0,0,0,.3); } #fullPlayer.fp-has-cover .fp-close{ color:#fff!important; background:rgba(0,0,0,.28)!important; border:1px solid rgba(255,255,255,.18); box-shadow:none!important; } #fullPlayer.fp-has-cover .fp-close svg{color:#fff!important;} #fullPlayer.fp-has-cover .fp-time{ color:rgba(255,255,255,.55)!important; } #fullPlayer.fp-has-cover .fp-ctrl-btn, #fullPlayer.fp-has-cover .fp-quick button, #fullPlayer.fp-has-cover .fp-quality-btn, #fullPlayer.fp-has-cover .fp-speed-btn{ color:rgba(255,255,255,.88)!important; } #fullPlayer.fp-has-cover .lyric-line{color:rgba(255,255,255,.72)!important;} #fullPlayer.fp-has-cover .lyric-line.active{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.35);} #fullPlayer.fp-has-cover .lyric-tr{color:rgba(255,255,255,.58)!important;} #fullPlayer.fp-has-cover .fp-tab{color:rgba(255,255,255,.45)!important;} #fullPlayer.fp-has-cover .fp-tab.active{color:#fff!important;} #fullPlayer.fp-has-cover .pl-panel-row{color:rgba(255,255,255,.92)!important;} /* 底部控件不单独铺底，与整页海报模糊一体 */ #fullPlayer.fp-has-cover .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } /* 默认主题 + 有封面：控件用浅色（暗底可读） */ #fullPlayer.fp-has-cover .fp-track-name, #fullPlayer.fp-has-cover #fpTitle{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.35);} #fullPlayer.fp-has-cover .fp-track-artist, #fullPlayer.fp-has-cover #fpArtist{color:rgba(255,255,255,.72)!important;} #fullPlayer.fp-has-cover .fp-time{color:rgba(255,255,255,.55)!important;} #fullPlayer.fp-has-cover .fp-bar{background:rgba(255,255,255,.22)!important;} #fullPlayer.fp-has-cover .fp-bar-fill{background:#fff!important;} #fullPlayer.fp-has-cover .fp-bar-knob{background:#fff!important;box-shadow:0 1px 4px rgba(0,0,0,.35)!important;} #fullPlayer.fp-has-cover .fp-ctrl-btn, #fullPlayer.fp-has-cover .fp-quick button, #fullPlayer.fp-has-cover .fp-quality-btn, #fullPlayer.fp-has-cover .fp-speed-btn{color:rgba(255,255,255,.92)!important;} #fullPlayer.fp-has-cover .fp-quick button.on{color:var(--danger)!important;} #fullPlayer.fp-has-cover .fp-speed-btn.on{color:var(--green)!important;} #fullPlayer.fp-has-cover .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } #fullPlayer.fp-has-cover .fp-play svg{color:rgba(255,255,255,.95)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-quick button, #fullPlayer.fp-has-cover .fp-dock .fp-ctrl-btn, #fullPlayer.fp-has-cover .fp-dock .fp-quality-btn, #fullPlayer.fp-has-cover .fp-dock .fp-speed-btn{color:rgba(255,255,255,.92)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-time{color:rgba(255,255,255,.55)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-play{background:transparent!important;color:rgba(255,255,255,.95)!important;box-shadow:none!important;border:none!important;} #fullPlayer.fp-has-cover .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} #fullPlayer.fp-has-cover .lyric-line{color:rgba(255,255,255,.72)!important;} #fullPlayer.fp-has-cover .lyric-line.active{color:#fff!important;} #fullPlayer.fp-has-cover .lyric-tr{color:rgba(255,255,255,.58)!important;} #fullPlayer.fp-has-cover .fp-tab{color:rgba(255,255,255,.45)!important;} #fullPlayer.fp-has-cover .fp-tab.active{color:#fff!important;} #fullPlayer.fp-has-cover .pl-panel-row{color:rgba(255,255,255,.92)!important;} .fp-topbar{ position:absolute;left:0;right:0;top:0;z-index:5; display:flex;align-items:center;gap:8px; padding:calc(10px + var(--safe-t)) 12px 8px; box-sizing:border-box;pointer-events:none; min-height:calc(52px + var(--safe-t)); } .fp-topbar .fp-close, .fp-topbar .fp-track-info{pointer-events:auto;} .fp-close{position:relative;left:auto;top:auto;flex-shrink:0;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#1c1c1e;background:rgba(255,255,255,.55); box-shadow:0 2px 10px rgba(0,0,0,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} /* 正常播放页隐藏左上角返回；系统返回/下滑仍可关闭；MV 顶栏保留 */ #fullPlayer .fp-close, #fullPlayer #fpClose{ display:none!important; pointer-events:none!important; width:0!important;height:0!important;min-width:0!important;padding:0!important;margin:0!important; overflow:hidden!important;opacity:0!important; } #fullPlayer .fp-top-spacer{ display:none!important; width:0!important;min-width:0!important;height:0!important;overflow:hidden!important; } #fullPlayer .fp-topbar .fp-track-info{ flex:1 1 auto!important; max-width:100%!important; } .fp-top-spacer{width:38px;height:38px;flex-shrink:0;} .fp-topbar .fp-track-info{ flex:1;min-width:0;max-width:none; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:0 4px;gap:2px; } .fp-topbar .fp-track-name{ display:block;width:100%; font-size:18px;font-weight:600;line-height:1.28; letter-spacing:-0.22px; font-family:var(--font-display); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fp-topbar .fp-track-artist{ display:block;width:100%; font-size:12px;margin-top:0;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #fullPlayer .fp-track-name{color:#fff;} #fullPlayer .fp-track-artist{color:rgba(220,235,255,.72);} #fullPlayer .fp-tab{color:rgba(60,60,67,.45);} #fullPlayer .fp-tab.active{color:#1c1c1e;border-color:var(--green);} #fullPlayer .lyric-line{color:rgba(230,240,255,.72);} #fullPlayer .lyric-line:hover{color:rgba(240,248,255,.90);} #fullPlayer .lyric-line.active{color:#fff;} #fullPlayer .lyric-line.active .lyric-tr{color:var(--green);} #fullPlayer .lyric-tr{color:rgba(210,225,245,.58);} #fullPlayer .fp-time{color:rgba(200,220,245,.55);} #fullPlayer .fp-bar{background:rgba(255,255,255,.22);} #fullPlayer .fp-bar-fill{background:#fff;} #fullPlayer .fp-bar-knob{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);} #fullPlayer .fp-ctrl-btn{color:rgba(235,245,255,.9);} #fullPlayer .fp-quick button{color:rgba(235,245,255,.88);} #fullPlayer .fp-quick button.on{color:var(--danger);} #fullPlayer .fp-quality-btn{color:rgba(235,245,255,.9)!important;} #fullPlayer .fp-speed-btn{color:rgba(235,245,255,.9)!important;} #fullPlayer .fp-speed-btn.on{color:var(--green)!important;} #fullPlayer .pl-panel-row{color:rgba(240,248,255,.95);} @media (hover: hover) and (pointer: fine){ #fullPlayer .pl-panel-row:hover{background:rgba(0,0,0,.05);} } #fullPlayer .pl-panel-row.playing{ color:var(--green); background:rgba(120,120,128,0.14); box-shadow:none; } /* 空状态字号；颜色已在上方按亮色/暗色/霓虹主题分别定义，与歌词统一 */ #fullPlayer .empty-state.lyric-pure .e-title, #fullPlayer .empty-state.lyric-empty .e-title{ font-size:18px!important; font-weight:600!important; } #lyricsList{transition:opacity .18s ease;} #lyricsList.is-updating{opacity:.35;} #lyricsList.is-lyric-empty.is-updating{opacity:1;} .fp-close svg{width:18px;height:18px;} .fp-left{position:relative;z-index:2;width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(56px + var(--safe-t)) 28px 24px;box-sizing:border-box;min-width:0;} .fp-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;} .fp-art-stage{position:relative;width:min(340px,42vw);height:min(340px,42vw);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .fp-vinyl{width:100%;height:100%;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center; background:transparent;box-shadow:none;overflow:hidden;z-index:2;} .fp-art[data-style="vinyl"] .fp-vinyl{ background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.18) 0%, transparent 30%), radial-gradient(circle at 72% 78%, rgba(255,255,255,.06) 0%, transparent 34%), radial-gradient(circle at 50% 50%, #2a2a30 0%, #18181e 42%, #101014 70%, #0a0a0c 100%); box-shadow: 0 28px 64px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 2px rgba(255,255,255,.1), inset 0 -2px 6px rgba(0,0,0,.4); } .fp-vinyl .fp-groove{position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none; background: repeating-radial-gradient(circle at center, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at center, transparent 0 5px, rgba(0,0,0,.3) 5px 6px), conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(255,255,255,.14) 22deg, transparent 48deg, transparent 200deg, rgba(255,255,255,.07) 228deg, transparent 260deg, transparent 360deg); -webkit-mask:radial-gradient(circle at center, transparent 0 33%, #000 34% 100%); mask:radial-gradient(circle at center, transparent 0 33%, #000 34% 100%); opacity:.95; } .fp-art[data-style="vinyl"] .fp-vinyl img{ width:68%;height:68%; border:5px solid rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(0,0,0,.35); } .fp-vinyl img{width:86%;height:86%;border-radius:50%;object-fit:cover;position:relative;z-index:2; border:none;background:linear-gradient(145deg,#1a2a22,#0d1512); background-image:url("data:image/svg+xml;utf8,"); background-size:40%;background-repeat:no-repeat;background-position:center; transition:border-radius .25s,width .25s,height .25s,border .25s;} .fp-vinyl img.img-err{object-position:-9999px;color:transparent;} .fp-vinyl.spin{ animation:spin 16s linear infinite; animation-play-state:paused; /* 默认停转，只有播放时才 running */ } .fp-art:not(.is-paused) .fp-vinyl.spin:not(.paused){ animation-play-state:running; } .fp-vinyl.paused, .fp-art.is-paused .fp-vinyl.spin, .fp-art.is-paused[data-style] .fp-vinyl.spin{ animation-play-state:paused!important; } .fp-spectrum{ position:absolute;inset:-40px;display:none;pointer-events:none;z-index:1; } .fp-spectrum i{ position:absolute;left:50%;top:50%; width:2px;height:22px; margin-left:-1px;margin-top:-11px; border-radius:2px; background:linear-gradient(to top,rgba(var(--accent-rgb),.25),rgba(255,255,255,.95)); box-shadow:0 0 8px rgba(var(--accent-rgb),.4); transform-origin:center center; opacity:.92; will-change:transform,opacity; } .fp-art.is-fake .fp-spectrum i{animation:none;} @keyframes fpBar{0%{transform:var(--tr) scaleY(.35);}100%{transform:var(--tr) scaleY(1.15);}} .fp-spectrum-glow{ position:absolute;inset:-8px;border-radius:50%;pointer-events:none;z-index:0;display:none; box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 22px rgba(var(--accent-rgb),.25); transition:transform .08s linear,opacity .08s linear; } .fp-art[data-style="spectrum"] .fp-spectrum-glow{display:block;} .fp-pulse-ring{position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(var(--accent-rgb),.45); display:none;pointer-events:none;z-index:0;animation:fpPulse 2.2s ease-out infinite;} .fp-pulse-ring.r2{inset:-32px;animation-delay:.75s;border-color:rgba(var(--accent-rgb),.28);} @keyframes fpPulse{0%{transform:scale(.9);opacity:.55;}100%{transform:scale(1.15);opacity:0;}} .fp-wave{ position:absolute;left:50%;top:50%; width:240%;height:240%; margin-left:-120%;margin-top:-120%; display:none;pointer-events:none;z-index:4; overflow:visible; } .fp-wave .fp-particle{ position:absolute;left:50%;top:50%; width:3px;height:3px;margin:-1.5px 0 0 -1.5px; border-radius:50%; background:#fff; box-shadow:0 0 3px rgba(255,255,255,.9),0 0 7px rgba(180,220,255,.75),0 0 12px rgba(var(--accent-rgb),.4); opacity:0; will-change:transform,opacity; pointer-events:none; } .fp-art[data-style="wave"] .fp-art-stage{overflow:visible!important;} .fp-art[data-style="wave"] .fp-vinyl{ position:relative;z-index:2; box-shadow:0 12px 36px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06); } .fp-art[data-style="wave"] .fp-wave{display:block!important;z-index:4;overflow:visible!important;} .fp-ring-spin{ position:absolute;inset:-12px;border-radius:50%; border:none;background:transparent; display:none;pointer-events:none;z-index:3; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), 0 0 24px rgba(var(--accent-rgb), .16); } .fp-ring-spin::before{ content:"";position:absolute;inset:-5px;border-radius:50%; background:conic-gradient( from 0deg, transparent 0deg 250deg, rgba(var(--accent-rgb), .2) 270deg, var(--green) 305deg, rgba(255,255,255,.7) 328deg, var(--green) 348deg, transparent 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation:fpRingSpin 4s linear infinite; opacity:.88; } .fp-ring-spin::after{ content:"";position:absolute;inset:-16px;border-radius:50%; background:conic-gradient( from 180deg, transparent 0deg 290deg, rgba(var(--accent-rgb), .28) 310deg, rgba(var(--accent-rgb), .45) 330deg, transparent 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation:fpRingSpin 8s linear infinite reverse; opacity:.4; } @keyframes fpRingSpin{to{transform:rotate(360deg);}} .fp-art.is-paused .fp-spectrum i, .fp-art.is-paused .fp-wave b, .fp-art.is-paused .fp-pulse-ring, .fp-art.is-paused .fp-ring-spin, .fp-art.is-paused .fp-ring-spin::before, .fp-art.is-paused .fp-ring-spin::after{animation-play-state:paused!important;} .fp-art .fp-groove,.fp-art .fp-spectrum,.fp-art .fp-pulse-ring,.fp-art .fp-wave,.fp-art .fp-ring-spin,.fp-art .fp-portal,.fp-art .fp-orbit,.fp-art .fp-holo{display:none;} .fp-art[data-style="vinyl"] .fp-groove{display:block;} .fp-art[data-style="vinyl"] .fp-vinyl.spin{animation:spin 16s linear infinite;animation-play-state:paused;} .fp-art[data-style="vinyl"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="spectrum"] .fp-spectrum{display:block;} .fp-art[data-style="spectrum"] .fp-vinyl{background:#111;box-shadow:0 16px 40px rgba(0,0,0,.45);} .fp-art[data-style="spectrum"] .fp-vinyl.spin{animation:spin 16s linear infinite;animation-play-state:paused;} .fp-art[data-style="spectrum"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="spectrum"] .fp-vinyl img{width:56%;height:56%;} .fp-art[data-style="pulse"] .fp-pulse-ring{display:block;} .fp-art[data-style="pulse"] .fp-vinyl{box-shadow:0 0 36px rgba(var(--accent-rgb),.28),0 24px 50px -18px rgba(0,0,0,.55);} .fp-art[data-style="pulse"] .fp-vinyl.spin{animation:spin 16s linear infinite;animation-play-state:paused;} .fp-art[data-style="pulse"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="square"] .fp-vinyl{border-radius:20px;background:transparent;overflow:hidden;} .fp-art[data-style="square"] .fp-vinyl.spin{animation:none;} .fp-art[data-style="square"] .fp-vinyl img{width:100%;height:100%;border-radius:20px;border:none;} .fp-art[data-style="wave"] .fp-wave{display:block;} .fp-art[data-style="wave"] .fp-vinyl.spin{animation:spin 16s linear infinite;animation-play-state:paused;} .fp-art[data-style="wave"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="wave"] .fp-vinyl img{width:100%;height:100%;} .fp-art[data-style="ring"] .fp-ring-spin{display:block;} .fp-art[data-style="ring"] .fp-vinyl{ background:transparent; box-shadow:0 12px 36px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); overflow:hidden; } .fp-art[data-style="ring"] .fp-vinyl.spin{animation:spin 16s linear infinite;animation-play-state:paused;} .fp-art[data-style="ring"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="ring"] .fp-vinyl img{width:100%;height:100%;border:none;border-radius:50%;} .fp-portal{ position:absolute;inset:-48px;border-radius:50%;pointer-events:none;z-index:1;display:none; overflow:visible; } .fp-portal i{ position:absolute;inset:0;border-radius:50%; box-sizing:border-box; will-change:transform; } .fp-portal .p1{ background:conic-gradient( from 0deg, transparent 0deg 25deg, rgba(var(--accent-rgb),.0) 30deg, rgba(var(--accent-rgb),.55) 55deg, rgba(120,200,255,.4) 75deg, transparent 100deg 180deg, rgba(200,140,255,.45) 210deg, rgba(var(--accent-rgb),.35) 235deg, transparent 270deg 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent 52%, #000 56%, #000 78%, transparent 82%); mask:radial-gradient(farthest-side, transparent 52%, #000 56%, #000 78%, transparent 82%); animation:fpPortalSpin 11s linear infinite; filter:blur(1px); opacity:.9; } .fp-portal .p2{ inset:6%; background:conic-gradient( from 90deg, transparent 0deg 200deg, rgba(255,255,255,.7) 220deg, rgba(var(--accent-rgb),.8) 235deg, transparent 255deg 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent 48%, #000 51%, #000 72%, transparent 76%); mask:radial-gradient(farthest-side, transparent 48%, #000 51%, #000 72%, transparent 76%); animation:fpPortalSpin 7s linear infinite reverse; opacity:.85; } .fp-portal .p3{ inset:14%; background:conic-gradient( from 180deg, transparent 0deg 280deg, rgba(var(--accent-rgb),.65) 300deg, rgba(255,255,255,.5) 315deg, transparent 335deg 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent 42%, #000 46%, #000 68%, transparent 72%); mask:radial-gradient(farthest-side, transparent 42%, #000 46%, #000 68%, transparent 72%); animation:fpPortalSpin 4.5s linear infinite; opacity:.8; } .fp-portal .p-core{ position:absolute;inset:22%;border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.25) 0%, rgba(var(--accent-rgb),.08) 50%, transparent 75%); filter:blur(16px); animation:fpPortalCore 3.2s ease-in-out infinite alternate; } @keyframes fpPortalSpin{ to{ transform:rotate(360deg); } } @keyframes fpPortalCore{ 0%{ transform:scale(0.9); opacity:.5; } 100%{ transform:scale(1.12); opacity:.9; } } .fp-art[data-style="portal"] .fp-portal{display:block;} .fp-art[data-style="portal"] .fp-art-stage{overflow:visible!important;} .fp-art[data-style="portal"] .fp-vinyl{ background:transparent!important; box-shadow: 0 0 40px rgba(var(--accent-rgb),.3), 0 16px 40px rgba(0,0,0,.25)!important; overflow:hidden; border-radius:50%!important; position:relative;z-index:3; } .fp-art[data-style="portal"] .fp-vinyl.spin{ animation:spin 16s linear infinite; animation-play-state:paused; } .fp-art[data-style="portal"]:not(.is-paused) .fp-vinyl.spin:not(.paused){ animation-play-state:running; } .fp-art[data-style="portal"] .fp-vinyl img{ width:100%!important;height:100%!important; border:none!important;border-radius:50%!important; box-shadow:none!important; object-fit:cover; } @keyframes fpPortalFloat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } } .fp-art.is-paused .fp-portal i, .fp-art.is-paused .fp-portal .p-core, .fp-art.is-paused[data-style="portal"] .fp-vinyl.spin{ animation-play-state:paused!important; } .fp-orbit{ position:absolute;inset:-28px;border-radius:50%;pointer-events:none;z-index:3;display:none; } .fp-orbit i{ position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent; box-sizing:border-box; } .fp-orbit .o1{ inset:8%; border-color:rgba(120,160,255,.4); box-shadow:0 0 12px rgba(120,160,255,.22), inset 0 0 12px rgba(120,160,255,.08); animation:fpOrbitSpin 14s linear infinite; border-style:dashed; opacity:.95; } .fp-orbit .o2{ inset:0; border:1.5px solid rgba(255,255,255,.2); border-top-color:rgba(180,140,255,.75); border-right-color:rgba(255,255,255,.1); box-shadow:0 0 18px rgba(160,140,255,.2); animation:fpOrbitSpin 9s linear infinite reverse; } .fp-orbit .o3{ inset:-12%; border:1px solid rgba(120,200,220,.28); border-bottom-color:rgba(120,200,220,.6); border-left-color:transparent; animation:fpOrbitSpin 22s linear infinite; opacity:.8; } .fp-orbit .o-dot{ position:absolute;width:8px;height:8px;border-radius:50%; left:50%;top:50%;margin:-4px 0 0 -4px; background:radial-gradient(circle at 35% 30%, #fff 0%, #b8c8ff 55%, #7a9cff 100%); box-shadow:0 0 8px rgba(140,170,255,.9), 0 0 16px rgba(140,170,255,.45); } .fp-orbit .o-dot.d1{ animation:fpOrbitDotA 9s linear infinite reverse; } .fp-orbit .o-dot.d2{ width:6px;height:6px;margin:-3px 0 0 -3px; background:radial-gradient(circle at 35% 30%, #fff 0%, #f0c0e0 50%, #e090c0 100%); box-shadow:0 0 6px rgba(240,160,200,.85), 0 0 12px rgba(240,160,200,.4); animation:fpOrbitDotB 14s linear infinite; } @keyframes fpOrbitSpin{ to{ transform:rotate(360deg); } } @keyframes fpOrbitDotA{ from{ transform:rotate(0deg) translateX(var(--orbit-r, 150px)) rotate(0deg); } to{ transform:rotate(360deg) translateX(var(--orbit-r, 150px)) rotate(-360deg); } } @keyframes fpOrbitDotB{ from{ transform:rotate(120deg) translateX(calc(var(--orbit-r, 150px) - 10px)) rotate(-120deg); } to{ transform:rotate(480deg) translateX(calc(var(--orbit-r, 150px) - 10px)) rotate(-480deg); } } .fp-art[data-style="orbit"] .fp-orbit{display:block;} .fp-art[data-style="orbit"] .fp-art-stage{overflow:visible!important;} .fp-art[data-style="orbit"] .fp-vinyl{ background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), transparent 40%), radial-gradient(circle at 50% 50%, #1a1a22 0%, #0c0c12 100%); box-shadow: 0 0 0 1px rgba(140,160,255,.28), 0 0 28px rgba(140,160,255,.2), 0 18px 40px rgba(0,0,0,.4); overflow:hidden; } .fp-art[data-style="orbit"] .fp-vinyl.spin{animation:spin 20s linear infinite;animation-play-state:paused;} .fp-art[data-style="orbit"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="orbit"] .fp-vinyl img{ width:78%;height:78%;border:none; box-shadow:0 0 0 2px rgba(255,255,255,.08); } .fp-art.is-paused .fp-orbit i, .fp-art.is-paused .fp-orbit .o-dot{animation-play-state:paused!important;} .fp-holo{ position:absolute;inset:-18px;border-radius:50%;pointer-events:none;z-index:3;display:none; overflow:visible; } .fp-holo .h-ring{ position:absolute;inset:0;border-radius:50%; background:conic-gradient( from 0deg, rgba(var(--accent-rgb),.0), rgba(var(--accent-rgb),.55) 40deg, rgba(120,220,255,.5) 80deg, rgba(255,120,220,.45) 130deg, rgba(var(--accent-rgb),.0) 180deg, rgba(180,140,255,.5) 230deg, rgba(80,220,200,.45) 280deg, rgba(var(--accent-rgb),.0) 360deg ); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation:fpHoloSpin 6s linear infinite; filter:blur(.3px); opacity:.95; } .fp-holo .h-ring::after{ content:"";position:absolute;inset:6px;border-radius:50%; background:conic-gradient( from 180deg, transparent 0deg 260deg, rgba(255,255,255,.55) 300deg, transparent 340deg ); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); animation:fpHoloSpin 10s linear infinite reverse; opacity:.7; } .fp-holo .h-scan{ position:absolute;inset:14px;border-radius:50%;overflow:hidden;pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(120,220,255,.08) 46%, rgba(255,255,255,.14) 50%, rgba(var(--accent-rgb),.1) 54%, transparent 100%); background-size:100% 220%; animation:fpHoloScan 3.6s ease-in-out infinite; mix-blend-mode:screen; opacity:.7; } @keyframes fpHoloSpin{ to{ transform:rotate(360deg); } } @keyframes fpHoloScan{ 0%{ background-position:0% -40%; opacity:.35; } 50%{ background-position:0% 140%; opacity:.75; } 100%{ background-position:0% -40%; opacity:.35; } } .fp-art[data-style="holo"] .fp-holo{display:block;} .fp-art[data-style="holo"] .fp-art-stage{overflow:visible!important;} .fp-art[data-style="holo"] .fp-vinyl{ background: radial-gradient(circle at 35% 28%, rgba(180,220,255,.12), transparent 42%), radial-gradient(circle at 50% 50%, #14141c 0%, #0a0a10 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 32px rgba(var(--accent-rgb),.28), 0 0 60px rgba(120,180,255,.12), 0 20px 48px rgba(0,0,0,.45); overflow:hidden; } .fp-art[data-style="holo"] .fp-vinyl.spin{animation:spin 18s linear infinite;animation-play-state:paused;} .fp-art[data-style="holo"]:not(.is-paused) .fp-vinyl.spin:not(.paused){animation-play-state:running;} .fp-art[data-style="holo"] .fp-vinyl img{ width:86%;height:86%;border:none; box-shadow:0 0 0 1px rgba(255,255,255,.1), inset 0 0 20px rgba(120,200,255,.08); } .fp-art.is-paused .fp-holo .h-ring, .fp-art.is-paused .fp-holo .h-ring::after, .fp-art.is-paused .fp-holo .h-scan{animation-play-state:paused!important;} .fp-track-info{text-align:center;width:100%;max-width:360px;padding:0 8px;box-sizing:border-box;flex-shrink:0;} .fp-track-name{font-size:24px;font-weight:600;line-height:1.3;word-break:break-word;letter-spacing:-0.35px;font-family:var(--font-display);} .fp-track-artist{font-size:12.5px;color:var(--text-1);margin-top:6px;} .fp-quick{display:flex;gap:22px;align-items:center;justify-content:center;} .fp-quick button{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-1);} .fp-quick button svg{width:22px;height:22px;} #fpModeBtn{width:42px!important;height:42px!important;} #fpModeBtn svg{width:22px!important;height:22px!important;} .fp-quick button.on{color:var(--danger);} .fp-quality-btn,.fp-quick button.fp-quality-btn, #fullPlayer .fp-quality-btn, .fp-speed-btn,.fp-quick button.fp-speed-btn, #fullPlayer .fp-speed-btn{ width:42px!important;min-width:42px!important;height:42px!important;padding:0!important; border:none!important;background:transparent!important;border-radius:50%!important; font-size:0!important;font-weight:400;letter-spacing:0; color:var(--text-1)!important; display:flex!important;align-items:center;justify-content:center; } .fp-speed-btn svg,.fp-quality-btn svg, #fullPlayer .fp-speed-btn svg,#fullPlayer .fp-quality-btn svg, .fp-quick button.fp-speed-btn svg,.fp-quick button.fp-quality-btn svg{ width:22px!important;height:22px!important; display:block!important; } .fp-speed-btn.on,.fp-quick button.fp-speed-btn.on{ color:var(--green)!important; } .fp-quality-btn.on,.fp-quick button.fp-quality-btn.on{ color:var(--green)!important; } .fp-controls{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px;box-sizing:border-box;} .fp-progress{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:0;} .fp-time{font-size:11px;color:var(--text-2);font-family:var(--font-num);width:36px;flex-shrink:0;} .fp-time.right{text-align:right;} .fp-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);position:relative;cursor:pointer;touch-action:none;} /* iOS：播放页进度条扩大触控热区（视觉仍 3px 细条；::after 热区约 40px 高，不改 fill/knob 定位） */ html.is-ios .fp-bar, html.is-ios #fullPlayer .fp-bar, html.is-ios #fullPlayer .fp-dock .fp-bar{ position:relative!important; touch-action:none!important; } html.is-ios .fp-bar::after, html.is-ios #fullPlayer .fp-bar::after, html.is-ios #fullPlayer .fp-dock .fp-bar::after{ content:""!important; position:absolute!important; left:0!important;right:0!important; top:50%!important; height:40px!important; transform:translateY(-50%)!important; /* 透明热区，事件仍落在 .fp-bar 上 */ background:transparent!important; z-index:5!important; pointer-events:auto!important; } html.is-ios .fp-bar-fill, html.is-ios .fp-bar-knob, html.is-ios #fullPlayer .fp-bar-fill, html.is-ios #fullPlayer .fp-bar-knob{ z-index:6!important; pointer-events:none!important; /* 拖动交给父级 bar，避免 knob 抢事件 */ } html.is-ios .fp-bar-knob, html.is-ios #fullPlayer .fp-bar-knob, html.is-ios #fullPlayer .fp-dock .fp-bar-knob{ width:16px!important; height:16px!important; } html.is-ios .fp-progress, html.is-ios #fullPlayer .fp-dock .fp-progress{ padding-top:6px!important; padding-bottom:6px!important; } .fp-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#fff;width:0%;} .fp-bar-knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.4);transform:translate(-50%,-50%);left:0%;} .fp-ctrls{display:flex;align-items:center;justify-content:center;gap:22px;} /* 换源/换歌词：保持精致小尺寸 */ #fpSrcBtn.fp-ctrl-btn,#fpLrcBtn.fp-ctrl-btn{width:40px;height:40px;} #fpSrcBtn svg,#fpLrcBtn svg{width:18px!important;height:18px!important;} @media (min-width: 768px){ #fpSrcBtn.fp-ctrl-btn,#fpLrcBtn.fp-ctrl-btn{width:42px;height:42px;} #fpSrcBtn svg,#fpLrcBtn svg{width:18px!important;height:18px!important;} } /* 中间三键：上一曲 / 播放 / 下一曲 更醒目 */ .fp-ctrl-btn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--text-1);} .fp-ctrl-btn svg{width:28px;height:28px;} #fpPrev.fp-ctrl-btn,#fpNext.fp-ctrl-btn{width:52px;height:52px;} #fpPrev svg,#fpNext svg{width:28px!important;height:28px!important;} .fp-play{width:76px;height:76px;border-radius:50%;background:transparent;color:rgba(255,255,255,.95); display:flex;align-items:center;justify-content:center; box-shadow:none;border:none; transition:transform .32s var(--ease-spring), color .2s;} .fp-play svg{width:44px;height:44px;color:inherit;} .fp-play:hover{box-shadow:none;color:#fff;} .fp-play:active{transform:scale(.92);} .fp-right{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:70px 48px 30px;min-width:0;box-sizing:border-box;} /* 歌词/列表文字 Tab 已废弃，改用底部列表图标切换 */ .fp-tabs{display:none!important;} .fp-tab{font-size:16px;color:var(--text-2);padding-bottom:8px;border-bottom:2px solid transparent;transition:all .2s;} .fp-tab.active{color:var(--text-0);border-color:var(--green);font-weight:600;} /* 列表图标与同排统一 */ #fpListBtn.fp-list-btn svg, .fp-list-btn svg{ width:22px!important; height:22px!important; } .fp-list-btn.on, #fpListBtn.on{ color:var(--green)!important; } .fp-list-btn.on svg, #fpListBtn.on svg{ color:var(--green)!important; } #fullPlayer.lyrics-focus .fp-left{display:none!important;} #fullPlayer.lyrics-focus .fp-dock{display:none!important;} #fullPlayer.lyrics-focus .fp-tabs{display:none!important;} #fullPlayer.lyrics-focus .fp-right{ position:absolute!important;inset:0!important;width:100%!important;max-width:none!important; padding:calc(88px + var(--safe-t)) 20px calc(36px + var(--safe-b))!important; margin:0!important;z-index:6!important; display:flex!important;flex-direction:column!important; order:unset!important;overflow:hidden!important;background:transparent!important; } #fullPlayer.lyrics-focus #lyricsWrap, #fullPlayer.lyrics-focus #playlistPanel{ flex:1 1 auto!important;min-height:0!important;max-height:none!important; } #fullPlayer.lyrics-focus #lyricsWrap{ mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important; } #fullPlayer.lyrics-focus #playlistPanel{ mask-image:none!important; -webkit-mask-image:none!important; } #fullPlayer.lyrics-focus .lyric-line{font-size:20px!important;line-height:1.9!important;padding:8px 12px!important;} #fullPlayer.lyrics-focus .lyric-line.active{font-size:24px!important;font-weight:700!important;} #fullPlayer.lyrics-focus .lyric-tr{font-size:14px!important;} #fullPlayer.lyrics-focus .fp-topbar{z-index:8!important;} #lyricsWrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 82%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 82%,transparent 100%);} #fullPlayer:not(.brush-mode) #lyricsList{padding-top:28px;padding-bottom:72px;} #fullPlayer:not(.is-landscape):not(.brush-mode) #lyricsList{padding-bottom:88px!important;} #fullPlayer:not(.is-landscape) #lyricsWrap{ mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 78%,transparent 100%)!important; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 78%,transparent 100%)!important; } #fullPlayer.lyrics-focus #lyricsList{padding-top:min(12vh,96px)!important;padding-bottom:min(18vh,140px)!important;} .lyric-line{ font-size:18px;line-height:2.1;color:var(--text-2); cursor:pointer;padding:6px 8px;text-align:center;font-weight:500; transform:scale(1) translateY(0);transform-origin:center center; opacity:.95; transition: color .4s cubic-bezier(0.22,1,0.36,1), opacity .4s cubic-bezier(0.22,1,0.36,1), font-size .48s cubic-bezier(0.22,1,0.36,1), transform .48s cubic-bezier(0.22,1,0.36,1), letter-spacing .4s ease, font-weight .3s ease; will-change:transform,font-size,opacity; } .lyric-line:hover{color:var(--text-1);opacity:1;} .lyric-line.active{ color:var(--text-0);font-size:24px;font-weight:700;letter-spacing:-0.3px; opacity:1; transform:scale(1.04) translateY(0); } .lyric-line.active .lyric-tr{color:var(--green);transition:color .35s ease;} .lyric-line.is-leaving{ opacity:.70; transform:scale(0.96) translateY(-6px); } .lyric-line.is-entering{ animation:lyricEnter .48s cubic-bezier(0.22,1,0.36,1) both; } @keyframes lyricEnter{ from{ opacity:.55; transform:scale(0.94) translateY(10px); } to{ opacity:1; transform:scale(1.04) translateY(0); } } .lyric-tr{display:block;font-size:13px;color:var(--text-2);margin-top:2px;font-weight:400;} .lyric-main{display:inline;} .lyric-word{ display:inline; color:inherit; transition:color .08s linear, opacity .08s linear, text-shadow .12s ease; } #fullPlayer .lyric-line.active .lyric-word, .lyric-line.active .lyric-word{ color:rgba(230,240,255,.72)!important; opacity:1!important; } #fullPlayer.fp-has-cover .lyric-line.active .lyric-word, .fp-has-cover .lyric-line.active .lyric-word{ color:rgba(255,255,255,.72)!important; } #fullPlayer .lyric-line.active .lyric-word.sung, .lyric-line.active .lyric-word.sung{ color:var(--green)!important; opacity:1!important; } #fullPlayer .lyric-line.active .lyric-word.sung.current, .lyric-line.active .lyric-word.sung.current{ color:var(--green)!important; font-weight:700!important; } .lyric-line.active .lyric-main.ktv-sweep, #fullPlayer .lyric-line.active .lyric-main.ktv-sweep{ color:transparent!important; -webkit-text-fill-color:transparent!important; background-image:linear-gradient( 90deg, var(--green) 0%, var(--green) var(--ktv-fill, 0%), rgba(230,240,255,.72) var(--ktv-fill, 0%), rgba(230,240,255,.72) 100% ); -webkit-background-clip:text!important; background-clip:text!important; } #fullPlayer.fp-has-cover .lyric-line.active .lyric-main.ktv-sweep, .fp-has-cover .lyric-line.active .lyric-main.ktv-sweep{ background-image:linear-gradient( 90deg, var(--green) 0%, var(--green) var(--ktv-fill, 0%), rgba(255,255,255,.72) var(--ktv-fill, 0%), rgba(255,255,255,.72) 100% )!important; } html[data-mode="dark"] .lyric-line.active .lyric-main.ktv-sweep, html[data-mode="dark"] #fullPlayer .lyric-line.active .lyric-main.ktv-sweep{ background-image:linear-gradient( 90deg, var(--green) 0%, var(--green) var(--ktv-fill, 0%), rgba(235,235,245,.72) var(--ktv-fill, 0%), rgba(235,235,245,.72) 100% ); } .lyric-line:not(.active) .lyric-main.ktv-sweep{ color:inherit!important; -webkit-text-fill-color:inherit!important; background-image:none!important; -webkit-background-clip:border-box!important; background-clip:border-box!important; } .lyric-line.active .lyric-word{ transition:none!important; color:inherit!important; -webkit-text-fill-color:inherit!important; background:none!important; } /* KTV 扫光时：子字必须全透明，只显示父级渐变，避免叠黑/叠脏 */ #fullPlayer .lyric-line.active .lyric-main.ktv-sweep, .lyric-line.active .lyric-main.ktv-sweep{ color:transparent!important; -webkit-text-fill-color:transparent!important; } #fullPlayer .lyric-line.active .lyric-main.ktv-sweep .lyric-word, #fullPlayer .lyric-line.active .lyric-main.ktv-sweep .lyric-word.sung, #fullPlayer .lyric-line.active .lyric-main.ktv-sweep .lyric-word.sung.current, #fullPlayer .lyric-line.active .lyric-main.ktv-sweep .lyric-word.current, #fullPlayer .lyric-line.active .lyric-main.ktv-sweep .lyric-word.is-filling, .lyric-line.active .lyric-main.ktv-sweep .lyric-word, .lyric-line.active .lyric-main.ktv-sweep .lyric-word.sung, .lyric-line.active .lyric-main.ktv-sweep .lyric-word.sung.current, .lyric-line.active .lyric-main.ktv-sweep .lyric-word.current, .lyric-line.active .lyric-main.ktv-sweep .lyric-word.is-filling{ color:transparent!important; -webkit-text-fill-color:transparent!important; background:none!important; background-image:none!important; opacity:1!important; text-shadow:none!important; filter:none!important; -webkit-text-stroke:0!important; } html[data-mode="dark"] #fullPlayer .lyric-line.active .lyric-word, html[data-mode="dark"] .lyric-line.active .lyric-word{ color:rgba(235,235,245,.72)!important; } html[data-mode="dark"] #fullPlayer .lyric-line.active .lyric-word.sung, html[data-mode="dark"] .lyric-line.active .lyric-word.sung{ color:var(--green)!important; } #playlistPanel{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; mask-image:none!important; -webkit-mask-image:none!important; padding-top:6px; padding-bottom:12px; box-sizing:border-box; } #fullPlayer #playlistPanel .pl-dur{ color:rgba(60,60,67,.48); font-variant-numeric:tabular-nums; } html[data-mode="dark"] #fullPlayer #playlistPanel .pl-dur{ color:rgba(235,235,245,.42)!important; } html[data-mode="neon"] #fullPlayer #playlistPanel .pl-dur{ color:rgba(190,215,245,.78)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer #playlistPanel .pl-dur{ color:rgba(60,60,67,.48)!important; } .pl-panel-row{display:flex;align-items:center;gap:10px;padding:13px 13px;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;} @media (hover: hover) and (pointer: fine){ .pl-panel-row:hover{background:var(--glass);} } html:not(.tv-mode) .pl-panel-row:active:not(.playing){background:transparent;} .pl-panel-row.playing{ color:var(--green); background:rgba(120,120,128,0.14); box-shadow:none; } .mv-card{flex:0 0 auto;width:220px;cursor:pointer;} .mv-cover{width:220px;height:124px;border-radius:var(--radius-m);overflow:hidden;position:relative; background:linear-gradient(145deg,#1a222a,#0d1215);} .mv-cover::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,") center/22% no-repeat;pointer-events:none;z-index:0;} .mv-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);position:relative;z-index:1;} .mv-card:hover .mv-cover img{transform:scale(1.06);} .mv-dur{position:absolute;right:7px;bottom:7px;font-size:10px;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:5px;z-index:2;} .mv-rank-badge{position:absolute;left:7px;top:7px;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:2;font-family:var(--font-num);} .mv-rank-badge.top1{background:linear-gradient(135deg,#ffd700,#f0a000);color:#1a1200;} .mv-rank-badge.top2{background:linear-gradient(135deg,#e8e8e8,#b0b0b0);color:#222;} .mv-rank-badge.top3{background:linear-gradient(135deg,#e8a060,#c07030);color:#1a1000;} .mv-play-fab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.25);z-index:2;} .mv-card:hover .mv-play-fab{opacity:1;} .mv-play-fab svg{width:36px;height:36px;color:#fff;} .mv-title{font-size:13px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mv-sub{font-size:11px;color:var(--text-2);margin-top:2px;} .mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px 12px;} .mv-grid .mv-card{width:100%;} .mv-grid .mv-cover{width:100%;height:auto;aspect-ratio:16/9;} #mvPlayerView{position:fixed;inset:0;z-index:210;background:#000;display:none;flex-direction:column; touch-action:pan-y;overscroll-behavior:none; transition:transform .4s cubic-bezier(0.22,1,0.36,1),opacity .3s ease;} #mvPlayerView.show{display:flex;} #mvPlayerView video{flex:1;width:100%;object-fit:contain;background:#000;min-height:0;} .mv-top-bar{position:absolute;top:0;left:0;right:0;padding:20px 26px;display:flex;align-items:center;gap:14px; background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);z-index:2; padding-top:max(20px, calc(12px + env(safe-area-inset-top, 0px)));} .mv-top-bar .fp-close{position:static;} .mv-drag-hint{position:absolute;left:50%;top:calc(8px + env(safe-area-inset-top, 0px));transform:translateX(-50%); width:36px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);pointer-events:none;z-index:3;} .radio-card{flex:0 0 auto;width:132px;text-align:center;cursor:pointer;} .radio-cover{width:132px;height:132px;border-radius:50%;overflow:hidden;background:conic-gradient(var(--green),#12864e,var(--green)); padding:3px;} .radio-cover img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;} .radio-name{font-size:12.5px;margin-top:10px;} .channel-sec-head{ display:flex;align-items:center;gap:10px;margin-bottom:14px;min-width:0; } .channel-sec-head .sec-title{flex-shrink:0;margin:0;} .channel-tabs{ display:flex;flex:1;min-width:0;gap:4px;overflow-x:auto;align-items:center; -webkit-overflow-scrolling:touch;padding:2px 0;scrollbar-width:none; } .channel-tabs::-webkit-scrollbar{display:none;} .channel-tab{ flex-shrink:0;padding:5px 12px;border-radius:980px;font-size:14px;font-weight:500; color:var(--text-2);background:transparent;border:none;cursor:pointer; transition:color .2s, background .2s, transform .3s var(--ease-spring); white-space:nowrap;line-height:1.2; } .channel-tab:active{transform:scale(.94);} .channel-tab.active{ color:var(--text-0);background:rgba(255,255,255,.14);font-weight:600; } html[data-mode="dark"] .channel-tab.active{ color:#111;background:#fff; } /* 网易云：榜单/频道切换条（参考截图） */ .ne-panel-switch{ display:inline-flex;align-items:center;gap:0;flex-shrink:0; background:rgba(118,118,128,.14);border-radius:100px;padding:2px; margin-left:6px; } .ne-panel-switch .ne-sw-btn{ border:none;background:transparent;cursor:pointer; font-size:13px;font-weight:600;line-height:1.2; padding:5px 12px;border-radius:100px;color:var(--text-2); transition:background .2s, color .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; } .ne-panel-switch .ne-sw-btn.active{ background:#fff;color:#1c1916; box-shadow:0 1px 4px rgba(0,0,0,.10); font-weight:700; } html[data-mode="dark"] .ne-panel-switch{ background:rgba(118,118,128,.28); } html[data-mode="dark"] .ne-panel-switch .ne-sw-btn{color:rgba(235,235,245,.55);} html[data-mode="dark"] .ne-panel-switch .ne-sw-btn.active{ background:#fff;color:#111; } html[data-mode="neon"] .ne-panel-switch{ background:rgba(0,246,255,0.08); border:1px solid rgba(0,246,255,0.28); } html[data-mode="neon"] .ne-panel-switch .ne-sw-btn{color:rgba(180,210,240,.6);} html[data-mode="neon"] .ne-panel-switch .ne-sw-btn.active{ background:linear-gradient(120deg,#00f6ff,#ff2bd6);color:#03010a; box-shadow:0 0 14px rgba(0,246,255,.35); } html[data-mode="paper"] .ne-panel-switch{ background:rgba(40,30,20,0.07); } html[data-mode="paper"] .ne-panel-switch .ne-sw-btn{color:rgba(40,32,26,0.50);} html[data-mode="paper"] .ne-panel-switch .ne-sw-btn.active{ background:#ffffff;color:#1c1916; border:1px solid rgba(40,30,20,0.08); box-shadow:0 1px 4px rgba(40,30,20,0.08); } #homeChannelRefresh.ne-refresh-link, #homeKwBangRefresh.ne-refresh-link{ color:var(--green)!important; background:transparent!important; border:none!important; box-shadow:none!important; font-weight:600; padding:4px 8px!important; } html[data-mode="paper"] #homeChannelRefresh.ne-refresh-link, html[data-mode="paper"] #homeKwBangRefresh.ne-refresh-link{ color:var(--green)!important; background:transparent!important; border:none!important; box-shadow:none!important; } .channel-sec-head .ne-head-right{ display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0; } .channel-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; padding:4px 2px 8px; } /* 竖版三列；横版多列铺开以显示全部榜单 */ @media (orientation:landscape), (min-width:900px){ .channel-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px 12px;} } html.fp-land .channel-grid, html.is-landscape .channel-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:16px 12px; } .channel-item{ display:flex;flex-direction:column;align-items:stretch;text-align:left; cursor:pointer;-webkit-user-select:none;user-select:none; transition:transform .35s var(--ease-spring); position:relative;min-width:0; } .channel-item:active{transform:scale(.96);} .channel-avatar{ width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;position:relative; /* 统一：不要底部色条/内描边层次不齐，全部无边框；阴影减轻约 50% */ box-shadow:0 8px 24px rgba(0,0,0,.14); border:none; outline:none; background:#1c1c1e; transition:box-shadow .25s, transform .35s var(--ease-spring), border-color .2s; box-sizing:border-box; } .channel-avatar img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; display:block;border:none;outline:none;border-radius:inherit;z-index:1; background:#1c1c1e; } .channel-avatar.no-edge{border:none;} /* 有封面时压掉内联渐变底，避免图片未铺满时底部露出色条 */ .channel-avatar.has-cover{background:#1a1a1e!important;} /* 统一高光；遮罩/滤镜强度约减半，封面更透亮 */ .channel-avatar.has-cover::after, .channel-avatar::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 38%); border-radius:inherit; } .channel-avatar.has-cover .ch-art{display:none;} .channel-avatar .ch-art{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; z-index:1;overflow:hidden; } .channel-avatar .ch-art::before{ content:"";position:absolute;width:140%;height:140%;left:-20%;top:-30%; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.14) 0%, transparent 48%), radial-gradient(circle at 80% 75%, rgba(0,0,0,.11) 0%, transparent 50%); pointer-events:none; } .channel-avatar .ch-art-mark{ position:relative;z-index:2; font-size:28px;font-weight:800;letter-spacing:-0.5px;line-height:1; color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.28); opacity:.95; } .channel-avatar .ch-art-sub{ position:relative;z-index:2;margin-top:6px; font-size:10px;font-weight:600;letter-spacing:.12em; color:rgba(255,255,255,.72);text-transform:uppercase; } .channel-avatar .ch-art-ring{ position:absolute;right:-18%;bottom:-18%;width:62%;aspect-ratio:1;border-radius:50%; border:2px solid rgba(255,255,255,.14);pointer-events:none;z-index:1; } .channel-avatar .ch-art-ring2{ position:absolute;left:-22%;top:-22%;width:55%;aspect-ratio:1;border-radius:50%; background:rgba(255,255,255,.08);pointer-events:none;z-index:0; } .channel-name{ font-size:13px;color:var(--text-0);margin-top:9px;line-height:1.35; width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600; transition:color .2s;text-align:center;letter-spacing:-0.1px; } .channel-item.is-playing .channel-avatar{ border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 2px var(--green), 0 10px 28px rgba(0,0,0,.35); } .channel-item.is-playing .channel-name{ color:var(--green);font-weight:700; } .channel-item.is-playing .channel-avatar .ch-playing{ position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%; background:var(--green);box-shadow:0 2px 10px rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center;z-index:3; } .channel-item.is-playing .channel-avatar .ch-playing svg{ width:12px;height:12px;color:#fff;margin-left:1px; } html[data-mode="dark"] .channel-item.is-playing .channel-avatar{ border-color:rgba(255,255,255,.4); box-shadow:0 0 0 2px #fff, 0 10px 28px rgba(0,0,0,.45); } html[data-mode="dark"] .channel-item.is-playing .channel-name{color:#fff;} html[data-mode="dark"] .channel-item.is-playing .channel-avatar .ch-playing{ background:#fff; } html[data-mode="dark"] .channel-item.is-playing .channel-avatar .ch-playing svg{color:#111;} @media (max-width:860px){ .channel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;} .channel-avatar{border-radius:14px;} .channel-name{font-size:12px;margin-top:7px;} .channel-tab{padding:4px 10px;font-size:13px;} .channel-sec-head{gap:8px;} .channel-avatar .ch-art-mark{font-size:24px;} .channel-item.is-playing .channel-avatar .ch-playing{width:24px;height:24px;right:6px;bottom:6px;} .channel-item.is-playing .channel-avatar .ch-playing svg{width:11px;height:11px;} } @media (min-width:861px){ .channel-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px 14px;} .channel-avatar{border-radius:18px;} .channel-name{font-size:13px;} .channel-avatar .ch-art-mark{font-size:30px;} } html.tv-mode .channel-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px;} html.tv-mode .channel-avatar{border-radius:20px;} html.tv-mode .channel-name{font-size:15px;} .sr-tabs,#srTabs{display:flex;gap:10px;margin:10px 0 14px;flex-wrap:nowrap;overflow-x:auto;align-items:center;} .sr-tab{padding:7px 14px;border-radius:10px;font-size:13px;color:var(--text-1);background:rgba(118,118,128,0.16); white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1.2; writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;font-weight:500;margin:0 2px;} .sr-tab.active{background:rgba(255,255,255,0.14);color:var(--text-0);font-weight:600;} #sourceTabs.sr-tabs{ position:relative; display:flex;flex-wrap:nowrap;gap:0;align-items:stretch;justify-content:space-between; margin:14px 12px 22px;padding:2px; width:auto;max-width:none;box-sizing:border-box; overflow:visible; background:rgba(118,118,128,0.22);border:none;border-radius:980px; backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(0,0,0,0.12); } #sourceTabs .sr-indicator{ position:absolute;top:2px;bottom:2px;left:0; width:0;border-radius:980px;background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.55) inset; pointer-events:none;z-index:0; opacity:1;visibility:visible;display:block; transition:transform .34s cubic-bezier(.34,1.4,.5,1), width .34s cubic-bezier(.34,1.4,.5,1); will-change:transform,width; } #sourceTabs .sr-tab,#sourceTabs .sr-tab[data-src]{ position:relative;z-index:1; flex:1 1 0;min-width:0; padding:8px 4px;margin:0;border-radius:980px; font-size:12.5px;font-weight:600;line-height:1.2; color:rgba(235,235,245,0.58);background:transparent!important;border:none; box-shadow:none!important; transition:color .28s ease, transform .28s var(--ease-spring); letter-spacing:0; text-align:center; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; display:flex;align-items:center;justify-content:center; } #sourceTabs .sr-tab:active{transform:scale(0.96);} #sourceTabs .sr-tab.active[data-src], #sourceTabs .sr-tab.active[data-src="qq"], #sourceTabs .sr-tab.active[data-src="kuwo"], #sourceTabs .sr-tab.active[data-src="netease"], #sourceTabs .sr-tab.active[data-src="kugou"], #sourceTabs .sr-tab.active[data-src="migu"], #sourceTabs .sr-tab.active[data-src="bilibili"]{ color:#111!important;background:transparent!important;border:none; box-shadow:none!important; font-weight:700; } #plTabs.sr-tabs,.hscroll#plTabs{align-items:center;flex-wrap:nowrap;gap:10px;} #hotTags{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:8px;margin:18px auto 0;max-width:560px;padding:0 8px; width:100%;box-sizing:border-box; } .hot-search-tag{ padding:8px 14px;border-radius:12px;font-size:13px; background:rgba(118,118,128,0.16);color:var(--text-1);font-weight:500; margin:0;flex:0 0 auto;text-align:center; } .mine-header{display:flex;align-items:center;gap:14px;padding:16px 4px;} .mine-avatar{width:74px;height:74px;border-radius:50%;overflow:hidden;background:var(--bg-2);border:2px solid var(--glass-border);flex-shrink:0;} .mine-avatar img{width:100%;height:100%;object-fit:cover;} .mine-name{font-size:19px;font-weight:700;line-height:1.3;} .mine-uin{font-size:12px;color:var(--text-2);margin-top:4px;line-height:1.4;} .detail-header{display:flex;align-items:center;gap:14px;padding:10px 2px 6px;} .detail-cover{width:88px;height:88px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--bg-2);} .detail-cover img{width:100%;height:100%;object-fit:cover;display:block;} .detail-meta{flex:1;min-width:0;} .detail-title{font-size:17px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .detail-sub{font-size:11.5px;color:var(--text-2);margin-top:4px;line-height:1.4;} .detail-desc{font-size:11.5px;color:var(--text-2);margin-top:6px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .detail-play-all{flex-shrink:0;padding:9px 14px;font-size:12.5px;} /* ===== immersive playlist / detail header ===== */ html.detail-mode #topbar{ display:none!important; height:0!important;overflow:hidden!important;padding:0!important;margin:0!important; pointer-events:none!important; } /* ===== Solene 式融合：全局固定模糊墙 + 头图遮罩淡出，不用实色补丁 ===== */ .detail-wall{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; opacity:0;visibility:hidden; } html.detail-mode .detail-wall{ opacity:1;visibility:visible; } html.detail-mode #ambientBg, html.detail-mode #ambientVeil, html.detail-mode #grain{ opacity:0!important;visibility:hidden!important; } .detail-wall .dw-amb{ position:absolute;left:-20%;right:-20%;top:-14%;bottom:-14%; background-size:cover; background-position:center 28%; background-repeat:no-repeat; -webkit-filter:blur(36px) saturate(1.45) brightness(0.58); filter:blur(36px) saturate(1.45) brightness(0.58); opacity:0; transition:opacity .4s linear; } .detail-wall .dw-amb.on{opacity:1;} .detail-wall::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:rgba(0,0,0,0.34); } html.detail-mode #view-detail.view, html.detail-mode #viewport #view-detail{ padding-left:0!important; padding-right:0!important; padding-top:0!important; background:transparent!important; } html.detail-mode #view-detail > *{position:relative;z-index:1;} .detail-hero{ position:relative; width:100%; min-height:min(64vh, 460px); max-height:580px; overflow:hidden; margin:0; color:#fff; background:transparent; } /* 清晰封面：遮罩从清晰淡到透明 —— 融合本质是「同一张图从清晰过渡到模糊」 */ .detail-hero-bg{ position:absolute;inset:0;z-index:0; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0.08) 92%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0.08) 92%, transparent 100%); } .detail-hero-bg img{ width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.02); filter:saturate(1.04) brightness(0.94); transform-origin:center 28%; position:relative;z-index:0; opacity:1!important;visibility:visible!important; } /* 防止子元素/遮罩把头图「盖没」：bg 层明确在 veil 之下、body 之下，但自身可见 */ .detail-hero-bg{ z-index:0!important; opacity:1!important; visibility:visible!important; } /* 顶部压暗（状态栏/返回钮可读） */ .detail-hero-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 16%, transparent 36%); } /* 只压标题区暗度，末端归透明 —— 绝不糊实色补丁（Solene 注释里踩过的坑） */ .detail-hero::after{ content:""; position:absolute;left:0;right:0;bottom:0; height:48%; z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.22) 78%, rgba(0,0,0,0) 100%); } .detail-back{ position:absolute;z-index:4; left:10px;top:calc(8px + var(--safe-t)); width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.28);color:#fff; backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border:1px solid rgba(255,255,255,.12); box-shadow:0 4px 14px rgba(0,0,0,.25); } .detail-back svg{width:20px;height:20px;display:block;} .detail-back:active{transform:scale(0.92);opacity:.9;} .detail-hero-body{ position:relative;z-index:2; display:flex;flex-direction:column;justify-content:flex-end; min-height:min(64vh, 460px); padding:calc(54px + var(--safe-t)) 20px 22px; box-sizing:border-box; } .detail-hero .detail-title{ font-size:22px;font-weight:700;line-height:1.32;letter-spacing:-0.2px; color:#fff;text-shadow:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .detail-hero .detail-sub{ margin-top:8px;font-size:13px;color:rgba(255,255,255,.78);line-height:1.4; text-shadow:0 1px 6px rgba(0,0,0,.35); } .detail-hero .detail-desc{ margin-top:8px;font-size:12px;color:rgba(255,255,255,.52);line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .detail-hero-actions{ display:flex;align-items:center;justify-content:space-between; gap:10px;margin-top:16px;width:100%; } .detail-hero .detail-play-all{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:40px;min-height:40px;max-height:40px; padding:0 18px;border-radius:980px; font-size:14px;font-weight:600;letter-spacing:0.1px; box-sizing:border-box;flex-shrink:0;line-height:1; box-shadow:none;border:1px solid #fff; background:#fff!important;color:#111!important; min-width:112px; transition:transform .12s ease, opacity .12s ease; } .detail-hero .detail-play-all svg{width:14px;height:14px;color:#111!important;flex-shrink:0;} .detail-hero .detail-play-all:active{transform:scale(0.95);opacity:.9;} /* 随机播放：与播放按钮同高的圆形图标钮 */ .detail-shuffle-btn{ width:40px;height:40px;min-width:40px;min-height:40px; border-radius:50%;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:none; transition:transform .12s ease, opacity .12s ease, background .15s ease; } .detail-shuffle-btn svg{width:18px;height:18px;display:block;} .detail-shuffle-btn:active{transform:scale(0.92);opacity:.9;} .detail-hero-actions-right{display:inline-flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;} .detail-fav-btn{ width:40px;height:40px;min-width:40px;min-height:40px; border-radius:50%;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:none; transition:transform .12s ease, opacity .12s ease, background .15s ease, color .15s ease; } .detail-fav-btn svg{width:18px;height:18px;display:block;} .detail-fav-btn:active{transform:scale(0.92);opacity:.9;} .detail-fav-btn.on{color:#FF6BB5;border-color:rgba(255,107,181,.55);background:rgba(255,107,181,.18);} .detail-fav-btn.on svg{color:#FF6BB5;} .detail-fav-btn.busy{opacity:.55;pointer-events:none;} html[data-mode="dark"] .detail-hero .detail-play-all{ background:#fff!important;color:#111!important; box-shadow:none!important; } html[data-mode="neon"] .detail-hero .detail-play-all{ background:linear-gradient(135deg,#00f6ff,#ff2bd6)!important; color:#03010a!important; box-shadow:0 0 18px rgba(0,246,255,.4)!important; border:none!important; } html[data-mode="neon"] .detail-hero .detail-play-all svg{color:#03010a!important;} #view-detail .song-list, #view-detail .voice-sort-bar, #view-detail #detailLoadMore, #view-detail .voice-all-grid, #view-detail .sec-head:not(.detail-hero *){ padding-left:16px;padding-right:16px; box-sizing:border-box; } #view-detail .song-list{ margin-top:0!important; padding-top:8px; background:transparent; } #view-detail .voice-sort-bar{margin-top:4px;margin-bottom:4px;} @media (max-width:860px){ .detail-hero{min-height:min(60vh, 420px);} .detail-hero-body{min-height:min(60vh, 420px);padding:calc(50px + var(--safe-t)) 16px 18px;} .detail-hero .detail-title{font-size:20px;} .detail-hero .detail-play-all{padding:10px 18px;font-size:13.5px;} } .mine-vip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:linear-gradient(90deg,#ffd60a,#ff9f0a);color:#1c1200; padding:3px 10px;border-radius:100px;margin-top:6px;font-weight:700;} .mine-logout{margin-left:auto;font-size:12px;color:var(--text-2);padding:8px 16px;border-radius:100px;background:var(--glass);} .mine-pl-tabs{ position:relative; display:flex;align-items:stretch;justify-content:space-between;flex-wrap:nowrap;gap:0; margin:4px 0 14px;padding:2px; user-select:none;-webkit-user-select:none; background:rgba(118,118,128,0.22);border-radius:980px; backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(0,0,0,0.12); overflow:visible; } .mine-pl-indicator{ position:absolute;top:2px;bottom:2px;left:0; width:0;border-radius:980px;background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.55) inset; pointer-events:none;z-index:0; transition:transform .34s cubic-bezier(.34,1.4,.5,1), width .34s cubic-bezier(.34,1.4,.5,1); will-change:transform,width; } .mine-pl-tab{ position:relative;z-index:1; flex:1 1 0;min-width:0; text-align:center;font-size:13px;font-weight:600; color:rgba(235,235,245,0.58); padding:8px 6px;cursor:pointer;line-height:1.3; background:transparent!important;border:none;border-radius:980px; box-shadow:none!important; transition:color .28s ease, transform .28s var(--ease-spring); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; display:flex;align-items:center;justify-content:center; } .mine-pl-tab.active{ color:#111!important;font-weight:700; background:transparent!important;box-shadow:none!important; } .mine-pl-tab:active{transform:scale(0.96);opacity:1} .mine-pl-sep{display:none!important} .mine-pl-pane{display:none} .mine-pl-pane.active{display:grid} .mine-pl-pane#mineLikedPane.active,.mine-pl-pane#mineHistoryPane.active{display:block} #toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,20px);z-index:2147483000;padding:12px 22px; border-radius:14px;background:rgba(44,44,46,.94);backdrop-filter:blur(20px) saturate(1.4);font-size:14px; opacity:0;pointer-events:none;transition:transform .5s var(--ease-spring),opacity .3s var(--ease);border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.4);font-weight:500;} #toast.show{opacity:1;transform:translate(-50%,0);} /* toast 必须高于全屏播放页 z-index:200，否则播放页看不到提示 */ #toast, #toast.show, .toast{ z-index:2147483000!important; pointer-events:none!important; } .sheet-mask{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s;} .sheet-mask.show{opacity:1;pointer-events:auto;} html.tv-mode{--pad-x:54px;} html.tv-mode #topbar{padding:13px calc(var(--pad-x) + var(--safe-r)) 14px calc(var(--pad-x) + var(--safe-l));grid-template-columns:44px minmax(0,1fr) 44px;column-gap:16px;} html.tv-mode.fm-ext-fullscreen #topbar{padding-top:calc(15px + var(--safe-t));} html.tv-mode .brand{width:44px;height:44px;} html.tv-mode .brand-mark{width:44px;height:44px;border-radius:50%;} html.tv-mode .brand-mark svg{width:40px;height:40px;} html.tv-mode .search-box{height:44px;padding:0 18px;border-radius:999px;} html.tv-mode .avatar-btn{width:44px;height:44px;} html.tv-mode .view{padding:6px calc(var(--pad-x) + var(--safe-r)) calc(112px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));} .home-ptr{ position:absolute;left:0;right:0;top:0;height:0;overflow:visible; display:flex;align-items:flex-end;justify-content:center; pointer-events:none;z-index:5; } .home-ptr-inner{ display:flex;align-items:center;justify-content:center;gap:8px; padding:0 0 10px;min-height:0; color:var(--text-2);font-size:13px;font-weight:500; opacity:0;transform:translateY(-8px); transition:opacity .15s ease; } .home-ptr.show .home-ptr-inner{opacity:1;transform:translateY(0);} .home-ptr.ready .home-ptr-inner{color:var(--text-0);} .home-ptr.loading .home-ptr-inner{opacity:1;} .home-ptr-spinner{ width:16px;height:16px;border-radius:50%; border:2px solid rgba(128,128,128,.25); border-top-color:var(--text-0, #111); box-sizing:border-box; opacity:0; } .home-ptr.loading .home-ptr-spinner{ opacity:1; animation:homePtrSpin .7s linear infinite; } @keyframes homePtrSpin{to{transform:rotate(360deg);}} #view-home.ptr-pulling{overflow-y:hidden;} html.tv-mode .nav-item{padding:12px 24px;font-size:16px;} html.tv-mode .avatar-btn{display:none;} html.tv-mode .card,html.tv-mode .mv-card{width:180px;} html.tv-mode .card-cover,html.tv-mode .mv-cover{width:180px;} html.tv-mode .mv-cover{height:100px;} html.tv-mode *{transition:transform .18s var(--ease) !important;} html.tv-mode .grain,html.tv-mode #grain{display:none;} .tv-focus{outline:none;transform:scale(1.08);z-index:5;box-shadow:0 0 0 3px var(--green),0 16px 40px -10px rgba(0,0,0,.6); border-radius:var(--radius-m);} @media (max-width:400px){ #playerBar .pb-meta{min-width:64px;flex:1 1 0;max-width:calc(100% - 140px);} #playerBar #pbModeBtn{display:none;} #playerBar #pbQuality{display:none;} #playerBar .pb-ctrls{gap:2px;} #playerBar .pb-title{font-size:14px;} #playerBar .pb-artist{font-size:11.5px;} } html.tv-mode #playerBar{ gap:14px;padding:14px 20px;margin:0 24px calc(14px + var(--safe-b));width:auto; border-radius:999px;border:1px solid rgba(255,255,255,.16); min-height:72px; } html.tv-mode .pb-cover{width:56px;height:56px;} html.tv-mode .pb-meta{width:auto;flex:1;min-width:0;max-width:none;} html.tv-mode .pb-like{display:none;} html.tv-mode .pb-center{max-width:none;flex:0 0 auto;gap:4px;} html.tv-mode .pb-progress{display:none;} html.tv-mode .pb-right{display:none;} html.tv-mode .pb-mini-progress{display:block;border-radius:999px 999px 0 0;overflow:hidden;left:22px;right:22px;width:auto;} html:not(.tv-mode) .tv-only{display:none !important;} html.tv-mode .mobile-only{display:none !important;} @media (max-width:860px){ :root{--pad-x:14px;} #mainNav{display:none;} #topbar{column-gap:10px; padding:11px calc(var(--pad-x) + var(--safe-r)) 8px calc(var(--pad-x) + var(--safe-l)); grid-template-columns:34px minmax(0,1fr) 34px;} html.fm-ext-fullscreen #topbar{padding-top:calc(9px + var(--safe-t));} .brand{width:34px;height:34px;} .brand-mark{width:34px;height:34px;border-radius:50%;} .brand-mark svg{width:30px;height:30px;} .search-box{height:34px;padding:0 12px;border-radius:999px;} .avatar-btn{width:34px;height:34px;} .view{padding:6px calc(var(--pad-x) + var(--safe-r)) calc(68px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));} .hero{height:200px;} .hero-info{left:18px;bottom:18px;right:18px;} .hero-title{font-size:20px;max-width:90%;} .hero-desc{display:none;} .hero-dots{right:18px;bottom:20px;} .rank-grid{grid-template-columns:1fr;} .hscroll .card,.hscroll .card-cover{width:110px;} .hscroll .card-cover{height:110px;} /* 手机竖屏歌单：三列；≥700 横屏由上方 orientation 规则接管七列 */ .grid-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 11px; } @media (max-width:699px){ .grid-cols, html.fp-land .grid-cols, html.is-landscape .grid-cols{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 11px!important; } } .grid-cols .card{width:100%;} .grid-cols .card-cover{width:100%;height:auto;aspect-ratio:1/1;} .mv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;} .mv-grid .mv-card{width:100%;} .mv-grid .mv-cover{width:100%;height:auto;aspect-ratio:16/9;} .hscroll .mv-card,.hscroll .mv-cover{width:160px;} .hscroll .mv-cover{height:90px;} .sec{margin:14px 0 10px;} .view{padding-bottom:calc(88px + var(--safe-b));} .pb-icon-btn{display:none;} .login-card{padding:28px 22px 24px;width:min(360px,92vw);} .sec{margin:18px 0 12px;} .detail-header{gap:12px;padding:6px 0 4px;align-items:center;} .detail-cover{width:72px;height:72px;border-radius:12px;} .detail-title{font-size:15px;} .detail-sub{font-size:11px;} .detail-desc{-webkit-line-clamp:2;margin-top:4px;} .detail-play-all{padding:8px 12px;font-size:12px;} .mine-header{padding:12px 2px;gap:12px;} .mine-avatar{width:56px;height:56px;} .mine-name{font-size:16px;} #fullPlayer{flex-direction:column;} .fp-left{ display:flex;width:100%;flex:0 0 auto; padding:calc(82px + var(--safe-t)) 16px 14px; gap:0;justify-content:center;align-items:center;order:1; position:relative;z-index:2; } .fp-art{width:100%;align-items:center;} .fp-art-stage{ width:min(62vw,260px)!important; height:min(62vw,260px)!important; } .fp-dock{ position:absolute;left:0;right:0;bottom:0; z-index:30; display:flex!important;flex-direction:column;align-items:center; width:100%;box-sizing:border-box; padding:8px 18px calc(28px + var(--safe-b)); background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } .fp-dock .fp-quick{ display:flex!important;align-items:center;justify-content:center; gap:28px;margin:16px 0 0!important;width:100%; } .fp-dock .fp-quick button{ width:44px!important;height:44px!important;flex-shrink:0; color:rgba(235,245,255,.92)!important;opacity:1!important; } .fp-dock .fp-quick button svg{width:22px!important;height:22px!important;} #fpModeBtn{width:44px!important;height:44px!important;} #fpModeBtn svg{width:22px!important;height:22px!important;} #fpListBtn.fp-list-btn svg, .fp-dock .fp-list-btn svg{width:22px!important;height:22px!important;} .fp-dock .fp-quality-btn, .fp-dock .fp-speed-btn, #fullPlayer .fp-dock .fp-quality-btn, #fullPlayer .fp-dock .fp-speed-btn{ width:44px!important;height:44px!important;min-width:44px!important;padding:0!important; border-radius:50%!important; font-size:0!important;color:rgba(235,245,255,.92)!important; } .fp-dock .fp-quality-btn svg, .fp-dock .fp-speed-btn svg, #fullPlayer .fp-dock .fp-quality-btn svg, #fullPlayer .fp-dock .fp-speed-btn svg{ width:22px!important;height:22px!important; } .fp-dock .fp-controls{ display:flex!important;flex-direction:column;align-items:center; width:100%;max-width:100%; gap:10px!important;margin:0;padding:0; box-sizing:border-box; } .fp-dock .fp-progress{display:flex!important;width:100%;align-items:center;gap:8px;} .fp-dock .fp-bar{height:3px!important;border-radius:2px!important;} .fp-dock .fp-bar-knob{width:11px!important;height:11px!important;} .fp-dock .fp-ctrls{ display:flex!important;align-items:center;justify-content:center; gap:20px;width:100%; } .fp-dock .fp-ctrl-btn{ width:52px;height:52px;color:rgba(235,245,255,.92)!important;opacity:1!important; } .fp-dock .fp-ctrl-btn svg{width:28px;height:28px;} html:not([data-mode="squid"]) .fp-dock .fp-play{ width:76px;height:76px;flex-shrink:0; background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html:not([data-mode="squid"]) .fp-dock .fp-play svg{width:44px;height:44px;color:rgba(255,255,255,.95)!important;} .fp-dock .fp-ctrl-btn{width:56px!important;height:56px!important;} .fp-dock .fp-ctrl-btn svg{width:30px!important;height:30px!important;} /* 中间三键再强调 */ .fp-dock #fpPrev.fp-ctrl-btn, .fp-dock #fpNext.fp-ctrl-btn{width:56px!important;height:56px!important;} .fp-dock #fpPrev svg, .fp-dock #fpNext svg{width:30px!important;height:30px!important;} html:not([data-mode="squid"]) .fp-dock .fp-play, html:not([data-mode="squid"]) .fp-dock #fpPlay{width:80px!important;height:80px!important;} html:not([data-mode="squid"]) .fp-dock .fp-play svg, html:not([data-mode="squid"]) .fp-dock #fpPlay svg{width:46px!important;height:46px!important;} /* 换源/歌词图标保持精致小尺寸（覆盖横屏/大屏强制放大） */ .fp-dock #fpSrcBtn svg, .fp-dock #fpLrcBtn svg, #fullPlayer .fp-dock #fpSrcBtn svg, #fullPlayer .fp-dock #fpLrcBtn svg{ width:18px!important;height:18px!important; } .fp-dock #fpSrcBtn.fp-ctrl-btn, .fp-dock #fpLrcBtn.fp-ctrl-btn{ width:40px!important;height:40px!important; } .fp-dock .fp-time{color:rgba(200,220,245,.55)!important;} .fp-dock .fp-bar{background:rgba(255,255,255,.22)!important;} .fp-dock .fp-bar-fill{background:#fff!important;} .fp-dock .fp-bar-knob{background:#fff!important;} /* 有海报模糊时：浅色控件（覆盖上面的深色） */ #fullPlayer.fp-has-cover .fp-dock .fp-quick button, #fullPlayer.fp-has-cover .fp-dock .fp-ctrl-btn, #fullPlayer.fp-has-cover .fp-dock .fp-quality-btn, #fullPlayer.fp-has-cover .fp-dock .fp-speed-btn{ color:rgba(255,255,255,.92)!important; } #fullPlayer.fp-has-cover .fp-dock .fp-time{color:rgba(255,255,255,.55)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } #fullPlayer.fp-has-cover .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-bar{background:rgba(255,255,255,.22)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-bar-fill{background:#fff!important;} #fullPlayer.fp-has-cover .fp-dock .fp-bar-knob{background:#fff!important;box-shadow:0 1px 4px rgba(0,0,0,.35)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-quick button.on{color:var(--danger)!important;} #fullPlayer.fp-has-cover .fp-dock .fp-speed-btn.on{color:var(--green)!important;} .fp-right{ width:100%; flex:1 1 auto; min-height:0; padding:46px 16px 0; margin-bottom:calc(150px + var(--safe-b)); display:flex;flex-direction:column; order:2;position:relative;z-index:1; overflow:hidden; } .fp-tabs{justify-content:center;gap:32px;margin-bottom:12px;flex-shrink:0;} #lyricsWrap,#playlistPanel{ flex:1 1 auto;min-height:0;max-height:22vh; overflow-y:auto;-webkit-overflow-scrolling:touch; } .lyric-line{font-size:13px;line-height:1.55;padding:1px 6px;} .lyric-line.active{font-size:24px;} #lyricsWrap,#playlistPanel{ flex:1 1 auto;min-height:0;max-height:none; } #lyricsWrap{ mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%); } #playlistPanel{ mask-image:none; -webkit-mask-image:none; padding-top:8px; padding-bottom:16px; box-sizing:border-box; } #fullPlayer:not(.is-landscape) .fp-tabs{ margin-bottom:12px; gap:32px; } #fullPlayer:not(.is-landscape) .pl-panel-row{ padding-top:13px; padding-bottom:13px; } .lyric-line{font-size:14px;line-height:1.7;padding:3px 6px;} .lyric-line.active{font-size:24px;} } /* ===== 竖屏统一走手机竖版（含大屏平板竖持，不看宽度断点） ===== */ #fullPlayer:not(.is-landscape){ flex-direction:column!important; } #fullPlayer:not(.is-landscape) .fp-left{ display:flex!important;width:100%!important;max-width:100%!important; flex:0 0 auto!important;flex-basis:auto!important; padding:calc(82px + var(--safe-t)) 16px 14px!important; gap:0!important;justify-content:center!important;align-items:center!important; order:1!important;position:relative!important;z-index:2!important; margin:0!important;box-sizing:border-box!important;overflow:visible!important; height:auto!important; } #fullPlayer:not(.is-landscape) .fp-art{width:100%!important;align-items:center!important;} #fullPlayer:not(.is-landscape) .fp-art-stage{ width:min(62vw, min(38vh, 320px))!important; height:min(62vw, min(38vh, 320px))!important; } #fullPlayer:not(.is-landscape) .fp-topbar{ position:absolute!important;left:0!important;right:0!important;top:0!important; width:100%!important;max-width:100%!important; display:flex!important;align-items:center!important;justify-content:flex-start!important; z-index:8!important;pointer-events:none!important; min-height:calc(52px + var(--safe-t))!important; padding:calc(10px + var(--safe-t)) 12px 8px!important; box-sizing:border-box!important; } #fullPlayer:not(.is-landscape) .fp-topbar .fp-close, #fullPlayer:not(.is-landscape) #fpClose{ display:none!important;pointer-events:none!important; width:0!important;height:0!important;opacity:0!important;overflow:hidden!important; } #fullPlayer:not(.is-landscape) .fp-topbar .fp-track-info{ display:flex!important;flex:1!important;min-width:0!important;max-width:none!important; flex-direction:column!important;align-items:center!important;justify-content:center!important; text-align:center!important;margin:0!important;padding:0 4px!important; pointer-events:auto!important;position:relative!important;z-index:1!important; transform:none!important; } #fullPlayer:not(.is-landscape) .fp-topbar .fp-track-name, #fullPlayer:not(.is-landscape) #fpTitle{ display:block!important;width:100%!important;text-align:center!important; font-size:18px!important;font-weight:600!important;line-height:1.28!important; letter-spacing:-0.22px!important; font-family:var(--font-display)!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } #fullPlayer:not(.is-landscape) .fp-topbar .fp-track-artist, #fullPlayer:not(.is-landscape) #fpArtist{ display:block!important;width:100%!important;text-align:center!important; font-size:12px!important;line-height:1.2!important;margin-top:0!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } #fullPlayer:not(.is-landscape) .fp-topbar .fp-top-spacer{ display:none!important;width:0!important;height:0!important;min-width:0!important;overflow:hidden!important; } #fullPlayer:not(.is-landscape) .fp-dock{ position:absolute!important;left:0!important;right:0!important;bottom:0!important; width:100%!important;max-width:100%!important; z-index:30!important; display:flex!important;flex-direction:column!important;align-items:center!important; box-sizing:border-box!important; padding:8px 18px calc(28px + var(--safe-b))!important; margin:0!important; } #fullPlayer:not(.is-landscape) .fp-dock .fp-controls{ display:flex!important;flex-direction:column!important;align-items:center!important; width:100%!important;max-width:100%!important; gap:10px!important;margin:0!important;padding:0!important; box-sizing:border-box!important; } #fullPlayer:not(.is-landscape) .fp-dock .fp-progress{ display:flex!important;width:100%!important;align-items:center!important;gap:8px!important; margin:0!important;padding:0!important; } #fullPlayer:not(.is-landscape) .fp-dock .fp-ctrls{ display:flex!important;align-items:center!important;justify-content:center!important; gap:20px!important;width:100%!important; } #fullPlayer:not(.is-landscape) .fp-dock .fp-quick{ display:flex!important;align-items:center!important;justify-content:center!important; gap:28px!important;margin:16px 0 0!important;width:100%!important; } #fullPlayer:not(.is-landscape) .fp-dock .fp-bar{height:3px!important;border-radius:2px!important;} #fullPlayer:not(.is-landscape) .fp-dock .fp-bar-knob{width:11px!important;height:11px!important;} #fullPlayer:not(.is-landscape) .fp-right{ width:100%!important;max-width:100%!important; flex:1 1 auto!important;flex-basis:auto!important;min-height:0!important; height:auto!important; padding:8px 16px 0!important; /* 竖版多留底部空间，少露一行歌词，避免被播放控件压住 */ margin:0 0 calc(188px + var(--safe-b)) 0!important; display:flex!important;flex-direction:column!important; order:2!important;position:relative!important;z-index:1!important; overflow:hidden!important;box-sizing:border-box!important; background:transparent!important; } #fullPlayer:not(.is-landscape) .fp-tabs{ justify-content:center!important;gap:32px!important; margin-bottom:12px!important;flex-shrink:0!important;width:100%!important; } #fullPlayer:not(.is-landscape) .fp-tab{ font-size:16px!important;padding-bottom:8px!important; } #fullPlayer:not(.is-landscape) #lyricsWrap, #fullPlayer:not(.is-landscape) #playlistPanel{ flex:1 1 auto!important;min-height:0!important;max-height:none!important; overflow-y:auto!important;-webkit-overflow-scrolling:touch; width:100%!important;margin:0!important; } #fullPlayer:not(.is-landscape) #lyricsList{ text-align:center!important; } #fullPlayer:not(.is-landscape) #playlistPanel{ text-align:left!important; mask-image:none!important;-webkit-mask-image:none!important; padding-top:8px!important;padding-bottom:16px!important;box-sizing:border-box!important; } #fullPlayer:not(.is-landscape) .pl-panel-row{ justify-content:flex-start!important; padding-left:13px!important;padding-right:13px!important; } #fullPlayer:not(.is-landscape) .pl-panel-row .pl-idx{ display:block!important;width:22px!important;flex:0 0 22px!important; overflow:visible!important;margin:0!important;padding:0!important; } #fullPlayer:not(.is-landscape) .lyric-line{ font-size:14px!important;line-height:1.7!important;padding:3px 6px!important; text-align:center!important; } #fullPlayer:not(.is-landscape) .lyric-line.active{ font-size:24px!important; } #fullPlayer.is-landscape{ flex-direction:row!important; } #fullPlayer.is-landscape #fpBg{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; z-index:0!important; } #fullPlayer.is-landscape .fp-left{ width:50%!important;max-width:none!important;height:100%!important; flex:0 0 50%!important; padding:calc(12px + var(--safe-t)) 20px calc(140px + var(--safe-b))!important; gap:10px!important;justify-content:center!important;align-items:center!important; position:relative!important;z-index:2!important; order:0!important;margin:0!important; box-sizing:border-box!important;overflow:hidden!important; } #fullPlayer.is-landscape .fp-art-stage{ width:min(52vh,280px)!important;height:min(52vh,280px)!important; } #fullPlayer.is-landscape .fp-topbar{ position:absolute!important;left:0!important;right:auto!important; width:50%!important;max-width:50%!important;top:0!important; display:flex!important;justify-content:center!important;align-items:center!important; z-index:8!important;pointer-events:none!important; min-height:calc(72px + var(--safe-t))!important; padding:calc(10px + var(--safe-t)) 12px 8px!important; box-sizing:border-box!important; } /* 横屏：左上角返回 — 毛玻璃圆钮，垂直对齐歌名行 */ #fullPlayer.is-landscape .fp-topbar .fp-close, #fullPlayer.is-landscape #fpClose, #fullPlayer.show.is-landscape .fp-topbar .fp-close, #fullPlayer.show.is-landscape #fpClose, #fullPlayer.brush-mode.is-landscape .fp-topbar .fp-close, #fullPlayer.brush-mode.is-landscape #fpClose{ display:flex!important; align-items:center!important; justify-content:center!important; pointer-events:auto!important; position:absolute!important; left:max(12px, var(--safe-l))!important; /* 与歌名行对齐：topbar padding-top(10+safe) + track-info margin-top(20) */ top:calc(30px + var(--safe-t))!important; transform:none!important; margin:0!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; padding:0!important; border:1px solid rgba(255,255,255,0.22)!important; border-radius:50%!important; opacity:1!important; overflow:visible!important; visibility:visible!important; z-index:30!important; color:rgba(255,255,255,0.95)!important; background:rgba(255,255,255,0.18)!important; box-shadow: 0 2px 14px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.28)!important; backdrop-filter:blur(18px) saturate(1.45)!important; -webkit-backdrop-filter:blur(18px) saturate(1.45)!important; -webkit-tap-highlight-color:transparent; } #fullPlayer.is-landscape .fp-topbar .fp-close svg, #fullPlayer.is-landscape #fpClose svg, #fullPlayer.show.is-landscape .fp-topbar .fp-close svg, #fullPlayer.show.is-landscape #fpClose svg{ width:22px!important; height:22px!important; display:block!important; pointer-events:none!important; color:inherit!important; fill:currentColor!important; } html[data-mode="paper"] #fullPlayer.is-landscape .fp-topbar .fp-close, html[data-mode="paper"] #fullPlayer.show.is-landscape #fpClose{ color:#5c564f!important; background:rgba(255,255,255,0.55)!important; border-color:rgba(40,30,20,0.12)!important; box-shadow:0 2px 12px rgba(40,30,20,0.10), inset 0 1px 0 rgba(255,255,255,0.7)!important; } html[data-mode="dark"] #fullPlayer.is-landscape .fp-topbar .fp-close, html[data-mode="dark"] #fullPlayer.show.is-landscape #fpClose{ color:rgba(235,235,245,0.95)!important; background:rgba(255,255,255,0.12)!important; border-color:rgba(255,255,255,0.16)!important; } html[data-mode="neon"] #fullPlayer.is-landscape .fp-topbar .fp-close, html[data-mode="neon"] #fullPlayer.show.is-landscape #fpClose{ color:rgba(230,245,255,0.95)!important; background:rgba(0,246,255,0.12)!important; border-color:rgba(0,246,255,0.28)!important; box-shadow:0 0 16px rgba(0,246,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2)!important; } /* 横屏：歌名/歌手在左半边水平居中 */ #fullPlayer.is-landscape .fp-topbar .fp-track-info{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; text-align:center!important; width:auto!important;max-width:calc(100% - 88px)!important; margin:20px auto 0!important;padding:0 8px!important; pointer-events:auto!important;position:relative!important;z-index:1!important; transform:translateY(0); } #fullPlayer.is-landscape .fp-topbar .fp-track-name, #fullPlayer.is-landscape #fpTitle{ display:block!important;width:100%!important;text-align:center!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; font-size:32px!important;font-weight:700!important;line-height:1.25!important; } #fullPlayer.is-landscape .fp-topbar .fp-track-artist, #fullPlayer.is-landscape #fpArtist{ display:block!important;width:100%!important;text-align:center!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; font-size:15px!important;line-height:1.3!important;margin-top:4px!important; font-weight:500!important; } #fullPlayer.is-landscape .fp-topbar .fp-top-spacer{display:none!important;} #fullPlayer.is-landscape .fp-right{ flex:0 0 50%!important;width:50%!important;max-width:50%!important;height:100%!important; padding:calc(14px + var(--safe-t)) 24px calc(14px + var(--safe-b))!important; position:relative!important;z-index:5!important;isolation:isolate!important; box-sizing:border-box!important;overflow:hidden!important; order:0!important;margin:0!important; display:flex!important;flex-direction:column!important;background:transparent!important; } #fullPlayer.is-landscape .fp-tabs{ margin-bottom:10px!important;justify-content:center!important; position:relative!important;z-index:2!important;flex-shrink:0!important;gap:28px!important; width:100%!important; } #fullPlayer.is-landscape .fp-tab{ font-size:18px!important; padding-bottom:10px!important; letter-spacing:0.02em; } #fullPlayer.is-landscape .fp-tab.active{ font-weight:700!important; } #fullPlayer.is-landscape #lyricsWrap, #fullPlayer.is-landscape #playlistPanel{ position:relative!important;z-index:1!important; flex:1 1 auto!important;min-height:0!important;max-height:none!important;margin:0!important; } #fullPlayer.is-landscape #lyricsList{ text-align:center!important; } #fullPlayer.is-landscape #playlistPanel{ text-align:left!important; mask-image:none!important; -webkit-mask-image:none!important; } #fullPlayer.is-landscape .pl-panel-row{ justify-content:flex-start!important; gap:12px!important; padding-left:7px!important; padding-right:7px!important; } /* 横屏播放列表去掉序号，竖屏保持；歌名与时长留空，时长继续靠右 */ #fullPlayer.is-landscape .pl-panel-row .pl-idx{ display:none!important; width:0!important; margin:0!important; padding:0!important; overflow:hidden!important; flex:0 0 0!important; } #fullPlayer.is-landscape .pl-panel-row > span:nth-child(2){ flex:1 1 auto!important; min-width:0!important; max-width:none!important; text-align:left!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #fullPlayer.is-landscape .pl-panel-row .pl-dur{ flex:0 0 auto!important; margin-left:auto!important; text-align:right!important; white-space:nowrap!important; } #fullPlayer.is-landscape .lyric-line{font-size:15px!important;line-height:1.75!important;text-align:center!important;padding:3px 12px!important;} #fullPlayer.is-landscape .lyric-line.active{font-size:24px!important;} #fullPlayer.is-landscape .empty-state.lyric-empty, #fullPlayer.is-landscape .empty-state.lyric-pure{ text-align:center!important;align-items:center!important; } #fullPlayer.is-landscape .fp-left, #fullPlayer.is-landscape .fp-right{ background:transparent!important; } #fullPlayer.is-landscape .fp-dock{ position:absolute!important;left:0!important;right:auto!important; width:50%!important;max-width:none!important;bottom:0!important; padding:10px 20px calc(12px + var(--safe-b))!important; box-sizing:border-box!important;z-index:6!important; background:transparent!important; display:flex!important;flex-direction:column!important;align-items:center!important; } #fullPlayer.is-landscape .fp-dock .fp-controls{width:100%!important;max-width:100%!important;gap:12px!important;margin:0!important;} #fullPlayer.is-landscape .fp-dock .fp-ctrls{gap:18px!important;} #fullPlayer.is-landscape .fp-dock .fp-play{width:56px!important;height:56px!important;} #fullPlayer.is-landscape .fp-dock .fp-ctrl-btn{width:46px!important;height:46px!important;} #fullPlayer.is-landscape .fp-dock .fp-ctrl-btn svg{width:22px!important;height:22px!important;} #fullPlayer.is-landscape .fp-dock .fp-play svg{width:22px!important;height:22px!important;} #fullPlayer.is-landscape .fp-dock .fp-progress{gap:8px!important;width:100%!important;} #fullPlayer.is-landscape .fp-dock .fp-bar{height:3px!important;} #fullPlayer.is-landscape .fp-dock .fp-time{font-size:11px!important;width:34px!important;} #fullPlayer.is-landscape .fp-dock .fp-quick{gap:20px!important;margin-top:14px!important;width:100%!important;} #fullPlayer.is-landscape .fp-dock .fp-quick button{width:34px!important;height:34px!important;} #fullPlayer.is-landscape .fp-dock .fp-quick button svg{width:18px!important;height:18px!important;} #fullPlayer.is-landscape .fp-dock #fpListBtn.fp-list-btn svg, #fullPlayer.is-landscape .fp-dock .fp-list-btn svg{width:19px!important;height:19px!important;} @media (max-width:860px) and (orientation:landscape){ #playerBar{ height:66px!important;min-height:66px!important; width:min(480px, calc(100% - 40px))!important; max-width:min(480px, calc(100% - 40px))!important; padding:8px 14px 8px 6px!important;gap:12px!important; bottom:calc(12px + var(--safe-b))!important; } #playerBar .pb-meta{min-width:72px;flex:1 1 0;max-width:calc(100% - 160px);} #playerBar .pb-center{max-width:none;flex:0 0 auto;} #playerBar .pb-ctrls{gap:4px;} #playerBar .pb-ctrl-btn{width:40px;height:40px;} #playerBar .pb-ctrl-btn svg{width:22px;height:22px;} #playerBar .pb-play{width:48px!important;height:48px!important;} #playerBar .pb-play svg{width:20px!important;height:20px!important;} #playerBar .pb-cover{ width:92px!important;height:92px!important; margin:-16px 0 -16px -26px!important; } #playerBar .pb-title{font-size:16px!important;} #playerBar .pb-artist{font-size:13px!important;} #playerBar .pb-list-btn{width:42px!important;height:42px!important;} #playerBar .pb-list-btn svg{width:20px!important;height:20px!important;} #playerBar #pbModeBtn{width:32px;height:32px;} #playerBar #pbQuality{width:auto;min-width:32px;padding:0 4px;font-size:11px;} .view{padding:6px calc(var(--pad-x) + var(--safe-r)) calc(60px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));} .hero{height:140px;} } @media (min-width:861px){ #fullPlayer.is-landscape .fp-left, #fullPlayer.is-landscape .fp-topbar, #fullPlayer.is-landscape .fp-dock{width:50%!important;max-width:none!important;} #fullPlayer.is-landscape .fp-left{flex-basis:50%!important;} #fullPlayer.is-landscape .fp-right{width:50%!important;flex:0 0 50%!important;max-width:50%!important;} #fullPlayer.is-landscape .fp-art-stage{ width:min(56vh,320px)!important;height:min(56vh,320px)!important; } } @media (orientation:landscape), (max-height:520px) and (min-width:500px){ #fullPlayer.show.is-landscape .fp-topbar .fp-top-spacer{display:none!important;} /* 横屏显示歌名/歌手 */ #fullPlayer.show.is-landscape .fp-topbar .fp-track-info{display:flex!important;} #fullPlayer.show.is-landscape{flex-direction:row!important;} #fullPlayer.show.is-landscape .fp-left{ width:50%!important;max-width:none!important;height:100%!important; flex:0 0 50%!important; padding:calc(12px + var(--safe-t)) 20px calc(140px + var(--safe-b))!important; justify-content:center!important;order:0!important;margin:0!important; box-sizing:border-box!important;overflow:hidden!important; } #fullPlayer.show.is-landscape .fp-art-stage{width:min(52vh,280px)!important;height:min(52vh,280px)!important;} #fullPlayer.show.is-landscape .fp-topbar{ left:0!important;right:auto!important;width:50%!important;max-width:50%!important; display:flex!important;justify-content:center!important;align-items:center!important; } #fullPlayer.show.is-landscape .fp-topbar .fp-track-info{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; text-align:center!important;margin:20px auto 0!important; max-width:calc(100% - 88px)!important; } #fullPlayer.show.is-landscape .fp-topbar .fp-track-name, #fullPlayer.show.is-landscape #fpTitle{ font-size:32px!important;font-weight:700!important;line-height:1.25!important; } #fullPlayer.show.is-landscape .fp-topbar .fp-track-artist, #fullPlayer.show.is-landscape #fpArtist{ font-size:15px!important;line-height:1.3!important;margin-top:4px!important;font-weight:500!important; } /* 横屏返回：毛玻璃圆 + 与歌名行对齐 */ #fullPlayer.show.is-landscape .fp-topbar .fp-close, #fullPlayer.show.is-landscape #fpClose{ display:flex!important; pointer-events:auto!important; opacity:1!important; visibility:visible!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; top:calc(30px + var(--safe-t))!important; color:rgba(255,255,255,0.95)!important; background:rgba(255,255,255,0.18)!important; border:1px solid rgba(255,255,255,0.22)!important; box-shadow:0 2px 14px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.28)!important; backdrop-filter:blur(18px) saturate(1.45)!important; -webkit-backdrop-filter:blur(18px) saturate(1.45)!important; } #fullPlayer.show.is-landscape .fp-right{ flex:0 0 50%!important;width:50%!important;max-width:50%!important;height:100%!important; padding:calc(14px + var(--safe-t)) 24px calc(14px + var(--safe-b))!important; position:relative!important;z-index:5!important;isolation:isolate!important; overflow:hidden!important;display:flex!important;flex-direction:column!important; margin:0!important;order:0!important; } #fullPlayer.show.is-landscape .fp-tabs{justify-content:center!important;margin-bottom:10px!important;flex-shrink:0!important;width:100%!important;gap:28px!important;} #fullPlayer.show.is-landscape .fp-tab{font-size:18px!important;padding-bottom:10px!important;} #fullPlayer.show.is-landscape #lyricsWrap, #fullPlayer.show.is-landscape #playlistPanel{flex:1 1 auto!important;min-height:0!important;max-height:none!important;} #fullPlayer.show.is-landscape .fp-left, #fullPlayer.show.is-landscape .fp-right{background:transparent!important;} #fullPlayer.show.is-landscape .fp-dock{ position:absolute!important;left:0!important;right:auto!important; width:50%!important;max-width:none!important;bottom:0!important; padding:10px 20px calc(12px + var(--safe-b))!important; box-sizing:border-box!important;z-index:6!important; background:transparent!important; } #fullPlayer.show.is-landscape .fp-dock .fp-play{width:56px!important;height:56px!important;} #fullPlayer.show.is-landscape .fp-dock .fp-ctrl-btn{width:46px!important;height:46px!important;} #fullPlayer.show.is-landscape .fp-dock .fp-ctrl-btn svg{width:22px!important;height:22px!important;} #fullPlayer.show.is-landscape .fp-dock .fp-play svg{width:22px!important;height:22px!important;} } @media (orientation:portrait) and (max-width:860px){ #fullPlayer.show:not(.is-landscape){flex-direction:column!important;} } @media (min-width:861px){ .fp-controls{margin-top:4px;} #fullPlayer .fp-topbar{ right:auto!important; width:50%!important; justify-content:flex-start; gap:10px; } #fullPlayer .fp-topbar .fp-top-spacer{display:none!important;} #fullPlayer .fp-topbar .fp-track-info{ align-items:flex-start!important; text-align:left!important; } #fullPlayer .fp-topbar .fp-track-name, #fullPlayer .fp-topbar .fp-track-artist{text-align:left!important;} #fullPlayer .fp-right{ position:relative;z-index:4;isolation:isolate; } } @media (min-width:861px){ #fullPlayer .fp-dock{ position:absolute;left:0;bottom:20px;width:50%; padding:0 28px;box-sizing:border-box;z-index:3; background:transparent; } #fullPlayer .fp-left{width:50%;flex:0 0 50%;padding-bottom:160px;} #fullPlayer .fp-right{width:50%;flex:0 0 50%;} #fullPlayer .fp-dock .fp-quick{margin-top:16px!important;margin-bottom:0!important;} } html[data-mode="dark"] .fp-dock, html[data-mode="dark"] #fullPlayer .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } html[data-mode="dark"] #fullPlayer.show:not(.is-landscape) .fp-dock{ background:transparent!important; } html[data-mode="dark"] #fullPlayer.is-landscape .fp-dock, html[data-mode="dark"] #fullPlayer.is-landscape .fp-left, html[data-mode="dark"] #fullPlayer.is-landscape .fp-right{ background:transparent!important; } html[data-mode="dark"] .fp-dock .fp-quick button, html[data-mode="dark"] .fp-dock .fp-ctrl-btn, html[data-mode="dark"] .fp-dock .fp-quality-btn, html[data-mode="dark"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="dark"] #fullPlayer .fp-dock .fp-ctrl-btn, html[data-mode="dark"] #fullPlayer .fp-dock .fp-quality-btn{ color:#fff!important; } html[data-mode="dark"] .fp-dock .fp-time, html[data-mode="dark"] #fullPlayer .fp-dock .fp-time{ color:rgba(235,235,245,.55)!important; } html[data-mode="dark"] .fp-dock .fp-play, html[data-mode="dark"] #fullPlayer .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="dark"] .fp-dock .fp-play svg, html[data-mode="dark"] #fullPlayer .fp-dock .fp-play svg{ color:rgba(255,255,255,.95)!important; } /* 亮色模式强制深色控件规则已移除：播放页统一浅色 */ html[data-mode="dark"] .fp-dock .fp-bar, html[data-mode="dark"] #fullPlayer .fp-dock .fp-bar{ background:rgba(255,255,255,.2)!important; } html[data-mode="dark"] .fp-dock .fp-bar-fill, html[data-mode="dark"] #fullPlayer .fp-dock .fp-bar-fill{ background:#fff!important; } html[data-mode="dark"] .fp-dock .fp-bar-knob, html[data-mode="dark"] #fullPlayer .fp-dock .fp-bar-knob{ background:#fff!important; } /* paper: 占位符最终覆盖（避免被输入框 color 带偏） */ html[data-mode="paper"] #searchInput::placeholder, html[data-mode="paper"] #searchInput::-webkit-input-placeholder, html[data-mode="paper"] .search-box input::placeholder, html[data-mode="paper"] .search-box input::-webkit-input-placeholder{ color:#9a928a!important; opacity:1!important; } /* 纸白：播放页控件中灰（排除亮色强制近黑后的兜底） */ html[data-mode="paper"] #fullPlayer .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer .fp-dock .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-speed-btn, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-ctrl-btn svg, html[data-mode="paper"] #fullPlayer .fp-quick button svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-ctrl-btn svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quick button svg{ color:#8a837c!important; fill:currentColor; } html[data-mode="paper"] #fullPlayer .fp-quick button.on{ color:var(--danger)!important; } html[data-mode="paper"] #fullPlayer .fp-speed-btn.on{ color:var(--green)!important; } html[data-mode="paper"] #fullPlayer .fp-time, html[data-mode="paper"] #fullPlayer .fp-dock .fp-time{ color:rgba(40,32,26,0.40)!important; } html[data-mode="paper"] #fullPlayer .fp-bar, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar{ background:rgba(40,30,20,0.12)!important; } html[data-mode="paper"] #fullPlayer .fp-bar-fill, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar-fill, html[data-mode="paper"] #fullPlayer .fp-bar-knob, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar-knob{ background:var(--green)!important; box-shadow:none!important; } html[data-mode="paper"] #fullPlayer .fp-play, html[data-mode="paper"] #fullPlayer .fp-dock .fp-play{ background:transparent!important; color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html[data-mode="paper"] #fullPlayer .fp-play svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-play svg{ color:rgba(255,255,255,.95)!important; } html[data-mode="paper"] #fullPlayer .fp-track-name, html[data-mode="paper"] #fullPlayer #fpTitle{ color:#5c564f!important; } html[data-mode="paper"] #fullPlayer .fp-track-artist, html[data-mode="paper"] #fullPlayer #fpArtist{ color:rgba(40,32,26,0.42)!important; } html[data-mode="paper"] #fullPlayer .fp-tab{ color:rgba(40,32,26,0.36)!important; } html[data-mode="paper"] #fullPlayer .fp-tab.active{ color:var(--green)!important; border-color:var(--green)!important; } html[data-mode="paper"] #fullPlayer .fp-close, html[data-mode="paper"] #fullPlayer .fp-close svg{ color:#8a837c!important; } /* 纸白：歌手头像白描边，去掉黑影 */ html[data-mode="paper"] .singer-chip-avatar, html[data-mode="paper"] .sr-singer .singer-chip-avatar, html[data-mode="paper"] .suggest-singer .singer-chip-avatar, html[data-mode="paper"] .src-artist-row .singer-chip-avatar, html[data-mode="paper"] .voice-author-chip .singer-chip-avatar{ border:2px solid #ffffff!important; box-shadow:0 2px 10px rgba(40,30,20,0.06)!important; background:linear-gradient(145deg,#f2eee8,#ebe6de)!important; } html[data-mode="paper"] .singer-chip-avatar img{ border-radius:50%; } /* ===== Squid Game Theme (ported from reference) ===== */ html[data-mode="squid"]{ --bg-0:#0a1214; --bg-1:#0d181a; --bg-2:#142428; --bg-elevated:#1a2e32; --glass:rgba(237,27,118,0.10); --glass-strong:rgba(12,22,24,0.92); --glass-border:rgba(237,27,118,0.35); --line:rgba(237,27,118,0.22); --text-0:#f8f0f4; --text-1:rgba(248,230,238,0.82); --text-2:rgba(220,190,205,0.55); --green:#ED1B76; --green-dim:#c41460; --green-glow:rgba(237,27,118,0.45); --accent-rgb:237,27,118; --gold:#f5d76e; --danger:#E10600; --squid-pink:#ED1B76; --squid-pink-soft:#ff4d9a; --squid-teal:#1b4d4a; --squid-shape:#ffffff; --squid-ambient: radial-gradient(ellipse 90% 60% at 12% -8%, rgba(237,27,118,0.42) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 95% 8%, rgba(225,6,0,0.22) 0%, transparent 50%), radial-gradient(ellipse 80% 55% at 50% 100%, rgba(27,77,74,0.55) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 70% 40%, rgba(237,27,118,0.12) 0%, transparent 60%), linear-gradient(165deg,#0c1618 0%,#0a1214 45%,#0e1a1c 100%); } html[data-mode="squid"],html[data-mode="squid"] body{ background:#0a1214!important; color:var(--text-0)!important; } html[data-mode="squid"] body{ background:var(--squid-ambient)!important; } html[data-mode="squid"] #ambientBg{ background:var(--squid-ambient)!important; animation:squidPulse 10s ease-in-out infinite alternate; filter:saturate(1.15); } @keyframes squidPulse{ 0%{filter:saturate(1.05) brightness(.95);transform:scale(1)} 100%{filter:saturate(1.25) brightness(1.06);transform:scale(1.02)} } html[data-mode="squid"] #ambientVeil{ background: linear-gradient(180deg,rgba(10,18,20,.35) 0,rgba(10,18,20,.08) 40%,rgba(10,18,20,.5) 100%), repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(237,27,118,.03) 4px,rgba(237,27,118,.03) 5px)!important; opacity:1!important; } html[data-mode="squid"] #grain{ opacity:.35!important; mix-blend-mode:overlay; background: radial-gradient(circle at 20% 30%,rgba(255,255,255,.04) 0,transparent 2px), radial-gradient(circle at 80% 70%,rgba(237,27,118,.06) 0,transparent 3px)!important; } /* geometric shapes watermark */ html[data-mode="squid"] body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.07; background-image: url("data:image/svg+xml;utf8,"); background-size:220px 220px; background-repeat:repeat; } html[data-mode="squid"] #topbar{ background:linear-gradient(180deg,rgba(10,18,20,.96) 0,rgba(10,18,20,.35) 70%,rgba(10,18,20,0) 100%)!important; } html[data-mode="squid"] .search-box{ background:rgba(237,27,118,.08)!important; border:1px solid rgba(237,27,118,.4)!important; box-shadow:0 0 0 1px rgba(225,6,0,.08),0 0 20px rgba(237,27,118,.15),inset 0 0 12px rgba(237,27,118,.05)!important; } html[data-mode="squid"] .search-box.focused{ background:rgba(237,27,118,.14)!important; border-color:rgba(237,27,118,.7)!important; box-shadow:0 0 0 2px rgba(237,27,118,.25),0 0 28px rgba(237,27,118,.3)!important; } html[data-mode="squid"] .brand-mark{ background:0 0!important; --logo-circle:#ED1B76; --logo-mark:#ffffff; box-shadow:none!important; } html[data-mode="squid"] .brand-mark svg{ filter:drop-shadow(0 0 8px rgba(237,27,118,.55)); } html[data-mode="squid"] .sec-title{ color:#f8f0f4!important; text-shadow:0 0 14px rgba(237,27,118,.35); letter-spacing:.03em; } html[data-mode="squid"] .sec-more{ color:#ED1B76!important; text-shadow:0 0 10px rgba(237,27,118,.45); } html[data-mode="squid"] .nav-item.active{ color:#0a1214!important; background:linear-gradient(120deg,#ED1B76,#ff4d9a)!important; box-shadow:0 0 18px rgba(237,27,118,.4)!important; } html[data-mode="squid"] #bottomNav{ background:rgba(10,18,20,.97)!important; border-top:1px solid rgba(237,27,118,.28)!important; box-shadow:0 -4px 24px rgba(237,27,118,.12)!important; } html[data-mode="squid"] #bottomNav .nav-item.active{ color:#ED1B76!important; background:rgba(237,27,118,.14)!important; box-shadow:0 0 14px rgba(237,27,118,.25),inset 0 0 10px rgba(237,27,118,.08)!important; } html[data-mode="squid"] #bottomNav .nav-item.active svg{ color:#ED1B76!important; filter:drop-shadow(0 0 6px rgba(237,27,118,.65)); } html[data-mode="squid"] #biliSessSave, html[data-mode="squid"] #neCkSave, html[data-mode="squid"] .card-cover .play-fab, html[data-mode="squid"] .hero-play, html[data-mode="squid"] .login-btn-primary{ background:linear-gradient(135deg,#ED1B76 0%,#ff4d9a 50%,#E10600 100%)!important; color:#fff!important; border:none!important; box-shadow:0 0 20px rgba(237,27,118,.5),0 0 36px rgba(225,6,0,.2)!important; } /* [已清理] 不再把 .fp-play/.pb-play/.dc-play 绑到实心渐变 */ html[data-mode="squid"] .detail-play-all, html[data-mode="squid"] .detail-hero .detail-play-all, html[data-mode="squid"] #playAllDetail{ background:linear-gradient(135deg,#ED1B76 0%,#ff4d9a 50%,#E10600 100%)!important; color:#fff!important; border:none!important; box-shadow:0 0 20px rgba(237,27,118,.5),0 0 36px rgba(225,6,0,.2)!important; } html[data-mode="squid"] .detail-play-all svg, html[data-mode="squid"] .detail-hero .detail-play-all svg, html[data-mode="squid"] #playAllDetail svg, html[data-mode="squid"] .detail-play-all svg use, html[data-mode="squid"] .detail-hero .detail-play-all svg use, html[data-mode="squid"] #playAllDetail svg use, html[data-mode="squid"] .detail-play-all svg path, html[data-mode="squid"] .detail-hero .detail-play-all svg path, html[data-mode="squid"] #playAllDetail svg path{ color:#fff!important; fill:#fff!important; stroke:none!important; opacity:1!important; visibility:visible!important; display:block!important; width:14px!important; height:14px!important; pointer-events:none!important; filter:none!important; } html[data-mode="squid"] .card-cover .play-fab svg, html[data-mode="squid"] .daily-card .dc-play svg, html[data-mode="squid"] .fp-play svg, html[data-mode="squid"] .hero-play svg, html[data-mode="squid"] .login-btn-primary svg, html[data-mode="squid"] .pb-play svg{ color:#fff!important; } html[data-mode="squid"] .hero-play svg, html[data-mode="squid"] #playAllSinger svg, html[data-mode="squid"] .hero-play svg use, html[data-mode="squid"] #playAllSinger svg use, html[data-mode="squid"] .hero-play svg path, html[data-mode="squid"] #playAllSinger svg path{ color:#fff!important; fill:#fff!important; opacity:1!important; visibility:visible!important; display:inline-block!important; width:14px!important; height:14px!important; pointer-events:none!important; filter:none!important; } html[data-mode="squid"] #searchEmptyBack, html[data-mode="squid"] .hot-search-tag, html[data-mode="squid"] .login-btn-guest{ background:rgba(237,27,118,.1)!important; color:#f8f0f4!important; border:1px solid rgba(237,27,118,.38)!important; box-shadow:0 0 12px rgba(237,27,118,.12)!important; } html[data-mode="squid"] .hot-search-tag:hover{ border-color:rgba(225,6,0,.5)!important; box-shadow:0 0 14px rgba(225,6,0,.2)!important; } html[data-mode="squid"] #sourceTabs.sr-tabs{ background:rgba(12,22,24,.85)!important; border:1px solid rgba(237,27,118,.35)!important; box-shadow:0 0 18px rgba(237,27,118,.12),inset 0 0 16px rgba(237,27,118,.04)!important; } html[data-mode="squid"] #sourceTabs .sr-indicator{ background:linear-gradient(120deg,#ED1B76,#ff4d9a)!important; box-shadow:0 0 16px rgba(237,27,118,.55)!important; } html[data-mode="squid"] #sourceTabs .sr-tab, html[data-mode="squid"] #sourceTabs .sr-tab[data-src]{ color:#fff!important; opacity:1!important; } html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=qq], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=netease], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=kuwo], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=kugou], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=migu], html[data-mode="squid"] #sourceTabs .sr-tab.active[data-src=bilibili]{ color:#fff!important; background:0 0!important; } html[data-mode="squid"] .card-cover{ box-shadow:0 0 0 1px rgba(237,27,118,.22),0 8px 24px rgba(0,0,0,.4)!important; } html[data-mode="squid"] .card:hover .card-cover, html[data-mode="squid"] .rank-card:hover{ box-shadow:0 0 0 1px rgba(237,27,118,.5),0 0 18px rgba(237,27,118,.22)!important; } @media (hover:hover) and (pointer:fine){ html[data-mode="squid"] .song-row:hover{background:rgba(237,27,118,.07)!important} } html[data-mode="squid"] .song-row.playing{ background:linear-gradient(90deg,rgba(237,27,118,.16),rgba(225,6,0,.08))!important; box-shadow:inset 3px 0 0 #ED1B76; } html[data-mode="squid"] .song-row.playing .song-idx, html[data-mode="squid"] .song-row.playing .song-title{ color:#ED1B76!important; text-shadow:0 0 8px rgba(237,27,118,.45); } html[data-mode="squid"] .tag-sq{ border-color:rgba(237,27,118,.6)!important; color:#ED1B76!important; } /* daily cards */ html[data-mode="squid"] .daily-card{ position:relative!important; border:1px solid rgba(237,27,118,.28)!important; box-shadow:0 4px 20px rgba(0,0,0,.35)!important; overflow:hidden!important; background:linear-gradient(145deg,rgba(237,27,118,.12) 0%,rgba(20,36,40,.9) 40%,rgba(10,18,20,.95) 100%)!important; } html[data-mode="squid"] .daily-card::before{ content:""!important; position:absolute!important; inset:0!important; border-radius:inherit!important; pointer-events:none!important; z-index:2!important; background: linear-gradient(135deg,rgba(237,27,118,.08),transparent 40%), repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(255,255,255,.02) 5px,rgba(255,255,255,.02) 6px)!important; opacity:.8; } html[data-mode="squid"] .daily-card .dc-title{color:#f8f0f4!important;text-shadow:0 0 12px rgba(237,27,118,.3)} html[data-mode="squid"] .daily-card .dc-sub{color:rgba(248,230,238,.65)!important} html[data-mode="squid"] .daily-card.is-playing{ border-color:rgba(237,27,118,.55)!important; box-shadow:0 0 24px rgba(237,27,118,.3),0 4px 20px rgba(0,0,0,.4)!important; } /* player bar */ html[data-mode="squid"] #playerBar{ background:rgba(12,22,24,.72)!important; border-color:rgba(237,27,118,.28)!important; border-top-color:rgba(237,27,118,.32)!important; backdrop-filter:blur(36px) saturate(1.3)!important; -webkit-backdrop-filter:blur(36px) saturate(1.3)!important; } html[data-mode="squid"] #playerBar::before{ background:linear-gradient(135deg,rgba(237,27,118,.12) 0,rgba(225,6,0,.08) 50%,rgba(255,255,255,.03) 100%); opacity:.95; animation:none!important; } html[data-mode="squid"] .fp-bar-fill, html[data-mode="squid"] .pb-bar-fill{background:#ED1B76!important} html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] .pb-bar-knob{ background:#fff!important; box-shadow:0 0 8px rgba(237,27,118,.5)!important; } /* full player */ html[data-mode="squid"] #fullPlayer{background:#0a1214!important;color:#f8f0f4!important} html[data-mode="squid"] #fpBg{background:#0a1214!important} html[data-mode="squid"] #fpBg.has-cover .fp-bg-amb{filter:blur(48px) saturate(1.25) brightness(0.80);-webkit-filter:blur(48px) saturate(1.25) brightness(0.80);} html[data-mode="squid"] #fpBg .fp-bg-veil{background:transparent!important;opacity:0!important;} html[data-mode="squid"] #fullPlayer .fp-track-name{color:#f8f0f4!important} html[data-mode="squid"] #fullPlayer .fp-track-artist{color:rgba(248,230,238,.55)!important} html[data-mode="squid"] #fullPlayer .fp-tab{color:rgba(248,230,238,.4)!important} html[data-mode="squid"] #fullPlayer .fp-tab.active{color:#ED1B76!important;border-color:#ED1B76!important} html[data-mode="squid"] #fullPlayer .lyric-line{color:rgba(248,230,238,.72)!important} html[data-mode="squid"] #fullPlayer .lyric-line:hover{color:rgba(248,230,238,.90)!important} html[data-mode="squid"] #fullPlayer .lyric-line.active{color:#fff!important} html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr{color:#ED1B76!important} html[data-mode="squid"] #fullPlayer .fp-play, html[data-mode="squid"] #fullPlayer .fp-dock .fp-play, html[data-mode="squid"] .fp-dock .fp-play{ width:55px!important; height:55px!important; background:transparent!important; background-image:none!important; color:transparent!important; border:2.5px solid #FF6BB5!important; box-shadow:0 0 14px rgba(237,27,118,.4)!important; } html[data-mode="squid"] #fullPlayer .fp-play svg, html[data-mode="squid"] #fullPlayer .fp-dock .fp-play svg, html[data-mode="squid"] .fp-dock .fp-play svg{ display:none!important; opacity:0!important; visibility:hidden!important; color:transparent!important; } html[data-mode="squid"] #fullPlayer .fp-close{ color:#fff!important; background:rgba(237,27,118,.15)!important; } html[data-mode="squid"] .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html[data-mode="squid"] .pl-panel-row.playing{ color:#FF8AC8!important; background:transparent!important; box-shadow:none!important; } html[data-mode="squid"] .detail-back, html[data-mode="squid"] .detail-shuffle-btn{ background:rgba(237,27,118,.12)!important; border:1px solid rgba(237,27,118,.35)!important; color:#ED1B76!important; } html[data-mode="squid"] .detail-title{ color:#f8f0f4!important; text-shadow:0 0 14px rgba(237,27,118,.3)!important; } /* shape accents on daily cards */ html[data-mode="squid"] .daily-card .dc-art-inner{ box-shadow:inset 0 0 0 2px rgba(237,27,118,.25)!important; } html[data-mode="squid"] .daily-card.daily30::after, html[data-mode="squid"] .daily-card.brush::after{ content:""!important; display:block!important; position:absolute!important; right:14px!important; top:12px!important; width:18px!important; height:18px!important; z-index:3!important; pointer-events:none!important; opacity:.55!important; border:2px solid rgba(255,255,255,.85)!important; box-sizing:border-box!important; } html[data-mode="squid"] .daily-card.daily30::after{ border-radius:50%!important; /* ○ */ } html[data-mode="squid"] .daily-card.brush::after{ border-radius:0!important; /* □ */ transform:none!important; } html[data-mode="squid"] .daily-card:not(.daily30):not(.brush)::after{ content:""!important; display:block!important; position:absolute!important; right:12px!important; top:10px!important; width:0!important; height:0!important; border-left:9px solid transparent!important; border-right:9px solid transparent!important; border-bottom:16px solid rgba(255,255,255,.75)!important; border-top:none!important; background:none!important; z-index:3!important; pointer-events:none!important; opacity:.55!important; box-shadow:none!important; } /* ===== Squid 沉浸强化：控件几何化 + 高对比 ===== */ html[data-mode="squid"] #fullPlayer{ background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(237,27,118,.18) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(27,77,74,.35) 0%, transparent 50%), #070d0e!important; } html[data-mode="squid"] #fpBg{ background: radial-gradient(circle at 50% 35%, rgba(237,27,118,.12) 0%, transparent 45%), #070d0e!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer .fp-track-name{ color:#fff!important; font-weight:600!important; text-shadow:0 0 20px rgba(237,27,118,.35)!important; } html[data-mode="squid"] #fullPlayer .fp-track-artist{ color:rgba(255,200,220,.7)!important; } html[data-mode="squid"] #fullPlayer .lyric-line{ color:rgba(255,220,230,.72)!important; font-size:15px!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active{ color:#fff!important; font-weight:700!important; transform:scale(1.04); } html[data-mode="squid"] #fullPlayer .lyric-line.active, html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr{ color:#FF2D87!important; } html[data-mode="squid"] .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } /* 隐藏原 SVG，改用符号 */ html[data-mode="squid"] #fpPrev svg, html[data-mode="squid"] #fpNext svg, html[data-mode="squid"] #fpPlay svg, html[data-mode="squid"] #pbPlay svg, html[data-mode="squid"] .daily-card .dc-play svg, html[data-mode="squid"] .card-cover .play-fab svg, html[data-mode="squid"] .pb-ctrl-btn svg{ opacity:0!important; pointer-events:none!important; } html[data-mode="squid"] #fpPrev, html[data-mode="squid"] #fpNext, html[data-mode="squid"] #fpPlay, html[data-mode="squid"] #pbPlay{ position:relative!important; overflow:visible!important; } /* [已清理冲突] 旧实心白边播放圆 #fpPlay */ /* △ 上一首 — 正立等边三角 */ html[data-mode="squid"] #fpPrev{ width:46px!important; height:46px!important; background:transparent!important; border:none!important; box-shadow:none!important; color:transparent!important; } html[data-mode="squid"] #fpPrev::before{ content:""!important; position:absolute!important; left:50%!important; top:50%!important; width:24px!important; height:22px!important; border:none!important; border-width:0!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26' fill='none'%3E%3Cpath d='M14 3 L25 23 L3 23 Z' stroke='%23FF6BB5' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat!important; transform:translate(-50%,-50%)!important; filter:drop-shadow(0 0 8px rgba(255,107,181,.55)); border-radius:0!important; opacity:1!important; box-shadow:none!important; } html[data-mode="squid"] #fpPrev::after{ content:none!important; display:none!important; } /* □ 下一首 — 正方 */ html[data-mode="squid"] #fpNext{ width:43px!important; height:43px!important; background:transparent!important; border:none!important; box-shadow:none!important; color:transparent!important; } html[data-mode="squid"] #fpNext::before{ content:""!important; position:absolute!important; left:50%!important; top:50%!important; width:21px!important; height:21px!important; border:2.5px solid #FF6BB5!important; border-radius:3px!important; background:transparent!important; transform:translate(-50%,-50%)!important; box-shadow:0 0 12px rgba(237,27,118,.45)!important; opacity:1!important; } /* 全屏播放页：上一首三角反转、下一首方块正转，绕各自形状中心 */ html[data-mode="squid"] #fpPrev{ /* 正立等边三角：尖在上，重心约在按钮中心偏下 */ transform-origin:50% 58%!important; } html[data-mode="squid"] #fpNext{ /* 正方：几何中心即按钮中心 */ transform-origin:50% 50%!important; } html[data-mode="squid"] #fpPrev.sg-spin-rev{ animation:sg-spin-rev .48s cubic-bezier(0.22,1,0.36,1) both!important; } html[data-mode="squid"] #fpNext.sg-spin-fwd{ animation:sg-spin-fwd .48s cubic-bezier(0.22,1,0.36,1) both!important; } /* 避免 :active scale 抢 transform，保证旋转动画完整 */ html[data-mode="squid"] #fpPrev:active, html[data-mode="squid"] #fpNext:active, html[data-mode="squid"] #pbListBtn:active, html[data-mode="squid"] .pb-list-btn:active{ transform:none!important; } html[data-mode="squid"] #fpPrev.sg-spin-rev:active{ animation:sg-spin-rev .48s cubic-bezier(0.22,1,0.36,1) both!important; } html[data-mode="squid"] #fpNext.sg-spin-fwd:active{ animation:sg-spin-fwd .48s cubic-bezier(0.22,1,0.36,1) both!important; } @keyframes sg-spin-fwd{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes sg-spin-rev{ from{transform:rotate(0deg)} to{transform:rotate(-360deg)} } /* 进度条更醒目 */ html[data-mode="squid"] .fp-bar{ height:5px!important; background:rgba(255,255,255,.18)!important; border-radius:99px!important; overflow:visible!important; } html[data-mode="squid"] .fp-bar-fill{ background:linear-gradient(90deg,#ED1B76,#ff4d9a,#E10600)!important; border-radius:99px!important; box-shadow:0 0 10px rgba(237,27,118,.55)!important; } html[data-mode="squid"] .fp-bar-knob{ width:14px!important; height:14px!important; background:#fff!important; border:2px solid #ED1B76!important; box-shadow:0 0 12px rgba(237,27,118,.7)!important; } html[data-mode="squid"] .fp-time{ color:rgba(255,210,225,.75)!important; font-variant-numeric:tabular-nums!important; } /* 底栏快捷：更高对比 */ html[data-mode="squid"] .fp-quick button{ color:rgba(255,230,240,.85)!important; background:rgba(237,27,118,.1)!important; border:1px solid rgba(237,27,118,.28)!important; border-radius:12px!important; } html[data-mode="squid"] .fp-quick button.on{ color:#fff!important; background:rgba(237,27,118,.35)!important; border-color:#ED1B76!important; box-shadow:0 0 12px rgba(237,27,118,.35)!important; } html[data-mode="squid"] .fp-quality-btn, html[data-mode="squid"] .fp-speed-btn{ color:rgba(255,230,240,.85)!important; border:1px solid rgba(237,27,118,.3)!important; background:rgba(237,27,118,.08)!important; } html[data-mode="squid"] .fp-speed-btn.on{ color:#fff!important; background:#ED1B76!important; } html[data-mode="squid"] .fp-close{ background:rgba(237,27,118,.2)!important; border:1px solid rgba(237,27,118,.4)!important; color:#fff!important; box-shadow:0 0 12px rgba(237,27,118,.25)!important; } html[data-mode="squid"] .fp-tab{ color:rgba(255,220,230,.45)!important; } html[data-mode="squid"] .fp-tab.active{ color:#FF2D87!important; border-bottom-color:#ED1B76!important; text-shadow:0 0 10px rgba(237,27,118,.4)!important; } /* [已清理冲突] 旧迷你条实心圆播放钮 */ /* 日推卡播放钮 → 见后文「空心圆/方/三角」统一样式 */ /* (旧实心圆角样式已废弃，避免覆盖空心描边) */ html[data-mode="squid"] .card-cover .play-fab{ border-radius:50%!important; background:radial-gradient(circle at 35% 30%,#ff5aa0,#ED1B76)!important; border:2px solid #fff!important; box-shadow:0 0 16px rgba(237,27,118,.5)!important; } /* 修正卡片角标：正三角 / 正圆 / 正方 */ html[data-mode="squid"] .daily-card.daily30::after{ content:""!important; display:block!important; position:absolute!important; right:14px!important; top:12px!important; width:20px!important; height:20px!important; border-radius:50%!important; border:2.5px solid rgba(255,255,255,.9)!important; background:transparent!important; box-shadow:0 0 8px rgba(237,27,118,.4)!important; z-index:3!important; opacity:.85!important; transform:none!important; } html[data-mode="squid"] .daily-card.brush::after{ content:""!important; display:block!important; position:absolute!important; right:14px!important; top:12px!important; width:18px!important; height:18px!important; border-radius:2px!important; border:2.5px solid rgba(255,255,255,.9)!important; background:transparent!important; box-shadow:0 0 8px rgba(237,27,118,.4)!important; z-index:3!important; opacity:.85!important; transform:none!important; } html[data-mode="squid"] .daily-card:not(.daily30):not(.brush)::after{ content:""!important; display:block!important; position:absolute!important; right:12px!important; top:10px!important; width:0!important; height:0!important; border-left:10px solid transparent!important; border-right:10px solid transparent!important; border-bottom:18px solid rgba(255,255,255,.9)!important; border-top:none!important; background:none!important; border-radius:0!important; box-shadow:none!important; filter:drop-shadow(0 0 6px rgba(237,27,118,.45)); z-index:3!important; opacity:.85!important; transform:none!important; } /* 频谱/封面环 — 粉光 */ /* 列表播放中：仅文字高亮，无长条 */ html[data-mode="squid"] .pl-panel-row.playing{ background:transparent!important; box-shadow:none!important; color:#FF8AC8!important; } /* 全局一点几何感 */ html[data-mode="squid"] .nav-item.active{ border-radius:12px!important; } html[data-mode="squid"] .login-btn-primary{ border-radius:999px!important; letter-spacing:.04em!important; } /* 播放状态 class 兼容（无 WebView 无 :has） */ html[data-mode="squid"] #fpPlay.is-paused::before, html[data-mode="squid"] #fpPlay:not(.is-playing)::before{ width:0!important; height:0!important; border-style:solid!important; border-width:10px 0 10px 16px!important; border-color:transparent transparent transparent #fff!important; background:none!important; box-shadow:none!important; border-radius:0!important; transform:translate(-35%,-50%)!important; } html[data-mode="squid"] #fpPlay.is-playing::before{ width:5px!important; height:18px!important; border:none!important; border-width:0!important; background:#fff!important; border-radius:2px!important; box-shadow:10px 0 0 #fff!important; transform:translate(-7px,-50%)!important; } html[data-mode="squid"] #fpPlay.is-playing::after{display:none!important;content:none!important} html[data-mode="squid"] #pbPlay.is-paused::before, html[data-mode="squid"] #pbPlay:not(.is-playing)::before{ width:0!important; height:0!important; border-style:solid!important; border-width:7px 0 7px 12px!important; border-color:transparent transparent transparent #fff!important; background:none!important; box-shadow:none!important; transform:translate(-30%,-50%)!important; } html[data-mode="squid"] #pbPlay.is-playing::before{ width:4px!important; height:14px!important; border:none!important; background:#fff!important; border-radius:1px!important; box-shadow:7px 0 0 #fff!important; transform:translate(-5px,-50%)!important; } /* ========== FINAL SQUID OVERRIDES：三角 / 圆 / 方 包住封面，去掉角标 ===== */ html[data-mode="squid"] .daily-card::after, html[data-mode="squid"] .daily-card.daily30::after, html[data-mode="squid"] .daily-card.brush::after, html[data-mode="squid"] .daily-card:not(.daily30):not(.brush)::after{ content:none!important; display:none!important; border:none!important; width:0!important; height:0!important; opacity:0!important; background:none!important; box-shadow:none!important; filter:none!important; } /* 封面容器基础 */ html[data-mode="squid"] .daily-card .dc-art{ overflow:visible!important; } html[data-mode="squid"] .daily-card .dc-art-inner{ overflow:hidden!important; background-size:cover!important; background-position:center!important; box-shadow:none!important; } /* [已清理] 圆形封面裁切 */ /* [已清理] 方形封面裁切 */ /* [已清理] 三角封面裁切1 */ /* 三角外再描一圈光（用父级伪元素描边感） */ html[data-mode="squid"] #daily30Card .dc-art, html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-art{ position:relative!important; filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(237,27,118,.4)); } /* ========== Squid 主题精修 v3 ========== */ /* --- 1. 主页三卡：去掉多余三角角标；播放钮改三角并放大 --- */ html[data-mode="squid"] .daily-card::after, html[data-mode="squid"] .daily-card.daily30::after, html[data-mode="squid"] .daily-card.brush::after, html[data-mode="squid"] .daily-card:not(.daily30):not(.brush)::after{ content:none!important;display:none!important;opacity:0!important; border:none!important;width:0!important;height:0!important; background:none!important;box-shadow:none!important;filter:none!important; } /* 封面内的小播放箭头也藏掉（若有叠层） */ html[data-mode="squid"] .daily-card .dc-art .play-fab, html[data-mode="squid"] .daily-card .dc-art-inner::after, html[data-mode="squid"] .daily-card .dc-art-inner::before{ display:none!important;content:none!important; } /* 日推播放按钮：圆 / 方 / 三角 — 统一空心暗底、同色同粗同高 */ html[data-mode="squid"] .daily-card .dc-play{ width:52px!important;height:52px!important;min-width:52px!important; margin-top:8px!important;padding:0!important; background:transparent!important;border:none!important;box-shadow:none!important; position:relative!important;border-radius:0!important; display:flex!important;align-items:center!important;justify-content:center!important; } html[data-mode="squid"] .daily-card .dc-play svg{ opacity:0!important;display:none!important;width:0!important;height:0!important; } /* —— 第1卡 猜你喜欢：空心圆（外粉环 + 内暗底，与三角同工艺） —— */ html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play::before{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:28px!important;height:28px!important; border-radius:50%!important; border:none!important; background:#ED1B76!important; box-sizing:border-box!important; transform:translate(-50%,-50%)!important; filter:drop-shadow(0 0 10px rgba(237,27,118,.65)); box-shadow:none!important;opacity:1!important; } html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play::after{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:19px!important;height:19px!important; border-radius:50%!important; border:none!important; background:#0a1214!important; box-sizing:border-box!important; transform:translate(-50%,-50%)!important; filter:none!important;box-shadow:none!important;opacity:1!important; } /* —— 第2卡 Daily 30：空心方（外粉框 + 内暗底） —— */ html[data-mode="squid"] .daily-card.daily30 .dc-play::before{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:26px!important;height:26px!important; border-radius:3px!important; border:none!important; background:#ED1B76!important; box-sizing:border-box!important; transform:translate(-50%,-50%)!important; filter:drop-shadow(0 0 10px rgba(237,27,118,.65)); box-shadow:none!important;opacity:1!important; } html[data-mode="squid"] .daily-card.daily30 .dc-play::after{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:17px!important;height:17px!important; border-radius:1.5px!important; border:none!important; background:#0a1214!important; box-sizing:border-box!important; transform:translate(-50%,-50%)!important; filter:none!important;box-shadow:none!important;opacity:1!important; } /* —— 第3卡 刷歌：空心三角（外粉 + 内暗，原工艺） —— */ html[data-mode="squid"] .daily-card.brush .dc-play::before{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:0!important;height:0!important; border-style:solid!important; border-width:0 16px 28px 16px!important; border-color:transparent transparent #ED1B76 transparent!important; border-radius:0!important;background:none!important; transform:translate(-50%,-50%)!important; filter:drop-shadow(0 0 10px rgba(237,27,118,.65)); box-shadow:none!important;opacity:1!important; } html[data-mode="squid"] .daily-card.brush .dc-play::after{ content:""!important;display:block!important; position:absolute!important;left:50%!important;top:50%!important; width:0!important;height:0!important; border-style:solid!important; border-width:0 9px 16px 9px!important; border-color:transparent transparent #0a1214 transparent!important; transform:translate(-50%,calc(-50% + 2px))!important; background:none!important;opacity:1!important;filter:none!important; } /* 播放中：同色加亮 */ html[data-mode="squid"] .daily-card.is-playing:not(.brush) .dc-play::before{ background:#FF2D87!important; filter:drop-shadow(0 0 14px rgba(255,45,135,.8)); } html[data-mode="squid"] .daily-card.brush.is-playing .dc-play::before{ border-color:transparent transparent #FF2D87 transparent!important; filter:drop-shadow(0 0 14px rgba(255,45,135,.8)); } /* 三角封面保持 */ html[data-mode="squid"] #daily30Card .dc-art-inner, html[data-mode="squid"] #daily30Cover, html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-art-inner{ border-radius:0!important;border:none!important; clip-path:none!important; -webkit-clip-path:none!important; filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(237,27,118,.5)); } html[data-mode="squid"] .daily-card.daily30 .dc-art-inner, html[data-mode="squid"] #dailyRecCover{ border-radius:50%!important; clip-path:none!important; -webkit-clip-path:none!important; border:2.5px solid rgba(255,255,255,.9)!important; box-shadow:0 0 0 3px rgba(237,27,118,.3),0 0 18px rgba(237,27,118,.4)!important; } html[data-mode="squid"] .daily-card.brush .dc-art-inner, html[data-mode="squid"] #dailyBrushCover{ border-radius:4px!important;clip-path:none!important; border:2.5px solid rgba(255,255,255,.9)!important; box-shadow:0 0 0 3px rgba(237,27,118,.3),0 0 18px rgba(237,27,118,.4)!important; } /* [已清理冲突] 旧迷你条实心正圆+白三角 */ /* [已清理冲突] 旧实心下一首三角 */ /* --- 3. 播放页封面：独立三角/圆，呼吸外发光，去掉长方形框 --- */ /* 干掉可能的矩形包围 */ /* 封面图本体 */ /* 默认三角包封面 + 呼吸光 */ @keyframes sgBreathe{ 0%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(237,27,118,.4))} 50%{filter:drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 28px rgba(255,45,135,.75))} } /* 圆形模式：data-style 切换 */ /* 强制封面图填满 stage */ /* 歌名歌手粉紫 */ html[data-mode="squid"] #fullPlayer .fp-track-name, html[data-mode="squid"] #fpTitle{ color:#FF6BB5!important; text-shadow:0 0 18px rgba(237,27,118,.45)!important; font-weight:700!important; } /* [已清理冲突] 旧白描边播放控件 */ /* 进度条圆点 → 小三角 */ html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ width:0!important;height:0!important; border-radius:0!important; background:transparent!important; border-style:solid!important; border-width:0 7px 12px 7px!important; border-color:transparent transparent #ED1B76 transparent!important; box-shadow:none!important; filter:drop-shadow(0 0 6px rgba(237,27,118,.7)); transform:translateY(-2px)!important; } html[data-mode="squid"] .fp-bar-fill{ background:linear-gradient(90deg,#ED1B76,#C77DFF)!important; box-shadow:0 0 8px rgba(237,27,118,.5)!important; } html[data-mode="squid"] .fp-bar{ background:rgba(255,255,255,.15)!important;height:4px!important; } html[data-mode="squid"] .fp-time{color:rgba(255,180,220,.75)!important} /* 快捷按钮白/粉 */ html[data-mode="squid"] .fp-quick button{ color:#fff!important; background:rgba(237,27,118,.12)!important; border:1px solid rgba(255,255,255,.25)!important; } html[data-mode="squid"] .fp-quick button.on{ background:rgba(237,27,118,.4)!important; border-color:#ED1B76!important; } html[data-mode="squid"] .fp-close{ color:#fff!important; background:rgba(255,255,255,.1)!important; border:1px solid rgba(255,255,255,.3)!important; } html[data-mode="squid"] .lyric-line.active, html[data-mode="squid"] .lyric-line.active .lyric-tr{ color:#FF6BB5!important; } /* ========== Squid 封面三态 + 高对比文字/底栏 ========== */ /* 顶部歌名歌手强制粉紫 */ html[data-mode="squid"] #fullPlayer .fp-topbar .fp-track-name, html[data-mode="squid"] #fullPlayer #fpTitle, html[data-mode="squid"] #fpTitle, html[data-mode="squid"] .fp-track-name, html[data-mode="squid"] .fp-topbar .fp-track-name{ color:#FF6BB5!important; opacity:1!important; -webkit-text-fill-color:#FF6BB5!important; text-shadow:0 0 16px rgba(255,45,135,.5)!important; font-weight:700!important; } html[data-mode="squid"] .fp-brush-meta .bm-title, html[data-mode="squid"] #fpBrushTitle{ color:#FF6BB5!important;-webkit-text-fill-color:#FF6BB5!important; } html[data-mode="squid"] .fp-brush-meta .bm-artist, html[data-mode="squid"] #fpBrushArtist{ color:#C77DFF!important;-webkit-text-fill-color:#C77DFF!important; } /* 底栏控件可读性 */ html[data-mode="squid"] .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } html[data-mode="squid"] .fp-time, html[data-mode="squid"] #fpCur, html[data-mode="squid"] #fpDur{ color:#FFB6D9!important; opacity:1!important; font-weight:600!important; } html[data-mode="squid"] .fp-bar{ height:5px!important; background:rgba(255,255,255,.28)!important; } html[data-mode="squid"] .fp-bar-fill{ background:linear-gradient(90deg,#ED1B76,#C77DFF)!important; } html[data-mode="squid"] .fp-quick button, html[data-mode="squid"] .fp-quality-btn, html[data-mode="squid"] .fp-speed-btn, html[data-mode="squid"] #fpLike, html[data-mode="squid"] #fpSpeed, html[data-mode="squid"] #fpQuality, html[data-mode="squid"] #fpMode, html[data-mode="squid"] #fpListBtn{ color:#fff!important; background:rgba(255,255,255,.12)!important; border:1.5px solid rgba(255,255,255,.4)!important; opacity:1!important; text-shadow:none!important; } html[data-mode="squid"] .fp-quick button.on, html[data-mode="squid"] .fp-speed-btn.on{ color:#fff!important; background:rgba(237,27,118,.55)!important; border-color:#FF6BB5!important; } html[data-mode="squid"] .fp-quick button svg, html[data-mode="squid"] .fp-quality-btn svg, html[data-mode="squid"] .fp-speed-btn svg{ color:#fff!important; fill:#fff!important; opacity:1!important; } /* ===== 封面：三角 / 正圆 / 方形，随 fpVinyl 旋转 ===== */ @keyframes sgGlow{ 0%,100%{filter:drop-shadow(0 0 12px rgba(237,27,118,.4))} 50%{filter:drop-shadow(0 0 26px rgba(255,45,135,.75))} } /* 隐藏装饰环 */ /* 核心：裁切在 #fpVinyl 上，它会 spin */ /* 三种形状 —— 用 data-sg-shape 优先，兼容 data-style */ /* spin 兼容：原动画若写 transform:rotate 会丢掉 translate(-50%,-50%) 用独立包装：让 vinyl 相对 stage 定位，spin 只作用在内部 img 或额外层 */ /* 默认未标 shape 时先三角 */ /* ========== Squid 播放页精修：旋转 + 控件对齐粉紫 ========== */ /* 封面必须转起来（播放时） */ /* 无 .spin 时也在播放则靠 html.sg-playing */ /* [已清理冲突] 旧粉紫半透明播放钮（非最终空心） */ /* 进度条粉色 */ html[data-mode="squid"] .fp-bar{ height:4px!important; background:rgba(255,255,255,.2)!important; border-radius:99px!important; } html[data-mode="squid"] .fp-bar-fill, html[data-mode="squid"] #fpBarFill{ background:linear-gradient(90deg,#ED1B76,#FF6BB5,#C77DFF)!important; box-shadow:0 0 8px rgba(237,27,118,.45)!important; } html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ width:0!important;height:0!important;border-radius:0!important; background:transparent!important; border-style:solid!important; border-width:0 6px 11px 6px!important; border-color:transparent transparent #FF6BB5 transparent!important; box-shadow:none!important; filter:drop-shadow(0 0 5px rgba(255,107,181,.7)); } html[data-mode="squid"] .fp-time{color:#FFB6D9!important;opacity:1!important} /* 底排：去掉轮廓，纯粉紫图标文字 */ html[data-mode="squid"] .fp-quick button, html[data-mode="squid"] .fp-quality-btn, html[data-mode="squid"] .fp-speed-btn, html[data-mode="squid"] #fpLike, html[data-mode="squid"] #fpSpeed, html[data-mode="squid"] #fpQuality, html[data-mode="squid"] #fpMode, html[data-mode="squid"] #fpListBtn, html[data-mode="squid"] .fp-dock .fp-quick button{ background:transparent!important; border:none!important; box-shadow:none!important; outline:none!important; color:#FF6BB5!important; opacity:1!important; -webkit-text-fill-color:#FF6BB5!important; } html[data-mode="squid"] .fp-quick button svg, html[data-mode="squid"] .fp-quality-btn svg, html[data-mode="squid"] .fp-speed-btn svg, html[data-mode="squid"] #fpLike svg, html[data-mode="squid"] #fpListBtn svg, html[data-mode="squid"] #fpMode svg{ color:#FF6BB5!important; fill:#FF6BB5!important; stroke:#FF6BB5!important; opacity:1!important; } html[data-mode="squid"] .fp-quick button.on, html[data-mode="squid"] .fp-speed-btn.on, html[data-mode="squid"] #fpLike.on{ color:#C77DFF!important; -webkit-text-fill-color:#C77DFF!important; background:transparent!important; border:none!important; text-shadow:0 0 10px rgba(199,125,255,.5)!important; } html[data-mode="squid"] .fp-quick button.on svg, html[data-mode="squid"] #fpLike.on svg{ color:#C77DFF!important;fill:#C77DFF!important; } /* 歌词：高亮粉，非高亮半透明白 */ html[data-mode="squid"] #fullPlayer .lyric-line, html[data-mode="squid"] #lyricsList .lyric-line{ color:rgba(255,255,255,.72)!important; opacity:1!important; text-shadow:none!important; } html[data-mode="squid"] #fullPlayer .lyric-line .lyric-tr, html[data-mode="squid"] #lyricsList .lyric-line .lyric-tr{ color:rgba(255,255,255,.55)!important; } html[data-mode="squid"] #fullPlayer .lyric-line:hover{ color:rgba(255,255,255,.90)!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active, html[data-mode="squid"] #lyricsList .lyric-line.active{ color:#FF6BB5!important; font-weight:700!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr{ color:#C77DFF!important; } /* ========== Squid 旋转/形状/收藏/迷你条 紧急修复 ========== */ /* 整块封面旋转（最稳） */ /* vinyl 只负责裁切，不再自己转，避免 transform 打架 */ /* 三角 */ /* 正圆 */ /* 方形 */ /* 清掉旧的错误形状规则干扰：vinyl 默认别再被当成别的 */ /* 收藏爱心粉紫 —— 覆盖所有可能选择器 */ html[data-mode="squid"] #fpLike, html[data-mode="squid"] #fpLike svg, html[data-mode="squid"] #fpLike svg use, html[data-mode="squid"] #fpLike svg path, html[data-mode="squid"] .fp-quick #fpLike, html[data-mode="squid"] .fp-quick button#fpLike, html[data-mode="squid"] #pbLike, html[data-mode="squid"] #pbLike svg{ color:#FF6BB5!important; fill:#FF6BB5!important; stroke:#FF6BB5!important; opacity:1!important; background:transparent!important; border:none!important; filter:none!important; } html[data-mode="squid"] #fpLike.on, html[data-mode="squid"] #fpLike.on svg, html[data-mode="squid"] #fpLike.on svg path{ color:#C77DFF!important; fill:#C77DFF!important; stroke:#C77DFF!important; } /* [已清理冲突] 旧迷你条去白边/双竖条中间态 */ /* 迷你条歌名歌手同色粉 */ html[data-mode="squid"] #pbTitle, html[data-mode="squid"] .pb-title, html[data-mode="squid"] #pbArtist, html[data-mode="squid"] .pb-artist{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; opacity:1!important; } html[data-mode="squid"] #pbArtist, html[data-mode="squid"] .pb-artist{ opacity:.85!important; } /* ========== Squid 封面最终版：不旋转，正三角/正圆/正方形 ========== */ /* 彻底关闭旋转 */ /* 封面层铺满正方形容器 */ /* —— 正三角形（等边，居中） —— */ /* —— 正圆形 —— */ /* —— 正方形 —— */ /* 防止其它 data-style（vinyl/wave…）干扰鱿鱼形状 */ /* ========== Squid 形状/背景/歌词/进度 最终校正 ========== */ /* 播放页背景：粉紫呼吸，不要死黑 */ html[data-mode="squid"] #fullPlayer{ background: radial-gradient(ellipse 90% 55% at 50% 18%, rgba(237,27,118,.32) 0%, transparent 58%), radial-gradient(ellipse 70% 45% at 50% 85%, rgba(120,40,160,.28) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 20% 60%, rgba(255,107,181,.12) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 80% 40%, rgba(199,125,255,.12) 0%, transparent 50%), linear-gradient(165deg,#1a0a14 0%,#120818 40%,#0e0a16 100%)!important; animation:sgBgBreathe 6s ease-in-out infinite alternate!important; } @keyframes sgBgBreathe{ 0%{filter:saturate(1) brightness(.95)} 100%{filter:saturate(1.2) brightness(1.08)} } html[data-mode="squid"] #fpBg{ background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(237,27,118,.22) 0%, transparent 60%), transparent!important; opacity:1!important; animation:none!important; } /* 歌词可读性 */ html[data-mode="squid"] #fullPlayer .lyric-line, html[data-mode="squid"] #lyricsList .lyric-line{ color:rgba(255,255,255,.55)!important; font-size:15px!important; line-height:1.7!important; text-shadow:0 1px 4px rgba(0,0,0,.5)!important; } html[data-mode="squid"] #fullPlayer .lyric-line .lyric-tr{ color:rgba(255,255,255,.4)!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active, html[data-mode="squid"] #lyricsList .lyric-line.active{ color:#FF8AC8!important; font-weight:700!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr{ color:#D4A5FF!important; } /* 进度条：纯三角，去掉下面小方块 */ html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ width:0!important; height:0!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; background:transparent!important; background-color:transparent!important; border-radius:0!important; box-shadow:none!important; outline:none!important; border-style:solid!important; border-width:0 7px 13px 7px!important; border-color:transparent transparent #FF6BB5 transparent!important; border-left-color:transparent!important; border-right-color:transparent!important; border-top-color:transparent!important; border-bottom-color:#FF6BB5!important; filter:drop-shadow(0 0 4px rgba(255,107,181,.7)); transform:translate(-50%,-40%)!important; overflow:visible!important; } html[data-mode="squid"] .fp-bar-knob::before, html[data-mode="squid"] .fp-bar-knob::after, html[data-mode="squid"] #fpBarKnob::before, html[data-mode="squid"] #fpBarKnob::after{ content:none!important;display:none!important; width:0!important;height:0!important;background:none!important; border:none!important;box-shadow:none!important; } html[data-mode="squid"] .fp-bar-fill{ background:linear-gradient(90deg,#ED1B76,#FF6BB5)!important; } /* ===== 封面形状硬重置 ===== */ /* 全部装饰干掉（造成白弧线的元凶） */ /* 三角 */ /* 正圆 —— 强制正方形区域内正圆 */ /* 正方形 */ /* 覆盖全局 vinyl 样式在鱿鱼下的干扰 */ /* ========== Squid ONLY：形状/进度硬重置（不影响其他主题） ========== */ /* 强制隐藏装饰（白弧线来源：ring/orbit/pulse） */ /* 容器必须正方形 */ /* 覆盖全局 vinyl 的 68% 图和沟槽 —— 仅 squid */ /* 三角：无描边 */ /* 正圆：无描边，仅圆 */ /* 正方形：无描边，真正 1:1 */ /* 进度三角：去掉方块底 */ html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob, html[data-mode="squid"] .fp-bar .fp-bar-knob{ width:0!important; height:0!important; min-width:0!important; min-height:0!important; max-width:0!important; max-height:0!important; padding:0!important; margin-left:0!important; margin-top:0!important; background:none!important; background-color:transparent!important; background-image:none!important; border-radius:0!important; box-shadow:none!important; outline:none!important; overflow:visible!important; font-size:0!important; line-height:0!important; color:transparent!important; border-top:0 solid transparent!important; border-left:8px solid transparent!important; border-right:8px solid transparent!important; border-bottom:14px solid #FF6BB5!important; filter:drop-shadow(0 0 3px rgba(255,107,181,.65)); transform:translate(-50%,-55%)!important; -webkit-appearance:none!important; appearance:none!important; } html[data-mode="squid"] .fp-bar-knob::before, html[data-mode="squid"] .fp-bar-knob::after, html[data-mode="squid"] #fpBarKnob::before, html[data-mode="squid"] #fpBarKnob::after{ content:none!important; display:none!important; border:0!important; background:none!important; width:0!important;height:0!important; box-shadow:none!important; } /* ========== Squid：仅正圆旋转 + 歌手粉 + 纯三角进度点 ========== */ /* 歌手名强制粉色（顶部/迷你条/brush meta） */ /* 封面：只做正圆，并旋转 */ /* 装饰全关 */ /* 进度点：纯三角无轮廓 */ html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ width:0!important;height:0!important; min-width:0!important;min-height:0!important; padding:0!important;margin:0!important; background:transparent!important; background-color:transparent!important; background-image:none!important; border-radius:0!important; box-shadow:none!important; outline:none!important; border-top:0 none transparent!important; border-left:8px solid transparent!important; border-right:8px solid transparent!important; border-bottom:14px solid #FF6BB5!important; filter:none!important; -webkit-filter:none!important; transform:translate(-50%,-55%)!important; } html[data-mode="squid"] .fp-bar-knob::before, html[data-mode="squid"] .fp-bar-knob::after, html[data-mode="squid"] #fpBarKnob::before, html[data-mode="squid"] #fpBarKnob::after{ content:none!important;display:none!important; } /* ========== Squid 独立：封面必转 + 进度/时间粉色 ========== */ /* 时间文字粉色 */ html[data-mode="squid"] .fp-time, html[data-mode="squid"] #fpCur, html[data-mode="squid"] #fpDur, html[data-mode="squid"] .fp-time.right, html[data-mode="squid"] #fullPlayer .fp-time{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; opacity:1!important; font-weight:600!important; } /* 进度条粉色 */ html[data-mode="squid"] .fp-bar, html[data-mode="squid"] #fpBar{ background:rgba(255,107,181,.22)!important; } html[data-mode="squid"] .fp-bar-fill, html[data-mode="squid"] #fpBarFill{ background:#FF6BB5!important; background-image:none!important; box-shadow:0 0 8px rgba(255,107,181,.45)!important; } html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ border-bottom-color:#FF6BB5!important; } /* 空歌词也粉一点 */ html[data-mode="squid"] #fullPlayer .empty-state, html[data-mode="squid"] #fullPlayer .empty-state .e-title, html[data-mode="squid"] #fullPlayer .empty-state .e-sub, html[data-mode="squid"] #lyricsList .empty-state{ color:rgba(255,182,217,.7)!important; } /* 封面旋转：直接转图片，避开容器 transform 冲突 */ /* 容器本身不要转，避免裁切变形 */ /* ========== Squid 高优先级：盖过 dark 主题选择器 ========== */ html[data-mode="squid"] #fullPlayer .fp-bar, html[data-mode="squid"] #fullPlayer #fpBar{ background:rgba(255,107,181,.35)!important; height:5px!important; } html[data-mode="squid"] #fullPlayer .fp-bar-fill, html[data-mode="squid"] #fullPlayer #fpBarFill{ background:#FF6BB5!important; background-image:none!important; box-shadow:none!important; } html[data-mode="squid"] #fullPlayer .fp-time, html[data-mode="squid"] #fullPlayer #fpCur, html[data-mode="squid"] #fullPlayer #fpDur{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer .lyric-line, html[data-mode="squid"] #fullPlayer #lyricsList .lyric-line{ color:rgba(255,220,235,.72)!important; text-shadow:0 1px 3px rgba(0,0,0,.45)!important; } html[data-mode="squid"] #fullPlayer .lyric-line .lyric-tr{ color:rgba(255,200,230,.5)!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active, html[data-mode="squid"] #fullPlayer #lyricsList .lyric-line.active{ color:#FF8AC8!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr{ color:#FFB6D9!important; } html[data-mode="squid"] #fullPlayer .empty-state .e-title, html[data-mode="squid"] #fullPlayer .empty-state .e-sub{ color:rgba(255,182,217,.75)!important; } /* 封面：在 vinyl 上转（沿用原 spin 机制，但强制 running） */ /* 图片不要 animation:none */ /* ========== Squid 最终：恢复原版胶片圆盘 + 只转它 ========== */ /* 强制用原版 vinyl 结构，清掉我们之前的裁切/停转 */ /* 原版胶片盘外观（圆形黑胶 + 中间封面） */ /* 关键：沿用全局 @keyframes spin，最后一条规则必须赢 */ /* 中间封面图：原版比例，跟着父级转，自己不转 */ /* 装饰可保留 groove，其它花哨关掉以免挡盘 */ /* 进度点：正方形 */ html[data-mode="squid"] #fullPlayer .fp-bar-knob, html[data-mode="squid"] #fullPlayer #fpBarKnob, html[data-mode="squid"] .fp-bar-knob, html[data-mode="squid"] #fpBarKnob{ width:12px!important; height:12px!important; min-width:12px!important; min-height:12px!important; padding:0!important; margin:0!important; border:none!important; border-radius:2px!important; background:#FF6BB5!important; background-image:none!important; box-shadow:0 0 6px rgba(255,107,181,.55)!important; transform:translate(-50%,-50%)!important; filter:none!important; } html[data-mode="squid"] #fullPlayer .fp-bar-knob::before, html[data-mode="squid"] #fullPlayer .fp-bar-knob::after, html[data-mode="squid"] #fpBarKnob::before, html[data-mode="squid"] #fpBarKnob::after{ content:none!important;display:none!important; } /* 进度条/时间/歌词（盖过 dark） */ html[data-mode="squid"] #fullPlayer .fp-bar, html[data-mode="squid"] #fullPlayer #fpBar{ background:rgba(255,107,181,.3)!important; } html[data-mode="squid"] #fullPlayer .fp-bar-fill, html[data-mode="squid"] #fullPlayer #fpBarFill{ background:#FF6BB5!important; } html[data-mode="squid"] #fullPlayer .fp-time, html[data-mode="squid"] #fullPlayer #fpCur, html[data-mode="squid"] #fullPlayer #fpDur{ color:#FF6BB5!important; } html[data-mode="squid"] #fullPlayer .lyric-line{ color:rgba(255,220,235,.7)!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active{ color:#FF8AC8!important; } /* ===== 核清除：播放页禁止任何三角裁切，强制原版胶片圆盘 ===== */ /* 旋转 */ /* Neon daily cards enhanced (synced from reference) */ html[data-mode="neon"] .daily-card{ position:relative!important; border:1px solid rgba(0,246,255,.2)!important; box-shadow:none!important; overflow:hidden!important; background-clip:padding-box!important; min-height:148px!important; height:148px!important; max-height:148px!important; } html[data-mode="neon"] .daily-card.daily30, html[data-mode="neon"] .daily-card.brush, html[data-mode="neon"] .daily-card:not(.daily30):not(.brush){ min-height:148px!important; height:148px!important; max-height:148px!important; } html[data-mode="neon"] .daily-card.is-playing, html[data-mode="neon"] .daily-card.is-playing:not(.daily30):not(.brush){ border-color:rgba(180,100,255,.55)!important; box-shadow:none!important; background: radial-gradient(ellipse 100% 90% at 12% 20%,rgba(255,43,214,.55) 0,transparent 58%), radial-gradient(ellipse 95% 85% at 90% 75%,rgba(0,246,255,.5) 0,transparent 58%), radial-gradient(ellipse 80% 70% at 50% 100%,rgba(140,60,255,.42) 0,transparent 55%), radial-gradient(ellipse 60% 50% at 70% 15%,rgba(0,255,200,.22) 0,transparent 50%), linear-gradient(155deg,#12082a 0,#0a1228 45%,#0e0a22 100%)!important; background-size:220% 220%,220% 220%,200% 200%,180% 180%,100% 100%!important; animation:neonCardFlow 9s ease-in-out infinite,neonCardGlowPulse 3.6s ease-in-out infinite!important; } html[data-mode="neon"] .daily-card.is-playing.daily30{ background: radial-gradient(ellipse 90% 80% at 15% 25%,rgba(0,246,255,.55) 0,transparent 55%), radial-gradient(ellipse 75% 65% at 90% 75%,rgba(80,180,255,.4) 0,transparent 52%), radial-gradient(ellipse 60% 50% at 40% 90%,rgba(120,40,255,.32) 0,transparent 50%), linear-gradient(160deg,#061428 0,#0a1a30 50%,#080e22 100%)!important; background-size:200% 200%,200% 200%,180% 180%,100% 100%!important; animation:neonCardFlow 10s ease-in-out infinite,neonCardGlowPulse 4s ease-in-out infinite!important; border-color:rgba(0,246,255,.6)!important; } html[data-mode="neon"] .daily-card.is-playing.brush{ background: radial-gradient(ellipse 90% 80% at 20% 30%,rgba(255,43,214,.55) 0,transparent 55%), radial-gradient(ellipse 80% 70% at 85% 65%,rgba(255,80,160,.4) 0,transparent 52%), radial-gradient(ellipse 65% 55% at 50% 95%,rgba(0,246,255,.25) 0,transparent 50%), linear-gradient(155deg,#1e0818 0,#16061a 50%,#12081c 100%)!important; background-size:200% 200%,200% 200%,180% 180%,100% 100%!important; animation:neonCardFlow 10s ease-in-out infinite,neonCardGlowPulse 4s ease-in-out infinite!important; border-color:rgba(255,43,214,.55)!important; } @keyframes neonCardFlow{ 0%{background-position:0% 40%,100% 60%,40% 0%,80% 20%,0 0} 25%{background-position:60% 90%,40% 10%,90% 50%,20% 70%,0 0} 50%{background-position:100% 40%,0% 60%,60% 100%,30% 30%,0 0} 75%{background-position:40% 10%,60% 90%,10% 40%,70% 80%,0 0} 100%{background-position:0% 40%,100% 60%,40% 0%,80% 20%,0 0} } @keyframes neonCardGlowPulse{ 0%,100%{filter:brightness(1) saturate(1.05)} 50%{filter:brightness(1.12) saturate(1.2)} } /* Unified daily-card height across themes */ .daily-card{ min-height:148px!important; box-sizing:border-box; } html[data-mode="dark"] .daily-card, html[data-mode="paper"] .daily-card, html[data-mode="light"] .daily-card{ min-height:148px!important; } /* ============================================================ 播放页统一配色（对齐霓虹/图2舒适风格） 不随主主题变化；鱿鱼主题单独排除，暂不动 ============================================================ */ html:not([data-mode="squid"]) #fullPlayer, html:not([data-mode="squid"]) #fullPlayer.show{ color:#f5f9ff!important; } html:not([data-mode="squid"]) #fullPlayer .fp-track-name, html:not([data-mode="squid"]) #fullPlayer #fpTitle{ color:#fff!important; text-shadow:0 1px 10px rgba(0,0,0,.35)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-track-artist, html:not([data-mode="squid"]) #fullPlayer #fpArtist{ color:rgba(220,235,255,.72)!important; text-shadow:0 1px 6px rgba(0,0,0,.28)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-tab{ color:rgba(200,220,245,.42)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-tab.active{ color:#fff!important; border-color:var(--green)!important; } html:not([data-mode="squid"]) #fullPlayer .lyric-line{ color:rgba(230,240,255,.72)!important; } html:not([data-mode="squid"]) #fullPlayer .lyric-line:hover{ color:rgba(240,248,255,.90)!important; } html:not([data-mode="squid"]) #fullPlayer .lyric-line.active{ color:#fff!important; text-shadow:0 1px 12px rgba(0,0,0,.3)!important; } html:not([data-mode="squid"]) #fullPlayer .lyric-line.active .lyric-tr{ color:var(--green)!important; } html:not([data-mode="squid"]) #fullPlayer .lyric-tr{ color:rgba(210,225,245,.58)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-time, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-time{ color:rgba(200,220,245,.55)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-bar, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar{ background:rgba(255,255,255,.22)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-bar-fill, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar-fill{ background:#fff!important; } html:not([data-mode="squid"]) #fullPlayer .fp-bar-knob, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar-knob{ background:#fff!important; box-shadow:0 1px 4px rgba(0,0,0,.35)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-ctrl-btn, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn, html:not([data-mode="squid"]) #fullPlayer .fp-quick button, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button, html:not([data-mode="squid"]) #fullPlayer .fp-quality-btn, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quality-btn, html:not([data-mode="squid"]) #fullPlayer .fp-speed-btn, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-speed-btn, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn svg{ color:rgba(235,245,255,.92)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-quick button.on, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button.on{ color:var(--danger)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-speed-btn.on, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-speed-btn.on{ color:var(--green)!important; } /* 播放键：去圆形底，只留图标（与最终统一规则一致） */ html:not([data-mode="squid"]) #fullPlayer .fp-play, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play{ background:transparent!important; color:rgba(255,255,255,.95)!important; box-shadow:none!important; border:none!important; } html:not([data-mode="squid"]) #fullPlayer .fp-play svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play svg{ color:rgba(255,255,255,.95)!important; } html:not([data-mode="squid"]) #fullPlayer .pl-panel-row{ color:rgba(240,248,255,.95)!important; } html:not([data-mode="squid"]) #fullPlayer .pl-panel-row.playing{ color:var(--green)!important; } html:not([data-mode="squid"]) #fullPlayer .empty-state, html:not([data-mode="squid"]) #fullPlayer .empty-state .e-title{ color:rgba(200,220,245,.55)!important; } /* 底部控件永远透明底，与海报模糊一体 */ html:not([data-mode="squid"]) #fullPlayer .fp-dock, html:not([data-mode="squid"]) #fullPlayer.show .fp-dock, html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) .fp-dock, html:not([data-mode="squid"]) #fullPlayer.is-landscape .fp-dock{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } /* 刷歌模式顶栏文字同样强制浅色 */ html:not([data-mode="squid"]) #fullPlayer.brush-mode .fp-topbar .fp-track-name, html:not([data-mode="squid"]) #fullPlayer.brush-mode #fpTitle{ color:#fff!important; } html:not([data-mode="squid"]) #fullPlayer.brush-mode .fp-topbar .fp-track-artist, html:not([data-mode="squid"]) #fullPlayer.brush-mode #fpArtist{ color:rgba(220,235,255,.72)!important; } /* ===== FINAL：默认/亮色主题播放页强制浅色控件（覆盖旧「统一深色」） ===== */ html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-ctrl-btn, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-quick button, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-quality-btn, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-speed-btn, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quality-btn, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-speed-btn{ color:rgba(235,245,255,.92)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-ctrl-btn svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-quick button svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button svg{ color:rgba(235,245,255,.92)!important; fill:currentColor; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-time, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-time{ color:rgba(200,220,245,.55)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-bar, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar{ background:rgba(255,255,255,.22)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-bar-fill, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar-fill{ background:#fff!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-bar-knob, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-bar-knob{ background:#fff!important; box-shadow:0 1px 4px rgba(0,0,0,.3)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-play, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play{ background:transparent!important;color:rgba(255,255,255,.95)!important; box-shadow:none!important;border:none!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-play svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play svg{ color:rgba(255,255,255,.95)!important; fill:rgba(255,255,255,.95)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-track-name, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer #fpTitle{ color:#fff!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-track-artist, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer #fpArtist{ color:rgba(220,235,255,.72)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .lyric-line{ color:rgba(230,240,255,.72)!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .lyric-line.active{ color:#fff!important; } html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock{ background:transparent!important; } /* paper 播放页同样浅色 */ html[data-mode="paper"] #fullPlayer .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer .fp-dock .fp-ctrl-btn, html[data-mode="paper"] #fullPlayer .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-speed-btn, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quality-btn, html[data-mode="paper"] #fullPlayer .fp-dock .fp-speed-btn, html[data-mode="paper"] #fullPlayer .fp-ctrl-btn svg, html[data-mode="paper"] #fullPlayer .fp-quick button svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-ctrl-btn svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quick button svg{ color:rgba(235,245,255,.92)!important; } html[data-mode="paper"] #fullPlayer .fp-time, html[data-mode="paper"] #fullPlayer .fp-dock .fp-time{color:rgba(200,220,245,.55)!important;} html[data-mode="paper"] #fullPlayer .fp-bar, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar{background:rgba(255,255,255,.22)!important;} html[data-mode="paper"] #fullPlayer .fp-bar-fill, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar-fill{background:#fff!important;} html[data-mode="paper"] #fullPlayer .fp-bar-knob, html[data-mode="paper"] #fullPlayer .fp-dock .fp-bar-knob{background:#fff!important;} html[data-mode="paper"] #fullPlayer .fp-play, html[data-mode="paper"] #fullPlayer .fp-dock .fp-play{background:transparent!important;color:rgba(255,255,255,.95)!important;box-shadow:none!important;border:none!important;} html[data-mode="paper"] #fullPlayer .fp-play svg, html[data-mode="paper"] #fullPlayer .fp-dock .fp-play svg{color:rgba(255,255,255,.95)!important;} html[data-mode="paper"] #fullPlayer .fp-track-name, html[data-mode="paper"] #fullPlayer #fpTitle{color:#fff!important;} html[data-mode="paper"] #fullPlayer .fp-track-artist, html[data-mode="paper"] #fullPlayer #fpArtist{color:rgba(220,235,255,.72)!important;} html[data-mode="paper"] #fullPlayer .fp-dock{background:transparent!important;} html.qqm-authed #loginView{display:none!important;visibility:hidden!important;} /* ========== FINAL SQUID OVERRIDES /* ============================================================ 对齐参考：日推海报布局（dark / neon / paper / squid 共用） + 默认/light 背景与搜索源文字可见 ============================================================ */ /* 统一高度 */ html[data-mode="dark"] .daily-card, html[data-mode="neon"] .daily-card, html[data-mode="paper"] .daily-card, html[data-mode="squid"] .daily-card, html[data-mode="dark"] #daily30Card, html[data-mode="dark"] #dailyRecCard, html[data-mode="dark"] #dailyBrushCard, html[data-mode="neon"] #daily30Card, html[data-mode="neon"] #dailyRecCard, html[data-mode="neon"] #dailyBrushCard, html[data-mode="paper"] #daily30Card, html[data-mode="paper"] #dailyRecCard, html[data-mode="paper"] #dailyBrushCard, html[data-mode="squid"] #daily30Card, html[data-mode="squid"] #dailyRecCard, html[data-mode="squid"] #dailyBrushCard{ position:relative!important; overflow:hidden!important; box-sizing:border-box!important; height:148px!important; min-height:148px!important; max-height:148px!important; display:block!important; } @media (max-width:400px){ html[data-mode="dark"] .daily-card, html[data-mode="neon"] .daily-card, html[data-mode="paper"] .daily-card, html[data-mode="squid"] .daily-card, html[data-mode="dark"] #daily30Card, html[data-mode="dark"] #dailyRecCard, html[data-mode="dark"] #dailyBrushCard, html[data-mode="neon"] #daily30Card, html[data-mode="neon"] #dailyRecCard, html[data-mode="neon"] #dailyBrushCard, html[data-mode="paper"] #daily30Card, html[data-mode="paper"] #dailyRecCard, html[data-mode="paper"] #dailyBrushCard, html[data-mode="squid"] #daily30Card, html[data-mode="squid"] #dailyRecCard, html[data-mode="squid"] #dailyBrushCard{ height:132px!important; min-height:132px!important; max-height:132px!important; } } /* 封面：右侧约 62% 海报，带左侧羽化遮罩 */ html[data-mode="dark"] .daily-card .dc-art, html[data-mode="neon"] .daily-card .dc-art, html[data-mode="paper"] .daily-card .dc-art, html[data-mode="squid"] .daily-card .dc-art, html[data-mode="dark"] #daily30Card .dc-art, html[data-mode="dark"] #dailyRecCard .dc-art, html[data-mode="dark"] #dailyBrushCard .dc-art, html[data-mode="neon"] #daily30Card .dc-art, html[data-mode="neon"] #dailyRecCard .dc-art, html[data-mode="neon"] #dailyBrushCard .dc-art, html[data-mode="paper"] #daily30Card .dc-art, html[data-mode="paper"] #dailyRecCard .dc-art, html[data-mode="paper"] #dailyBrushCard .dc-art, html[data-mode="squid"] #daily30Card .dc-art, html[data-mode="squid"] #dailyRecCard .dc-art, html[data-mode="squid"] #dailyBrushCard .dc-art{ position:absolute!important; left:auto!important; right:0!important; top:0!important; bottom:0!important; width:62%!important; max-width:none!important; height:100%!important; padding:0!important; margin:0!important; overflow:hidden!important; display:block!important; filter:none!important; z-index:0!important; pointer-events:none!important; border-radius:0!important; } html[data-mode="dark"] .daily-card .dc-art-inner, html[data-mode="neon"] .daily-card .dc-art-inner, html[data-mode="paper"] .daily-card .dc-art-inner, html[data-mode="squid"] .daily-card .dc-art-inner, html[data-mode="dark"] #daily30Cover, html[data-mode="dark"] #dailyRecCover, html[data-mode="dark"] #dailyBrushCover, html[data-mode="neon"] #daily30Cover, html[data-mode="neon"] #dailyRecCover, html[data-mode="neon"] #dailyBrushCover, html[data-mode="paper"] #daily30Cover, html[data-mode="paper"] #dailyRecCover, html[data-mode="paper"] #dailyBrushCover, html[data-mode="squid"] #daily30Cover, html[data-mode="squid"] #dailyRecCover, html[data-mode="squid"] #dailyBrushCover{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; aspect-ratio:auto!important; border-radius:0!important; border:none!important; box-shadow:none!important; filter:none!important; clip-path:none!important; -webkit-clip-path:none!important; background-size:cover!important; background-position:center right!important; background-repeat:no-repeat!important; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 16%, rgba(0,0,0,.5) 40%, #000 70%, #000 100%)!important; mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 16%, rgba(0,0,0,.5) 40%, #000 70%, #000 100%)!important; -webkit-mask-size:100% 100%!important; mask-size:100% 100%!important; } html[data-mode="dark"] .daily-card .dc-art-inner img, html[data-mode="neon"] .daily-card .dc-art-inner img, html[data-mode="paper"] .daily-card .dc-art-inner img, html[data-mode="squid"] .daily-card .dc-art-inner img, html[data-mode="dark"] #daily30Cover img, html[data-mode="dark"] #dailyRecCover img, html[data-mode="dark"] #dailyBrushCover img, html[data-mode="neon"] #daily30Cover img, html[data-mode="neon"] #dailyRecCover img, html[data-mode="neon"] #dailyBrushCover img, html[data-mode="paper"] #daily30Cover img, html[data-mode="paper"] #dailyRecCover img, html[data-mode="paper"] #dailyBrushCover img, html[data-mode="squid"] #daily30Cover img, html[data-mode="squid"] #dailyRecCover img, html[data-mode="squid"] #dailyBrushCover img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center right!important; border-radius:0!important; display:block!important; } html[data-mode="dark"] .daily-card .dc-body, html[data-mode="neon"] .daily-card .dc-body, html[data-mode="paper"] .daily-card .dc-body, html[data-mode="squid"] .daily-card .dc-body{ position:relative!important; z-index:2!important; width:55%!important; max-width:55%!important; height:100%!important; background:transparent!important; display:flex!important; flex-direction:column!important; justify-content:space-between!important; padding:16px 10px 14px 16px!important; box-sizing:border-box!important; } html[data-mode="dark"] .daily-card .dc-vinyl, html[data-mode="neon"] .daily-card .dc-vinyl, html[data-mode="paper"] .daily-card .dc-vinyl, html[data-mode="squid"] .daily-card .dc-vinyl{ display:none!important; opacity:0!important; visibility:hidden!important; width:0!important; height:0!important; } /* 霓虹日推：渐变底 + 描边（参考） */ html[data-mode="neon"] .daily-card{ border:1px solid rgba(0,246,255,.28)!important; box-shadow:none!important; background: linear-gradient(135deg, rgba(255,43,214,.22) 0%, transparent 42%), linear-gradient(225deg, rgba(0,246,255,.18) 0%, transparent 48%), linear-gradient(155deg, #16082a 0%, #0a1228 50%, #12082a 100%)!important; } html[data-mode="neon"] .daily-card.daily30{ background: linear-gradient(135deg, rgba(0,246,255,.28) 0%, transparent 45%), linear-gradient(225deg, rgba(120,40,255,.18) 0%, transparent 50%), linear-gradient(160deg, #0a1428 0%, #060a1a 50%, #0c0a20 100%)!important; border-color:rgba(0,246,255,.38)!important; } html[data-mode="neon"] .daily-card.brush{ background: linear-gradient(135deg, rgba(255,43,214,.32) 0%, transparent 44%), linear-gradient(225deg, rgba(0,246,255,.14) 0%, transparent 50%), linear-gradient(155deg, #220818 0%, #14061a 50%, #1a0a20 100%)!important; border-color:rgba(255,43,214,.36)!important; } html[data-mode="neon"] .daily-card .dc-play{ background:linear-gradient(135deg,#00f6ff 0%,#8a4dff 50%,#ff2bd6 100%)!important; color:#03010a!important; border:none!important; border-radius:50%!important; box-shadow:0 0 14px rgba(0,246,255,.5),0 0 28px rgba(255,43,214,.28)!important; width:38px!important; height:38px!important; } html[data-mode="neon"] .daily-card .dc-play svg{ opacity:1!important; display:block!important; color:#03010a!important; fill:#03010a!important; } /* 鱿鱼形状按钮保持 */ html[data-mode="squid"] .daily-card .dc-play{ background:transparent!important; border:none!important; box-shadow:none!important; width:36px!important; height:36px!important; position:relative!important; } html[data-mode="squid"] .daily-card .dc-play svg{opacity:0!important;display:none!important;} html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play::before, html[data-mode="squid"] #dailyRecCard .dc-play::before{ content:""!important;display:block!important;position:absolute!important; left:50%!important;top:50%!important;width:22px!important;height:22px!important; border:2.5px solid #FF6BB5!important;border-radius:50%!important;background:transparent!important; transform:translate(-50%,-50%)!important;box-shadow:0 0 10px rgba(237,27,118,.45)!important; } html[data-mode="squid"] .daily-card.daily30 .dc-play::before, html[data-mode="squid"] #daily30Card .dc-play::before{ content:""!important;display:block!important;position:absolute!important; left:50%!important;top:50%!important;width:20px!important;height:20px!important; border:2.5px solid #FF6BB5!important;border-radius:2px!important;background:transparent!important; transform:translate(-50%,-50%)!important;box-shadow:0 0 10px rgba(237,27,118,.45)!important; } html[data-mode="squid"] .daily-card.brush .dc-play::before, html[data-mode="squid"] #dailyBrushCard .dc-play::before{ content:""!important;display:block!important;position:absolute!important; left:50%!important;top:50%!important;width:0!important;height:0!important; border-style:solid!important;border-width:0 11px 19px 11px!important; border-color:transparent transparent #FF6BB5 transparent!important; transform:translate(-50%,-50%)!important;filter:drop-shadow(0 0 8px rgba(237,27,118,.55)); background:none!important; } html[data-mode="squid"] .daily-card.brush .dc-play::after, html[data-mode="squid"] #dailyBrushCard .dc-play::after{ content:""!important;display:block!important;position:absolute!important; left:50%!important;top:50%!important;width:0!important;height:0!important; border-style:solid!important;border-width:0 6px 11px 6px!important; border-color:transparent transparent #0a1214 transparent!important; transform:translate(-50%,calc(-50% + 2px))!important;background:none!important; } html[data-mode="squid"] .daily-card:not(.brush) .dc-play::after{content:none!important;display:none!important;} /* 迷你条：播放空心圆 + 下一首粉三角 */ html[data-mode="squid"] #playerBar #pbPlay, html[data-mode="squid"] #pbPlay{ width:40px!important;height:40px!important;min-width:40px!important; border-radius:50%!important;background:transparent!important;background-image:none!important; border:2.5px solid #FF6BB5!important;box-shadow:0 0 14px rgba(237,27,118,.5)!important; color:transparent!important;position:relative!important; } html[data-mode="squid"] #pbPlay svg{opacity:0!important;display:none!important;} html[data-mode="squid"] #pbPlay::before, html[data-mode="squid"] #pbPlay:not(.is-playing)::before{ content:""!important;display:block!important;position:absolute!important; left:50%!important;top:50%!important;width:0!important;height:0!important; border-style:solid!important;border-width:7px 0 7px 12px!important; border-color:transparent transparent transparent #FF6BB5!important; transform:translate(-30%,-50%)!important;background:none!important; } html[data-mode="squid"] #pbPlay.is-playing::before{ width:4px!important;height:14px!important;border:none!important; background:#FF6BB5!important;border-radius:1.5px!important; box-shadow:8px 0 0 #FF6BB5!important;transform:translate(-6px,-50%)!important; } html[data-mode="squid"] #playerBar #pbListBtn, html[data-mode="squid"] #pbListBtn, html[data-mode="squid"] .pb-list-btn{ width:40px!important;height:40px!important;min-width:40px!important; background:transparent!important;background-color:transparent!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none'%3E%3Cpath d='M12 2.5L21.5 19.5H2.5L12 2.5Z' stroke='%23FF6BB5' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:center!important;background-size:20px 18px!important; border:none!important;border-radius:0!important;box-shadow:none!important;color:transparent!important; } html[data-mode="squid"] #pbListBtn svg, html[data-mode="squid"] .pb-list-btn svg{opacity:0!important;display:none!important;visibility:hidden!important;} html[data-mode="squid"] #pbListBtn::before, html[data-mode="squid"] #pbListBtn::after, html[data-mode="squid"] .pb-list-btn::before, html[data-mode="squid"] .pb-list-btn::after{content:none!important;display:none!important;} /* 迷你条下一首三角：绕正三角几何中心正转一圈 */ html[data-mode="squid"] #playerBar #pbListBtn, html[data-mode="squid"] #pbListBtn, html[data-mode="squid"] .pb-list-btn{ transform-origin:50% 56%!important; } html[data-mode="squid"] #pbListBtn.sg-spin, html[data-mode="squid"] .pb-list-btn.sg-spin{ animation:sg-spin .48s cubic-bezier(0.22,1,0.36,1) both!important; } html[data-mode="squid"] #pbListBtn.sg-spin:active, html[data-mode="squid"] .pb-list-btn.sg-spin:active{ animation:sg-spin .48s cubic-bezier(0.22,1,0.36,1) both!important; } @keyframes sg-spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } /* ---------- 默认 / light 主题：参考紫灰纸感背景 + 搜索源文字可见 ---------- */ html[data-mode="light"], html[data-mode="light"] body{ background:#d0c8d4!important; color:#1c1916!important; } html[data-mode="light"] body{ background:#d0c8d4!important; } html[data-mode="light"] #ambientBg{ background: radial-gradient(ellipse 90% 70% at 10% 5%, rgba(255,140,175,.55) 0%, transparent 55%), radial-gradient(ellipse 80% 65% at 95% 8%, rgba(130,175,255,.48) 0%, transparent 55%), radial-gradient(ellipse 75% 60% at 85% 90%, rgba(175,145,255,.46) 0%, transparent 55%), radial-gradient(ellipse 70% 55% at 5% 88%, rgba(100,210,175,.40) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 48% 48%, rgba(255,195,130,.35) 0%, transparent 58%), linear-gradient(165deg, #d4c8d2 0%, #c8d0e0 40%, #c8d6d0 70%, #d0c8d4 100%)!important; filter:none!important; animation:none!important; } html[data-mode="light"] #ambientVeil{ background:linear-gradient(180deg, rgba(200,190,205,.40) 0%, rgba(200,190,205,.12) 28%, rgba(200,190,205,.16) 55%, rgba(200,190,205,.48) 100%)!important; opacity:1!important; } html[data-mode="light"] #grain{opacity:.08!important;mix-blend-mode:multiply!important;} html[data-mode="light"] #topbar{ background:linear-gradient(180deg, rgba(208,200,212,.94) 0%, rgba(208,200,212,0) 100%)!important; } html[data-mode="light"] .sec-title, html[data-mode="light"] .card-name, html[data-mode="light"] .song-title{color:#1c1916!important;} html[data-mode="light"] .card-sub, html[data-mode="light"] .song-sub, html[data-mode="light"] .song-idx{color:rgba(40,32,26,0.5)!important;} /* 搜索源 tabs：默认/light 必须深色字，避免被 dark/squid 白字盖住 */ html[data-mode="light"] #sourceTabs.sr-tabs, html[data-mode="paper"] #sourceTabs.sr-tabs{ background:rgba(40,30,20,0.08)!important; border:1px solid rgba(40,30,20,0.08)!important; box-shadow:none!important; } html[data-mode="light"] #sourceTabs .sr-tab, html[data-mode="light"] #sourceTabs .sr-tab[data-src], html[data-mode="paper"] #sourceTabs .sr-tab, html[data-mode="paper"] #sourceTabs .sr-tab[data-src]{ color:rgba(40,32,26,0.55)!important; opacity:1!important; } html[data-mode="light"] #sourceTabs .sr-tab.active, html[data-mode="light"] #sourceTabs .sr-tab.active[data-src], html[data-mode="paper"] #sourceTabs .sr-tab.active, html[data-mode="paper"] #sourceTabs .sr-tab.active[data-src]{ color:#1c1916!important; } html[data-mode="light"] #sourceTabs .sr-indicator, html[data-mode="paper"] #sourceTabs .sr-indicator{ background:#ffffff!important; box-shadow:0 2px 8px rgba(40,30,20,0.12), 0 1px 0 #fff inset!important; } html[data-mode="light"] .hot-search-tag, html[data-mode="paper"] .hot-search-tag{ background:rgba(40,30,20,0.07)!important; color:#1c1916!important; border:1px solid rgba(40,30,20,0.08)!important; } html[data-mode="light"] .search-box{ background:rgba(255,255,255,0.82)!important; border:1px solid rgba(40,30,20,0.10)!important; color:#1c1916!important; } html[data-mode="light"] .search-box input, html[data-mode="light"] #searchInput{ color:#1c1916!important; } html[data-mode="light"] .search-box input::placeholder{ color:#9a928a!important; } /* 霓虹日推：去掉文字背后的框线，边框更淡 */ html[data-mode="neon"] .daily-card, html[data-mode="neon"] #dailyRecCard, html[data-mode="neon"] #daily30Card, html[data-mode="neon"] #dailyBrushCard{ border:none!important; box-shadow:none!important; outline:none!important; } html[data-mode="neon"] .daily-card::before, html[data-mode="neon"] .daily-card::after{ /* 保留参考的扫描线可极淡，不要实线框 */ border:none!important; box-shadow:none!important; outline:none!important; } html[data-mode="neon"] .daily-card .dc-body{ background:transparent!important; border:none!important; box-shadow:none!important; outline:none!important; } html[data-mode="neon"] .daily-card .dc-title, html[data-mode="neon"] .daily-card .dc-sub{ background:transparent!important; border:none!important; box-shadow:none!important; } /* ========== 最终修正：霓虹去框 / 鱿鱼圆钮 / 播放形态切换 / 三角居中 ========== */ /* 霓虹：彻底去掉卡片外框与四角描边 */ html[data-mode="neon"] .daily-card, html[data-mode="neon"] #dailyRecCard, html[data-mode="neon"] #daily30Card, html[data-mode="neon"] #dailyBrushCard{ border:none!important; outline:none!important; box-shadow:none!important; } html[data-mode="neon"] .daily-card::before, html[data-mode="neon"] .daily-card::after, html[data-mode="neon"] #dailyRecCard::before, html[data-mode="neon"] #dailyRecCard::after, html[data-mode="neon"] #daily30Card::before, html[data-mode="neon"] #daily30Card::after, html[data-mode="neon"] #dailyBrushCard::before, html[data-mode="neon"] #dailyBrushCard::after{ content:none!important; display:none!important; opacity:0!important; border:none!important; background:none!important; box-shadow:none!important; width:0!important; height:0!important; } /* 鱿鱼 · 猜你喜欢：空心粉圆（覆盖实心黑块） */ html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play, html[data-mode="squid"] #dailyRecCard .dc-play{ background:transparent!important; background-image:none!important; border:none!important; box-shadow:none!important; width:36px!important; height:36px!important; position:relative!important; } html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play::before, html[data-mode="squid"] #dailyRecCard .dc-play::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:22px!important; height:22px!important; border:2.5px solid #FF6BB5!important; border-radius:50%!important; background:transparent!important; background-image:none!important; box-shadow:0 0 10px rgba(237,27,118,.45)!important; transform:translate(-50%,-50%)!important; opacity:1!important; filter:none!important; } html[data-mode="squid"] .daily-card:not(.daily30):not(.brush) .dc-play::after, html[data-mode="squid"] #dailyRecCard .dc-play::after{ content:none!important; display:none!important; opacity:0!important; width:0!important; height:0!important; background:none!important; border:none!important; } /* 全屏播放钮：空心圆 + 居中三角/暂停条，并随 is-playing 切换（55px） */ html[data-mode="squid"] #fpPlay, html[data-mode="squid"] #fullPlayer .fp-play, html[data-mode="squid"] #fullPlayer .fp-dock .fp-play, html[data-mode="squid"] .fp-dock .fp-play, html[data-mode="squid"] #fullPlayer:not(.is-landscape) #fpPlay, html[data-mode="squid"] #fullPlayer:not(.is-landscape) .fp-dock #fpPlay{ width:55px!important; height:55px!important; min-width:55px!important; min-height:55px!important; max-width:55px!important; max-height:55px!important; border-radius:50%!important; background:transparent!important; background-color:transparent!important; background-image:none!important; border:2.5px solid #FF6BB5!important; box-shadow:0 0 14px rgba(237,27,118,.4)!important; color:transparent!important; position:relative!important; overflow:visible!important; flex-shrink:0!important; } html[data-mode="squid"] #fpPlay svg, html[data-mode="squid"] #fullPlayer .fp-play svg, html[data-mode="squid"] #fullPlayer .fp-dock .fp-play svg, html[data-mode="squid"] .fp-dock .fp-play svg{ opacity:0!important; display:none!important; visibility:hidden!important; width:0!important;height:0!important; } /* 暂停/未播：居中三角 */ html[data-mode="squid"] #fpPlay::before, html[data-mode="squid"] #fpPlay.is-paused::before, html[data-mode="squid"] #fpPlay:not(.is-playing)::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:0!important; height:0!important; border-style:solid!important; border-width:8px 0 8px 14px!important; border-color:transparent transparent transparent #FF6BB5!important; background:none!important; box-shadow:none!important; border-radius:0!important; /* 三角视觉重心略偏右，用 -42% 水平补偿居中 */ transform:translate(-42%,-50%)!important; opacity:1!important; z-index:2!important; } /* 播放中：双竖条暂停 */ html[data-mode="squid"] #fpPlay.is-playing::before{ width:5px!important; height:16px!important; border:none!important; border-width:0!important; background:#FF6BB5!important; border-radius:1.5px!important; box-shadow:9px 0 0 #FF6BB5!important; transform:translate(-7px,-50%)!important; } html[data-mode="squid"] #fpPlay::after, html[data-mode="squid"] #fpPlay.is-playing::after{ content:none!important; display:none!important; } /* 迷你播放钮同步形态 */ html[data-mode="squid"] #pbPlay, html[data-mode="squid"] #playerBar #pbPlay{ width:40px!important; height:40px!important; border-radius:50%!important; background:transparent!important; background-image:none!important; border:2.5px solid #FF6BB5!important; box-shadow:0 0 14px rgba(237,27,118,.5)!important; position:relative!important; color:transparent!important; } html[data-mode="squid"] #pbPlay svg{opacity:0!important;display:none!important;visibility:hidden!important;} html[data-mode="squid"] #pbPlay::before, html[data-mode="squid"] #pbPlay.is-paused::before, html[data-mode="squid"] #pbPlay:not(.is-playing)::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:0!important; height:0!important; border-style:solid!important; border-width:7px 0 7px 12px!important; border-color:transparent transparent transparent #FF6BB5!important; background:none!important; transform:translate(-42%,-50%)!important; opacity:1!important; z-index:2!important; } html[data-mode="squid"] #pbPlay.is-playing::before{ width:4px!important; height:14px!important; border:none!important; border-width:0!important; background:#FF6BB5!important; border-radius:1.5px!important; box-shadow:8px 0 0 #FF6BB5!important; transform:translate(-6px,-50%)!important; } html[data-mode="squid"] #pbPlay::after{content:none!important;display:none!important;} /* ========== 默认主题：搜索图标 / 歌单字色 / 听书页统一 ========== */ /* 搜索框放大镜：深色可见 */ html[data-mode="light"] .search-box svg, html[data-mode="light"] .search-box > svg, html[data-mode="light"] #searchBox svg{ color:rgba(40,32,26,0.48)!important; fill:rgba(40,32,26,0.48)!important; opacity:1!important; } html[data-mode="light"] .search-box.focused svg, html[data-mode="light"] .search-box.focused > svg{ color:rgba(40,32,26,0.72)!important; } /* 首页卡片名仍用深色；歌单/详情列表必须白字（详情页是深色底） */ html[data-mode="light"] #view-detail .song-title, html[data-mode="light"] #view-detail .song-sub, html[data-mode="light"] #view-detail .song-idx, html[data-mode="light"] #view-detail .song-dur, html[data-mode="light"] #detailSongs .song-title, html[data-mode="light"] #detailSongs .song-sub, html[data-mode="light"] #detailSongs .song-idx, html[data-mode="light"] #detailSongs .song-dur, html[data-mode="light"].detail-mode .song-title, html[data-mode="light"].detail-mode .song-sub, html[data-mode="light"].detail-mode .song-idx, html[data-mode="light"].detail-mode .song-dur, html[data-mode="light"] .song-row .song-title, html[data-mode="light"] .song-row .song-sub, html[data-mode="light"] .song-row .song-idx{ color:#fff!important; } html[data-mode="light"] #view-detail .song-sub, html[data-mode="light"] #detailSongs .song-sub, html[data-mode="light"] .song-row .song-sub, html[data-mode="light"] .song-row .song-idx, html[data-mode="light"] .song-row .song-dur{ color:rgba(255,255,255,0.55)!important; } html[data-mode="light"] #view-detail .detail-title, html[data-mode="light"].detail-mode .detail-title{ color:#fff!important; } html[data-mode="light"] #view-detail .detail-sub, html[data-mode="light"] #view-detail .detail-desc, html[data-mode="light"].detail-mode .detail-sub, html[data-mode="light"].detail-mode .detail-desc{ color:rgba(255,255,255,0.65)!important; } /* 详情/歌单页背景跟随主页 ambient，去掉纯黑罩 */ html[data-mode="light"] #view-detail, html[data-mode="light"].detail-mode #view-detail, html[data-mode="light"] #app.detail-mode, html[data-mode="light"].detail-mode #app{ background:transparent!important; } html[data-mode="light"] #view-detail .detail-hero, html[data-mode="light"].detail-mode .detail-hero{ background:transparent!important; } /* 听书分类页：网易 / 酷我 — 背景透明跟随主页 */ html[data-mode="light"] #view-neVoice, html[data-mode="light"] #view-kwVoice, html[data-mode="light"] .ne-voice-page, html[data-mode="light"] .kw-voice-page, html[data-mode="light"] [data-view="neVoice"], html[data-mode="light"] [data-view="kwVoice"]{ background:transparent!important; } /* 听书 tab：白底黑字 */ html[data-mode="light"] .ne-voice-tabs .tab, html[data-mode="light"] .ne-voice-tabs .chip, html[data-mode="light"] .kw-voice-tabs .tab, html[data-mode="light"] .kw-voice-tabs .chip, html[data-mode="light"] .voice-cat-tab, html[data-mode="light"] .ne-voice-cat, html[data-mode="light"] .kw-voice-cat, html[data-mode="light"] #neVoiceTabs button, html[data-mode="light"] #kwVoiceTabs button, html[data-mode="light"] .category-tabs .tab, html[data-mode="light"] .cat-chip{ background:rgba(255,255,255,0.92)!important; color:#1c1916!important; border:none!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; } html[data-mode="light"] .ne-voice-tabs .tab.active, html[data-mode="light"] .kw-voice-tabs .tab.active, html[data-mode="light"] .voice-cat-tab.active, html[data-mode="light"] .cat-chip.active, html[data-mode="light"] #neVoiceTabs button.active, html[data-mode="light"] #kwVoiceTabs button.active{ background:#fff!important; color:#1c1916!important; box-shadow:0 2px 8px rgba(40,30,20,0.12)!important; } /* 返回按钮：白底黑字 */ html[data-mode="light"] .detail-back, html[data-mode="light"] #detailBack, html[data-mode="light"] .page-back, html[data-mode="light"] .ne-voice-back, html[data-mode="light"] .kw-voice-back, html[data-mode="light"] .subview-back, html[data-mode="light"] .back-btn{ background:rgba(255,255,255,0.92)!important; color:#1c1916!important; border:none!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; } html[data-mode="light"] .detail-back svg, html[data-mode="light"] #detailBack svg, html[data-mode="light"] .page-back svg, html[data-mode="light"] .back-btn svg{ color:#1c1916!important; fill:#1c1916!important; } /* 听书页标题等 */ html[data-mode="light"] #view-neVoice .sec-title, html[data-mode="light"] #view-kwVoice .sec-title, html[data-mode="light"] .ne-voice-page .sec-title, html[data-mode="light"] .kw-voice-page .sec-title{ color:#1c1916!important; } /* ========== light：听书查看全部 / 歌单详情 与主页统一 ========== */ html[data-mode="light"].detail-mode.voice-all-mode #ambientBg{ /* 保持与 light 主页同一套柔和渐变，不盖灰底 */ opacity:1!important; filter:none!important; } html[data-mode="light"].detail-mode.voice-all-mode #ambientVeil{ opacity:1!important; } html[data-mode="light"].detail-mode.voice-all-mode #view-detail, html[data-mode="light"].detail-mode.voice-all-mode #view-detail.view, html[data-mode="light"].detail-mode.voice-all-mode #viewport #view-detail{ background:transparent!important; color:#1c1916!important; } html[data-mode="light"].detail-mode.voice-all-mode #view-detail .sec-title, html[data-mode="light"].detail-mode.voice-all-mode #view-detail html[data-mode="light"].detail-mode.voice-all-mode #view-detail .voice-sub, html[data-mode="light"].detail-mode.voice-all-mode #view-detail /* Tab 白底黑字 */ html[data-mode="light"] .voice-all-tab, html[data-mode="light"].detail-mode.voice-all-mode html[data-mode="light"] .voice-all-tab.active, html[data-mode="light"].detail-mode.voice-all-mode /* 返回按钮白底黑字 */ html[data-mode="light"].detail-mode.voice-all-mode #detailBackBtn, html[data-mode="light"].detail-mode #detailBackBtn, html[data-mode="light"] #detailBackBtn{ background:#ffffff!important; color:#1c1916!important; border:1px solid rgba(40,30,20,0.10)!important; box-shadow:0 1px 4px rgba(40,30,20,0.08)!important; } html[data-mode="light"].detail-mode.voice-all-mode #detailBackBtn svg, html[data-mode="light"] #detailBackBtn svg{ color:#1c1916!important; fill:#1c1916!important; } html[data-mode="light"] .voice-sort-btn{ color:rgba(40,32,26,0.55)!important; background:#ffffff!important; border:1px solid rgba(40,30,20,0.08)!important; } html[data-mode="light"] .voice-sort-btn.active{ color:#1c1916!important; background:#ffffff!important; font-weight:700!important; box-shadow:0 1px 4px rgba(40,30,20,0.1)!important; } /* 普通歌单详情：字必须白（封面模糊深色底） */ html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) .song-row .song-title{ color:#ffffff!important; } html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) .song-row .song-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) .song-row .song-idx, html[data-mode="light"].detail-mode:not(.voice-all-mode) .song-row .song-dur{ color:rgba(255,255,255,0.55)!important; } html[data-mode="light"].detail-mode:not(.voice-all-mode) .detail-title{ color:#fff!important; } html[data-mode="light"].detail-mode:not(.voice-all-mode) .detail-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) .detail-desc{ color:rgba(255,255,255,0.65)!important; } /* 播放全部按钮保持白底深字 */ html[data-mode="light"].detail-mode .detail-play-all{ background:#fff!important; color:#111!important; } /* 去掉日推卡时段动态光晕（白天太阳/雾气等） */ .daily-card.period-morning::before, .daily-card.period-morning::after, .daily-card.period-noon::before, .daily-card.period-noon::after, .daily-card.period-afternoon::before, .daily-card.period-afternoon::after, .daily-card.period-evening::before, .daily-card.period-evening::after, .daily-card.period-night::before, .daily-card.period-night::after, .daily-card.period-morning:not(.brush)::before, .daily-card.period-morning:not(.brush)::after, .daily-card.period-noon:not(.brush)::before, .daily-card.period-noon:not(.brush)::after, .daily-card.period-afternoon:not(.brush)::before, .daily-card.period-afternoon:not(.brush)::after, .daily-card.period-evening:not(.brush)::before, .daily-card.period-evening:not(.brush)::after, .daily-card.period-night:not(.brush)::before, .daily-card.period-night:not(.brush)::after{ content:none!important; display:none!important; opacity:0!important; background:none!important; box-shadow:none!important; animation:none!important; width:0!important; height:0!important; } /* ========== 鱿鱼主题：全屏页字色（只留参考正确一层） ========== */ /* 歌名下歌手 */ html[data-mode="squid"] #fpArtist, html[data-mode="squid"] #fullPlayer #fpArtist, html[data-mode="squid"] #fullPlayer .fp-track-artist, html[data-mode="squid"] .fp-track-artist, html[data-mode="squid"] .fp-topbar .fp-track-artist, html[data-mode="squid"] #pbArtist, html[data-mode="squid"] .pb-artist, html[data-mode="squid"] #fpBrushArtist, html[data-mode="squid"] .bm-artist{ color:rgba(255,220,235,.78)!important; -webkit-text-fill-color:rgba(255,220,235,.78)!important; opacity:1!important; text-shadow:none!important; } /* 播放列表行：未播放 */ html[data-mode="squid"] #fullPlayer .pl-panel-row, html[data-mode="squid"] #fullPlayer .pl-panel-row>span, html[data-mode="squid"] #fullPlayer #playlistPanel .pl-panel-row, html[data-mode="squid"] #playlistPanel .pl-panel-row, html[data-mode="squid"] .pl-panel-row, html[data-mode="squid"] .pl-list .pl-panel-row{ color:rgba(255,236,245,.78)!important; -webkit-text-fill-color:rgba(255,236,245,.78)!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer .pl-panel-row>span:last-child, html[data-mode="squid"] #fullPlayer .pl-panel-row .pl-dur, html[data-mode="squid"] #playlistPanel .pl-panel-row>span:last-child{ color:rgba(255,200,230,.55)!important; -webkit-text-fill-color:rgba(255,200,230,.55)!important; } html[data-mode="squid"] #fullPlayer .pl-panel-row>span:first-child, html[data-mode="squid"] #playlistPanel .pl-panel-row>span:first-child{ color:rgba(255,200,230,.5)!important; -webkit-text-fill-color:rgba(255,200,230,.5)!important; } /* 播放列表行：正在播 */ html[data-mode="squid"] #fullPlayer .pl-panel-row.playing, html[data-mode="squid"] #fullPlayer .pl-panel-row.playing>span, html[data-mode="squid"] #playlistPanel .pl-panel-row.playing, html[data-mode="squid"] #playlistPanel .pl-panel-row.playing>span, html[data-mode="squid"] .pl-panel-row.playing{ color:#FF8AC8!important; -webkit-text-fill-color:#FF8AC8!important; background:transparent!important; box-shadow:none!important; } html[data-mode="squid"] #fullPlayer .pl-panel-row.playing>span:last-child, html[data-mode="squid"] #playlistPanel .pl-panel-row.playing>span:last-child{ color:rgba(255,138,200,.85)!important; -webkit-text-fill-color:rgba(255,138,200,.85)!important; } /* 歌词未高亮 / 高亮 */ html[data-mode="squid"] #fullPlayer .lyric-line, html[data-mode="squid"] #lyricsList .lyric-line, html[data-mode="squid"] #fullPlayer #lyricsList .lyric-line{ color:rgba(255,236,245,.72)!important; -webkit-text-fill-color:rgba(255,236,245,.72)!important; opacity:1!important; text-shadow:none!important; } html[data-mode="squid"] #fullPlayer .lyric-line .lyric-tr, html[data-mode="squid"] #lyricsList .lyric-line .lyric-tr{ color:rgba(255,200,230,.58)!important; -webkit-text-fill-color:rgba(255,200,230,.58)!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active, html[data-mode="squid"] #lyricsList .lyric-line.active, html[data-mode="squid"] #fullPlayer #lyricsList .lyric-line.active{ color:#FF8AC8!important; -webkit-text-fill-color:#FF8AC8!important; font-weight:700!important; } html[data-mode="squid"] #fullPlayer .lyric-line.active .lyric-tr, html[data-mode="squid"] #lyricsList .lyric-line.active .lyric-tr{ color:#FFB6D9!important; -webkit-text-fill-color:#FFB6D9!important; } /* 刷歌底部提示 */ html[data-mode="squid"] #fullPlayer.brush-mode .fp-brush-hint, html[data-mode="squid"] .fp-brush-hint, html[data-mode="squid"] #fpBrushHint{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; text-shadow:0 0 8px rgba(255,107,181,.4)!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer.brush-mode .fp-brush-hint svg, html[data-mode="squid"] .fp-brush-hint svg{ color:#FF6BB5!important; fill:#FF6BB5!important; opacity:1!important; } /* 底栏时间等 */ html[data-mode="squid"] .fp-time, html[data-mode="squid"] #fpCur, html[data-mode="squid"] #fpDur{ color:#FFB6D9!important; opacity:1!important; font-weight:600!important; } /* 默认主题 · 我的页：我喜欢/听歌记录 列表黑字 + tab 分段样式适配 */ html[data-mode="light"] #view-mine .song-title, html[data-mode="light"] #view-mine .song-row .song-title, html[data-mode="light"] #mineFav .song-title, html[data-mode="light"] #mineHistoryList .song-title, html[data-mode="light"] #mineLikedPane .song-title, html[data-mode="light"] #mineHistoryPane .song-title{ color:#1c1916!important; } html[data-mode="light"] #view-mine .song-sub, html[data-mode="light"] #view-mine .song-row .song-sub, html[data-mode="light"] #view-mine .song-idx, html[data-mode="light"] #view-mine .song-dur, html[data-mode="light"] #mineFav .song-sub, html[data-mode="light"] #mineHistoryList .song-sub, html[data-mode="light"] #mineFav .song-idx, html[data-mode="light"] #mineHistoryList .song-idx{ color:rgba(40,32,26,0.5)!important; } html[data-mode="light"] .mine-pl-tabs, html[data-mode="paper"] .mine-pl-tabs{ background:rgba(40,30,20,0.08)!important; box-shadow:none!important; } html[data-mode="light"] .mine-pl-indicator, html[data-mode="paper"] .mine-pl-indicator{ background:#ffffff!important; box-shadow:0 2px 8px rgba(40,30,20,0.12), 0 1px 0 rgba(255,255,255,1) inset!important; } html[data-mode="light"] .mine-pl-tab, html[data-mode="paper"] .mine-pl-tab{ color:rgba(40,32,26,0.5)!important; } html[data-mode="light"] .mine-pl-tab.active, html[data-mode="paper"] .mine-pl-tab.active{ color:#1c1916!important; background:transparent!important; box-shadow:none!important; } html[data-mode="dark"] .mine-pl-tabs{ background:rgba(118,118,128,0.28)!important; } html[data-mode="dark"] .mine-pl-indicator{ background:#fff!important; box-shadow:none!important; } html[data-mode="dark"] .mine-pl-tab{color:rgba(235,235,245,0.55)!important;} html[data-mode="dark"] .mine-pl-tab.active{color:#111!important;} html[data-mode="neon"] .mine-pl-tabs{ background:rgba(12,6,32,0.8)!important; border:1px solid rgba(0,246,255,0.35)!important; box-shadow:0 0 20px rgba(255,0,170,0.15), inset 0 0 20px rgba(0,246,255,0.05)!important; } html[data-mode="neon"] .mine-pl-indicator{ background:linear-gradient(120deg,#00f6ff,#ff2bd6)!important; box-shadow:0 0 18px rgba(0,246,255,.6), 0 0 28px rgba(255,43,214,.3)!important; } html[data-mode="neon"] .mine-pl-tab{color:rgba(200,220,245,.55)!important;} html[data-mode="neon"] .mine-pl-tab.active{color:#03010a!important;} /* ========== 默认 light：除「歌单详情」外字一律深色，禁止白字泄漏 ========== */ /* 全局列表/搜索/首页/我的 */ html[data-mode="light"] .song-title, html[data-mode="light"] .song-row .song-title, html[data-mode="light"] .card-name, html[data-mode="light"] .sec-title, html[data-mode="light"] .pl-name, html[data-mode="light"] .singer-name, html[data-mode="light"] .search-row-title, html[data-mode="light"] .sr-title, html[data-mode="light"] #view-search .song-title, html[data-mode="light"] #view-search .card-name, html[data-mode="light"] #view-home .song-title, html[data-mode="light"] #view-mine .song-title, html[data-mode="light"] #mineFav .song-title, html[data-mode="light"] #mineHistoryList .song-title, html[data-mode="light"] #searchResults .song-title, html[data-mode="light"] #searchResults .card-name{ color:#1c1916!important; -webkit-text-fill-color:#1c1916!important; text-shadow:none!important; } html[data-mode="light"] .song-sub, html[data-mode="light"] .song-row .song-sub, html[data-mode="light"] .song-idx, html[data-mode="light"] .song-dur, html[data-mode="light"] .card-sub, html[data-mode="light"] .singer-sub, html[data-mode="light"] .search-row-sub, html[data-mode="light"] .sr-sub, html[data-mode="light"] #view-search .song-sub, html[data-mode="light"] #view-search .card-sub, html[data-mode="light"] #view-mine .song-sub, html[data-mode="light"] #view-mine .song-idx, html[data-mode="light"] #view-mine .song-dur, html[data-mode="light"] #searchResults .song-sub{ color:rgba(40,32,26,0.55)!important; -webkit-text-fill-color:rgba(40,32,26,0.55)!important; text-shadow:none!important; } html[data-mode="light"] .song-row.playing .song-title, html[data-mode="light"] .song-row.playing .song-idx{ color:var(--green)!important; -webkit-text-fill-color:var(--green)!important; } /* 仅歌单详情（非听书全部）保留白字 */ html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-row .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .detail-title{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-idx, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-dur, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-idx, html[data-mode="light"].detail-mode:not(.voice-all-mode) #detailSongs .song-dur, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .detail-sub, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .detail-desc{ color:rgba(255,255,255,0.55)!important; -webkit-text-fill-color:rgba(255,255,255,0.55)!important; } html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-row.playing .song-title, html[data-mode="light"].detail-mode:not(.voice-all-mode) #view-detail .song-row.playing .song-idx{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } /* 默认主题：歌手头像无描边 */ html[data-mode="light"] .singer-chip-avatar, html[data-mode="light"] .singer-card .card-cover, html[data-mode="light"] .sr-singer-avatar, html[data-mode="light"] .avatar, html[data-mode="light"] .artist-cover{ border:none!important; box-shadow:none!important; outline:none!important; } html[data-mode="light"] .singer-chip-avatar img, html[data-mode="light"] .sr-singer-avatar img{ border:none!important; } /* 当前唱句字号：全主题统一 24px（只留这一处） */ #fullPlayer .lyric-line.active, #lyricsList .lyric-line.active, #fullPlayer #lyricsList .lyric-line.active, #fullPlayer.lyrics-focus .lyric-line.active, #fullPlayer.brush-mode .lyric-line.active, #fullPlayer.is-landscape .lyric-line.active, #fullPlayer:not(.is-landscape) .lyric-line.active, .lyric-line.active{ font-size:24px!important; font-weight:700!important; } /* ========== 大家都在听 / 你喜欢的好歌 / 每天听点好音乐（参考移植，只留一层） ========== */ .rec-sec{margin:30px 0 12px;position:relative} .rec-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .rec-sec-title{font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.2;color:var(--text-0)} .rec-sec-play{width:34px;height:34px;border-radius:50%;background:rgba(118,118,128,.18);display:inline-flex;align-items:center;justify-content:center;color:var(--text-0);cursor:pointer;border:none;padding:0;transition:transform .18s,background .18s} .rec-sec-play svg{width:14px;height:14px} .rec-sec-play:active{transform:scale(.92)} .rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0} @media (orientation:portrait){ .rec-grid{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none} .rec-grid::-webkit-scrollbar{display:none;height:0} .rec-grid>.rec-list-card{flex:0 0 auto;width:calc((100% - 12px)/2);min-width:calc((100% - 12px)/2);max-width:320px;scroll-snap-align:start} } @media (orientation:portrait) and (max-width:520px){ .rec-grid{gap:10px} .rec-grid>.rec-list-card{width:calc((100% - 10px)/2);min-width:calc((100% - 10px)/2)} } @media (orientation:landscape) and (min-width:640px){ .rec-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (orientation:landscape) and (min-width:1024px){ .rec-grid{grid-template-columns:repeat(5,minmax(0,1fr))} } @media (orientation:landscape) and (max-width:639px){ .rec-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } .rec-list-card{background:rgba(118,118,128,.1);border:1px solid rgba(118,118,128,.14);border-radius:14px;box-sizing:border-box} .rec-row{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;background:transparent;border:none;min-width:0;-webkit-tap-highlight-color:transparent} .rec-row::before{content:"";position:absolute;inset:4px 8px;border-radius:10px;background:transparent;transition:background .16s;z-index:-1} .rec-row:hover::before{background:rgba(118,118,128,.16)} .rec-row:active::before{background:rgba(118,118,128,.22)} .rec-row.playing::before{background:rgba(var(--accent-rgb),.12)} .rec-row.playing .rec-title,.rec-row.playing .rec-title-text{color:var(--green)!important} .rec-cover{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-2,rgba(118,118,128,.12));position:relative} .rec-cover img{width:100%;height:100%;object-fit:cover;display:block} .rec-cover-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.36);color:#fff;opacity:0;transition:opacity .18s} .rec-cover-play svg{width:20px;height:20px} .rec-row:hover .rec-cover-play,.rec-row.playing .rec-cover-play{opacity:1} .rec-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .rec-title{font-size:14px;color:var(--text-0);font-weight:400;display:flex;align-items:center;gap:6px;letter-spacing:-.1px;line-height:1.25;min-width:0} .rec-title-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .rec-title-track{display:inline-flex;white-space:nowrap;will-change:transform} .rec-title-track.marquee{animation:rec-marquee var(--rec-marquee-dur,8s) linear infinite} .rec-title-inner{display:inline-block;padding-right:30px;white-space:nowrap} @keyframes rec-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rec-sub{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25} .rec-tag-mb{display:inline-flex;align-items:center;gap:2px;font-size:10px;line-height:1;padding:2px 5px;border-radius:4px;background:linear-gradient(135deg,#ffc862,#e89a2c);color:#3a1f00;font-weight:700;flex-shrink:0} .rec-tag-hq{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;line-height:1;padding:2px 5px;border-radius:4px;background:linear-gradient(135deg,#ff8a3d,#e06020);color:#fff;flex-shrink:0} html[data-mode="light"] .rec-sec-title{color:#1c1916!important} html[data-mode="light"] .rec-title,html[data-mode="light"] .rec-title-text{color:#1c1916!important} html[data-mode="light"] .rec-sub{color:rgba(40,32,26,.5)!important} html[data-mode="light"] .rec-list-card{background:rgba(255,255,255,.55)!important;border-color:rgba(40,30,20,.08)!important} .rec-sec-play.is-playing{background:rgba(var(--accent-rgb),.18);color:var(--green)} /* 鱿鱼播放钮：强制空心、缩小（覆盖移动端白底） */ html[data-mode="squid"] #fullPlayer .fp-dock .fp-play, html[data-mode="squid"] #fullPlayer.show .fp-dock .fp-play, html[data-mode="squid"] #fullPlayer:not(.is-landscape) .fp-dock .fp-play, html[data-mode="squid"] #fullPlayer.is-landscape .fp-dock .fp-play{ width:50px!important; height:50px!important; min-width:50px!important; min-height:50px!important; background:transparent!important; background-color:transparent!important; background-image:none!important; border:2.5px solid #FF6BB5!important; box-shadow:0 0 16px rgba(237,27,118,.4)!important; color:transparent!important; } html[data-mode="squid"] #fullPlayer .fp-dock .fp-play svg{ display:none!important;opacity:0!important;visibility:hidden!important; } /* 非鱿鱼：播放页播放键去圆形底，只留图标（最高优先级，盖过 FINAL 白底圆） */ html:not([data-mode="squid"]) #fullPlayer .fp-play, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play, html:not([data-mode="squid"]) .fp-dock .fp-play, html:not([data-mode="squid"]) #fullPlayer #fpPlay, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-play, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer #fpPlay{ width:80px!important; height:80px!important; min-width:80px!important; min-height:80px!important; background:transparent!important; background-image:none!important; background-color:transparent!important; border:none!important; box-shadow:none!important; color:rgba(255,255,255,.95)!important; -webkit-text-fill-color:rgba(255,255,255,.95)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-play svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play svg, html:not([data-mode="squid"]) .fp-dock .fp-play svg, html:not([data-mode="squid"]) #fullPlayer #fpPlay svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-play svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer .fp-dock .fp-play svg, html:not([data-mode="dark"]):not([data-mode="neon"]):not([data-mode="paper"]):not([data-mode="squid"]) #fullPlayer #fpPlay svg{ display:block!important; visibility:visible!important; opacity:1!important; width:46px!important; height:46px!important; color:rgba(255,255,255,.95)!important; fill:rgba(255,255,255,.95)!important; -webkit-text-fill-color:rgba(255,255,255,.95)!important; } /* 上一曲/下一曲与播放键图标色统一，加大 */ html:not([data-mode="squid"]) #fullPlayer .fp-ctrl-btn, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn{ width:56px!important; height:56px!important; color:rgba(255,255,255,.92)!important; } html:not([data-mode="squid"]) #fullPlayer .fp-ctrl-btn svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-ctrl-btn svg{ width:32px!important; height:32px!important; color:rgba(255,255,255,.92)!important; fill:rgba(255,255,255,.92)!important; } /* ===== 中间三键加大 + 换源/歌词保持小（最高优先级压过上面通用 ctrl） ===== */ #fullPlayer #fpPlay.fp-play, #fullPlayer .fp-dock #fpPlay.fp-play, #fullPlayer .fp-play#fpPlay, html:not([data-mode="squid"]) #fullPlayer #fpPlay, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpPlay, html:not([data-mode="squid"]) #fullPlayer .fp-play{ width:80px!important; height:80px!important; min-width:80px!important; min-height:80px!important; } #fullPlayer #fpPlay svg, #fullPlayer .fp-dock #fpPlay svg, #fullPlayer .fp-play svg, html:not([data-mode="squid"]) #fullPlayer #fpPlay svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpPlay svg, html:not([data-mode="squid"]) #fullPlayer .fp-play svg{ width:46px!important; height:46px!important; } #fullPlayer #fpPrev.fp-ctrl-btn, #fullPlayer #fpNext.fp-ctrl-btn, #fullPlayer .fp-dock #fpPrev.fp-ctrl-btn, #fullPlayer .fp-dock #fpNext.fp-ctrl-btn, html:not([data-mode="squid"]) #fullPlayer #fpPrev, html:not([data-mode="squid"]) #fullPlayer #fpNext, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpPrev, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpNext{ width:56px!important; height:56px!important; } #fullPlayer #fpPrev svg, #fullPlayer #fpNext svg, #fullPlayer .fp-dock #fpPrev svg, #fullPlayer .fp-dock #fpNext svg, html:not([data-mode="squid"]) #fullPlayer #fpPrev svg, html:not([data-mode="squid"]) #fullPlayer #fpNext svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpPrev svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpNext svg{ width:32px!important; height:32px!important; } #fullPlayer #fpSrcBtn.fp-ctrl-btn, #fullPlayer #fpLrcBtn.fp-ctrl-btn, #fullPlayer .fp-dock #fpSrcBtn.fp-ctrl-btn, #fullPlayer .fp-dock #fpLrcBtn.fp-ctrl-btn, html:not([data-mode="squid"]) #fullPlayer #fpSrcBtn, html:not([data-mode="squid"]) #fullPlayer #fpLrcBtn, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpSrcBtn, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpLrcBtn{ width:40px!important; height:40px!important; } #fullPlayer #fpSrcBtn svg, #fullPlayer #fpLrcBtn svg, #fullPlayer .fp-dock #fpSrcBtn svg, #fullPlayer .fp-dock #fpLrcBtn svg, html:not([data-mode="squid"]) #fullPlayer #fpSrcBtn svg, html:not([data-mode="squid"]) #fullPlayer #fpLrcBtn svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpSrcBtn svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock #fpLrcBtn svg{ width:18px!important; height:18px!important; } /* 竖屏非横屏再确认一遍（排除 squid：鱿鱼主题自有几何尺寸） */ html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpPlay, html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) .fp-dock #fpPlay{ width:80px!important;height:80px!important;min-width:80px!important;min-height:80px!important; } html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpPlay svg, html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) .fp-dock #fpPlay svg{ width:46px!important;height:46px!important; } html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpPrev, html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpNext{ width:56px!important;height:56px!important; } html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpPrev svg, html:not([data-mode="squid"]) #fullPlayer:not(.is-landscape) #fpNext svg{ width:32px!important;height:32px!important; } /* 底部五图标：统一描边观感，避免 fill/stroke 混用导致粗细不一 */ #fullPlayer .fp-quick button svg, #fullPlayer .fp-dock .fp-quick button svg{ width:22px!important; height:22px!important; stroke-width:0; /* 由 symbol 内部控制 */ } #fullPlayer .fp-quick button svg *, #fullPlayer .fp-dock .fp-quick button svg *{ vector-effect:non-scaling-stroke; } /* ===== 底部快捷栏五图标统一尺寸（爱心/倍速/音质/模式/列表） ===== */ #fullPlayer .fp-quick button, #fullPlayer .fp-dock .fp-quick button, #fullPlayer #fpLike, #fullPlayer #fpSpeed, #fullPlayer #fpQuality, #fullPlayer #fpModeBtn, #fullPlayer #fpListBtn{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; box-sizing:border-box!important; } #fullPlayer .fp-quick button svg, #fullPlayer .fp-dock .fp-quick button svg, #fullPlayer #fpLike svg, #fullPlayer #fpSpeed svg, #fullPlayer #fpQuality svg, #fullPlayer #fpModeBtn svg, #fullPlayer #fpListBtn svg, #fullPlayer .fp-list-btn svg, #fullPlayer .fp-speed-btn svg, #fullPlayer .fp-quality-btn svg{ width:22px!important; height:22px!important; display:block!important; } #fullPlayer:not(.is-landscape) .fp-quick button, #fullPlayer:not(.is-landscape) .fp-dock .fp-quick button{ width:44px!important;height:44px!important; } #fullPlayer:not(.is-landscape) .fp-quick button svg, #fullPlayer:not(.is-landscape) .fp-dock .fp-quick button svg{ width:22px!important;height:22px!important; } /* ===== Squid 最终锁定：播放钮尺寸 + 控件颜色统一 ===== */ html[data-mode="squid"] #fullPlayer #fpPlay, html[data-mode="squid"] #fullPlayer .fp-dock #fpPlay, html[data-mode="squid"] #fullPlayer .fp-play, html[data-mode="squid"] #fullPlayer .fp-dock .fp-play, html[data-mode="squid"] #fullPlayer:not(.is-landscape) #fpPlay, html[data-mode="squid"] #fullPlayer:not(.is-landscape) .fp-dock #fpPlay{ width:55px!important; height:55px!important; min-width:55px!important; min-height:55px!important; max-width:55px!important; max-height:55px!important; border:2.5px solid #FF6BB5!important; box-shadow:0 0 14px rgba(237,27,118,.4)!important; background:transparent!important; color:transparent!important; } /* 上下首：彻底隐藏原 SVG，只用鱿鱼几何伪元素，禁止叠层 */ html[data-mode="squid"] #fullPlayer #fpPrev svg, html[data-mode="squid"] #fullPlayer #fpNext svg, html[data-mode="squid"] #fullPlayer #fpPlay svg, html[data-mode="squid"] #fullPlayer .fp-dock #fpPrev svg, html[data-mode="squid"] #fullPlayer .fp-dock #fpNext svg, html[data-mode="squid"] #fullPlayer .fp-dock #fpPlay svg, html[data-mode="squid"] #fullPlayer .fp-ctrl-btn#fpPrev svg, html[data-mode="squid"] #fullPlayer .fp-ctrl-btn#fpNext svg, html[data-mode="squid"] #fullPlayer .fp-play svg{ opacity:0!important; visibility:hidden!important; display:none!important; width:0!important; height:0!important; pointer-events:none!important; } html[data-mode="squid"] #fullPlayer #fpPrev, html[data-mode="squid"] #fullPlayer .fp-dock #fpPrev, html[data-mode="squid"] #fullPlayer:not(.is-landscape) #fpPrev{ width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; color:transparent!important; background:transparent!important; border:none!important; box-shadow:none!important; position:relative!important; overflow:visible!important; } html[data-mode="squid"] #fullPlayer #fpNext, html[data-mode="squid"] #fullPlayer .fp-dock #fpNext, html[data-mode="squid"] #fullPlayer:not(.is-landscape) #fpNext{ width:43px!important; height:43px!important; min-width:43px!important; min-height:43px!important; color:transparent!important; background:transparent!important; border:none!important; box-shadow:none!important; position:relative!important; overflow:visible!important; } /* 上一首：正立空心三角（原鱿鱼） */ html[data-mode="squid"] #fullPlayer #fpPrev::before, html[data-mode="squid"] #fullPlayer .fp-dock #fpPrev::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:24px!important; height:22px!important; border:none!important; border-width:0!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26' fill='none'%3E%3Cpath d='M14 3 L25 23 L3 23 Z' stroke='%23FF6BB5' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat!important; transform:translate(-50%,-50%)!important; filter:drop-shadow(0 0 8px rgba(255,107,181,.55)); border-radius:0!important; opacity:1!important; box-shadow:none!important; z-index:2!important; } html[data-mode="squid"] #fullPlayer #fpPrev::after, html[data-mode="squid"] #fullPlayer .fp-dock #fpPrev::after{ content:none!important; display:none!important; } /* 下一首：空心正方（原鱿鱼，内无三角） */ html[data-mode="squid"] #fullPlayer #fpNext::before, html[data-mode="squid"] #fullPlayer .fp-dock #fpNext::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:21px!important; height:21px!important; border:2.5px solid #FF6BB5!important; border-radius:3px!important; background:transparent!important; background-image:none!important; transform:translate(-50%,-50%)!important; box-shadow:0 0 12px rgba(237,27,118,.45)!important; opacity:1!important; z-index:2!important; } html[data-mode="squid"] #fullPlayer #fpNext::after, html[data-mode="squid"] #fullPlayer .fp-dock #fpNext::after{ content:none!important; display:none!important; } /* 主控区两侧图标（换源/歌词/模式等，不含上下首/播放）与几何键同粉 */ html[data-mode="squid"] #fullPlayer #fpSrcBtn, html[data-mode="squid"] #fullPlayer #fpLrcBtn, html[data-mode="squid"] #fullPlayer #fpModeBtn, html[data-mode="squid"] #fullPlayer #fpMode, html[data-mode="squid"] #fullPlayer .fp-dock #fpSrcBtn, html[data-mode="squid"] #fullPlayer .fp-dock #fpLrcBtn, html[data-mode="squid"] #fullPlayer .fp-dock #fpModeBtn{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; opacity:1!important; background:transparent!important; border:none!important; box-shadow:none!important; } html[data-mode="squid"] #fullPlayer #fpSrcBtn svg, html[data-mode="squid"] #fullPlayer #fpLrcBtn svg, html[data-mode="squid"] #fullPlayer #fpModeBtn svg, html[data-mode="squid"] #fullPlayer #fpMode svg, html[data-mode="squid"] #fullPlayer #fpSrcBtn svg *, html[data-mode="squid"] #fullPlayer #fpLrcBtn svg *, html[data-mode="squid"] #fullPlayer #fpModeBtn svg *, html[data-mode="squid"] #fullPlayer #fpMode svg *{ color:#FF6BB5!important; fill:#FF6BB5!important; stroke:#FF6BB5!important; opacity:1!important; } /* 底排五键统一粉紫，去掉白/半透明混色 */ html[data-mode="squid"] #fullPlayer .fp-quick button, html[data-mode="squid"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="squid"] #fullPlayer #fpLike, html[data-mode="squid"] #fullPlayer #fpSpeed, html[data-mode="squid"] #fullPlayer #fpQuality, html[data-mode="squid"] #fullPlayer #fpListBtn, html[data-mode="squid"] #fullPlayer .fp-quality-btn, html[data-mode="squid"] #fullPlayer .fp-speed-btn, html[data-mode="squid"] #fullPlayer .fp-list-btn{ color:#FF6BB5!important; -webkit-text-fill-color:#FF6BB5!important; background:transparent!important; border:none!important; box-shadow:none!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer .fp-quick button svg, html[data-mode="squid"] #fullPlayer .fp-dock .fp-quick button svg, html[data-mode="squid"] #fullPlayer #fpLike svg, html[data-mode="squid"] #fullPlayer #fpSpeed svg, html[data-mode="squid"] #fullPlayer #fpQuality svg, html[data-mode="squid"] #fullPlayer #fpListBtn svg, html[data-mode="squid"] #fullPlayer .fp-quality-btn svg, html[data-mode="squid"] #fullPlayer .fp-speed-btn svg, html[data-mode="squid"] #fullPlayer .fp-list-btn svg, html[data-mode="squid"] #fullPlayer .fp-quick button svg *, html[data-mode="squid"] #fullPlayer .fp-dock .fp-quick button svg *{ color:#FF6BB5!important; fill:#FF6BB5!important; stroke:#FF6BB5!important; opacity:1!important; } html[data-mode="squid"] #fullPlayer .fp-quick button.on, html[data-mode="squid"] #fullPlayer .fp-speed-btn.on, html[data-mode="squid"] #fullPlayer #fpLike.on, html[data-mode="squid"] #fullPlayer .fp-list-btn.on{ color:#C77DFF!important; -webkit-text-fill-color:#C77DFF!important; } html[data-mode="squid"] #fullPlayer .fp-quick button.on svg, html[data-mode="squid"] #fullPlayer #fpLike.on svg, html[data-mode="squid"] #fullPlayer .fp-list-btn.on svg, html[data-mode="squid"] #fullPlayer .fp-quick button.on svg *{ color:#C77DFF!important; fill:#C77DFF!important; stroke:#C77DFF!important; } /* 播放/暂停几何符保持粉色 */ html[data-mode="squid"] #fpPlay.is-playing::before{ background:#FF6BB5!important; box-shadow:9px 0 0 #FF6BB5!important; } html[data-mode="squid"] #fpPlay::before, html[data-mode="squid"] #fpPlay.is-paused::before, html[data-mode="squid"] #fpPlay:not(.is-playing)::before{ border-color:transparent transparent transparent #FF6BB5!important; } html[data-mode="squid"] #fpPrev::before{ filter:drop-shadow(0 0 8px rgba(255,107,181,.55))!important; } html[data-mode="squid"] #fpNext::before{ border-color:#FF6BB5!important; box-shadow:0 0 12px rgba(237,27,118,.45)!important; } /* ===== 进度时间 + 底部快捷图标：与播放键同色（压过主题/封面半透明规则） ===== */ #fullPlayer .fp-time, #fullPlayer .fp-dock .fp-time, #fullPlayer #fpCur, #fullPlayer #fpDur, #fullPlayer.fp-has-cover .fp-time, #fullPlayer.fp-has-cover .fp-dock .fp-time, html[data-mode="dark"] #fullPlayer .fp-time, html[data-mode="dark"] #fullPlayer .fp-dock .fp-time, html[data-mode="neon"] #fullPlayer .fp-time, html[data-mode="neon"] #fullPlayer .fp-dock .fp-time, html[data-mode="paper"] #fullPlayer .fp-time, html[data-mode="paper"] #fullPlayer .fp-dock .fp-time, html[data-mode="paper"] #fullPlayer.fp-has-cover .fp-dock .fp-time, html:not([data-mode="squid"]) #fullPlayer .fp-time, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-time{ color:rgba(255,255,255,.95)!important; opacity:1!important; } #fullPlayer .fp-quick button, #fullPlayer .fp-dock .fp-quick button, #fullPlayer #fpLike, #fullPlayer #fpSpeed, #fullPlayer #fpQuality, #fullPlayer #fpModeBtn, #fullPlayer #fpListBtn, #fullPlayer .fp-speed-btn, #fullPlayer .fp-quality-btn, #fullPlayer.fp-has-cover .fp-quick button, #fullPlayer.fp-has-cover .fp-dock .fp-quick button, html[data-mode="dark"] #fullPlayer .fp-quick button, html[data-mode="dark"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="neon"] #fullPlayer .fp-quick button, html[data-mode="neon"] #fullPlayer .fp-dock .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-quick button, html[data-mode="paper"] #fullPlayer .fp-dock .fp-quick button, html:not([data-mode="squid"]) #fullPlayer .fp-quick button, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button{ color:rgba(255,255,255,.95)!important; opacity:1!important; } #fullPlayer .fp-quick button svg, #fullPlayer .fp-dock .fp-quick button svg, #fullPlayer #fpLike svg, #fullPlayer #fpSpeed svg, #fullPlayer #fpQuality svg, #fullPlayer #fpModeBtn svg, #fullPlayer #fpListBtn svg, #fullPlayer .fp-speed-btn svg, #fullPlayer .fp-quality-btn svg, #fullPlayer .fp-list-btn svg, #fullPlayer.fp-has-cover .fp-quick button svg, #fullPlayer.fp-has-cover .fp-dock .fp-quick button svg, html[data-mode="dark"] #fullPlayer .fp-quick button svg, html[data-mode="neon"] #fullPlayer .fp-quick button svg, html[data-mode="paper"] #fullPlayer .fp-quick button svg, html[data-mode="paper"] #fullPlayer .fp-quick button svg, html:not([data-mode="squid"]) #fullPlayer .fp-dock .fp-quick button svg{ color:rgba(255,255,255,.95)!important; fill:rgba(255,255,255,.95)!important; stroke:rgba(255,255,255,.95)!important; opacity:1!important; } /* 激活态保留反馈色（爱心红 / 倍速·音质绿） */ #fullPlayer .fp-quick button.on, #fullPlayer #fpLike.on, #fullPlayer.fp-has-cover .fp-quick button.on{ color:var(--danger)!important; } #fullPlayer .fp-quick button.on svg, #fullPlayer #fpLike.on svg{ color:var(--danger)!important; fill:var(--danger)!important; stroke:var(--danger)!important; } #fullPlayer .fp-speed-btn.on, #fullPlayer .fp-quality-btn.on, #fullPlayer #fpSpeed.on, #fullPlayer #fpQuality.on{ color:var(--green)!important; } #fullPlayer .fp-speed-btn.on svg, #fullPlayer .fp-quality-btn.on svg, #fullPlayer #fpSpeed.on svg, #fullPlayer #fpQuality.on svg{ color:var(--green)!important; fill:var(--green)!important; } /* 白亮封面：全主题强制压暗背景约 40%（盖过各主题 filter） */ #fpBg.is-bright-cover .fp-bg-amb, html[data-mode="dark"] #fpBg.is-bright-cover .fp-bg-amb, html[data-mode="neon"] #fpBg.is-bright-cover .fp-bg-amb, html[data-mode="paper"] #fpBg.is-bright-cover .fp-bg-amb, html[data-mode="squid"] #fpBg.is-bright-cover .fp-bg-amb, html[data-mode="squid"] #fpBg.has-cover.is-bright-cover .fp-bg-amb{ -webkit-filter:blur(48px) saturate(1.12) brightness(0.60)!important; filter:blur(48px) saturate(1.12) brightness(0.60)!important; } #fpBg.is-bright-cover .fp-bg-veil, html[data-mode="dark"] #fpBg.is-bright-cover .fp-bg-veil, html[data-mode="neon"] #fpBg.is-bright-cover .fp-bg-veil, html[data-mode="paper"] #fpBg.is-bright-cover .fp-bg-veil, html[data-mode="squid"] #fpBg.is-bright-cover .fp-bg-veil{ background:rgba(0,0,0,0.30)!important; opacity:1!important; } /* 鱿鱼主题：主控间距与其他主题一致 */ html[data-mode="squid"] #fullPlayer .fp-ctrls, html[data-mode="squid"] #fullPlayer .fp-dock .fp-ctrls, html[data-mode="squid"] #fullPlayer:not(.is-landscape) .fp-dock .fp-ctrls{ gap:22px!important; justify-content:center!important; width:100%!important; } html[data-mode="squid"] #fullPlayer.is-landscape .fp-dock .fp-ctrls{ gap:18px!important; } /* ===== post-html overrides ===== */ /* ===== FINAL: 进度条上下间距（覆盖所有旧规则） ===== */ #fullPlayer .fp-dock .fp-controls, #fullPlayer:not(.is-landscape) .fp-dock .fp-controls, #fullPlayer.brush-mode .fp-dock .fp-controls, #fullPlayer.show .fp-dock .fp-controls{ gap:10px!important; } #fullPlayer .fp-dock .fp-progress, #fullPlayer:not(.is-landscape) .fp-dock .fp-progress, #fullPlayer.brush-mode .fp-dock .fp-progress{ margin:0!important; padding:0!important; } #fullPlayer .fp-dock .fp-quick, #fullPlayer:not(.is-landscape) .fp-dock .fp-quick, #fullPlayer.brush-mode .fp-dock .fp-quick, #fullPlayer.show .fp-dock .fp-quick{ margin-top:16px!important; margin-bottom:0!important; }