[Userstyle] WaniKani Breeze Dark

I noticed that hyperlinks in text (like in the FAQ, for example) are non-distinguishable from regular text (white) until you hover over them with the mouse. Seems like it would be helpful if these were colored something else (blue maybe?) to make them easily seen. Thanks!

I think I found the error, the last update fixed this, I hope.

If you need a custom version just give me the colors you used and I generate a version for you.

1 Like

I think the only pages in the WaniKani app that have ā€œactualā€ links are the api, faq and about pages.

I think I will just add them to an extra section, instead of overriding everything else.

1 Like

Added an exception rule for those 3 mentioned pages.

Sounds good, thanks! I didnā€™t think it was a huge deal but I wanted to at least let you know.

Occasionally there will be a link to a YouTube video or such in the mnemonics.

This is so beautiful, i absolutely love it! Thanks for the your hard work :smile:

Changed link styling to be more generic and added a few exceptions where it shouldnā€™t be.
Also removed the [id*=ā€œradā€] selector, because it was causing problems with some icons.

Btw:
I removed the ā€œ(Beta)ā€ from the userstyles.org title.

I donā€™t think it actually breaks any current installations, because they probably use the ID for updates and such.
If it does for some reason, try reinstalling the theme.

2 Likes

This looks awesome. Thanks!

Edit: Alright, I got it now.

Settings

Went to Googleā€™s cached version of the script page, copied the

settings element
<ul id="style-settings">
						<li>
							<label for="setting-457418">Radicals Color</label>
							<input id="setting-457418" name="ik-RADICALS_COLOR" type="text" class="style-setting-option color {hash:true,required:true}" value="#3DAEE9" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(61, 174, 233); color: rgb(0, 0, 0);">
						</li>
						<li>
							<label for="setting-457419">Kanji Color</label>
							<input id="setting-457419" name="ik-KANJI_COLOR" type="text" class="style-setting-option color {hash:true,required:true}" value="#FDBC4B" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(253, 188, 75); color: rgb(0, 0, 0);">
						</li>
						<li>
							<label for="setting-457420">Vocabulary Color</label>
							<input id="setting-457420" name="ik-VOCAB_COLOR" type="text" class="style-setting-option color {hash:true,required:true}" value="#2ECC71" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(46, 204, 113); color: rgb(0, 0, 0);">
						</li>
						<li>
							<label for="setting-457421">Review Reading Background</label>
							<input id="setting-457421" name="ik-REVIEW_READING_BG" type="text" class="style-setting-option color {hash:true,required:true}" value="#4D4D4D" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(77, 77, 77); color: rgb(255, 255, 255);">
						</li>
						<li>
							<label for="setting-457422">Review Meaning Background</label>
							<input id="setting-457422" name="ik-REVIEW_MEANING_BG" type="text" class="style-setting-option color {hash:true,required:true}" value="#31363B" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(49, 54, 59); color: rgb(255, 255, 255);">
						</li>
						<li>
							<label for="setting-457528">Review Character Background</label>
							<select id="setting-457528" name="ik-REVIEW_CHAR_BG" class="style-setting-option">
									<option value="ik-REVIEW_CHAR_BG_DARK" selected="">Dark</option>
									<option value="ik-REVIEW_CHAR_BG_COLOR">Colored</option>
							</select>
						</li>
			</ul>

and pasted it into the HTML of the live settings page. I can finally get my settings back :tada:

@valeth Hey, when the settings are back up would you consider adding text colour as an option? Or if not then maybe telling me how I can override it? (I know no CSS) Iā€™m trying to make the vocabulary progress script less cluttersome and would like the text to be some other colour than blue. I donā€™t really look at the footer, but tbh Iā€™d prefer that to be white/grey as well.
However I understand if itā€™s too much to ask

This is what I am looking at

Iā€™ll see what I can do when the options are back properly.

Hereā€™s a hackish userscript to inject the code snippet you posted automatically.

https://gist.github.com/valeth/4eafd38cf75649533ff508802911f10e/raw/b6f3a01c97dee5ce9bf83603711c33c646170c32/wkbd_hack.user.js

1 Like

Another little issue with the critical items section. (Itā€™s a good thing Iā€™m terrible and get to see it come up.)

Any way to make it where the ā€œTurtles are healthy.ā€ icon centers, but items go to the top like the other two panels?

I could do this probably, but for that I would need to know the width and height of the ā€œ.none-availableā€ element.

Had this during my last review session with the latest version.

Off topic but what version is your reorder script? Mine doesnā€™t look exactly like that

Took the Embe modded version of the script and did my own images.


I have no idea if the modded version of the script is current (it works fine though) and Iā€™m not entirely certain the buttons are perfect. (The original button image had different shades of grey for the text and I just made all of the text white.) Iā€™m not happy with the text on the buttons not matching the text rendered by the browser, but I have no idea how to modify the script to not use images for the buttons so itā€™s the best I could come up with on my own to make the script match this userstyle.

If you edit the script just search for ā€œimgurā€ and there are two URLs to the buttons to replace with the URLs to my images.

2 Likes

Hmm, it seems the mod is running on version 2.0., while the original is now 2.1ā€¦ Not sure what the difference is between 2.0. and 2.1. but I think Iā€™ll go for the updated version, I can live without nice buttons. Thanks though!

Took a look at the difference between the latest version of the script and a version older than the mod is based on and there wasnā€™t a huge difference. Just some code cleanup I think.

Should be fixed.

Was just a simple issue because they are using .radicals and .radical (mind the s) seemingly interchangeably across the site.