discord-client/webpack/scss/layout.scss

165 lines
2.3 KiB
SCSS
Raw Normal View History

2018-03-21 17:44:27 +00:00
*{
margin: 0;
padding: 0;
}
body{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: 'Source Sans Pro';
font-size: 16px;
& > #WRAPPER{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #36393e;
2018-03-21 17:44:27 +00:00
}
}
// LOGIN LAYOUT
body > #WRAPPER.login{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat;
background-size: 100% auto;
& > .login-box{
display: flex;
position: absolute;
width: 39.5em;
// height: 24.5em;
border-radius: 5px / 5px;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
flex-wrap: nowrap;
overflow: hidden;
// blur background hack
&:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat;
background-size: 100% auto;
background-attachment: fixed;
-webkit-filter: blur(.3em);
-moz-filter: blur(.3em);
-o-filter: blur(.3em);
-ms-filter: blur(.3em);
filter: blur(.3em);
z-index: 0;
}
z-index: 100;
& > div.icon{
flex: 0 1 14em;
background-color: rgba(221, 221, 221, 0.9);
z-index: 101;
}
& > div.form{
flex: 1 0 0;
display: flex;
position: relative;
padding: 2em;
flex-direction: row;
justify-content: stretch;
align-content: flex-start;
flex-wrap: wrap;
background-color: rgba(30, 30, 30, 0.9);
z-index: 101;
& h3{
display: block;
margin: auto;
margin-bottom: 1em;
text-transform: uppercase;
font-weight: bold;
}
& label{
flex: 100%;
display: block;
color: #949494;
font-weight: bold;
font-size: .6em;
margin-bottom: 1.5em;
margin-top: 1.2em;
letter-spacing: .2em;
&.invalid{ color: #f04747; }
&.grey{ color: #5e5e5e; }
}
& button{
display: block;
flex: 100%;
padding: 1.5em 1em;
margin-top: 1.5em;
margin-bottom: .5em;
}
}
}
}
2018-03-21 17:44:27 +00:00