views korrigiert

[lolstats] / html / style.css

diff --git a/html/style.css b/html/style.css
index 3c3cd0a075d5124e6780d40ba57aa79484c07783..a410d3f761dd3b2c65c2623ad3c7653e9245f7fd 100644 (file)
--- a/html/style.css
+++ b/html/style.css
@@ -8,6 +8,7 @@ body {
   margin: 0px;
   background-color: rgb(200, 50, 50);
   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
+  overflow: hidden;
 }
 input, select, button {
   font-size:inherit;
@@ -25,9 +26,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 +117,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 +137,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);
@@ -128,9 +150,7 @@ input, select, button {
   background-color: white;
   border-radius: 5px;
   text-align: center;  
-}
-#stats {
-  background-color: red;
+  overflow: visible;
 }
 .bottom-right {
   position: absolute;