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

style: refine floating UI - narrower width, dark blue theme 

- Reduced width to 320px
- Removed teal accent, using light gray instead
- Improved text contrast for blue theme
- Darker background for better readability

🤖 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-10 02:43:57 +00:00
parent f9d7df0c96
commit f8804a5b14
1 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/styles/map.css
View File

@ -1353,13 +1353,13 @@ body[data-theme="light"] .map-action-btn * {
/* ===== FLOATING CREATE UI ===== */ /* ===== FLOATING CREATE UI ===== */
.create-floating-ui{ .create-floating-ui{
--cf-bg: rgba(15,20,30,0.82); --cf-bg: rgba(15,20,30,0.92);
--cf-border: rgba(100,116,139,0.3); --cf-border: rgba(100,116,139,0.25);
--cf-text: #f1f5f9; --cf-text: #f1f5f9;
--cf-muted: #94a3b8; --cf-muted: #cbd5e1;
--cf-accent: #a78bfa; --cf-accent: #e2e8f0;
--cf-glow: rgba(167,139,250,0.15); --cf-glow: rgba(226,232,240,0.08);
--cf-input: rgba(30,41,59,0.85); --cf-input: rgba(30,41,59,0.9);
position:fixed; position:fixed;
bottom:50%; bottom:50%;
@ -1368,38 +1368,38 @@ body[data-theme="light"] .map-action-btn * {
z-index:9000; z-index:9000;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap:4px; gap:6px;
width:min(340px, calc(100vw - 32px)); width:min(320px, calc(100vw - 24px));
pointer-events:none; pointer-events:none;
} }
body[data-theme="light"] .create-floating-ui{ body[data-theme="light"] .create-floating-ui{
--cf-bg: rgba(255,255,255,0.88); --cf-bg: rgba(255,255,255,0.94);
--cf-border: rgba(148,163,184,0.35); --cf-border: rgba(148,163,184,0.3);
--cf-text: #1e293b; --cf-text: #1e293b;
--cf-muted: #64748b; --cf-muted: #475569;
--cf-accent: #7c3aed; --cf-accent: #334155;
--cf-glow: rgba(124,58,237,0.1); --cf-glow: rgba(51,65,85,0.08);
--cf-input: rgba(241,245,249,0.9); --cf-input: rgba(241,245,249,0.95);
} }
body[data-theme="blue"] .create-floating-ui{ body[data-theme="blue"] .create-floating-ui{
--cf-bg: rgba(15,23,42,0.85); --cf-bg: rgba(15,23,42,0.95);
--cf-border: rgba(71,85,105,0.35); --cf-border: rgba(51,65,85,0.5);
--cf-text: #e2e8f0; --cf-text: #f1f5f9;
--cf-muted: #94a3b8; --cf-muted: #cbd5e1;
--cf-accent: #a78bfa; --cf-accent: #e2e8f0;
--cf-glow: rgba(167,139,250,0.12); --cf-glow: rgba(226,232,240,0.06);
--cf-input: rgba(30,41,59,0.88); --cf-input: rgba(30,41,59,0.98);
} }
/* Close button - inline top right */ /* Close button - inline top right */
.cfloat-close{ .cfloat-close{
position:absolute; position:absolute;
top:-32px; top:-40px;
right:0; right:0;
width:28px; width:32px;
height:28px; height:32px;
border-radius:8px; border-radius:8px;
background: var(--cf-bg); background: var(--cf-bg);
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
@ -1426,14 +1426,14 @@ body[data-theme="blue"] .create-floating-ui{
.cfloat-box{ .cfloat-box{
background: var(--cf-bg); background: var(--cf-bg);
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
border-radius:10px; border-radius:12px;
padding:6px 10px; padding:10px 14px;
backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2);
-webkit-backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
pointer-events:auto; pointer-events:auto;
color: var(--cf-text); color: var(--cf-text);
animation: cfloat-in 0.2s ease-out; animation: cfloat-in 0.2s ease-out;
box-shadow: 0 2px 12px rgba(0,0,0,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.15);
} }
@keyframes cfloat-in{ @keyframes cfloat-in{
@ -1446,44 +1446,44 @@ body[data-theme="blue"] .create-floating-ui{
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
gap:6px; gap:8px;
font-weight:600; font-weight:600;
font-size:0.8rem; font-size:0.9rem;
padding:4px 8px; padding:6px 10px;
} }
.cfloat-step i{ .cfloat-step i{
color: var(--cf-accent); color: var(--cf-accent);
font-size:0.9rem; font-size:1rem;
} }
/* Hint */ /* Hint */
.cfloat-hint{ .cfloat-hint{
text-align:center; text-align:center;
padding:6px 10px; padding:10px 14px;
} }
.cfloat-hint p{ .cfloat-hint p{
margin:0; margin:0;
font-size:0.82rem; font-size:0.9rem;
line-height:1.3; line-height:1.4;
color: var(--cf-muted); color: var(--cf-muted);
} }
/* Category */ /* Category */
.cfloat-category label{ .cfloat-category label{
display:block; display:block;
font-size:0.65rem; font-size:0.7rem;
font-weight:600; font-weight:600;
text-transform:uppercase; text-transform:uppercase;
letter-spacing:0.05em; letter-spacing:0.05em;
color: var(--cf-muted); color: var(--cf-muted);
margin-bottom:4px; margin-bottom:6px;
} }
.cfloat-selects{ .cfloat-selects{
display:flex; display:flex;
gap:4px; gap:6px;
} }
.cfloat-selects select{ .cfloat-selects select{
@ -1491,9 +1491,9 @@ body[data-theme="blue"] .create-floating-ui{
background: var(--cf-input); background: var(--cf-input);
color: var(--cf-text); color: var(--cf-text);
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
border-radius:6px; border-radius:8px;
padding:5px 8px; padding:8px 10px;
font-size:0.8rem; font-size:0.85rem;
cursor:pointer; cursor:pointer;
} }
@ -1505,12 +1505,12 @@ body[data-theme="blue"] .create-floating-ui{
/* Title */ /* Title */
.cfloat-title label{ .cfloat-title label{
display:block; display:block;
font-size:0.65rem; font-size:0.7rem;
font-weight:600; font-weight:600;
text-transform:uppercase; text-transform:uppercase;
letter-spacing:0.05em; letter-spacing:0.05em;
color: var(--cf-muted); color: var(--cf-muted);
margin-bottom:4px; margin-bottom:6px;
} }
.cfloat-title input{ .cfloat-title input{
@ -1518,9 +1518,9 @@ body[data-theme="blue"] .create-floating-ui{
background: var(--cf-input); background: var(--cf-input);
color: var(--cf-text); color: var(--cf-text);
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
border-radius:6px; border-radius:8px;
padding:6px 10px; padding:10px 12px;
font-size:0.85rem; font-size:0.9rem;
} }
.cfloat-title input:focus{ .cfloat-title input:focus{
@ -1530,15 +1530,15 @@ body[data-theme="blue"] .create-floating-ui{
.cfloat-meta{ .cfloat-meta{
display:block; display:block;
margin-top:3px; margin-top:4px;
font-size:0.65rem; font-size:0.7rem;
color: var(--cf-accent); color: var(--cf-accent);
} }
.cfloat-error{ .cfloat-error{
display:block; display:block;
margin-top:3px; margin-top:4px;
font-size:0.65rem; font-size:0.7rem;
color:#ef4444; color:#ef4444;
} }
@ -1546,20 +1546,20 @@ body[data-theme="blue"] .create-floating-ui{
.cfloat-preview{ .cfloat-preview{
display:flex; display:flex;
align-items:center; align-items:center;
gap:8px; gap:10px;
padding:4px; padding:6px;
} }
.cfloat-preview img{ .cfloat-preview img{
width:50px; width:60px;
height:38px; height:45px;
object-fit:cover; object-fit:cover;
border-radius:5px; border-radius:6px;
flex-shrink:0; flex-shrink:0;
} }
.cfloat-preview span{ .cfloat-preview span{
font-size:0.7rem; font-size:0.8rem;
color: var(--cf-muted); color: var(--cf-muted);
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
@ -1569,12 +1569,12 @@ body[data-theme="blue"] .create-floating-ui{
/* Description */ /* Description */
.cfloat-desc label{ .cfloat-desc label{
display:block; display:block;
font-size:0.65rem; font-size:0.7rem;
font-weight:600; font-weight:600;
text-transform:uppercase; text-transform:uppercase;
letter-spacing:0.05em; letter-spacing:0.05em;
color: var(--cf-muted); color: var(--cf-muted);
margin-bottom:4px; margin-bottom:6px;
} }
.cfloat-desc textarea{ .cfloat-desc textarea{
@ -1582,11 +1582,11 @@ body[data-theme="blue"] .create-floating-ui{
background: var(--cf-input); background: var(--cf-input);
color: var(--cf-text); color: var(--cf-text);
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
border-radius:6px; border-radius:8px;
padding:5px 8px; padding:8px 10px;
font-size:0.8rem; font-size:0.85rem;
resize:none; resize:none;
height:50px; height:60px;
} }
.cfloat-desc textarea:focus{ .cfloat-desc textarea:focus{
@ -1596,31 +1596,31 @@ body[data-theme="blue"] .create-floating-ui{
/* Image */ /* Image */
.cfloat-image{ .cfloat-image{
padding:4px 6px; padding:6px 10px;
} }
.cfloat-img-toggle{ .cfloat-img-toggle{
display:flex; display:flex;
gap:4px; gap:6px;
margin-bottom:6px; margin-bottom:8px;
} }
.cfloat-img-toggle button{ .cfloat-img-toggle button{
flex:1; flex:1;
padding:4px 6px; padding:6px 8px;
border-radius:5px; border-radius:6px;
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
background:transparent; background:transparent;
color: var(--cf-muted); color: var(--cf-muted);
font-size:0.7rem; font-size:0.8rem;
cursor:pointer; cursor:pointer;
transition:all 0.15s; transition:all 0.15s;
} }
.cfloat-img-toggle button.active{ .cfloat-img-toggle button.active{
background: var(--cf-accent); background: rgba(255,255,255,0.15);
border-color: var(--cf-accent); border-color: var(--cf-text);
color:#fff; color: var(--cf-text);
} }
.cfloat-img-toggle button i{ .cfloat-img-toggle button i{
@ -1659,24 +1659,24 @@ body[data-theme="blue"] .create-floating-ui{
/* Navigation */ /* Navigation */
.cfloat-nav{ .cfloat-nav{
display:flex; display:flex;
gap:6px; gap:8px;
padding:4px 6px; padding:6px 10px;
} }
.cfloat-btn{ .cfloat-btn{
flex:1; flex:1;
padding:6px 12px; padding:10px 16px;
border-radius:6px; border-radius:8px;
border:1px solid var(--cf-border); border:1px solid var(--cf-border);
background: var(--cf-input); background: var(--cf-input);
color: var(--cf-text); color: var(--cf-text);
font-size:0.78rem; font-size:0.85rem;
font-weight:600; font-weight:600;
cursor:pointer; cursor:pointer;
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
gap:5px; gap:6px;
transition:all 0.15s; transition:all 0.15s;
} }