5 box-sizing: border-box
;
11 vertical-align: baseline
;
21 background-color: #f8f8f8;
22 font-family: Arial
, Verdana
, Tahoma
, sans-serif
;
23 /* https://stackoverflow.com/a/24392249/12660887 */
29 flex-direction: column
;
30 justify-content: center
;
40 max-width: 800px; /*useful for rules display only*/
43 @media(max-height: 800px) {
49 @media(max-width: 767px) {
91 #gameInfos > .players-info
{
95 #gameInfos > .options-info
{
105 #gameInfos > .rules
{
109 #gameInfos > .rules
> p
,
110 #gameInfos > .rules
> ul
,
111 #gameInfos > .rules
> ol
{
119 /* "Sticky footer" */
138 display: inline-block
;
139 transform: translateY
(3px);
143 background-color: #757575;
148 text-decoration: none
;
149 display: inline-block
;
156 button:hover
, button
.block-btn:hover
{
157 background-color: #b11adc;
162 background-color: #01786F;
163 margin: 0 auto
30px auto
; /*TODO: margin-bottom 20px ? */
168 button
.cancel-something
{
169 background-color: darkred
;
183 left: calc
(100% - 25px);
186 #upLeftInfos > svg
, #upRightStop
> svg
{
191 @media(max-width: 767px) {
193 left: calc
(100% - 35px);
195 #upLeftInfos > svg
, #upRightStop
> svg
{
198 #upLeftInfos > svg path
, #upRightStop
> svg path
{
207 /* Options when starting custom game */
218 display: inline-block
;
222 background-color: lightblue
;
229 .option-select, .option-check {
234 display: inline-block
;
248 text-decoration: none
;
251 /* Game link div + custom game "button" */
252 #gameLink span
, #gameLink a
, #footer a
{
254 border-bottom: 1px dotted darkgrey
;
267 /* Board container (without reserves) */
273 /* Board container can be resized */
285 background-size: cover
;
287 will-change: transform
;
288 pointer-events: none
;
291 /* Drawing of the board */
304 filter: brightness
(50%);
319 /* Pieces' counter for reserves */
328 /* Choices div after a promotion (TODO: do not hide board) */
335 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
337 --select-border: #777;
338 --select-focus: #b11adc;
339 --select-arrow: var
(--select-border
);
344 background-color: transparent
;
349 font-family: inherit
;
352 line-height: inherit
;
359 grid-template-areas: "select";
364 border: 1px solid var
(--select-border
);
365 border-radius: 0.25em;
366 padding: 0.25em 0.5em;
370 background-color: #fff;
371 background-image: linear-gradient
(to top
, #f9f9f9, #fff 33%);
376 select
, .select::after
{
385 background-color: var
(--select-arrow
);
386 clip-path: polygon
(100% 0%, 0 0%, 50% 100%);
389 select:focus
+ .focus
{
395 border: 2px solid var
(--select-focus
);
396 border-radius: inherit
;
400 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
405 .form-field--is-active .form-field__control::after {
406 border-bottom: 2px solid
#b11adc;
407 transform: scaleX
(150);
409 .form-field--is-active .form-field__label {
412 transform: translateY
(-14px);
414 .form-field--is-filled .form-field__label {
416 transform: translateY
(-14px);
424 padding: 18px 12px 0;
427 transition: all
0.4s;
430 .form-field__control {
432 border-radius: 8px 8px 0 0;
437 .form-field__control::after {
438 border-bottom: 2px solid
#b11adc;
446 transform: scaleX
(0);
447 transition: all
0.4s;
452 background: transparent
;
454 border-bottom: 1px solid
#999;
460 padding: 0 12px 10px 12px;
465 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
466 label
.checkbox
> input
[type
="checkbox"] {
469 label
.checkbox
> input
[type
="checkbox"] + *::before
{
471 display: inline-block
;
472 vertical-align: bottom
;
478 border-width: 0.1rem;
482 label
.checkbox
> input
[type
="checkbox"]:checked
+ *::before
{
491 label
.checkbox
> input
[type
="checkbox"]:checked
+ * {
498 label
.checkbox
> span
.spacer
{
504 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
506 --loader-width: 70px;
507 --loader-height: 70px;
508 --loader-color-primary: #01786F;
509 --loader-color-secondary: #EEE;
511 --animation-duration: 3s;
512 --loader-initial-scale: 0.1;
514 .loader,.loader:before,.loader:after{
515 box-sizing: border-box
;
522 transform: translateY
(0%);
525 transform: translateY
(100%);
528 transform: translateY
(100%);
531 transform: translateY
(0%);
534 transform: translateY
(0%);
540 transform: rotate
(0deg);
543 transform: rotate
(0deg);
546 transform: rotate
(180deg);
549 transform: rotate
(180deg);
552 transform: rotate
(360deg);
558 width: var
(--loader-width
, 100px);
559 height: var
(--loader-height
, 100px);
560 background-color: var
(--loader-color-primary
, #00f);
561 -webkit-clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
562 clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
564 animation: spin var
(--animation-duration
, 4s) infinite ease-in-out
;
573 width: var
(--loader-width
, 100px);
575 background-color: var
(--loader-color-secondary
, #eee);
576 animation: slide var
(--animation-duration
, 4s) infinite ease-in-out
;