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