discord-client/webpack/scss/layout.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;
			}

		}


	}

}