5 box-sizing: border-box
;
11 vertical-align: baseline
;
20 background-color: #f8f8f8;
21 font-family: Arial
, Verdana
, Tahoma
, sans-serif
;
22 /* https://stackoverflow.com/a/24392249/12660887 */
27 flex-direction: column
;
28 justify-content: center
;
49 text-decoration: none
;
55 background-color: #757575;
60 text-decoration: none
;
61 display: inline-block
;
67 button:hover
, button
.block-btn:hover
{
68 background-color: #b11adc;
72 background-color: #01786F;
73 margin: 0 auto
30px auto
; /*TODO: margin-bottom 20px ? */
77 button
.cancel-something
{
78 background-color: darkred
;
93 @media(max-height: 399px) {
106 display: inline-block
;
107 transform: translateY
(3px);
118 @media(max-height: 800px) {
119 #newGameForm, #gameInfos
{
123 @media(max-width: 767px) {
140 #gameInfos > .players-info
{
143 #gameInfos > .options-info
{
151 #gameInfos > .rules
{
154 #gameInfos > .rules p
,
155 #gameInfos > .rules ul
,
156 #gameInfos > .rules ol
{
159 #gameInfos > .rules ul
{
160 list-style-type: square
;
163 #gameInfos > .rules ol
{
164 list-style-type: numeric
;
167 #gameInfos > .rules a
{
169 border-bottom: 1px dotted black
;
171 #gameInfos > .rules
.author
{
176 /* Complete rules (separate page) */
186 .full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
192 margin: 10px 0 20px 0;
211 background-image: url
('/pieces/mark.svg');
213 piece
.mark
.transparent
{
221 .full-rules figure::after {
237 .full-rules figcaption {
245 /* TODO: use same CSS for rules and full-rules? */
246 .full-rules p, .full-rules ul, .full-rules ol {
250 list-style-type: square
;
254 list-style-type: numeric
;
261 /* Options when starting custom game */
272 display: inline-block
;
276 background-color: lightblue
;
281 .option-select, .option-input {
285 display: inline-block
;
288 .option-input input[type=number] {
299 /* Game link div + custom game "button" */
300 #gameLink span
, #gameLink a
, #footer a
{
302 border-bottom: 1px dotted darkgrey
;
313 /* Board container (with reserves) */
331 left: calc
(100% - 25px);
334 #upLeftInfos > svg
, #upRightStop
> svg
{
338 @media(max-width: 767px) {
340 left: calc
(100% - 35px);
342 #upLeftInfos > svg
, #upRightStop
> svg
{
345 #upLeftInfos > svg path
, #upRightStop
> svg path
{
349 /* Playing board (without reserves) */
360 background-size: cover
;
362 will-change: transform
;
363 pointer-events: none
;
368 /* Drawing of the board */
373 /* Default squares colors (can be overriden or unused) */
381 filter: brightness
(50%);
393 /* Pieces' counter for reserves */
400 /* Choices div after a promotion */
406 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
408 --select-border: #777;
409 --select-focus: #b11adc;
410 --select-arrow: var
(--select-border
);
414 background-color: transparent
;
419 font-family: inherit
;
422 line-height: inherit
;
428 grid-template-areas: "select";
433 border: 1px solid var
(--select-border
);
434 border-radius: 0.25em;
435 padding: 0.25em 0.5em;
439 background-color: #fff;
440 background-image: linear-gradient
(to top
, #f9f9f9, #fff 33%);
444 select
, .select::after
{
452 background-color: var
(--select-arrow
);
453 clip-path: polygon
(100% 0%, 0 0%, 50% 100%);
455 select:focus
+ .focus
{
461 border: 2px solid var
(--select-focus
);
462 border-radius: inherit
;
465 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
470 .form-field--is-active .form-field__control::after {
471 border-bottom: 2px solid
#b11adc;
472 transform: scaleX
(150);
474 .form-field--is-active .form-field__label {
477 transform: translateY
(-14px);
479 .form-field--is-filled .form-field__label {
481 transform: translateY
(-14px);
489 padding: 18px 12px 0;
492 transition: all
0.4s;
495 .form-field__control {
497 border-radius: 8px 8px 0 0;
502 .form-field__control::after {
503 border-bottom: 2px solid
#b11adc;
511 transform: scaleX
(0);
512 transition: all
0.4s;
517 background: transparent
;
519 border-bottom: 1px solid
#999;
525 padding: 0 12px 10px 12px;
529 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
530 label
.checkbox
> input
[type
="checkbox"] {
533 label
.checkbox
> input
[type
="checkbox"] + *::before
{
535 display: inline-block
;
536 vertical-align: bottom
;
542 border-width: 0.1rem;
545 label
.checkbox
> input
[type
="checkbox"]:checked
+ *::before
{
554 label
.checkbox
> input
[type
="checkbox"]:checked
+ * {
557 label
.checkbox
> span
.spacer
{
562 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
564 --loader-width: 70px;
565 --loader-height: 70px;
566 --loader-color-primary: #01786F;
567 --loader-color-secondary: #EEE;
569 --animation-duration: 3s;
570 --loader-initial-scale: 0.1;
572 .loader,.loader:before,.loader:after{
573 box-sizing: border-box
;
579 transform: translateY
(0%);
582 transform: translateY
(100%);
585 transform: translateY
(100%);
588 transform: translateY
(0%);
591 transform: translateY
(0%);
596 transform: rotate
(0deg);
599 transform: rotate
(0deg);
602 transform: rotate
(180deg);
605 transform: rotate
(180deg);
608 transform: rotate
(360deg);
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%);
619 animation: spin var
(--animation-duration
, 4s) infinite ease-in-out
;
627 width: var
(--loader-width
, 100px);
629 background-color: var
(--loader-color-secondary
, #eee);
630 animation: slide var
(--animation-duration
, 4s) infinite ease-in-out
;