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