WIP: edge UI style

public/assets/css/style.css

@@ -36,12 +36,14 @@ svg text {
 
 #hex-counter {
   padding: 2px;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.8);
   border-radius: 2px;
+  font-family: sans-serif;
 }
 
 #hex-count {
   font-family: monospace;
+  font-size: larger;
 }
 
 polyline.move-trace {
@@ -378,14 +380,11 @@ div#content {
 #edge-inputs {
   position: absolute;
   right: 0;
-  height: 100%;
-  background-color: rgba(0, 255, 255, 0.418);
+  /* height: 100%; */
   pointer-events: none;
   display: flex;
   flex-direction: column;
-  /* align-content: space-around; */
   align-items: end;
-  /* justify-content: space-between; */
 }
 
 #edge-inputs > * {
@@ -504,12 +503,10 @@ div#dice {
 
 div#status {
   margin: 3px;
-  /* display: none; */
-  /* visibility: hidden; */
+  display: none;
   user-select: none;
   position: absolute;
   bottom: 0;
-  /* right: 50px; */
   white-space: nowrap;
   pointer-events: none;
 }

public/index.html

@@ -131,7 +131,7 @@
           <span class="hidden">▽</span><span class="visible">▼</span>
         </label>
         <input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
-        <label for="attacker-firing-arc-vis">
+        <label style="color: blue;" for="attacker-firing-arc-vis">
           <span class="hidden">▽</span><span class="visible">▼</span>
         </label>
       </div>

src/index.js

@@ -92,7 +92,7 @@ function clearMoveEndedIndicators(records) {
 
 function distance(count = '-') {
   distanceOutput.querySelector('#hex-count').textContent = count;
-  distanceOutput.style.visibility = count === '-' ? 'hidden' : 'visible';
+  distanceOutput.style.display = count === '-' ? 'none' : 'inline';
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive