Çeviri stili

Ayarlarda Sayfa Çevirisi → Çeviri görüntüleme stili’ni aç. Önizleme sen değiştirdikçe sonucu gösterir.

Hazır stiller

Stil	Nasıl görünür
Yok	Orijinal gibi düz metin
Metin rengi	Çeviri vurgu renginde (varsayılan)
Arka plan	Çevirinin arkasında yumuşak bir vurgu
Zayıflatılmış	Çeviri orijinalden daha açık
Bulanıklık efekti	Üzerine gelene kadar bulanık, kendini sınamak için
Alıntı	Alıntı gibi solda bir çubuk
Kesikli çizgi	Kesikli bir çizgiyle altı çizili
Kenarlık	Çevirinin çevresinde ince bir kutu

Kendi CSS’in

Özel CSS stili kullan’ı aç ve düzenleyiciye CSS yaz. Çevirilerde data-read-frog-custom-translation-style="custom" özniteliği bulunur; kurallarına bu seçiciyle başla:

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

Düzenleyici sen yazarken CSS’i denetler ve Kaydet ile kaydeder. Yazı tipleri, geçişler ve animasyonlar dahil her CSS çalışır.

Fikirler

Üzerine gelene kadar çeviriyi gizle:

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

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

Çevirinin taşıdığı lang özniteliğiyle tek bir dil için farklı yazı tipi:

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

light-dark() açık sayfalarda ilk rengi, koyu sayfalarda ikincisini seçer; böylece tek kural ikisine de uyar.