Update app.py

app.py

@@ -499,15 +499,16 @@ class CameraDropdown(gr.HTML):
         }
 
         function setValue(val, shouldTrigger = false) {
-            const v = (val ?? "None");
-            props.value = v;
-            triggerText.textContent = v;
-
-            items.forEach(btn => {
-            btn.classList.toggle("selected", btn.dataset.value === v);
-            });
-
-            if (shouldTrigger) trigger("change", props.value);
+          const v = (val ?? "None");
+          props.value = v;
+          triggerText.textContent = v;
+        
+          // mark selected (for CSS tick)
+          items.forEach(btn => {
+            btn.dataset.selected = (btn.dataset.value === v) ? "true" : "false";
+          });
+        
+          if (shouldTrigger) trigger("change", props.value);
         }
 
         // Toggle menu
@@ -995,74 +996,106 @@ css += """
     }
 
     /* 4) Ensure menu overlays neighbors and isn't clipped */
+    /* Move dropdown a tiny bit up (closer to the trigger) */
     .cd-menu{
-    position: absolute;
-    top: calc(100% + 10px);
-    left: 0;
-
-    min-width: 240px;
-    background: #2b2b2b;
-    border: 1px solid rgba(255,255,255,0.14);
-    border-radius: 14px;
-    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
-    padding: 10px;
-
-    opacity: 0;
-    transform: translateY(-6px);
-    pointer-events: none;
-    transition: opacity 160ms ease, transform 160ms ease;
-
-    z-index: 9999; /* was 50 */
-    }
-
-    .cd-menu.open{
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
+      position: absolute;
+      top: calc(100% + 4px);   /* was +10px */
+      left: 0;
+    
+      min-width: 240px;
+      background: #2b2b2b;
+      border: 1px solid rgba(255,255,255,0.14);
+      border-radius: 14px;
+      box-shadow: 0 18px 40px rgba(0,0,0,0.35);
+      padding: 10px;
+    
+      opacity: 0;
+      transform: translateY(-6px);
+      pointer-events: none;
+      transition: opacity 160ms ease, transform 160ms ease;
+    
+      z-index: 9999;
     }
 
     .cd-title{
-    padding: 6px 8px 10px 8px;
-    font-size: 12px;
-    font-weight: 800;
-    letter-spacing: 0.02em;
-    color: rgba(255,255,255,0.55);
-    text-transform: none;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    
+      color: rgba(255,255,255,0.45); /* 👈 muted grey */
+      margin-bottom: 6px;
+      padding: 0 6px;
+      pointer-events: none; /* title is non-interactive */
     }
-
+    
+        
+    .cd-menu.open{
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    
     .cd-items{
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 0px; /* tighter, more like a native menu */
     }
-
+    
+    /* Items: NO "boxed" buttons by default */
     .cd-item{
-    width: 100%;
-    text-align: left;
-    border: none;
-    background: rgba(255,255,255,0.06);
-    color: rgba(255,255,255,0.92);
-    padding: 10px 10px;
-    border-radius: 12px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 700;
-    transition: background 120ms ease, transform 80ms ease;
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: transparent;          /* ✅ removes box look */
+      color: rgba(255,255,255,0.92);
+      padding: 8px 34px 8px 12px;     /* right padding leaves room for tick */
+      border-radius: 10px;             /* only matters on hover */
+      cursor: pointer;
+    
+      font-size: 14px;
+      font-weight: 700;
+    
+      position: relative;
+      transition: background 120ms ease;
     }
-
+    
+    /* “Box effect” only on hover (not always) */
     .cd-item:hover{
-    background: rgba(255,255,255,0.10);
+      background: rgba(255,255,255,0.08);
     }
-
-    .cd-item:active{
-    transform: translateY(1px);
+    
+    /* Tick on the right ONLY on hover */
+    .cd-item::after{
+      content: "✓";
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;                      /* hidden by default */
+      transition: opacity 120ms ease;
+      color: rgba(255,255,255,0.9);
+      font-weight: 900;
+    }
+    
+    /* show tick ONLY for selected item */
+    .cd-item[data-selected="true"]::after{
+      opacity: 1;
+    }
+    
+    /* keep hover box effect, but no tick change */
+    .cd-item:hover{
+      background: rgba(255,255,255,0.08);
     }
 
+    
+    /* Kill any old “selected” styling just in case */
     .cd-item.selected{
-    background: rgba(139,255,151,0.22);
-    border: 1px solid rgba(139,255,151,0.35);
+      background: transparent !important;
+      border: none !important;
     }
 
+
     """