fix remaining px borders

This commit is contained in:
ntr 2019-11-24 23:08:35 +11:00
parent 8b7003fb32
commit 4df4f3a785
6 changed files with 102 additions and 105 deletions

View File

@ -44,7 +44,7 @@
} }
&[disabled] { &[disabled] {
border: 1px solid @yellow; border: 0.1em solid @yellow;
color: @yellow; color: @yellow;
background: black; background: black;
} }

View File

@ -150,13 +150,13 @@ aside {
&:hover { &:hover {
color: @red; color: @red;
border-color: @red; border-color: @red;
border: 2px solid @red; border: 0.1em solid @red;
}; };
&:active, &.confirming { &:active, &.confirming {
background: @red; background: @red;
color: black; color: black;
border: 2px solid @red; border: 0.1em solid @red;
} }
} }
@ -164,7 +164,7 @@ aside {
&:active, &.confirming { &:active, &.confirming {
background: @gray-hover; background: @gray-hover;
color: black; color: black;
border: 2px solid @gray-hover; border: 0.1em solid @gray-hover;
} }
} }

View File

@ -40,7 +40,7 @@
"stats "; "stats ";
/*padding: 0.5em;*/ /*padding: 0.5em;*/
border: 2px solid #222; border: 0.1em solid #222;
border-left-width: 0; border-left-width: 0;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;

View File

@ -74,7 +74,7 @@
button { button {
flex: 1; flex: 1;
border-top: 0; border-top: 0;
border: 2px solid #222; border: 0.1em solid #222;
&:not(:last-child) { &:not(:last-child) {
border-right: 0; border-right: 0;
} }

View File

@ -20,99 +20,10 @@
} }
} }
.info {
display: none;
.combos {
display: none;
}
}
svg { svg {
stroke-width: 1.25em; stroke-width: 1.25em;
} }
.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";
> div {
padding: 0.25em;
}
.info {
display: none;
}
.combos {
display: none;
}
.combiner {
margin: 0;
}
.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-columns: min-content min-content 1fr;
> * {
margin-right: 1em;
}
grid-template-areas:
"hdr bits btn";
h1 {
grid-area: hdr;
margin-bottom: 0.25em;
}
.bits {
grid-area: bits;
}
button {
grid-area: btn;
}
}
.store-hdr, .stash-hdr {
button {
margin: 0;
}
}
}
} }
.game { .game {
@ -286,7 +197,7 @@
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
button:not(:last-child) { button:not(:last-child) {
border: 2px solid #222; border: 0.1em solid #222;
} }
button.logo { button.logo {
@ -324,4 +235,90 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
} }
@media (max-width: 600px) {
.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";
> div {
padding: 0.25em;
}
.info {
display: none;
}
.combos {
display: none;
}
.combiner {
margin: 0;
}
.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-columns: min-content min-content 1fr;
> * {
margin-right: 1em;
}
grid-template-areas:
"hdr bits btn";
h1 {
grid-area: hdr;
margin-bottom: 0.25em;
}
.bits {
grid-area: bits;
}
button {
grid-area: btn;
}
}
.store-hdr, .stash-hdr {
button {
margin: 0;
}
}
}
}

View File

@ -116,7 +116,7 @@
&, &:hover, &:active { &, &:hover, &:active {
background: @red; background: @red;
color: black; color: black;
border: 2px solid black; border: 0.1em solid black;
} }
} }
svg { svg {
@ -207,9 +207,9 @@
line-height: 1.3; line-height: 1.3;
font-size: 1.25em; font-size: 1.25em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
border: 2px solid @gray-exists; border: 0.1em solid @gray-exists;
&:hover { &:hover {
border: 2px solid @gray-hover; border: 0.1em solid @gray-hover;
} }
} }
@ -273,8 +273,8 @@
} }
.item { .item {
border-top: 2px solid #222; border-top: 0.1em solid #222;
border-bottom: 2px solid #222; border-bottom: 0.1em solid #222;
flex: 1; flex: 1;
grid-area: item; grid-area: item;
font-weight: bold; font-weight: bold;
@ -285,15 +285,15 @@
div { div {
border-left: 2px solid #222; border-left: 0.1em solid #222;
border-right: 2px solid #222; border-right: 0.1em solid #222;
height: 1.75em; height: 1.75em;
width: 7.5em; width: 7.5em;
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
&:last-child { &:last-child {
border-bottom: 2px solid #222; border-bottom: 0.1em solid #222;
} }
} }
} }