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