/* * RTL Layout Overrides for Django Unfold Admin * * Unfold uses Tailwind CSS with physical direction classes (ml-, mr-, pl-, pr-, * border-l, border-r, text-left, text-right, left-*, right-*) that don't flip * automatically when dir="rtl" is set on . This stylesheet fixes those * physical properties under [dir="rtl"]. * * Scoped entirely under [dir="rtl"] so it has zero effect in LTR mode. */ /* ========================================================================== P0 — SIDEBAR ========================================================================== */ /* Sidebar border: flip from right to left edge */ [dir="rtl"] #nav-sidebar { border-right-width: 0; border-left-width: 1px; border-left-style: solid; } /* ========================================================================== P0 — CHANGELIST ACTIONS BAR (fixed bottom bar) ========================================================================== */ /* * The actions wrapper uses Alpine.js to toggle xl:ml-72 / xl:ml-0 based on * sidebar state. In RTL we need margin-right instead. * We reset margin-left and use margin-right for the offset. */ @media (min-width: 1280px) { [dir="rtl"] #changelist-actions-wrapper { margin-left: 0 !important; } } /* ========================================================================== P1 — TEXT ALIGNMENT ========================================================================== */ /* * Unfold uses text-left (text-align: left) on all table headers and cells. * In RTL, text should be right-aligned. */ /* Changelist table headers */ [dir="rtl"] #result_list th { text-align: right; } /* Changelist table cells */ [dir="rtl"] #result_list td { text-align: right; } /* Inline tabular headers */ [dir="rtl"] .tabular th { text-align: right; } /* Inline tabular cells */ [dir="rtl"] .tabular td.field-tabular { text-align: right; } /* Object history table */ [dir="rtl"] #change-history th, [dir="rtl"] #change-history td { text-align: right; } /* App list / dashboard tables */ [dir="rtl"] table caption, [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } /* ========================================================================== P1 — AUTO MARGINS (push elements to opposite side) ========================================================================== */ /* * ml-auto is used to push elements to the right in LTR. * In RTL, we need mr-auto to push to the left instead. * * These are the specific elements that use ml-auto in Unfold templates. * We use targeted selectors to avoid unintended side effects. */ /* Navigation user chevron icon */ [dir="rtl"] .material-symbols-outlined[style*="ml-auto"], [dir="rtl"] [class*="ml-auto"] { margin-left: unset !important; margin-right: auto !important; } /* Elements using mr-auto (e.g., submit Close/Delete) flip to ml-auto */ [dir="rtl"] [class*="mr-auto"] { margin-right: unset !important; margin-left: auto !important; } /* ========================================================================== P1 — BEFORE PSEUDO-ELEMENT MARGINS (responsive table labels) ========================================================================== */ /* * Result table cells and tabular inline cells use before:mr-auto * to push the responsive label pseudo-element. */ [dir="rtl"] #result_list td::before { margin-right: unset !important; margin-left: auto !important; padding-right: unset !important; padding-left: 1rem !important; } [dir="rtl"] .tabular td.field-tabular::before { margin-right: unset !important; margin-left: auto !important; padding-right: unset !important; padding-left: 1rem !important; } /* ========================================================================== P2 — TABLE CELL PADDING (first/last columns) ========================================================================== */ /* * Changelist result cells: lg:pl-3 lg:pr-0 → flip to lg:pr-3 lg:pl-0 */ @media (min-width: 1024px) { [dir="rtl"] #result_list td:first-child { padding-left: 0; padding-right: 0.75rem; } } /* * Tabular inline headings: first:pl-3 last:pr-3 → flip */ [dir="rtl"] .tabular th:first-child { padding-left: 0.375rem; padding-right: 0.75rem; } [dir="rtl"] .tabular th:last-child { padding-right: 0.375rem; padding-left: 0.75rem; } /* * Tabular inline row cells: lg:first:pl-3 lg:last:pr-3 → flip */ @media (min-width: 1024px) { [dir="rtl"] .tabular td.field-tabular:first-child { padding-left: 0.375rem; padding-right: 0.75rem; } [dir="rtl"] .tabular td.field-tabular:last-child { padding-right: 0.375rem; padding-left: 0.75rem; } } /* ========================================================================== P2 — SORT OPTION SPACING ========================================================================== */ /* * Sort icons in changelist headers use ml-1, ml-2 for spacing. * Flip to mr-1, mr-2 in RTL. */ [dir="rtl"] #result_list th a .material-symbols-outlined { margin-left: 0; margin-right: 0.25rem; } /* ========================================================================== P2 — FILTER BORDERS ========================================================================== */ /* * Horizontal boolean filters use border-r between items, last:border-r-0. * In RTL, flip to border-l. */ [dir="rtl"] #changelist-filter li { border-right-width: 0; border-left-width: 1px; border-left-style: solid; } [dir="rtl"] #changelist-filter li:last-child { border-left-width: 0; } /* ========================================================================== P2 — FILE INPUT WIDGET BORDER ========================================================================== */ [dir="rtl"] .clearable-file-input { border-right-width: 0; border-left-width: 1px; border-left-style: solid; } /* ========================================================================== P3 — PROGRESS BAR ROUNDED CORNERS ========================================================================== */ /* * Progress bar segments: last:rounded-r-default → last:rounded-l-default */ [dir="rtl"] .progress-bar > div:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--radius-default, 0.375rem); border-bottom-left-radius: var(--radius-default, 0.375rem); } [dir="rtl"] .progress-bar > div:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--radius-default, 0.375rem); border-bottom-right-radius: var(--radius-default, 0.375rem); } /* ========================================================================== P3 — DECORATIVE BARS (result list expand rows) ========================================================================== */ /* * Colored decorative bars on expanded rows use left-0. * Flip to right-0 in RTL. */ [dir="rtl"] #result_list td > div[class*="left-0"] { left: unset; right: 0; } /* ========================================================================== P2 — PAGINATION SPACING ========================================================================== */ [dir="rtl"] .paginator a[href="?all="] { margin-left: 0; margin-right: 1rem; } /* ========================================================================== P2 — BREADCRUMB / NAVIGATION CHEVRONS ========================================================================== */ /* * Chevron icons in breadcrumbs/navigation should mirror. * Material Symbols already support RTL via dir="rtl" on parent, * but explicitly flip any absolute-positioned chevrons. */ [dir="rtl"] .material-symbols-outlined[style*="chevron_right"]::before { content: "chevron_left"; } /* ========================================================================== P2 — FORM LAYOUT ALIGNMENT ========================================================================== */ /* * Form labels and help text should align right in RTL. */ [dir="rtl"] .form-row label, [dir="rtl"] .aligned label { text-align: right; } [dir="rtl"] .help, [dir="rtl"] .help-text { text-align: right; } /* ========================================================================== P2 — SELECT2 / AUTOCOMPLETE WIDGET FIXES ========================================================================== */ /* * Unfold uses autocomplete widgets that may have left-aligned dropdowns. * Ensure they respect RTL. */ [dir="rtl"] .select2-container, [dir="rtl"] .ts-control { text-align: right; direction: rtl; } /* ========================================================================== P3 — CHECKBOX / TOGGLE ALIGNMENT ========================================================================== */ /* * Checkboxes in changelist (action column) use ml- spacing. * Ensure they stay visually correct in RTL. */ [dir="rtl"] #action-toggle, [dir="rtl"] .action-select { margin-left: 0; margin-right: 0; }