ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

less

Browse Source
This commit is contained in:
ntr 2019-07-23 14:17:46 +10:00
parent 90a60ebd65
commit 10369dee17
1 changed files with 381 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

381
client/assets/styles/instance.less Normal file
View File

@ -0,0 +1,381 @@
/*
INSTANCE
*/
.instance {
overflow-x: hidden;
display: grid;
grid-template-columns: 2fr minmax(min-content, 1fr);
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox info"
"constructs info";
}
@media (max-width: 1920px) {
.instance .info table td svg {
height: 50%;
}
.instance svg {
height: 1.5em;
}
}
.instance .top {
grid-area: top;
}
.instance.lobby {
align-content: center;
}
.scoreboard .ready {
background: black;
color: forestgreen;
}
.instance .info {
/*font-size: 75%;*/
margin-left: 1em;
grid-area: info;
display: flex;
flex-flow: column;
justify-content: center;
white-space: pre-wrap;
}
.instance .info h2 {
text-transform: uppercase;
}
.instance .info .combos {
margin-top: 1.5em;
}
.instance .constructs {
grid-area: constructs;
}
.instance .equip {
grid-area: equip;
}
.instance .equip .skills {
border-right-width: 0;
}
/* VBOX */
.vbox {
align-content: space-between;
grid-area: vbox;
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: 1fr min-content 1fr;
grid-template-areas:
"vbox varrow inventory"
"vbox . carrow"
"vbox . combiner";
}
.vbox-inventory {
grid-area: inventory;
}
.vbox-combiner {
grid-area: combiner;
display: flex;
flex-flow: column;
justify-content: flex-end;
}
.vbox-combiner-arrow {
color: #444;
grid-area: carrow;
display: block;
text-align: center;
font-size: 2em;
vertical-align: center;
}
.vbox-arrow, .vbox-arrow-mobile {
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
margin: 1em 0.25em 0 0.25em;
grid-area: varrow;
font-size: 2em;
color: #444;
}
.vbox-combiner button {
flex: 0;
}
.vbox-hdr {
display: flex;
align-items: flex-end;
}
.vbox-hdr h3 {
flex: 1;
}
.vbox-hdr .bits {
font-size: 2em;
line-height: 1em;
animation: bits 1s ease-out;
}
.arrow {
grid-area: arrow;
color: #444;
}
@keyframes action {
0% {
color: palegoldenrod;
}
100% {
color: whitesmoke;
}
}
/* CONSTRUCT LIST */
.construct-list {
grid-area: constructs;
display: flex;
}
.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 ";
/*padding: 0.5em;*/
border: 2px solid #222;
border-left-width: 0;
}
.instance-construct:first-child {
margin-left: 0;
border-left-width: 1px;
}
.construct-list {
.avatar {
grid-area: avatar;
object-fit: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
}
.name {
grid-area: name;
margin-bottom: 0.5em;
text-align: center;
}
.skills {
grid-area: skills;
padding: 0 0.5em;
margin-bottom: 0.75em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 0.5em;
button {
height: 3em;
}
}
.specs {
grid-area: specs;
padding: 0 0.5em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 0.5em;
button {
padding: 0.25em 0;
}
figure {
flex: 1;
align-items: center;
text-align: center;
}
figcaption {
font-size: 75%;
line-height: initial;
}
}
.stats {
grid-area: stats;
display: flex;
flex-flow: row;
flex: 1;
border-width: 0px;
text-align: center;
figcaption {
font-size: 75%;
}
// give speed some space
div:nth-child(4n) {
margin: 0 1em;
}
div {
flex: 1;
}
}
button {
margin: 0;
&.empty {
border-style: dashed;
}
}
}
/* Equipment */
.equip {
display: flex;
margin: 1.5em 0;
text-align: center;
}
.equip h3 {
margin-bottom: 0.5em;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.1em;
}
.equip .specs {
flex: 1;
border: 2px solid #222;
}
.equip .items {
display: flex;
flex: 1 0 100%;
justify-content: space-around;
}
.label {
flex: 1 0 100%;
}
.equipping {
position: relative;
}
.equipping::before {
content: '';
position: absolute;
top: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
}
.equipping::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
animation-delay: 0.75s
}
@keyframes equipping-skill {
from {
transform: translate(-50%, 0) scaleX(0);
}
to {
transform: translate(-50%, 0) scaleX(0.75);
opacity: 1;
}
}
.equip-spec {
position: relative;
stroke: #333;
}
.equip-spec::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
}
.thresholds {
display: flex;
flex-flow: column;
text-align: center;
}
.thresholds svg {
stroke-width: 5px;
}
.thresholds hr {
margin: 1em 0;
}
.colour-reqs {
display: flex;
flex-flow: row;
justify-content: space-around;
}
.thresholds figure svg {
height: 1.5em;
}
.thresholds .unmet {
opacity: 0.5;
}
/* Mobile Nav*/
.instance-nav { display: none; }
.vbox-arrow-mobile { display: none }