Cleaner fen generation + first draft of Apocalypse + a few fixes
[xogo.git] / common.css
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
14 html {
15 height: 100%;
16 }
17 body {
18 height: 100%;
19 margin: 0;
20 background-color: #f8f8f8;
21 font-family: Arial, Verdana, Tahoma, sans-serif;
22 /* https://stackoverflow.com/a/24392249/12660887 */
23 position: relative;
24 }
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 }
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 }
109
110 main > div {
111 margin-top: 25vh;
112 min-height: 500px;
113 min-width: 320px;
114 }
115 #gameInfos {
116 max-width: 800px;
117 }
118 @media(max-height: 800px) {
119 #newGameForm, #gameInfos {
120 margin-top: 30px;
121 }
122 }
123 @media(max-width: 767px) {
124 main > div {
125 padding: 0 10px;
126 }
127 }
128 #gameInfos,
129 #boardContainer,
130 #gameStopped,
131 #pendingSeek,
132 #pendingRematch,
133 #newGameForm {
134 display: none;
135 }
136 #gameStopped > h1 {
137 margin-bottom: 10px;
138 }
139
140 #gameInfos > .players-info {
141 text-align: center;
142 }
143 #gameInfos > .options-info {
144 text-align: center;
145 color: #757575;
146 margin-bottom: 15px;
147 }
148 #gameInfos > div {
149 margin: 10px 0;
150 }
151 #gameInfos > .rules {
152 color: #732E6C;
153 }
154 #gameInfos > .rules p,
155 #gameInfos > .rules ul,
156 #gameInfos > .rules ol {
157 margin: 10px 0;
158 }
159 #gameInfos > .rules ul {
160 list-style-type: square;
161 padding-left: 30px;
162 }
163 #gameInfos > .rules ol {
164 list-style-type: numeric;
165 padding-left: 30px;
166 }
167 #gameInfos > .rules a {
168 padding-bottom: 1px;
169 border-bottom: 1px dotted black;
170 }
171 #gameInfos > .rules .author {
172 color: darkblue;
173 font-style: italic;
174 }
175
176 /* Complete rules (separate page) */
177 .full-rules {
178 max-width: 800px;
179 margin: 20px auto;
180 padding: 0 10px;
181 }
182 .full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
183 font-weight: bold;
184 display: block;
185 }
186 .full-rules h1 {
187 font-size: 2.5em;
188 margin: 10px 0 20px 0;
189 }
190 .full-rules h2 {
191 color: darkred;
192 font-size: 2em;
193 margin: 10px 0;
194 }
195 .full-rules h3 {
196 color: darkviolet;
197 font-size: 1.8em;
198 margin: 10px 0;
199 }
200 .full-rules h4 {
201 color: darkgreen;
202 font-size: 1.5em;
203 margin: 5px 0;
204 text-align: center;
205 }
206 piece.mark {
207 background-image: url('/pieces/mark.svg');
208 }
209 piece.mark.transparent {
210 opacity: 0.65;
211 }
212 .full-rules figure {
213 display: block;
214 overflow: visible;
215 margin-top: 20px;
216 }
217 .full-rules figure::after {
218 content: '';
219 display: block;
220 clear: both;
221 margin-bottom: 20px;
222 }
223 .full-rules .diag {
224 position: relative;
225 margin: 0 auto;
226 }
227 .full-rules .left {
228 float: left;
229 }
230 .full-rules .right {
231 float: right;
232 }
233 .full-rules figcaption {
234 display: block;
235 text-align: center;
236 clear: both;
237 font-size: 0.9em;
238 color: #0D1C46;
239 font-weight: bold;
240 }
241 /* TODO: use same CSS for rules and full-rules? */
242 .full-rules p, .full-rules ul, .full-rules ol {
243 margin: 10px 0;
244 }
245 .full-rules ul {
246 list-style-type: square;
247 padding-left: 30px;
248 }
249 .full-rules ol {
250 list-style-type: numeric;
251 padding-left: 30px;
252 }
253
254 #ng-select {
255 margin-bottom: 20px;
256 }
257 /* Options when starting custom game */
258 .words {
259 line-height: 0.9em;
260 margin-top: 15px;
261 }
262 .words > .row {
263 margin: 0;
264 }
265 .words span {
266 cursor: pointer;
267 padding: 3px;
268 display: inline-block;
269 margin: 2px;
270 }
271 .highlight-word {
272 background-color: lightblue;
273 }
274 #gameOptions {
275 text-align: center;
276 }
277 .option-select, .option-input {
278 margin: 15px 0 0 0;
279 }
280 .option-input {
281 display: inline-block;
282 margin-right: 10px;
283 }
284 .option-input input[type=number] {
285 width: 64px;
286 }
287 .btn-wrap {
288 text-align: center;
289 }
290
291 #gameLink {
292 width: inherit;
293 text-align: center;
294 }
295 /* Game link div + custom game "button" */
296 #gameLink span, #gameLink a, #footer a {
297 padding-bottom: 1px;
298 border-bottom: 1px dotted darkgrey;
299 color: darkred;
300 }
301 #gameLink span {
302 display: inline-box;
303 cursor: pointer;
304 }
305 #gameLink > p {
306 margin: 10px 0;
307 }
308
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) */
346 .chessboard {
347 position: absolute;
348 cursor: pointer;
349 min-width: 200px;
350 min-height: 200px;
351 }
352 piece {
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 }
361 piece.hidden {
362 display: none;
363 }
364 /* Drawing of the board */
365 .chessboard_SVG {
366 width: 100%;
367 height: 100%;
368 }
369 /* Default squares colors (can be overriden or unused) */
370 .dark-square {
371 fill: #b58863;
372 }
373 .light-square {
374 fill: #f0d9b5;
375 }
376 .in-shadow {
377 filter: brightness(50%);
378 }
379 .reserves {
380 position: absolute;
381 display: block;
382 cursor: pointer;
383 }
384 .reserve-cell {
385 position: relative;
386 display: block;
387 float: left;
388 }
389 /* Pieces' counter for reserves */
390 .reserve-num {
391 color: red;
392 position: absolute;
393 display: block;
394 font-weight: bold;
395 }
396 /* Choices div after a promotion */
397 #choices, .choice {
398 position: absolute;
399 cursor: pointer;
400 }
401
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 }
408 select {
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 }
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 }
440 select, .select::after {
441 grid-area: select;
442 }
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 }
451 select: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
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
525 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
526 label.checkbox > input[type="checkbox"] {
527 display: none;
528 }
529 label.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 }
541 label.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 }
550 label.checkbox > input[type="checkbox"]:checked + * {
551 color: teal;
552 }
553 label.checkbox > span.spacer {
554 width: 10px;
555 content: " ";
556 }
557
558 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
559 :root{
560 --loader-width: 70px;
561 --loader-height: 70px;
562 --loader-color-primary: #01786F;
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 }
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 }
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 }
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 }
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 }