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