347 lines
7.3 KiB
CSS
347 lines
7.3 KiB
CSS
/* Sociowall + Chat BELOW the map */
|
|
.below-row{
|
|
display:flex;
|
|
gap:.6rem;
|
|
align-items:stretch;
|
|
min-width:0;
|
|
flex-wrap: nowrap; /* ✅ keep side-by-side */
|
|
}
|
|
|
|
/* Small top nudge down (as requested) */
|
|
.sociowall-panel,
|
|
.chat-panel{
|
|
max-width: 32vw;
|
|
min-width: 160px;
|
|
flex: 1 1 0; /* ✅ 1/4 */
|
|
margin-top: 5px; /* ✅ descend 5px */
|
|
}
|
|
|
|
.sociowall-panel{
|
|
flex: 3 1 0; /* ✅ 3/4 */
|
|
min-width:0; /* IMPORTANT: prevents pushing chat */
|
|
min-height: 160px;
|
|
background: rgba(15, 23, 42, 0.96);
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(148, 163, 184, 0.9);
|
|
box-shadow: 0 10px 28px rgba(0,0,0,.9), 0 0 18px rgba(56,189,248,.45);
|
|
padding: .35rem .45rem;
|
|
display:flex;
|
|
flex-direction:column;
|
|
transition: max-height 220ms ease;
|
|
}
|
|
|
|
.sociowall-header{
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color:#bfdbfe;
|
|
margin-bottom:.25rem;
|
|
}
|
|
|
|
/* list scroll inside wall */
|
|
.post-list{
|
|
flex:1;
|
|
overflow-y:auto;
|
|
padding-right:.15rem;
|
|
max-height: 44vh;
|
|
transition: max-height 220ms ease;
|
|
}
|
|
|
|
/* prevent long content from widening layout */
|
|
.post-card{
|
|
overflow:hidden;
|
|
min-width:0;
|
|
border-radius:12px;
|
|
border:1px solid rgba(51, 65, 85, 0.9);
|
|
background: rgba(15, 23, 42, 0.92);
|
|
padding:.6rem .7rem;
|
|
margin-bottom:.5rem;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.sw-wall-card{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:.4rem;
|
|
}
|
|
|
|
.sw-wall-head{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:.5rem;
|
|
}
|
|
.sw-wall-avatar{
|
|
width:34px;
|
|
height:34px;
|
|
border-radius:10px;
|
|
background: rgba(56,189,248,0.22);
|
|
border:1px solid rgba(56,189,248,0.55);
|
|
color:#e2f2ff;
|
|
font-weight:800;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
overflow: hidden;
|
|
}
|
|
.sw-wall-avatar img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.sw-wall-meta{ flex:1; min-width:0; }
|
|
.sw-wall-author{
|
|
font-size:.85rem;
|
|
font-weight:800;
|
|
color:#e5e7eb;
|
|
}
|
|
.sw-wall-time{
|
|
font-size:.72rem;
|
|
color:#94a3b8;
|
|
}
|
|
.sw-wall-badge{
|
|
font-size:.65rem;
|
|
font-weight:800;
|
|
padding:.2rem .5rem;
|
|
border-radius:999px;
|
|
border:1px solid rgba(56,189,248,0.5);
|
|
color:#dbeafe;
|
|
background: rgba(56,189,248,0.18);
|
|
text-transform: uppercase;
|
|
letter-spacing:.06em;
|
|
}
|
|
.sw-wall-image{
|
|
width:100%;
|
|
height: 180px;
|
|
border-radius:12px;
|
|
overflow:hidden;
|
|
border:1px solid rgba(148,163,184,0.25);
|
|
background: rgba(15,23,42,0.85);
|
|
}
|
|
.sw-wall-image-fallback{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color:#93c5fd;
|
|
background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(15,23,42,0.92));
|
|
}
|
|
.sw-wall-image-fallback-inner{
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
gap:8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
font-weight: 800;
|
|
font-size: .72rem;
|
|
}
|
|
.sw-wall-image-fallback i{
|
|
font-size: 46px;
|
|
opacity: 0.95;
|
|
}
|
|
body[data-theme="light"] .sw-wall-image-fallback{
|
|
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.18), rgba(255,255,255,0.9));
|
|
color:#1d4ed8;
|
|
}
|
|
.sw-wall-image img{
|
|
width:100%;
|
|
height:100%;
|
|
object-fit: cover;
|
|
display:block;
|
|
}
|
|
.sw-wall-title{
|
|
font-size: 1rem;
|
|
font-weight: 900;
|
|
color:#f8fafc;
|
|
}
|
|
.sw-wall-snippet{
|
|
font-size:.86rem;
|
|
color:#d7e3ff;
|
|
line-height:1.3;
|
|
}
|
|
.sw-wall-meta-line{
|
|
font-size:.74rem;
|
|
color:#94a3b8;
|
|
}
|
|
.sw-wall-stats{
|
|
display:flex;
|
|
gap:.75rem;
|
|
font-size:.75rem;
|
|
color:#cbd5f5;
|
|
}
|
|
.sw-wall-stats i{ margin-right:.25rem; }
|
|
.sw-wall-actions{
|
|
display:flex;
|
|
gap:.4rem;
|
|
flex-wrap:wrap;
|
|
}
|
|
.sw-wall-privacy{
|
|
margin-top:.25rem;
|
|
padding:.5rem .6rem;
|
|
border-radius:12px;
|
|
border:1px solid rgba(148,163,184,0.35);
|
|
background: rgba(15,23,42,0.75);
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:.4rem;
|
|
}
|
|
.sw-wall-privacy-row{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:.5rem;
|
|
font-size:.72rem;
|
|
color:#cbd5f5;
|
|
}
|
|
.sw-wall-privacy-row label{
|
|
white-space:nowrap;
|
|
}
|
|
.sw-wall-privacy-row select{
|
|
flex:1;
|
|
background:#020617;
|
|
border-radius:999px;
|
|
border:1px solid #4b5563;
|
|
padding:.25rem .6rem;
|
|
font-size:.72rem;
|
|
color:#e5e7eb;
|
|
}
|
|
.sw-wall-privacy-input{
|
|
width:100%;
|
|
border-radius:999px;
|
|
border:1px solid #4b5563;
|
|
padding:.3rem .6rem;
|
|
background:#020617;
|
|
color:#e5e7eb;
|
|
font-size:.72rem;
|
|
}
|
|
.sw-wall-privacy-check{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:.45rem;
|
|
font-size:.7rem;
|
|
color:#cbd5f5;
|
|
}
|
|
.sw-wall-privacy-error{
|
|
font-size:.7rem;
|
|
color:#fca5a5;
|
|
}
|
|
|
|
.sw-wall-sentinel{
|
|
height: 1px;
|
|
}
|
|
.sw-wall-btn{
|
|
border:1px solid rgba(56,189,248,0.35);
|
|
background: rgba(15,23,42,0.6);
|
|
color:#e2f2ff;
|
|
font-weight:800;
|
|
font-size:.75rem;
|
|
padding:.35rem .6rem;
|
|
border-radius:999px;
|
|
cursor:pointer;
|
|
}
|
|
.sw-wall-btn i{ margin-right:.25rem; }
|
|
.sw-wall-btn.is-active{
|
|
background: rgba(56,189,248,0.35);
|
|
border-color: rgba(56,189,248,0.8);
|
|
}
|
|
|
|
.post-list-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; font-size:.7rem; color:#cbd5f5; }
|
|
.km-filter input[type="range"]{ width:160px; }
|
|
|
|
.status-text{ font-size:.72rem; opacity:.85; margin:.15rem 0; }
|
|
.status-error{ color:#fecaca; }
|
|
|
|
/* ✅ Chat fixed column that can shrink a bit on narrow screens */
|
|
.chat-panel{
|
|
flex: 0 0 190px;
|
|
width: 190px;
|
|
min-width: 160px; /* allow shrink in portrait */
|
|
max-width: min(220px, 42vw);
|
|
min-height: 160px;
|
|
background: rgba(15, 23, 42, 0.96);
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(148, 163, 184, 0.9);
|
|
box-shadow: 0 10px 28px rgba(0,0,0,.9), 0 0 18px rgba(56,189,248,.45);
|
|
padding:.4rem .45rem;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.chat-header{
|
|
font-size:.78rem;
|
|
font-weight:700;
|
|
letter-spacing:.06em;
|
|
text-transform:uppercase;
|
|
color:#bfdbfe;
|
|
margin-bottom:.2rem;
|
|
}
|
|
|
|
.chat-users{
|
|
list-style:none;
|
|
padding:0; margin:0;
|
|
font-size:.76rem;
|
|
overflow:auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-height: 44vh;
|
|
}
|
|
|
|
.chat-users li{ display:flex; align-items:center; gap:.3rem; padding:.18rem .1rem; }
|
|
.chat-users li::before{ content:"👤"; font-size:.72rem; opacity:.9; }
|
|
|
|
/* Stack only ultra-ultra-small */
|
|
@media (max-width: 340px){
|
|
.below-row{ flex-direction: column; }
|
|
.chat-panel{ width:100%; min-width:0; max-width:none; flex: 1 1 auto; }
|
|
.post-list{ max-height: 46vh; }
|
|
}
|
|
|
|
/* SW_LAYOUT_RATIO_FIX:BEGIN */
|
|
.below-row{ flex-wrap: nowrap !important; }
|
|
|
|
.sociowall-panel{
|
|
flex: 3 1 0 !important; /* ✅ 3/4 */
|
|
width: auto !important;
|
|
max-width: none !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.chat-panel{
|
|
flex: 1 1 0 !important; /* ✅ 1/4 */
|
|
width: auto !important;
|
|
max-width: none !important;
|
|
min-width: 140px !important;
|
|
}
|
|
/* SW_LAYOUT_RATIO_FIX:END */
|
|
|
|
/* SW_DESKTOP_WIDE_LAYOUT:BEGIN */
|
|
/* Big browser: Sociowall 75% / Chat 25% + centered container */
|
|
@media (min-width: 900px){
|
|
.below-stage{
|
|
max-width: 1320px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
|
|
.below-row{ gap: 0.9rem; }
|
|
|
|
.sociowall-panel{ flex: 0 0 74%; }
|
|
.chat-panel{
|
|
flex: 0 0 26%;
|
|
width: auto;
|
|
max-width: none;
|
|
min-width: 260px;
|
|
}
|
|
|
|
.sociowall-panel{ max-height: 22vh; }
|
|
.post-list{ max-height: 16vh; }
|
|
.chat-users{ max-height: 16vh; }
|
|
|
|
body.sw-wall-expanded .sociowall-panel{ max-height: 70vh; }
|
|
body.sw-wall-expanded .post-list{ max-height: 62vh; }
|
|
body.sw-wall-expanded .chat-users{ max-height: 62vh; }
|
|
}
|
|
/* SW_DESKTOP_WIDE_LAYOUT:END */
|