girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 21:28:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update animations for lyrics, panels and tracklists | 为歌词、面板和列表更新动画 (#249)

Browse source 
* Update lyrics scrolling animation

* Remove the useless module imported by mistake

* Auto prettify the changed code

* Update lyrics animation curve and add blur effect to lyrics

* Auto prettify the changed code

* Add initial lyrics blur filter

* Update lyrics blur and fade effect

* Update open and close animation for explore page's panel

* Update tracklist hover animation

* Add scale animation to lyrics

* Auto prettify the changed code

* Update lyrics blur effect with CSS variables

* Support small screen devices for all pages

* Fix paddings for some pages

* Auto prettify the changed code

* Update lyrics page for small screen devices
This commit is contained in:
Mr. Will 2021-02-12 07:18:55 +00:00 • committed by GitHub
parent 97f2ce043b
commit 1d34aa794f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 496 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/views/album.vue
View file

@ -276,6 +276,7 @@ export default {
display: flex;
width: 78vw;
margin-bottom: 72px;
padding: var(--main-content-padding);
.info {
display: flex;
flex-direction: column;
@ -330,6 +331,29 @@ export default {
}
}
@media (max-width: 600px) {
.playlist-info {
width: calc(100vw - 2 * var(--main-content-padding-x));
padding: var(--main-content-padding);
display: block;
.cover {
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-top: 24px;
margin-left: 0;
.title {
font-size: 48px;
}
}
}
}
.explicit-symbol {
opacity: 0.28;
color: var(--color-text);
@ -345,6 +369,7 @@ export default {
font-size: 12px;
opacity: 0.48;
color: var(--color-text);
padding: var(--main-content-padding);
div {
margin-bottom: 4px;
}
@ -363,6 +388,7 @@ export default {
opacity: 0.88;
color: var(--color-text);
margin-bottom: 20px;
padding: var(--main-content-padding);
}
}
.description-fulltext {