PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add glass effect

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-02-01 12:10:55 -06:00
parent 42a3668efa
commit bf0b2ea101
1 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/views/auth/VectorAuthPage.js
View file

@ -29,14 +29,39 @@ module.exports = React.createClass({
render: function() {
const AuthFooter = sdk.getComponent('auth.AuthFooter');
const style = {
const pageStyle = {
background: 'center/cover fixed url(../../themes/riot/img/backgrounds/valley.jpg)',
};
const modalStyle = {
position: 'relative',
background: 'initial',
};
const blurStyle = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
filter: 'blur(10px)',
background: pageStyle.background,
};
const modalContentStyle = {
display: 'flex',
zIndex: 1,
background: 'rgba(255, 255, 255, 0.59)',
borderRadius: '4px',
};
return (
<div className="mx_AuthPage" style={style}>
<div className="mx_AuthPage_modal">
{ this.props.children }
<div className="mx_AuthPage" style={pageStyle}>
<div className="mx_AuthPage_modal" style={modalStyle}>
<div className="mx_AuthPage_modalBlur" style={blurStyle}></div>
<div className="mx_AuthPage_modalContent" style={modalContentStyle}>
{ this.props.children }
</div>
</div>
<AuthFooter />
</div>