From f974f86c6db58c32a47fc78df85fd8e033491fe7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 24 Dec 2021 01:25:54 +0100
Subject: [PATCH] [Refactoring] Middle Column: Simplify background (#1582)

---
 src/components/middle/MiddleColumn.scss | 38 +++++++++++--------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index ce1765a51..5e4396131 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -6,20 +6,28 @@
   right: 0;
   overflow: hidden;
   z-index: -1;
+  background-color: var(--theme-background-color);
 
-  &::before,
   &::after {
     content: "";
-    display: block;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: var(--theme-background-color);
-  }
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    body:not(.animation-level-0) #root & {
+      transition: transform var(--layer-transition), background .2s !important;
+    }
+
+    body.animation-level-0 & {
+      transition: none;
+    }
 
-  &::after {
     .theme-light & {
       background-image: url('../../assets/chat-bg.jpg');
 
@@ -27,31 +35,19 @@
         background-image: url('../../assets/chat-bg-mobile.jpg');
       }
     }
-
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    body:not(.animation-level-0) #root & {
-      transition: transform var(--layer-transition), opacity .2s !important;
-    }
-
-    body.animation-level-0 & {
-      transition: none;
-    }
   }
 
-  .custom-bg-color:not(.custom-bg-image) > &::after {
+  .custom-bg-color:not(.custom-bg-image) &::after {
     opacity: 0;
   }
 
-  .custom-bg-image > &::after {
+  .custom-bg-image &::after {
     background-image: var(--custom-background) !important;
     filter: none;
     transform: scale(1.1);
   }
 
-  .custom-bg-image.blurred > &::after {
+  .custom-bg-image.blurred &::after {
     filter: blur(12px);
   }
 
@@ -64,12 +60,12 @@
       transition: transform var(--layer-transition);
     }
 
-    body.animation-level-2 #Main.right-column-open &::after {
+    body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
       transform: scale(0.67) !important;
     }
   }
 
-  body.animation-level-2 #Main.right-column-open &::after {
+  body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
     @media screen and (min-width: 1921px) {
       transform: scale(0.8) !important;
     }