update TODO
[westcastle.git] / css / index.css
... / ...
CommitLineData
1/* General */
2
3@import '../vendor/Ubuntu_googlefont.css';
4
5body {
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
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
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
83button.block {
84 display: block;
85 margin: 25px auto;
86}
87
88table 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
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
129button: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
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
179/* pairings div */
180
181.warning {
182 color: red;
183 margin-top: 25px;
184}
185
186span.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
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}
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
277img.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
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}