diff --git a/src/styles/overlays.css b/src/styles/overlays.css deleted file mode 100644 index 7afcd67..0000000 --- a/src/styles/overlays.css +++ /dev/null @@ -1,333 +0,0 @@ -.map-overlay { position:absolute; pointer-events:none; z-index:40; } -.map-overlay * { pointer-events:auto; } - -.map-overlay-top { - top: .7rem; left:50%; transform:translateX(-50%); - display:flex; gap:.6rem; align-items:center; - flex-wrap: wrap; - justify-content: center; - max-width: min(980px, calc(100vw - 24px)); -} - -.map-overlay-left { - left:.7rem; top:44%; transform:translateY(-50%); - display:flex; flex-direction:column; gap:.5rem; -} -.map-overlay-right { - right:.7rem; top:44%; transform:translateY(-50%); - display:flex; flex-direction:column; gap:.5rem; -} - -/* ✅ Sub-categories row MUST stay above the Sociowall overlap */ -/* ✅ DESCEND 25px (was 0 / 10 / 20): */ -.map-overlay-bottom { bottom: calc(3.2rem + var(--sw-below-overlap, 0px) + env(safe-area-inset-bottom) + var(--sw-subcats-nudge, 0px)); left:50%; transform:translateX(-50%); display:flex; gap:.4rem; } - -.map-overlay-myloc { right:.7rem; bottom:6rem; } - -.map-crosshair { left:50%; top:40%; transform:translate(-50%,-50%); } -.crosshair-aim { - width:34px; height:34px; border-radius:999px; - border:1px solid #38bdf8; position:relative; - box-shadow:0 0 14px rgba(56,189,248,.9); -} -.crosshair-aim::before, .crosshair-aim::after{ - content:""; position:absolute; left:50%; top:50%; - background:#38bdf8; transform:translate(-50%,-50%); -} -.crosshair-aim::before{ width:70%; height:1px; } -.crosshair-aim::after{ width:1px; height:70px; } - -.create-post-panel { - left:50%; bottom:20%; transform:translateX(-50%); - width:92%; max-width:520px; - background: rgba(15, 23, 42, 0.96); - border-radius:16px; - border:1px solid rgba(148, 163, 184, 0.9); - box-shadow: 0 16px 40px rgba(0,0,0,.9), 0 0 24px rgba(56,189,248,.6); - padding: .6rem .7rem .7rem; -} -.create-post-header { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; margin-bottom:.4rem; color:#e5e7eb; } -.create-close { background:transparent; border:none; color:#9ca3af; font-size:.85rem; padding:.1rem .3rem; cursor:pointer; } -.create-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; } -.crosshair-label { font-size:.75rem; color:#cbd5f5; } - -.create-row select { - flex:1; background:#020617; border-radius:999px; - border:1px solid #4b5563; padding:.35rem .7rem; - font-size:.75rem; color:#e5e7eb; -} -.create-input { - width:100%; margin-bottom:.3rem; border-radius:999px; - border:1px solid #4b5563; padding:.35rem .7rem; - background:#020617; color:#e5e7eb; font-size:.8rem; -} -.create-textarea { - width:100%; border-radius:.75rem; border:1px solid #4b5563; - padding:.35rem .7rem; background:#020617; color:#e5e7eb; - resize:none; font-size:.78rem; -} -.create-error { margin-top:.25rem; font-size:.7rem; color:#f97373; } -.create-actions { margin-top:.4rem; display:flex; justify-content:flex-end; } - -.chip-pill { - 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,.7), 0 0 12px rgba(56,189,248,.35); -} - - -/* SW_SEARCHBAR:BEGIN */ -.sw-searchbar{ - pointer-events: auto; - display:flex; - align-items:center; - gap: .55rem; - padding: 0.42rem 0.70rem; - border-radius: 999px; - background: rgba(15, 23, 42, 0.92); - border: 1px solid rgba(148, 163, 184, 0.85); - box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22); - backdrop-filter: blur(10px); - min-height: 38px; -} - -.sw-searchbar:focus-within{ - border-color: rgba(56,189,248,.85); - box-shadow: 0 8px 18px rgba(0,0,0,.72), 0 0 18px rgba(56,189,248,.35); -} - -.sw-search-icon{ - font-size: 14px; - opacity: .95; -} - -.sw-search-input{ - border: none; - outline: none; - background: transparent; - color: #e5e7eb; - font-size: 0.80rem; - font-weight: 800; - width: min(52vw, 360px); - min-width: 160px; -} - -.sw-search-input::placeholder{ - color: rgba(203, 213, 225, 0.88); - font-weight: 800; -} - -.sw-search-clear{ - border: none; - cursor: pointer; - width: 28px; - height: 28px; - border-radius: 999px; - background: rgba(2,6,23,.35); - border: 1px solid rgba(148,163,184,.35); - color: #e5e7eb; - font-weight: 900; - display:grid; - place-items:center; -} - -.sw-search-clear:active{ transform: scale(0.97); } - -/* Light theme */ -body[data-theme="light"] .sw-searchbar{ - background: rgba(255,255,255,0.92); - border-color: rgba(148, 163, 184, 0.85); - box-shadow: 0 8px 18px rgba(0,0,0,.10); -} -body[data-theme="light"] .sw-search-input{ - color:#0B1220; -} -body[data-theme="light"] .sw-search-input::placeholder{ - color: rgba(91, 103, 122, 0.92); -} -body[data-theme="light"] .sw-search-clear{ - background: rgba(255,255,255,.85); - color:#0B1220; - border-color: rgba(148,163,184,.55); -} - -/* Tight phones: keep it clean */ -@media (max-width: 420px){ - .sw-search-input{ - width: min(72vw, 320px); - min-width: 120px; - } -} -/* SW_SEARCHBAR:END */ - -/* SW_MAP_TOP_BUTTONS: deux boutons à côté de la search bar */ -.map-top-buttons{ - display:flex; - gap:.45rem; - flex-wrap:wrap; - align-items:center; - justify-content:center; -} - -/* ==== TOP ROW: search + 2 icônes actions ===== */ - -.sw-top-row{ - display:flex; - align-items:center; - justify-content:space-between; - gap:0.75rem; -} - -/* la search prend tout l'espace dispo à gauche */ -.sw-top-search{ - flex:1 1 auto; -} - -/* bloc des 2 boutons icônes à droite */ -.map-top-actions{ - display:flex; - flex-direction:row; - align-items:center; - gap:0.5rem; -} - -/* bouton icône: rond + label en dessous */ -.map-action-btn{ - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - padding:0.25rem 0.45rem; - border-radius:0.9rem; - border:1px solid rgba(255,255,255,0.08); - background:rgba(8,8,16,0.9); - backdrop-filter:blur(14px); - box-shadow:0 8px 22px rgba(0,0,0,0.55); - font-size:0.7rem; - line-height:1.1; - cursor:pointer; - white-space:nowrap; -} - -.map-action-btn:disabled{ - opacity:0.45; - cursor:default; -} - -.map-action-icon{ - font-size:1.05rem; - margin-bottom:0.15rem; -} - -.map-action-label{ - font-size:0.6rem; - text-transform:uppercase; - letter-spacing:0.04em; -} - -/* === Fix: search + 2 boutons sur une seule ligne === */ - -.map-overlay-top.sw-top-row{ - display:flex; - flex-direction:row; - align-items:center; - justify-content:space-between; - gap:0.75rem; -} - -/* la search ne prend plus 100% de largeur, elle laisse de la place aux icônes */ -.map-overlay-top.sw-top-row .sw-searchbar{ - flex:1 1 auto; - width:auto; - max-width:100%; -} - -/* bloc des 2 boutons à droite ne wrap pas trop vite */ -.map-overlay-top.sw-top-row .map-top-actions{ - flex-shrink:0; -} - -/* un petit min-width pour que les boutons restent lisibles */ -.map-overlay-top.sw-top-row .map-action-btn{ - min-width:64px; -} - -/* Ajuste un peu pour les petits écrans */ -@media (max-width: 480px){ - .map-overlay-top.sw-top-row{ - gap:0.4rem; - } - - .map-overlay-top.sw-top-row .sw-search-input{ - font-size:0.75rem; - } -} - -/* === Top bar : 75% search / 25% boutons === */ - -.map-overlay-top{ - display:flex; - flex-direction:row; - align-items:center; - justify-content:space-between; - gap:0.75rem; -} - -/* Search = 75% */ -.map-overlay-top .sw-searchbar{ - flex:0 0 75%; - max-width:75%; -} - -/* Bloc 2 boutons = 25% */ -.map-overlay-top .map-top-actions{ - flex:0 0 25%; - max-width:25%; - display:flex; - justify-content:flex-end; - gap:0.5rem; -} - -/* === Style des deux boutons à droite === */ -.map-top-actions .map-action-btn{ - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - padding:0.35rem 0.55rem; - border-radius:999px; /* pastille bien ronde */ - background:rgba(5, 25, 60, 0.25); /* fond presque transparent */ - border:1px solid rgba(255,255,255,0.15); - box-shadow:0 6px 14px rgba(0,0,0,0.35); - backdrop-filter:blur(8px); /* effet verre comme le reste */ -} - -/* Icône Font Awesome */ -.map-top-actions .map-action-btn i{ - display:block; - font-size:1.05rem; - margin-bottom:0.15rem; -} - -/* Texte sous l’icône (MY SPOT / NEW WIRE) */ -.map-top-actions .map-action-btn span{ - font-size:0.65rem; - font-weight:600; - letter-spacing:0.03em; -} - -/* Petits écrans */ -@media (max-width:480px){ - .map-overlay-top{ - gap:0.4rem; - } - - .map-top-actions .map-action-btn{ - padding:0.3rem 0.45rem; - } -}