]> gitweb.ps.run Git - lolstats/blob - html/style.css
dc31ed556bf293af574164236522dcbf682485cf
[lolstats] / html / style.css
1 body {
2   font-family: 'Noto Sans SC', sans-serif;
3   font-weight: bold;
4   background-color: black;
5   width: 100%;
6   height: 100%;
7   padding: 0px;
8   margin: 0px;
9   background-color: rgb(200, 50, 50);
10   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
11 }
12 input, select, button {
13   font-size:inherit;
14   border: none;
15 }
16 @keyframes startup {
17   0% {
18     top: 50%;
19     transform: translate(-50%, -50%);
20     width: 65%;
21   }
22   100% {
23     top: 0%;
24     transform: translate(-50%, 0%);
25     width: calc(100% - 20px);
26   }
27 }
28 @keyframes startdown {
29   100% {
30     top: 50%;
31     transform: translate(-50%, -50%);
32     width: 65%;
33   }
34   0% {
35     top: 0%;
36     transform: translate(-50%, 0%);
37     width: calc(100% - 20px);
38   }
39 }
40 #start.slideup {
41   animation: startup 0.3s forwards linear;
42 }
43 #start.slidedown {
44   animation: startdown 0.3s forwards linear;
45 }
46 #start.up {
47   top: 0%;
48   transform: translate(-50%, 0%);
49   width: calc(100% - 20px);
50 }
51 #start.down {
52   top: 50%;
53   transform: translate(-50%, -50%);
54   width: 65%;
55 }
56 #start {
57   position: absolute;
58   width: 65%;
59   left: 50%;
60   top: 50%;
61   transform: translate(-50%, -50%);
62   padding: 10px;
63   text-align: center;
64   background-color: transparent;
65   font-size: 5rem;
66 }
67 #title {
68   width: 100%;
69   color: white;
70   text-shadow: 1px 1px 40px black;
71   user-select: none;
72 }
73 #inputpanel {
74   border-radius: 5px;
75   width: calc(100% - 20px);
76   height: 50px;
77   background-color: white;
78   padding: 10px;
79   box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
80   font-size: 2rem;
81   position: relative;
82 }
83 #regionselect {
84   width: 110px;
85   height: 50px;
86   position: relative;
87   top: 0px;
88   padding: 0px 0px 0px 10px;
89   margin: 5px;
90   text-align: center;
91   background-color: rgb(200, 50, 50);
92   color: white;
93   border-radius: 5px;
94   border: none;
95   outline: none;
96   text-transform: uppercase;
97   position: absolute;
98   left: 5px;
99   top: 5px;
100   z-index: 1;
101 }
102 #regionselect:hover {
103   background-color: rgb(180, 30, 30);
104 }
105 #regionselect>option {
106   background-color: rgb(200, 50, 50);
107 }
108 #nameinput {
109   text-align: center;
110   border-bottom: 1px solid lightgray;
111   outline: none;
112   margin: 5px;
113   width: calc(100% - 220px - 10px);
114   height: 50px;
115   position: absolute;
116   left: 110px;
117   top: 5px;
118 }
119 #gobutton, #statsbutton, #historybutton {
120   position: absolute;
121   top: 5px;
122   right: 5px;
123   z-index: 1;
124 }
125 #refreshbutton {
126   position: absolute;
127   right: 5px;
128   bottom: 5px;
129 }
130 button {
131   vertical-align: baseline;
132   margin: 5px;
133   width: 110px;
134   height: 50px;
135   background-color: rgb(200, 50, 50);
136   color: white;
137   border-radius: 5px;
138   outline: none;
139 }
140 #gobutton:hover {
141   background-color: rgba(180, 30, 30);
142 }
143 #matchhistory, #stats {
144   position: absolute;
145   width: calc(100% - 20px);
146   height: calc(100% - 90px - 10px);
147   left: 10px;
148   top: 90px;
149   background-color: white;
150   border-radius: 5px;
151   text-align: center;   
152 }
153 .bottom-right {
154   position: absolute;
155   right: 0px;
156   bottom: 0px;
157 }