Stylus Dracula by Himither

/* ==UserStyle==

@name			Stylus Dracula
@namespace		https://github.com/Himither
@homepageURL		https://github.com/Himither/Stylus-Dracula
@supportURL		https://github.com/Himither/Stylus-Dracula/issues
@version		1.0.14
@description		Improved dracula theme covering the whole extension instead of just the editor
@author			Himither
@license		MIT
@preprocessor		stylus

@var checkbox		firacode-font		"Use Fira Code in editor"	0
@var range		firacode-weight		"Adjust font weight"		[500, 100, 900, 100, ""]
@var checkbox		scrollbars		"Hide all scrollbars"		0

==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*"),
regexp("^\\w+-extension://.+") {
	:root {
		/* https://draculatheme.com/contribute#color-palette */
		--background: #282A36;
		--currentLine: #44475A;
		--foreground: #F8F8F2;
		--comment: #6272A4;
		--cyan: #8BE9FD;
		--green: #50FA7B;
		--orange: #FFB86C;
		--pink: #FF79C6;
		--purple: #BD93F9;
		--red: #FF5555;
		--yellow: #F1FA8C;
		--fg: var(--foreground);
		--bg: var(--background);

		/* Turns out you can right-click inspect extension popups in Google Chrome, unlike in Firefox... */
		--cmin: var(--orange); /* Hovered labels belonging to active styles */
		--c00: var(--fg); /* ??? */
		--c10: var(--fg); /* ??? */
		--c20: var(--fg); /* ??? */
		--c30: var(--orange); /* Hovered labels belonging to unactive styles */
		--c40: var(--fg); /* Icons i:hover, .i.info and .i-config */
		--c45: var(--comment); /* Checked non-slider checkboxes */
		--c50: var(--currentLine); /* Disabled label, style result borders & header-resize borders an */
		--c60: var(--currentLine); /* Disabled styles, their labels and options border */
		--c65: var(--foreground); /* Style order number in the popup */
		--c70: var(--bg); /* Color of background gradient for popup -> Find Styles */
		--c75: var(--currentLine); /* Scrollbar & manage page section hover dotted underline */
		--c80: var(--currentLine); /* Dotted borders */
		--c85: var(--bg); /* Some horizontal borders and gradient atbottom of find styles*/
		--c90: var(--bg); /* Options footer */
		--c95: var(--currentLine); /* Find styles top gradient and unhovered style footer */
		--c97: var(--bg); /* #header (sidemenu of editor) background */
		--c98: var(--bg); /* Editor background */
		--c99: var(--red); /* ??? */
		--c100: var(--red); /* ??? */
		--cmax: var(--red); /* ??? */
		--accent-1: var(--green); /* Checkbox mark for user css on manage page */
		--accent-2: var(--green); /* Checked slider checkbox know thumb */
		--accent-3: var(--red); /* ??? */
		--gold1: var(--purple); /* ??? */
	}

	/* ------------------------------------------------------ General */
	*::selection {
		color: var(--bg);
		background-color: var(--pink);
	}

	if firacode-font {

		:root .single-editor *:not(i) {
			font-family: "Fira Code", monospace;
			font-optical-sizing: auto;
			font-weight: firacode-weight;
		}
	}

	if scrollbars {

		#stylus,
		#stylus * {
			scrollbar-width: none;
		}
	}


	.split-btn-menu {
		border-radius: 4px;
		border-color: var(--currentLine);
		box-shadow: none;
	}

	.split-btn-menu a:hover {
		background-color: transparent;
	}

	#stylus :is(a,
	button) {
		cursor: pointer;
	}

	#stylus .split-btn > button:has( + button) {
		border-radius: 4px 0 0 4px;
	}

	#stylus .split-btn > button + button {
		border-radius: 0 4px 4px 0;
		margin-left: 0 !important; /* Must be !important */
	}

	#stylus div#header {
		box-shadow: none;
	}


	#stylus #header-resizer {
		opacity: 0.25;
		color: var(--currentLine);
	}

	#stylus #header-resizer:active {
		opacity: 1;
	}

	/* ------------------------------------------------------ Extension Popup */
	#stylus-popup {
		min-width: 599px !important; /* This is the max length for two displaying two columns  */
	}
		
	#stylus-popup #message-box.config-dialog > div {
		opacity: 1;
		box-shadow: none;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}
	
	#stylus-popup #message-box.config-dialog > div > :is(#message-box-title, #message-box-buttons) {
		border-radius: 0;
	}
	
	#stylus-popup #options-btn svg {
		height: 16px;
	}

	#stylus-popup .search-result {
		box-shadow: none;
	}

	#stylus-popup #options-btn:hover svg {
		color: var(--pink);
	}

	#stylus-popup .config-body label:not(:first-child) {
		border-top: transparent;
		padding-top: 4px
	}

	#stylus-popup #search-results {
		background: none;
	}

	#stylus-popup .search-result {
		background-color: var(--currentLine);
	}

	#stylus-popup .search-result:hover {
		border-color: var(--comment);
	}

	.search-result-meta {
		justify-content: space-evenly;
	}

	#stylus-popup :is(.search-result-info,
	#stylus-popup .search-result-screenshot) {
		border-radius: 4px;
	}

	#stylus-popup .search-result-meta::before {
		border-radius: 0 0 4px 4px;
	}

	#stylus-popup .search-result [data-type] {
		background-color: transparent;
	}
	
	#stylus-popup #menu.delete > div {
		border-color: var(--red);
	}
	
	#stylus-popup #menu.delete header {
		background: var(--red);
	}

	/* ------------------------------------------------------ Edit Page */
	#stylus-edit details#options section.aligned {
		display: flex;
		flex-direction: column;
		row-gap: 4px;
	}

	#stylus-edit details#options section.aligned > div {
		display: flex;
		justify-content: space-between;
	}

	#stylus-edit details#options section.aligned > div > div {
		margin-left: auto;
		order: 1;
	}

	#stylus-edit section#usw-data {
		display: flex;
		flex-direction: column;
	}

	#stylus-edit section#usw-data > div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#stylus-edit section#usw-data > div > input {
		width: 50%;
	}


	#stylus-edit div:is(.CodeMirror-active,
	#stylus-edit .CodeMirror-focused,
	#stylus-edit .search-target-editor) {
		box-shadow: none;
	}

	#stylus-edit div.section > div.CodeMirror {
		margin: 8px 0;
		border-radius: 4px;
	}

	#stylus-edit div.resize-grip,
	#stylus-edit div.resize-grip::after {
		color: var(--currentLine);
	}

	#stylus-edit div.CodeMirror-gutter-background {
		background-color: var(--currentLine);
	}

	#stylus-edit .CodeMirror-linenumber {
		color: var(--currentLine);
	}

	#stylus-edit .CodeMirror-linenumber:hover,
	#stylus-edit .CodeMirror-activeline .CodeMirror-linenumber {
		color: var(--fg);
	}

	#stylus-edit div.CodeMirror-activeline-background {
		background-color: var(--currentLine);
	}

	/* ------------------------------------------------------ Mangage Page */
	#stylus-manage #manage-settings {
		padding: 0 4px;
	}

	#stylus-manage summary h2 {
		border-bottom: none;
	}

	#stylus-manage #filters-stats {
		color: var(--currentLine);
		background-color: var(--orange);
		border-color: var(--orange);
		border-radius: 4px;
	}

	#stylus-manage .filter-selection {
		margin-bottom: 4px;
	}

	#stylus-manage .filter-selection select {
		box-sizing: border-box;
		border: 1px solid transparent;
	}

	#stylus-manage .filter-selection:hover,
	#stylus-manage #filters label {
		background-color: transparent;
	}


	#stylus-manage .filter-selection .select-wrapper {
		left: 28px;
	}

	#stylus-manage #search-wrapper input {
		border-radius: 4px 0 0 4px;
	}

	#stylus-manage #search-wrapper select {
		border-radius: 0 4px 4px 0;
		margin-left: 3px;
	}

	#stylus-manage #manage-text {
		margin-top: 4px;
		display: flex;
		flex-direction: column;
		row-gap: 4px;
	}

	#stylus-manage #manage-text span::after {
		content: "";
	}

	#stylus-manage #message-box #message-box-contents {
		box-shadow: none;
	}

	/* Style injection order bottom text */
	#stylus-manage #message-box #message-box-contents section[data-prio] header {
		background-color: var(--purple);
		color: var(--bg);
	}

	/* ------------------------------------------------------ Install Page */
	#stylus h2.install-show {
		color: var(--pink);
	}

	/* ------------------------------------------------------ Dialog, Modal */
	#stylus #message-box > div,
	#stylus div#help-popup,
	#stylus body#stylus-options {
		opacity: 0.95;
		border-radius: 8px;
	}

	#stylus #message-box-title,
	#stylus #help-popup > div.title,
	#stylus body#stylus-options header {
		background-color: var(--currentLine);
		border-radius: 8px 8px 0 0;
	}

	#stylus div#message-box.danger > div > div#message-box-title {
		background-color: var(--red);
	}

	#stylus body#stylus-options {
		border-color: transparent;
	}

	#stylus body#stylus-options header {
		border-bottom-color: transparent;
		min-width: 700px;
	}

	#stylus body#stylus-options div.block {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	#stylus body#stylus-options div.items {
		display: flex;
		flex-direction: column;
		row-gap: 8px;
	}

	#stylus body#stylus-options div.items label span:nth-child(2):not(:has( + input)),
	#stylus body#stylus-options div.items label input:nth-child(3) {
		margin-left: auto;
	}

	#stylus body#stylus-options div.items span:not(.sync-status) {
		order: 0;
	}

	#stylus body#stylus-options div.actions button.connect {
		border-radius: 4px 0 0 4px;
	}

	#stylus body#stylus-options div.actions button.connect + button {
		border-radius: 0 4px 4px 0;
	}

	#stylus body#stylus-options footer {
		border-radius: 0 0 8px 8px;
	}

	#stylus #message-box-buttons {
		background-color: var(--bg);
		border-radius: 0 0 8px 8px;
	}

	#stylus div#search-replace-dialog {
		padding-top: .75em;
		border-radius: 0 0 8px 8px;
		border-color: transparent;
	}

	#stylus div#search-replace-dialog > div {
		padding-left: .75em;
	}

	#stylus #search-replace-dialog a:hover {
		text-decoration: none;
	}

	#stylus #search-replace-dialog [data-action="case"][data-enabled]::after {
		border-color: var(--cyan);
	}

	#stylus div#search-replace-dialog div[data-type="status"] {
		border-radius: 0 0 8px 8px;
	}

	#stylus div#search-replace-dialog textarea {
		box-shadow: none;
		border-radius: 4px;
	}

	#stylus #search-replace-dialog > div {
		background-color: var(--bg);
	}

	/* ------------------------------------------------------ Buttons, In...