remove pagination

src/components/AlbumView/Header.vue

@@ -44,6 +44,22 @@ export default {
 .a-header {
   height: 14rem;
   background: rgb(0, 0, 0);
+  background: #355c7d; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #c06c84,
+    #6c5b7b,
+    #355c7d
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #c06c84,
+    #6c5b7b,
+    #355c7d
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+  background-position: 50% 10%;
+
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;

src/components/AlbumsExplorer/AlbumList.vue

@@ -6,6 +6,7 @@
         <input type="search" placeholder="Search albums" />
       </div>
     </div>
+    <div class="separator"></div>
     <div class="all-albums">
       <router-link
         :to="{ path: '/albums/1' }"
@@ -125,7 +126,6 @@ export default {
 
   .all-albums {
     height: calc(100% - 4rem);
-    border-top: 1px solid $separator;
     padding: $small 0 0 0;
     overflow-y: auto;
 

src/components/AlbumsExplorer/TopAlbums.vue

@@ -101,7 +101,7 @@ export default {
 
       .info .top {
         height: 2.5rem;
-        background-color: rgb(51, 129, 20);
+        background-color: $blue;
         border-radius: $small;
         margin-left: auto;
         display: grid;
@@ -126,7 +126,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgb(0, 134, 89);
+          background-color: rgb(0, 45, 104);
           transition: all 0.2s ease-in-out;
 
           .play-icon {

src/components/FolderView/FolderList.vue

@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  props: ["folders"]
+  props: ["folders"],
 };
 </script>
 
@@ -66,6 +66,7 @@ export default {
   background-position: 1rem;
   background-size: 10% 100%;
   background-color: rgba(80, 80, 80, 0.247);
+  transition: all 0.2s ease;
 
   .f-item-count {
     position: absolute;
@@ -83,6 +84,11 @@ export default {
 }
 
 .f-container .f-item:hover {
-  background-color: rgba(0, 0, 0, 0.527);
+  transition: all 0.2s ease;
+  background: #000000; /* fallback for old browsers */
+  background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
+    -webkit-linear-gradient(to bottom, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
+  background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
+    linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -72,8 +72,6 @@ export default {
 };
 </script>
 
-
-
 <style lang="scss">
 .side-nav-container .in {
   display: flex;

src/components/LeftSidebar/PinnedStuff.vue

@@ -62,7 +62,18 @@ export default {
 
 <style lang="scss">
 #pinned-container {
-  background-color: rgb(0, 0, 0);
+  background: #000000; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to bottom,
+    #434343,
+    #000000
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to bottom,
+    #434343,
+    #000000
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
   border-top: none;
   margin: $small;
   padding: $small;

src/components/RightSideBar/NowPlaying.vue

@@ -24,8 +24,7 @@
         type="range"
         :value="pos"
         min="0"
-        max="100"
-        step="1"
+        max="1000"
         @change="seek()"
       />
     </div>
@@ -85,7 +84,7 @@ export default {
       pos,
       seek,
       isPlaying,
-      fmtMSS
+      fmtMSS,
     };
   },
 };
@@ -97,7 +96,14 @@ export default {
   height: 14rem;
   margin-top: 1rem;
   padding: 0.5rem;
-  background-color: rgb(0, 0, 0);
+  background: rgb(14, 14, 14);
+  background: linear-gradient(
+    326deg,
+    rgb(0, 0, 0) 0%,
+    rgb(10, 10, 10) 13%,
+    rgba(0, 0, 0, 1) 43%,
+    rgba(0, 0, 0, 1) 100%
+  );
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -130,7 +136,17 @@ export default {
       width: 100%;
       height: 0.25rem;
       cursor: pointer;
-      background: #3071a9;
+      background: #1488cc; /* fallback for old browsers */
+      background: -webkit-linear-gradient(
+        to right,
+        #1488cc,
+        #2b32b2
+      ); /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(
+        to right,
+        #1488cc,
+        #2b32b2
+      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     }
 
     input::-webkit-slider-thumb {
@@ -255,12 +271,13 @@ export default {
 
     #title {
       margin: 0;
-      width: 13rem;
+      width: 22rem;
       color: #fff;
     }
 
     #artist {
       font-size: small;
+      width: 22rem;
       color: rgba(255, 255, 255, 0.712);
     }
 

src/components/RightSideBar/Search.vue

@@ -3,7 +3,7 @@
     <input
       type="search"
       id="search"
-      placeholder="Michael Jackson"
+      placeholder="find your music"
       v-model="query"
     />
     <div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
@@ -96,6 +96,9 @@ export default {
 </script>
 
 <style>
+.right-search {
+  z-index: 10;
+}
 .right-search .v0 {
   max-height: 0em;
   transition: max-height 0.5s ease;