[Userstyle] WaniKani Breeze Dark

WaniKani API And Third-Party Apps
402

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!

image
image1419×764 31.7 KB

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;
}
403

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.

404

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)

405

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.

image
image2346×1284 86.9 KB

406

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

407

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;
}
408

Thanks! fixed it for me as well.

409

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!

410

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)

411

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

412

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

413

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

Screenshot (337)
Screenshot (337)1600×753 83.9 KB

414

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

415

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:

416

Seems like it doesn’t get updated very often…

417

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)

418

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:

419

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)

image
image721×131 3.3 KB

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

420

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; }
421

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!

image
image1444×1084 168 KB