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