Subtitle style

Open Video Subtitles → Subtitle style in the settings. The preview updates as you change things.

Basic settings

• Display mode: bilingual, original only or translation only.
• Translation position: above or below the original.
• Main subtitle and Translation subtitle: font, font scale, colour and font weight for each line.
• Background opacity: how dark the box behind the subtitles is.

Reset to default puts everything back.

Preset templates

Under Custom CSS → Preset template:

Template	What it does
Blur translation	Blurs the translation until you hover over it, so you listen first
Dashed translation	Underlines the translation with a dashed line
Dim original	Makes the original line fainter, so the translation stands out

Your own CSS

The CSS you write applies on top of the settings above. These are the selectors you can use:

Selector	What it is
.read-frog-subtitles-box	The box holding both lines
.subtitles-main	The original line
.subtitles-translation	The translated line

Blur the translation and reveal it on hover:

.subtitles-translation {
  filter: blur(6px);
}

.subtitles-translation:hover {
  filter: none;
}

A yellow translation with a shadow instead of a box:

.read-frog-subtitles-box {
  background: transparent;
}

.subtitles-translation {
  color: #ffd84d;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
}

The editor checks your CSS as you type; click Save to apply it.