htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/multimedia/_galleria.scss

// core
.p-galleria-content {
  display: flex;
  flex-direction: column;
}

.p-galleria-item-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.p-galleria-item-container {
  position: relative;
  display: flex;
  height: 100%;
}

.p-galleria-item-nav {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.p-galleria-item-prev {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.p-galleria-item-next {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p-galleria-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.p-galleria-item-nav-onhover .p-galleria-item-nav {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.p-galleria-item-nav-onhover
  .p-galleria-item-wrapper:hover
  .p-galleria-item-nav {
  pointer-events: all;
  opacity: 1;
}

.p-galleria-item-nav-onhover
  .p-galleria-item-wrapper:hover
  .p-galleria-item-nav.p-disabled {
  pointer-events: none;
}

.p-galleria-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Thumbnails */
.p-galleria-thumbnail-wrapper {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex-shrink: 0;
}

.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
  align-self: center;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.p-galleria-thumbnail-prev span,
.p-galleria-thumbnail-next span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-galleria-thumbnail-container {
  display: flex;
  flex-direction: row;
}

.p-galleria-thumbnail-items-container {
  overflow: hidden;
  width: 100%;
}

.p-galleria-thumbnail-items {
  display: flex;
}

.p-galleria-thumbnail-item {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
}

.p-galleria-thumbnail-item:hover {
  opacity: 1;
  transition: opacity 0.3s;
}

.p-galleria-thumbnail-item-current {
  opacity: 1;
}

/* Positions */
/* Thumbnails */
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
  flex-direction: row;
}

.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
  flex-direction: row;
}

.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
  order: 2;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
  order: 1;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
  flex-direction: column;
  flex-grow: 1;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
  flex-direction: column;
  height: 100%;
}

/* Indicators */
.p-galleria-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-galleria-indicator > button {
  display: inline-flex;
  align-items: center;
}

.p-galleria-indicators-left .p-galleria-item-wrapper,
.p-galleria-indicators-right .p-galleria-item-wrapper {
  flex-direction: row;
  align-items: center;
}

.p-galleria-indicators-left .p-galleria-item-container,
.p-galleria-indicators-top .p-galleria-item-container {
  order: 2;
}

.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-top .p-galleria-indicators {
  order: 1;
}

.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-right .p-galleria-indicators {
  flex-direction: column;
}

.p-galleria-indicator-onitem .p-galleria-indicators {
  position: absolute;
  display: flex;
  z-index: 1;
}

.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
  top: 0;
  left: 0;
  width: 100%;
  align-items: flex-start;
}

.p-galleria-indicator-onitem.p-galleria-indicators-right
  .p-galleria-indicators {
  right: 0;
  top: 0;
  height: 100%;
  align-items: flex-end;
}

.p-galleria-indicator-onitem.p-galleria-indicators-bottom
  .p-galleria-indicators {
  bottom: 0;
  left: 0;
  width: 100%;
  align-items: flex-end;
}

.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
  left: 0;
  top: 0;
  height: 100%;
  align-items: flex-start;
}

/* FullScreen */
.p-galleria-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-galleria-close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.p-galleria-mask .p-galleria-item-nav {
  position: fixed;
  top: 50%;
  margin-top: -0.5rem;
}

/* Animation */
.p-galleria-enter-active {
  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}

.p-galleria-leave-active {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.p-galleria-enter-from,
.p-galleria-leave-to {
  opacity: 0;
  transform: scale(0.7);
}

.p-galleria-enter-active .p-galleria-item-nav {
  opacity: 0;
}

/* Keyboard Support */
.p-items-hidden .p-galleria-thumbnail-item {
  visibility: hidden;
}

.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
  visibility: visible;
}

// theme
.p-galleria {
  .p-galleria-close {
    margin: $galleriaCloseIconMargin;
    background: $galleriaCloseIconBg;
    color: $galleriaCloseIconColor;
    width: $galleriaCloseIconWidth;
    height: $galleriaCloseIconHeight;
    transition: $actionIconTransition;
    border-radius: $galleriaCloseIconBorderRadius;

    .p-galleria-close-icon {
      font-size: $galleriaCloseIconFontSize;
    }

    .p-icon {
      width: $galleriaCloseIconFontSize;
      height: $galleriaCloseIconFontSize;
    }

    &:hover {
      background: $galleriaCloseIconHoverBg;
      color: $galleriaCloseIconHoverColor;
    }
  }

  .p-galleria-item-nav {
    background: $galleriaItemNavigatorBg;
    color: $galleriaItemNavigatorColor;
    width: $galleriaItemNavigatorWidth;
    height: $galleriaItemNavigatorHeight;
    transition: $actionIconTransition;
    border-radius: $galleriaItemNavigatorBorderRadius;
    margin: $galleriaItemNavigatorMargin;

    .p-galleria-item-prev-icon,
    .p-galleria-item-next-icon {
      font-size: $galleriaItemNavigatorFontSize;
    }

    .p-icon {
      width: $galleriaCloseIconFontSize;
      height: $galleriaCloseIconFontSize;
    }

    &:not(.p-disabled) {
      &:hover {
        background: $galleriaItemNavigatorHoverBg;
        color: $galleriaItemNavigatorHoverColor;
      }
    }
  }

  .p-galleria-caption {
    background: $galleriaCaptionBg;
    color: $galleriaCaptionTextColor;
    padding: $galleriaCaptionPadding;
  }

  .p-galleria-indicators {
    padding: $galleriaIndicatorsPadding;

    .p-galleria-indicator {
      button {
        background-color: $galleriaIndicatorBg;
        width: $galleriaIndicatorWidth;
        height: $galleriaIndicatorHeight;
        transition: $actionIconTransition;
        border-radius: $galleriaIndicatorBorderRadius;

        &:hover {
          background: $galleriaIndicatorHoverBg;
        }
      }

      &.p-highlight {
        button {
          background: $highlightBg;
          color: $highlightTextColor;
        }
      }
    }
  }

  &.p-galleria-indicators-bottom,
  &.p-galleria-indicators-top {
    .p-galleria-indicator {
      margin-right: $inlineSpacing;
    }
  }

  &.p-galleria-indicators-left,
  &.p-galleria-indicators-right {
    .p-galleria-indicator {
      margin-bottom: $inlineSpacing;
    }
  }

  &.p-galleria-indicator-onitem {
    .p-galleria-indicators {
      background: $galleriaIndicatorsBgOnItem;

      .p-galleria-indicator {
        button {
          background: $galleriaIndicatorBgOnItem;

          &:hover {
            background: $galleriaIndicatorHoverBgOnItem;
          }
        }

        &.p-highlight {
          button {
            background: $highlightBg;
            color: $highlightTextColor;
          }
        }
      }
    }
  }

  .p-galleria-thumbnail-container {
    background: $galleriaThumbnailContainerBg;
    padding: $galleriaThumbnailContainerPadding;

    .p-galleria-thumbnail-prev,
    .p-galleria-thumbnail-next {
      margin: $inlineSpacing;
      background-color: $galleriaThumbnailNavigatorBg;
      color: $galleriaThumbnailNavigatorColor;
      width: $galleriaThumbnailNavigatorWidth;
      height: $galleriaThumbnailNavigatorHeight;
      transition: $actionIconTransition;
      border-radius: $galleriaThumbnailNavigatorBorderRadius;

      &:hover {
        background: $galleriaThumbnailNavigatorHoverBg;
        color: $galleriaThumbnailNavigatorHoverColor;
      }
    }

    .p-galleria-thumbnail-item-content {
      outline-color: transparent;

      &:focus-visible {
        @include focused();
      }
    }
  }
}

.p-galleria-mask {
  --maskbg: #{$galleriaMaskBg};
}