password-manager-mirror/frontend/delta/scss/web/style.scss

// http://pythonhosted.org/scss/


//	http://ethanschoonover.com/solarized
$solarize-Background-15: #002b36;
$solarize-Background-20: #073642;

$solarize-Content-45: #586375;
$solarize-Content-50: #657b83;
$solarize-Content-60: #839496;
$solarize-Content-65: #93a1a1;

$solarize-Background-92:	#eee8d5;
$solarize-Background-97:	#fdf6e3;

$solarize-Accent-Yellow:	#b58900;
$solarize-Accent-Orange:	#cb4b16;
$solarize-Accent-Red:		#dc322f;
$solarize-Accent-Magenta:	#d33682;
$solarize-Accent-Violet:	#6c71c4;
$solarize-Accent-Blue:		#268bd2;
$solarize-Accent-Cyan:		#2aa198;
$solarize-Accent-Green:		#859900;

$clipperz-orange:	#ff9900;
$clipperz-blue:		#1863a1;
$terminal-green:	#23ff18;

$text-color: $solarize-Content-50;
$background-color: #f8f8f8;

//------------------------------------------------------------------

$side-margin: 10px;

//==================================================================
/*
	# box-sizing: { content-box | border-box | inherit };

	# css flex box (also with LESSCSS mixin):
		- https://github.com/ProLoser/Flexbox.less;
		- https://gist.github.com/jayj/4012969

*/
//==================================================================

body {
	font-family: "Source Code Pro";
	background: $background-color url('data:image/png;base64,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
	font-size: 18pt;
	perspective: 1000;
}

a {
	cursor: pointer;
}

.button {
	min-height: 48px;
	min-width: 48px;

	color: white;
	font-size: 100%;
	font-weight: 700;
	border: 0px;

	padding-left: 20px;
	padding-right: 20px;

	background-color: $solarize-Accent-Red;
	@include transition(background-color, 0.2s, linear);
//	@include transition(all, 0.2s, linear);

	&:hover {
	};

	&:disabled {
		background-color: #c0c0c0;
		&:hover {
		};
	}
}

div.page {
	padding: 0px;
	margin: 0px;
	width: 100%;
//	text-align: center;

	div.header {
		h1 {
			font-size: 36pt;
			font-weight: 900;
			color: $clipperz-orange;
			margin: 0px $side-margin;
		}
	}

	div.content {
		margin: 0px $side-margin;
	}
}



$Loading_outer-color: $solarize-Accent-Violet;
$Loading_inner-color: lighten($Loading_outer-color, 30%);

$Loading_h1-color:			lighten($Loading_inner-color, 70%);
$Loading_h3-color:			$Loading_outer-color;

#loadingPage {
	background-image:     -ms-radial-gradient(center, circle farthest-corner, $Loading_inner-color 0%, $Loading_outer-color 100%);		/* IE10 */ 
	background-image:    -moz-radial-gradient(center, circle farthest-corner, $Loading_inner-color 0%, $Loading_outer-color 100%);		/* Mozilla Firefox */ 
	background-image:      -o-radial-gradient(center, circle farthest-corner, $Loading_inner-color 0%, $Loading_outer-color 100%);		/* Opera */ 
	background-image: -webkit-radial-gradient(center, circle farthest-corner, $Loading_inner-color 0%, $Loading_outer-color 100%);		/* Webkit (Chrome 11+) */ 
	background-image:         radial-gradient(center, circle farthest-corner, $Loading_inner-color 0%, $Loading_outer-color 100%);		/* Proposed W3C Markup */ 
	background-image:        -webkit-gradient(radial, center center, 0, center center, 495, color-stop(0, $Loading_inner-color), color-stop(1, $Loading_outer-color));	/* Webkit (Safari/Chrome 10) */ 

	div {
		vertical-align: middle;
		width: 100%;
		text-align: center;

		h1 {
			font-size: 40pt;
			color: $Loading_h1-color;
			margin-top: 5%;
			margin-bottom: 5px;
		}

		h3 {
			font-size: 18pt;
			color: $Loading_h3-color;
			margin: 0px;
		}
	}
}

#loginPage {
	form {
		label {
			display: none;
		}
		input {
			display: block;
			border: 1px solid $solarize-Background-92;
			@include border-radius(6px);
			padding: 5px;
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 100%;
			box-shadow:inset 0 0 0;
		}
		button {
		}
	}

	.registrationLink {
		color: $solarize-Accent-Orange;
		background: none;
		&:before {
			content: "> ";
		};

		a {
			color: $solarize-Accent-Orange;
		}
	}
}

#registrationPage {

	label {
		display: none;
	}
	input {
		display: block;
		border: 1px solid $solarize-Background-92;
		@include border-radius(6px);
		padding: 5px;
		margin-top: 5px;
		margin-bottom: 10px;
		font-size: 100%;
		box-shadow:inset 0 0 0;
	}


	.steps {
		.step {
			display: none;

			&.center {
				display: block;
			}

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

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

					input {
						display: block;
						float: left;
						margin: 5px;
						width: 30px;
					}

					p {
						font-size: 12pt;
						font-weight: 500;
						display: block;

						a {
							color: $solarize-Accent-Red;
						}
					}
				}
			}
			.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;
					}
				}
			}
		}
	}
}

#cardListPage {

	>div {
//		background-color: purple;
	}

	.header {
		border-bottom: 2px solid $solarize-Accent-Cyan;
		display: inline-block;
		width: 100%;
		margin-bottom: 0px;
		height: 46px;

		a.account {
			@include icon-font();
			color: $clipperz-orange;
			display: block;
			float: left;

			font-size: 28pt;
//			padding-top: 3px;
//			vertical-align: top;
			line-height: 36pt;
			padding-left: 15px;
			padding-right: 15px;
		}

		.features {
			text-align: right;
			display: block;
			float: right;
			padding-right: 5px;
			height: 100%;

			a {
				@include icon-font();
				color: $solarize-Accent-Cyan;
				display: inline-block;
				font-size: 28pt;
				padding-left: 10px;
				padding-right: 10px;
				height: 100%;
				line-height: 36pt;

				&.selected {
					background-color: $solarize-Accent-Cyan;
					color: white;
				}
			}
		}
	}

	.searchBox {
		background-color: $solarize-Accent-Cyan;
		width: 100%;
//		height: 30px;
		clear: both;

		>div {
			padding: 4px;
			padding-top: 2px;
		}

		input {
			font-size: 14pt;
			display: block;
			border: 1px solid $solarize-Background-92;
			@include border-radius(6px);
			box-shadow:inset 0 0 0;
			width: 100%;
			margin: 0px;
			color: $solarize-Content-50;
		}
	}

	.content.cardList {
		margin-left: 0px;
		margin-right: 0px;

		.listItem {
			min-height: 47px;
//			line-height: 35pt;
			line-height: 24pt;
			cursor: pointer;
			display: inline-table;
			width: 100%;
			border-bottom: 1px solid $solarize-Background-92;


			&:nth-child(odd) {
//				background-color: $solarize-Background-92;

//				&:hover {
//					background-color: $solarize-Background-97;
//				};
			}

			&:nth-child(even) {
//				&:hover {
//					background-color: $solarize-Background-97;
//				};
			}

			.labelWrapper {
				float: left;
				width: 100%;

				span {
					margin: 0px;
					margin-left: 48px;
					margin-right: 48px;
					display: block;
					padding-top: 7px;
					padding-bottom: 7px;

					color: $solarize-Accent-Red;
					font-weight: 400;
				}
			}

			.faviconWrapper {
				float: left;
				width: 48px;
				margin-left: -100%;

				.favicon {
					width: 32px;
					height: 32px;
					padding: 8px;
					vertical-align: text-bottom;
				}
			}

			.detailLinkWrapper {
				float: left;
				width: 48px;
				margin-left: -48px;
				text-align: center;
				padding-top: 7px;

				span {
					color: $solarize-Accent-Cyan;
					@include icon-font();
				}
			}
		}
	}
}

#cardDetailPage {
	.header {
		border-bottom: 2px solid $solarize-Accent-Cyan;
//		display: inline-table;
		width: 100%;
		margin-bottom: 0px;
		height: 46px;

		.backWrapper {
			float: left;
			width: 48px;
			margin-left: -100%;
			text-align: center;

			.back {
				display: inline-block;
				background-color: $solarize-Accent-Cyan;
				padding: 0px;
//				padding-top: 11px;
				line-height: 36pt;
				box-sizing: border-box;
				@include icon-font();
			}
		}

		.titleWrapper {
			float: left;
			width: 100%;
			height: 48px;
			overflow: hidden;

			.title {
				margin-left: 48px;
				margin-right: 48px;
				display: inline-block;

				padding-left: 10px;
				color: $solarize-Accent-Red;
				font-weight: 400;
				line-height: 36pt;
				white-space: nowrap;
			}
		}

		.starWrapper {
			float: left;
			width: 48px;
			margin-left: -48px;
			text-align: center;

			.star {
				font-size: 18pt;
				line-height: 35pt;
				color: $solarize-Accent-Magenta;
				@include icon-font();
			}
		}
	}

	.content {
		overflow: scroll;
		margin: 0px;

		.fields {
			.listItem {
				display: inline-table;
				width: 100%;
				font-size: 14pt;
				border-bottom: 1px solid $solarize-Background-92;

				.fieldWrapper {
					width: 100%;
					float: left;

					.fieldInnerWrapper {
						padding: 3px 10px 3px 10px;
						margin: 0px;
						margin-right: 48px;
						display: block;

						.labelWrapper {
							display: block;
							.label {
								color: $solarize-Accent-Orange;
								font-size: 10pt;
								font-weight: 300;
							}
						}
						.valueWrapper {
							display: block;
							box-sizing: border-box;

							.value {
								color: $solarize-Accent-Blue;
								font-weight: 500;

								&.PASSWORD {
									@include password-font();
									font-size: 28pt;

									&.unlocked {
										font-family: "Source Code Pro";
										font-size: 14pt;
									}
								}
							}
						}
					}
				}

				.actionWrapper {
					float: left;
					width: 48px;
					margin-left: -48px;
					text-align: center;
					cursor: pointer;

					a {
						font-size: 18pt;
						line-height: 35pt;
						color: $solarize-Accent-Cyan;
						@include icon-font();
					}
				}

				&.PASSWORD.unlocked {
					.actionWrapper {
						a {
							padding-left: 7px;
						}
					}
				}
			}
		}

		.directLogins {
			.listItem {
				min-height: 47px;
				line-height: 35pt;
				cursor: pointer;
				display: inline-table;
				width: 100%;
				background-color: $solarize-Accent-Green;
				border-bottom: 1px solid $solarize-Background-92;
				font-size: 14pt;

				.labelWrapper {
					float: left;
					width: 100%;

					span {
						margin: 0px;
						margin-left: 48px;
						margin-right: 48px;
						display: block;

//						color: $solarize-Accent-Red;
						color: white;
						font-weight: 500;
					}
				}

				.faviconWrapper {
					float: left;
					width: 48px;
					margin-left: -100%;

					.favicon {
						width: 32px;
						height: 32px;
						padding: 8px 5px;
						vertical-align: text-bottom;
					}
				}

				.directLoginLinkWrapper {
					float: left;
					width: 48px;
					margin-left: -48px;
					text-align: center;

					span {
						font-size: 18pt;
						color: white;
						@include icon-font();
					}
				}
			}

		}
	}

	.footer {
		@include icon-font();
		color: white;
		width: 100%;
		position: fixed;
		bottom: 0px;
		display: none;

//		bottom: -100px;
//		display: none;

		a {
			display: inline-block;
			text-align: center;
			padding: 11px;
			box-sizing: border-box;


			&.cancel {
				width: 33%;
				background-color: $solarize-Accent-Red;
			}

			&.save {
				width: 67%;
				background-color: $solarize-Accent-Green;
			}
		}
	}
}

#preferencePage {
	background-color: $solarize-Accent-Cyan;

	.header {
		border-bottom: 2px solid white;
		width: 100%;
		margin-bottom: 0px;
		height: 46px;

		.backWrapper {
			float: left;
			width: 48px;
			margin-left: -100%;
			text-align: center;

			.back {
				display: inline-block;
				color: $solarize-Accent-Cyan;
				background-color: white;
				padding: 0px;
				line-height: 36pt;
				box-sizing: border-box;
				@include icon-font();
			}
		}

		.titleWrapper {
			float: left;
			width: 100%;
			height: 48px;
			overflow: hidden;

			.title {
				margin-left: 48px;
				margin-right: 48px;
				display: inline-block;

				padding-left: 10px;
//				color: $solarize-Accent-Red;
				color: white;
//				font-weight: 400;
				font-weight: 500;
				line-height: 36pt;
				white-space: nowrap;
			}
		}
	}

	.content {
		color: white;

		.section {
			h4 {
				margin: 0px;
			}
			p {
				margin: 0px;
			}
		}
	}	
}
/*
PAGE FLIP: http://davidwalsh.name/css-flip

*/

.icon-spin {
	display: inline-block;
	@include animation(spin, 1s, linear, infinite);
}

@include keyframes(spin) {
	0% { @include transform(0deg, 0, 0); }
	100% { @include transform(359deg, 0, 0); }
}


/*
==================================

THREE COLUMN LAYOUT (left/right fixed size; center elastic)

------------- ~~~~~~ ------------
|     |                   |     |
|  a  |         b         |  c  |
|     |                   |     |
------------- ~~~~~~ ------------

==================================

.listItem
	.bWrapper
		.b
	.aWrapper
		.a
	.cWrapper
		.c

==================================

.listItem {

	display: inline-table;
	width: 100%;

	.aWrapper {
		float: left;
		width: <a.width>px;
		margin-left: -100%;

		.a {

		}	
	}
	
	.bWrapper {
		float: left;
		width: 100%;
	
	
		.b {
			margin: 0px;
			margin-left: <a.width>px;
			margin-right: <c.width>px;
			display: block;
		}
	}
	
	.cWrapper {
		float: left;
		width: <c.width>px;
		margin-left: -<c.width>px;
	
		.c {

		}	
	}

}
*/