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