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