password-manager/frontend/delta/scss/style/loginPage.scss

/*

Copyright 2008-2015 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

#loginPage {
	@include overflow-auto;

	div.loginForm {
		@include flexbox;
		@include flex-direction(column);
		@include align-items(stretch);

		height: 100%;
		
		text-align: center;
		background-color: $main-color;

		header {
			@include flex(1);
//			@include icon-font();

			font-size: 48pt;
			line-height: 90pt;
			color: $main-alternate-text-color;
			
			h3 {
				font-weight: bold;
				font-size: 38pt;
				line-height: 1.7em;
			}
			
			h5 {
				font-size: 16pt;
				line-height: 1.0em;
			}
		}

		div.form {
			@include flex(4);

			form {
				position: relative;
				background: $main-alternate-text-color;

//				@include border-radius(10px);
				padding: 20px;
				margin-bottom: 50px;
				max-width: 400px;

				margin-left: auto;
				margin-right: auto;
/*			
				&:after {
					content: "";
					position: absolute;
					top: -15px;
					margin-left: 50%;
					left: -15px;
					border-style: solid;
					border-width: 0 15px 15px;
					border-color: $main-alternate-text-color transparent;
					display: block;
					width: 0;
					z-index: 1;
				}			
*/
				label {
					display: none;
				}

				input {
					font-family: "clipperz-font";
					display: block;
//					@include border-radius(4px);
					padding: 5px;
					margin-top: 5px;
					margin-bottom: 10px;
					font-size: 100%;
//					box-shadow:inset 0 0 0;
					font-size: 24pt;
					width: 100%;
					border: 1px solid #ccc;
					border-radius: 0px;
				}

				button {
					font-family: "clipperz-font";
					min-height: 48px;
					min-width: 48px;

					color: white;
					font-size: 24pt;
					font-weight: 500;
					border: 0px;

					padding: 10px 25px;

					border: 1px solid white;
					background-color: $main-color;
					@include transition(background-color font-weight, 0.2s, linear);

					&:hover {
					};

					&:disabled {
						font-weight: 100;
						background-color: #c0c0c0;
						cursor: default;

						&:hover {
						};
					}
				}
			}
		}

		div.links {
			ul {
				li {
					display: inline-block;
				}
			}
		}

		footer {
			@include flex(1);

			@include flexbox;
			@include flex-direction(column);
			@include align-items(stretch);

			color: $main-alternate-text-color;
			background-color: $main-alternate-color;
			font-size: 24pt;
			cursor: default;

			a.registrationLink {
				cursor: pointer;
				@include flex(auto);
				line-height: 50pt;

				&:before {
					content: "> ";
				};
			}
			
			.applicationVersion {
				@include flex(1);
				font-size: 8pt;
				
				$applicationVersionColor: #999;

				span {
					color: $applicationVersionColor;
					&:after {
						content: ":";
					};
				}
				a {
					color: $applicationVersionColor;
					text-decoration: none;
					padding-left: 5px;
					font-weight: bold;
				}
			}
		}
	}

	div.loginForm.narrow {
		header {
			font-size: 30pt;
			line-height: 70px;
		}

		footer {
			max-height: 25px;
			line-height: 20pt;
		}
	}

	div.loginForm.extra-short {
		header {
//			@include flex(1);
			font-size: 18pt;
		}

		div.form {
//			@include flex(6);
			form {
				padding: 10px;
				margin-bottom: 20px;

				input {
					padding: 3px;
					margin-top: 3px;
					margin-bottom: 5px;
					font-size: 16pt;
				}

				button {
					min-height: 20px;

					font-size: 12pt;
					padding: 3px 10px;
					border: 1px solid white;
				}
			}
		}

		footer {
			font-size: 14pt;
		}
	}

}

.links {
	ul {
		li {
			color: white;
			cursor: pointer;
			
			&:after {
				content: '-';
				padding-left: 4px;
				padding-right: 4px;
			};

			&:last-child:after {
				content: '';
				padding-left: 0px;
				padding-right: 0px;
			}
		}
	}
}