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