140 lines
3.0 KiB
CSS
140 lines
3.0 KiB
CSS
@media (max-height: 800px), (max-width: 800px) {
|
|
.instance {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: repeat(4, min-content);
|
|
grid-template-areas:
|
|
"top"
|
|
"controls"
|
|
"first"
|
|
"second"
|
|
}
|
|
/* Default view */
|
|
.instance .equip { display: none; }
|
|
.instance .info { display: none; }
|
|
.instance .cryp-list { display: none; }
|
|
.vbox {
|
|
grid-area: first;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content min-content;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"vbox"
|
|
"inventory"
|
|
"combiner";
|
|
}
|
|
|
|
.vbox-inventory {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.vbox-combiner {
|
|
margin-left: 0;
|
|
}
|
|
/* Toggled view (cryps)*/
|
|
#toggle-vbox-label {
|
|
text-align: center;
|
|
border: 2px solid #555;
|
|
}
|
|
#toggle-vbox-label:after{
|
|
content: "Cryps";
|
|
}
|
|
|
|
#toggle-vbox:checked ~ #toggle-vbox-label:after{
|
|
content: "Vbox";
|
|
}
|
|
|
|
#toggle-vbox:checked ~ .vbox { display: none; }
|
|
#toggle-vbox:checked ~ .equip {
|
|
grid-area: first;
|
|
display: initial;
|
|
}
|
|
|
|
#toggle-vbox:checked ~ .cryp-list {
|
|
grid-area: second;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-flow: row wrap;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
#toggle-vbox { display: none; }
|
|
|
|
#toggle-vbox-label {
|
|
grid-area: controls;
|
|
color: whitesmoke;
|
|
line-height: 1.75em;
|
|
font-size: 1.5em;
|
|
display: block;
|
|
cursor: pointer;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.cryp-list .skills {
|
|
flex-flow: row;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.instance-cryp {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content;
|
|
grid-template-areas:
|
|
"name "
|
|
"avatar "
|
|
/*margin: 0 2em;*/
|
|
padding: 0.5em;
|
|
border: 2px solid #222;
|
|
transition-property: all;
|
|
transition-duration: 0.5s;
|
|
transition-delay: 0;
|
|
transition-timing-function: ease;
|
|
}
|
|
.instance-cryp img {
|
|
width: 35px;
|
|
}
|
|
|
|
.instance-cryp .skills {
|
|
display: none;
|
|
}
|
|
|
|
.instance-cryp .specs {
|
|
display: none;
|
|
}
|
|
|
|
.instance-cryp .stats {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.instance-cryp-active {
|
|
flex: 1;
|
|
order: 3;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content min-content min-content min-content;
|
|
grid-template-areas:
|
|
"name "
|
|
"skills "
|
|
"specs "
|
|
"avatar "
|
|
"stats ";
|
|
|
|
/*margin: 0 2em;*/
|
|
padding: 0.5em;
|
|
border: 2px solid #222;
|
|
transition-property: all;
|
|
transition-duration: 0.5s;
|
|
transition-delay: 0;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.instance-cryp-active img {
|
|
width: 55px;
|
|
}
|
|
|
|
|
|
/* Cryp Stuff */
|
|
|
|
} |