/*
	CSS Stylesheet „remoteLogin“
	Version 2023-11-15a
	© 2023 m-ds GmbH
*/

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

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

#remoteLogin {
	align-items     : center;
	backdrop-filter : blur(4px);
	background      : hsla(var(--meki-brown-hue), var(--meki-brown-saturation), var(--meki-brown-lightness-1), 0.2);
	border          : 1px solid var(--meki-brown-1);
	border-radius   : 1vh;
	display         : none;
	flex-direction  : column;
	overflow        : hidden;
	width           : 48vh;
}

#remoteLogin > 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%;
}

#remoteLogin > 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;
	outline     : none;
	padding     : 0 1vh;
	width       : 42vh;
}

#remoteLogin > .edtLoginName {
	margin : 6vh 0 2vh 0;
}

#remoteLogin > button {
	background    : linear-gradient(var(--meki-brown-1), var(--meki-brown-2));
	border        : 1px solid var(--meki-brown-2);
	border-radius : 1vh;
	color         : var(--meki-brown-3);
	font-size     : 4vh;
	height        : 10vh;
	margin        : 2vh 0 6vh 0;
	outline       : none;
	text-shadow   : 0 1px 1px var(--meki-brown-1);
	width         : 42vh;
}

@media (hover: hover) {
	#remoteLogin > h2, #remoteLogin > button {
		cursor : pointer;
	}

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

	#remoteLogin > button:hover {
		background : var(--meki-blue-1);
		border     : 1px solid var(--meki-blue-2);
		color      : var(--meki-blue-3);
	}
}

#remoteLogin.visible {
	display : flex;
}

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