/* Right-to-left support (Arabic, and any future he/fa/ur). * * The vendored bootstrap.min.css is the LTR build, so its directional margin * utilities (ms-* and me-*) compile to physical left/right and do NOT flip under * dir="rtl". i18n.js sets for RTL languages; here we mirror * the handful of directional utilities the UI actually uses. * * Never write the pair "ms-*" "/" inside these comments: that closes the comment * early and the parser's error recovery then eats the rule below it. It did exactly * that to .me-1 from the commit that added this file until 2026-07-29. */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* Checkboxes / radios (settings panel, admin forms) move to the right edge. */ [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } /* Bootstrap toggle switch (help-hints toggle). */ [dir="rtl"] .form-switch { padding-left: 0; padding-right: 2.5em; } [dir="rtl"] .form-switch .form-check-input { float: right; margin-left: 0; margin-right: -2.5em; } /* Input groups (the camera box + Build button) reverse order visually via flex, * which Bootstrap already handles; just fix the button corner rounding side. */ [dir="rtl"] .input-group > :not(:first-child) { border-radius: .375rem 0 0 .375rem; } [dir="rtl"] .input-group > :first-child { border-radius: 0 .375rem .375rem 0; } /* The notice banner's light sweep travels with the text, so it crosses right to left * here. Mirroring means both the direction of travel and the band's lean: 260deg is * 100deg reflected about the vertical (360 - 100), verified against the same band * flipped with scaleX(-1). Only these three custom properties change; the keyframes * and the animation itself stay single-sourced in index.html. The border half of the * pulse needs nothing, border-color has no direction. */ [dir="rtl"] #notice.pulse { --sweep-angle: 260deg; --sweep-from: 250%; --sweep-to: -150%; } /* Technical Latin tokens (defconfig, build id, commit, URLs) stay LTR so they * read correctly embedded in RTL sentences. */ [dir="rtl"] code, [dir="rtl"] #version, [dir="rtl"] #commit-badge { direction: ltr; unicode-bidi: isolate; }