/* ============================================================ habask — socle droite-à-gauche Dépend de : tokens.css + thème actif + components.css Chargé par gt_theme_head() (inc/theme.php), juste après components.css. ============================================================ Cette feuille ne retourne rien à elle seule. Le retournement vient des **propriétés logiques** écrites dans chaque feuille (`margin-inline-start` plutôt que `margin-left`) et de l'attribut `dir` posé sur par gt_lang_dir(). Ce fichier ne porte que les trois choses qu'une propriété logique ne sait pas faire : 1. isoler ce qui ne se retourne jamais ; 2. mettre en miroir les icônes qui désignent une direction ; 3. rattraper les quelques cas où le sens physique est le bon. Règle de tri, pour qui ajoute ici : si la propriété logique suffit, elle est la bonne réponse et rien ne vient dans ce fichier. On n'y écrit que l'exception, et on dit pourquoi. */ /* ────────────────────────────────────────── 1. CE QUI NE SE RETOURNE JAMAIS ────────────────────────────────────────── */ /** * Fragments qui restent lus de gauche à droite quelle que soit la langue : * adresses e-mail, URLs, numéros de version, code, horaires `14:30`, et — par * la décision D-b — les dates et les nombres. * * `unicode-bidi: isolate` n'est pas décoratif. Sans lui, l'algorithme bidi * d'Unicode traite la ponctuation de bord comme neutre et la rattache au sens * environnant : un `@`, un `/` ou un `.` en fin de chaîne saute de l'autre * côté. `contact@habask.app` s'affiche alors `habask.app@contact` en contexte * RTL. C'est le comportement normal de la spécification, pas un défaut de * rendu — d'où l'isolation explicite. */ .gt-ltr { direction: ltr; unicode-bidi: isolate; } /* La même chose pour ce qui se reconnaît sans classe à poser. */ [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] pre, [dir="rtl"] time, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="password"] { direction: ltr; unicode-bidi: isolate; } /* Un champ LTR dans un formulaire RTL reste aligné du côté de la lecture du formulaire : c'est le texte qui est latin, pas la mise en page. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="password"] { text-align: right; } /* ────────────────────────────────────────── 2. ICÔNES À EFFET MIROIR ────────────────────────────────────────── */ /** * Une flèche « suivant » pointe vers la suite de la lecture : à droite en LTR, * à gauche en RTL. Une croix de fermeture, une icône de recherche ou un * chevron de dépliage vertical ne se retournent pas — ils ne désignent aucune * direction de lecture. * * `.gt-mirror` est la marque explicite, à poser sur ce que le sélecteur * générique ne peut pas deviner. */ [dir="rtl"] .gt-mirror, [dir="rtl"] .icon-chevron-left, [dir="rtl"] .icon-chevron-right, [dir="rtl"] .icon-arrow-left, [dir="rtl"] .icon-arrow-right, [dir="rtl"] .gt-icon-back, [dir="rtl"] .gt-icon-forward { transform: scaleX(-1); } /* Un élément déjà tourné ne doit pas perdre sa rotation en gagnant le miroir. */ [dir="rtl"] .gt-mirror.is-rotated { transform: scaleX(-1) rotate(180deg); } /* Les barres de progression se remplissent dans le sens de la lecture. */ [dir="rtl"] progress, [dir="rtl"] meter { transform: scaleX(-1); } /* ────────────────────────────────────────── 3. RATTRAPAGES ────────────────────────────────────────── */ /* Les listes numérotées gardent leur puce du côté du texte. */ [dir="rtl"] ol, [dir="rtl"] ul { padding-inline-start: var(--space-6, 1.5rem); padding-inline-end: 0; } /** * `background-position` n'a pas d'équivalent logique. * * Trois sélecteurs posent un chevron de liste déroulante en image de fond, * appariés à un retrait qui, lui, est devenu logique. Sans ces trois lignes, * le retrait passerait à gauche en RTL et le chevron resterait à droite : le * texte long passerait dessous. * * Le décalage (`10px`, `12px`, `var(--space-3)`) est repris tel quel de la * règle physique de chaque sélecteur — ce ne sont pas les mêmes valeurs. */ [dir="rtl"] .gt-select { background-position: left var(--space-3) center; } [dir="rtl"] .gt-pref-add-select { background-position: left 10px center; } [dir="rtl"] .gt-default-view-select { background-position: left 12px center; } /** * Ombres portées : `box-shadow` n'a pas d'équivalent logique. Une ombre posée * à droite d'un panneau latéral doit passer à gauche. Les cas se traitent au * fil de la recette, ici — il n'y a pas de règle générale possible. */ /** * L'indice de balayage de `messagesSP` : son décalage suit le geste. * * `inset-inline-start` le pose déjà du bon côté de la bulle, mais `transform` * ignore `dir` (cf. D28) : le `translateX` qui accompagne la progression du * balayage pousserait l'indice à contresens. Les deux règles ci-dessous * inversent le seul signe, en reprenant la composition d'origine à * l'identique — c'est le prix d'un `transform` dans un contexte directionnel. */ [dir="rtl"] .msg-swipe-hint { transform: translateY(-50%) translateX(calc(var(--msg-swipe-progress, 0) * -8px)) scale(calc(.92 + (var(--msg-swipe-progress, 0) * .08))); } [dir="rtl"] .msg.me .msg-swipe-hint { transform: translateY(-50%) translateX(calc(var(--msg-swipe-progress, 0) * 8px)) scale(calc(.92 + (var(--msg-swipe-progress, 0) * .08))); } /* Le curseur d'une plage suit le sens de lecture. */ [dir="rtl"] input[type="range"] { direction: rtl; }