Cosmetics (TODO)
[xogo.git] / common.css
... / ...
CommitLineData
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
14html {
15 height: 100%;
16}
17
18body {
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
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;
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
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 {
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
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);
131}
132
133button {
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
147button:hover, button.block-btn:hover {
148 background-color: #b11adc;
149}
150
151button.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
231a {
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
265piece {
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
326select {
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
360select, .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
373select: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 */
450label.checkbox > input[type="checkbox"] {
451 display: none;
452}
453label.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
466label.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}
475label.checkbox > input[type="checkbox"]:checked + * {
476 color: teal;
477}
478
479/*label.checkbox {
480 color: teal;
481}*/
482label.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}