Merge pull request #6659 from matrix-org/palid/fix/backdrop-blur

Optimize background image from avatar on left panel

res/css/structures/_BackdropPanel.scss

@@ -21,19 +21,10 @@ limitations under the License.
     height: 100vh;
     width: 100%;
     overflow: hidden;
-
-    &::before {
-        content: " ";
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100vh;
-        width: 100%;
-        background-color: var(--lp-background-overlay);
-    }
+    filter: blur(var(--lp-background-blur));
 }
 
-.mx_BackdropPanel--canvas {
+.mx_BackdropPanel--image {
     position: absolute;
     top: 0;
     left: 0;
@@ -41,11 +32,4 @@ limitations under the License.
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
-
-    &:nth-of-type(2n-1) {
-        opacity: 0.2;
-    }
-    &:nth-of-type(2n) {
-        opacity: 0.1;
-    }
 }

res/css/structures/_GroupFilterPanel.scss

@@ -14,13 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MatrixChat--with-avatar {
-    .mx_GroupFilterPanel {
-        background-color: transparent;
-    }
+$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
+
+.mx_GroupFilterPanelContainer {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: $groupFilterPanelWidth;
+    height: 100%;
+
+    // Create another flexbox so the GroupFilterPanel fills the container
+    display: flex;
+    flex-direction: column;
+
+    // GroupFilterPanel handles its own CSS
 }
 
 .mx_GroupFilterPanel {
+    z-index: 1;
     background-color: $groupFilterPanel-bg-color;
     flex: 1;
     cursor: pointer;

res/css/structures/_LeftPanel.scss

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 $roomListCollapsedWidth: 68px;
 
 .mx_MatrixChat--with-avatar {
@@ -27,8 +26,17 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel_wrapper {
     display: flex;
     max-width: 50%;
+
+    .mx_LeftPanel_wrapper--user {
+        background-color: $roomlist-bg-color;
+        display: flex;
+        overflow: hidden;
+        position: relative;
+    }
 }
 
+
+
 .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
@@ -39,19 +47,6 @@ $roomListCollapsedWidth: 68px;
     contain: content;
     position: relative;
 
-    .mx_LeftPanel_GroupFilterPanelContainer {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: $groupFilterPanelWidth;
-        height: 100%;
-
-        // Create another flexbox so the GroupFilterPanel fills the container
-        display: flex;
-        flex-direction: column;
-
-        // GroupFilterPanel handles its own CSS
-    }
-
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {

res/css/structures/_SpacePanel.scss

@@ -22,18 +22,14 @@ $activeBorderTransparentGap: 1px;
 $activeBackgroundColor: $roomtile-selected-bg-color;
 $activeBorderColor: $secondary-fg-color;
 
-.mx_MatrixChat--with-avatar {
-    .mx_SpacePanel {
-        background-color: transparent;
-    }
-}
-
 .mx_SpacePanel {
     background-color: $groupFilterPanel-bg-color;
     flex: 0 0 auto;
     padding: 0;
     margin: 0;
     position: relative;
+    // Fix for the blurred avatar-background
+    z-index: 1;
 
     // Create another flexbox so the Panel fills the container
     display: flex;

res/themes/dark/css/_dark.scss

@@ -240,9 +240,7 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 160px;
-    --lp-background-blur: 90px;
-    --lp-background-overlay: rgba(255, 255, 255, 0.055);
+    --lp-background-blur: 45px;
 }
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);

res/themes/light/css/_light.scss

@@ -363,9 +363,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 120px;
-    --lp-background-blur: 60px;
-    --lp-background-overlay: rgba(0, 0, 0, 0.055);
+    --lp-background-blur: 30px;
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);