client: migrate to solid dark mode

src/assets/css/_variables.scss

@@ -1,6 +1,6 @@
 // colors
 
-$card-dark: #131313b2;
+$card-dark: #000203;
 $red: #df4646;
 $blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);

src/assets/css/global.scss

@@ -20,7 +20,6 @@ body {
 .heading {
   font-size: small;
   font-weight: bold;
-  color: #ffffffb2;
   display: flex;
   align-items: center;
 }
@@ -84,7 +83,7 @@ a {
   padding-top: 0.5rem;
   margin: 0.5rem 0 0.5rem 0.5rem;
   border-radius: 0.5rem;
-  background-color: #131313b2;
+  background-color: $card-dark;
 }
 
 .collapsed .l-sidebar {
@@ -129,11 +128,11 @@ a {
   margin-bottom: 0.5em;
 }
 
-@media (max-width: 70em) {
-  .r-sidebar {
-    display: none;
-  }
-}
+// @media (max-width: 70em) {
+//   .r-sidebar {
+//     display: none;
+//   }
+// }
 
 .image {
   background-position: center;
@@ -220,3 +219,23 @@ a {
     background-position: 0% 38%;
   }
 }
+
+.now-playing-track {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  background-color: #fff;
+  margin-top: 0rem;
+  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;
+
+}