icydraw/src/client/scss/index.scss

*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */

  position: absolute;
  z-index: 1001;
  transform-origin: center center;

  &__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgb(143, 143, 143);
  }

  &__container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
  }

  &__cursor {
    position: absolute;
    z-index: 1002;
    width: 1px;
    height: 1px;
    background: url('data:image/png;base64,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dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo1MGFkNWM1Mi0xMWZkLTQ2ZDktOWQzMy0wODBhZDBlZmRkOGIiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjQxMTYxOWUtYTRhZC00OTQzLWE5MDEtMTMyODk4MjFkYjMyIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Mzc0YzA0MGItMjNlMy00ZDllLWI0ZWQtYWE5ZGJkMzVlZTBkIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNjQ4ODkwNjQ1MTM0NTU2IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzAiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDBiNzUzOTItOTU0NS00YzY3LTlhN2MtNGJjMmU5ZGIxM2E4IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wNC0wMlQxMjoxMDo0NSswMzowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAg
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-align: center;
  background-color: rgba(221, 221, 221, 0.404);

  *.btn, input, a {
    pointer-events: all;
  }

  &__wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1003;
    pointer-events: none;
  }

  &__colors {
    justify-content: center;
    counter-reset: colorindex;

    &, &-history {
      display: flex;
      flex-direction: row;
      gap: 0.25rem;
      align-items: center;
    }
  }

  &__color {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    position: relative;
    counter-increment: colorindex;

    &::after {
      content: counter(colorindex);
      position: relative;
      color: #fff;
      text-shadow: 2px 2px #000;
      top: -8px;
      right: -8px;
    }
  }

  .btn-place {
    font-size: 1.4rem;
    padding: 0.5rem 1.25rem;
  }
}