cleanup frontend auth, remove keycloak remnants, local fontawesome
This commit is contained in:
Your Name
parent
9abf38326e
commit
3d58684b87
42
src/App.css
42
src/App.css
|
|
@ -1,42 +0,0 @@
|
||||||
#root {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.react:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
a:nth-of-type(2) .logo {
|
|
||||||
animation: logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import keycloak from "./keycloak";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialise Keycloak sans forcer le login.
|
|
||||||
* - onLoad: "check-sso" => ne redirige pas si user non loggé
|
|
||||||
*/
|
|
||||||
export function initAuth() {
|
|
||||||
return keycloak.init({
|
|
||||||
onLoad: "check-sso",
|
|
||||||
checkLoginIframe: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Appelle une action qui nécessite d'être authentifié.
|
|
||||||
* Si non loggé => ouvre la page de login Keycloak, puis revient sur la même page.
|
|
||||||
*/
|
|
||||||
export function requireAuth(action) {
|
|
||||||
if (keycloak.authenticated) {
|
|
||||||
return action();
|
|
||||||
}
|
|
||||||
|
|
||||||
keycloak.login({
|
|
||||||
redirectUri: window.location.href,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retourne le token JWT actuel (ou null)
|
|
||||||
*/
|
|
||||||
export function getToken() {
|
|
||||||
return keycloak.token || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retourne le username depuis le token (si présent)
|
|
||||||
*/
|
|
||||||
export function getUsername() {
|
|
||||||
const profile = keycloak.tokenParsed || {};
|
|
||||||
return (
|
|
||||||
profile.preferred_username ||
|
|
||||||
profile.email ||
|
|
||||||
profile.name ||
|
|
||||||
null
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Logout et revient sur la même page.
|
|
||||||
*/
|
|
||||||
export function logout() {
|
|
||||||
keycloak.logout({
|
|
||||||
redirectUri: window.location.origin,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default keycloak;
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import Keycloak from "keycloak-js";
|
|
||||||
|
|
||||||
const keycloak = new Keycloak({
|
|
||||||
url: "https://web.sociowire.com:8443",
|
|
||||||
realm: "sociowire",
|
|
||||||
clientId: "sociowire-frontend",
|
|
||||||
});
|
|
||||||
|
|
||||||
export default keycloak;
|
|
||||||
|
|
@ -1,185 +0,0 @@
|
||||||
/* MapLibre: on stabilise l'ancrage en gardant l'élément root à 0x0
|
|
||||||
et tout le UI en absolute au-dessus d'une pointe FIXE. */
|
|
||||||
|
|
||||||
/* Root du marker = ancre stable */
|
|
||||||
.post-pin {
|
|
||||||
position: relative;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
pointer-events: none; /* on active sur les enfants */
|
|
||||||
transform: translate3d(0,0,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Conteneurs cliquables */
|
|
||||||
.post-pin * {
|
|
||||||
pointer-events: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pointe fixe (tip) — le bas du marker */
|
|
||||||
.post-pin-tip {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
transform: translate(-50%, -100%); /* remonte le tip au-dessus du point d'ancre */
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 10px solid transparent;
|
|
||||||
border-right: 10px solid transparent;
|
|
||||||
border-top: 11px solid rgba(8, 20, 40, 0.97);
|
|
||||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wrapper commun (compact/expanded) positionné AU-DESSUS du tip */
|
|
||||||
.post-pin-layer {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
transform: translate(-50%, calc(-100% - 12px)); /* 12px = hauteur tip approx */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
COMPACT
|
|
||||||
========================= */
|
|
||||||
.post-pin-compact {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(6, 40, 80, 0.95);
|
|
||||||
border: 1px solid rgba(80, 180, 255, 0.9);
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
max-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-pin-dot {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #ff8a00;
|
|
||||||
margin-right: 6px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-pin-text {
|
|
||||||
color: #e8f5ff;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
max-width: 160px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
EXPANDED
|
|
||||||
========================= */
|
|
||||||
.post-pin-expanded {
|
|
||||||
min-width: 260px;
|
|
||||||
max-width: 320px;
|
|
||||||
background: rgba(8, 20, 40, 0.97);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8);
|
|
||||||
border: 1px solid rgba(90, 190, 255, 0.9);
|
|
||||||
color: #e8f5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header : catégorie + heure/date */
|
|
||||||
.post-card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 11px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-cat {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #8fc5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-time {
|
|
||||||
color: #9eb7ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* corps : media + texte */
|
|
||||||
.post-card-main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-media {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: radial-gradient(circle at 30% 30%, #4a9dff, #07152b);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-media-label {
|
|
||||||
font-size: 9px;
|
|
||||||
text-align: center;
|
|
||||||
color: #e8f5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-title {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-meta {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #9eb7ff;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-body {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #c7e3ff;
|
|
||||||
max-height: 70px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* footer boutons */
|
|
||||||
.post-card-footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-btn {
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 3px 8px;
|
|
||||||
font-size: 10px;
|
|
||||||
background: rgba(5, 35, 70, 0.95);
|
|
||||||
color: #e8f5ff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-comments {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #9eb7ff;
|
|
||||||
padding: 4px 6px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(3, 14, 32, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Helpers */
|
|
||||||
.post-hidden { display: none !important; }
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import "./topbar.css";
|
|
||||||
|
|
||||||
export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) {
|
|
||||||
return (
|
|
||||||
<div className="topbar">
|
|
||||||
|
|
||||||
<div className="topbar-left">
|
|
||||||
<img
|
|
||||||
src="/icons/logo-master.png"
|
|
||||||
alt="SocioWire Logo"
|
|
||||||
className="sw-logo"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="title-block">
|
|
||||||
<div className="main-title">SocioWire</div>
|
|
||||||
<div className="sub-title">Wired to life</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="topbar-right">
|
|
||||||
<div className="theme-switch">
|
|
||||||
<button className={\`theme-dot \${theme === "dark" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("dark")}>D</button>
|
|
||||||
<button className={\`theme-dot \${theme === "blue" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("blue")}>B</button>
|
|
||||||
<button className={\`theme-dot \${theme === "light" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("light")}>L</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{username ? (
|
|
||||||
<div className="username-chip">{username}</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<button className="btn-primary" onClick={onLoginClick}>Login</button>
|
|
||||||
<button className="btn-secondary" onClick={onSignupClick}>Sign up</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.topbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.45rem 0.75rem;
|
|
||||||
background: #0b1020;
|
|
||||||
border-bottom: 1px solid #1f2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.55rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sw-logo {
|
|
||||||
width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
background: #020617;
|
|
||||||
border: 1px solid rgba(148,163,184,0.5);
|
|
||||||
box-shadow: 0 0 12px rgba(56,189,248,0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-title {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-title {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
color: #93c5fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username-chip {
|
|
||||||
background: rgba(15,23,42,.96);
|
|
||||||
padding: 0.25rem 0.7rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(148,163,184,0.85);
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
:root {
|
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
import "@fortawesome/fontawesome-free/css/all.min.css"; // local via npm (no CDN)
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import App from "./App.jsx";
|
import App from "./App.jsx";
|
||||||
|
|
@ -7,13 +8,10 @@ import "./styles/base.css";
|
||||||
import "./styles/layout.css";
|
import "./styles/layout.css";
|
||||||
import "./styles/topbar.css";
|
import "./styles/topbar.css";
|
||||||
import "./styles/map.css";
|
import "./styles/map.css";
|
||||||
import "./styles/markers.css";
|
|
||||||
import "./styles/popup.css";
|
|
||||||
import "./styles/overlays.css";
|
import "./styles/overlays.css";
|
||||||
import "./styles/posts.css";
|
import "./styles/posts.css";
|
||||||
import "./styles/theme.css";
|
import "./styles/theme.css";
|
||||||
import "./styles/auth-modal.css";
|
import "./styles/auth-modal.css";
|
||||||
import "./styles/game-filters.css";
|
|
||||||
import "./styles/filters.css";
|
import "./styles/filters.css";
|
||||||
import "./styles/mapMarkers.css";
|
import "./styles/mapMarkers.css";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* legacy placeholder (kept if imported) */
|
|
||||||
|
|
@ -1,284 +0,0 @@
|
||||||
/* RESET */
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background: #050816;
|
|
||||||
color: #fff;
|
|
||||||
font-family: system-ui, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TOPBAR */
|
|
||||||
.topbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
background: #0b1020;
|
|
||||||
border-bottom: 1px solid #1f2937;
|
|
||||||
}
|
|
||||||
.logo-circle {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
background: radial-gradient(circle, #38bdf8, #1d4ed8, #020617);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.title-block {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.main-title { font-size: 1rem; font-weight: 700; }
|
|
||||||
.sub-title { font-size: 0.75rem; opacity: 0.7; }
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
padding: 0.25rem 0.7rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid #22c55e;
|
|
||||||
background: #16a34a;
|
|
||||||
color: #f9fafb;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ROOT & LAYOUT */
|
|
||||||
.app-root {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.main-shell {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
padding: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MAP FULLSCREEN */
|
|
||||||
.map-shell {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #1f2937;
|
|
||||||
background: #020617;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-view {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maplibre-container {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlays autour de la map */
|
|
||||||
.map-overlay {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.map-overlay * {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Haut */
|
|
||||||
.top-bar {
|
|
||||||
top: 0.4rem;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 0 0.6rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.lookat-box {
|
|
||||||
padding: 0.25rem 0.6rem;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-radius: 999px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
.wire-title { font-size: 0.7rem; opacity: 0.7; }
|
|
||||||
.zoom-buttons { display: flex; gap: 0.3rem; }
|
|
||||||
|
|
||||||
/* Gauche */
|
|
||||||
.left-bar {
|
|
||||||
left: 0.4rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Droite */
|
|
||||||
.right-bar {
|
|
||||||
right: 0.4rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bas */
|
|
||||||
.bottom-bar {
|
|
||||||
bottom: 0.4rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chips */
|
|
||||||
.chip-round,
|
|
||||||
.chip-pill,
|
|
||||||
.chip-egg,
|
|
||||||
.chip-hex {
|
|
||||||
background: rgba(20,25,50,0.9);
|
|
||||||
border: 1px solid #1d4ed8;
|
|
||||||
padding: 0.35rem 0.6rem;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 999px;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
.chip-egg { border-radius: 999px; }
|
|
||||||
.chip-hex { border-radius: 0.4rem; }
|
|
||||||
.chip-pill { border-radius: 999px; }
|
|
||||||
|
|
||||||
/* Status en bas à gauche */
|
|
||||||
.map-status {
|
|
||||||
position: absolute;
|
|
||||||
left: 0.5rem;
|
|
||||||
bottom: 0.5rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0.2rem 0.4rem;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === MARKERS (petits posts) === */
|
|
||||||
.post-marker {
|
|
||||||
position: relative;
|
|
||||||
background: rgba(15, 23, 42, 0.96);
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.9);
|
|
||||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.post-marker::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -7px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 7px 7px 0 7px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent;
|
|
||||||
}
|
|
||||||
.post-marker-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.post-marker-text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 140px;
|
|
||||||
}
|
|
||||||
.post-marker-title {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.post-marker-snippet {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
opacity: 0.8;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.post-marker-image {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.8);
|
|
||||||
}
|
|
||||||
.post-marker-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.post-marker-image-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #020617);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === POPUP GROS POST === */
|
|
||||||
.maplibregl-popup-content {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.popup-post-card {
|
|
||||||
background: rgba(15, 23, 42, 0.97);
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.9);
|
|
||||||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85);
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
.popup-post-inner {
|
|
||||||
padding: 0.65rem 0.75rem 0.75rem 0.75rem;
|
|
||||||
}
|
|
||||||
.popup-post-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.6rem;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
.popup-post-image {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.9);
|
|
||||||
}
|
|
||||||
.popup-post-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.popup-post-image-placeholder {
|
|
||||||
background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #020617);
|
|
||||||
}
|
|
||||||
.popup-post-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.popup-post-body {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
line-height: 1.35;
|
|
||||||
color: #cbd5f5;
|
|
||||||
max-height: 190px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
/* ========== MAP LAYOUT MINIMAL ========== */
|
|
||||||
/* Ce fichier gère seulement la taille de la map.
|
|
||||||
Les overlays + boutons sont stylés dans overlays.css */
|
|
||||||
|
|
||||||
.map-view {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; /* avant: 100vh → provoquait un double scroll */
|
|
||||||
background: #020814;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* La carte MapLibre remplit tout l'espace de la vue */
|
|
||||||
.map-container {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* legacy placeholder (kept if imported) */
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* legacy placeholder (kept if imported) */
|
|
||||||
Loading…
Reference in New Issue