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

*/

//	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: 14pt;

				padding-top: 0.8em;
				padding-bottom: 0.8em;
				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;
				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;
									}
								}
							}
						}
					}
					
				}
			}
		}		
	}
	
	.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 {
	.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);
//		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;
				margin-top: 12px;
				cursor: pointer;
				color: #ccc;
				width: 40px;
				font-size: 20pt;

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

			.dragHandler {
//				@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;
/*
				@include icon-font();
				color: #aaa;

				font-size: 15pt;
				margin: $iconMargin;
				margin-left: 10px;
*/				
				&:active {
					@include cursor-grabbing();
				};
			}
			
		}
		
		.fieldValues {
			@include flex(1);
			padding: $cardViewBasePadding;

			.fieldLabel {
				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: 28px;
				line-height: 1.2em;
				@include user-select(text);

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

				border: 0px;
				width: 100%;

				&.hidden {
					font-family: clipperz-password;
					font-size: 23pt;
					line-height: 28px;
					
					&.visible {
						font-family: "clipperz-font";
						font-size: 18pt;
					}
				}
			}

		}

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

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