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