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

* 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

View file

@ -91,6 +91,15 @@ export default {
--color-navbar-bg: rgba(255, 255, 255, 0.86);
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
--main-content-padding-x: 10vw;
--main-content-padding: 0 var(--main-content-padding-x);
}
@media (max-width: 1336px) {
:root {
--main-content-padding-x: 5vw;
}
}
[data-theme="dark"] {
@ -117,26 +126,18 @@ input {
}
body {
background-color: var(--color-body-bg);
margin: 0;
}
html {
overflow-y: overlay;
min-width: 768px;
min-width: 340px;
}
main {
max-width: 100vw;
margin-top: 84px;
margin-bottom: 96px;
padding: {
right: 10vw;
left: 10vw;
}
}
@media (max-width: 1336px) {
main {
padding: 0 5vw;
}
}
select,