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/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav>
+  <nav :class="{ 'search-box-open': isSearchBoxOpen }">
     <div class="navigation-buttons">
       <button-icon @click.native="go('back')"
         ><svg-icon icon-class="arrow-left"
@@ -30,6 +30,9 @@
         v-if="settings.showGithubIcon !== false"
         ><svg-icon icon-class="github" class="github"
       /></a>
+      <button-icon @click.native="toggleSearchBox()" class="search-button">
+        <svg-icon icon-class="search" />
+      </button-icon>
       <div class="search-box">
         <div class="container" :class="{ active: inputFocus }">
           <svg-icon icon-class="search" />
@@ -63,6 +66,7 @@ export default {
       inputFocus: false,
       langs: ["zh-CN", "en"],
       keywords: "",
+      isSearchBoxOpen: false,
     };
   },
   computed: {
@@ -86,6 +90,9 @@ export default {
         params: { keywords: this.keywords },
       });
     },
+    toggleSearchBox() {
+      this.isSearchBoxOpen = !this.isSearchBoxOpen;
+    },
   },
 };
 </script>
@@ -105,6 +112,9 @@ nav {
     left: 10vw;
   }
   backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid transparent;
+  transition-property: padding-bottom, border-bottom;
+  transition-duration: 0.4s;
 
   background-color: var(--color-navbar-bg);
   z-index: 100;
@@ -248,5 +258,67 @@ nav {
     color: var(--color-text);
     -webkit-app-region: no-drag;
   }
+  @media (max-width: 400px) {
+    .github {
+      display: none;
+    }
+  }
+  .search-button {
+    display: none;
+  }
+  @media (max-width: 600px) {
+    .search-button {
+      display: flex;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .right-part {
+    flex: 0;
+  }
+}
+
+@media (max-width: 800px) {
+  .navigation-links > a {
+    margin: 4px;
+  }
+}
+
+@media (max-width: 700px) {
+  .navigation-buttons {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  nav.search-box-open {
+    padding-bottom: 36px;
+    border-bottom-color: var(--color-secondary-bg-for-transparent);
+  }
+
+  .search-box {
+    display: block;
+    position: fixed;
+    top: 56px;
+    left: 16px;
+    right: 16px;
+    .container {
+      width: 100%;
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+      transition-property: height, opacity;
+      transition-duration: 0.4s;
+      .input {
+        width: 100%;
+      }
+    }
+  }
+
+  nav.search-box-open .container {
+    opacity: 1;
+    height: 32px;
+  }
 }
 </style>