fastmail.css

/* ==UserStyle==
@name           Fastmail - UI Tweaks
@namespace      gist.github.com/DanH42
@version        1.2.0
@description    Makes Fastmail look a little more like the good parts of Gmail
@author         Dan Hlavenka
@updateURL      https://gist.github.com/DanH42/3cd55863c9628689f16a2da4c6c8c790/raw
@preprocessor   less
==/UserStyle== */

@-moz-document url-prefix("https://app.fastmail.com/mail/"){
	/* Increase specificity */
	#mail{

		/* Show message preview */
		.v-Mailbox--long.v-Mailbox--noPreview > .v-MailboxItem{
			transform: unset !important;

			> .v-MailboxItem-link{
				padding: .4375rem;
				height: calc(1.9375rem - (.4375rem * 2)) !important;

				> .v-MailboxItem-subject{
					position: relative;
					left: 0;
					top: 0;
					right: unset;
					margin-left: calc(19.875rem + .3rem);
					margin-right: .5em;
					float: left;

					/* Handle messages without a subject */
					> span:not(.u-hidden){
						display: inline-block;
					}
				}

				> .v-MailboxItem-preview{
					display: contents !important;
				}

				> .v-MailboxItem-time{
					background: white;
					right: 0;
					padding-right: .9375rem;
				}
			}

			&.is-selected > .v-MailboxItem-link > .v-MailboxItem-time{
				background-color: var(--ui-page-color-bg-selected);
			}

			/* Icon positioning fix */
			.v-MailboxItem-replied{
				left: 180px;
			}
		}

		.v-ListKBFocus{
			margin-top: 0;
		}

		/* Hide clickbait notification dot */
		.v-PageHeader .v-Button--sidebar.is-highlighted:before{
			content: unset;
		}

		/* Cutsom checkboxes */
		input[type="checkbox"]{
			--checkbox-size: calc(1.9375rem - (.4375rem * 2));
			-webkit-appearance: none;
			-moz-appearance: none;
			position: relative;
			width: var(--checkbox-size) !important;
			height: var(--checkbox-size) !important;
			border: 1px solid gray;
			border-radius: 2px;
			padding: 1px;

			&:hover{
				border-width: 2px;
				padding: 0;
			}
			&:hover:before{
				margin-top: -1px;
			}

			&:before{
				display: inline-block;
				width: 100%;
				text-align: center;
				font-weight: bold;
				font-size: 1rem;
				line-height: 100%;
				position: relative;
				top: 0;
			}

			&:checked:before{
				content: '\1f5f8';
			}

			&:indeterminate:before{
				content: '–';
				top: -1px;
			}
		}
		.v-SelectAllCheckbox > .v-Checkbox-input{
			&:before{
				position: absolute;
				top: 1px;
				left: 0;
				line-height: 1rem;
			}
		}
		.v-Checkbox-icon{
			display: none;
		}

		/* Non-rounded buttons */
		.app-source-button > .v-Icon{
			border-radius: 0;
			width: 1.375rem;
			height: 1.375rem;
			padding: .25rem;
		}

		/* Full-width message body */
		.v-Thread{
			max-width: unset !important;
		}

		/* Allow selecting email addresses */
		.v-MessageCard-to > span{
			user-select: all;
		}

		.v-MessageCard-fromAndPreview{
			user-select: text;
		}

		/* Block quotes */
		.u-article > blockquote,
		.u-article div > blockquote,
		.u-article blockquote blockquote{
			background-color: #f8f8f8;
			color: #222;
			border-color: #666;
			border-radius: 0;
		}

		.v-Thread{
			/* Labels on same line as subject */
			.v-Thread-title{
				display: inline-block;
				float: left;
			}
			.v-ThreadLabels{
				float: left;
				margin-top: 18px;
			}
			/* The div containing the message body has an unpredictable ID and no class name */
			> div:last-of-type{
				clear: both;
			}

			.v-Message-detailsList{
				.v-Message-detailsTitle{
					min-width: 100px;
					text-align: right;
				}
				.v-Message-detailsValue{
					padding-left: 110px;
				}
			}
		}
	}
}