4chan clean thread by GitEin11

/* ==UserStyle==
@name           4chan clean thread
@namespace      4chan clean thread
@version        1.0.4
@description    4chan clean thread to be use with Dark4chan modified
@author         ein
@preprocessor   stylus
@var checkbox   toggleImage "show Images/GIFs" 1
@var checkbox   toggleQuote "show Quote" 0
==/UserStyle== */
@-moz-document regexp("https:\\/\\/boards\\.4chan\\.org\\/[^\\/]+\\/thread\\/[^\\/]+") {
	@font-face {
		font-family: 'Montserrat';
		src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
	}
	.navLinks.navLinksBot.desktop {
		display: block !important;
		a[href="#top"] {
			opacity: 0;
			display: block !important;
			position: fixed !important;
			bottom: 10px !important;
			right: 100px !important;
			align-content: center;
			text-align: center;
			font-size: 0px;
			height: 32px;
			border-bottom-color: #0000 !important;
			border-radius: 60px !important;
			padding: 0 10px;
			transform: translateX(50%);
			line-height: 32px;
			&:before {
				content: "Back to Top";
				display: block;
				font-size: 14px;
				font-weight: 700;
				font-family: Noto Sans;
			}
			&:hover {
				color: #6f8e9e !important;
				background: rgba(0, 0, 0, 0) !important;
				border-bottom-color: #0000 !important;
				opacity: 1;
				&:before {
					font-size: 17px;
				}
			}
		}
	}
	a[data-cmd="embed"] {
		display: inline-block;
		margin: 0.2rem .5rem;
		border-radius: 0.1875rem;
		background-color: #4d728000;
		text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
		color: #efefef !important;
		text-align: center;
		font-size: 11px;
		width: 80px;
		height: 22px;
		line-height: 22px;
		font-weight: 300;
	}
	div.op blockquote.postMessage {
		margin-left: 40px !important;
	}
	div#boardNavDesktop {
		display: none;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 9001;
	}

	#boardNavDesktop * {
		display: none;
	}
	div.boardBanner {
		display: none;
		margin: 0;
	}

	ps-par {
		display: block;
	}
	div.boardBanner > div.boardTitle {
		font-family: 'Montserrat';
		font-weight: 100;
		color: #666 !important;
		font-size: 28px !important;
		letter-spacing: 1px !important;
	}
	body {
		background: #191919 !important;
	}
	span.nameBlock,
	span.nameBlock *,
	span.subject,
	span.subject *,
	blockquote.postMessage,
	blockquote.postMessage span,
	blockquote.postMessage br {
		display: initial;
	}
	@media only screen and (max-width: 600px) {
		div#boardNavDesktop {
			display: none !important;
		}
	}
	@media screen and (min-width: 481px) {
		div.op {
			display: grid !important;
			grid-template-rows: auto auto;
			grid-template-columns: max-content 1fr;
			div.postInfo {
				grid-row: 1 / 2;
				grid-column: 1 / -1;
			}
			div.file {
				grid-row: 2 / 3;
				grid-column: 1 / 2;
			}
			.postMessage {
				grid-row: 2 / 3;
				grid-column: 2 / 3;
				margin-left: 0 !important;
			}
		}
	}
	div#boardNavMobile,
	div.navLinks {
		display: none !important;
	}
	if toggleImage {

		div.boardBanner,
		*:has(div.boardBanner > div.boardTitle) {
			display: block;
		}

		div.boardBanner > div.boardTitle,
		div.boardBanner > div.boardTitle *,
		div#boardNavDesktop *,
		.fileThumb,
		.fileThumb * {
			display: initial
		}

		div.op blockquote.postMessage {
			margin-left: 0px !important;
		}
		div#boardNavDesktop {
			padding: 6px !important;
			color: #ccc !important;
			background-color: #202020 !important;
			box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
			border-top: 3px solid #498152 !important;
			border-bottom: none !important;
			font-size: 9pt !important;
			display: block !important;
		}
	}
	#yt-preview {
		width: fit-content;
		margin: 0 !important;
	}
	.postMessage > a:nth-child(1) + br,
	a + br + br,
	a + br + a + br {
		display: none !important;
	}

	if toggleQuote {
		.quotelink {
			display: inline !important;
		}
		.postMessage > a:nth-child(1) + br,
		a + br + br,
		a + br + a + br {
			display: inline !important;
		}
	}
	#quote-preview {
		margin-left: 5px !important;
		width: max-content;
		max-width: 80vw !important;
		div.file {
			background: #0000 !important;
		}
	}
	.postMenuBtn,
	* {
		display: none;
	}

	div.boardBanner {
		color: #666 !important;
		margin-top: 40px !important;
	}
	#navtopright,
	#navbotright,
	.boardList {
		color: transparent;
	}
	.boardList a::after {
		content: "·";
		margin-right: -10px;
		padding-left: 2px;
		cursor: pointer;
		display: inline-block;
		color: #747474 !important;
		pointer-events: none !important;
	}
	a,
	.button,
	a:hover,
	.burichan_new .backlink a,
	.yotsuba_b_new .backlink a,
	.quoteLink,
	.quotelink,
	.deadlink,
	a.replylink:not(:hover),
	div#absbot a:not(:hover),
	#arc-list .quotelink {
		color: #747474 !important;
		text-decoration: none !important;
		transition: all 0.1s !important;
	}
	#navtopright,
	#navbotright {
		float: right;
	}
	*:has(span.nameBlock, pan.subject, blockquote.postMessage) {
		display: block;
	}
	div.thread > div:nth-of-type(2) > div.reply,
	div.reply,
	div.op {
		background-color: #232323;
		padding: 2px;
		box-shadow: 2px 2px 2px #171717;
		border: 1px solid #262626;
		margin-left: 10% !important;
		width: calc(100% - 20%);
		margin-top: 10px !important;
		color: #c3c3c3 !important;
	}
	div.postInfo,
	div.opContainer div.post div.postInfo {
		background: #1d1d1d;
		padding: 9px;
		margin-bottom: 5px !important;
		width: auto;
	}
	div.post div.postInfo span.subject {
		color: #cb975b;
	}
	div.thread > div > div.reply {
		display: inline-block;
		margin-top: 2px !important;
	}
	blockquote > span.quote {
		color: #85b76f;
		text-shadow: rgba(0, 0, 0, .8) 0px 0px 3px;
	}

	div.op div.postInfo {
		display: flex;
		span.nameBlock {
			order: 1;
		}
		span.subject {
			order: 2;
			margin-left: 1ch;
		}
	}
	@media screen and (max-width: 600px) {
		div.thread > div:nth-of-type(2) > div.reply,
		div.reply,
		div.op {
			margin-left: 0px !important;
			width: 100%;
			box-sizing: border-box;
		}
		div.op blockquote.postMessage {
			margin-left: 10px !important;
		}
		div.post div.postInfoM {
			background: #1d1d1d !important;
			padding: 9px;
			margin-bottom: 5px !important;
			width: auto;
			border-color: #0000;
		}
		div.post div.postInfoM span.subject {
			color: #cb975b !important;
		}
		#boardNavMobile,
		#boardNavMobile *,
		div.navLinks a {
			display: initial !important;
		}
		div.replyContainer,
		div.opContainer {
			background: #191919 !important;
		}

		@media only screen and (min-width: 481px) {
			div.thread > div > div.reply {
				margin-left: 0px !important;
				width: 100%;
				box-sizing: border-box;
			}
		}
	}
}