UI update for map with sector selector

[browser-rts.git] / public / scifi.css

diff --git a/public/scifi.css b/public/scifi.css
index 2aa04852608cf1c96f1bab8f2440f7856826cde4..c9e6da2846c542ae82b65f88737a01f10fb671b1 100644 (file)
--- a/public/scifi.css
+++ b/public/scifi.css
@@ -4,6 +4,7 @@
     --page-bg: #061619;
     --green-bg: #193818;
     --green-border: #32821c;
+    --red-border: #821c1c;
 }
 
 input {
@@ -89,7 +90,7 @@ button::after, .btn::after {
 }
 .danger {
     background-color: #381818;
-    border-color: #821c1c;
+    border-color: var(--red-border);
 }
 .danger::after {
     color: #821c1c
@@ -249,4 +250,48 @@ form > div {
     padding: 10px 25px;
     background-color: var(--page-bg);
     justify-content: space-evenly;
-}
\ No newline at end of file
+}
+
+#overworld-map {
+  width: auto;
+  margin: 0 auto;
+}
+#overworld-map td {
+    overflow: hidden;
+    padding: 0;
+    background: transparent;
+    border: solid 1px #000;
+}
+#overworld-map td div {
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+}
+
+#overworld-map td div.city {
+    cursor: pointer;
+}
+#overworld-map td div.city.yours {
+  border: solid 1px var(--green-border);
+}
+#overworld-map td div.city.yours img {
+  width: 100%;
+}
+#overworld-map td div.city.others {
+  border: solid 1px var(--red-border);
+}
+#overworld-map td div.city.others img {
+  width: 100%;
+}
+
+#overworld-map .grid-numbers {
+  color: #7b7b7b;
+  text-align: center;
+}
+
+#sector-selector {
+  margin: 20px 50px;
+}
+#sector-selector select {
+  margin-left: 20px;
+}