Skip to content

Stylus Dracula by Himither

Mirrored from https://raw.githubusercontent.com/Himither/Stylus-Dracula/master/stylus-dracula.user.css

Screenshot of Stylus Dracula
Homepage Write a review Install Get Stylus

Details

AuthorHimither

LicenseMIT

Categorystylus

Created

Updated

Size16 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Improved dracula theme covering the whole extension instead of just the editor

Notes

Features

  • Extends the editor Dracula theme to the whole extension
  • A smoother, more rounded interface with less harsh corners
  • More spacious extension Pop-Up using the maximally allowed width and height
  • Firacode font option for editor (must be installed)

Changelog

1.0.16

  • Reduced row-gap between options to 4px in the Style manager Options Pop-Up

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==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.16
@description		        mproved 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:has(#message-box) {
		height: 600px; /* 600px is the max height, this only applies when open the config of a style*/
	}

	#stylus:has(#message-box) {
		height: 600px; /* 600px is the max height, this only applies when open the config of a style*/
	}

	#stylus-popup {
		width: 800px !important; /* 800px is the max width of the popup, !important to overwrite inline style  */
		max-width: unset !important;
		width: 800px !important; /* 800px is the max width of the popup, !important to overwrite inline style  */
		max-width: unset !important;
	}


	#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: 4px;
	}

	#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...

Reviews

No reviews yet.