diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css
index 9cca7461..6da14e7d 100644
--- a/umap/static/umap/css/icon.css
+++ b/umap/static/umap/css/icon.css
@@ -35,9 +35,11 @@ html[dir="rtl"] .icon {
.icon-block + span {
margin-inline-start: 0;
}
+.icon-16.icon-white,
.dark .icon-16 {
background-image: url('../img/16-white.svg');
}
+.icon-24.icon-white,
.dark .icon-24 {
background-image: url('../img/24-white.svg');
}
@@ -105,10 +107,10 @@ html[dir="rtl"] .icon {
background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
}
.icon-polygon {
- background-position: var(--tile) calc(var(--tile) * 5);
+ background-position: var(--tile) calc(var(--tile) * 3);
}
.icon-polyline {
- background-position: 0 calc(var(--tile) * 5);
+ background-position: 0 calc(var(--tile) * 3);
}
.icon-resize {
background-position: calc(var(--tile) * 3) calc(var(--tile) * 6);
diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg
index 8c60cbc3..b652efee 100644
--- a/umap/static/umap/img/16-white.svg
+++ b/umap/static/umap/img/16-white.svg
@@ -130,8 +130,8 @@
-
-
+
+
diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg
index 7662fcc6..0a79b883 100644
--- a/umap/static/umap/img/16.svg
+++ b/umap/static/umap/img/16.svg
@@ -177,5 +177,8 @@
+
+
+
diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg
index d678d3b9..d5138092 100644
--- a/umap/static/umap/img/source/16-white.svg
+++ b/umap/static/umap/img/source/16-white.svg
@@ -16,7 +16,7 @@
-
+
@@ -152,8 +152,8 @@
-
-
+
+
diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg
index 5fd14d89..2730a768 100644
--- a/umap/static/umap/img/source/16.svg
+++ b/umap/static/umap/img/source/16.svg
@@ -10,7 +10,7 @@
-
+
@@ -196,5 +196,8 @@
+
+
+
diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index 36fb306e..38c7b565 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -32,7 +32,11 @@ export default class Browser {
'show-on-edit icon-delete',
translate('Delete this feature')
)
- const colorBox = DomUtil.create('i', 'icon icon-16 feature-color', row)
+ const colorBox = DomUtil.create(
+ 'i',
+ `icon icon-16 icon-${feature.getClassName()} feature-color`,
+ row
+ )
const title = DomUtil.create('span', 'feature-title', row)
const symbol = feature._getIconUrl
? Icon.formatUrl(feature._getIconUrl(), feature)
@@ -43,6 +47,8 @@ export default class Browser {
if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
const icon = Icon.makeElement(symbol, colorBox)
Icon.setContrast(icon, colorBox, symbol, bgcolor)
+ } else if (DomUtil.contrastedColor(colorBox, bgcolor)) {
+ colorBox.classList.add('icon-white')
}
const viewFeature = (e) => {
feature.zoomTo({ ...e, callback: () => feature.view() })
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index ef522fe8..1873a1c9 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -867,13 +867,15 @@ a.umap-control-caption,
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing: border-box;
- background: none;
display: inline-block;
padding: 0;
width: 24px;
text-align: center;
margin-inline-start: 5px;
}
+.umap-browser .marker .feature-color {
+ background: none;
+}
.umap-browser.dark .datalayer .feature-color {
box-shadow: 0 0 2px 0 #999 inset;
}
@@ -884,18 +886,6 @@ a.umap-control-caption,
font-style: normal;
font-weight: bold;
}
-.umap-browser .polygon .feature-color,
-.umap-browser .polyline .feature-color {
- box-shadow: 0 0 2px 0 black inset;
- background-image: url('./img/24.svg');
- background-size: 500%;
-}
-.umap-browser .polyline .feature-color {
- background-position: -72px -23px;
-}
-.umap-browser .polygon .feature-color {
- background-position: -48px -25px;
-}
.umap-browser .datalayer-toggle-list {
float: inline-end;
margin-inline-end: 5px;