/* THE RIGHT-TO-LEFT SHELL (ORD-0091, slab 5 — Arabic). * * Every dictionary before this one reads left to right, so a screen in it * needed no more than its words. Arabic does not: the reader starts at the * right edge, and a shell whose rail is nailed to the left with `left: 0` * puts the navigation behind the reader and the text under it. * * The swap already stamps the direction — frontend/mcs_i18n.js carries * RTL = { ar: 1, ur: 1 } and sets dir="rtl" on when one of them is * chosen. A browser flips what it is allowed to flip on its own: inline * text, flex and grid track order, table cells, list markers. What it * cannot flip is a physical anchor somebody wrote by hand — `left: 0`, * `margin-left`, `border-left`, `right: -13px` — because those name a side * of the screen, not a side of the reading. This sheet is the list of * those anchors, and it is deliberately ONE file rather than a `[dir=rtl]` * block hidden at the bottom of each portal's stylesheet: when the sixth * language lands there is one place to read, and a portal that forgets to * carry it fails by name in tests/test_languages_ord0091.py. * * Every rule here is guarded by [dir="rtl"], so a page in English, Spanish, * Chinese, Hindi or French is not touched by loading it. Nothing in here * restyles anything: each rule releases a physical side and states the * other, which is why the declarations come in pairs. * * What is NOT flipped, on purpose: * · digits. Arabic business writing uses the Western digits the rest of * the platform prints, and a claim number, a policy number and a * dollar figure are the same characters in every language on file. * · the logo, the brand block and the chart canvases — a picture does * not have a reading direction. * · anything a person typed into a record. The platform never translates * it and never re-lays it out. */ /* ── the rail and what it pushes ────────────────────────────────────── * The Administrator Portal and the five generated from it, the Personnel * Portal and the Operator Portal all hang a fixed rail off the left edge * and push the topbar and the content clear of it. Under RTL the rail * belongs on the right and everything it pushes reverses with it. */ [dir="rtl"] .sidebar { left: auto; right: 0; box-shadow: -2px 0 16px rgba(0,0,0,.2); } [dir="rtl"] .topbar { left: 0; right: var(--sidebar-w); } [dir="rtl"] .main, [dir="rtl"] .content, [dir="rtl"] #app-content { margin-left: 0; margin-right: var(--sidebar-w); } /* The Waypoint Center's rail was a table cell when this sheet was first * written, and a table cell reverses on its own. Since then (ORD-0220) the * rail is fixed to the left edge at 221px with !important, the top bar * starts at 221px and the page is pushed 221px, all inside a min-width * media block so the phone drawer keeps its own rules — so the release has * to carry the same weight and sit in the same block. Railed (ORD-0114) * the two numbers are 64px. */ [dir="rtl"] #sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,0.07); } @media (min-width: 768px) { [dir="rtl"] #sidebar { left: auto !important; right: 0 !important; } [dir="rtl"] #topbar { left: 0 !important; right: 221px !important; } [dir="rtl"] #content { margin-left: 0 !important; margin-right: 221px !important; } [dir="rtl"] #topbar-search { margin-left: 0; margin-right: 8px; } [dir="rtl"] body.sidebar-hidden #topbar { right: 64px !important; } [dir="rtl"] body.sidebar-hidden #content { margin-right: 64px !important; } } /* ── the hide-sidebar control (ORD-0114, ORD-0161) ──────────────────── * The button hangs half off the rail's inner edge. That edge is the right * one in English and the left one in Arabic; the chevron pair it carries * points the way the rail closes, so it turns with it. */ [dir="rtl"] .sidebar > .sb-hide, [dir="rtl"] #sidebar > .sb-hide, [dir="rtl"] body.sidebar-hidden .sidebar > .sb-hide, [dir="rtl"] body.sidebar-hidden #sidebar > .sb-hide { right: auto; left: -13px; } [dir="rtl"] .sb-hide > svg, [dir="rtl"] .sb-hide::before { transform: scaleX(-1); } /* ── On This Page (ORD-0107) ────────────────────────────────────────── * The marker rides the edge the reader's eye returns to. */ [dir="rtl"] .six-ii { border-left: none; border-right: 2px solid transparent; border-radius: 6px 0 0 6px; } [dir="rtl"] .six-ii.on { border-left-color: transparent; border-right-color: var(--carolina, #4B9CD3); } /* ── the gear, its menu and the Preferences drawer ──────────────────── * The gear sits at the reader's far edge of the topbar, so its menu hangs * from that same edge, and the drawer slides in from it. */ [dir="rtl"] .wp-menu { right: auto; left: 0; text-align: right; } [dir="rtl"] .wp-menu-item { text-align: right; } [dir="rtl"] .wp-drawer { right: auto; left: 0; border-left: none; border-right: 1px solid var(--wp-line, #DDE3EA); box-shadow: 12px 0 40px rgba(0,0,0,.25); } @keyframes wp-slide-rtl { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } } [dir="rtl"] .wp-drawer { animation-name: wp-slide-rtl; } /* A switch reads as off on the side the reader starts from, so the knob's * rest and travel swap ends. */ [dir="rtl"] .wp-sw-knob { left: auto; right: 3px; transition: right .15s ease; } [dir="rtl"] .wp-sw.on .wp-sw-knob { left: auto; right: 19px; } /* ── sortable tables (ORD-0069's marker) ────────────────────────────── * The room kept for the sort marker is kept on the side the marker is on. */ [dir="rtl"] th.wp-sortable { padding-right: 0; padding-left: 18px; } [dir="rtl"] th.wp-sortable::after { right: auto; left: 5px; } /* ── Remy and the toast (ORD-0117, ORD-0118) ───────────────────────── * Both park at the reader's near bottom corner. Remy's dock states its * corner inline on the page, so releasing that corner takes the same * weight the inline declaration has — that is why these two rules carry * it and nothing else in this sheet does. A person who has dragged Remy * somewhere of their own keeps where they put it: the drag writes its own * inline position, later in the same declaration, and wins. */ [dir="rtl"] #chat-dock { right: auto !important; left: 20px !important; } /* The Administrator Portal and the four generated from it park their toast * at the bottom right, as a sibling of the app shell. The Publisher Portal's * toast is centred with left: 50% and a translate, and a bare #toast rule * would drag it half off the screen — so the rule names the shell whose * toast is right-anchored, and a centred toast is left where it is. */ [dir="rtl"] #app-shell ~ #toast { right: auto; left: 24px; } /* The Operator Portal stacks its toasts in a wrap at the same corner, and * each one carries its colour on its leading edge. */ [dir="rtl"] #toast-wrap { right: auto; left: 22px; } [dir="rtl"] .toast { border-left: none; border-right: 3px solid var(--carolina, #4B9CD3); } [dir="rtl"] .toast.ok { border-right-color: var(--success, #2e7d32); } [dir="rtl"] .toast.err { border-right-color: var(--danger, #c62828); } /* ── panels that hang from the topbar's far edge ────────────────────── * The notification panel is positioned inline on the pages that carry it, * for the same reason and with the same remedy. */ [dir="rtl"] #notif-panel { right: auto !important; left: 0 !important; } /* ── the Publisher Portal (ORD-0230 ruling 3) ───────────────────────── * Its topbar is a flex row whose far group is pushed over with an * automatic left margin; under RTL the far edge is the left one, so the * automatic margin swaps sides. The application's done-panel carries its * colour on the leading edge, which turns with the reading. */ [dir="rtl"] .topbar-right { margin-left: 0; margin-right: auto; } [dir="rtl"] .apply-done { border-left: none; border-right: 4px solid var(--gold, #C8A84B); } /* The public reporting form's language row, the claim header and every * other plain flex row on these pages reverse on their own: a flex row * follows the writing direction. Nothing is written here for them, and * nothing needs to be. */