diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index 3fb4d2aecb..837bdad211 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -81,14 +81,6 @@ limitations under the License. // We don't have a top style because the top is dependent on the room list header's // height, and is therefore calculated in JS. // The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though. - - // blur for element theme, background image is on parent - .mx_RoomSublist2_stickyHeaderBlur { - width: 100%; - height: 100%; - display: flex; - align-items: center; - } } // Sticky Headers End diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss index e8d126d22f..cc5205ccba 100644 --- a/res/themes/element/css/_mods.scss +++ b/res/themes/element/css/_mods.scss @@ -19,19 +19,6 @@ .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { backdrop-filter: blur(175px); } - - // sticky headers need their own blur, and their own background to make it opaque - .mx_RoomSublist2_headerContainer_sticky { - background-size: cover; - background-image: var(--avatar-url); - background-position: center; - } -} - -/* outside of @supports as the backdrop-filter will be ignored, and we still apply the mostly-opaque background color */ -.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur { - backdrop-filter: blur(100px); - background-color: $roomlist2-bg-color; } .mx_RoomSublist2_showNButton { diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 3b8d462282..2ca9ec5dd1 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -437,24 +437,22 @@ export default class RoomSublist2 extends React.Component { return (
-
- - - {this.props.label} - - {this.renderMenu()} - {this.props.isMinimized ? null : badgeContainer} - {this.props.isMinimized ? null : addRoomButton} -
+ + + {this.props.label} + + {this.renderMenu()} + {this.props.isMinimized ? null : badgeContainer} + {this.props.isMinimized ? null : addRoomButton}
{this.props.isMinimized ? badgeContainer : null} {this.props.isMinimized ? addRoomButton : null}