show plain background if playlist has no banner image

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

@@ -55,6 +55,8 @@
   grid-area: content;
   max-width: 1955px;
   overflow: hidden scroll;
+  margin-right: -1rem;
+  padding-right: calc($medium - 1px);
 
   .nav {
     margin: $small;

src/assets/scss/Global/index.scss

@@ -12,7 +12,7 @@
 
 body {
   background-color: $body;
-  color: #fff;
+  color: $white;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-family: "SFCompactDisplay" !important;

src/assets/scss/Global/scrollbars.scss

@@ -1,5 +1,5 @@
 ::-webkit-scrollbar {
-  width: 3px;
+  width: $smaller;
 }
 
 /* Track */
@@ -12,7 +12,7 @@
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.322);
+  background: $gray1;
   border-radius: 1rem;
 }
 

src/assets/scss/index.scss

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

src/assets/scss/moz.scss

@@ -1,5 +1,8 @@
-// Styles that only apply on our dear Firefox 
+// Styles that only apply on our dear Firefox
 
-// @-moz-document url-prefix() {
+@-moz-document url-prefix() {
-
+  #acontent {
-// }
+    margin-right: -1rem;
+    padding-right: 1rem;
+  }
+}

src/components/LeftSidebar/Navigation.vue

@@ -101,10 +101,7 @@ const menus = [
     margin: 0 $small 0 $small;
     border-radius: $small;
     transform: scale(0.9);
-  }
+    opacity: .75;
-
-  svg > path {
-    fill: $accent;
   }
 }
 </style>

src/components/PlaylistView/Header.vue

@@ -4,11 +4,12 @@
     ref="playlistheader"
     :style="[
       {
-        backgroundImage: `url(${imguri + info.image})`,
+        backgroundImage: info.image ? `url(${imguri + info.image})` : '',
       },
     ]"
+    :class="{ border: !info.image }"
   >
-    <div class="gradient"></div>
+    <div class="gradient" v-if="info.image"></div>
     <div class="carddd">
       <div class="info">
         <div class="btns">
@@ -76,8 +77,7 @@ function showDropdown(e: any) {
   grid-template-columns: 1fr;
   height: 100%;
   position: relative;
-  color: $white;
+
-  background-color: transparent;
 
   .gradient {
     position: absolute;

src/components/modals/NewPlaylist.vue

@@ -96,20 +96,5 @@ function create(e: Event) {
     margin: 0 auto;
     width: 6rem;
   }
-
-  // input[type="submit"] {
-  //   margin: $small 0;
-  //   background-color: rgba(40, 132, 252, 0.884) !important;
-  //   color: $white;
-  //   padding: $small 1rem;
-  //   font-size: 1rem;
-  //   border: solid 2px transparent !important;
-  //   outline: none;
-  //   cursor: pointer;
-
-  //   &:focus {
-  //     border: 2px solid $gray1 !important;
-  //   }
-  // }
 }
 </style>