[Userstyle] Elementary Dark

WaniKani API And Third-Party Apps
21

Just a note that we are working to support the upcoming changes.

It may not be ready on day 1 of the new changes going live, though.

One sneak preview:

Wanikani has indicated that they intend to make improvements in this area shortly after the new changes go live, but one annoyance is that the meaning and reading in the info section on review pages is very low contrast. I decided to go ahead and implement a fix in the dev version of WKED rather than wait, though.

It’s likely that when you click the info icon in the middle (or type “f”) during a review, the first thing you want to see is the meaning or reading that you just answered incorrectly.

Here’s how it looked before with Elementary Dark colors and no additional styling:

Screenshot 2023-03-25 at 12.49.55 PM
Screenshot 2023-03-25 at 12.49.55 PM2440×2034 272 KB

The primary meaning of “bonsai” is literally the lowest contrast text on the screen. Your eye has to wander for a while to find it.

Here’s how it looks in the dev version:

Screenshot 2023-03-25 at 12.51.42 PM
Screenshot 2023-03-25 at 12.51.42 PM2224×1950 226 KB

And with my preferred override colors:

Screenshot 2023-03-25 at 1.35.25 PM
Screenshot 2023-03-25 at 1.35.25 PM3046×1888 259 KB

2 Likes
22

Saying I wasn’t on top of things this time around would be an understatement, but whatever magic @Rrwrex pulled should be now live. If your WKED installation is still struggling with the new pages, try going into your stylus settings and force it to search for updates. Reinstallation should also do the trick. Cheers!

2 Likes
23

Thanks for accepting the PR and pushing the changes!

It’s very likely I’ve missed some things, so don’t hesitate to report any problems.

Note that these changes should all be additions: it’s very likely that much of the code no longer does anything (there are still a bunch of rules for the summary pages that no longer exist, for example).

The updates were also a bit of a hack, but we wanted to get something out quickly.

I’ve been using this code for several days without any major issues.

The Wanikani folks bumped the size of the primary meaning in the info section slightly after user complaints about the update, but I actually strongly prefer the new WKED styling in this version (shown here). I don’t think WK went far enough. Much larger, bolder, and highlighted color improves the UX considerably.

2 Likes
24

Hello all,

I just installed this lovely style and I really enjoy the updated colors. It has a sleek, polished look that vanilla WK lacks haha.

However, I am struggling to change the reading/meaning headers; I cant seem to find the option. I tried publishing my own Style according to the instructions, but CSS is completely out of my wheelhouse so it’s possible I’m missing a very obvious thing :sweat_smile:

My attempt:

attempt at CSS

Is there a glaring error in my code somewhere or is the error on my implementation side?

Thanks for your patience tolerating this noob. :bowing_man:

25

Screenshot_11
Screenshot_11755×72 5.65 KB

Screenshot_12
Screenshot_121917×213 7.31 KB

Screenshot_15
Screenshot_18
Screenshot_20
Screenshot_201387×589 19.5 KB

These are the ones i’ve been able to find (i don’t know if the problem is with my side though)

1 Like
26

Thanks!

I was aware of the weird layout with radicals (haven’t looked at it yet). That one’s easy to reproduce.

The hint box looks like an oversight. Give us a day or two to find and fix it.

(Both appear to be a problem with the stylesheet, and nothing to do with your configuration.)

27

I think also the self-study quiz integration doesn’t work

Screenshot_22
Screenshot_221465×685 62.1 KB

just realized this too*
Screenshot_23

28

You need to install separate stylesheets to add WKED styling for scripts that don’t have their own custom styling support.

The one for self-study quiz is here:

Ah. I see. It only happens when that box is active. Did you tab onto it intentionally?

We will address this in the next release.

Thanks for finding these!

Tracking the three issues you’ve uncovered so far at:

29

The shadowing on the text on lesson session is weird too. Refer to 3rd image on my first reply

30

I don’t have any lessons anymore, so I have to re-login to a test account to reproduce. Doing so logs me out of the forums, too, so it’s kinda hard to go back and forth.

I think you’re talking about the word “Belt” in this reply.

We will need more context to be able to fix this. I’m unsure where it is on the page at the moment. Can you provide a screenshot with more context?

TIA!

31

image
image1608×641 18.2 KB

new find*
image
image1308×704 38.4 KB

burned one’s should’ve been gray right?

1 Like
32

Yes, this one I was aware of. Note that the meaning and reading is grayed. The kanji/radicals/vocab themselves don’t inherit colors and typography correctly in the WK CSS, mandating explicit overrides (to my immense annoyance).

This will be trickier than it should be to fix.

Its easier for us to track issues individually. Ideally, please report issues on github. If you don’t have an account and don’t want to make one, please report each issue you find in an individual reply here rather than bundling multiple into one.

Thanks!

33

I’m unable to reproduce the third issue. The meaning hint box is styled correctly on my system during reviews.

Was this for a lesson or a review? Was it for the 帯(おび) kanji or vocabulary item?

TIA

34

It was the lesson for 帯 kanji

1 Like
35

Okay, I’ve got 4 pull-requests in to @Everesh for review. Let’s give him a few days to review and hopefully accept the changes.

  • PR #126

    • Fixes issue #125: The mini review nav button was style incorrectly when focused/active

  • PR #128

    • Fixes issue #123: The radicals in the Radical Combination accordion weren’t styled correctly

  • PR #129

    • fixes issue #122: Scripts like Stroke Order add accordions to the info panel that had weird text-shadows

  • PR #130

    • Fixes issue #124: The hint box under meaning wasn’t styled correctly on lesson pages
    • Fixes issue #127: Weird text shadow for the meaning on lesson pages
    • Fixes unreported issue: Ugly box shadow around quiz button

I think that leaves just one issue currently without a fix:

  • Issue #131: Kanji Composition not greyed for burned items

I’ll probably tackle that before the end of the day (no promises).

36

@Rrwrex Apologies for the ping, but is my issue listed above something you could help me understand? If not, no worries. Just wondering if there is something simple I’m missing in my implementation of the style script.

37

Yikes. Apologies are on my end. I somehow never saw your reply.

Let me take a peak.

1 Like
38

Okay, I found the relevant reply.

It looks like you’ve edited the All-variables.css file correctly.

To verify, you can delete all the commented out lines. You should end up with a file containing just these six lines:

@moz-document domain("wanikani.com") {
  :root {
    --USER-meaning: #939393;
    --USER-reading: #282828; 
  }
}

1. Save that file someplace on your local filesystem.

2. Next, click on the stylus icon on your toolbar, then click the “Manage” button.

3. Click the “Write new style button” (leave the “as Usercss” checkbox unchecked – it’s not really necessary).

4. Cut and paste the six lines above into the window on the right.

5. In the upper left, give your style a name. Something like “tiredkiwi overrides”.

6. Click “save”.

~~If that doesn’t work, let me know and I can help you debug. ~~

(Forgot to add step 0: ensure the WKElementaryDark stylesheet is already loaded and running in stylus).

Hold up. It’s not working for me, either. Let me figure out what’s going on.

1 Like
39

Silly me.

You probably made the same mistake as me. The @moz-document domain stuff only works if you save the file as userCSS.

Here’s how to make your overrides work:

Create a file containing just these FOUR lines:

:root {
  --USER-meaning: #939393;
  --USER-reading: #282828; 
}

  1. Save that file someplace on your local filesystem.

  2. Next, click on the stylus icon on your toolbar, then click the “Manage” button.

  3. Click the “Write new style button” (leave the “as Usercss” checkbox unchecked!)

  4. Cut and paste the four lines above into the window on the right.

  5. In the upper left, give your style a name. Something like “tiredkiwi overrides”.

  6. At the bottom, select “URLs on the domain” in the pulldown, then type “wanikani.com” to the right.

  7. Click “save”.

That should work. Let me know if you have any further problems.

1 Like
40

It worked! 助かります！Pretty sure my problem was that I coped/pasted the whole script including the comments.

I love this new theme so much; it’s much less obtrusive for discreet use in the office :sweat_smile:

So if I wanted to change other elements, I could just edit my current style with only those changes?

1 Like