Стиль перевода

Откройте в настройках Перевод страниц → Стиль отображения перевода. Превью показывает результат по мере изменений.

Готовые стили

Стиль	Как выглядит
Нет	Обычный текст, как оригинал
Цвет текста	Перевод акцентным цветом (по умолчанию)
Фон	Мягкая подсветка за переводом
Ослабленный	Перевод светлее оригинала
Эффект размытия	Размыт, пока не наведёте курсор, — чтобы проверить себя
Цитата	Полоса слева, как у цитаты
Пунктирная линия	Подчёркнут пунктиром
Граница	Тонкая рамка вокруг перевода

Свой CSS

Включите Использовать пользовательский CSS-стиль и напишите CSS в редакторе. У перевода есть атрибут data-read-frog-custom-translation-style="custom", поэтому начинайте правила с этого селектора:

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

Редактор проверяет CSS по мере ввода и сохраняет его кнопкой Сохранить. Подходит любой CSS, включая шрифты, переходы и анимации.

Идеи

Скрыть перевод, пока не наведёте курсор:

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

Другой шрифт для одного языка с помощью атрибута lang, который есть у перевода:

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() выбирает первый цвет на светлых страницах и второй на тёмных, так что одно правило подходит для обоих случаев.