src/assets/styles/sidebar-layers.css

@@ -13,8 +13,7 @@
   border: 1px solid grey;
   top: 0;
   position: absolute;
-  /* Under this value, the map hide the sidebar */
-  z-index: 400;
+  z-index: 9;
 }
 
 .sidebar-layers {
@@ -62,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -132,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {
@@ -144,7 +143,6 @@
 }
 
 /* Layer item */
-
 .layer-item {
   padding-bottom: 0.5rem;
 }
@@ -164,6 +162,7 @@
 
 .range-container {
   display: flex;
+  min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
 }
 
 .range-output-bubble {
@@ -172,6 +171,8 @@
   padding: 4px 7px;
   border-radius: 40px;
   background-color: #2c3e50;
+  min-width: 2em;
+  text-align: center;
 }
 
 /* Overrides default padding of semantic-ui accordion */