/** * Gestion de Tournois — page mobile spectateur /gt-mobile/ (module « Écrans * mobiles »). Responsive standard (pas de mode plein écran « canevas », * contrairement aux écrans de salle — voir screen-view.css) : cette page est * consultée depuis le navigateur mobile normal d'un visiteur. * * @version 0.1.0 (build 276) */ * { box-sizing: border-box; } /* v0.1.0 (build 280) : fond appliqué sur par applyBackground() * (mobile-view.js), PAS sur #gt-mobile-root — bug signalé par l'utilisateur * (fond ne couvrant pas le haut de l'écran sur iPhone, sous l'encoche/barre * d'état). `100dvh` (« dynamic viewport height »), avec repli `100vh` pour * les navigateurs qui ne le supportent pas encore : sur iOS Safari, `100vh` * seul ne correspond pas à la hauteur RÉELLEMENT visible (barres système * qui apparaissent/disparaissent), `100dvh` s'y ajuste correctement. */ html { min-height: 100vh; min-height: 100dvh; background-color: #0b1f3a; background-size: cover; background-position: center; background-repeat: no-repeat; } body { margin: 0; padding: 0; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; min-height: 100vh; min-height: 100dvh; } #gt-mobile-root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } #gt-mobile-content { flex: 1; display: flex; flex-direction: column; padding: 16px; text-align: center; } /* v0.1.0 (build 285) : bouton de retour « ancré en bas » — réserve une * bande d'espace en pied de page pour que le bouton, flottant en * `position: fixed` (voir `.gt-mobile-return-btn-fixed` plus bas), ne * recouvre jamais le dernier élément affiché. Classe posée une seule fois * sur `` par mobile-view.js (réglage global, figé pour la page). */ html.gt-mobile-has-fixed-return #gt-mobile-content { padding-bottom: calc( 16px + 56px + env( safe-area-inset-bottom, 0px ) ); } /* Arborescence conteneurs/éléments (constructeur glisser-déposer) */ .gt-mobile-screen-root { flex: 1; display: flex; flex-direction: column; gap: 12px; } .gt-mobile-el { min-width: 0; } .gt-mobile-container { display: flex; gap: 12px; } .gt-mobile-container.gt-mobile-vertical { flex-direction: column; } .gt-mobile-container.gt-mobile-horizontal { flex-direction: row; flex-wrap: wrap; } .gt-mobile-container.gt-mobile-horizontal > .gt-mobile-el { flex: 1 1 0; } /* v0.1.0 (build 288) : alignement réglable (justify-content/align-items) — * voir applyContainerAlignment() dans mobile-view.js. Un cadre horizontal * avec un alignement horizontal explicite désactive l'étirement à largeur * égale ci-dessus (sinon `justify-content` n'a aucun espace libre où se * voir) — spécificité volontairement plus élevée que la règle générale * ci-dessus (même sélecteur + `.gt-mobile-container-distribute`) pour la * remplacer sans dépendre de l'ordre des règles dans la feuille de style. */ .gt-mobile-container.gt-mobile-horizontal.gt-mobile-container-distribute > .gt-mobile-el { flex: 0 0 auto; max-width: 100%; } .gt-mobile-text { font-size: 16px; /* v0.1.0 (build 277) : conserve les retours à la ligne saisis dans le * constructeur (élément « Texte libre ») — sans ça, un retour à la * ligne réel est collapsé en un simple espace par le navigateur. */ white-space: pre-wrap; } .gt-mobile-dynamic { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } /** * v0.1.0 (build 518) : élément dynamique « Places payées » — à la demande * de l'utilisateur (reprend le pavé Winamax Payout/Vegas comme élément * réutilisable sur écran mobile, voir renderMobilePayoutWidgets() dans * mobile-view.js). Classes/mise en page PORTÉES telles quelles depuis * screen-view.css (`.gt-place-row`/`.gt-vegas-places-scroll`/etc. — mêmes * noms, aucune collision possible : cette page ne charge jamais * screen-view.css) plutôt qu'une feuille partagée entre les deux modules, * qui n'existe pas dans ce plugin. Annule le style générique de * `.gt-mobile-dynamic` ci-dessus (gras/chiffres tabulaires pensé pour une * valeur scalaire courte, pas une LISTE de lignes). */ .gt-mobile-payout-places { font-size: 16px; font-weight: 400; font-variant-numeric: normal; white-space: normal; width: 100%; } .gt-mobile-payout-places .gt-vegas-stat-label { font-size: 13px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4em; } .gt-mobile-payout-places .gt-vegas-places-scroll { overflow: hidden; height: calc(var(--gt-places-visible-rows, 5) * 1.6em); } .gt-mobile-payout-places .gt-vegas-places-track-inner { will-change: transform; } .gt-mobile-payout-places .gt-place-row { display: flex; align-items: baseline; white-space: nowrap; } .gt-mobile-payout-places .gt-place-rank, .gt-mobile-payout-places .gt-place-amount { flex: 0 0 auto; } /* v0.1.0 (build 520) : voir docblock de applyPlaceRankWidth() dans * screen-view.js / mobile-view.js — largeur commune à tous les rangs de la * liste, pour que la ligne de points démarre à la même position d'une ligne * à l'autre même quand un rang est une plage large (ex. « 145e - 200e »). */ .gt-mobile-payout-places .gt-place-rank { width: var(--gt-place-rank-width, auto); } .gt-mobile-payout-places .gt-place-leader { flex: 1 1 auto; overflow: hidden; white-space: nowrap; margin: 0 0.4em; opacity: 0.5; } .gt-mobile-payout-places .gt-place-row-lots { display: block; white-space: normal; margin-bottom: 0.5em; } .gt-mobile-payout-places .gt-place-row-lots .gt-place-rank { display: block; opacity: 0.75; font-size: 0.75em; } .gt-mobile-payout-places .gt-place-row-lots .gt-place-lot-label { display: block; white-space: normal; overflow-wrap: break-word; font-size: 0.9em; line-height: 1.25; } /** * v1.0.1 (build 650) : élément dynamique « Tapis moyen par composition de * table » — parité avec les écrans de salle (voir .gt-freeform-composition * dans screen-view.css, build 595). Réutilise `.gt-vegas-places-scroll`/ * `.gt-vegas-places-track-inner`/`.gt-place-leader` du pavé « Places payées » * ci-dessus (mêmes noms, aucune collision : cette page ne charge jamais * screen-view.css), avec sa propre ligne `.gt-composition-row`. Annule le * style scalaire générique de `.gt-mobile-dynamic` (LISTE de lignes, pas une * valeur courte). */ .gt-mobile-composition { font-size: 16px; font-weight: 400; font-variant-numeric: normal; white-space: normal; width: 100%; } .gt-mobile-composition .gt-vegas-places-scroll { overflow: hidden; height: calc(var(--gt-places-visible-rows, 5) * 1.6em); } .gt-mobile-composition .gt-vegas-places-track-inner { will-change: transform; } .gt-mobile-composition .gt-composition-row { display: flex; align-items: baseline; white-space: nowrap; } .gt-mobile-composition .gt-composition-label, .gt-mobile-composition .gt-composition-value { flex: 0 0 auto; } .gt-mobile-composition .gt-place-leader { flex: 1 1 auto; overflow: hidden; white-space: nowrap; margin: 0 0.4em; opacity: 0.5; } /* Écran de sélection / attente */ .gt-mobile-selection, .gt-mobile-waiting { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .gt-mobile-selection-title { font-size: 16px; opacity: 0.85; margin: 0 0 8px; } .gt-mobile-round-btn, .gt-mobile-back-btn { font: inherit; font-size: 16px; color: #0b1f3a; background: #ffffff; border: none; border-radius: 999px; padding: 12px 24px; cursor: pointer; width: 100%; max-width: 320px; } .gt-mobile-back-btn { margin-top: 16px; background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); width: auto; align-self: center; } /* v0.1.0 (build 286) : emplacement « ancré en bas de la fenêtre » — même * réglage/même principe que `.gt-mobile-return-btn-fixed` ci-dessous, à la * demande de l'utilisateur (capture à l'appui : ce bouton restait en flux * normal même avec le réglage sur « fixed », puisqu'il remplace le bouton * de retour au site — jamais affiché en même temps — sans jamais avoir * hérité de son placement). Fond semi-opaque flouté pour les mêmes raisons * (peut flotter sur n'importe quel fond/contenu). */ .gt-mobile-back-btn-fixed { position: fixed; left: 50%; bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) ); transform: translateX( -50% ); margin-top: 0; z-index: 20; background: rgba( 0, 0, 0, 0.45 ); -webkit-backdrop-filter: blur( 6px ); backdrop-filter: blur( 6px ); } .gt-mobile-waiting { font-size: 16px; opacity: 0.85; } /* v0.1.0 (build 278) : bouton de retour vers le site — voir * buildReturnButton() dans mobile-view.js. */ .gt-mobile-return-btn { display: inline-block; font: inherit; font-size: 14px; color: #ffffff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 10px 20px; margin-top: 16px; } .gt-mobile-screen-root > .gt-mobile-return-btn { align-self: center; } /* v0.1.0 (build 285) : emplacement « ancré en bas de la fenêtre » — à la * demande de l'utilisateur, en alternative au comportement par défaut * ('inline', ci-dessus, à la suite des éléments) — voir buildReturnButton() * dans mobile-view.js (`config.returnButton.position`). Fond semi-opaque * flouté (contrairement à la variante inline, transparente) : ce bouton * peut flotter au-dessus de n'importe quel contenu (image de fond, éléments * clairs ou sombres selon l'écran), il doit rester lisible en toutes * circonstances plutôt que de se fondre dans le fond comme la variante en * flux normal. */ .gt-mobile-return-btn-fixed { position: fixed; left: 50%; bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) ); transform: translateX( -50% ); margin-top: 0; z-index: 20; background: rgba( 0, 0, 0, 0.45 ); -webkit-backdrop-filter: blur( 6px ); backdrop-filter: blur( 6px ); }