Commit | Line | Data |
---|---|---|
7a00c409 BA |
1 | /* General */ |
2 | ||
3 | @import '../vendor/Ubuntu_googlefont.css'; | |
4 | ||
2caa3889 BA |
5 | html, body { |
6 | height: 100%; | |
7 | } | |
8 | ||
7a00c409 BA |
9 | body { |
10 | font-family: Ubuntu, Verdana, sans-serif; | |
7a00c409 | 11 | margin: 0 auto; |
2caa3889 | 12 | width: 800px; |
7a00c409 BA |
13 | font-size: 1.1rem; |
14 | } | |
15 | ||
16 | .sidenav { | |
17 | height: 100%; | |
18 | width: 200px; | |
19 | position: fixed; | |
20 | z-index: 1; | |
21 | top: 0; | |
22 | left: 0; | |
23 | background-color: #111; | |
24 | overflow-x: hidden; | |
25 | padding: 20px 0 0 0; | |
26 | margin: 0; | |
27 | } | |
28 | ||
29 | @media screen and (max-height: 450px) { | |
30 | .sidenav {padding-top: 15px;} | |
31 | } | |
32 | ||
33 | .sidenav li { | |
34 | padding: 6px 8px 6px 16px; | |
35 | font-size: 25px; | |
36 | color: #818181; | |
37 | display: block; | |
38 | cursor: pointer; | |
39 | } | |
40 | ||
41 | .sidenav li:hover { | |
42 | color: #f1f1f1; | |
43 | } | |
44 | ||
2caa3889 BA |
45 | img.logo { |
46 | width: 200px; | |
47 | position: fixed; | |
48 | display: block; | |
49 | left: 0; | |
50 | overflow-x: hidden; | |
51 | padding: 20px 0 0 0; | |
52 | margin: 0; | |
53 | top: 350px; | |
54 | z-index: 10; | |
55 | } | |
56 | ||
7a00c409 BA |
57 | .main { |
58 | margin-left: 200px; /* Same as the width of the sidenav */ | |
59 | padding: 0px 10px; | |
60 | } | |
61 | ||
62 | .btn { | |
63 | background-color: #3498db; | |
64 | background-image: linear-gradient(to bottom, #3498db, #2980b9); | |
65 | box-shadow: 0px 2px 3px #666666; | |
66 | font-family: Arial; | |
67 | color: #ffffff; | |
68 | font-size: 20px; | |
69 | padding: 10px 20px 10px 20px; | |
70 | text-decoration: none; | |
71 | } | |
72 | ||
73 | .btn:hover { | |
74 | background-color: #3cb0fd; | |
75 | background-image: linear-gradient(to bottom, #3cb0fd, #3498db); | |
76 | text-decoration: none; | |
77 | } | |
78 | ||
79 | table th { | |
80 | font-weight: bold; | |
81 | } | |
82 | ||
1369a09d BA |
83 | .left, .right { |
84 | float: left; | |
85 | width: 50%; | |
86 | } | |
87 | ||
88 | .button-container-horizontal, .button-container-vertical { | |
89 | margin-top: 30px; | |
90 | text-align: center; | |
91 | } | |
92 | .button-container-vertical { | |
93 | float: left; | |
94 | } | |
95 | /* All children except first: margin: 30px */ | |
96 | .button-container-horizontal .btn:not(:first-child) { | |
97 | margin-right: 30px; | |
98 | } | |
99 | .button-container-vertical .btn { | |
100 | display: block; | |
101 | margin-left: 30px; | |
102 | } | |
103 | .button-container-vertical .btn:not(:first-child) { | |
104 | margin-top: 15px; | |
105 | } | |
106 | ||
107 | button.validate { | |
108 | background-image: linear-gradient(to bottom, #6fa162, #40992e); | |
109 | } | |
110 | button.validate:hover { | |
111 | background-image: linear-gradient(to bottom, #37cc4e, #40c24f); | |
112 | } | |
113 | button.cancel { | |
114 | background-image: linear-gradient(to bottom, #d93470, #b82b47); | |
115 | } | |
116 | button.cancel:hover { | |
117 | background-image: linear-gradient(to bottom, #fc433c, #d93434); | |
118 | } | |
119 | ||
7a00c409 BA |
120 | /* players div */ |
121 | ||
122 | #players { | |
123 | overflow: auto; | |
fd4a69e4 | 124 | margin-bottom: 15px; |
7a00c409 BA |
125 | } |
126 | ||
127 | #players p { | |
128 | font-weight: bold; | |
129 | text-align: center; | |
130 | } | |
131 | ||
7a00c409 BA |
132 | #inactive table { |
133 | opacity: 0.6; | |
134 | } | |
135 | ||
136 | table.list { | |
137 | border-collapse: collapse; | |
138 | width: 400px; | |
139 | margin: 0 auto; | |
140 | table-layout: fixed; | |
141 | font-size: 1.1rem; | |
142 | cursor: pointer; | |
143 | } | |
144 | ||
145 | table.list td | |
146 | { | |
147 | border: 1px solid #ddd; | |
148 | padding: 10px; | |
149 | } | |
150 | table.list th { | |
151 | padding: 1em 10px; | |
152 | text-align: left; | |
153 | } | |
154 | ||
155 | table.list tr:not(.title) { | |
156 | background-color: #aaa; | |
157 | } | |
158 | table.list tr:not(.title):nth-child(even){ | |
159 | background-color: #ccc; | |
160 | } | |
161 | table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
162 | background-color: lightyellow; | |
163 | } | |
164 | ||
165 | /* ranking div */ | |
166 | ||
fd4a69e4 BA |
167 | #ranking { |
168 | margin-bottom: 15px; | |
1369a09d | 169 | overflow: auto; |
fd4a69e4 BA |
170 | } |
171 | ||
7a00c409 BA |
172 | table.ranking { |
173 | border-collapse: collapse; | |
174 | width: 500px; | |
175 | margin: 0 auto; | |
176 | font-size: 1.1rem; | |
1369a09d BA |
177 | display: block; |
178 | float: left; | |
7a00c409 BA |
179 | } |
180 | ||
181 | table.ranking td | |
182 | { | |
183 | border: 1px solid #ddd; | |
184 | padding: 10px; | |
185 | } | |
186 | table.ranking th { | |
187 | padding: 1em 10px; | |
188 | text-align: left; | |
189 | } | |
190 | ||
191 | table.ranking tr:not(.title) { | |
192 | background-color: #aaa; | |
193 | } | |
194 | table.ranking tr:not(.title):nth-child(even){ | |
195 | background-color: #ccc; | |
196 | } | |
197 | table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
198 | background-color: lightyellow; | |
199 | } | |
200 | ||
7a00c409 BA |
201 | /* pairings div */ |
202 | ||
1369a09d BA |
203 | .warning { |
204 | color: red; | |
205 | margin-top: 25px; | |
7a00c409 BA |
206 | } |
207 | ||
1369a09d BA |
208 | span.link { |
209 | color: darkblue; | |
210 | cursor: pointer; | |
7a00c409 BA |
211 | } |
212 | ||
1369a09d BA |
213 | button.block { |
214 | display: block; | |
215 | margin: 25px auto; | |
7a00c409 BA |
216 | } |
217 | ||
fd4a69e4 BA |
218 | .toto { |
219 | color: darkgrey; | |
220 | } | |
221 | ||
7a00c409 BA |
222 | .scored { |
223 | background-color: lightgreen; | |
224 | } | |
225 | ||
226 | #pairings p { | |
227 | font-weight: bold; | |
228 | } | |
229 | ||
230 | td.score { | |
231 | padding-left: 30px; | |
232 | } | |
233 | ||
234 | .pairing { | |
235 | float: left; | |
236 | width: 47%; | |
237 | padding-left: 3%; | |
238 | padding-bottom: 10px; | |
239 | cursor: pointer; | |
240 | } | |
241 | .unpaired { | |
242 | cursor: default; | |
243 | } | |
7a00c409 BA |
244 | |
245 | .pairing > table { | |
246 | font-size: 1.1rem; | |
247 | } | |
248 | ||
249 | .pairing:hover:not(.scored) { | |
250 | background-color: yellow; | |
251 | } | |
252 | ||
253 | #scoreInput { | |
254 | margin: 30px 0; | |
255 | } | |
256 | ||
257 | #scoreInput table { | |
258 | width: 500px; | |
259 | margin: 0 auto; | |
260 | table-layout: fixed; | |
261 | font-size: 1.1rem; | |
262 | } | |
263 | ||
264 | #scoreInput table td {overflow:hidden;} | |
265 | ||
266 | #scoreInput table td:nth-of-type(2) {padding:0 10px;} | |
267 | #scoreInput table td:nth-of-type(3) {padding: 0 10px;} | |
268 | ||
269 | #scoreInput table td > input { | |
270 | padding: 0 3px; | |
271 | } | |
272 | ||
273 | #scoreInput table th { | |
274 | padding-bottom: 10px; | |
275 | } | |
2caa3889 BA |
276 | |
277 | /* Timer */ | |
278 | ||
279 | #timer { | |
280 | position: absolute; | |
281 | z-index: 100; | |
282 | left: 0; | |
283 | top: 0; | |
284 | min-height: 100%; | |
285 | width: 100%; | |
2caa3889 BA |
286 | background-color: white; |
287 | cursor: pointer; | |
288 | line-height: 100%; | |
48b3a536 BA |
289 | text-align: center; |
290 | vertical-align: middle; | |
2caa3889 BA |
291 | } |
292 | ||
293 | .timeout { | |
294 | color: red; | |
295 | } | |
296 | ||
297 | img.close-cross { | |
298 | display: block; | |
299 | position: absolute; | |
300 | top: 0; | |
301 | right: 0; | |
302 | width: 30px; | |
303 | } |