update frontend
This commit is contained in:
Your Name
parent
2bbb74de35
commit
de706cb4a5
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue