Estilo de traducción

Abre Traducción de páginas → Estilo de visualización de traducción en los ajustes. La vista previa muestra el resultado mientras lo cambias.

Estilos predefinidos

Estilo	Cómo se ve
Ninguno	Texto normal, como el original
Color del texto	La traducción en el color de acento (predeterminado)
Fondo	Un resaltado suave detrás de la traducción
Atenuado	La traducción más clara que el original
Efecto de desenfoque	Desenfocada hasta que pasas el cursor, para ponerte a prueba
Cita en bloque	Una barra a la izquierda, como una cita
Línea discontinua	Subrayada con una línea discontinua
Borde	Un recuadro fino alrededor de la traducción

Tu propio CSS

Activa Usar estilo CSS personalizado y escribe CSS en el editor. Las traducciones llevan el atributo data-read-frog-custom-translation-style="custom", así que empieza tus reglas con ese selector:

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

El editor revisa el CSS mientras escribes y lo guarda con Guardar. Sirve cualquier CSS, incluidas fuentes, transiciones y animaciones.

Ideas

Ocultar la traducción hasta pasar el cursor:

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

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

Otra fuente para un idioma concreto, usando el atributo lang que lleva la traducción:

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

light-dark() elige el primer color en páginas claras y el segundo en oscuras, así que una sola regla sirve para ambas.