From 4df4f3a785ffb55eda7cb77c035ef47b530fef43 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 23:08:35 +1100 Subject: [PATCH] fix remaining px borders --- client/assets/styles/account.less | 2 +- client/assets/styles/controls.less | 6 +- client/assets/styles/instance.less | 2 +- client/assets/styles/menu.less | 2 +- client/assets/styles/styles.mobile.less | 179 ++++++++++++------------ client/assets/styles/vbox.less | 16 +-- 6 files changed, 102 insertions(+), 105 deletions(-) diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index a52e6e5b..c920c8dc 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -44,7 +44,7 @@ } &[disabled] { - border: 1px solid @yellow; + border: 0.1em solid @yellow; color: @yellow; background: black; } diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 9fb1cd13..a5938475 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -150,13 +150,13 @@ aside { &:hover { color: @red; border-color: @red; - border: 2px solid @red; + border: 0.1em solid @red; }; &:active, &.confirming { background: @red; color: black; - border: 2px solid @red; + border: 0.1em solid @red; } } @@ -164,7 +164,7 @@ aside { &:active, &.confirming { background: @gray-hover; color: black; - border: 2px solid @gray-hover; + border: 0.1em solid @gray-hover; } } diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index fa1e1485..52ad8fea 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -40,7 +40,7 @@ "stats "; /*padding: 0.5em;*/ - border: 2px solid #222; + border: 0.1em solid #222; border-left-width: 0; &:first-child { margin-left: 0; diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 1ce06f73..e197781e 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -74,7 +74,7 @@ button { flex: 1; border-top: 0; - border: 2px solid #222; + border: 0.1em solid #222; &:not(:last-child) { border-right: 0; } diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index fa246be1..9fa19971 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -20,99 +20,10 @@ } } - .info { - display: none; - .combos { - display: none; - } - } svg { 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 { @@ -286,7 +197,7 @@ grid-template-columns: repeat(2, 1fr); button:not(:last-child) { - border: 2px solid #222; + border: 0.1em solid #222; } button.logo { @@ -324,4 +235,90 @@ grid-template-columns: 1fr; } } -} \ No newline at end of file +} + +@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; + } + } + } +} diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 890c1431..88ec13fc 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -116,7 +116,7 @@ &, &:hover, &:active { background: @red; color: black; - border: 2px solid black; + border: 0.1em solid black; } } svg { @@ -207,9 +207,9 @@ line-height: 1.3; font-size: 1.25em; letter-spacing: 0.1em; - border: 2px solid @gray-exists; + border: 0.1em solid @gray-exists; &:hover { - border: 2px solid @gray-hover; + border: 0.1em solid @gray-hover; } } @@ -273,8 +273,8 @@ } .item { - border-top: 2px solid #222; - border-bottom: 2px solid #222; + border-top: 0.1em solid #222; + border-bottom: 0.1em solid #222; flex: 1; grid-area: item; font-weight: bold; @@ -285,15 +285,15 @@ div { - border-left: 2px solid #222; - border-right: 2px solid #222; + border-left: 0.1em solid #222; + border-right: 0.1em solid #222; height: 1.75em; width: 7.5em; svg { vertical-align: middle; } &:last-child { - border-bottom: 2px solid #222; + border-bottom: 0.1em solid #222; } } }