spur-tailwind/css/components/tour-popout.css

Spur web UI

.tour-popout {
  @apply z-20 max-w-xs text-white leading-tight rounded-md shadow-md;
}

.tour-popout-title {
  @apply px-4 py-2 bg-dead-state-purple rounded-t-md font-semibold leading-none;
  background-color: #676778;
}

.tour-popout-content {
  @apply p-4 bg-spur-black rounded-b-md;

  & > :first-child {
    @apply mt-0;
  }

  & > :last-child {
    @apply mb-0;
  }
}

.tour-popout-content p {
  @apply my-4;
}

.tour-popout[x-placement='top-start']::after,
.tour-popout[x-placement='top']::after,
.tour-popout[x-placement='top-end']::after,
.tour-popout[x-placement='bottom-start']::after,
.tour-popout[x-placement='bottom']::after,
.tour-popout[x-placement='bottom-end']::after,
.tour-popout[x-placement='left-start']::after,
.tour-popout[x-placement='left']::after,
.tour-popout[x-placement='left-end']::after,
.tour-popout[x-placement='right-start']::after,
.tour-popout[x-placement='right']::after,
.tour-popout[x-placement='right-end']::after {
  @apply absolute block text-spur-black text-xl leading-none;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: -1;
  font-size: 2rem;
}

.tour-popout[x-placement='top']::after,
.tour-popout[x-placement='bottom']::after {
  left: 50%;
  transform: scale(2, 1) translateX(-25%);
}

.tour-popout[x-placement='top-start']::after,
.tour-popout[x-placement='bottom-start']::after {
  left: 2rem;
  transform: scale(2, 1);
}

.tour-popout[x-placement='top-end']::after,
.tour-popout[x-placement='bottom-end']::after {
  right: 2rem;
  transform: scale(2, 1);
}

.tour-popout[x-placement='top-start']::after,
.tour-popout[x-placement='top']::after,
.tour-popout[x-placement='top-end']::after {
  bottom: -1.25rem;
  content: '▼';
}

.tour-popout[x-placement='bottom-start']::after,
.tour-popout[x-placement='bottom']::after,
.tour-popout[x-placement='bottom-end']::after {
  top: -1.375rem;
  content: '▲';
}

.tour-popout[x-placement='left']::after,
.tour-popout[x-placement='right']::after {
  top: 50%;
  transform: scale(1, 2) translateY(-37.5%);
}

.tour-popout[x-placement='left-start']::after,
.tour-popout[x-placement='right-start']::after {
  top: 2rem;
  transform: scale(1, 2);
}

.tour-popout[x-placement='left-end']::after,
.tour-popout[x-placement='right-end']::after {
  bottom: 2rem;
  transform: scale(1, 2);
}

.tour-popout[x-placement='left-start']::after,
.tour-popout[x-placement='left']::after,
.tour-popout[x-placement='left-end']::after {
  right: -1rem;
  content: '►';
}

.tour-popout[x-placement='right-start']::after,
.tour-popout[x-placement='right']::after,
.tour-popout[x-placement='right-end']::after {
  left: -1rem;
  content: '◄';
}