riot-web/res/themes/element/css/_mods.scss

40 lines
1.0 KiB
SCSS
Raw Normal View History

// 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: left top;
}
.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;
}
}
.mx_RoomSublist2_showNButton {
background-color: transparent !important;
}