/* ================================================================ ForumHub — RTL Override Stylesheet Automatically mirrors layout when ================================================================ */ /* --- Base direction --- */ html[dir="rtl"] { direction: rtl; } /* ================================================================ Margin overrides ================================================================ */ html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } html[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: 0.375rem; } html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } html[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: 0.375rem; } html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } html[dir="rtl"] .ml-2\.5 { margin-left: 0; margin-right: 0.625rem; } html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } /* ================================================================ Padding overrides ================================================================ */ html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; } html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; } html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; } html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; } html[dir="rtl"] .pl-9 { padding-left: 0; padding-right: 2.25rem; } html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; } html[dir="rtl"] .pl-11 { padding-left: 0; padding-right: 2.75rem; } /* ================================================================ Positioning overrides ================================================================ */ html[dir="rtl"] .left-0 { left: auto; right: 0; } html[dir="rtl"] .left-0\.5 { left: auto; right: 0.125rem; } html[dir="rtl"] .left-1\/2 { left: auto; right: 50%; } html[dir="rtl"] .left-3 { left: auto; right: 0.75rem; } html[dir="rtl"] .left-3\.5 { left: auto; right: 0.875rem; } html[dir="rtl"] .left-4 { left: auto; right: 1rem; } html[dir="rtl"] .right-0 { right: auto; left: 0; } html[dir="rtl"] .right-0\.5 { right: auto; left: 0.125rem; } html[dir="rtl"] .right-1 { right: auto; left: 0.25rem; } html[dir="rtl"] .right-1\.5 { right: auto; left: 0.375rem; } html[dir="rtl"] .right-2 { right: auto; left: 0.5rem; } html[dir="rtl"] .right-3 { right: auto; left: 0.75rem; } html[dir="rtl"] .right-4 { right: auto; left: 1rem; } html[dir="rtl"] .-right-0\.5 { right: auto; left: -0.125rem; } html[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; } html[dir="rtl"] .-right-1\.5 { right: auto; left: -0.375rem; } /* ================================================================ Text alignment overrides ================================================================ */ html[dir="rtl"] .text-left { text-align: right; } html[dir="rtl"] .text-right { text-align: left; } /* ================================================================ Border overrides (accent borders) ================================================================ */ html[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; } html[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; } html[dir="rtl"] .border-l-0 { border-left-width: 0; border-right-width: 0; } html[dir="rtl"] .border-r-0 { border-right-width: 0; border-left-width: 0; } /* ================================================================ Border-radius overrides ================================================================ */ html[dir="rtl"] .rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } html[dir="rtl"] .rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; } html[dir="rtl"] .rounded-r-lg { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } html[dir="rtl"] .rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; } html[dir="rtl"] .rounded-tl-sm { border-top-left-radius: 0; border-top-right-radius: 0.125rem; } html[dir="rtl"] .rounded-tr-sm { border-top-right-radius: 0; border-top-left-radius: 0.125rem; } /* ================================================================ Transform overrides ================================================================ */ /* Center-positioned elements (left: 50% + -translate-x-1/2) */ html[dir="rtl"] .-translate-x-1\/2 { transform: translateX(50%); } /* ================================================================ Dropdown menu alignment ================================================================ */ html[dir="rtl"] .dropdown-menu { right: auto; left: 0; } html[dir="rtl"] .origin-top-right { transform-origin: top left; } /* ================================================================ Search input padding ================================================================ */ html[dir="rtl"] .search-input { padding-left: 1rem; padding-right: 2.25rem; } /* ================================================================ Post sidebar text alignment ================================================================ */ html[dir="rtl"] .post-sidebar { text-align: center; } /* ================================================================ Toggle switches — settings.html (.toggle-slider) ================================================================ */ html[dir="rtl"] .toggle-slider::before { left: auto; right: 0.1875rem; } html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before { transform: translateX(-1.125rem); } /* ================================================================ Toggle switches — components (.toggle-dot) ================================================================ */ html[dir="rtl"] .toggle-dot { left: auto; right: 0.1875rem; } html[dir="rtl"] .toggle-switch input:checked ~ .toggle-track .toggle-dot { transform: translateX(-1.125rem); } /* ================================================================ Inline Tailwind pseudo-element toggles (account.html) ================================================================ */ html[dir="rtl"] .after\:left-0\.5::after { left: auto !important; right: 0.125rem !important; } html[dir="rtl"] .peer:checked ~ .peer-checked\:after\:translate-x-\[18px\]::after { transform: translateX(-18px) !important; } /* ================================================================ Font Awesome directional icon flips ================================================================ */ html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-arrow-up-right-from-square { transform: scaleX(-1); } /* ================================================================ Toast animation direction ================================================================ */ html[dir="rtl"] .toast-enter { animation: slideInRtl 0.3s ease forwards; } html[dir="rtl"] .toast-exit { animation: slideOutRtl 0.25s ease forwards; } @keyframes slideInRtl { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRtl { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }