canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark gray sociowall, taller map, lower wall position 

- Change sociowall to dark gray glassmorphism for blue theme (not blue)
- Make map 85vh tall (almost full screen)
- Position sociowall below map with spacing (2rem margin)
- Remove overlap between map and wall
- Premium glassmorphism styling with subtle shadows

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
SocioWire 2026-01-11 00:06:01 +00:00
parent 28a96948b4
commit f529a03518
3 changed files with 948 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/map.css
View File

@ -1,6 +1,6 @@
:root{ :root{
--sw-subcats-nudge: -45px; /* subcats vertical nudge */ --sw-subcats-nudge: -45px; /* subcats vertical nudge */
--sw-below-overlap: 40px; /* wall overlaps map a bit */ --sw-below-overlap: 0px; /* no overlap - sociowall sits below map */
} }
.map-page{ .map-page{
@ -9,11 +9,11 @@
width:100%; width:100%;
} }
/* Map stage first */ /* Map stage first - much taller, almost full screen */
.map-stage{ .map-stage{
position:relative; position:relative;
width:100%; width:100%;
height: clamp(520px, 72vh, 860px); height: clamp(600px, 85vh, 1000px);
overflow: hidden; overflow: hidden;
} }
@ -115,10 +115,10 @@
100%{ opacity: 0.6; } 100%{ opacity: 0.6; }
} }
/* Landscape: vh is small, reduce min height */ /* Landscape: vh is small, but still keep map tall */
@media (orientation: landscape){ @media (orientation: landscape){
:root{ --sw-below-overlap: 22px; } :root{ --sw-below-overlap: 0px; }
.map-stage{ height: clamp(360px, 62vh, 720px); } .map-stage{ height: clamp(400px, 75vh, 800px); }
} }
.map-container, .map-container,
@ -140,12 +140,12 @@
z-index:30; z-index:30;
} }
/* BELOW MAP (scroll area) – pulled up slightly over map */ /* BELOW MAP (scroll area) – sits below map with spacing */
.below-stage{ .below-stage{
margin-top: calc(var(--sw-below-overlap) * -1); margin-top: 2rem;
position:relative; position:relative;
z-index:25; z-index:25;
padding: .25rem .7rem 1.0rem; padding: 0.5rem 1rem 1.5rem;
transition: opacity 320ms ease, filter 320ms ease; transition: opacity 320ms ease, filter 320ms ease;
} }

1000
src/styles/posts.css
View File

File diff suppressed because it is too large Load Diff

29
src/styles/theme.css
View File

@ -1,12 +1,33 @@
body[data-theme="dark"] { background:#050816; color:#ffffff; } body[data-theme="dark"] { background:#050816; color:#ffffff; }
body[data-theme="blue"] .sociowall-panel, /* Blue theme - sociowall uses dark gray glassmorphism */
body[data-theme="blue"] .sociowall-panel {
background: linear-gradient(
165deg,
rgba(28, 32, 42, 0.97) 0%,
rgba(22, 26, 36, 0.98) 50%,
rgba(18, 21, 30, 0.99) 100%
);
border-color: rgba(80, 90, 110, 0.25);
box-shadow:
0 4px 32px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
body[data-theme="blue"] .post-card {
background: linear-gradient(
145deg,
rgba(35, 40, 52, 0.95) 0%,
rgba(28, 32, 44, 0.97) 100%
);
border-color: rgba(90, 100, 120, 0.18);
}
body[data-theme="blue"] .chat-panel, body[data-theme="blue"] .chat-panel,
body[data-theme="blue"] .post-card,
body[data-theme="blue"] .post-pin--expanded .post-card, body[data-theme="blue"] .post-pin--expanded .post-card,
body[data-theme="blue"] .post-pin--compact .post-pin-bubble { body[data-theme="blue"] .post-pin--compact .post-pin-bubble {
background: rgba(12, 20, 60, 0.96); background: rgba(22, 26, 38, 0.96);
border-color: rgba(96, 165, 250, 0.95); border-color: rgba(96, 165, 250, 0.5);
} }
body[data-theme="light"] { background:#e5e7eb; color:#111827; } body[data-theme="light"] { background:#e5e7eb; color:#111827; }