Skip to content

Atom Theme For Stylus by mukul1127

Details

Authormukul1127

LicenseMIT

CategoryStylus

Created

Updated

Size7.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Atom Theme For Stylus

Notes

1.0

Source code

/* ==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 url-prefix("chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo") {

: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-weight: bold;
    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;
}
	
#options {
    color: #e1e1e1 !important;
    background: #282c35 !important;
    border-style: none !important;
}
	
a, a:visited {
    color: #e1e1e1 !important;
}
}

Reviews

No reviews yet.