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