/*

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/.

*/

//	ARCHIVE - RESTORE
//	
//	background-color: #800;
//	box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.3);
//	color: #ccc;
//

$cardListHeight: 48px;
$faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #eee;
//$cardToolbarBackgroundColor: #e38800;
$cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px;
$labelColor: gray;

div.cardList {
//	background-color: $yellow;

	&.loadingCard {
		li.selected {
			background-color: gray;
			border-bottom: 1px solid gray;
		}
	}

	ul {
		background-color: $cardToolbarBackgroundColor;

		li {
			cursor: pointer;

			border-bottom: 1px solid #eee;
			background-color: white;
			transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
//			padding-right:40px; // prevent new lines on selection

			white-space: pre-wrap;
			word-wrap: break-word;

			@include flexbox();
			@include flex-direction(row);

			&.selected {
//				background-color: yellow;
//				background-color: brown;
//				background-color: $clipperz-blue;
//				color: white;
				margin-left: 40px;
				padding-right: 0px; // prevent new lines on selection
				box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2);
			}
			
			&.archived {
//				background-color: pink;
				background-color: $cardArchivedColor;
				color: #999;
				
			}

			.favicon {
				width: $cardListHeight;
				@include flex(none);

				img {
					width: $faviconSize;
					height: $faviconSize;
					padding: $padding;
				}
			}

			.label {
				@include flex(auto);

				font-size: 14pt;

//				padding-top: 0.8em;
				padding-top: 16px;
//				padding-bottom: 0.8em;
				padding-bottom: 14px;
				padding-left: $padding * 2;
				padding-right: $padding;
				line-height: 1.2em;
			}
			
		}
	}

}

div.cardList.narrow {
	@include overflow-auto;
	
	&.loadingCard {
		li.selected {
//			background-color: gray;

			&:after {
				color: white;
				margin-right: 10px;
				content: "loading";
				@include animation(spin, 1s, linear, infinite);
			}
			
		}
	}

	ul {
		li {
			
			&:after {
				content: "show detail";
				@include flex(none);
				@include icon-font();
				height: 48px;
				font-size: 24pt;
				line-height: 48px;
				margin-right: 25px;
				color: #ccc;
				
			}

			&:hover {
				&:after {
					color: $clipperz-blue;
				}
			};
		}
	}

	&.EXPIRED {
		ul {
			li {
				&:after {
					content: "";
				}
			}
		}
	}
}

$cardViewBasePadding: 10px;

#cardDetailPage, .cardDetail {
	.loading {
//		height: 100%;
//		width: 100%;
//		background-color: rgba(0,0,0,0.5);
	}

	.view {
		
		&.archived {
//			background-color: pink;
			background-color: $cardArchivedColor;
		}
		
		.cardDetailToolbar {
			background-color: $cardToolbarBackgroundColor;
			color: white;

			&.narrow {
				font-size: 24pt;

				.back {
					@include icon-font();
				}
				
				.cardMenuOptions {
					@include icon-font();
					text-align: right;
					font-size: 18pt;
					padding-right: 10px;
					
				}

				.commandMenu {
//					display: none;
					.commandMenuMask {
						display: none;
					}
					
					.commandMenu {
						display: none;
					}
					
					&.show {

						.commandMenuMask {
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0);
						}

						.commandMenu {
							display: block;
							float: right;
							position: absolute;
							min-width: 200px;
							top: 48px;
							right: 5px;
							color: black;
							background-color: white;
							@include box-shadow(0px, 2px, 5px, rgba(50, 50, 50, 0.75));
					
							ul {
								@include flex-direction(column);
						
								li {
									text-align: left;
									font-size: 18pt;
									padding: 5px 10px;
									border-bottom: 1px solid black;
							
									&.disabled {
										color: #ddd;
									}
								}
							}
						}
					}
					
				}
			}
		}

		.cardField {
			textarea.fieldValue {
//				line-height: 1em;
//				height: 1.3em;
				outline: none;
			}
		}
	}
	
	.edit {
//		box-shadow: inset 2px 0 6px 0 rgba(0,0,0, 0.1);

		.cardDetailToolbar {
			background-color: $cardToolbarBackgroundColor;
			color: white;

//			box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
		}
		
		.cardField {
			border-top: 1px solid #eee;
		
			&:last-child {
				border-bottom: 1px solid #eee;
			};
			
			&:hover {
				background-color: #eee;
			}
		}	

		input, textarea {
			@include placeholder {
				font-style: italic;
				color: #ccc;
	//			font-weight:100;
			}
		}
	}
}	





.cardDetailToolbar {
	&.edit {
		li {
			font-weight: 100;
//			color: #aaa;
			
			&:hover {
				color: white;
			};
		}
		li.save {
//			color: yellow;
		}
		
		&.hasPendingChanges {
			li {
//				color: #ccc;
				font-weight: 500;
			}
			li.save {
//				color: white;
			}
		}
	}
	
	ul {
		li {
			text-align: center;
			
			&.disabled {
				color: #333;
				cursor: default;
			}
		}
	}
	
	&.narrow {
		.cardMenuOptions {
			margin-right: 5px;
		}
	}
}

.content {
//	@include user-select(none);
	
	.cardLabel {
		@include user-select(text);
		
		font-size: 24pt;
//		width: 100%;
//		padding: $cardViewBasePadding;
		padding: 20px 20px 20px 42px;
//		height: 52px;
//		line-height: 32px;
		border: 0px;
	}
	
	input.cardLabel {
		width: 100%;
		padding: 20px 20px 20px 42px;
//		height: 52px;
	}

	.tagEditor {
		padding: $cardViewBasePadding;
//		background-color: cyan;
	}

	.cardNotes {
//		width: 100%;
		border: 0px;

		font-size: 10pt;
//		font-style: italic;

		padding: 10px 42px 10px 42px;

//		background-color: gold;
		div {
			@include user-select(text);
			line-height: 1.5em;
			white-space: pre-wrap;
//			padding: $cardViewBasePadding;
		}

		textarea {
			white-space: pre-wrap;
			word-wrap: break-word;
			width: 100%;
			border: 0px;
		}
	}

	.dropArea {
//		border: 3px dashed red;
		background-color: #ccc;
		width: 100%;
		height: 40px;
	}

	.cardField {
		@include flexbox();
		@include flex-direction(row);
//		@include user-select(none);
//		background-color: rgba(255, 255, 255, 0.75);
//		border-bottom: 1px solid #eee;
		
//		background-color: lightgreen;

		&.dragged {
//			border: 4px dotted red;
			display: none;
		}
		
		.fieldEditAction {
			@include user-select(text);
			@include flex(none);
			width: 32px;
//			background-color: pink;

//			@include flexbox();
//			@include flex-direction(column);

			.removeField {
				@include align-self(flex-start);
				@include icon-font();
				
				display: block;
				margin: $iconMargin;
				margin-top: 12px;
				cursor: pointer;
				color: #ccc;
				width: 40px;
				font-size: 20pt;

				&:hover {
					color: rgb(155, 0, 0);
				};
			}



			.dragHandler3 {
//				@include dotted-background();
				@include cursor-grab();
				
				background: repeating-linear-gradient(
					0deg,
					white,
					white 2px,
					#ddd 2px,
					#ddd 3px
				);

				width: 28px;
				height: 20px;
				margin-left: 6px;
				display: block;

				&:active {
					@include cursor-grabbing();
				};
			}

			$dragHandlerHeight: 24px;
			$dragHandlerWidth: 4px;
			.dragHandler {
				display: block;
				box-sizing: border-box;
				width:  $dragHandlerWidth;
				height: $dragHandlerHeight;

				margin-left: 15px;
				border:1px solid #E8E8E8;
//				border:1px solid red;
				border-top:0;
				border-bottom:0;
				@include cursor-grab();

				&:active {
					@include cursor-grabbing();
				}

				&:before {
					display: block;
					box-sizing: border-box;
					content:'';
					position: relative;
					left:-1px;
//					right:-2px;
					height: 100%;
					width: $dragHandlerWidth;
					border:2px dotted #FFF;
//					border:2px dotted blue;
					border-top:0;
					border-bottom:0;
					z-index:2;
				}
				&:after {
					display: block;
					box-sizing: border-box;
					content:'';
					position: relative;
					top: -$dragHandlerHeight;
					left:0px;
					right:0px;
					height:100%;
					border:1px solid #EEE;
//					border:1px solid green;
					border-top:0;
					border-bottom:0;
				}
				
			}			
		}
		
		.fieldValues {
			@include flex(1);
			padding: $cardViewBasePadding;

			.fieldLabel {
				@include user-select(text);
				color: $labelColor;
//				border-bottom: 1px dotted #ddd;
				padding-bottom: 4px;
				margin-bottom: 4px;
				@include user-select(text);
				
				input {
					font-size: 12pt;
					color: $labelColor;
					border: 0px;
					width: 100%;
				}
			}

			.fieldValue {
				font-size: 18pt;
				line-height: 1.2em;
				line-height: 28px;
//				height: 1.3em;
//				outline: none;
				@include user-select(text);

				resize: none;
				white-space: pre-wrap;
				word-wrap: break-word;

				border: 0px;
				width: 100%;

				&.hidden {
					font-family: clipperz-password;
					font-size: 22pt;
					line-height: 28px;
					margin-top: -2px;

					&.visible {
						font-family: "clipperz-font";
						font-size: 18pt;
						line-height: 28px;
						margin-top: 0px;
					}
				}
			}

		}

		.fieldAction {
			@include flex(none);
//			@include align-self(center);
			@include align-self(flex-start);
			@include user-select(text);

			span {
				display: block;

				&.action {
					@include icon-font();
					color: #aaa;

					width: 20px;
					height: 20px;
					font-size: 15pt;
					margin: $iconMargin;

					cursor: default;

					&.URL {
						cursor: pointer;
					}

					&.PASSWORD {
						cursor: pointer;

						&:hover {
							color: #888;
						};

						&.active {
							color: #333;
						}
					}
				}

				&.toggleLock {
					@include align-self(flex-end);
					@include icon-font();

					display: block;
					margin: $iconMargin;
					margin-left: 9px;
					padding-top: 10px;
					cursor: pointer;
					color: #ccc;
					font-size: 18pt;

					&:hover {
						color: #888;
					};
				}
				
			}
		}
	

	}

	.newCardField {
		@include icon-font();
		margin: $iconMargin;
		cursor: pointer;
		color: #ccc;
		font-size: 20pt;

		&:hover {
			color: green;
		};
	}

	.cardDirectLogin {
		font-size: 18pt;
		padding: $cardViewBasePadding;
//		background-color: pink;
		background-color: $clipperz-orange;
		color: white;
		cursor: pointer;
		
		.directLoginLabel {
			padding-left: 42px - $iconMargin;
		}
	}
}

//=============================================================================

.passwordGenerator {
	.passwordGeneratorMask {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 100;
		
	}

	.passwordGeneratorBaloon {
		position: relative;
		$passwordBaloonColor: #333;
		$passwordBaloonBorder: 10px;
		$borderRadius: 6px;
		z-index: 101;
		
		form {
			position: absolute;
			bottom: calc(100% + 4px);
			left: 0;
			min-width: 220px;
			width: 80%;
//			padding: 10px;
			background-color: $passwordBaloonColor;
			color: #fff;
			@include border-radius($borderRadius);
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
			font-size: 9pt;

			span {
				font-size: 8pt;
				color: #ccc;
			}
		
			textarea {
				resize: none;
				white-space: pre-wrap;
				word-wrap: break-word;
				width: 100%;
			}

			.optionsWrapper {
				header {
					height: 12px;
					border-bottom: 1px solid #666;
				
					div {
						content: "options";
						@include icon-font();
//						text-align: right;
						font-size: 8pt;
						line-height: 14px;
						color: #999;
						padding-left: 5px;
					
						&:hover {
							color: white;
						}
					};
				}

				.options {
//					height: inherit;
					background-color: #888;
					padding-left: $passwordBaloonBorder;
					padding-right: $passwordBaloonBorder /* + 30px */;
					padding-bottom: 3px;
					border-bottom: 1px solid #aaa;
//					@include transition(height, 0.5s, ease-in);

					&.closed {
						height: 0px;
						padding-bottom: 0px;
						border-bottom: 0px;

						div {
							visibility: hidden;
						}
					}

					.length {
						span {
							margin-right: 3px;
				
							&:after {
								content: ':';
							}
						}
			
						input {
							background-color: #888;
							color: white;
							font-weight: bold;
							font-size: 12pt;
							border: 0px;
							text-align: right;

							&::-webkit-outer-spin-button {
								opacity: 1;
							}
						}
					}

		
					.charList {
						span {
							display: inline-block;
							line-height: 10px;
							
							&:after {
								content: ':';
							}
						}

						.charsetSets {
							display: inline-block;
							align: right;
				
//							div {
//								font-size: 8pt;
//								display: inline-block;
//								border: 1px solid gray;
//								height: 20px;
//								line-height: 20px;
//								padding: 0px 4px;
//								margin: 0px 2px;
//								@include border-radius(5px);
//				
//								&.selected {
//									border: 1px solid #aaa;
//									background-color: gray;
//								}
//							}

							label {
								span {
									font-size: 10pt;
									color: #eee;

									&:after {
										content: '';
									}
								}
								
								padding-right: 5px;
								cursor: pointer;
							}
						}
			
						textarea {
							color: gray;
							min-height: 34px;

							&:focus {
								outline: 0;
							}
						}
					}
				}
			}
	
			.passwordValue {
				@include flexbox();
				@include flex-direction(row);
				padding: $passwordBaloonBorder;
				padding-top: 3px;
//				padding-bottom: $passwordBaloonBorder - $borderRadius;
				padding-bottom: 0px;

				.passwordWrapper {
					@include flex(auto);

					textarea {
						font-size: 12pt;
						font-weight: bold;
						border: 0px;
						
						&:focus {
							outline: 0;
						}
					}
					
					.entropyWrapper {
						width: 100%;
						height: 2px;

						.entropy {
							height: 100%;
							background-color: white;
							float: right;
						}
					}
				}
			
				.button {
					@include flex(none);
					@include icon-font();
					padding-left: 10px;
					font-size: 14pt;
					font-weight: bold;
					color: #999;
					width: 20px;

					&:hover {
						color: white;
					};
				}
			}
			
			$setValueColor: lighten($passwordBaloonColor, 10%);
			$setValueHoverColor: lighten($passwordBaloonColor, 40%);
			.setValue {
				background-color: $passwordBaloonColor;
//				height: $borderRadius;
				height: 10px - $borderRadius;
				border-bottom: $borderRadius solid $setValueColor;
				border-bottom-left-radius: $borderRadius;
				border-bottom-right-radius: $borderRadius;
				
				$arrowSize: 6px;
				$hoverArrowSize: 10px;
				&:after {
					content:'';
					position:absolute;
					top:100%;
	//				left:10px;
					left:10%;
					margin-left: 0px;
					width:0;
					height:0;
					border-top:$arrowSize solid $setValueColor;
					border-left:$arrowSize solid transparent;
					border-right:$arrowSize solid transparent;
				}

				&:hover {
					border-color: $setValueHoverColor;
					box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);

					&:after {
						border-top:$hoverArrowSize solid $setValueHoverColor;
						border-left:$hoverArrowSize solid transparent;
						border-right:$hoverArrowSize solid transparent;
						margin-left: -($hoverArrowSize - $arrowSize) / 2;
					}
				}
			}
		}
	}
}