/* * components/chat-collapse-control.css * -------------------------------------------------------------------- * Système pli/dépli de la sidebar messagerie (#chat-window). * * Côté DOM, ce CSS gère uniquement : * 1. Le masquage de #chat-window quand body.chat-collapsed. * 2. Le bouton de pliage `#chat-collapse-btn` injecté dans #chat-nav * par chat-sidebar.js. * * Les 3 boutons « radio / logout / réouvrir » et la pastille * de notifications sont rendus **dans le canvas Phaser** * (cf. components/phaser-map-runtime.js → attachCanvasChatDockButtons), * plus aucun overlay DOM n'est nécessaire. * -------------------------------------------------------------------- */ /* === État replié : masquer la sidebar ================================ */ body.chat-collapsed #chat-window { display: none !important; } /* === Bouton de pliage (injecté dans #chat-nav par chat-sidebar.js) === * Aligné en hauteur (42 px) et en taille (carré 42 px) sur les 3 * boutons d'action `.chat-nav-icon-btn` : même grille, même ligne de * base. `margin-left: auto` le pousse à l'extrémité droite du flex row. * Une bordure gauche supplémentaire (`padding-left` + `margin-left` * compense visuellement) sépare visuellement « actions » et « pliage » * sans casser l'alignement. */ .chat-collapse-toggle { appearance: none; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(201, 162, 39, 0.22); color: #e8d5b5; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 22px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.18s ease, text-shadow 0.15s ease; margin-left: auto; font-family: 'Noto Sans JP', sans-serif; flex-shrink: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); box-sizing: border-box; } .chat-collapse-toggle:hover { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 210, 90, 0.7); color: #ffe9b8; box-shadow: 0 0 12px rgba(201, 162, 39, 0.4), 0 0 24px rgba(201, 162, 39, 0.15), inset 0 0 8px rgba(255, 210, 90, 0.08); text-shadow: 0 0 8px rgba(255, 210, 90, 0.5), 0 1px 2px rgba(0, 0, 0, 0.65); } .chat-collapse-toggle:active { transform: scale(0.94); } .chat-collapse-toggle:focus-visible { outline: 2px solid rgba(255, 210, 90, 0.7); outline-offset: 2px; } /* === Mode flottant : éléments détachés du #chat-window quand replié === * * Lorsque la sidebar est repliée (`body.chat-collapsed`), certains * éléments doivent rester visibles à l'écran : * - #wallet-display (toujours, dès que la sidebar est repliée) * - #radio-panel (à la demande — openFloatingPanel) * * `chat-collapse-control.js` les déplace vers et leur applique * la classe correspondante. Ici, on neutralise tous les styles inline * appliqués par les fonctions de positionnement habituelles * (positionnement panneau radio) avec `!important`, et on les ancre près du * dock canvas (top-right du viewport, mais à gauche de la colonne de * boutons canvas dont la largeur ~= 78 px + marges). */ /* Wallet flottant : DÉSACTIVÉ — le wallet est maintenant rendu * directement dans le canvas Phaser quand la sidebar est repliée * (cf. attachCanvasWalletDisplay dans phaser-map-runtime.js). * On masque complètement l'élément DOM pour éviter les doublons. */ #wallet-display.wallet-floating { display: none !important; } /* * Picker d’instances Chōhan (modale dans l’iframe) : le wallet flottant * du parent doit passer **sous** la zone jeu (#main-wrapper) pour que * l’overlay (z-index élevé dans l’iframe) recouvre tout l’écran visuel. * Sans cela, #wallet-display (z-index: 100040) masque une partie de la * modale. Le JS (`chohan-instance-picker.js`) pose / retire la classe * `chohan-ip-picker-open` sur `documentElement` du **parent** à * l’ouverture / fermeture du picker. */ html.chohan-ip-picker-open #main-wrapper { position: relative; z-index: 100035; } html.chohan-ip-picker-open #wallet-display.wallet-floating, html.chohan-ip-picker-open #wallet-display.wallet-fx-pulse { z-index: 100020 !important; } /* Panneau radio en mode flottant : détaché du #chat-nav, * ancré en haut-droite du viewport mais à GAUCHE du dock canvas * (le dock occupe ~110 px à droite). On supprime la flèche * (::before / ::after) qui pointait vers le bouton DOM. */ #radio-panel.panel-floating { position: fixed !important; top: 18px !important; right: 110px !important; left: auto !important; transform: none !important; z-index: 1000001 !important; width: min(360px, calc(100vw - 130px)) !important; max-height: calc(100vh - 36px); overflow: auto; pointer-events: auto; touch-action: manipulation; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 39, 0.25); } #radio-panel.panel-floating::before, #radio-panel.panel-floating::after { display: none !important; } /* Animation d'entrée commune (le `.visible` reste piloté par le JS). */ #radio-panel.panel-floating.visible { display: block; z-index: 1000001 !important; pointer-events: auto; touch-action: manipulation; animation: float-panel-in 0.18s ease-out; } #radio-panel.panel-floating.visible.closing { animation: none; opacity: 0; transform: translateY(-6px) scale(0.97) !important; transition: opacity 0.22s ease, transform 0.22s ease; } @keyframes float-panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } } /* Sidebar étroite (orientation portrait / petits écrans) : on * recentre les panneaux flottants à la place du décalage à droite. */ @media (orientation: portrait), (max-width: 480px) { #radio-panel.panel-floating { top: 14px !important; right: 14px !important; left: 14px !important; width: auto !important; } }