Remove indentation of input controls + better alignment in Style settings

Author: Malvoz

src/mapml.css

@@ -203,11 +203,18 @@
   display: inline;
 }
 
-.leaflet-control-layers-overlays > fieldset > .mapml-layer-item-settings > .mapml-control-layers > summary ~ * {
+.mapml-control-layers > :not(summary) {
   display: block;
-  margin-top: 5px;
-  margin-left: 15px;
-  width: calc(100% - 15px);
+  margin-block-start: 5px;
+  width: 100%;
+}
+
+.mapml-layer-item-style > div {
+  display: flex;
+}
+
+.mapml-layer-item-style input {
+  margin-inline-start: 0;
 }
 
 .leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) {
@@ -692,9 +699,3 @@ label.mapml-layer-item-toggle {
   padding-inline-start: 2rem;
   padding-inline-end: 1rem;
 }
-
-.mapml-layer-item-opacity [type="range"] {
-  margin-inline-end: 0;
-  margin-inline-start: 0;
-  width: 100%;
-}

src/mapml/layers/MapLayer.js

@@ -489,7 +489,7 @@ export var MapMLLayer = L.Layer.extend({
         layerItemSettings = L.DomUtil.create('div', 'mapml-layer-item-settings', fieldset),
         itemToggleLabel = L.DomUtil.create('label', 'mapml-layer-item-toggle', layerItemProperty),
         layerItemControls = L.DomUtil.create('div', 'mapml-layer-item-controls', layerItemProperty),
-        opacityControl = L.DomUtil.create('details', 'mapml-layer-item-opacity', layerItemSettings),
+        opacityControl = L.DomUtil.create('details', 'mapml-layer-item-opacity mapml-control-layers', layerItemSettings),
         opacity = L.DomUtil.create('input'),
         opacityControlSummary = L.DomUtil.create('summary'),
         svgSettingsControlIcon = L.SVG.create('svg'),
@@ -654,7 +654,7 @@ export var MapMLLayer = L.Layer.extend({
                 // don't add it again if it is referenced > once
                 if (mapmlInput.tagName.toLowerCase() === 'map-select' && !frag.querySelector(id)) {
                   // generate a <details><summary></summary><select...></details>
-                  var selectdetails = L.DomUtil.create('details', 'mapml-control-layers', frag),
+                  var selectdetails = L.DomUtil.create('details', 'mapml-layer-item-time mapml-control-layers', frag),
                       selectsummary = L.DomUtil.create('summary'),
                       selectSummaryLabel = L.DomUtil.create('label');
                       selectSummaryLabel.innerText = mapmlInput.getAttribute('name');
@@ -939,7 +939,7 @@ export var MapMLLayer = L.Layer.extend({
                   };
 
                   for (var j=0;j<styleLinks.length;j++) {
-                    var styleOption = document.createElement('span'),
+                    var styleOption = document.createElement('div'),
                     styleOptionInput = styleOption.appendChild(document.createElement('input'));
                     styleOptionInput.setAttribute("type", "radio");
                     styleOptionInput.setAttribute("id", "rad-"+L.stamp(styleOptionInput));
@@ -953,7 +953,7 @@ export var MapMLLayer = L.Layer.extend({
                       styleOptionInput.checked = true;
                     }
                     stylesControl.appendChild(styleOption);
-                    L.DomUtil.addClass(stylesControl,'mapml-control-layers');
+                    L.DomUtil.addClass(stylesControl,'mapml-layer-item-style mapml-control-layers');
                     L.DomEvent.on(styleOptionInput,'click', changeStyle, layer);
                   }
                   layer._styles = stylesControl;