/* * Right-to-left and Persian typography overrides for the admin panel. * * WHY THIS IS A SEPARATE FILE, and not edits inside app.css: `app.css` is a BUILD ARTIFACT. It is * generated from the templates by the Tailwind standalone CLI (see resources/assets/README.md), so * anything written into it is destroyed the next time someone rebuilds — silently, and probably * long after the person who made the edit has forgotten. This file is hand-written, loaded AFTER * app.css, and survives every rebuild. * * It is also why these rules are plain CSS rather than Tailwind's own RTL variants (`ms-*`, `me-*`, * `rtl:` prefixes): using those would mean regenerating app.css, and there is no Tailwind binary in * this environment. Overriding the handful of DIRECTIONAL utilities the templates actually use is * the smaller, verifiable change. * * Everything is scoped under [dir="rtl"], so the panel remains correct if it is ever switched back * to LTR — the direction lives in one attribute on , not scattered through the templates. */ /* ── Typography ────────────────────────────────────────────────────────────────────────────── * * Vazirmatn is now SELF-HOSTED (public/assets/fonts/vazirmatn-*.woff2, @font-face declared in * resources/assets/app.css — the Tailwind INPUT, so it survives rebuilds). It is SIL OFL 1.1 * licensed (public/assets/fonts/OFL.txt), which explicitly permits embedding/redistribution, so * this is not the CDN violation §26 forbids: the file is downloaded once and committed, never * linked at runtime. `font-sans` in tailwind.config.js already points at it; this rule is the * fallback stack for the (rare) case the font fails to load. * * Latin numerals are left alone here — Persian digits are produced by the `fa_digits` Twig filter, * at the point of display, rather than by a font feature. A font-level substitution would also * change ids and uids that must stay copy-pasteable. */ [dir="rtl"] { font-family: Vazirmatn, "IRANSans", "Iranian Sans", Tahoma, "Segoe UI", system-ui, sans-serif; /* Persian glyphs sit differently in the line box; a little extra leading stops the descenders of one line touching the diacritics of the next. */ line-height: 1.85; } /* Monospace runs (uids, map_ids, correlation ids, raw state values) must stay LTR even inside an RTL page: they are identifiers, not prose, and the bidi algorithm would otherwise reorder a string that ends in a digit or a bracket. `unicode-bidi: embed` isolates them. */ [dir="rtl"] .font-mono, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; text-align: left; } /* ── Tables ─────────────────────────────────────────────────────────────────────────────────── */ /* .table-admin hard-codes text-align:left in the generated CSS. The bare th/td rule covers the 2026-08-09 redesign's plain tables too: the UA stylesheet gives its own alignment, which BEATS text-align inherited from the row — so without this, headers drift off their right-aligned values (the header/value misalignment reported on the jobs table). */ [dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] .table-admin, [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* ── Directional spacing ───────────────────────────────────────────────────────────────────── * * Only the utilities the templates actually use are mirrored. Adding the full Tailwind spacing * scale "just in case" would be a large block of untested CSS whose correctness nobody could * check; if a template starts using a new directional utility, it gets added here deliberately. */ [dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } /* Flex/grid alignment: `justify-end` means "the end of the line", which flexbox already resolves correctly against the writing direction — so it is deliberately NOT overridden here. Border sides, however, are physical and must be flipped. */ [dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; } [dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; } /* ── Form controls ──────────────────────────────────────────────────────────────────────────── */ [dir="rtl"] .field-input, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; } /* …except the ones that hold identifiers or URLs. An Aparat channel id or a Filimo series id typed into a right-aligned RTL box has its caret and its punctuation in the wrong place, and a URL becomes genuinely hard to read. Marked per-field in the templates with `dir="ltr"`. */ [dir="rtl"] input[dir="ltr"], [dir="rtl"] textarea[dir="ltr"] { text-align: left; } /* ── Lists ──────────────────────────────────────────────────────────────────────────────────── */ [dir="rtl"] .list-inside { padding-right: 0; } /* ── Numeric cells ─────────────────────────────────────────────────────────────────────────── * * Tabular figures so columns of counts line up even after the digits become Persian. */ [dir="rtl"] .tabular { font-variant-numeric: tabular-nums; }