145 lines
2.9 KiB
CSS
145 lines
2.9 KiB
CSS
@media (max-height: 800px), (max-width: 1000px) {
|
|
.instance {
|
|
font-size: 8pt;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: min-content 1fr;
|
|
grid-template-areas:
|
|
"vbox"
|
|
"constructs";
|
|
}
|
|
|
|
.instance .nav-btn { display: initial; }
|
|
|
|
/* Default view */
|
|
.instance .equip { display: none; }
|
|
.instance .info { display: none; }
|
|
.instance .construct-list { display: none; }
|
|
.vbox {
|
|
grid-area: vbox;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content min-content;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"vbox"
|
|
"inventory"
|
|
"combiner";
|
|
}
|
|
|
|
/* 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 {
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-content: flex-end;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.vbox-inventory {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.vbox-combiner {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.equip .specs {
|
|
margin-top: 0.5em;
|
|
border: none;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
|
|
.equip .skills {
|
|
border: none;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
|
|
.instance-construct {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content min-content 1fr min-content;
|
|
grid-template-areas:
|
|
"name "
|
|
"skills "
|
|
"specs "
|
|
"avatar "
|
|
"stats ";
|
|
|
|
border-top: 0;
|
|
padding: 0;
|
|
|
|
transition-property: all;
|
|
transition-duration: 0.5s;
|
|
transition-delay: 0;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.instance-construct .avatar {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.instance-construct:first-child {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
.instance-construct:not(:last-child) {
|
|
border-right: 1px solid #222;
|
|
}
|
|
|
|
.instance-construct .skills {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.instance-construct .skills button {
|
|
margin: 0;
|
|
}
|
|
|
|
.instance-construct .specs {
|
|
margin: 0;
|
|
}
|
|
|
|
.construct-list .stats {
|
|
flex-flow: row wrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.instance-construct .stats div.speed {
|
|
order: -1;
|
|
flex: 1 0 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.instance-construct .stats div {
|
|
flex: 1 1 33%;
|
|
}
|
|
|
|
.instance-nav {
|
|
display: flex;
|
|
grid-area: nav;
|
|
margin-right: 0;
|
|
border-top: 2px solid #444;
|
|
}
|
|
|
|
.instance-nav button {
|
|
font-size: 150%;
|
|
border-right: 2px solid #444;
|
|
}
|
|
|
|
.instance-nav button:last-child {
|
|
border: none;
|
|
}
|
|
} |