dark theme for stylus editing
/* ==UserStyle==
@name atom styled stylus
@description dark theme for stylus editing
@author dogy
@license CC0
@preprocessor stylus
@version 0.0.1.20200806165742
@namespace https://greasyfork.org/users/673939
==/UserStyle== */
/* If you're not already, I would recommend using FireFox :). */
:root {
--bg0: #21242B;
--bg1: #282C35;
--bg2: #2B323C;
--bg3: #303844;
--bg4: #334259;
--blue1: #58B6C2;
--blue2: #61AFEF;
--orange: #D29873;
--pink: #BD7AD7;
--text: #A3B4C6;
--comment: #5C636D;
--green: #9BB97D;
--red: #E06C75;
}
/* CODE AREA */
.CodeMirror {
background: var(--bg1);
font-family: Consolas, 'Courier New', Monaco, Courier;
font-size: 15px;
}
.CodeMirror-activeline-background {
background: var(--bg2);
}
.cm-s-default .cm-qualifier, .cm-s-default .cm-number {
color: var(--orange);
}
.cm-s-default .cm-builtin {
color: var(--blue2);
}
.cm-s-default .cm-comment {
color: var(--comment);
}
.CodeMirror-wrap pre, .cm-s-default .cm-attribute {
color: var(--text);
}
.cm-s-default .cm-variable-2, .cm-s-default .cm-tag {
color: var(--red);
}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
color: var(--orange);
}
.cm-s-default .cm-atom {
color: var(--blue1);
}
.cm-s-default .cm-string {
color: var(--green);
}
.CodeMirror-gutters {
background: var(--bg1);
border-color: var(--bg1);
}
.CodeMirror, .CodeMirror-focused {
border: none !important;
outline-width: 0;
}
.cm-s-default .cm-keyword, .cm-s-default .cm-def {
color: var(--pink);
}
.resize-grip {
border-color: var(--bg3);
}
.resize-grip::after {
border-color: var(--bg3);
}
.colorview-swatch::after {
border-color: #000;
}
.CodeMirror-cursor {
border-left: 1px solid #fff !important
}
div.CodeMirror-selected {
background: var(--bg3) !important
}
.section {
background: var(--bg1);
}
/* GLOBAL */
body, html {
background: var(--bg0);
}
#sections > div > label, #sections h2 {
color: #fff;
font-family: 'Roboto', 'Open Sans', 'Arial';
font-weight: 400;
}
#sections h2 {
margin-bottom: 10px;
}
#sections > div {
margin-top: 0;
padding-top: 5px;
}
/* HEADER */
#header {
border-right: 1px solid transparent;
overflow-x: hidden;
overflow-y: auto;
background: var(--bg1);
box-shadow: 0 0 15px rgba(0,0,0,0.6)
}
#header h1, #header h2, #header h3, #header p, #header span, #header a, .applies-to li {
color: #fff;
font-weight: 400;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
#header label {
color: #fff;
}
#header select, input[type="number"], #header input[type="checkbox"]:not(.slider), #header input:not([type]) {
border: 1px solid var(--bg0);
background: var(--bg0);
color: #fff !important;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
#header .filter-selection label {
margin-bottom: 10px;
width: 100%;
height: 40px;
}
#header .select-resizer {
height: 40px;
width: 100%;
}
#header select {
padding: 10px;
height: 40px;
width: 100% !important;
}
#header .select-resizer select {
margin-left: 5px;
}
#header input[type="checkbox"]:not(.slider):hover {
background: var(--bg3);
border: 1px solid var(--bg3);
}
.svg-icon.select-arrow {
fill: #fff;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
#header button {
background: var(--bg0);
border-color: var(--bg0);
color: #fff;
border-radius: 5px;
cursor: pointer;
padding: 8px;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
#header button:hover {
background: var(--bg3);
border-color: var(--bg3);
}
.svg-icon, .svg-icon.info:hover, .svg-icon.settings:hover {
fill: #aaa;
}
#filters label:hover, #filters .filter-selection:hover {
background: transparent;
}
/* MANAGE */
.style-name a, .style-edit-link, .newUI .target {
color: #fff;
}
.newUI .entry.enabled .style-name:hover .style-name-link {
color: var(--blue2);
}
.newUI .entry.odd {
background: var(--bg1);
}
.newUI .entry .style-name:hover::before {
background: linear-gradient(to right, rgba(97, 175, 239, 0.05), rgba(97, 175, 239, 0.1) 50%, transparent);
}
#search, #manage\.newUI\.sort {
background: var(--bg0);
border-color: var(--bg0);
padding: 15px;
color: #fff;
}
/* APPLIES TO */
.edit-actions button {
background: var(--bg0);
border-color: var(--bg0);
color: #fff;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
.edit-actions button:hover {
background: var(--bg3);
border-color: var(--bg3);
}
.applies-to select, .applies-to li .applies-value {
background: var(--bg0);
border-color: var(--bg0);
cursor: pointer;
border-radius: 5px;
color: #fff;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
.applies-to label {
color: #fff;
font-family: 'Roboto', 'Open Sans', 'Arial';
}
.applies-to li > :not(button):not(.select-resizer) {
color: #fff;
background: var(--bg0);
border-color: var(--bg0);
border-radius: 5px;
}
#sections > div:nth-child(2) {
background: var(--bg1);
}
#sections > div:not(:first-of-type) {
background: var(--bg1);
border-color: transparent;
}
#sections > div > button:not(:first-of-type), .remove-section {
background: var(--bg0);
color: #fff;
border-color: var(--bg0);
border-radius: 5px;
cursor: pointer;
}
#sections > div > button:not(:first-of-type):hover, .remove-section:hover {
background: var(--bg3) !important;
border-color: var(--bg3) !important;
}
/* POP UP */
.style-name {
color: #eee;
}
#stylus-popup {
background: var(--bg1);
}
#installed .style-name .checker, #installed .style-name .svg-icon.checked, input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
background: var(--bg3);
border-color: var(--bg3);
fill: #fff !important;
}
#stylus-popup .actions {
color: #fff !important;
}
#stylus-popup .actions a {
color: #fff !important;
}
#stylus-popup input[type="checkbox"]:not(.slider) {
background: var(--bg3);
border-color: var(--bg3);
}
#stylus-popup input[type="checkbox"]:not(.slider):hover {
background: var(--bg4);
border-color: var(--bg4);
}
#popup-options button {
background: var(--bg0);
border-color: var(--bg0);
color: #fff;
padding: 5px;
border-radius: 5px;
cursor: pointer;
}
#popup-options button:hover {
background: var(--bg3);
border-color: var(--bg3);
color: #fff;
border-radius: 5px;
cursor: pointer;
}
#stylus-popup .search-results-nav, #stylus-popup .search-results-nav button {
color: #fff !important;
}
#stylus-popup .search-result {
background: var(--bg1);
border-color: var(--bg1);
box-shadow: none;
}
.search-result:hover .search-result-title {
color: #fff;
}
.search-result-title {
color: #aaa;
text-decoration: none;
}
.search-result-description {
color: #ccc;
}
.search-result-meta {
background: rgba(40, 44, 53, 0.9) !important;
color: #fff !important;
}
#no-styles {
color: #fff;
}
#search-replace-dialog textarea, .blocked-info {
color: #fff;
}