Stylus DeepDark by raitarohikami

/* ==UserStyle==
@name        Stylus DeepDark
@namespace   gitlab.com/RaitaroH/Stylus-DeepDark
@homepageURL https://github.com/RaitaroH/Stylus-DeepDark
@version     2.3.1
@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://github.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;
  }
}