/** * Right-to-left overrides — Arabic, Hebrew, Persian, Urdu. * * Loaded ONLY when the active locale is RTL (core/h.php and core/ch.php add * this stylesheet conditionally), so LTR visitors download none of it. * * Scoping * ------- * Every rule is scoped under `[dir="rtl"]`, which core/i18n.php puts on * . That means this file can be loaded unconditionally without harm, * and that a single RTL widget dropped into an LTR page (a language name in * its own script, say) is handled by its own `dir` attribute rather than by * anything here. * * Why this file exists at all * --------------------------- * The rest of the CSS predates i18n and uses physical properties — `left`, * `margin-left`, `border-right`. Rewriting all of it to logical properties * (`inset-inline-start`, `margin-inline-start`) would be the tidier fix and is * the right direction for new code, but it touches every stylesheet in the * project. This file flips the layout-defining ones — the header, the console * sidebar, dropdowns, breadcrumbs — which is what actually breaks when the * page mirrors. New components should use logical properties and need no * entry here. */ /* --------------------------------------------------------------- * Global * --------------------------------------------------------------- */ [dir="rtl"] body { text-align: right; } /* Latin-script content inside an RTL page — code, domains, URLs, API keys — must not mirror. `unicode-bidi: isolate` keeps the run intact and stops it dragging surrounding punctuation to the wrong end. */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] .code, [dir="rtl"] .mono, [dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: isolate; text-align: left; } /* Numeric columns stay left-aligned-in-RTL terms, i.e. they keep reading as numbers rather than flipping their sign and decimal placement. */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; } /* --------------------------------------------------------------- * Public header * --------------------------------------------------------------- */ [dir="rtl"] .nav-account { margin-left: 0; margin-right: calc(6px - var(--spacing-sm)); padding-left: 0; padding-right: 6px; border-left: 0; border-right: 1px solid var(--gray-100); } @media (prefers-color-scheme: dark) { [dir="rtl"] .nav-account { border-right-color: var(--gray-200); } } /* --------------------------------------------------------------- * Dropdowns — user chip, language chip, notification bell. * All are anchored to the right edge in LTR; mirror to the left. * --------------------------------------------------------------- */ [dir="rtl"] .user-chip-menu, [dir="rtl"] .lang-chip-menu, [dir="rtl"] .notif-menu, [dir="rtl"] .notifications-dropdown { right: auto; left: 0; } [dir="rtl"] .user-chip-btn { padding: 4px 4px 4px 10px; } [dir="rtl"] .lang-chip-item.is-current::before { /* Already logical (inset-inline-start) in _lang-switcher.css — the rounding is the only physical part. */ border-radius: 2px 0 0 2px; } /* --------------------------------------------------------------- * Console shell * --------------------------------------------------------------- */ [dir="rtl"] .console-sidebar { border-right: 0; border-left: 1px solid var(--gray-100); } @media (prefers-color-scheme: dark) { [dir="rtl"] .console-sidebar { border-left-color: var(--gray-100); } } [dir="rtl"] .console-nav-item, [dir="rtl"] .console-nav-parent, [dir="rtl"] .console-nav-child { text-align: right; } [dir="rtl"] .console-nav-child { padding-left: 0; padding-right: 12px; } /* Chevrons point at the content they open. In RTL that is the other way. */ [dir="rtl"] .console-nav-chevron, [dir="rtl"] .console-breadcrumb svg, [dir="rtl"] .btn svg.icon-arrow-right { transform: scaleX(-1); } [dir="rtl"] .console-nav-group[data-expanded="true"] .console-nav-chevron { /* Expanded state rotates rather than mirrors, so undo the flip first. */ transform: scaleX(-1) rotate(-90deg); } /* Collapsed-sidebar flyout labels open away from the sidebar. */ [dir="rtl"] .console-sidebar.is-collapsed .console-nav-label, [dir="rtl"] .console-nav-item[title]:hover::after { left: auto; right: 100%; margin-left: 0; margin-right: 8px; } [dir="rtl"] .console-sidebar-toggle-all { right: auto; left: 10px; } [dir="rtl"] .console-search-icon { left: auto; right: 10px; } [dir="rtl"] .console-search-input { padding-left: 12px; padding-right: 34px; } /* Mobile drawer slides in from the right. */ @media (max-width: 1024px) { [dir="rtl"] .console-sidebar { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .console-sidebar.is-open { transform: translateX(0); } } /* --------------------------------------------------------------- * Breadcrumbs — the separator is a literal "/" in the markup, which * reads backwards when mirrored. Neutralise its direction. * --------------------------------------------------------------- */ [dir="rtl"] .console-breadcrumb-separator { unicode-bidi: isolate; } /* --------------------------------------------------------------- * Forms and tables * --------------------------------------------------------------- */ [dir="rtl"] .field-label, [dir="rtl"] .help-text, [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] .input-with-button > .btn { border-radius: 6px 0 0 6px; } [dir="rtl"] .checkbox-label, [dir="rtl"] .dnew-toggle, [dir="rtl"] .console-toggle { flex-direction: row-reverse; justify-content: flex-end; } /* Toasts sit bottom-right in LTR; mirror so they do not cover the same controls the RTL layout moved there. */ [dir="rtl"] .cnf-toast { right: auto; left: 24px; } [dir="rtl"] .cnf-toast-close { right: auto; left: 8px; } /* --------------------------------------------------------------- * Footer * --------------------------------------------------------------- */ [dir="rtl"] .footer-section, [dir="rtl"] .footer-links { text-align: right; }