From caf4704df5365e883f575f768332c6af225068c6 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 17 Nov 2020 15:15:32 +0700
Subject: [PATCH] changed sidebar appearance

---
 .../sidebars/SidebarWrapper/styles.module.scss    |  7 +------
 .../sidebars/TagSidebar/styles.module.scss        |  8 +++-----
 src/styles/variables.scss                         | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss
index dda5cc05..7c806159 100644
--- a/src/containers/sidebars/SidebarWrapper/styles.module.scss
+++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss
@@ -13,7 +13,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255, 0, 0, 0.3);
   display: flex;
   flex-direction: row;
   z-index: 26;
@@ -21,11 +20,7 @@
   overflow: hidden;
   animation: appear 0.25s forwards;
 
-  @include can_backdrop {
-    background: transparentize($content_bg, 0.15);
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
-  }
+  @include sidebar
 }
 
 .content {
diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss
index 5de04903..85231a93 100644
--- a/src/containers/sidebars/TagSidebar/styles.module.scss
+++ b/src/containers/sidebars/TagSidebar/styles.module.scss
@@ -5,14 +5,12 @@
   flex: 0 1 400px;
   max-width: 100vw;
   position: relative;
-  padding: 10px;
+
+  @include sidebar_content;
 }
 
 .content {
-  @include outer_shadow;
-
   border-radius: $radius;
-  background: $content_bg;
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
@@ -28,7 +26,7 @@
   align-items: center;
   justify-content: center;
   padding: $gap;
-  background: lighten($content_bg, 2%);
+  box-shadow: transparentize(white, 0.95) 0 1px;
 }
 
 .tag {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 309d3280..1be33dfb 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -185,3 +185,18 @@ $login_dialog_padding: $gap $gap 30px $gap;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }
+
+@mixin sidebar {
+  background: transparentize($content_bg, 0.15);
+
+  @include can_backdrop {
+    background: transparentize($content_bg, 0.3);
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
+  }
+}
+
+@mixin sidebar_content {
+  background: transparentize($content_bg, 0.4);
+  box-shadow: transparentize(white, 0.95) -1px 0;
+}