diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 72ab973c..3fcc8929 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -8,7 +8,6 @@ @import 'vbox.less'; @import 'game.less'; @import 'player.less'; -@import 'styles.mobile.less'; html body { margin: 0; @@ -33,7 +32,6 @@ html body { height: 100vh; max-height: 100vh; min-height: 100vh; - /*padding: 0 20%;*/ /* stops inspector going skitz*/ overflow-x: hidden; @@ -255,20 +253,10 @@ figure.gray { svg { height: 1em; + stroke-width: 1em; } } -@media (max-width: 1150px) { - #mnml { - font-size: 60%; - } - - svg { - height: 1em; - } -} - - .mobile-title { display: none; } @@ -370,3 +358,5 @@ li { flex: 1; } } + +@import 'styles.mobile.less'; diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 2eba09ac..49c716ae 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -6,11 +6,23 @@ #mnml { font-size: 8pt; - padding: 0.25em; + padding: 0; .instance { + grid-template-areas: + "vbox vbox" + "constructs constructs"; + font-size: 7.5pt; + + .stats { + div:nth-child(4n) { + margin: 0; + } + } + .info { + display: none; .combos { display: none; } @@ -18,8 +30,70 @@ svg { stroke-width: 1.25em; } - .avatar { - display: none; + + .vbox { + grid-template-rows: min-content min-content 1fr; + grid-template-columns: min-content 1fr min-content 1fr; + grid-template-areas: + "store-hdr store-hdr stash-hdr stash-hdr" + "store store stash stash" + "store store combiner combiner"; + + .stash { + border: 0; + border-top: 0.1em solid @gray; + border-right: 0.1em solid @gray; + border-bottom: 0.1em solid @gray; + } + + .stash-hdr { + border: 0; + border-left: 0.1em solid @gray; + border-right: 0.1em solid @gray; + + display: grid; + grid-template-rows: min-content min-content; + grid-template-columns: 1fr 1fr; + + h3 { + margin: 0; + } + } + + .store { + border: 0; + border-top: 0.1em solid @gray; + border-bottom: 0.1em solid @gray; + border-right: 0.1em solid @gray; + } + + .store-hdr { + display: grid; + grid-template-rows: min-content; + grid-template-columns: 1fr 1fr; + + grid-template-areas: + "hdr btn" + "bits btn"; + + h3 { + grid-area: hdr; + } + + .bits { + grid-area: bits; + } + + button { + grid-area: btn; + } + } + + .store-hdr, .stash-hdr { + button { + margin: 0; + } + } } } @@ -29,7 +103,12 @@ svg { stroke-width: 1.5em; } + + div:nth-child(4n) { + margin: 0 0.25em; + } } + .team, #targeting, .resolving-skill { width: calc(90% - 3em); } @@ -126,6 +205,10 @@ width: 100%; z-index: -1; } + + button:not([disabled]) { + background: black; + } } aside { @@ -139,7 +222,7 @@ // portrait menu -@media (max-width: 600px) { +@media (max-width: 500px) { #mnml { grid-template-columns: 1fr; grid-template-rows: 1fr;