TimeTrex Community Edition v16.2.0

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

@@ -0,0 +1,384 @@
+/*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;
+}