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

Merge branch 'new-vbox-combiner' into new-vbox-resize

Browse Source
This commit is contained in:
ntr
2019-11-24 18:20:33 +11:00
parent 308165b33a 74f47e7cb5
commit 5f4659b6db
18 changed files with 519 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/colours.less
+1
View File
@@ -5,6 +5,7 @@
@white: #f5f5f5; // whitesmoke
@purple: #9355b5; // 6lack - that far cover
@yellow: #ffa100;
@silver: #c0c0c0;
@black: black;
@gray: #222;
client/assets/styles/game.less
+4 -3
View File
@@ -27,6 +27,7 @@
position: absolute;
bottom: 0;
margin-bottom: 0.5em;
height: 50%;
.avatar {
@@ -232,8 +233,8 @@
#targeting, .resolving-skill {
position: absolute;
top: 35%;
height: 15%;
top: calc(35% + 0.5em); // calc for 0.5em top gap
height: calc(15% - 1em); // calc for 0.5em + 0.5em top / bottom gap
width: calc(90% - 1.25em);
z-index: 2;
span {
@@ -273,7 +274,7 @@
/* some stupid bug in chrome makes it fill the entire screen */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#targeting {
max-height: 10em;
// max-height: 10em;
}
}
client/assets/styles/instance.less
+3 -100
View File
@@ -5,114 +5,17 @@
.instance {
overflow: hidden;
display: grid;
grid-template-columns: 1fr minmax(min-content, 1fr);
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox info"
"constructs constructs";
.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;
}
margin-left: 1em;
grid-area: info;
display: grid;
grid-template-columns: 1fr min-content;
grid-template-areas:
"item combos";
.info-item {
grid-area: item;
}
.combos {
display: grid;
grid-area: combos;
margin-left: 0.5em;
grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
text-align: center;
}
.combo-list {
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.table-button {
display: grid;
text-align: center;
align-content: center;
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;
div {
width: 5em;
}
}
div {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
}
}
}
}
}
"vbox"
"constructs";
.constructs {
grid-area: constructs;
}
}
@keyframes action {
0% {
color: palegoldenrod;
@@ -152,7 +55,7 @@
button {
&.highlight {
color: black;
background: @white;
background: @silver;
// border: 1px solid @white; (this bangs around the vbox)
// overwrite the classes on white svg elements
client/assets/styles/styles.mobile.less
+14 -3
View File
@@ -1,7 +1,6 @@
@media (max-width: 800px) {
body {
overflow-y: initial;
}
#mnml {
@@ -95,6 +94,10 @@
}
}
}
.avatar {
opacity: 0.1;
}
}
.game {
@@ -221,8 +224,8 @@
}
// portrait menu
@media (max-width: 500px) {
// portrait menu or small size vertical in landscape
@media (max-width: 550px) {
#mnml {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
@@ -289,6 +292,14 @@
}
}
.stats {
font-size: 6pt;
}
.skill-description {
font-size: 6pt;
}
section {
.list {
grid-template-columns: 1fr;
client/assets/styles/vbox.less
+143 -63
View File
@@ -3,10 +3,10 @@
grid-area: vbox;
display: grid;
grid-template-rows: 3fr 2fr;
grid-template-columns: 1fr 4fr 1fr;
grid-template-columns: 1fr 4fr 6fr;
grid-template-areas:
"store-hdr store combiner"
"stash-hdr stash combiner";
"store-hdr store info"
"stash-hdr stash info";
margin-bottom: 1em;
line-height: 0;
@@ -17,8 +17,8 @@
.store {
grid-area: store;
border-right: 0.1em solid @gray;
border-top: 0.1em solid @gray;
border-right: 0.15em solid @gray;
border-top: 0.15em solid @gray;
}
.store-hdr {
@@ -27,17 +27,16 @@
flex-flow: column;
text-align: center;
border-left: 0.1em solid @gray;
border-top: 0.1em solid @gray;
border-left: 0.15em solid @gray;
border-top: 0.15em solid @gray;
h1 {
margin-bottom: 0;
margin-bottom: 0.5em;
}
button {
margin: 1em 0 0 0;
line-height: 1.6;
letter-spacing: 0.1em;
letter-spacing: 0.15em;
background-color: #421010;
&:hover {
background-color: @red;
@@ -46,38 +45,6 @@
}
}
.combiner {
grid-area: combiner;
display: flex;
flex-direction: column;
line-height: 1.3;
padding: 0;
.vbox-padding {
margin-right: 0em;
margin-bottom: 0em;
}
button {
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
background-color: @yellow;
color: black;
border-radius: 0;
border: 0;
&[disabled] {
border: 0.1em solid @gray;
border-left: 0;
color: @gray-exists;
};
transition-property: 0;
}
}
.stash {
grid-area: stash;
display: grid;
@@ -85,37 +52,26 @@
grid-gap: 0.5em 1em;
align-items: center;
border: 0.1em solid @gray;
border: 0.15em solid @gray;
border-left: 0;
}
.stash-hdr {
grid-area: stash-hdr;
display: flex;
flex-flow: column;
justify-content: center;
grid-area: stash-hdr;
text-align: center;
border: 0.1em solid @gray;
border: 0.15em solid @gray;
border-right: 0;
h3 {
margin-bottom: 2.5em;
h2 {
margin-bottom: 0.5em;
}
}
.refund {
padding: 0.5em 0.5em 0 0;
button {
line-height: 1.4;
letter-spacing: 0.1em;
color: black;
background-color: @yellow;
}
.vbox-padding {
padding-left: 0;
line-height: 1.6;
letter-spacing: 0.15em;
}
}
@@ -178,14 +134,17 @@
width: 100%;
// text-transform: none;
&.empty {
border-style: dashed;
}
&.fade {
opacity: 0.4;
}
&.highlight {
color: black;
background: @white;
background: @silver;
// border: 1px solid @white; (this bangs around the vbox)
// overwrite the classes on white svg elements
@@ -210,6 +169,127 @@
line-height: initial;
}
}
.info {
line-height: 1.6;
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;
}
margin-left: 1em;
grid-area: info;
display: grid;
grid-template-columns: 1fr min-content;
grid-template-areas:
"details combos";
.info-details {
grid-area: details;
display: grid;
grid-template-rows: 1fr min-content;
grid-template-areas:
"item"
"combiner";
.combiner {
grid-area: combiner;
display: flex;
width: 60%;
button {
margin-top: 1em;
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
&:hover {
border: 2px solid @gray-hover;
}
}
}
.info-item {
grid-area: item;
}
}
.combos {
display: grid;
grid-area: combos;
margin-left: 0.5em;
grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
text-align: center;
}
.combo-list {
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.table-button {
display: grid;
text-align: center;
align-content: center;
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;
div {
width: 5em;
}
}
div {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
}
}
}
}
}
}
@media (min-width: 2000px) {