I found that I kept accidentally reading the English translations of vocab example sentences while trying to figure out what they meant, so I wrote a simple bit of CSS to blur them out.
Here’s an example of what it looks like (it works on the lesson page too, but I don’t have any vocab lessons right now to show it off):
Hello, I found this useful and nice-looking, so I rewrited the css so it can match the new version of the website (see code below). I don’t know how to provide a proper Link to UserCSS though… Sorry !
If you want to use my code, you’ll need to install Stylus or xStyle with the links provided by @Unlocked,
and then install his code by clicking on his “Link to UserCSS” link,
and then inside the Stylus extension, get inside the “Wanikani Hide Sentence Translation” Style, and replace the code by my modified version.
@-moz-document domain(“wanikani.com”) {
/* nicgd : I changed the class name /
.subject-section–context p:not([lang=“ja”]) {
display: inline-block;
filter: blur(4px);
transition: filter 1s;
}
.subject-section–context p:not([lang=“ja”]):hover {
/ need this to be non-zero because of weird rendering issues. */
filter: blur(0.1px);
}
}
Hi, I tried to install your version but it unfortunately does not seem to work. I think the forum removed some of the symbols in the code, such as *. Could you try posting your code as a code block? (enclose the code with ``` in the message editor on both ends) Thanks!
Oh yes sorry, you’re right! It seems that double dashes were changed to long dashes (among other issues…). Is this working better? :
/* ==UserStyle==
@name Wanikani Hide Sentence Translation
@namespace gist.github.com/TheUnlocked/c2e3aa361c35e2c468fd98c26300c251
@version 1.0.0
@description Blurs the English translations of example sentences on vocab pages and lessons for Wanikani. Hover to unblur.
@author Unlocked // 2024 update by @nicgd
==/UserStyle== */
@-moz-document domain("wanikani.com") {
/* changed the class name in both paragraphs (@nicgd) */
.subject-section--context p:not([lang="ja"]) {
display: inline-block;
filter: blur(4px);
transition: filter 1s;
}
.subject-section--context p:not([lang="ja"]):hover {
/* need this to be non-zero because of weird rendering issues. */
filter: blur(0.1px);
}
}
Thanks for the help! I went ahead and also added the context-sentences class since that’s needed for it to work in lessons, and while I was at it I decided to reorganize it to take advantage of the new CSS Nesting feature. The link in the original post has been updated to always use the latest version of the gist, so you should be able to click it to install the updated UserCSS.
