fancybox:overide:css

fancybox.css

/* -------------------------------------------------
** FANCYBOX CLEANUP & OVERIDES
** ---------------------------------------------- */

.fancybox-overlay, .fancybox-overlay  *, #fancybox-thumbs, #fancybox-thumbs * {
	@include box-sizing('content-box');
}

.fancybox-wrap, .fancybox-wrap *  {
	@include box-sizing('content-box');
}
.fancybox-outer, .fancybox-outer *   {
	@include box-sizing('content-box');
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background: url('../img/fancybox/fancybox_sprite.png');
}
#fancybox-loading div {
	background: url('../img/fancybox/fancybox_loading.gif') center center no-repeat;
}
#fancybox-loading {
	background-position: 0 -108.5px;
}
.fancybox-nav {
	background: url('../img/fancybox/blank.gif');
}
.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('../img/fancybox/fancybox_overlay.png');
}
.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}
.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}
.fancybox-wrap.fancybox-desktop.fancybox-type-image.fancybox-opened {
	z-index: 9999999;
}
#fancybox-thumbs {
	z-index: 99999;
	ul {
		@include clearfix;
		li {
			// margin-right: 5px;
			border: none;
			a {
				border: none;
				img {
				}
			}
			&.active {
				border: none;
			}
		}
	}
}
.fancybox-skin {
	border-radius: 0;
}
.fancybox-close {
	position: absolute;
	right: 15px;
	top: 15px;
	width: 30px;
	height: 30px;
	background: url('../img/fancybox/square_close_x.png');
	opacity: .8;
	&:hover  { opacity: 1; }
}

.fancybox-next span {
	right: 15px;
	background-position: 3px -73px;

}
.fancybox-prev span {
	left: 15px;
	background-position: 3px -37.5px;

}
.fancybox-next span .fancybox-prev span  {
	height: 28.5px !important;
	opacity: .8;
	&:hover  { opacity: 1; }
}
.fancybox-title.fancybox-title-outside-wrap {
	position: absolute;
	bottom: 0;
	width: 98%;
	min-height: 30px;
	padding: 1%;
	color: #efefef;
	background: rgba(0, 0, 0, 0.6);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){

	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
		background-image: url('../img/fancybox/[email protected]');
		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
	}

	#fancybox-loading div {
		background-image: url('../img/fancybox/[email protected]');
		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
	}
}