[Userstyle] WaniKani Breeze Dark

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:


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.


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.

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


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.


Yup, it’s fixed now, thanks :3

are you both using Chrome or Firefox?
With the latest Firefox, the linear-gradient does not seem to generate the color you expect.

how is this piece of CSS expected to generate 4 different colours for each “bar-supplemental” div ?

below CSS inspector shows that all div have the colour #dd0093


ps: the trick is using opacity to substract frontcolor to backcolor? it seems unsupported on FF.

I’m using firefox and what @Kumirei posted works perfectly for me.
I don’t know much css, so I can’t really help you.

I’m on Chrome.

I believe background-color is only a fallback for browsers which do not support the gradient. I don’t know why the background color is different from the gradient on apprentice bars. You are correct in that Hitechbunny used opacity to give different colors though. Opacity is supported in FF as of v.59.

You do not seem to have made the edits I suggested, which is they are all the same color.

I was assuming you are using the Breeze Dark theme, but I could well be wrong.
Can you please point me to the style/CSS you are using?

In the case of Breeze Dark, I can get better colours by commenting out the code-snippet that is describing the CSS for .progress section (around line 500).

Breeze Dark page:

here are 2 lines to comment out:

resulting display:

1 Like

The purple doesn’t match Breeze Dark’s SRS colours though