/*
	CSS Stylesheet „localLogin“
	Version 2023-12-05a
	© 2023 m-ds GmbH
*/

::placeholder {
	color : var(--meki-brown-2);
}

::selection {
	background : var(--color-focus);
	color      : white;
}

.overlay_login {
	align-items         : center;
	background          : url('images/meki-logo.png'), linear-gradient(white 58.5%, var(--meki-green) 59%);
	background-position : 15% 30%, 0 0;
	background-repeat   : no-repeat;
	background-size     : auto 60%, 100% 100%;
	display             : none;
	height              : 100%;
	justify-content     : center;
	position            : absolute;
	top                 : 0;
	width               : 100%;
}

.overlay_login.visible {
	display : flex;
}

#localLogin {
	align-items    : center;
	background     : hsla(var(--meki-brown-hue), var(--meki-brown-saturation), var(--meki-brown-lightness-1), 0.4);
	border         : 1px solid var(--meki-brown-1);
	border-radius  : 2vh;
	display        : none;
	flex-direction : column;
	overflow       : hidden;
	width          : 48vh;
}

#localLogin > h2 {
	background  : var(--meki-brown-1);
	color       : var(--meki-brown-2);
	font-size   : 4vh;
	font-weight : normal;
	margin      : 0;
	padding     : 2vh;
	text-align  : center;
	text-shadow : 0 1px 1px white;
	width       : 100%;
}

#localLogin > input {
	background  : linear-gradient(#ddd, #fff 50%);
	border      : 1px solid var(--meki-brown-2);
	color       : var(--meki-blue);
	font-family : 'DejaVu Sans Mono', Consolas, monospace;
	font-size   : 3vh;
	height      : 8vh;
	margin      : 3vh;
	outline     : none;
	padding     : 0 1vh;
	width       : 42vh;
}

#localLogin > .pinPanel {
	align-content   : space-between;
	display         : flex;
	flex-wrap       : wrap;
	height          : 42vh;
	justify-content : space-between;
	margin-bottom   : 2vh;
	width           : 42vh;
}

#localLogin > .pinPanel > * {
	align-items     : center;
	background      : var(--meki-brown-1);
	border          : 1px solid var(--meki-brown-2);
	border-radius   : 50%;
	color           : var(--meki-brown-3);
	display         : flex;
	font-size       : 6vh;
	font-weight     : bold;
	height          : 30%;
	justify-content : center;
	text-shadow     : 0 1px 1px white;
	width           : 30%;
}

#localLogin > .pinPanel > *.press {
	animation : press 150ms;
}

@keyframes press {
	  0% {transform: scale(1.0)}
	 50% {transform: scale(0.8)}
	100% {transform: scale(1.0)}
}

@media (hover: hover) {
	#localLogin {
		backdrop-filter : blur(4px);
		background      : hsla(var(--meki-brown-hue), var(--meki-brown-saturation), var(--meki-brown-lightness-1), 0.2);
	}

	#localLogin > h2, #localLogin > .pinPanel > * {
		cursor : pointer;
	}

	#localLogin > h2:hover {
		background : var(--meki-blue-1);
		color      : var(--meki-blue-2);
	}

	#localLogin > .pinPanel > *:hover {
		background : var(--meki-blue-1);
		border     : 1px solid var(--meki-blue-2);
		color      : var(--meki-blue-3);
	}
}

#localLogin.fail {
	animation : fail 300ms;
}

@keyframes fail {
	  0% {transform: scale(1.0); background: hsla(var(--meki-brown-hue), var(--meki-brown-saturation), var(--meki-brown-lightness-1), 0.3)}
	 50% {transform: scale(0.9); background: var(--meki-red)}
	100% {transform: scale(1.0); background: hsla(var(--meki-brown-hue), var(--meki-brown-saturation), var(--meki-brown-lightness-1), 0.3)}
}

#localLogin.visible {
	display : flex;
}

@media (orientation: portrait) {
	/* re-dimension stuff */
}