From a2dced90225ed4e1d130c7860f2903814fead6d0 Mon Sep 17 00:00:00 2001 From: Chaim Date: Thu, 9 Apr 2026 17:13:41 +0000 Subject: [PATCH] feat: add RTL override stylesheet for Hebrew UI support Co-Authored-By: Claude Opus 4.6 (1M context) --- web/static/rtl-override.css | 741 ++++++++++++++++++++++++++++++++++++ 1 file changed, 741 insertions(+) create mode 100644 web/static/rtl-override.css diff --git a/web/static/rtl-override.css b/web/static/rtl-override.css new file mode 100644 index 0000000..7fbe084 --- /dev/null +++ b/web/static/rtl-override.css @@ -0,0 +1,741 @@ +/* ========================================================================== + Paperclip AI - RTL Override for Hebrew (dir="rtl") + Generated from analysis of index-CYurTMty.css (Tailwind v4.1.18 + MDXEditor) + + Scoped under html[dir="rtl"] to apply only in RTL mode. + ========================================================================== */ + +/* -------------------------------------------------------------------------- + 1. GLOBAL DIRECTION + -------------------------------------------------------------------------- */ +html[dir="rtl"] { + direction: rtl; +} + +html[dir="rtl"] body { + text-align: right; +} + +/* -------------------------------------------------------------------------- + 2. TAILWIND UTILITY CLASSES - Padding Left/Right Swap + + .pl-* -> padding-right, .pr-* -> padding-left + -------------------------------------------------------------------------- */ +html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); } +html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: calc(var(--spacing) * 2); } +html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: calc(var(--spacing) * 3); } +html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: calc(var(--spacing) * 4); } +html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: calc(var(--spacing) * 5); } +html[dir="rtl"] .pl-5\.5 { padding-left: 0; padding-right: calc(var(--spacing) * 5.5); } +html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: calc(var(--spacing) * 6); } +html[dir="rtl"] .pl-7 { padding-left: 0; padding-right: calc(var(--spacing) * 7); } +html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: calc(var(--spacing) * 8); } + +html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: calc(var(--spacing) * 1); } +html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: calc(var(--spacing) * 2); } +html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); } +html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: calc(var(--spacing) * 6); } +html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: calc(var(--spacing) * 8); } +html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: calc(var(--spacing) * 10); } + +/* data-inset padding override */ +html[dir="rtl"] .data-\[inset\]\:pl-8[data-inset] { + padding-left: 0; + padding-right: calc(var(--spacing) * 8); +} + +/* Responsive padding overrides */ +html[dir="rtl"] .sm\:pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); } +html[dir="rtl"] .sm\:pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); } + +/* -------------------------------------------------------------------------- + 3. TAILWIND UTILITY CLASSES - Margin Left/Right Swap + + .ml-* -> margin-right, .mr-* -> margin-left + -------------------------------------------------------------------------- */ +html[dir="rtl"] .-ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * -1.5); } +html[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 0.5); } +html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: calc(var(--spacing) * 1); } +html[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 1.5); } +html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: calc(var(--spacing) * 2); } +html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: calc(var(--spacing) * 3); } +html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: calc(var(--spacing) * 4); } +html[dir="rtl"] .ml-5 { margin-left: 0; margin-right: calc(var(--spacing) * 5); } +html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } + +html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); } +html[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: calc(var(--spacing) * 1.5); } +html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: calc(var(--spacing) * 2); } +html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } + +/* file selector button margin */ +html[dir="rtl"] .file\:mr-4::file-selector-button { + margin-right: 0; + margin-left: calc(var(--spacing) * 4); +} + +/* Responsive margin overrides */ +html[dir="rtl"] .sm\:mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); } +html[dir="rtl"] .md\:ml-auto { margin-left: 0; margin-right: auto; } + +/* -------------------------------------------------------------------------- + 4. TAILWIND UTILITY CLASSES - Left/Right Position Swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .left-0 { left: auto; right: calc(var(--spacing) * 0); } +html[dir="rtl"] .left-1\/2 { left: auto; right: 50%; } +html[dir="rtl"] .left-2 { left: auto; right: calc(var(--spacing) * 2); } +html[dir="rtl"] .left-2\.5 { left: auto; right: calc(var(--spacing) * 2.5); } +html[dir="rtl"] .left-3 { left: auto; right: calc(var(--spacing) * 3); } +html[dir="rtl"] .left-4 { left: auto; right: calc(var(--spacing) * 4); } +html[dir="rtl"] .left-\[-14px\] { left: auto; right: -14px; } +html[dir="rtl"] .left-\[50\%\] { left: auto; right: 50%; } + +html[dir="rtl"] .-right-0\.5 { right: auto; left: calc(var(--spacing) * -0.5); } +html[dir="rtl"] .-right-2 { right: auto; left: calc(var(--spacing) * -2); } +html[dir="rtl"] .right-0 { right: auto; left: calc(var(--spacing) * 0); } +html[dir="rtl"] .right-1\.5 { right: auto; left: calc(var(--spacing) * 1.5); } +html[dir="rtl"] .right-2 { right: auto; left: calc(var(--spacing) * 2); } +html[dir="rtl"] .right-3 { right: auto; left: calc(var(--spacing) * 3); } +html[dir="rtl"] .right-4 { right: auto; left: calc(var(--spacing) * 4); } +html[dir="rtl"] .right-6 { right: auto; left: calc(var(--spacing) * 6); } + +/* Responsive left positioning */ +html[dir="rtl"] .sm\:left-3 { left: auto; right: calc(var(--spacing) * 3); } + +/* -------------------------------------------------------------------------- + 5. TAILWIND UTILITY CLASSES - Text Align Swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .text-left { text-align: right; } +html[dir="rtl"] .text-right { text-align: left; } +html[dir="rtl"] .sm\:text-left { text-align: right; } +html[dir="rtl"] .sm\:text-right { text-align: left; } + +/* -------------------------------------------------------------------------- + 6. TAILWIND UTILITY CLASSES - Float Swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .float-right { float: left; } + +/* -------------------------------------------------------------------------- + 7. TAILWIND UTILITY CLASSES - Border Left/Right Swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .border-l { + border-left-style: none; + border-left-width: 0; + border-right-style: var(--tw-border-style); + border-right-width: 1px; +} + +html[dir="rtl"] .border-l-2 { + border-left-style: none; + border-left-width: 0; + border-right-style: var(--tw-border-style); + border-right-width: 2px; +} + +html[dir="rtl"] .border-l-transparent { + border-left-color: initial; + border-right-color: #0000; +} + +html[dir="rtl"] .border-r { + border-right-style: none; + border-right-width: 0; + border-left-style: var(--tw-border-style); + border-left-width: 1px; +} + +/* Responsive border overrides */ +html[dir="rtl"] .sm\:border-l { + border-left-style: none; + border-left-width: 0; + border-right-style: var(--tw-border-style); + border-right-width: 1px; +} + +html[dir="rtl"] .lg\:border-r { + border-right-style: none; + border-right-width: 0; + border-left-style: var(--tw-border-style); + border-left-width: 1px; +} + +/* -------------------------------------------------------------------------- + 8. TAILWIND UTILITY CLASSES - Rounded Left/Right Swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .rounded-l-md { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; +} + +html[dir="rtl"] .rounded-r-md { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; +} + +html[dir="rtl"] .rounded-r-full { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3.40282e38px; + border-bottom-left-radius: 3.40282e38px; +} + +/* -------------------------------------------------------------------------- + 9. TAILWIND UTILITY CLASSES - TranslateX Flip + -------------------------------------------------------------------------- */ +html[dir="rtl"] .-translate-x-1\/2 { --tw-translate-x: 50%; } +html[dir="rtl"] .-translate-x-4 { --tw-translate-x: calc(var(--spacing) * 4); } +html[dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; } +html[dir="rtl"] .translate-x-0 { --tw-translate-x: calc(var(--spacing) * 0); } +html[dir="rtl"] .translate-x-0\.5 { --tw-translate-x: calc(var(--spacing) * -0.5); } +html[dir="rtl"] .translate-x-4\.5 { --tw-translate-x: calc(var(--spacing) * -4.5); } +html[dir="rtl"] .translate-x-5 { --tw-translate-x: calc(var(--spacing) * -5); } +html[dir="rtl"] .translate-x-\[-50\%\] { --tw-translate-x: 50%; } + +/* -------------------------------------------------------------------------- + 10. RADIX UI - data-side tooltip/popover offset swap + -------------------------------------------------------------------------- */ +html[dir="rtl"] .data-\[side\=left\]\:-translate-x-1[data-side=left] { + --tw-translate-x: calc(var(--spacing) * 1); +} + +html[dir="rtl"] .data-\[side\=right\]\:translate-x-1[data-side=right] { + --tw-translate-x: calc(var(--spacing) * -1); +} + +/* -------------------------------------------------------------------------- + 11. MDXEditor - Toolbar Components + -------------------------------------------------------------------------- */ + +/* Toolbar root - sticky, scrollable row */ +html[dir="rtl"] [class*="_toolbarRoot_"] { + flex-direction: row-reverse; +} + +/* Toolbar mode switch - push to left in RTL (was margin-left:auto) */ +html[dir="rtl"] [class*="_toolbarModeSwitch_"] { + margin-left: 0; + margin-right: auto; +} + +/* Toolbar separator - swap border sides */ +html[dir="rtl"] [class*="_toolbarRoot_"] div[role="separator"] { + border-left: 1px solid var(--baseBase); + border-right: 1px solid var(--baseBorder); +} + +/* Toolbar button adjacency spacing */ +html[dir="rtl"] [class*="_toolbarButton_"] + [class*="_toolbarButton_"] { + margin-left: 0; + margin-right: var(--spacing-1); +} + +/* Toolbar toggle first/last child border-radius swap */ +html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:first-of-type [class*="_toolbarToggleItem_"]:only-child, +html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:first-child, +html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); +} + +html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:last-of-type [class*="_toolbarToggleItem_"]:only-child, +html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:last-child, +html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); +} + +/* Dropdown arrow - push to right in RTL (was margin-left:auto) */ +html[dir="rtl"] [class*="_toolbarNodeKindSelectDropdownArrow_"], +html[dir="rtl"] [class*="_selectDropdownArrow_"] { + margin-left: 0; + margin-right: auto; +} + +/* Dropdown container - border radius swap */ +html[dir="rtl"] [class*="_toolbarNodeKindSelectContainer_"], +html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"], +html[dir="rtl"] [class*="_toolbarCodeBlockLanguageSelectContent_"], +html[dir="rtl"] [class*="_selectContainer_"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-base); +} + +html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"], +html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"] [class*="_selectItem_"]:first-child { + border-top-right-radius: 0; + border-top-left-radius: var(--radius-base); +} + +/* Select trigger open state - radius swap */ +html[dir="rtl"] [class*="_toolbarNodeKindSelectTrigger_"][data-state="open"], +html[dir="rtl"] [class*="_toolbarButtonSelectTrigger_"][data-state="open"], +html[dir="rtl"] [class*="_selectTrigger_"][data-state="open"] { + border-bottom-right-radius: var(--radius-none); + border-bottom-left-radius: var(--radius-none); +} + +/* Select item last child - radius swap */ +html[dir="rtl"] [class*="_toolbarNodeKindSelectItem_"]:last-child, +html[dir="rtl"] [class*="_selectItem_"]:last-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-base); +} + +/* -------------------------------------------------------------------------- + 12. MDXEditor - CodeMirror & Image Edit Toolbars + Position: was right:0 -> left:0, border-bottom-left -> border-bottom-right + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_codeMirrorToolbar_"] { + right: auto; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-base); +} + +html[dir="rtl"] [class*="_editImageToolbar_"] { + right: auto; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-base); +} + +/* -------------------------------------------------------------------------- + 13. MDXEditor - Property Panel + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_propertyPanelTitle_"] { + padding-left: 0; + padding-right: var(--spacing-2); +} + +html[dir="rtl"] [class*="_propertyEditorTable_"] th { + text-align: right; +} + +html[dir="rtl"] [class*="_propertyEditorTable_"] [class*="_readOnlyColumnCell_"] { + padding-left: initial; + padding-right: 0; +} + +html[dir="rtl"] [class*="_readOnlyColumnCell_"] { + padding-left: initial; + padding-right: 0; +} + +html[dir="rtl"] [class*="_propertyEditorTable_"] td:last-child [class*="_iconButton_"] { + margin-left: 0; + margin-right: var(--spacing-4); +} + +/* -------------------------------------------------------------------------- + 14. MDXEditor - Dialog + -------------------------------------------------------------------------- */ +/* Dialog centered positioning - no swap needed (translate-50% centers) */ + +html[dir="rtl"] [class*="_dialogTitle_"] { + padding-left: 0; + padding-right: var(--spacing-2); +} + +/* Link dialog input button */ +html[dir="rtl"] [class*="_linkDialogInputWrapper_"] > button { + padding-right: 0; + padding-left: var(--spacing-2); +} + +/* Link dialog input dropdown open state */ +html[dir="rtl"] [class*="_linkDialogInputWrapper_"][data-visible-dropdown="true"] { + border-bottom-left-radius: var(--radius-none); + border-bottom-right-radius: var(--radius-none); +} + +/* Link dialog preview anchor */ +html[dir="rtl"] [class*="_linkDialogPreviewAnchor_"] { + margin-right: 0; + margin-left: var(--spacing-1); +} + +/* -------------------------------------------------------------------------- + 15. MDXEditor - Generic Component Name + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_genericComponentName_"] { + padding-right: 0; + padding-left: var(--spacing-2); +} + +/* -------------------------------------------------------------------------- + 16. MDXEditor - Table Editor + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_tableEditor_"] thead > tr > th { + text-align: left; /* was right, swap */ +} + +html[dir="rtl"] [class*="_toolCell_"] { + text-align: left; /* was right, swap */ +} + +html[dir="rtl"] [class*="_leftAlignedCell_"] { + text-align: right; /* was left, swap */ +} + +html[dir="rtl"] [class*="_rightAlignedCell_"] { + text-align: left; /* was right, swap */ +} + +/* Table column editor toolbar separators */ +html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] [role="separator"] { + margin-left: 0; + margin-right: var(--spacing-1); +} + +/* Add column button - was on right side */ +html[dir="rtl"] [class*="_addColumnButton_"] { + margin-left: 0; + margin-right: var(--spacing-px); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--radius-medium); + border-bottom-left-radius: var(--radius-medium); +} + +/* Toggle group first/last child radius swap */ +html[dir="rtl"] [class*="_toggleGroupRoot_"] button:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); +} + +html[dir="rtl"] [class*="_toggleGroupRoot_"] button:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); +} + +/* -------------------------------------------------------------------------- + 17. MDXEditor - Diff Source Toggle + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_diffSourceToggleWrapper_"] { + margin-left: 0; + margin-right: auto; + right: auto; + left: 0; +} + +/* -------------------------------------------------------------------------- + 18. MDXEditor - Select with Label + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_selectWithLabel_"] { + margin-left: 0; + margin-right: var(--spacing-2); +} + +html[dir="rtl"] [class*="_toolbarTitleMode_"] { + margin-left: 0; + margin-right: var(--spacing-2); +} + +/* -------------------------------------------------------------------------- + 19. MDXEditor - Downshift Autocomplete + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_downshiftInputWrapper_"] > button { + padding-right: 0; + padding-left: var(--spacing-2); +} + +html[dir="rtl"] [class*="_downshiftInputWrapper_"][data-visible-dropdown="true"] { + border-bottom-left-radius: var(--radius-none); + border-bottom-right-radius: var(--radius-none); +} + +html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul { + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-medium); +} + +html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul li:last-of-type { + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--radius-medium); +} + +/* -------------------------------------------------------------------------- + 20. MDXEditor - List Items (Checkbox) + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_listItemChecked_"], +html[dir="rtl"] [class*="_listItemUnchecked_"] { + padding-left: 0; + padding-right: var(--spacing-6); +} + +html[dir="rtl"] [class*="_listItemChecked_"]:before, +html[dir="rtl"] [class*="_listItemUnchecked_"]:before { + left: auto; + right: 0; +} + +html[dir="rtl"] [class*="_listItemChecked_"]:after { + left: auto; + right: var(--spacing-1_5); +} + +/* -------------------------------------------------------------------------- + 21. MDXEditor - Admonitions (Info/Warning/Danger blocks) + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_admonitionDanger_"], +html[dir="rtl"] [class*="_admonitionInfo_"], +html[dir="rtl"] [class*="_admonitionNote_"], +html[dir="rtl"] [class*="_admonitionTip_"], +html[dir="rtl"] [class*="_admonitionCaution_"] { + border-left: none; + border-right: 3px solid var(--admonitionBorder); +} + +/* -------------------------------------------------------------------------- + 22. Paperclip Markdown Rendered Content + -------------------------------------------------------------------------- */ +html[dir="rtl"] .paperclip-mdxeditor-content ul, +html[dir="rtl"] .paperclip-mdxeditor-content ol { + padding-left: 0; + padding-right: 1.6em; +} + +html[dir="rtl"] .paperclip-mdxeditor-content blockquote { + border-left: none; + border-right: 3px solid var(--border); + padding-left: 0; + padding-right: 1em; +} + +html[dir="rtl"] .paperclip-markdown :where(ul, ol) { + padding-left: 0; + padding-right: 1.15rem; +} + +html[dir="rtl"] .paperclip-markdown li { + padding-left: 0; + padding-right: .2rem; +} + +html[dir="rtl"] .paperclip-markdown blockquote { + border-left: none; + border-right: .24rem solid var(--border); + margin-left: initial; + margin-right: 0; + padding-left: 0; + padding-right: .95rem; +} + +@supports (color: color-mix(in lab, red, red)) { + html[dir="rtl"] .paperclip-markdown blockquote { + border-right: .24rem solid color-mix(in oklab, var(--border) 84%, var(--muted-foreground) 16%); + } +} + +html[dir="rtl"] .paperclip-markdown th { + text-align: right; +} + +/* Nested list/ol padding overrides from Tailwind arbitrary selectors */ +html[dir="rtl"] .\[\&_ol\]\:pl-5 ol { + padding-left: 0; + padding-right: calc(var(--spacing) * 5); +} + +html[dir="rtl"] .\[\&_ul\]\:pl-5 ul { + padding-left: 0; + padding-right: calc(var(--spacing) * 5); +} + +/* -------------------------------------------------------------------------- + 23. CodeMirror (inside MDXEditor) - Cursor & Gutters + -------------------------------------------------------------------------- */ +html[dir="rtl"] .paperclip-mdxeditor .cm-cursor, +html[dir="rtl"] .paperclip-mdxeditor .cm-dropCursor { + border-left-color: transparent !important; + border-right-color: #cdd6f4 !important; +} + +html[dir="rtl"] .paperclip-mdxeditor .cm-gutters { + border-right: none !important; + border-left: 1px solid #313244 !important; +} + +/* -------------------------------------------------------------------------- + 24. Sidebar Layout (shadcn/ui sidebar pattern) + + The sidebar CSS variables are defined but the layout depends on the + app's component structure. These overrides handle common patterns. + -------------------------------------------------------------------------- */ + +/* If sidebar is positioned with left:0, move to right:0 */ +html[dir="rtl"] [data-sidebar="sidebar"] { + left: auto; + right: 0; +} + +/* Sidebar rail/resize handle */ +html[dir="rtl"] [data-sidebar="rail"] { + left: auto; + right: 0; +} + +/* Main content margin adjustment when sidebar present */ +html[dir="rtl"] [data-sidebar="content"] { + margin-left: 0; +} + +/* -------------------------------------------------------------------------- + 25. Dialog Overlay - full screen, no directional change needed + But ensure overlay covers correctly + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_dialogOverlay_"] { + left: 0; + right: 0; +} + +/* -------------------------------------------------------------------------- + 26. Radix UI Popover/Dropdown Transform Origins + These use CSS variables, so they auto-adapt. No override needed. + -------------------------------------------------------------------------- */ + +/* -------------------------------------------------------------------------- + 27. Group rotation for collapsible triggers (chevron icons) + In RTL, a right-pointing chevron should point left by default + and rotate when open + -------------------------------------------------------------------------- */ +html[dir="rtl"] .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state=open] *) { + rotate: -90deg; +} + +/* -------------------------------------------------------------------------- + 28. General Hebrew typography adjustments + -------------------------------------------------------------------------- */ +html[dir="rtl"] input, +html[dir="rtl"] textarea, +html[dir="rtl"] select { + text-align: right; +} + +html[dir="rtl"] input[type="email"], +html[dir="rtl"] input[type="url"], +html[dir="rtl"] input[type="number"] { + text-align: left; + direction: ltr; +} + +/* Placeholder text alignment */ +html[dir="rtl"] input::placeholder, +html[dir="rtl"] textarea::placeholder { + text-align: right; +} + +/* -------------------------------------------------------------------------- + 29. Scrollbar position (WebKit) - move to left side in RTL + -------------------------------------------------------------------------- */ +html[dir="rtl"] ::-webkit-scrollbar { + /* Scrollbars auto-flip in RTL for most browsers */ +} + +/* -------------------------------------------------------------------------- + 30. Active SVG translate (press feedback) - flip X direction + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_toolbarToggleItem_"]:active svg, +html[dir="rtl"] [class*="_toolbarButton_"]:active svg, +html[dir="rtl"] [class*="_actionButton_"]:active svg, +html[dir="rtl"] [class*="_tableColumnEditorTrigger_"]:active svg, +html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] > button:active svg, +html[dir="rtl"] [class*="_toggleGroupRoot_"] button:active svg, +html[dir="rtl"] [class*="_addColumnButton_"]:active svg, +html[dir="rtl"] [class*="_addRowButton_"]:active svg { + transform: translate(-1px, 1px); +} + +/* -------------------------------------------------------------------------- + 31. Responsive breakpoint overrides + -------------------------------------------------------------------------- */ +@media (min-width: 640px) { + html[dir="rtl"] .sm\:flex-row { + flex-direction: row-reverse; + } +} + +@media (min-width: 768px) { + html[dir="rtl"] .md\:flex-row { + flex-direction: row-reverse; + } +} + +@media (min-width: 1024px) { + html[dir="rtl"] .lg\:flex-row { + flex-direction: row-reverse; + } +} + +@media (min-width: 1280px) { + html[dir="rtl"] .xl\:flex-row { + flex-direction: row-reverse; + } +} + +/* -------------------------------------------------------------------------- + 32. Fix for centered dialogs using left:50% + translate(-50%, -50%) + These should remain centered, so override left->right and flip translate + -------------------------------------------------------------------------- */ +html[dir="rtl"] [class*="_dialogContent_"], +html[dir="rtl"] [class*="_largeDialogContent_"] { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} + +@keyframes rtl-contentShow { + 0% { + opacity: 0; + transform: translate(50%, -48%) scale(.96); + } + to { + opacity: 1; + transform: translate(50%, -50%) scale(1); + } +} + +html[dir="rtl"] [class*="_dialogContent_"], +html[dir="rtl"] [class*="_largeDialogContent_"] { + animation: rtl-contentShow .15s cubic-bezier(.16, 1, .3, 1); +} + +/* -------------------------------------------------------------------------- + 33. Fix Tailwind space-x utilities + These already use margin-inline-start/end, so they should auto-adapt. + No override needed for space-x-* classes (they use logical properties). + -------------------------------------------------------------------------- */ + +/* -------------------------------------------------------------------------- + 34. Override for the bottom-positioned elements with safe-area-inset + These are vertical-only, no RTL swap needed. + -------------------------------------------------------------------------- */ + +/* -------------------------------------------------------------------------- + 35. Miscellaneous icon and decorative element adjustments + -------------------------------------------------------------------------- */ + +/* Ensure icons in buttons don't get mirrored unintentionally */ +html[dir="rtl"] svg { + /* Most icons should NOT be mirrored. Only directional icons need it. */ +} + +/* Mirror directional icons (arrows, chevrons) */ +html[dir="rtl"] [class*="chevron-left"] svg, +html[dir="rtl"] [class*="chevron-right"] svg, +html[dir="rtl"] [class*="arrow-left"] svg, +html[dir="rtl"] [class*="arrow-right"] svg { + transform: scaleX(-1); +}