discord-client/scss/layout.scss

230 lines
3.3 KiB
SCSS

*{
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;
}
}
body > #WRAPPER > #CONNECTION_STATUS{
display: block;
position: absolute;
top: -2em;
left: 0;
width: 100%;
height: calc( 2em - 2*.3em );
padding: .3em 0;
background-color: #32ce80;
font-size: 1em;
text-align: center;
text-shadow: 1px 1px 0 #555;
z-index: 1000;
transition: top .5s ease-in-out,
background-color .2s ease-in-out;
// offline
&[data-online='0']{ top: 0; background-color: #d83636; }
// connecting
&[data-online='1']{ top: 0; background-color: #d86936; }
// online
&[data-online='2']{ top: 0; background-color: #32ce80; }
}
// 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: cover;
& > .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: cover;
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;
&.err > span{
color: #f04747;
}
&.link{
color: #5e5e5e;
transition: color .2s ease-in-out;
cursor: pointer;
&:hover{ color: #fff; }
}
}
& button{
display: block;
flex: 100%;
padding: 1.5em 1em;
margin-top: 1.5em;
margin-bottom: .5em;
}
& > span{
display: block;
margin: .5em 0;
color: #666;
font-size: .8em;
}
& hr{
display: block;
position: relative;
width: 100%;
height: 2px;
margin: .5em 0;
border: none;
background-color: #333;
}
}
}
}