/* * Corrections for the right-to-left locale. * * The site is Arabic by default but the document has been left-to-right since it * was built, so every heading, label and form control sat on the wrong edge and * views worked around it one at a time with inline `direction: rtl`. now * carries dir from the locale (ShowTextDirection), which fixes reading order, * text alignment, flex and grid order everywhere at once. * * What it cannot fix is styling written against physical edges. Those live here. * Everything is scoped to [dir="rtl"], so the English locale renders exactly as * it did before this file existed. * * Loaded after the theme and the Tailwind build so it wins on specificity ties. */ /* * Bootstrap 4's Reboot hard-codes `text-align: left` on to work around an * old IE bug. It inherits into every element on the page, so `dir="rtl"` alone * leaves all the text on the left. `start` is what Reboot would have used if the * keyword had existed at the time. */ [dir="rtl"] body { text-align: start; } /* * @tailwindcss/forms paints the select chevron as a background image pinned to * the right edge and reserves padding on the right for it. Under RTL the option * text starts on that same edge and runs into the arrow. */ [dir="rtl"] select, [dir="rtl"] .form-select { background-position: left 0.5rem center; padding-right: 0.75rem; padding-left: 2.5rem; } /* ------------------------------------------------------------------ * * Theme rules anchored to a physical edge. * * main.css carries 163 declarations that name left or right. Only the 39 below * match markup this site actually renders, and of those only the asymmetric ones * need flipping - `.row--grid`'s equal negative margins, for instance, are the * same either way. Each was found by matching the theme's selectors against the * rendered HTML of every public page, not by reading the file top to bottom. * ------------------------------------------------------------------ */ /* Header ----------------------------------------------------------- */ /* Every mirror below is scoped to the breakpoint at which the theme sets the physical value it is mirroring. Getting that wrong is not harmless: an unscoped mirror of a desktop-only rule lands on mobile as a margin the left-to-right layout never has. That is what broke this header - a 50px margin on .header__logo and 22px of padding on .header__action--signin, neither of which exists below 1200px and 576px respectively, together took ~70px out of a 430px bar. The logo shrank, the row overflowed, and the username and its notification badge wrapped onto separate lines, so the profile pill rendered three lines tall. The theme's own breakpoints are: logo 1200, nav-item 1200, actions 768/1200, action 768, signin 576/768/1200, burger 576. */ [dir="rtl"] .header__nav-link svg { margin-left: 0; margin-right: 1px; } /* margin-left:auto is what pushes this group to the far end of the bar; it is the spacer, not a gap. Flipping it to a fixed value collapsed the bar into three evenly spread groups with the nav stranded in the middle. */ [dir="rtl"] .header__actions { margin-left: 42px; margin-right: auto; } [dir="rtl"] .header__action { margin-left: 0; margin-right: 20px; } /* The gap goes between the actions, so the one on the outside does without. */ [dir="rtl"] .header__action:first-child { margin-right: 0; } /* The mobile nav is a fixed drawer that slides in from the right, with its divider on the left. The burger that opens it is now on the left, so the drawer comes from that side too and the divider swaps with it. Scoped below 1200px: above it the theme turns the drawer back into an inline row with no border at all, and flipping a border there would draw one that does not exist in the left-to-right layout. */ @media (max-width: 1199.98px) { [dir="rtl"] .header__menu { right: auto; left: 0; transform: translate3d(-281px, 0, 0); border-left: 0; border-right: 1px solid #222227; } [dir="rtl"] .header__menu--active { transform: translate3d(0, 0, 0); } } /* The burger is absolutely positioned, so `right` has to be released as well as `left` set, or it stays pinned where it was. */ [dir="rtl"] .header__btn { right: auto; left: 15px; } /* Its three bars are absolutely positioned inside it and get shorter downwards, so they read as a shape pointing away from the edge they are anchored to. Anchored right while the burger sits on the left, that shape pointed the wrong way. */ [dir="rtl"] .header__btn span { right: auto; left: 0; } /* The avatar's right margin pushed it out through the pill's right edge and over the name once the row reversed. */ [dir="rtl"] .header__profile-btn img { margin-right: 0; margin-left: 6px; } [dir="rtl"] .header__profile-btn div { margin-left: 0; margin-right: 6px; } [dir="rtl"] .header__profile-btn svg { margin-left: 0; margin-right: 6px; } [dir="rtl"] .header__profile-btn--verified:after { left: auto; right: 30px; } [dir="rtl"] .header__profile-menu { right: auto !important; left: 0 !important; } [dir="rtl"] .header__profile-menu a svg { margin-right: 0; margin-left: 10px; } @media (min-width: 576px) { /* The theme moves the burger in from the edge here, and only here. */ [dir="rtl"] .header__btn { right: auto; left: 30px; } /* Padding, and the one-pixel divider it makes room for, on the side of the sign-in action that faces the rest of the bar. Neither exists below this width, which is why mirroring them unscoped cost the mobile bar 22px. */ [dir="rtl"] .header__action--signin { padding-left: 0; padding-right: 22px; } [dir="rtl"] .header__action--signin:before { left: auto; right: 0; } } @media (min-width: 768px) { [dir="rtl"] .header__actions { margin-left: 52px; margin-right: auto; } [dir="rtl"] .header__action { margin-left: 0; margin-right: 30px; } [dir="rtl"] .header__action:first-child { margin-right: 0; } [dir="rtl"] .header__action--signin { padding-left: 0; padding-right: 32px; } } /* Profile tabs. The gap sits between them and the last one goes without, so the row ends flush - which is the other end of the row now. */ [dir="rtl"] .profile__tabs li { margin-right: 0; margin-left: 20px; } [dir="rtl"] .profile__tabs li:last-child { margin-left: 0; } @media (min-width: 768px) { [dir="rtl"] .profile__tabs li { margin-right: 0; margin-left: 30px; } [dir="rtl"] .profile__tabs li:last-child { margin-left: 0; } } @media (min-width: 1200px) { [dir="rtl"] .header__logo { margin-right: 0; margin-left: 50px; } [dir="rtl"] .header__nav-item { margin-left: 0; margin-right: 30px; } /* The spacer moves to the other side once the theme drops the fixed margin. */ [dir="rtl"] .header__actions { margin-left: 0; margin-right: auto; } [dir="rtl"] .header__action--signin { padding-left: 0; padding-right: 0; } /* Only at this width does the theme give the inline nav a side margin. */ [dir="rtl"] .header__menu { margin-left: 0; margin-right: 20px; } } /* Page furniture --------------------------------------------------- */ /* Another spacer rather than a gap: it holds the profile tabs against the start of their row and lets what follows sit at the end. */ @media (min-width: 768px) { [dir="rtl"] .profile__tabs { margin-right: 0; margin-left: auto; } } [dir="rtl"] .main__title h2 svg { margin-right: 0; margin-left: 10px; } /* Browsers indent a list from the reading start, so `padding-left: 0` stops resetting it once the document turns around and the breadcrumb sits inset. */ [dir="rtl"] .main__title ol { padding-left: 0; padding-right: 0; } [dir="rtl"] .main__title ol ol { padding-left: 0; padding-right: 15px; } [dir="rtl"] .main__filter-search button { right: auto; left: 20px; } /* Carousel arrows. The pair moves to the other end of the strip, keeping each button's own distance from that end - swapping the two distances instead would put "next" on the inside, which is the wrong way round. The glyphs are mirrored too: in Arabic, back points right. */ [dir="rtl"] .main__nav svg { transform: scaleX(-1); } /* Inputs parked off-screen ----------------------------------------- */ /* * The theme hides the native checkbox, radio and file inputs behind a styled * label by pushing them to `left: -9999px`. In a left-to-right document that is * off the start edge and the page does not scroll to reach it. Under rtl the * start edge is the other one, so the same offset lands 9,569px into the * scrollable direction and every page carrying one of these grew a horizontal * scrollbar - the dispute page most visibly, because its reply form has three. * * Mirrored, they sit off the start edge again and the overflow goes away. */ [dir="rtl"] .filter__checkboxes input:not(:checked), [dir="rtl"] .filter__checkboxes input:checked, [dir="rtl"] .sign__group--checkbox input:not(:checked), [dir="rtl"] .sign__group--checkbox input:checked, [dir="rtl"] .sign__radio input:not(:checked), [dir="rtl"] .sign__radio input:checked, [dir="rtl"] .sign__file input { left: auto; right: -9999px; } /* Cards, authors, comments, modals --------------------------------- */ /* A comment's avatar is positioned out of flow against one edge and the author row is padded by exactly its width to clear it. Flip one without the other and the avatar lands on top of the name. */ [dir="rtl"] .comments__autor { padding-left: 0; padding-right: 55px; } [dir="rtl"] .comments__avatar { left: auto; right: 0; } /* The verified tick is painted on the row's own ::after and placed 28px across from the avatar's edge, so moving the avatar without it left the tick stranded at the far side of the review card. */ [dir="rtl"] .comments__autor:after { left: auto; right: 28px; } /* The profile bio is held clear of the cover art's focal side. */ @media (min-width: 576px) { [dir="rtl"] .author--page .author__text { padding-right: 0; padding-left: 40%; } } @media (min-width: 768px) { [dir="rtl"] .author--page .author__text { padding-right: 0; padding-left: 50%; } } @media (min-width: 1200px) { [dir="rtl"] .author--page .author__text { padding-left: 0; } [dir="rtl"] .author--page { padding-right: 0; padding-left: 10px; } } [dir="rtl"] .post__date svg, [dir="rtl"] .post__comments svg { margin-right: 0; margin-left: 5px; } [dir="rtl"] .author__avatar--verified:after { right: auto; left: -2px; } [dir="rtl"] .comments__title span { margin-left: 0; margin-right: 10px; } [dir="rtl"] .modal__close { right: auto; left: 15px; } /* The verified tick the theme overlays on an avatar is placed from the left. */ [dir="rtl"] .asset__author--verified:after { left: auto; right: 28px; } /* ------------------------------------------------------------------ * * Tailwind utilities that name a physical side. * ------------------------------------------------------------------ */ /* * `space-x-*` puts its gap in a margin-left on every child but the first, so in * RTL the gap lands on the outside of the row and the two items it was meant to * separate end up touching - the register form's "I agree" checkbox sat flush * against its label because of this. Tailwind already models the flip as * `space-x-reverse`; this switches it on for the whole document rather than * asking 28 call sites to remember. */ [dir="rtl"] .space-x-px > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* ------------------------------------------------------------------ * * Mirrored mechanically from the theme. * * These match markup that exists in a customer-facing blade but that the * earlier pass never rendered, because it sampled the pages it happened to * fetch and those were all public. The dispute page was not among them, and * its reply form is where the off-screen inputs above were found. Scanning * the blade sources instead of a handful of rendered pages closes that gap. * * Each is the theme's own declaration with its edge swapped, nothing more. * ------------------------------------------------------------------ */ [dir="rtl"] .activity__content { margin-left: 0; margin-right: 20px; } [dir="rtl"] .article__content blockquote:before { left: auto; right: 0; } [dir="rtl"] .article__content ul li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .article__content ul li:before { left: auto; right: 0; } [dir="rtl"] .asset__action img { margin-right: 0; margin-left: 10px; } [dir="rtl"] .asset__action--verified:after { left: auto; right: 28px; } [dir="rtl"] .asset__author img { margin-right: 0; margin-left: 10px; } [dir="rtl"] .asset__btn svg { margin-right: 0; margin-left: 7px; } [dir="rtl"] .asset__btn { margin-right: 0; margin-left: 20px; } [dir="rtl"] .asset__btn:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .asset__price img { left: auto; right: 20px; } [dir="rtl"] .asset__price span { padding-left: 0; padding-right: 30px; } [dir="rtl"] .asset__price { padding-left: 0; padding-right: 20px; } [dir="rtl"] .asset__tabs li { margin-right: 0; margin-left: 30px; } [dir="rtl"] .asset__tabs li:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .author__link svg { margin-right: 0; margin-left: 5px; } [dir="rtl"] .card__author img { margin-right: 0; margin-left: 10px; } [dir="rtl"] .card__author--verified:after { left: auto; right: 24px; } [dir="rtl"] .card__price img { left: auto; right: 0; } [dir="rtl"] .card__price span { padding-left: 0; padding-right: 30px; } [dir="rtl"] .card__time svg { margin-right: -3px; margin-left: 6px; } [dir="rtl"] .card__time { left: auto; right: 0; } [dir="rtl"] .comments__actions button { margin-right: 0; margin-left: 20px; } [dir="rtl"] .comments__actions button:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .comments__rate button { margin-right: 0; margin-left: 24px; } [dir="rtl"] .comments__rate button:first-child svg { margin-right: 0; margin-left: 8px; } [dir="rtl"] .comments__rate button:first-child:before { left: auto; right: 100%; margin-left: 0; margin-right: 12px; } [dir="rtl"] .comments__rate button:last-child svg { margin-left: 0; margin-right: 8px; } [dir="rtl"] .comments__rate button:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .comments__rate { left: auto; right: 0; } [dir="rtl"] .filter__checkboxes input:checked + label { padding-left: 0; padding-right: 36px; } [dir="rtl"] .filter__checkboxes input:checked + label:after { left: auto; right: 0; } [dir="rtl"] .filter__checkboxes input:checked + label:before { left: auto; right: 0; } [dir="rtl"] .filter__checkboxes input:not(:checked) + label { padding-left: 0; padding-right: 36px; } [dir="rtl"] .filter__checkboxes input:not(:checked) + label:after { left: auto; right: 0; } [dir="rtl"] .filter__checkboxes input:not(:checked) + label:before { left: auto; right: 0; } [dir="rtl"] .knowledge__list a { padding-right: 0; padding-left: 4px; } [dir="rtl"] .knowledge__list span { padding-left: 0; padding-right: 4px; } [dir="rtl"] .knowledge__title svg { margin-right: 0; margin-left: 10px; } [dir="rtl"] .share--asset .share__link svg { margin-right: 0; margin-left: 0; } [dir="rtl"] .share--asset { left: auto; right: 20px; } [dir="rtl"] .share__link svg { margin-right: 0; margin-left: 10px; } [dir="rtl"] .share__link { margin-right: 0; margin-left: 20px; } [dir="rtl"] .share__link:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .sign__group--checkbox input:checked + label { padding-left: 0; padding-right: 35px; } [dir="rtl"] .sign__group--checkbox input:checked + label:after { left: auto; right: 0; } [dir="rtl"] .sign__group--checkbox input:checked + label:before { left: auto; right: 0; } [dir="rtl"] .sign__group--checkbox input:not(:checked) + label { padding-left: 0; padding-right: 35px; } [dir="rtl"] .sign__group--checkbox input:not(:checked) + label:after { left: auto; right: 0; } [dir="rtl"] .sign__group--checkbox input:not(:checked) + label:before { left: auto; right: 0; } [dir="rtl"] .sign__group--row .sign__label { padding-left: 0; padding-right: 0; } [dir="rtl"] .sign__label { padding-left: 0; padding-right: 20px; } /* A reply is indented from the side the thread reads from. */ [dir="rtl"] .comments__item--answer { margin-left: 0; margin-right: 30px; } /* Rules the theme only sets above a breakpoint --------------------- */ /* Mirrored at the width the theme introduces them, not unconditionally. A mirror that runs wider than the rule it mirrors is not a no-op: it adds a margin, a padding or an offset that the left-to-right layout does not have at that width. That is what put a 50px margin on the mobile header logo and squeezed the profile pill into three lines. */ @media (min-width: 576px) { [dir="rtl"] .header__action-btn span { margin-right: 0; margin-left: 10px; } [dir="rtl"] .header__action-btn--signin span { margin-left: 0; margin-right: 8px; } [dir="rtl"] .asset__authors li { margin-right: 0; margin-left: 60px; } [dir="rtl"] .asset__authors li:last-child { margin-right: 0; margin-left: 0; } [dir="rtl"] .asset__authors--tab li { margin-right: 0; margin-left: 0; } [dir="rtl"] .comments__actions button span { margin-left: 0; margin-right: 6px; } } @media (min-width: 768px) { [dir="rtl"] .main__filter-search { margin-right: 0; margin-left: 30px; } [dir="rtl"] .modal--form .modal__close { right: auto; left: 35px; } } @media (min-width: 1200px) { [dir="rtl"] .filter { padding-left: 0; padding-right: 10px; } [dir="rtl"] .main__nav--prev { right: auto; left: 25px; } [dir="rtl"] .main__nav--next { right: auto; left: -5px; } [dir="rtl"] .main__nav--hero.main__nav--prev { right: auto; left: 95px; } [dir="rtl"] .main__nav--hero.main__nav--next { right: auto; left: 65px; } }