@fancyapps/ui/src/Fancybox/scss/base.scss

JavaScript UI Component Library

html.with-fancybox {
  scroll-behavior: auto;
}

body.compensate-for-scrollbar {
  overflow: hidden !important;
  touch-action: none;
}

.fancybox__container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  direction: ltr;

  margin: 0;
  padding: $fancybox-container-padding;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  color: $fancybox-container-color;
  -webkit-tap-highlight-color: transparent;

  overflow: hidden;
  z-index: 1050;
  outline: none;
  transform-origin: top left;

  & *,
  & *::before,
  & *::after {
    box-sizing: inherit;
  }

  & :focus {
    outline: none;
  }

  body:not(.is-using-mouse) & :focus {
    box-shadow: $fancybox-focus-shadow;
  }

  --carousel-button-width: 48px;
  --carousel-button-height: 48px;

  --carousel-button-svg-width: 24px;
  --carousel-button-svg-height: 24px;

  --carousel-button-svg-stroke-width: 2.5;
  --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));

  @include fancybox-breakpoint(container);
}

.fancybox__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: $fancybox-backdrop-bg;

  @include fancybox-breakpoint(backdrop);
}

.fancybox__carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;

  /* For Safari */
  height: 100%;

  z-index: 10;

  &.has-dots {
    margin-bottom: calc(#{$carousel-dots-margin} + #{$carousel-dots-height});
  }

  @include fancybox-breakpoint(carousel);
}

.fancybox__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: default;
}

.fancybox__track {
  display: flex;
  height: 100%;
}

.fancybox__slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: $fancybox-slide-padding;

  position: relative;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;

  outline: 0;
  overflow: auto;

  &::before,
  &::after {
    content: "";
    flex: 0 0 0;
    margin: auto;
  }

  --carousel-button-width: 36px;
  --carousel-button-height: 36px;

  --carousel-button-svg-width: 22px;
  --carousel-button-svg-height: 22px;

  @include fancybox-breakpoint(slide);
}

.fancybox__content {
  margin: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  padding: $fancybox-content-padding;
  color: $fancybox-content-color;
  background: $fancybox-content-bg;

  position: relative;
  align-self: center;

  display: flex;
  flex-direction: column;

  z-index: 20;

  @include fancybox-breakpoint(content);

  & :focus:not(.carousel__button.is-close) {
    outline: thin dotted;
    box-shadow: none;
  }
}

.fancybox__caption {
  align-self: center;
  max-width: 100%;
  margin: $fancybox-caption-margin;
  padding: $fancybox-caption-padding;
  line-height: $fancybox-caption-line-height;
  color: $fancybox-caption-color;

  visibility: visible;
  cursor: auto;
  flex-shrink: 0;

  overflow-wrap: anywhere;

  .is-loading & {
    visibility: hidden;
  }

  @include fancybox-breakpoint(caption);
}

.fancybox__container > .carousel__dots {
  top: 100%;
  color: $fancybox-container-color;
}

.fancybox__nav {
  @include fancybox-breakpoint(nav);

  & .carousel__button {
    z-index: 40;

    &.is-next {
      right: 8px;

      @include fancybox-breakpoint(button-next);
    }

    &.is-prev {
      left: 8px;

      @include fancybox-breakpoint(button-prev);
    }
  }
}

.carousel__button.is-close {
  position: absolute;
  top: 8px;
  right: 8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);

  z-index: 40;

  @include fancybox-breakpoint(button-close-outside);
}

/* Close button located inside content area */
.fancybox__content > .carousel__button.is-close {
  position: absolute;
  top: -40px;
  right: 0;

  color: var(--fancybox-color, #fff);

  @include fancybox-breakpoint(button-close-inside);
}

.fancybox__no-click,
.fancybox__no-click button {
  pointer-events: none;
}