changes

[lolstats] / html / style.css

diff --git a/html/style.css b/html/style.css
index a410d3f761dd3b2c65c2623ad3c7653e9245f7fd..78f746a548cc2c3c3b28413ac4273365fe82d8fe 100644 (file)
--- a/html/style.css
+++ b/html/style.css
@@ -1,69 +1,40 @@
 body {
 body {

-  font-family: 'Noto Sans SC', sans-serif;
+  font-family: "Noto Sans SC", sans-serif;

   font-weight: bold;
   font-weight: bold;

-  background-color: black;
-  width: 100%;
-  height: 100%;

   padding: 0px;
   margin: 0px;
   padding: 0px;
   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;
-  border: none;
-}
-@keyframes startup {
-  0% {
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 65%;
-  }
-  100% {
-    top: 0%;
-    transform: translate(-50%, 0%);
-    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%);
-  width: calc(100% - 20px);
-}
-#start.down {
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 65%;
+
+#background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: #c83232;
+  box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;

 }
 }

+

 #start {
   position: absolute;
 #start {
   position: absolute;

-  width: 65%;
-  left: 50%;
+  margin: 7px;
+  left: calc(50% - 7px);

   top: 50%;
   transform: translate(-50%, -50%);
   top: 50%;
   transform: translate(-50%, -50%);

-  padding: 10px;

   text-align: center;
   background-color: transparent;
   text-align: center;
   background-color: transparent;

-  font-size: 5rem;
+  border-radius: 4px;
+  background-color: white;
+  box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
+}
+
+@media only screen and (orientation: landscape) {
+  #start {
+    width: 65%;
+  }
+}
+@media only screen and (orientation: portrait) {
+  #start {
+    width: 85%;
+  }

 }
 #title {
   width: 100%;
 }
 #title {
   width: 100%;


@@ -71,89 +42,197 @@ input, select, button {
   text-shadow: 1px 1px 40px black;
   user-select: none;
 }
   text-shadow: 1px 1px 40px black;
   user-select: none;
 }

+

 #inputpanel {
 #inputpanel {

-  border-radius: 5px;
-  width: calc(100% - 20px);
-  height: 50px;
-  background-color: white;
-  padding: 10px;
-  box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
-  font-size: 2rem;
+  width: calc(100% - 14px);
+  height: 7vmin;
+  font-size: 4.5vmin;

   position: relative;
   position: relative;

+  margin: 7px;

 }
 }

-#regionselect {
-  width: 110px;
-  height: 50px;
+
+#matchhistory, #stats {
+  position: absolute;
+  font-size: 2.5vmin;
+  width: calc(100% - 14px);
+  height: calc(100% - (7vmin + 21px) - 14px);
+  margin: 7px;
+  top: calc(7vmin + 21px);
+  background-color: white;
+  border-radius: 4px;
+  text-align: center;
+}
+
+#historyfilters, #statsfilters {

   position: relative;
   position: relative;

-  top: 0px;
-  padding: 0px 0px 0px 10px;
-  margin: 5px;
+  width: calc(100% - 14px);
+  height: calc(21vmin + 14px);
+  margin: 7px;
+}
+
+#matchlist {
+  width: calc(100% - 14px);
+  height: calc(100% - 28px - 2px - (21vmin + 14px));
+  margin: 7px;
+  overflow: auto;
+}
+
+hr {
+  margin: 0;
+}
+
+select {

   text-align: center;
   text-align: center;

-  background-color: rgb(200, 50, 50);
+}
+
+select:hover {
+  background-color: #b41e1e;
+}
+
+select > option {
+  background-color: #c83232;
+}
+
+input {
+  border: none;
+  outline: none;
+  font-size: inherit;
+}
+
+button, select {
+  vertical-align: baseline;
+  width: 18vmin;
+  height: 7vmin;
+  background-color: #c83232;

   color: white;
   color: white;

-  border-radius: 5px;
+  border-radius: 4px;

   border: none;
   outline: none;
   border: none;
   outline: none;

-  text-transform: uppercase;
+  font-size: inherit;
+}
+
+button:hover {
+  background-color: #b41e1e;
+}
+
+.bottom-right {

   position: absolute;
   position: absolute;

-  left: 5px;
-  top: 5px;
-  z-index: 1;
+  right: 0px;
+  bottom: 0px;

 }
 }

-#regionselect:hover {
-  background-color: rgb(180, 30, 30);
+
+.championIcon {
+  width: 60px;
+  height: 60px;

 }
 }

-#regionselect>option {
-  background-color: rgb(200, 50, 50);
+
+#regionselect {
+  text-transform: uppercase;
+  position: absolute;
+  left: 0;
+  z-index: 1;

 }
 }

+

 #nameinput {
   text-align: center;
   border-bottom: 1px solid lightgray;
 #nameinput {
   text-align: center;
   border-bottom: 1px solid lightgray;

-  outline: none;
-  margin: 5px;
-  width: calc(100% - 220px - 10px);
-  height: 50px;
+  width: calc(100% - 36vmin);
+  height: 7vmin;

   position: absolute;
   position: absolute;

-  left: 110px;
-  top: 5px;
+  left: 18vmin;
+  top: 0px;

 }
 }

+

 #gobutton, #statsbutton, #historybutton {
   position: absolute;
 #gobutton, #statsbutton, #historybutton {
   position: absolute;

-  top: 5px;
-  right: 5px;
+  margin: 0px;
+  top: 0px;
+  right: 0px;

   z-index: 1;
 }
   z-index: 1;
 }

+

 #refreshbutton {
   position: absolute;
 #refreshbutton {
   position: absolute;

-  right: 5px;
-  bottom: 5px;
+  right: 0px;
+  bottom: 0px;

 }
 }

-button {
-  vertical-align: baseline;
-  margin: 5px;
-  width: 110px;
-  height: 50px;
-  background-color: rgb(200, 50, 50);
-  color: white;
-  border-radius: 5px;
-  outline: none;
+
+#champselect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: auto;
+  overflow: auto;
+  text-align: left;

 }
 }

-#gobutton:hover {
-  background-color: rgba(180, 30, 30);
+
+button.champselect {
+  width: 9vmin;
+  height: 3.5vmin;

 }
 }

-#matchhistory, #stats {
-  position: absolute;
-  width: calc(100% - 20px);
-  height: calc(100% - 90px - 10px);
-  left: 10px;
-  top: 90px;
-  background-color: white;
-  border-radius: 5px;
-  text-align: center;  
-  overflow: visible;
+
+@keyframes startup {
+  0% {
+    top: 50%;
+    transform: translate(-50%, -50%);
+    @media only screen and (orientation: landscape) {
+      width: 65%;
+    }
+    @media only screen and (orientation: portrait) {
+      width: 85%;
+    }
+  }
+  100% {
+    top: 0%;
+    transform: translate(-50%, 0%);
+    width: calc(100% - 14px);
+  }

 }
 }

-.bottom-right {
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
+@keyframes startdown {
+  100% {
+    top: 50%;
+    transform: translate(-50%, -50%);
+    @media only screen and (orientation: landscape) {
+      width: 65%;
+    }
+    @media only screen and (orientation: portrait) {
+      width: 85%;
+    }
+  }
+  0% {
+    top: 0%;
+    transform: translate(-50%, 0%);
+    width: calc(100% - 14px);
+  }
+}
+#start.slideup {
+  animation: startup 0.3s forwards linear;
+}
+
+#start.slidedown {
+  animation: startdown 0.3s forwards linear;
+}
+
+#start.up {
+  top: 0;
+  width: calc(100% - 14px);
+  transform: translate(-50%, 0%);
+}
+
+#start.down {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+@media only screen and (orientation: landscape) {
+  #start.down {
+    width: 65%;
+  }
+}
+@media only screen and (orientation: portrait) {
+  #start.down {
+    width: 85%;
+  }

 }
 }

+
+/*# sourceMappingURL=style.css.map */