/* ════════════════════════════════════════════════════════════ touch.css — Strive × Diamix Studio Comportement du TOUCHER, commun à toute l'application. Chargé en DERNIER dans le de chaque page : les règles ci-dessous doivent gagner sur les styles de page, sans avoir à sortir l'artillerie des !important. Les sélecteurs restent volontairement de faible spécificité pour qu'une page puisse encore s'exempter si besoin. ════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ 1 · LE HALO BLEU DU SYSTÈME Au doigt, Chrome/WebView Android peignent un rectangle bleu translucide sur tout élément cliquable. C'est lui le « cadre bleu pas beau ». `-webkit-tap-highlight-color` est une propriété HÉRITÉE : la poser une seule fois sur suffit pour tout le document — inutile de la répéter élément par élément (ce que faisaient jusqu'ici une dizaine de règles éparpillées, d'où le dock latéral épargné et le reste non). ══════════════════════════════════════════════════════════════════ */ html { -webkit-tap-highlight-color: transparent; } /* ══════════════════════════════════════════════════════════════════ 2 · L'ANNEAU DE FOCUS Second « cadre » : après un tap, le focus reste sur l'élément pressé et le navigateur en dessine le contour. On ne le retire QUE pour le pointeur. `:focus-visible` (navigation au clavier) conserve un anneau bien lisible — le supprimer partout rendrait l'app inutilisable au clavier, ce qui n'est pas le but demandé. Effet de bord utile : les navigateurs considèrent TOUJOURS un champ de saisie comme focus-visible. Les inputs gardent donc leur anneau, et on voit encore quel champ est actif. On se contente de RETIRER l'anneau au pointeur, sans en redéfinir un pour le clavier : celui du navigateur est déjà bi-colore, donc lisible sur n'importe quel fond, et le laisser en place évite de doubler l'anneau des champs qui colorent déjà leur bordure au focus. ══════════════════════════════════════════════════════════════════ */ :focus:not(:focus-visible) { outline: none; } /* ══════════════════════════════════════════════════════════════════ 3 · LE RETOUR DE PRESSION QUI REMPLACE LE HALO Même parti pris que le dock de navigation latéral, cité en référence : rien de coloré, rien qui déborde — l'élément s'estompe brièvement sous le doigt. Discret, et ça marche sur n'importe quel fond (image, verre, dégradé) là où une teinte plate se verrait. Pourquoi l'opacité et pas un fond ni un scale : · un fond écraserait celui de l'élément (bouton d'accent, carte…) ; · un transform casse `position: fixed` chez les descendants et ferait vibrer les mises en page en grille. On ne touche pas à `transition` : les pages qui en ont déjà une l'appliqueront à l'opacité (fondu), les autres seront instantanées. Uniquement sur appareil tactile : à la souris, :hover fait déjà le travail et on ne veut pas de clignotement au clic. Exclusions : `.no-press` est l'échappatoire pour un cas particulier ; les commandes de navigation (dock, nav du bas, hamburger…) ont déjà leur propre :active — teinte de fond ou icône qui se contracte — et n'ont pas besoin qu'on s'y ajoute. ══════════════════════════════════════════════════════════════════ */ @media (hover: none) and (pointer: coarse) { :where(button, a[href], [role="button"], summary, label[for], .clickable):not(.no-press, .dock-item, .mobile-nav-tab, .mobile-hamburger, .mobile-channels-btn, .mobile-dm-back):active { opacity: .55; } } /* ══════════════════════════════════════════════════════════════════ 4 · CONFORT TACTILE Un appui un peu long sur une commande sélectionnait son libellé (poignées de sélection bleues + menu « Copier »), autre artefact peu élégant. On le coupe sur les commandes uniquement : le texte des contenus (messages, notes, fiches de lecture…) reste bien sûr sélectionnable. ══════════════════════════════════════════════════════════════════ */ :where(button, [role="button"], summary) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }