Fixed option handling

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / imageViewer.less

#lbOverlay {
	background-color: #000;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 399;
}

#lbPrevLink,
#lbNextLink {
	display: block;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
	
	.transition(opacity, .2s);
	
	> span {
		background-color: #fff;
		padding: @wcfGapSmall;
		position: absolute;
		text-transform: uppercase;
		top: 20%;
	}
	
	&:hover > span {
		.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px); /* todo */
	}
}

#lbPrevLink {
	left: 0;
	
	> span {
		left: 0;
		padding-right: @wcfGapMedium;
		text-align: right;
		
		.borderRadius(0, 30px, 30px, 0);
	}
}

#lbNextLink {
	right: 0;
	
	> span {
		padding-left: @wcfGapMedium;
		right: 0;
		
		.borderRadius(30px, 0, 0, 30px);
	}
}

#lbEnlarge,
#lbCloseLink {
	cursor: pointer;
	display: block;
	float: right;
	padding-right: @wcfGapSmall;
	outline: none;
}


#lbCenter, #lbBottomContainer {
	background-color: #fff;
	overflow: hidden;
	position: absolute;
	z-index: 400;
}

#lbCenter > .icon-spinner {
	left: 50%;
	margin: -21px 0 0 -21px;
	position: absolute;
	top: 50%;
}

.lbLoading {
	background: #fff url(../icon/spinner.svg) no-repeat center;
	background-size: 48px;
}

#lbImage {
	background-repeat: no-repeat;
	background-size: cover;
	border: 10px solid #fff;
	left: 0;
	position: absolute;
	top: 0;
	
	&:hover {
		#lbNextLink,
		#lbPrevLink {
			opacity: 1;
			
			.transition(opacity, .2s);
		}
	}
}

#lbBottom {
	border: 10px solid #fff;
	border-top-style: none;
	color: #666;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}