[Userstyle] WaniKani Breeze Dark

WaniKani API And Third-Party Apps
282

Thanks a lot. I like very much the styling for the filters. It looks great! :+1: :partying_face:

Unfortunately there are changes to the filter settings in the upcoming version of Item Inspector that causes the filters not being styled anymore.

There will be support for a much larger number of filters. I decided to place then in groups of similarly themed filters to make it easier to users to find the one they need. I suspect (I donā€™t really know) that the introduction of groups changes the html enough to break your selectors.

The filters themselves are not changed. They will just be grouped. Hopefully this will be an easy fix.

I will try the CSS variables to see how hey workout. At first sight it looks good.

1 Like
283

Iā€™m glad that you like the look.
The styles are bound to break for actively developed scripts. Weā€™ll think about it when that time comes :slight_smile:

1 Like
284

Just here to put my thanks for making this, I find it hard to look at light mode so this is heaven for my eyes. Thanks a ton!!

1 Like
285

1.3.13 release

Changed

  • dashboard item tables now use item color coding as their background to make it more prominent
  • colorcoded background of radical/kanji/vocab navbar menus - just like WK does now

Fixed

  • scoping of Item Inspectorā€™s filter settingsā€™ styles to make them work with previous and latest version
  • text color of the total number of reviews in ultimate timeline

Iā€™m running out of obvious problems with the style, a least for the user scripts I checked out - the releases might slow down a little from now on because of that (unless something new shows up :).

My next focus will be on:

  • implementing full support for Item Inspector
  • going through supported user scripts and checking if everything still looks right
3 Likes
286

Thanks for fixing the filters. :+1: I am still in the hospital. I canā€™t check it out but I am sure it looks good.

The inline styling of Item Inspector is still there. I have on my todo list an overhaul of the css related to font and background colors. I want to introduce css variables and make sure Item Inspector looks good in both Breeze Dark and the other dark style, I think it is called Dark Azure. Perhaps you should delay your Item Inspector initiative until I am done with my overhaul.

How about css.variables for gradient? I use them in Item Inspector because plain bacground colors look bland.

How about Self Study Quiz? Last time I checked it had the same filter issue as Item Inspector and the background color for the quiz was black. It should be the item color.

1 Like
287

Really nice skin! Has a minor glitch with the ā€œLevel Durationā€ script though, is there a way to fix it?
image

PS: 10days on lv4 because of 1 kanji =((
image

1 Like
288

Good luck on your recovery :slight_smile:

I can see that the latest version already has less of the inline styles, but youā€™re right - I should probably hold off with Item Inspector support.

Thereā€™s not a single place in the style right now that uses gradients, so I feel it would go against the style. You can look into modifying a color in a variable into a darker/lighter one with CSS to achieve a gradient by yourself - that would be one less color to define explicitly.

I consider Item Inspector and Self Study Quiz a package deal, so I would like to have both styled. The filters should already be working, the background thing would need to be handled. Maybe next release :slight_smile:

1 Like
289

The style doesnā€™t support this user script yet. Let me have a quick look at what can be done.

Donā€™t worry I even make mistakes with radicals in the latest levels :stuck_out_tongue:

290

i just lvled up! :smiling_face_with_three_hearts:

1 Like
291

If you can add a custom style manually, this will somewhat fix it for now:

@-moz-document domain("www.wanikani.com") {
    header #level-duration {
        line-height: 10px;
        margin-bottom: -10px;
    }
}

If I wanted to support the script in Breeze Dark I would have to do something smarter here, I might look into it next week.

Congrats!

1 Like
292

thx! just fixed it

293

If you need me to change anything in the script just hit me up

294

I was going to comment on a fix for radical images being white, but it seems like people have already discussed that, so Iā€™ll hold off on that until I have something more to contribute. However, I did notice an issue with this style and the Dashboard Progress Plus Script.

743Ɨ218 16.2 KB

Seeing as this is a dark theme, I decided to add a few lines of code to make it look a bit nicer.
743Ɨ215 15.8 KB

Iā€™m no CSS expert, but after a bit of tinkering I got this:

.progress-entry.pct90 {
  background: #31363b;
  border-color: unset;
}

I donā€™t know if this style is supposed to support this script, but if anyone wants to copy my code, there you have it.

295

The light background color is for the so-called ā€œringā€ that identifies which items you need to guru to level up. Your ā€œfixā€ simply destroys this feature because we donā€™t see the ring anymore. Well, if I squint and look hard enough I see the ring has a slightly different shade of dark but the point of the ring is to give a visual clue. It should be visible. Can you find another fix that keeps the ring visually apparent?

296

@artemigos A new version of Item Inspector is out. I did not do the css overhaul yet. This is what I plan to do next. I donā€™t plan to change the filters though. Their current styling is broken. I you would be kind enough to look at this I will be happy.

I love the styling filters had in 1.10.3. There is a great visual difference between filters that have their checkbox checked and those that donā€™t. This is excellent from the user interface point of view. :+1:

297

I prefer the subtle gray outline, and I just thought the white was way too distracting when everything else is gray and black, but okay. Howā€™s this?

This is with only the background color change, not the ā€œborder-color: unset;ā€. Hereā€™s a lighter gray (#585858), which makes it more obvious and looks pretty good imo.

2 Likes
298

The second option is much better. The ring is visible yet in the spirit of a dark theme and subtle enough not to be distracting. I like it. :+1:

1 Like
299

Just to let you guys know - Iā€™m super busy IRL right now, so Iā€™m finding it hard to dedicate an evening to the style, but things should slowly calm down near the Christmas break. I canā€™t promise an exact day, but I will be looking at all of the things mentioned above :slight_smile:

2 Likes
300

Take your time. We understand the real life issues are more important than WK scripting.

301

@artemigos I told you I didnā€™t have plan to make changes to the filters settings. I changed my mind. Some changes will happen in the next version.