Rework backdrop to draw one image with two different level of blur

res/css/structures/_LeftPanel.scss

@@ -18,7 +18,6 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 $roomListCollapsedWidth: 68px;
 
 .mx_LeftPanel {
-    background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
     max-width: 50%;

res/css/structures/_MatrixChat.scss

@@ -39,10 +39,10 @@ limitations under the License.
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
     min-height: 100%;
     z-index: 0;
     pointer-events: none;
+    overflow: hidden;
 }
 
 .mx_MatrixToolbar {
@@ -76,7 +76,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(canvas) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;

res/css/structures/_SpacePanel.scss

@@ -24,7 +24,6 @@ $activeBorderColor: $secondary-fg-color;
 
 .mx_SpacePanel {
     flex: 0 0 auto;
-    background-color: $groupFilterPanel-bg-color;
     padding: 0;
     margin: 0;
     position: relative;