whmcsCrosterTemplates/assets/less/login-page.less

/* For login and error pages */

#wrapper {
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		
		@media (min-width: 991px) {
			min-height: 100vh;
		}
	}
}

.login-header {
	padding: 12px;
	img {
		height: 40px;
		max-height: 40px;
	}	
	a {
		text-decoration: none;
		span {
			font-size: 1.7em;
			color: @baseHeadingcolor;
			font-weight: 900;
			white-space: nowrap;
		}
	}
}
  
  
.login-container {
  width: 380px;
  max-width:380px;
  @media (max-width: 990px) {
	margin-top: 8%;
  }
  .lang-btn {
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		.iti-flag {
			margin-right: 0.25rem;
		}
	}
  }
  
  #default-captcha-domainchecker {
	p {
		font-size: 70%;
	}
  }
  
  .providerLinkingFeedback {
	margin-top: 1rem;
  }
  .social-or-login {
	margin-top: 1rem;
	position:relative;
	z-index:1;
	text-align: center;
	span {
		display:inline-block;
		background: @gray-lighter;
		padding: 2px 8px;
		color: @link-color;
		font-size: @baseFontSize;
		border-radius: 4px;
	}
	
	&:before {
		content:"";
		display:block;
		position:absolute;
		z-index:-1;
		top:50%;
		left:0;
		right:0;
		border-top: 1px dotted @default-border-color;
	}
  }
  
 .login-copyright-text {
	text-align: center;
	padding: 15px 0;
		
	p {
		margin: 0;
	}
  }
}

.login-box {
	position: relative;
	padding: 2rem;
	background: @white;
	overflow:hidden;
	box-shadow: @box-shadow;
	border-radius: 4px;
	
	.page-header {
		margin: -15px 0 15px;
	}
	
	.footer-warp {
		a {
			color: @gray-darker;
		}
	}
	
	.btn-login {
		margin-top: 20px;
	}
	
	.logincontainer {
		p {
			font-size: 80%;
			opacity: 0.80;
		}
	}
	
	h1 {
		line-height: 1.5;
		margin-bottom: 1rem;		
	}
	
	h3, .h3 {
		font-size: 18px; color: #000;
		font-weight: 700;
		margin: 60px 0 10px;
	}
	
	.hr {
		border-color: rgba(255, 255, 255, 0.90);
	}
	
	.login-container-register {
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		padding: 1rem;
		border-top: 1px solid @default-border-color;
		margin: 2rem -2rem -2rem;
		background-color: @gray-lighter;
	}
 
}

@media (max-width: 500px) {
	.login-container {
		width:95%;
	}
}

body {
	&.login, &.error {
		background-image: url("../../images/loginBg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  z-index: 1;
	  margin: 0!important;
	  
		&:before {
			background: rgba(255,255,255,255);
			content: "";
			z-index: -1;
			position: fixed;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			top:0;
			opacity:0.9;
			
		}
	}

	&.logo-dark, &.no-img {
		&.login, &.error {	
		 .login-header {		
			a {
				span {
					color: @white;
				}
			}
		  }
		  .login-container {
		     .login-copyright-text, .lang-btn .btn {
			     color: @white;
			  }
		   }
			
		  .login-box {
			   background: @white;
		   }
		   
			.logo-light {
				display: none;
			}
			.logo-dark {
				display: block;
			}
			
			.loginpage-with-sidebar {
				.sidebar-container {
					.logo-light {
						display: block;
					}
					.logo-dark {
						display: none;
					}				
				}
			}
		}
	}
	
	&.logo-dark {
		&.login, &.error {
			&:before {
				background: darken(@gray-darker, 30%);
			}
		}
	}
	
	&.no-img {
		&.login, &.error {
			background: linear-gradient(90deg,darken(@themeColor, 25%),@themeColor);
			&:before {
				display: none;
			}
		}
	}
	
	&.dark-mode {
		&.login, &.error {	
			.login-container {
				.login-copyright-text, .lang-btn .btn {
					color: @white;
				}
			}
			.login-box {
				.login-container-register {
					border-color: @dmbc;
					background-color: @dmb;
					a {
						color: @dmc;
					}
				}
			}
			.loginpage-with-sidebar {
				.sidebar-container {
					.logo-light {
						display: none;
					}
					.logo-dark {
						display: block;
					}				
				}
			}
		}	
	}
}

.loginpage-with-sidebar {
	display: flex;
	flex-direction: row;
	padding: 0;
	overflow: hidden;
	min-height: unset;
	height: 100vh;
	
	&.sidebar-right {
		flex-direction: row-reverse;
	}
	.sidebar-container {
		position: relative;
		width: 33%;
		padding-top: 4rem;
		padding-left: 4rem;
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		box-shadow: rgba(0, 0, 0, 0.45) 10px 0px 71px 1px;
		border-left: 1rem solid @themeColor!important;

		.user_lock_icon {
			font-size: 7rem;
			--fa-primary-opacity: 0.2;
			--fa-secondary-opacity: 1.0;
			--fa-secondary-color: @themeColor;
			margin: 3rem 4rem 0 -4rem;
			padding: 0.50rem 4rem;
			opacity: 0.30;
		}
		
		&::-webkit-scrollbar {
			background-color: transparent;
		}
		.sidebar-content {
			margin-top: auto;
			margin-bottom: auto;
			padding-bottom: 3rem;
		}
		.swiper-container {
			flex-direction: row;
			.swiper-wrapper {
				align-items: flex-start;
				position: relative;
				display: flex;
				flex-direction: row;
				.swiper-slide {
					min-width: 100%;
					padding-right: 4rem;
					margin-bottom: 3rem;
					overflow: hidden;
					
					a {
						text-decoration: none;
					}
					
					p {
						font-size: 18px;
						font-weight: 100;
					}
					h2, h3, {
						line-height: 1.5;
					}
				}
			}
			.swiper-pagination {
				display: flex;
			}
			.swiper-pagination-bullet {
				display: block;
			}
		}
		.header {
			display: inline-block;
			font-size: 1rem;
			padding: 1rem 1rem 0.50rem 0;
			border-bottom: 3px solid @themeColor;
			margin-bottom: 3rem;
		}		
		.login-header {
			padding: 0;
			margin-bottom: 3rem;
			a {
				display: flex;
				justify-content: flex-start;
			}		
		}
	}
	
	.center-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 67%;
		overflow-y: scroll;
		
		.login-container {
			margin-top: auto;
			margin-bottom: auto;
		}
		.login-header {
			display: none;
			align-items: center;
		}
	}
}


@media (min-width:992px) and (max-width:1300px) {
	.loginpage-with-sidebar {
		.sidebar-container {
			width: 43%;
		}
		.center-container {
			width: 57%;
		}
	}
}
@media (max-width:992px) {
	.loginpage-with-sidebar {
		overflow: auto;
		.center-container {
			max-width: 718px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: unset;
			justify-content: center;
			margin: auto;
			background: transparent;
			padding: 1rem;
		}
		.sidebar-container {
			display: none;
		}
	} 
	.center-container {
		.login-container {
			.login-header {
				display: flex;
			}
		}
	}
}