Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve performance of scrolling on room directory (animating gradient and shadow header) (#90)

This commit is contained in:
Eric Eastwood 2022-10-19 01:50:16 -05:00 committed by GitHub
parent 27ed76c7a9
commit 0962075f8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/room-directory.css
View File

@ -3,6 +3,9 @@
}
.RoomDirectoryView_header {
overflow: hidden;
display: flex;
justify-content: center;
padding-left: 10px;
padding-bottom: 80px;
padding-right: 10px;
@ -34,16 +37,18 @@
}
.RoomDirectoryView_headerForm {
display: flex;
display: inline-flex;
flex-direction: column;
align-items: center;
padding-top: 80px;
/* Based on https://css-tricks.com/make-a-smooth-shadow-friend/ */
filter: drop-shadow(0 2.8px 2.2px rgba(0, 0, 0, 0.034))
drop-shadow(0 6.7px 5.3px rgba(0, 0, 0, 0.048)) drop-shadow(0 12.5px 10px rgba(0, 0, 0, 0.06))
drop-shadow(0 22.3px 17.9px rgba(0, 0, 0, 0.072))
drop-shadow(0 41.8px 33.4px rgba(0, 0, 0, 0.086)) drop-shadow(0 100px 80px rgba(0, 0, 0, 0.12));
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
/* We're not changing transform on this element but this hints the browser to create a
* new layer which will be much easier to composite on top of our animating background.
* Related: https://web.dev/animations-guide/#force
*/
will-change: transform;
}
.RoomDirectoryView_matrixLogo {