style.css

diff --git a/html/style.css b/html/style.css
new file mode 100644 (file)
index 0000000..3c3cd0a
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,139 @@
+body {
+  font-family: 'Noto Sans SC', sans-serif;
+  font-weight: bold;
+  background-color: black;
+  width: 100%;
+  height: 100%;
+  padding: 0px;
+  margin: 0px;
+  background-color: rgb(200, 50, 50);
+  box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
+}
+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);
+  }
+}
+#start.slideup {
+  animation: startup 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%;
+}
+#start {
+  position: absolute;
+  width: 65%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+  text-align: center;
+  background-color: transparent;
+  font-size: 5rem;
+}
+#title {
+  width: 100%;
+  color: white;
+  text-shadow: 1px 1px 40px black;
+  user-select: none;
+}
+#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;
+  position: relative;
+}
+#regionselect {
+  width: 110px;
+  height: 50px;
+  position: relative;
+  top: 0px;
+  padding: 0px 0px 0px 10px;
+  margin: 5px;
+  text-align: center;
+  background-color: rgb(200, 50, 50);
+  color: white;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  text-transform: uppercase;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  z-index: 1;
+}
+#regionselect:hover {
+  background-color: rgb(180, 30, 30);
+}
+#regionselect>option {
+  background-color: rgb(200, 50, 50);
+}
+#nameinput {
+  text-align: center;
+  border-bottom: 1px solid lightgray;
+  outline: none;
+  margin: 5px;
+  width: calc(100% - 220px - 10px);
+  height: 50px;
+  position: absolute;
+  left: 110px;
+  top: 5px;
+}
+#gobutton {
+  position: relative;
+  vertical-align: baseline;
+  margin: 5px;
+  width: 110px;
+  height: 50px;
+  background-color: rgb(200, 50, 50);
+  color: white;
+  border-radius: 5px;
+  outline: none;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
+}
+#gobutton:hover {
+  background-color: rgba(180, 30, 30);
+}
+#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;  
+}
+#stats {
+  background-color: red;
+}
+.bottom-right {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}