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