/* Right-to-left overrides (IMP-0382). * * Loaded LAST and unconditionally; every rule is scoped under [dir="rtl"], which `` sets * from the negotiated locale, so this file is inert for the 20 left-to-right locales. * * Arabic and Urdu catalogs shipped long before any RTL support existed, so the site rendered them * left-to-right. Setting `dir` mirrors text and inline layout, and converting physical CSS to * logical properties mirrors box offsets — this file covers only the residue neither of those can * reach, because it is not expressible as a direction-agnostic property: * * 1. Directional icon glyphs. `fa-arrow-left` is a picture of a left arrow; no property makes it * point the other way, so it is mirrored geometrically. * 2. `transform: translateX()` and negative x-offsets, whose sign is physical. * 3. Anything positioned with `left`/`right` that has not yet been converted — tracked by * scripts/i18n/rtl_physical_css_audit.py. * * Deliberately NOT mirrored: media-control glyphs (play/forward/backward). By convention those * follow the direction of the media timeline, not the text, in every locale. */ /* --- 1. Directional icon glyphs -------------------------------------------------------------- */ /* scaleX(-1) rather than swapping the class, so a glyph inside a button, link or inline run * mirrors wherever it appears without touching any call site. */ [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-long-arrow-left, [dir="rtl"] .fa-long-arrow-right, [dir="rtl"] .fa-arrow-right-long, [dir="rtl"] .fa-arrow-left-long, [dir="rtl"] .fa-chevron-left, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-angle-left, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-angles-left, [dir="rtl"] .fa-angles-right, [dir="rtl"] .fa-caret-left, [dir="rtl"] .fa-caret-right, [dir="rtl"] .fa-circle-chevron-left, [dir="rtl"] .fa-circle-chevron-right, [dir="rtl"] .fa-circle-arrow-left, [dir="rtl"] .fa-circle-arrow-right, [dir="rtl"] .fa-arrow-right-from-bracket, [dir="rtl"] .fa-arrow-right-to-bracket, [dir="rtl"] .fa-sign-out-alt, [dir="rtl"] .fa-sign-in-alt, [dir="rtl"] .fa-reply, [dir="rtl"] .fa-share, [dir="rtl"] .fa-rotate-left, [dir="rtl"] .fa-rotate-right { transform: scaleX(-1); } /* --- 2. Slide-in panels and drawers ---------------------------------------------------------- */ /* The state sidebar slides in from the inline end. Its transform sign is physical, so it inverts; * the offsets themselves are logical and already mirror. */ [dir="rtl"] .state-sidebar { transform: translateX(-100%); } [dir="rtl"] .state-sidebar.open { transform: translateX(0); } /* --- 3. Text alignment inside mirrored containers -------------------------------------------- */ /* Numeric and code-like runs stay left-to-right even in an RTL paragraph: a credit balance, a * version string or an ISO timestamp reads the same in every locale, and bidi reordering of the * surrounding text must not reverse its digits. */ [dir="rtl"] .mono, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .credit-amount, [dir="rtl"] .version-label, [dir="rtl"] time { direction: ltr; unicode-bidi: isolate; } /* --- 4. Gradient direction in meter fills ---------------------------------------------------- */ /* The fill itself needs nothing: it is a width-percentage block, so inside a mirrored container it * already grows from the inline start (the right edge in RTL). Its GRADIENT does, though — * `linear-gradient(90deg, …)` runs left-to-right physically, so in RTL the colour ramp would run * against the direction the bar fills. Verified against state-sidebar.css:348-350. */ [dir="rtl"] .relationship-meter-fill.positive { background: linear-gradient(270deg, #3b82f6, #10b981); } [dir="rtl"] .relationship-meter-fill.negative { background: linear-gradient(270deg, #f59e0b, #ef4444); }