Added box for page comments

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / userLogin.scss

.loginForm > form {
	.userLoginButtons {
		margin-top: 20px;
		text-align: center;
	}
	
	.thirdPartyLogin {
		flex: 0 0 100%;
		
		& + .thirdPartyLogin {
			margin-top: 10px;
		}
		
		.thirdPartyLoginButton {
			display: flex;
			border-width: 0;
			color: rgba(255, 255, 255, 1);
			
			> .icon {
				flex: 0 0 24px;
			}
			
			> span:not(.icon) {
				flex: 1 1 auto;
				margin-left: 5px;
			}
			
			/* branding */
			&.googleLoginButton {
				background-color: rgb(221, 75, 57);
				
				&:hover {
					background-color: rgb(202, 53, 35);
				}
			}
			
			&.facebookLoginButton {
				background-color: rgb(59, 89, 152);
				
				&:hover {
					background-color: rgb(48, 72, 123);
				}
			}
			
			&.twitterLoginButton {
				background-color: rgb(85, 172, 238);
				
				&:hover {
					background-color: rgb(48, 154, 234);
				}
			}
			
			&.githubLoginButton {
				background-color: rgb(68, 68, 68);
				
				&:hover {
					background-color: rgb(48, 48, 48);
				}
			}
		}
	}
	
	@include large-screen-only {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		
		-webkit-column-gap: 40px;
		-moz-column-gap: 40px;
		column-gap: 40px;
		
		> .section {
			margin-top: 0;
			
			-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
			page-break-inside: avoid; /* Firefox */
			break-inside: avoid; /* IE 10+ */
			
			&.loginFormLogin {
				-webkit-column-break-after: always;
				page-break-after: always;
				break-after: always;
			}
			
			&.loginFormRegister {
				margin-top: 0;
				
				& + .loginFormThirdPartyLogin {
					margin-top: 30px;
				}
			}
		}
	}
}

@include large-screen-only {
	/* full page login: missing margin due to different DOM */
	.contentHeader ~ .loginForm {
		margin-top: 30px;
	}
	
	/* force columns to be 300px wide in login overlay */
	.dialogContent .loginForm .section {
		width: 300px;
	}
}