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/components/CoverRow.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="cover-row" :style="rowStyles">
+  <div
+    class="cover-row"
+    :style="rowStyles"
+    :class="{ 'without-padding': withoutPadding }"
+  >
     <div
       class="item"
       v-for="item in items"
@@ -50,6 +54,7 @@ export default {
     showPlayCount: { type: Boolean, default: false },
     columnNumber: { type: Number, default: 5 },
     gap: { type: String, default: "44px 24px" },
+    withoutPadding: { type: Boolean, default: false },
   },
   computed: {
     rowStyles() {
@@ -114,6 +119,13 @@ export default {
 <style lang="scss" scoped>
 .cover-row {
   display: grid;
+  padding: var(--main-content-padding);
+  max-width: calc(100vw - var(--main-content-padding-x));
+  overflow-x: scroll;
+}
+
+.cover-row.without-padding {
+  padding: 0;
 }
 
 .item {
@@ -143,6 +155,18 @@ export default {
   }
 }
 
+@media (max-width: 800px) {
+  .item {
+    width: 256px;
+  }
+}
+
+@media (max-width: 600px) {
+  .item {
+    width: 192px;
+  }
+}
+
 .item.artist {
   display: flex;
   flex-direction: column;