Better Dark Minimal WhatsApp Web by pixelfox3

/* ==UserStyle==
@name           Dark Minimal WhatsApp Web
@namespace      USO Archive
@author         Giorgio Adamo
@description    `<b>Sick of light? Join the darkness!</b>Consider supporting me by donating on <a href="paypal.me/giorgioadamo"><b>Paypal</b></a>Current donation count: € 0Thanks to:Well... you can be the first one if you appreciate my work :)You can easily <b>change the accent/theme color</b> according to your preference by clicking the button <b>CUSTOMIZE SETTINGS</b> right below the preview picture.Constantly updating as the newest WhatsApp web update release comes online (last update: July 2021). It may take a couple of days to fix the skin after a new release comes out, but don't worry... I will be on the case ;)Stay safe and have a productive day!UPDATED JULY 2021`
@version        20210724.21.3
@license        CC-BY-NC-4.0
@preprocessor   uso
@advanced color mainColor "Accent color" #FD4747

==/UserStyle== */
@-moz-document domain("web.whatsapp.com") {
	/* @import url("https://fonts.googleapis.com/css?family=Raleway"); */

	/* ignore the error icon below if using the Stylish code editor*/
	:root .dark,
	:root {
		--mainColor: /*[[mainColor]]*/ ;

		/* color-scheme */
		--superLightGray: #EEEEEE;
		--lightGray: rgb(85, 85, 85);
		--darkerGray: #1c1c1c;
		--darkGray: #222222;
		--blackRgb: 0, 0, 0;
		--mainColor: /*[[mainColor]]*/ ;
		--whitish: #d5d5d5;
		/* --alertMessage: "IMPORTANT: whatsapp released a new version of whatsapp web on 19.11.2020 breaking all the custom skins out there. I will release fixes in the next days to make it work again. Keep manually updating!!!"; */
		--alertMessage: "IMPORTANT: I fixed an important issue where the color customisation wouldn't work. Please UNISTALL the skin, then go to the skin URL, select a color of your choice and REINSTALL the skin! ";
		--alertMessageSize: 17x;
		--active-tab-marker: var(--mainColor) !important;
		--audio-progress-played-incoming: var(--mainColor) !important;
		--audio-progress-played-outgoing: var(--mainColor) !important;
		--audio-progress-incoming: var(--mainColor) !important;
		--audio-progress-outgoing: var(--mainColor) !important;
		--background-default: var(--darkGray) !important;
		--button-primary-background: var(--mainColor) !important;
		--intro-background: var(--darkerGray) !important;
		--menu-tabs-list-active: var(--mainColor) !important;
		--audio-track-outgoing: var(--superLightGray) !important;
		--audio-track-outgoing: var(--superLightGray) !important;
		--panel-background: var(--darkGray) !important;
		--panel-background-colored: var(--darkGray) !important;
		--dropdown-background-hover: var(--darkGray) !important;
		--unread-marker-background: var(--mainColor) !important;
		--video-primary: var(--mainColor) !important;
		--cl-1: var(--mainColor) !important;
		--cl-2: var(--mainColor) !important;
		--cl-3: #b14aed;
		--cl-4: #4474e4;
		--cl-5: #34d3b3;
		--cl-6: #2add7e;
		--cl-7: #f5f12f;
		--cl-8: #f69d37;
		--cl-9: #f32d4b;
		--cl-10: #e73287;
	}

	/*========= mentioned name =========*/
	/*========= mentioned name =========*/

	._1VzZY .matched-mention {
		cursor: pointer;
		color: var(--mainColor) !important;
	}

	/*========= video player bar + thumb fix =========*/
	/*========= video player bar + thumb fix =========*/

	.piNo6,
	._2KNOi,
	._3DHGF {
		z-index: 99999;
	}
	._2KNOi {
		left: -5px !important;
	}

	*::-webkit-scrollbar-track,
	*::-webkit-slider-runnable-track {
		background: var(--lightGray) !important;
	}

	body,
	span,
	header,
	div {
		font-family: "Raleway", sans-serif !important;
	}
	body {
		background-image: -webkit-linear-gradient(top, black, black) !important;
	}
	/*======== overlay messages ======== */
	/*======== overlay messages ======== */

	._NAbm.N7Dyd,
	.kA6WR.N7Dyd,
	._1lcup,
	._39Lm1,
	._1UyGr._18oGY {
		background: linear-gradient(
			15deg,
			rgba(var(--lightGray), 0),
			rgba(var(--lightGray), 0) 45%,
			rgba(var(--lightGray), 0.12) 70%,
			rgba(var(--lightGray), 0.33)
		) !important;
	}
	[data-asset-intro-image-light],
	[data-asset-intro-image-dark] {
		position: relative;
		top: 100px;
		background-image: url(http://i.imgur.com/Nzo0SUV.png);
		border-radius: 0px !important;
		filter: hue-rotate(-167deg);
		transform: scale(0.5) !important;
	}
	progress,
	a._3FXB1 {
		color: var(--mainColor) !important;
	}

	input#input-chatlist-search {
		background-color: var(--whitish) !important;
		border-radius: 5px;
		color: black;
	}
	progress[value]::-webkit-progress-value {
		background-color: var(--mainColor) !important;
	}

	/*========= alert message - maintenance =========*/
	/*========= alert message - maintenance =========*/

	#app:after {
		display: flex;
		display: none;
		color: var(--mainColor);
		content: var(--alertMessage);
		animation: alert 50s infinite linear;
		top: 0;
		white-space: nowrap;
		font-size: var(--alertMessageSize);
		padding: 2px 50px;
		height: 55px;
		left: -210vw;
		position: fixed;
		animation-iteration-count: 2;
		z-index: 99999999999999999999999999;
		background: var(--darkGray);
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	/*======== icons svg fill ========*/
	/*======== icons svg fill ========*/

	div[role="button"]:not(._15K2I) svg path,
    div[role="button"]._15K2I span._3l4_3 svg path,
	span[data-icon="status-dblcheck"] svg path,
	span[data-icon="chevron-right-alt"] svg path,
	span[data-icon="checkbox-round-unchecked"] svg path,
	span[data-icon="checkbox-round-checked"] svg path:nth-child(1),
	span[data-icon="round-x-inv"] svg path,
	span[data-icon="round-send-inv"] svg path,
	span[data-icon="round-x-inv"] svg path,
	span[data-icon="send"] svg path,
	span[data-icon="smiley"] svg path,
	span[data-icon="emoji-input"] svg path,
	span[data-icon="back"] svg path,
	span[data-icon="delete"] svg path,
	span[data-icon="download"] svg path,
	span[data-icon="forward"] svg path,
	span[data-icon="forward-chat"] svg path,
	span[data-icon="highly-forwarded"] svg path,
	span[data-icon="live-location-android"] svg path,
	span[data-icon="new-group"] svg path,
	span[data-icon="video-pip-large"] svg path,
	span[data-icon="media-download"] svg path,
	span[data-icon="recalled"] svg path,
	span[data-icon="refresh"] svg path,
	span[data-icon="round-send-inv"] svg path,
	span[data-icon="star"] svg path,
	span[data-icon="star-btn"] svg path,
	span[data-icon="status-check"] svg path,
	span[data-icon="status-audio"] svg path,
	span[data-icon="status-ptt"] svg path,
	span[data-icon="status-ptt-blue"] svg path,
	span[data-icon="status-ptt-gray"] svg path,
	span[data-icon="status-ptt-green"] svg path,
	span[data-icon="status-sticker"] svg path,
	span[data-icon="status-document"] svg path,
	span[data-icon="status-time"] svg path,
	span[data-icon="status-gif"] svg path,
	span[data-icon="status-vcard"] svg path,
	span[data-icon="recalled-in"] svg path,
	span[data-icon="video-pip"] svg path,
	span[data-icon="video-pause"] svg path,
	span[data-icon="video-play"] svg path,
	span[data-icon="video-volume-1"] svg path,
	span[data-icon="video-volume-2"] svg path,
	span[data-icon="video-volume-3"] svg path,
	span[data-icon="video-volume-muted"] svg path,
	span[data-icon="msg-video-light"] svg path,
	span[data-icon="msg-video"] svg path,
	span[data-icon="recalled-out"] svg path,
	span[data-icon="ptt-status"] svg path,
	span[data-icon="ptt-out-blue"] svg path,
	span[data-icon="ptt-in-blue"] svg path,
	span[data-icon="ptt-out-gray"] svg path,
	span[data-icon="ptt-in-gray"] svg path,
	span[data-icon="ptt"] svg path,
	span[data-icon="forwarded"] svg path,
	span[data-icon="recalled-in"] svg path,
	span[data-icon="back-light"] svg path,
	span[data-icon="audio-play"] svg path,
	span[data-icon="audio-pause"] svg path,
	span[data-icon="audio-download"] svg path,
	span[data-icon="media-play"] svg path,
	span[data-icon="back-blue"] svg path,
	span[data-icon="muted"] svg path,
	span[data-icon="search"] svg path,
	span[data-icon="default-group"] svg path:first-child,
	span[data-icon="default-user"] svg path:first-child,
	span[data-icon="x"] svg path,
	span[data-icon="x-alt"] svg path,
	span[data-icon="down"] svg path,
	span[data-icon="down-context"] svg path,
	span[data-icon="status-image"] svg path,
	span[data-icon="status-video"] svg path,
	span[data-icon="laptop"] svg path,
	g[clip-path="url(#image-SVGID_2_)"] path,
	g[clip-path="url(#camera-SVGID_2_)"] path,
	g[clip-path="url(#document-SVGID_2_)"] path,
	g[clip-path="url(#contact-SVGID_2_)"] path,
	g[clip-path="url(#rooms-SVGID_2_)"] path,
	._3xkAl svg path {
		fill: var(--mainColor) !important;
	}

	._6vYCc,
	._37Tzw,
	._1b8eK,
	._34Zo9,
	.RXmfT svg path,
	._3fnYk {
		stroke: var(--mainColor) !important;
	}

	._1jJLh span svg path,
	.yavlE span svg path,
	span[data-icon="ptt-status"] svg path:first-child,
	span[data-icon="ptt-out-blue"] svg path:first-child,
	span[data-icon="ptt-in-blue"] svg path:first-child,
	span[data-icon="ptt-out-gray"] svg path:first-child,
	span[data-icon="ptt-in-gray"] svg path:first-child {
		fill: var(--darkGray) !important;
	}
	._3hV1n span svg path,
	._2m8GO span svg path:nth-child(2) {
		fill: var(--whitish) !important;
	}
	.tail-container {
		display: none;
	}
	.app {
		box-shadow: 0px 0px 2px 0px black !important;
	}
	._2EXPL:hover:after,
	._2EXPL._3df_h:after,
	._2EXPL._1f1zm:after {
		border-top: 0px !important;
	}
	._1fkhx,
	._3AwwN,
	._2WP9Q,
	._2UaNq._3mMX1:after,
	._2UaNq._16_lP:after,
	._2UaNq:hover:after,
	._1WWP0,
	._3Pwfx:hover:after,
	._3Pwfx._1GGbM:after,
	._2Z4DV:hover:after {
		border: none !important;
	}
	._1wSzK {
		display: none;
	}
	._3NteO {
		cursor: zoom-in;
	}
	div[aria-selected]:hover,
	div[aria-selected="true"] {
		filter: contrast(1.1);
	}

	._20WGU,
	._15CAo._3EQsG,
	._1UyGr ._18oGY {
		background: linear-gradient(
			15deg,
			transparent,
			transparent 45%,
			rgba(0, 0, 0, 0.12) 70%,
			rgba(0, 0, 0, 0.33)
		) !important;
	}

	/*======== dark background ========*/
	/*======== dark background ========*/

	.chat.active,
	._1NrpZ,
	.L89LI,
	._1C...