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