nextine/src/core/components/VerifyPage/verify_page.module.css

Admin Template with NextJS & Mantine UI v7

.wrapper {
  background-color: light-dark(
    var(--mantine-color-white),
    var(--mantine-color-dark-7)
  );
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.avatar {
  height: 15vmin;
  width: 15vmin;
  border-radius: 72px;
  pointer-events: none;
  background-color: light-dark(
    var(--mantine-color-white),
    var(--mantine-color-dark-7)
  );
  box-shadow: 0 0 0 0 rgba(52, 152, 219, 1);
  margin: 10px;
  font-size: 15vmin;
  line-height: 15vmin;
  animation: pulse infinite 1.2 linear;
}

.anim {
  animation: pulse infinite 1s linear;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(52, 152, 219, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
  }
}

.text_writer {
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid black;
  animation:
    typewriter 1.8s steps(12) infinite alternate,
    blink 800ms steps(12) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes blink {
  from {
    border-color: black;
  }

  to {
    border-color: transparent;
  }
}