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