allow to style text-shadow for labels

index.css

@@ -239,7 +239,6 @@ i.icon-lock {
 #labels {
   text-anchor: start;
   dominant-baseline: central;
-  text-shadow: 0 0 4px white;
   cursor: pointer;
 }
 

index.html

@@ -234,7 +234,7 @@
   <div id="loading">
     <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
     <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
-    <div id="version"><t data-t="version">v. </t>1.62</div>
+    <div id="version"><t data-t="version">v. </t>1.63</div>
     <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
   </div>
 
@@ -669,6 +669,15 @@
             </tr>
           </tbody>
 
+          <tbody id="styleShadow">
+            <tr data-tip="Set text shadow">
+              <td>Text shadow</td>
+              <td>
+                <input id="styleShadowInput" type="text" value="0 0 4px white"/>
+              </td>
+            </tr>
+          </tbody>
+
           <tbody id="styleFont">
             <tr data-tip="Select font">
               <td>Font</td>

main.js

@@ -2,7 +2,7 @@
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
 "use strict";
-const version = "1.62"; // generator version
+const version = "1.63"; // generator version
 document.title += " v" + version;
 
 // Switches to disable/enable logging features

modules/load.js

@@ -674,12 +674,26 @@ function parseLoadedData(data) {
         const href = filter ? "./images/" + filter.replace("url(#", "").replace(")", "") + ".png" : "";
         pattern.innerHTML = `<image id="oceanicPattern" href=${href} width="100" height="100" opacity="0.2"></image>`;
       }
-    })();
 
-    if (version < 1.62) {
+      if (version < 1.62) {
-      // v 1.62 changed grid data
+        // v 1.62 changed grid data
-      gridOverlay.attr("size", null);
+        gridOverlay.attr("size", null);
-    }
+      }
+
+      if (version < 1.63) {
+        // v.1.63 change ocean pattern opacity element
+        const oceanPattern = document.getElementById("oceanPattern");
+        if (oceanPattern) oceanPattern.removeAttribute("opacity");
+        const oceanicPattern = document.getElementById("oceanicPattern");
+        if (!oceanicPattern.getAttribute("opacity")) oceanicPattern.setAttribute("opacity", 0.2);
+
+        // v 1.63 moved label text-shadow from css to editable inline style
+        burgLabels.select("#cities").style("text-shadow", "white 0 0 4px");
+        burgLabels.select("#towns").style("text-shadow", "white 0 0 4px");
+        labels.select("#states").style("text-shadow", "white 0 0 4px");
+        labels.select("#addedLabels").style("text-shadow", "white 0 0 4px");
+      }
+    })();
 
     void (function checkDataIntegrity() {
       const cells = pack.cells;