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