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-r###lts-nav, #stylus-popup .search-r###lts-nav button { color: #fff !important; } #stylus-popup .search-r###lt { background: var(--bg1); border-color: var(--bg1); box-shadow: none; } .search-r###lt:hover .search-r###lt-title { color: #fff; } .search-r###lt-title { color: #aaa; text-decoration: none; } .search-r###lt-description { color: #ccc; } .search-r###lt-meta { background: rgba(40, 44, 53, 0.9) !important; color: #fff !important; } #no-styles { color: #fff; } #search-replace-dialog textarea, .blocked-info { color: #fff; }