password-manager/frontend/delta/scss/style/card.scss

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

	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: 18pt;

				padding-top: 0.5em;
				padding-bottom: 0.5em;
				padding-left: $padding;
				padding-right: $padding;
			}
			
		}
	}

}

div.cardList.narrow {
	@include overflow-scroll;
	
	&.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;
			}
		}
	}
	
	&.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;
							
								}
							}
						}
					}
					
				}
			}
		}		
	}
	
	.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 {
			&:hover {
				background-color: #eee;
			}
		}	
	}
}	





.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;
		}
	}
	
	&.narrow {
		.cardMenuOptions {
			margin-right: 5px;
		}
	}
}

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

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

	.cardNotes {
		padding: $cardViewBasePadding;
		width: 100%;
		border: 0px;

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

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

//		background-color: gold;
	}

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

	.cardField {
		@include flexbox;
		@include flex-direction(row);
		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 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;
				cursor: pointer;
				color: #ccc;
				font-size: 20pt;

				&:hover {
					color: rgb(155, 0, 0);
				};
			}
			
			.toggleLock {
				@include align-self(flex-end);
				@include icon-font();

				display: block;
				margin: $iconMargin;
				margin-left: $iconMargin * 2;
				cursor: pointer;
				color: #ccc;
				font-size: 20pt;

				&:hover {
					color: #888;
				};
			}
		}
		
		.fieldValues {
			@include flex(1);
			padding: $cardViewBasePadding;

			.fieldLabel {
				color: $labelColor;
				border-bottom: 1px dotted #ddd;
				padding-bottom: 4px;
				margin-bottom: 4px;
				
				input {
					font-size: 12pt;
					color: $labelColor;
					border: 0px;
					width: 100%;
				}
			}

			.fieldValue {
				font-size: 18pt;
				line-height: 28px;
				@include user-select(text);

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

				border: 0px;
				width: 100%;

				&.hidden {
					font-family: clipperz-password;
					font-size: 23pt;
				}
			}

		}

		.fieldAction {
			@include flex(none);
//			@include align-self(center);
			@include align-self(flex-start);
		}
	
		.action {
			@include icon-font();
			color: #aaa;

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

	}

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