Useful Forks Dark Mode by imdom

/* ==UserStyle==
@name           Useful Forks Dark Mode
@namespace      github.com/openstyles/stylus
@version        1.0.4
@description    Dark mode for the incredible useful usefulforks.github.io
@author         domportera
==/UserStyle== */
@-moz-document domain("useful-forks.github.io") {

	:root {
		--dark-bg-color: #151515;
		--dark: #333;
		--darker: #222;
		--muted-white: #ccc;
		--button-invert: invert(83%);
		--dim-amount: 0.9;
		--dim: brightness(var(--dim-amount));
		--input-field-placeholder-color: #ccc3;
		
		background-color: var(--dark-bg-color);
		color: var(--muted-white);
	}

	.input::placeholder,
	.select select::placeholder,
	.textarea::placeholder {
		color: var(--input-field-placeholder-color);
	}

	.allButFooter,
	.footer,
	.useful_forks_table,
	.useful_forks_repo,
	.title {
		background-color: var(--dark-bg-color) !important;
		color: var(--muted-white) !important;
	}

	strong,
	.navbar-item {
		color: var(--muted-white) !important;
	}

	.badge {
		box-shadow: 0 0 0 2px var(--muted-white) !important;
		color: var(--muted-white) !important;
	}

	.uf_badge,
	.modal-card-foot .button,
	nav img {
		filter: var(--dim);
	}

	.useful_forks_repo:hover,
	.useful_forks_table:hover {
		background-color: var(--darker) !important;
	}

	.octicon,
	footer .button {
		filter: var(--button-invert);
	}

	div #useful_forks_msg img {
		filter: var(--dim);
	}

	.control .is-expanded,
	.input,
	.modal-card [class*="modal-card-"],
	.modal-card-body label,
	#uf_csv_export_btn,
	.has-background-info-light#useful_forks_msg {
		background-color: var(--dark) !important;
		color: var(--muted-white) !important;
	}

	.control .button{
		color: var(--muted-white) !important;
		background-color: var(--darker) !important;
	}

	.control .button:hover{
		filter: var(--dim);
	}

	.control .button:hover #totalApiCalls
	{
		--offset-brightness: calc(1/var(--dim-amount));
		filter: brightness(var(--offset-brightness) ) !important;
	}
}