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

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>

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,

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;

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 {

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>

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;

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>

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);

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 {

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;

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;

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;

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;

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 {

src/views/loginUsername.vue

@@ -106,6 +106,7 @@ export default {
 .login {
   display: flex;
   color: var(--color-text);
+  padding: var(--main-content-padding);
 }
 
 .title {

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)
+          if (el) {
-            el.scrollIntoView({
+            const duration = 500;
-              behavior: "smooth",
+            var start;
-              block: "center",
+            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,7 +473,26 @@ 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;
     }
   }
 }
@@ -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;
+    width: 86vw;
-    height: 54vh;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
     user-select: none;
     object-fit: cover;
   }
   .shadow {
     position: absolute;
     top: 12px;
-    height: 54vh;
+    width: 86vw;
-    width: 54vh;
+    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;

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;
   }
 }
 

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;

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;

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;

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;