diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 04e4f1c6..33142408 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -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 } +} \ No newline at end of file diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 80ba1518..e20f2d4f 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -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 {