457 lines
7.4 KiB
Plaintext
457 lines
7.4 KiB
Plaintext
@import 'colours.less';
|
|
|
|
.instance {
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: 1fr minmax(min-content, 1fr);
|
|
grid-template-rows: min-content 1fr;
|
|
|
|
grid-template-areas:
|
|
"vbox info"
|
|
"constructs constructs";
|
|
|
|
hr {
|
|
grid-area: rule;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1920px) {
|
|
.instance .info table td svg {
|
|
height: 50%;
|
|
stroke-width: 8px;
|
|
}
|
|
|
|
.instance svg {
|
|
height: 1.5em;
|
|
}
|
|
}
|
|
|
|
.instance .top {
|
|
grid-area: top;
|
|
}
|
|
|
|
.instance.lobby {
|
|
align-content: center;
|
|
}
|
|
|
|
.scoreboard {
|
|
flex: 1;
|
|
}
|
|
|
|
.instance .info {
|
|
/*font-size: 75%;*/
|
|
margin: 0 0 0 1em;
|
|
grid-area: info;
|
|
display: flex;
|
|
flex-flow: column;
|
|
// white-space: pre-wrap;
|
|
|
|
> *:first-child {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.instance .info h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.instance .info svg {
|
|
display: inline;
|
|
height: 1em;
|
|
}
|
|
|
|
.instance .info figure {
|
|
display: inline;
|
|
height: 0.5em;
|
|
|
|
svg {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
.instance .info figcaption {
|
|
font-size: 1em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
.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: @gray-hint;
|
|
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: @gray-hint;
|
|
}
|
|
|
|
.vbox-combiner button {
|
|
flex: 0;
|
|
}
|
|
|
|
|
|
.vbox-hdr {
|
|
display: flex;
|
|
}
|
|
|
|
.vbox-hdr h3 {
|
|
flex: 1;
|
|
}
|
|
|
|
.vbox-hdr .bits {
|
|
font-size: 2em;
|
|
line-height: 1em;
|
|
animation: bits 1s ease-out;
|
|
}
|
|
|
|
.arrow {
|
|
grid-area: arrow;
|
|
color: @gray-hint;
|
|
}
|
|
|
|
@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;
|
|
margin-bottom: 0.75em;
|
|
|
|
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;
|
|
// }
|
|
|
|
.equipping, .receiving {
|
|
transition: border-color 0.5s ease-in;
|
|
transition-duration: 0.25s;
|
|
transition-delay: 0;
|
|
transition-timing-function: ease;
|
|
|
|
border: 2px dashed @gray-hint;
|
|
}
|
|
|
|
.thresholds {
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.thresholds svg {
|
|
stroke-width: 5px;
|
|
}
|
|
|
|
.thresholds hr {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.spec-goal {
|
|
margin-top: 0.5em;
|
|
|
|
div {
|
|
display: flex;
|
|
margin: 0 1em 1em 0;
|
|
}
|
|
|
|
.bonus {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.thresholds figure svg {
|
|
margin-right: 0.25em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
.thresholds .unmet {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
.faceoff {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: 1fr 1.5fr;
|
|
grid-template-areas:
|
|
"opponent"
|
|
"player";
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
button {
|
|
grid-area: ready;
|
|
justify-self: center;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.opponent-name {
|
|
margin-bottom: 1em;
|
|
grid-area: oppname;
|
|
}
|
|
|
|
.player-name {
|
|
margin-top: 1em;
|
|
grid-area: playername;
|
|
}
|
|
|
|
.team {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
/* Mobile Nav*/
|
|
.instance-nav { display: none; }
|
|
|
|
.vbox-arrow-mobile { display: none }
|