snappymail/dev/Styles/MessageList.less

html.rl-mobile,
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: var(--message-list-toolbar-bg-color, #eee);
//		#gradient > .vertical(#f4f4f4, #dfdfdf);

		border-bottom-right-radius: @rlMainBorderRadius;
		border-bottom-left-radius: @rlMainBorderRadius;
		border-top: 1px solid #bbb;

		.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: var(--message-list-toolbar-bg-color, #eee);
//		#gradient > .vertical(#f4f4f4, #dfdfdf);

		border-top-right-radius: @rlMainBorderRadius;
		border-top-left-radius: @rlMainBorderRadius;
		border-bottom: 1px solid #bbb;

		.checkboxCheckAll {
			cursor: pointer;
			line-height: 30px;
		}
	}

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

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

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

		.messageListItem {

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

			margin: 0;
			padding: 5px 0;
			border: 0;
			border-bottom: 1px solid rgba(153, 153, 153, 0.2);
			border-left: 6px solid #eee;

			z-index: 100;

			background-color: #f9f9f9;

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

			.importantMark {
				display: none;

				color:red;
				margin-right:5px
			}

			&.deleted-mark {
				opacity: .7;
				.subjectParent {
					text-decoration: line-through;
				}
			}

			&.important .importantMark {
				display: inline;
			}

			&.new {
				max-height: 0;
			}

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

			.checkboxMessage {
				padding: 0 8px 0 6px;
				font-size: 16px;
			}

			.flagParent {
				padding: 0 10px 0 5px;
			}

			time {
				margin: 0 5px;
				color: #999;
				font-size: 11px;
				white-space: nowrap;
			}

			.threadsParent {
				position: relative;
			}

			.attachmentParent {
				position: relative;
				margin: 2px 10px 0 5px;
				color: #666;
				text-shadow: 0 1px 0 #eee;
			}

			.senderParent {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

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

			.subjectParent {
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

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

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

			.sender, .subject {
				margin-left: 0;
				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;
					}
				}
			}

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

			.flagOn, .flagOnHalf {
				color: orange;
			}

			.replyFlag, .forwardFlag {
				display: none;
				margin-right: 0.25em;
			}

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

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

			&:not(.withAttachments) .attachmentParent {
				display: none;
			}

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

			&.unseen {
				background-color: #FFFFD9;
				border-left-color: orange;
				.sender, .subjectParent {
					font-weight: bold;
				}

				&.focused {
					border-left-color: darken(orange, 10%);
				}
			}

			&.checked {
				border-left-color: lighten(#398CF2, 10%);

				&.focused {
					border-left-color: darken(#398CF2, 5%);
				}
			}

			&.selected {
				background-color: #DFEFFF;
				border-bottom-color: rgba(57, 140, 242, 0.2);
				border-left-color: #398CF2;
				z-index: 101;

				+ .messageListItem {
					border-bottom-color: rgba(57, 140, 242, 0.3);
				}
			}

			&:not(.flagged) .flagOn,
			&:not(.hasFlaggedSubMessage) .flagOnHalf,
			&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
				display: none;
			}
		}
	}

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

	&.hideMessageListCheckbox {
		.checkboxMessage, .checkboxCheckAll {
			visibility: hidden;
		}
	}
}

/* desktop-large */
@media screen and (min-width: 1401px) {
	.messageList .b-content .messageListItem {
		font-size: 13px;
		time {
			font-size: 13px;
		}
	}
}

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

#messagesDragImage {
	color: #fff;
	background-color: #000;
	height: 20px;
	min-width: 30px;
	padding: 4px 10px;
	position: fixed;
	right: -100px;
	top: 0;
}

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


.messageListItem {

	display: flex;
	flex-wrap: wrap;

	> * {
		display: flex;
		flex: 0 0 auto;
		order: 0;
	}
}

.rl-side-preview-pane, .rl-mobile {

	.messageListItem {

		.checkboxMessage {
			margin: 10px 0 -5px;
		}

		.subjectParent {
			flex: 1 0 auto;
			margin-left: 30px;
			order: 1;
			width: calc(100% - 60px);
		}

		.senderParent {
			flex: 1 0 auto;
		}

		.flagParent {
			order: 1;
		}

		.attachmentParent {
			order: 2;
		}
	}
}

html:not(.rl-mobile):not(.rl-side-preview-pane) .messageList {

	.messageListItem {

		line-height: 25px;
		flex-wrap: nowrap;

		.checkboxMessage {
			line-height: 25px;
		}

		.flagParent {
			margin-top: 6px;
		}

		.attachmentParent {
			margin: 6px 8px 0 0;
		}

		.senderParent {
			font-weight: normal;
			text-overflow: none;
			flex: 0 0 25%;
		}

		.subjectParent {
			flex: 1 1 auto;
		}
	}
}