update frontend
This commit is contained in:
Your Name
parent
5048027273
commit
c9d9a9580c
|
|
@ -1,4 +1,3 @@
|
|||
/* FIX: Cartes markers sur la carte - plus opaques et belles */
|
||||
.post-pin {
|
||||
position: relative;
|
||||
width: 0;
|
||||
|
|
@ -8,24 +7,23 @@
|
|||
}
|
||||
.post-pin * { pointer-events: auto; box-sizing: border-box; }
|
||||
|
||||
/* 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--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;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -35,20 +33,543 @@ body[data-theme="blue"] .post-pin--compact [data-category="MARKET"] { background
|
|||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 9px solid rgba(15, 23, 42, 0.98); /* même fond opaque */
|
||||
border-top: 9px solid rgba(6, 40, 80, 0.95);
|
||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
/* Carte étendue (full) - moins transparente */
|
||||
.sw-expanded-overlay-card .post-card {
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
/* Template mini wrapper */
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
/* FIX: Grosses cartes (expanded/full) - fond opaque + couleurs propres par catégorie */
|
||||
.sw-centered-modal .post-card.sw-expanded-shell {
|
||||
background: rgba(15, 23, 42, 0.98) !important; /* opaque */
|
||||
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;
|
||||
color: #e5e7eb !important; /* texte blanc clair */
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
/* Couleur badge par catégorie dans grosse carte */
|
||||
.sw-centered-modal [data-category="NEWS"] .sw-modal-badge {
|
||||
background: rgba(56,189,248,0.35) !important;
|
||||
border-color: #38bdf8 !important;
|
||||
color: #D7F3FF !important;
|
||||
}
|
||||
.sw-centered-modal [data-category="EVENT"] .sw-modal-badge {
|
||||
background: rgba(168,85,247,0.35) !important;
|
||||
border-color: #a855f7 !important;
|
||||
color: #F3E8FF !important;
|
||||
}
|
||||
.sw-centered-modal [data-category="FRIENDS"] .sw-modal-badge {
|
||||
background: rgba(34,197,94,0.35) !important;
|
||||
border-color: #22c55e !important;
|
||||
color: #D1FAE5 !important;
|
||||
}
|
||||
.sw-centered-modal [data-category="MARKET"] .sw-modal-badge {
|
||||
background: rgba(250,204,21,0.35) !important;
|
||||
border-color: #facc15 !important;
|
||||
color: #FEFCE8 !important;
|
||||
}
|
||||
|
||||
/* Hero (image en haut) + titre + stats : lisibles */
|
||||
.sw-modal-hero {
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.6) !important;
|
||||
}
|
||||
.sw-modal-title,
|
||||
.sw-modal-summary,
|
||||
.sw-stat-pill,
|
||||
.sw-modal-meta,
|
||||
.sw-livechat-title,
|
||||
.sw-chat-line,
|
||||
.sw-livechat-input {
|
||||
color: #e5e7eb !important; /* texte blanc partout */
|
||||
}
|
||||
.sw-stat-pill {
|
||||
background: rgba(148, 163, 184, 0.25) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.5) !important;
|
||||
}
|
||||
.sw-cta-primary {
|
||||
background: rgba(56,189,248,0.35) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.sw-livechat-input {
|
||||
background: rgba(255,255,255,0.1) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Expanded layout pieces */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix full wrap collapse */
|
||||
.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;
|
||||
}
|
||||
|
||||
.sw-template-full-wrap{
|
||||
display: block !important;
|
||||
width: 360px !important;
|
||||
height: 520px !important;
|
||||
}
|
||||
|
||||
.sw-template-full-wrap > *{
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Expanded header */
|
||||
.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 */
|
||||
.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 */
|
||||
.sw-modal{
|
||||
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 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* SW_MINI_SMOOTH_MOVE */
|
||||
.post-pin{
|
||||
will-change: transform;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.post-pin, .post-pin *{
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.sw-template-mini-wrap{
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.62);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
.sw-template-mini-wrap{
|
||||
transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.52);
|
||||
}
|
||||
}
|
||||
|
||||
.post-pin--compact .post-pin-pointer-small{
|
||||
filter: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
.sw-centered-backdrop, .sw-centered-modal{
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in New Issue