snikket-web-portal/snikket_web/scss/login.scss

@import "_theme.scss";
@import "_baseline.scss";

body {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background:
		url('../img/noise.png') 0 0 / 180px 180px,
		$gray-900;
	flex-direction: column;

	& > div.login-wrap {
		justify-content: center;
		align-items: center;
		display: flex;
		flex: 1 0 auto;
	}

	& > footer {
		flex: 0 0 auto;
		background:
			url('../img/noise.png') 0 0 / 180px 180px,
			$gray-800;
		box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
		color: $gray-200;

		ul {
			display: block;
			margin: 1.5em;
			padding: 0;
			text-align: center;
		}

		ul > li {
			display: inline-block;
		}

		/* ul > li:before {
			content: '•';
			padding-right: 0.5em;
		} */
	}

	& > div.login-wrap > main {
		width: 40rem;
		border: 0.2em solid $primary-900;
		padding: 1.5em;
		margin: 0;
		border-radius: 0.2em;
		box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.2);
		background-color: white;
	}

	div.fbox, div.abox {
		font-size: 150%;
		line-height: 1;
		margin: 0 0 1em 0;
	}

	div.abox {
		margin-bottom: 0;
		text-align: right;
	}

	input[type="password"],
	input[type="text"] {
		border: 0;
		width: 100%;
		border-bottom: 0.1em solid $primary-900;
		padding: 0.05em;

		&:focus {
			border-bottom-color: $primary-700;
		}
	}

	button {
		border: 0;
		background-color: $primary-500;
		color: $gray-900;
		padding: 0.375em 0.75em;
	}

	h1 {
		background-image: url('/static/img/snikket-logo.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 0.25em 0em;
		padding-left: 1.5em;
	}
}