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