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