feat: custom css for the reader UI (#1466)

apps/readest-app/public/locales/ar/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "تأكيد الحذف",
   "Copied to notebook": "تم النسخ إلى المفكرة",
   "Copy": "نسخ",
-  "Custom CSS": "CSS مخصص",
   "Dark Mode": "الوضع الداكن",
   "Default": "الافتراضي",
   "Default Font": "الخط الافتراضي",
@@ -28,7 +27,6 @@
   "Dictionary": "القاموس",
   "Download Readest": "تحميل ريديست",
   "Edit": "تحرير",
-  "Enter your custom CSS here...": "أدخل الـ CSS المخصص هنا...",
   "Excerpts": "مقتطفات",
   "Failed to import book(s): {{filenames}}": "فشل استيراد الكتاب/الكتب: {{filenames}}",
   "Fast": "سريع",
@@ -376,5 +374,9 @@
   "Left Margin (px)": "الهامش الأيسر (بكسل)",
   "Column Gap (%)": "تباعد الأعمدة (%)",
   "Always Show Status Bar": "دائمًا إظهار شريط الحالة",
-  "Translation Not Available": "الترجمة غير متاحة"
+  "Translation Not Available": "الترجمة غير متاحة",
+  "Custom Content CSS": "CSS مخصص للمحتوى",
+  "Enter CSS for book content styling...": "أدخل CSS لتنسيق محتوى الكتاب...",
+  "Custom Reader UI CSS": "CSS مخصص لواجهة القارئ",
+  "Enter CSS for reader interface styling...": "أدخل CSS لتنسيق واجهة القارئ..."
 }

apps/readest-app/public/locales/de/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Löschen bestätigen",
   "Copied to notebook": "In Notizbuch kopiert",
   "Copy": "Kopieren",
-  "Custom CSS": "Benutzerdefiniertes CSS",
   "Dark Mode": "Dunkelmodus",
   "Default": "Standard",
   "Default Font": "Standardschriftart",
@@ -28,7 +27,6 @@
   "Dictionary": "Wörterbuch",
   "Download Readest": "Readest herunterladen",
   "Edit": "Bearbeiten",
-  "Enter your custom CSS here...": "Geben Sie hier Ihr benutzerdefiniertes CSS ein...",
   "Excerpts": "Auszüge",
   "Failed to import book(s): {{filenames}}": "Fehler beim Importieren von Buch/Büchern: {{filenames}}",
   "Fast": "Schnell",
@@ -364,5 +362,9 @@
   "Left Margin (px)": "Linker Rand (px)",
   "Column Gap (%)": "Spaltenabstand (%)",
   "Always Show Status Bar": "Statusleiste immer anzeigen",
-  "Translation Not Available": "Übersetzung nicht verfügbar"
+  "Translation Not Available": "Übersetzung nicht verfügbar",
+  "Custom Content CSS": "Benutzerdefiniertes Inhalts-CSS",
+  "Enter CSS for book content styling...": "CSS für die Buchinhaltsgestaltung eingeben...",
+  "Custom Reader UI CSS": "Benutzerdefiniertes CSS für die Leseroberfläche",
+  "Enter CSS for reader interface styling...": "CSS für die Leseroberfläche eingeben..."
 }

apps/readest-app/public/locales/el/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Επιβεβαίωση διαγραφής",
   "Copied to notebook": "Αντιγράφηκε στο σημειωματάριο",
   "Copy": "Αντιγραφή",
-  "Custom CSS": "Προσαρμοσμένο CSS",
   "Dark Mode": "Σκοτεινή λειτουργία",
   "Default": "Προεπιλογή",
   "Default Font": "Προεπιλεγμένη γραμματοσειρά",
@@ -28,7 +27,6 @@
   "Dictionary": "Λεξικό",
   "Download Readest": "Λήψη Readest",
   "Edit": "Επεξεργασία",
-  "Enter your custom CSS here...": "Εισάγετε το προσαρμοσμένο CSS εδώ...",
   "Excerpts": "Αποσπάσματα",
   "Failed to import book(s): {{filenames}}": "Αποτυχία εισαγωγής βιβλίου(ων): {{filenames}}",
   "Fast": "Γρήγορα",
@@ -364,5 +362,9 @@
   "Left Margin (px)": "Αριστερό περιθώριο (px)",
   "Column Gap (%)": "Απόσταση στηλών (%)",
   "Always Show Status Bar": "Πάντα εμφάνιση γραμμής κατάστασης",
-  "Translation Not Available": "Η μετάφραση δεν είναι διαθέσιμη"
+  "Translation Not Available": "Η μετάφραση δεν είναι διαθέσιμη",
+  "Custom Content CSS": "Προσαρμοσμένο CSS περιεχομένου",
+  "Enter CSS for book content styling...": "Εισαγάγετε CSS για στυλ περιεχομένου βιβλίου...",
+  "Custom Reader UI CSS": "Προσαρμοσμένο CSS διεπαφής αναγνώστη",
+  "Enter CSS for reader interface styling...": "Εισαγάγετε CSS για στυλ διεπαφής αναγνώστη..."
 }

apps/readest-app/public/locales/es/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Confirmar eliminación",
   "Copied to notebook": "Copiado al cuaderno",
   "Copy": "Copiar",
-  "Custom CSS": "CSS personalizado",
   "Dark Mode": "Modo oscuro",
   "Default": "Predeterminado",
   "Default Font": "Fuente predeterminada",
@@ -28,7 +27,6 @@
   "Dictionary": "Diccionario",
   "Download Readest": "Descargar Readest",
   "Edit": "Editar",
-  "Enter your custom CSS here...": "Introduce tu CSS personalizado aquí...",
   "Excerpts": "Extractos",
   "Failed to import book(s): {{filenames}}": "Error al importar libro(s): {{filenames}}",
   "Fast": "Rápido",
@@ -367,5 +365,9 @@
   "Left Margin (px)": "Margen izquierdo (px)",
   "Column Gap (%)": "Espacio entre columnas (%)",
   "Always Show Status Bar": "Mostrar siempre la barra de estado",
-  "Translation Not Available": "Traducción no disponible"
+  "Translation Not Available": "Traducción no disponible",
+  "Custom Content CSS": "CSS del contenido",
+  "Enter CSS for book content styling...": "Introduce CSS para el contenido del libro...",
+  "Custom Reader UI CSS": "CSS de la interfaz",
+  "Enter CSS for reader interface styling...": "Introduce CSS para la interfaz de lectura..."
 }

apps/readest-app/public/locales/fr/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Confirmer la suppression",
   "Copied to notebook": "Copié dans le carnet de notes",
   "Copy": "Copier",
-  "Custom CSS": "CSS personnalisé",
   "Dark Mode": "Mode sombre",
   "Default": "Par défaut",
   "Default Font": "Police par défaut",
@@ -28,7 +27,6 @@
   "Dictionary": "Dictionnaire",
   "Download Readest": "Télécharger Readest",
   "Edit": "Modifier",
-  "Enter your custom CSS here...": "Saisissez votre CSS personnalisé ici...",
   "Excerpts": "Extraits",
   "Failed to import book(s): {{filenames}}": "Échec de l'importation du/des livre(s) : {{filenames}}",
   "Fast": "Rapide",
@@ -367,5 +365,9 @@
   "Left Margin (px)": "Marge gauche (px)",
   "Column Gap (%)": "Espacement des colonnes (%)",
   "Always Show Status Bar": "Afficher toujours la barre d'état",
-  "Translation Not Available": "Traduction non disponible"
+  "Translation Not Available": "Traduction non disponible",
+  "Custom Content CSS": "CSS du contenu",
+  "Enter CSS for book content styling...": "Saisissez le CSS pour le contenu du livre...",
+  "Custom Reader UI CSS": "CSS de l’interface",
+  "Enter CSS for reader interface styling...": "Saisissez le CSS pour l’interface de lecture..."
 }

apps/readest-app/public/locales/hi/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "हटाने की पुष्टि करें",
   "Copied to notebook": "नोटबुक में कॉपी किया गया",
   "Copy": "कॉपी",
-  "Custom CSS": "कस्टम CSS",
   "Dark Mode": "डार्क मोड",
   "Default": "डिफ़ॉल्ट",
   "Default Font": "डिफ़ॉल्ट फ़ॉन्ट",
@@ -28,7 +27,6 @@
   "Dictionary": "शब्दकोश",
   "Download Readest": "Readest डाउनलोड करें",
   "Edit": "संपादित करें",
-  "Enter your custom CSS here...": "अपना कस्टम CSS यहां दर्ज करें...",
   "Excerpts": "अंश",
   "Failed to import book(s): {{filenames}}": "पुस्तक(ें) आयात करने में विफल: {{filenames}}",
   "Fast": "तेज़",
@@ -364,5 +362,9 @@
   "Left Margin (px)": "बायां हाशिया (px)",
   "Column Gap (%)": "स्तंभों के बीच की दूरी (%)",
   "Always Show Status Bar": "स्थिति पट्टी हमेशा दिखाएं",
-  "Translation Not Available": "अनुवाद उपलब्ध नहीं है"
+  "Translation Not Available": "अनुवाद उपलब्ध नहीं है",
+  "Custom Content CSS": "सामग्री का CSS",
+  "Enter CSS for book content styling...": "पुस्तक सामग्री के लिए CSS दर्ज करें...",
+  "Custom Reader UI CSS": "इंटरफ़ेस का CSS",
+  "Enter CSS for reader interface styling...": "रीडर इंटरफ़ेस के लिए CSS दर्ज करें..."
 }

apps/readest-app/public/locales/id/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Konfirmasi Penghapusan",
   "Copied to notebook": "Disalin ke buku catatan",
   "Copy": "Salin",
-  "Custom CSS": "CSS Kustom",
   "Dark Mode": "Mode Gelap",
   "Default": "Default",
   "Default Font": "Font Default",
@@ -28,7 +27,6 @@
   "Dictionary": "Kamus",
   "Download Readest": "Unduh Readest",
   "Edit": "Edit",
-  "Enter your custom CSS here...": "Masukkan CSS kustom Anda di sini...",
   "Excerpts": "Kutipan",
   "Failed to import book(s): {{filenames}}": "Gagal mengimpor buku: {{filenames}}",
   "Fast": "Cepat",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "Margin Kiri (px)",
   "Column Gap (%)": "Jarak Antar Kolom (%)",
   "Always Show Status Bar": "Selalu Tampilkan Bilah Status",
-  "Translation Not Available": "Terjemahan Tidak Tersedia"
+  "Translation Not Available": "Terjemahan Tidak Tersedia",
+  "Custom Content CSS": "CSS konten",
+  "Enter CSS for book content styling...": "Masukkan CSS untuk gaya konten buku...",
+  "Custom Reader UI CSS": "CSS antarmuka",
+  "Enter CSS for reader interface styling...": "Masukkan CSS untuk gaya antarmuka pembaca..."
 }

apps/readest-app/public/locales/it/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Conferma eliminazione",
   "Copied to notebook": "Copiato nel quaderno",
   "Copy": "Copia",
-  "Custom CSS": "CSS personalizzato",
   "Dark Mode": "Modalità scura",
   "Default": "Predefinito",
   "Default Font": "Font predefinito",
@@ -28,7 +27,6 @@
   "Dictionary": "Dizionario",
   "Download Readest": "Scarica Readest",
   "Edit": "Modifica",
-  "Enter your custom CSS here...": "Inserisci qui il tuo CSS personalizzato...",
   "Excerpts": "Estratti",
   "Failed to import book(s): {{filenames}}": "Impossibile importare il/i libro/i: {{filenames}}",
   "Fast": "Veloce",
@@ -367,5 +365,9 @@
   "Left Margin (px)": "Margine Sinistro (px)",
   "Column Gap (%)": "Spazio tra Colonne (%)",
   "Always Show Status Bar": "Mostra sempre la barra di stato",
-  "Translation Not Available": "Traduzione non disponibile"
+  "Translation Not Available": "Traduzione non disponibile",
+  "Custom Content CSS": "CSS contenuto",
+  "Enter CSS for book content styling...": "Inserisci il CSS per il contenuto del libro...",
+  "Custom Reader UI CSS": "CSS interfaccia",
+  "Enter CSS for reader interface styling...": "Inserisci il CSS per l'interfaccia di lettura..."
 }

apps/readest-app/public/locales/ja/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "削除の確認",
   "Copied to notebook": "ノートブックにコピー",
   "Copy": "コピー",
-  "Custom CSS": "カスタムCSS",
   "Dark Mode": "ダークモード",
   "Default": "デフォルト",
   "Default Font": "デフォルトフォント",
@@ -28,7 +27,6 @@
   "Dictionary": "辞書",
   "Download Readest": "Readestをダウンロード",
   "Edit": "編集",
-  "Enter your custom CSS here...": "ここにカスタムCSSを入力...",
   "Excerpts": "抜粋",
   "Failed to import book(s): {{filenames}}": "書籍のインポートに失敗しました：{{filenames}}",
   "Fast": "高速",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "左マージン (px)",
   "Column Gap (%)": "列間の間隔 (%)",
   "Always Show Status Bar": "ステータスバーを常に表示",
-  "Translation Not Available": "翻訳は利用できません"
+  "Translation Not Available": "翻訳は利用できません",
+  "Custom Content CSS": "コンテンツCSS",
+  "Enter CSS for book content styling...": "本のコンテンツ用CSSを入力...",
+  "Custom Reader UI CSS": "リーダーUIのCSS",
+  "Enter CSS for reader interface styling...": "リーダーインターフェース用CSSを入力..."
 }

apps/readest-app/public/locales/ko/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "삭제 확인",
   "Copied to notebook": "노트북에 복사됨",
   "Copy": "복사",
-  "Custom CSS": "사용자 정의 CSS",
   "Dark Mode": "다크 모드",
   "Default": "기본값",
   "Default Font": "기본 글꼴",
@@ -28,7 +27,6 @@
   "Dictionary": "사전",
   "Download Readest": "Readest 다운로드",
   "Edit": "편집",
-  "Enter your custom CSS here...": "여기에 사용자 정의 CSS를 입력하세요...",
   "Excerpts": "발췌",
   "Failed to import book(s): {{filenames}}": "책 가져오기 실패: {{filenames}}",
   "Fast": "빠름",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "왼쪽 여백 (px)",
   "Column Gap (%)": "열 간격 (%)",
   "Always Show Status Bar": "상태 표시줄 항상 표시",
-  "Translation Not Available": "번역을 사용할 수 없음"
+  "Translation Not Available": "번역을 사용할 수 없음",
+  "Custom Content CSS": "콘텐츠 CSS",
+  "Enter CSS for book content styling...": "도서 콘텐츠 스타일을 위한 CSS 입력...",
+  "Custom Reader UI CSS": "리더 UI CSS",
+  "Enter CSS for reader interface styling...": "리더 인터페이스 스타일용 CSS 입력..."
 }

apps/readest-app/public/locales/nl/translation.json

@@ -189,8 +189,6 @@
   "Volume Keys for Page Flip": "Volumetoetsen voor pagina omslaan",
   "Clicks for Page Flip": "Klikken voor pagina omslaan",
   "Swap Clicks Area": "Klikgebieden omwisselen",
-  "Custom CSS": "Aangepaste CSS",
-  "Enter your custom CSS here...": "Voer hier uw aangepaste CSS in...",
   "Apply": "Toepassen",
   "Font": "Lettertype",
   "Layout": "Opmaak",
@@ -364,5 +362,9 @@
   "Left Margin (px)": "Linker marge (px)",
   "Column Gap (%)": "Kolomafstand (%)",
   "Always Show Status Bar": "Statusbalk altijd weergeven",
-  "Translation Not Available": "Vertaling niet beschikbaar"
+  "Translation Not Available": "Vertaling niet beschikbaar",
+  "Custom Content CSS": "Aangepaste inhoud-CSS",
+  "Enter CSS for book content styling...": "Voer CSS in voor de opmaak van de boekinhoud...",
+  "Custom Reader UI CSS": "Aangepaste interface-CSS",
+  "Enter CSS for reader interface styling...": "Voer CSS in voor de opmaak van de leesinterface..."
 }

apps/readest-app/public/locales/pl/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Potwierdź usunięcie",
   "Copied to notebook": "Skopiowano do notatnika",
   "Copy": "Kopiuj",
-  "Custom CSS": "Własny CSS",
   "Dark Mode": "Tryb ciemny",
   "Default": "Domyślne",
   "Default Font": "Domyślna czcionka",
@@ -28,7 +27,6 @@
   "Dictionary": "Słownik",
   "Download Readest": "Pobierz Readest",
   "Edit": "Edytuj",
-  "Enter your custom CSS here...": "Wprowadź własny CSS tutaj...",
   "Excerpts": "Fragmenty",
   "Failed to import book(s): {{filenames}}": "Nie udało się zaimportować książek: {{filenames}}",
   "Fast": "Szybko",
@@ -370,5 +368,9 @@
   "Left Margin (px)": "Lewy margines (px)",
   "Column Gap (%)": "Odstęp między kolumnami (%)",
   "Always Show Status Bar": "Zawsze pokazuj pasek stanu",
-  "Translation Not Available": "Brak dostępnego tłumaczenia"
+  "Translation Not Available": "Brak dostępnego tłumaczenia",
+  "Custom Content CSS": "CSS treści",
+  "Enter CSS for book content styling...": "Wprowadź CSS dla stylu treści książki...",
+  "Custom Reader UI CSS": "CSS interfejsu",
+  "Enter CSS for reader interface styling...": "Wprowadź CSS dla stylu interfejsu czytnika..."
 }

apps/readest-app/public/locales/pt/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Confirmar Exclusão",
   "Copied to notebook": "Copiado para o caderno",
   "Copy": "Copiar",
-  "Custom CSS": "CSS Personalizado",
   "Dark Mode": "Modo Escuro",
   "Default": "Padrão",
   "Default Font": "Fonte Padrão",
@@ -28,7 +27,6 @@
   "Dictionary": "Dicionário",
   "Download Readest": "Baixar Readest",
   "Edit": "Editar",
-  "Enter your custom CSS here...": "Insira seu CSS personalizado aqui...",
   "Excerpts": "Trechos",
   "Failed to import book(s): {{filenames}}": "Falha ao importar livro(s): {{filenames}}",
   "Fast": "Rápido",
@@ -367,5 +365,9 @@
   "Left Margin (px)": "Margem esquerda (px)",
   "Column Gap (%)": "Espaço entre colunas (%)",
   "Always Show Status Bar": "Exibir sempre a barra de status",
-  "Translation Not Available": "Tradução não disponível"
+  "Translation Not Available": "Tradução não disponível",
+  "Custom Content CSS": "CSS do conteúdo",
+  "Enter CSS for book content styling...": "Insira o CSS para o estilo do conteúdo do livro...",
+  "Custom Reader UI CSS": "CSS da interface",
+  "Enter CSS for reader interface styling...": "Insira o CSS para o estilo da interface de leitura..."
 }

apps/readest-app/public/locales/ru/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Подтвердить удаление",
   "Copied to notebook": "Скопировано в блокнот",
   "Copy": "Копировать",
-  "Custom CSS": "Пользовательский CSS",
   "Dark Mode": "Тёмная тема",
   "Default": "По умолчанию",
   "Default Font": "Шрифт по умолчанию",
@@ -28,7 +27,6 @@
   "Dictionary": "Словарь",
   "Download Readest": "Скачать Readest",
   "Edit": "Редактировать",
-  "Enter your custom CSS here...": "Введите ваш пользовательский CSS здесь...",
   "Excerpts": "Отрывки",
   "Failed to import book(s): {{filenames}}": "Не удалось импортировать книгу(и): {{filenames}}",
   "Fast": "Быстро",
@@ -370,5 +368,9 @@
   "Left Margin (px)": "Левый отступ (пикс)",
   "Column Gap (%)": "Промежуток между колонками (%)",
   "Always Show Status Bar": "Всегда показывать панель состояния",
-  "Translation Not Available": "Перевод недоступен"
+  "Translation Not Available": "Перевод недоступен",
+  "Custom Content CSS": "CSS содержимого",
+  "Enter CSS for book content styling...": "Введите CSS для оформления содержимого книги...",
+  "Custom Reader UI CSS": "CSS интерфейса",
+  "Enter CSS for reader interface styling...": "Введите CSS для оформления интерфейса ридера..."
 }

apps/readest-app/public/locales/tr/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Silmeyi Onayla",
   "Copied to notebook": "Not defterine kopyalandı",
   "Copy": "Kopyala",
-  "Custom CSS": "Özel CSS",
   "Dark Mode": "Karanlık Mod",
   "Default": "Varsayılan",
   "Default Font": "Varsayılan Yazı Tipi",
@@ -28,7 +27,6 @@
   "Dictionary": "Sözlük",
   "Download Readest": "Readest'i İndir",
   "Edit": "Düzenle",
-  "Enter your custom CSS here...": "Özel CSS'nizi buraya girin...",
   "Excerpts": "Alıntılar",
   "Failed to import book(s): {{filenames}}": "Kitap(lar) içe aktarılamadı: {{filenames}}",
   "Fast": "Hızlı",
@@ -364,5 +362,9 @@
   "Left Margin (px)": "Sol Kenar Boşluğu (px)",
   "Column Gap (%)": "Sütun Aralığı (%)",
   "Always Show Status Bar": "Durum Çubuğunu Her Zaman Göster",
-  "Translation Not Available": "Çeviri Mevcut Değil"
+  "Translation Not Available": "Çeviri Mevcut Değil",
+  "Custom Content CSS": "Özel İçerik CSS'si",
+  "Enter CSS for book content styling...": "Kitap içeriği stili için CSS girin...",
+  "Custom Reader UI CSS": "Özel Okuyucu Arayüzü CSS'si",
+  "Enter CSS for reader interface styling...": "Okuyucu arayüzü stili için CSS girin..."
 }

apps/readest-app/public/locales/uk/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Підтвердити видалення",
   "Copied to notebook": "Скопійовано до нотатника",
   "Copy": "Копіювати",
-  "Custom CSS": "Користувацький CSS",
   "Dark Mode": "Темний режим",
   "Default": "За замовчуванням",
   "Default Font": "Шрифт за замовчуванням",
@@ -28,7 +27,6 @@
   "Dictionary": "Словник",
   "Download Readest": "Завантажити Readest",
   "Edit": "Редагувати",
-  "Enter your custom CSS here...": "Введіть ваш користувацький CSS тут...",
   "Excerpts": "Уривки",
   "Failed to import book(s): {{filenames}}": "Не вдалося імпортувати книгу(и): {{filenames}}",
   "Fast": "Швидко",
@@ -370,5 +368,9 @@
   "Left Margin (px)": "Лівий відступ (px)",
   "Column Gap (%)": "Проміжок між стовпцями (%)",
   "Always Show Status Bar": "Завжди показувати панель стану",
-  "Translation Not Available": "Переклад недоступний"
+  "Translation Not Available": "Переклад недоступний",
+  "Custom Content CSS": "CSS вмісту",
+  "Enter CSS for book content styling...": "Введіть CSS для стилізації вмісту книги...",
+  "Custom Reader UI CSS": "CSS інтерфейсу",
+  "Enter CSS for reader interface styling...": "Введіть CSS для стилізації інтерфейсу рідера..."
 }

apps/readest-app/public/locales/vi/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "Xác nhận xóa",
   "Copied to notebook": "Đã sao chép vào sổ ghi chú",
   "Copy": "Sao chép",
-  "Custom CSS": "CSS tùy chỉnh",
   "Dark Mode": "Chế độ tối",
   "Default": "Mặc định",
   "Default Font": "Phông chữ mặc định",
@@ -28,7 +27,6 @@
   "Dictionary": "Từ điển",
   "Download Readest": "Tải Readest",
   "Edit": "Chỉnh sửa",
-  "Enter your custom CSS here...": "Nhập CSS tùy chỉnh của bạn vào đây...",
   "Excerpts": "Trích dẫn",
   "Failed to import book(s): {{filenames}}": "Không thể nhập sách: {{filenames}}",
   "Fast": "Nhanh",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "Lề trái (px)",
   "Column Gap (%)": "Khoảng cách cột (%)",
   "Always Show Status Bar": "Luôn hiển thị thanh trạng thái",
-  "Translation Not Available": "Không có bản dịch"
+  "Translation Not Available": "Không có bản dịch",
+  "Custom Content CSS": "CSS nội dung",
+  "Enter CSS for book content styling...": "Nhập CSS cho phần nội dung sách...",
+  "Custom Reader UI CSS": "CSS giao diện đọc",
+  "Enter CSS for reader interface styling...": "Nhập CSS cho giao diện trình đọc..."
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "确认删除",
   "Copied to notebook": "已复制到笔记本",
   "Copy": "复制",
-  "Custom CSS": "自定义 CSS",
   "Dark Mode": "深色主题",
   "Default": "默认",
   "Default Font": "默认字体",
@@ -28,7 +27,6 @@
   "Dictionary": "词典",
   "Download Readest": "下载 Readest",
   "Edit": "编辑",
-  "Enter your custom CSS here...": "在此处输入您的自定义 CSS...",
   "Excerpts": "摘录",
   "Failed to import book(s): {{filenames}}": "导入书籍失败：{{filenames}}",
   "Fast": "快",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "左边距",
   "Column Gap (%)": "列间距",
   "Always Show Status Bar": "始终显示状态栏",
-  "Translation Not Available": "翻译不可用"
+  "Translation Not Available": "翻译不可用",
+  "Custom Content CSS": "自定义内容 CSS",
+  "Enter CSS for book content styling...": "输入书籍内容样式的CSS…",
+  "Custom Reader UI CSS": "自定义界面 CSS",
+  "Enter CSS for reader interface styling...": "输入阅读器界面样式的CSS…"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -18,7 +18,6 @@
   "Confirm Deletion": "確認刪除",
   "Copied to notebook": "已複製到筆記本",
   "Copy": "複製",
-  "Custom CSS": "自定義 CSS",
   "Dark Mode": "深色主題",
   "Default": "預設",
   "Default Font": "預設字體",
@@ -28,7 +27,6 @@
   "Dictionary": "詞典",
   "Download Readest": "下載 Readest",
   "Edit": "編輯",
-  "Enter your custom CSS here...": "在此處輸入您的自定義 CSS...",
   "Excerpts": "摘錄",
   "Failed to import book(s): {{filenames}}": "導入書籍失敗：{{filenames}}",
   "Fast": "快",
@@ -361,5 +359,9 @@
   "Left Margin (px)": "左邊距",
   "Column Gap (%)": "欄間距",
   "Always Show Status Bar": "始終顯示狀態欄",
-  "Translation Not Available": "翻譯不可用"
+  "Translation Not Available": "翻譯不可用",
+  "Custom Content CSS": "自訂內容 CSS",
+  "Enter CSS for book content styling...": "輸入書籍內容樣式的CSS…",
+  "Custom Reader UI CSS": "自訂介面 CSS",
+  "Enter CSS for reader interface styling...": "輸入閱讀器介面樣式的CSS…"
 }

apps/readest-app/src/app/reader/components/HeaderBar.tsx

@@ -118,7 +118,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         }}
         onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')}
       >
-        <div className='sidebar-bookmark-toggler z-20 flex h-full items-center gap-x-4'>
+        <div className='bg-base-100 sidebar-bookmark-toggler z-20 flex h-full items-center gap-x-4 pe-2'>
           <div className='hidden sm:flex'>
             <SidebarToggler bookKey={bookKey} />
           </div>
@@ -132,7 +132,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           </h2>
         </div>
 
-        <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
+        <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4 ps-2'>
           <SettingsToggler />
           <NotebookToggler bookKey={bookKey} />
           <Dropdown

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { MdOutlineAutoMode } from 'react-icons/md';
+import { MdOutlineAutoMode, MdOutlineScreenRotation } from 'react-icons/md';
 import { MdOutlineTextRotationNone, MdTextRotateVertical } from 'react-icons/md';
+import { IoPhoneLandscapeOutline, IoPhonePortraitOutline } from 'react-icons/io5';
 import { TbTextDirectionRtl } from 'react-icons/tb';
 
 import { useEnv } from '@/context/EnvContext';
@@ -10,6 +11,7 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { isCJKEnv } from '@/utils/misc';
 import { getStyles } from '@/utils/style';
 import { getMaxInlineSize } from '@/utils/config';
+import { lockScreenOrientation } from '@/utils/bridge';
 import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import { MIGHT_BE_RTL_LANGS, RELOAD_BEFREE_SAVED_TIMEOUT_MS } from '@/services/constants';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
@@ -17,7 +19,7 @@ import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { getView, getViewSettings, getGridInsets, setViewSettings } = useReaderStore();
   const { getBookData } = useBookDataStore();
   const view = getView(bookKey);
@@ -62,6 +64,8 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime!);
   const [showPageNumber, setShowPageNumber] = useState(viewSettings.showPageNumber!);
 
+  const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);
+
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'paragraphMargin', paragraphMargin);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -297,6 +301,14 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showFooter]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'screenOrientation', screenOrientation, false, false);
+    if (appService?.isMobileApp) {
+      lockScreenOrientation({ orientation: screenOrientation });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenOrientation]);
+
   const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
   const mightBeRTLBook = MIGHT_BE_RTL_LANGS.includes(langCode) || isCJKEnv();
   const isVertical = viewSettings.vertical || writingMode.includes('vertical');
@@ -591,6 +603,47 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
           </div>
         </div>
       </div>
+
+      {appService?.isMobileApp && (
+        <div className='w-full'>
+          <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
+          <div className='card border-base-200 bg-base-100 border shadow'>
+            <div className='divide-base-200 divide-y'>
+              <div className='config-item'>
+                <span className=''>{_('Orientation')}</span>
+                <div className='flex gap-4'>
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('auto')}
+                    >
+                      <MdOutlineScreenRotation />
+                    </button>
+                  </div>
+
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('portrait')}
+                    >
+                      <IoPhonePortraitOutline />
+                    </button>
+                  </div>
+
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('landscape')}
+                    >
+                      <IoPhoneLandscapeOutline />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -1,70 +1,98 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
-import { IoPhoneLandscapeOutline, IoPhonePortraitOutline } from 'react-icons/io5';
-import { MdOutlineScreenRotation } from 'react-icons/md';
+import cssbeautify from 'cssbeautify';
+import React, { useRef, useState } from 'react';
+
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getStyles } from '@/utils/style';
-import { lockScreenOrientation } from '@/utils/bridge';
-import { saveViewSettings } from '../../utils/viewSettingsHelper';
-import cssbeautify from 'cssbeautify';
 import cssValidate from '@/utils/css';
 
+type CSSType = 'book' | 'reader';
+
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
-  const { envConfig, appService } = useEnv();
+  const { appService } = useEnv();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
-  const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
-  const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
-  const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);
+  const [draftContentStylesheet, setDraftContentStylesheet] = useState(viewSettings.userStylesheet);
+  const [draftContentStylesheetSaved, setDraftContentStylesheetSaved] = useState(true);
+  const [contentError, setContentError] = useState<string | null>(null);
+  const [draftUIStylesheet, setDraftUIStylesheet] = useState(viewSettings.userUIStylesheet);
+  const [draftUIStylesheetSaved, setDraftUIStylesheetSaved] = useState(true);
+  const [uiError, setUIError] = useState<string | null>(null);
 
-  const [error, setError] = useState<string | null>(null);
   const [inputFocusInAndroid, setInputFocusInAndroid] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const contentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const uiTextareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const handleUserStylesheetChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const cssInput = e.target.value;
-    setDraftStylesheet(cssInput);
-    setDraftStylesheetSaved(false);
+  const validateCSS = (cssInput: string): { isValid: boolean; error?: string } => {
+    if (!cssInput.trim()) return { isValid: true };
 
     try {
       const { isValid, error } = cssValidate(cssInput);
-      if (cssInput && !isValid) {
-        throw new Error(error || 'Invalid CSS');
+      if (!isValid) {
+        return { isValid: false, error: error || 'Invalid CSS' };
       }
-      setError(null);
+      return { isValid: true };
     } catch (err: unknown) {
       if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError('Invalid CSS: Please check your input.');
+        return { isValid: false, error: err.message };
       }
-      console.log('CSS Error:', err);
+      return { isValid: false, error: 'Invalid CSS: Please check your input.' };
     }
   };
 
-  const applyStyles = () => {
-    const formattedCSS = cssbeautify(draftStylesheet, {
+  const handleStylesheetChange = (e: React.ChangeEvent<HTMLTextAreaElement>, type: CSSType) => {
+    const cssInput = e.target.value;
+
+    if (type === 'book') {
+      setDraftContentStylesheet(cssInput);
+      setDraftContentStylesheetSaved(false);
+
+      const { isValid, error } = validateCSS(cssInput);
+      setContentError(isValid ? null : error || 'Invalid CSS');
+    } else {
+      setDraftUIStylesheet(cssInput);
+      setDraftUIStylesheetSaved(false);
+
+      const { isValid, error } = validateCSS(cssInput);
+      setUIError(isValid ? null : error || 'Invalid CSS');
+    }
+  };
+
+  const applyStyles = (type: CSSType) => {
+    const cssInput = type === 'book' ? draftContentStylesheet : draftUIStylesheet;
+    const formattedCSS = cssbeautify(cssInput, {
       indent: '  ',
       openbrace: 'end-of-line',
       autosemicolon: true,
     });
 
-    setDraftStylesheet(formattedCSS);
-    setDraftStylesheetSaved(true);
-    viewSettings.userStylesheet = formattedCSS;
-    setViewSettings(bookKey, { ...viewSettings });
+    if (type === 'book') {
+      setDraftContentStylesheet(formattedCSS);
+      setDraftContentStylesheetSaved(true);
+      viewSettings.userStylesheet = formattedCSS;
 
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.userStylesheet = formattedCSS;
-      setSettings(settings);
+      if (isFontLayoutSettingsGlobal) {
+        settings.globalViewSettings.userStylesheet = formattedCSS;
+        setSettings(settings);
+      }
+    } else {
+      setDraftUIStylesheet(formattedCSS);
+      setDraftUIStylesheetSaved(true);
+      viewSettings.userUIStylesheet = formattedCSS;
+
+      if (isFontLayoutSettingsGlobal) {
+        settings.globalViewSettings.userUIStylesheet = formattedCSS;
+        setSettings(settings);
+      }
     }
 
+    setViewSettings(bookKey, { ...viewSettings });
     getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings));
   };
 
@@ -73,7 +101,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     e.nativeEvent.stopImmediatePropagation();
   };
 
-  const handleInputFocus = () => {
+  const handleInputFocus = (textareaRef: React.RefObject<HTMLTextAreaElement>) => {
     if (appService?.isAndroidApp) {
       setInputFocusInAndroid(true);
     }
@@ -93,13 +121,53 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     }
   };
 
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'screenOrientation', screenOrientation, false, false);
-    if (appService?.isMobileApp) {
-      lockScreenOrientation({ orientation: screenOrientation });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screenOrientation]);
+  const renderCSSEditor = (
+    type: CSSType,
+    title: string,
+    placeholder: string,
+    value: string,
+    error: string | null,
+    saved: boolean,
+    textareaRef: React.RefObject<HTMLTextAreaElement>,
+  ) => (
+    <div className='w-full'>
+      <h2 className='mb-2 font-medium'>{_(title)}</h2>
+      <div
+        className={`card border-base-200 bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}
+      >
+        <div className='relative p-1'>
+          <textarea
+            ref={textareaRef}
+            className={clsx(
+              'textarea textarea-ghost h-48 w-full border-0 p-3 text-base !outline-none sm:text-sm',
+              'placeholder:text-base-content/70',
+            )}
+            placeholder={_(placeholder)}
+            spellCheck='false'
+            value={value}
+            onFocus={() => handleInputFocus(textareaRef)}
+            onBlur={handleInputBlur}
+            onInput={handleInput}
+            onKeyDown={handleInput}
+            onKeyUp={handleInput}
+            onChange={(e) => handleStylesheetChange(e, type)}
+          />
+          <button
+            className={clsx(
+              'btn btn-ghost bg-base-200 absolute bottom-2 right-4 h-8 min-h-8 px-4 py-2',
+              saved ? 'hidden' : '',
+              error ? 'btn-disabled' : '',
+            )}
+            onClick={() => applyStyles(type)}
+            disabled={!!error}
+          >
+            {_('Apply')}
+          </button>
+        </div>
+      </div>
+      {error && <p className='mt-1 text-sm text-red-500'>{error}</p>}
+    </div>
+  );
 
   return (
     <div
@@ -108,84 +176,25 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         inputFocusInAndroid && 'h-[50%] overflow-y-auto pb-[200px]',
       )}
     >
-      {appService?.isMobileApp && (
-        <div className='w-full'>
-          <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
-          <div className='card border-base-200 bg-base-100 border shadow'>
-            <div className='divide-base-200 divide-y'>
-              <div className='config-item'>
-                <span className=''>{_('Orientation')}</span>
-                <div className='flex gap-4'>
-                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
-                    <button
-                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
-                      onClick={() => setScreenOrientation('auto')}
-                    >
-                      <MdOutlineScreenRotation />
-                    </button>
-                  </div>
-
-                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
-                    <button
-                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
-                      onClick={() => setScreenOrientation('portrait')}
-                    >
-                      <IoPhonePortraitOutline />
-                    </button>
-                  </div>
-
-                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
-                    <button
-                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
-                      onClick={() => setScreenOrientation('landscape')}
-                    >
-                      <IoPhoneLandscapeOutline />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+      {renderCSSEditor(
+        'book',
+        _('Custom Content CSS'),
+        _('Enter CSS for book content styling...'),
+        draftContentStylesheet,
+        contentError,
+        draftContentStylesheetSaved,
+        contentTextareaRef,
       )}
 
-      <div className='w-full'>
-        <h2 className='mb-2 font-medium'>{_('Custom CSS')}</h2>
-        <div
-          className={`card border-base-200 bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}
-        >
-          <div className='relative p-1'>
-            <textarea
-              ref={textareaRef}
-              className={clsx(
-                'textarea textarea-ghost h-48 w-full border-0 p-3 text-base !outline-none sm:text-sm',
-                'placeholder:text-base-content/70',
-              )}
-              placeholder={_('Enter your custom CSS here...')}
-              spellCheck='false'
-              value={draftStylesheet}
-              onFocus={handleInputFocus}
-              onBlur={handleInputBlur}
-              onInput={handleInput}
-              onKeyDown={handleInput}
-              onKeyUp={handleInput}
-              onChange={handleUserStylesheetChange}
-            />
-            <button
-              className={clsx(
-                'btn btn-ghost bg-base-200 absolute bottom-2 right-4 h-8 min-h-8 px-4 py-2',
-                draftStylesheetSaved ? 'hidden' : '',
-                error ? 'btn-disabled' : '',
-              )}
-              onClick={applyStyles}
-              disabled={!!error}
-            >
-              {_('Apply')}
-            </button>
-          </div>
-        </div>
-        {error && <p className='mt-1 text-sm text-red-500'>{error}</p>}
-      </div>
+      {renderCSSEditor(
+        'reader',
+        _('Custom Reader UI CSS'),
+        _('Enter CSS for reader interface styling...'),
+        draftUIStylesheet,
+        uiError,
+        draftUIStylesheetSaved,
+        uiTextareaRef,
+      )}
     </div>
   );
 };

apps/readest-app/src/hooks/useUICSS.ts

@@ -14,7 +14,7 @@ export const useUICSS = (bookKey: string) => {
       styleElement.remove();
     }
 
-    const rawCSS = viewSettings.userStylesheet || '';
+    const rawCSS = viewSettings.userUIStylesheet || '';
     const newStyleEl = document.createElement('style');
     newStyleEl.textContent = rawCSS.replace('foliate-view', `#foliate-view-${bookKey}`);
     document.head.appendChild(newStyleEl);

apps/readest-app/src/services/constants.ts

@@ -130,6 +130,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
   codeHighlighting: false,
   codeLanguage: 'auto-detect',
   userStylesheet: '',
+  userUIStylesheet: '',
 };
 
 export const DEFAULT_MOBILE_VIEW_SETTINGS: Partial<ViewSettings> = {

apps/readest-app/src/types/book.ts

@@ -117,6 +117,7 @@ export interface BookStyle {
   codeHighlighting: boolean;
   codeLanguage: CodeLanguage;
   userStylesheet: string;
+  userUIStylesheet: string;
 }
 
 export interface BookFont {