/* ============================================================ public/css/rtl.css — Right-to-Left Layout Overrides ============================================================ Wird AUTOMATISCH aktiv über `[dir="rtl"]` auf , das vom `applyLanguageDirection()`-Helper in coins-global.js bei jedem Sprachwechsel gesetzt wird (Sprachen: ar, he, ur). Strategie: - Nur Layout-Spiegelungen — keine Schrift- oder Farbänderungen. - Nur Stellen wo `direction: rtl` allein nicht reicht (fixed positioning, transforms, hartcodierte left/right Werte, padding/margin). - Zahlen, URLs, Code, E-Mails bleiben automatisch LTR (CSS-Default für `` bzw. `unicode-bidi: isolate`). Konvention: - Selektor immer mit `[dir="rtl"]` prefixen, damit die Defaults für LTR bleiben. - Wenn möglich: Logical Properties bevorzugen (margin-inline-start, etc.) — diese funktionieren AUTOMATISCH in beiden Richtungen ohne Override hier. ============================================================ */ /* ─── Body / Globales ─────────────────────────────────────── */ [dir="rtl"] body { direction: rtl; } /* ─── App-Header ──────────────────────────────────────────── */ [dir="rtl"] .app-header { flex-direction: row-reverse; } [dir="rtl"] .header-left, [dir="rtl"] .header-right { flex-direction: row-reverse; } /* ─── Buttons mit Pfeil-Inhalt ────────────────────────────── */ /* ← ("Zurück"-Button) wird zu → in RTL via CSS unicode-bidi (browser dreht es nicht automatisch). Der Text drumherum ist sowieso RTL. */ [dir="rtl"] .btn[data-i18n="nav.back"]::before, [dir="rtl"] .btn[data-i18n="nav.back_campaigns"]::before { content: '→ '; } [dir="rtl"] .btn[data-i18n="nav.back"], [dir="rtl"] .btn[data-i18n="nav.back_campaigns"] { /* Original-Inhalt verstecken (←), nur ::before zeigen */ font-size: 0; } [dir="rtl"] .btn[data-i18n="nav.back"]::before, [dir="rtl"] .btn[data-i18n="nav.back_campaigns"]::before { font-size: 0.875rem; } /* ─── Chat-Messages: User links statt rechts, KI rechts statt links ────── */ [dir="rtl"] .chat-message.user { align-self: flex-start; flex-direction: row; } [dir="rtl"] .chat-message.assistant { align-self: flex-end; flex-direction: row-reverse; } [dir="rtl"] .chat-message.user .chat-bubble { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; } [dir="rtl"] .chat-message.assistant .chat-bubble { border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; } /* Chat-Bubble: ul/ol Padding spiegeln */ [dir="rtl"] .chat-bubble ul, [dir="rtl"] .chat-bubble ol { padding-left: 0; padding-right: 20px; } [dir="rtl"] .chat-bubble blockquote { border-left: none; border-right: 3px solid var(--ff-gold-dark); padding-left: 0; padding-right: 12px; } /* ─── Notes-Panel + Char-Sidebar: rechts → links ────────── */ [dir="rtl"] .notes-panel { right: auto; left: 0; border-left: none; border-right: 2px solid var(--ff-gold-dark); box-shadow: 4px 0 20px rgba(var(--ff-black-rgb), 0.5); } [dir="rtl"] .char-sidebar { right: auto; left: 0; border-left: none; border-right: 2px solid var(--ff-gold-dark); transform: translateX(-100%); } [dir="rtl"] .char-sidebar.open { transform: translateX(0); } /* Settings-Sidebar (Mobile-Chat) ebenfalls spiegeln */ [dir="rtl"] .chat-settings-sidebar { right: auto; left: 0; border-left: none; border-right: 2px solid var(--ff-gold-dark); transform: translateX(-100%); } [dir="rtl"] .chat-settings-sidebar.open { transform: translateX(0); } /* ─── PWA Bottom-Nav (kein Mirror nötig — bleibt zentriert) ───────────── */ /* Nur die Reihenfolge der Items innerhalb spiegeln */ [dir="rtl"] .pwa-bottom-nav { flex-direction: row-reverse; } /* ─── Mobile-Nav-Burger (rechts → links) ────────────────── */ [dir="rtl"] .mobile-nav { text-align: right; } /* ─── Lang-Picker Modal (Suchfeld + Liste) ──────────────── */ [dir="rtl"] .lang-picker-item { text-align: right; flex-direction: row-reverse; } /* ─── Auth-Lang-Trigger (links statt rechts) ────────────── */ [dir="rtl"] .auth-lang-trigger { right: auto; left: 16px; } /* ─── Forms: text-align ─────────────────────────────────── */ [dir="rtl"] .form-group label, [dir="rtl"] .form-group input, [dir="rtl"] .form-group textarea, [dir="rtl"] .form-group select { text-align: right; } /* Number/Price/Email/Tel/URL: bleiben LTR — bessere Lesbarkeit für Ziffern */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"], [dir="rtl"] .ltr { direction: ltr; text-align: left; } /* ─── Tabellen ──────────────────────────────────────────── */ [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } /* Numerische Spalten bleiben LTR */ [dir="rtl"] table .text-right, [dir="rtl"] table td.numeric, [dir="rtl"] table td.coin-amount { direction: ltr; text-align: left; } /* ─── Coin-Shop / Slider ────────────────────────────────── */ [dir="rtl"] .slider-price-row { flex-direction: row-reverse; } /* Preise selbst (€X,XX / $X.XX) bleiben LTR */ [dir="rtl"] .slider-price-main, [dir="rtl"] .pricing-calc-price, [dir="rtl"] .pricing-flat-prices, [dir="rtl"] .coin-modal-price, [dir="rtl"] .coin-balance-value, [dir="rtl"] .coin-balance-hero-amount { direction: ltr; unicode-bidi: isolate; } /* ─── Header-Right-Bereich (Coin-Anzeige + Settings + Burger) ───────── */ [dir="rtl"] .coin-header-link, [dir="rtl"] .header-settings-btn, [dir="rtl"] .username-badge { direction: ltr; /* Zahlen + Username bleiben lesbar */ } /* ─── Dropdown-Menüs (Nav) ──────────────────────────────── */ [dir="rtl"] .nav-dropdown-menu { left: auto; right: 0; text-align: right; } /* ─── Modal-Actions ─────────────────────────────────────── */ [dir="rtl"] .modal-actions { justify-content: flex-start; flex-direction: row-reverse; } /* ─── Footer ────────────────────────────────────────────── */ [dir="rtl"] .site-footer { flex-direction: row-reverse; } /* ─── Story-Progress-Bar (Fortschritt von rechts nach links) ───────── */ [dir="rtl"] .progress-track { direction: rtl; } [dir="rtl"] .progress-fill { /* Fülle wächst von rechts nach links */ margin-left: 0; margin-right: 0; } /* ─── Charts / Stats / Code-Blöcke: bleiben LTR ─────────── */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .stat-number, [dir="rtl"] .ff-code { direction: ltr; text-align: left; unicode-bidi: isolate; } /* ─── Onboarding-Tour (Tooltip-Pfeile) ──────────────────── */ [dir="rtl"] .onboarding-tooltip { text-align: right; } /* ─── Lang-Switch-Button im Footer ──────────────────────── */ [dir="rtl"] .lang-switch { margin-left: 0; margin-right: 12px; flex-direction: row-reverse; } /* ─── Daily-Chest-Card ──────────────────────────────────── */ [dir="rtl"] .daily-chest-card { flex-direction: row-reverse; } /* ─── Helpbot-Widget (rechts → links bei RTL) ──────────── */ [dir="rtl"] .helpbot-fab { right: auto; left: 20px; } [dir="rtl"] .helpbot-window { right: auto; left: 20px; } /* ─── Radio-Player (oben rechts → oben links) ──────────── */ [dir="rtl"] .radio-mini-indicator, [dir="rtl"] .radio-panel { right: auto; left: 12px; }