OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

also apply sticky header bg color when backdrop-filter is not supported

pull/21833/head
Bruno Windels 2020-07-07 13:22:13 +02:00
parent 7115c07c65
commit 92a2621815
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/themes/element/css/_mods.scss
View File

@ -4,7 +4,7 @@
// set the user avatar (if any) as a background so // set the user avatar (if any) as a background so
// it can be blurred by the tag panel and room list // it can be blurred by the tag panel and room list
@supports (backdrop-filter: blur(100px)) { @supports (backdrop-filter: none) {
.mx_LeftPanel2 { .mx_LeftPanel2 {
background-image: var(--avatar-url); background-image: var(--avatar-url);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -20,18 +20,18 @@
backdrop-filter: blur(175px); backdrop-filter: blur(175px);
} }
// sticky headers need their own blur // sticky headers need their own blur, and their own background to make it opaque
.mx_RoomSublist2_headerContainer_sticky { .mx_RoomSublist2_headerContainer_sticky {
background-size: cover; background-size: cover;
background-image: var(--avatar-url); background-image: var(--avatar-url);
background-position: center; background-position: center;
} }
}
.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur { /* 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); backdrop-filter: blur(100px);
background-color: $roomlist2-bg-color; background-color: $roomlist2-bg-color;
}
} }
.mx_RoomSublist2_showNButton { .mx_RoomSublist2_showNButton {