Stylus DeepDark by raitarohikami

Imported from https://raw.githubusercontent.com/RaitaroH/Stylus-DeepDark/master/StylusDeepDark.user.css

Stylus DeepDark screenshot
Homepage Install Get Stylus Write a review

Details

Authorraitarohikami

LicenseGNU-V3.0

Created atApril 09, 2021 10:17

Updated atJune 01, 2021 06:32

Applies tounset

Statistics

Learn how we calculate statistics in the FAQ.

Total views688

Total installs2957

Weekly installs171

Weekly updates162

Description

Write thy themes in the dark. May the dark be kinder on thine eyes. (Stylus dark theme)

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0019.0038.0057.0075.0094.00113.00132.00150.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-222021-08-062021-08-212021-09-042021-09-192021-10-042021-10-182021-11-022021-11-172021-12-01Date0.00380.00750.001130.001500.001880.002250.002630.003000.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name        Stylus DeepDark
@namespace   gitlab.com/RaitaroH/Stylus-DeepDark
@homepageURL https://gitlab.com/RaitaroH/Stylus-DeepDark
@version     2.3.0
@updateURL   https://gitlab.com/RaitaroH/Stylus-DeepDark/raw/master/StylusDeepDark.user.css
@description Write thy themes in the dark. May the dark be kinder on thine eyes. (Stylus dark theme)
@author      RaitaroH and contributors
+co-authors  https://gitlab.com/RaitaroH/Stylus-DeepDark/graphs/contributors
@license     GNU-V3.0

@preprocessor stylus

@var select stylus-deepdark-style "Preset themes" [
  "Deep-Dark",
  "Inspired-Dark",
  "Breeze-Dark",
  "HavocOS",
  "Arc-Dark",
  "Adapta-Nokto",
  "Adapta-Breath-Nokto",
  "Gruvbox-Dark",
  "Gruvbox-Light",
  "NierAutomata-Dark",
  "NierAutomata-Light",
  "Solarized-Dark",
  "Solarized-Light",
  "Vertex-Dark",
  "Mint-Y-Dark",
  "9anime",
  "Firefox-Dark",
  "Firefox-57",
  "Discord",
  "YouTube-Dark",
  "Black-and-White",
  "Yellow",
  "Yellow-2",
  "Ubuntu-Grey",
  "Ubuntu-Purple",
  "Orange",
  "Jisho",
  "Custom"
]
@var select colorRY "Red/Yellow color" [
  "Default",
  "Solarized",
  "Gruvbox Dark",
  "Gruvbox Dark Intense",
  "Gruvbox Light",
  "Gruvbox Light Intense",
  "Custom"
]
@var color mainColor "Custom main color" "#367bf0"
@var color mainBackground "Custom main background" "#22242d"
@var color secondBackground "Custom second background" "#242730"
@var color hoverBackground "Custom hover background" "#4e5467"
@var color mainText "Custom main text" "#eee"
@var color dimmerText "Custom second text" "#ccc"
@var color editorBackground "Custom editor background" "#2f343f"
@var color selectBackground "Custom selection background" "#3c4150"
@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
@var color colorEvenEntry "Custom even color" "rgba(56, 60, 74, .4)"
@var color colorRed "Custom red color" "#ff6666"
@var color colorYellow "Custom yellow color" "#ffb266"

@var checkbox use-modified-default   "Adaptive syntax highlighting" 1
@var checkbox stylus-syntax-theme    "Stylus syntax highlighting" 1
@var checkbox support_update-problem "Update problem tooltips" 1
@var checkbox wrap-lint-msgs         "Wrap lint messages" 1
@var checkbox hide-scrollbar         "Fix CM search scrollbar" 0

@var text custom_sidebar_width "Sidebar width" 280px
@var text fontSize 'Editor font size' 12px
@var select cursorWidth 'Cursor width' {
  "Slim 1px": "1px",
  "Wider 2px": "2px",
  "Wider+ 3px": "3px",
  "Block 7px": "7px"
}
@var select cursorColor "Cursor color" {
  "Deep-Dark": "#00adee",
  "Inspired-Dark": "#5e8acc",
  "Breeze-Dark": "#3daee9",
  "Vertex-Dark": "#4080fb",
  "Arc-Dark": "#5294E2",
  "Firefox-Dark": "#5675B9",
  "Firefox 57": "#4080fb",
  "Discord": "#7289da",
  "YouTube Dark": "#E52117",
  "Mint-Y-Dark": "#9ab87c",
  "9anime": "#723f8c",
  "Black-and-White": "#fff",
  "Yellow": "#ffc700",
  "Yellow-2": "#ffc700",
  "Ubuntu-Grey": "#ef7847",
  "Ubuntu-Purple": "#ef7847",
  "Orange": "#ff6905",
  "Jisho": "#ef7d6c",
  "Adapta-Nokto": "#00bcd4",
  "Adapta-Breath Nokto": "#1abc9c",
  "Solarized": "#268bd2",
  "Gruvbox-Dark": "#fe8019",
  "Gruvbox-Light": "#af3a03",
  "NierAutomata-Dark": "#fe8019",
  "NierAutomata-Light": "#fe8019",
  "Custom": "custom-cursor-color"
}
@var color custom-cursor-color "Custom cursor color" "#04f911"
==/UserStyle== */
@-moz-document regexp("moz-extension:\/\/.*"), regexp("chrome-extension:\/\/.*") {
  /* Author     : Theme made by RaitaroH and contributors */
  /* Co-authors : https://gitlab.com/RaitaroH/Stylus-DeepDark/graphs/contributors */
  /* Home       : https://gitlab.com/RaitaroH/Stylus-DeepDark */
  /* Licence    : GNU General Public License v3.0 */
  /* Version    : 2.3.0 (2021-06-01) */
  /* Main color variables */
  /* stylelint-disable */
  :root {
    if stylus-deepdark-style == "Deep-Dark" {
      --main-color: #00adee;
      --main-background: #111;
      --second-background: #181818;
      --hover-background: #232323;
      --main-text: #eff0f1;
      --dimmer-text: #ccc;
      --editor-background: #181818;
      --select-background: #232323;
      --shadow: 0 1px .5px rgba(0, 0, 0, .3);
      --even-entry-background: rgba(0, 0, 0, .6);
    }
    else if stylus-deepdark-style == "Inspired-Dark" {
      --main-color: #5e8acc;
      --main-background: #232629;
      --second-background: #181818;
      --hover-background: #515254;
      --main-text: #eee;
      --dimmer-text: #ccc;
      --editor-background: #181818;
      --select-background: #232323;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .16);
    }
    else if stylus-deepdark-style == "Breeze-Dark" {
      --main-color: #3daee9;
      --main-background: #232629;
      --second-background: #2a2e32;
      --hover-background: #31363b;
      --main-text: #eff0f1;
      --dimmer-text: #bdc3c7;
      --editor-background: #2a2e32;
      --select-background: #31363b;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .16);
    }
    else if stylus-deepdark-style == "Vertex-Dark" {
      --main-color: #4080fb;
      --main-background: #2b2b2c;
      --second-background: #353638;
      --hover-background: #515254;
      --main-text: #f3f3f5;
      --dimmer-text: #aeafb0;
      --editor-background: #2b2b2c;
      --select-background: #515254;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .2);
    }
    else if stylus-deepdark-style == "Arc-Dark" {
      --main-color: #5294e2;
      --main-background: #343944;
      --second-background: #383c4a;
      --hover-background: #414a59;
      --main-text: #c1c8d1;
      --dimmer-text: #b3bac5;
      --editor-background: #343944;
      --select-background: #414a59;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .16);
    }
    else if stylus-deepdark-style == "Firefox-Dark" {
      --main-color: #5675b9;
      --main-background: #272b35;
      --second-background: #181d20;
      --hover-background: #353a44;
      --main-text: #e3eef9;
      --dimmer-text: #bec0cc;
      --editor-background: #181d20;
      --select-background: #353a44;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .16);
    }
    else if stylus-deepdark-style == "Firefox-57" {
      --main-color: #4080fb;
      --main-background: #0c0c0d;
      --second-background: #252526;
      --hover-background: #323234;
      --main-text: #f9f9fa;
      --dimmer-text: #d0d0d0;
      --editor-background: #252526;
      --select-background: #323234;
      --shadow: 0 1px .5px rgba(54, 54, 54, .2);
      --even-entry-background: rgba(54, 54, 54, .4);
    }
    else if stylus-deepdark-style == "Discord" {
      --main-color: #7289da;
      --main-background: #1e2124;
      --second-background: #2f3136;
      --hover-background: #484b51;
      --main-text: #fff;
      --dimmer-text: #ada8aa;
      --editor-background: #2f3136;
      --select-background: #484b51;
      --shadow: 0 1px .5px rgba(47, 49, 54, .23);
      --even-entry-background: rgba(47, 49, 54, .49);
    }
    else if stylus-deepdark-style == "YouTube-Dark" {
      --main-color: #e52117;
      --main-background: #111;
      --second-background: #232323;
      --hover-background: #343434;
      --main-text: #e1e1e1;
      --dimmer-text: #7f7f7f;
      --editor-background: #111;
      --select-background: #343434;
      --shadow: 0 1px .5px rgba(54, 54, 54, .2);
      --even-entry-background: rgba(54, 54, 54, .4);
    }
    else if stylus-deepdark-style == "Mint-Y-Dark" {
      --main-color: #9ab87c;
      --main-background: #2f2f2f;
      --second-background: #383838;
      --hover-background: #404040;
      --main-text: #fff;
      --dimmer-text: #d5dada;
      --editor-background: #2f2f2f;
      --select-background: #404040;
      --shadow: 0 1px .5px rgba(0, 0, 0, .13);
      --even-entry-background: rgba(0, 0, 0, .23);
    }
    else if stylus-deepdark-style == "9anime" {
      --main-color: #723f8c;
      --main-background: #0b0a0d;
      --second-background: #17151c;
      --hover-background: #1e1c25;
      --main-text: #f9f6fb;
      --dimmer-text: #cac0cf;
      --editor-background: #17151c;
      --select-background: rgba(180, 180, 180, .1);
      --shadow: 0 1px .5px rgba(54, 54, 54, .13);
      --even-entry-background: rgba(54, 54, 54, .36);
    }
    else if stylus-deepdark-style == "Black-and-White" {
      --main-color: #fff;
      --main-background: #000;
      --second-background: #1e1e1e;
      --hover-background: #313131;
      --main-text: #fff;
      --dimmer-text: #aaa;
      --editor-background: #0a0a0a;
      --select-background: #222;
      --shadow: 0 1px .5px rgba(54, 54, 54, .2);
      --even-entry-background: rgba(54, 54, 54, .4);
    }
    else if stylus-deepdark-style == "Yellow" {
      --main-color: #ffc700;
      --main-background: #141414;
      --second-background: #202222;
      --hover-background: #353838;
      --main-text: #eff0f1;
      --dimmer-text: #9f9999;
      --editor-background: #202222;
      --select-background: #353838;
      --shadow: 0 1px .5px rgba(34, 34, 34, .2);
      --even-entry-background: rgba(34, 34, 34, 1);
    }
    else if stylus-deepdark-style == "Yellow-2" {
      --main-color: #ffc700;
      --main-background: #0a0800;
      --second-background: #0c0a04;
      --hover-background: #0f0d05;
      --main-text: #fffdf5;
      --dimmer-text: #fff8e1;
      --editor-background: rgba(12, 10, 4, .2);
      --select-background: rgba(255, 253, 245, .1);
      --shadow: 0 1px .5px rgba(34, 34, 34, .2);
      --even-entry-background: rgba(34, 34, 34, 1);
    }
    else if stylus-deepdark-style == "Ubuntu-Grey" {
      --main-color: #ef7847;
      --main-background: #312d2a;
      --second-background: #3d3c38;
      --hover-background: #59564d;
      --main-text: #f2f1ef;
      --dimmer-text: #e6e5e3;
      --editor-background: #312d2a;
      --select-background: #59564d;
      --shadow: 0 1px .5px rgba(89, 86, 77, .12);
      --even-entry-background: rgba(89, 86, 77, .21);
    }
    else if stylus-deepdark-style == "Ubuntu-Purple" {
      --main-color: #ef7847;
      --main-background: #2c071a;
      --second-background: #430b28;
      --hover-background: #520d30;
      --main-text: #f2f1ef;
      --dimmer-text: #e6e5e3;
      --editor-background: #430b28;
      --select-background: #520d30;
      --shadow: 0 1px .5px rgba(82, 13, 48, .2);
      --even-entry-background: rgba(82, 13, 48, .5);
    }
    else if stylus-deepdark-style == "Orange" {
      --main-color: #ff6905;
      --main-background: #0a0400;
      --second-background: #0e0702;
      --hover-background: #110903;
      --main-text: #fff9f5;
      --dimmer-text: #ffede1;
      --editor-background: #110903;
      --select-background: #47250a;
      --shadow: 0 1px .5px rgba(255, 105, 5, .1);
      --even-entry-background: rgba(255, 105, 5, .1);
    }
    else if stylus-deepdark-style == "Jisho" {
      --main-color: #ef7d6c;
      --main-background: #322;
      --second-background: #2a1b1b;
      --hover-background: #863b2f;
      --main-text: #efb26c;
      --dimmer-text: #986e3f;
      --editor-background: #2a1b1b;
      --select-background: #863b2f;
      --shadow: 0 1px .5px rgba(37, 19, 5, .19);
      --even-entry-background: rgba(37, 19, 5, .29);
    }
    else if stylus-deepdark-style == "Adapta-Nokto" {
      --main-color: #00bcd4;
      --main-background: #222d32;
      --second-background: #263238;
      --hover-background: #2a353b;
      --main-text: #fff;
      --dimmer-text: #9b9b9b;
      --editor-background: #263238;
      --select-background: #3d4d56;
      --shadow: 0 1px .5px rgba(61, 77, 86, .2);
      --even-entry-background: rgba(61, 77, 86, .3);
    }
    else if stylus-deepdark-style == "Adapta-Breath-Nokto" {
      --main-color: #1abc9c;
      --main-background: #222d32;
      --second-background: #263238;
      --hover-background: #2a353b;
      --main-text: #fff;
      --dimmer-text: #9b9b9b;
      --editor-background: #263238;
      --select-background: #2a353b;
      --shadow: 0 1px .5px rgba(42, 53, 59, .32);
      --even-entry-background: rgba(42, 53, 59, .62);
    }
    else if stylus-deepdark-style == "Solarized-Dark" {
      --main-color: #268bd2;
      --main-background: #073642;
      --second-background: #03303c;
      --hover-background: #002b36;
      --main-text: #fdf6e3;
      --dimmer-text: #eee8d5;
      --editor-background: #073642;
      --select-background: #002b36;
      --shadow: 0 1px .5px rgba(0, 43, 54, .3);
      --even-entry-background: rgba(0, 43, 54, .5);
    }
    else if stylus-deepdark-style == "Solarized-Light" {
      --main-color: #268bd2;
      --main-background: #fdf6e3;
      --second-background: #f5efdc;
      --hover-background: #eee8d5;
      --main-text: #073642;
      --dimmer-text: #586e75;
      --editor-background: #f5efdc;
      --select-background: #ded8c4;
      --shadow: 0 1px .5px rgba(222, 216, 196, .2);
      --even-entry-background: rgba(222, 216, 196, .3);
    }
    else if stylus-deepdark-style == "Gruvbox-Dark" {
      --main-color: #fe8019;
      --main-background: #1d2021;
      --second-background: #282828;
      --hover-background: #3c3836;
      --main-text: #fbf1c7;
      --dimmer-text: #ebdbb2;
      --editor-background: #282828;
      --select-background: #3c3836;
      --shadow: 0 1px .5px rgba(60, 56, 54, .22);
      --even-entry-background: rgba(60, 56, 54, .33);
    }
    else if stylus-deepdark-style == "Gruvbox-Light" {
      --main-color: #af3a03;
      --main-background: #f9f5d7;
      --second-background: #fbf1c7;
      --hover-background: #ebdbb2;
      --main-text: #282828;
      --dimmer-text: #3c3836;
      --editor-background: #f9f5d7;
      --select-background: #ebdbb2;
      --shadow: 0 1px .5px rgba(235, 219, 178, .33);
      --even-entry-background: rgba(235, 219, 178, .36);
    }
    else if stylus-deepdark-style == "NierAutomata-Dark" {
      --main-color: #fe8019;
      --main-background: #33302a;
      --second-background: #48453c;
      --hover-background: #7c6f64;
      --main-text: #dad4bb;
      --dimmer-text: #bab5a1;
      --editor-background: #33302a;
      --select-background: #7c6f64;
      --shadow: 0 1px .5px rgba(124, 111, 100, .15);
      --even-entry-background: rgba(124, 111, 100, .21);
    }
    else if stylus-deepdark-style == "NierAutomata-Light" {
      --main-color: #fe8019;
      --main-background: #d1cdb7;
      --second-background: #dcd8c0;
      --hover-background: #bab5a1;
      --main-text: #48453c;
      --dimmer-text: #33302a;
      --editor-background: #dcd8c0;
      --select-background: #bab5a1;
      --shadow: 0 1px .5px rgba(186, 181, 161, 2);
      --even-entry-background: rgba(186, 181, 161, .3);
    }
    else if stylus-deepdark-style == "HavocOS" {
      --main-color: #0794d4;
      --main-background: #141618;
      --second-background: #1c1e20;
      --hover-background: #212528;
      --main-text: #fff;
      --dimmer-text: #b9baba;
      --editor-background: #1c1e20;
      --select-background: #212528;
      --shadow: 0 1px .5px rgba(185, 186, 186, .04);
      --even-entry-background: rgba(185, 186, 186, .05);
    }
    else if stylus-deepdark-style == "Custom" {
      --main-color: mainColor;
      --main-background: mainBackground;
      --second-background: secondBackground;
      --hover-background: hoverBackground;
      --main-text: mainText;
      --dimmer-text: dimmerText;
      --editor-background: editorBackground;
      --select-background: selectBackground;
      --shadow: 0 1px .5px colorShadow;
      --even-entry-background: colorEvenEntry;
    }
    /* CodeMirror font size */
    --font-size: fontSize;
    /* Cursor width and color */
    --cursor-width: cursorWidth;
    --cursor-color: cursorColor;
    --sidebar_width: custom_sidebar_width;
    /* These are must have static colors */
    /* Disable all color/warning Breeze Dark */
    if colorRY == "Default" {
      --red: #da4453;
      --yellow: #fdbc4b;
    }
    if colorRY == "Solarized" {
      --red: #dc322f;
      --yellow: #b58900;
    }
    if colorRY == "Gruvbox Dark" {
      --red: #cc241d;
      --yellow: #d79921;
    }
    if colorRY == "Gruvbox Dark Intense" {
      --red: #fb4934;
      --yellow: #fabd2f;
    }
    if colorRY == "Gruvbox Light" {
      --red: #cc241d;
      --yellow: #d79921;
    }
    if colorRY == "Gruvbox Light Intense" {
      --red: #9d0006;
      --yellow: #b57614;
    }
    if colorRY == "Custom" {
      --red: colorRed;
      --yellow: colorYellow;
    }
    --warning-disable-all: var(--red);
    /* No match regex color from Breeze Dark */
    /* added for easy change with swicher */
    --no-match: var(--yellow);
  }
  /* stylelint-enable */
  html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }
  body, #options-title {
    border-color: var(--hover-background);
  }
  html.newUI .entry.even, .keymap-list > tbody > tr:nth-child(even),
  #stylus-manage [id*="style-"].entry.even {
    background-color: var(--even-entry-background) !important;
  }
  #hotkey-info mark {
    background: var(--main-background) !important;
    border: 1px solid var(--main-color) !important;
    color: var(--main-text) !important;
  }
  #hotkey-info[data-active], #hotkey-info > div {
    background: var(--main-background) !important;
    border: 1px solid var(--second-background) !important;
  }
  #stylus-edit, body, html, #notes, #header, #actions {
    background-color: var(--main-background) !important;
    color: var(--dimmer-text) !important;
  }
  a, a:visited, .style-name-link {
    color: var(--main-color) !important;
    opacity: .9;
  }
  /* fix tab navigation hovering */
  a:hover, .style-name-link:hover, a:focus-within,
  .style-name-link:focus-within, h2:focus-within .style-name-link,
  .entry:hover .style-name-link, .style-name-link a.delete:hover,
  .style-name-link a.homepage:hover {
    opacity: 1;
    filter: brightness(115%) !important;
  }

  .disabled h2::after, .search-result, .search-result-meta, .entry.usercss .style-name-link::after {
    background-color: var(--hover-background) !important;
    box-shadow: var(--shadow) !important;
  }
  .entry.usercss .style-name-link::after {
    color: var(--main-color) !important;
  }
  /* fix tab naviagation hovering */
  .disabled h2:focus-within .style-name-link, .entry.disabled:hover .style-name-link {
    opacity: .8;
  }

  #filters label:hover, #filters .filter-selection:hover,
  #filters label:hover select, #filters .filter-selection:hover select,
  #filters .filter-selection:focus-within select {
    background-color: transparent !important;
    color: var(--main-color) !important;
  }
  #filters label:hover .svg-icon.select-arrow, #filters .filter-selection:hover .svg-icon.select-arrow {
    fill: var(--main-color) !important;
  }
  select, .svg-icon.select-arrow {
    transition: none !important;
  }

  /* This .entry selector affects the old UI layout and also affects popup
   * Popup entries all align consistently like this. Old UI is also good.
   */
  .entry {
    border-color: var(--second-background) !important;
    box-shadow: inset 0 1px 0 0 var(--second-background) !important;
  }
  .newUI .entry .style-name:hover::before {
    filter: grayscale(1);
  }

  #header {
    width: var(--sidebar_width) !important;
  }
  #header {
    border-right: 1px solid var(--hover-background) !important;
  }
  #header h1 {
    color: var(--main-text) !important;
  }
  #header summary:hover h2, #header summary h2:hover {
    color: var(--main-color) !important;
  }
  #header summary:hover h2, #search-replace-dialog [data-action="case"][data-enabled]::after {
    border-color: var(--main-color) !important;
  }
  [lang*="en-"] #linter-label {
    white-space: nowrap !important;
  }

  .resize-grip {
    background-color: var(--hover-background) !important;
    border-color: var(--main-background) !important;
  }
  .CodeMirror {
    border: 1px solid var(--hover-background);
  }
  .CodeMirror-scrollbar-filler {
    background: var(--even-entry-background) !important;
  }
  /* fix wrong background color when CodeMirror is empty */
  .CodeMirror-focused, .CodeMirror-active {
    outline: 1px auto var(--main-color);
  }

  /* Changed text highlight */
  ::selection {
    background: var(--main-color) !important;
    color: var(--main-text) !important;
  }
  ::-moz-selection {
    background: var(--main-color) !important;
    color: var(--main-text) !important;
  }
  ::-webkit-selection {
    background: var(--main-color) !important;
    color: var(--main-text) !important;
  }
  ::placeholder {
    color: var(--dimmer-text) !important;
    opacity: .5;
  }
  ::-webkit-input-placeholder {
    color: var(--dimmer-text) !important;
    opacity: .5;
  }
  ::-moz-placeholder {
    color: var(--dimmer-text) !important;
    opacity: .5;
  }

  if (!(stylus-syntax-theme)) {
    .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection,
    .CodeMirror-line > span > span::-moz-selection, .CodeMirror-selected,
    .CodeMirror-focused .CodeMirror-selected, .CodeMirror-activeline-background {
      background-color: var(--select-background) !important;
    }
    .CodeMirror, .CodeMirror-code, .CodeMirror-code {
      color: var(--main-text) !important;
      background: var(--editor-background) !important;
    }
    .cm-s-mbo.CodeMirror {
      background-color: var(--second-background) !important;
    }
    .CodeMirror-gutters {
      background-color: var(--hover-background) !important;
    }
    .CodeMirror .cm-meta {
      background: var(--hover-background) !important;
    }
  }

  /* dont uncomment anything below */
  .CodeMirror, .CodeMirror-hints {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace !important;
    font-size: var(--font-size) !important;
  }
  .CodeMirror-lint-tooltip {
    background-color: var(--hover-background) !important;
    color: var(--main-text) !important;
  }
  .CodeMirror-hint {
    background-color: var(--main-background);
  }

  /* fix the bracket matching actually working */
  div.CodeMirror span.CodeMirror-matchingbracket {
    color: var(--main-color) !important;
    -webkit-text-fill-color: var(--main-color) !important;
    font-weight: 900 !important;
    outline: 0 !important;
  }
  div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: var(--warning-disable-all) !important;
    -webkit-text-fill-color: var(--warning-disable-all) !important;
    font-weight: 900 !important;
  }
  .CodeMirror-foldmarker {
    color: var(--main-text) !important;
    text-shadow: none !important;
    font-size: 18px !important;
  }

  /* Cursor width and color setting implementation */
  if cursorColor || cursorWidth {
    .CodeMirror div.CodeMirror-cursor {
      border-left-width: var(--cursor-width) !important;
      border-color: var(--cursor-color) !important;
    }
  }

  /* Popup */
  .main-controls, .entry, .firefox body, #help-popup .title {
    background-color: var(--main-background) !important;
  }
  #help-popup {
    background-color: var(--second-background) !important;
  }
  #confirm > div, .menu-items-wrapper {
    background-color: var(--second-background) !important;
    border-color: var(--hover-background) !important;
  }

  /* Icons */
  .svg-icon, .svg-icon.info, .newUI .entry .svg-icon {
    fill: var(--main-text) !important;
  }
  .svg-icon.info:hover, .svg-icon:hover, a:hover .svg-icon,
  .newUI .entry:hover .svg-icon:hover, .svg-icon.checked,
  a.homepage:focus-within .svg-icon, a.delete:focus-within .svg-icon,
  a.check-update:focus-within .svg-icon, a.configure-usercss:focus-within .svg-icon,
  a:focus-within .svg-icon {
    fill: var(--main-color) !important;
  }
  .newUI .can-update[data-details$="locally edited"] .update svg,
  .newUI .update-problem .check-update svg {
    fill: var(--warning-disable-all) !important;
  }
  /* these entries works as intended */
  .newUI .entry.can-update[data-error="may be locally edited"] .update::after,
  .newUI .entry[data-error="locally edited"] .update::after {
    background: var(--second-background) !important;
    border-color: var(--warning-disable-all) !important;
    color: var(--warning-disable-all) !important;
  }
  .newUI .no-update:not(.update-problem):not(.update-done) .up-to-date::after,
  .newUI .update:not(.update-problem) .update-done .up-to-date::after,
  .newUI .entry .updated[title="Update completed."]::after,
  .newUI .entry .update[title="Install update"]::after {
    background-color: var(--second-background) !important;
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
  }

  /* History */
  #message-box-title, #message-box-buttons {
    background-color: var(--hover-background) !important;
    box-shadow: var(--shadow) !important;
  }
  #message-box-contents {
    background-color: var(--second-background) !important;
  }
  #message-box-close-icon .svg-icon {
    fill: var(--dimmer-text) !important;
  }
  #message-box-close-icon:hover .svg-icon {
    fill: var(--main-color) !important;
  }

  .help-text mark {
    background: var(--hover-background) !important;
    border: 1px solid var(--even-entry-background) !important;
  }

  /* Update warning */
  .newUI .updater-icons > :not(.check-update)::after {
    background-color: var(--hover-background) !important;
    border-color: var(--hover-background) !important;
  }
  if support_update-problem {
    .newUI .update-problem .check-update::after {
      content: attr(title);
      position: absolute;
      margin-top: 18px;
      margin-left: -36px;
      padding: 1ex 1.5ex;
      border-radius: 4px;
      animation: fadeout 10s;
      animation-fill-mode: both;
      background: var(--second-background);
      border: 1px solid var(--warning-disable-all);
      color: var(--warning-disable-all);
    }
  }
  if wrap-lint-msgs {
    #lint td[role="message"] {
      white-space: pre-wrap;
    }
  }
  /* Install warning */
  .warnings {
    background-color: var(--hover-background) !important;
    border-color: var(--hover-background) !important;
  }

  #filters.active, .active #filters-stats {
    background-color: var(--hover-background);
    border-color: var(--main-color);
    color: var(--main-text);
  }

  body.all-styles-hidden-by-filters::before, body.all-styles-hidden-by-filters::after {
    color: var(--main-color) !important;
    opacity: .5;
  }

  /* List of matching opened tabs */
  .regexp-report details[data-type="full"] {
    color: var(--main-color) !important;
  }
  .regexp-report details[data-type="none"] {
    color: var(--no-match) !important;
  }
  .regexp-report details[data-type="invalid"] {
    color: var(--warning-disable-all) !important;
  }

  /* Text fields */
  option[disabled] {
    color: var(--hover-background) !important;
  }
  select:not([id*="manage"]) {
    background-color: var(--second-background);
    color: var(--main-text) !important;
    border-color: var(--hover-background) !important;
  }
  select:hover {
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
  }

  #name, .applies-to li .applies-value, #search, .keymap-list input,
  #sort-select, .sorter-selection select,
  body#stylus-options #message-box input {
    background-color: var(--hover-background) !important;
    border: 1px solid var(--hover-background) !important;
  }
  input:not([type]), #search, #sort-select, .sorter-selection select,
  body#stylus-options #message-box input, .applies-to label {
    color: var(--main-text) !important;
  }
  #name:hover, .applies-to li .applies-value:hover, #search:hover,
  .keymap-list input:hover, #name:active, .applies-to li .applies-value:active,
  #search:active, .keymap-list input:active, #name:focus,
  .applies-to li .applies-value:focus, #search:focus, .keymap-list input:focus,
  body#stylus-options #message-box input:not(:invalid):focus,
  body#stylus-options #message-box input:not(:invalid):hover {
    border: 1px solid var(--main-color) !important;
  }

  /* Stylus popup fixes
   * Use opacity to solve disabled entries see #18 thx Mottie :) */
  #stylus-popup .disabled .style-name {
    opacity: .7;
  }
  /* Revert opacity here else the hover will also be dimmer. */
  #stylus-popup .entry:hover .style-name, #stylus-popup .disabled:hover .style-name, a.expander {
    color: var(--main-text) !important;
    opacity: 1;
  }
  #stylus-popup #installed .entry:nth-child(even) .main-controls, #stylus-popup #installed .entry:nth-child(even) {
    background-color: var(--even-entry-background) !important;
    box-shadow: none !important;
  }
  /* Thx Mottie for solution see #18 */
  #installed .entry.disabled:focus-within .style-name, #installed .entry:focus-within .style-name {
    color: var(--main-text) !important;
  }
  /* prevent sliders from breaking in usercss config */
  #message-box input.slider {
    background: none !important;
    border: 0 !important;
  }
  /* resize FF color swatch in Stylus options - similar to G-Chrome */
  @supports (-moz-appearance: none) {
    input[type="color"] {
      padding: 2px 4px !important;
    }
  }
  /* resize G-Chrome color swatch in Stylus options new chrome versions are squished */
  input[type="color"]:not(*:root) {
    padding: 0;
    height: 28px;
  }
  /* add option color swatch hover/focus-within style to clearly indicate editable field */
  input[type="color"]:hover, .color-swatch:hover,
  input[type="color"]:focus-within, .color-swatch:focus-within {
    outline: 1px solid var(--main-color) !important;
  }
  /* style the confirm delete popup border-color as red to show this is a danger area */
  #stylus-popup #confirm div {
    border-color: var(--red) !important;
  }

  /* editor line tweak */
  #sections > div:not(:first-of-type) {
    border-top: 2px solid var(--second-background) !important;
  }

  /* Buttons */
  button, .remove-applies-to, .add-applies-to, #backup-buttons .dropdown-content a {
    transition: color .25s, border-color .25s;
    transition: background-color .25s, border-color .25s;
  }
  #save-button, #beautify, #cancel-button, #from-mozilla, #to-mozilla,
  #editor\.keyMap, #editor\.theme, #editor\.matchHighlight,
  .applies-type.style-contributor, .add-section, .beautify-section,
  .test-regexp, .remove-applies-to, .add-applies-to, #check-all-updates,
  #add-style-label, #manage-options-button, button, #manage\.newUI\.targets,
  #badgeNormal, #badgeDisabled, #updateInterval, #popupWidth,
  #editor\.linter, #options button, #manage\.newUI\.sort,
  #message-box-contents select, a.remove-applies-to, a.add-applies-to {
    background-color: var(--second-background) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--hover-background) !important;
    box-shadow: var(--shadow) !important;
  }
  #backup-buttons .dropdown-content, #unfile-all-styles, #file-all-styles,
  #sync-dropbox-import, #sync-dropbox-export {
    background: var(--second-background) !important;
    color: var(--main-text) !important;
  }
  #backup-buttons .dropdown-content a:hover, #unfile-all-styles:hover,
  #file-all-styles:hover, #sync-dropbox-import:hover,
  #file-all-styles:hover, #unfile-all-styles:hover, #options {
    background: var(--main-background) !important;
  }
  #sync-dropbox-import:hover, #sync-dropbox-export:hover,
  #file-all-styles:hover, #unfile-all-styles:hover, #file-all-styles:hover,
  #options .option label:focus-within, #newUIoptions div label:hover,
  #newUIoptions div label:focus-within, #options label:focus-within span,
  #options input:focus-within, #options label span:hover {
    color: var(--main-color) !important;
  }
  #save-button:hover, #beautify:hover, #cancel-button:hover,
  #from-mozilla:hover, #to-mozilla:hover, #editor\.keyMap:hover,
  #editor\.theme:hover, #editor\.matchHighlight:hover,
  .applies-type.style-contributor:hover, .add-section:hover,
  .beautify-section:hover, .test-regexp:hover, .remove-applies-to:hover,
  .add-applies-to:hover, option:hover, #check-all-updates:hover,
  button#add-style-label:hover, #manage-options-button:hover, button:hover,
  #manage\.newUI\.targets:hover, #updateInterval:hover, #popupWidth:hover,
  #editor\.linter:hover, #options button:hover, #manage\.newUI\.sort:hover,
  #message-box-contents select:hover, a.remove-applies-to:hover,
  #stylus-popup #popup-manage-button:focus-within, a.add-applies-to:hover,
  #stylus-popup #popup-options-button:focus-within,
  #stylus-popup #popup-wiki-button:focus-within,
  #header button#save-button:focus-within, #header button#beautify:focus-within,
  #header button#cancel-button:focus-within, #header button:focus-within,
  #manage\.newUI\.sort:focus-within, a#find-editor-styles:focus-within button,
  #check-all-updates:focus-within,
  a[href="edit.html"]:focus-within button#add-style-label {
    color: var(--main-color) !important;
    border: 1px solid var(--main-color) !important;
  }
  #stylus .options-column .option input#editor\.tabSize:focus-within,
  #stylus .options-column .option select:focus-within,
  #stylus #options label:focus-within input[type="number"],
  #stylus #options [type="button"]:focus-within {
    border: 1px solid var(--main-color) !important;
  }
  #stylus #options .select-resizer:focus-within {
    outline: 1px solid var(--main-color) !important;
  }
  button {
    background-image: none !important;
    text-shadow: none !important;
  }
  optgroup {
    background: var(--even-entry-background);
    color: var(--main-color) !important;
  }
  option {
    background: var(--main-background) !important;
    color: var(--main-text) !important;
  }
  #stylus button[disabled] {
    opacity: .4;
  }
  #stylus button[disabled]:hover {
    color: var(--main-text) !important;
    border: 1px solid var(--hover-background) !important;
  }
  .install::before {
    box-shadow: var(--shadow);
  }

  .install.update::after {
    filter: none;
  }
  .install.update::before, .install.update:active::before,
  .install.update:active:hover::before {
    background-color: var(--hover-background);
    opacity: .6;
  }
  .install.update:hover::before {
    background-color: var(--hover-background);
    opacity: .9;
  }

  /* Search
   * Fixed search including replace and match highlight */
  #search-replace-dialog {
    background: var(--second-background) !important;
    box-shadow: 4px 5px 20px -6px var(--shadow);
    border: 1px solid var(--hover-background);
  }
  #search-replace-dialog textarea, #search-replace-dialog [data-action="clear"] {
    background: var(--main-background) !important;
  }

  body.find-open .search-target-editor.CodeMirror-active {
    outline-color: var(--main-color) !important;
  }
  body.find-open .cm-searching {
    background-color: var(--warning-disable-all) !important;
    color: var(--main-text) !important;
  }
  body.find-open .cm-searching.search-target-match {
    background-color: var(--no-match) !important;
    color: var(--main-text) !important;
  }
  body.find-open .CodeMirror-search-match {
    background: var(--main-color) !important;
    border-top: 1px solid var(--no-match) !important;
    border-bottom: 1px solid var(--no-match) !important;
  }
  /* match highlighter is too dark for dark themes so we tweak that also */
  @keyframes fadein-match-highlighter {
    from {
      background-color: inherit;
      color: inherit;
    }
    to {
      background-color: var(--main-color);
      color: var(--main-text);
      opacity: .8;
    }
  }

  .CodeMirror-dialog, .CodeMirror-dialog input {
    background: var(--hover-background) !important;
    color: var(--main-text) !important;
  }
  .CodeMirror-dialog-top {
    border-color: var(--main-color) !important;
  }
  if hide-scrollbar {
    /* this hack prevents Ubuntu Firefox from showing a scrollbar when using
     * Global Overlay Scrollbars styles
     */
    .firefox .CodeMirror-search-field {
      overflow: hidden !important;
    }
  }

  /* style some weird Firefox side outline color that is caused by gremlins */
  .CodeMirror-search-field {
    &:focus {
      outline: 1px solid var(--main-color);
      outline-offset: -1px;
    }
  }

  /* Autocomplete hints */
  .CodeMirror-hints {
    background: var(--second-background) !important;
    box-shadow: var(--shadow) !important;
    border-color: var(--hover-background) !important;
  }
  li.CodeMirror-hint {
    color: var(--main-text) !important;
  }
  li.CodeMirror-hint-active {
    background: var(--hover-background) !important;
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
  }
  li.CodeMirror-hint:hover {
    background: var(--hover-background) !important;
    color: var(--main-color) !important;
  }
  .CodeMirror-linenumber:hover, .CodeMirror-foldgutter-open:hover,
  .CodeMirror-foldgutter-folded:hover {
    color: inherit !important;
  }
  if use-modified-default {
    /* Default theme overwritten with adjusted colors */
    .cm-s-default.CodeMirror {
      background: var(--second-background);
      color: var(--main-text);
    }
    .cm-s-default div.CodeMirror-selected {
      background: var(--select-background);
    }
    .cm-s-default .CodeMirror-line::selection,
    .cm-s-default .CodeMirror-line > span::selection,
    .cm-s-default .CodeMirror-line > span > span::selection {
      background: var(--select-background);
    }
    .cm-s-default .CodeMirror-line::-moz-selection,
    .cm-s-default .CodeMirror-line > span::-moz-selection,
    .cm-s-default .CodeMirror-line > span > span::-moz-selection {
      background-color: var(--select-background);
    }
    .cm-s-default .CodeMirror-gutters {
      background: var(--hover-background);
      border-right: 0;
    }
    .cm-s-default .CodeMirror-guttermarker {
      color: var(--main-text);
    }
    .cm-s-default .CodeMirror-guttermarker-subtle,
    .cm-s-default .CodeMirror-linenumber {
      color: var(--dimmer-text);
    }
    .cm-s-default .CodeMirror-linenumber:hover,
    .cm-s-default .CodeMirror-foldgutter-open:hover,
    .cm-s-default .CodeMirror-foldgutter-folded:hover {
      color: initial;
    }
    .cm-s-default .CodeMirror-cursor {
      border-left: var(--cursor-width) solid var(--cursor-color);
    }
    .cm-s-default span.cm-comment {
      color: var(--dimmer-text);
    }
    .cm-s-default span.cm-atom, .cm-s-default span.cm-number {
      color: var(--main-color);
    }
    .cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
      color: var(--main-color);
      opacity: 1;
    }
    .cm-s-default span.cm-keyword, .cm-s-default span.cm-string {
      color: var(--main-color);
    }
    .cm-s-default span.cm-string.cm-property {
      color: var(--main-text);
    }
    .cm-s-default span.cm-variable {
      color: var(--main-text);
    }
    .cm-s-default span.cm-variable-2 {
      color: var(--main-color);
      opacity: .7;
    }
    .cm-s-default .cm-variable-3, .cm-s-default .cm-type {
      color: var(--main-color);
      filter: invert(100%);
    }
    .cm-s-default span.cm-def {
      color: var(--main-text);
    }
    .cm-s-default span.cm-bracket {
      color: var(--main-text);
      font-weight: bold;
    }
    .cm-s-default span.cm-tag {
      color: var(--main-color);
      opacity: .7;
    }
    .cm-s-default span.cm-link, .cm-s-default span.cm-keyword {
      color: var(--main-color);
    }
    .cm-s-default span.cm-keyword:not(.colorview-swatch), .cm-s-default span.cm-string {
      color: var(--main-color);
      filter: hue-rotate(60deg);
    }
    .cm-s-default span.cm-link, .cm-s-default span.cm-keyword:not(.colorview-swatch) {
      color: var(--main-color);
      filter: invert(100%);
    }
    .cm-s-default span.cm-error {
      border-bottom: var(--hover-background);
      color: var(--main-text);
    }
    .cm-s-default span.cm-qualifier {
      color: var(--main-text);
    }
    .cm-s-default .CodeMirror-activeline-background {
      background: var(--select-background);
    }
    .cm-s-default .CodeMirror-matchingbracket {
      color: var(--main-color);
    }
    .cm-s-default .CodeMirror-matchingtag {
      background: var(--dimmer-text);
    }
    .cm-s-default .cm-builtin {
      color: var(--main-color);
    }
    .cm-s-default .cm-meta {
      color: var(--dimmer-text);
    }
  }

  /* Stylish in chrome specific */
  /* fix: Stylus remove that unsightly white border in input */
  body:not(#stylus-options) input:not(.slider),
  #stylus-options label input[type="number"]#popupWidth,
  #stylus-options input[type="number"]#updateInterval,
  #stylus .options-column .option input#editor\.tabSize {
    background-color: var(--hover-background) !important;
    border: 1px solid var(--hover-background) !important;
    color: var(--main-text) !important;
  }
  body:not(#stylus-options) input:not(:invalid):not(.slider):focus,
  body:not(#stylus-options) input:not(:invalid):not(.slider):hover,
  #stylus .options-column .option input#editor\.tabSize:hover,
  #stylus-options label input[type="number"]#popupWidth:hover,
  #stylus-options input[type="number"]#updateInterval:hover {
    border: 1px solid var(--main-color) !important;
  }
  body:not(#stylus-options) input:invalid {
    border-color: var(--warning-disable-all) !important;
    color: var(--warning-disable-all) !important;
    background-color: darken(colorRed, 80%) !important;
  }
  fieldset, [style-id], .disabled {
    border-color: var(--hover-background);
  }
  .CodeMirror.cm-s-default.CodeMirror-wrap.CodeMirror-active {
    outline-color: var(--main-color);
  }

  /* Stylus in chrome specific */
  #manage\.onlyEnabled\.invert, #manage\.onlyLocal\.invert,
  #manage\.onlyUsercss\.invert {
    color: var(--dimmer-text);
    box-shadow: var(--shadow) !important;
  }
  #advanced.collapsible h1 {
    color: var(--main-text) !important;
  }
  #advanced.collapsible h1:hover {
    color: var(--main-color) !important;
  }
  .block, .color-swatch {
    border-color: var(--hover-background) !important;
  }

  body #options-title {
    color: var(--main-text);
    background: var(--hover-background);
  }
  #options-close-icon svg path {
    fill: var(--dimmer-text);
  }
  #options-close-icon:hover svg path {
    fill: var(--main-color);
  }

  /* Install *.user.css page */
  .CodeMirror-linewidget .applies-to {
    background-color: var(--second-background) !important;
    border-color: var(--hover-background) !important;
  }
  .applies-type {
    background-color: var(--hover-background) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--hover-background) !important;
  }
  .applies-type:hover, #options .option label:hover {
    color: var(--main-color) !important;
  }
  .config-dialog label {
    border-color: var(--hover-background) !important;
  }
  .config-dialog select, .beautify-options select {
    background-color: var(--hover-background) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--hover-background) !important;
  }
  .config-dialog select:hover, .beautify-options select:hover {
    color: var(--main-color) !important;
  }
  /* userCSS button */
  .install.reinstall {
    background: var(--hover-background) !important;
  }
  .header {
    border-color: var(--hover-background) !important;
  }

  /* Checkboxes *
  * input[type="checkbox"] cant have a bg, else .onoffswitch goes square */
  input[type="checkbox"] {
    border-color: var(--hover-background) !important;
    box-shadow: var(--shadow) !important;
  }
  input[type="checkbox"]:not(.slider) {
    background-color: var(--second-background) !important;
    border-color: var(--hover-background) !important;
    box-shadow: var(--shadow) !important;
  }
  input[type="checkbox"]:hover, input[type="checkbox"]:not(.slider):hover,
  .filter-selection:hover input[type="checkbox"],
  #enabled-label input[type="checkbox"]:not(.slider).style-contributor:hover {
    border-color: var(--main-color) !important;
  }
  input[type="checkbox"]:checked:not(.slider) + .svg-icon.checked {
    fill: var(--main-color) !important;
  }
  /* fixes the popup/manager elsewhere checkbox hover */
  .style-name:hover input[type="checkbox"]:not(.slider),
  #stylus-popup .entry.disabled .style-name:hover input[type="checkbox"]:not(.slider),
  #stylus-popup .entry.enabled .style-name:hover input[type="checkbox"]:not(.slider),
  #stylus-manage .style-name:hover .checker[type="checkbox"],
  #options label input[type="checkbox"]:not(.slider):hover,
  #options label:focus-within input[type="checkbox"]:not(.slider),
  #basic-info-enabled input[type="checkbox"]:not(.slider):focus-within,
  #filters .filter-selection input[type="checkbox"]:not(.slider):focus-within,
  #filters .filter-selection input[type="checkbox"]:not(.slider):hover,
  #filters .filter-selection:focus-within input[type="checkbox"]:not(.slider),
  #filters .filter-selection:hover input[type="checkbox"]:not(.slider),
  .entry .style-name:focus-within input[type="checkbox"]:not(.slider),
  #stylus-manage .style-name:focus-within input[type="checkbox"]:not(.slider),
  #stylus-popup #find-styles-inline-group:focus-within input[type="checkbox"]:not(.slider),
  #stylus-popup #find-styles-inline-group:hover input[type="checkbox"]:not(.slider),
  #stylus-popup #installed .style-name:focus-within input[type="checkbox"]:not(.slider),
  #stylus-popup #installed .style-name:hover input[type="checkbox"]:not(.slider),
  #add-style-as-usercss-wrapper input#newStyleAsUsercss[type="checkbox"]:hover,
  #add-style-as-usercss-wrapper input#newStyleAsUsercss[type="checkbox"]:focus-within,
  label#enabled-label:hover input#enabled[type="checkbox"].style-contributor,
  label#enabled-label:focus-within input#enabled[type="checkbox"].style-contributor,
  label#preview-label:hover input#editor\.livePreview[type="checkbox"],
  label#preview-label:focus-within input#editor\.livePreview[type="checkbox"],
  input#enabled[type="checkbox"]:hover, #basic-info-enabled input[type="checkbox"]:not(.slider):hover,
  body:not(#stylus-options) input.exclude-by-domain-checkbox:not(:invalid):not(.slider):focus,
  body:not(#stylus-options) input.exclude-by-domain-checkbox:not(:invalid):not(.slider):focus-within,
  body:not(#stylus-options) input.exclude-by-domain-checkbox:not(:invalid):not(.slider):hover,
  body:not(#stylus-options) input.exclude-by-url-checkbox:not(:invalid):not(.slider):focus,
  body:not(#stylus-options) input.exclude-by-url-checkbox:not(:invalid):not(.slider):focus-within,
  body:not(#stylus-options) input.exclude-by-url-checkbox:not(:invalid):not(.slider):hover {
    border-color: var(--main-color) !important;
    background-color: var(--main-background) !important;
  }

  /* override the browser built in style for checkbox sliders */
  .onoffswitch span {
    border-color: var(--main-color);
  }
  .onoffswitch span::before {
    background: var(--hover-background);
  }
  .onoffswitch input:checked + span {
    background-color: var(--dimmer-text);
  }
  .onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
    border-color: var(--dimmer-text);
  }
  .onoffswitch input:checked + span::before {
    background-color: var(--main-color);
  }

  /* This fixes the color and hover of ff input range */
  .firefox input[type="range"] {
    filter: invert(1) hue-rotate(180deg) brightness(1.2);
  }

  /* This fixes the misalignment between:
   * [ ] checkbox and label */
  #disableAll, #find-styles-inline-group label input[type="checkbox"]:not(.slider) {
    margin-top: 2px !important;
  }
  #find-styles-inline-group .checked {
    padding-top: 2px !important;
  }
  /* This fixes the disable all checkbox bg being too bright on hover	*/
  #stylus-popup input#disableAll[type="checkbox"]:not(.slider):hover,
  #stylus-popup input#disableAll[type="checkbox"]:not(.slider):focus,
  #stylus-popup input#disableAll[type="checkbox"]:not(.slider):focus-within {
    border-color: var(--warning-disable-all) !important;
    background-color: var(--second-background) !important;
  }
  #stylus-popup #disableAll-label:hover,
  #stylus-popup #disableAll-label:focus-within {
    color: var(--warning-disable-all) !important;
  }

  /* Colorpicker
   * This prevents the format change arrow from being cut off to the right,
   * and in addition when hovering/focus we get the nice --main-color. */
  .colorpicker-format-change {
    top: 3px;
    right: -1px;
    padding-right: 2px;
  }
  .colorpicker-format-change-button:hover {
    color: var(--main-color) !important;
  }
  .colorpicker-input:hover, .colorpicker-input:focus {
    border-color: var(--main-color) !important;
  }
}

Reviews

No reviews yet.