Оформляйте свои переводы по-своему с помощью Custom CSS

Оформляйте свои переводы по-своему 🎨

Вам когда-нибудь хотелось, чтобы ваши переводы соответствовали вашей атмосфере чтения? Может быть, вам нужны мягкие пастельные тона для чтения перед сном или яркие моменты для учебных занятий?

Теперь вы все контролируете. Функция Custom CSS в Read Frog позволяет вам точно настроить внешний вид ваших переводов на любом веб-сайте.

Почему индивидуальные стили имеют значение 💡

Стили перевода по умолчанию работают нормально... пока не перестанут работать. Разный контент требует разной визуальной обработки:

Встречайте своего нового редактора CSS ⚡

Мы не просто добавили текстовое поле и положили конец. Редактор CSS Read Frog является законно мощным:

Создан для всех

Для начинающих:

• 🎨 Палитра цвета. Нажмите любое значение цвета, чтобы открыть визуальную палитру.
• ✅ Живая проверка — Мгновенная обратная связь о синтаксических ошибках.
• 💡 Умные подсказки – автозаполнение при вводе текста.
• 📝 Шаблоны примеров – начните с рабочих примеров.

Для опытных пользователей:

• ⚡ Полная поддержка CSS — используйте градиенты, тени, анимацию, переменные.
• 🔧 Подсветка синтаксиса — редактор на базе CodeMirror.
• 📏 Номера строк и свертывание – легко перемещаться по большим таблицам стилей.
• 🎯 Желосточный желоб – сразу увидите ошибки.

Магия выбора цвета 🌈

Вот где все становится веселее. Написание цветов CSS раньше означало:

❌ Погуглите «палитру цветов» ❌ Копирование шестнадцатеричных кодов ❌ Переключение между вкладками ❌Надеюсь, что все выглядит правильно

Сейчас? Просто выберите любой цвет на вашем CSS:

1. Введите или вставьте любой цветовой формат: #FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%).
2. Нажмите — палитра цветов появится мгновенно.
3. Визуальная настройка – перетаскивайте, перемещайте или вводите новые значения.
4. Готово – обновление цветов в режиме реального времени.

Средство выбора понимает все цветовые форматы CSS:

• Шестнадцатеричный: #FF5733
• RGB/RGBA: rgba(255, 87, 51, 0.8)
• HSL/HSLA: hsla(9, 100%, 60%, 0.8)
• Именованные цвета: tomato, skyblue, gold.
• CSS переменные: var(--my-color)

Живая проверка сохраняет ваше здравомыслие ✨

Вы когда-нибудь сохраняли CSS и обнаруживали, что он все сломал? Больше нет.

Что проходит проверку:

Визуальная обратная связь в режиме реального времени:

• 🟢 Зеленый цвет «Действительно» — ваш CSS идеален, готов к сохранению.
• ⚪ Серый цвет «Проверка...» — проверка изменений (устранение дребезга 500 мс).
• 🔴 Красный «Синтаксическая ошибка» — что-то не так, с полезными сообщениями об ошибках.

Как создать свой первый собственный стиль 🎯

Занимает менее 2 минут:

1. Открыть настройки Read Frog → Перевод → Стиль отображения перевода
2. Включите параметр «Использовать собственный стиль».
3. Вы увидите редактор CSS с полезным шаблоном:

/* Example: Custom style with color and background */
[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

4. Настройте его! Нажмите на значения цвета, чтобы открыть окно выбора, отрегулируйте отступы и добавьте границы.
5. Нажмите «Сохранить», когда подтверждение станет зеленым.
6. Зайдите на любой веб-сайт и переведите — ваш стиль мгновенно вступит в силу!

[data-read-frog-custom-translation-style='custom'] {
  background-color: rgba(255, 247, 153, 0.3);
  border-left: 3px solid #FFD700;
  padding-left: 8px;
}

Идеи стиля, которые стоит попробовать 💫

Посмотрите эти стили в действии! В каждом примере показано, как CSS влияет на реальный переведенный текст.

импортировать из '@/components/css-style-preview'

1. Мягкие пастельные блики

Наилучший вариант: длительное чтение, художественная литература, блоги.

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

2. Смелый режим обучения

Наилучший вариант: учебники, научные работы, запоминание.

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

3. Анимация, реагирующая на наведение

Наилучший вариант: интерактивный дизайн, благодаря которому переводы кажутся живыми.

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

4. Классная градиентная анимация

Подходит для: хвастаться перед друзьями.

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

Продвинутые трюки 🚀

Используйте переменные CSS

Определите цвета один раз, используйте повторно везде:

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Адаптивность к режиму Light/Dark

Используйте функцию light-dark() (современные браузеры):

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

Технические подробности 🔧

Для тех, кто хочет знать, что под капотом:

Советы для достижения наилучших результатов 💡

Распространенные ошибки, которых следует избегать:

❌ Не делайте: color: #FF (неполный шестнадцатеричный код) ✅ Делать: color: #FF5733 (полный шестизначный шестнадцатеричный код)

❌ Нельзя: padding: 10 (отсутствует единица измерения) ✅ Делать: padding: 10px (включить модуль)

❌ Не: пишите 200 строк CSS. ✅ Что делать: сосредоточьтесь на основных свойствах (цвет, фон, отступы, границы).

Что дальше? 🔮

Мы уже планируем интересные дополнения:

• 🎨 Библиотека стилей. Просматривайте и импортируйте стили, созданные сообществом.
• 📤 Экспорт/Import — поделитесь своими любимыми стилями с друзьями.
• 🎯 Стили для каждого сайта — разные стили для разных веб-сайтов.
• 📊 Панель предварительного просмотра стиля — просмотрите изменения перед сохранением.