mirror of
https://github.com/vector-im/element-web.git
synced 2024-09-09 22:55:12 +00:00
Add glass effect
This commit is contained in:
parent
42a3668efa
commit
bf0b2ea101
1 changed files with 29 additions and 4 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue