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) {
96 #gameInfos > .players-info
{
100 #gameInfos > .options-info
{
110 #gameInfos > .rules
{
114 #gameInfos > .rules
> p
,
115 #gameInfos > .rules
> ul
,
116 #gameInfos > .rules
> ol
{
120 #gameInfos > .rules
> ul
{
121 list-style-type: square
;
124 #gameInfos > .rules
> ol
{
125 list-style-type: numeric
;
129 #gameInfos > .rules
> a
{
131 border-bottom: 1px dotted black
;
138 /* "Sticky footer" */
148 @media(max-height: 399px) {
163 display: inline-block
;
164 transform: translateY
(3px);
168 background-color: #757575;
173 text-decoration: none
;
174 display: inline-block
;
181 button:hover
, button
.block-btn:hover
{
182 background-color: #b11adc;
187 background-color: #01786F;
188 margin: 0 auto
30px auto
; /*TODO: margin-bottom 20px ? */
193 button
.cancel-something
{
194 background-color: darkred
;
208 left: calc
(100% - 25px);
211 #upLeftInfos > svg
, #upRightStop
> svg
{
216 @media(max-width: 767px) {
218 left: calc
(100% - 35px);
220 #upLeftInfos > svg
, #upRightStop
> svg
{
223 #upLeftInfos > svg path
, #upRightStop
> svg path
{
232 /* Options when starting custom game */
243 display: inline-block
;
247 background-color: lightblue
;
254 .option-select, .option-input {
259 display: inline-block
;
263 .option-input input[type=number] {
277 text-decoration: none
;
280 /* Game link div + custom game "button" */
281 #gameLink span
, #gameLink a
, #footer a
{
283 border-bottom: 1px dotted darkgrey
;
296 /* Board container (without reserves) */
308 background-size: cover
;
310 will-change: transform
;
311 pointer-events: none
;
318 /* Drawing of the board */
324 /* Default squares colors (can be overriden or unused) */
333 filter: brightness
(50%);
348 /* Pieces' counter for reserves */
357 /* Choices div after a promotion (TODO: do not hide board) */
364 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
366 --select-border: #777;
367 --select-focus: #b11adc;
368 --select-arrow: var
(--select-border
);
373 background-color: transparent
;
378 font-family: inherit
;
381 line-height: inherit
;
388 grid-template-areas: "select";
393 border: 1px solid var
(--select-border
);
394 border-radius: 0.25em;
395 padding: 0.25em 0.5em;
399 background-color: #fff;
400 background-image: linear-gradient
(to top
, #f9f9f9, #fff 33%);
405 select
, .select::after
{
414 background-color: var
(--select-arrow
);
415 clip-path: polygon
(100% 0%, 0 0%, 50% 100%);
418 select:focus
+ .focus
{
424 border: 2px solid var
(--select-focus
);
425 border-radius: inherit
;
429 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
434 .form-field--is-active .form-field__control::after {
435 border-bottom: 2px solid
#b11adc;
436 transform: scaleX
(150);
438 .form-field--is-active .form-field__label {
441 transform: translateY
(-14px);
443 .form-field--is-filled .form-field__label {
445 transform: translateY
(-14px);
453 padding: 18px 12px 0;
456 transition: all
0.4s;
459 .form-field__control {
461 border-radius: 8px 8px 0 0;
466 .form-field__control::after {
467 border-bottom: 2px solid
#b11adc;
475 transform: scaleX
(0);
476 transition: all
0.4s;
481 background: transparent
;
483 border-bottom: 1px solid
#999;
489 padding: 0 12px 10px 12px;
494 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
495 label
.checkbox
> input
[type
="checkbox"] {
498 label
.checkbox
> input
[type
="checkbox"] + *::before
{
500 display: inline-block
;
501 vertical-align: bottom
;
507 border-width: 0.1rem;
511 label
.checkbox
> input
[type
="checkbox"]:checked
+ *::before
{
520 label
.checkbox
> input
[type
="checkbox"]:checked
+ * {
527 label
.checkbox
> span
.spacer
{
533 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
535 --loader-width: 70px;
536 --loader-height: 70px;
537 --loader-color-primary: #01786F;
538 --loader-color-secondary: #EEE;
540 --animation-duration: 3s;
541 --loader-initial-scale: 0.1;
543 .loader,.loader:before,.loader:after{
544 box-sizing: border-box
;
551 transform: translateY
(0%);
554 transform: translateY
(100%);
557 transform: translateY
(100%);
560 transform: translateY
(0%);
563 transform: translateY
(0%);
569 transform: rotate
(0deg);
572 transform: rotate
(0deg);
575 transform: rotate
(180deg);
578 transform: rotate
(180deg);
581 transform: rotate
(360deg);
587 width: var
(--loader-width
, 100px);
588 height: var
(--loader-height
, 100px);
589 background-color: var
(--loader-color-primary
, #00f);
590 -webkit-clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
591 clip-path: polygon
(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
593 animation: spin var
(--animation-duration
, 4s) infinite ease-in-out
;
602 width: var
(--loader-width
, 100px);
604 background-color: var
(--loader-color-secondary
, #eee);
605 animation: slide var
(--animation-duration
, 4s) infinite ease-in-out
;