[usercss] Hide the English of context sentences in lessons, hover to reveal

WaniKani
1

I noticed the new layout changed HTML elements and my old stuff didn’t work anymore. Re-did it.

UPDATE: Hadn’t noticed the thin white text-shadow when it’s in the selector thingy. Patched

Just slap that in your favorite User CSS browser extension:

.lesson-container .context-sentences p:last-child{
  display: inline;
  background-color: #333;
}

.lesson-container .context-sentences p:last-child:hover{
  background-color: transparent;
}

.subject-collocations .context-sentences p:last-child{
	text-shadow: none;
}

.subject-collocations .context-sentences p:last-child:hover{
	 text-shadow: 0 1px 0 #fff;
}

image
image768×313 29.2 KB

(Not installing third party screenshot software or editing in photoshop just to show my mouse cursor, but trust me I’m hovering ;P)

2

Just a small thing I’m noticing in the screenshot, the English text is still (barely) visible. You could probably fix that by overriding the text colour.

3

Huh, you’re right, the text color is actually #333333, not full #000000.

I’m always doing those in a bright lit room I never noticed :stuck_out_tongue:

So yeah replace
background-color: black;
with
background-color: #333;

4

There is also this Userscript if you ever need Javascript (and Userscript injector isn’t broken). – [Userscript]: Hide Context Sentence Translation

Just decided to use a CSS solution. Mine is this:-

:root {
    --hide-translation-color: lightgray;
}

.subject-collocations__collocations {
    flex-grow: 1;
}

.context-sentences p:not([lang="ja"]):not(:hover),
.subject-section__text.subject-section__text--grouped p:not([lang="ja"]):not(:hover) {
    text-shadow: none;
    color: var(--hide-translation-color);
    background-color: var(--hide-translation-color);
}