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                            */

  z-index: 1001;
  transform-origin: left top;

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

  &__container {
    position: relative;
    width: 0;
    height: 0;
  }


  &__coordinates, &__user {
    background-color: rgba(221, 221, 221, 0.404);
    position: absolute;
    top: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    z-index: 1008;
  }

  &__coordinates {
    left: 1rem;
  }

  &__user {
    right: 1rem;

    &.logged-in::after {
      content: "(logout)";
      position: absolute;
      display: block;
      color: #fff;
      text-shadow: 1px 1px #000;
      text-decoration: none;
      font-size: 0.8rem;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

  &__cursor {
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1002;
    width: 1px;
    height: 1px;
    background: url('data:image/png;base64,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dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo1MGFkNWM1Mi0xMWZkLTQ2ZDktOWQzMy0wODBhZDBlZmRkOGIiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjQxMTYxOWUtYTRhZC00OTQzLWE5MDEtMTMyODk4MjFkYjMyIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Mzc0YzA0MGItMjNlMy00ZDllLWI0ZWQtYWE5ZGJkMzVlZTBkIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNjQ4ODkwNjQ1MTM0NTU2IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzAiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDBiNzUzOTItOTU0NS00YzY3LTlhN2MtNGJjMmU5ZGIxM2E4IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wNC0wMlQxMjoxMDo0NSswMzowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7Mc7bvAAAABmJLR0QAVACzAPRJGKQ4AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gQCCQot46GzBAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAFdSURBVHja7d2xjYMwAEBROKVjC1p6CobwLB7FszAERXqXsAV1rroW54RQgvzeAAjZX0bYiWjHcXw1X+z5fLbNjYUQvnp8fxqqJgABIAAEgAAQALVpS/sA0zRdegMppbbmCYgxXrpPsG2bFQABIAAEgAAQAALgz2Pfd+/xH3R2/Er7COu6WgEQAAJAAAgAASAABIAAEIAADIEAEAACQADUpx2G4fA8OefsvP/GSvNrBfAIQAAIAAEgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADApdoQwuF35eZ59t3AGxvH0XcDEQACQAAIAAEgAN7eB+j7/vACKSX7BB8UYzycv2VZrAAIAAEgAASAABAAAkAACEAAhkAACAABIADq8zh7gdJ5dEntvyc4O35WAASAABAAAkAACIB/KP4voGRd10tvMOd8632CYRgufc/vus4KgAAQAAJAAAgAAfCuX64yPUr2kCHkAAAAAElFTkSuQmCC');
    background-size: contain;
    background-repeat: no-repeat;

    &-placer {
      position: absolute;
      min-width: 100px;
      background: white;
      box-shadow: 0px 1px 8px #5e5e5e;
      display: block;
      margin: 0 auto;
      border-radius: 20px;
      text-align: center;
      padding: 0.5rem;
      transform-origin: top center;
      transform: translateY(calc(var(--base-size) * -1)) scale(var(--base-scale));

      &::after {
        content: "";
        height: 16px;
        width: 16px;
        background: white;
        margin: 0 auto;
        transform: rotate(45deg);
        position: absolute;
        left: calc(50% - 8px);
        display: block;
        bottom: -8px;
      }
    }
  }
}

.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 {
    flex-wrap: wrap;
    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;
  }

  .btn-palette.pickable {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    &::after {
      content: '';
      width: 10px;
      height: 10px;
      margin-left: 4px;
      display: inline-block;
      background-color: var(--pick-color);
    }
  }
}