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

landscape is the way

Browse Source
This commit is contained in:
Mashy 2019-11-04 10:27:22 +10:00
parent a6473cb84c
commit 7b1a6df40b
4 changed files with 3 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
client/assets/styles/game.less
View File

@ -347,103 +347,4 @@
max-height: 100%;
max-width: 100%;
// height: 5em;
}
@media (max-width: 1000px) {
.game {
grid-template-areas:
"opponent"
"target "
"player ";
grid-template-rows: 1fr 0.2fr 1.5fr;
grid-template-columns: 1fr;
.game-construct {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
.left {
width: 100%;
grid-template-areas:
"skills"
"effects";
grid-template-columns: 1fr;
grid-template-rows: min-content min-content;
}
.skills {
button {
padding: 0 0.5em ;
margin: 0;
}
button.active {
background: #2c2c2c;
}
}
.stats div {
padding: 0;
}
.stats .max {
display: none;
}
.stats .value {
display: flex;
}
.stats svg {
height: 1em;
}
.stats div {
margin: 0 0.2em;
}
.effects {
font-size: 100%;
}
.stats, .name {
font-size: 75%;
}
.skills button {
font-size: 50%;
}
.skill-description {
font-size: 65%;
}
}
.player {
width: calc(100% - 1em);
bottom: 3em;
height: calc(50% - 3em);
}
.opponent {
width: calc(100% - 1em);
.game-construct {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
}
}
#targeting, .resolving-skill {
width: calc(100% - 1em);
}
.player {
width: calc(100% - 1em);
bottom: 3em;
height: calc(50% - 3em);
}
}
}
}

141
client/assets/styles/instance.mobile.less
View File

@ -17,9 +17,7 @@
@media (max-width: 800px) {
.instance {
overflow-y: scroll;
font-size: 8pt;
display: grid;
font-size: 6pt;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
@ -30,141 +28,4 @@
display: none;
}
}
.instance .nav-btn { display: initial; }
.vbox {
grid-area: vbox;
margin-bottom: 0;
display: grid;
grid-template-rows: min-content min-content min-content min-content;
grid-template-columns: 1fr;
grid-template-areas:
"vbox"
"varrow"
"inventory"
"combiner";
&:not(.visible) {
display: none;
}
.vbox-vbox {
margin-bottom: 1em;
}
}
.vbox-arrow {
display: none;
}
.vbox-inventory .vbox-hdr {
display: block;
}
.vbox-arrow-mobile {
display: block;
grid-area: varrow;
width: 100%;
text-align: center;
margin: 0;
}
.construct-list {
display: grid;
grid-auto-rows: 1fr;
.instance-construct:not(.visible) {
display: none;
};
}
.vbox-inventory {
margin-left: 0;
}
.vbox-combiner {
margin-left: 0;
}
.equip .specs {
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #444;
}
.equip .skills {
border: none;
border-bottom: 1px solid #444;
}
.instance-construct {
display: grid;
grid-template-rows: min-content min-content min-content 1fr min-content;
grid-template-areas:
"name "
"skills "
"specs "
"avatar "
"stats ";
border: 0;
padding: 0;
transition-property: all;
transition-duration: 0.25s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-construct:first-child {
border-left-width: 0;
}
.instance-construct:not(:last-child) {
border-right: 1px solid #222;
}
.instance-construct .skills {
flex-flow: column;
}
.instance-construct .skills button {
margin: 0;
}
.instance-construct .specs {
margin: 0;
}
.construct-list .stats {
flex-flow: row wrap;
text-align: center;
}
.instance-construct .stats div.speed {
order: -1;
flex: 1 0 100%;
margin: 0;
}
.instance-construct .stats div {
flex: 1 1 33%;
}
.instance-nav {
display: flex;
grid-area: nav;
margin-right: 0;
border-top: 2px solid #444;
}
.instance-nav button {
font-size: 150%;
border-right: 2px solid #444;
}
.instance-nav button:last-child {
border: none;
}
}

26
client/assets/styles/menu.less
View File

@ -215,29 +215,3 @@ section {
}
}
@media (max-width: 800px) {
section {
grid-template-columns: 1fr;
.list {
grid-template-columns: 1fr 1fr;
&.play {
grid-template-columns: 1fr;
}
}
}
.menu .team {
grid-template-columns: 1fr;
.construct {
height: 10em;
}
}
.account {
grid-template-columns: 1fr;
}
}

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

@ -4,127 +4,7 @@
}
#mnml {
font-size: 12pt;
padding: 0;
grid-template-columns: 1fr;
grid-template-rows: 10fr 1fr;
grid-template-areas:
"main"
"footer";
height: 100vh;
max-height: initial;
min-height: initial;
font-size: 6pt;
}
table td {
height: 2.5em;
}
nav {
display: none;
}
aside {
display: none;
}
footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
button {
font-size: 90%;
}
}
#nav-btn, #instance-nav {
display: unset;
}
#mnml.nav-visible nav {
padding: 0.5em;
margin: 0;
display: block;
grid-area: main;
}
#mnml.nav-visible main {
display: none;
}
main {
overflow-x: hidden;
overflow-y: initial;
max-height: 100vh;
padding: 0 0.5em;
}
.welcome .login {
width: 100%;
}
.welcome .options {
width: 100%;
flex-flow: row wrap;
}
.welcome .options button {
flex: 1 0 50%;
}
.timer-container {
margin: 0.5em 0 0 0;
}
.mobile-title {
display: block;
margin-bottom: 1em;
}
.menu-instances {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"constructs"
"inventory"
"games";
}
.menu {
.options {
display: grid;
grid-template-columns: 1fr;
button:not(:last-child) {
border: 2px solid #222;
}
button.logo {
border: none;
margin-right: 0;
margin-top: 0.5em;
background-position: center;
}
}
}
section {
.list {
grid-template-columns: 1fr;
}
}
.account {
div {
padding: 0;
}
}
.play-p {
display: none;
}
}