vbox highlighting

client/assets/styles/game.css

@@ -14,7 +14,6 @@
 .team {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-auto-columns: minmax(0, 1fr);
 
     /* stops overflow */
     min-height: 0;
@@ -39,12 +38,12 @@
 .opponent .game-construct {
     align-items: flex-start;
     grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "stats  ."
-        "name   ."
-        "effects ."
-        "avatar target";
+        "stats  "
+        "name   "
+        "effects "
+        "avatar ";
 }
 
 .opponent .game-construct .name {
@@ -59,14 +58,14 @@
     justify-items: start;
     /*align-items: flex-end;*/
 
-    grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
-    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "skills     ."
-        "avatar     target"
-        "effects    ."
-        "name       ."
-        "stats      .";
+        "skills     "
+        "avatar     "
+        "effects    "
+        "name       "
+        "stats      ";
 
     transition-property: all;
     transition-duration: 0.25s;
@@ -98,15 +97,14 @@
 .game-construct .stats {
     grid-area: stats;
     display: flex;
-    flex-flow: row;
     width: 100%;
+    justify-content: center;
 }
 
 .game-construct .stats div {
     padding: 0 0.5em;
     display: flex;
     flex-flow: column;
-    flex: 1;
     white-space: nowrap;
     text-align: center;
 }
@@ -203,7 +201,6 @@
     left: 50%;
 }
 
-CONSTRUCT DAMAGE
 
 .game-construct.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
@@ -299,8 +296,15 @@ CONSTRUCT DAMAGE
 
 .game .avatar {
     grid-area: avatar;
-    background: forestgreen;
     width: 100%;
+    height: 100%;
+
+    grid-area: avatar;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
 }
 
 /*@keyframes rotate {
@@ -409,6 +413,10 @@ CONSTRUCT DAMAGE
         height: 1em;
     }
 
+    .game .stats div {
+        margin: 0 0.2em;
+    }
+
     .game .effects {
         font-size: 100%;
     }

client/assets/styles/instance.css

@@ -150,10 +150,15 @@
     transition-property: color, background, border;
     transition-duration: 0.5s;
     transition-delay: 0;
-    transition-timing-function: ease;
+    transition-timing-function: linear;
     cursor: pointer;
 }
 
+.vbox-table td:active {
+    background: whitesmoke;
+    color: black;
+}
+
 /* CONSTRUCT LIST */
 
 .construct-list {
@@ -224,20 +229,6 @@
     border-width: 0px;
 }
 
-
-/*button.action {
-    animation: action 1s infinite ease-in-out alternate;
-}
-
-@keyframes action {
-    0% {
-        box-shadow: inset 0 0 0 0 whitesmoke;
-    }
-    100% {
-        box-shadow: inset 0.5em 0 0 0 whitesmoke;
-    }
-}
-*/
 .construct-list .specs {
     margin-top: 1em;
     grid-area: specs;