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

*/

#extraFeaturesPanel {
	.extraFeatureIndex {
		background-color: $main-alternate-color;
		color: $main-alternate-text-color;

		header {
			text-align: right;
			height: 48px;
			font-size: 24pt;

			.button {
				@include icon-font();

				.label {
					padding-top: 8px;
					padding-right: 8px;
				}
			}
		}

		& > div {
			border-top: 1px solid white;

			& > ul > li {
//				padding: 10px;
//				padding-right: 0px;
				border-bottom: 1px solid white;
				
				&.link {
					border-bottom: 0px;
					padding: 10px;
					cursor: pointer;
				}

				& > h1 {
					cursor: pointer;
					font-size: 16pt;
					padding: 10px;
				}

				& > ul {
//					padding-left: 10px;
				}

				&:last-child {
//					border-bottom: 1px solid white;
					border-bottom: 0px;
				}
			
				&.closed > ul {
					display: none;
					visibility: hidden;
				}
				
				&.closed {
					.address {
						display: none;
					}
				}
			}

			ul {

				li {
					& > ul > li {
						padding: 10px;
						padding-left: 20px;
						padding-right: 0px;
						cursor: pointer;
					
						&.selected {
							background-color: #333;
//							color: black;
						}

						& > div {
							padding: 4px;
						}
						
						&.offlineCopy {
							cursor: default;
						}
					}

					&.open {
					
					}

					&.close {
					
					}

//					h1 {
//						cursor: pointer;
//						font-size: 16pt;
//						padding: 10px;
//					}
				
					h2 {
//						cursor: pointer;
						font-weight: 300;
						font-size: 14pt;
					}
				
					h3 {
						font-size: 12pt;
					}
				
					p {
						font-size: 10pt;
						font-weight: 100;
						padding-bottom: 5px;
						line-height: 1.2em;
					}

					.address {
						padding-bottom: 10px;

						span {
							display: block;
							font-size: 12pt;
							padding-left: 14pt;
							line-height: 1.3em;
						}
					}
				
					a.button {
						@include border-radius(2);
						display: inline-block;
						padding: 10px 16px;
						background-color: green;
						color: lightgrey;
					
						&:hover {
							color: white;
						};
					
						&.disabled {
							background-color: #999;

							&:hover {
								color: white;
							};
						}
					}
					
					&.link {
						h2 {
						 	&:after {
								@include icon-font();
								content: "url";
								padding-left: 4px;
								color: gray;
							}
						};
					}

					&.lock-logout {
						h2	{
							padding: 10px;
							font-size: 16pt;
							cursor: pointer;

							&:after {
								@include icon-font();
								color: gray;
								padding-left: 10px;
							}

							&:hover {
								&:after {
									color: white;
								}
							}

							&.lock {
								&:after {
									content: "lock";
								}
							}
							&.logout {
								&:after {
									content: "logout";
								}
							}
						}
					}
				}
			}
		}
	
		footer {
			$applicationVersionColor: #999;
			font-size: 8pt;
			padding: 5px 5px 5px 5px;
			border-top: 1px solid $applicationVersionColor;

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

	.extraFeatureContent {
		border-right: 1px solid #222;
		color: white;

		header {
			display: none;
		}
		
		.extraFeature {
			.header {

				h1 {
					font-size: 20pt;
				}
			
				p {
					padding: 10px 0px;
				}
			}

			form {
			
				label {
					display: none;
				}

				input {
					$border-size: 0px; //	2px;

					display: block;
					font-size: 18pt;
					margin-bottom: 8px;
					padding: (6px - $border-size) (10px - $border-size);
					border: $border-size solid white;
					width: 350px;
					color: black;

					&.invalid {
						border: $border-size solid $clipperz-orange;
						color: gray;
					}
				}
			
				p {
					@include flexbox();
					@include flex-direction(row);
					padding-top: 8px;

					input {
						width: 30px;
						@include flex(auto);
					}

					input[type="checkbox"] {
						flex-grow: 0;
					}

					label {
						@include flex(auto);
						font-size: 12pt;
						display: block;
						cursor: pointer;
						line-height: 1.5em;
					}
				}

				button {
					font-family: "clipperz-font";

					color: white;
					font-size: 14pt;
					border: 0px;

					margin-top: 20px;
					padding: 6px 10px;

					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 {
						};
					}
				}
//				input.valid:focus {
//					border: 2px solid $clipperz-blue;
//				}
			}

			ul {
				color: white;
				
				li {
					padding-bottom: 30px;
				}
			}
			
			h3 {
				font-size: 18pt;
			}
			
			.description {
//				max-width: 500px;
				padding: 10px 0px 20px 0px;
//				padding-bottom: 20px;
				
				p {
					font-size: 10pt;
					margin-bottom: 7px;
					line-height: 1.4em;
					color:#bbb;
					
					em {
						text-decoration: underline;
					}
					
					&.warning {
						font-weight: bold;
						color: white;
					}
				}
			}

			.button {
				display: inline-block;

				color: white;
				background-color: $main-color;

				font-size: 14pt;

				border: 1px solid white;
				padding: 10px 14px;
				
				&:after {
				};
				
				&.disabled {
					background-color: #c0c0c0;
					cursor: default;
				}
			}
		}

		.preferences {
			$semicolonColor: gray;
			$disabledTextColor: gray;

			h3 {
				border-bottom: 1px solid white;
			}
			
			span.clickable, input[type='checkbox'] {
				cursor: pointer;
			}
			
			input[type='text'] {
//				font-size: 18pt;
				font-size: 14pt;
//				padding: 6px 10px;
				padding: 2px 4px;
				border: 0px;
				
				color: white;
				background-color: black;
				border-bottom: 1px solid #333;
//				border: 0px solid white;
			}
			
			select {
				font-size: 12pt;
			}

			.row {
				$firstColumnWidth: 40px;
				padding-top: 4px;
				
				&.one {
					padding-left: $firstColumnWidth;
				}
				
				&.two {
					@include flexbox();
					@include flex-direction(row);

					.col.one {
						@include flex(none);
						width: $firstColumnWidth;
					}
					
					.col.two {
						@include flex(auto);
					}
				}

				&.lockEnabled, &.donationReminder {
					input {
						margin-left: auto;
						margin-right: auto;
						display: block;
					}
				}

				&.lockTimeout {
					.disabled {
						color: $disabledTextColor;
						input {
							color: $disabledTextColor;
							pointer-events:none;
//							border-bottom: 1px solid $disabledTextColor;
						}
					}
					
					.timeUnit {
						padding-left: 8px;
						&:after {
							content: "";
						};
					}
				}

				&.lockTimeout, &.passwordLength {
					span {
						&:after {
							color: $semicolonColor;
							content: ": ";
						};
					}
					input {
						width: 50px;
						text-align: right;
					}
					
					.sizeUnit {
						padding-left: 8px;
						&:after {
							content: "";
						};
					}
				}
				
				&.passwordCharSets {
					p {
						padding-bottom: 2px;

						&:after {
							color: $semicolonColor;
							content: ":";
						};
					}

					ul {
						li {
							padding-bottom: 0px;
							padding-left: 20px;
							padding-top: 1px;
							
							span {
								display: inline-block;
								width: 58px;

								&:after {
									color: $semicolonColor;
									content: ":";
								};
							}
						}
					}
				}
			}

			span {
				vertical-align: middle;
			}
			input {
				vertical-align: middle;
			}
		}

		.OTP {
			.header {
				.description {
					padding-bottom: 0px;
					
					p {
						margin-bottom: 0px;
						padding-bottom: 0px;
					}
				}
			}

			.actions {
				padding-left: 5px;
				padding-top: 6px;

				a {
					@include icon-font();
					cursor: pointer;
					font-size: 22pt;
					line-height: 1.1em;
					
					&:hover {
						color: green;
					};
				}
			}

			.selectMenu {
				margin-top: 1em;

				li {
					display: inline-block;
					margin-right: 1em;
					padding:1em 0;

					//					a {
//						text-decoration: underline;
//						cursor: pointer;
//					}
				}
			}

			.otpList {
				padding-top: 10px;

				.otpDetail {
					$detailPadding: 5px;
					$detailMargin: 4px;
					$labelPadding: 5px;
					
					@include flexbox();
					@include flex-direction(row);

					border: 1px solid #222;
					@include border-radius(5px);

					padding: $detailPadding 0;
					margin: $detailMargin 0;

					.otpAction {
						@include flex(none);

						width: 36px;
//						text-align: center;
//						@include align-self(center);

						a {
							@include icon-font();
							cursor: pointer;
							font-size: 16pt;
							line-height: 1.1em;
							display: inline-block;
							padding-left: 7px;
							width: inherit;
							
							&:hover {
								color: red;
							};
						}
					}

					.otpInfo {
						@include flex(auto);

						.otpPassword {
							font-size: 14pt;
							line-height: 1.3em;
							@include user-select(text);
						}

						.otpLabel {
							@include flexbox();
							@include flex-direction(row);
							margin-right: 5px;

							&:before {
								@include flex(none);
								content: 'label';
								@include icon-font();
								font-style: normal;
								padding-right: 4px;
								color: gray;
								line-height: 20pt;
//								display: inline-block;
							};

							span {
								@include flex(auto);
								font-size: 12pt;
								color: #333;
								padding: 4px 0px 4px 0px;
								line-height: 1.3em;
								cursor:pointer;
//								display: inline-block;
								font-style: italic;
								
								&.customLabel {
									color: gray;
									font-style: normal;
								}
							}


							input {
								@include flex(auto);
								font-size: 12pt;
								color: gray;
								width: 100%;
								border: 0px;
								padding: 2px;
								padding-left: 0px;
								margin: 0px;
								margin-bottom: 1px;
								background-color: #333;
								
								@include placeholder {
									font-style: italic;
									color: #444;
								}
								
//								display: inline-block;
							}
//							.undefinedLabel {
//								color: gray;
//							}
						}
						
						.otpStatusInfo {
							font-size: 8pt;
							color: gray;
							
							span {
								padding-right: 10px;
							}
						}
					}

					&.REQUESTED, &.USED {
						background-color: #222;

						.otpPassword {
//							color: gray;
						}
					}
					
				}
			}
			.button {
//				margin:1em 1em 0 0;
			}

			table {
				tr {
					td {
						a {
							font-size: small;
							padding: 0 1em;
							text-decoration: underline;
							cursor: pointer;
						}
					}
				}
			}
		}
		
		.dataImport {
			
			.content {
				display: block;
				height: 100%;
				@include flexbox();
				@include flex-direction(column);

				ul.stepNavbar {
					@include flex(none);
					padding-top: 5px;
					padding-bottom: 5px;
					text-align: center;
					font-size: 24pt;

					&.Input {
						display: none;
					}
				
					li {
						display: inline-block;
						padding: 0px;
						padding-right: 10px;
//						margin-right:1em;
					
						&.disabled {
							color: gray;
						}
					
						&.active {
//							text-decoration: underline;
						}
					}
				}
			
				.step {
					@include flex(auto);
					@include overflow-auto();

					&.Input {

						.description {
							
							p {
								width: 100%;
								margin: 0;
							}
						}

						form {
							.dropArea {
								width: calc(100% - 6px);
								text-align: center;
								height: inherit;
								line-height: 2em;
								padding: 1em 0;
								margin-bottom: .5em;
				
								border: 3px dashed white;
								background: black;

								.button {
									margin: .5em 0;
									padding: 0px 14px;

									font-size: 12pt;
							}
							}

							p {
								margin: 10px 50%;
						
								&.error {
									color: red;
									font-size: 10pt;
									font-style: italic;
									margin: 0px 0px 10px 0px;
								}
							}
						

							textarea {
								width:100%;
								min-height:100px;
								display: block;
								margin: 1em 0;
								border: 0;
							}
						}
					}

					&.Preview {
//						overflow: hidden;
						@include flexbox();
						@include flex-direction(column);
						
						div.preview {
							@include flex(auto);
							@include flexbox();
							@include flex-direction(column);

							div.selectButtons {
								@include flex(none);
								color: gray;
								
								span {
									padding-right: 10px;
								}
								
								a {
									cursor: pointer;
//									padding-right: 4px;
									color: white;
									font-weight: bold;
									
									&:after {
										font-weight: normal;
										color: gray;
										content: " - ";
									};

									&:last-child:after {
										content: "";
									}
								}
							}
							
							div.tagButtons {
								@include flex(none);
								color: gray;

								padding-top: 5px;
								padding-bottom: 5px;
								border-bottom: 1px solid #333;

								label {
									cursor: pointer;
									line-height: 1.5em;
								}

								input {
									font-family: "clipperz-font";
									font-size: 12pt;
									color: white;
									background-color: black;
									border: 0px;
									border-bottom: 1px solid #333;
									outline: none;
									margin-left: 5px;
								}
							}

							ul {
								@include flex(auto);
								@include overflow-auto();

								li.card {
									@include flexbox();
									@include flex-direction(row);
									padding-top: 15px;
									padding-bottom: 0px;
									border-bottom: 1px solid #333;
						
									&.archived {
										background-color: #333;
									}

									input {
										width: 30px;
										margin-top: 6px;
										@include flex(none);
									}
						
									div.cardContent {
										@include flex(auto);
										@include flexbox();
										@include flex-direction(column);
										height: auto;
							
										h3 {
											font-size: 24pt;
											padding-bottom: 6px;
										}
								
										ul.tagList {
											li {
												display: inline-block;
												padding-right: 10px;
												padding-bottom: 5px;

												&:before {
													content: 'tag';
													@include icon-font();
													font-size: 10pt;
													padding-right: 5px;
													line-height: 28px;
													color: #ccc;
												}
											}
										}
								
										dl {
											dt {
												font-size: 12pt;
												color: gray;
												line-height: 16pt;
											}
									
											dd {
												font-size: 16pt;
												color: white;
												line-height: 24pt;
												padding-bottom: 6pt;
										
												&.PASSWORD {
													font-family: clipperz-password;
												}
											}
										}

										p {
											font-size: 10pt;
											padding-top: 10px;
											padding-bottom: 10px;
										}
									}
								}
							
							}
						}
					}
					
					&.Import {
						h5 {
							padding-bottom: 15px;
						}
					}
					table.csvTable {
						width: 100%;
						color: white;
						border-collapse: collapse;
						
						thead {
							background-color: gray;
							
							th {
								align: left;
							}
						}
						
						tbody {
							td {
								align: right;
							}
						}
						
						td, th {
							border: 1px solid #999;
							padding: 0.5rem;
							
							&.PASSWORD {
								font-family: clipperz-password;
								font-size: 14.9pt;
								line-height: 10pt;
							}
						}
						
						th {
							background-color: #666;

							&.title {
								background-color: #888;
							}

							&.notes {
								background-color: #aaa;
							}

							input {
								color: white;
								border: 0px;
								padding: 0px;
								font-size: 12pt;
								font-weight: bold;
								background-color: inherit;
							}
						}
					}
				
				}
			
				.buttons {
					@include flex(none);
					text-align: center;
					padding-top: 10px;
				
					&.Input {
						.button.back {
							visibility: hidden;
						}
					}

					&.Import {
						.button.next {
							visibility: hidden;
						}
					}

					.button {
//						border: 0px;
						margin: 0px 5px;
						span {
							display: none;
						}
					
						&.back {
							background-color: #c0c0c0;
							&:before {
								content: '<<';
							}
						}
					
						&.next {

							&.DISABLED {
								background-color: #d3d3d3;
							}

							&:after {
								content: '>>';
							}
						}
					}
				}
/*
				.csvTable {
					background: white;
					margin: 1em 0;
				}
			
			
				.button {
					margin-right:1em;
				}
			
				.jsonPreview {
					width: 100%;
					height:80%;
					overflow: auto;
					margin-top:1em;
				
					h3 {
						font-weight:bold;
					}
				
					ul {
						margin-bottom:1em;
						padding-left:1em;
					
						li {
							.label {
								font-weight:bold;
							}
						}
					}
				}
*/
			}
		}

		form {
			input.valid + .invalidMsg, input.empty + .invalidMsg, input:focus + .invalidMsg, input.invalid:focus + .invalidMsg {
				visibility: hidden;
			}
			
		}
	}
}			
			
.mainPage.narrow {
	#extraFeaturesPanel {
		.extraFeatureContent {
			header {
				border-bottom : 1px solid white;

				.button {
					@include icon-font();
					cursor: pointer;
					color: white;

					font-size: 16pt;
					padding-top: 15px;
					padding-left: 10px;
				}
			}
			
			.extraFeature {
			}
		}
		
		&.fullOpen {
			.extraFeatureContent {
			}
		}
	}
}