Atom styled Stylus by mallowigi

/* ==UserStyle==
@name           Atom styled Stylus
@namespace      USO Archive
@author         Gibbu
@description    `This makes the Stylus editor look like the Atom Text Editor.<b>NOTE:</b> This ONLY works with the <a href="https://add0n.com/stylus.html" target="_blank">Stylus</a> addon/extension.`
@version        20180823.8.39
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"), regexp("moz-extension://.*") {
/* 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);
    color: var(--text);
    font-family: "Cascadia Code", Consolas, 'Courier New', Monaco, Courier;
    font-weight: 400;
    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;
}
}