Fix colorizations.

src/_mixins.scss

@@ -1,3 +1,7 @@
 @mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
   filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
 }
+
+@mixin saturate-from-blue($brightness: 250%, $saturate: 45%) {
+  filter: brightness($brightness) saturate($saturate);
+}

src/header/player/_slider.scss

@@ -1,5 +1,5 @@
 #volumeSVG {
   @if $icedream-saturation {
-    @include saturate-from-red();
+    @include saturate-from-blue();
   }
 }

src/icedream.scss

@@ -7,8 +7,17 @@
 @import 'font';
 @import 'debug';
 
+
+$gradient-stop-0: #46c;
+$gradient-stop-1: #013;
+$gradient-radial: rgba(64, 128, 255, 0.05);
+
 // wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
-body {
+body.icedream {
+  --gradient-stop-0: #{$gradient-stop-0};
+  --gradient-stop-1: #{$gradient-stop-1};
+  --gradient-radial: #{$gradient-radial};
+
   @import 'header';
   @import 'main';
 }

src/main/_page.scss

@@ -1,44 +1,52 @@
 @import 'page/meta_overlay_fix';
 @import 'page/stations';
 
-.page {
+section {
   // background-color: #000;
   background: transparent;
   color: $icedream-text-color;
 
-  // seems like above colors get overwritten again when .active is added
+  &#pageEQ {
-  &.active {
-    // background-color: #000;
-    background: transparent;
-    color: $icedream-text-color;
-  }
-
-  // apply theme font to all pages but chat page (monospace!)
-  &:not(#page_Chat) {
-    @include icedream-font;
-  }
-
-  &#page_EQ {
     background: initial;
-    #wave {
+    flex-direction: row;
+    position: relative;
+
+    // NOTE - #bars is used by the website to determine the dimensions of the waveform canvas, do not set display: none on it or it will disappear on page resize!
+
+    #waves, #bars {
       position: absolute;
       left: 0;
       right: 0;
-      top: 25%;
+      top: 0;
-      bottom: 25%;
+      bottom: 0;
     }
-    #eq {
+
-      margin: 20vh;
+    #waves {
+
+      @if $icedream-saturation {
+        @include saturate-from-red(300%, 5%);
+      }
+    }
+
+    #eqs {
+      padding: 20vh;
       transition: opacity ease-out .33s, transform ease-out .33s;
       opacity: 0;
       transform: scale(0.75);
       .slider {
         background-color: rgba(0, 0, 0, .75);
       }
+      .eq {
+        @if $icedream-saturation {
+          @include saturate-from-blue();
         }
+      }
+    }
+
     #bars {
       display: none;
     }
+
     &:hover {
       #eq {
         opacity: 1;
@@ -47,19 +55,10 @@
     }
   }
 
-  .eq {
+  // seems like above colors get overwritten again when .active is added
-    @if $icedream-saturation {
+  &.active {
-      @include saturate-from-red();
+    // background-color: #000;
-    }
+    background: transparent;
-  }
+    color: $icedream-text-color;
-
-  .page_EQ_video {
-    display: none;
-  }
-
-  #wave {
-    @if $icedream-saturation {
-      @include saturate-from-red(300%, 5%);
-    }
   }
 }