Make the new Gmail design look like the old one

gmail-dematerialize.css

/* ==UserStyle==
@name           Gmail - Dematerialize
@namespace      gist.github.com/DanH42
@version        1.1.7
@description    Make the new Gmail design look like the old one
@author         Dan Hlavenka
@updateURL      https://gist.github.com/DanH42/599cbdc85f53a0377042d8c418aec78e/raw
@preprocessor   less
==/UserStyle== */

@-moz-document domain("mail.google.com"){
	body[jscontroller]{
		/* Universally tell Google Sans to go die in a hole */
		*{
			font-family: Arial, sans-serif !important;
		}

		/* Disable the annoying loading animation */
		#loading div{
			animation-duration: 0s !important;
			animation-delay: 0s !important;
			opacity: 1 !important;
		}

		/* Header section */
		header > div:nth-of-type(2){
			padding: 6px 8px;

			/* Logo */
			> div:nth-of-type(1){
				/* Fix sidebar width */
				min-width: 194px !important;

				/* Hide useless menu icon */
				div[aria-label="Main menu"]{
					display: none;
				}
				/* Align logo better */
				a[href="#inbox"]{
					margin-left: 12px;

					img{
						content: url('https://i.imgur.com/rmNl7Tt.png');
						width: 109px !important;
						height: 47px !important;
					}
				}
			}

			/* Search bar */
			form[role="search"]{
				background-color: white;
				box-shadow: 0 1px 2px rgba(0,0,0,.2);
				border-radius: 0;
				margin-top: 8px;
				margin-left: -10px;

				/* Make the search bar desktop sized, not touchscreen sized */
				>button, >div{
					height: 30px;
					input{
						height: 31px !important;
						padding: 0;
					}
				}
				table td{
					padding: 0 !important;
					vertical-align: top;
				}
				>button>svg{
					margin: 0;
					padding-top: 4px;
					padding-bottom: 3px;
					background-color: unset !important;
				}
			}
		}

		/* Sidebar */
		.aeN{
			/* Fix sidebar width */
			min-width: 202px !important;
			max-width: 202px !important;

			/* Fix the Compose button */
			.aic{
				/* Align the Compose button better */
				.z0{
					margin: 10px 0 16px 43px;
					padding: 0;
					text-align: center;
					height: 29px;
				}
				/* Hide the weird icon in the button */
				.z0 > .L3::before{
					display: none;
				}
				/* Make the Compose button look like a button */
				.z0 > .L3{
					background-color: #f5f5f5;
					background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
					background-image: linear-gradient(to bottom,#f5f5f5,#f1f1f1);
					border: 1px solid #dcdcdc;
					border: 1px solid rgba(0,0,0,0.1);
					color: #444;
					border-radius: 2px;
					cursor: default;
					font-size: 11px;
					font-weight: bold;
					text-align: center;
					white-space: nowrap;
					margin: 0;
					height: 27px;
					line-height: 27px;
					outline: 0;
					padding: 0 8px;
					box-shadow: none;
					text-shadow: 0 1px rgba(0,0,0,0.1);
					text-transform: uppercase;
					min-width: 97px;
					display: inline-block;
				}
			}

			/* Hide "Meet" clutter */
			[aria-label="Hangouts"] > [aria-label="Meet"]{
				display: none;
			}
			[aria-label="Hangouts"] .YI{
				display: none;
			}
		}

		/* Sidebar nav */
		.wT{
			min-width: 202px;
			max-width: 202px;

			/* No rounded corners on items */
			.TK .TO, .n6 .ah9, .CL{
				border-radius: 0 !important;
			}

			/* Icons don't need 24px of spacing */
			.qj, .air .G-asx, .n4 .G-asx, .CL::before{
				margin-right: 12px;
			}

			/* Don't space out letters */
			.TN *{
				letter-spacing: 0 !important;
			}

			/* Selected items */
			.ain{
				border-left: 4px solid #333;
			}
			.aiq{
				margin-left: -4px;
			}
			.TK .TO:active, .n6 .ah9.aiu:active, .CL:active, .TO.nZ, .TO.ol{
				background-color: transparent !important;
			}

			/* Mouse hover */
			.TO.NQ, .n6 .ah9:hover, .n6 .ah9.aiu:hover, .n6 .ah9:focus, .CL.NQ, .CL:hover, .CL:focus{
				background-color: rgba(255, 255, 255, 0.9) !important;
			}
			.aiq{
				&.TO.NQ, .n6 .ah9:hover, .n6 .ah9.aiu:hover, .n6 .ah9:focus, .CL.NQ, .CL:hover, .CL:focus{
					margin-left: 0;
					.TN{
						margin-left: -4px !important;
					}
				}
			}
			.TN, .TK .TO{
				transition: none !important;
			}

			/* Item Count */
			.nU.n1{
				margin-right: .5em;
			}
			.bsU{
				padding: 0;
				margin: 0 auto 0 0;
				font-size: .875rem;
			}
			.bsU::before{
				content: '(';
			}
			.bsU::after{
				content: ')';
			}
			/* Don't hide item count on hover */
			.NQ .bsU, .bz4 .bsU{
				display: inline;
			}
		}

		/* Button bar */
		.G-atb{
			padding: 0;

			.aqK, .G-tF, .aqJ, .iH, .adF{
				height: 29px;
			}

			/* Make buttons look like buttons */
			.J-J5-Ji{
				position: relative;
				display: inline-block;
			}
			.T-I-ax7{
				background-color: transparent;
				background-image: linear-gradient(top,rgba(255,255,255,.85),rgba(247,247,247,.85));
				background-image: linear-gradient(to bottom,rgba(255,255,255,.85),rgba(247,247,247,.85));
				border: 1px solid rgba(0,0,0,0.1);
				color: #444;
				box-shadow: none;
			}
			.T-I{
				border-radius: 2px;
				cursor: pointer;
				font-size: 11px;
				font-weight: bold;
				text-align: center;
				white-space: nowrap;
				margin-left: 5px;
				margin-right: 16px;
				height: 27px;
				line-height: 27px;
				min-width: 54px;
				outline: 0;
				padding: 0 8px;
			}
			.J-J5-Ji{
				position: relative;
				display: inline-block;
			}
			.asa, .Bn{
				display: inline-block;
				font-size: inherit;
				font-weight: inherit;
				color: inherit;
				border-radius: inherit;
				letter-spacing: inherit;
				height: inherit;
				
			}
			.asa::before, .asa::after{
				display: none;
			}

			/* Spacing/grouping */
			.T-I-Js-IF{
				margin-right: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			.T-I-Js-Gs{
				margin-left: -1px;
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
			}
			.T-I-ax7.T-I-Js-Gs{
				margin-left: -1px;
				border-left: 1px solid rgba(0,0,0,0.1);
			}
			.bzn .G-Ni{
				margin-left: -5px;
				margin-right: 0;
				padding: 0;
				box-shadow: none;
			}

			/* Hover */
			.T-I-ax7.J-JN-M-I-JW, .T-I-ax7.T-I-JW{
				background-color: transparent;
				background-image: linear-gradient(top,rgba(255,255,255,.9),rgba(247,247,247,.9));
				background-image: linear-gradient(to bottom,rgba(255,255,255,.9),rgba(247,247,247,.9));
				border: 1px solid #c6c6c6;
				color: #333;
				box-shadow: 0 1px 1px rgba(0,0,0,0.1);
			}

			/* Forward/back buttons */
			.Di>.amH{
				height: auto;
			}
			.T-I-awG{
				min-width: 34px;
				padding: 0;
			}
			.adl, .Dj{
				color: #222;
				span{
					font-weight: bold;
				}
			}

			/* Split pane mode dropdown button */
			.T-I.apG{
				min-width: 10px;
				padding: 0 2px;
			}

			/* Hide the extra dropdown arrow next to selection checkbox */
			.J-JN-M-I-JG{
				display: none;
			}

			/* Show text for More menu */
			.nf .asa{
				color: #444;
				font-size: 11px;
				height: 27px;
				margin-left: 0;
				
			}

			/* Show text for Mark as read/unread */
			.m9 .bAO, .bvt .bAP{
				background: none;
				opacity: 1;
				width: auto;
				height: auto;
			}
			.m9 .bAO::before{
				display: inline-block;
				content: 'Mark as read';
			}
			.bvt .bAP::before{
				display: inline-block;
				content: 'Mark as unread';
			}

			/* Hide Snooze button */
			.uUQygd{
				display: none;
			}

			/* Hide on-screen keyboard button */
			.aBS{
				display: none;
			}

			/* No dumb hover effects */
			.G-asx::before, .T-Jo::before, .T-Jo::after, .amD::before, .Bn::after, .adg::before, .adg::after{
				display: none;
			}
		}

		/* Main */
		.AO{
			/* Section headers */
			.Wg{
				height: 37px;

				/* Fix cursor glitch */
				.Cr{
					cursor: pointer;
				}

				/* No dumb hover effects */
				.Wr::before, .Di>.amH::before, .qi.J-JN-M-I::before{
					display: none;
				}

				/* Bold item counts */
				.Dj{
					color: #222;
					span{
						font-weight: bold;
					}
				}

				/* Normal hover effect for item counts */
				.aqi .Dj{
					text-decoration: underline;
				}
			}

			/* Message List */
			.Cp{
				/* No circles around things on hover */
				.T-Jo::before, td.apU>.T-KT::after, .a9q::before{
					display: none;
				}

				/* Selected messages */
				.x7{
					color: #222;
					background: #ffc;
				}

				/* Match old compact spacing */
				.zA{
					padding-top: 3px;
					padding-bottom: 3px;
				}
				.yW, .a4W{
					font-size: 12.8px;
				}

				/* Make icons in keyboard-selected rows a bit less strongly emphasized */
				.btb:not(.x7)>td.apU>.T-KT.aXw::before, .btb:not(.x7)>.xY>.T-Jo, .btb:not(.x7)>.WA .a9q{
					opacity: .16;
				}
				.btb>.WA .a9q.pH{
					opacity: .7;
				}

				/* Make labels less rounded */
				.ar{
					border-radius: 2px;
					height: 1.7em;
					padding: 0 5px 1px 0;
					font-size: 11px;
					margin: -1px 0 -3px;
					letter-spacing: initial;
				}
				.at, .au{
					height: auto;
				}

				/* Hover */
				.zA:hover{
					box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
					background: rgba(255,255,255,0.25);
				}

				/* Always show full message line */
				.aKS, .yf, .xW{
					display: flex;
					color: #222;
				}
				/* Always hide new message actions */
				.bq4{
					display: none;
				}

				/* Make special message actions more visible */
				.aOd.T-I{
					background-color: #e9e9e9;
					background-image: linear-gradient(top,#e9e9e9,#e6e6e6);
					background-image: linear-gradient(to bottom,SMARTMAIL_BUTTON_BG_COLOR,SMARTMAIL_BUTTON_BG_END_COLOR);
					border: 1px solid rgba(157,157,157,.57);
					color: #444;
					min-width: 56px;
					height: 17px;
					line-height: 17px;
					text-shadow: 0 1px rgba(0,0,0,0.1);
					border-radius: 2px;
					cursor: default;
					font-size: 11px;
					font-weight: bold;
					box-shadow: none;
				}
			}

			/* Message view */
			table.bAt{
				/* Message Subject */
				.if>.byY, .iC .byY{
					background-color: transparent;
					font-size: 110%;
					font-weight: normal;
					margin: 12px 1px 9px 1px;
					padding: 0 0 0 16px;

					.hP{
						font-size: 17.6px;
					}

					/* Labels */
					.hU.hM{
						border-radius: 2px 0 0 2px;
					}
					.hV.hM{
						border-radius: 0 2px 2px 0;
					}
				}

				/* Thread headers */
				.hx .ky .Bk .G2, .hx .kv .Bk .G2, .hx .h7 .Bk .G2, .hx .bx .Bk .G2{
					border-bottom: 0;
					border-color: #d8d8d8;
					border-left: 0;
					border-right: 0;
					border-radius: 0;
					margin-bottom: 0;
					margin-left: 0;
					margin-right: 0;
					padding-top: 0;
				}
				.kv .Bk .G2, .kQ .Bk .G2{
					background-color: #f5f5f5;
				}
				.kv .G2{
					padding-bottom: 0!important;
				}
				.kv .G3, .ky .G3{
					height: auto!important;
					margin-bottom: 0!important;
				}
				.Bk .G2{
					padding-top: 3px;
					background-color: transparent;
					border: 1px solid #cfcfcf;
					border-top: 1px solid #cfcfcf;
					-webkit-border-radius: 2px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
				}

				/* Sender icon */
				.aju{
					cursor: pointer;
					float: left;
					padding: 6px 4px 6px 12px;
					height: auto;
					display: block;
				}
				.ajn, .ajo{
					width: 24px;
					height: 24px;
					border-radius: 0;
				}

				/* Message Summary */
				.hx .gs{
					padding: 0;
				}
				.gE{
					padding: 0;
				}
				.hx .gE {
					padding-left: 0;
				}
				.hI, .ig {
					padding-bottom: 6px;
				}
				.hI, .ig, .iv {
					padding-top: 10px;
				}
				.hI, .ig {
					padding-right: 8px;
				}
				.iB.za{
					display: none;
				}
				.iB:not(.za){
					display: block;
				}
				.gD {
					font-size: 12.8px;
					display: inline;
				}

				/* Collapsed messages */
				.hx .kQ .Bk{
					background-color: #f5f5f5;
					border: none;
					border-top: 1px solid rgba(100,121,143,0.122);

					.G2{
						border: none;
					}
				}
				.bh>.adv>.Bk::after{
					height: 9px;
				}
				.bh>.adv .adx{
					left: 50%;
					background: none;
					border-radius: 0;
					box-shadow: none;

					span{
						display: none;
					}
				}
				.bh>.adv .adx::after {
					content: attr(aria-label);
					background-color: #f5f5f5;
					padding: 6px;
					white-space: nowrap;
				}

				/* Make "show trimmed content" button a rectangle instead of an oval */
				div[role="button"][aria-label="Show trimmed content"]{
					border-radius: 0;
				}

				/* Hide button circle effects */
				.bi4>.T-KT::after, .L3::before, .a9q::before{
					display: none;
				}
			}

			/* Spam/Trash header */
			.Tm .ya{
				min-height: auto;
				background-color: rgba(255, 255, 255, .75);

				.x2{
					height: auto;
				}
			}
		}

		/* Popup messages */
		.w-asV .b8.bAp{
			position: relative;
			top: 8px !important;
			line-height: normal;

			.vh{
				position: relative;
				margin: 0;
				min-height: 16px;
				border-color: #f0c36d;
				background-color: #f9edbe;
				color: #222;
				border-radius: 2px;
				box-shadow: 0 2px 4px rgba(0,0,0,0.2);
				padding: 0 0 0 10px;
				font-size: 80%;
				font-weight: bold;
				text-align: center;

				.aT{
					display: inline;
				}
				.bAq{
					margin: 0;
					display: inline;
				}
				.bAo{
					height: auto;
					margin: 0;
					float: none;
					display: inline;
				}
				.bBe{
					display: none;
				}
				.a8k, .bAo>.ad{
					height: auto;
					margin: 0;
					padding: 1px 10px 1px 8px;
					color: #222;
					font-weight: bold;
					text-decoration: underline;
				}
			}
		}

		/* Compose window */
		.dw .nn{
			/* Prevent the From: address popup from overflowing off the page */
			.J-M{
				max-height: 500px;
			}

			/* Popup body */
			.aaZ .aoI{
				/* No dumb hover effects */
				.az2.J-JN-M-I::before{
					transition: none;
				}

				/* Old style bottom bar */
				.btC{
					margin: 0 -16px;
					padding: 8px 12px;
					border-top: 1px solid #cfcfcf;
					background-color: #f5f5f5;

					/* Send button */
					.T-I-atl{
						background-color: #4d90fe;
						background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
						background-image: linear-gradient(top,#4d90fe,#4787ed);
						border: 1px solid #3079ed;
						height: 27px;
						line-height: 27px;
						min-width: 72px;
						outline: 0;
						padding: 0 8px;	
						border-radius: 2px;
						font-size: 11px;
						font-weight: bold;
					}

					/* Remove the extra send button */
					.T-I-atl[aria-label="More send options"]{
						display: none;
					}

					/* More Options button spacing */
					.Xv.J-JN-M-I{
						padding: 0 8px
					}

					/* No dumb hover effects */
					.J-Z-I::before, .T-I-ax7::before{
						display: none;
					}
				}
			}
		}

		/* Inline composer */
		.HM{
			/* No rounded corners */
			.I5, div.ajR{
				border-radius: 0;
			}

			/* No dumb hover effects */
			.I5:hover, .bzE{
				box-shadow: none;
				border: 1px solid #dadce0;
			}
			.bzE{
				border: 1px solid #aaa !important;
			}

			/* Old style bottom bar */
			.aDj{
				border-top: 1px solid #cfcfcf;
				background-color: #f5f5f5;
				border-radius: 0;
				height: 48px;

				/* Remove extra padding */
				.btC{
					padding: 8px;
					border-radius: 0;
				}

				/* Send+Archive button */
				.T-I-atl{
					background-color: #4d90fe;
					background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
					background-image: linear-gradient(top,#4d90fe,#4787ed);
					border: 1px solid #3079ed;
					height: 27px;
					line-height: 27px;
					min-width: 72px;
					outline: 0;
					padding: 0 8px;	
					border-radius: 2px;
					font-size: 11px;
					font-weight: bold;
				}

				/* Send button */
				.btA .btz.T-I-ax7{
					height: 27px;
					line-height: 27px;
					min-width: 64px;
					outline: 0;
					padding: 0;	
					border-radius: 2px;
					font-size: 11px;
					font-weight: bold;
				}
				.btA .T-I-ax7:not(.btz){
					height: 27px;
					line-height: 27px;
					outline: 0;
					padding: 0;	
					border-radius: 2px;
					font-size: 11px;
					font-weight: bold;
				}

				/* More Options button spacing */
				.Xv.J-JN-M-I{
					padding: 0 8px
				}

				/* No dumb hover effects */
				.J-Z-I::before, .T-I-ax7::before{
					display: none;
				}
			}
		}

		/* Search dropdown */
		.ZF-zT>.ZZ{
			/* Show the right cursor for checkboxes */
			.bs1+.bs3, .btj+.aD{
				cursor: pointer;
				user-select: none;
			}

			/* Search button */
			.T-I-atl{
				background-color: #4d90fe;
				background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
				background-image: linear-gradient(top,#4d90fe,#4787ed);
				border: 1px solid #3079ed;
				height: 32px;
				line-height: 27px;
				min-width: 72px;
				outline: 0;
				padding: 0 8px;	
				border-radius: 2px;
				font-size: 11px;
				font-weight: bold;
			}

			/* No dumb hover effects */
			.T-I-ax7::before, .bs1+.bs3::after, .btj+.aD::after{
				display: none;
			}
		}

		/* Hide sidebar button */
		.it .brC-dA-I-Jw{
			display: none;
		}
	}
}

@-moz-document url-prefix("https://contacts.google.com/widget/hovercard/"){
	/* Universally tell Google Sans to go die in a hole */
	*{
		font-family: Arial, sans-serif !important;
	}

	/* Get rid of silly mouse hover animations */
	*, *::before, *::after{
		transition: none !important;
	}

	/* Turn round profile pictures back into squares */
	img[alt="Profile Photo"]{
		border-radius: 0;
	}

	/* Don't make buttons bright blue */
	div[role="button"] svg{
		filter: grayscale(1);
	}
}