Breeze dark theme quickfix

WaniKani
1

This is a quick and dirty fix for the new WaniKani layout if you use the breeze dark theme. I do not own any of this code (other than SOME of the changes at the end). Feel free to take it, change it, reuse it as you desire.

To install, go anywhere on WaniKani. Click the “Stylish” extension, click the “Installed” tab, click on the pencil icon at the bottom of “WaniKani Breeze Dark” entry. Copy the code below and replace the existing code, and press save on the left.

This was quick and dirty, it doesn’t look great, but it’s at least not blinding and super contrasted.

[class*=character-grid][class|="radical"]:not(i), .legend ul span.all, .popover.srs .popover-content li:nth-child(1), [class*=radical] .progress > .bar, .radical-icon, [class*="highlight-radical"], [class*="radical-highlight"], section.progression .lattice-single-character[id^="radical"] > a, [id*="summary"] ul >[class^="radical"], #supplement-info[class^=radical], #batch-items[class^=radical], #reviews #last-items[class*="radical"][lang="ja"]:first-child, #related-items a >[class^=radical], #lessons .ui ul item.radical, #reviews .ui ul item.radical, #timeline .review_info .rad, #keisei_section[id^=radical], .dropdown.open.radicals, .legend ul span.radicals {
    background-color: #3DAEE9 !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="radical"], #main-info.radical, #reviews #character.radical, #ss_quiz.radical .question {
    background-color: #232629 !important;
    color: #3DAEE9 !important;
}
[class*=character-grid][class|="kanji"]:not(i), .dropdown.open.kanji, .legend ul span.kanji, .popover.srs .popover-content li:nth-child(2), [class*=kanji] .progress > .bar, .kanji-icon, [class*="highlight-kanji"], [class*="kanji-highlight"], section.progression .lattice-single-character[id^="kanji"] > a, [id*="summary"] ul >[class^="kanji"], #supplement-info[class^=kanji], #batch-items[class^=kanji], #reviews #last-items[class*="kanji"][lang="ja"]:first-child, #related-items a >[class^=kanji], #lessons .ui ul item.kanji, #reviews .ui ul item.kanji, #timeline .review_info .kan, #keisei_section[id^=kanji] {
    background-color: #FDBC4B !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="kanji"], #main-info.kanji, #reviews #character.kanji, #ss_quiz.kanji .question {
    background-color: #232629 !important;
    color: #FDBC4B !important;
}
[class*=character-grid][class|="vocabulary"]:not(i), .dropdown.open.vocabulary, .legend ul span.vocabulary, .popover.srs .popover-content li:nth-child(3), [class*=vocabulary] .progress > .bar, .vocabulary-icon, [class*="highlight-vocabulary"], [class*="vocabulary-highlight"], [id*="summary"] ul >[class^="vocabulary"], #supplement-info[class^=vocabulary], #batch-items[class^=vocabulary], #reviews #last-items[class*="vocabulary"][lang="ja"]:first-child, #related-items a >[class^=vocabulary], #lessons .ui ul item.vocabulary, #reviews .ui ul item.vocabulary, #timeline .review_info .voc, .vocabulary-progress li > a, .vocabulary-progress li > div {
    background-color: #2ECC71 !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="vocabulary"], #main-info.vocabulary, #reviews #character.vocabulary, #ss_quiz.vocabulary .question {
    background-color: #232629 !important;
    color: #2ECC71 !important;
}
textarea, input, button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard {
    border-radius: 5px !important;
    color: #bcbcbc !important;
}
textarea:focus, input:focus, button:focus, .btn:focus, .page-list li > a:focus, .nav-load > li:last-child a:focus, .button:focus, #start-session:focus, #batch-items[data-index="quiz"] > span:focus, .btn-set li:focus, #hotkeys:focus, #lessons .ui #reorder:focus, #reviews .ui #reorder:focus, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:focus, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:focus, #WKO_button:focus, select:focus, #back-dashboard:focus {
    outline: none !important;
}
textarea, input {
    background-color: #1e2123 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    transition: box-shadow linear 0.2s !important;
}
textarea:focus, input:focus {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset !important;
}
button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard {
    background-color: #1e2123 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    transition: box-shadow linear 0.2s, border linear 0.2s !important;
}
button:hover, .btn:hover, .page-list li > a:hover, .nav-load > li:last-child a:hover, .button:hover, #start-session:hover, #batch-items[data-index="quiz"] > span:hover, .btn-set li:hover, #hotkeys:hover, #lessons .ui #reorder:hover, #reviews .ui #reorder:hover, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:hover, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:hover, #WKO_button:hover, select:hover, #back-dashboard:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;
}
button:focus, .btn:focus, .page-list li > a:focus, .nav-load > li:last-child a:focus, .button:focus, #start-session:focus, #batch-items[data-index="quiz"] > span:focus, .btn-set li:focus, #hotkeys:focus, #lessons .ui #reorder:focus, #reviews .ui #reorder:focus, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:focus, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:focus, #WKO_button:focus, select:focus, #back-dashboard:focus {
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
textarea {
    color: #bcbcbc !important;
    -webkit-text-fill-color: #bcbcbc !important;
}
.alert, .system-alert, .legend, .page-list, #main footer ul, .account-subscription .account-subscription-plan, #account-subscription-coupon-form #coupon, .account-subscription-payment-processor-info, .account-subscription form .control-group input[type="text"], .api section, .newbie, .review-status, .srs-progress, section.progression, .kotoba-table-list, .forum-topics-list, .blog, .individual-item .span12 > section, .individual-item + section, section[class^=lattice-], section[id|=level], .settings-section, [id*="summary"][id^="radical"], [id*="summary"][id^="kanji"], [id*="summary"][id^="vocabulary"], [id*="summary"][id^="correct"], [id*="summary"][id^="incorrect"], #review-stats, #supplement-info, #information, #lessons .ui, #reviews .ui, #timeline, [aria-describedby=divSRSGridSettings], [aria-describedby=ui-id-2], #item_marker_body, #marked_items, .wklc, #ss_quiz, #keisei_modal_settings, #keisei_modal_info {
    background-color: #232629 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}
.popover {
    background-color: #4d4d4d !important;
    border-color: #4d4d4d !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#wkof_ds .ui-dialog, #timeline .review_info .inner {
    background-color: #31363b !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
[class|=account-subscription] h3, [class|=account-billing] h3, .kotoba-table-list h3, .forum-topics-list h3, .blog h3 {
    align-items: center !important;
    background-color: #1c1e21 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    color: #bcbcbc !important;
    display: flex !important;
    margin-bottom: 3px !important;
    max-height: 60px !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
    text-align: left !important;
}
[class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol {
    display: inline !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}
[class|=account-subscription] h3 i::before, [class|=account-billing] h3 i::before, .kotoba-table-list h3 i::before, .forum-topics-list h3 i::before, .blog h3 i::before {
    color: #bcbcbc !important;
}
[class|=account-subscription] td, [class|=account-billing] td, .kotoba-table-list td, .forum-topics-list td, .blog td {
    border-bottom: 1px solid #31363b !important;
}
[class|=account-subscription] tr, [class|=account-billing] tr, .kotoba-table-list tr, .forum-topics-list tr, .blog tr {
    background-color: #232629 !important;
}
[class|=account-subscription] hr, [class|=account-billing] hr, .kotoba-table-list hr, .forum-topics-list hr, .blog hr {
    display: none;
}
#enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
body, #screen-lesson-ready, #screen-quiz-ready, .avatar {
    background-blend-mode: color-burn !important;
    background-color: #31363b !important;
    background-image: url("https://cdn-staging.wanikani.com/assets/default-v2/bg-texture-f26fc7a5696f53a272eaffdfdd43eb215d33ef508c89ed2d0501903eaad2f29a.png") !important;
    background-repeat: repeat !important;
}
.legend ul .locked, section[class^=lattice-] li:not([data-sorted]) > a {
    color: #fff !important;
    filter: brightness(0.2) !important;
}
.locked-item, .character-item.locked {
    background-image: url("https://cdn-staging.wanikani.com/assets/default-v2/stripes-5e8494366c1615da046bd0f587cfeef6786e7ba17863df1329767ca3b89140e0.png") !important;
}
button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, [class|=account-subscription] h3, [class|=account-billing] h3, .kotoba-table-list h3, .forum-topics-list h3, .blog h3, [class|=account-subscription] tr, [class|=account-billing] tr, .kotoba-table-list tr, .forum-topics-list tr, .blog tr, #enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item, input[type="range"], .nav > .lessons a > span, .nav > .reviews a > span, .srs-progress ul > li, .kotoba-table-list .none-available, .see-more, #review-stats[id^="review-stats"], #timeline .review_info .tot, .alert, .system-alert, [class*=character-grid] > li, .popover .popover-content li, .popover .bar, .progress, .progress > .bar, [class*="highlight"], .newbie, section.progression .lattice-single-character, .see-more a, #main-info, #reviews #character, #wkof_ds .ui-dialog, #wkof_ds .ui-dialog-buttonpane, #wkof_ds .ui-tabs-tab, #wki_settings_cancel, #wki_settings_save, #wki_settings_button_label_bgcolor, #wki_settings_button_label_textcolor, #wki_settings_timer_show_next_item, #timeline .review_info .rad, #timeline .review_info .kan, #timeline .review_info .voc, #ss_quiz .quiz-progress, #ss_quiz .quiz-progress .quiz-progress-bar, #ss_quiz .qtype, #keisei_section .character-item {
    background-image: none !important;
}
[class|=account-subscription] th, [class|=account-billing] th, .kotoba-table-list th, .forum-topics-list th, .blog th, [class|=account-subscription] td, [class|=account-billing] td, .kotoba-table-list td, .forum-topics-list td, .blog td, input[type="range"], .nav > .lessons a > span, .nav > .reviews a > span, .srs-progress ul > li, .kotoba-table-list .none-available, .see-more, #review-stats[id^="review-stats"], #timeline .review_info .tot, blockquote, .audio-btn, [class*=character-grid] > li > a, .dropdown.open[class*="toggle"], .legend ul .locked, .legend[class*="lattice"], .nav .title span:first-child, .popover .popover-title, .note-meaning fieldset, .note-reading fieldset, .user-synonyms, .user-synonyms li::after, .user-synonyms-add-btn::before, #main footer li, #main footer a, #main footer a:hover, .review-status li, .kotoba-table-list .none-available:hover, .individual-item h2, .individual-item .additional-info, section[class^=lattice-] li, section[class^=lattice-] li > a, section[id|=level] header, .explanation-item-mnemonics, .explanation-item-radicals, .explanation-item-kanji, .explanation-item-vocabulary, .explanation-item-lessons-reviews, .explanation-item-srs, #stats *, #summary-button *, #header-buttons *, .srs-up, .srs-down, #answer-form fieldset.correct button, #answer-form fieldset.incorrect button, #answer-form button, #additional-content li > span, #all-info, .srs-levels li span, .wall-of-shame, #wkof_ds .ui-dialog-titlebar, #wkof_ds .ui-dialog-buttonpane, #wkof_ds .ui-tabs-tab, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, #wki_srs_popup_wrapper .wki_srs_popup_icon, #wki_srs_popup_wrapper #wki_srs_popup_message, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, #lessons .ui-small, #reviews .ui-small, #timeline .bar_style select, #timeline .graph .bkgd, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonpane, [aria-describedby=divSRSGridSettings] .ui-dialog-titlebar, [aria-describedby=divSRSGridSettings] .ui-dialog-content tr:hover, [aria-describedby=ui-id-2] .ui-dialog-buttonpane, [aria-describedby=ui-id-2] .ui-dialog-titlebar, [aria-describedby=ui-id-2] .ui-dialog-content tr:hover, .wklc .wklc-item, .wklc .wklc-max-score-edit label, #ss_quiz .qwrap, #ss_quiz .help, #ss_quiz .answer {
    background-color: transparent !important;
}
[class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol, .audio-btn, .audio-btn:hover, .audio-btn:focus, input[type="checkbox"], .dropdown[class*="toggle"] > span, .legend ul span, .nav li:not(.open) span:first-child, .popover .popover-title, #search.in, [class*="highlight"], .srs-progress ul > li, section.progression .lattice-single-character a, .kotoba-table-list .none-available, .kotoba-table-list .none-available > td div, .see-more, .see-more div, section[class^=lattice-] li > a, #review-stats[id^="review-stats"], #main-info, #answer-form input, #answer-form button, #additional-content li > span, #additional-content li > span:hover::before, #kana-chart li:hover, .srs-levels li span, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, #timeline .bar_style select, #timeline .range_input, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, .wklc .wklc-item, #keisei_modal_settings .modal-header, #keisei_modal_info .modal-header, #keisei_modal_settings .modal-footer, #keisei_modal_info .modal-footer {
    box-shadow: none !important;
}
textarea, input, button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard, .alert, .system-alert, .legend, .page-list, #main footer ul, .account-subscription .account-subscription-plan, #account-subscription-coupon-form #coupon, .account-subscription-payment-processor-info, .account-subscription form .control-group input[type="text"], .api section, .newbie, .review-status, .srs-progress, section.progression, .kotoba-table-list, .forum-topics-list, .blog, .individual-item .span12 > section, .individual-item + section, section[class^=lattice-], section[id|=level], .settings-section, [id*="summary"][id^="radical"], [id*="summary"][id^="kanji"], [id*="summary"][id^="vocabulary"], [id*="summary"][id^="correct"], [id*="summary"][id^="incorrect"], #review-stats, #supplement-info, #information, #lessons .ui, #reviews .ui, #timeline, [aria-describedby=divSRSGridSettings], [aria-describedby=ui-id-2], #item_marker_body, #marked_items, .wklc, #ss_quiz, #keisei_modal_settings, #keisei_modal_info, #wkof_ds .ui-dialog, #timeline .review_info .inner, [class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol, [class|=account-subscription] tr:last-child td, [class|=account-billing] tr:last-child td, .kotoba-table-list tr:last-child td, .forum-topics-list tr:last-child td, .blog tr:last-child td, #enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item, [class*=character-grid] > li, .dropdown-menu, .navbar-inner, .nav > .dropdown.account > .dropdown-toggle span, .page-list-header span, .popover .popover-content li, .review-status li, .kotoba-table-list .none-available > td, .see-more div, [id*="summary"] nav, #question-type, #answer-form input, #answer-form button, #wkof_ds .ui-dialog-titlebar, #wkof_ds .ui-tabs-tab, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, [id|=qtip], [id|=qtip] .qtip-titlebar, [id|=qtip] .qtip-title, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, [aria-describedby=divSRSGridSettings] .ui-widget-header, [aria-describedby=ui-id-2] .ui-widget-header, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, #ss_quiz .help, #ss_quiz .qtype, #keisei_section .character-item {
    border: none !important;
}
.character-item *, .dropdown a, .dropdown i, .dropdown span, .dropdown li, .nav a, [class*="rad"] *, .dashboard a, .kotoba-table-list span, .kotoba-table-list time, .kotoba-table-list i, section[class^=lattice-] li > a *, [id*="summary"] li *, #reviews #character *, #related-items span > i, #stats *, #summary-button *, #header-buttons * {
    color: inherit !important;
}
.highlight-reading, #question-type.reading {
    background-color: #4D4D4D !important;
}
.highlight-meaning, #question-type.meaning {
    background-color: #31363B !important;
}
* {
    text-shadow: none !important;
}
div, p, pre, strong, small, span, li, time, h1, h2, h3, h4, label, i {
    color: #bcbcbc !important;
}
a {
    color: #3daee9 !important;
    text-shadow: none !important;
}
footer a {
    color: #bcbcbc !important;
}
.btn-danger {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
#user_password:focus {
    border-left: 2px solid #ed1515 !important;
    border-right: 2px solid #ed1515 !important;
}
#user_current_password:focus {
    border-left: 2px solid #f67400 !important;
    border-right: 2px solid #f67400 !important;
}
table {
    background-color: inherit !important;
    border-collapse: separate !important;
}
table tr {
    background-color: inherit !important;
    border-radius: 5px !important;
}
table tbody > tr:hover {
    filter: brightness(0.8) !important;
}
.alert {
    margin-left: auto;
    margin-right: auto;
    max-width: 92vw;
}
.alert h3, .alert a, .alert p, .alert span, .alert i, .alert time {
    color: inherit !important;
}
.alert-info {
    background-color: #f67400 !important;
    color: #434343 !important;
}
.system-alert {
    background-color: #f67400 !important;
    color: #434343 !important;
}
.system-alert h3, .system-alert i, .system-alert time {
    color: inherit !important;
}
.reviews-alert::before {
    background-color: #f67400 !important;
    bottom: 17px !important;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%) !important;
    z-index: 3 !important;
}
li.burned {
    filter: brightness(0.5) !important;
}
[class*=character-grid] {
    background-color: #1e2123 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 5px !important;
}
[class*=character-grid] > li {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin: 5px !important;
}
[class*=character-grid] > li.locked {
    filter: brightness(0.7) !important;
}
.dropdown:not(.open).radicals >[class*="toggle"]:hover > span {
    border-color: #3DAEE9 !important;
}
.dropdown:not(.open).kanji >[class*="toggle"]:hover > span {
    border-color: #FDBC4B !important;
}
.dropdown:not(.open).vocabulary >[class*="toggle"]:hover > span {
    border-color: #2ECC71 !important;
}
.dropdown.open {
    background-color: #33383c !important;
}
.dropdown.open.radicals[class$="menu"]::before, .dropdown.open.radicals[class$="menu"]::after {
    border-bottom-color: #3DAEE9 !important;
    color: #3DAEE9 !important;
}
.dropdown.open.kanji[class$="menu"]::before, .dropdown.open.kanji[class$="menu"]::after {
    border-bottom-color: #FDBC4B !important;
    color: #FDBC4B !important;
}
.dropdown.open.vocabulary[class$="menu"]::before, .dropdown.open.vocabulary[class$="menu"]::after {
    border-bottom-color: #2ECC71 !important;
    color: #2ECC71 !important;
}
.dropdown.open[class*="toggle"] {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.7) inset, -1px 0 2px rgba(0, 0, 0, 0.7) inset !important;
}
.dropdown.open[class*="toggle"] > span {
    border: 0.3em solid #232629 !important;
}
.dropdown.open > .dropdown-menu {
    top: 112% !important;
}
.dropdown.open > .dropdown-menu li:not(.nav-header) {
    background-color: inherit !important;
}
.dropdown.open > .dropdown-menu li:not(.nav-header) > a:hover {
    background-color: inherit !important;
    filter: brightness(0.8) !important;
}
.dropdown.open > .dropdown-menu::before, .dropdown.open > .dropdown-menu::after {
    border-bottom-color: #33383c !important;
    color: #33383c !important;
}
.dropdown-menu {
    background-color: inherit !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
.legend .percentage-0-20 {
    background-color: #f47750 !important;
}
.legend .percentage-21-40 {
    background-color: #c9ce3b !important;
}
.legend .percentage-41-60 {
    background-color: #3daee9 !important;
}
.legend .percentage-61-80 {
    background-color: #1d99f3 !important;
}
.legend .percentage-81-100 {
    background-color: #1cdc9a !important;
}
.legend .apprentice-lattice {
    color: #1d99f3 !important;
}
.legend .guru-lattice {
    color: #1cdc9a !important;
}
.legend .master-lattice {
    color: #c9ce3b !important;
}
.legend .enlighten-lattice {
    color: #f67400 !important;
}
.legend .burned-lattice {
    color: #DA4453 !important;
}
.legend ul span {
    margin-left: 1vh !important;
    margin-right: 1vh !important;
}
.legend ul span.burned {
    background-color: #DA4453 !important;
    color: #434343 !important;
}
.legend[class*="percentage"], .legend[class*="lattice"] {
    filter: brightness(0.8) !important;
}
.navbar-inner {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 1030 !important;
    background-image: none !important;
}
.nav .title span:first-child {
    box-sizing: border-box !important;
}
.nav li:not(.open) span:first-child {
    border: 0.3em solid #2a2e31 !important;
}
.nav li:not(.open) > a:hover > span:first-child {
    border-color: #33383c !important;
}
.page-list ul {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 5px !important;
}
.page-list li {
    margin: 2px !important;
}
.page-list li > a {
    background-color: #3daee9 !important;
    color: #434343 !important;
}
.page-list-header {
    width: 110px !important;
}
.popover .popover-title {
    opacity: inherit;
}
.popover .popover-content li {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 3px !important;
    margin-top: 3px !important;
}
.popover .popover-content li span {
    color: #31363b !important;
}
.popover .bar {
    background-color: #3daee9 !important;
    line-height: 100% !important;
}
.popover.srs .arrow, .popover.srs .arrow::after, .popover.lattice .arrow, .popover.lattice .arrow::after {
    border-right-color: #4d4d4d !important;
    opacity: inherit !important;
}
.progress {
    align-items: center !important;
    background-color: #1e2123 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    display: flex !important;
}
.progress > .bar {
    background-color: #1d99f3 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    height: 50% !important;
    margin: 5px !important;
    opacity: 0.75 !important;
}
.progress > .bar > span {
    background-color: #484848 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    color: #bcbcbc !important;
}
.progress > .bar > span::after {
    border-top-color: #484848 !important;
}
.progress > .bar > .threshold {
    box-shadow: 1px 0 0 #4d4d4d !important;
    color: #4d4d4d !important;
    height: 60% !important;
    line-height: 110% !important;
    opacity: 0.50 !important;
}
#progress section {
    margin-left: 2vw !important;
    margin-right: 2vw !important;
}
.user-synonyms {
    margin-left: 5px;
}
.user-synonyms li, .user-synonyms i {
    color: #bcbcbc !important;
}
.user-synonyms-add-form input {
    padding-left: 5px !important;
}
.user-synonyms-add-form button {
    height: 1.8em !important;
    min-width: 1.8em !important;
}
.japanese-font-styling-correction, .enlarge-hover {
    color: #232629 !important;
}
[class*="highlight"] {
    border-radius: 3px !important;
}
[class*="highlight"] > span {
    color: #434343 !important;
}
.highlight-reading > span, .highlight-meaning > span {
    color: #bcbcbc !important;
}
#main footer {
    background-image: url(https://i.imgur.com/MRVqVnw.png) !important;
    background-position: top !important;
}
#main footer li:last-child {
    background-color: #da4453 !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
    color: #434343 !important;
}
#main footer li:last-child span {
    color: #434343 !important;
}
#main footer a, #main footer a:hover {
    padding-top: 10px !important;
    transition: none !important;
}
#main footer a:hover {
    text-decoration: underline !important;
}
.dashboard .row .span12 .row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}
@media(max-width: 767px) {
    .dashboard .row .span12 .row .span4:nth-child(2) {
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }
}
.dashboard .row .span12 + .span12 {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}
.account #user_lesson_batch_size {
    background-color: #232629 !important;
    border-color: #3daee9 !important;
}
.account-subscription .account-subscription-plan[type="button"] {
    border-radius: 0 0 5px 5px !important;
}
.account-subscription .account-subscription-plan-active {
    border-color: #f67400 !important;
    box-shadow: 0 0 5px rgba(246, 116, 0, 0.5) !important;
}
.account-subscription .account-subscription-plan-active[type="button"] {
    background: #f67400 !important;
}
.account-subscription form .control-group[type="text"]:focus {
    border: none !important;
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
.account-subscription-payment-submit button {
    background-color: #f67400 !important;
    border-radius: 5px !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}
.account-subscription-payment-submit[type=submit]:disabled {
    background-color: #f67400 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 5px rgba(246, 116, 0, 0.5);
}
#account-subscription-coupon-form #coupon:focus {
    border: none !important;
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
.api h3 {
    font-weight: bold !important;
}
.api pre {
    background-color: #31363b !important;
}
.api code {
    background-color: #31363b !important;
    border: none !important;
}
.newbie hr {
    border-bottom-color: #31363b !important;
    border-top-color: #31363b !important;
}
.srs-progress ul > li:not(:last-child) {
    border-right: 1px solid #31363b;
}
.srs-progress ul > #apprentice > span {
    color: #1d99f3 !important;
}
.srs-progress ul > #guru > span {
    color: #1cdc9a !important;
}
.srs-progress ul > #master > span {
    color: #c9ce3b !important;
}
.srs-progress ul > #enlightened > span {
    color: #f67400 !important;
}
.srs-progress ul > #burned > span {
    color: #DA4453 !important;
}
section.progression hr {
    border-bottom-color: #31363b !important;
    border-top: 0 !important;
}
section.progression .lattice-single-character li {
    padding: 2px !important;
}
section.progression .lattice-single-character a {
    filter: brightness(0.7);
}
.kotoba-table-list {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 100%;
    position: relative !important;
}
.kotoba-table-list table {
    margin-bottom: 38px !important;
}
.kotoba-table-list .none-available > td div {
    border-color: #31363b !important;
}
.kotoba-table-list .none-available > td i::before {
    color: #31363b !important;
}
.kotoba-table-list .none-available:hover {
    filter: none !important;
}
.kotoba-table-list .see-more {
    bottom: 0 !important;
    position: absolute !important;
    width: 100% !important;
}
.forum-topics-list, .blog {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.see-more a {
    background-color: #1c1e21 !important;
    border-radius: 0 0 5px 5px !important;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7) !important;
    margin-top: 3px !important;
}
.individual-item .level-icon {
    background-color: #232629 !important;
}
.individual-item .span12 > section {
    padding: 10px !important;
}
.individual-item section > h2 {
    border-bottom: 1px solid #4d4d4d !important;
}
.individual-item h2 {
    color: #bcbcbc !important;
}
.individual-item + section {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1170px !important;
}
@media(min-width: 979px) and (max-width: 1199px) {
    .individual-item + section {
        width: 940px !important;
    }
}
@media(min-width: 767px) and (max-width: 979px) {
    .individual-item + section {
        width: 724px !important;
    }
}
@media(max-width: 767px) {
    .individual-item + section {
        width: calc(100% - 40px) !important;
    }
}
.individual-item + section[class$=-streak] span {
    background-color: inherit !important;
}
section[class^=lattice-] {
    padding: 10px;
}
section[class^=lattice-] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
section[class^=lattice-] li {
    margin: 1vh 10px !important;
}
section[class^=lattice-] li > a {
    filter: brightness(0.8) !important;
}
section[class^=lattice-][data-sorted] .percentage-0-20 {
    color: #f47750 !important;
}
section[class^=lattice-][data-sorted] .percentage-21-40 {
    color: #c9ce3b !important;
}
section[class^=lattice-][data-sorted] .percentage-41-60 {
    color: #3daee9 !important;
}
section[class^=lattice-][data-sorted] .percentage-61-80 {
    color: #1d99f3 !important;
}
section[class^=lattice-][data-sorted] .percentage-81-100 {
    color: #1cdc9a !important;
}
section[class^=lattice-][data-sorted] .apprentice-lattice {
    color: #1d99f3 !important;
}
section[class^=lattice-][data-sorted] .guru-lattice {
    color: #1cdc9a !important;
}
section[class^=lattice-][data-sorted] .master-lattice {
    color: #c9ce3b !important;
}
section[class^=lattice-][data-sorted] .enlighten-lattice {
    color: #f67400 !important;
}
section[class^=lattice-][data-sorted] .burned-lattice {
    color: #DA4453 !important;
}
.level-icon {
    color: #bcbcbc !important;
}
.next a, .previous a {
    color: #bcbcbc !important;
}
.alt-character-list a {
    color: #bcbcbc !important;
}
.recently-unlocked-item {
    color: #232629 !important;
}
section[id|=level] {
    padding: 10px;
}
section[id|=level] header {
    margin-bottom: 5px;
}
#explanation .bg-angled {
    background-color: #31363b !important;
}
.explanation-item-mnemonics, .explanation-item-radicals, .explanation-item-kanji, .explanation-item-vocabulary, .explanation-item-lessons-reviews, .explanation-item-srs {
    color: #bcbcbc !important;
}
[id*="summary"][id^="radical"] h2 {
    color: #3DAEE9 !important;
}
[id*="summary"][id^="radical"] div {
    display: block !important;
}
[id*="summary"][id^="kanji"] h2 {
    color: #FDBC4B !important;
}
[id*="summary"][id^="kanji"] div {
    display: block !important;
}
[id*="summary"][id^="vocabulary"] h2 {
    color: #2ECC71 !important;
}
[id*="summary"][id^="vocabulary"] div {
    display: block !important;
}
[id*="summary"][id^="correct"] h2 {
    color: #2ecc71 !important;
}
[id*="summary"][id^="incorrect"] h2 {
    color: #ed1515 !important;
}
[id*="summary"] h2 {
    background-color: #1c1e21 !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
}
[id*="summary"] h2 strong {
    color: inherit !important;
}
[id*="summary"] h3 {
    border-bottom-color: #4d4d4d !important;
}
[id*="summary"] h3 strong, [id*="summary"] h3 span {
    background-color: #232629 !important;
    color: #4d4d4d !important;
}
[id*="summary"] li {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
#start-session a {
    background-color: #2ecc71 !important;
    color: #434343 !important;
}
#start-session .disabled {
    background-color: #232629 !important;
    color: #bcbcbc !important;
}
#review-stats[id^="review-stats"]::after {
    display: none !important;
}
.hover li {
    color: #bcbcbc !important;
}
#main-info.radical #character {
    color: #3DAEE9 !important;
}
#main-info.kanji #character {
    color: #FDBC4B !important;
}
#main-info.vocabulary #character {
    color: #2ECC71 !important;
}
#lessons header {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 11 !important;
    background-image: none !important;
}
#supplement-nav {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 9 !important;
    background-image: none !important;
    background-color: #31363b !important;
}
#supplement-nav li::before {
    border-bottom-color: #232629 !important;
    bottom: -50px !important;
    color: #232629 !important;
}
#next-btn:hover, #prev-btn:hover {
    background-color: #232629 !important;
    border-radius: 5px !important;
    filter: brightness(0.8) !important;
}
#supplement-info {
    margin-top: 30px !important;
}
#supplement-info h2 {
    border-bottom-color: #31363b !important;
}
#batch-items {
    position: relative !important;
    width: auto !important;
}
#screen-lesson-ready {
    z-index: 110 !important;
}
#screen-quiz-ready {
    z-index: 110 !important;
}
#reviews #character {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 10 !important;
    background-image: none !important;
}
[id^="loading"] {
    background-color: #31363b !important;
}
#stats, #summary-button, #header-buttons {
    color: #bcbcbc !important;
    z-index: 100 !important;
}
#question-type {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 9 !important;
    background-image: none !important;
    align-items: center !important;
    display: flex !important;
    height: 82px !important;
    justify-content: center !important;
}
#question-type > .srs {
    left: 70% !important;
    top: initial !important;
    width: initial !important;
}
.srs-up::before {
    color: #2ecc71 !important;
}
.srs-down::before {
    color: #ed1515 !important;
}
#answer-form {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 8 !important;
    background-image: none !important;
}
#answer-form fieldset {
    padding: 0 !important;
}
#answer-form fieldset.correct input[type=text]:disabled {
    background-color: #2ecc71 !important;
}
#answer-form fieldset.incorrect input[type=text]:disabled {
    background-color: #ed1515 !important;
}
#answer-form input {
    border-radius: 0 !important;
}
#answer-form button {
    height: 2.3em !important;
}
#additional-content {
    background-color: #31363b !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 6 !important;
    background-image: none !important;
    height: 50px !important;
    margin: 0 !important;
}
#additional-content ul {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    margin: 0 !important;
}
#additional-content ul .wrap-up-selected span, #additional-content ul .wrap-up-selected span:hover::before, #additional-content ul .wrap-up-selected span::before {
    background-color: #31363b !important;
}
#additional-content ul .wrap-up-selected strong, #additional-content ul .wrap-up-selected i {
    text-shadow: 0 0 10px #f47750 !important;
}
#additional-content li::before {
    border-bottom-color: #232629 !important;
    bottom: -25px !important;
    color: #232629 !important;
}
#additional-content li > span {
    z-index: 7 !important;
}
#additional-content li > span:hover::before {
    background-color: #31363b !important;
    color: #bcbcbc !important;
}
#answer-exception span {
    background-color: #4d4d4d !important;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#answer-exception span::before {
    display: none !important;
}
#last-items li ul {
    background-color: #31363b !important;
}
#last-items li ul[title*=meaning], #last-items li ul[title*=reading] {
    color: #bcbcbc !important;
}
#information {
    z-index: 8 !important;
}
#item-info h2 {
    border-bottom-color: #31363b !important;
}
#kana-chart ol {
    border-bottom-color: #31363b !important;
}
#kana-chart .active {
    border-bottom: none !important;
    border-left: 1px solid #31363b !important;
    border-right: 1px solid #31363b !important;
}
#kana-chart li {
    border-right-color: #31363b !important;
}
#kana-chart li:hover {
    background-color: #232629 !important;
    filter: brightness(0.8) !important;
}
#additional-content-load {
    background-color: #232629 !important;
}
.avatar {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
.avatar img {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
.user-info {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 10 !important;
    background-image: none !important;
}
.user-info::after {
    border-bottom-color: #232629 !important;
}
.wall-of-shame h3 > span {
    background-color: #232629 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
#wkof_ds .ui-dialog-titlebar {
    border-bottom: 1px solid #232629 !important;
    border-radius: 0;
}
#wkof_ds .ui-dialog-buttonpane {
    border-top: 1px solid #232629 !important;
}
#wkof_ds .ui-icon {
    background-image: url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/images/ui-icons_888888_256x240.png") !important;
    box-shadow: none !important;
}
#wkof_ds .ui-tabs-nav {
    border-bottom: 1px solid #232629 !important;
}
#wkof_ds .ui-tabs-anchor {
    color: #bcbcbc !important;
}
#divSt {
    color: #31363b !important;
    margin-top: 2vh;
}
[id^=reorder] {
    background-color: #232629 !important;
    border-color: #232629 !important;
    border-radius: 5px;
    border-style: solid;
    margin-top: 1vh;
    width: 200px;
}
#wki_button {
    border-color: #232629 !important;
    border-right: 1px solid !important;
}
[id|=qtip] {
    background-color: #232629 !important;
}
[id|=qtip] .qtip-titlebar, [id|=qtip] .qtip-title {
    background-color: #1d99f3 !important;
}
#wki_settings_cancel, #wki_settings_save {
    background-color: #232629 !important;
}
#wki_settings_button_label_bgcolor, #wki_settings_button_label_textcolor, #wki_settings_timer_show_next_item {
    background-color: #232629 !important;
}
[id|=qtip] .qtip-tip, [id|=qtip] canvas {
    color: #232629 !important;
}
#lessons .ui, #reviews .ui {
    margin: 10px !important;
    padding: 10px !important;
}
#lessons .ui #quick-next, #reviews .ui #quick-next {
    color: #4d4d4d !important;
}
#lessons .ui #quick-next.active, #reviews .ui #quick-next.active {
    color: #bcbcbc !important;
}
#lessons .ui #quick-next.active::before, #reviews .ui #quick-next.active::before {
    text-shadow: 0 0 10px rgba(61, 174, 233, 0.5) !important;
}
#lessons .ui ul item, #reviews .ui ul item {
    background-color: #31363b !important;
}
#timeline {
    padding: 0.5rem !important;
}
#timeline .graph_panel {
    overflow: hidden !important;
}
#timeline .graph .bkgd {
    fill: transparent;
}
#timeline .graph .label-x > text, #timeline .graph .label-y > text, #timeline .graph .markers > path {
    fill: #bcbcbc;
}
#timeline .graph .markers > .bur {
    fill: #31363b !important;
}
#timeline .graph .rad {
    fill: #3DAEE9 !important;
}
#timeline .graph .kan {
    fill: #FDBC4B !important;
}
#timeline .graph .voc {
    fill: #2ECC71 !important;
}
#timeline .review_info .detail_buttons > button {
    margin-bottom: 0.3em;
}
#timeline .review_info .summary .item_type:first-child, #timeline .review_info .summary .srs_stage:nth-child(4), #timeline .review_info .summary .level:nth-child(8) {
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
}
#timeline .review_info .summary .item_type:nth-child(3), #timeline .review_info .summary .srs_stage:nth-child(7), #timeline .review_info .summary .level:nth-child(13) {
    border-bottom-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}
#timeline .review_info .bur {
    background: #31363b !important;
}
#timeline .review_info .item_type > span {
    color: #232629 !important;
}
#timeline .review_info .rad svg {
    stroke: #232629;
}
.progression .lattice-single-character li > a[data-srs-lvl="5"], .progression .lattice-single-character li > a[data-srs-lvl="6"], .progression .lattice-single-character li > a[data-srs-lvl="7"], .progression .lattice-single-character li > a[data-srs-lvl="8"], .progression .lattice-single-character li > a[data-srs-lvl="9"], .progression .lattice-single-character li > a[data-srs-lvl="10"] {
    filter: brightness(0.5) !important;
}
.progression .lattice-single-character ul > .pct90 {
    background-color: #31363b !important;
}
[aria-describedby=divSRSGridSettings] .ui-dialog-content input, [aria-describedby=divSRSGridSettings] .ui-dialog-content select, [aria-describedby=ui-id-2] .ui-dialog-content input, [aria-describedby=ui-id-2] .ui-dialog-content select {
    min-width: 250px !important;
}
#WKO_button {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
#answer-form fieldset.WKO_ignored input[type="text"]:disabled, #answer-form fieldset.WKO_ignored button {
    background-color: #f67400 !important;
}
#item_marker_body h3 {
    color: #434343 !important;
}
#item_marker_body #item_marker_settings {
    padding: 5px !important;
}
#marked_items {
    padding: 10px !important;
}
#marked_items #marked_items_buttons > button {
    margin-right: 10px !important;
}
#marked_items #marked_items_list {
    display: flex !important;
    flex-wrap: wrap !important;
}
#marked_items #marked_items_list > a {
    margin: 5px 5px 0 0 !important;
}
#marked_items #marked_items_list > a:hover {
    text-decoration: none !important;
}
.wklc {
    justify-content: space-around !important;
    margin: 1em 1.3em !important;
}
.wklc .wklc-items {
    margin: 0 !important;
}
.wklc .wklc-item {
    color: #bcbcbc !important;
    min-width: 2em !important;
    padding: 0 0.2em;
}
.wklc[class*=apprentice] {
    color: #1d99f3 !important;
}
.wklc[class*=guru] {
    color: #1cdc9a !important;
}
.wklc[class*=master] {
    color: #c9ce3b !important;
}
.wklc[class*=enlightened] {
    color: #f67400 !important;
}
.wklc .wklc-apprentice1, .wklc .wklc-guru1 {
    filter: saturate(1) !important;
}
.wklc .wklc-apprentice2, .wklc .wklc-guru2 {
    filter: saturate(0.5) !important;
}
.wklc .wklc-apprentice3, .wklc .wklc-guru3 {
    filter: saturate(0.33333) !important;
}
.wklc .wklc-apprentice4, .wklc .wklc-guru4 {
    filter: saturate(0.25) !important;
}
#stroke_order > img {
    filter: invert(80%) !important;
    opacity: 0.5 !important;
}
#ss_quiz {
    padding: 0.5rem !important;
}
#ss_quiz .quiz-progress {
    align-items: center !important;
    background-color: #1e2123 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    height: 1rem !important;
}
#ss_quiz .quiz-progress .quiz-progress-bar {
    background-color: #1d99f3 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    height: 50% !important;
    margin: 5px !important;
    position: relative;
    top: 25%;
}
#ss_quiz .help {
    color: #3daee9 !important;
}
#ss_quiz .qtype {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
#ss_quiz .reading {
    background-color: #4D4D4D !important;
}
#ss_quiz .meaning {
    background-color: #31363B !important;
}
#ss_quiz .answer {
    margin-top: 0.5rem !important;
    padding: 0 !important;
}
#ss_quiz .answer .correct {
    background-color: #2ecc71 !important;
    color: #434343 !important;
}
#ss_quiz .answer .incorrect {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
.vocabulary-progress li > a, .vocabulary-progress li > div {
    font-size: 1.1em !important;
}
.vocabulary-progress li > li {
    background-color: #1478ac !important;
    border-color: transparent !important;
}
.vocabulary-progress ul li:nth-child(2) a, .vocabulary-progress ul li:nth-child(2) div {
    background-color: #17191b !important;
    color: #bcbcbc !important;
}
#keisei_section table {
    box-sizing: border-box !important;
    width: 100% !important;
}
#keisei_section table li {
    box-sizing: inherit !important;
}
#keisei_section .single-character-grid {
    border: 0 !important;
}
#keisei_section .keisei_chargrid_header, #keisei_section .keisei_chargrid_compounds {
    width: auto !important;
}
#keisei_section .keisei_chargrid_header .character-item, #keisei_section .keisei_chargrid_compounds .character-item {
    width: 116px !important;
}
@media(max-width: 767px) {
    #keisei_section .keisei_chargrid_header .character-item, #keisei_section .keisei_chargrid_compounds .character-item {
        width: auto !important;
    }
}
#keisei_section #keisei_phonetic_grid td > li {
    margin-bottom: 10px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
}
#keisei_section #keisei_phonetic_grid td > li:last-child {
    margin-bottom: 5px !important;
}
#keisei_section .character-item {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#keisei_section[id^=phonetic] {
    background-color: #11d116 !important;
    color: #232629 !important;
}
#keisei_section[id^=nonphonetic] {
    background-color: #da4453 !important;
    color: #232629 !important;
}
#keisei_section .keisei_style_reading_notInWK {
    color: dimgray !important;
}
#keisei_modal_settings .modal-header, #keisei_modal_info .modal-header {
    border-bottom: 1px solid #31363b !important;
}
#keisei_modal_settings .modal-footer, #keisei_modal_info .modal-footer {
    background-color: inherit !important;
    border-top: 1px solid #31363b !important;
}
.global-header {
    background-color: #222629;
    background-image: none;
    border-bottom: 1px solid #323639;
}
.global-header span,#lesson #batch-items ul li span,#lesson #supplement-info .radical, #lesson #supplement-info .kanji, #lesson #supplement-info .vocabulary{
    color: #FFF !important;
}
#reviews-summary #review-stats [id*="review-stats-"]{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
#reviews-summary #incorrect, #reviews-summary #correct{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
#lessons-summary #radicals, #lessons-summary #kanji, #lessons-summary #vocabulary{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    position: absolute;
}
.sitemap__page a{
    color:#EEE !important;
}
.sitemap__section-header:hover, .sitemap__section-header[data-expanded="true"]{
    background:#000;
}
.sitemap__section-header--radicals:hover, .sitemap__section-header--radicals[data-expanded="true"]{
    background: #adc1cb;
}
.sitemap__section-header--kanji:hover, .sitemap__section-header--kanji[data-expanded="true"]{
    background: #cbadc1;
}
.sitemap__section-header--vocabulary:hover, .sitemap__section-header--vocabulary[data-expanded="true"]{
    background: #c1adcb;
}

EDIT: Just updated this with a fix for the logo (thanks @Kumirei)

EDIT2: Just updated with some more menu fixes (hover and text link colors)

EDIT3: Better version that works with Stylus as well as Stylish extensions. Also fixes lessons page. Thanks @BadCat

EDIT4: Makes Radicals(untested), Kanji, and Vocabulary(untested) in lessons more readable.

5 Likes
2

What is this for? The progression pages?

3

It fixes the global header, and the review results page. I’m not sure what the “progression pages” are. If you link me I can try to quickfix that as well.

4

Oh, I didn’t realise you posted the whole theme. I saw the first lines and thought the character grid stuff might be the progress pages.

I assume your change is only this?

.global-header {
    background-color: #222629;
    background-image: none;
    border-bottom: 1px solid #323639;
}
.global-header span{
    color: #FFF !important;
}
#reviews-summary #review-stats [id*="review-stats-"]{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
#reviews-summary #incorrect, #reviews-summary #correct{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}

I didn’t realise they changed the summary page, too. You missed this stuff, though.

image

Not that you have to fix it for my sake, I’m using my own css to do the header.

image
image1195×83 11.9 KB

5

I’d like to use this, but I can’t paste it in without dozens of :heavy_multiplication_x: errors showing in the left-hand column :frowning:

1 Like
6

Oh nice logo. Care to share that CSS?

For the menu I was thinking I’d I just lighten the text color

EDIT: I have now lightened the menu text color, and darkened the hover colors.

7

Sure. As you see I just grabbed their logo from the wanikani.com page (when not logged in).

header.global-header {
    background: #232629;
    border: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7);
}

header.global-header a {
    color: #bcbcbc !important;
}

.sitemap__page--lessons span, 
.sitemap__page--reviews span {
    background-color: #232629 !important;
}

.sitemap--divider {
    border-color: #42464a;
}

.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    position: absolute;
}

Keep in mind that BD uses different colors for rad/kan/voc. So in my screenshot it’s also the wrong blue.

1 Like
8

@Kai_973 I couldn’t reproduce your issue. There are a bunch of warnings (but that came from the original breeze theme as well). But if you’re getting legitimate errors make sure you copied the entire code snippet (there is a scroll bar and there is a lot), and make sure you replace the original code.

Please let me know if I can do anything else to help.

9

Thank you for this.

2 Likes
10

I think you can ignore these errors. Some userstyle extensions like to warn even when it breaks nothing, especially Stylish, if that’s what you are using.

11

@ZeroSinner, @Kumirei

Apparently, I’d had Breeze Dark installed through Stylus, which is different from Stylish.
I’ve just deactivated the Stylus version and implemented the fix here through Stylish. Thanks :upside_down_face:

12

Just so you know, Stylish has been barred from the extensions store for spying on their users. Stylus is the better alternative

3 Likes
13

Oh, guess I’ll nuke it then :stuck_out_tongue:

14

Thanks for working on this!

The lessons page seems not working to me? Is this a known issue?

wk
wk1440×815 92.8 KB

2 Likes
15

Okay, here’s a version that fixes the lessons page, in case anyone else was having this issue. It also fixes the red Xs that @Kai_973 was facing (I had the same problems)

[class*=character-grid][class|="radical"]:not(i), .legend ul span.all, .popover.srs .popover-content li:nth-child(1), [class*=radical] .progress > .bar, .radical-icon, [class*="highlight-radical"], [class*="radical-highlight"], section.progression .lattice-single-character[id^="radical"] > a, [id*="summary"] ul >[class^="radical"], #supplement-info[class^=radical], #batch-items[class^=radical], #reviews #last-items[class*="radical"][lang="ja"]:first-child, #related-items a >[class^=radical], #lessons .ui ul item.radical, #reviews .ui ul item.radical, #timeline .review_info .rad, #keisei_section[id^=radical], .dropdown.open.radicals, .legend ul span.radicals {
    background-color: #3DAEE9 !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="radical"], #main-info.radical, #reviews #character.radical, #ss_quiz.radical .question {
    background-color: #232629 !important;
    color: #3DAEE9 !important;
}
[class*=character-grid][class|="kanji"]:not(i), .dropdown.open.kanji, .legend ul span.kanji, .popover.srs .popover-content li:nth-child(2), [class*=kanji] .progress > .bar, .kanji-icon, [class*="highlight-kanji"], [class*="kanji-highlight"], section.progression .lattice-single-character[id^="kanji"] > a, [id*="summary"] ul >[class^="kanji"], #supplement-info[class^=kanji], #batch-items[class^=kanji], #reviews #last-items[class*="kanji"][lang="ja"]:first-child, #related-items a >[class^=kanji], #lessons .ui ul item.kanji, #reviews .ui ul item.kanji, #timeline .review_info .kan, #keisei_section[id^=kanji] {
    background-color: #FDBC4B !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="kanji"], #main-info.kanji, #reviews #character.kanji, #ss_quiz.kanji .question {
    background-color: #232629 !important;
    color: #FDBC4B !important;
}
[class*=character-grid][class|="vocabulary"]:not(i), .dropdown.open.vocabulary, .legend ul span.vocabulary, .popover.srs .popover-content li:nth-child(3), [class*=vocabulary] .progress > .bar, .vocabulary-icon, [class*="highlight-vocabulary"], [class*="vocabulary-highlight"], [id*="summary"] ul >[class^="vocabulary"], #supplement-info[class^=vocabulary], #batch-items[class^=vocabulary], #reviews #last-items[class*="vocabulary"][lang="ja"]:first-child, #related-items a >[class^=vocabulary], #lessons .ui ul item.vocabulary, #reviews .ui ul item.vocabulary, #timeline .review_info .voc, .vocabulary-progress li > a, .vocabulary-progress li > div {
    background-color: #2ECC71 !important;
    color: #232629 !important;
}
.kotoba-table-list table[id^="vocabulary"], #main-info.vocabulary, #reviews #character.vocabulary, #ss_quiz.vocabulary .question {
    background-color: #232629 !important;
    color: #2ECC71 !important;
}
textarea, input, button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard {
    border-radius: 5px !important;
    color: #bcbcbc !important;
}
textarea:focus, input:focus, button:focus, .btn:focus, .page-list li > a:focus, .nav-load > li:last-child a:focus, .button:focus, #start-session:focus, #batch-items[data-index="quiz"] > span:focus, .btn-set li:focus, #hotkeys:focus, #lessons .ui #reorder:focus, #reviews .ui #reorder:focus, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:focus, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:focus, #WKO_button:focus, select:focus, #back-dashboard:focus {
    outline: none !important;
}
textarea, input {
    background-color: #1e2123 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    transition: box-shadow linear 0.2s !important;
}
textarea:focus, input:focus {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset !important;
}
button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard {
    background-color: #1e2123 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    transition: box-shadow linear 0.2s, border linear 0.2s !important;
}
button:hover, .btn:hover, .page-list li > a:hover, .nav-load > li:last-child a:hover, .button:hover, #start-session:hover, #batch-items[data-index="quiz"] > span:hover, .btn-set li:hover, #hotkeys:hover, #lessons .ui #reorder:hover, #reviews .ui #reorder:hover, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:hover, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:hover, #WKO_button:hover, select:hover, #back-dashboard:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;
}
button:focus, .btn:focus, .page-list li > a:focus, .nav-load > li:last-child a:focus, .button:focus, #start-session:focus, #batch-items[data-index="quiz"] > span:focus, .btn-set li:focus, #hotkeys:focus, #lessons .ui #reorder:focus, #reviews .ui #reorder:focus, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button:focus, [aria-describedby=ui-id-2] .ui-dialog-buttonset button:focus, #WKO_button:focus, select:focus, #back-dashboard:focus {
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
textarea {
    color: #bcbcbc !important;
    -webkit-text-fill-color: #bcbcbc !important;
}
.alert, .system-alert, .legend, .page-list, #main footer ul, .account-subscription .account-subscription-plan, #account-subscription-coupon-form #coupon, .account-subscription-payment-processor-info, .account-subscription form .control-group input[type="text"], .api section, .newbie, .review-status, .srs-progress, section.progression, .kotoba-table-list, .forum-topics-list, .blog, .individual-item .span12 > section, .individual-item + section, section[class^=lattice-], section[id|=level], .settings-section, [id*="summary"][id^="radical"], [id*="summary"][id^="kanji"], [id*="summary"][id^="vocabulary"], [id*="summary"][id^="correct"], [id*="summary"][id^="incorrect"], #review-stats, #supplement-info, #information, #lessons .ui, #reviews .ui, #timeline, [aria-describedby=divSRSGridSettings], [aria-describedby=ui-id-2], #item_marker_body, #marked_items, .wklc, #ss_quiz, #keisei_modal_settings, #keisei_modal_info {
    background-color: #232629 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}
.popover {
    background-color: #4d4d4d !important;
    border-color: #4d4d4d !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#wkof_ds .ui-dialog, #timeline .review_info .inner {
    background-color: #31363b !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
[class|=account-subscription] h3, [class|=account-billing] h3, .kotoba-table-list h3, .forum-topics-list h3, .blog h3 {
    align-items: center !important;
    background-color: #1c1e21 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    color: #bcbcbc !important;
    display: flex !important;
    margin-bottom: 3px !important;
    max-height: 60px !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
    text-align: left !important;
}
[class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol {
    display: inline !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}
[class|=account-subscription] h3 i::before, [class|=account-billing] h3 i::before, .kotoba-table-list h3 i::before, .forum-topics-list h3 i::before, .blog h3 i::before {
    color: #bcbcbc !important;
}
[class|=account-subscription] td, [class|=account-billing] td, .kotoba-table-list td, .forum-topics-list td, .blog td {
    border-bottom: 1px solid #31363b !important;
}
[class|=account-subscription] tr, [class|=account-billing] tr, .kotoba-table-list tr, .forum-topics-list tr, .blog tr {
    background-color: #232629 !important;
}
[class|=account-subscription] hr, [class|=account-billing] hr, .kotoba-table-list hr, .forum-topics-list hr, .blog hr {
    display: none;
}
#enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
body, #screen-lesson-ready, #screen-quiz-ready, .avatar {
    background-blend-mode: color-burn !important;
    background-color: #31363b !important;
    background-image: url("https://cdn-staging.wanikani.com/assets/default-v2/bg-texture-f26fc7a5696f53a272eaffdfdd43eb215d33ef508c89ed2d0501903eaad2f29a.png") !important;
    background-repeat: repeat !important;
}
.legend ul .locked, section[class^=lattice-] li:not([data-sorted]) > a {
    color: #fff !important;
    filter: brightness(0.2) !important;
}
.locked-item, .character-item.locked {
    background-image: url("https://cdn-staging.wanikani.com/assets/default-v2/stripes-5e8494366c1615da046bd0f587cfeef6786e7ba17863df1329767ca3b89140e0.png") !important;
}
button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, [class|=account-subscription] h3, [class|=account-billing] h3, .kotoba-table-list h3, .forum-topics-list h3, .blog h3, [class|=account-subscription] tr, [class|=account-billing] tr, .kotoba-table-list tr, .forum-topics-list tr, .blog tr, #enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item, input[type="range"], .nav > .lessons a > span, .nav > .reviews a > span, .srs-progress ul > li, .kotoba-table-list .none-available, .see-more, #review-stats[id^="review-stats"], #timeline .review_info .tot, .alert, .system-alert, [class*=character-grid] > li, .popover .popover-content li, .popover .bar, .progress, .progress > .bar, [class*="highlight"], .newbie, section.progression .lattice-single-character, .see-more a, #main-info, #reviews #character, #wkof_ds .ui-dialog, #wkof_ds .ui-dialog-buttonpane, #wkof_ds .ui-tabs-tab, #wki_settings_cancel, #wki_settings_save, #wki_settings_button_label_bgcolor, #wki_settings_button_label_textcolor, #wki_settings_timer_show_next_item, #timeline .review_info .rad, #timeline .review_info .kan, #timeline .review_info .voc, #ss_quiz .quiz-progress, #ss_quiz .quiz-progress .quiz-progress-bar, #ss_quiz .qtype, #keisei_section .character-item {
    background-image: none !important;
}
[class|=account-subscription] th, [class|=account-billing] th, .kotoba-table-list th, .forum-topics-list th, .blog th, [class|=account-subscription] td, [class|=account-billing] td, .kotoba-table-list td, .forum-topics-list td, .blog td, input[type="range"], .nav > .lessons a > span, .nav > .reviews a > span, .srs-progress ul > li, .kotoba-table-list .none-available, .see-more, #review-stats[id^="review-stats"], #timeline .review_info .tot, blockquote, .audio-btn, [class*=character-grid] > li > a, .dropdown.open[class*="toggle"], .legend ul .locked, .legend[class*="lattice"], .nav .title span:first-child, .popover .popover-title, .note-meaning fieldset, .note-reading fieldset, .user-synonyms, .user-synonyms li::after, .user-synonyms-add-btn::before, #main footer li, #main footer a, #main footer a:hover, .review-status li, .kotoba-table-list .none-available:hover, .individual-item h2, .individual-item .additional-info, section[class^=lattice-] li, section[class^=lattice-] li > a, section[id|=level] header, .explanation-item-mnemonics, .explanation-item-radicals, .explanation-item-kanji, .explanation-item-vocabulary, .explanation-item-lessons-reviews, .explanation-item-srs, #stats *, #summary-button *, #header-buttons *, .srs-up, .srs-down, #answer-form fieldset.correct button, #answer-form fieldset.incorrect button, #answer-form button, #additional-content li > span, #all-info, .srs-levels li span, .wall-of-shame, #wkof_ds .ui-dialog-titlebar, #wkof_ds .ui-dialog-buttonpane, #wkof_ds .ui-tabs-tab, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, #wki_srs_popup_wrapper .wki_srs_popup_icon, #wki_srs_popup_wrapper #wki_srs_popup_message, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, #lessons .ui-small, #reviews .ui-small, #timeline .bar_style select, #timeline .graph .bkgd, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonpane, [aria-describedby=divSRSGridSettings] .ui-dialog-titlebar, [aria-describedby=divSRSGridSettings] .ui-dialog-content tr:hover, [aria-describedby=ui-id-2] .ui-dialog-buttonpane, [aria-describedby=ui-id-2] .ui-dialog-titlebar, [aria-describedby=ui-id-2] .ui-dialog-content tr:hover, .wklc .wklc-item, .wklc .wklc-max-score-edit label, #ss_quiz .qwrap, #ss_quiz .help, #ss_quiz .answer {
    background-color: transparent !important;
}
[class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol, .audio-btn, .audio-btn:hover, .audio-btn:focus, input[type="checkbox"], .dropdown[class*="toggle"] > span, .legend ul span, .nav li:not(.open) span:first-child, .popover .popover-title, #search.in, [class*="highlight"], .srs-progress ul > li, section.progression .lattice-single-character a, .kotoba-table-list .none-available, .kotoba-table-list .none-available > td div, .see-more, .see-more div, section[class^=lattice-] li > a, #review-stats[id^="review-stats"], #main-info, #answer-form input, #answer-form button, #additional-content li > span, #additional-content li > span:hover::before, #kana-chart li:hover, .srs-levels li span, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, #timeline .bar_style select, #timeline .range_input, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, .wklc .wklc-item, #keisei_modal_settings .modal-header, #keisei_modal_info .modal-header, #keisei_modal_settings .modal-footer, #keisei_modal_info .modal-footer {
    box-shadow: none !important;
}
textarea, input, button, .btn, .page-list li > a, .nav-load > li:last-child a, .button, #start-session, #batch-items[data-index="quiz"] > span, .btn-set li, #hotkeys, #lessons .ui #reorder, #reviews .ui #reorder, [aria-describedby=divSRSGridSettings] .ui-dialog-buttonset button, [aria-describedby=ui-id-2] .ui-dialog-buttonset button, #WKO_button, select, #back-dashboard, .alert, .system-alert, .legend, .page-list, #main footer ul, .account-subscription .account-subscription-plan, #account-subscription-coupon-form #coupon, .account-subscription-payment-processor-info, .account-subscription form .control-group input[type="text"], .api section, .newbie, .review-status, .srs-progress, section.progression, .kotoba-table-list, .forum-topics-list, .blog, .individual-item .span12 > section, .individual-item + section, section[class^=lattice-], section[id|=level], .settings-section, [id*="summary"][id^="radical"], [id*="summary"][id^="kanji"], [id*="summary"][id^="vocabulary"], [id*="summary"][id^="correct"], [id*="summary"][id^="incorrect"], #review-stats, #supplement-info, #information, #lessons .ui, #reviews .ui, #timeline, [aria-describedby=divSRSGridSettings], [aria-describedby=ui-id-2], #item_marker_body, #marked_items, .wklc, #ss_quiz, #keisei_modal_settings, #keisei_modal_info, #wkof_ds .ui-dialog, #timeline .review_info .inner, [class|=account-subscription] h3 .heading-symbol, [class|=account-billing] h3 .heading-symbol, .kotoba-table-list h3 .heading-symbol, .forum-topics-list h3 .heading-symbol, .blog h3 .heading-symbol, [class|=account-subscription] tr:last-child td, [class|=account-billing] tr:last-child td, .kotoba-table-list tr:last-child td, .forum-topics-list tr:last-child td, .blog tr:last-child td, #enlarge-hover, [class*="-icon"], [id*="summary"] li, #supplement-info li span, #batch-items li span, #related-items span, #lessons .ui ul item, #reviews .ui ul item, [class*=character-grid] > li, .dropdown-menu, .navbar-inner, .nav > .dropdown.account > .dropdown-toggle span, .page-list-header span, .popover .popover-content li, .review-status li, .kotoba-table-list .none-available > td, .see-more div, [id*="summary"] nav, #question-type, #answer-form input, #answer-form button, #wkof_ds .ui-dialog-titlebar, #wkof_ds .ui-tabs-tab, #wki_button #wki_mimic_button, #wki_button .wki_item_wrapper, #wki_button .wki_button_item_label, [id|=qtip], [id|=qtip] .qtip-titlebar, [id|=qtip] .qtip-title, #lessons .ui-small .icon-minus, #reviews .ui-small .icon-minus, #lessons .ui .icon-minus, #reviews .ui .icon-minus, #lessons .ui-small .icon-plus, #reviews .ui-small .icon-plus, #lessons .ui .icon-plus, #reviews .ui .icon-plus, [aria-describedby=divSRSGridSettings] .ui-widget-header, [aria-describedby=ui-id-2] .ui-widget-header, [aria-describedby=divSRSGridSettings] .ui-widget-header button, [aria-describedby=divSRSGridSettings] .ui-widget-header .ui-button-icon, [aria-describedby=ui-id-2] .ui-widget-header button, [aria-describedby=ui-id-2] .ui-widget-header .ui-button-icon, #ss_quiz .help, #ss_quiz .qtype, #keisei_section .character-item {
    border: none !important;
}
.character-item *, .dropdown a, .dropdown i, .dropdown span, .dropdown li, .nav a, [class*="rad"] *, .dashboard a, .kotoba-table-list span, .kotoba-table-list time, .kotoba-table-list i, section[class^=lattice-] li > a *, [id*="summary"] li *, #reviews #character *, #related-items span > i, #stats *, #summary-button *, #header-buttons * {
    color: inherit !important;
}
.highlight-reading, #question-type.reading {
    background-color: #4D4D4D !important;
}
.highlight-meaning, #question-type.meaning {
    background-color: #31363B !important;
}
* {
    text-shadow: none !important;
}
div, p, pre, strong, small, span, li, time, h1, h2, h3, h4, label, i {
    color: #bcbcbc !important;
}
a {
    color: #3daee9 !important;
    text-shadow: none !important;
}
footer a {
    color: #bcbcbc !important;
}
.btn-danger {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
#user_password:focus {
    border-left: 2px solid #ed1515 !important;
    border-right: 2px solid #ed1515 !important;
}
#user_current_password:focus {
    border-left: 2px solid #f67400 !important;
    border-right: 2px solid #f67400 !important;
}
table {
    background-color: inherit !important;
    border-collapse: separate !important;
}
table tr {
    background-color: inherit !important;
    border-radius: 5px !important;
}
table tbody > tr:hover {
    filter: brightness(0.8) !important;
}
.alert {
    margin-left: auto;
    margin-right: auto;
    max-width: 92vw;
}
.alert h3, .alert a, .alert p, .alert span, .alert i, .alert time {
    color: inherit !important;
}
.alert-info {
    background-color: #f67400 !important;
    color: #434343 !important;
}
.system-alert {
    background-color: #f67400 !important;
    color: #434343 !important;
}
.system-alert h3, .system-alert i, .system-alert time {
    color: inherit !important;
}
.reviews-alert::before {
    background-color: #f67400 !important;
    bottom: 17px !important;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%) !important;
    z-index: 3 !important;
}
li.burned {
    filter: brightness(0.5) !important;
}
[class*=character-grid] {
    background-color: #1e2123 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 5px !important;
}
[class*=character-grid] > li {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin: 5px !important;
}
[class*=character-grid] > li.locked {
    filter: brightness(0.7) !important;
}
.dropdown:not(.open).radicals >[class*="toggle"]:hover > span {
    border-color: #3DAEE9 !important;
}
.dropdown:not(.open).kanji >[class*="toggle"]:hover > span {
    border-color: #FDBC4B !important;
}
.dropdown:not(.open).vocabulary >[class*="toggle"]:hover > span {
    border-color: #2ECC71 !important;
}
.dropdown.open {
    background-color: #33383c !important;
}
.dropdown.open.radicals[class$="menu"]::before, .dropdown.open.radicals[class$="menu"]::after {
    border-bottom-color: #3DAEE9 !important;
    color: #3DAEE9 !important;
}
.dropdown.open.kanji[class$="menu"]::before, .dropdown.open.kanji[class$="menu"]::after {
    border-bottom-color: #FDBC4B !important;
    color: #FDBC4B !important;
}
.dropdown.open.vocabulary[class$="menu"]::before, .dropdown.open.vocabulary[class$="menu"]::after {
    border-bottom-color: #2ECC71 !important;
    color: #2ECC71 !important;
}
.dropdown.open[class*="toggle"] {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.7) inset, -1px 0 2px rgba(0, 0, 0, 0.7) inset !important;
}
.dropdown.open[class*="toggle"] > span {
    border: 0.3em solid #232629 !important;
}
.dropdown.open > .dropdown-menu {
    top: 112% !important;
}
.dropdown.open > .dropdown-menu li:not(.nav-header) {
    background-color: inherit !important;
}
.dropdown.open > .dropdown-menu li:not(.nav-header) > a:hover {
    background-color: inherit !important;
    filter: brightness(0.8) !important;
}
.dropdown.open > .dropdown-menu::before, .dropdown.open > .dropdown-menu::after {
    border-bottom-color: #33383c !important;
    color: #33383c !important;
}
.dropdown-menu {
    background-color: inherit !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
.legend .percentage-0-20 {
    background-color: #f47750 !important;
}
.legend .percentage-21-40 {
    background-color: #c9ce3b !important;
}
.legend .percentage-41-60 {
    background-color: #3daee9 !important;
}
.legend .percentage-61-80 {
    background-color: #1d99f3 !important;
}
.legend .percentage-81-100 {
    background-color: #1cdc9a !important;
}
.legend .apprentice-lattice {
    color: #1d99f3 !important;
}
.legend .guru-lattice {
    color: #1cdc9a !important;
}
.legend .master-lattice {
    color: #c9ce3b !important;
}
.legend .enlighten-lattice {
    color: #f67400 !important;
}
.legend .burned-lattice {
    color: #DA4453 !important;
}
.legend ul span {
    margin-left: 1vh !important;
    margin-right: 1vh !important;
}
.legend ul span.burned {
    background-color: #DA4453 !important;
    color: #434343 !important;
}
.legend[class*="percentage"], .legend[class*="lattice"] {
    filter: brightness(0.8) !important;
}
.navbar-inner {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 1030 !important;
    background-image: none !important;
}
.nav .title span:first-child {
    box-sizing: border-box !important;
}
.nav li:not(.open) span:first-child {
    border: 0.3em solid #2a2e31 !important;
}
.nav li:not(.open) > a:hover > span:first-child {
    border-color: #33383c !important;
}
.page-list ul {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 5px !important;
}
.page-list li {
    margin: 2px !important;
}
.page-list li > a {
    background-color: #3daee9 !important;
    color: #434343 !important;
}
.page-list-header {
    width: 110px !important;
}
.popover .popover-title {
    opacity: inherit;
}
.popover .popover-content li {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 3px !important;
    margin-top: 3px !important;
}
.popover .popover-content li span {
    color: #31363b !important;
}
.popover .bar {
    background-color: #3daee9 !important;
    line-height: 100% !important;
}
.popover.srs .arrow, .popover.srs .arrow::after, .popover.lattice .arrow, .popover.lattice .arrow::after {
    border-right-color: #4d4d4d !important;
    opacity: inherit !important;
}
.progress {
    align-items: center !important;
    background-color: #1e2123 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    display: flex !important;
}
.progress > .bar {
    background-color: #1d99f3 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    height: 50% !important;
    margin: 5px !important;
    opacity: 0.75 !important;
}
.progress > .bar > span {
    background-color: #484848 !important;
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    color: #bcbcbc !important;
}
.progress > .bar > span::after {
    border-top-color: #484848 !important;
}
.progress > .bar > .threshold {
    box-shadow: 1px 0 0 #4d4d4d !important;
    color: #4d4d4d !important;
    height: 60% !important;
    line-height: 110% !important;
    opacity: 0.50 !important;
}
#progress section {
    margin-left: 2vw !important;
    margin-right: 2vw !important;
}
.user-synonyms {
    margin-left: 5px;
}
.user-synonyms li, .user-synonyms i {
    color: #bcbcbc !important;
}
.user-synonyms-add-form input {
    padding-left: 5px !important;
}
.user-synonyms-add-form button {
    height: 1.8em !important;
    min-width: 1.8em !important;
}
.japanese-font-styling-correction, .enlarge-hover {
    color: #232629 !important;
}
[class*="highlight"] {
    border-radius: 3px !important;
}
[class*="highlight"] > span {
    color: #434343 !important;
}
.highlight-reading > span, .highlight-meaning > span {
    color: #bcbcbc !important;
}
#main footer {
    background-image: url(https://i.imgur.com/MRVqVnw.png) !important;
    background-position: top !important;
}
#main footer li:last-child {
    background-color: #da4453 !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
    color: #434343 !important;
}
#main footer li:last-child span {
    color: #434343 !important;
}
#main footer a, #main footer a:hover {
    padding-top: 10px !important;
    transition: none !important;
}
#main footer a:hover {
    text-decoration: underline !important;
}
.dashboard .row .span12 .row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}
@media(max-width: 767px) {
    .dashboard .row .span12 .row .span4:nth-child(2) {
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }
}
.dashboard .row .span12 + .span12 {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}
.account #user_lesson_batch_size {
    background-color: #232629 !important;
    border-color: #3daee9 !important;
}
.account-subscription .account-subscription-plan[type="button"] {
    border-radius: 0 0 5px 5px !important;
}
.account-subscription .account-subscription-plan-active {
    border-color: #f67400 !important;
    box-shadow: 0 0 5px rgba(246, 116, 0, 0.5) !important;
}
.account-subscription .account-subscription-plan-active[type="button"] {
    background: #f67400 !important;
}
.account-subscription form .control-group[type="text"]:focus {
    border: none !important;
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
.account-subscription-payment-submit button {
    background-color: #f67400 !important;
    border-radius: 5px !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}
.account-subscription-payment-submit[type=submit]:disabled {
    background-color: #f67400 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 5px rgba(246, 116, 0, 0.5);
}
#account-subscription-coupon-form #coupon:focus {
    border: none !important;
    box-shadow: 0 0 5px rgba(61, 174, 233, 0.5) !important;
}
.api h3 {
    font-weight: bold !important;
}
.api pre {
    background-color: #31363b !important;
}
.api code {
    background-color: #31363b !important;
    border: none !important;
}
.newbie hr {
    border-bottom-color: #31363b !important;
    border-top-color: #31363b !important;
}
.srs-progress ul > li:not(:last-child) {
    border-right: 1px solid #31363b;
}
.srs-progress ul > #apprentice > span {
    color: #1d99f3 !important;
}
.srs-progress ul > #guru > span {
    color: #1cdc9a !important;
}
.srs-progress ul > #master > span {
    color: #c9ce3b !important;
}
.srs-progress ul > #enlightened > span {
    color: #f67400 !important;
}
.srs-progress ul > #burned > span {
    color: #DA4453 !important;
}
section.progression hr {
    border-bottom-color: #31363b !important;
    border-top: 0 !important;
}
section.progression .lattice-single-character li {
    padding: 2px !important;
}
section.progression .lattice-single-character a {
    filter: brightness(0.7);
}
.kotoba-table-list {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 100%;
    position: relative !important;
}
.kotoba-table-list table {
    margin-bottom: 38px !important;
}
.kotoba-table-list .none-available > td div {
    border-color: #31363b !important;
}
.kotoba-table-list .none-available > td i::before {
    color: #31363b !important;
}
.kotoba-table-list .none-available:hover {
    filter: none !important;
}
.kotoba-table-list .see-more {
    bottom: 0 !important;
    position: absolute !important;
    width: 100% !important;
}
.forum-topics-list, .blog {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.see-more a {
    background-color: #1c1e21 !important;
    border-radius: 0 0 5px 5px !important;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7) !important;
    margin-top: 3px !important;
}
.individual-item .level-icon {
    background-color: #232629 !important;
}
.individual-item .span12 > section {
    padding: 10px !important;
}
.individual-item section > h2 {
    border-bottom: 1px solid #4d4d4d !important;
}
.individual-item h2 {
    color: #bcbcbc !important;
}
.individual-item + section {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1170px !important;
}
@media(min-width: 979px) and (max-width: 1199px) {
    .individual-item + section {
        width: 940px !important;
    }
}
@media(min-width: 767px) and (max-width: 979px) {
    .individual-item + section {
        width: 724px !important;
    }
}
@media(max-width: 767px) {
    .individual-item + section {
        width: calc(100% - 40px) !important;
    }
}
.individual-item + section[class$=-streak] span {
    background-color: inherit !important;
}
section[class^=lattice-] {
    padding: 10px;
}
section[class^=lattice-] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
section[class^=lattice-] li {
    margin: 1vh 10px !important;
}
section[class^=lattice-] li > a {
    filter: brightness(0.8) !important;
}
section[class^=lattice-][data-sorted] .percentage-0-20 {
    color: #f47750 !important;
}
section[class^=lattice-][data-sorted] .percentage-21-40 {
    color: #c9ce3b !important;
}
section[class^=lattice-][data-sorted] .percentage-41-60 {
    color: #3daee9 !important;
}
section[class^=lattice-][data-sorted] .percentage-61-80 {
    color: #1d99f3 !important;
}
section[class^=lattice-][data-sorted] .percentage-81-100 {
    color: #1cdc9a !important;
}
section[class^=lattice-][data-sorted] .apprentice-lattice {
    color: #1d99f3 !important;
}
section[class^=lattice-][data-sorted] .guru-lattice {
    color: #1cdc9a !important;
}
section[class^=lattice-][data-sorted] .master-lattice {
    color: #c9ce3b !important;
}
section[class^=lattice-][data-sorted] .enlighten-lattice {
    color: #f67400 !important;
}
section[class^=lattice-][data-sorted] .burned-lattice {
    color: #DA4453 !important;
}
.level-icon {
    color: #bcbcbc !important;
}
.next a, .previous a {
    color: #bcbcbc !important;
}
.alt-character-list a {
    color: #bcbcbc !important;
}
.recently-unlocked-item {
    color: #232629 !important;
}
section[id|=level] {
    padding: 10px;
}
section[id|=level] header {
    margin-bottom: 5px;
}
#explanation .bg-angled {
    background-color: #31363b !important;
}
.explanation-item-mnemonics, .explanation-item-radicals, .explanation-item-kanji, .explanation-item-vocabulary, .explanation-item-lessons-reviews, .explanation-item-srs {
    color: #bcbcbc !important;
}
[id*="summary"][id^="radical"] h2 {
    color: #3DAEE9 !important;
}
[id*="summary"][id^="radical"] div {
    display: block !important;
}
[id*="summary"][id^="kanji"] h2 {
    color: #FDBC4B !important;
}
[id*="summary"][id^="kanji"] div {
    display: block !important;
}
[id*="summary"][id^="vocabulary"] h2 {
    color: #2ECC71 !important;
}
[id*="summary"][id^="vocabulary"] div {
    display: block !important;
}
[id*="summary"][id^="correct"] h2 {
    color: #2ecc71 !important;
}
[id*="summary"][id^="incorrect"] h2 {
    color: #ed1515 !important;
}
[id*="summary"] h2 {
    background-color: #1c1e21 !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
}
[id*="summary"] h2 strong {
    color: inherit !important;
}
[id*="summary"] h3 {
    border-bottom-color: #4d4d4d !important;
}
[id*="summary"] h3 strong, [id*="summary"] h3 span {
    background-color: #232629 !important;
    color: #4d4d4d !important;
}
[id*="summary"] li {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
#start-session a {
    background-color: #2ecc71 !important;
    color: #434343 !important;
}
#start-session .disabled {
    background-color: #232629 !important;
    color: #bcbcbc !important;
}
#review-stats[id^="review-stats"]::after {
    display: none !important;
}
.hover li {
    color: #bcbcbc !important;
}
#main-info.radical #character {
    color: #3DAEE9 !important;
}
#main-info.kanji #character {
    color: #FDBC4B !important;
}
#main-info.vocabulary #character {
    color: #2ECC71 !important;
}
#lessons header {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 11 !important;
    background-image: none !important;
}
#supplement-nav {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 9 !important;
    background-image: none !important;
    background-color: #31363b !important;
}
#supplement-nav li::before {
    border-bottom-color: #232629 !important;
    bottom: -50px !important;
    color: #232629 !important;
}
#next-btn:hover, #prev-btn:hover {
    background-color: #232629 !important;
    border-radius: 5px !important;
    filter: brightness(0.8) !important;
}
#supplement-info {
    margin-top: 30px !important;
}
#supplement-info h2 {
    border-bottom-color: #31363b !important;
}
#batch-items {
    position: relative !important;
    width: auto !important;
}
#screen-lesson-ready {
    z-index: 110 !important;
}
#screen-quiz-ready {
    z-index: 110 !important;
}
#reviews #character {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 10 !important;
    background-image: none !important;
}
[id^="loading"] {
    background-color: #31363b !important;
}
#stats, #summary-button, #header-buttons {
    color: #bcbcbc !important;
    z-index: 100 !important;
}
#question-type {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 9 !important;
    background-image: none !important;
    align-items: center !important;
    display: flex !important;
    height: 82px !important;
    justify-content: center !important;
}
#question-type > .srs {
    left: 70% !important;
    top: initial !important;
    width: initial !important;
}
.srs-up::before {
    color: #2ecc71 !important;
}
.srs-down::before {
    color: #ed1515 !important;
}
#answer-form {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 8 !important;
    background-image: none !important;
}
#answer-form fieldset {
    padding: 0 !important;
}
#answer-form fieldset.correct input[type=text]:disabled {
    background-color: #2ecc71 !important;
}
#answer-form fieldset.incorrect input[type=text]:disabled {
    background-color: #ed1515 !important;
}
#answer-form input {
    border-radius: 0 !important;
}
#answer-form button {
    height: 2.3em !important;
}
#additional-content {
    background-color: #31363b !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 6 !important;
    background-image: none !important;
    height: 50px !important;
    margin: 0 !important;
}
#additional-content ul {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    margin: 0 !important;
}
#additional-content ul .wrap-up-selected span, #additional-content ul .wrap-up-selected span:hover::before, #additional-content ul .wrap-up-selected span::before {
    background-color: #31363b !important;
}
#additional-content ul .wrap-up-selected strong, #additional-content ul .wrap-up-selected i {
    text-shadow: 0 0 10px #f47750 !important;
}
#additional-content li::before {
    border-bottom-color: #232629 !important;
    bottom: -25px !important;
    color: #232629 !important;
}
#additional-content li > span {
    z-index: 7 !important;
}
#additional-content li > span:hover::before {
    background-color: #31363b !important;
    color: #bcbcbc !important;
}
#answer-exception span {
    background-color: #4d4d4d !important;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#answer-exception span::before {
    display: none !important;
}
#last-items li ul {
    background-color: #31363b !important;
}
#last-items li ul[title*=meaning], #last-items li ul[title*=reading] {
    color: #bcbcbc !important;
}
#information {
    z-index: 8 !important;
}
#item-info h2 {
    border-bottom-color: #31363b !important;
}
#kana-chart ol {
    border-bottom-color: #31363b !important;
}
#kana-chart .active {
    border-bottom: none !important;
    border-left: 1px solid #31363b !important;
    border-right: 1px solid #31363b !important;
}
#kana-chart li {
    border-right-color: #31363b !important;
}
#kana-chart li:hover {
    background-color: #232629 !important;
    filter: brightness(0.8) !important;
}
#additional-content-load {
    background-color: #232629 !important;
}
.avatar {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
.avatar img {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
.user-info {
    background-color: #232629 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 10 !important;
    background-image: none !important;
}
.user-info::after {
    border-bottom-color: #232629 !important;
}
.wall-of-shame h3 > span {
    background-color: #232629 !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
#wkof_ds .ui-dialog-titlebar {
    border-bottom: 1px solid #232629 !important;
    border-radius: 0;
}
#wkof_ds .ui-dialog-buttonpane {
    border-top: 1px solid #232629 !important;
}
#wkof_ds .ui-icon {
    background-image: url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/images/ui-icons_888888_256x240.png") !important;
    box-shadow: none !important;
}
#wkof_ds .ui-tabs-nav {
    border-bottom: 1px solid #232629 !important;
}
#wkof_ds .ui-tabs-anchor {
    color: #bcbcbc !important;
}
#divSt {
    color: #31363b !important;
    margin-top: 2vh;
}
[id^=reorder] {
    background-color: #232629 !important;
    border-color: #232629 !important;
    border-radius: 5px;
    border-style: solid;
    margin-top: 1vh;
    width: 200px;
}
#wki_button {
    border-color: #232629 !important;
    border-right: 1px solid !important;
}
[id|=qtip] {
    background-color: #232629 !important;
}
[id|=qtip] .qtip-titlebar, [id|=qtip] .qtip-title {
    background-color: #1d99f3 !important;
}
#wki_settings_cancel, #wki_settings_save {
    background-color: #232629 !important;
}
#wki_settings_button_label_bgcolor, #wki_settings_button_label_textcolor, #wki_settings_timer_show_next_item {
    background-color: #232629 !important;
}
[id|=qtip] .qtip-tip, [id|=qtip] canvas {
    color: #232629 !important;
}
#lessons .ui, #reviews .ui {
    margin: 10px !important;
    padding: 10px !important;
}
#lessons .ui #quick-next, #reviews .ui #quick-next {
    color: #4d4d4d !important;
}
#lessons .ui #quick-next.active, #reviews .ui #quick-next.active {
    color: #bcbcbc !important;
}
#lessons .ui #quick-next.active::before, #reviews .ui #quick-next.active::before {
    text-shadow: 0 0 10px rgba(61, 174, 233, 0.5) !important;
}
#lessons .ui ul item, #reviews .ui ul item {
    background-color: #31363b !important;
}
#timeline {
    padding: 0.5rem !important;
}
#timeline .graph_panel {
    overflow: hidden !important;
}
#timeline .graph .bkgd {
    fill: transparent;
}
#timeline .graph .label-x > text, #timeline .graph .label-y > text, #timeline .graph .markers > path {
    fill: #bcbcbc;
}
#timeline .graph .markers > .bur {
    fill: #31363b !important;
}
#timeline .graph .rad {
    fill: #3DAEE9 !important;
}
#timeline .graph .kan {
    fill: #FDBC4B !important;
}
#timeline .graph .voc {
    fill: #2ECC71 !important;
}
#timeline .review_info .detail_buttons > button {
    margin-bottom: 0.3em;
}
#timeline .review_info .summary .item_type:first-child, #timeline .review_info .summary .srs_stage:nth-child(4), #timeline .review_info .summary .level:nth-child(8) {
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
}
#timeline .review_info .summary .item_type:nth-child(3), #timeline .review_info .summary .srs_stage:nth-child(7), #timeline .review_info .summary .level:nth-child(13) {
    border-bottom-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}
#timeline .review_info .bur {
    background: #31363b !important;
}
#timeline .review_info .item_type > span {
    color: #232629 !important;
}
#timeline .review_info .rad svg {
    stroke: #232629;
}
.progression .lattice-single-character li > a[data-srs-lvl="5"], .progression .lattice-single-character li > a[data-srs-lvl="6"], .progression .lattice-single-character li > a[data-srs-lvl="7"], .progression .lattice-single-character li > a[data-srs-lvl="8"], .progression .lattice-single-character li > a[data-srs-lvl="9"], .progression .lattice-single-character li > a[data-srs-lvl="10"] {
    filter: brightness(0.5) !important;
}
.progression .lattice-single-character ul > .pct90 {
    background-color: #31363b !important;
}
[aria-describedby=divSRSGridSettings] .ui-dialog-content input, [aria-describedby=divSRSGridSettings] .ui-dialog-content select, [aria-describedby=ui-id-2] .ui-dialog-content input, [aria-describedby=ui-id-2] .ui-dialog-content select {
    min-width: 250px !important;
}
#WKO_button {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
#answer-form fieldset.WKO_ignored input[type="text"]:disabled, #answer-form fieldset.WKO_ignored button {
    background-color: #f67400 !important;
}
#item_marker_body h3 {
    color: #434343 !important;
}
#item_marker_body #item_marker_settings {
    padding: 5px !important;
}
#marked_items {
    padding: 10px !important;
}
#marked_items #marked_items_buttons > button {
    margin-right: 10px !important;
}
#marked_items #marked_items_list {
    display: flex !important;
    flex-wrap: wrap !important;
}
#marked_items #marked_items_list > a {
    margin: 5px 5px 0 0 !important;
}
#marked_items #marked_items_list > a:hover {
    text-decoration: none !important;
}
.wklc {
    justify-content: space-around !important;
    margin: 1em 1.3em !important;
}
.wklc .wklc-items {
    margin: 0 !important;
}
.wklc .wklc-item {
    color: #bcbcbc !important;
    min-width: 2em !important;
    padding: 0 0.2em;
}
.wklc[class*=apprentice] {
    color: #1d99f3 !important;
}
.wklc[class*=guru] {
    color: #1cdc9a !important;
}
.wklc[class*=master] {
    color: #c9ce3b !important;
}
.wklc[class*=enlightened] {
    color: #f67400 !important;
}
.wklc .wklc-apprentice1, .wklc .wklc-guru1 {
    filter: saturate(1) !important;
}
.wklc .wklc-apprentice2, .wklc .wklc-guru2 {
    filter: saturate(0.5) !important;
}
.wklc .wklc-apprentice3, .wklc .wklc-guru3 {
    filter: saturate(0.33333) !important;
}
.wklc .wklc-apprentice4, .wklc .wklc-guru4 {
    filter: saturate(0.25) !important;
}
#stroke_order > img {
    filter: invert(80%) !important;
    opacity: 0.5 !important;
}
#ss_quiz {
    padding: 0.5rem !important;
}
#ss_quiz .quiz-progress {
    align-items: center !important;
    background-color: #1e2123 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
    height: 1rem !important;
}
#ss_quiz .quiz-progress .quiz-progress-bar {
    background-color: #1d99f3 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
    height: 50% !important;
    margin: 5px !important;
    position: relative;
    top: 25%;
}
#ss_quiz .help {
    color: #3daee9 !important;
}
#ss_quiz .qtype {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 2px 2px 2px rgba(0, 0, 0, 0.7) inset !important;
}
#ss_quiz .reading {
    background-color: #4D4D4D !important;
}
#ss_quiz .meaning {
    background-color: #31363B !important;
}
#ss_quiz .answer {
    margin-top: 0.5rem !important;
    padding: 0 !important;
}
#ss_quiz .answer .correct {
    background-color: #2ecc71 !important;
    color: #434343 !important;
}
#ss_quiz .answer .incorrect {
    background-color: #ed1515 !important;
    color: #434343 !important;
}
.vocabulary-progress li > a, .vocabulary-progress li > div {
    font-size: 1.1em !important;
}
.vocabulary-progress li > li {
    background-color: #1478ac !important;
    border-color: transparent !important;
}
.vocabulary-progress ul li:nth-child(2) a, .vocabulary-progress ul li:nth-child(2) div {
    background-color: #17191b !important;
    color: #bcbcbc !important;
}
#keisei_section table {
    box-sizing: border-box !important;
    width: 100% !important;
}
#keisei_section table li {
    box-sizing: inherit !important;
}
#keisei_section .single-character-grid {
    border: 0 !important;
}
#keisei_section .keisei_chargrid_header, #keisei_section .keisei_chargrid_compounds {
    width: auto !important;
}
#keisei_section .keisei_chargrid_header .character-item, #keisei_section .keisei_chargrid_compounds .character-item {
    width: 116px !important;
}
@media(max-width: 767px) {
    #keisei_section .keisei_chargrid_header .character-item, #keisei_section .keisei_chargrid_compounds .character-item {
        width: auto !important;
    }
}
#keisei_section #keisei_phonetic_grid td > li {
    margin-bottom: 10px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
}
#keisei_section #keisei_phonetic_grid td > li:last-child {
    margin-bottom: 5px !important;
}
#keisei_section .character-item {
    border-radius: 5px !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
#keisei_section[id^=phonetic] {
    background-color: #11d116 !important;
    color: #232629 !important;
}
#keisei_section[id^=nonphonetic] {
    background-color: #da4453 !important;
    color: #232629 !important;
}
#keisei_section .keisei_style_reading_notInWK {
    color: dimgray !important;
}
#keisei_modal_settings .modal-header, #keisei_modal_info .modal-header {
    border-bottom: 1px solid #31363b !important;
}
#keisei_modal_settings .modal-footer, #keisei_modal_info .modal-footer {
    background-color: inherit !important;
    border-top: 1px solid #31363b !important;
}
.global-header {
    background-color: #222629;
    background-image: none;
    border-bottom: 1px solid #323639;
}
.global-header span{
    color: #FFF !important;
}
#reviews-summary #review-stats [id*="review-stats-"]{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
#reviews-summary #incorrect, #reviews-summary #correct{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
#lessons-summary #radicals, #lessons-summary #kanji, #lessons-summary #vocabulary{
    background-color:#222;
    box-shadow: 3px 3px 0 #333;
}
.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    position: absolute;
}
.sitemap__page a{
    color:#EEE !important;
}
.sitemap__section-header:hover, .sitemap__section-header[data-expanded="true"]{
    background:#000;
}
.sitemap__section-header--radicals:hover, .sitemap__section-header--radicals[data-expanded="true"]{
    background: #adc1cb;
}
.sitemap__section-header--kanji:hover, .sitemap__section-header--kanji[data-expanded="true"]{
    background: #cbadc1;
}
.sitemap__section-header--vocabulary:hover, .sitemap__section-header--vocabulary[data-expanded="true"]{
    background: #c1adcb;
}
2 Likes
16

The extension appears in the store, so I guess it’s been unbanned? I may switch anyways at some point. Thanks for pointing that out.

1 Like
17

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.