Commit | Line | Data |
---|---|---|
86f3c2cd BA |
1 | /* CSS reset */ |
2 | *, | |
3 | *::before, | |
4 | *::after { | |
5 | box-sizing: border-box; | |
6 | margin: 0; | |
7 | padding: 0; | |
8 | border: 0; | |
9 | font-size: 100%; | |
10 | font: inherit; | |
11 | vertical-align: baseline; | |
12 | } | |
13 | ||
8022d544 BA |
14 | html { |
15 | height: 100%; | |
16 | } | |
41534b92 | 17 | body { |
8022d544 | 18 | height: 100%; |
41534b92 | 19 | margin: 0; |
41534b92 BA |
20 | background-color: #f8f8f8; |
21 | font-family: Arial, Verdana, Tahoma, sans-serif; | |
8022d544 BA |
22 | /* https://stackoverflow.com/a/24392249/12660887 */ |
23 | position: relative; | |
41534b92 | 24 | } |
86f3c2cd BA |
25 | main { |
26 | display: flex; | |
27 | flex-direction: column; | |
28 | justify-content: center; | |
29 | align-items: center; | |
30 | flex-wrap: nowrap; | |
31 | font-size: 1.25rem; | |
32 | } | |
5abaabb3 BA |
33 | h1 { |
34 | font-size: 2rem; | |
35 | font-weight: bold; | |
36 | text-align: center; | |
37 | display: block; | |
38 | margin: 10px 0; | |
39 | } | |
40 | h4 { | |
41 | font-size: 1.5rem; | |
42 | font-weight: bold; | |
43 | text-align: center; | |
44 | display: block; | |
45 | margin: 10px 0; | |
46 | color: darkgreen; | |
47 | } | |
48 | a { | |
49 | text-decoration: none; | |
50 | } | |
51 | .bold { | |
52 | font-weight: bold; | |
53 | } | |
54 | button { | |
55 | background-color: #757575; | |
56 | border: none; | |
57 | color: white; | |
58 | padding: 10px 15px; | |
59 | text-align: center; | |
60 | text-decoration: none; | |
61 | display: inline-block; | |
62 | font-size: 1em; | |
63 | cursor: pointer; | |
64 | border-radius: 20%; | |
65 | margin: 15px 0; | |
66 | } | |
67 | button:hover, button.block-btn:hover { | |
68 | background-color: #b11adc; | |
69 | } | |
70 | button.block-btn { | |
71 | display: block; | |
72 | background-color: #01786F; | |
73 | margin: 0 auto 30px auto; /*TODO: margin-bottom 20px ? */ | |
74 | font-size: 2rem; | |
75 | padding: 15px 32px; | |
76 | } | |
77 | button.cancel-something { | |
78 | background-color: darkred; | |
79 | display: block; | |
80 | margin-left: auto; | |
81 | margin-right: auto; | |
82 | } | |
83 | ||
84 | /* "Sticky footer" */ | |
85 | #footer { | |
86 | position: absolute; | |
87 | bottom: 0; | |
88 | left: 0; | |
89 | right: 0; | |
90 | height: 50px; | |
91 | text-align: center; | |
92 | } | |
93 | @media(max-height: 399px) { | |
94 | #footer { | |
95 | display: none; | |
96 | } | |
97 | } | |
98 | a.left-link { | |
99 | margin-right: 25px; | |
100 | } | |
101 | a.right-link { | |
102 | margin-left: 25px; | |
103 | } | |
104 | #footer a > img { | |
105 | height: 1.2em; | |
106 | display: inline-block; | |
107 | transform: translateY(3px); | |
108 | } | |
86f3c2cd BA |
109 | |
110 | main > div { | |
111 | margin-top: 25vh; | |
112 | min-height: 500px; | |
113 | min-width: 320px; | |
65c770d1 | 114 | } |
65c770d1 BA |
115 | #gameInfos { |
116 | max-width: 800px; | |
86f3c2cd | 117 | } |
cc2c7183 | 118 | @media(max-height: 800px) { |
af9c9be3 | 119 | #newGameForm, #gameInfos { |
86f3c2cd BA |
120 | margin-top: 30px; |
121 | } | |
122 | } | |
cc2c7183 BA |
123 | @media(max-width: 767px) { |
124 | main > div { | |
125 | padding: 0 10px; | |
126 | } | |
127 | } | |
86f3c2cd BA |
128 | #gameInfos, |
129 | #boardContainer, | |
130 | #gameStopped, | |
131 | #pendingSeek, | |
132 | #pendingRematch, | |
133 | #newGameForm { | |
41534b92 BA |
134 | display: none; |
135 | } | |
5abaabb3 BA |
136 | #gameStopped > h1 { |
137 | margin-bottom: 10px; | |
86f3c2cd BA |
138 | } |
139 | ||
140 | #gameInfos > .players-info { | |
141 | text-align: center; | |
142 | } | |
86f3c2cd BA |
143 | #gameInfos > .options-info { |
144 | text-align: center; | |
145 | color: #757575; | |
146 | margin-bottom: 15px; | |
147 | } | |
86f3c2cd BA |
148 | #gameInfos > div { |
149 | margin: 10px 0; | |
150 | } | |
86f3c2cd BA |
151 | #gameInfos > .rules { |
152 | color: #732E6C; | |
153 | } | |
5abaabb3 BA |
154 | #gameInfos > .rules p, |
155 | #gameInfos > .rules ul, | |
156 | #gameInfos > .rules ol { | |
86f3c2cd BA |
157 | margin: 10px 0; |
158 | } | |
5abaabb3 | 159 | #gameInfos > .rules ul { |
bc2bc396 BA |
160 | list-style-type: square; |
161 | padding-left: 30px; | |
162 | } | |
5abaabb3 | 163 | #gameInfos > .rules ol { |
bc2bc396 BA |
164 | list-style-type: numeric; |
165 | padding-left: 30px; | |
166 | } | |
5abaabb3 | 167 | #gameInfos > .rules a { |
fcede3ef BA |
168 | padding-bottom: 1px; |
169 | border-bottom: 1px dotted black; | |
170 | } | |
5abaabb3 BA |
171 | #gameInfos > .rules .author { |
172 | color: darkblue; | |
173 | font-style: italic; | |
86f3c2cd BA |
174 | } |
175 | ||
5abaabb3 BA |
176 | /* Complete rules (separate page) */ |
177 | .full-rules { | |
178 | max-width: 800px; | |
179 | margin: 20px auto; | |
180 | padding: 0 10px; | |
91339921 | 181 | } |
5abaabb3 BA |
182 | .full-rules h2, .full-rules h3, .full-rules h4 { |
183 | font-weight: bold; | |
184 | display: block; | |
86f3c2cd | 185 | } |
5abaabb3 BA |
186 | .full-rules h2 { |
187 | color: darkred; | |
188 | font-size: 2.5em; | |
189 | margin: 10px 0; | |
86f3c2cd | 190 | } |
5abaabb3 BA |
191 | .full-rules h3 { |
192 | color: darkviolet; | |
193 | font-size: 2em; | |
194 | margin: 10px 0; | |
41534b92 | 195 | } |
5abaabb3 BA |
196 | .full-rules h4 { |
197 | color: darkgreen; | |
198 | font-size: 1.5em; | |
199 | margin: 5px 0; | |
41534b92 | 200 | text-align: center; |
41534b92 | 201 | } |
5abaabb3 BA |
202 | .full-rules .diag { |
203 | position: relative; | |
204 | margin: -30px auto 0 auto; | |
41534b92 | 205 | } |
5abaabb3 | 206 | .full-rules figcaption { |
3ec8a131 | 207 | display: block; |
5abaabb3 BA |
208 | text-align: center; |
209 | margin-top: -50px; | |
210 | margin-bottom: 30px; | |
41534b92 | 211 | } |
5abaabb3 BA |
212 | /* TODO: use same CSS for rules and full-rules? */ |
213 | .full-rules p, .full-rules ul, .full-rules ol { | |
214 | margin: 10px 0; | |
41534b92 | 215 | } |
5abaabb3 BA |
216 | .full-rules ul { |
217 | list-style-type: square; | |
218 | padding-left: 30px; | |
41534b92 | 219 | } |
5abaabb3 BA |
220 | .full-rules ol { |
221 | list-style-type: numeric; | |
222 | padding-left: 30px; | |
41534b92 | 223 | } |
5abaabb3 BA |
224 | /* From vchess to adapt: */ |
225 | /* | |
226 | figure.diagram-container | |
227 | margin: 15px 0 15px 0 | |
228 | text-align: center | |
229 | width: 100% | |
230 | display: block | |
231 | .diagram | |
232 | display: block | |
233 | width: 50% | |
234 | margin-left: auto | |
235 | margin-right: auto | |
236 | @media screen and (max-width: 630px) | |
237 | width: 75% | |
238 | .diag12 | |
239 | float: left | |
240 | width: 42% | |
241 | margin: 0 2% 0 6% | |
242 | @media screen and (max-width: 630px) | |
243 | width: 49% | |
244 | margin: 0 1% 0 0 | |
245 | .diag22 | |
246 | float: left | |
247 | width: 42% | |
248 | margin: 0 6% 0 2% | |
249 | @media screen and (max-width: 630px) | |
250 | width: 49% | |
251 | margin: 0 0 0 1% | |
252 | figcaption | |
253 | display: block | |
254 | clear: both | |
255 | padding-top: 5px | |
256 | font-size: 0.8em | |
257 | */ | |
41534b92 | 258 | |
86f3c2cd BA |
259 | #ng-select { |
260 | margin-bottom: 20px; | |
41534b92 | 261 | } |
41534b92 | 262 | /* Options when starting custom game */ |
86f3c2cd | 263 | .words { |
c7bf7b1b | 264 | line-height: 0.9em; |
f8b43ef7 | 265 | margin-top: 15px; |
c7bf7b1b | 266 | } |
86f3c2cd BA |
267 | .words > .row { |
268 | margin: 0; | |
269 | } | |
270 | .words span { | |
41534b92 BA |
271 | cursor: pointer; |
272 | padding: 3px; | |
c7bf7b1b BA |
273 | display: inline-block; |
274 | margin: 2px; | |
41534b92 BA |
275 | } |
276 | .highlight-word { | |
277 | background-color: lightblue; | |
278 | } | |
86f3c2cd BA |
279 | #gameOptions { |
280 | text-align: center; | |
281 | } | |
535c464b | 282 | .option-select, .option-input { |
f8b43ef7 BA |
283 | margin: 15px 0 0 0; |
284 | } | |
535c464b | 285 | .option-input { |
f8b43ef7 BA |
286 | display: inline-block; |
287 | margin-right: 10px; | |
86f3c2cd | 288 | } |
535c464b BA |
289 | .option-input input[type=number] { |
290 | width: 64px; | |
291 | } | |
86f3c2cd BA |
292 | .btn-wrap { |
293 | text-align: center; | |
294 | } | |
295 | ||
296 | #gameLink { | |
297 | width: inherit; | |
298 | text-align: center; | |
299 | } | |
41534b92 | 300 | /* Game link div + custom game "button" */ |
86f3c2cd BA |
301 | #gameLink span, #gameLink a, #footer a { |
302 | padding-bottom: 1px; | |
303 | border-bottom: 1px dotted darkgrey; | |
304 | color: darkred; | |
305 | } | |
86f3c2cd BA |
306 | #gameLink span { |
307 | display: inline-box; | |
41534b92 BA |
308 | cursor: pointer; |
309 | } | |
86f3c2cd BA |
310 | #gameLink > p { |
311 | margin: 10px 0; | |
41534b92 BA |
312 | } |
313 | ||
5abaabb3 BA |
314 | /* Board container (with reserves) */ |
315 | #boardContainer { | |
316 | position: fixed; | |
317 | width: 100%; | |
318 | height: 100%; | |
319 | left: 0; | |
320 | top: 0; | |
321 | margin: 0; | |
322 | padding: 0; | |
323 | border: none; | |
324 | } | |
325 | #upLeftInfos { | |
326 | position: absolute; | |
327 | left: 0; | |
328 | top: 0; | |
329 | } | |
330 | #upRightStop { | |
331 | position: absolute; | |
332 | left: calc(100% - 25px); | |
333 | top: 0; | |
334 | } | |
335 | #upLeftInfos > svg, #upRightStop > svg { | |
336 | width: 25px; | |
337 | cursor: pointer; | |
338 | } | |
339 | @media(max-width: 767px) { | |
340 | #upRightStop { | |
341 | left: calc(100% - 35px); | |
342 | } | |
343 | #upLeftInfos > svg, #upRightStop > svg { | |
344 | width: 35px; | |
345 | } | |
346 | #upLeftInfos > svg path, #upRightStop > svg path { | |
347 | fill: #999; | |
348 | } | |
349 | } | |
350 | /* Playing board (without reserves) */ | |
3c61449b | 351 | .chessboard { |
41534b92 BA |
352 | position: absolute; |
353 | cursor: pointer; | |
41534b92 BA |
354 | min-width: 200px; |
355 | min-height: 200px; | |
356 | } | |
41534b92 BA |
357 | piece { |
358 | position: absolute; | |
359 | top: 0; | |
360 | left: 0; | |
361 | background-size: cover; | |
362 | z-index: 2; | |
363 | will-change: transform; | |
364 | pointer-events: none; | |
365 | } | |
c9ab0340 BA |
366 | piece.hidden { |
367 | display: none; | |
368 | } | |
41534b92 | 369 | /* Drawing of the board */ |
3c61449b | 370 | .chessboard_SVG { |
41534b92 BA |
371 | width: 100%; |
372 | height: 100%; | |
373 | } | |
d621e620 | 374 | /* Default squares colors (can be overriden or unused) */ |
c7bf7b1b BA |
375 | .dark-square { |
376 | fill: #b58863; | |
377 | } | |
378 | .light-square { | |
379 | fill: #f0d9b5; | |
380 | } | |
381 | .in-shadow { | |
382 | filter: brightness(50%); | |
383 | } | |
41534b92 BA |
384 | .reserves { |
385 | position: absolute; | |
386 | display: block; | |
387 | cursor: pointer; | |
388 | } | |
41534b92 BA |
389 | .reserve-cell { |
390 | position: relative; | |
391 | display: block; | |
392 | float: left; | |
393 | } | |
41534b92 BA |
394 | /* Pieces' counter for reserves */ |
395 | .reserve-num { | |
396 | color: red; | |
397 | position: absolute; | |
398 | display: block; | |
399 | font-weight: bold; | |
41534b92 | 400 | } |
5abaabb3 | 401 | /* Choices div after a promotion */ |
41534b92 BA |
402 | #choices, .choice { |
403 | position: absolute; | |
404 | cursor: pointer; | |
405 | } | |
406 | ||
86f3c2cd BA |
407 | /* https://moderncss.dev/custom-select-styles-with-pure-css/ */ |
408 | :root { | |
409 | --select-border: #777; | |
410 | --select-focus: #b11adc; | |
411 | --select-arrow: var(--select-border); | |
412 | } | |
86f3c2cd BA |
413 | select { |
414 | appearance: none; | |
415 | background-color: transparent; | |
416 | border: none; | |
417 | padding: 0 1em 0 0; | |
418 | margin: 0; | |
419 | width: 100%; | |
420 | font-family: inherit; | |
421 | font-size: inherit; | |
422 | cursor: inherit; | |
423 | line-height: inherit; | |
424 | z-index: 1; | |
425 | outline: none; | |
426 | } | |
86f3c2cd BA |
427 | .select { |
428 | display: grid; | |
429 | grid-template-areas: "select"; | |
430 | align-items: center; | |
431 | position: relative; | |
432 | min-width: 15ch; | |
433 | max-width: 30ch; | |
434 | border: 1px solid var(--select-border); | |
435 | border-radius: 0.25em; | |
436 | padding: 0.25em 0.5em; | |
437 | font-size: 1.25rem; | |
438 | cursor: pointer; | |
439 | line-height: 1.1; | |
440 | background-color: #fff; | |
441 | background-image: linear-gradient(to top, #f9f9f9, #fff 33%); | |
442 | width: 100%; | |
443 | margin: auto; | |
444 | } | |
86f3c2cd BA |
445 | select, .select::after { |
446 | grid-area: select; | |
447 | } | |
86f3c2cd BA |
448 | .select::after { |
449 | content: ""; | |
450 | justify-self: end; | |
451 | width: 0.8em; | |
452 | height: 0.5em; | |
453 | background-color: var(--select-arrow); | |
454 | clip-path: polygon(100% 0%, 0 0%, 50% 100%); | |
455 | } | |
86f3c2cd BA |
456 | select:focus + .focus { |
457 | position: absolute; | |
458 | top: -1px; | |
459 | left: -1px; | |
460 | right: -1px; | |
461 | bottom: -1px; | |
462 | border: 2px solid var(--select-focus); | |
463 | border-radius: inherit; | |
464 | } | |
465 | ||
86f3c2cd BA |
466 | /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */ |
467 | .form-field { | |
468 | display: block; | |
469 | margin-bottom: 16px; | |
470 | } | |
471 | .form-field--is-active .form-field__control::after { | |
472 | border-bottom: 2px solid #b11adc; | |
473 | transform: scaleX(150); | |
474 | } | |
475 | .form-field--is-active .form-field__label { | |
476 | color: #b11adc; | |
477 | font-size: 0.75rem; | |
478 | transform: translateY(-14px); | |
479 | } | |
480 | .form-field--is-filled .form-field__label { | |
481 | font-size: 0.75rem; | |
482 | transform: translateY(-14px); | |
483 | } | |
484 | .form-field__label { | |
485 | display: block; | |
486 | font-size: 1.2rem; | |
487 | font-weight: normal; | |
488 | left: 0; | |
489 | margin: 0; | |
490 | padding: 18px 12px 0; | |
491 | position: absolute; | |
492 | top: 0; | |
493 | transition: all 0.4s; | |
494 | width: 100%; | |
495 | } | |
496 | .form-field__control { | |
497 | background: #eee; | |
498 | border-radius: 8px 8px 0 0; | |
499 | overflow: hidden; | |
500 | position: relative; | |
501 | width: 100%; | |
502 | } | |
503 | .form-field__control::after { | |
504 | border-bottom: 2px solid #b11adc; | |
505 | bottom: 0; | |
506 | content: ""; | |
507 | display: block; | |
508 | left: 0; | |
509 | margin: 0 auto; | |
510 | position: absolute; | |
511 | right: 0; | |
512 | transform: scaleX(0); | |
513 | transition: all 0.4s; | |
514 | width: 1%; | |
515 | } | |
516 | .form-field__input { | |
517 | appearance: none; | |
518 | background: transparent; | |
519 | border: 0; | |
520 | border-bottom: 1px solid #999; | |
521 | color: #333; | |
522 | display: block; | |
523 | font-size: 1.2rem; | |
524 | margin-top: 24px; | |
525 | outline: 0; | |
526 | padding: 0 12px 10px 12px; | |
527 | width: 100%; | |
528 | } | |
529 | ||
86f3c2cd BA |
530 | /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */ |
531 | label.checkbox > input[type="checkbox"] { | |
532 | display: none; | |
533 | } | |
534 | label.checkbox > input[type="checkbox"] + *::before { | |
535 | content: ""; | |
536 | display: inline-block; | |
537 | vertical-align: bottom; | |
538 | margin-bottom: 3px; | |
539 | width: 1.1rem; | |
540 | height: 1.1rem; | |
541 | border-radius: 10%; | |
542 | border-style: solid; | |
543 | border-width: 0.1rem; | |
544 | border-color: gray; | |
545 | } | |
86f3c2cd BA |
546 | label.checkbox > input[type="checkbox"]:checked + *::before { |
547 | content: "✓"; | |
548 | font-size: 1.1rem; | |
549 | /*padding:10px;*/ | |
550 | color: white; | |
551 | text-align: center; | |
552 | background: teal; | |
553 | border-color: teal; | |
554 | } | |
555 | label.checkbox > input[type="checkbox"]:checked + * { | |
556 | color: teal; | |
557 | } | |
86f3c2cd BA |
558 | label.checkbox > span.spacer { |
559 | width: 10px; | |
560 | content: " "; | |
561 | } | |
562 | ||
41534b92 BA |
563 | /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */ |
564 | :root{ | |
565 | --loader-width: 70px; | |
566 | --loader-height: 70px; | |
86f3c2cd | 567 | --loader-color-primary: #01786F; |
41534b92 BA |
568 | --loader-color-secondary: #EEE; |
569 | --line-width: 3px; | |
570 | --animation-duration: 3s; | |
571 | --loader-initial-scale: 0.1; | |
572 | } | |
573 | .loader,.loader:before,.loader:after{ | |
574 | box-sizing: border-box; | |
575 | flex-grow: 0; | |
576 | flex-shrink: 0; | |
577 | } | |
41534b92 BA |
578 | @keyframes slide { |
579 | 0% { | |
580 | transform: translateY(0%); | |
581 | } | |
582 | 25% { | |
583 | transform: translateY(100%); | |
584 | } | |
585 | 50% { | |
586 | transform: translateY(100%); | |
587 | } | |
588 | 75% { | |
589 | transform: translateY(0%); | |
590 | } | |
591 | 100% { | |
592 | transform: translateY(0%); | |
593 | } | |
594 | } | |
41534b92 BA |
595 | @keyframes spin { |
596 | 0% { | |
597 | transform: rotate(0deg); | |
598 | } | |
599 | 25% { | |
600 | transform: rotate(0deg); | |
601 | } | |
602 | 50% { | |
603 | transform: rotate(180deg); | |
604 | } | |
605 | 75% { | |
606 | transform: rotate(180deg); | |
607 | } | |
608 | 100% { | |
609 | transform: rotate(360deg); | |
610 | } | |
611 | } | |
41534b92 BA |
612 | .loader.hour-glass { |
613 | position: relative; | |
614 | width: var(--loader-width, 100px); | |
615 | height: var(--loader-height, 100px); | |
616 | background-color: var(--loader-color-primary, #00f); | |
617 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%); | |
618 | clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%); | |
619 | overflow: hidden; | |
620 | animation: spin var(--animation-duration, 4s) infinite ease-in-out; | |
621 | margin: 20px auto; | |
622 | } | |
41534b92 BA |
623 | .hour-glass:before { |
624 | content: ""; | |
625 | position: absolute; | |
626 | top: 0px; | |
627 | left: 0px; | |
628 | width: var(--loader-width, 100px); | |
629 | height: 50%; | |
630 | background-color: var(--loader-color-secondary, #eee); | |
631 | animation: slide var(--animation-duration, 4s) infinite ease-in-out; | |
632 | } |