update frontend
This commit is contained in:
Your Name
parent
c99bc0887c
commit
5048027273
|
|
@ -1,26 +0,0 @@
|
|||
import "@fortawesome/fontawesome-free/css/all.min.css"; // local via npm (no CDN)
|
||||
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.jsx";
|
||||
|
||||
import "./styles/base.css";
|
||||
import "./styles/layout.css";
|
||||
import "./styles/topbar.css";
|
||||
import "./styles/map.css";
|
||||
import "./styles/overlays.css";
|
||||
import "./styles/posts.css";
|
||||
import "./styles/theme.css";
|
||||
import "./styles/auth-modal.css";
|
||||
import "./styles/filters.css";
|
||||
import "./styles/mapMarkers.css";
|
||||
|
||||
import { AuthProvider } from "./auth/AuthContext.jsx";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
/* FIX: Cartes markers sur la carte - plus opaques et belles */
|
||||
.post-pin {
|
||||
position: relative;
|
||||
width: 0;
|
||||
|
|
@ -7,23 +8,24 @@
|
|||
}
|
||||
.post-pin * { pointer-events: auto; box-sizing: border-box; }
|
||||
|
||||
.post-pin--compact .post-pin-bubble {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-50%, calc(-100% - 12px));
|
||||
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;
|
||||
/* Carte compacte (mini) - moins transparente */
|
||||
.post-pin--compact .sw-template-mini-wrap {
|
||||
background: rgba(15, 23, 42, 0.98) !important; /* fond opaque */
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.9) !important;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 12px rgba(56,189,248,0.4) !important;
|
||||
padding: 8px 10px;
|
||||
transform: translate(-50%, calc(-100% - 12px)) scale(0.62);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.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; }
|
||||
|
||||
/* Couleur par catégorie (comme dans templateSpecs.js) */
|
||||
body[data-theme="blue"] .post-pin--compact [data-category="NEWS"] { background: rgba(56,189,248,0.35) !important; border-color: #38bdf8 !important; }
|
||||
body[data-theme="blue"] .post-pin--compact [data-category="EVENT"] { background: rgba(168,85,247,0.35) !important; border-color: #a855f7 !important; }
|
||||
body[data-theme="blue"] .post-pin--compact [data-category="FRIENDS"] { background: rgba(34,197,94,0.35) !important; border-color: #22c55e !important; }
|
||||
body[data-theme="blue"] .post-pin--compact [data-category="MARKET"] { background: rgba(250,204,21,0.35) !important; border-color: #facc15 !important; }
|
||||
|
||||
/* Pointer (flèche en bas) plus propre */
|
||||
.post-pin--compact .post-pin-pointer-small {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -33,618 +35,20 @@
|
|||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 9px solid rgba(6, 40, 80, 0.95);
|
||||
border-top: 9px solid rgba(15, 23, 42, 0.98); /* même fond opaque */
|
||||
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
/* ===== Template mini wrapper (keeps pointer unchanged) ===== */
|
||||
.sw-template-mini-wrap{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-50%, calc(-100% - 12px)) scale(0.62);
|
||||
transform-origin: bottom center;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
.sw-template-mini-wrap{
|
||||
transform: translate(-50%, calc(-100% - 12px)) scale(0.52);
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
NEW: FIXED EXPANDED OVERLAY
|
||||
- Card is fixed near bottom (consistent)
|
||||
- Pointer follows marker (consistent)
|
||||
- No huge map recenter jumps
|
||||
========================================================= */
|
||||
|
||||
.sw-expanded-overlay-root{
|
||||
position:absolute;
|
||||
inset:0;
|
||||
z-index: 999999;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* Card position: "dans le bas" (approx bottom zone), consistent on rotate */
|
||||
.sw-expanded-overlay-card{
|
||||
position:absolute;
|
||||
left: 50%;
|
||||
bottom: calc(12px + env(safe-area-inset-bottom) + var(--sw-below-overlap, 0px));
|
||||
transform: translateX(-50%);
|
||||
width: min(92vw, 420px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Make card fit mobile nicely */
|
||||
/* Carte étendue (full) - moins transparente */
|
||||
.sw-expanded-overlay-card .post-card {
|
||||
width: 100%;
|
||||
max-height: min(58vh, 640px);
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: rgba(8, 20, 40, 0.97);
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid rgba(90, 190, 255, 0.9);
|
||||
color: #e8f5ff;
|
||||
}
|
||||
|
||||
/* Pointer on the marker position */
|
||||
.sw-overlay-pointer{
|
||||
position:absolute;
|
||||
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,.8));
|
||||
transform: translate(-50%, -100%);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Simple line from marker to card */
|
||||
.sw-overlay-line{
|
||||
position:absolute;
|
||||
height: 2px;
|
||||
background: rgba(56,189,248,0.35);
|
||||
transform-origin: 0 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
|
||||
}
|
||||
|
||||
/* ===== Expanded layout pieces (same as before) ===== */
|
||||
.sw-expanded-shell{ padding: 10px 12px; }
|
||||
|
||||
.sw-expanded-top{
|
||||
display:flex;
|
||||
gap:10px;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
.sw-expanded-left{ flex: 1; }
|
||||
|
||||
.sw-expanded-right{
|
||||
width: 150px;
|
||||
min-width: 140px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.sw-watch-title{
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color:#bfdbfe;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.sw-watch-list{ display:flex; flex-direction:column; gap:6px; }
|
||||
|
||||
.sw-watch-item{
|
||||
font-size: 11px;
|
||||
color:#e8f5ff;
|
||||
background: rgba(3, 14, 32, 0.75);
|
||||
border: 1px solid rgba(90, 190, 255, 0.35);
|
||||
border-radius: 10px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.sw-watch-msg{
|
||||
opacity:.85;
|
||||
margin-top:2px;
|
||||
font-size: 10px;
|
||||
color:#c7e3ff;
|
||||
}
|
||||
|
||||
.sw-add-feed-btn{
|
||||
margin-top: 2px;
|
||||
border: 1px solid rgba(148,163,184,.7);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(5, 35, 70, 0.85);
|
||||
color:#e8f5ff;
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.sw-news-generated{
|
||||
margin-top: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(3, 14, 32, 0.75);
|
||||
border: 1px solid rgba(90, 190, 255, 0.35);
|
||||
}
|
||||
|
||||
.sw-news-title{
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
color:#e8f5ff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sw-news-sub{ font-size: 10px; color:#9eb7ff; }
|
||||
|
||||
.sw-actions-row{ margin-top: 8px; }
|
||||
|
||||
.sw-livechat{ margin-top: 8px; }
|
||||
|
||||
.sw-livechat-title{
|
||||
font-weight: 800;
|
||||
letter-spacing:.04em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sw-livechat-body{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:3px;
|
||||
margin-bottom: 8px;
|
||||
opacity:.95;
|
||||
}
|
||||
|
||||
.sw-chat-line{ font-size: 10px; color:#c7e3ff; }
|
||||
|
||||
.sw-livechat-inputrow{ display:flex; gap:8px; align-items:center; }
|
||||
|
||||
.sw-livechat-input{
|
||||
flex:1;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(90, 190, 255, 0.35);
|
||||
background: rgba(3, 14, 32, 0.75);
|
||||
color:#e8f5ff;
|
||||
padding: 8px 10px;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-livechat-post{
|
||||
border:none;
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(56,189,248,0.22);
|
||||
color:#e8f5ff;
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
/* Mobile: keep overlay readable */
|
||||
@media (max-width: 640px){
|
||||
.sw-expanded-overlay-card{
|
||||
width: min(94vw, 360px);
|
||||
}
|
||||
.sw-expanded-top{
|
||||
flex-direction: column;
|
||||
}
|
||||
.sw-expanded-right{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SW_FIX_FULL_WRAP_COLLAPSE:BEGIN */
|
||||
/* Fix: expanded template wrapper collapsing into a thin line */
|
||||
.post-pin--expanded .post-card.sw-expanded-shell{
|
||||
width: 360px !important;
|
||||
min-width: 360px !important;
|
||||
max-width: 360px !important;
|
||||
height: 520px !important;
|
||||
max-height: 520px !important;
|
||||
overflow: hidden !important; /* no useless scroll */
|
||||
}
|
||||
|
||||
.sw-template-full-wrap{
|
||||
display: block !important;
|
||||
width: 360px !important;
|
||||
height: 520px !important;
|
||||
}
|
||||
|
||||
.sw-template-full-wrap > *{
|
||||
display: block !important;
|
||||
}
|
||||
/* SW_FIX_FULL_WRAP_COLLAPSE:END */
|
||||
|
||||
|
||||
|
||||
/* ===== Expanded header (mock) ===== */
|
||||
.sw-expanded-badge{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
background: rgba(56,189,248,0.18);
|
||||
color: #D7F3FF;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.sw-expanded-title{
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
color: #F0F7FF;
|
||||
}
|
||||
|
||||
.sw-expanded-snippet{
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #B5C7E6;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
SW_EXPANDED_POLISH (visual only)
|
||||
- make expanded look like the mini gradients / modern UI
|
||||
========================================================= */
|
||||
.post-pin--expanded .post-card{
|
||||
background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(7,18,37,0.98) 55%, rgba(2,6,23,0.98));
|
||||
border: 1px solid rgba(96,165,250,0.75);
|
||||
box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 24px rgba(56,189,248,0.22);
|
||||
}
|
||||
|
||||
.sw-expanded-badge{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
letter-spacing: .04em;
|
||||
color: #d7f3ff;
|
||||
background: rgba(56,189,248,0.16);
|
||||
border: 1px solid rgba(56,189,248,0.35);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sw-expanded-title{
|
||||
font-size: 28px;
|
||||
font-weight: 950;
|
||||
line-height: 1.05;
|
||||
color: #f0f7ff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sw-expanded-meta{
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: rgba(181,199,230,0.95);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sw-expanded-snippet{
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
color: rgba(215,233,255,0.95);
|
||||
background: rgba(3,14,32,0.45);
|
||||
border: 1px solid rgba(90,190,255,0.22);
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.post-card-btn{
|
||||
background: rgba(56,189,248,0.14);
|
||||
border: 1px solid rgba(56,189,248,0.35);
|
||||
color: #e8f5ff;
|
||||
font-weight: 900;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.post-card-btn:active{
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ===== CENTER MODAL CONTENT (pretty + consistent) ===== */
|
||||
.sw-modal{
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.9) !important;
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px rgba(56,189,248,0.5) !important;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.sw-modal-toprow{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sw-modal-badge{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .06em;
|
||||
background: rgba(56,189,248,0.16);
|
||||
border: 1px solid rgba(90, 190, 255, 0.28);
|
||||
color:#D7F3FF;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sw-modal-meta{
|
||||
margin-top: 6px;
|
||||
font-size: 11px;
|
||||
color:#9eb7ff;
|
||||
opacity:.95;
|
||||
display:flex;
|
||||
gap:6px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.sw-modal-x{
|
||||
border:none;
|
||||
border-radius:999px;
|
||||
width:34px;
|
||||
height:34px;
|
||||
background: rgba(3,14,32,0.55);
|
||||
color:#e8f5ff;
|
||||
font-weight:900;
|
||||
cursor:pointer;
|
||||
border:1px solid rgba(90,190,255,0.25);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.sw-modal-hero{
|
||||
width:100%;
|
||||
height: 180px;
|
||||
border-radius: 16px;
|
||||
overflow:hidden;
|
||||
border: 1px solid rgba(90, 190, 255, 0.22);
|
||||
background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(3,14,32,0.85));
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sw-modal-hero img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.sw-modal-hero-fallback{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: radial-gradient(circle at 35% 35%, rgba(56,189,248,0.22), rgba(3,14,32,0.85));
|
||||
}
|
||||
|
||||
.sw-modal-title{
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 26px;
|
||||
color:#F0F7FF;
|
||||
margin: 6px 0 8px;
|
||||
}
|
||||
|
||||
.sw-modal-summary{
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
color:#D7E9FF;
|
||||
opacity:.95;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sw-stat-row{
|
||||
display:flex;
|
||||
gap:8px;
|
||||
flex-wrap:wrap;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
.sw-stat-pill{
|
||||
font-size: 11px;
|
||||
color:#c7e3ff;
|
||||
background: rgba(3, 14, 32, 0.58);
|
||||
border: 1px solid rgba(90, 190, 255, 0.22);
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.sw-modal-cta-row{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sw-cta-primary{
|
||||
width:100%;
|
||||
border:none;
|
||||
border-radius: 14px;
|
||||
padding: 14px 12px;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
color:#e8f5ff;
|
||||
cursor:pointer;
|
||||
background: rgba(56,189,248,0.22);
|
||||
box-shadow: 0 10px 18px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.sw-cta-primary:disabled{
|
||||
opacity:.55;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.sw-cta-actions{
|
||||
display:flex;
|
||||
gap:8px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
/* mobile tighten */
|
||||
@media (max-width: 640px){
|
||||
.sw-modal-hero{ height: 150px; }
|
||||
.sw-modal-title{ font-size: 20px; line-height: 24px; }
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
SW_CENTERED_MODAL_ANIM
|
||||
- fade + scale on open/close (slow)
|
||||
========================================= */
|
||||
.sw-centered-backdrop{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999999;
|
||||
background: rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(1px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
pointer-events: auto;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 440ms ease;
|
||||
}
|
||||
|
||||
.sw-centered-modal{
|
||||
transform: scale(0.94);
|
||||
opacity: 0.0;
|
||||
transition: transform 440ms ease, opacity 440ms ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.sw-centered-backdrop.sw-open{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sw-centered-modal.sw-open{
|
||||
transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
/* closing state (optional hook) */
|
||||
.sw-centered-backdrop.sw-closing{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
SW_MINI_SMOOTH_MOVE
|
||||
- stop "sautillage/blink sec" while panning/zooming
|
||||
- MapLibre animates marker transforms every frame.
|
||||
- Any CSS transition/filter on marker subtree can cause shimmer/jitter on mobile.
|
||||
========================================= */
|
||||
.post-pin{
|
||||
will-change: transform;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
/* NO transitions on marker subtree (prevents bounce/lag while map moves) */
|
||||
.post-pin, .post-pin *{
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Make the mini template wrap GPU-friendly */
|
||||
.sw-template-mini-wrap{
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.62);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
/* Mobile scale keeps same behavior, but still GPU */
|
||||
@media (max-width: 640px){
|
||||
.sw-template-mini-wrap{
|
||||
transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.52);
|
||||
}
|
||||
}
|
||||
|
||||
/* Drop-shadow filters on triangles can shimmer on Android أثناء الحركة */
|
||||
.post-pin--compact .post-pin-pointer-small{
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
.sw-centered-backdrop, .sw-centered-modal{
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* SW_MARKER_SMOOTH_APPEAR:BEGIN */
|
||||
.post-pin.sw-appear{
|
||||
opacity: 0;
|
||||
transform: translate3d(0,0,0) scale(0.96);
|
||||
transition: opacity 840ms ease, transform 840ms ease;
|
||||
}
|
||||
.post-pin.sw-appear.sw-appear-in{
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0) scale(1);
|
||||
}
|
||||
.post-pin.sw-disappear{
|
||||
opacity: 0;
|
||||
transform: translate3d(0,0,0) scale(0.96);
|
||||
transition: opacity 840ms ease, transform 840ms ease;
|
||||
}
|
||||
/* SW_MARKER_SMOOTH_APPEAR:END */
|
||||
|
||||
/* SW_CENTER_MODAL_ANIM:BEGIN */
|
||||
.sw-centered-backdrop{
|
||||
opacity: 0;
|
||||
transition: opacity 840ms ease;
|
||||
}
|
||||
.sw-centered-backdrop.sw-enter-active{ opacity: 1; }
|
||||
.sw-centered-backdrop.sw-leave{ opacity: 0; }
|
||||
|
||||
.sw-centered-modal{
|
||||
opacity: 0;
|
||||
transform: translate3d(0,0,0) scale(0.92);
|
||||
transition: opacity 840ms ease, transform 840ms cubic-bezier(.2,.9,.2,1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
.sw-centered-modal.sw-enter-active{
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0) scale(1);
|
||||
}
|
||||
.sw-centered-modal.sw-leave{
|
||||
opacity: 0;
|
||||
transform: translate3d(0,0,0) scale(0.94);
|
||||
}
|
||||
/* SW_CENTER_MODAL_ANIM:END */
|
||||
|
||||
/* SW_MODAL_FADE:BEGIN */
|
||||
.sw-centered-backdrop{ opacity:0; transition: opacity 840ms ease; }
|
||||
.sw-centered-backdrop.sw-enter-active{ opacity:1; }
|
||||
.sw-centered-backdrop.sw-leave{ opacity:0; }
|
||||
|
||||
.sw-centered-modal{
|
||||
opacity:0;
|
||||
transform: translate3d(0,0,0) scale(0.92);
|
||||
transition: opacity 840ms ease, transform 840ms cubic-bezier(.2,.9,.2,1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
.sw-centered-modal.sw-enter-active{ opacity:1; transform: translate3d(0,0,0) scale(1); }
|
||||
.sw-centered-modal.sw-leave{ opacity:0; transform: translate3d(0,0,0) scale(0.94); }
|
||||
/* SW_MODAL_FADE:END */
|
||||
/* Couleur catégorie sur carte étendue */
|
||||
.sw-expanded-overlay-card [data-category="NEWS"] .sw-modal-badge { background: rgba(56,189,248,0.35) !important; border-color: #38bdf8 !important; }
|
||||
.sw-expanded-overlay-card [data-category="EVENT"] .sw-modal-badge { background: rgba(168,85,247,0.35) !important; border-color: #a855f7 !important; }
|
||||
.sw-expanded-overlay-card [data-category="FRIENDS"] .sw-modal-badge { background: rgba(34,197,94,0.35) !important; border-color: #22c55e !important; }
|
||||
.sw-expanded-overlay-card [data-category="MARKET"] .sw-modal-badge { background: rgba(250,204,21,0.35) !important; border-color: #facc15 !important; }
|
||||
Loading…
Reference in New Issue