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