snappymail/dev/Styles/MessageList.less

html.rl-no-preview-pane {

	.messageList.message-selected {
		display: none;
	}
}

.messageList {

	.toolbar {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 30px;
		padding: 10px @rlMainBorderSize;
		z-index: 102;
	}

	.b-footer {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 30px;
		padding: 7px;
		z-index: 101;

		background-color: #eee;
//		#gradient > .vertical(#f4f4f4, #dfdfdf);

		.border-bottom-right-radius(@rlMainBorderRadius);
		.border-bottom-left-radius(@rlMainBorderRadius);

		.e-quota {
			display: inline-block;
			margin-top: 5px;
			margin-left: 5px;
			font-size: 18px;
			cursor: help;
		}
		.e-quota:hover {
			border-bottom: 1px dashed #333;
		}
	}

	.inputSearch {
		width: 258px;
	}

	.btn.buttonMoreSearch {
		padding-left: 8px;
		padding-right: 8px;
	}

	.b-message-list-wrapper {
		position: absolute;
		top: 50px;
		right: 0;
		left: 0;
		bottom: @rlBottomMargin;

		border: @rlMainBorderSize solid @rlMainDarkColor;

		.box-shadow(@rlMainShadow);
		.border-radius(@rlMainBorderRadius);
		z-index: 101;
	}

	.second-toolbar {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 29px;
		padding: 10px 8px 10px 11px;
		z-index: 101;

		background-color: #eee;
//		#gradient > .vertical(#f4f4f4, #dfdfdf);

		.border-top-right-radius(@rlMainBorderRadius);
		.border-top-left-radius(@rlMainBorderRadius);

		.checkboxCkeckAll {
			margin: 5px 0;
		}
	}

	.mainDelimiter {
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
		z-index: 101;
		background-color: #bbb;
	}

	.toolbarDelimiter {
		top: 49px;
	}

	.footerDelimiter {
		bottom: 44px;
	}

	.b-content {
		position: absolute;
		top: 50px;
		bottom: 45px;
		left: 0;
		right: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 101;

		.box-sizing(border-box);

		background-color: #fff;

		.content {
			-webkit-overflow-scrolling: touch;
		}

		.listClear {
			color: #333;
			text-align: center;
			padding: 10px;
			font-size: 14px;
			line-height: 13px;
		}

		.listEmptyList, .listEmptyListLoading, .listDragOver, .listError, .listEmptySearchList {
			color: #999;
			text-align: center;
			padding: 60px 10px;
			font-size: 24px;
			line-height: 30px;

			.e-icon {
				font-size: 24px;
				line-height: 30px;
			}
		}

		.listDragOver {
			max-height: 0;
			overflow: hidden;
			padding: 0 10px;
		}

		.listDragOver.viewAppendArea {
			max-height: 120px;
			padding: 30px 10px;
		}
		.listDragOver.dragOverEnter {
			background-color: #e0fdda;
			color: #333;
		}

		.listError {
			color: #DA4F49;
		}

		.listSearchDesc {
			font-size: 20px;
			padding: 20px;
			border-bottom: 1px solid #eee;
		}

		.delimiter {
			display: block;
			height: 1px;
			background-color: #e5e5e5;
		}

		.messageListItem:last-child {
			border-bottom: 1px solid #e5e5e5;
			&.selected {
				border-bottom: 1px solid #bfd5ef;
			}
		}

		.fullThreadsParent {
			height: 25px;
			padding: 3px 5px;
			background-color: #f4f4f4;
			text-align: center;
		}

		.messageListItem {

			position: relative;
			height: 52px;
			max-height: 60px;
			font-size: 12px;
			line-height: 21px;
			overflow: hidden;
			cursor: pointer;

			margin: 0px;
			border: 0px solid transparent;
			z-index: 100;

			background-color: #f9f9f9;

/*			&:nth-child(even) {
				background-color: #f3f3f3;
			}*/

			.delimiter {
				position: relative;
				display: block;
				height: 1px;
				background-color: #999;
				.opacity(20);
			}

			.wrapper {
				padding: 5px 0;
			}

			.sidebarParent {
				display: inline-block;
				width: 6px;
				background-color: #eee;
				float: left;
				height: 100%;
			}

			&.e-single-line {
				height: 35px;
			}

			&.e-single-line .wrapper {
				line-height: 25px;
				padding: 5px;
			}

			&.new {
				max-height: 0px;
			}

			&.deleted {
				max-height: 0px;
				border-color: transparent !important;
			}

			.checkedParent {
				display: inline-block;
				float: left;
				margin-top: 11px;
				padding: 0 8px 0 6px;
				font-size: 14px;
			}

			&.e-single-line .checkedParent {
				margin-top: 1px;
			}

			.flagParent {
				display: inline-block;
				float: right;
				padding: 0 8px 0 5px;
			}

			&.e-single-line .flagParent {
				float: left;
				padding: 0 8px 0 2px;
			}

			.dateParent {
				display: inline-block;
				float: right;
				position: relative;
				margin: 0 5px;
				color: #999;
				font-size: 11px;
			}

			&.e-single-line .dateParent {
			}

			.attachmentParent {
				display: inline-block;
				float: right;
				position: relative;
				margin: 2px 8px 0 5px;
			}

			&.e-single-line .attachmentParent {
				float: left;
				margin: 0 5px 0 0;
			}

			.senderParent {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.threadsCountParent {
				display: inline;
				overflow: hidden;
				background-color: #eee;
				padding: 1px 5px;
				margin-right: 5px;
				border: 1px solid #ccc;
				.border-radius(5px);
			}

			.threadsCountParent.lastSelected {
				background-color: #999;
				border-color: #999;
				color: #fff;
			}

			.threadsCountParent:hover {
				border-color: #666;
			}

			&.e-single-line .senderParent {
				display: inline-block;
				text-overflow: none;
				width: 200px;
				float: left;
				font-weight: normal;
			}

			.subjectParent {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #000;
			}

			&.e-single-line .subjectParent {
			}

			.senderParent, .subjectParent, .dateParent {
				white-space: nowrap;
			}

			.subjectParent .emptySubjectText {
				display: none;
				font-style: italic;
				color: #999;
			}

			&.emptySubject .subjectParent {
				.subject {
					display: none;
				}
				.emptySubjectText {
					display: inline;
				}
			}

			.sender, .subject {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.attachment {
				display: none;
			}

			.flagOff, .flagOn, .flagOnHalf {
				cursor: pointer;
				display: inline-block;
			}

			.flagOff {
				.opacity(50);
				&:hover {
					.opacity(100);
				}
			}

			.flagOn, .flagOnHalf {
				display: none;
				color: orange;
			}

			.replyFlag, .forwardFlag {
				display: none;
			}

			&.answered .replyFlag {
				display: inline-block;
			}

			&.forwarded .forwardFlag {
				display: inline-block;
			}

			&.withAttachments .attachment {
				display: inline-block;
				color: #666;
				text-shadow: 0px 1px 0px #eee;
			}

			&.unseen {
				background-color: #FFFFD9;
				.sender, .subject {
					font-weight: bold;
				}
				.sidebarParent {
					background-color: orange;
				}
			}

			&.hasUnseenSubMessage {
				background-color: #FFFFD9;
				.sidebarParent {
					background-color: lighten(orange, 30%);
				}
			}

			&.hasParentMessage {
				background-color: #ecf0f1;

				.sidebarParent {
					background-color: #bdc3c7;
				}
				
				&.unseen {
					background-color: darken(#ecf0f1, 5%);
					.sidebarParent {
						background-color: darken(#bdc3c7, 30%);
					}
				}
			}

			&.checked {
				.sidebarParent {
					background-color: lighten(#398CF2, 10%) !important;
				}
			}

			&.selected {
				background-color: #DFEFFF;
				z-index: 102;

				.sidebarParent {
					background-color: #398CF2 !important;
				}

				.delimiter {
					background-color: #398CF2;
					.opacity(20);
				}
				
				+ .messageListItem .delimiter {
					background-color: #398CF2;
					.opacity(30);
				}
			}
			
			&.hasFlaggedSubMessage {
				.flagOff, .flagOn {
					display: none;
				}
				.flagOnHalf {
					display: inline-block;
				}
			}

			&.flagged {
				.flagOff, .flagOnHalf {
					display: none;
				}
				.flagOn {
					display: inline-block;
				}
			}
		}
	}

	&.message-focused {
		.b-message-list-wrapper {
			background-color: #000;
		}
		.b-content {
			.opacity(98);
		}
	}

	&.hideMessageListCheckbox {
		.checkedParent, .checkboxCkeckAll {
			display: none !important;
		}
		.sidebarParent {
			margin-right: 10px !important;
		}
	}
}

html.ssm-state-desktop-large {
	.messageList .b-content .messageListItem {
		font-size: 13px;
		.dateParent {
			font-size: 13px;
		}
	}
}

.draggablePlace {
	z-index: 10002;
	color: #fff;
	background-color: #333;
	background-color: rgba(0,0,0,0.5);
	padding: 4px 10px;
	min-width: 30px;
	height: 20px;
	cursor: pointer;
	cursor: move;
}