WKED-self-study.css

/* ==UserStyle==
@name         WKED - Self-Study
@namespace    github.com/openstyles/stylus
@version      1.0.1
@license      MIT
@description  Adds WKED styling to the self-study userscript
@author       Rrwrex
@homepageURL  https://github.com/Sepitus-exe/WKElementaryDark
@supportURL   https://github.com/Sepitus-exe/WKElementaryDark/issues
==/UserStyle== */

/* See https://community.wanikani.com/t/userscript-self-study-quiz/13191 */

@-moz-document domain("wanikani.com") {
  #wkof_ds #ss_quiz {
    border-color: var(--ED-surface-2, #282828);
    background-color: var(--ED-surface-2, #282828);
  }

  #wkof_ds #ss_quiz .titlebar {
    background-color: var(--ED-surface-2, #282828);
    color: var(--ED-text-color, #eeeeee);
  }

  #wkof_ds #ss_quiz .statusbar {
    background-color: var(--ED-surface-2, #282828);
    color: var(--ED-text-color, #eeeeee);
  }

  #wkof_ds #ss_quiz .answer {
    background-color: var(--ED-surface-3, #303030);
  }

  #wkof_ds #ss_quiz .answer input {
    background-color: var(--ED-surface-inv, #bababa);
    border-color: var(--ED-surface-4, #535353);
    --ED-text-color: var(--ED-text-inv, #151515);
  }

  #ss_quiz[data-itype="radical"] .qwrap,
  #ss_quiz .summary .que[title~="Radical"] {
    background-color: var(--ED-radical, hsl(1, 39%, 44%));
  }

  #ss_quiz[data-itype="kanji"] .qwrap,
  #ss_quiz .summary .que[title~="Kanji"] {
    background-color: var(--ED-kanji, hsl(225, 23%, 44%));
  }

  #ss_quiz[data-itype="vocabulary"] .qwrap,
  #ss_quiz .summary .que[title~="Vocabulary"] {
    background-color: var(--ED-vocab, hsl(166, 36%, 32%));
  }

  #ss_quiz[data-atype="reading"] .atype {
    color: var(--ED-text, #eeeeee);
    text-shadow: none;
    border: none;
    background-color: var(--ED-reading, #282828);
  }

  #ss_quiz[data-atype="meaning"] .atype {
    color: var(--ED-text-inv, #151515);
    text-shadow: none;
    border: none;
    background-color: var(--ED-meaning, hsl(36, 56%, 44%));
    background-image: none;
  }

  #wkof_ds #ss_quiz[data-result="correct"] .answer input {
    color: var(--ED-text, #eeeeee) !important;
    background-color: var(--ED-correct, #58896f) !important;
  }

  #wkof_ds #ss_quiz[data-result="incorrect"] .answer input {
    color: var(--ED-text, #eeeeee) !important;
    background-color: var(--ED-incorrect, #9c4644) !important;
  }

  #ss_quiz .settings span.active {
    color: var(--ED-text, #eeeeee);
  }
}