redemption/source/plugins/multiverse/sass/components/_poptrox-popup.scss

///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Poptrox Popup */

	.poptrox-overlay {
		-webkit-tap-highlight-color: rgba(255,255,255,0);
	}

	.poptrox-popup {
		background: transparentize(_palette(bg-alt), 0.075);
		box-shadow: 0 1em 3em 0.5em rgba(0,0,0,0.25);
		cursor: default;

		&:before {
			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
			@include vendor('background-image', (
				'linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))',
				'linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))'
			));
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
			opacity: 1;
		}

		.closer {
			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
			background-image: url('images/close.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 3em;
			height: 5em;
			opacity: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 5em;
			z-index: 2;
		}

		.nav-previous,
		.nav-next {
			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
			background-image: url('images/arrow.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 5em;
			cursor: pointer;
			height: 8em;
			margin-top: -4em;
			opacity: 0;
			position: absolute;
			top: 50%;
			width: 6em;
			z-index: 2;
		}

		.nav-previous {
			@include vendor('transform', 'scaleX(-1)');
			left: 0;
		}

		.nav-next {
			right: 0;
		}

		.caption {
			@include padding(2em, 2em);
			@include vendor('background-image', 'linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%)');
			bottom: 0;
			cursor: default;
			left: 0;
			position: absolute;
			text-align: left;
			width: 100%;
			z-index: 2;

			h2, h3, h4, h5, h6 {
				margin: 0 0 (_size(element-margin) * 0.25) 0;
			}

			p {
				color: _palette(fg-bold);
			}
		}

		.loader {
			@include vendor('animation', 'spinner 1s infinite linear !important');
			background-image: url('images/spinner.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			display: block;
			font-size: 2em;
			height: 2em;
			left: 50%;
			line-height: 2em;
			margin: -1em 0 0 -1em;
			opacity: 0.25;
			position: absolute;
			text-align: center;
			top: 50%;
			width: 2em;
		}

		&:hover {
			.closer,
			.nav-previous,
			.nav-next {
				opacity: 0.5;

				&:hover {
					opacity: 1.0;
				}
			}
		}

		&.loading {
			&:before {
				opacity: 0;
			}
		}

		body.touch & {
			.closer,
			.nav-previous,
			.nav-next {
				opacity: 1.0 !important;
			}
		}

		@include breakpoint('<=medium') {
			.closer {
				background-size: 3em;
			}

			.nav-previous,
			.nav-next {
				background-size: 4em;
			}
		}

		@include breakpoint('<=small') {
			&:before {
				display: none;
			}

			.caption {
				display: none !important;
			}

			.closer,
			.nav-previous,
			.nav-next {
				display: none !important;
			}
		}
	}