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