Add Doublearmy. Start thinking about Dynamo
[xogo.git] / common.css
... / ...
CommitLineData
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
14html {
15 height: 100%;
16}
17body {
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}
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}
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}
109
110main > 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}
218piece.mark {
219 background-image: url('/pieces/mark.svg');
220}
221piece.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}
376piece {
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}
385piece.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}
432select {
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}
464select, .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}
475select: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 */
550label.checkbox > input[type="checkbox"] {
551 display: none;
552}
553label.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}
565label.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}
574label.checkbox > input[type="checkbox"]:checked + * {
575 color: teal;
576}
577label.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}