vbox rework

client/assets/styles/instance.css

@@ -70,13 +70,15 @@
 
 /* VBOX */
 .vbox {
-    align-items: flex-end;
+    align-content: space-between;
     grid-area: vbox;
     display: grid;
-    grid-template-rows: min-content min-content;
+    grid-template-rows: min-content min-content min-content;
+    grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
-        "vbox combiner"
-        "vbox inventory";
+        "vbox varrow inventory"
+        "vbox .     carrow"
+        "vbox .     combiner";
 }
 
 .vbox-box {
@@ -85,14 +87,39 @@
 
 .vbox-inventory {
     grid-area: inventory;
-    margin-left: 1em;
 }
 
 .vbox-combiner {
-    margin-left: 1em;
     grid-area: combiner;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
 }
 
+.vbox-combiner-arrow {
+    color: #444;
+    grid-area: carrow;
+    display: block;
+    text-align: center;
+    font-size: 2em;
+    vertical-align: center;
+}
+
+.vbox-arrow, .vbox-arrow-mobile {
+    display: flex;
+    justify-content:center;
+    align-content:center;
+    flex-direction:column;
+
+    margin: 1em 0.25em 0 0.25em;
+    grid-area: varrow;
+    font-size: 2em;
+    color: #444;
+}
+
+.vbox-combiner button {
+    flex: 0;
+}
 
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: white;
@@ -111,8 +138,6 @@
 .vbox-hdr {
     display: flex;
     align-items: flex-end;
-
-    flex: 1 0 100%;
 }
 
 .vbox-hdr h3 {
@@ -125,6 +150,11 @@
     animation: bits 1s ease-out;
 }
 
+.arrow {
+    grid-area: arrow;
+    color: #444;
+}
+
 @keyframes action {
     0% {
         color: palegoldenrod;
@@ -415,3 +445,5 @@
 
 /* Mobile Nav*/
 .instance-nav { display: none; }
+
+.vbox-arrow-mobile { display: none }

client/assets/styles/instance.mobile.css

@@ -18,14 +18,32 @@
     .vbox {
         grid-area: vbox;
         display: grid;
-        grid-template-rows: min-content min-content min-content;
+        grid-template-rows: min-content min-content min-content min-content min-content;
         grid-template-columns: 1fr;
         grid-template-areas:
             "vbox"
+            "varrow"
             "inventory"
+            "carrow"
             "combiner";
     }
 
+    .vbox-arrow {
+        display: none;
+    }
+
+    .vbox-inventory .vbox-hdr {
+        display: block;
+    }
+
+    .vbox-arrow-mobile {
+        display: block;
+        grid-area: varrow;
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
     /* constructs toggled on */
     .instance.constructs-visible .vbox {
         display: none;