User Style to help mask the English translation

I don’t know if this will help anyone else but I was using the website to watch youtube videos and I found that that placement of the translations caused it to be a bit distracting. It was too easy for my eyes to just peripherally glance at the English and get too much of a hint to understanding the subtitle. This is anti-learning so I decided to do something about it.

I wrote a quick User Style that you can apply to the website. It moves the translation down a little bit, sets the color to be very hard to see, but you can still view it in the original color by hovering your mouse over it.

On the left is normal, and right is hovering your mouse over the translation:

  1. Download and install a user style addon like Stylish. I use Edge for my browser.
  2. These instructions are for Stylish: Open the Stylish icon.
  3. Editor Tab
  4. Give it a name
  5. Url Prefix:
  6. Paste this CSS in:

.main-translation-wrap {
padding-top:40px !important;

.main-translation-wrap span{
color: rgb(34, 34, 47) !important;

.main-translation-wrap:hover span{
color: rgb(255,255,255,0.667) !important;

  1. Save. It’ll prompt you to make an account, just go ahead and make one.
  2. Open up any video in Language Reactor.

You can feel free to play around with this if it doesn’t work out of the gate. It’s just to get folks started.