]> gitweb.ps.run Git - lolstats/blob - html/style.css
3c3cd0a075d5124e6780d40ba57aa79484c07783
[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 #start.slideup {
29   animation: startup 0.3s forwards linear;
30 }
31 #start.up {
32   top: 0%;
33   transform: translate(-50%, 0%);
34   width: calc(100% - 20px);
35 }
36 #start.down {
37   top: 50%;
38   transform: translate(-50%, -50%);
39   width: 65%;
40 }
41 #start {
42   position: absolute;
43   width: 65%;
44   left: 50%;
45   top: 50%;
46   transform: translate(-50%, -50%);
47   padding: 10px;
48   text-align: center;
49   background-color: transparent;
50   font-size: 5rem;
51 }
52 #title {
53   width: 100%;
54   color: white;
55   text-shadow: 1px 1px 40px black;
56   user-select: none;
57 }
58 #inputpanel {
59   border-radius: 5px;
60   width: calc(100% - 20px);
61   height: 50px;
62   background-color: white;
63   padding: 10px;
64   box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
65   font-size: 2rem;
66   position: relative;
67 }
68 #regionselect {
69   width: 110px;
70   height: 50px;
71   position: relative;
72   top: 0px;
73   padding: 0px 0px 0px 10px;
74   margin: 5px;
75   text-align: center;
76   background-color: rgb(200, 50, 50);
77   color: white;
78   border-radius: 5px;
79   border: none;
80   outline: none;
81   text-transform: uppercase;
82   position: absolute;
83   left: 5px;
84   top: 5px;
85   z-index: 1;
86 }
87 #regionselect:hover {
88   background-color: rgb(180, 30, 30);
89 }
90 #regionselect>option {
91   background-color: rgb(200, 50, 50);
92 }
93 #nameinput {
94   text-align: center;
95   border-bottom: 1px solid lightgray;
96   outline: none;
97   margin: 5px;
98   width: calc(100% - 220px - 10px);
99   height: 50px;
100   position: absolute;
101   left: 110px;
102   top: 5px;
103 }
104 #gobutton {
105   position: relative;
106   vertical-align: baseline;
107   margin: 5px;
108   width: 110px;
109   height: 50px;
110   background-color: rgb(200, 50, 50);
111   color: white;
112   border-radius: 5px;
113   outline: none;
114   position: absolute;
115   top: 5px;
116   right: 5px;
117   z-index: 1;
118 }
119 #gobutton:hover {
120   background-color: rgba(180, 30, 30);
121 }
122 #matchhistory, #stats {
123   position: absolute;
124   width: calc(100% - 20px);
125   height: calc(100% - 90px - 10px);
126   left: 10px;
127   top: 90px;
128   background-color: white;
129   border-radius: 5px;
130   text-align: center;   
131 }
132 #stats {
133   background-color: red;
134 }
135 .bottom-right {
136   position: absolute;
137   right: 0px;
138   bottom: 0px;
139 }