1.readme.md · 8 B · Markdown Raw

说明

_comfig.liushen.yml · 299 B · YAML Raw

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

music-capsule.styl · 4.8 KiB · Stylus Raw

@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

1	@keyframes changeright
2	0%, 50%, 100%
3	transform: rotate(0deg) scale(1.1)
4	box-shadow: 0 0 2px #ffffff00
5	25%, 75%
6	transform: rotate(90deg) scale(1.1)
7	box-shadow: 0 0 14px #ffffff
8
9	@keyframes playingShadow
10	0%, 100%
11	box-shadow: 0 0px 12px -3px #00000000
12	50%
13	box-shadow: 0 0px 12px 0px var(--default-bg-color)
14
15	@keyframes lightBar
16	0%, 100%
17	opacity: 0.1
18	60%
19	opacity: 0.3
20
21	.aplayer.aplayer-narrow
22	.aplayer-body,
23	.aplayer-pic
24	height: 66px
25	width: 66px
26
27	#nav-music
28	display: flex
29	align-items: center
30	position: fixed
31	z-index: 10000
32	bottom: 10px
33	left: 10px
34	cursor: pointer
35	transition: all 0.5s, left 0s
36	transform-origin: left bottom
37	box-shadow: var(--liushen-nav-shadow)
38	border-radius: 40px
39	overflow: hidden
40
41	&:active
42	transform: scale(0.97)
43
44	&.playing
45	border: var(--liushen-card-border)
46	box-shadow: 0 0px 12px -3px #00000000
47	animation: playingShadow 5s linear infinite
48
49	.aplayer.aplayer-withlrc
50	.aplayer-pic
51	box-shadow: 0 0 14px #ffffffa6
52	transform: rotate(0deg) scale(1.1)
53	border-color: white
54	animation-play-state: running
55
56	.aplayer-info
57	color: white
58
59	#nav-music-hoverTips
60	width: 0
61
62	.aplayer
63	background: var(--default-bg-color)
64	border: var(--liushen-card-border)
65	backdrop-filter: saturate(180%) blur(20px)
66	transform: translateZ(0)
67
68	.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played
69	animation-play-state: running
70
71	&:hover:not(.playing) #nav-music-hoverTips
72	opacity: 1
73
74	.aplayer.aplayer-withlrc
75	.aplayer-pic
76	height: 25px
77	width: 25px
78	border-radius: 40px
79	z-index: 1
80	transition: 0.3s
81	transform: rotate(0deg) scale(1)
82	border: var(--liushen-card-border)
83	animation: changeright 24s linear infinite
84	animation-play-state: paused
85
86	.aplayer-info
87	height: 100%
88	color: var(--liushen-text)
89	margin: 0
90	padding: 0
91	display: flex
92	align-items: center
93
94	#nav-music-hoverTips
95	color: white
96	background: var(--default-bg-color)
97	width: 100%
98	height: 100%
99	position: absolute
100	top: 0
101	left: 0
102	align-items: center
103	justify-content: center
104	display: flex
105	border-radius: 40px
106	opacity: 0
107	font-size: 12px
108	z-index: 2
109	transition: 0.3s
110
111	.aplayer
112	background: var(--liushen-card-bg)
113	border-radius: 60px
114	height: 41px
115	display: flex
116	margin: 0
117	transition: 0.3s
118	border: var(--liushen-card-border)
119	box-shadow: none
120
121	.aplayer-notice,
122	.aplayer-miniswitcher,
123	.aplayer-list
124	display: none
125
126	.aplayer-body
127	position: relative
128	display: flex
129	align-items: center
130	min-width: 180px
131
132	.aplayer-info
133	.aplayer-music
134	margin: 0
135	display: flex
136	align-items: center
137	padding: 0 12px 0 8px
138	cursor: pointer
139	z-index: 1
140	height: 100%
141
142	.aplayer-title
143	cursor: pointer
144	line-height: 1
145	display: inline-block
146	white-space: nowrap
147	max-width: 120px
148	overflow: hidden
149	text-overflow: ellipsis
150	transition: 0.3s
151	user-select: none
152
153	.aplayer-controller
154	position: absolute
155	width: 100%
156	height: 100%
157	top: 0
158	left: 0
159
160	.aplayer-bar-wrap
161	margin: 0
162	padding: 0
163
164	.aplayer-bar
165	height: 100%
166	background: 0 0
167
168	.aplayer-loaded
169	display: none
170
171	.aplayer-played
172	height: 100%
173	opacity: 0.1
174	background-color: white !important
175	animation: lightBar 5s ease infinite
176	animation-play-state: paused
177
178	.aplayer-pic
179	pointer-events: none
180
181	.aplayer-button
182	bottom: 50%
183	right: 50%
184	transform: translate(50%, 50%)
185	margin: 0
186	transition: 0.3s
187	pointer-events all
188
189	&:has(.aplayer-button.aplayer-play)
190	animation-play-state: paused
191	transform: rotate(0deg) scale(1) !important
192
193	margin-left: 8px
194
195	.aplayer-info .aplayer-controller .aplayer-time,
196	.aplayer-info .aplayer-music .aplayer-author
197	display: none
198
199	&.aplayer-withlist .aplayer-info
200	border: none
201
202	.aplayer-lrc
203	width: 0
204	opacity: 0
205	transition: 0.3s
206	margin-bottom: -26px
207
208	p.aplayer-lrc-current
209	color: white
210	border: none
211	min-height: 20px
212	filter: none
213
214	&:after,
215	&:before
216	display: none
217
218	p
219	color: #ffffffb3
220	filter: blur(.8px)
221
222	@media screen and (min-width: 600px)
223	#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc
224	width: 200px
225	margin-left: 8px
226	opacity: 1
227
228	.aplayer-thumb
229	width: 0 !important
230	height: 0 !important
231

music.js · 1.2 KiB · JavaScript Raw

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;
    }
};

1	const liuMusic = {
2	musicPlaying: false,
3	isMusicBind: false,
4
5	musicToggle(isMeting = true) {
6	if (!this.isMusicBind) {
7	this.musicBind();
8	}
9
10	const $music = document.querySelector("#nav-music");
11	const $meting = document.querySelector("meting-js");
12	const $console = document.getElementById("consoleMusic");
13
14	this.musicPlaying = !this.musicPlaying;
15	$music?.classList.toggle("playing", this.musicPlaying);
16	$music?.classList.toggle("stretch", this.musicPlaying);
17	$console?.classList.toggle("on", this.musicPlaying);
18
19	if (isMeting) {
20	this.musicPlaying ? $meting?.aplayer?.play() : $meting?.aplayer?.pause();
21	}
22	},
23
24	musicBind() {
25	const $music = document.querySelector("#nav-music");
26	const $name = document.querySelector("#nav-music .aplayer-music");
27	const $button = document.querySelector("#nav-music .aplayer-button");
28
29	$name?.addEventListener("click", () => {
30	$music?.classList.toggle("stretch");
31	});
32
33	$button?.addEventListener("click", () => {
34	this.musicToggle(false);
35	});
36
37	this.isMusicBind = true;
38	}
39	};

music.pug · 302 B · Text Raw

1	div.needEndHide#nav-music
2	#nav-music-hoverTips(onclick='liuMusic.musicToggle()')= __('music.hit')
3	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)
4