From 9b52f8e63824d57d896efee53bc8e9abe624857c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Patrick=20Sch=C3=B6nberger?= Date: Mon, 10 Dec 2018 18:53:18 +0100 Subject: [PATCH] style.css --- html/style.css | 139 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 html/style.css diff --git a/html/style.css b/html/style.css new file mode 100644 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; +} -- 2.50.1