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;
		white-space: nowrap;
	}

	.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;
		white-space: nowrap;

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

		border-top-right-radius: @rlMainBorderRadius;
		border-top-left-radius: @rlMainBorderRadius;

		.checkboxCkeckAll {
			margin: 5px 0;
		}
	}

	.line-loading {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 102;
		height: 0;
		top: 50px;
	}

	.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;
		scroll-behavior: smooth;

		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: 18px;
			padding: 15px;
			border-bottom: 1px solid #eee;

			html.rl-mobile &{
				font-size: 16px;
				padding: 12px;
			}
		}

		.listThreadUidDesc {
			font-size: 16px;
			padding: 7px 20px 6px 20px;
			background-color: #aaa;
			border-bottom: 1px solid #888;
			color: #fff;
			cursor: pointer;
			text-shadow: 0 1px 0 #000;
			text-align: center;
		}

		.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: 0;
			border: 0 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: 0.2;
			}

			.wrapper {
				padding: 5px 0;
			}

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

			&.focused {
				background-color: #f5f5f5;
			}

			&.focused .sidebarParent {
				background-color: #ccc !important;
			}

			.importantMark {
				display: none;

				color:red;
				margin-right:5px
			}

			&.deleted-mark {
				opacity: .7;
				.sender, .subject, .subject-prefix, .subject-suffix {
					text-decoration: line-through;
				}
			}

			&.important .importantMark {
				display: inline;
			}

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

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

			&.new {
				max-height: 0;
			}

			&.deleted {
				max-height: 0;
				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 10px 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 {
			}

			.threadsParent {
				display: inline-block;
				float: right;
				position: relative;
			}

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

			&.e-single-line .attachmentParent {
				float: left;
				margin: 0 8px 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, .subject-prefix, .subject-suffix {
					display: none;
				}
				.emptySubjectText {
					display: inline;
				}
			}

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

			.threads-len {
				.threads-len-data {

					background-color: #eee;
					color: #666;
					border-radius: 6px;
					padding: 2px 0 1px 6px;
					margin-right: 2px;
					border: 1px solid #ccc;

					[class^="icon-"],
					[class*=" icon-"] {
						font-size: 14px;
					}

					&:hover {
						background-color: #aaa;
						border-color: #666;
						text-shadow: 0 1px 0 #999;
						color: #fff;
					}
				}
			}

			.subject-prefix {
				color: #888;
				/*font-style: italic;*/
			}

			.attachment {
				display: none;
			}

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

			.flagOff {
				opacity: 0.5;
				&:hover {
					opacity: 1;
				}
			}

			.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: 0 1px 0 #eee;
			}

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

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

				&.focused .sidebarParent {
					background-color: darken(orange, 10%) !important;
				}
			}

/*
			&.hasParentMessage {
				background-color: #ecf0f1;

				.sidebarParent {
					background-color: #bdc3c7;
				}

				&.focused .sidebarParent {
					background-color: darken(#bdc3c7, 10%) !important;
				}

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

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

					&.focused .sidebarParent {
						background-color: darken(#bdc3c7, 40%) !important;
					}
				}
			}
*/

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

				&.focused .sidebarParent {
					background-color: darken(#398CF2, 5%) !important;
				}
			}

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

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

				.delimiter {
					background-color: #398CF2;
					opacity: 0.2;
				}

				+ .messageListItem .delimiter {
					background-color: #398CF2;
					opacity: 0.3;
				}
			}

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

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

html .messageList .line-loading {
	height: 5px !important;
}

.draggablePlace {
	z-index: 10003;
	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;
}

html.rl-mobile {
	#rl-sub-left .messageList .inputSearch {
		width: 160px !important;
	}
}