imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add blurred, blended avatar background to left panel

Browse source
This commit is contained in:
Bruno Windels 2020-06-30 13:02:52 +02:00
parent c0a9af945c
commit 6fc4be386a
6 changed files with 30 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
res/themes/element/css/_blur.scss Normal file
View file

@ -0,0 +1,21 @@
// 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);
}
}

4
res/themes/element/css/_element.scss
View file

@ -65,7 +65,7 @@ $preview-bar-bg-color: #f7f7f7;
$secondary-accent-color: #f2f5f8;
$tertiary-accent-color: #d3efe1;
$tagpanel-bg-color: #27303a;
$tagpanel-bg-color: #dee3ead1;
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
@ -178,7 +178,7 @@ $header-divider-color: #91A1C0;
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: $header-panel-bg-color;
$roomlist2-bg-color: #f3f8fde8;
$roomsublist2-divider-color: $primary-fg-color;

1
res/themes/element/css/element.scss
View file

@ -2,4 +2,5 @@
@import "_paths.scss";
@import "_fonts.scss";
@import "_element.scss";
@import "_blur.scss";
@import "../../../../res/css/_components.scss";