e9bf31c3255b62f622fac26f468858a20c8710f5
[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
18 body {
19 height: 100%;
20 margin: 0;
21 background-color: #f8f8f8;
22 font-family: Arial, Verdana, Tahoma, sans-serif;
23 /* https://stackoverflow.com/a/24392249/12660887 */
24 position: relative;
25 }
26
27 main {
28 display: flex;
29 flex-direction: column;
30 justify-content: center;
31 align-items: center;
32 flex-wrap: nowrap;
33 font-size: 1.25rem;
34 }
35
36 main > div {
37 margin-top: 25vh;
38 min-height: 500px;
39 min-width: 320px;
40 }
41
42 #gameInfos {
43 max-width: 800px;
44 }
45
46 @media(max-height: 800px) {
47 #newGameForm, #gameInfos {
48 margin-top: 30px;
49 }
50 }
51
52 @media(max-width: 767px) {
53 main > div {
54 padding: 0 10px;
55 }
56 }
57
58 .author {
59 color: darkblue;
60 font-style: italic;
61 }
62
63 #boardContainer {
64 position: fixed;
65 width: 100%;
66 height: 100%;
67 left: 0;
68 top: 0;
69 margin: 0;
70 padding: 0;
71 border: none;
72 }
73
74 h1 {
75 font-size: 2rem;
76 font-weight: bold;
77 text-align: center;
78 display: block;
79 margin: 10px 0;
80 }
81
82 h4 {
83 font-size: 1.5rem;
84 font-weight: bold;
85 text-align: center;
86 display: block;
87 margin: 10px 0;
88 color: darkgreen;
89 }
90
91 #gameInfos,
92 #boardContainer,
93 #gameStopped,
94 #pendingSeek,
95 #pendingRematch,
96 #newGameForm {
97 display: none;
98 }
99
100 .bold {
101 font-weight: bold;
102 }
103
104 #gameInfos > .players-info {
105 text-align: center;
106 }
107
108 #gameInfos > .options-info {
109 text-align: center;
110 color: #757575;
111 margin-bottom: 15px;
112 }
113
114 #gameInfos > div {
115 margin: 10px 0;
116 }
117
118 #gameInfos > .rules {
119 color: #732E6C;
120 }
121
122 #gameInfos > .rules > p,
123 #gameInfos > .rules > ul,
124 #gameInfos > .rules > ol {
125 margin: 10px 0;
126 }
127
128 #gameInfos > .rules > ul {
129 list-style-type: square;
130 padding-left: 30px;
131 }
132 #gameInfos > .rules > ol {
133 list-style-type: numeric;
134 padding-left: 30px;
135 }
136
137 #gameInfos > .rules > a {
138 padding-bottom: 1px;
139 border-bottom: 1px dotted black;
140 }
141
142 #gameStopped > h1 {
143 margin-bottom: 10px;
144 }
145
146 /* "Sticky footer" */
147 #footer {
148 position: absolute;
149 bottom: 0;
150 left: 0;
151 right: 0;
152 height: 50px;
153 text-align: center;
154 }
155
156 @media(max-height: 399px) {
157 #footer {
158 display: none;
159 }
160 }
161
162 a.left-link {
163 margin-right: 25px;
164 }
165 a.right-link {
166 margin-left: 25px;
167 }
168
169 #footer a > img {
170 height: 1.2em;
171 display: inline-block;
172 transform: translateY(3px);
173 }
174
175 button {
176 background-color: #757575;
177 border: none;
178 color: white;
179 padding: 10px 15px;
180 text-align: center;
181 text-decoration: none;
182 display: inline-block;
183 font-size: 1em;
184 cursor: pointer;
185 border-radius: 20%;
186 margin: 15px 0;
187 }
188
189 button:hover, button.block-btn:hover {
190 background-color: #b11adc;
191 }
192
193 button.block-btn {
194 display: block;
195 background-color: #01786F;
196 margin: 0 auto 30px auto; /*TODO: margin-bottom 20px ? */
197 font-size: 2rem;
198 padding: 15px 32px;
199 }
200
201 button.cancel-something {
202 background-color: darkred;
203 display: block;
204 margin-left: auto;
205 margin-right: auto;
206 }
207
208 #upLeftInfos {
209 position: absolute;
210 left: 0;
211 top: 0;
212 }
213
214 #upRightStop {
215 position: absolute;
216 left: calc(100% - 25px);
217 top: 0;
218 }
219 #upLeftInfos > svg, #upRightStop > svg {
220 width: 25px;
221 cursor: pointer;
222 }
223
224 @media(max-width: 767px) {
225 #upRightStop {
226 left: calc(100% - 35px);
227 }
228 #upLeftInfos > svg, #upRightStop > svg {
229 width: 35px;
230 }
231 #upLeftInfos > svg path, #upRightStop > svg path {
232 fill: #999;
233 }
234 }
235
236 #ng-select {
237 margin-bottom: 20px;
238 }
239
240 /* Options when starting custom game */
241 .words {
242 line-height: 0.9em;
243 margin-top: 15px;
244 }
245 .words > .row {
246 margin: 0;
247 }
248 .words span {
249 cursor: pointer;
250 padding: 3px;
251 display: inline-block;
252 margin: 2px;
253 }
254 .highlight-word {
255 background-color: lightblue;
256 }
257
258 #gameOptions {
259 text-align: center;
260 }
261
262 .option-select, .option-input {
263 margin: 15px 0 0 0;
264 }
265
266 .option-input {
267 display: inline-block;
268 margin-right: 10px;
269 }
270
271 .option-input input[type=number] {
272 width: 64px;
273 }
274
275 .btn-wrap {
276 text-align: center;
277 }
278
279 #gameLink {
280 width: inherit;
281 text-align: center;
282 }
283
284 a {
285 text-decoration: none;
286 }
287
288 /* Game link div + custom game "button" */
289 #gameLink span, #gameLink a, #footer a {
290 padding-bottom: 1px;
291 border-bottom: 1px dotted darkgrey;
292 color: darkred;
293 }
294
295 #gameLink span {
296 display: inline-box;
297 cursor: pointer;
298 }
299
300 #gameLink > p {
301 margin: 10px 0;
302 }
303
304 /* Board container (without reserves) */
305 .chessboard {
306 position: absolute;
307 cursor: pointer;
308 min-width: 200px;
309 min-height: 200px;
310 }
311
312 piece {
313 position: absolute;
314 top: 0;
315 left: 0;
316 background-size: cover;
317 z-index: 2;
318 will-change: transform;
319 pointer-events: none;
320 }
321
322 piece.hidden {
323 display: none;
324 }
325
326 /* Drawing of the board */
327 .chessboard_SVG {
328 width: 100%;
329 height: 100%;
330 }
331
332 /* Default squares colors (can be overriden or unused) */
333 .dark-square {
334 fill: #b58863;
335 }
336 .light-square {
337 fill: #f0d9b5;
338 }
339
340 .in-shadow {
341 filter: brightness(50%);
342 }
343
344 .reserves {
345 position: absolute;
346 display: block;
347 cursor: pointer;
348 }
349
350 .reserve-cell {
351 position: relative;
352 display: block;
353 float: left;
354 }
355
356 /* Pieces' counter for reserves */
357 .reserve-num {
358 color: red;
359 position: absolute;
360 display: block;
361 font-weight: bold;
362 /*z-index: 10;*/
363 }
364
365 /* Choices div after a promotion (TODO: do not hide board) */
366 #choices, .choice {
367 position: absolute;
368 cursor: pointer;
369 }
370
371
372 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
373 :root {
374 --select-border: #777;
375 --select-focus: #b11adc;
376 --select-arrow: var(--select-border);
377 }
378
379 select {
380 appearance: none;
381 background-color: transparent;
382 border: none;
383 padding: 0 1em 0 0;
384 margin: 0;
385 width: 100%;
386 font-family: inherit;
387 font-size: inherit;
388 cursor: inherit;
389 line-height: inherit;
390 z-index: 1;
391 outline: none;
392 }
393
394 .select {
395 display: grid;
396 grid-template-areas: "select";
397 align-items: center;
398 position: relative;
399 min-width: 15ch;
400 max-width: 30ch;
401 border: 1px solid var(--select-border);
402 border-radius: 0.25em;
403 padding: 0.25em 0.5em;
404 font-size: 1.25rem;
405 cursor: pointer;
406 line-height: 1.1;
407 background-color: #fff;
408 background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
409 width: 100%;
410 margin: auto;
411 }
412
413 select, .select::after {
414 grid-area: select;
415 }
416
417 .select::after {
418 content: "";
419 justify-self: end;
420 width: 0.8em;
421 height: 0.5em;
422 background-color: var(--select-arrow);
423 clip-path: polygon(100% 0%, 0 0%, 50% 100%);
424 }
425
426 select:focus + .focus {
427 position: absolute;
428 top: -1px;
429 left: -1px;
430 right: -1px;
431 bottom: -1px;
432 border: 2px solid var(--select-focus);
433 border-radius: inherit;
434 }
435
436
437 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
438 .form-field {
439 display: block;
440 margin-bottom: 16px;
441 }
442 .form-field--is-active .form-field__control::after {
443 border-bottom: 2px solid #b11adc;
444 transform: scaleX(150);
445 }
446 .form-field--is-active .form-field__label {
447 color: #b11adc;
448 font-size: 0.75rem;
449 transform: translateY(-14px);
450 }
451 .form-field--is-filled .form-field__label {
452 font-size: 0.75rem;
453 transform: translateY(-14px);
454 }
455 .form-field__label {
456 display: block;
457 font-size: 1.2rem;
458 font-weight: normal;
459 left: 0;
460 margin: 0;
461 padding: 18px 12px 0;
462 position: absolute;
463 top: 0;
464 transition: all 0.4s;
465 width: 100%;
466 }
467 .form-field__control {
468 background: #eee;
469 border-radius: 8px 8px 0 0;
470 overflow: hidden;
471 position: relative;
472 width: 100%;
473 }
474 .form-field__control::after {
475 border-bottom: 2px solid #b11adc;
476 bottom: 0;
477 content: "";
478 display: block;
479 left: 0;
480 margin: 0 auto;
481 position: absolute;
482 right: 0;
483 transform: scaleX(0);
484 transition: all 0.4s;
485 width: 1%;
486 }
487 .form-field__input {
488 appearance: none;
489 background: transparent;
490 border: 0;
491 border-bottom: 1px solid #999;
492 color: #333;
493 display: block;
494 font-size: 1.2rem;
495 margin-top: 24px;
496 outline: 0;
497 padding: 0 12px 10px 12px;
498 width: 100%;
499 }
500
501
502 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
503 label.checkbox > input[type="checkbox"] {
504 display: none;
505 }
506 label.checkbox > input[type="checkbox"] + *::before {
507 content: "";
508 display: inline-block;
509 vertical-align: bottom;
510 margin-bottom: 3px;
511 width: 1.1rem;
512 height: 1.1rem;
513 border-radius: 10%;
514 border-style: solid;
515 border-width: 0.1rem;
516 border-color: gray;
517 }
518
519 label.checkbox > input[type="checkbox"]:checked + *::before {
520 content: "✓";
521 font-size: 1.1rem;
522 /*padding:10px;*/
523 color: white;
524 text-align: center;
525 background: teal;
526 border-color: teal;
527 }
528 label.checkbox > input[type="checkbox"]:checked + * {
529 color: teal;
530 }
531
532 /*label.checkbox {
533 color: teal;
534 }*/
535 label.checkbox > span.spacer {
536 width: 10px;
537 content: " ";
538 }
539
540
541 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
542 :root{
543 --loader-width: 70px;
544 --loader-height: 70px;
545 --loader-color-primary: #01786F;
546 --loader-color-secondary: #EEE;
547 --line-width: 3px;
548 --animation-duration: 3s;
549 --loader-initial-scale: 0.1;
550 }
551 .loader,.loader:before,.loader:after{
552 box-sizing: border-box;
553 flex-grow: 0;
554 flex-shrink: 0;
555 }
556
557 @keyframes slide {
558 0% {
559 transform: translateY(0%);
560 }
561 25% {
562 transform: translateY(100%);
563 }
564 50% {
565 transform: translateY(100%);
566 }
567 75% {
568 transform: translateY(0%);
569 }
570 100% {
571 transform: translateY(0%);
572 }
573 }
574
575 @keyframes spin {
576 0% {
577 transform: rotate(0deg);
578 }
579 25% {
580 transform: rotate(0deg);
581 }
582 50% {
583 transform: rotate(180deg);
584 }
585 75% {
586 transform: rotate(180deg);
587 }
588 100% {
589 transform: rotate(360deg);
590 }
591 }
592
593 .loader.hour-glass {
594 position: relative;
595 width: var(--loader-width, 100px);
596 height: var(--loader-height, 100px);
597 background-color: var(--loader-color-primary, #00f);
598 -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
599 clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
600 overflow: hidden;
601 animation: spin var(--animation-duration, 4s) infinite ease-in-out;
602 margin: 20px auto;
603 }
604
605 .hour-glass:before {
606 content: "";
607 position: absolute;
608 top: 0px;
609 left: 0px;
610 width: var(--loader-width, 100px);
611 height: 50%;
612 background-color: var(--loader-color-secondary, #eee);
613 animation: slide var(--animation-duration, 4s) infinite ease-in-out;
614 }