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
2025-03-05 01:27:42 +08:00 · 2021-02-12 07:18:55 +00:00 · 2021-02-12 07:18:55 +00:00 · 1d34aa794f
commit 1d34aa794f
parent 97f2ce043b
22 changed files with 496 additions and 58 deletions
--- a/public/index.html
+++ b/public/index.html
@ -4,7 +4,7 @@
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="no-referrer" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
--- a/src/App.vue
+++ b/src/App.vue
@ -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,
--- a/src/components/CoverRow.vue
+++ b/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;
--- a/src/components/MvRow.vue
+++ b/src/components/MvRow.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="mv-row">
+  <div class="mv-row" :class="{ 'without-padding': withoutPadding }">
    <div class="mv" v-for="mv in mvs" :key="getID(mv)">
      <div
        class="cover"
@ -35,6 +35,7 @@ export default {
      type: String,
      default: "artist",
    },
+    withoutPadding: { type: Boolean, default: false },
  },
  data() {
    return {
@ -83,9 +84,39 @@ export default {

 <style lang="scss" scoped>
 .mv-row {
+  --col-num: 5;
  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(var(--col-num), 1fr);
  gap: 36px 24px;
+  padding: var(--main-content-padding);
+}
+
+.mv-row.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 900px) {
+  .mv-row {
+    --col-num: 4;
+  }
+}
+
+@media (max-width: 800px) {
+  .mv-row {
+    --col-num: 3;
+  }
+}
+
+@media (max-width: 700px) {
+  .mv-row {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .mv-row {
+    --col-num: 1;
+  }
 }

 .mv {
--- a/src/components/Navbar.vue
+++ b/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>
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@ -62,7 +62,10 @@
      <div class="middle-control-buttons">
        <div class="blank"></div>
        <div class="container" @click.stop>
-          <button-icon @click.native="previous" :title="$t('player.previous')"
+          <button-icon
+            @click.native="previous"
+            :title="$t('player.previous')"
+            class="auto-hide"
            ><svg-icon icon-class="previous"
          /></button-icon>
          <button-icon
@ -78,7 +81,7 @@
        </div>
        <div class="blank"></div>
      </div>
-      <div class="right-control-buttons">
+      <div class="right-control-buttons auto-hide">
        <div class="blank"></div>
        <div class="container" @click.stop>
          <button-icon
@ -343,6 +346,18 @@ export default {
  display: flex;
 }

+@media (max-width: 700px) {
+  .controls {
+    display: flex;
+  }
+  .playing {
+    flex: 1;
+  }
+  .playing .container {
+    pointer-events: none;
+  }
+}
+
 .playing .container {
  display: flex;
  align-items: center;
@ -448,6 +463,20 @@ export default {
  margin-left: 16px;
 }

+@media (max-width: 700px) {
+  .controls {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .middle-control-buttons {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  .auto-hide,
+  .blank {
+    display: none;
+  }
+}
+
 // .lyrics-button {
 //   position: fixed;
 //   right: 18px;
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="track-list">
+  <div class="track-list" :class="{ 'without-padding': withoutPadding }">
    <ContextMenu ref="menu">
      <div class="item-info">
        <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@ -26,7 +26,7 @@
      >
      <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
    </ContextMenu>
-    <div :style="listStyles">
+    <div :style="listStyles" class="track-list-inner-container">
      <TrackListItem
        v-for="(track, index) in tracks"
        :track="track"
@ -78,10 +78,6 @@ export default {
        return []; // 'removeTrackFromPlaylist'
      },
    },
-    columnNumber: {
-      type: Number,
-      default: 4,
-    },
    highlightPlayingTrack: {
      type: Boolean,
      default: true,
@ -90,6 +86,10 @@ export default {
      type: String,
      default: "id",
    },
+    withoutPadding: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
@ -107,7 +107,6 @@ export default {
      this.listStyles = {
        display: "grid",
        gap: "4px",
-        gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
      };
    }
  },
@ -240,4 +239,36 @@ export default {
 };
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.track-list {
+  --col-num: 4;
+  padding: var(--main-content-padding);
+
+  .track-list-inner-container {
+    grid-template-columns: repeat(var(--col-num), 1fr);
+  }
+}
+
+.track-list.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 800px) {
+  .track-list {
+    --col-num: 3;
+    padding: var(--main-content-padding);
+  }
+}
+
+@media (max-width: 700px) {
+  .track-list {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .track-list {
+    --col-num: 1;
+  }
+}
+</style>
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@ -193,6 +193,7 @@ button {
  padding: 8px;
  border-radius: 12px;
  user-select: none;
+  transition: all 0.3s;

  .no {
    display: flex;
@ -293,6 +294,11 @@ button {
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
+  @media (max-width: 600px) {
+    .album {
+      flex: 0;
+    }
+  }
  .time {
    font-size: 16px;
    width: 50px;
@ -307,7 +313,6 @@ button {
 }

 .track.focus {
-  transition: all 0.3s;
  background: var(--color-secondary-bg);
 }

@ -354,6 +359,12 @@ button {
  justify-content: flex-end;
 }

+@media (max-width: 600px) {
+  .actions {
+    width: auto;
+  }
+}
+
 .track.playing {
  background: var(--color-primary-bg);
  color: var(--color-primary);
--- a/src/electron/tray.js
+++ b/src/electron/tray.js
@ -21,24 +21,24 @@ export function createTray(win) {
  tray.on("right-click", () => {
    const contextMenu = Menu.buildFromTemplate([
      {
-          label: "播放/暂停",
-          click: () => {
-            win.webContents.send("play");
-          },
+        label: "播放/暂停",
+        click: () => {
+          win.webContents.send("play");
        },
-        {
-          label: "下一首",
-          accelerator: "CmdOrCtrl+Right",
-          click: () => {
-            win.webContents.send("next");
-          },
+      },
+      {
+        label: "下一首",
+        accelerator: "CmdOrCtrl+Right",
+        click: () => {
+          win.webContents.send("next");
        },
-        {
-          label: "退出",
-          click: () => {
-            app.exit();
-          },
+      },
+      {
+        label: "退出",
+        click: () => {
+          app.exit();
        },
+      },
    ]);
    tray.popUpContextMenu(contextMenu);
  });
--- a/src/views/album.vue
+++ b/src/views/album.vue
@ -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 {
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@ -4,7 +4,7 @@
      <div class="head">
        <img :src="artist.img1v1Url | resizeImage(1024)" />
      </div>
-      <div>
+      <div class="info">
        <div class="name">{{ artist.name }}</div>
        <div class="artist">{{ $t("artist.artist") }}</div>
        <div class="statistics">
@ -253,6 +253,7 @@ export default {
  align-items: center;
  margin-bottom: 26px;
  color: var(--color-text);
+  padding: var(--main-content-padding);
  img {
    height: 192px;
    width: 192px;
@ -289,12 +290,37 @@ export default {
  }
 }

+@media (max-width: 600px) {
+  .artist-info {
+    display: block;
+
+    .head {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .info {
+      margin-top: 24px;
+    }
+
+    .name {
+      font-size: 36px;
+    }
+
+    img {
+      margin: 0;
+    }
+  }
+}
+
 .section-title {
  font-weight: 600;
  font-size: 22px;
  opacity: 0.88;
  color: var(--color-text);
  margin-bottom: 16px;
+  padding: var(--main-content-padding);
  padding-top: 46px;

  display: flex;
@ -309,6 +335,11 @@ export default {

 .latest-release {
  color: var(--color-text);
+  padding: var(--main-content-padding);
+  .section-title {
+    padding-left: 0;
+    padding-right: 0;
+  }
  .release {
    display: flex;
  }
@ -343,6 +374,7 @@ export default {
 .popular-tracks {
  .show-more {
    display: flex;
+    padding: var(--main-content-padding);

    button {
      padding: 4px 8px;
--- a/src/views/artistMV.vue
+++ b/src/views/artistMV.vue
@ -81,6 +81,7 @@ export default {
 h1 {
  font-size: 42px;
  color: var(--color-text);
+  padding: var(--main-content-padding);
  .avatar {
    height: 44px;
    margin-right: 12px;
--- a/src/views/explore.vue
+++ b/src/views/explore.vue
@ -20,7 +20,7 @@
      </div>
    </div>

-    <div class="panel" v-show="showCatOptions">
+    <div class="panel" v-bind:class="{ show: showCatOptions }">
      <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
        <div class="name">{{ bigCat }}</div>
        <div class="cats">
@ -174,6 +174,23 @@ export default {
    },
  },
  activated() {
+    var updatePanelHeight = () => {
+      var panelChildren = this.$el.getElementsByClassName("panel")[0].children;
+      this.$el.style.setProperty(
+        "--explore-panel-children-height",
+        `${
+          Math.abs(
+            panelChildren[0].getBoundingClientRect().y -
+              (panelChildren[panelChildren.length - 1].getBoundingClientRect()
+                .y +
+                panelChildren[panelChildren.length - 1].clientHeight)
+          ) + 16
+        }px`
+      );
+    };
+    window.addEventListener("load", updatePanelHeight);
+    window.addEventListener("resize", updatePanelHeight);
+
    this.loadData();
  },
  beforeRouteUpdate(to, from, next) {
@ -193,10 +210,12 @@ export default {
 h1 {
  color: var(--color-text);
  font-size: 56px;
+  padding: var(--main-content-padding);
 }
 .buttons {
  display: flex;
  flex-wrap: wrap;
+  padding: var(--main-content-padding);
 }
 .button {
  user-select: none;
@ -226,8 +245,19 @@ h1 {
  margin-top: 10px;
  background: var(--color-secondary-bg);
  border-radius: 10px;
-  padding: 8px;
+  padding: 0 8px;
+  margin: var(--main-content-padding);
  color: var(--color-text);
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.3s;
+
+  &.show {
+    height: var(--explore-panel-children-height);
+    opacity: 1;
+    padding: 8px;
+  }

  .big-cat {
    display: flex;
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -152,6 +152,7 @@ export default {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
+  padding: var(--main-content-padding);
  a {
    font-size: 13px;
    font-weight: 600;
--- a/src/views/library.vue
+++ b/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 {
--- a/src/views/loginUsername.vue
+++ b/src/views/loginUsername.vue
@ -106,6 +106,7 @@ export default {
 .login {
  display: flex;
  color: var(--color-text);
+  padding: var(--main-content-padding);
 }

 .title {
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@ -118,7 +118,12 @@
      </div>
      <div class="right-side">
        <transition name="slide-fade">
-          <div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
+          <div
+            class="lyrics-container"
+            ref="lyricsContainer"
+            v-show="!noLyric"
+            @scroll="blurEffect($event)"
+          >
            <div class="line" id="line-1"></div>
            <div
              class="line"
@ -270,6 +275,23 @@ export default {
      this.$parent.$refs.player.setProgress(value);
      this.$parent.$refs.player.player.seek(value);
    },
+    blurEffect(ev) {
+      ev.target.children.forEach((el) => {
+        const distanceToCenterPercentage =
+          Math.abs(
+            el.getBoundingClientRect().y +
+              el.clientHeight / 2 -
+              window.innerHeight / 2
+          ) /
+          (window.innerHeight / 2);
+        const functionedEffectValue =
+          1 - Math.sqrt(1 - Math.pow(distanceToCenterPercentage, 2));
+        el.style.setProperty(
+          "--func-val",
+          isNaN(functionedEffectValue) ? "" : functionedEffectValue.toFixed(2)
+        );
+      });
+    },
    setLyricsInterval() {
      this.lyricsInterval = setInterval(() => {
        const progress = this.player.seek() ?? 0;
@ -282,11 +304,36 @@ export default {
        });
        if (oldHighlightLyricIndex !== this.highlightLyricIndex) {
          const el = document.getElementById(`line${this.highlightLyricIndex}`);
-          if (el)
-            el.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
+          if (el) {
+            const duration = 500;
+            var start;
+            var animationProgress;
+            const oldY = el.parentNode.scrollTop;
+            const newY =
+              el.offsetTop - window.innerHeight / 2 + el.clientHeight / 2;
+            const distance = oldY - newY;
+            var animation = (timeStamp) => {
+              if (!start) {
+                start = timeStamp;
+              }
+              animationProgress = (timeStamp - start) / duration;
+              if (animationProgress < 1) {
+                el.parentNode.scrollTo(
+                  0,
+                  oldY -
+                    Math.sqrt(
+                      2 * animationProgress - Math.pow(animationProgress, 2)
+                    ) *
+                      distance
+                );
+                window.requestAnimationFrame(animation);
+              } else {
+                window.cancelAnimationFrame(animation);
+              }
+            };
+
+            window.requestAnimationFrame(animation);
+          }
        }
      }, 50);
    },
@ -316,6 +363,8 @@ export default {
 </script>

 <style lang="scss" scoped>
+$layoutBreakpoint: 1000px;
+
 .lyrics-page {
  position: fixed;
  top: 0;
@ -424,9 +473,28 @@ export default {
          height: 22px;
          width: 22px;
        }
+        @media (max-width: $layoutBreakpoint) {
+          button:nth-child(2) .svg-icon {
+            height: 48px;
+            width: 48px;
+          }
+          .svg-icon {
+            height: 36px;
+            width: 36px;
+          }
+        }
      }
    }
  }
+
+  @media (max-width: $layoutBreakpoint) {
+    .controls {
+      max-width: 100vw;
+      width: calc(100vw - 2 * var(--main-content-padding-x));
+      padding: var(--main-content-padding);
+      margin-top: 48px;
+    }
+  }
 }

 .cover {
@ -435,18 +503,31 @@ export default {
  .cover-container {
    position: relative;
  }
+
+  @media (max-width: $layoutBreakpoint) {
+    .cover-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
  img {
    border-radius: 0.75em;
-    width: 54vh;
-    height: 54vh;
+    width: 86vw;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
    user-select: none;
    object-fit: cover;
  }
  .shadow {
    position: absolute;
    top: 12px;
-    height: 54vh;
-    width: 54vh;
+    width: 86vw;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
    filter: blur(16px) opacity(0.6);
    transform: scale(0.92, 0.96);
    z-index: -1;
@ -469,13 +550,24 @@ export default {
    overflow-y: auto;
    transition: 0.5s;
    .line {
+      --func-val: 1;
      // margin-top: 38px;
      padding: 18px;
-      transition: 0.2s;
+      transition: background 0.2s, transform 0.5s cubic-bezier(0.2, 0, 0, 1);
      border-radius: 12px;
+      filter: blur(12px);
+      filter: blur(calc(var(--func-val) * 12px));
+      opacity: calc(1 - var(--func-val));
+      transform: scale(0.9) translate(-5%, 0);
      &:hover {
        background: var(--color-secondary-bg);
      }
+      &#line-1 {
+        pointer-events: none;
+      }
+      &.highlight {
+        transform: scale(1) translate(0, 0);
+      }
      span {
        opacity: 0.28;
        cursor: default;
@ -497,6 +589,12 @@ export default {
  }
 }

+@media (max-width: $layoutBreakpoint) {
+  .right-side {
+    display: none;
+  }
+}
+
 .close-button {
  position: fixed;
  top: 24px;
--- a/src/views/mv.vue
+++ b/src/views/mv.vue
@ -146,11 +146,13 @@ export default {
  background: transparent;
  overflow: hidden;
  max-height: 100vh;
+  margin: var(--main-content-padding);
 }

 .video-info {
  margin-top: 12px;
  color: var(--color-text);
+  padding: var(--main-content-padding);
  .title {
    font-size: 24px;
    font-weight: 600;
@ -175,6 +177,8 @@ export default {
    font-weight: 600;
    color: var(--color-text);
    opacity: 0.88;
+    padding: var(--main-content-padding);
+    margin-bottom: 8px;
  }
 }

--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@ -453,6 +453,7 @@ export default {
 .playlist-info {
  display: flex;
  margin-bottom: 72px;
+  padding: var(--main-content-padding);
  .info {
    display: flex;
    flex-direction: column;
@ -511,6 +512,28 @@ export default {
  }
 }

+@media (max-width: 600px) {
+  .playlist-info {
+    width: calc(100vw - 2 * var(--main-content-padding-x));
+    display: block;
+
+    .cover {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .info {
+      margin-top: 24px;
+      margin-left: 0;
+
+      .title {
+        font-size: 48px;
+      }
+    }
+  }
+}
+
 .special-playlist {
  margin-top: 192px;
  margin-bottom: 128px;
--- a/src/views/search.vue
+++ b/src/views/search.vue
@ -13,6 +13,7 @@
          :columnNumber="3"
          :items="artists.slice(0, 3)"
          gap="34px 24px"
+          :withoutPadding="true"
        />
      </div>

@ -30,6 +31,7 @@
          :columnNumber="3"
          subTextFontSize="14px"
          gap="34px 24px"
+          :withoutPadding="true"
        />
      </div>
    </div>
@ -41,7 +43,7 @@
          $t("home.seeMore")
        }}</router-link></div
      >
-      <TrackList :tracks="tracks" type="tracklist" />
+      <TrackList :tracks="tracks" type="tracklist" :withoutPadding="true" />
    </div>

    <div class="music-videos" v-show="musicVideos.length > 0">
@ -51,7 +53,7 @@
          $t("home.seeMore")
        }}</router-link></div
      >
-      <MvRow :mvs="musicVideos.slice(0, 5)" />
+      <MvRow :mvs="musicVideos.slice(0, 5)" :withoutPadding="true" />
    </div>

    <div class="playlists" v-show="playlists.length > 0">
@ -68,6 +70,7 @@
        :columnNumber="6"
        subTextFontSize="14px"
        gap="34px 24px"
+        :withoutPadding="true"
      />
    </div>

@ -215,6 +218,10 @@ export default {
 </script>

 <style lang="scss" scoped>
+.search {
+  padding: var(--main-content-padding);
+}
+
 .section-title {
  font-weight: 600;
  font-size: 22px;
--- a/src/views/searchType.vue
+++ b/src/views/searchType.vue
@ -140,6 +140,7 @@ export default {
 h1 {
  margin-top: -10px;
  margin-bottom: 28px;
+  padding: var(--main-content-padding);
  color: var(--color-text);
  span {
    opacity: 0.58;
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@ -393,6 +393,7 @@ export default {
 .settings {
  display: flex;
  justify-content: center;
+  padding: var(--main-content-padding);
 }
 .container {
  margin-top: 24px;