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