/* ============================================================ LANGUAGE AND TEXT DIRECTION Loaded after style.css, mobile.css and the KYC sheets, by index.html and signup.html. js/i18n/i18n.js sets (Arabic: dir="rtl"); the inline script in sets them before the first paint. Section 1 is for every language: labels that were typed in capitals in the markup and are now translated through data-i18n keep their English look. Everything after it is scoped to html[dir="rtl"] (or html[lang="ar"]), so the left-to-right layout is not touched by this file. The rule for Arabic: the page mirrors, the figures do not. Prices, P&L, amounts, percentages, sizes, ids, account numbers and phone numbers are isolated left-to-right, so "-1,234.56" never shows as "1,234.56-" and "+971 50 123 4567" never as "4567 123 50 971+". The price chart and its time axis stay left-to-right (lightweight-charts draws them itself). ============================================================ */ /* ---------- 1. Every language ---------- */ .ow-btn-label, .m-order-dir, #margin-call-banner .mc-title, #ow-review .ow-up, #ow-review .ow-down { text-transform: uppercase; } /* An arrow in running text that points "forward" (Select ->, Use ->). */ .wt-fwd { display: inline-block; } /* ---------- 2. Arabic script ---------- */ /* letter-spacing pulls joined Arabic letters apart (Safari and older Chromium draw the gaps between the connected forms). The small-caps labels that carry it are English-only styling. */ html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: normal !important; } /* ---------- 3. Figures stay left-to-right ---------- */ html[dir="rtl"] .metric-value, html[dir="rtl"] #server-time, html[dir="rtl"] #chart-sym-price, html[dir="rtl"] #chart-sym-ext, html[dir="rtl"] .sp-price, html[dir="rtl"] .sp-spread, html[dir="rtl"] .sp-change, html[dir="rtl"] .ow-btn-price, html[dir="rtl"] #ow-q-margin, html[dir="rtl"] .m-asset-row .ar-bid, html[dir="rtl"] .m-asset-row .ar-ask, html[dir="rtl"] .m-asset-row .ar-change, html[dir="rtl"] .m-fab-px, html[dir="rtl"] .m-order-px { direction: ltr; unicode-bidi: isolate; } /* Instrument names are Latin ("Apple Inc.", "S&P 500"): laid out in their own direction, so the full stop stays at the end, but still right-aligned in the Arabic page. */ html[dir="rtl"] #chart-sym-name, html[dir="rtl"] .m-order-sym, html[dir="rtl"] .bp-table td.bp-sym { unicode-bidi: plaintext; } html[dir="rtl"] .m-asset-row .ar-sym, html[dir="rtl"] .sp-vs-row .sp-name { unicode-bidi: plaintext; text-align: right; } /* Positions / pending / finance / closed tables on a desktop. The phone cards (css/mobile.css) have their own rules, so this stops where the mobile layout starts: max-width 767px, or a phone on its side. Right- aligned under the right-aligned header. */ @media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (pointer: fine) { html[dir="rtl"] .bp-table td.bp-mono, html[dir="rtl"] .bp-table td.bp-time, html[dir="rtl"] .bp-table td.bp-id, html[dir="rtl"] .bp-table td.bp-total-pnl { direction: ltr; text-align: right; } html[dir="rtl"] .bp-table td.bp-sym { text-align: right; } } /* Fields that hold Latin text or codes (e-mail, IBAN, SWIFT, card digits, wallet, transaction reference) are dir="ltr" in the markup. While empty they show the Arabic placeholder right-to-left. */ html[dir="rtl"] input[dir="ltr"]:placeholder-shown, html[dir="rtl"] input[dir="auto"]:placeholder-shown, html[dir="rtl"] textarea[dir="auto"]:placeholder-shown { direction: rtl; } /* A bank or account name typed in Arabic is not set in the monospace face (it has no Arabic, and the fallback spreads the letters out). */ html[dir="rtl"] .tm-dep-val-text { font-family: inherit !important; } /* ---------- 4. Mirrored offsets ---------- Physical left/right in style.css and mobile.css, swapped for Arabic. */ html[dir="rtl"] .topbar-right { margin-left: 0; margin-right: auto; } html[dir="rtl"] #mobile-hamburger-btn { margin-right: 0; margin-left: 4px; } html[dir="rtl"] .mkt-pill-line2 { padding-left: 0; padding-right: 11px; } html[dir="rtl"] .sp-mkt-badge { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .sp-class-badge { margin-right: 0; margin-left: 4px; } html[dir="rtl"] .sp-group-count { margin-left: 0; margin-right: auto; } html[dir="rtl"] .ai-chart-icon { margin-right: 0; margin-left: 8px; } html[dir="rtl"] #chart-tools-group { margin-left: 0; margin-right: 8px; } /* The symbol label sticks at the start of the scrolling chart toolbar. */ html[dir="rtl"] #chart-symbol-label { left: auto; right: 0; padding-right: 0; padding-left: 4px; } html[dir="rtl"] .ow-seg { margin-left: 0; margin-right: auto; } html[dir="rtl"] .ow-rev-row b { text-align: left; } html[dir="rtl"] .m-sheet-sub { padding-left: 18px; padding-right: 52px; } /* A collapsed group's caret points to where its rows open from. */ html[dir="rtl"] .sp-group-header.collapsed .sp-group-arrow { transform: rotate(90deg); } /* Sidebar resize handle: on the sidebar's edge, which is on the right in Arabic (js/app.js measures the width from the right edge too). */ html[dir="rtl"] #lp-drag-handle { left: auto; right: calc(var(--sidebar-w) - 2px); } /* On/off switch (High contrast): off at the start, on at the end. */ html[dir="rtl"] .ud-switch::after { left: auto; right: 2px; } html[dir="rtl"] [aria-checked="true"] > .ud-switch::after { transform: translateX(-14px); } /* Toasts come in from the left edge. */ html[dir="rtl"] #toast-container { right: auto; left: 16px; } html[dir="rtl"] .toast { transform: translateX(-120%); } html[dir="rtl"] .toast.show { transform: translateX(0); } html[dir="rtl"]:not([data-contrast="high"]) .toast { border-left: 1px solid var(--border-primary); border-right: 3px solid #00d084; } /* Support chat: the bubble's tail corner follows its side. */ html[dir="rtl"] .cw-msg-trader { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; } html[dir="rtl"] .cw-msg-agent { border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; } html[dir="rtl"] .cw-msg-trader .cw-msg-time { text-align: left; } html[dir="rtl"] .cw-msg-agent .cw-msg-time { text-align: right; } /* ---------- 5. Direction icons ---------- Back, Sign in, Log out and "forward" arrows point the other way. Down-carets, charts, +/- and the like are not mirrored. */ html[dir="rtl"] #login-btn svg, html[dir="rtl"] #mob-back-btn svg, html[dir="rtl"] #m-chart-back-btn svg, html[dir="rtl"] #logout-btn svg, html[dir="rtl"] .wt-fwd { transform: scaleX(-1); } /* ---------- 6. Longer Arabic labels ---------- */ /* The guided ticket's step names: cut with an ellipsis, not mid-letter. */ html[dir="rtl"] .ow-step-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ALL / FX / STOCKS ... in the 260px sidebar: the Arabic names do not fit on one line, and the row scrolled with the last one cut in half. */ html[lang="ar"] .sp-type-filters { flex-wrap: wrap; } /* The account menu sized itself to its narrow button wrapper (180px), so with the longer Arabic words the language names were cut to "...tsch". */ html[lang="ar"] .user-dropdown { width: max-content; }