# 说明

# 页脚音乐胶囊 capsule: enable: true # 歌单 ID / 单曲 ID id: 13597135963 # 服务商：netease / qq / xiami / kugou / baidu server: netease # 类型：playlist / song type: playlist meting_api: https://met.example.com/api?server=:server&type=:type&id=:id&r=:r volume: 0.8

@keyframes changeright 0%, 50%, 100% transform: rotate(0deg) scale(1.1) box-shadow: 0 0 2px #ffffff00 25%, 75% transform: rotate(90deg) scale(1.1) box-shadow: 0 0 14px #ffffff @keyframes playingShadow 0%, 100% box-shadow: 0 0px 12px -3px #00000000 50% box-shadow: 0 0px 12px 0px var(--default-bg-color) @keyframes lightBar 0%, 100% opacity: 0.1 60% opacity: 0.3 .aplayer.aplayer-narrow .aplayer-body, .aplayer-pic height: 66px width: 66px #nav-music display: flex align-items: center position: fixed z-index: 10000 bottom: 10px left: 10px cursor: pointer transition: all 0.5s, left 0s transform-origin: left bottom box-shadow: var(--liushen-nav-shadow) border-radius: 40px overflow: hidden &:active transform: scale(0.97) &.playing border: var(--liushen-card-border) box-shadow: 0 0px 12px -3px #00000000 animation: playingShadow 5s linear infinite .aplayer.aplayer-withlrc .aplayer-pic box-shadow: 0 0 14px #ffffffa6 transform: rotate(0deg) scale(1.1) border-color: white animation-play-state: running .aplayer-info color: white #nav-music-hoverTips width: 0 .aplayer background: var(--default-bg-color) border: var(--liushen-card-border) backdrop-filter: saturate(180%) blur(20px) transform: translateZ(0) .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played animation-play-state: running &:hover:not(.playing) #nav-music-hoverTips opacity: 1 .aplayer.aplayer-withlrc .aplayer-pic height: 25px width: 25px border-radius: 40px z-index: 1 transition: 0.3s transform: rotate(0deg) scale(1) border: var(--liushen-card-border) animation: changeright 24s linear infinite animation-play-state: paused .aplayer-info height: 100% color: var(--liushen-text) margin: 0 padding: 0 display: flex align-items: center #nav-music-hoverTips color: white background: var(--default-bg-color) width: 100% height: 100% position: absolute top: 0 left: 0 align-items: center justify-content: center display: flex border-radius: 40px opacity: 0 font-size: 12px z-index: 2 transition: 0.3s .aplayer background: var(--liushen-card-bg) border-radius: 60px height: 41px display: flex margin: 0 transition: 0.3s border: var(--liushen-card-border) box-shadow: none .aplayer-notice, .aplayer-miniswitcher, .aplayer-list display: none .aplayer-body position: relative display: flex align-items: center min-width: 180px .aplayer-info .aplayer-music margin: 0 display: flex align-items: center padding: 0 12px 0 8px cursor: pointer z-index: 1 height: 100% .aplayer-title cursor: pointer line-height: 1 display: inline-block white-space: nowrap max-width: 120px overflow: hidden text-overflow: ellipsis transition: 0.3s user-select: none .aplayer-controller position: absolute width: 100% height: 100% top: 0 left: 0 .aplayer-bar-wrap margin: 0 padding: 0 .aplayer-bar height: 100% background: 0 0 .aplayer-loaded display: none .aplayer-played height: 100% opacity: 0.1 background-color: white !important animation: lightBar 5s ease infinite animation-play-state: paused .aplayer-pic pointer-events: none .aplayer-button bottom: 50% right: 50% transform: translate(50%, 50%) margin: 0 transition: 0.3s pointer-events all &:has(.aplayer-button.aplayer-play) animation-play-state: paused transform: rotate(0deg) scale(1) !important margin-left: 8px .aplayer-info .aplayer-controller .aplayer-time, .aplayer-info .aplayer-music .aplayer-author display: none &.aplayer-withlist .aplayer-info border: none .aplayer-lrc width: 0 opacity: 0 transition: 0.3s margin-bottom: -26px p.aplayer-lrc-current color: white border: none min-height: 20px filter: none &:after, &:before display: none p color: #ffffffb3 filter: blur(.8px) @media screen and (min-width: 600px) #nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc width: 200px margin-left: 8px opacity: 1 .aplayer-thumb width: 0 !important height: 0 !important

const liuMusic = { musicPlaying: false, isMusicBind: false, musicToggle(isMeting = true) { if (!this.isMusicBind) { this.musicBind(); } const $music = document.querySelector("#nav-music"); const $meting = document.querySelector("meting-js"); const $console = document.getElementById("consoleMusic"); this.musicPlaying = !this.musicPlaying; $music?.classList.toggle("playing", this.musicPlaying); $music?.classList.toggle("stretch", this.musicPlaying); $console?.classList.toggle("on", this.musicPlaying); if (isMeting) { this.musicPlaying ? $meting?.aplayer?.play() : $meting?.aplayer?.pause(); } }, musicBind() { const $music = document.querySelector("#nav-music"); const $name = document.querySelector("#nav-music .aplayer-music"); const $button = document.querySelector("#nav-music .aplayer-button"); $name?.addEventListener("click", () => { $music?.classList.toggle("stretch"); }); $button?.addEventListener("click", () => { this.musicToggle(false); }); this.isMusicBind = true; } };

div.needEndHide#nav-music #nav-music-hoverTips(onclick='liuMusic.musicToggle()')= __('music.hit') meting-js(id=theme.capsule.id server=theme.capsule.server type=theme.capsule.type mutex="true" preload="none" data-lrctype="0" order="random" volume=theme.capsule.volume api=theme.capsule.meting_api)