@applemusic-like-lyrics/react-full 0.2.0-alpha.0 → 0.2.0

package/dist/amll-react-framework.css

@@ -0,0 +1,1023 @@
+._audioQualityTag_17pge_1 {
+	overflow: hidden;
+}
+
+@keyframes _dolby-glow_17pge_1 {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+._dolbyLogoGlow_17pge_15 {
+	position: absolute;
+	filter: blur(7px);
+	margin-top: 2.5px;
+	opacity: 1;
+	animation-name: _dolby-glow_17pge_1;
+	animation-fill-mode: forwards;
+	animation-duration: 3s;
+	animation-timing-function: ease-in-out;
+	animation-delay: 1s;
+}
+
+._clickable_17pge_27 {
+	cursor: pointer;
+}
+
+._commonTag_17pge_31 {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 2px 5px;
+	padding-left: 0.1em;
+	padding-right: 0.52em;
+	color: white;
+	box-sizing: border-box;
+
+	&::before {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		content: "";
+
+		border-image-source: url("data:image/svg+xml,%3csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M19.5%200C25.573%200%2028.6095%200%2030.8862%201.27504C32.4953%202.17617%2033.8238%203.50471%2034.725%205.11379C36%207.39054%2036%2010.427%2036%2016.5V19.5C36%2025.573%2036%2028.6095%2034.725%2030.8862C33.8238%2032.4953%2032.4953%2033.8238%2030.8862%2034.725C28.6095%2036%2025.573%2036%2019.5%2036H16.5C10.427%2036%207.39054%2036%205.11379%2034.725C3.50471%2033.8238%202.17617%2032.4953%201.27504%2030.8862C0%2028.6095%200%2025.573%200%2019.5L0%2016.5C0%2010.427%200%207.39054%201.27504%205.11379C2.17617%203.50471%203.50471%202.17617%205.11379%201.27504C7.39054%200%2010.427%200%2016.5%200L19.5%200Z'%20fill='white'%20/%3e%3c/svg%3e");
+		border-image-slice: 15 fill;
+		border-image-width: 8.5px;
+		opacity: 0.2;
+	}
+}
+
+._commonTagText_17pge_56 {
+	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pingfang SC";
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.01809em;
+	white-space: nowrap;
+}
+._nowPlayingSlider_ecnvm_1 {
+	touch-action: none;
+	cursor: pointer;
+	display: flex;
+	justify-content: stretch;
+	align-items: center;
+	min-height: 24px;
+
+	transform: translateZ(0);
+
+	& > ._inner_ecnvm_11 {
+		flex: 1;
+		width: 100%;
+
+		height: 20px;
+
+		background-color: #ffffff26;
+
+		& > ._thumb_ecnvm_19 {
+			width: 100%;
+			height: 100%;
+			background-color: white;
+			opacity: 0.4;
+			transform-origin: left center;
+		}
+	}
+
+	._nowPlayingSlider_ecnvm_1 > svg {
+		opacity: 0.5;
+	}
+}
+._controlThumb_1gm51_1 {
+	justify-self: center;
+	width: 100%;
+	height: 100%;
+	mix-blend-mode: plus-lighter;
+
+	& button {
+		display: block;
+		touch-action: none;
+		position: absolute;
+		border: none;
+		padding: 0;
+		border-radius: 4px;
+		background-color: #ffffff2d;
+		mix-blend-mode: plus-lighter;
+		cursor: none;
+
+		& div {
+			position: absolute;
+			background-color: black;
+			border-radius: 10px;
+		}
+	}
+}
+._cover_d8715_1 {
+	--base-box-shadow-v-0: rgba(0, 0, 0, 0.19);
+	--base-box-shadow-y-0: 1em;
+	--base-box-shadow-r-0: 1.2em;
+	aspect-ratio: 1 / 1;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+	background-position: center;
+	background-size: cover;
+	/* border-radius: max(2%, 0.7vh); */
+	filter: drop-shadow(
+		var(--base-box-shadow-v-0) 0px var(--base-box-shadow-y-0)
+			var(--base-box-shadow-r-0)
+	);
+	transform: scale(1);
+	transition:
+		background-image 0.5s linear,
+		filter 0.5s ease,
+		transform 0.5s cubic-bezier(0.3, 0.2, 0.2, 1.4);
+
+	&._musicPaused_d8715_23 {
+		--base-box-shadow-v-0: rgba(0, 0, 0, 0.19);
+		--base-box-shadow-y-0: 0.8em;
+		--base-box-shadow-r-0: 0.8em;
+		transform: scale(var(--scale-level));
+		transition:
+			background-image 0.5s linear,
+			filter 0.5s ease,
+			transform 0.6s cubic-bezier(0.4, 0.2, 0.1, 1);
+	}
+}
+
+._coverInner_d8715_35 {
+	width: 100%;
+	height: 100%;
+	background-position: center;
+	background-size: cover;
+	background-color: black;
+	transition: background-image 0.5s linear;
+}
+@keyframes _pressed-animation_1xyhb_1 {
+	0% {
+		transform: scale(1);
+	}
+
+	20% {
+		transform: scale(0.85);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+._mediaButton_1xyhb_19 {
+	aspect-ratio: 1 / 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	position: relative;
+	background-color: #fff0;
+	padding: 0;
+	border: none;
+
+	transition: background-color 0.3s;
+
+	&:hover {
+		background-color: #fff2;
+	}
+
+	&:active {
+		background-color: #fff2;
+
+		* {
+			animation-name: none !important;
+		}
+	}
+
+	& > * {
+		transition: transform 0.5s;
+		transform-origin: center;
+	}
+
+	&._animate_1xyhb_49 > * {
+		animation: _pressed-animation_1xyhb_1 0.7s;
+		animation-composition: accumulate;
+	}
+}
+._menuButton_3nu7a_1 {
+	aspect-ratio: 1 / 1;
+	padding: 0;
+	position: relative;
+	border: none;
+	background: #ffffff15 !important;
+	width: 3.5vh;
+	margin-left: 16px;
+	border-radius: 50%;
+	align-self: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+
+	& svg {
+		width: 72%;
+		height: auto;
+		color: #ffffff;
+	}
+
+	@media screen and (max-width: 1000px) {
+		width: max(2em, min(5vw, 4vh));
+	}
+}
+._textMarquee_1nd6h_1 {
+	min-width: 0;
+	overflow: hidden;
+	-webkit-mask-image: linear-gradient(to right, #000 95%, #0000);
+
+	&._animating_1nd6h_6 {
+		-webkit-mask-image: linear-gradient(
+			to left,
+			#0000,
+			#000 5%,
+			#000 95%,
+			#0000
+		);
+	}
+
+	& > * {
+		width: fit-content;
+	}
+}
+._musicInfo_tugc4_1 {
+	display: flex;
+	color: white;
+	font-size: max(2vh, 1em);
+	min-width: 0;
+}
+
+._info_tugc4_8 {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	/* 固定行高，否则文字变化时有可能产生布局抖动 */
+	line-height: 1.25em;
+}
+
+._name_tugc4_16 {
+	white-space: nowrap;
+	cursor: text;
+	user-select: text;
+	min-width: 0;
+	font-weight: 500;
+	letter-spacing: 0.4px;
+	opacity: 0.9;
+	mix-blend-mode: normal !important;
+}
+
+._artists_tugc4_27,
+._album_tugc4_28 {
+	white-space: nowrap;
+	text-align: center;
+	opacity: 0.45;
+	font-weight: 400;
+
+	letter-spacing: 0.4px;
+
+	& a {
+		text-decoration: none;
+
+		user-select: text;
+
+		&:hover {
+			opacity: 0.75;
+		}
+
+		&:active {
+			opacity: 0.5;
+		}
+
+		&::after {
+			content: var(--applemusic-like-lyrics-music-artists-separator, ", ");
+		}
+
+		&:nth-last-child(2)::after {
+			content: " & ";
+		}
+
+		&:last-child::after {
+			content: "";
+		}
+	}
+}
+._background_d77fp_1 {
+	position: absolute;
+	left: 0%;
+	height: 100%;
+	width: 100%;
+	transition: 0.5s ease-in-out;
+}
+
+._background_d77fp_1::after {
+	width: 100vw;
+	height: 100vh;
+	content: "";
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	background-image: linear-gradient(#00000000 60%, #0000001a 100%);
+}
+._horizontalLayout_ydii1_1 {
+	/* --info-size-fract: 0.85fr; */
+	/* --player-size-fract: 1fr; */
+	width: 100%;
+	height: 100%;
+
+	position: relative;
+	display: grid;
+	grid-template-rows: [drag-area] minmax(30px, 0.45fr) [thumb] auto [cover] auto [music-info] 3fr [buttom-controls] 0fr 0.3fr;
+	grid-template-columns: [info-side] 0.45fr [player-side] 0.55fr [side-controls] 0fr;
+	gap: 8px;
+	transition: all 0.5s ease-in-out;
+	left: 0%;
+
+	--hide-lyric-left: 61.111111%;
+
+	._thumb_ydii1_17,
+	._cover_ydii1_18,
+	._controls_ydii1_19 {
+		transition: left 0.5s cubic-bezier(0.5, 0, 0.5, 1);
+		left: 0%;
+	}
+
+	&._hideLyric_ydii1_24 {
+		/* percentage(calc((1 - var(--info-size-fract) / (var(--info-size-fract) + var(--player-size-fract))) / 2)) */
+		/* left: var(--hide-lyric-left); */
+
+		._lyric_ydii1_28 {
+			transition:
+				opacity 0.25s cubic-bezier(0.5, 0, 0.5, 1),
+				transform 0.5s cubic-bezier(0.5, 0, 0.5, 1);
+			opacity: 0;
+			pointer-events: none;
+		}
+
+		._thumb_ydii1_17,
+		._cover_ydii1_18,
+		._controls_ydii1_19 {
+			left: var(--hide-lyric-left);
+		}
+	}
+
+	--horizontal-layout-max-width: min(50vh, 38vw);
+
+	@media screen and (max-height: 1000px) {
+		--horizontal-layout-max-width: min(45vh, 38vw);
+	}
+
+	@media screen and (max-height: 768px) {
+		font-size: 0.8em;
+		gap: 2px;
+		grid-template-rows: [drag-area] minmax(30px, 0.45fr) [thumb] auto [cover] auto [music-info] 3fr [buttom-controls] 0fr 0.2fr;
+	}
+}
+
+._thumb_ydii1_17 {
+	grid-column: info-side;
+	grid-row: thumb;
+	will-change: transform;
+	justify-self: center;
+	margin: 2vh;
+
+	mix-blend-mode: plus-lighter;
+
+	position: relative;
+}
+
+._cover_ydii1_18 {
+	aspect-ratio: 1 / 1;
+	grid-column: info-side;
+	grid-row: cover;
+	align-self: center;
+	justify-self: center;
+	width: var(--horizontal-layout-max-width);
+	height: var(--horizontal-layout-max-width);
+
+	position: relative;
+}
+
+._controls_ydii1_19 {
+	grid-column: info-side;
+	grid-row: music-info;
+	will-change: transform;
+	justify-self: center;
+
+	mix-blend-mode: plus-lighter;
+	min-width: 0;
+	min-height: 0;
+	width: var(--horizontal-layout-max-width);
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	position: relative;
+
+	margin-top: calc(-8px + 1.75em);
+	/* 计算一下该有的间距 没懂为啥整个加个gap8px */
+}
+
+._lyric_ydii1_28 {
+	box-sizing: border-box;
+	grid-column: player-side;
+	grid-row: 2 / 5;
+	width: 100%;
+	height: 100%;
+	transition: opacity 0.5s 0.25s cubic-bezier(0.5, 0, 0.5, 1);
+	padding-right: 15%;
+
+	mask-image: linear-gradient(transparent, black 10%, black 90%, transparent);
+
+	mix-blend-mode: plus-lighter;
+	contain: paint;
+
+	@media screen and (max-width: 1600px), (max-height: 1000px) {
+		padding-right: 8%;
+	}
+}
+
+._bottomControls_ydii1_120 {
+	grid-column: 1 / 4;
+	grid-row: buttom-controls;
+	mix-blend-mode: plus-lighter;
+
+	display: flex;
+	flex-direction: row-reverse;
+	gap: 4em;
+	padding-right: 4em;
+	padding-left: 4em;
+
+	@media screen and (max-width: 1600px), (max-height: 1000px) {
+		gap: 2em;
+		padding-right: 2em;
+		padding-left: 2em;
+	}
+}
+._verticalLayout_4kcuk_1 {
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	min-width: 0;
+	overflow: hidden;
+	display: grid;
+	/* 保证可以拖动窗口的区域 */
+	grid-template-rows:
+		[drag-area] 30px
+		/* 控制条的空间 */
+		[thumb] 30px
+		/* 主视图，包括是否展示歌词的两种布局 */
+		[main-view] 1fr
+		/* 主要控制栏的区域 */
+		[control] 0fr;
+	gap: 2px;
+}
+
+._thumb_4kcuk_20 {
+	grid-row: thumb;
+	justify-self: center;
+	z-index: 1;
+	mix-blend-mode: plus-lighter;
+
+	/* border: 1px solid aqua; */
+
+	@media screen and (max-width: 768px) {
+		margin: 4px;
+	}
+}
+
+._coverFrame_4kcuk_33 {
+	position: absolute;
+	width: 0px;
+	height: 0px;
+
+	&._immerseCover_4kcuk_38 {
+		mask-image: linear-gradient(to bottom, #000 0%, #000 70%, #0000 100%);
+	}
+}
+
+/* 封面的位置由 JS 设定 */
+._cover_4kcuk_33 {
+	aspect-ratio: 1 / 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+
+._lyricLayout_4kcuk_52 {
+	grid-row: main-view;
+	/* 强制和 .noLyricLayout 占用同一区域 */
+	grid-column: 1 / 2;
+	display: grid;
+	grid-template-rows: 1em [controls] 0fr [lyric-view] 1fr [bottom-controls] 0fr;
+	grid-template-columns: 3em [cover-side] 0fr [info-side] 1fr 3em;
+	mix-blend-mode: plus-lighter;
+
+	@media screen and (max-width: 480px) {
+		grid-template-columns: 20px [cover-side] 0fr [info-side] 1fr 20px;
+	}
+}
+
+._noLyricLayout_4kcuk_54 {
+	grid-row: main-view;
+	/* 强制和 .lyricLayout 占用同一区域 */
+	grid-column: 1 / 2;
+	overflow-y: hidden;
+	display: grid;
+	grid-template-rows: 1em [cover-view] 1fr [lyric-view] 0fr;
+	grid-template-columns: 3em [main-view] 1fr 3em;
+	pointer-events: none;
+
+	@media screen and (max-width: 480px) {
+		grid-template-columns: 2em [main-view] 1fr 2em;
+	}
+}
+
+/* 辅助定位的小封面图位置 */
+._phonySmallCover_4kcuk_82 {
+	grid-row: controls;
+	grid-column: cover-side;
+	justify-self: center;
+	align-self: center;
+	aspect-ratio: 1 / 1;
+	opacity: 0;
+	pointer-events: none;
+
+	width: 6em;
+
+	@media screen and (max-width: 480px) {
+		width: 4.5em;
+	}
+
+	/* border: 1px solid greenyellow; */
+}
+
+/* 辅助定位的大封面图位置 */
+._phonyBigCover_4kcuk_101 {
+	grid-row: cover-view;
+	grid-column: 2 / 3;
+	opacity: 0;
+	pointer-events: none;
+
+	/* border: 1px solid pink; */
+}
+
+._smallControls_4kcuk_110 {
+	grid-row: controls;
+	grid-column: info-side;
+	align-self: center;
+
+	/* border: 1px solid yellow; */
+	transition: opacity 0.25s 0.25s;
+	padding-left: 1em;
+	min-width: 0;
+	overflow: visible;
+	height: fit-content;
+	z-index: 1;
+	mix-blend-mode: plus-lighter;
+}
+
+._lyric_4kcuk_52 {
+	grid-row: lyric-view;
+	grid-column: 1 / 5;
+
+	/* border: 1px solid blue; */
+
+	transition: opacity 0.5s 0.5s;
+	opacity: 1;
+	mix-blend-mode: plus-lighter;
+	/* contain: paint; */
+
+	mask-image: linear-gradient(transparent 0%, black 10%, black 100%);
+	/* margin-left: calc(-24px - 1em); */
+	/* width: calc(100% + 24px + 1em); */
+	box-sizing: content-box;
+	min-height: 0;
+}
+
+._bigControls_4kcuk_143 {
+	grid-row: lyric-view;
+	grid-column: 2 / 3;
+
+	/* border: 1px solid red; */
+	transition: opacity 0.5s;
+	opacity: 0;
+	mix-blend-mode: plus-lighter;
+	min-width: 0;
+	z-index: 2;
+}
+
+._hideLyric_4kcuk_155 {
+	._smallControls_4kcuk_110 {
+		opacity: 0;
+		transition: opacity 0.5s;
+		pointer-events: none;
+	}
+
+	._noLyricLayout_4kcuk_54 {
+		pointer-events: auto;
+	}
+
+	._lyric_4kcuk_52 {
+		opacity: 0;
+		transition: opacity 0.5s;
+		pointer-events: none;
+	}
+
+	._bigControls_4kcuk_143 {
+		opacity: 1;
+	}
+}
+
+._background_4kcuk_177 {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+}
+._toggleIconButton_mfhcu_1 {
+	border: none;
+	background-color: transparent;
+	aspect-ratio: 1 / 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: currentColor;
+
+	opacity: 0.45;
+	width: 4em;
+	height: 4em;
+
+	& svg {
+		width: 4em;
+		height: 4em;
+		aspect-ratio: 1 / 1;
+	}
+
+	@media screen and (max-width: 1600px), (max-height: 1000px) {
+		width: 3em;
+		height: 3em;
+
+		& svg {
+			width: 3em;
+			height: 3em;
+		}
+	}
+}
+@keyframes _speaker-bounce-part1_1ob1j_1 {
+	to {
+		transform: scale(1.2);
+	}
+}
+
+@keyframes _speaker-bounce-part2_1ob1j_1 {
+	to {
+		transform: scale(0.85);
+	}
+}
+
+@keyframes _speaker-bounce-part3_1ob1j_1 {
+	to {
+		transform: scale(1);
+	}
+}
+
+._volumeControl_1ob1j_19 {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	margin-left: -12px;
+	margin-right: -8px;
+}
+
+._volumeControl_1ob1j_19 > svg {
+	opacity: 0.5;
+}
+
+._speakerAnimate_1ob1j_31 .speaker-bounce-1 {
+	animation:
+		_speaker-bounce-part1_1ob1j_1 0.2s ease-in-out 0s forwards,
+		_speaker-bounce-part2_1ob1j_1 0.2s ease-in-out 0.2s forwards,
+		_speaker-bounce-part3_1ob1j_1 0.2s ease-in-out 0.4s forwards;
+	transform-origin: center;
+}
+
+._speakerAnimate_1ob1j_31 .speaker-bounce-2 {
+	animation:
+		_speaker-bounce-part1_1ob1j_1 0.2s ease-in-out 0.05s forwards,
+		_speaker-bounce-part2_1ob1j_1 0.2s ease-in-out 0.25s forwards,
+		_speaker-bounce-part3_1ob1j_1 0.2s ease-in-out 0.45s forwards;
+	transform-origin: center;
+}
+
+._speakerAnimate_1ob1j_31 .speaker-bounce-3 {
+	animation:
+		_speaker-bounce-part1_1ob1j_1 0.2s ease-in-out 0.1s forwards,
+		_speaker-bounce-part2_1ob1j_1 0.2s ease-in-out 0.3s forwards,
+		_speaker-bounce-part3_1ob1j_1 0.2s ease-in-out 0.5s forwards;
+	transform-origin: center;
+}
+
+._speakerAnimate_1ob1j_31 .speaker-bounce-4 {
+	animation:
+		_speaker-bounce-part1_1ob1j_1 0.2s ease-in-out 0.15s forwards,
+		_speaker-bounce-part2_1ob1j_1 0.2s ease-in-out 0.35s forwards,
+		_speaker-bounce-part3_1ob1j_1 0.2s ease-in-out 0.55s forwards;
+	transform-origin: center;
+}
+.amll-forward-left-arrow {
+	animation: amll-forward-left-end 0.6s cubic-bezier(0.4, 1.51, 0.4, 1);
+	animation-fill-mode: forwards;
+}
+
+.amll-forward-right-arrow {
+	animation: amll-forward-right-end 0.2s ease-out;
+	transform-origin: 81% 50%;
+	animation-fill-mode: forwards;
+}
+
+.amll-forward-left-standby {
+	animation: amll-forward-left-new 0.6s cubic-bezier(0.4, 1.51, 0.4, 1);
+	transform-origin: 22% 50%;
+	animation-fill-mode: forwards;
+}
+
+@keyframes amll-forward-left-end {
+	100% {
+		transform: translateX(40px);
+	}
+}
+
+@keyframes amll-forward-right-end {
+	100% {
+		transform: scale(0);
+		opacity: 0;
+	}
+}
+
+@keyframes amll-forward-left-new {
+	0% {
+		transform: scale(0) translateX(-15px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: scale(1) translateX(0px);
+		opacity: 1;
+	}
+}
+
+.amll-rewind-right-arrow {
+	animation: amll-rewind-right-end 0.6s cubic-bezier(0.4, 1.51, 0.4, 1);
+	animation-fill-mode: forwards;
+}
+
+.amll-rewind-left-arrow {
+	animation: amll-rewind-left-end 0.2s ease-out;
+	transform-origin: 19% 50%;
+	animation-fill-mode: forwards;
+}
+
+.amll-rewind-right-standby {
+	animation: amll-rewind-right-new 0.6s cubic-bezier(0.4, 1.51, 0.4, 1);
+	transform-origin: 78% 50%;
+	animation-fill-mode: forwards;
+}
+
+@keyframes amll-rewind-right-end {
+	100% {
+		transform: translateX(-40px);
+	}
+}
+
+@keyframes amll-rewind-left-end {
+	100% {
+		transform: scale(0);
+		opacity: 0;
+	}
+}
+
+@keyframes amll-rewind-right-new {
+	0% {
+		transform: scale(0) translateX(15px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: scale(1) translateX(0px);
+		opacity: 1;
+	}
+}
+._horizontalControls_1s8za_1 {
+	min-width: 0;
+	overflow: hidden;
+
+	@media screen and (max-height: 1000px) {
+		padding: 0vh 0 !important;
+	}
+
+	@media screen and (min-height: 1000px) {
+		padding-top: 2vh;
+		padding-bottom: 1vh;
+	}
+}
+
+._controls_1s8za_15,
+._bigControls_1s8za_16 {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+._controls_1s8za_15 {
+	justify-content: space-between;
+}
+
+._bigControls_1s8za_16 {
+	padding: 2vh min(2vw, 2vh);
+	padding-bottom: 0;
+}
+
+._songMediaButton_1s8za_31,
+._songMediaPlayButton_1s8za_32 {
+	width: 18%;
+	aspect-ratio: 1 / 1;
+}
+
+._songMediaButton_1s8za_31 > svg {
+	scale: 3;
+	transition: scale 0.3s;
+
+	@media screen and (max-height: 1080px) {
+		scale: 2;
+	}
+
+	@media screen and (max-height: 768px) {
+		scale: 1.5;
+	}
+
+	@media screen and (max-height: 512px) {
+		scale: 1;
+	}
+
+	@media screen and (max-width: 480px) {
+		scale: 0.5;
+	}
+}
+
+._songMediaPlayButton_1s8za_32 > svg {
+	scale: 2;
+	transition: scale 0.3s;
+
+	@media screen and (max-height: 1080px) {
+		scale: 1.1;
+	}
+
+	@media screen and (max-height: 768px) {
+		scale: 0.8;
+	}
+
+	@media screen and (max-height: 512px) {
+		scale: 0.5;
+	}
+
+	@media screen and (max-width: 480px) {
+		scale: 0.5;
+	}
+}
+
+._qualityTag_1s8za_79 {
+	scale: 1.4;
+	transition: scale 0.3s;
+
+	@media screen and (max-height: 768px) {
+		scale: 0.5;
+	}
+
+	@media screen and (max-height: 1080px) {
+		scale: 1;
+	}
+}
+
+._progressBarLabels_1s8za_92 {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-weight: 500;
+	font-size: max(1.2vh, 0.8em);
+	opacity: 0.5;
+	margin-top: 4px;
+
+	@media screen and (max-height: 768px) {
+		margin-top: 0;
+	}
+
+	& > * {
+		flex: 1;
+	}
+
+	& > *:nth-child(2) {
+		flex: 0;
+	}
+
+	& > *:last-child {
+		text-align: right;
+	}
+}
+
+._bigControls_1s8za_16 > button {
+	height: 10vh !important;
+	width: 10vh !important;
+
+	&:nth-child(2) > svg {
+		scale: 1.75;
+
+		@media screen and (max-width: 480px) {
+			scale: 1.25;
+		}
+	}
+
+	& > svg {
+		scale: 2.5;
+
+		@media screen and (max-width: 480px) {
+			scale: 2;
+		}
+	}
+}
+
+._autoLyricLayout_1s8za_139 {
+	--info-timing-func-in: cubic-bezier(0.5, 0, 0.75, 0);
+	--info-timing-func-out: cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+._bigMusicInfo_1s8za_144 {
+	transition:
+		transform 0.3s var(--info-timing-func-in),
+		opacity 0.3s var(--info-timing-func-in);
+	transform: translateY(-25vh);
+	opacity: 0;
+	overflow-x: hidden;
+	min-width: 0;
+	padding: 2em 0;
+
+	@media screen and (max-height: 768px) {
+		padding: 1em 0;
+	}
+
+	@media screen and (max-height: 512px) {
+		padding: 0.25em 0;
+	}
+}
+
+._bigMusicInfo_1s8za_144._hideLyric_1s8za_163 {
+	transition:
+		transform 0.5s 0.3s var(--info-timing-func-out),
+		opacity 0.5s 0.3s var(--info-timing-func-out);
+	transform: translateY(0);
+	opacity: 1;
+}
+
+._smallMusicInfo_1s8za_171 {
+	transition:
+		transform 0.5s 0.3s var(--info-timing-func-out),
+		opacity 0.3s 0.3s var(--info-timing-func-out);
+	transform: translateY(0);
+	opacity: 1;
+	font-size: clamp(1em, 2vh, 1.25em) !important;
+}
+
+._smallMusicInfo_1s8za_171._hideLyric_1s8za_163 {
+	transition:
+		transform 0.3s var(--info-timing-func-in),
+		opacity 0.3s var(--info-timing-func-in);
+	transform: translateY(25vh);
+	opacity: 0;
+}
+
+._bigVolumeControl_1s8za_188 {
+	padding-bottom: 4em;
+
+	@media screen and (max-height: 768px) {
+		padding-bottom: 2em;
+	}
+
+	@media screen and (max-height: 512px) {
+		padding-bottom: 1em;
+	}
+}
+/*$vite$:1*/