best style I’ve installed so far, thank you so much !! ^^
I changed the style to have the 90% with grey color instead of white
At line 1211 I added :
.progress-entry.pct90 {
background-color: #31363b !important;
}
And for popup I added :
You can choose an other color but I liked that one 
.progress-entries .popover {
color: rgb(253, 188, 75) !important;
}
Result :
3 Likes
I’m getting a conflict with the reorder ultimate script… Only when Breeze Dark is turned on. Since today.
1 Like
I deleted row 1890. It fixed the problem, for as far I can see.
Have no knowledge of coding, searched for “reorder”.
1 Like
A quick note for whomever is maintaining Breeze Dark:
While patching Reorder Ultimate due to a recent Wanikani change, I noticed some illegal duplicate ID tags in the script (duplicate IDs are not allowed, though browsers are very forgiving). I fixed the duplicate IDs by changing them to Classes instead, and added #reorder_ultimate to the top-level element of the Reorder interface for use by CSS rules.
So, to fix any issues with Breeze Dark, please change [id^=reorder] to .reorder. Also, if there are any references to #types, #levels, #sort-types, or #sort-levels, those should be changed to classes as well.
3 Likes
Or you can also just change the colours and not click anything afterwards. It will get saved anyway.
1 Like
Hello! guys how can I change the settings of Breeze Dark? I’d like to choose the colors. I can’t find them anywhere. thank you!
I don’t think there are any settings
Hi guys,
in the script
- how do you make the logo white?
- how do you change the color of the button for the review or lesson? Mine is always dark.
- I tried to change the color of the dropdown menu but it stays black.
Any suggestions or things I can edit in the script? thank you!!
- To just make it white you can do this
2 & 3 you would need to make those edits yourself. Maybe a good opportunity to learn some CSS?
For 3, I already made this code. The colours will be the ones you define for each element (some of the few colours you can change in the settings in Stylus).
@_Mashira Removing width: 200px is enough, thanks for finding this line
@valeth I looked for radicals with images and applying filter worked:
.radical-icon img {
filter: brightness(0.3);
}
it might need some tweaking to match better but for me is enough
Seems like there is still an issue with white radical images.
I’ve been out of wanikani for over a year because I got lazy. Getting back into it recently and found my way back to this theme that I used. I came up with a hacky solution for the images back then that yall can mess with. Since it’s old css some of it is probably obsolete, not sure what. Still works though.
/* HUE ROTATION */
/* home page progression */
.lattice-single-character ul li a img {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%);
}
/* lattice name */
.percentage-0-20 .radical-image { /* not perfect, but close */
filter: brightness(0%) saturate(100%) invert(56%) sepia(35%) saturate(2025%) hue-rotate(329deg) brightness(103%) contrast(91%);
}
.percentage-21-40 .radical-image{ /* close enough */
filter: brightness(0%) saturate(100%) invert(81%) sepia(100%) saturate(364%) hue-rotate(2deg) brightness(86%) contrast(85%);
}
.percentage-41-60 .radical-image{ /* close enough */
filter: brightness(0%) saturate(100%) invert(58%) sepia(97%) saturate(813%) hue-rotate(160deg) brightness(93%) contrast(96%);
}
.percentage-61-80 .radical-image{ /* close enough */
filter: brightness(0%) saturate(100%) invert(47%) sepia(77%) saturate(1570%) hue-rotate(181deg) brightness(95%) contrast(101%);
}
.percentage-81-100 .radical-image{ /* perfect */
filter: brightness(0%) saturate(100%) invert(68%) sepia(56%) saturate(625%) hue-rotate(104deg) brightness(95%) contrast(88%);
}
/* lattice progress*/
.apprentice-lattice .radical-image{
filter: brightness(0%) saturate(100%) invert(47%) sepia(77%) saturate(1570%) hue-rotate(181deg) brightness(95%) contrast(101%);
}
.guru-lattice .radical-image{
filter: brightness(0%) saturate(100%) invert(68%) sepia(56%) saturate(625%) hue-rotate(104deg) brightness(95%) contrast(88%);
}
.master-lattice .radical-image{
filter: brightness(0%) saturate(100%) invert(81%) sepia(100%) saturate(364%) hue-rotate(2deg) brightness(86%) contrast(85%);
}
.enlighten-lattice .radical-image{ /* very close */
filter: brightness(0%) saturate(100%) invert(68%) sepia(48%) saturate(7488%) hue-rotate(4deg) brightness(99%) contrast(104%);
}
.burned-lattice .radical-image{ /* close enough */
filter: brightness(0%) saturate(100%) invert(55%) sepia(87%) saturate(4685%) hue-rotate(327deg) brightness(75%) contrast(94%);
}
/* lessons */
#character img {
filter: brightness(0%) saturate(100%) invert(51%) sepia(91%) saturate(364%) hue-rotate(156deg) brightness(101%) contrast(91%) !important;
}
#lesson #batch-items ul li span img {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%);
}
#lessons-summary #radicals > div > ul > li.radicals img {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%);
}
#lessons #supplement-info #supplement-kan #supplement-kan-breakdown > div > div > ul > li > a > span > img{
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%) !important;
}
/* review last 10 [not sure this covers them all] */
#last-items #last-items-list > .pure-u-1 > ul > li > a > div > ul > li > img {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%);
}
#reviews-summary #correct > div.apprentice.active > ul > li.radicals img,
#reviews-summary #correct > div.guru.active > ul > li.radicals img,
#reviews-summary #correct > div.master.active > ul > li.radicals img,
#reviews-summary #correct > div.enlightend.active > ul > li.radicals img,
#reviews-summary #correct > div.burned.active > ul > li.radicals img
{
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(169deg) brightness(98%) contrast(90%);
}
/* levels */
ul.single-character-grid li.character-item .radical-image {
background-color: transparent !important;
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(163deg) brightness(93%) contrast(90%) !important;
}
ul.single-character-grid li.character-item:hover .radical-image, ul.multi-character-grid li.character-item:hover .radical-image {
filter: drop-shadow(0 2px 0 rgba(0,0,0,0)) !important;
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(163deg) brightness(93%) contrast(90%)!important;
}
span.radical-icon img.radical-image {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(163deg) brightness(93%) contrast(90%)!important;
}
/* new - for reviews page */
.radicals a img {
filter: brightness(0%) saturate(100%) invert(10%) sepia(32%) saturate(190%) hue-rotate(163deg) brightness(93%) contrast(90%) !important;
}
The last one, with the ‘new -’ comment, I recently added as a radical on the review page was still white.
1 Like
I like the style, but I don’t want it to affect the userscript settings (e.g. for WK Heatmap 2 or 3) since it messes up the background color without fixing the text too.
@Kumirei What do you do for that since I know you’re testing Heatmap on this?
1 Like
For V2 I think I added CSS to make WKOF settings look right, but for V3 I am not doing that (yet, at least). I think it’s a real shame that Breeze Dark has such general CSS rules, it breaks a lot of other styling.
Oh? It doesn’t work for me - the Heatmap v2 settings have their background affected too.
1 Like
Maybe I never published that, then. I was working on that at one point, though
1 Like
What we need is for Breeze Dark to have better scoped CSS rules
1 Like
It seems like you can fix this by replacing [id^=reorder] with .reorder in the Breeze Dark code:
2 Likes