From 3a2f3ef15320f45542ee92f38e24f8940cdafdce Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 14 Aug 2022 18:18:13 +0700
Subject: [PATCH] Fixed Vespera's backdrop

---
 .../containers/CoverBackdrop/styles.module.scss   | 13 ++++++++++++-
 .../PageCoverProvider/styles.module.scss          |  2 +-
 .../sidebar/SidebarStack/styles.module.scss       |  3 ++-
 src/styles/_mixins.scss                           |  2 +-
 src/styles/themes/_horizon.scss                   | 15 ++++++++++++---
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/containers/CoverBackdrop/styles.module.scss b/src/components/containers/CoverBackdrop/styles.module.scss
index 34d5741d..3f695c93 100644
--- a/src/components/containers/CoverBackdrop/styles.module.scss
+++ b/src/components/containers/CoverBackdrop/styles.module.scss
@@ -22,7 +22,18 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
+    background: $content_bg_backdrop;
+  }
+
+  &::before {
+    content: '';
+    background: url('../../../sprites/stripes.svg');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
   }
 
   img {
diff --git a/src/components/containers/PageCoverProvider/styles.module.scss b/src/components/containers/PageCoverProvider/styles.module.scss
index 2025720f..715db0d4 100644
--- a/src/components/containers/PageCoverProvider/styles.module.scss
+++ b/src/components/containers/PageCoverProvider/styles.module.scss
@@ -29,7 +29,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
+    background: $content_bg_backdrop;
   }
 
   @include tablet {
diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss
index faeeb43f..bb0fad01 100644
--- a/src/components/sidebar/SidebarStack/styles.module.scss
+++ b/src/components/sidebar/SidebarStack/styles.module.scss
@@ -1,7 +1,8 @@
 @import 'src/styles/variables';
 
 .stack {
-  background: $content_bg_backdrop;
+  @include blur;
+
   display: flex;
   flex-direction: row-reverse;
   width: auto;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 307babfc..033defe2 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -122,7 +122,7 @@
   @include can_backdrop {
     backdrop-filter: blur($radius);
     -webkit-backdrop-filter: blur($radius);
-    background-color: $color;
+    background: $color;
   }
 }
 
diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss
index f968cd33..cf24899c 100644
--- a/src/styles/themes/_horizon.scss
+++ b/src/styles/themes/_horizon.scss
@@ -72,7 +72,8 @@ $_ocean: #25b0bc;
     --content_bg_success: #{transparentize($_accent, 0.7)};
     --content_bg_info: #{transparentize($_lemon, 0.7)};
     --content_bg_danger: #{transparentize($_red, 0.5)};
-    --content_bg_backdrop: #{transparentize($_cold, 0.2)};
+    --content_bg_backdrop: 50% 50% / cover no-repeat
+      url('/images/horizon_bg.svg') #{transparentize($_cold, 0.4)};
 
     // white shades (move to --vars)
     --white: white;
@@ -86,7 +87,15 @@ $_ocean: #25b0bc;
         $_cold,
         4%
       )} fixed;
-    --page-background-top: none;
-    --boris-background: linear-gradient(#{$_ocean} -200%, transparent 50%);
+    --page-background-top: linear-gradient(
+      #{$_accent} -150%,
+      #{transparentize($_ocean, 0.99)} 100px,
+      #{transparentize($_ocean, 1)} 200px
+    );
+    --boris-background: linear-gradient(
+      #{$_accent} -150%,
+      #{transparentize($_ocean, 0.9)} 50px,
+      #{transparentize($_ocean, 1)} 400px
+    );
   }
 }