185 lines
3.4 KiB
CSS
185 lines
3.4 KiB
CSS
/* ==========================================
|
||
SOCIOWALL + CHAT (bas de l'écran)
|
||
========================================== */
|
||
|
||
.map-overlay-wall {
|
||
position: absolute;
|
||
left: 0.7rem;
|
||
right: 0.7rem;
|
||
bottom: 0.7rem;
|
||
display: flex;
|
||
gap: 0.6rem;
|
||
align-items: stretch;
|
||
pointer-events: none;
|
||
z-index: 25;
|
||
}
|
||
|
||
.map-overlay-wall * {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* --------- SOCIOWALL (liste de posts) --------- */
|
||
|
||
.sociowall-panel {
|
||
flex: 1.5;
|
||
min-height: 120px;
|
||
max-height: 220px;
|
||
background: rgba(15, 23, 42, 0.96);
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(148, 163, 184, 0.9);
|
||
box-shadow:
|
||
0 14px 40px rgba(0, 0, 0, 0.9),
|
||
0 0 22px rgba(56, 189, 248, 0.45);
|
||
padding: 0.5rem 0.6rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sociowall-header {
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: #bfdbfe;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
/* --------- LISTE DES POSTS --------- */
|
||
|
||
.post-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-right: 0.2rem;
|
||
}
|
||
|
||
.post-list-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.7rem;
|
||
color: #cbd5f5;
|
||
}
|
||
|
||
.km-filter label {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.km-filter span {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* slider 0–1000 km */
|
||
.km-filter input[type="range"] {
|
||
width: 130px;
|
||
}
|
||
|
||
/* texte de statut (chargement / erreur / vide) */
|
||
.status-text {
|
||
font-size: 0.72rem;
|
||
opacity: 0.85;
|
||
margin: 0.15rem 0;
|
||
}
|
||
|
||
.status-error {
|
||
color: #fecaca;
|
||
}
|
||
|
||
/* --------- CARTE D’UN POST --------- */
|
||
|
||
.post-card {
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(55, 65, 81, 0.9);
|
||
background: rgba(15, 23, 42, 0.92);
|
||
padding: 0.3rem 0.45rem;
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.76rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s ease, border-color 0.15s ease,
|
||
box-shadow 0.15s ease, transform 0.1s ease;
|
||
}
|
||
|
||
.post-card:hover {
|
||
background: rgba(17, 24, 39, 0.95);
|
||
border-color: rgba(96, 165, 250, 0.9);
|
||
box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.post-card.selected {
|
||
background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
|
||
border-color: #bfdbfe;
|
||
box-shadow:
|
||
0 0 16px rgba(56, 189, 248, 0.6),
|
||
0 12px 26px rgba(15, 23, 42, 0.98);
|
||
}
|
||
|
||
.post-card h3 {
|
||
margin: 0 0 0.15rem 0;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.post-card p {
|
||
margin: 0;
|
||
font-size: 0.72rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.post-km {
|
||
display: inline-block;
|
||
margin-top: 0.12rem;
|
||
font-size: 0.68rem;
|
||
padding: 0.05rem 0.35rem;
|
||
border-radius: 999px;
|
||
background: rgba(15, 118, 110, 0.2);
|
||
border: 1px solid rgba(45, 212, 191, 0.7);
|
||
color: #a5f3fc;
|
||
}
|
||
|
||
/* --------- PANEL CHAT (à droite) --------- */
|
||
|
||
.chat-panel {
|
||
width: 150px;
|
||
min-width: 130px;
|
||
max-height: 220px;
|
||
background: rgba(15, 23, 42, 0.96);
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(148, 163, 184, 0.9);
|
||
box-shadow:
|
||
0 14px 40px rgba(0, 0, 0, 0.9),
|
||
0 0 22px rgba(56, 189, 248, 0.45);
|
||
padding: 0.45rem 0.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chat-header {
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: #bfdbfe;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.chat-users {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 0.76rem;
|
||
}
|
||
|
||
.chat-users li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
padding: 0.18rem 0.1rem;
|
||
}
|
||
|
||
.chat-users li::before {
|
||
content: "👤";
|
||
font-size: 0.72rem;
|
||
opacity: 0.9;
|
||
}
|