client/src/assets/scss/main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
  font-family: 'Upheaval';
  src: url('../fonts/upheavtt.ttf');
}

//Globals

body {
  @apply bg-black m-0 select-none;
  -ms-overflow-style: none;
  scrollbar-width: none;

  // Disable selection, might wanna comment when debugging
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

  // Disable pinch zoom
  touch-action: pan-x pan-y;

  // Add custom focus outline
  *:focus-visible {
    @apply outline-gray-300;
    @apply outline;
    @apply outline-offset-2;
    @apply rounded-sm;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
a {
  @apply font-default text-gray-200 font-medium m-0;
}

p,
span,
li,
label {
  @apply font-default text-gray-200;
}

button,
a {
  @apply font-medium;
}

button,
input {
  @apply border-none bg-transparent;

  &[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  &[type='number']::-webkit-inner-spin-button,
  &[type='number']::-webkit-outer-spin-button,
  &[type='radio'] {
    -webkit-appearance: none;
  }
}

.input-field {
  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300 font-default;
  &:focus-visible {
    @apply outline-none border-cyan rounded bg-gray-900;
  }
  &::placeholder {
    @apply focus-visible:text-gray-300/50;
  }
  &.inactive {
    @apply bg-gray-600/50 hover:cursor-not-allowed;
    &::placeholder {
      @apply text-gray-300/50;
    }
  }
}

select {
  &.input-field {
    @apply appearance-none bg-[url('/assets/icons/mapEditor/dropdown-chevron.svg')] bg-no-repeat bg-[calc(100%_-_10px)_center] bg-[length:20px] text-white;
  }
}

.form-field-full {
  @apply w-full flex flex-col mb-5;
  label {
    @apply mb-1.5 font-titles;
  }
}
.form-field-half {
  @apply w-[calc(50%_-_5px)] flex flex-col mb-5;
  label {
    @apply mb-1.5 font-titles;
  }
}

button {
  @apply text-center;

  &.btn-cyan {
    @apply bg-cyan text-gray-50 text-base leading-5 rounded py-2.5;

    &.active,
    &:hover {
      @apply bg-cyan-800;
    }
  }

  &.btn-red {
    @apply bg-red-300 text-gray-50 text-base leading-5 rounded py-2.5;

    &.active,
    &:hover {
      @apply bg-red-400;
    }
  }

  &.btn-indigo {
    @apply bg-indigo-500 text-gray-50 text-base leading-5 rounded py-2.5;

    &.active,
    &:hover {
      @apply bg-indigo-600;
    }
  }

  &.btn-empty {
    @apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;

    &.active,
    &.selected,
    &:hover {
      @apply bg-gray border-gray;
    }
  }

  &:hover {
    @apply cursor-pointer;
  }

  &.eye-open {
    @apply bg-[url('/assets/icons/eye-closed.svg')] w-5 h-4 right-2.5;
  }

  &.selected {
    @apply bg-gray-500 border-gray-400;
  }
}

.character.active {
  @apply bg-gray bg-none;
}

.list-open {
  @apply w-[calc(75%_-_40px)] max-xl:w-[calc(100%_-_360px)];
}

.hair-deselect:has(:checked) {
  img {
    @apply brightness-200;
  }
}

.default-border {
  @apply border border-solid border-gray-500;
}

.center-element {
  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
}

.text-pixel {
  @apply text-white font-ui drop-shadow-pixel-black;
}

::-webkit-scrollbar {
  @apply hidden;
}

.scrollbar {
  &::-webkit-scrollbar {
    @apply block w-0.5 bg-gray-300 rounded-sm;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-gray-175;
  }
}

canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  position: fixed;
  left: 0;
  top: 0;
}