/* * jqm-shim.css — styles accompagnant jqm-shim.js. * Remplace la partie « structure » de jQuery Mobile (spinner + popups + panel) * quand jquery.mobile.structure-1.4.2.min.css est retiré. * * À charger À LA PLACE de jquery.mobile.structure-1.4.2.min.css. */ /* --------------------------- Reset de base ------------------------- * * Reprend ce que jQuery Mobile appliquait au via la classe * runtime .ui-mobile-viewport + la règle body{} de sa structure CSS. * Sans ça, le body retrouve la marge navigateur par défaut (8px) et perd * le padding de 1em, ce qui décalait le contenu vs les barres position:fixed * (ex. #pixabayFilterZone). L'app surcharge ensuite padding-top via * env(safe-area-inset-top) dans photoweb.css (chargé après), comme avant. * ------------------------------------------------------------------ */ html, body{ margin:0; } body{ /* Pas de padding lateral : il reduisait la largeur utile du contenu (viewport-32px avec box-sizing:border-box) alors que le JS dimensionne la carte / les images sur window.innerWidth (=viewport). Resultat : #carteZone trop large (deborde son conteneur) et images Pixabay a 1 colonne au lieu de 2 sur mobile. Les barres position:fixed sont en width:100% / left:0, donc alignees avec un contenu pleine largeur. */ padding:.4em 0; /* overflow-x seulement (= .ui-mobile-viewport de JQM) : autorise le scroll vertical (sinon la FAQ et autres pages longues ne défilent plus), tout en bloquant le débordement horizontal. NE PAS remettre overflow:hidden (JQM scrollait en interne via ses pages ; ici la navigation est en show/hide et compte sur le scroll naturel). */ overflow-x:hidden; -webkit-text-size-adjust:100%; -ms-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } /* ----------------------------- Spinner ----------------------------- */ .sc-loader-screen{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000; align-items:center; justify-content:center; background:rgba(0,0,0,.15); } .sc-loader-box{ position:relative; background:#fff; width:12.5em; border:1px solid #d4d4d4; border-radius:10px; } .sc-loader-zone{ padding:20px 0; text-align:center; border-radius:10px; } .sc-loader-logo{ position:absolute; bottom:52px; width:100%; } .sc-loader-logo img{ width:63px; } .sc-loader-msg{ position:absolute; bottom:20px; width:100%; height:5px; font-size:11px; text-align:center; } .sc-loader-bar{ height:5px; width:196px; margin:0 auto; background:#6BCCD0; border-bottom-left-radius:46px; border-bottom-right-radius:46px; } /* ------------------------------ Popups ----------------------------- */ [data-role="popup"]{ display:none; } /* cachés par défaut */ [data-role="popup"].sc-popup-open{ display:block; /* !important : certains popups ont un z-index:100000 inline, identique à l'overlay → l'overlay (ajouté en fin de body) passait par-dessus. */ position:fixed; z-index:100001 !important; /* !important neutralise les offsets inline hérités de JQM (ex. addpicture : style="top:-70px") qui décentraient le popup. */ top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; margin:0 !important; /* !important : de nombreux popups dynamiques portent un -webkit-transform:translate3d(0,0,0) inline (hack GPU JQM) qui annulait sinon ce centrage. */ -webkit-transform:translate(-50%,-50%) !important; transform:translate(-50%,-50%) !important; max-width:92%; /* visible (et non auto) : la croix de fermeture des popups est positionnée top:-10px;right:-12px et doit déborder du coin. */ overflow:visible; background:#fff; border-radius:10px; -webkit-box-shadow:0 2px 12px rgba(0,0,0,.4); box-shadow:0 2px 12px rgba(0,0,0,.4); } /* Le scroll des contenus longs est porté par le conteneur intérieur, pour ne pas clipper la croix qui déborde du popup. Le border-radius ici (et non sur le conteneur) arrondit le fond blanc intérieur : sinon ses coins carrés recouvrent l'arrondi du popup. La croix (positionnée par rapport au popup, pas au contenu) n'est pas clippée par cet overflow. */ [data-role="popup"].sc-popup-open > [data-role="content"]{ max-height:85vh; overflow:auto; border-radius:10px; } .sc-popup-screen{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000; background:rgba(0,0,0,.5); } /* ------------------------------ Panel ------------------------------ */ [data-role="panel"]{ display:none; } /* caché par défaut */ [data-role="panel"].sc-panel-open{ display:block; position:fixed; top:0; right:0; bottom:0; z-index:100002; max-width:80%; overflow:auto; background:#fff; -webkit-box-shadow:-2px 0 8px rgba(0,0,0,.3); box-shadow:-2px 0 8px rgba(0,0,0,.3); } .sc-panel-screen{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100001; background:rgba(0,0,0,.3); } /* --------- Footer/header fixes data-role (nav mobile) -------------- * * JQM (.ui-footer-fixed/.ui-header-fixed) leur donnait left:0;right:0; * width:100%. Sans ça, #footerPage (position:fixed sans width) retrecit * a son contenu (~320px, colle a gauche) et, ne contenant que des items * float:left, sa hauteur s'effondre. On restitue la pleine largeur + le * confinement des floats ; le bloc interne (width:320px;margin:0 auto) * se recentre alors. (Footer mobile only : retire sur desktop par le JS.) * ------------------------------------------------------------------ */ [data-role="footer"], [data-role="header"]{ left:0; right:0; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; } /* z-index : JQM donnait aux toolbars fixes z-index:1000. Sans lui, le contenu des pages (cartes contact en position:relative, items FAQ...), situe APRES le footer dans le DOM, se peint PAR-DESSUS le footer. On restitue ce 1000 (le composer surcharge ponctuellement via JS en 0/1000, ce qui prime en inline). */ [data-role="footer"]{ overflow:hidden; z-index:1000; } /* contient les floats -> hauteur */ /* iOS : avec le WKWebView en plein ecran (hook natif contentInsetAdjustmentBehavior =.never), le footer fixe est au bas PHYSIQUE de l'ecran -> il faut degager le home indicator. On restitue le padding-bottom safe-area. Fallback 4px pour les vieux WebKit (calc/env non parses), version safe-area sous @supports. Le body reserve deja calc(76px + env(safe-area-inset-bottom)), donc la hauteur colle. */ [data-role="footer"]{ padding-bottom: 4px !important; } @supports (padding: max(0px)){ [data-role="footer"]{ padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important; } } /* Marge basse pour ne pas passer SOUS le footer fixe. JQM ajoutait automatiquement ce padding aux pages ayant une toolbar position:fixed ; sans lui, le bas des pages longues (achat de credits, etc.) est masque par le footer. @supports protege le calc/env pour les vieux WebKit. */ body{ padding-bottom: 84px; } @supports (padding: max(0px)){ body{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); } } /* ------------------ Formulaires : data-role=fieldcontain ----------- * * JQM faisait de .ui-field-contain un bloc qui CLEAR les floats et, * en mode ui-hide-label, mettait le champ en pleine largeur. Sans ça, * les champs (email login, oeil, "mot de passe oublié") partaient * flotter à droite au lieu de s'empiler (page #identification). * ------------------------------------------------------------------ */ [data-role="fieldcontain"]{ display:block; clear:both; margin:0 0 .5em; } /* === Option B : réplique le rendu JQM .ui-input-text pour TOUS les champs * marqués data-role="fieldcontain" (les ~21 formulaires que JQM enhançait), * d'un seul coup : display:block + width:100% + padding + box-sizing + outline. * Volontairement limité à fieldcontain : les inputs "nus" (grille du * formulaire adresse, barres de recherche inline) gardent leur disposition * propre, sinon on les re-casserait. Cases à cocher / radios et champs à * wrapper custom (Giropay) exclus. La couleur du soulignement reste gérée * par la règle border-bottom plus bas + le CSS app. === */ [data-role="fieldcontain"] input:not([type=checkbox]):not([type=radio]):not([data-wrapper-class]), [data-role="fieldcontain"] select, [data-role="fieldcontain"] textarea{ display:block; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; padding:.4em; line-height:1.4em; outline:0; } /* ------- Formulaire "Nouveau destinataire" : champs empilés --------- * * Les 6 champs adresse (#selectAddressNewAddressZone > form) n'ont * AUCUNE largeur en CSS/JS app : leur disposition dépendait de * l'enhancement JQM (.ui-input-text input { display:block; width:100% }), * soit un EMPILEMENT vertical pleine largeur. Restitué tel quel ici. * ------------------------------------------------------------------ */ #selectAddressNewAddressZone form > input[type=text]{ display:block; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; padding:.5em 0; margin:0 0 1.4em; } /* ------------------- Focus : suppression de l'outline --------------- * * JQM supprimait l'outline de focus (via ses classes .ui-*). Les inputs * "nus" (ex. #pixabayValue) retombaient sinon sur l'outline bleu par * défaut du navigateur, masquant leur style app (border-bottom seul). * ------------------------------------------------------------------ */ input:focus, textarea:focus, select:focus, button:focus{ outline:0; } /* Barres de recherche du carnet d'adresses (#searchContactInput*) : leur icône loupe est en position:absolute top:18px, calée sur la hauteur de l'input "enhancé" par JQM. Sans JQM l'input est plus court → on lui rend un padding vertical pour réaligner le texte avec l'icône (et on préserve le padding-left:25px inline qui réserve la place de l'icône). */ input[id^="searchContact"]{ padding-top:1em; padding-bottom:.4em; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Inputs code promo / parrainage (#codePromo*) : bares dans un conteneur de largeur fixe (229px), ils comptaient sur le width:100% de JQM pour le remplir. Sans ça l'input garde sa largeur par défaut → placeholder tronqué ("...parraina"). On le fait remplir son conteneur. */ input[id^="codePromo"]{ width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Certains inputs portaient un border-bottom-width:0 inline pour ne pas doubler la bordure du wrapper .ui-input-text que JQM ajoutait. Sans ce wrapper, ils n'ont plus aucun trait (ex. #createAccountEmail = boîte blanche). On restitue le soulignement app (!important bat le style inline). Exclusion des champs à wrapper custom volontairement nus (ex. Giropay). */ input[type=email]:not([data-wrapper-class]), input[type=text]:not([data-wrapper-class]), input[type=password]:not([data-wrapper-class]){ border-bottom:1px solid #000 !important; } /* --- Zones fixes en .contentZone : recentrage (généralisé) ---------- * * .contentZone = max-width:560px; margin:0 auto. En position:fixed, * margin:auto ne centre PAS sans left/right → toutes ces zones restaient * bridées à 560px ET collées à gauche. On rétablit left/right pour les * recentrer. Concernés (3) : #draftHeader, #selectAddressPhoneBookZoneSub, * #selectAddressCardsSentZoneSub. Le sélecteur d'attribut cible * exactement les .contentZone dont le style inline contient "fixed". * #draftHeader veut en plus le plein écran (width:100% + border-bottom) * → on lève son max-width ; le bloc interne (width:300px;margin:0 auto) * se centre alors dans le viewport. * ------------------------------------------------------------------ */ .contentZone[style*="fixed"]{ left:0; right:0; } #draftHeader{ max-width:none; } /* === Groupes radio/checkbox JQM : [data-role="controlgroup"] ======== * * JQM les affichait en liste verticale : conteneur arrondi bordé, chaque * radio+label = une ligne pleine largeur séparée par un trait, radio * agrandi. Sans JQM ils s'écoulent en ligne (comme du texte). Réplique * d'un seul coup pour TOUS les controlgroups de l'app : sélecteurs de * devise (paramètres + création de compte), motifs de support, etc. * (les labels portent déjà background-color:white + border-radius inline * sur le 1er/dernier → l'intention "liste encadrée" est explicite). * ------------------------------------------------------------------ */ [data-role="controlgroup"]{ border:1px solid #6bccd0; border-radius:10px; background:#fff; overflow:hidden; margin:0; padding:0; min-width:0; } /* Radio/checkbox natif masqué (mais présent/accessible) : on ne dépend PAS de sa cliquabilité (fragile en float/overflow sur cette webview). C'est le LABEL entier qui est cliquable et bascule le contrôle via for=. */ [data-role="controlgroup"] input[type=radio], [data-role="controlgroup"] input[type=checkbox]{ position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; } /* Label = ligne pleine largeur cliquable, avec un radio redessiné en ::before. */ [data-role="controlgroup"] label{ display:block; position:relative; padding:14px 14px 14px 50px; border-top:1px solid #e6e6e6; cursor:pointer; line-height:1.3; /* JQM calait le libellé à gauche ; sans ça il hérite du text-align:center du conteneur parent (#rectoTitleZone) et se retrouve centré. */ text-align:left; } [data-role="controlgroup"] label:first-of-type{ border-top:0; } [data-role="controlgroup"] label:before{ content:""; position:absolute; left:16px; top:50%; width:20px; height:20px; margin-top:-10px; border:2px solid #c4c4c4; border-radius:50%; -webkit-box-sizing:border-box; box-sizing:border-box; background:#fff; } /* État sélectionné : le label est le frère adjacent qui suit l'input. */ [data-role="controlgroup"] input[type=radio]:checked + label:before, [data-role="controlgroup"] input[type=checkbox]:checked + label:before{ border-color:#6bccd0; -webkit-box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 20px #6bccd0; box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 20px #6bccd0; } /* -------- Conteneurs de boutons ronds : contexte de position -------- * * Plusieurs boutons (ex. #pixabaySearch : style="top:-63px") sont * remontés via top négatif, ce qui exige un parent positionné que JQM * fournissait. .boutonRondContainer n'a pas de position dans l'app. * position:relative est sans effet sur les instances sans offset. * ------------------------------------------------------------------ */ .boutonRondContainer{ position:relative; } /* ---- "Titre = un texte libre" : input + boutons ronds responsables ----- * * Sur le web (desktop=true, y compris navigateur mobile) le bloc affiche * l'input texte + les boutons ronds Emoticon / Style / Couleur, disposes en * float avec des largeurs fixes pensees pour >=375px. Sur un ecran etroit * (web mobile) le bouton Emoticon decroche et la rangee se casse. On passe le * conteneur en flex-wrap, cale a gauche, pour un enroulement propre. Le * carrousel de couleurs garde toute la largeur. ------------------------- */ #titleTextContent{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; } #titleTextContent > div{ float:none; margin-left:0; margin-right:0; } #titleTextContent > #choixRectoTitleCarrousel{ flex-basis:100%; width:100%; }