230 lines
3.3 KiB
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;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|