vbox stuff

client/assets/styles/instance.css

@@ -6,12 +6,10 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 2fr minmax(min-content, 1fr);
-    grid-template-rows: min-content min-content min-content 1fr;
+    grid-template-rows: min-content 1fr;
 
     grid-template-areas:
-        "top        info"
         "vbox       info"
-        "equip      info"
         "constructs info";
 }
 
@@ -81,10 +79,6 @@
         "vbox .     combiner";
 }
 
-.vbox-box {
-    grid-area: vbox;
-}
-
 .vbox-inventory {
     grid-area: inventory;
 }
@@ -121,19 +115,6 @@
     flex: 0;
 }
 
-.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
-    color: white;
-}
-
-.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover {
-    background: #a52a2a;
-    color: black;
-    box-shadow: inset 0.5em 0 0 0 #a52a2a;
-}
-
-.vbox-btn.reclaim:hover {
-    color: #a52a2a;
-}
 
 .vbox-hdr {
     display: flex;
@@ -164,26 +145,6 @@
     }
 }
 
-.vbox-btn {
-    width: 100%;
-    margin: 0;
-    background-color: #333;
-    border-width: 0;
-}
-
-.vbox-table td {
-    transition-property: color, background, border;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: linear;
-    cursor: pointer;
-}
-
-.vbox-table td:active, .vbox-table td:focus {
-    background: whitesmoke;
-    color: black;
-}
-
 /* CONSTRUCT LIST */
 
 .construct-list {

client/assets/styles/styles.css

@@ -146,7 +146,7 @@ button, input {
     color: whitesmoke;
     height: auto;
     border-width: 2px;
-    border-color: #222;
+    border-color: #333;
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
@@ -234,8 +234,8 @@ table .highlight {
 }
 
 button[disabled] {
-    color: #333;
-    border-color: #333;
+    color: #222;
+    border-color: #222;
 }
 
 /*

client/assets/styles/vbox.less

@@ -4,46 +4,94 @@
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
-.vbox-vbox {
-    grid-area: vbox;
+@darkgray: #222;
+@gray: #333;
 
-    display: flex;
-    flex-flow: column;
+.vbox {
+    margin-bottom: 2em;
+
+    .vbox-section {
+        // border: 2px solid #444;
+    }
+
+    .vbox-hdr {
+        margin-bottom: 1em;
+        height: 2em;
+    }
 
     .vbox-colours {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em;
+        grid-gap: 1em 2em;
         align-items: center;
-        margin: 1em 0;
-
-        svg {
-            width: 100%;
-            stroke: none;
-            border: 2px solid #222;
-        }
-
-        svg.red {
-            fill: @red;
-        }
-
-        svg.green {
-            fill: @green;
-        }
-
-        .blue {
-            fill: @blue;
-        }
+        margin-bottom: 1em;
     }
 
-    .vbox-skills, .vbox-specs {
+    .vbox-items {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1em;
+        grid-gap: 1em 2em;
         align-items: center;
+        margin-bottom: 1em;
 
         button {
             width: 100%;
         }
     }
+
+    .vbox-btn {
+        width: 100%;
+        margin: 0;
+        background-color: @gray;
+        border-width: 0;
+
+        .reclaim {
+            height: auto;
+
+            :hover {
+                color: @red;
+            };
+        }
+
+        :active, :hover, :focus {
+            color: white;
+        }
+
+        .reclaiming, .reclaiming:hover, .reclaiming:active {
+            background: @red;
+            color: black;
+        }
+
+        &[disabled] {
+            background: black;
+            border-width: 1px;
+        };
+    }
+
+    button {
+        height: 3em;
+        margin: 0;
+    }
+
+    button.empty {
+        border-style: dashed;
+    }
+
+    svg {
+        stroke: none;
+        margin: 0 auto;
+        display: block;
+    }
+
+    svg.red {
+        fill: @red;
+    }
+
+    svg.green {
+        fill: @green;
+    }
+
+    .blue {
+        fill: @blue;
+    }
 }