Finish temporary TODO - last version before 'matoso2'
[westcastle.git] / css / index.css
CommitLineData
7a00c409
BA
1/* General */
2
3@import '../vendor/Ubuntu_googlefont.css';
4
5body {
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
41img.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 {
7a00c409
BA
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;
48bee368 75 cursor: pointer;
7a00c409
BA
76}
77
78.btn:hover {
7a00c409
BA
79 background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
80 text-decoration: none;
81}
82
48bee368
BA
83button.block {
84 display: block;
85 margin: 25px auto;
86}
87
7a00c409
BA
88table th {
89 font-weight: bold;
90}
91
1369a09d
BA
92.left, .right {
93 float: left;
94 width: 50%;
95}
96
97.button-container-horizontal, .button-container-vertical {
48bee368 98 margin: 15px 0;
1369a09d
BA
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) {
6d7bb9ad 106 margin-left: 30px;
1369a09d
BA
107}
108.button-container-vertical .btn {
109 display: block;
110 margin-left: 30px;
111}
112.button-container-vertical .btn:not(:first-child) {
6d7bb9ad 113 margin-top: 30px;
1369a09d
BA
114}
115
116button.validate {
117 background-image: linear-gradient(to bottom, #6fa162, #40992e);
118}
119button.validate:hover {
120 background-image: linear-gradient(to bottom, #37cc4e, #40c24f);
121}
122button.cancel {
123 background-image: linear-gradient(to bottom, #d93470, #b82b47);
124}
125button.cancel:hover {
126 background-image: linear-gradient(to bottom, #fc433c, #d93434);
127}
128
aa6ce1d0
BA
129button:disabled, button:disabled:hover {
130 background-image: linear-gradient(to bottom, #aaa, #777);
131 cursor: default;
132}
133
7a00c409
BA
134/* players div */
135
136#players {
137 overflow: auto;
fd4a69e4 138 margin-bottom: 15px;
7a00c409
BA
139}
140
141#players p {
142 font-weight: bold;
143 text-align: center;
144}
145
7a00c409
BA
146#inactive table {
147 opacity: 0.6;
148}
149
150table.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
159table.list td
160{
161 border: 1px solid #ddd;
162 padding: 10px;
163}
164table.list th {
165 padding: 1em 10px;
166 text-align: left;
167}
168
169table.list tr:not(.title) {
170 background-color: #aaa;
171}
172table.list tr:not(.title):nth-child(even){
173 background-color: #ccc;
174}
175table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
176 background-color: lightyellow;
177}
178
7a00c409
BA
179/* pairings div */
180
1369a09d
BA
181.warning {
182 color: red;
183 margin-top: 25px;
7a00c409
BA
184}
185
1369a09d
BA
186span.link {
187 color: darkblue;
188 cursor: pointer;
7a00c409
BA
189}
190
fd4a69e4
BA
191.toto {
192 color: darkgrey;
193}
194
7a00c409
BA
195.scored {
196 background-color: lightgreen;
197}
198
199#pairings p {
200 font-weight: bold;
201}
202
203td.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}
7a00c409
BA
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}
2caa3889 249
8d4d2300 250/* Timer (dimensions given in javascript) */
2caa3889
BA
251
252#timer {
253 position: absolute;
254 z-index: 100;
255 left: 0;
256 top: 0;
2caa3889
BA
257 background-color: white;
258 cursor: pointer;
48b3a536 259 text-align: center;
2caa3889
BA
260}
261
262.timeout {
496ab82e
BA
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;
2caa3889
BA
275}
276
277img.close-cross {
278 display: block;
279 position: absolute;
280 top: 0;
281 right: 0;
282 width: 30px;
283}
48bee368
BA
284
285/* ranking div */
286
287#ranking {
288 margin-bottom: 15px;
289 overflow: auto;
290}
291
292table.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
301table.ranking td
302{
303 border: 1px solid #ddd;
304 padding: 10px;
305}
306table.ranking th {
307 padding: 1em 10px;
308 text-align: left;
309}
310
311table.ranking tr:not(.title) {
312 background-color: #aaa;
313}
314table.ranking tr:not(.title):nth-child(even){
315 background-color: #ccc;
316}
317table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
318 background-color: lightyellow;
319}