aed01ae1bfb94ff5c462a8da7c2242a1337ddcea
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) */
182 .full-rules h2, .full-rules h3, .full-rules h4 {
204 margin: -30px auto
0 auto
;
206 .full-rules figcaption {
212 /* TODO: use same CSS for rules and full-rules? */
213 .full-rules p, .full-rules ul, .full-rules ol {
217 list-style-type: square
;
221 list-style-type: numeric
;
224 /* From vchess to adapt: */
226 figure.diagram-container
227 margin: 15px 0 15px 0
236 @media screen and (max-width: 630px)
242 @media screen and (max-width: 630px)
249 @media screen and (max-width: 630px)
262 /* Options when starting custom game */
273 display: inline-block
;
277 background-color: lightblue
;
282 .option-select, .option-input {
286 display: inline-block
;
289 .option-input input[type=number] {
300 /* Game link div + custom game "button" */
301 #gameLink span
, #gameLink a
, #footer a
{
303 border-bottom: 1px dotted darkgrey
;
314 /* Board container (with reserves) */
332 left: calc
(100% - 25px);
335 #upLeftInfos > svg
, #upRightStop
> svg
{
339 @media(max-width: 767px) {
341 left: calc
(100% - 35px);
343 #upLeftInfos > svg
, #upRightStop
> svg
{
346 #upLeftInfos > svg path
, #upRightStop
> svg path
{
350 /* Playing board (without reserves) */
361 background-size: cover
;
363 will-change: transform
;
364 pointer-events: none
;
369 /* Drawing of the board */
374 /* Default squares colors (can be overriden or unused) */
382 filter: brightness
(50%);
394 /* Pieces' counter for reserves */
401 /* Choices div after a promotion */
407 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
409 --select-border: #777;
410 --select-focus: #b11adc;
411 --select-arrow: var
(--select-border
);
415 background-color: transparent
;
420 font-family: inherit
;
423 line-height: inherit
;
429 grid-template-areas: "select";
434 border: 1px solid var
(--select-border
);
435 border-radius: 0.25em;
436 padding: 0.25em 0.5em;
440 background-color: #fff;
441 background-image: linear-gradient
(to top
, #f9f9f9, #fff 33%);
445 select
, .select::after
{
453 background-color: var
(--select-arrow
);
454 clip-path: polygon
(100% 0%, 0 0%, 50% 100%);
456 select:focus
+ .focus
{
462 border: 2px solid var
(--select-focus
);
463 border-radius: inherit
;
466 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
471 .form-field--is-active .form-field__control::after {
472 border-bottom: 2px solid
#b11adc;
473 transform: scaleX
(150);
475 .form-field--is-active .form-field__label {
478 transform: translateY
(-14px);
480 .form-field--is-filled .form-field__label {
482 transform: translateY
(-14px);
490 padding: 18px 12px 0;
493 transition: all
0.4s;
496 .form-field__control {
498 border-radius: 8px 8px 0 0;
503 .form-field__control::after {
504 border-bottom: 2px solid
#b11adc;
512 transform: scaleX
(0);
513 transition: all
0.4s;
518 background: transparent
;
520 border-bottom: 1px solid
#999;
526 padding: 0 12px 10px 12px;
530 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
531 label
.checkbox
> input
[type
="checkbox"] {
534 label
.checkbox
> input
[type
="checkbox"] + *::before
{
536 display: inline-block
;
537 vertical-align: bottom
;
543 border-width: 0.1rem;
546 label
.checkbox
> input
[type
="checkbox"]:checked
+ *::before
{
555 label
.checkbox
> input
[type
="checkbox"]:checked
+ * {
558 label
.checkbox
> span
.spacer
{
563 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
565 --loader-width: 70px;
566 --loader-height: 70px;
567 --loader-color-primary: #01786F;
568 --loader-color-secondary: #EEE;
570 --animation-duration: 3s;
571 --loader-initial-scale: 0.1;
573 .loader,.loader:before,.loader:after{
574 box-sizing: border-box
;
580 transform: translateY
(0%);
583 transform: translateY
(100%);
586 transform: translateY
(100%);
589 transform: translateY
(0%);
592 transform: translateY
(0%);
597 transform: rotate
(0deg);
600 transform: rotate
(0deg);
603 transform: rotate
(180deg);
606 transform: rotate
(180deg);
609 transform: rotate
(360deg);
614 width: var
(--loader-width
, 100px);
615 height: var
(--loader-height
, 100px);
616 background-color: var
(--loader-color-primary
, #00f);
617 -webkit-clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
618 clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
620 animation: spin var
(--animation-duration
, 4s) infinite ease-in-out
;
628 width: var
(--loader-width
, 100px);
630 background-color: var
(--loader-color-secondary
, #eee);
631 animation: slide var
(--animation-duration
, 4s) infinite ease-in-out
;