password-manager/frontend/delta/scss/style/registrationPage.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/.

*/

#registrationPage {
	background-color: $main-alternate-color;
	color: $main-alternate-text-color;

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

		height: 100%;
		
		text-align: center;
		background-color: $main-alternate-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 {
				background: $main-alternate-text-color;

				padding: 20px;
				margin-bottom: 50px;
				max-width: 400px;

				margin-left: auto;
				margin-right: auto;

				.steps {
					text-align: center;
					margin-left: auto;
					margin-right: auto;
					width: 400px;

					.step {
						display: none;

						&.center {
							display: block;
						}

						h1 {
							color: $solarize-Accent-Blue;
							font-size: 24pt;
							font-weight: 700;
							margin: 0px;
							padding-top: 15px;
						}
						p {
							color: $solarize-Content-50;
							font-size: 14pt;
							font-weight: 100;
							margin: 0px;
							padding: 5px 0px;
						}

						label {
							display: none;
						}

						input {
							font-family: "clipperz-font";
							display: block;
							padding: 5px;
		//					margin-top: 5px;
							margin-bottom: 10px;
							font-size: 100%;
							font-size: 24pt;
							width: 100%;
						}

						&.TERMS_OF_SERVICE {
							.checkboxBlock {
//								margin-top: 10px;
//								margin-bottom: 10px;
//								clear: both;

								input {
									display: block;
									float: left;
//									margin: 5px;
									margin-top: 10px;
									width: 30px;
								}

								p {
									font-size: 12pt;
									font-weight: 500;
									display: block;
									text-align: left;
									margin-left: 50px;
									line-height: 1.5em;

									a {
										color: $solarize-Accent-Red;
									}
								}
							}
							
							.stepIndex {
								margin-top: 10px;
							}
						}
				
						.stepBody {
							min-height: 140px;
						}

						.stepIndex {
							
							text-align: center;
							.stepIndexItem {
								font-weight: 900;
								font-size: 28pt;
								display: inline;
								color: lightgrey;

								&.center {
									color: gray;
								}
							}
						}	

						.buttons {
							text-align: center;
							margin-top: 10px;

							.button {
								margin: 10px;
								text-align: center;
								vertical-align: middle;
								display: inline-block;
								width: 80px;

								font-weight: 900;
								line-height: 45px;
								font-size: 24px;

								&.back {
									background-color: lightgrey;

									&.step_-1 {
										visibility: hidden;
									}
								}

								&.disabled {
									background-color: #c0c0c0;
									cursor: default;
								}
								
								&.enabled {
									background-color: $main-color;
								}
							}
						}
					}
				}




			}
		}

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

		footer {
			@include flex(1);

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

			&:before {
				content: "< ";
			};

			a {
				line-height: 50pt;
			}

			.applicationVersion {
				@include flex(1);
				font-size: 8pt;
				
				$applicationVersionColor: black;

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