UserStylus by mehehehehe82

/* ==UserStyle==
@name           UserStylus
@description	Dark mode for Stylus and more!
@namespace      userstyles.world
@version        1.0.0
@preprocessor   less
@var color bgcol "Background color" #263238
@var color txcol "Text color" #fff
@var color yechk "Checked color" #0f0
@var color nochk "Not checked color" #f00
==/UserStyle== */
@tint: 60%;

@-moz-document url-prefix("moz-extension://96a2332a-f128-4604-87f4-e3d195bcd831/"),
url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/") {
	// General theming
	// At least it's not an important directive
	:is(#important, :root) {
		#header,
		#sections,
		#help-popup,
		#message-box-contents,
		#message-box-buttons,
		.applies-to,
		.applies-to label,
		body {
			background: @bgcol;
			color: @txcol;
		}

		svg > use {
			fill: @txcol;
		}

		input:not([type]),
		input[type="search"],
		select,
		.options-wrapper {
			color: @txcol;
			background: @bgcol;
		}

		#searchMode,
		a {
			color: @txcol;
		}

		input[type=checkbox]:not(:checked) {
			background: @nochk;
		}

		label:hover input[type=checkbox]:not(:checked) {
			background: tint(@nochk, @tint);
		}

		input[type=checkbox]:checked {
			background: @yechk
		}

		label:hover input[type=checkbox]:checked {
			background: tint(@yechk, @tint);
		}

		button:not(:disabled):hover {
			background: mix(@bgcol, @txcol, 70%)
		}


		button {
			border-radius: 100em;
			color: @txcol;
			&:not([disabled]) {
				background: shade(@yechk, @tint);
			}
			&[disabled] {
				background: shade(@nochk, @tint);
			}

			padding: 0.780em;
			margin-right: 3;
		}
	}
}

@-moz-document url-prefix(moz-extension://96a2332a-f128-4604-87f4-e3d195bcd831/edit.html) {
	// Editor
	.CodeMirror {
		font-family: // LIgature fonts
		"Fira Code Regular",
		"Fira Code",
		"Monoid", // Regular fonts
		"Sauce Code Pro",
		"Source Code Pro",
		monospace
	}

	.cm-s-default .cm-tag {
		color: blue;
	}

	.CodeMirror-hints {
		background: @bgcol;
		.CodeMirror-hint {

			color: @txcol;
		} //
	}
}

@-moz-document url(moz-extension://96a2332a-f128-4604-87f4-e3d195bcd831/popup.html) {
	// Popup menu
	:is(#important, :root) {
		body {
			background: @bgcol;
			color: @txcol;
			/* Override inline style */
			width: 100vw !important;
			height: 100vh;
		}

		div#popup-options {
			bottom: 0px;
		}
	}
}