lychee/src/styles/_imageview.scss

/**
 * @copyright   2014 by Tobias Reich
 */

#imageview {

	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(10, 10, 10, .98);
	transition: background-color .3s;

	/* Modes ------------------------------------------------*/
	&.view { background-color: inherit; }

	&.full { background-color: rgba(0, 0, 0, 1); }

	/* ImageView ------------------------------------------------*/
	#image {
		position: absolute;
		top: 60px;
		right: 30px;
		bottom: 30px;
		left: 30px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(.51, .92, .24, 1.15);
		animation-name: zoomIn;
		animation-duration: .3s;
		animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);

		&.small {
			top: 50%;
			right: auto;
			bottom: auto;
			left: 50%;
		}

		&.full {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	/* Previous/Next Buttons ------------------------------------------------*/
	.arrow_wrapper {
		position: fixed;
		width: 20%;
		height: calc(100% - 60px);
		top: 60px;
		z-index: 1;

		&.previous { left: 0; }

		&.next { right: 0; }

		a#previous { left: 20px; }

		a#next { right: 20px; }

		a {
			position: fixed;
			top: 50%;
			margin-top: -10px;
			color: #fff;
			font-size: 50px;
			text-shadow: 0 1px 2px #000;
			cursor: pointer;
			opacity: 0;
			z-index: 2;
			transition: opacity .2s;
		}

		&:hover a { opacity: .2; }
	}

}