/* ================================================================== * themes/neon-dark/style.css — 深色霓虹主题 * 只覆盖 CSS 变量与少量质感, 结构样式全部来自 assets/css/base.css * ================================================================== */ html[data-theme="dark"] { color-scheme: dark; --bg: #101020; --bg2: #14142a; --card: #181828; --card2: #202030; --line: #282838; --nav-bg: #14142a; --stage-bg: #0b0b18; --txt: #ffffff; --dim: #a0a0b0; --dim2: #6b6b80; --accent: #6c5ce7; --accent2: #a29bfe; --pink: #fd79a8; --ok: #22d3a7; --warn: #ffb020; --shadow: 0 18px 44px rgba(0, 0, 0, .5); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35); --scroll-thumb: #33334a; --hero-grad: linear-gradient(115deg, #3a2170 0%, #1a1440 46%, #101020 100%); --ring-glow: 0 0 0 1px rgba(162, 155, 254, .28), 0 0 48px rgba(108, 92, 231, .34); } /* 氛围: 顶部霓虹光晕 + 极光底纹 */ html[data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(680px 320px at 22% -8%, rgba(108, 92, 231, .30), transparent 62%), radial-gradient(560px 260px at 88% 4%, rgba(0, 206, 201, .14), transparent 60%), radial-gradient(700px 420px at 62% 108%, rgba(253, 121, 168, .12), transparent 62%); } html[data-theme="dark"] #app { position: relative; z-index: 1; } /* 玻璃质感 —— 性能警告: 早期这里用 backdrop-filter: blur(14px), 在 headless 实测中让播放时的 帧率从 60fps 掉到 27.8fps (blur 需要每帧重新采样身后所有内容, 而身后 正好是每帧都在变的频谱/歌词/节拍动画)。已改为「高不透明度纯色 + 细边框」, 视觉差别极小但省掉整块重采样。若要恢复毛玻璃, 请只给静止元素加, 绝不要给 .foot / .stagepanels 这类内容每帧变化的容器加。 */ html[data-theme="dark"] .nav, html[data-theme="dark"] .topbar, html[data-theme="dark"] .queue, html[data-theme="dark"] .foot, html[data-theme="dark"] .stagepanels { background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="dark"] .hero { box-shadow: inset 0 -1px 0 var(--line), var(--shadow-sm); } html[data-theme="dark"] .hero-bg { background: var(--hero-grad); opacity: 1; } /* 有背景图/视频时把 Hero 的渐变遮罩压薄, 否则 208px 高的横幅整块盖住画面, 站长会以为背景视频没生效。这里必须写在主题文件里: base.css 的 `body.has-bgvideo .hero-bg` 与主题的 `html[data-theme] .hero-bg` 特异性相同, 而主题样式后加载会赢。 */ html[data-theme="dark"] body.has-bgvideo .hero-bg, html[data-theme="dark"] body.has-bgimage .hero-bg { opacity: .3; } /* ================================================================== * 音乐联动 (由 assets/js/visualizer.js 每帧写入 body 上的 CSS 变量) * --beat 低频节拍包络(已平滑) --level 综合能量 * --low / --mid / --high 三频段能量, 各自驱动不同通道 * --kick 节拍冲击(0~1 衰减) --glow 发光强度 * --scale / --spin / --hue / --beatpx / --kickpx * 设计原则: 低频管"跳动", 中频管"呼吸与色彩", 高频管"闪烁", * kick 只用于短促的一次性脉冲 —— 这样动效才有层次。 * ================================================================== */ /* 播放圈: 低频缩放 + 中频增强辉光 + kick 冲击外扩 */ html[data-theme="dark"] .hero-art { box-shadow: var(--ring-glow), 0 0 calc(var(--glow, 0) * 52px + var(--kick, 0) * 26px) rgba(162, 155, 254, calc(var(--glow, 0) * .85)), 0 0 calc(var(--glow, 0) * 18px) rgba(108, 92, 231, calc(var(--glow, 0) * .7)), 0 0 calc(var(--kick, 0) * 64px) rgba(0, 206, 201, calc(var(--kick, 0) * .45)); transform: scale(calc(1 + var(--beat, 0) * .05 + var(--kick, 0) * .02)); transition: transform .09s linear, box-shadow .18s ease; } /* 高频段点亮封面外圈细边, 中频段决定整体亮度 */ html[data-theme="dark"] .hero-art::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none; border: 1px solid rgba(162, 155, 254, calc(var(--high, 0) * .55)); opacity: calc(.25 + var(--high, 0) * .75); transition: opacity .12s linear; } /* 光环: 中频驱动半径与亮度 */ html[data-theme="dark"] .hero-ring { border-color: rgba(162, 155, 254, calc(.35 + var(--level, 0) * .5)); box-shadow: 0 0 calc(var(--glow, 0) * 30px + var(--kick, 0) * 18px) rgba(162, 155, 254, calc(var(--glow, 0) * .6)); } /* 频谱画布发光: 基础辉光 + 高频闪烁 + kick 增亮 */ html[data-theme="dark"] #viz { filter: drop-shadow(0 0 14px rgba(108, 92, 231, .45)) drop-shadow(0 0 calc(var(--high, 0) * 10px) rgba(0, 206, 201, calc(var(--high, 0) * .5))) brightness(calc(1 + var(--kick, 0) * .18)); } /* 队列当前卡 (彩虹主题色) */ html[data-theme="dark"] .q-now { background: var(--rainbow-d); box-shadow: 0 12px 30px rgba(108, 92, 231, .36); } /* 列表行悬停微光 */ html[data-theme="dark"] .row:hover { background: linear-gradient(90deg, rgba(108, 92, 231, .16), transparent 70%); } html[data-theme="dark"] .row.on { background: linear-gradient(90deg, rgba(108, 92, 231, .30), rgba(108, 92, 231, .05)); } /* 主按钮: 低频缩放 + 中频脉冲发光 + kick 凸起 (彩虹底) */ html[data-theme="dark"] .fb.big { background: var(--rainbow-d); color: #fff; transform: scale(calc(1 + var(--beat, 0) * .09 + var(--kick, 0) * .04)); transition: transform .09s linear, box-shadow .18s ease; box-shadow: 0 8px 22px rgba(108, 92, 231, .45), 0 0 calc(var(--glow, 0) * 30px) rgba(162, 155, 254, calc(var(--glow, 0) * .8)), 0 0 calc(var(--kick, 0) * 34px) rgba(0, 206, 201, calc(var(--kick, 0) * .6)); } html[data-theme="dark"] .fb.big:hover { box-shadow: 0 10px 28px rgba(108, 92, 231, .62); } /* 进度条: 已播放部分随低频增亮 (--glow 由 visualizer.js 写入) 轨道底色用 ::before, 不要给 .bar-wrap 加背景 (否则叠出双层轨道) */ html[data-theme="dark"] .bar-wrap::before { background: #262636; } html[data-theme="dark"] #bar { background: var(--rainbow); box-shadow: 0 0 calc(12px + var(--glow, 0) * 20px) rgba(0, 206, 201, calc(.5 + var(--glow, 0) * .5)), 0 0 calc(var(--kick, 0) * 26px) rgba(162, 155, 254, calc(var(--kick, 0) * .7)); } /* 进度条滑块: 高频段驱动尺寸, kick 时放大 */ html[data-theme="dark"] #dot { transform: translate(-50%, -50%) scale(calc(1 + var(--high, 0) * .35 + var(--kick, 0) * .5)); } /* 底部播放条左侧封面: 跟随节拍轻微脉动 */ html[data-theme="dark"] #fCover { box-shadow: 0 0 calc(var(--glow, 0) * 22px) rgba(108, 92, 231, calc(var(--glow, 0) * .8)); transform: scale(calc(1 + var(--beat, 0) * .05)); transition: transform .09s linear, box-shadow .18s ease; } /* 播放中: 队列小波形跳动 */ html[data-theme="dark"] body.playing .q-wave i { background: #fff; } /* 播放中: 左侧导航当前曲目指示条随节拍伸缩 */ html[data-theme="dark"] body.playing .row.on::before { transform: scaleY(calc(1 + var(--kick, 0) * .8)); } /* 榜单/卡片封面圆角 */ html[data-theme="dark"] .card { border: 1px solid var(--line); background: linear-gradient(180deg, #1b1b2e, #15151f); } html[data-theme="dark"] .card:hover { border-color: rgba(162, 155, 254, .55); } /* 滚动条 */ html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a68; }