2 files changed, 27 insertions, 42 deletions
diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css
index 096a1b2..4dfb1fd 100644
--- a/public/assets/css/soldier_record_block.css
+++ b/public/assets/css/soldier_record_block.css
@@ -45,52 +45,45 @@ p {
   display: none;
 }
 
-.grenades svg {
-  width: 14px;
-  height: 14px;
-  vertical-align: bottom;
+.grenades input + label {
+  display: inline-block;
+  width: 0.75em;
+  height: 0.75em;
+  border: 1px solid black;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 
-.grenades svg circle {
-  fill: none;
-  stroke: black;
-  stroke-width: 2px;
+.grenades input:checked + label {
+  background-color: gray;
 }
 
-.grenades input:checked + svg circle {
-  fill: gray;
+.grenades input + label:hover {
+  background-color: lightgray;
+}
+
+.grenades input:checked + label:hover {
+  background-color: darkgray;
 }
 
 [slot="block-number"]:not(:last-of-type) {
   display: inline-block;
   width: 1.3em;
+  margin-bottom: 2px;
 }
 
-damage-block.armor span[slot="block-number"] {
-  border: 1px solid black;
+damage-block span[slot="block-number"] {
+  border: 1px solid transparent;
   padding: 2px;
   border-radius: 50%;
   position: relative;
 }
 
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
-}
-
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before {
-  content: '🡄';  /*<⇽⭠⮈🠈  🠜  🡄*/
-  position: absolute;
-  margin-left: -1.5em;
+damage-block.preview span[slot="block-number"] {
+  border-color: gray;
+  background-color: silver;
 }
 
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
-}
-
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
-  content: '🡆';  /* 🠊  🡆 */
-  position: absolute;
-  margin-left: 1em;
+damage-block.armor span[slot="block-number"] {
+  border-color: black;
 }
diff --git a/public/index.html b/public/index.html
index c3a1c75..33d7085 100644
--- a/public/index.html
+++ b/public/index.html
@@ -100,18 +100,10 @@
     </ul>
     <p class="grenades">
       <span>Hand Grenades</span>
-      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="0" cy="0" r="5" />
-      </svg></label>
-      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="0" cy="0" r="5" />
-      </svg></label>
-      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="0" cy="0" r="5" />
-      </svg></label>
-      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="0" cy="0" r="5" />
-      </svg></label>
+      <input type='checkbox' id="grenade1" checked /><label for="grenade1"></label>
+      <input type='checkbox' id="grenade2" checked /><label for="grenade2"></label>
+      <input type='checkbox' id="grenade3" checked /><label for="grenade3"></label>
+      <input type='checkbox' id="grenade4" checked /><label for="grenade4"></label>
     </p>
   </template>