From a8ac2331404df3e96eca6e29b31950767b2489d6 Mon Sep 17 00:00:00 2001 From: muerwre <33246675+muerwre@users.noreply.github.com> Date: Sun, 14 Aug 2022 18:18:50 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B8=D0=B8=20=D0=BA=20=D0=B1=D1=8D=D0=BA?= =?UTF-8?q?=D0=B4=D1=80=D0=BE=D0=BF=D0=B0=D0=BC=20=D0=92=D0=B5=D1=81=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../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 + ); } }