separated out instance.css, fixed game cryp-list css

client/cryps.css

@@ -148,6 +148,20 @@ img {
     pointer-events: none;
 }
 
+table {
+    table-layout: fixed;
+    width: 100%;
+    margin-bottom: 2em;
+}
+
+table td {
+    border: 1px solid whitesmoke;
+    padding: 0.2em;
+    text-align: center;
+    height: 40px;
+    text-transform: uppercase;
+}
+
 /*
     COLOURS
 */
@@ -207,9 +221,10 @@ img {
     border-color: whitesmoke;
 }
 
-/*
+/* 
-    MENU
+    HEADER
 */
+
 header {
     display: flex;
     flex-flow: row;
@@ -262,6 +277,10 @@ header {
     }
 }
 
+/*
+    MENU
+*/
+
 .menu-cryps {
     display: flex;
     flex-flow: row wrap;
@@ -364,278 +383,15 @@ header {
     font-size: 1.5em;
 }
 
-/*
-    INSTANCE
-*/
-
-.instance {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(7, 1fr);
-    grid-template-areas: 
-        "n v v v v v v v v v v v"
-        "n v v v v v v v v v v v"
-        "x x g g g g g g g g g g"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f";
-}
-
-.instance-hdr {
-    grid-area: n;
-    display: flex;
-    flex-flow: row;
-
-    flex: 0 0 100%;
-}
-
-.instance-info {
-    grid-area: x;
-    flex: 0 0 50%;
-}
-
-.instance .spacer {
-    flex-grow: 1
-}
-
-.vbox {
-    grid-area: v;
-    display: grid;
-    grid-template-columns: repeat(11, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    grid-template-areas: 
-        "vb vb vb vb vb . i i i i i"
-        "vb vb vb vb vb . i i i i i"
-}
-
-.vbox-box {
-    grid-area: vb;
-    justify-self: end;
-    max-width: 450px;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.vbox-inventory {
-    grid-area: i;
-    justify-self: start;
-    max-width: 450px;
-    display: flex;
-    flex-flow: row wrap;
-}
-
 .menu-btn, .nav-btn {
     flex: 1 0 25%;
 }
 
-
 /* nav hidden on desktop */
 .nav-btn {
     display: none;
 }
 
-.ready-btn {
-    flex: 1 0 50%;
-}
-
-.ready-btn:hover {
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-timing-function: ease;
-    color: forestgreen;
-    border-color: forestgreen;
-    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
-}
-
-.ready {
-    color: forestgreen;
-    border-color: forestgreen;
-    box-shadow: inset -0.5em 0 0 0 forestgreen;
-}
-
-.timer-container {
-    display: flex;
-    flex: 1 1 100%;
-    width: 100%;
-    height: 0.25em;
-
-    border: none;
-    margin: 1em 0;
-}
-
-.timer {
-    background: whitesmoke;
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-
-}
-
-.instance-ui-btn {
-    font-size: 100%;
-    padding: 0;
-    margin: 0;
-}
-
-table .highlight {
-    background: whitesmoke;
-    color: black;
-    font-weight: bold;
-}
-
-button[disabled] {
-    color: #333;
-    border-color: #333;
-}
-
-.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
-    color: black;
-}
-
-.vbox-btn.reclaiming, .vbox-btn.reclaiming:hover {
-    color: #a52a2a;
-    box-shadow: inset 0.5em 0 0 0 #a52a2a;
-}
-
-.vbox-hdr {
-    display: flex;
-    align-items: flex-end;
-
-    flex: 1 0 100%;
-}
-
-.vbox-hdr div:first-child {
-    flex-grow: 1;
-}
-
-.vbox-hdr .bits {
-    font-size: 2em;
-    line-height: 1em;
-}
-
-.vbox-btn {
-    flex: 1 0 100%;
-    margin: 0;
-    background-color: whitesmoke;
-    color: black;
-    border-width: 0;
-}
-
-.vbox-btn:hover {
-    color: black;
-}
-
-table {
-    table-layout: fixed;
-    width: 100%;
-    margin-bottom: 2em;
-}
-
-table td {
-    border: 1px solid whitesmoke;
-    padding: 0.2em;
-    text-align: center;
-    height: 40px;
-    text-transform: uppercase;
-}
-
-.vbox-table td {
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-    cursor: pointer;
-}
-
-.vbox-table table td:active {
-    background-color: whitesmoke;
-    color: black;
-}
-
-table td svg {
-    stroke-width: 2px;
-    height: 96%;
-    vertical-align: text-bottom;
-}
-
-.spacer {
-    flex: 1 0 25%;
-}
-
-.cryp-list {
-    grid-area: f;
-    flex: 1 1 25%;
-
-    display: flex;
-    flex-flow: row;
-    padding: 0 2em 0 2em;
-    justify-content: center;
-    min-width: 300px;
-
-    overflow: hidden;
-}
-
-/* CRYP BOX */
-.instance-cryp {
-    flex: 1 1 100%;
-
-    display: flex;
-    flex-flow: column;
-    border: 1px solid whitesmoke;
-    margin-left: 1em;
-    justify-content: center;
-    max-width: 350px;
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-}
-
-.instance-cryp-top {
-    display: flex;
-    flex: 1 1 auto;
-    width: 100%;
-    justify-content: center;
-    align-items: stretch;
-}
-
-.instance-cryp figure {
-    margin: 0;
-    flex: 0 0 50%;
-    text-align: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
-}
-
-.instance-cryp .stats {
-    flex: 0 0 20%;
-    width: 100%;
-    display: flex;
-    border-top: 1px solid whitesmoke;
-}
-
-.stats figure {
-    flex: 1 1 0;
-    border: 0;
-    align-items: center;
-    padding: 0.5em 0 0 0;
-}
-
-.instance-cryp .stats figcaption {
-    font-size: 75%;
-}
-
-.instance-cryp .skills {
-    display: flex;
-    flex-flow: row wrap;
-    flex: 1 1 50%;
-    height: 100%;
-}
-
 /*
     INFO
 */
@@ -697,6 +453,17 @@ table td svg {
 
 
 /* CRYP BOX */
+
+.cryp-list {
+    flex: 1 1 25%;
+    display: flex;
+    flex-flow: column;
+    height: 94%;
+    padding: 0 2em 0 2em;
+    min-width: 300px;
+    overflow: hidden;
+}
+
 .game-cryp {
     flex: 1 1 100%;
 

client/index.js

@@ -1,4 +1,5 @@
 require('./cryps.css');
+require('./instance.css');
 
 // kick it off
 require('./src/main');

client/instance.css

@@ -0,0 +1,247 @@
+/*
+    INSTANCE
+*/
+
+.instance {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+    grid-template-areas: 
+        "n v v v v v v v v v v v"
+        "n v v v v v v v v v v v"
+        "x x g g g g g g g g g g"
+        "x x f f f f f f f f f f"
+        "x x f f f f f f f f f f"
+        "x x f f f f f f f f f f"
+        "x x f f f f f f f f f f";
+}
+
+.instance-hdr {
+    grid-area: n;
+    display: flex;
+    flex-flow: row;
+    flex: 0 0 100%;
+}
+
+.instance-info {
+    grid-area: x;
+    flex: 0 0 50%;
+}
+
+.instance .spacer {
+    flex-grow: 1
+}
+
+.vbox {
+    grid-area: v;
+    display: grid;
+    grid-template-columns: repeat(11, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-areas: 
+        "vb vb vb vb vb . i i i i i"
+        "vb vb vb vb vb . i i i i i"
+}
+
+.vbox-box {
+    grid-area: vb;
+    justify-self: end;
+    max-width: 450px;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.vbox-inventory {
+    grid-area: i;
+    justify-self: start;
+    max-width: 450px;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.ready-btn {
+    flex: 1 0 50%;
+}
+
+.ready-btn:hover {
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+    color: forestgreen;
+    border-color: forestgreen;
+    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
+}
+
+.ready {
+    color: forestgreen;
+    border-color: forestgreen;
+    box-shadow: inset -0.5em 0 0 0 forestgreen;
+}
+
+.timer-container {
+    display: flex;
+    flex: 1 1 100%;
+    width: 100%;
+    height: 0.25em;
+
+    border: none;
+    margin: 1em 0;
+}
+
+.timer {
+    background: whitesmoke;
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+
+}
+
+.instance-ui-btn {
+    font-size: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+table .highlight {
+    background: whitesmoke;
+    color: black;
+    font-weight: bold;
+}
+
+button[disabled] {
+    color: #333;
+    border-color: #333;
+}
+
+.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
+    color: black;
+}
+
+.vbox-btn.reclaiming, .vbox-btn.reclaiming:hover {
+    color: #a52a2a;
+    box-shadow: inset 0.5em 0 0 0 #a52a2a;
+}
+
+.vbox-hdr {
+    display: flex;
+    align-items: flex-end;
+
+    flex: 1 0 100%;
+}
+
+.vbox-hdr div:first-child {
+    flex-grow: 1;
+}
+
+.vbox-hdr .bits {
+    font-size: 2em;
+    line-height: 1em;
+}
+
+.vbox-btn {
+    flex: 1 0 100%;
+    margin: 0;
+    background-color: whitesmoke;
+    color: black;
+    border-width: 0;
+}
+
+.vbox-btn:hover {
+    color: black;
+}
+
+
+.vbox-table td {
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+    cursor: pointer;
+}
+
+.vbox-table table td:active {
+    background-color: whitesmoke;
+    color: black;
+}
+
+table td svg {
+    stroke-width: 2px;
+    height: 96%;
+    vertical-align: text-bottom;
+}
+
+.spacer {
+    flex: 1 0 25%;
+}
+
+.instance-cryp-list {
+    grid-area: f;
+    flex: 1 1 25%;
+
+    display: flex;
+    flex-flow: row;
+    padding: 0 2em 0 2em;
+    justify-content: center;
+    min-width: 300px;
+
+    overflow: hidden;
+}
+
+/* CRYP BOX */
+.instance-cryp {
+    flex: 1 1 100%;
+
+    display: flex;
+    flex-flow: column;
+    border: 1px solid whitesmoke;
+    margin-left: 1em;
+    justify-content: center;
+    max-width: 350px;
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+}
+
+.instance-cryp-top {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.instance-cryp figure {
+    margin: 0;
+    flex: 0 0 50%;
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
+}
+
+.instance-cryp .stats {
+    flex: 0 0 20%;
+    width: 100%;
+    display: flex;
+    border-top: 1px solid whitesmoke;
+}
+
+.stats figure {
+    flex: 1 1 0;
+    border: 0;
+    align-items: center;
+    padding: 0.5em 0 0 0;
+}
+
+.instance-cryp .stats figcaption {
+    font-size: 75%;
+}
+
+.instance-cryp .skills {
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 1 50%;
+    height: 100%;
+}

client/src/components/instance.cryps.jsx

@@ -171,7 +171,7 @@ function InstanceCryps(props) {
         cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
-    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
+    const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
     return (
         <div className={classes} onClick={() => setActiveCryp(null)}>
             {cryps}