/*

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;
$lightRed: #dd1111;
$darkRed: #aa2222;

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;
			}
			
			.attachmentsCount {
				@include icon-font();
				color: #aaa;
				padding-right: 8px;
				padding-left: 6px;
				padding-top: 18px;
			}
			
		}
	}

}

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;

			&.top {
			 	display: none; /* Issue #203 */
			}

			&.narrow {
				@include transition(height, 2.5s, ease-in);

				&.commands {
					height: 12px;

					div {
						display: none;
						visibility: hidden;
					}
				}
			}
		}
		
		.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;
			}
		}

		.cardDirectLogin {
			.removeDirectLogin {
				@include icon-font();

				display: inline-block;
				margin-left: $iconMargin;
//				margin-top: 12px;
				cursor: pointer;
				color: white;
				width: 40px;
				font-size: 20pt;

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

			.directLoginLabel {
				vertical-align: bottom;
//				padding-left: 17px;
				padding-left: 0px;
			}
		}

		.cardUploadAttachments {
			border: 2px dashed #ccc;
			margin: 0 1em 1em 1em;
			padding: 1em;
			text-align: center;
			margin-left: 44px;

			p {
				margin-bottom: 1em;
			}

			.attachmentInput {
				display: none;
			}

			.button {
				display: inline-block;
				color: white;
				background-color: #ff9900;
				font-size: 14pt;
				padding: 10px 14px;
			}
		}
	}
}	

.cardAttachmentWrapper {
	border-bottom: 3px double #eee;
}

.cardAttachments {

	padding-bottom: 10px;

	h3 {
		padding-top: 14px;
		padding-bottom: 14px;
		color: gray;
		font-size: 12pt;

		&:before {
			@include icon-font();
			content: "attachment";
			padding-left: 13px;
			padding-right: 13px;
			padding-top: 0px;
			padding-bottom: 0px;
			font-weight: bold;
			font-size: 14pt;
			display: inline-block;

			transform: scaleX(-1);
		};
	}

	.skippedFiles {
		margin: 1em 1em 1em 44px;
		color: white;
		background: $clipperz-orange;
		padding: 1em;
		font-size: .8em;

		ul {
			padding: 1em 1em 1em 0;
			list-style-type: none;

			li {
				.filename {
					font-weight: bold;
				}
			}
		}

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

	.attachmentList {
		margin-left: 44px;
		padding-right: 8px;

		li {
			@include flexbox();
			@include flex-direction(row);
			padding-bottom: 6px;

			&.broken {
				span {
					color: $lightRed !important;
				}
			}
		
			/*cursor: pointer;*/

			.contentType {
				@include flex(none);
				width: 30px;
				@include icon-font();
				color: gray;
			}
		
			span {
				/*border:1px solid black;*/
				line-height: 30px;
				display: inline-block;
			}

			.meta {
				@include flex(auto);
				text-align: left;
				font-size: 14pt;

				width: 100%;	/* Hack to fix long names behaviour */
				overflow: hidden;

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					white-space: pre;
				}

				.size {
					display: block;
					color: #aaa;
					font-size: 8pt;
					line-height: 8pt;
				}
			}

			.status {
				width: 100px;
				text-align: right;

				.waiting {
					white-space: pre;
					font-size: 10pt;
					color: grey;
				}
			}

			.actions {
				@include userSelectNone();

				display: inline-block;
				width:30px;

				a {
					display: inline-block;
					width: 30px;
					cursor:pointer;
					font-size: 20pt;
					color: #aaa;
					margin-top:1px;

					&.cancel, &.remove {
						@include icon-font();
						&:hover {
							color: $lightRed;
						};
					}

					&.download {
						&:hover {
							color: $clipperz-blue;
						};
					}
				}
			}

			.progress {
				width: 50px;
				text-align: center;

				.radialProgressIndicator {
					width: 25px;
					height: 30px;

					.background {
						fill: white;
					}

					.progress {
						fill: black;
					}

					.border {
						fill: black;
					}

					&.waiting {
						.border {
							fill: #aaa;
						}
					}
				}
			}
		}
	}
}

.edit {
	width:100%;
	
	.cardDetailToolbar {
		&.commands {
			div, ul {
				display: none;
				visibility: hidden;
			}
		}
	}
}

.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;
		padding: 13px 20px 13px 42px;
//		height: 52px;
	}

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

		/* I considered this specific to the card View/Edit page: should it go in tagEditor.scss instead? */
		ul {
			width: calc(100% - 31px);
			flex-wrap: wrap;
			padding-left: 31px;

			&:before {
				margin-left: -32px;
			}

			li {
				.tagLabel {
					max-width: 500px; // Hack: length computation breaks when the content is very long
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: pre;
				}
			}
		}

		&.readOnly {
			ul {
				li {
					display: inline-block;
					max-width: 30%;

					.tagLabel {
						display: inline-block;
						width: 100%;
					}
				}
			}
		}

		&.readWrite {
			ul {
				li {
					// Uniform size
					/*display: inline-flex;*/
					/*width: 30%;*/

					// Variable size
					display: inline-block;
					max-width: 30%;

					.tagLabel {
						width: calc(100% - 30px);
						width: 100%;
						display: inline-block;
					}

					input {
						width: 100%;
					}
				}
			}
		}
	}

	.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;
		}
		
		&.draggedTouch {
			position: absolute;
			width: 100%;
			background-color: white;
			opacity: .8;
		}
		
		.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: $lightRed;
				};
			}



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

			.dragHandlerContainer {
				width: 40px;
				height: 25px;
				display: block;

				.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: 21px;
					height: 20px;
					font-size: 15pt;
					margin: $iconMargin;

					margin-right: 16px;

					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 {
		height: 115px;
		border-bottom: 3px double #eee;
		cursor: pointer;

		.fieldGhostShadow {
//			width: 100%;

			padding-top: 11px;
			padding-bottom: 11px;
			padding-left: 42px;
			padding-right: 49px;

//			float: left;
//			clear: both;

			.label {
				background-color: white;
				height: 25px;
				margin-bottom: 8px;
			}
			
			.value {
				background-color: white;
				height: 58px;
			}
		}

		.addNewFieldButton {
			margin-top: -90px;
			
			width: 70px;
			font-size: 50pt;

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

			@include icon-font();
//			margin: $iconMargin;
			color: #eee;
//			border-radius: 30px;

		}

		&:hover {
			background-color: #f5f5f5;

			.fieldGhostShadow {
			}

			.addNewFieldButton {
				color: #7c7;
			}
		};

	}

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

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

.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);
			bottom: 4px;
			left: 0;
			min-width: 220px;
			width: 80%;
			max-width: 400px;
//			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;

			$arrowSize: 5px;
			&:after {
				content:'';
				position:absolute;
				top:100%;
				left:10%;
				margin-left: 0px;
				width:0;
				height:0;
				border-top:$arrowSize solid $passwordBaloonColor;
				border-left:$arrowSize solid transparent;
				border-right:$arrowSize solid transparent;
			}

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

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

				.options {
//					height: inherit;
//					background-color: #888;
					background-color: white;
					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;
						}
					}

					span {
						color:black;
					}

					.length {
						padding-top: 2px;

						span {
							margin-right: 3px;

							&:after {
								content: ':';
							}
						}

						input {
//							background-color: #888;
//							color: white;

							font-weight: bold;
							font-size: 10pt;
//							border: 0px;
							text-align: right;
							max-width: 50px;

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

					.charList {
						padding-top: 2px;

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

						.charsetSets {
							display: inline-block;
							align: right;

							label {
								span {
									font-size: 10pt;
									color: black;

									&:after {
										content: '';
									}
								}

								padding-right: 5px;
								cursor: pointer;
							}
						}

						textarea {
							color: gray;
							min-height: 34px;
							border:1px solid black;

							&:focus {
								outline: 0;
							}
						}
					}
				}
			}
	
			.passwordValue {
				@include flexbox();
				@include flex-direction(row);
				@include align-content(stretch);

				padding: $passwordBaloonBorder;
				padding-top: 3px;
				padding-right: 0px;
				padding-left: 0;

				.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();
					font-size: 14pt;
					font-weight: bold;
					text-align: left;
					padding-left: .5em;
					color: #999;
					width: 30px;
					height: inherit;
					line-height: 35px;
					
					&.setPasswordValue {
						background-color: lighten($passwordBaloonColor, 5%);
					}

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

