Merge branch 'master' into try-folder-banner

~ Merge component spacing edits to the try-folder-banner branch

src/assets/css/BottomBar/BottomBar.scss

@@ -4,7 +4,6 @@
 
   .grid {
     background-color: $primary;
-    display: grid;
     height: 100%;
     padding-right: $small;
 

src/assets/css/global.scss

@@ -1,5 +1,6 @@
 @import "../css/ProgressBar.scss";
 @import "mixins.scss";
+// @import "./moz.scss";
 
 :root {
   --separator: #ffffff46;
@@ -86,26 +87,47 @@ a {
   display: none;
 }
 
+input[type="search"] {
+  height: 2.25rem !important;
+}
+
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 3.5rem 1fr 1fr;
-  grid-auto-flow: row;
+  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";
-  width: 100%;
   align-content: center;
   max-width: 2720px;
-  height: 100vh;
+  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;
-  border-left: solid 1px $gray3;
 
   @include tablet-landscape {
     display: none;
@@ -124,7 +146,6 @@ a {
   width: 17rem;
   grid-area: l-sidebar;
   background-color: $black;
-  margin: $small;
   padding: 1rem;
 }
 
@@ -153,24 +174,10 @@ a {
   display: flex;
 }
 
-#acontent {
-  grid-area: content;
-  width: 100%;
-  max-width: 1955px;
-  padding: $small;
-  padding-left: 0;
-  overflow: auto;
-  margin: 0 auto;
-
-  .nav {
-    margin: $small;
-    width: calc(100% - 1rem);
-  }
-}
-
 .r-sidebar {
   grid-area: r-sidebar;
-  border-left: solid 1px $gray3;
+  margin-top: -$small;
+  width: 29rem;
 }
 
 .image {
@@ -203,13 +210,13 @@ a {
 /* width */
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 3px;
 }
 
 /* Track */
 
 ::-webkit-scrollbar-track {
-  background: rgba(51, 51, 51, 0.459);
+  background: transparent;
   border-radius: 1rem;
 }
 
@@ -259,6 +266,7 @@ a {
     background-position: 0 38%;
   }
 }
+
 @keyframes similarAlbums {
   0% {
     background-position: 0 38%;

src/assets/css/moz.scss

@@ -0,0 +1,16 @@
+// 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/images/noise-texture.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1600"
+   height="900"
+   viewBox="0 0 1600 900"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="noise-texture.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata17">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="0.26222222"
+     inkscape:cx="28.104465"
+     inkscape:cy="117.7106"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg13" />
+  <defs
+     id="defs9">
+    <radialGradient
+       id="a"
+       gradientTransform="matrix(1 1 -1 1 0.5 -0.5)">
+      <stop
+         stop-color="#455A64"
+         stop-opacity="0"
+         offset="0.25"
+         id="stop2"
+         style="stop-color:#222222;stop-opacity:0" />
+      <stop
+         stop-color="#455A64"
+         stop-opacity="0.5"
+         offset="0.75"
+         id="stop4"
+         style="stop-color:#222222;stop-opacity:0.50196081" />
+      <stop
+         stop-color="#455A64"
+         stop-opacity="1"
+         offset="1"
+         id="stop6"
+         style="stop-color:#222222;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  <rect
+     width="1600"
+     height="900"
+     fill="url(#a)"
+     id="rect11" />
+</svg>