snappymail/dev/Styles/User/MessageList.less

html.rl-mobile,
html.rl-no-preview-pane {
	.messageList.message-selected {
		display: none;
	}
}

#sort-list-dropdown-id {
	padding-left: 6px;
	padding-right: 6px;
}

.messageList {

	.toolbar {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 30px;
		padding: 10px 1px;
		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;
		}
	}

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

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

		border: 1px 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;
			vertical-align: middle
		}

		.input-append {
			margin-left: 14px;
			text-align: right;
			width: calc(100% - 30px);

			.close-input-wrp {
				width: 90%;
				min-width: 200px;
				max-width: 300px;
			}

			.inputSearch {
				width: 100%;
			}
		}
	}

	.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: auto;
		z-index: 101;
		scroll-behavior: smooth;

		box-sizing: border-box;

		background-color: #fff;

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

		.listEmptyMessage, .listLoading, .listDragOver, .listError {
			color: #999;
			text-align: center;
			padding: 60px 10px;
			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: 16px;
			padding: 12px;
			border-bottom: 1px solid #eee;
		}

		.listThreadUidDesc {
			font-size: 16px;
			padding: 7px 20px 6px 20px;
			background-color: rgba(128,128,128,0.5);
			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;
		}
	}

	&.focused .b-message-list-wrapper {
		background-color: #000;
		border-color: #9d9d9d;
	}
}

.hideMessageListCheckbox {
	.checkboxCheckAll {
		visibility: hidden;
	}

	.checkboxMessage {
		display: none;
	}
}

.messageListItem {
	display: flex;
	flex-wrap: wrap;

	position: relative;
	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;

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

	&.focused {
		background-color: rgba(128, 128, 128, 0.1);
		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 {
		line-height: 12px;
		padding: 0 8px 0 6px;
		font-size: 16px;
	}

	time, .sizeParent {
		margin: 0 5px;
		opacity: 0.6;
		font-size: 11px;
		white-space: nowrap;
	}

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

	.senderParent, .subjectParent {
		overflow: hidden;
		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 .emptySubjectText {
		display: none;
		font-style: italic;
		opacity: 0.5;
	}

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

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

	.threads-len {
		border-radius: 6px;
		padding: 2px 0 1px 4px;
		border: 1px solid #ccc;
		&:hover {
			background-color: rgba(127,127,127,0.3);
			border-color: #666;
		}
	}

	.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: rgba(255, 255, 64, 0.15);
		border-left-color: lighten(orange, 30%);
		&.focused {
			border-left-color: darken(orange, 10%);
		}
	}

	&.unseen {
		background-color: rgba(255, 255, 64, 0.15);
		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: rgba(140, 200, 255, 0.3);
		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);
		}
	}

	.flagParent {
		padding: 0 10px 0 5px;
	}
	&.flagged .flagParent::after,
	&.hasFlaggedSubMessage .flagParent::after {
		color: orange;
		content: '★'; /*⚑*/
	}
	&:not(.flagged):not(.hasFlaggedSubMessage) .flagParent::after {
		content: '☆'; /*⚐*/
	}
	&:not(.flagged):not(.hasFlaggedSubMessage) .flagParent:not(:hover) {
		opacity: 0.5;
	}
}

html.rl-ctrl-key-pressed .messageListItem {
	cursor: copy;
}

@media screen and (min-width: 1000px) {
	.messageList {
		.listDragOver {
			transition: all 400ms ease;
		}
	}
}

/* desktop-large */
@media screen and (min-width: 1401px) {
	.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;
}

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

	.messageListItem {

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

		.subjectParent {
			flex: 1 0 auto;
			line-height: 16px;
			order: 1;
			width: calc(100% - 120px);
		}

		.senderParent {
			flex: 1 0 45%;
		}

		.flagParent {
			order: 1;
		}

		.sizeParent {
			order: 2;
		}

		.attachmentParent {
			order: 3;
		}
	}

	.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
		margin-left: 30px;
	}
}

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

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