body {
- font-family: 'Noto Sans SC', sans-serif;
+ 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);
- }
-}
-@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;
- width: 65%;
- left: 50%;
+ margin: 7px;
+ left: calc(50% - 7px);
top: 50%;
transform: translate(-50%, -50%);
- padding: 10px;
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%;
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;
+ width: calc(100% - 14px);
+ height: 7vmin;
+ font-size: 4.5vmin;
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;
- 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;
- 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;
- border-radius: 5px;
+ border-radius: 4px;
border: none;
outline: none;
- text-transform: uppercase;
+ font-size: inherit;
+}
+
+button:hover {
+ background-color: #b41e1e;
+}
+
+.bottom-right {
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;
- outline: none;
- margin: 5px;
- width: calc(100% - 220px - 10px);
- height: 50px;
+ width: calc(100% - 36vmin);
+ height: 7vmin;
position: absolute;
- left: 110px;
- top: 5px;
+ left: 18vmin;
+ top: 0px;
}
+
#gobutton, #statsbutton, #historybutton {
position: absolute;
- top: 5px;
- right: 5px;
+ margin: 0px;
+ top: 0px;
+ right: 0px;
z-index: 1;
}
+
#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;
+
+@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 */
projects / lolstats / blobdiff