break down global.scss into smaller files

+ rename css folder to scss

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"
-          v-if="isPlaying && isCurrent"
-          :class="{ active: isPlaying, not_active: !isPlaying }"
+          class="now-playing-track-indicator image"
+          v-if="isCurrent"
+          :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;