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