build css

Author: jazzsequence

src/assets/css/style.css

@@ -38,6 +38,8 @@ input {
   padding: 5px;
   font-size: 0.9rem;
   color: #f3f2e8; }
+  input:disabled {
+    background-color: rgba(255, 255, 255, 0.1); }
 
 ul {
   list-style: none;
@@ -52,7 +54,7 @@ button {
   border-radius: 5px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
   button:hover:not(:disabled) {
-    background: #40a07c;
+    background: #70ddd7;
     cursor: pointer; }
 
 .battle-tracker {
@@ -68,12 +70,26 @@ button {
       display: grid;
       grid-template-columns: 1fr;
       grid-auto-flow: row;
-      grid-gap: 20px; }
+      width: 28rem; }
+      .battle-tracker .initiative-order ul .dead {
+        color: #b06f6b; }
+      .battle-tracker .initiative-order ul .healed {
+        color: #40a07c; }
+      .battle-tracker .initiative-order ul .revived {
+        color: #3368dc; }
       .battle-tracker .initiative-order ul li {
+        padding: 5px;
+        background: rgba(0, 0, 0, 0.1);
         display: grid;
-        grid-template-columns: 1fr 3rem auto;
-        grid-gap: 10px;
-        justify-content: space-evenly; }
+        grid-template-columns: 10rem 4rem auto;
+        grid-gap: 20px;
+        justify-content: start; }
+        .battle-tracker .initiative-order ul li input {
+          width: 3rem; }
+        .battle-tracker .initiative-order ul li:nth-child(even) {
+          background: rgba(255, 255, 255, 0.1); }
+        .battle-tracker .initiative-order ul li button {
+          justify-self: center; }
   .battle-tracker .characters,
   .battle-tracker .monsters-npcs {
     display: grid;
@@ -125,3 +141,15 @@ button {
   .battle-tracker .hp-update-msg {
     color: #40a07c;
     font-style: italic; }
+    .battle-tracker .hp-update-msg.nothing {
+      color: #dcc484;
+      font-style: normal; }
+    .battle-tracker .hp-update-msg.damaged {
+      color: #b73241;
+      font-style: italic; }
+    .battle-tracker .hp-update-msg.died {
+      color: #b06f6b;
+      font-style: italic; }
+    .battle-tracker .hp-update-msg.healed {
+      color: #40a07c;
+      font-style: italic; }