From 4b7d8c3965b4340c29fcacb9262762fc80a310ac Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 9 Dec 2025 05:52:27 +0000 Subject: [PATCH] Auto deploy: 2025-12-09 05:52:24 --- src/styles/mapLayout.css | 188 +++++++-------------------------------- 1 file changed, 33 insertions(+), 155 deletions(-) diff --git a/src/styles/mapLayout.css b/src/styles/mapLayout.css index fc62466..899905c 100644 --- a/src/styles/mapLayout.css +++ b/src/styles/mapLayout.css @@ -1,215 +1,93 @@ +/* Le conteneur global */ .map-view { position: relative; width: 100%; - height: calc(100vh - 72px); + height: 100vh; background: #020814; } -/* On laisse ~80px en haut pour les boutons, - la map commence plus bas → les posts ne collent plus au top. */ +/* La map DOIT couvrir tout l'écran, sauf un petit espace pour la top bar */ .map-container { position: absolute; - inset: 80px 8px 12px 8px; - border-radius: 18px; + top: 70px; /* ← espace pour les boutons */ + left: 0; + right: 0; + bottom: 0; + border-radius: 12px; overflow: hidden; + background: black; } -/* Overlays génériques */ +/* Overlays flottants */ .map-overlay { position: absolute; - z-index: 10; + z-index: 20; pointer-events: none; } -.map-overlay button, -.map-overlay .chip-pill, -.map-overlay .chip-round, -.map-overlay .chip-egg { +.map-overlay * { pointer-events: auto; } -/* TOP BAR : Look at, Place your wire, Zoom In/Out, Swall, New post */ +/* TOP BAR FIXE */ .map-overlay-top { - top: 12px; - left: 12px; - right: 12px; + top: 10px; + left: 10px; + right: 10px; display: flex; align-items: center; justify-content: space-between; - gap: 8px; } -.lookat-box { - min-width: 90px; - padding: 6px 10px; +/* Boutons */ +.chip-pill, .chip-round, .chip-egg, .chip-hex { + background: rgba(8,32,72,0.9); border-radius: 999px; - background: rgba(4, 24, 52, 0.96); color: #e8f3ff; - font-size: 11px; - font-weight: 500; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); - white-space: nowrap; -} - -.wire-title { - flex: 1; - text-align: center; - color: #7fb7ff; - font-size: 11px; - font-weight: 500; -} - -.zoom-buttons { - display: flex; - align-items: center; - gap: 6px; -} - -.top-newpost { - margin-left: 6px; -} - -/* Style de base pour chips */ -.chip-hex, -.chip-pill, -.chip-round, -.chip-egg { - border: none; - outline: none; - cursor: pointer; - background: rgba(8, 32, 72, 0.96); - color: #f0f7ff; - font-size: 11px; - font-weight: 500; - border-radius: 999px; padding: 6px 12px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); + font-size: 12px; + border: none; + cursor: pointer; } -.chip-selected { - background: #1c9dff; - color: #04101f; -} - -/* LEFT time filters */ +/* LEFT = time filters */ .map-overlay-left { + top: 100px; left: 16px; - top: 96px; display: flex; flex-direction: column; gap: 10px; } -/* RIGHT main filters */ +/* RIGHT = category filters */ .map-overlay-right { + top: 100px; right: 16px; - top: 96px; display: flex; flex-direction: column; gap: 10px; } -/* BOTTOM subcategories */ +/* Bottom subcategories */ .map-overlay-bottom { + bottom: 20px; left: 50%; transform: translateX(-50%); - bottom: 20px; display: flex; - gap: 12px; + gap: 10px; } -/* MY SPOT */ -.map-overlay-myloc { - right: 16px; - bottom: 80px; -} - -/* CROSSHAIR */ +/* Crosshair */ .map-crosshair { top: 50%; left: 50%; - width: 0; - height: 0; + position: absolute; transform: translate(-50%, -50%); } .crosshair-aim { - width: 22px; - height: 22px; + width: 20px; + height: 20px; border-radius: 999px; border: 2px solid #1c9dff; - box-shadow: 0 0 12px rgba(28, 157, 255, 0.9); - box-sizing: border-box; -} - -/* PANEL CREATE POST */ -.create-post-panel { - left: 0; - right: 0; - bottom: 0; - padding: 10px 14px 14px; - background: linear-gradient( - to top, - rgba(2, 8, 20, 0.98), - rgba(2, 8, 20, 0.92), - transparent - ); -} - -.create-post-header { - display: flex; - align-items: center; - justify-content: space-between; - color: #dfeeff; - font-size: 12px; - margin-bottom: 6px; -} - -.create-close { - border: none; - background: transparent; - color: #9fb7ff; - font-size: 14px; - cursor: pointer; -} - -.create-row { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 6px; -} - -.crosshair-label { - font-size: 11px; - color: #9bb7ff; -} - -.create-input, -.create-textarea, -.create-row select { - width: 100%; - border-radius: 8px; - border: 1px solid #23426b; - background: rgba(3, 15, 32, 0.95); - color: #e8f3ff; - font-size: 12px; - padding: 5px 7px; - box-sizing: border-box; -} - -.create-textarea { - resize: vertical; -} - -.create-error { - color: #ff6f6f; - font-size: 11px; - margin-top: 4px; -} - -.create-actions { - margin-top: 6px; - display: flex; - justify-content: flex-end; }