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