almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 11:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: rationalize z-indexes in CSS

Browse source 
Positive side-effect: alerts are now above importers panel.
This commit is contained in:
David Larlet 2024-06-25 14:49:08 -04:00
parent adc1cf460f
commit 735c9dc6d8
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
8 changed files with 25 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
umap/static/umap/base.css
View file

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

2
umap/static/umap/content.css
View file

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

2
umap/static/umap/css/dialog.css
View file

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

4
umap/static/umap/css/panel.css
View file

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

2
umap/static/umap/css/tooltip.css
View file

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

2
umap/static/umap/js/components/alerts/alert.css
View file

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

17
umap/static/umap/map.css
View file

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

10
umap/static/umap/vars.css
View file

@ -36,6 +36,16 @@
--box-padding: 20px; --box-padding: 20px;
--box-margin: 14px; --box-margin: 14px;
--text-margin: 7px; --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 { .dark {
--background-color: var(--color-darkGray); --background-color: var(--color-darkGray);