[Userstyle] WaniKani Breeze Dark

Just on the off-chance anyone is interested, here’s a super short and simple stylus script which builds on Breeze Dark to make a couple of changes to the review details, such as making better use of the horizontal space by having the explanation to the right of the meanings/readings, highlighting the primary meaning a bit, and making the notes boxes look better!

Code
/* ==UserStyle==
@name         WaniKani Better Review Layout
@version      0.2
@namespace    hubbit200.info
@license      GPL-3.0
@description  Slightly better review layout for the WaniKani kanji learning website.
@author       Hubbit200

==/UserStyle== */
@charset "UTF-8";

@media (min-width: 1400px) {

    .quiz .subject-section--meaning .subject-section__content:not([hidden]), .quiz .subject-section--reading .subject-section__content:not([hidden]) {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        grid-template-rows: auto;
    }

    .subject-section--meaning .subject-section__content .subject-section__subsection:nth-child(1), .subject-section--reading .subject-section__content .subject-section__subsection:nth-child(1) {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
        border-right: rgb(60,60,60) 1px solid;
        margin-right: 30px;
        margin-bottom: 20px;
    }
    .subject-section--meaning .subject-section__content .subject-section__subsection:nth-child(2), .subject-section--reading .subject-section__content .subject-section__subsection:nth-child(2) {
        grid-column: 2 / 2;
        grid-row: 1 / 1;
    }
    .subject-section--meaning .subject-section__content .subject-section__subsection:nth-child(3), .subject-section--reading .subject-section__content .subject-section__subsection:nth-child(3) {
        grid-column: 1 / span 2;
        grid-row: 2 / 2;
        background-color:#31363b;
        padding: 8px;
        padding-left: 15px;
        border-radius:5px;
        width: 100%;
        box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.7) !important;
        margin-bottom: 0;
    }
    
    .subject-section--meaning .subject-section__content .subject-section__subsection:nth-child(3) h3, .subject-section--reading .subject-section__content .subject-section__subsection:nth-child(3) h3 {
        font-variant-caps: all-small-caps;
        font-weight: bold;
    }
    
    .subject-readings-with-audio__item {
        margin-bottom: 0;
    }

}

.subject-section--meaning .subject-section__content .subject-section__subsection:first-child .subject-section__meanings:first-child .subject-section__meanings-title {
    margin: auto 0;
    margin-right: 10px;
}

.subject-section--meaning .subject-section__content .subject-section__subsection:first-child .subject-section__meanings:first-child .subject-section__meanings-items {
    color: white !important;
    background-color: rgb(70,70,70);
    padding: 3px;
    border-radius: 3px;
}

.user-synonyms__form_container .user-synonyms__button {
    box-shadow: none !important;
}

and this to the bottom of breeze dark if you want the wanikani notes to match the user notes box:

#subject-info aside {
    box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.7) !important;
}
5 Likes

For some reason, when I’m using Double-Check Gart-Temp-Fix, the correct/incorrect colors doesn’t show up when inputing an answer, and the textbox stays gray. I have to guess whether my guess was good or not before undoing.

It works if I’m disabling the script, but I can’t do my reviews without the double check.

2 Likes

Oh also, the radical combination radicals seem to be a bit messed up? When they’re not burned they need the text colour changed if possible! And maybe some more padding on the right?

From this:
image
To maybe something like this:
image
(padding-right: 8px; border-radius: 4px; on the <a> tag and color: black !important; on the span with “Village” in it)

The buttons under a review are out of place for me. This is true with all scripts disabled and disabling Breeze Dark puts them back in the right spot. There are also no like, borders around them to indicate they are buttons, is that intentional?

Edit: After going through the lesson and having to pop open the information panel, I can say that the buttons aren’t out of place they are just huge. The panel shows up underneath these buttons as normal.

2 Likes

Happening to me as well since around an hour ago - maybe WaniKani changed something? It’s certainly pretty strange…

1 Like

Quick fix for now if you like:

Go to edit the style
image

And add this right at the bottom!

#additional-content {
    flex: 0 0 auto !important;
    margin-bottom: auto !important;
}
12 Likes

Thanks! fixed it for me as well.

1 Like

Thank you so much for sharing this! I just came back to do my reviews after a ~5 month break from WK and found chaos. I seriously can’t understand the decisions behind the new UI but thanks for at least making it a bit easier to find the info that matters!

3 Likes

Thanks a lot! I’m in a situation very similar to @Cassini’s and having my good old dark theme back will definitely help me get that extra motivation boost I need to tackle my 2k+ reviews (orz)

1 Like

Just created a PR on the gitlab, awaiting on merge for this to be fixed in the next update

1 Like

Oh thanks, I’d forgotten there was a gitlab!

Breeze Dark doesn’t work for me all of a sudden :thinking:

this is what it says but I've no idea what it means

What part doesn’t work? It doesn’t load at all?
Seems to be working fine to me - you’re sure you didn’t change something in the Stylus extension? That one error shouldn’t make any difference so it’s likely a problem with Stylus, or maybe you don’t have the latest version of Breeze Dark? Make sure it’s updated

1 Like

Thank you! I think it might’ve just been a glitch or something? I just clicked some buttons and now it’s working again :stuck_out_tongue:

1 Like

Seems like it doesn’t get updated very often…

Yeah hopefully @artemigos will have time to take a look at some point! They have managed to get some impresively quick updates out with some of the more breaking changes in the past though :smile:
If they don’t get a chance to soon, and especially if there’s formatting issues with the upcoming kana-only vocab, then someone else could fork it and update it (if no one has within a couple of months I’ll do so when I have time)

I’ll also write some quick CSS for the new custom synonyms in the next day or two, it’s currently pretty ugly with breeze dark :slight_smile:

1 Like

This has stopped working for the extra-study component on the front page
Had to add in this bit manually to get it working (I’m no css expert)

I’m guessing this isn’t necesarilly the right way to correct this, but it’s worked for me so far.

4 Likes

Half the front page is white again, an update to the style would be appreciated.

Wish I had the knowledge to code these things myself. >.<

Made a quick and ugly hack, based on @Motifier 's data:

  .level-progress-dashboard .dashboard-panel {
    background-color: #1e2123;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;}
  .level-progress-dashboard .level-progress-dashboard__content {
    background-color: #1e2123 !important;
        border-radius: 5px !important;
        color: #bcbcbc !important; }
4 Likes

I’m currently rewriting Breeze Dark from scratch to hopefully be a bit easier to maintain and making use of more of the built-in CSS variables (which I imagine didn’t exist when Breeze Dark was first written). I have only just started so it’ll take a bit, but hopefully when complete it’ll look as good as the current one and work with the latest WaniKani updates!

7 Likes