icons wip

client/assets/styles/instance.css

@@ -192,29 +192,29 @@
 }
 
 .construct-list .skills {
+    padding: 0 0.5em;
     grid-area: skills;
-    display: flex;
-    border-width: 0px;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 0 0.5em;
 }
 
-.construct-list .skills button {
-    flex: 1;
-    /*border: 1px solid #222;*/
-    border: none;
+.construct-list .skills button.empty {
+    border-style: dashed;
 }
 
 .construct-list .specs {
     margin-top: 1em;
     grid-area: specs;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    border-width: 0px;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 0 0.5em;
 }
 
 .construct-list .specs figure {
     flex: 1;
-    border: 0;
     align-items: center;
     text-align: center;
 }
@@ -294,19 +294,6 @@
     flex: 1 0 100%;
 }
 
-.equip .skills {
-    flex: 1;
-    border: 2px solid #222;
-}
-
-.equip .skills button {
-    color: whitesmoke;
-    font-size: 1em;
-    padding: 0.2em;
-    border-width: 0px;
-    margin-bottom: 0.5em;
-}
-
 .equipping {
   position: relative;
 }
@@ -349,11 +336,6 @@
     }
 }
 
-.equip .specs figure {
-    border: 0;
-    text-align: center;
-}
-
 .equip-spec {
     position: relative;
     stroke: #333;
@@ -372,10 +354,6 @@
     opacity: 0;
 }
 
-.equip .specs figcaption {
-    font-size: 75%;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;

client/assets/styles/vbox.less

@@ -15,17 +15,17 @@
     .vbox-colours {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
     }
 
     .vbox-items {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
 
         button {
             width: 100%;
@@ -38,6 +38,8 @@
         background-color: @gray;
         border-width: 0;
 
+        height: 3em;
+
         :active, :hover, :focus {
             color: white;
         }
@@ -62,9 +64,11 @@
     }
 
     button {
-        height: 3em;
+        height: 4em;
         margin: 0;
 
+        text-transform: none;
+
         &.empty {
             border-style: dashed;
         }
@@ -79,4 +83,15 @@
     svg {
         stroke: none;
     }
+
+    // figures don't scale well
+    figure {
+        svg {
+            height: 2em;
+        }
+
+        figcaption {
+            line-height: initial;
+        }
+    }
 }