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   overflow: auto;
 182 }
 183 .full-rules figure.show-pieces {
 184   max-width: 90%;
 185   text-align: center;
 186   margin: 0 auto;
 187 }
 188 .full-rules figure.show-pieces > img {
 189   max-width: 100px;
 190 }
 191 .full-rules > div {
 192   margin-bottom: 20px;
 193 }
 194 .full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
 195   font-weight: bold;
 196   display: block;
 197 }
 198 .full-rules h1 {
 199   font-size: 2.5em;
 200   margin: 10px 0 20px 0;
 201 }
 202 .full-rules h2 {
 203   color: darkred;
 204   font-size: 2em;
 205   margin: 10px 0;
 206 }
 207 .full-rules h3 {
 208   color: darkviolet;
 209   font-size: 1.8em;
 210   margin: 10px 0;
 211 }
 212 .full-rules h4 {
 213   color: darkgreen;
 214   font-size: 1.5em;
 215   margin: 5px 0;
 216   text-align: center;
 217 }
 218 piece.mark {
 219   background-image: url('/pieces/mark.svg');
 220 }
 221 piece.mark.transparent {
 222   opacity: 0.65;
 223 }
 224 .full-rules figure {
 225   display: block;
 226   overflow: visible;
 227   margin-top: 20px;
 228 }
 229 .full-rules figure::after {
 230   content: '';
 231   display: block;
 232   clear: both;
 233   margin-bottom: 20px;
 234 }
 235 .full-rules .diag {
 236   position: relative;
 237   margin: 0 auto;
 238 }
 239 .full-rules .left {
 240   float: left;
 241 }
 242 .full-rules .right {
 243   float: right;
 244 }
 245 @media screen and (max-width: 550px) {
 246   .full-rules .left {
 247     float: none;
 248     margin-bottom: 10px;
 249   }
 250   .full-rules .right {
 251     float: none;
 252     margin-top: 10px;
 253   }
 254 }
 255 .full-rules figcaption {
 256   display: block;
 257   text-align: center;
 258   clear: both;
 259   font-size: 0.9em;
 260   color: #0D1C46;
 261   font-weight: bold;
 262 }
 263 .full-rules .img-center {
 264   display: block;
 265   margin: 0 auto;
 266 }
 267 /* TODO: use same CSS for rules and full-rules? */
 268 .full-rules p, .full-rules ul, .full-rules ol {
 269   margin: 10px 0;
 270 }
 271 .full-rules ul {
 272   list-style-type: square;
 273   padding-left: 30px;
 274 }
 275 .full-rules ol {
 276   list-style-type: numeric;
 277   padding-left: 30px;
 278 }
 279
 280 #ng-select {
 281   margin-bottom: 20px;
 282 }
 283 /* Options when starting custom game */
 284 .words {
 285   line-height: 0.9em;
 286   margin-top: 15px;
 287 }
 288 .words > .row {
 289   margin: 0;
 290 }
 291 .words span {
 292   cursor: pointer;
 293   padding: 3px;
 294   display: inline-block;
 295   margin: 2px;
 296 }
 297 .highlight-word {
 298   background-color: lightblue;
 299 }
 300 #gameOptions {
 301   text-align: center;
 302 }
 303 .option-select, .option-input {
 304   margin: 15px 0 0 0;
 305 }
 306 .option-input {
 307   display: inline-block;
 308   margin-right: 10px;
 309 }
 310 .option-input input[type=number] {
 311   width: 64px;
 312 }
 313 .btn-wrap {
 314   text-align: center;
 315 }
 316
 317 #gameLink {
 318   width: inherit;
 319   text-align: center;
 320 }
 321 /* Game link div + custom game "button" */
 322 #gameLink span, #gameLink a, #footer a {
 323   padding-bottom: 1px;
 324   border-bottom: 1px dotted darkgrey;
 325   color: darkred;
 326 }
 327 #gameLink span {
 328   display: inline-box;
 329   cursor: pointer;
 330 }
 331 #gameLink > p {
 332   margin: 10px 0;
 333 }
 334
 335 /* Board container (with reserves) */
 336 #boardContainer {
 337   position: fixed;
 338   width: 100%;
 339   height: 100%;
 340   left: 0;
 341   top: 0;
 342   margin: 0;
 343   padding: 0;
 344   border: none;
 345 }
 346 #upLeftInfos {
 347   position: absolute;
 348   left: 0;
 349   top: 0;
 350 }
 351 #upRightStop {
 352   position: absolute;
 353   left: calc(100% - 25px);
 354   top: 0;
 355 }
 356 #upLeftInfos > svg, #upRightStop > svg {
 357   width: 25px;
 358   cursor: pointer;
 359 }
 360 @media(max-width: 767px) {
 361   #upRightStop {
 362     left: calc(100% - 35px);
 363   }
 364   #upLeftInfos > svg, #upRightStop > svg {
 365     width: 35px;
 366   }
 367   #upLeftInfos > svg path, #upRightStop > svg path {
 368     fill: #999;
 369   }
 370 }
 371 /* Playing board (without reserves) */
 372 .chessboard {
 373   position: absolute;
 374   cursor: pointer;
 375 }
 376 piece {
 377   position: absolute;
 378   top: 0;
 379   left: 0;
 380   background-size: cover;
 381   z-index: 2;
 382   will-change: transform;
 383   pointer-events: none;
 384 }
 385 piece.hidden {
 386   display: none;
 387 }
 388 /* Drawing of the board */
 389 .chessboard_SVG {
 390   width: 100%;
 391   height: 100%;
 392 }
 393 /* Default squares colors (can be overriden or unused) */
 394 .dark-square {
 395   fill: #b58863;
 396 }
 397 .light-square {
 398   fill: #f0d9b5;
 399 }
 400 .in-shadow {
 401   filter: brightness(50%);
 402 }
 403 .reserves {
 404   position: absolute;
 405   display: block;
 406   cursor: pointer;
 407 }
 408 .reserve-cell {
 409   position: relative;
 410   display: block;
 411   float: left;
 412 }
 413 /* Pieces' counter for reserves */
 414 .reserve-num {
 415   color: red;
 416   position: absolute;
 417   display: block;
 418   font-weight: bold;
 419 }
 420 /* Choices div after a promotion */
 421 #choices, .choice {
 422   position: absolute;
 423   cursor: pointer;
 424 }
 425
 426 /* https://moderncss.dev/custom-select-styles-with-pure-css/ */
 427 :root {
 428   --select-border: #777;
 429   --select-focus: #b11adc;
 430   --select-arrow: var(--select-border);
 431 }
 432 select {
 433   appearance: none;
 434   background-color: transparent;
 435   border: none;
 436   padding: 0 1em 0 0;
 437   margin: 0;
 438   width: 100%;
 439   font-family: inherit;
 440   font-size: inherit;
 441   cursor: inherit;
 442   line-height: inherit;
 443   z-index: 1;
 444   outline: none;
 445 }
 446 .select {
 447   display: grid;
 448   grid-template-areas: "select";
 449   align-items: center;
 450   position: relative;
 451   min-width: 15ch;
 452   max-width: 30ch;
 453   border: 1px solid var(--select-border);
 454   border-radius: 0.25em;
 455   padding: 0.25em 0.5em;
 456   font-size: 1.25rem;
 457   cursor: pointer;
 458   line-height: 1.1;
 459   background-color: #fff;
 460   background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
 461   width: 100%;
 462   margin: auto;
 463 }
 464 select, .select::after {
 465   grid-area: select;
 466 }
 467 .select::after {
 468   content: "";
 469   justify-self: end;
 470   width: 0.8em;
 471   height: 0.5em;
 472   background-color: var(--select-arrow);
 473   clip-path: polygon(100% 0%, 0 0%, 50% 100%);
 474 }
 475 select:focus + .focus {
 476   position: absolute;
 477   top: -1px;
 478   left: -1px;
 479   right: -1px;
 480   bottom: -1px;
 481   border: 2px solid var(--select-focus);
 482   border-radius: inherit;
 483 }
 484
 485 /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
 486 .form-field {
 487   display: block;
 488   margin-bottom: 16px;
 489 }
 490 .form-field--is-active .form-field__control::after {
 491   border-bottom: 2px solid #b11adc;
 492   transform: scaleX(150);
 493 }
 494 .form-field--is-active .form-field__label {
 495   color: #b11adc;
 496   font-size: 0.75rem;
 497   transform: translateY(-14px);
 498 }
 499 .form-field--is-filled .form-field__label {
 500   font-size: 0.75rem;
 501   transform: translateY(-14px);
 502 }
 503 .form-field__label {
 504   display: block;
 505   font-size: 1.2rem;
 506   font-weight: normal;
 507   left: 0;
 508   margin: 0;
 509   padding: 18px 12px 0;
 510   position: absolute;
 511   top: 0;
 512   transition: all 0.4s;
 513   width: 100%;
 514 }
 515 .form-field__control {
 516   background: #eee;
 517   border-radius: 8px 8px 0 0;
 518   overflow: hidden;
 519   position: relative;
 520   width: 100%;
 521 }
 522 .form-field__control::after {
 523   border-bottom: 2px solid #b11adc;
 524   bottom: 0;
 525   content: "";
 526   display: block;
 527   left: 0;
 528   margin: 0 auto;
 529   position: absolute;
 530   right: 0;
 531   transform: scaleX(0);
 532   transition: all 0.4s;
 533   width: 1%;
 534 }
 535 .form-field__input {
 536   appearance: none;
 537   background: transparent;
 538   border: 0;
 539   border-bottom: 1px solid #999;
 540   color: #333;
 541   display: block;
 542   font-size: 1.2rem;
 543   margin-top: 24px;
 544   outline: 0;
 545   padding: 0 12px 10px 12px;
 546   width: 100%;
 547 }
 548
 549 /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
 550 label.checkbox > input[type="checkbox"] {
 551   display: none;
 552 }
 553 label.checkbox > input[type="checkbox"] + *::before {
 554   content: "";
 555   display: inline-block;
 556   vertical-align: bottom;
 557   margin-bottom: 3px;
 558   width: 1.1rem;
 559   height: 1.1rem;
 560   border-radius: 10%;
 561   border-style: solid;
 562   border-width: 0.1rem;
 563   border-color: gray;
 564 }
 565 label.checkbox > input[type="checkbox"]:checked + *::before {
 566   content: "✓";
 567   font-size: 1.1rem;
 568   /*padding:10px;*/
 569   color: white;
 570   text-align: center;
 571   background: teal;
 572   border-color: teal;
 573 }
 574 label.checkbox > input[type="checkbox"]:checked + * {
 575   color: teal;
 576 }
 577 label.checkbox > span.spacer {
 578   width: 10px;
 579   content: " ";
 580 }
 581
 582 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
 583 :root{
 584   --loader-width: 70px;
 585   --loader-height: 70px;
 586   --loader-color-primary: #01786F;
 587   --loader-color-secondary: #EEE;
 588   --line-width: 3px;
 589   --animation-duration: 3s;
 590   --loader-initial-scale: 0.1;
 591 }
 592 .loader,.loader:before,.loader:after{
 593   box-sizing: border-box;
 594   flex-grow: 0;
 595   flex-shrink: 0;
 596 }
 597 @keyframes slide {
 598   0% {
 599     transform: translateY(0%);
 600   }
 601   25% {
 602     transform: translateY(100%);
 603   }
 604   50% {
 605     transform: translateY(100%);
 606   }
 607   75% {
 608     transform: translateY(0%);
 609   }
 610   100% {
 611     transform: translateY(0%);
 612   }
 613 }
 614 @keyframes spin {
 615   0% {
 616     transform: rotate(0deg);
 617   }
 618   25% {
 619     transform: rotate(0deg);
 620   }
 621   50% {
 622     transform: rotate(180deg);
 623   }
 624   75% {
 625     transform: rotate(180deg);
 626   }
 627   100% {
 628     transform: rotate(360deg);
 629   }
 630 }
 631 .loader.hour-glass {
 632   position: relative;
 633   width: var(--loader-width, 100px);
 634   height: var(--loader-height, 100px);
 635   background-color: var(--loader-color-primary, #00f);
 636   -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 637   clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 638   overflow: hidden;
 639   animation: spin var(--animation-duration, 4s) infinite ease-in-out;
 640   margin: 20px auto;
 641 }
 642 .hour-glass:before {
 643   content: "";
 644   position: absolute;
 645   top: 0px;
 646   left: 0px;
 647   width: var(--loader-width, 100px);
 648   height: 50%;
 649   background-color: var(--loader-color-secondary, #eee);
 650   animation: slide var(--animation-duration, 4s) infinite ease-in-out;
 651 }