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