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