build interface css

js/index.js

@@ -141,7 +141,7 @@ const build = {
 
     if (build.list.length < 5) { //add to build array
       // who.style.border = "2px solid #333"
-      who.style.backgroundColor = "#868f9a"
+      who.style.backgroundColor = "#919ba8" //"#868f9a"
       build.list[build.list.length] = {
         who: who,
         index: index,
@@ -178,7 +178,21 @@ document.getElementById("build-button").addEventListener("click", () => {
     document.getElementById("settings").style.display = 'inline'
   } else {
     build.list = []
-    let text = '<p>choose up to 5 powers<br>	<button type="button" id="build-begin-button" onclick="build.startBuildRun()">Begin Run</button></p>'
+    // let text = '<p>choose up to 5 powers<br>	<button type="button" id="build-begin-button" onclick="build.startBuildRun()">Begin Run</button></p>'
+    let text =
+      `<div style="  display: flex;
+      justify-content: center;
+      align-items: center;">
+      <p>choose up to 5 powers</p>
+      </div>
+      <div style="  display: flex;
+      justify-content: center;
+      align-items: center;">
+      <svg class="SVG-button" onclick="build.startBuildRun()" width="74" height="36">
+         <g stroke='none' fill='#333' stroke-width="2" font-size="28px" font-family="Ariel, sans-serif">
+           <text x="10" y="28">start</text>
+         </g>
+      </svg></div>`
     for (let i = 1, len = mech.fieldUpgrades.length; i < len; i++) {
       text += `<div class="build-grid-module" onclick="build.choosePowerUp(this,${i},'field')" ><div class="circle-grid field"></div> &nbsp; <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>`
     }

style.css

@@ -46,14 +46,14 @@ summary {
 .SVG-button {
   border: 2px #333 solid;
   border-radius: 9px;
+  background-color: #fff;
 }
 
 .SVG-button:hover {
-  background-color: #eee;
+  background-color: #efeff5;
 }
 
 #build-button {
-
   position: absolute;
   top: 3px;
   right: 3px;
@@ -65,7 +65,7 @@ summary {
   margin: 0px;
   border: 0px;
   /* border-radius: 8px; */
-  background-color: #b6bfca;
+  background-color: #c4ccd8;
   /* #b6bfca; */
 
   display: none;
@@ -93,7 +93,7 @@ summary {
 }
 
 .build-grid-module:hover {
-  background-color: #eee;
+  background-color: #efeff5;
 }
 
 .gun-module {