X-Git-Url: https://gitweb.ps.run/lolstats/blobdiff_plain/9b52f8e63824d57d896efee53bc8e9abe624857c..853f585acf864128571b4c01946d54aa0cba39c5:/html/style.css diff --git a/html/style.css b/html/style.css index 3c3cd0a..b012d22 100644 --- a/html/style.css +++ b/html/style.css @@ -1,11 +1,13 @@ body { font-family: 'Noto Sans SC', sans-serif; font-weight: bold; - background-color: black; - width: 100%; - height: 100%; padding: 0px; margin: 0px; +} +#background { + position: fixed; + width: 100%; + height: 100%; background-color: rgb(200, 50, 50); box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset; } @@ -25,9 +27,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 +118,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 +138,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); @@ -122,15 +145,13 @@ input, select, button { #matchhistory, #stats { position: absolute; width: calc(100% - 20px); - height: calc(100% - 90px - 10px); - left: 10px; - top: 90px; + min-height: calc(100% - 90px - 10px); + margin: 10px; + top: 80px; background-color: white; border-radius: 5px; text-align: center; -} -#stats { - background-color: red; + overflow: visible; } .bottom-right { position: absolute;