TimeTrex/interface/html5/theme/default/css/views/login/LoginView.css

/*LoginView*/
.login-view {
	position: fixed;
	width: 652px;
	top: 50%;
	left: 50%;
	margin: -238.5px 0 0 -326px;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	z-index: 500;
}

.login-view-main-content {
	position: relative; /* No effect on page, but allows #versionNumber to correctly position in bottom right corner of content box */
	margin-bottom: 20px;
	padding-bottom: 15px; /* Padding to reserve room for the fixed position #versionNumber */
	background: #ffffff;
	box-shadow: 0 4px 8px 0 #000000, 0 6px 20px 0 #000000;
}

/******************************************
Mobile View
******************************************/

/* Some other overrides done in application.css */
.mobile-device-mode .content-container {
	overflow: auto; /* Allows scrolling if the mobile device is so short that not all login content fits. */
}

.mobile-device-mode.login-bg, .mobile-device-mode #login-bg_opacity_filter {
	background: #134769;
}

.mobile-device-mode #login-bg_animal {
	background: none;
}

.mobile-device-mode .box-edge-spacing {
	width: 95%;
}

.mobile-device-mode .login-view {
	position: absolute;
	top: 48%; /* centering vertically on mobile views. 50 and -50 did not put direct in middle, so 48% and -50% is slightly above middle. More pleasing visually. */
	transform: translateY(-50%); /* Used together with the top percentage above for vertical centering */
	left: 0;
	right: 0;
	margin: auto; /* Makes sure its centered when max-width is restricting width */
	padding: 10px; /* Padding to ensure the shadow effect of the box is still visible */
	padding-bottom: 0;
	max-width: 652px; /* Makes sure the login box does not go too wide, even on mobile view. */
	width: auto;
}

@media only screen and (max-height: 550px) {
	/* When the vertical viewport height gets to small, turn off vertical centering as it cut's off the top content
	 * Re-calculate the max-height size if the login box ever gets too big with new content. 550 is ideal for box height of
	 * around 393px + powered by logo footer (test with social logos / different copyright too).
	 * Alternatively, use flexbox, together with safe centering. Not widely supported yet though.
	 */
	.mobile-device-mode .login-view {
		top: 0;
		transform: none;
	}
}

.mobile-device-mode .logo-container {
	height: 100px;
}

/* The percentages below intentionally do not add up to 100, to account for some padding between the logos */
.mobile-device-mode .login-view .company-logo {
	max-width: 65%;
}

.mobile-device-mode .login-view .app-type {
	max-width: 25%;
}

.mobile-device-mode .login-view .form td {
	padding: 5px 0; /* The 0 is specifically to allow empty td column between the inputs to size correctly (padding forces min space in small viewports */
}

.mobile-device-mode .login-view .form-container .button-form button {
	padding: 5px;
}

.mobile-device-mode .wizard.forgot-password {
	max-width: 500px;
	width: 90%;
	height: 140px;
}

.mobile-device-mode .wizard.forgot-password .wizard-form-item-div {
	text-align: left;
	padding-left: 10px;
}

.mobile-device-mode .wizard.forgot-password .form-item-label {
	min-width: 0;
}

.mobile-device-mode .social-div {
	display: none !important; /* TODO: Important is here to override the .show() in LoginViewController.js Refactor together with all other show/hides on form */
}

.mobile-device-mode .foot-left-html,
.mobile-device-mode .foot-right-html {
	display: none;
}

/******************************************
End Mobile View
******************************************/

/* Main Layout */

.login-view .form-container {
	clear: both; /* Used for the float left and right of company and app_type logo */
	width: 100%;
	text-align: left;
	background: #ffffff;
}

.box-edge-spacing {
	margin: 0px auto;
	width: 80%;
}

.login-view .form td {
	padding: 5px 0; /* The 0 is specifically to allow empty td column between the inputs to size correctly (padding forces min space in small viewports */
}

.foot-right-html {
	position: fixed;
	right: 0;
	bottom: 0;
}

.foot-left-html {
	position: fixed;
	left: 0;
	bottom: 0;
}

.login-view .version-label {
	position: absolute;
	right: 5px;
	bottom: 5px;
	text-align: right;
	font-size: 9px;
	color: #000000;
}

.login-view .error-info {
	color: red;
	font-weight: bold;
}

.login-view .secure-login {
	color: rgb(60, 97, 138);
	font-size: 18px;
	text-align: left;
	font-weight: normal;
}

.login-view .labels {
	color: #000000;
	font-weight: normal;
	text-align: right;
	padding-right: 5px;
}

/* Animal background section */

/* Note CSS for .login-bg (the animals/office background) is loaded directly in /index.php to load it as fast as possible */

#login-bg_animal {
	/* background-image generated by JS. See LoginView.render */
	position: fixed;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
}

#login-bg_opacity_filter {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 53, 89, 0.55);
	/*background-color: rgba(19, 71, 105, 0.55);*/ /* This matches the new mobile background color. See which works better */
}

/* Logos */
.logo-container {
	position: relative; /* Needed for the vertical align of the logos */
	margin: 0 auto;
	height: 120px; /* 80px logo max height + 40px for top/bottom spacing, and to roughly match space below login buttons */
	width: 80%;
}

.login-view .company-logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	/*margin: 20px; !* Use margin instead of padding so that the max image size is not restricted/reduced by padding *!*/
	cursor: pointer;
	max-width: 300px;
	max-height: 80px;
}

.login-view .app-type {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	/*margin: 20px;*/
	cursor: pointer;

}

.hr-form-top {
	margin-top: 0; /* Spacing will be controlled by logos, to allow proper vertical centering. */
}

/* Login form */
.login-view .form-input {
	color: #000000;
	width: 150px;
	font-weight: normal;
	background-color: #d0d9e5;
	border: 1px inset #d0d9e5;
}

.login-view input[type=password],
.login-view input[type=text],
.login-view input[type=email],
.login-view select {
	line-height: 32px;
	border: 1px solid lightsteelblue;
	color: #000000;
	background-color: #ffffff;
	width: 100% !important;
	margin: 0px;
	padding-left: 8px;
	height: 42px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.login-view .form-selector {
	width: 150px;
	color: #000000;
	font-weight: normal;
}

.login-view .forgot-password {
	/*position: absolute;*/
	cursor: pointer;
	color: rgb(60, 97, 138);
}

.login-view .button-form .login-button-container {
	text-align: left;
	height: 50px;
}

.login-view .button-form .quick-punch-button-container {
	text-align: right;
	height: 50px;
}

.login-view .form-container .button-form {
	margin-bottom: 16px;
}

.login-view .login-button,
.login-view .quick-punch-button {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 5px;
	display: inline-block;
	height: 50px;
	cursor: pointer;
	text-decoration: none;
	font-weight: normal;
	font-family: sans-serif
}

.login-view .login-button {
	background: #426d9d;
	border: 0px solid #a1a3a6;
	color: #ffffff;
	width: 100%;
	font-size: 18px;
}

.login-view .quick-punch-button {
	background: transparent;
	border: 1px solid #426d9d;
	padding: 5px 10px;
	color: #426d9d;
	font-size: 16px; /* slightly smaller than login button because visually same font size makes quick punch look bigger (Due to the different letters)*/
}

.login-view .login-button:hover,
.login-view .login-button:focus {
	opacity: 0.9;
}

.login-view .quick-punch-button:hover,
.login-view .quick-punch-button:focus {
	background: rgba(66, 109, 157, 0.07);
}

/* Footer Logos and Social Links */

.social-div {
	margin: 0 auto;
	width: 300px;
	text-align: center;
	z-index: 7;
	cursor: pointer;
	color: rgb(60, 97, 138);
}

.login-view .social-div a {
	display: inline-block;
}

.login-view .powered-by-img {
	bottom: 5px;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	right: 0;
	cursor: pointer;
}

.social-div,
.logo_container_powered_by,
.logo_container_copyright {
	padding: 5px;
	text-align: center;
}

.powered-by-img-seo {
	cursor: pointer;
	z-index: 9;
	text-align: center;
}

/* TODO: Don't like the copyrightinfo1 reference, as the main index.php has a similar element ref, but as ID. Not changing yet incase of regression issues. */
.copy-right-info-1 {
	z-index: -1;
	color: #ffffff;
	font-size: 11px;
	text-decoration: none;
}

.login-view .legacy-interface {
	cursor: pointer;
	color: rgb(60, 97, 138);
	position: absolute;
	bottom: 8px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	width: 96px;
}

.footerLink {
	text-decoration: none;
	color: inherit;
}