fix(rtl): comprehensive layout fixes for Arabic

- Swap left/right panels in RTL mode
- Flip left panel border to left side
- Flip hint border to right side
- Flip lessons container indentation (margin, border, padding)
- Flip module expand icon and lesson checkmark margins
- Flip toggle switch slider margin
- Reverse setting row and preview controls
This commit is contained in:
2025-12-31 10:31:49 +01:00
parent 6f7964f014
commit 8d1a940588

View File

@@ -1359,6 +1359,12 @@ input:checked + .toggle-slider::before {
[dir="rtl"] .hint {
flex-direction: row-reverse;
text-align: right;
border-left: none;
border-right: 3px solid var(--primary-light);
}
[dir="rtl"] .hint-success {
border-right-color: var(--success-color);
}
/* RTL: Module list items */
@@ -1406,3 +1412,52 @@ input:checked + .toggle-slider::before {
[dir="rtl"] .logo {
direction: ltr;
}
/* RTL: Swap left/right panels */
[dir="rtl"] .game-layout {
flex-direction: row-reverse;
}
/* RTL: Left panel border flips to left side */
[dir="rtl"] .left-panel {
border-right: none;
border-left: 1px solid var(--border-color);
}
/* RTL: Lessons container indentation flips */
[dir="rtl"] .lessons-container {
margin-left: 0;
margin-right: 16px;
border-left: none;
border-right: 2px solid var(--border-color);
padding-left: 0;
padding-right: 8px;
}
/* RTL: Module expand icon */
[dir="rtl"] .module-header .expand-icon {
margin-left: 6px;
margin-right: 0;
}
/* RTL: Lesson checkmark position */
[dir="rtl"] .lesson-list-item::before {
margin-left: 6px;
margin-right: 0;
}
/* RTL: Toggle switch slider */
[dir="rtl"] .toggle-slider {
margin-right: 0;
margin-left: 8px;
}
/* RTL: Setting row */
[dir="rtl"] .setting-row {
flex-direction: row-reverse;
}
/* RTL: Preview controls */
[dir="rtl"] .preview-controls {
flex-direction: row-reverse;
}