diff --git a/src/styles/overlays.css b/src/styles/overlays.css index 03d22da..d3b8fe3 100644 --- a/src/styles/overlays.css +++ b/src/styles/overlays.css @@ -1,6 +1,7 @@ /* ========================================== - SOCIOWIRE — OVERLAYS (TOP / LEFT / RIGHT / - BOTTOM / MY SPOT / CREATE PANEL) + SOCIOWIRE — OVERLAYS AUTOUR DE LA MAP + (TOP / LEFT / RIGHT / BOTTOM / MY SPOT / + CREATE PANEL) ========================================== */ .map-overlay { @@ -13,7 +14,7 @@ pointer-events: auto; } -/* --------- TOP --------- */ +/* --------- TOP : "Look at..." + "Place your wire" --------- */ .map-overlay-top { top: 0.7rem; @@ -24,19 +25,25 @@ align-items: center; } -.lookat-box { - /* maintenant on utilise un bouton chip, cette classe sert juste au texte au centre si besoin */ - font-size: 0.75rem; - color: #93c5fd; +.chip-pill { + background: radial-gradient(circle at 30% 30%, #0f172a, #020617); + border: 1px solid rgba(148, 163, 184, 0.9); + color: #e5e7eb; + padding: 0.45rem 1.1rem; + font-size: 0.8rem; + border-radius: 999px; + cursor: pointer; + box-shadow: + 0 6px 16px rgba(0, 0, 0, 0.85), + 0 0 16px rgba(56, 189, 248, 0.4); } -.wire-title { - font-size: 0.75rem; - opacity: 0.9; - color: #93c5fd; +.chip-pill:first-child { + /* "Look at..." un peu plus large, façon bannière */ + padding-inline: 1.4rem; } -/* --------- LEFT --------- */ +/* --------- LEFT : filtres temps (Now / Today / Recently / Past) --------- */ .map-overlay-left { left: 0.7rem; @@ -44,10 +51,23 @@ transform: translateY(-50%); display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.55rem; } -/* --------- RIGHT --------- */ +.chip-round { + background: radial-gradient(circle at 30% 30%, #020617, #020617); + border-radius: 999px; + border: 1px solid rgba(148, 163, 184, 0.9); + color: #e5e7eb; + padding: 0.5rem 1rem; + font-size: 0.78rem; + cursor: pointer; + box-shadow: + 0 5px 14px rgba(0, 0, 0, 0.8), + 0 0 14px rgba(56, 189, 248, 0.35); +} + +/* --------- RIGHT : filtres principaux (All / News / Friends / Events / Market) --------- */ .map-overlay-right { right: 0.7rem; @@ -55,17 +75,19 @@ transform: translateY(-50%); display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.55rem; } -/* Bouton principal sélectionné */ +/* Quand un bouton est sélectionné (temps ou catégorie) */ .chip-selected { - background: linear-gradient(135deg, #2563eb, #0ea5e9); + background: linear-gradient(135deg, #1d4ed8, #0ea5e9); border-color: #7dd3fc; - box-shadow: 0 0 20px rgba(56, 189, 248, 0.55); + box-shadow: + 0 0 20px rgba(56, 189, 248, 0.55), + 0 8px 22px rgba(0, 0, 0, 0.9); } -/* --------- BOTTOM — ARC (INVERSE AUTOUR DU GLOBE) --------- */ +/* --------- BOTTOM : sous-catégories en arc --------- */ .map-overlay-bottom { bottom: 3.2rem; @@ -75,35 +97,55 @@ gap: 0.4rem; } -/* courbure inversée : centre plus bas, côtés plus hauts */ +.chip-egg { + background: rgba(0, 10, 30, 0.95); + border-radius: 999px; + border: 1px solid rgba(56, 189, 248, 0.55); + color: #e5e7eb; + padding: 0.4rem 0.9rem; + font-size: 0.78rem; + cursor: pointer; + box-shadow: + 0 5px 14px rgba(0, 0, 0, 0.8), + 0 0 14px rgba(56, 189, 248, 0.4); +} + +/* effet de courbe autour du bas de la carte + (5 premiers œufs, les autres restent droits) */ .map-overlay-bottom .chip-egg:nth-child(1) { - transform: translateY(-8px) rotate(-12deg); + transform: translateY(-10px) rotate(-14deg); } .map-overlay-bottom .chip-egg:nth-child(2) { - transform: translateY(-4px) rotate(-6deg); + transform: translateY(-6px) rotate(-7deg); } .map-overlay-bottom .chip-egg:nth-child(3) { - transform: translateY(0px) rotate(0deg); + transform: translateY(-2px) rotate(0deg); } .map-overlay-bottom .chip-egg:nth-child(4) { - transform: translateY(-4px) rotate(6deg); + transform: translateY(-6px) rotate(7deg); } .map-overlay-bottom .chip-egg:nth-child(5) { - transform: translateY(-8px) rotate(12deg); + transform: translateY(-10px) rotate(14deg); +} + +/* œuf sélectionné */ +.chip-egg-active { + background: linear-gradient(135deg, #1d4ed8, #0ea5e9); + border-color: #7dd3fc; } /* --------- BOUTON "MY SPOT" --------- */ .map-overlay-myloc { right: 0.7rem; - bottom: 6rem; + bottom: 6.2rem; } -/* --------- CROSSHAIR SUR LA MAP --------- */ +/* --------- CROSSHAIR (si tu le remets plus tard) --------- */ .map-crosshair { left: 50%; - top: 40%; /* au-dessus du popup */ + top: 40%; transform: translate(-50%, -50%); } @@ -136,7 +178,7 @@ height: 70%; } -/* --------- CREATE POST PANEL (1/5 du bas) --------- */ +/* --------- CREATE POST PANEL (fenêtre 1/5 du bas) --------- */ .create-post-panel { left: 50%; @@ -173,16 +215,16 @@ cursor: pointer; } +.crosshair-label { + font-size: 0.75rem; + color: #cbd5f5; +} + .create-row { display: flex; align-items: center; gap: 0.5rem; - margin-bottom: 0.4rem; -} - -.crosshair-label { - font-size: 0.75rem; - color: #cbd5f5; + margin: 0.35rem 0; } .create-row select { @@ -228,35 +270,3 @@ display: flex; justify-content: flex-end; } - -/* --------- STYLES DES CHIPS --------- */ - -.chip-round, -.chip-pill, -.chip-egg, -.chip-hex { - background: rgba(15, 23, 42, 0.96); - border: 1px solid rgba(148, 163, 184, 0.85); - color: #e5e7eb; - padding: 0.45rem 0.9rem; - font-size: 0.78rem; - border-radius: 999px; - cursor: pointer; - box-shadow: - 0 5px 12px rgba(0, 0, 0, 0.7), - 0 0 12px rgba(56, 189, 248, 0.35); -} - -.chip-egg { - background: rgba(0, 10, 30, 0.9); - border: 1px solid rgba(56, 189, 248, 0.55); -} - -.chip-egg-active { - background: linear-gradient(135deg, #1d4ed8, #0ea5e9); - border-color: #7dd3fc; -} - -.chip-hex { - border-radius: 0.65rem; -}