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

src/views/library.vue

@@ -39,6 +39,7 @@
           :id="likedSongsPlaylist.id"
           dbclickTrackFunc="playPlaylistByID"
           :columnNumber="3"
+          :withoutPadding="true"
         />
       </div>
     </div>
@@ -355,6 +356,7 @@ h1 {
   color: var(--color-text);
   display: flex;
   align-items: center;
+  padding: var(--main-content-padding);
   .avatar {
     height: 44px;
     margin-right: 12px;
@@ -373,6 +375,7 @@ h1 {
 .section-one {
   display: flex;
   margin-top: 24px;
+  padding: var(--main-content-padding);
   .songs {
     flex: 7;
     margin-top: 8px;
@@ -381,6 +384,16 @@ h1 {
   }
 }
 
+@media (max-width: 800px) {
+  .section-one {
+    display: block;
+    .songs {
+      margin-top: 20px;
+      margin-left: 0;
+    }
+  }
+}
+
 .liked-songs {
   flex: 3;
   margin-top: 8px;
@@ -460,6 +473,7 @@ h1 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
+  padding: var(--main-content-padding);
 }
 
 .tabs {