changes

[lolstats] / html / style.css

diff --git a/html/style.css b/html/style.css
index 3c3cd0a075d5124e6780d40ba57aa79484c07783..b012d2216b44758541fa141e5ded86b5bbb8027f 100644 (file)
--- a/html/style.css
+++ b/html/style.css
@@ -1,11 +1,13 @@
 body {
   font-family: 'Noto Sans SC', sans-serif;
   font-weight: bold;
-  background-color: black;
-  width: 100%;
-  height: 100%;
   padding: 0px;
   margin: 0px;
+}
+#background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
   background-color: rgb(200, 50, 50);
   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
 }
@@ -25,9 +27,24 @@ input, select, button {
     width: calc(100% - 20px);
   }
 }
+@keyframes startdown {
+  100% {
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 65%;
+  }
+  0% {
+    top: 0%;
+    transform: translate(-50%, 0%);
+    width: calc(100% - 20px);
+  }
+}
 #start.slideup {
   animation: startup 0.3s forwards linear;
 }
+#start.slidedown {
+  animation: startdown 0.3s forwards linear;
+}
 #start.up {
   top: 0%;
   transform: translate(-50%, 0%);
@@ -101,8 +118,18 @@ input, select, button {
   left: 110px;
   top: 5px;
 }
-#gobutton {
-  position: relative;
+#gobutton, #statsbutton, #historybutton {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
+}
+#refreshbutton {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+}
+button {
   vertical-align: baseline;
   margin: 5px;
   width: 110px;
@@ -111,10 +138,6 @@ input, select, button {
   color: white;
   border-radius: 5px;
   outline: none;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
 }
 #gobutton:hover {
   background-color: rgba(180, 30, 30);
@@ -122,15 +145,13 @@ input, select, button {
 #matchhistory, #stats {
   position: absolute;
   width: calc(100% - 20px);
-  height: calc(100% - 90px - 10px);
-  left: 10px;
-  top: 90px;
+  min-height: calc(100% - 90px - 10px);
+  margin: 10px;
+  top: 80px;
   background-color: white;
   border-radius: 5px;
   text-align: center;  
-}
-#stats {
-  background-color: red;
+  overflow: visible;
 }
 .bottom-right {
   position: absolute;