break down global.scss into smaller files

+ rename css folder to scss

src/App.vue

@@ -2,7 +2,7 @@
   <ContextMenu />
   <Modal />
   <Notification />
-  <div class="l-container">
+  <div id="app-grid">
     <div class="l-sidebar rounded">
       <Logo />
       <Navigation />
@@ -21,24 +21,24 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter, useRoute, RouteLocationNormalized } from "vue-router";
 import { onStartTyping } from "@vueuse/core";
+import { RouteLocationNormalized, useRoute, useRouter } from "vue-router";
 
-import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import RightSideBar from "@/components/RightSideBar/Main.vue";
-import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
-import NavBar from "@/components/nav/NavBar.vue";
-import Tabs from "@/components/RightSideBar/Tabs.vue";
-import SearchInput from "@/components/RightSideBar/SearchInput.vue";
-import useContextStore from "@/stores/context";
 import ContextMenu from "@/components/contextMenu.vue";
-import Modal from "@/components/modal.vue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import Notification from "@/components/Notification.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
-import useQStore from "@/stores/queue";
 import Logo from "@/components/Logo.vue";
+import Modal from "@/components/modal.vue";
+import NavBar from "@/components/nav/NavBar.vue";
+import Notification from "@/components/Notification.vue";
+import RightSideBar from "@/components/RightSideBar/Main.vue";
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+import Tabs from "@/components/RightSideBar/Tabs.vue";
+import useContextStore from "@/stores/context";
+import useQStore from "@/stores/queue";
 
-import useShortcuts from "@/composables/useKeyboard";
 import { isSameRoute } from "@/composables/perks";
+import useShortcuts from "@/composables/useKeyboard";
 
 const context_store = useContextStore();
 const queue = useQStore();
@@ -78,7 +78,7 @@ onStartTyping(() => {
 </script>
 
 <style lang="scss">
-@import "./assets/css/mixins.scss";
+@import "./assets/scss/mixins.scss";
 
 .l-sidebar {
   position: relative;

src/assets/css/global.scss

@@ -1,380 +0,0 @@
-@import "../css/ProgressBar.scss";
-@import "mixins.scss";
-
-:root {
-  --separator: #ffffff46;
-  --green: #4ad168;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background-color: $body;
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  overflow: hidden;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-.heading {
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.t-center {
-  text-align: center;
-}
-
-.h-1:hover {
-  background-color: #3a39393d;
-}
-
-a {
-  text-decoration: none;
-  color: #fff;
-}
-
-.border {
-  background-color: $black;
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
-}
-
-.separator {
-  border-top: 0.1px $separator solid;
-  color: transparent;
-  margin: $small 0 $small 0;
-}
-
-.no-border {
-  border: none;
-}
-
-.noscroll {
-  overflow: hidden;
-}
-
-.abs {
-  position: absolute;
-}
-
-.pad-small {
-  padding: $small;
-}
-
-.pad-medium {
-  padding: $medium;
-}
-
-.pad-large {
-  padding: 1rem;
-}
-
-.grid {
-  display: grid;
-}
-
-.card-dark {
-  background-color: #fff;
-}
-
-.hidden {
-  display: none;
-}
-
-input[type="search"] {
-  height: 2.25rem !important;
-}
-
-.l-container {
-  display: grid;
-  grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: max-content 1fr max-content;
-  grid-template-areas:
-    "l-sidebar nav search-input"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content tabs";
-  align-content: center;
-  max-width: 2720px;
-  height: calc(100vh - 1rem);
-  margin: 0 auto;
-  gap: 1rem;
-  margin: $small;
-}
-
-#tabs {
-  grid-area: tabs;
-  height: 3.5rem;
-  margin-top: -$small;
-}
-
-#acontent {
-  grid-area: content;
-  max-width: 1955px;
-  overflow: hidden auto;
-  margin-top: -$small;
-
-  .nav {
-    margin: $small;
-    width: calc(100% - 1rem);
-  }
-}
-
-.tabs {
-  grid-area: tabs;
-
-  @include tablet-landscape {
-    display: none;
-  }
-}
-
-#gsearch-input {
-  grid-area: search-input;
-}
-
-.topnav {
-  grid-area: nav;
-}
-
-.l-sidebar {
-  width: 17rem;
-  grid-area: l-sidebar;
-  background-color: $black;
-  padding: 1rem;
-}
-
-.bottom-bar {
-  grid-area: bottom-bar;
-  height: 4rem;
-}
-
-.ellip {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rounded {
-  border-radius: $small;
-}
-
-.circular {
-  border-radius: 20px;
-}
-
-.flex {
-  display: flex;
-}
-
-.r-sidebar {
-  grid-area: r-sidebar;
-  margin-top: -$small;
-  width: 29rem;
-}
-
-.image {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  transition: transform 0.3s ease-in-out;
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.shadow-sm {
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
-}
-
-.shadow-md {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
-}
-
-.shadow-lg {
-  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
-}
-
-/* scrollbars */
-
-/* width */
-
-::-webkit-scrollbar {
-  width: 3px;
-}
-
-/* Track */
-
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 1rem;
-}
-
-/* Handle */
-
-::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.322);
-  border-radius: 1rem;
-}
-
-/* Handle on hover */
-
-::-webkit-scrollbar-thumb:hover {
-  background: $blue;
-}
-
-@-webkit-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-@-moz-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-@-o-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-
-@keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-
-.now-playing-track {
-  height: 2rem;
-  width: 2rem;
-  border-radius: 50%;
-  background-color: #fff;
-  margin-top: 0;
-  background-size: 60%;
-}
-
-.active {
-  background-image: url(../../assets/icons/playing.gif);
-  transition: all 0.3s ease-in-out;
-}
-
-.not_active {
-  background-image: url(../../assets/icons/playing.webp);
-  transition: all 0.3s ease-in-out;
-}
-
-.item {
-  position: relative;
-  background-color: rgba(34, 33, 33, 0.637);
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  margin: 0 $small 0 0;
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-  color: rgb(250, 250, 250);
-
-  &:hover {
-    background-color: $pink;
-  }
-}
-
-input[type="number"] {
-  width: 40px;
-  padding: 4px 5px;
-  border: 1px solid #bbb;
-  border-radius: 3px;
-}
-
-.controls {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-
-  .shuffle {
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    & * {
-      height: 2rem;
-      width: 2rem;
-      background-size: 70%;
-      cursor: pointer;
-      border-radius: 0.5rem;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
-    & :first-child {
-      background-image: url(../../assets/icons/repeat.svg);
-    }
-
-    & :last-child {
-      background-image: url(../../assets/icons/shuffle.svg);
-    }
-  }
-
-  .fav {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    & * {
-      height: 2rem;
-      width: 2rem;
-      background-size: 70%;
-      border-radius: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
-    & :first-child {
-      background-image: url(../../assets/icons/plus.svg);
-    }
-
-    & :last-child {
-      background-image: url(../../assets/icons/heart.svg);
-    }
-  }
-}

src/assets/css/moz.scss

@@ -1,16 +0,0 @@
-// Styles that only apply on our dear Firefox 
-
-@-moz-document url-prefix() {
-  #acontent {
-    padding-right: 1rem !important;
-  }
-
-  #ap-page {
-    width: 100% !important;
-    padding-right: 1rem !important;
-  }
-
-  .ap-page-bottom-container {
-    width: calc(100% - 1rem) !important;
-  }
-}

src/assets/scss/Global/app-grid.scss

@@ -0,0 +1,64 @@
+#app-grid {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: max-content 1fr max-content;
+  grid-template-areas:
+    "l-sidebar nav search-input"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content tabs";
+  align-content: center;
+  max-width: 2720px;
+  height: calc(100vh - 1rem);
+  margin: 0 auto;
+  gap: 1rem;
+  margin: $small;
+}
+
+#acontent {
+  grid-area: content;
+  max-width: 1955px;
+  overflow: hidden auto;
+  margin-top: -$small;
+
+  .nav {
+    margin: $small;
+    width: calc(100% - 1rem);
+  }
+}
+
+#tabs {
+  grid-area: tabs;
+  height: 3.5rem;
+  margin-top: -$small;
+
+  @include tablet-landscape {
+    display: none;
+  }
+}
+
+.r-sidebar {
+  grid-area: r-sidebar;
+  margin-top: -$small;
+  width: 29rem;
+}
+
+#gsearch-input {
+  grid-area: search-input;
+}
+
+.topnav {
+  grid-area: nav;
+}
+
+.l-sidebar {
+  width: 17rem;
+  grid-area: l-sidebar;
+  background-color: $black;
+  padding: 1rem;
+}
+
+.bottom-bar {
+  grid-area: bottom-bar;
+  height: 4rem;
+}

src/assets/scss/Global/basic.scss

@@ -0,0 +1,77 @@
+.t-center {
+  text-align: center;
+}
+
+.image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellip {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rounded {
+  border-radius: $small;
+}
+
+.circular {
+  border-radius: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.bg-black {
+  background-color: $black;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+}
+
+.heading {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.separator {
+  border-top: 0.1px $separator solid;
+  color: transparent;
+  margin: $small 0 $small 0;
+}
+
+.no-border {
+  border: none;
+}
+
+.noscroll {
+  overflow: hidden;
+}
+
+.abs {
+  position: absolute;
+}
+
+.grid {
+  display: grid;
+}
+
+.card-dark {
+  background-color: #fff;
+}

src/assets/scss/Global/controls.scss

@@ -0,0 +1,57 @@
+.controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .shuffle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/repeat.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/shuffle.svg);
+    }
+  }
+
+  .fav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      border-radius: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/plus.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/heart.svg);
+    }
+  }
+}

src/assets/scss/Global/index.scss

@@ -0,0 +1,28 @@
+@import
+"./app-grid.scss",
+"./controls.scss",
+"./inputs.scss",
+"./scrollbars.scss",
+"./state.scss",
+"./variants.scss",
+"./basic.scss";
+
+:root {
+  --separator: #ffffff46;
+  --green: #4ad168;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: $body;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  overflow: hidden;
+  image-rendering: -webkit-optimize-contrast;
+}

src/assets/scss/Global/inputs.scss

@@ -0,0 +1,10 @@
+input[type="number"] {
+  width: 40px;
+  padding: 4px 5px;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+}
+
+input[type="search"] {
+  height: 2.25rem !important;
+}

src/assets/scss/Global/scrollbars.scss

@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 1rem;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.322);
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+  background: $blue;
+}

src/assets/scss/Global/state.scss

@@ -0,0 +1,19 @@
+
+.now-playing-track-indicator {
+  background-image: url(../../assets/icons/playing.gif);
+  transition: all 0.3s ease-in-out;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  background-color: $white;
+  background-size: 1.5rem !important;
+}
+
+.last_played {
+  background-image: url(../../assets/icons/playing.webp);
+  transition: all 0.3s ease-in-out;
+}
+
+.hidden {
+  display: none;
+}

src/assets/scss/Global/variants.scss

@@ -0,0 +1,25 @@
+// paddings
+.pad-small {
+  padding: $small;
+}
+
+.pad-medium {
+  padding: $medium;
+}
+
+.pad-large {
+  padding: 1rem;
+}
+
+// shadows
+.shadow-sm {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
+}
+
+.shadow-md {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
+}

src/assets/scss/index.scss

@@ -0,0 +1,8 @@
+@import
+"./mixins.scss",
+"./variables",
+"./moz.scss",
+"./ProgressBar.scss",
+"./BottomBar/BottomBar.scss",
+"./Global"
+;

src/assets/scss/moz.scss

@@ -0,0 +1,5 @@
+// Styles that only apply on our dear Firefox 
+
+// @-moz-document url-prefix() {
+
+// }

src/components/AlbumView/AlbumBio.vue

@@ -11,8 +11,8 @@
         <div class="circle"></div>
         <img class="circle" :src="paths.images.artist + images.artist" alt="" />
       </div>
-      <div class="bio rounded border" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
-      <div class="bio rounded border" v-else>No bio found</div>
+      <div class="bio rounded bg-black" v-else>No bio found</div>
     </div>
   </div>
 </template>
@@ -54,7 +54,7 @@ defineProps<{
     width: 100%;
     margin-right: $small;
     overflow: hidden;
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     background-image: linear-gradient(37deg, $gray5 20%, $gray4);
 
     @include tablet-portrait {
@@ -89,7 +89,7 @@ defineProps<{
       height: 7rem;
       bottom: 0;
       left: calc($rectpos + 7rem);
-      border-radius: 50%;
+      bg-black-radius: 50%;
       box-shadow: 0 0 2rem rgb(0, 0, 0);
       transition: all 0.25s ease-in-out;
 
@@ -99,7 +99,7 @@ defineProps<{
     }
   }
   .bio {
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     padding: $small;
     line-height: 1.5rem;
 

src/components/ArtistsExplorer/ArtistsList.vue

@@ -9,7 +9,7 @@
     <div class="all-albums">
       <div class="item rounded" v-for="artist in artists" :key="artist">
         <div class="album-art image rounded"></div>
-        <div class="name ellip">{{ artist.name }}</div>
+        <div class="name t-center ellip">{{ artist.name }}</div>
       </div>
     </div>
   </div>
@@ -84,16 +84,8 @@ export default {
       }
 
       .name {
-        text-align: center;
         margin-top: $small;
       }
-
-      .artist {
-        font-size: small;
-        font-weight: lighter;
-        text-align: center;
-        color: rgba(255, 255, 255, 0.699);
-      }
     }
   }
 

src/components/ArtistsExplorer/TopArtists.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script >
 export default {
   setup() {
     const artists = [

src/components/BottomBar/BottomBar.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import "@/assets/css/BottomBar/BottomBar.scss";
+import "@/assets/scss/BottomBar/BottomBar.scss";
-import Progress from "../LeftSidebar/NP/Progress.vue";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import { formatSeconds } from "@/composables/perks";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import useQStore from "@/stores/queue";
 

src/components/LeftSidebar/nowPlaying.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l_ rounded">
+  <div class="r-now-playing t-center rounded">
     <div class="headin">Now Playing</div>
     <div
       class="button menu rounded"
@@ -56,10 +56,9 @@ const showContextMenu = (e: Event) => {
 };
 </script>
 <style lang="scss">
-.l_ {
+.r-now-playing {
   padding: 1rem;
   background-color: $primary;
-  text-align: center;
   width: 100%;
   display: grid;
   position: relative;

src/components/Logo.vue

@@ -8,7 +8,7 @@
 </template>
 
 <style lang="scss">
-@import "../assets/css/mixins.scss";
+@import "../assets/scss/mixins.scss";
 
 #logo-container {
   overflow: hidden;

src/components/RightSideBar/Home/Main.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import Recommendations from "./Recommendation.vue";
-import UpNext from "../queue/upNext.vue";
+import UpNext from "../Queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();
 </script>

src/components/RightSideBar/Home/Recommendation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-tracks rounded border">
+  <div class="r-tracks rounded bg-black">
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">

src/components/RightSideBar/NowPlaying.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="now-playing border shadow-lg">
+  <div class="now-playing bg-black shadow-lg">
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
           :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image border"
+          class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
-        <div class="separator no-border"></div>
+        <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
               artist

src/components/RightSideBar/Queue.vue

@@ -2,7 +2,18 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
-      <div class="scrollable-r border rounded">
+      <div class="queue-actions rounded bg-black">
+        <div class="left">
+          <button class="clear-queue action">Clear</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Go to Mix</button>
+        </div>
+        <div class="right">
+          <button class="shuffle-queue action">Save as Playlist</button>
+        </div>
+      </div>
+      <div class="scrollable-r bg-black rounded">
         <div
           class="inner"
           @mouseenter="setMouseOver(true)"
@@ -25,9 +36,9 @@
 
 <script setup lang="ts">
 import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "../../stores/queue";
+import useQStore from "@/stores/queue";
-import PlayingFrom from "./queue/playingFrom.vue";
+import PlayingFrom from "./Queue/playingFrom.vue";
-import UpNext from "./queue/upNext.vue";
+import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
 import { focusElem } from "@/composables/perks";
 
@@ -59,9 +70,24 @@ onUpdated(() => {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content 1fr max-content;
+    grid-template-rows: max-content max-content 1fr max-content;
     gap: $small;
 
+    .queue-actions {
+      display: flex;
+      justify-content: space-between;
+      gap: $small;
+      padding: $small;
+
+      .action {
+        background-color: $accent;
+        padding: $smaller;
+        border-radius: $smaller;
+        font-size: 0.8rem;
+        padding: inherit 1rem;
+      }
+    }
+
     .scrollable-r {
       height: 100%;
       padding: $small 0 $small $small;

src/components/RightSideBar/Queue/playingFrom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="playing-from" class="rounded" @click="goTo">
+  <div id="playing-from" class="bg-black rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
       Playing from
@@ -18,8 +18,8 @@ import {
   fromAlbum,
   fromPlaylist,
   fromSearch,
-} from "../../../interfaces";
+} from "@/interfaces";
-import { FromOptions } from "../../../composables/enums";
+import { FromOptions } from "@/composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 

src/components/RightSideBar/Queue/upNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-item border" @click="playNext">
+  <div class="main-item bg-black" @click="playNext">
     <div class="h">Up Next</div>
     <div class="itemx shadow">
       <div
@@ -22,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { Track } from "../../../interfaces";
+import { putCommas } from "@/composables/perks";
-import {putCommas} from "../../../composables/perks";
+import { paths } from "@/config";
-import { paths } from "../../../config";
+import { Track } from "@/interfaces";
-const imguri = paths.images.thumb;
 
-const props = defineProps<{
+const imguri = paths.images.thumb;
+defineProps<{
   next: Track;
   playNext: () => void;
 }>();

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results border">
+  <div class="artists-results bg-black">
     <div class="grid">
       <ArtistCard
         v-for="artist in search.artists.value"
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 const search = useSearchStore();
 
 function loadMore() {

src/components/RightSideBar/Search/Main.vue

@@ -15,13 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import TabsWrapper from "./TabsWrapper.vue";
-import Tab from "./Tab.vue";
-import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
-import "@/assets/css/Search/Search.scss";
+import Tab from "./Tab.vue";
-
+import TabsWrapper from "./TabsWrapper.vue";
+import TracksGrid from "./TracksGrid.vue";
 </script>
 
 <style lang="scss">
@@ -31,21 +29,6 @@ import "@/assets/css/Search/Search.scss";
   width: auto;
   height: 100%;
 
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
   .heading {
     padding: $medium;
     border-radius: $small;

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results bg-black">
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
@@ -12,9 +12,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import PCard from "../../playlists/PlaylistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 
 const search = useSearchStore();
 

src/components/shared/ArtistCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
     <div
-      class="artist-image image border-sm"
+      class="artist-image image bg-black-sm"
       :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
     ></div>
     <div>
-      <p class="artist-name ellipsis">{{ artist.name }}</p>
+      <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
   </div>
 </template>
@@ -59,7 +59,6 @@ defineProps<{
 
   .artist-name {
     margin: 0;
-    text-align: center;
     font-size: 0.9rem;
     font-weight: 510;
     max-width: 7rem;

src/components/shared/SongItem.vue

@@ -12,7 +12,7 @@
     @dblclick="emitUpdate(track)"
     @contextmenu="showContextMenu"
   >
-    <div class="index">{{ index }}</div>
+    <div class="index t-center">{{ index }}</div>
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
         <img
@@ -21,9 +21,9 @@
           class="album-art image rounded"
         />
         <div
-          class="now-playing-track image"
+          class="now-playing-track-indicator image"
-          v-if="isPlaying && isCurrent"
+          v-if="isCurrent"
-          :class="{ active: isPlaying, not_active: !isPlaying }"
+          :class="{ last_played: !isPlaying }"
         ></div>
       </div>
       <div @click="emitUpdate(track)">
@@ -186,7 +186,6 @@ function emitUpdate(track: Track) {
   .index {
     color: grey;
     font-size: 0.8rem;
-    text-align: center;
     width: 2rem;
 
     @include phone-only {
@@ -245,7 +244,7 @@ function emitUpdate(track: Track) {
       cursor: pointer;
     }
 
-    .now-playing-track {
+    .now-playing-track-indicator {
       position: absolute;
       left: $small;
       top: $small;

src/components/shared/TrackItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="track-item h-1"
+    class="track-item"
     @click="playThis(props.track)"
     :class="[
       {
@@ -17,9 +17,9 @@
       }"
     >
       <div
-        class="now-playing-track image"
+        class="now-playing-track-indicator image"
         v-if="props.isCurrent"
-        :class="{ active: props.isPlaying, not_active: !props.isPlaying }"
+        :class="{ last_played: !props.isPlaying }"
       ></div>
     </div>
     <div class="tags">
@@ -36,15 +36,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { ContextSrc } from "../../composables/enums";
 import { putCommas } from "../../composables/perks";
 import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces";
-import { ContextSrc } from "../../composables/enums";
 
+import { paths } from "../../config";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
-import { paths } from "../../config";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;

src/layouts/HeaderContentBottom.vue

@@ -101,7 +101,6 @@ function toggleBottom() {
 .ap-container {
   height: 100%;
   position: relative;
-  width: calc(100% + 1rem);
 
   #ap-page {
     overflow: auto;
@@ -110,8 +109,6 @@ function toggleBottom() {
     display: grid;
     grid-template-rows: 18rem 1fr;
     gap: 1rem;
-    padding-right: $small;
-    width: calc(100% - $small);
 
     .ap-page-content {
       padding-bottom: 16rem;
@@ -122,7 +119,7 @@ function toggleBottom() {
     position: absolute;
     bottom: 0;
     height: 15rem;
-    width: calc(100% - 1.25rem);
+    width: 100%;
     background-color: $gray;
     transition: all 0.5s ease !important;
     overscroll-behavior: contain;

src/main.js

@@ -1,5 +1,5 @@
+import "./assets/scss/index.scss";
 import "./registerServiceWorker";
-import "../src/assets/css/global.scss";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home t-center">
     <home />
   </div>
 </template>
@@ -10,6 +10,5 @@ import Home from "@/components/Home.vue";
 <style>
 .home {
   padding-left: 20px;
-  text-align: center;
 }
 </style>

vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "@/assets/css/_variables.scss";`,
+        additionalData: `@import "@/assets/scss/_variables.scss";`,
       },
     },
   },