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