separated out instance.css, fixed game cryp-list css
This commit is contained in:
Mashy
parent
d434f9db57
commit
e19b27af49
1
client/assets/assets/molecules/726.svg
Normal file
1
client/assets/assets/molecules/726.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
295
client/cryps.css
295
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
|
||||
*/
|
||||
@ -208,8 +222,9 @@ img {
|
||||
}
|
||||
|
||||
/*
|
||||
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%;
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
require('./cryps.css');
|
||||
require('./instance.css');
|
||||
|
||||
// kick it off
|
||||
require('./src/main');
|
||||
|
||||
247
client/instance.css
Normal file
247
client/instance.css
Normal file
@ -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%;
|
||||
}
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user