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

instance cleanup

Browse Source
This commit is contained in:
Mashy 2019-11-21 16:55:04 +10:00
parent 05112fbf7e
commit 8e83d0aa0b
2 changed files with 76 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
client/assets/styles/instance.less
View File

@ -1,3 +1,7 @@
.instance.lobby {
align-content: center;
}
.instance { .instance {
overflow: hidden; overflow: hidden;
display: grid; display: grid;
@ -7,122 +11,89 @@
grid-template-areas: grid-template-areas:
"vbox info" "vbox info"
"constructs constructs"; "constructs constructs";
}
@media (max-width: 1920px) { .info {
.instance .info table td svg { h2 {
// height: 50%; text-transform: uppercase;
stroke-width: 8px; }
} svg {
display: inline;
height: 1em;
}
figure {
display: inline;
height: 0.5em;
svg {
margin-right: 0.5em;
}
}
figcaption {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
.instance svg { margin: 0 0 0 1em;
height: 1.5em; grid-area: info;
}
}
.instance .top {
grid-area: top;
}
.instance.lobby {
align-content: center;
}
.scoreboard {
flex: 1;
}
.instance .info {
margin: 0 0 0 1em;
grid-area: info;
display: grid;
grid-template-rows: 13em min-content;
grid-template-areas:
"item"
"combos";
.combos {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-rows: 13em min-content;
align-content: center; grid-template-areas:
"item"
"combos";
.table-button { .combos {
display: grid; display: grid;
text-align: center; grid-template-columns: repeat(6, 1fr);
align-content: center; align-content: center;
border-bottom: 2px solid #222;
grid-template-areas: .table-button {
"item" display: grid;
"ingr"; text-align: center;
align-content: center;
cursor: pointer;
&:hover {
color: whitesmoke;
background-color: @gray;
}
.item {
border-top: 2px solid #222;
border-bottom: 2px solid #222; border-bottom: 2px solid #222;
flex: 1;
grid-area: item;
font-weight: bold;
}
div { grid-template-areas:
border-right: 2px solid #222; "item"
svg { "ingr";
vertical-align: middle;
cursor: pointer;
&:hover {
color: whitesmoke;
background-color: @gray;
}
.item {
border-top: 2px solid #222;
border-bottom: 2px solid #222;
flex: 1;
grid-area: item;
font-weight: bold;
} }
}
&:first-child {
div { div {
border-left: 2px solid #222; border-right: 2px solid #222;
svg {
vertical-align: middle;
}
}
&:first-child {
div {
border-left: 2px solid #222;
}
} }
} }
} }
} }
}
.instance .info h2 { .constructs {
text-transform: uppercase; grid-area: constructs;
}
.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;
}
@keyframes action { @keyframes action {
0% { 0% {
@ -135,10 +106,6 @@
/* CONSTRUCT LIST */ /* CONSTRUCT LIST */
.construct-list {
grid-area: constructs;
display: flex;
}
.instance-construct { .instance-construct {
flex: 1; flex: 1;
@ -154,14 +121,16 @@
/*padding: 0.5em;*/ /*padding: 0.5em;*/
border: 2px solid #222; border: 2px solid #222;
border-left-width: 0; border-left-width: 0;
} &:first-child {
margin-left: 0;
.instance-construct:first-child { border-left-width: 1px;
margin-left: 0; }
border-left-width: 1px;
} }
.construct-list { .construct-list {
grid-area: constructs;
display: flex;
button { button {
&.highlight { &.highlight {
color: black; color: black;
@ -264,95 +233,10 @@
} }
} }
/* 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 { .label {
flex: 1 0 100%; 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 { .equipping, .receiving {
animation: eq 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate; animation: eq 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
} }
@ -484,9 +368,4 @@
to { to {
color: @yellow; color: @yellow;
} }
} }
/* Mobile Nav*/
.instance-nav { display: none; }
.vbox-arrow-mobile { display: none }

5
client/assets/styles/styles.mobile.less
View File

@ -8,7 +8,7 @@
padding: 0.25em; padding: 0.25em;
.instance { .instance {
font-size: 6pt; font-size: 7.5pt;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
@ -21,6 +21,9 @@
svg { svg {
stroke-width: 1.25em; stroke-width: 1.25em;
} }
.avatar {
display: none;
}
} }
.game { .game {