Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

client/assets/styles/colours.less

@@ -122,6 +122,15 @@ svg {
     }
 }
 
+@keyframes border-co {
+    0% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @gray-hint;
+    }
+}
+
 @keyframes co {
     from {
         background: @black;

client/assets/styles/instance.less

@@ -2,7 +2,7 @@
     overflow: hidden;
     display: grid;
     grid-template-columns: 1fr minmax(min-content, 1fr);
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: minmax(min-content, 0.75fr) 1fr;
 
     grid-template-areas:
         "vbox info"
@@ -33,16 +33,15 @@
 }
 
 .instance .info {
-    /*font-size: 75%;*/
-    margin: 0 0 0 1em;
     grid-area: info;
-    display: flex;
-    flex-flow: column;
+    display: grid;
+    font-size: 85%;
+    grid-template-rows: 0.8fr 1fr;
+    grid-template-areas:
+        "item"
+        "combos";
+    // flex-flow: column;
     // white-space: pre-wrap;
-
-    > *:first-child {
-        margin-bottom: 1em;
-    }
 }
 
 .instance .info h2 {
@@ -63,6 +62,29 @@
     }
 }
 
+.instance .info-item {
+    grid-area: item;
+    margin: 0 0 0 1em;
+}
+
+.instance .combos {
+    grid-area: combos;
+    margin: 0 0 0 1em;
+
+    td.table-button {
+        padding:5px; 
+        cursor: pointer;
+        animation: border-co 0.75s ease-in-out 0s infinite alternate;
+        &:hover {
+            color: whitesmoke;
+            background-color: @gray-hover;
+        }
+        svg {
+            height: 1em;
+        }
+    }
+}
+
 .instance .info figcaption {
     font-size: 1em;
     display: inline-block;