minor color refactors

src/components/AlbumView/AlbumBio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="al-bio rounded border card-dark">
+  <div class="al-bio rounded border">
     <div class="left rounded border">
       <div class="rect rounded"></div>
       <div class="circle"></div>

src/components/AlbumView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded card-dark">
+    <div class="a-header rounded">
       <div class="info">
         <div class="top">
           <div class="h">Album</div>

src/components/AlbumsExplorer/AlbumList.vue

@@ -122,7 +122,6 @@ export default {
   padding: $small;
   margin-top: $small;
   overflow: hidden;
-  background-color: $card-dark;
 
   .all-albums {
     height: calc(100% - 4rem);

src/components/AlbumsExplorer/TopAlbums.vue

@@ -55,7 +55,6 @@ export default {
 .top-albums {
   height: 14rem;
   border-radius: $small;
-  background-color: $card-dark;
   padding: $small;
 
   .heading {

src/components/ArtistsExplorer/ArtistsList.vue

@@ -54,7 +54,6 @@ export default {
   padding: $small;
   margin-top: $small;
   overflow: hidden;
-  background-color: $card-dark;
 
   .all-albums {
     height: calc(100% - 4rem);

src/components/ArtistsExplorer/TopArtists.vue

@@ -50,7 +50,6 @@ export default {
 .top-artists {
   height: 14rem;
   border-radius: $small;
-  background-color: $card-dark;
   padding: $small;
 
   .heading {

src/components/BottomBar/BottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar border card-dark">
+  <div class="b-bar border">
     <div class="grid">
       <SongCard :collapsed="props.collapsed" />
       <div class="controlsx rounded">

src/components/FolderView/SongList.vue

@@ -91,7 +91,6 @@ function loadAlbum(title, albumartist) {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  background-color: $card-dark;
 
   &::-webkit-scrollbar {
     display: none;

src/components/PlaylistView/FeaturedArtists.vue

@@ -56,7 +56,6 @@ export default {
   position: relative;
   height: 15em;
   width: calc(100%);
-  background-color: $card-dark;
   padding: $small;
   border-radius: $small;
   user-select: none;

src/components/PlaylistView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-header rounded">
-    <div class="info card-dark">
+    <div class="info">
       <div>
         <div class="name">Makaveli Radio</div>
         <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>

src/components/RightSideBar/Home/Main.vue

@@ -7,7 +7,6 @@
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  background-color: $card-dark;
   padding: 0 $small $small 0;
 }
 </style>

src/components/RightSideBar/Main.vue

@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys card-dark border">
+      <div class="tab-keys border">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>

src/components/RightSideBar/Queue.vue

@@ -56,7 +56,6 @@ export default {
 
 <style lang="scss">
 .up-next {
-  background-color: $card-dark;
   padding: $small $small $small 0;
   overflow: hidden;
   height: 100%;
@@ -118,7 +117,7 @@ export default {
       height: 100%;
       padding: $small;
       overflow: auto;
-      background-color: $card-dark;
+      // background-color: $card-dark;
       scrollbar-color: grey transparent;
     }
   }

src/components/RightSideBar/Recommendation.vue

@@ -38,7 +38,6 @@ export default {
 <style lang="scss">
 .r-tracks {
   margin-top: 0.5rem;
-  background-color: $card-dark;
   padding: 0.5rem;
 }
 

src/components/shared/AlbumCard.vue

@@ -31,7 +31,6 @@ export default {
   padding: $small;
   border-radius: .75rem;
   text-align: left !important;
-  background-color: #726c7227;
 
   &:hover {
     background-color: #1b3688cb;
@@ -48,6 +47,7 @@ export default {
     width: 7rem;
     margin-bottom: 0.25rem;
     font-size: 0.9rem;
+    font-weight: bold;
   }
 
   .artistsx {

src/components/shared/ArtistCard.vue

@@ -34,13 +34,12 @@ export default {
   .artist-image {
     width: 7em;
     height: 7em;
-    border-radius: 50%;
+    border: solid;
+    border-radius: 60%;
     margin-bottom: $small;
     background-size: 7rem 7rem;
-    background: url("../../assets/images/null.webp");
-    background-size: 100% 100%;
+    background-position: center;
     background-repeat: no-repeat;
-    background-position: top;
     transition: all 0.5s ease-in-out;
     border: solid 1px rgba(5, 5, 5, 0.055);
     box-shadow: 0 0 80px rgb(0, 0, 0);