@charset "utf-8";


body.普通主体 { margin: 0; }

main.普通主区 { background: no-repeat center / cover; height: 100vh; }

article.普通文章 { height: 100%; }

section.上面部分 { height: calc(100% - 4rem); overflow: hidden; backdrop-filter: blur(10px); padding: 2rem calc(50% - 150px); background-color: rgb(0 0 0 / 80%); }

section.下面部分 { position: fixed; bottom: 0; overflow: hidden; padding: 0 calc(50% - 150px); width: 300px; backdrop-filter: blur(1rem); }

img.专辑图片 { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5%; }

h3.音乐中标题 { color: white; margin-bottom: 0.5rem; }

p.作者段落 { color: lightgray; margin-top: 0.5rem; }

div.歌词分区 { overflow: hidden auto; max-height: 300px; }

div.歌词分区::-webkit-scrollbar { display: none; }

p.歌词段落 { color: #aaa; }

.功能分区 { margin: 2rem 0; display: flex; align-items: center; justify-content: space-between; }

button.收藏按钮 { width: 1.2rem; height: 1.2rem; border: none; outline: none; object-fit: contain; background: url(心型图标.svg) no-repeat center / contain; }
button.彩铃按钮 { width: 1.2rem; height: 1.2rem; border: none; outline: none; object-fit: contain; background: url(彩铃图标.svg) no-repeat center / contain; }
button.下载按钮 { width: 1.2rem; height: 1.2rem; border: none; outline: none; object-fit: contain; background: url(下载图标.svg) no-repeat center / contain; }
button.评论按钮 { width: 1.2rem; height: 1.2rem; border: none; outline: none; object-fit: contain; background: url(评论图标.svg) no-repeat center / contain; }
button.更多按钮 { width: 1.2rem; height: 1.2rem; border: none; outline: none; object-fit: contain; background: url(更多图标.svg) no-repeat center / contain; }


.进度分区 { margin: 2rem 0; display: flex; align-items: center; justify-content: space-between; }

.控制分区 { margin: 2rem 0; display: flex; align-items: center; justify-content: space-between; }

span.播放时间行内 { color: #ccc; font-size: .8rem; }


button.排序按钮 { width: 1.5rem; height: 1.5rem; border: none; outline: none; object-fit: contain; background: url(排序图标.svg) no-repeat center / contain; }
button.上一首按钮 { width: 2rem; height: 2rem; border: none; outline: none; object-fit: contain; background: url(上一首图标.svg) no-repeat center / contain; }
button.播放暂停按钮 { width: 2rem; height: 2rem; border: none; outline: none; object-fit: contain; background: url(播放图标.svg) no-repeat center / contain; }
button.下一首按钮 { width: 2rem; height: 2rem; border: none; outline: none; object-fit: contain; background: url(下一首图标.svg) no-repeat center / contain; }
button.列表按钮 { width: 1.5rem; height: 1.5rem; border: none; outline: none; object-fit: contain; background: url(列表图标.svg) no-repeat center / contain; }
