Mailspring/static/components/tutorial-overlay.less

tutorial-tip-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity ease-in-out 250ms;
  background-color: rgba(0,0,0,0.25);
  -webkit-mask-image: linear-gradient(to top, #fff 0%, #aaa 100%), url("data:image/png;base64,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
  -webkit-mask-composite: xor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, 128px 128px;
}

tutorial-tip-background.visible {
  pointer-events: inherit;
  opacity: 1;
}

.tutorial-tip {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid white;
  cursor: pointer;
  pointer-events: none;
  z-index: 100;
  transform: translate3d(-50%,-50%,0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(241, 170, 211)), to(rgb(185, 59, 255)));
  opacity: 0;
  transition: opacity ease-out 100ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tutorial-tip.visible {
  opacity: 1;
}

body {
  background: #000;
}

.tutorial-tip.visible:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';

  border: 1px solid rgb(185, 59, 255);
  transform-origin: 0.4 0.4;

  animation: sonarEffect 3s ease-out 75ms;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 0.5;
    transform: scale3d(1, 1, 1);
  }
  80% {
    opacity: 0.4;
    transform: scale3d(2.6, 2.6, 2.6);
  }
  100% {
    opacity: 0;
    transform: scale3d(3, 3, 3);
  }
}