swiping pog

client/assets/styles/instance.mobile.less

@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 @media (max-width: 800px) {
     .instance {
         font-size: 8pt;
@@ -7,14 +9,14 @@
         grid-template-areas:
             "vbox"
             "constructs";
+
+        .info {
+            display: none;
+        }
     }
 
     .instance .nav-btn { display: initial; }
 
-    /* Default view */
-    .instance .equip { display: none; }
-    .instance .info { display: none; }
-    .instance .construct-list { display: none; }
     .vbox {
         grid-area: vbox;
         margin-bottom: 0;
@@ -27,6 +29,9 @@
             "inventory"
             "combiner";
 
+        &:not(.visible) {
+            display: none;
+        }
     }
 
     .vbox-arrow {
@@ -45,24 +50,13 @@
         margin: 0;
     }
 
-    /* constructs toggled on */
-    .instance.constructs-visible .vbox {
-        display: none;
-    }
-
-    .instance.constructs-visible .equip {
-        display: initial;
-        grid-area: vbox;
-        margin: 0;
-    }
-
-    .instance.constructs-visible .highlight {
-        display: initial;
-    }
-
-    .instance.constructs-visible .construct-list {
+    .construct-list {
         display: grid;
         grid-auto-rows: 1fr;
+
+        .instance-construct:not(.visible) {
+            display: none;
+        };
     }
 
     .vbox-inventory {