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