f1b2b79bee6cdf00f2ef1a5edf7e88a813dd2ffe
[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 body {
15 margin: 0;
16 /*text-align: center;*/
17 background-color: #f8f8f8;
18 font-family: Arial, Verdana, Tahoma, sans-serif;
19 }
20
21 main {
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
30 main > div {
31 margin-top: 25vh;
32 min-height: 500px;
33 min-width: 320px;
34 /*max-width: 800px;*/ /*unnecessary*/
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
55 h1 {
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
114 a.left-link {
115 margin-right: 25px;
116 }
117 a.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
127 button {
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
141 button:hover, button.block-btn:hover {
142 background-color: #b11adc;
143 }
144
145 button.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
219 a {
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
253 piece {
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
314 select {
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
348 select, .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
361 select: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 */
438 label.checkbox > input[type="checkbox"] {
439 display: none;
440 }
441 label.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
454 label.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 }
463 label.checkbox > input[type="checkbox"]:checked + * {
464 color: teal;
465 }
466
467 /*label.checkbox {
468 color: teal;
469 }*/
470 label.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 }