From 10369dee179a66ecf1368d4d729e44ea9d64bfdc Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 14:17:46 +1000 Subject: [PATCH] less --- client/assets/styles/instance.less | 381 +++++++++++++++++++++++++++++ 1 file changed, 381 insertions(+) create mode 100644 client/assets/styles/instance.less diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less new file mode 100644 index 00000000..4b7cd9de --- /dev/null +++ b/client/assets/styles/instance.less @@ -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 }