[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;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
	
	> span {
		background-color: #fff;
		display: none;
		padding: @wcfGapSmall;
		position: absolute;
		top: 20%;
	}
	
	&:hover > span {
		.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
	}
}

#lbPrevLink {
	left: 0;
	
	> span {
		border-radius: 0 30px 30px 0;
		left: 0;
		padding-right: @wcfGapMedium;
	}
}

#lbNextLink {
	right: 0;
	
	> span {
		border-radius: 30px 0 0 30px;
		padding-left: @wcfGapMedium;
		right: 0;
	}
}

#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 {
			> span {
				display: block;
			}
		}
	}
}

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

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

#lbCaption {
	font-weight: bold;
}

/* ImageViewer for WCF */
@wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
@wcfImageViewerFontColor: rgba(211, 211, 211, 1);

.wcfImageViewer {
	background-color: rgba(0, 0, 0, 1);
	bottom: 0;
	display: none;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 399;
	
	.icon {
		color: rgba(102, 102, 102, 1);
		
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	}
	
	&.open {
		display: block;
		opacity: 1;
	}
	
	&.maximized:not(.wcfImageViewerMobile) {
		> header {
			top: -100px;
		}
		
		> div {
			bottom: 0;
			border-color: fade(@wcfImageViewerBorderColor, 0%);
			top: 0;
		}
		
		> footer {
			bottom: -100px;
		}
	}
	
	&.wcfImageViewerStatic > header > div {
		> h1,
		> h2,
		> h3 {
			margin-left: 0 !important;
		}
	}
	
	&.wcfImageViewerMobile {
		> header,
		> footer {
			background-color: rgba(0, 0, 0, 1);
			opacity: 1;
			position: absolute;
			visibility: visible;
			z-index: 402;
		}
		
		&.maximized {
			> header,
			> footer {
				opacity: 0;
				visibility: hidden;
				
				transition: visibility 0s linear .5s, opacity .5s linear;
			}
			
			> div > ul > li.pointer {
				opacity: 0;
			}
		}
		
		> div {
			bottom: 0;
			top: 0;
			
			> ul {
				> li {
					background-color: rgba(224, 224, 224, 1);
					border-radius: 30px;
					margin-top: -24px;
					opacity: 0;
					position: absolute;
					top: 50%;
					
					.transition(opacity, .3s);
					
					&.pointer {
						opacity: 1;
					}
					
					&.wcfImageViewerSlideshowButtonPrevious {
						left: 10px;
						
						> span {
							left: -3px;
							position: relative;
							top: 2px;
						}
					}
					
					&.wcfImageViewerSlideshowButtonNext {
						right: 10px;
						
						> span {
							position: relative;
							right: -1px;
							top: 2px;
						}
					}
					
					&.wcfImageViewerSlideshowButtonFull {
						bottom: 80px;
						left: 50%;
						top: auto;
						
						transform: translateX(-50%);
						-ms-transform: translateX(-50%);
						-webkit-transform: translateX(-50%);
						
						> span {
							font-size: 32px;
							left: 2px;
							position: relative;
							top: 10px;
						}
					}
					
					&.wcfImageViewerSlideshowButtonToggle,
					&.wcfImageViewerSlideshowButtonEnlarge,
					{
						display: none;
					}
				}
			}
		}
		
		> footer {
			> .wcfImageViewerButtonPrevious,
			> .wcfImageViewerButtonNext {
				display: none;
			}
			
			> div {
				margin: 0;
			}
		}
	}
	
	> header,
	> div,
	> footer {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 400;
	}
	
	> header {
		height: 100px;
		padding: 1rem;
		top: 0;
		
		> div {
			> h1,
			> h2,
			> h3 {
				color: @wcfImageViewerFontColor;
				margin-left: 80px !important;
				
				> a {
					color: @wcfImageViewerFontColor;
				}
			}
			
			> h1 {
				font-size: 1.75rem;
			}
			
			> h2 {
				font-size: 1.25rem;
			}
			
			> h3 {
				color: @wcfImageViewerFontColor;
				font-size: .85rem;
				margin-top: .25rem;
			}
			
			> a > img {
				height: 64px;
				width: 64px;
			}
		}
		
		> .wcfImageViewerButtonClose {
			opacity: .6;
			position: absolute;
			right: 26px;
			top: 26px;
			
			.transition(opacity, .3s);
			
			&:hover {
				opacity: 1;
			}
		}
	}
	
	> div {
		background-color: rgba(0, 0, 0, 1);
		border-bottom: 1px solid @wcfImageViewerBorderColor;
		border-top: 1px solid @wcfImageViewerBorderColor;
		bottom: 100px;
		top: 100px;
		z-index: 401;
		
		.transition(~"top, bottom, border-color", .3s);
		
		&.loading:before {
			content: @spinner;
			margin: -24px 0 0 -24px;
			left: 50%;
			position: absolute;
			top: 50%;
			
			color: @wcfColor;
			display: inline-block;
			font-family: FontAwesome;
			font-weight: normal !important;
			font-style: normal !important;
			line-height: 1em;
			text-align: center;
			
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			
			.textShadow(@wcfContentBackgroundColor);
			
			.icon48;
			.icon-spinner;
		}
		
		> img {
			opacity: 0;
			position: absolute;
			top: 50%;
			
			.transition(opacity, .75s);
			
			&.animateTransformation {
				transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
				-webkit-transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
			}
			
			&.active {
				opacity: 1;
			}
		}
	}
	
	&:not(.wcfImageViewerMobile) {
		> header {
			.transition(top, .3s);
		}
		
		> footer {
			.transition(bottom, .3s);
		}
		
		> div {
			cursor: pointer;
			
			> img,
			> ul {
				cursor: default;
			}
			
			> ul {
				background-color: rgba(0, 0, 0, 1);
				border: 1px solid @wcfImageViewerBorderColor;
				border-bottom-width: 0;
				border-radius: 5px 5px 0 0;
				bottom: 0;
				display: inline-block;
				left: 50%;
				margin-left: -122px;
				opacity: .4;
				position: absolute;
				
				.transition(opacity, .5s);
				
				&:hover {
					opacity: 1;
				}
				
				> li {
					display: inline-block;
					opacity: .6;
					
					.transition(opacity, .5s);
					
					&.pointer > span.icon {
						cursor: pointer;
					}
					
					&.active,
					&.pointer:hover {
						opacity: 1;
					}
					
					&.wcfImageViewerSlideshowButtonToggle > span,
					&.wcfImageViewerSlideshowButtonEnlarge > span,
					&.wcfImageViewerSlideshowButtonFull > span {
						font-size: 28px;
						
						&:before {
							left: 2px;
							position: relative;
							top: 9px;
						}
					}
					
					&.wcfImageViewerSlideshowButtonEnlarge,
					&.wcfImageViewerSlideshowButtonFull {
						border-left: 1px solid @wcfImageViewerBorderColor;
						box-sizing: border-box;
					}
					
					> span {
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	> footer {
		bottom: 0;
		height: 100px;
		padding: 10px;
		
		&:hover > div > ul > li > img {
			filter: none;
			-webkit-filter: none;
		}
		
		> span {
			bottom: 0;
			font-size: 48px;
			padding-top: 26px;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 30px;
			z-index: 2;
			
			.transition(opacity, .5s);
			
			&.pointer {
				opacity: .6;
				
				&:hover {
					opacity: 1;
				}
			}
			
			&.wcfImageViewerButtonPrevious {
				left: 5px;
			}
			
			&.wcfImageViewerButtonNext {
				right: 5px;
			}
		}
		
		> div {
			height: 80px;
			margin: 0 35px;
			overflow: hidden;
			white-space: nowrap;
			
			> ul {
				font-size: 0;
				height: 80px;
				z-index: 1;
				
				transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
				-webkit-transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
				
				> li {
					display: inline-block;
					height: 80px;
					opacity: .6;
					position: relative;
					width: 80px;
					
					.transition(opacity, .5s);
					
					&.active,
					&:hover {
						opacity: 1;
					}
					
					&:not(:last-child) {
						margin-right: 10px;
					}
					
					&.active > img {
						filter: none;
						-webkit-filter: none;
					}
					
					&.loading{
						&:before {
							content: @spinner;
							margin: -16px 0 0 -16px;
							left: 50%;
							position: absolute;
							top: 50%;
							z-index: -1;
							
							color: @wcfColor;
							display: inline-block;
							font-family: FontAwesome;
							font-weight: normal !important;
							font-style: normal !important;
							line-height: 1em;
							text-align: center;
							
							-webkit-user-select: none;
							-moz-user-select: none;
							-ms-user-select: none;
							
							.textShadow(@wcfContentBackgroundColor);
							
							.icon32;
							.icon-spinner;
						}
						
						> img {
							opacity: 0;
						}
					}
					
					> img {
						height: 80px;
						opacity: 1;
						width: 80px;
						
						.grayscale;
						transition: filter .5s, opacity 1s;
						-webkit-transition: -webkit-filter .5s, opacity 1s;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.wcfImageViewer {
		> header {
			height: 80px;
			
			> .wcfImageViewerButtonClose {
				right: 16px;
				top: 16px;
			}
		}
		
		> footer {
			height: 80px;
			
			> div {
				height: 60px;
				
				> ul {
					height: 60px;
					
					> li {
						height: 60px;
					}
				}
			}
		}
	}
}
Commit	Line	Data
6088ac61 AE	1	#lbOverlay {
	2	background-color: #000;
	3	bottom: 0;
6088ac61 AE	4	left: 0;
	5	position: fixed;
	6	right: 0;
	7	top: 0;
	8	z-index: 399;
	9	}
	10
	11	#lbPrevLink,
	12	#lbNextLink {
	13	display: block;
	14	overflow: hidden;
	15	position: absolute;
	16	top: 0;
	17	width: 50%;
	18	outline: none;
9f959ced	19
6088ac61 AE	20	> span {
6088ac61 AE	21	background-color: #fff;
a1d53e07	22	display: none;
6088ac61 AE	23	padding: @wcfGapSmall;
6088ac61 AE	24	position: absolute;
6088ac61 AE	25	top: 20%;
	26	}
	27
	28	&:hover > span {
54efc050	29	.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
6088ac61 AE	30	}
	31	}
	32
	33	#lbPrevLink {
	34	left: 0;
	35
	36	> span {
8ce85e3a	37	border-radius: 0 30px 30px 0;
6088ac61 AE	38	left: 0;
6088ac61 AE	39	padding-right: @wcfGapMedium;
6088ac61 AE	40	}
	41	}
	42
	43	#lbNextLink {
	44	right: 0;
9f959ced	45
6088ac61	46	> span {
8ce85e3a	47	border-radius: 30px 0 0 30px;
6088ac61 AE	48	padding-left: @wcfGapMedium;
6088ac61 AE	49	right: 0;
6088ac61 AE	50	}
	51	}
	52
	53	#lbEnlarge,
	54	#lbCloseLink {
	55	cursor: pointer;
	56	display: block;
	57	float: right;
6088ac61 AE	58	padding-right: @wcfGapSmall;
	59	outline: none;
	60	}
	61
6088ac61 AE	62	#lbCenter, #lbBottomContainer {
	63	background-color: #fff;
	64	overflow: hidden;
	65	position: absolute;
	66	z-index: 400;
	67	}
	68
341b056c AE	69	#lbCenter > .icon-spinner {
	70	left: 50%;
	71	margin: -21px 0 0 -21px;
	72	position: absolute;
	73	top: 50%;
	74	}
	75
6088ac61 AE	76	.lbLoading {
	77	background: #fff url(../icon/spinner.svg) no-repeat center;
	78	background-size: 48px;
	79	}
	80
	81	#lbImage {
	82	background-repeat: no-repeat;
4c51a0e9	83	background-size: cover;
6088ac61 AE	84	border: 10px solid #fff;
	85	left: 0;
	86	position: absolute;
	87	top: 0;
4c51a0e9 AE	88
	89	&:hover {
	90	#lbNextLink,
	91	#lbPrevLink {
a1d53e07 MW	92	> span {
	93	display: block;
	94	}
4c51a0e9 AE	95	}
4c51a0e9 AE	96	}
6088ac61 AE	97	}
	98
	99	#lbBottom {
	100	border: 10px solid #fff;
	101	border-top-style: none;
	102	color: #666;
	103	}
	104
	105	#lbCaption, #lbNumber {
	106	margin-right: 71px;
	107	}
	108
	109	#lbCaption {
	110	font-weight: bold;
	111	}
dd5df48e AE	112
	113	/* ImageViewer for WCF */
	114	@wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
8bd36be5	115	@wcfImageViewerFontColor: rgba(211, 211, 211, 1);
dd5df48e AE	116
	117	.wcfImageViewer {
	118	background-color: rgba(0, 0, 0, 1);
	119	bottom: 0;
	120	display: none;
	121	left: 0;
	122	opacity: 0;
	123	position: fixed;
	124	right: 0;
	125	top: 0;
	126	z-index: 399;
	127
8bd36be5 MW	128	.icon {
	129	color: rgba(102, 102, 102, 1);
	130
	131	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	132	}
	133
dd5df48e AE	134	&.open {
	135	display: block;
	136	opacity: 1;
	137	}
	138
fa7549e1	139	&.maximized:not(.wcfImageViewerMobile) {
dd5df48e AE	140	> header {
	141	top: -100px;
	142	}
	143
	144	> div {
	145	bottom: 0;
	146	border-color: fade(@wcfImageViewerBorderColor, 0%);
	147	top: 0;
	148	}
	149
	150	> footer {
	151	bottom: -100px;
	152	}
	153	}
	154
fa7549e1 AE	155	&.wcfImageViewerStatic > header > div {
	156	> h1,
	157	> h2,
	158	> h3 {
	159	margin-left: 0 !important;
	160	}
	161	}
	162
	163	&.wcfImageViewerMobile {
	164	> header,
	165	> footer {
	166	background-color: rgba(0, 0, 0, 1);
	167	opacity: 1;
	168	position: absolute;
	169	visibility: visible;
	170	z-index: 402;
	171	}
	172
	173	&.maximized {
	174	> header,
	175	> footer {
	176	opacity: 0;
	177	visibility: hidden;
	178
	179	transition: visibility 0s linear .5s, opacity .5s linear;
	180	}
	181
	182	> div > ul > li.pointer {
	183	opacity: 0;
	184	}
	185	}
	186
	187	> div {
	188	bottom: 0;
	189	top: 0;
	190
	191	> ul {
	192	> li {
	193	background-color: rgba(224, 224, 224, 1);
	194	border-radius: 30px;
	195	margin-top: -24px;
	196	opacity: 0;
	197	position: absolute;
	198	top: 50%;
	199
	200	.transition(opacity, .3s);
	201
	202	&.pointer {
	203	opacity: 1;
	204	}
	205
	206	&.wcfImageViewerSlideshowButtonPrevious {
	207	left: 10px;
	208
	209	> span {
	210	left: -3px;
	211	position: relative;
	212	top: 2px;
	213	}
	214	}
	215
	216	&.wcfImageViewerSlideshowButtonNext {
	217	right: 10px;
	218
219	> span {
220	position: relative;
221	right: -1px;
222	top: 2px;
223	}
224	}
225
a809610b AE	226	&.wcfImageViewerSlideshowButtonFull {
	227	bottom: 80px;
	228	left: 50%;
	229	top: auto;
	230
	231	transform: translateX(-50%);
	232	-ms-transform: translateX(-50%);
4bf9af9c	233	-webkit-transform: translateX(-50%);
a809610b AE	234
	235	> span {
	236	font-size: 32px;
	237	left: 2px;
	238	position: relative;
	239	top: 10px;
	240	}
	241	}
	242
fa7549e1 AE	243	&.wcfImageViewerSlideshowButtonToggle,
fa7549e1 AE	244	&.wcfImageViewerSlideshowButtonEnlarge,
a809610b	245	{
fa7549e1 AE	246	display: none;
	247	}
	248	}
	249	}
	250	}
	251
	252	> footer {
	253	> .wcfImageViewerButtonPrevious,
	254	> .wcfImageViewerButtonNext {
	255	display: none;
	256	}
	257
	258	> div {
	259	margin: 0;
	260	}
	261	}
	262	}
	263
dd5df48e AE	264	> header,
	265	> div,
	266	> footer {
	267	box-sizing: border-box;
8bd36be5	268	-moz-box-sizing: border-box;
dd5df48e AE	269	left: 0;
	270	position: fixed;
	271	right: 0;
	272	z-index: 400;
	273	}
	274
	275	> header {
	276	height: 100px;
	277	padding: 1rem;
	278	top: 0;
	279
dd5df48e AE	280	> div {
	281	> h1,
	282	> h2,
	283	> h3 {
	284	color: @wcfImageViewerFontColor;
	285	margin-left: 80px !important;
8bd36be5 MW	286
	287	> a {
	288	color: @wcfImageViewerFontColor;
	289	}
dd5df48e AE	290	}
	291
	292	> h1 {
	293	font-size: 1.75rem;
	294	}
	295
	296	> h2 {
	297	font-size: 1.25rem;
	298	}
	299
	300	> h3 {
8bd36be5	301	color: @wcfImageViewerFontColor;
dd5df48e AE	302	font-size: .85rem;
	303	margin-top: .25rem;
	304	}
feffd97d AE	305
	306	> a > img {
	307	height: 64px;
	308	width: 64px;
	309	}
dd5df48e AE	310	}
	311
	312	> .wcfImageViewerButtonClose {
	313	opacity: .6;
	314	position: absolute;
	315	right: 26px;
	316	top: 26px;
	317
8bd36be5	318	.transition(opacity, .3s);
dd5df48e AE	319
	320	&:hover {
	321	opacity: 1;
	322	}
	323	}
	324	}
	325
	326	> div {
	327	background-color: rgba(0, 0, 0, 1);
	328	border-bottom: 1px solid @wcfImageViewerBorderColor;
	329	border-top: 1px solid @wcfImageViewerBorderColor;
	330	bottom: 100px;
	331	top: 100px;
	332	z-index: 401;
	333
8bd36be5	334	.transition(~"top, bottom, border-color", .3s);
dd5df48e	335
ff34ee1f AE	336	&.loading:before {
	337	content: @spinner;
	338	margin: -24px 0 0 -24px;
	339	left: 50%;
	340	position: absolute;
	341	top: 50%;
	342
e5ebf582 AE	343	color: @wcfColor;
	344	display: inline-block;
	345	font-family: FontAwesome;
	346	font-weight: normal !important;
	347	font-style: normal !important;
	348	line-height: 1em;
	349	text-align: center;
	350
	351	-webkit-user-select: none;
	352	-moz-user-select: none;
	353	-ms-user-select: none;
	354
	355	.textShadow(@wcfContentBackgroundColor);
	356
ff34ee1f AE	357	.icon48;
	358	.icon-spinner;
	359	}
	360
dd5df48e AE	361	> img {
	362	opacity: 0;
	363	position: absolute;
	364	top: 50%;
	365
8bd36be5	366	.transition(opacity, .75s);
dd5df48e AE	367
dd5df48e AE	368	&.animateTransformation {
8bd36be5	369	transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
dd5df48e AE	370	-webkit-transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
	371	}
	372
	373	&.active {
	374	opacity: 1;
	375	}
	376	}
fa7549e1 AE	377	}
	378
	379	&:not(.wcfImageViewerMobile) {
	380	> header {
	381	.transition(top, .3s);
	382	}
dd5df48e	383
fa7549e1 AE	384	> footer {
	385	.transition(bottom, .3s);
	386	}
	387
3aa68c56 AE	388	> div {
3aa68c56 AE	389	cursor: pointer;
dd5df48e	390
3aa68c56 AE	391	> img,
	392	> ul {
	393	cursor: default;
dd5df48e AE	394	}
dd5df48e AE	395
3aa68c56 AE	396	> ul {
	397	background-color: rgba(0, 0, 0, 1);
	398	border: 1px solid @wcfImageViewerBorderColor;
	399	border-bottom-width: 0;
	400	border-radius: 5px 5px 0 0;
	401	bottom: 0;
dd5df48e	402	display: inline-block;
3aa68c56 AE	403	left: 50%;
	404	margin-left: -122px;
	405	opacity: .4;
	406	position: absolute;
dd5df48e	407
8bd36be5	408	.transition(opacity, .5s);
dd5df48e	409
3aa68c56	410	&:hover {
dd5df48e AE	411	opacity: 1;
	412	}
	413
3aa68c56 AE	414	> li {
	415	display: inline-block;
	416	opacity: .6;
	417
	418	.transition(opacity, .5s);
dd5df48e	419
3aa68c56 AE	420	&.pointer > span.icon {
	421	cursor: pointer;
	422	}
	423
	424	&.active,
	425	&.pointer:hover {
	426	opacity: 1;
	427	}
	428
	429	&.wcfImageViewerSlideshowButtonToggle > span,
	430	&.wcfImageViewerSlideshowButtonEnlarge > span,
	431	&.wcfImageViewerSlideshowButtonFull > span {
	432	font-size: 28px;
	433
	434	&:before {
	435	left: 2px;
	436	position: relative;
	437	top: 9px;
	438	}
	439	}
	440
	441	&.wcfImageViewerSlideshowButtonEnlarge,
	442	&.wcfImageViewerSlideshowButtonFull {
	443	border-left: 1px solid @wcfImageViewerBorderColor;
	444	box-sizing: border-box;
	445	}
	446
	447	> span {
	448	vertical-align: middle;
dd5df48e	449	}
dd5df48e AE	450	}
	451	}
	452	}
	453	}
	454
	455	> footer {
	456	bottom: 0;
	457	height: 100px;
	458	padding: 10px;
	459
ff34ee1f	460	&:hover > div > ul > li > img {
dd5df48e AE	461	filter: none;
	462	-webkit-filter: none;
	463	}
	464
	465	> span {
	466	bottom: 0;
	467	font-size: 48px;
	468	padding-top: 26px;
	469	opacity: 0;
	470	position: absolute;
	471	top: 0;
	472	width: 30px;
	473	z-index: 2;
	474
8bd36be5	475	.transition(opacity, .5s);
dd5df48e AE	476
	477	&.pointer {
	478	opacity: .6;
	479
	480	&:hover {
	481	opacity: 1;
	482	}
	483	}
	484
1a6e8c52	485	&.wcfImageViewerButtonPrevious {
dd5df48e AE	486	left: 5px;
	487	}
	488
	489	&.wcfImageViewerButtonNext {
	490	right: 5px;
	491	}
	492	}
	493
	494	> div {
	495	height: 80px;
	496	margin: 0 35px;
	497	overflow: hidden;
	498	white-space: nowrap;
	499
	500	> ul {
	501	font-size: 0;
	502	height: 80px;
	503	z-index: 1;
	504
	505	transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
8bd36be5	506	-webkit-transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
dd5df48e AE	507
	508	> li {
	509	display: inline-block;
ff34ee1f	510	height: 80px;
dd5df48e	511	opacity: .6;
ff34ee1f AE	512	position: relative;
ff34ee1f AE	513	width: 80px;
dd5df48e	514
8bd36be5	515	.transition(opacity, .5s);
dd5df48e AE	516
dd5df48e AE	517	&.active,
ff34ee1f	518	&:hover {
dd5df48e AE	519	opacity: 1;
	520	}
	521
	522	&:not(:last-child) {
	523	margin-right: 10px;
	524	}
	525
ff34ee1f	526	&.active > img {
dd5df48e AE	527	filter: none;
	528	-webkit-filter: none;
	529	}
	530
ff34ee1f AE	531	&.loading{
	532	&:before {
	533	content: @spinner;
	534	margin: -16px 0 0 -16px;
	535	left: 50%;
	536	position: absolute;
	537	top: 50%;
	538	z-index: -1;
	539
a9e0c30e AE	540	color: @wcfColor;
	541	display: inline-block;
	542	font-family: FontAwesome;
	543	font-weight: normal !important;
	544	font-style: normal !important;
	545	line-height: 1em;
	546	text-align: center;
	547
	548	-webkit-user-select: none;
	549	-moz-user-select: none;
	550	-ms-user-select: none;
	551
	552	.textShadow(@wcfContentBackgroundColor);
	553
ff34ee1f AE	554	.icon32;
	555	.icon-spinner;
	556	}
	557
	558	> img {
	559	opacity: 0;
	560	}
	561	}
	562
	563	> img {
dd5df48e	564	height: 80px;
ff34ee1f	565	opacity: 1;
dd5df48e AE	566	width: 80px;
	567
	568	.grayscale;
8bd36be5	569	transition: filter .5s, opacity 1s;
ff34ee1f	570	-webkit-transition: -webkit-filter .5s, opacity 1s;
dd5df48e AE	571	}
	572	}
	573	}
	574	}
	575	}
	576	}
e883c6c4 MW	577
	578	@media only screen and (max-width: 800px) {
	579	.wcfImageViewer {
	580	> header {
	581	height: 80px;
	582
	583	> .wcfImageViewerButtonClose {
	584	right: 16px;
	585	top: 16px;
	586	}
	587	}
	588
	589	> footer {
	590	height: 80px;
	591
	592	> div {
	593	height: 60px;
	594
	595	> ul {
	596	height: 60px;
	597
	598	> li {
	599	height: 60px;
	600	}
	601	}
	602	}
	603	}
	604	}
	605	}