Bruno Windels
82e0816d86
added a DOM element so we can set the background on the parent and the blur on the new element
37 lines
951 B
SCSS
37 lines
951 B
SCSS
// sidebar blurred avatar background
|
|
//
|
|
// if backdrop-filter is supported,
|
|
// set the user avatar (if any) as a background so
|
|
// it can be blurred by the tag panel and room list
|
|
|
|
@supports (backdrop-filter: blur(100px)) {
|
|
.mx_LeftPanel2 {
|
|
background-image: var(--avatar-url);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.mx_TagPanel {
|
|
backdrop-filter: blur(100px);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|