[Userstyle] WaniKani Breeze Dark

Do you mean this color with, or without the brightness filter applied?
Left is with filter (50% brightness), like it is currently in the style.
Right is without.

Screenshot_20171107_232821

I could just make it a configuration option, like the other color options I’m already offering.
This would also be re-applied when you update.

I’d say with the filter. As without it’s too bright. I also mainly meant these guys (since I don’t have any burned items, yet :stuck_out_tongue: ):


But it should be red everywhere, of course.
An option would probably be the best soultion.

Well, I also don’t have any burned items (anymore, because I reset recently).
I just set the CSS class on the element :smile:.

I kinda like the idea of the burned items being red, i’ll maybe make that one the default.

1 Like

@Powerpuncher

Finally got around to add the burned color option.

It might not be applied correctly at all places now, but should work at least on the dashboard, lattice pages and level progress.

1 Like

Can you add support for the stroke order userscript? It injects a stroke order diagram from jisho.org into the kanji and lesson pages, which unfortunately has a white background. I was able to get it to better blend in with:

#stroke_order {
    filter: invert(85%);
}

Not sure if this is the best way though.

2 Likes

You mean this one?
https://community.wanikani.com/t/userscript-stroke-order-diagram/5040

Edit:
Added support for this script.

1 Like

having some weird line things going on?
btw, I love the theme, very nice on the ol’ eyes :slight_smile:

This is apparently a Chrome issue.

Awesome, works great, thanks!

Major update, kinda.

This style now supports the Usercss format as described here.
So it no longer depends on userstyles.org directly.

This might break current configurations, because I had to change the keys from SCREAMING_SNAKE_CASE to weird-snake-case.

I will still support both methods of installing.

– Val

1 Like

Just came back to WaniKani after over a half year off and this is the first thing I made sure to get working. :slight_smile: Aaah, so easy on the eyes…

1 Like

The style seems to add a huge space below the details window for ultimate timeline:

box

Also it’d be really nice if you could support the Level Progress Detail script :3

1 Like

I look into the first issue.

For the second one:
I’m not using the script and it doesn’t seem maintained anymore.
So I’ll probably not add support for that.

2 Likes

I second Powerpuncher’s request.
That would be nice to have different colors for the intermediate SRS levels, please :innocent:

I remember tinkering with this way back… I don’t use the script anymore, but maybe I can help anyway.

This is what mine looks like. Below I only explain how to fix the bars, adding the percentages and putting the whole thing in a dropdown is something else.
image

Let’s see… I added this to the top of the script (just under “use strict”) to fix how the bars are shaped.

$('head').append('<style id="progress-detail-fix">.bar[style*="width: 0%"]{display: none;}'+
     '.dashboard .lattice-single-character div {padding: 0 !important}'+
     '.chart .progress, .chart .progress .bar {border-radius: 0 !important;}</style>');

To fix the colors you can replace line 44 (line number before you added the above three lines) with

'<div class="bar" title="Guru+ ('+progress.gurued_total+'/'+progress.max+')"  style="background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1cdc9a, #1cdc9a) !important; width: '+(progress.gurued_total*100.0/progress.max)+'%;">'+

and line 54 with

'<div class="bar bar-supplemental"  title="'+stageNames[i]+' ('+progress.srs_level_totals[i]+'/'+progress.max+')" style="opacity: '+opacity+' !important; background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1d99f3, #1d99f3) !important; width: '+(percentage)+'%;">'+
1 Like

Line 44 and 54 get shifted down by 3 lines from the first step, so it’s actually line 47 and 57.
Otherwise works beautifully, thanks :3

295787090669469698 271396628672413696

1 Like

Huh, I’ve read it like you should add the three lines first xD

1 Like

Looking at your Timeline issue it doesn’t seem to be caused by this theme. That space is where the 18 vocab items should be shows. Are you running the WKOF version of Timeline? Because I don’t get a blank space

image

The timeline issue was my fault.

I targeted #timeline .review_info which has a bottom padding of 150px for some reason.
Moving the style overrides to #timeline .review_info .inner should have fixed it, I hope.

2 Likes