refactor(player): improve styling

Author: Garrett Downs

public/global.css

@@ -27,6 +27,7 @@
   --default-a: 1;
   --primary-text-a: 0.88;
   --secondary-text-a: 0.5;
+  --tertiary-text-a: 0.3;
 
   --app-bg-color: hsla(0, 0%, 0%, 1);
   --app-text-color: hsla(0, 0%, 100%, 0.88);
@@ -43,6 +44,12 @@
     var(--text-color-l),
     var(--secondary-text-a)
   );
+  --tertiary-text-color: hsla(
+    var(--text-color-h),
+    var(--text-color-s),
+    var(--text-color-l),
+    var(--tertiary-text-a)
+  );
   --divider-color: hsla(
     var(--text-color-h),
     var(--text-color-s),

src/components/Waveform.svelte

@@ -16,7 +16,9 @@
 <style>
   .root {
     position: relative;
-    background-color: var(--focus-color);
+    background-color: var(--tertiary-text-color);
+    margin: 5px 0;
+    overflow: hidden;
   }
 
   .root > .progress {
@@ -39,5 +41,6 @@
   }
   .root > .image > img {
     width: 100%;
+    filter: brightness(10);
   }
 </style>

src/routes/Player.svelte

@@ -128,6 +128,7 @@
     justify-content: space-between;
     font-weight: 600;
     color: var(--accent-color);
+    padding: 0 5px;
   }
 
   .stats {