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