Merge pull request #1942 from umap-project/rational-zindexes

chore: rationalize z-indexes in CSS

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);