/* ==UserStyle==
@name         Stylus Dark
@version      1.0.1
@author       Hussein Esmail
@description  `A dark theme for Stylus`
@license      CC-BY-SA-4.0
@namespace      https://github.com/hussein-esmail7/userstyles
@homepageURL    https://github.com/hussein-esmail7/userstyles
@supportURL     https://github.com/hussein-esmail7/userstyles/issues
@updateURL      https://raw.githubusercontent.com/hussein-esmail7/userstyles/main/src/dark_stylus.user.css
==/UserStyle== */

/* Note: This style was based off overdodactyl's Userstyle at https://github.com/overdodactyl/Stylus-Dark (version 1.3.4) */
/* I am hosting my own copy because I make changes to my own userstyles every now and then. */

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {

    :root {
        --color-bg: #38383d; /* Main background color */
        --color-fg: #b1b1b3; /* Default text color */
        --color-fg-button: silver;
        --color-fg-header: silver;
        --color-fg-popup: silver;
        --color-bg-header: #2a2a2e;
        --color-bg-popup: #4a4a4f;
        --color-border-search: #737373;
        --font-button: arial,sans-serif;
        --color-bg-message-box: #b22222;
        color-scheme: dark;                 /* Used to get dark scroll bars */
    }

    #notes,
    body {
        background: var(--color-bg) !important;
        color: var(--color-fg) !important
    }
    #header {
        color: var(--color-fg-header) !important;
        background: var(--color-bg-header) !important;
        border-style: none !important
    }
    #stylus-popup {
        background: var(--color-bg-popup) !important;
        color: var(--color-fg-popup) !important
    }
    #hotkey-info[data-active] {
        border-left: 2px solid var(--color-bg-header) !important
    }
    #hotkey-info div {
        border-top: 1px solid var(--color-bg-header) !important;
        background-color: var(--color-bg-header) !important
    }
    #help-popup,
    #sections,
    .newUI .target {
        color: var(--color-fg) !important
    }
    #help-popup,
    #message-box > div,
    #message-box-buttons,
    #message-box-title,
    body {
        background: var(--color-bg-header) !important
    }
    .search-result {
        background: var(--color-bg-popup) !important;
        border-color: var(--color-border-search) !important
    }
    .search-result:hover {
        border-color: var(--color-fg) !important
    }
    .search-result-meta {
        background-color: var(--color-bg-popup) !important;
        color: var(--color-fg) !important
    }
    button,
    input:not([type]),
    select {
        font-family: var(--font-button) !important
    }
    input[type=checkbox]:not(.slider) {
        background: var(--color-bg) !important
    }
    .firefox select,
    .sorter-selection select,
    input:not(.slider) {
        background-color: var(--color-bg) !important;
        color: silver !important;
        border: 1px solid var(--color-bg-popup) !important
    }
    .filter-selection select {
        background-color: transparent !important;
        border: none!important
    }
    #filters .filter-selection:hover {
        background-color: transparent !important
    }
    button {
        background: var(--color-bg-header) !important;
        border: 1px solid #484848 !important;
        color: var(--color-fg-button) !important;
        border-radius: 3px!important
    }
    .svg-icon.checked {
        fill: #45a1ff !important
    }
    button:hover {
        color: #45a1ff !important
    }
    a,
    a:visited {
        color: #e1e1e1 !important
    }
    .dropdown-content {
        background: var(--color-bg-header) !important
    }
    .dropdown-content a:hover {
        background: var(--color-bg-header) !important;
        color: #45a1ff!important
    }
    #save-button:lang(en):after {
        content: 'd' !important
    }
    body.dirty #save-button:lang(en):after {
        content: '?' !important
    }
    .newUI .entry:hover .svg-icon:hover,
    .svg-icon:hover {
        fill: #45a1ff !important
    }
    #message-box.danger #message-box-title {
        background-color: var(--color-bg-message-box) !important
    }
    .newUI .can-update .update,
    .newUI .no-update:not(.update-problem):not(.update-done) .up-to-date {
        color: #000 !important
    }
    .svg-icon {
        fill: var(--color-fg) !important
    }
    #url {
        filter: invert(65%)!important
    }
    .CodeMirror-gutters {
        color: var(--color-fg) !important
    }
    .newUI .entry {
        background: var(--color-bg) !important
    }
    .newUI .entry:hover {
        background: var(--color-bg-header) !important
    }
    .disabled h2::after {
        border: 1px solid #444 !important
    }
    .svg-icon.select-arrow {
        fill: silver !important
    }
    .newUI .entry .style-name:hover::before {
        background: 0 0 !important
    }
    body.all-styles-hidden-by-filters::after,
    body.all-styles-hidden-by-filters::before {
        color: #45a1ff !important
    }
    .active #filters-stats {
        background-color: #45a1ff !important;
        border-color: #45a1ff !important
    }
    #reset-filters {
        fill: #45a1ff !important
    }
    .CodeMirror {
        border: 1px solid var(--color-bg-popup) ;
        border-radius: 4px !important
    }
    .Codemirror-hints {
        background: #353b48 !important;
        border-color: var(--color-border-search) !important
    }
    .Codemirror-hint {
        color: #d7d7db !important
    }
    .CodeMirror {
        background: var(--color-bg-header) !important;
        color: var(--color-fg) !important
    }
    div.CodeMirror-selected {
        background: #353b48 !important
    }
    .CodeMirror-line > span > span::selection,
    .CodeMirror-line > span::selection,
    .CodeMirror-line::selection {
        background: #353b48 !important
    }
    .CodeMirror-line > span > span::-moz-selection,
    .CodeMirror-line > span::-moz-selection,
    .CodeMirror-line::-moz-selection {
        background: #353b48 !important
    }
    .CodeMirror-gutters {
        background: var(--color-bg-header) !important;
        border-right: 0 solid var(--color-bg-popup) !important
    }
    .CodeMirror-guttermarker,
    .CodeMirror-guttermarker-subtle {
        color: #555 !important
    }
    .CodeMirror-linenumber {
        color: #939393 !important
    }
    .CodeMirror-cursor {
        border-left: 1px solid #fff !important
    }
    span.cm-comment {
        color: #939393 !important
    }
    span.cm-atom,
    span.cm-attribute,
    span.cm-builtin,
    span.cm-error,
    span.cm-keyword,
    span.cm-quote {
        color: #ff7de9 !important
    }
    span.cm-number,
    span.cm-string,
    span.cm-string-2 {
        color: #6b89ff  !important
    }
    span.cm-hr,
    span.cm-meta {
        color: #939393 !important
    }
    span.cm-header,
    span.cm-qualifier,
    span.cm-variable-2 {
        color: #75bfff !important
    }
    span.cm-property {
        color: #86de74 !important
    }
    span.cm-bracket,
    span.cm-def,
    span.cm-link:visited,
    span.cm-tag {
        color: #75bfff !important
    }
    span.cm-variable {
        color: #b98eff !important
    }
    span.cm-variable-3 {
        color: #d7d7db !important
    }
    span.cm-link {
        color: var(--color-border-search) !important
    }
    span.cm-operator {
        color: var(--color-fg) !important
    }
    span.cm-special {
        color: #d7d7db !important
    }
    .CodeMirror-activeline-background {
        background: rgba(185,215,253,.15) !important
    }
    .CodeMirror-matchingbracket {
        outline: rgba(255,255,255,.25) solid 1px !important;
        color: #fff !important
    }
    select {
        color: silver
    }
    optgroup,
    option {
        background-color: var(--color-bg-header) 
    }
    #confirm > div {
        background-color: var(--color-bg-popup) 
    }
}