chore: rationalize z-indexes in CSS

Positive side-effect: alerts are now above importers panel.

umap/static/umap/base.css

@@ -798,7 +798,7 @@ input[type=hidden].blur + [type="button"] {
     background-repeat: no-repeat;
     background-position: center;
     background-color: #323e56;
-    z-index: 401;
+    z-index: var(--zindex-dragover);
     display: block;
     position: absolute;
     width: 100vw;

umap/static/umap/content.css

@@ -248,7 +248,7 @@ input[type="submit"],
 ul.umap-autocomplete {
     position: absolute;
     background-color: white;
-    z-index: 10100;
+    z-index: var(--zindex-autocomplete);
     box-shadow: 0 4px 9px #999999;
 }
 .umap-autocomplete li {

umap/static/umap/css/dialog.css

@@ -1,5 +1,5 @@
 .umap-dialog {
-    z-index: 10001;
+    z-index: var(--zindex-dialog);
     margin: auto;
     margin-top: 100px;
     width: 40vw;

umap/static/umap/css/panel.css

@@ -5,7 +5,7 @@
     position: absolute;
     bottom: var(--panel-bottom);
     overflow-x: auto;
-    z-index: 1010;
+    z-index: var(--zindex-panels);
     background-color: var(--background-color);
     color: var(--text-color);
     opacity: 0.98;
@@ -22,7 +22,7 @@
 .panel.full {
     width: initial;
     right: -100%;
-    z-index: 1030;
+    z-index: calc(var(--zindex-panels) + 1);
 }
 .panel.full.on {
     visibility: visible;

umap/static/umap/css/tooltip.css

@@ -9,7 +9,7 @@
     color: #eeeeec;
     font-size: 0.8em;
     border-radius: 2px;
-    z-index: 1011;
+    z-index: calc(var(--zindex-panels) + 1);
     font-weight: normal;
     max-width: 300px;
 }

umap/static/umap/js/components/alerts/alert.css

@@ -9,7 +9,6 @@
     font-weight: bold;
     color: #fff;
     font-size: 0.8em;
-    z-index: 1012;
     border-radius: 2px;
     margin-top: calc(var(--header-height) + var(--panel-gutter));
     display: flex;
@@ -19,6 +18,7 @@
     transform: translate(-50%, 0);
     max-width: calc(100% - var(--panel-gutter) * 2);
     width: max-content;
+    z-index: var(--zindex-alert);
 }
 [role="dialog"] > div {
     margin: 0 auto;

umap/static/umap/map.css

@@ -228,7 +228,7 @@
 ul.photon-autocomplete {
     position: absolute;
     background-color: white;
-    z-index: 1000;
+    z-index: var(--zindex-autocomplete);
     display: none;
 }
 .photon-autocomplete li {
@@ -579,7 +579,7 @@ ul.photon-autocomplete {
     line-height: var(--control-size);
     cursor: auto;
     border-bottom: 1px solid #222;
-    z-index: 1000;
+    z-index: var(--zindex-panels);
     opacity: 0.98;
     color: #fff;
     display: flex;
@@ -672,7 +672,7 @@ ul.photon-autocomplete {
     cursor: auto;
     border-top: 1px solid var(--color-lightGray);
     opacity: 0.93;
-    z-index: 1000;
+    z-index: var(--zindex-panels);
 }
 .umap-help {
     font-style: italic;
@@ -1328,7 +1328,7 @@ span.popup-icon {
     width: 2px;
 }
 .umap-icon-active {
-    z-index: 9500!important;
+    z-index: var(--zindex-icon-active)!important;
     opacity: 1.0!important;
 }
 .umap-edit-enabled .readonly {
@@ -1352,15 +1352,14 @@ span.popup-icon {
     -o-animation-delay: .2s;
     animation-delay: .2s;
 }
-.umap-loader
-{
+.umap-loader {
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
-    z-index: 10100;
+    z-index: var(--zindex-loader);
     background-color: #79c1c0 !important;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
@@ -1522,7 +1521,7 @@ span.popup-icon {
     margin-left: 10px;
 }
 .leaflet-top {
-    z-index: 1001;
+    z-index: calc(var(--zindex-panels) + 1);
 }
 .leaflet-popup-content {
     min-width: 200px;
@@ -1594,7 +1593,7 @@ span.popup-icon {
     text-align: center;
 }
 .leaflet-inplace-toolbar {
-  z-index: 10000!important;
+  z-index: var(--zindex-toolbar)!important;
 }
 .leaflet-inplace-toolbar a {
     background-image: url('./img/16-white.svg');

umap/static/umap/vars.css

@@ -36,6 +36,16 @@
     --box-padding: 20px;
     --box-margin: 14px;
     --text-margin: 7px;
+
+    /* z-indexes (leaflet CSS sets the map at 400 by default) */
+    --zindex-alert: 500;
+    --zindex-loader: 490;
+    --zindex-toolbar: 480;
+    --zindex-autocomplete: 470;
+    --zindex-dialog: 460;
+    --zindex-icon-active: 450;
+    --zindex-panels: 440;
+    --zindex-dragover: 410;
 }
 .dark {
     --background-color: var(--color-darkGray);