@import 'variables';

.user-login,
.user-join,
.user-migrate {
	form {padding-top: 38px; .uncard();}
	.autologin {text-align: center; font-size: 16px;}
	.autologin {
		.warn {overflow: hidden; max-height: 0; transition: max-height 0.3s;}
		.warn.show {max-height: 60px;}
		.warn span {display: block; padding-top: 8px; line-height: 1.2em; color: @theme_warn;}
	}
	.buttons {margin: 32px 0 0 0;}
	.button {margin: 0 0 16px 0;}
	a.open-settings, a.trouble {display: block; margin: 32px 0 8px 0; font-size: 1.3em; text-align: center;}
	a.open-settings, a.trouble {
		&.active icon {transform: rotate(90deg);}
		icon {font-size: 14px; color: @theme_primary; transform: rotate(270deg); .transition(transform .3s);}
	}
	.settings-container {max-height: 0; overflow: hidden; .transition(max-height 0.3s);}
	.settings-container {
		&.active {max-height: 600px;}
		p.settings {margin: 0 0 16px 0; padding: 10px; .card();}
		p.settings {
			label {display: block; color: @theme_gray}
			small {font-size: 0.7em;}
		}
	}

	p.join {text-align: center;}

	.strength {margin: 16px 8px 0 8px;}
	.strength {
		p {padding: 4px 0; font-size: 14px; text-align: center;}
		&.level-too-short .inner {background: @theme_warn;}
		&.level-too-short span {color: @theme_warn;}
		&.level-weak .inner {background: #e88755;}
		&.level-weak span {color: #e88755;}
		&.level-ok .inner {background: #9ab389;}
		&.level-ok span {color: #9ab389;}
		&.level-good .inner {background: @theme_primary;}
		&.level-good span {color: @theme_primary;}
		&.level-great .inner,
		&.level-excellent .inner {background: @theme_accent;}
		&.level-great span,
		&.level-excellent span {color: @theme_accent;}
	}
}

.user-join.confirm {}
.user-join.confirm {
	.confirm-text {padding: 24px 16px 0 16px; font-size: .9em; text-align: left;}
	.confirm-text em {font-style: italic;}
	.buttons {padding: 6px 0 16px 0;}
	.button {margin-top: 0;}
}

.user-main {width: 700px; margin: 60px auto 0 auto;}
.user-main {
	.login-main {float: left;}
	.join-main {float: right; padding-left: 50px; border-left: 1px solid #ccc;}
}

.user-must-login {margin: 0;}
.user-must-login {
	.content {display: flex; align-items: center; justify-content: center; height: 100vh;}
	.msg {text-align: center;}
}

.migration-report {padding: 16px; font-size: 1.4em;}
.migration-report {
	p {margin-bottom: 16px; line-height: 1.4em;}
	.migration-error {padding: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
}

