X-Git-Url: https://gitweb.ps.run/lolstats/blobdiff_plain/7aecc11333eeff555614048d16b4073ce65f7812..f90d1d07b1f0042f66d924596ec6e2370ad97b2c:/html/style.css

diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..6145c2d
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,217 @@
+body {
+  font-family: "Noto Sans SC", sans-serif;
+  font-weight: bold;
+  padding: 0px;
+  margin: 0px;
+}
+
+#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;
+  margin: 7px;
+  left: calc(50% - 7px);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  background-color: transparent;
+  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%;
+  color: white;
+  text-shadow: 1px 1px 40px black;
+  user-select: none;
+}
+
+#inputpanel {
+  width: calc(100% - 14px);
+  height: 7vmin;
+  font-size: 4.5vmin;
+  position: relative;
+  margin: 7px;
+}
+
+#matchhistory, #stats {
+  position: absolute;
+  font-size: 2.5vmin;
+  width: calc(100% - 14px);
+  min-height: calc(100% - (7vmin + 21px) - 14px);
+  margin: 7px;
+  top: calc(7vmin + 21px);
+  background-color: white;
+  border-radius: 4px;
+  text-align: center;
+}
+
+#historyfilters {
+  position: relative;
+  width: calc(100% - 14px);
+  height: calc(21vmin + 14px);
+  margin: 7px;
+}
+
+#matchlist {
+  width: calc(100% - 14px);
+  margin: 7px;
+  height: auto;
+}
+
+hr {
+  margin: 0;
+}
+
+select {
+  text-align: center;
+}
+
+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;
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  font-size: inherit;
+}
+
+button:hover {
+  background-color: #b41e1e;
+}
+
+.bottom-right {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+
+#regionselect {
+  text-transform: uppercase;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+
+#nameinput {
+  text-align: center;
+  border-bottom: 1px solid lightgray;
+  width: calc(100% - 36vmin);
+  height: 7vmin;
+  position: absolute;
+  left: 18vmin;
+  top: 0px;
+}
+
+#gobutton, #statsbutton, #historybutton {
+  position: absolute;
+  margin: 0px;
+  top: 0px;
+  right: 0px;
+  z-index: 1;
+}
+
+#refreshbutton {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+
+@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);
+  }
+}
+@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 */