From 5211f9777e1fcba9808c8cfbaefda2cc75b69555 Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Tue, 19 Nov 2019 04:35:23 +0100
Subject: [PATCH] Fix colorizations.

---
 src/_mixins.scss               |  4 +++
 src/header/player/_slider.scss |  2 +-
 src/icedream.scss              | 11 +++++-
 src/main/_page.scss            | 65 +++++++++++++++++-----------------
 4 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/_mixins.scss b/src/_mixins.scss
index 9a3c89d..b83d0a8 100644
--- a/src/_mixins.scss
+++ b/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);
+}
diff --git a/src/header/player/_slider.scss b/src/header/player/_slider.scss
index 73cbb57..0215dad 100644
--- a/src/header/player/_slider.scss
+++ b/src/header/player/_slider.scss
@@ -1,5 +1,5 @@
 #volumeSVG {
   @if $icedream-saturation {
-    @include saturate-from-red();
+    @include saturate-from-blue();
   }
 }
diff --git a/src/icedream.scss b/src/icedream.scss
index d5b1f0e..60e8c10 100644
--- a/src/icedream.scss
+++ b/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';
 }
diff --git a/src/main/_page.scss b/src/main/_page.scss
index ab1c2df..d62729d 100644
--- a/src/main/_page.scss
+++ b/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
-  &.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 {
+  &#pageEQ {
     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%;
-      bottom: 25%;
+      top: 0;
+      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 {
-    @if $icedream-saturation {
-      @include saturate-from-red();
-    }
-  }
-
-  .page_EQ_video {
-    display: none;
-  }
-
-  #wave {
-    @if $icedream-saturation {
-      @include saturate-from-red(300%, 5%);
-    }
+  // seems like above colors get overwritten again when .active is added
+  &.active {
+    // background-color: #000;
+    background: transparent;
+    color: $icedream-text-color;
   }
 }