/* styles/overrides/chrome-unified.css — extrait de styles.css L5196-L5297. Chrome unifié (doit rester DERNIER). */ /* ══════════════════════════════════════════════════════════════════ CHROME UNIFIÉ — theme toggle + zoom map. Même DA et même position partout : home, menus (mode-config), trace, game, map reveal. Étiquette métal noire identique au bouton mc-back, icône orange #ff9a1f en accent. ══════════════════════════════════════════════════════════════════ */ /* ───── ÉCRANS "APP" PLEIN VIEWPORT : pas de scroll de page ───── * Landing (carte fullscreen), Bon Trajet (board) et Tracés (carte de * dessin) sont des écrans applicatifs : tout scroll utile vit DANS * leurs éléments (chain-list, info-card, trace-score, lines-drawer). * Sans ce verrou, mobile Safari/Chrome laissent scroller la page * (barre d'URL rétractable, contenu 100vh > viewport visible) et on * atterrit sur du vide sous l'interface. * mode-config / lobby / hexahunt gardent le scroll de page : leurs * contenus empilés peuvent légitimement dépasser sur petit écran. */ body[data-view="landing"], body[data-view="game"], body[data-view="trace"]{ height:100vh; height:100dvh; overflow:hidden; } /* Le scroller de page est , pas : sans ce verrou-ci, un * débordement accidentel (ex : info-card dépliée) rend la page * scrollable malgré l'overflow:hidden du body. :has() = progressive * enhancement (Safari 15.4+/Chrome 105+), les vieux navigateurs * gardent le verrou body ci-dessus. */ html:has(body[data-view="landing"]), html:has(body[data-view="game"]), html:has(body[data-view="trace"]){ height:100vh; height:100dvh; overflow:hidden; } /* ───── THEME TOGGLE ───── * Tous les boutons .theme-toggle de l'app (home, trace, game-bar, * mode-config, etc.) prennent la même DA. La position absolute top- * right s'applique aux variantes flottantes ; la variante en barre * (.theme-toggle-bar) reste inline dans la barre. */ .theme-toggle{ /* reset du style legacy arrondi clair */ background:#1a1a1a !important; color:#d8d3c4 !important; /* crème discret, pas d'orange criard */ border:1.5px solid #3a3a3a !important; border-radius:3px !important; width:36px !important; height:36px !important; font-size:0 !important; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 2px 4px rgba(0,0,0,.25), /* ombre divisée par 2 */ inset 0 1px 0 rgba(255,255,255,.06) !important; transition:filter .15s ease, background .15s ease !important; } /* Icône pilotée par CSS selon data-theme : pas besoin de synchroniser le textContent en JS à chaque render dynamique (mode-config, lobby, hexahunt…). Le textContent hardcodé "☀" est masqué via font-size:0 sur le parent ; le pseudo-element rétablit la bonne icône selon le thème courant. ☀ = on est en dark (clique pour passer en light) ; 🌙 = on est en light (clique pour passer en dark). */ .theme-toggle::before{ font-size:15px; line-height:1; } html[data-theme="dark"] .theme-toggle::before{ content:"☀"; } html[data-theme="light"] .theme-toggle::before{ content:"🌙"; } /* Fallback si aucun data-theme n'est défini (init race condition) */ html:not([data-theme]) .theme-toggle::before{ content:"☀"; } .theme-toggle:hover{ filter:brightness(1.1); background:#242424 !important; /* pas de translateY : on reste posé */ } /* Light mode : boîtier clair cohérent avec la DA papier RATP. */ html[data-theme="light"] .theme-toggle{ background:#f8f6f0 !important; color:#1a2d52 !important; /* encre bleu RATP */ border:1.5px solid rgba(0,0,0,.2) !important; box-shadow: 0 2px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5) !important; } html[data-theme="light"] .theme-toggle:hover{ background:#fff !important; border-color:#1a2d52 !important; } /* Variante flottante : top-right fixe */ .landing-theme-toggle, .trace-theme-toggle, .view-theme-toggle{ position:absolute; top:16px !important; right:16px !important; z-index:50; } /* Variante en barre (game-bar) : inline, même style mais plus compact, * ombre minimale. */ .theme-toggle-bar{ position:static !important; margin-left:auto; width:32px !important; height:32px !important; font-size:13px; box-shadow: 0 1px 3px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ───── ZOOM MAP (leaflet-control-zoom) ───── * Posé TOUJOURS en haut-droite de sa map, immédiatement SOUS le * theme toggle, dans le même look métal. Deux boutons empilés * verticalement, un trait fin les sépare. */ .leaflet-control-zoom{ border:none !important; border-radius:3px !important; overflow:hidden; background:#1a1a1a !important; /* fond opaque : occulte la vignette */ isolation:isolate; /* nouveau stacking context propre */ box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important; } .leaflet-control-zoom a, .leaflet-control-zoom a:link, .leaflet-control-zoom a:visited{ background:#1a1a1a !important; color:#f8f6f0 !important; border:1.5px solid #3a3a3a !important; width:36px !important; height:36px !important; line-height:34px !important; font-family:'Barlow Semi Condensed','Barlow','Archivo Narrow',sans-serif !important; font-weight:800 !important; font-size:18px !important; text-shadow:0 1px 0 rgba(0,0,0,.5) !important; transition:background .15s ease, color .15s ease !important; } .leaflet-control-zoom a:first-child{ border-radius:3px 3px 0 0 !important; border-bottom:none !important; } .leaflet-control-zoom a:last-child{ border-radius:0 0 3px 3px !important; border-top:1px solid #0a0a0a !important; /* séparateur sombre */ } .leaflet-control-zoom a:hover{ background:#242424 !important; color:#ffffff !important; /* simple éclaircissement, pas d'orange */ } .leaflet-control-zoom a.leaflet-disabled{ opacity:.45 !important; color:#666 !important; background:#151515 !important; } /* Light mode : zoom papier crème comme le theme-toggle. */ html[data-theme="light"] .leaflet-control-zoom{ background:#f8f6f0 !important; box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5) !important; } html[data-theme="light"] .leaflet-control-zoom a, html[data-theme="light"] .leaflet-control-zoom a:link, html[data-theme="light"] .leaflet-control-zoom a:visited{ background:#f8f6f0 !important; color:#1a2d52 !important; border:1.5px solid rgba(0,0,0,.2) !important; text-shadow:0 1px 0 rgba(255,255,255,.5) !important; } html[data-theme="light"] .leaflet-control-zoom a:last-child{ border-top:1px solid rgba(0,0,0,.2) !important; } html[data-theme="light"] .leaflet-control-zoom a:hover{ background:#fff !important; color:#003f7a !important; } html[data-theme="light"] .leaflet-control-zoom a.leaflet-disabled{ background:#e5e0d0 !important; color:#9a9285 !important; } /* Position unifiée : sous le theme toggle (top:60px) à droite. * Vaut pour toutes les maps : landing, trace, map-reveal. * * Le container est PHYSIQUEMENT déplacé en enfant direct du body par * JS (cf. landing-map.js / trace-mode.js / reveal-map.js) parce que * `position:fixed + z-index` ne suffit pas : `.pb-vignette` continue * de couvrir le zoom dans certains cas (probable bug de painting * Chrome avec stacking contexts imbriqués + fixed+isolation). * Une fois orphelin de la map, il porte un `data-for-view` qui * permet de l'afficher uniquement quand sa map est à l'écran. */ .leaflet-top.leaflet-right{ position:fixed !important; top:60px !important; right:8px !important; z-index:1000 !important; } /* Show/hide selon la vue active. Sans data-for-view (cas legacy ou contrôles non encore détachés), on garde le rendu par défaut. */ .leaflet-top.leaflet-right[data-for-view]{ display:none !important; } body[data-view="landing"] .leaflet-top.leaflet-right[data-for-view="landing"], body[data-view="trace"] .leaflet-top.leaflet-right[data-for-view="trace"], body[data-view="game"] .leaflet-top.leaflet-right[data-for-view="reveal"], body[data-view="reveal"] .leaflet-top.leaflet-right[data-for-view="reveal"]{ display:block !important; } /* Une modale de fin doit passer devant TOUT — or la colonne zoom est * fixed z:1000 au body, au-dessus des overlays de fin (arcade 500, * scoreboard 200, daily 120, share-card 400). Cas réel : scoreboard * daily rouvert PAR-DESSUS la landing → les +/- flottent sur la * modale. On éteint la colonne tant qu'une modale de fin est ouverte * (la carte derrière n'est de toute façon plus manipulable). */ body:has(.arcade-end:not([hidden]), .daily-end:not([hidden]), .scoreboard-overlay:not([hidden]), .sc-overlay) .leaflet-top.leaflet-right{ display:none !important; } /* ───── NAV-BACK UNIFIÉ (.mc-back) — panneau SORTIE RATP ───── * Réplique de la signalétique "SORTIE" du métro parisien moderne : * plaque émaillée rectangulaire, typo Barlow Semi Condensed 800, * flèche blanche/bleue à gauche. * · Dark mode → plaque bleue + flèche et texte blancs * · Light mode → plaque blanche + flèche et texte bleus * Hauteur 36px pour matcher EXACTEMENT le theme-toggle (36×36) et * rester aligné au pixel près quand les deux sont sur la même ligne * haute des vues (top:16px). */ .mc-back{ display:inline-flex !important; align-items:center; gap:10px !important; height:36px !important; padding:0 16px 0 12px !important; background:#0e67b5 !important; color:#ffffff !important; border:none !important; border-radius:3px !important; font-family:'Barlow Semi Condensed','Barlow','Archivo',sans-serif !important; font-weight:800 !important; font-size:15px !important; letter-spacing:2px !important; line-height:1 !important; text-transform:uppercase !important; cursor:pointer; box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.18) !important; transition:filter .15s ease !important; text-decoration:none !important; box-sizing:border-box !important; } .mc-back:hover{ filter:brightness(1.08); } .mc-back:active{ filter:brightness(.96); box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.22) !important; } /* Light mode : plaque blanche, flèche + texte bleus */ html[data-theme="light"] .mc-back{ background:#ffffff !important; color:#0e67b5 !important; box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.1) !important; } /* Flèche : exactement le même SVG que .mp-arrow (plaques landing), * miroité horizontalement (viewBox 40x40, stroke-width 7, coords * symétriques x' = 40 - x). Masque le caractère Unicode (◀) injecté * en HTML pour afficher uniquement le SVG. */ .mc-back-arrow{ display:inline-flex !important; width:26px !important; height:26px !important; flex-shrink:0; background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; color:transparent !important; font-size:0 !important; transition:transform .15s ease !important; transform:none !important; } html[data-theme="light"] .mc-back-arrow{ background-image: url("data:image/svg+xml;utf8,") !important; } .mc-back:hover .mc-back-arrow{ transform:translateX(-2px) !important; } .mc-back-txt{ color:inherit !important; line-height:1; } /* ───── TOPBAR NEUTRALISÉ ───── * On ne veut plus de "header" visuel : le bouton SORTIE et le * theme-toggle deviennent des éléments flottants indépendants * (top-left / top-right), sans conteneur qui les associe. * Le .mc-topbar devient un conteneur logique sans layout propre. */ .mc-topbar{ display:contents !important; } /* Bouton SORTIE : flottant fixe en top-left, quelque soit la vue où * il est injecté (mode-config, lobby, hexahunt). Les vues trace/game * ont leur propre conteneur absolute (.trace-nav) — exclure ceux-ci. */ #view-mode-config .mc-topbar .mc-back, #view-lobby .mc-topbar .mc-back, #view-hexahunt .mc-topbar .mc-back{ position:absolute !important; top:16px !important; left:16px !important; z-index:100 !important; }