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