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;

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

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

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

			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;
					}
				
					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;
							};
						}
					}
				}
			}
		}
	
		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;
//		padding: 20px;

		header {
			display: none;
		}
		
		.extraFeature {
			.header {
//				padding-bottom: 20px;

				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);
					}

					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;
				}
			}
		}


		.OTP {
			height: 100%;

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

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

				a {
					@include icon-font();
					cursor: pointer;
					font-size: 18pt;
					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 {

				.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 {
						width: 40px;
						text-align: center;
//						@include align-self(center);

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

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

						.otpLabel {
							
							span {
								font-size: 12pt;
								color: gray;
								padding: 4px 0px 4px 0px;
								line-height: 1.3em;
								cursor:pointer;
								display: block;
							}

							input {
								font-size: 12pt;
								color: gray;
								width: 100%;
								border: 0px;
								padding: 2px;
								padding-left: 0px;
								margin: 0px;
								margin-bottom: 1px;
								background-color: #333;
							}
//							.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%;
							}
						}

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

							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 {
						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;
//											color: red;
										}
									}
								}

								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;
							}
						}
					}
				}
*/
			}
		}

/*
		.changePassphraseForm {
			label {
				display: block;
			}
			
			input {
				display: block;
			}
		}
		
		.deleteAccountForm {
			margin-top: 1em;
		
			label {
				display: block;
			}
			
			input {
				display: inline-block;
				margin-right: 1em;
				margin-bottom: 1em;
			}
			
			.confirmCheckbox {
				display: inline-block;
			}
		}
*/
		
		form {
			input.valid + .invalidMsg, input.empty + .invalidMsg, input:focus + .invalidMsg, input.invalid:focus + .invalidMsg {
				visibility: hidden;
			}
			
		}
	}
}			
			
.mainPage.narrow {
	#extraFeaturesPanel {
		.extraFeatureContent {
			header {
				display: block;
				height: 48px;
				border-bottom : 1px solid white;

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

					font-size: 16pt;
					padding-top: 15px;
					padding-left: 10px;
				}
			}
		}
	}
}