StashApp - Lightbox - Fade Transitions by stashtastic

/* ==UserStyle==
@name         StashApp - Lightbox - Fade Transitions
@version      20241223.19.18
@namespace    https://userstyles.world/user/stashtastic
@description  Fade transitions between images. Overrides the slide in/out behavior.
@author       stashtastic
==/UserStyle== */

@-moz-document url-prefix("http://localhost:9999/") {
/* Variables */
:root {
	/* How long to wait before changing to the next image */
	--delay: 0.2s;

	/* How long to fade in or fade out. Multiply --delay by ~5x for a good ratio */
	--speed: 1.0s;
}

.Lightbox-carousel
{
	/* Override Lightbox image "sliding" animation:
	  1) Wait before sliding (--delay)
	  2) Animation completes instantly (0s)
	*/
	transition: left 0s ease var(--delay);
}

/* All images in carousel: Invisible by default */
.Lightbox-carousel > .Lightbox-carousel-image
{
	opacity: 0.0;
	transition: opacity var(--speed) ease 0s; /* Fade in/out */
}

/* Current image - First on page */
.Lightbox-carousel
  > .Lightbox-carousel-image:nth-child(1):not(:empty):has(
    + .Lightbox-carousel-image:not(:empty)
    + .Lightbox-carousel-image:empty),
/* Current image - Last on page */
.Lightbox-carousel
  > .Lightbox-carousel-image:nth-last-child(3):empty
  + .Lightbox-carousel-image:not(:empty)
  + .Lightbox-carousel-image:not(:empty):last-of-type,
/* Current image: Neither first nor last */
.Lightbox-carousel
  > .Lightbox-carousel-image:has(.Lightbox-carousel-image)
  + .Lightbox-carousel-image:has(.Lightbox-carousel-image):not(:has(
    + .Lightbox-carousel-image:empty)):not(:last-of-type),
/* Single image on page */
.Lightbox-carousel
  > .Lightbox-carousel-image:only-child,
/* 2-image gallery: First image */
.Lightbox-carousel[style="left: 0vw;"]
    > .Lightbox-carousel-image:nth-child(1):has(
	  + .Lightbox-carousel-image:last-of-type),
/* 2-image gallery: Second image */
.Lightbox-carousel[style*="left: -1"]
    > .Lightbox-carousel-image:nth-child(1)
	+ .Lightbox-carousel-image:not(:has(+ .Lightbox-carousel-image))
{
	opacity: 1.0; /* Current image is visible */
}

}