magicworld

testing/magicworld/web/css/game.css

@@ -0,0 +1,91 @@
+body{
+  background-color: black;  
+  overflow: hidden;
+  font-family: 'komtit';
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+#loading{
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(/img/logos/sword2.png);
+  background-position-x: 50%;
+  background-position-y: 50%;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  animation-name: rotate;
+  animation-duration:2s;
+  animation-iteration-count:infinite;
+  animation-timing-function:linear;  
+}
+
+@keyframes rotate {
+  from {-webkit-transform:rotate(0deg);}
+  to {  -webkit-transform:rotate(360deg);}
+}
+
+.guiContanier{
+  position: fixed;
+  z-index: 1;
+  background: gray;
+  padding: 5px;
+  border: 2px solid black;
+  opacity: 0.6;  
+  filter: alpha(opacity=60); /* For IE8 and earlier */
+}
+
+.guiContanier:hover{
+  opacity: 1;
+  filter: alpha(opacity=100); /* For IE8 and earlier */
+}
+
+#chat{
+  width: 20vw;
+  min-width: 257px;
+  bottom: 20px;
+  left: 20px;
+}
+
+#chatOutput{
+  margin-bottom: 5px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  word-break: break-all;
+  height: 20vh;
+}
+
+
+.output{
+  width: 100%;      
+  font-family: "oswald";
+  font-size: 14px;
+}
+
+#score{
+  width: 15vw;
+  min-width: 144px;
+  top: 20px;
+  right: 20px;
+}
+#scoreOutput{
+  height: auto;
+  white-space: pre;
+}
+
+@media (max-width: 1000px) {
+  .guiContanier {
+    zoom: 0.5;
+  }
+
+  #score{
+    width: 50vw;
+  }
+}