Expanded CSS selectors in index.html:37-54: Added aggressive selectors including body.cursor-crosshair * as a catch-all, plus specific Leaflet classes like .leaflet-grabbing, .leaflet-overlay-pane, .leaflet-tile-pane, .leaflet-tile, .leaflet-proxy, and .leaflet-zoom-animated. Also added a separate .leaflet-crosshair class that gets applied directly to the Leaflet container.

Direct Leaflet container targeting in index.js:311-329: The updateMapCursor() function now also adds/removes a leaflet-crosshair class directly to the Leaflet map container via state.photoMap.getContainer(). This provides maximum CSS specificity by targeting the container itself.

Author: cs-util

index.html

@@ -34,13 +34,25 @@
       padding: 3px 10px;
       font-size: 13px;
     }
+    /* Force crosshair cursor in precision modes - must override Leaflet's inline styles */
+    body.cursor-crosshair,
+    body.cursor-crosshair *,
     body.cursor-crosshair .leaflet-container,
     body.cursor-crosshair .leaflet-grab,
+    body.cursor-crosshair .leaflet-grabbing,
     body.cursor-crosshair .leaflet-dragging,
     body.cursor-crosshair .leaflet-interactive,
+    body.cursor-crosshair .leaflet-overlay-pane,
     body.cursor-crosshair .leaflet-pane,
     body.cursor-crosshair .leaflet-image-layer,
-    body.cursor-crosshair.leaflet-dragging {
+    body.cursor-crosshair .leaflet-tile-pane,
+    body.cursor-crosshair .leaflet-tile,
+    body.cursor-crosshair .leaflet-proxy,
+    body.cursor-crosshair .leaflet-zoom-animated,
+    .leaflet-container.leaflet-crosshair,
+    .leaflet-container.leaflet-crosshair .leaflet-interactive,
+    .leaflet-container.leaflet-crosshair .leaflet-pane,
+    .leaflet-container.leaflet-crosshair .leaflet-image-layer {
       cursor: crosshair !important;
     }
   </style>

src/index.js

@@ -317,8 +317,15 @@ function updateMapCursor() {
 
   if (isAnyModeActive) {
     document.body.classList.add('cursor-crosshair');
+    // Also add to Leaflet container directly for maximum specificity
+    if (state.photoMap && state.photoMap.getContainer) {
+      state.photoMap.getContainer().classList.add('leaflet-crosshair');
+    }
   } else {
     document.body.classList.remove('cursor-crosshair');
+    if (state.photoMap && state.photoMap.getContainer) {
+      state.photoMap.getContainer().classList.remove('leaflet-crosshair');
+    }
   }
 }