From f8804a5b1490ab3f2c0916ae390ddb177f13c6b0 Mon Sep 17 00:00:00 2001
From: SocioWire <admin@sociowire.com>
Date: Sat, 10 Jan 2026 02:43:57 +0000
Subject: [PATCH] style: refine floating UI - narrower width, dark blue theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/styles/map.css | 152 ++++++++++++++++++++++-----------------------
 1 file changed, 76 insertions(+), 76 deletions(-)

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