Update static/index.html

static/index.html

@@ -70,16 +70,40 @@
   #panel.min ~ #saveState { display: none; }
 
   /* Pins (bigger + more transparent) */
-  .pin{
-    position:absolute; left:0; top:0;
-    width:34px; height:34px; border-radius:50%;
-    border:2px solid rgba(255,255,255,.45);
-    background:rgba(255,255,255,.12);
-    box-shadow:0 2px 10px rgba(0,0,0,.45);
-    transform:translate(-50%, -50%);
-    z-index:3; cursor:pointer; display:block; padding:0; line-height:0;
-    -webkit-appearance:none; appearance:none;
-  }
+/* Pins as very transparent rectangles with faded edges */
+.pin {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 80px;           /* adjust rectangle size */
+  height: 40px;
+  border-radius: 12px;   /* rounded edges */
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.12) 60%,
+    rgba(255, 255, 255, 0.0) 100%
+  );
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  cursor: pointer;
+  display: block;
+  padding: 0;
+  line-height: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;          /* remove solid border */
+}
+.pin:hover {
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 255, 255, 0.18) 60%,
+    rgba(255, 255, 255, 0.0) 100%
+  );
+}
+
   .pin::before{content:""; position:absolute; inset:-10px; border-radius:50%;}
   .pin:hover{background:rgba(255,255,255,.26)}