diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index ef5305aba5..16ae88768b 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -80,6 +80,14 @@ 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 12388200b4..52c9dd4232 100644 --- a/res/themes/element/css/_mods.scss +++ b/res/themes/element/css/_mods.scss @@ -19,4 +19,18 @@ .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { backdrop-filter: blur(175px); } + + // sticky headers need their own blur + + .mx_RoomSublist2_headerContainer_sticky { + background-size: cover; + background-image: var(--avatar-url); + background-position: center; + } + + .mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur { + backdrop-filter: blur(100px); + background-color: $roomlist2-bg-color; + } +} } diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 58ebf54bf7..51507f0f64 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -311,20 +311,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}