4chan - Dark x3 by yigitskylab

/* ==UserStyle==
@name           4chan - m4v
@namespace      USO Archive
@author         yigitkucuk
@description    `A dark, minimalist 4chan theme`
@version        0.1
@license        GNU GPLv3
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("4chan.org"),
domain("4channel.org") {

	hr {
		margin-top: 100px !important;
		padding-top: 0px !important;
		border: 0 !important;
	}


	:root {
		--post-bg: #151515 !important;
		--alt-bg: #1d1d1d !important;
		--header-bg: #1a1a1a !important;
		--main-text: #c0c0c0 !important;
		--secondary-text: #192 !important;
		--third-text: #a88a88 !important;
		--title-text: #B92B92 !important;
	}



	body,
	html {
		background: var(--alt-bg) !important;
		background-repeat: repeat !important;
		background-attachment: fixed !important;
		background-position: center center !important;
		margin: 0 auto !important;
	}


	.div.boardTitle,
	.yotsuba-b:root div.boardTitle,
	div.boardTitle {
		display: none !important;
		margin-top: 40px !important;
	}

	body {
		margin-top: 10px !important;
	}

	#bannerCnt {
		display: none !important;
	}

	/*
	body::after {
    position: fixed !important;
    margin-left: -150px !important;  
	bottom: -250px !important; 
    z-index: 1 !important;    
	position: fixed !important;
    content: url('https://www.pngmart.com/files/15/Vector-School-Anime-Girl-PNG-Photos.png');
    opacity:0.5;
	-webkit-transform: scale(0.67);
    -moz-transform: scale(0.67);
    transform: scale(0.67);
	}   
	*/
	div.opContainer {
		min-height: 180px !important;
		overflow: hidden;
	}


	.div.boardTitle,
	.yotsuba-b:root div.boardTitle,
	div.boardTitle {
		text-align: center;
		font-family: "Segoe Script", cursive !important;
		font-size: 48px !important;
		padding: 0px !important;
		color: var(--title-text) !important;
		text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) !important;
	}


	body,
	#qr,
	#thread-watcher,
	#thread-watcher .refresh,
	.menu-button .fa,
	#watched-threads .watcher-title,
	#watched-threads .watcher-unread,
	#thread-watcher a,
	.entry,
	#qr textarea.field,
	.right-box,
	.field,
	.globalMessage,
	div#boardNavDesktop,
	table.postForm > tbody > tr > td:first-child,
	input[type="text"],
	input[type="password"],
	table.postForm > tbody textarea,
	#recaptcha_response_field,
	div#boardNavDesktopFoot,
	.gal-count,
	#index-search,
	.expand-all-shortcut,
	.subject,
	div.post div.postInfo,
	#custom-board-list,
	.yotsuba-b:root #board-list a,
	.yotsuba:root #board-list a {
		color: var(--main-text) !important;
	}


	#watcher-link,
	.warning,
	div.post div.postInfo span.nameBlock span.name,
	div.post div.postInfo span.nameBlock span.postertrip,
	.nameBlock,
	.yotsuba_b_new .backlink,
	.quotelink,
	.yotsuba_b_new .backlink a,
	a:hover,
	code,
	blockquote > span.quote,
	.catalog-thread > .comment > span.quote,
	.yotsuba:root #board-list a:hover,
	#watched-threads .watcher-title:hover,
	.section-main label {
		color: var(--secondary-text) !important;
	}


	a,
	div.post div.postInfo span.postNum a:hover,
	a.deadlink,
	a.close,
	.tab-filter,
	a.tab-main.tab-selected,
	#qr-no-file,
	.yotsuba-b:root .entry,
	#boards a,
	.boxbar,
	.deadlink,
	.gal-name,
	#qr select,
	select,
	kbd,
	#thread-watcher > .move,
	.qr-shortcut,
	span.dateTime,
	.yotsuba.fixed:root #custom-board-list .current,
	.yotsuba-b.fixed:root #custom-board-list .current,
	.yotsuba-b:root #header-bar:hover,
	.yotsuba-b:root #board-list a:hover,
	.quotelink:hover,
	.settings-link,
	span.menu-button,
	#thread-stats,
	.container,
	.fileText,
	.yotsuba:root #header-bar,
	.yotsuba:root #notifications,
	div.post div.postInfo span.postNum,
	div.post div.postInfo span.postNum a {
		color: var(--third-text) !important;
	}



	div.reply,
	.catalog-mode:root .board,
	.inline .post {
		background: var(--post-bg) !important;
	}


	.boxcontent,
	.top-box,
	.left-box,
	.right-box,
	#recent-images a {
		background: var(--post-bg) !important;
	}


	#fourchanx-settings.dialog,
	fieldset legend,
	.yotsuba-b:root .suboption-list > div:last-of-type,
	.dialog:not(#qr):not(#thread-watcher):not(#header-bar),
	#fourchanx-settings code,
	kbd,
	.reply:target,
	.reply.highlight,
	.yotsuba-b:root .inline {
		background: var(--post-bg) !important;
	}

	#header-bar,
	.yotsuba-b:root:not(.fixed) #header-bar,
	span.boardList,
	.yotsuba:root .suboption-list > div:last-of-type {
		background: var(--header-bg) !important;
	}


	.yotsuba:root .inline,
	.boxbar,
	#qr select {
		background: var(--alt-bg) !important;
	}


	#ft li,
	.right-box,
	.boxcontent,
	.top-box,
	.left-box,
	#recent-images .boxcontent,
	#qr select,
	#archive-board-select,
	select {
		border: none !important;
	}

	.top-box .menubutton,
	.right-box .menubutton {
		background-image: none !important;
	}

	#ft li,
	#ft ul {
		background: none !important;
		border: none !important;
	}


	img:hover {
		opacity: 0.7 !important;
		transition: 0.3s ease-in-out !important;
	}

	body {
		overflow-x: hidden !important;
	}

	.highlight-you:root .quotesYou.opContainer,
	.highlight-you:root .quotesYou > .reply {
		border-top: 1px solid var(--secondary-text) !important;
	}

	.post.reply.highlight {
		border-top: 1px solid var(--secondary-text) !important;
	}

	.message {
		background-color: var(--post-bg) !important;
		color: var(--main-text) !important;
		text-shadow: none !important;
	}

	.yotsuba:root #board-list a,
	a:hover,
	#watched-threads .watcher-title:hover {
		transition: ease-in-out .2s !important;
	}

	#qr input.field {
		opacity: 0 !important;
	}

	#qr input.field:hover {
		opacity: 1 !important;
	}

	.centered-links:root #custom-board-list,
	#thread-stats,
	.settings-link,
	span.menu-button,
	#watcher-link,
	#shortcut-gallery,
	#thread-stats,
	.div.boardTitle,
	.yotsuba-b:root div.boardTitle,
	div.boardTitle {
		background: rgba(0, 0, 0, 0) !important;
	}

	#header-bar {
		background: var(--post-bg) !important;
		max-height: 50px !important;
	}

	#header-bar::before {
		position: absolute !important;
		margin: auto !important;
		left: 0 !important;
		top: 0 !important;
		margin-top: 40px !important;
		max-height: 100px !important;
		width: 800px !important;
	}


	div.thread {
		max-width: 1100px !important;
		margin: 0 auto !important;
	}



	div.op {
		margin-top: 0px !important;
	}


	#header-bar {
		border: 0 !important;
		margin: 0 auto !important;
		margin-top: 0px !important;
		display: inline-block !important;
	}

	span.boardList {
		margin-top: 0px !important;
		display: inline-block !important;
	}
	.hide-board-list-button {
		margin-top: 28px !important;
		display: inline-block !important;
	}

	.yotsuba-b:root #board-list {
		max-width: 396px !important;
	}


	#header-bar a.current,
	.yotsuba-b:root #board-list a,
	.section-main label {
		text-decoration: none !important;
	}

	.index-refresh-shortcut,
	span.shortcut:nth-child(5),
	#shortcut-index-refresh > a:nth-child(1) {
		display: none !important;
	}

	div.reply {
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	}
	div.reply:hover {
		box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
	}


	.replyContainer {
		padding: 0px !important;
	}

	.postContainer.replyContainer {
		margin-top: -5px !important;
	}

	.post.reply,
	.opContainer,
	.post.reply:hover {
		width: 100% !important;
		padding: 10px !important;
		-moz-box-sizing: border-box!important;
	}

	div.opContainer {
		width: 100% !important;
		margin: 0 auto !important;
	}

	.opContainer {
		display: none;
		padding-bottom: 3px !important;
	}

	span.postNum a:hover {
		font-family: Open Sans !important;
	}

	div.reply,
	.post.reply,
	.opContainer {
		border: 0px !important;
		border-style: solid !important;
	}


	div.post blockquote.postMessage {
		width: 96% !important;
	}


	div.post div.postInfo span.postNum {
		padding: 8px !important;
		float: right !important;
		margin-right: 4px !important;
		margin-top: -8px !important;
	}

	span.dateTime {
		padding: 4px !important;
		right: 27% !important;
		margin-top: -4px !important;
	}

	.fa-angle-down::before,
	.op .menu-button,
	.postContainer .menu-button {
		content: url("http://i.imgur.com/6aLeXdr.png") !important;
		margin-right: 0px;
		margin-top: 1px;
		float: right;
		width: 10px !important;
		height: 10px !important;
	}

	.fa-angle-down::before {
		opacity: 0.5 !important;
	}

	img {
		border: 0px !important;
		border-color: var(--alt-bg) !important;
		border-style: solid !important;
	}

	.backlink:first-child::before {
		margin-left: -5px !important;
	}
	.backlink {
		font-size: 0 !important;
	}
	.backlink:after {
		content: url("http://i.imgur.com/7E3vTXf.png") !important;
		font-size: 12px !important;
		margin-right: 0px !important;
		opacity: 0.5 !important;
	}

	.backlink:after {
		margin-left: 8px !important;
	}
	.backlink:hover::after,
	.backlink.filtered:hover::after {
		opacity: 0.65 !important;
	}
	.backlink.filtered:after {
		opacity: 0.65 !important;
	}
	.post.op .backlink:first-child {
		margin-left: 0px !important;
	}

	body,
	.post.reply,
	.opContainer,
	#board-list,
	#custom-board-list,
	#menu.dialog,
	.entry,
	.yotsuba-b:root .suboption-list > div:last-of-type,
	option,
	#qr textarea.field,
	.field,
	#index-search.field,
	#updater.dialog,
	#thread-stats.dialog,
	#thread-stats,
	.boardSubtitle,
	#thread-watcher,
	div.post div.postInfo span.nameBlock span.postertrip,
	div.post div.postInfo span.nameBlock span.name,
	div.post div.postInfo span.subject,
	#qr:not(.captcha-open) .captcha-counter > a,
	#file-n-submit > input,
	#watcher-link,
	.settings-link,
	.expand-all-shortcut,
	.qr-shortcut,
	div#boardNav...