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