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

mobile styles

Browse Source
This commit is contained in:
ntr 2019-11-24 18:00:05 +11:00
parent 9ad0f97e51
commit 735df33056
2 changed files with 90 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/assets/styles/styles.less
View File

@ -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';

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

@ -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;