5fee7efb362690544c2af463a988a19e37bbc8e2
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) */
183 .full-rules figure.show-pieces {
188 .full-rules figure.show-pieces > img {
194 .full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
200 margin: 10px 0 20px 0;
219 background-image: url
('/pieces/mark.svg');
221 piece
.mark
.transparent
{
229 .full-rules figure::after {
245 @media screen and
(max-width: 550px) {
255 .full-rules figcaption {
263 /* TODO: use same CSS for rules and full-rules? */
264 .full-rules p, .full-rules ul, .full-rules ol {
268 list-style-type: square
;
272 list-style-type: numeric
;
279 /* Options when starting custom game */
290 display: inline-block
;
294 background-color: lightblue
;
299 .option-select, .option-input {
303 display: inline-block
;
306 .option-input input[type=number] {
317 /* Game link div + custom game "button" */
318 #gameLink span
, #gameLink a
, #footer a
{
320 border-bottom: 1px dotted darkgrey
;
331 /* Board container (with reserves) */
349 left: calc
(100% - 25px);
352 #upLeftInfos > svg
, #upRightStop
> svg
{
356 @media(max-width: 767px) {
358 left: calc
(100% - 35px);
360 #upLeftInfos > svg
, #upRightStop
> svg
{
363 #upLeftInfos > svg path
, #upRightStop
> svg path
{
367 /* Playing board (without reserves) */
376 background-size: cover
;
378 will-change: transform
;
379 pointer-events: none
;
384 /* Drawing of the board */
389 /* Default squares colors (can be overriden or unused) */
397 filter: brightness
(50%);
409 /* Pieces' counter for reserves */
416 /* Choices div after a promotion */
422 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
424 --select-border: #777;
425 --select-focus: #b11adc;
426 --select-arrow: var
(--select-border
);
430 background-color: transparent
;
435 font-family: inherit
;
438 line-height: inherit
;
444 grid-template-areas: "select";
449 border: 1px solid var
(--select-border
);
450 border-radius: 0.25em;
451 padding: 0.25em 0.5em;
455 background-color: #fff;
456 background-image: linear-gradient
(to top
, #f9f9f9, #fff 33%);
460 select
, .select::after
{
468 background-color: var
(--select-arrow
);
469 clip-path: polygon
(100% 0%, 0 0%, 50% 100%);
471 select:focus
+ .focus
{
477 border: 2px solid var
(--select-focus
);
478 border-radius: inherit
;
481 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
486 .form-field--is-active .form-field__control::after {
487 border-bottom: 2px solid
#b11adc;
488 transform: scaleX
(150);
490 .form-field--is-active .form-field__label {
493 transform: translateY
(-14px);
495 .form-field--is-filled .form-field__label {
497 transform: translateY
(-14px);
505 padding: 18px 12px 0;
508 transition: all
0.4s;
511 .form-field__control {
513 border-radius: 8px 8px 0 0;
518 .form-field__control::after {
519 border-bottom: 2px solid
#b11adc;
527 transform: scaleX
(0);
528 transition: all
0.4s;
533 background: transparent
;
535 border-bottom: 1px solid
#999;
541 padding: 0 12px 10px 12px;
545 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
546 label
.checkbox
> input
[type
="checkbox"] {
549 label
.checkbox
> input
[type
="checkbox"] + *::before
{
551 display: inline-block
;
552 vertical-align: bottom
;
558 border-width: 0.1rem;
561 label
.checkbox
> input
[type
="checkbox"]:checked
+ *::before
{
570 label
.checkbox
> input
[type
="checkbox"]:checked
+ * {
573 label
.checkbox
> span
.spacer
{
578 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
580 --loader-width: 70px;
581 --loader-height: 70px;
582 --loader-color-primary: #01786F;
583 --loader-color-secondary: #EEE;
585 --animation-duration: 3s;
586 --loader-initial-scale: 0.1;
588 .loader,.loader:before,.loader:after{
589 box-sizing: border-box
;
595 transform: translateY
(0%);
598 transform: translateY
(100%);
601 transform: translateY
(100%);
604 transform: translateY
(0%);
607 transform: translateY
(0%);
612 transform: rotate
(0deg);
615 transform: rotate
(0deg);
618 transform: rotate
(180deg);
621 transform: rotate
(180deg);
624 transform: rotate
(360deg);
629 width: var
(--loader-width
, 100px);
630 height: var
(--loader-height
, 100px);
631 background-color: var
(--loader-color-primary
, #00f);
632 -webkit-clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
633 clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
635 animation: spin var
(--animation-duration
, 4s) infinite ease-in-out
;
643 width: var
(--loader-width
, 100px);
645 background-color: var
(--loader-color-secondary
, #eee);
646 animation: slide var
(--animation-duration
, 4s) infinite ease-in-out
;