common.css

   1 /* CSS reset */
   2 *,
   3 *::before,
   4 *::after {
   5   box-sizing: border-box;
   6   margin: 0;
   7   padding: 0;
   8   border: 0;
   9   font-size: 100%;
  10   font: inherit;
  11   vertical-align: baseline;
  12 }
  13
  14 html {
  15   height: 100%;
  16 }
  17 body {
  18   height: 100%;
  19   margin: 0;
  20   background-color: #f8f8f8;
  21   font-family:  Arial, Verdana, Tahoma, sans-serif;
  22   /* https://stackoverflow.com/a/24392249/12660887 */
  23   position: relative;
  24 }
  25 main {
  26   display: flex;
  27   flex-direction: column;
  28   justify-content: center;
  29   align-items: center;
  30   flex-wrap: nowrap;
  31   font-size: 1.25rem;
  32 }
  33 h1 {
  34   font-size: 2rem;
  35   font-weight: bold;
  36   text-align: center;
  37   display: block;
  38   margin: 10px 0;
  39 }
  40 h4 {
  41   font-size: 1.5rem;
  42   font-weight: bold;
  43   text-align: center;
  44   display: block;
  45   margin: 10px 0;
  46   color: darkgreen;
  47 }
  48 a {
  49   text-decoration: none;
  50 }
  51 .bold {
  52   font-weight: bold;
  53 }
  54 button {
  55   background-color: #757575;
  56   border: none;
  57   color: white;
  58   padding: 10px 15px;
  59   text-align: center;
  60   text-decoration: none;
  61   display: inline-block;
  62   font-size: 1em;
  63   cursor: pointer;
  64   border-radius: 20%;
  65   margin: 15px 0;
  66 }
  67 button:hover, button.block-btn:hover {
  68   background-color: #b11adc;
  69 }
  70 button.block-btn {
  71   display: block;
  72   background-color: #01786F;
  73   margin: 0 auto 30px auto; /*TODO: margin-bottom 20px ? */
  74   font-size: 2rem;
  75   padding: 15px 32px;
  76 }
  77 button.cancel-something {
  78   background-color: darkred;
  79   display: block;
  80   margin-left: auto;
  81   margin-right: auto;
  82 }
  83
  84 /* "Sticky footer" */
  85 #footer {
  86   position: absolute;
  87   bottom: 0;
  88   left: 0;
  89   right: 0;
  90   height: 50px;
  91   text-align: center;
  92 }
  93 @media(max-height: 399px) {
  94   #footer {
  95     display: none;
  96   }
  97 }
  98 a.left-link {
  99   margin-right: 25px;
 100 }
 101 a.right-link {
 102   margin-left: 25px;
 103 }
 104 #footer a > img {
 105   height: 1.2em;
 106   display: inline-block;
 107   transform: translateY(3px);
 108 }
 109
 110 main > div {
 111   margin-top: 25vh;
 112   min-height: 500px;
 113   min-width: 320px;
 114 }
 115 #gameInfos {
 116   max-width: 800px;
 117 }
 118 @media(max-height: 800px) {
 119   #newGameForm, #gameInfos {
 120     margin-top: 30px;
 121   }
 122 }
 123 @media(max-width: 767px) {
 124   main > div {
 125     padding: 0 10px;
 126   }
 127 }
 128 #gameInfos,
 129 #boardContainer,
 130 #gameStopped,
 131 #pendingSeek,
 132 #pendingRematch,
 133 #newGameForm {
 134   display: none;
 135 }
 136 #gameStopped > h1 {
 137   margin-bottom: 10px;
 138 }
 139
 140 #gameInfos > .players-info {
 141   text-align: center;
 142 }
 143 #gameInfos > .options-info {
 144   text-align: center;
 145   color: #757575;
 146   margin-bottom: 15px;
 147 }
 148 #gameInfos > div {
 149   margin: 10px 0;
 150 }
 151 #gameInfos > .rules {
 152   color: #732E6C;
 153 }
 154 #gameInfos > .rules p,
 155 #gameInfos > .rules ul,
 156 #gameInfos > .rules ol {
 157   margin: 10px 0;
 158 }
 159 #gameInfos > .rules ul {
 160   list-style-type: square;
 161   padding-left: 30px;
 162 }
 163 #gameInfos > .rules ol {
 164   list-style-type: numeric;
 165   padding-left: 30px;
 166 }
 167 #gameInfos > .rules a {
 168   padding-bottom: 1px;
 169   border-bottom: 1px dotted black;
 170 }
 171 #gameInfos > .rules .author {
 172   color: darkblue;
 173   font-style: italic;
 174 }
 175
 176 /* Complete rules (separate page) */
 177 .full-rules {
 178   max-width: 800px;
 179   margin: 20px auto;
 180   padding: 0 10px;
 181 }
 182 .full-rules h2, .full-rules h3, .full-rules h4 {
 183   font-weight: bold;
 184   display: block;
 185 }
 186 .full-rules h2 {
 187   color: darkred;
 188   font-size: 2.5em;
 189   margin: 10px 0;
 190 }
 191 .full-rules h3 {
 192   color: darkviolet;
 193   font-size: 2em;
 194   margin: 10px 0;
 195 }
 196 .full-rules h4 {
 197   color: darkgreen;
 198   font-size: 1.5em;
 199   margin: 5px 0;
 200   text-align: center;
 201 }
 202 .full-rules .diag {
 203   position: relative;
 204   margin: -30px auto 0 auto;
 205 }
 206 .full-rules figcaption {
 207   display: block;
 208   text-align: center;
 209   margin-top: -50px;
 210   margin-bottom: 30px;
 211 }
 212 /* TODO: use same CSS for rules and full-rules? */
 213 .full-rules p, .full-rules ul, .full-rules ol {
 214   margin: 10px 0;
 215 }
 216 .full-rules ul {
 217   list-style-type: square;
 218   padding-left: 30px;
 219 }
 220 .full-rules ol {
 221   list-style-type: numeric;
 222   padding-left: 30px;
 223 }
 224 /* From vchess to adapt: */
 225 /*
 226 figure.diagram-container
 227   margin: 15px 0 15px 0
 228   text-align: center
 229   width: 100%
 230   display: block
 231   .diagram
 232     display: block
 233     width: 50%
 234     margin-left: auto
 235     margin-right: auto
 236     @media screen and (max-width: 630px)
 237       width: 75%
 238   .diag12
 239     float: left
 240     width: 42%
 241     margin: 0 2% 0 6%
 242     @media screen and (max-width: 630px)
 243       width: 49%
 244       margin: 0 1% 0 0
 245   .diag22
 246     float: left
 247     width: 42%
 248     margin: 0 6% 0 2%
 249     @media screen and (max-width: 630px)
 250       width: 49%
 251       margin: 0 0 0 1%
 252   figcaption
 253     display: block
 254     clear: both
 255     padding-top: 5px
 256     font-size: 0.8em
 257 */
 258
 259 #ng-select {
 260   margin-bottom: 20px;
 261 }
 262 /* Options when starting custom game */
 263 .words {
 264   line-height: 0.9em;
 265   margin-top: 15px;
 266 }
 267 .words > .row {
 268   margin: 0;
 269 }
 270 .words span {
 271   cursor: pointer;
 272   padding: 3px;
 273   display: inline-block;
 274   margin: 2px;
 275 }
 276 .highlight-word {
 277   background-color: lightblue;
 278 }
 279 #gameOptions {
 280   text-align: center;
 281 }
 282 .option-select, .option-input {
 283   margin: 15px 0 0 0;
 284 }
 285 .option-input {
 286   display: inline-block;
 287   margin-right: 10px;
 288 }
 289 .option-input input[type=number] {
 290   width: 64px;
 291 }
 292 .btn-wrap {
 293   text-align: center;
 294 }
 295
 296 #gameLink {
 297   width: inherit;
 298   text-align: center;
 299 }
 300 /* Game link div + custom game "button" */
 301 #gameLink span, #gameLink a, #footer a {
 302   padding-bottom: 1px;
 303   border-bottom: 1px dotted darkgrey;
 304   color: darkred;
 305 }
 306 #gameLink span {
 307   display: inline-box;
 308   cursor: pointer;
 309 }
 310 #gameLink > p {
 311   margin: 10px 0;
 312 }
 313
 314 /* Board container (with reserves) */
 315 #boardContainer {
 316   position: fixed;
 317   width: 100%;
 318   height: 100%;
 319   left: 0;
 320   top: 0;
 321   margin: 0;
 322   padding: 0;
 323   border: none;
 324 }
 325 #upLeftInfos {
 326   position: absolute;
 327   left: 0;
 328   top: 0;
 329 }
 330 #upRightStop {
 331   position: absolute;
 332   left: calc(100% - 25px);
 333   top: 0;
 334 }
 335 #upLeftInfos > svg, #upRightStop > svg {
 336   width: 25px;
 337   cursor: pointer;
 338 }
 339 @media(max-width: 767px) {
 340   #upRightStop {
 341     left: calc(100% - 35px);
 342   }
 343   #upLeftInfos > svg, #upRightStop > svg {
 344     width: 35px;
 345   }
 346   #upLeftInfos > svg path, #upRightStop > svg path {
 347     fill: #999;
 348   }
 349 }
 350 /* Playing board (without reserves) */
 351 .chessboard {
 352   position: absolute;
 353   cursor: pointer;
 354   min-width: 200px;
 355   min-height: 200px;
 356 }
 357 piece {
 358   position: absolute;
 359   top: 0;
 360   left: 0;
 361   background-size: cover;
 362   z-index: 2;
 363   will-change: transform;
 364   pointer-events: none;
 365 }
 366 piece.hidden {
 367   display: none;
 368 }
 369 /* Drawing of the board */
 370 .chessboard_SVG {
 371   width: 100%;
 372   height: 100%;
 373 }
 374 /* Default squares colors (can be overriden or unused) */
 375 .dark-square {
 376   fill: #b58863;
 377 }
 378 .light-square {
 379   fill: #f0d9b5;
 380 }
 381 .in-shadow {
 382   filter: brightness(50%);
 383 }
 384 .reserves {
 385   position: absolute;
 386   display: block;
 387   cursor: pointer;
 388 }
 389 .reserve-cell {
 390   position: relative;
 391   display: block;
 392   float: left;
 393 }
 394 /* Pieces' counter for reserves */
 395 .reserve-num {
 396   color: red;
 397   position: absolute;
 398   display: block;
 399   font-weight: bold;
 400 }
 401 /* Choices div after a promotion */
 402 #choices, .choice {
 403   position: absolute;
 404   cursor: pointer;
 405 }
 406
 407 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
 408 :root {
 409   --select-border: #777;
 410   --select-focus: #b11adc;
 411   --select-arrow: var(--select-border);
 412 }
 413 select {
 414   appearance: none;
 415   background-color: transparent;
 416   border: none;
 417   padding: 0 1em 0 0;
 418   margin: 0;
 419   width: 100%;
 420   font-family: inherit;
 421   font-size: inherit;
 422   cursor: inherit;
 423   line-height: inherit;
 424   z-index: 1;
 425   outline: none;
 426 }
 427 .select {
 428   display: grid;
 429   grid-template-areas: "select";
 430   align-items: center;
 431   position: relative;
 432   min-width: 15ch;
 433   max-width: 30ch;
 434   border: 1px solid var(--select-border);
 435   border-radius: 0.25em;
 436   padding: 0.25em 0.5em;
 437   font-size: 1.25rem;
 438   cursor: pointer;
 439   line-height: 1.1;
 440   background-color: #fff;
 441   background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
 442   width: 100%;
 443   margin: auto;
 444 }
 445 select, .select::after {
 446   grid-area: select;
 447 }
 448 .select::after {
 449   content: "";
 450   justify-self: end;
 451   width: 0.8em;
 452   height: 0.5em;
 453   background-color: var(--select-arrow);
 454   clip-path: polygon(100% 0%, 0 0%, 50% 100%);
 455 }
 456 select:focus + .focus {
 457   position: absolute;
 458   top: -1px;
 459   left: -1px;
 460   right: -1px;
 461   bottom: -1px;
 462   border: 2px solid var(--select-focus);
 463   border-radius: inherit;
 464 }
 465
 466 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
 467 .form-field {
 468   display: block;
 469   margin-bottom: 16px;
 470 }
 471 .form-field--is-active .form-field__control::after {
 472   border-bottom: 2px solid #b11adc;
 473   transform: scaleX(150);
 474 }
 475 .form-field--is-active .form-field__label {
 476   color: #b11adc;
 477   font-size: 0.75rem;
 478   transform: translateY(-14px);
 479 }
 480 .form-field--is-filled .form-field__label {
 481   font-size: 0.75rem;
 482   transform: translateY(-14px);
 483 }
 484 .form-field__label {
 485   display: block;
 486   font-size: 1.2rem;
 487   font-weight: normal;
 488   left: 0;
 489   margin: 0;
 490   padding: 18px 12px 0;
 491   position: absolute;
 492   top: 0;
 493   transition: all 0.4s;
 494   width: 100%;
 495 }
 496 .form-field__control {
 497   background: #eee;
 498   border-radius: 8px 8px 0 0;
 499   overflow: hidden;
 500   position: relative;
 501   width: 100%;
 502 }
 503 .form-field__control::after {
 504   border-bottom: 2px solid #b11adc;
 505   bottom: 0;
 506   content: "";
 507   display: block;
 508   left: 0;
 509   margin: 0 auto;
 510   position: absolute;
 511   right: 0;
 512   transform: scaleX(0);
 513   transition: all 0.4s;
 514   width: 1%;
 515 }
 516 .form-field__input {
 517   appearance: none;
 518   background: transparent;
 519   border: 0;
 520   border-bottom: 1px solid #999;
 521   color: #333;
 522   display: block;
 523   font-size: 1.2rem;
 524   margin-top: 24px;
 525   outline: 0;
 526   padding: 0 12px 10px 12px;
 527   width: 100%;
 528 }
 529
 530 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
 531 label.checkbox > input[type="checkbox"] {
 532   display: none;
 533 }
 534 label.checkbox > input[type="checkbox"] + *::before {
 535   content: "";
 536   display: inline-block;
 537   vertical-align: bottom;
 538   margin-bottom: 3px;
 539   width: 1.1rem;
 540   height: 1.1rem;
 541   border-radius: 10%;
 542   border-style: solid;
 543   border-width: 0.1rem;
 544   border-color: gray;
 545 }
 546 label.checkbox > input[type="checkbox"]:checked + *::before {
 547   content: "✓";
 548   font-size: 1.1rem;
 549   /*padding:10px;*/
 550   color: white;
 551   text-align: center;
 552   background: teal;
 553   border-color: teal;
 554 }
 555 label.checkbox > input[type="checkbox"]:checked + * {
 556   color: teal;
 557 }
 558 label.checkbox > span.spacer {
 559   width: 10px;
 560   content: " ";
 561 }
 562
 563 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
 564 :root{
 565   --loader-width: 70px;
 566   --loader-height: 70px;
 567   --loader-color-primary: #01786F;
 568   --loader-color-secondary: #EEE;
 569   --line-width: 3px;
 570   --animation-duration: 3s;
 571   --loader-initial-scale: 0.1;
 572 }
 573 .loader,.loader:before,.loader:after{
 574   box-sizing: border-box;
 575   flex-grow: 0;
 576   flex-shrink: 0;
 577 }
 578 @keyframes slide {
 579   0% {
 580     transform: translateY(0%);
 581   }
 582   25% {
 583     transform: translateY(100%);
 584   }
 585   50% {
 586     transform: translateY(100%);
 587   }
 588   75% {
 589     transform: translateY(0%);
 590   }
 591   100% {
 592     transform: translateY(0%);
 593   }
 594 }
 595 @keyframes spin {
 596   0% {
 597     transform: rotate(0deg);
 598   }
 599   25% {
 600     transform: rotate(0deg);
 601   }
 602   50% {
 603     transform: rotate(180deg);
 604   }
 605   75% {
 606     transform: rotate(180deg);
 607   }
 608   100% {
 609     transform: rotate(360deg);
 610   }
 611 }
 612 .loader.hour-glass {
 613   position: relative;
 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%);
 619   overflow: hidden;
 620   animation: spin var(--animation-duration, 4s) infinite ease-in-out;
 621   margin: 20px auto;
 622 }
 623 .hour-glass:before {
 624   content: "";
 625   position: absolute;
 626   top: 0px;
 627   left: 0px;
 628   width: var(--loader-width, 100px);
 629   height: 50%;
 630   background-color: var(--loader-color-secondary, #eee);
 631   animation: slide var(--animation-duration, 4s) infinite ease-in-out;
 632 }