add context menu UI, fix misc. bugs

1 files changed, 76 insertions, 43 deletions

diff --git a/www/css/index.css b/www/css/index.css
index 09c818d..14d07ad 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -33,35 +33,6 @@ h2 {
   font-weight: bold;
 }
 
-/* input */
-label {
-  display: block;
-}
-.button, h2, label {
-  opacity: 0.4;
-}
-.button-disabled {
-  opacity: 0.1;
-}
-.button:not(.button-disabled):hover {
-  opacity: 1;
-}
-input[type="checkbox"] {
-  display: none;
-}
-input[type="checkbox"] + span:before {
-  display: inline-block;
-  height: 19px;
-  width: 20px;
-  content: "";
-  background-position: left bottom;
-  background-repeat: no-repeat;
-  background-image: url("../dump/ui/bt-cf-unchecked.png");
-}
-input[type="checkbox"]:checked + span:before {
-  background-image: url("../dump/ui/bt-cf-checked.png");
-}
-
 /* warnings */
 #warn-container {
   visibility: hidden;
@@ -118,6 +89,14 @@ html.no-js #gotit {
 #container {
   overflow: hidden;
 }
+#gray {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0, 0, 0);
+  opacity: 0.5;
+  z-index: 9;
+}
 #show {
   height: 100%;
 }
@@ -139,7 +118,7 @@ html.no-js #gotit {
   left: 12px;
   font-weight: bold;
 }
-.say {
+.say, #context-info {
   color: white;
 }
 #say {
@@ -149,17 +128,6 @@ html.no-js #gotit {
   top: 53px;
   left: 28px;
 }
-#gray {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(64, 64, 64);
-  background-color: rgba(64, 64, 64, 0.8);
-  z-index: 9;
-}
-#main-menu-buttons .button {
-  margin: 4px;
-}
 #nvl {
   position: absolute;
   top: 0;
@@ -187,16 +155,81 @@ html.no-js #gotit {
   bottom: 25px;
 }
 .centered {
-  width: 100%;
-  text-align: center;
   position: absolute;
   top: 0;
   bottom: 0;
   height: 0;
+  width: 100%;
   margin: auto;
+  text-align: center;
 }
 .choice {
   background: url("../dump/ui/bg-choice.png") no-repeat top center;
   height: 35px;
   line-height: 30px;
 }
+#context > div {
+  z-index: 20;
+}
+#context-menu {
+  background: url("../dump/ui/bg-gm.png") no-repeat top center;
+  margin-top: -210px;
+  padding-top: 60px;
+  position: absolute;
+  left: 50%;
+  height: 380px;
+  width: 200px;
+  margin-left: -100px;
+  top: 50%;
+}
+#context-menu .button {
+  padding: 1.5px;
+}
+#context-info {
+  font: 19px/22px Playtime;
+  position: absolute;
+  top: auto;
+  height: auto;
+  bottom: 10px;
+}
+
+/* main menu */
+#main-menu-buttons .button {
+  margin: 4px;
+}
+#version {
+  position: absolute;
+  bottom: 10px;
+  right: 15px;
+  font: 8px/8px Playtime;
+  opacity: 0.4;
+}
+
+/* input */
+label {
+  display: block;
+}
+.button, h2, label {
+  opacity: 0.4;
+}
+.button-disabled {
+  opacity: 0.1;
+}
+.button:not(.button-disabled):hover {
+  opacity: 1;
+}
+input[type="checkbox"] {
+  display: none;
+}
+input[type="checkbox"] + span:before {
+  display: inline-block;
+  height: 19px;
+  width: 20px;
+  content: "";
+  background-position: left bottom;
+  background-repeat: no-repeat;
+  background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"]:checked + span:before {
+  background-image: url("../dump/ui/bt-cf-checked.png");
+}