zcloud-ui/src/utils/boxer/jquery.fs.boxer.css

A Component Library for Vue.js.

/* 
 * Boxer v3.0.3 - 2014-01-12 
 * A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. 
 * http://formstone.it/boxer/ 
 * 
 * Copyright 2014 Ben Plum; MIT Licensed 
 */
.boxer-open{overflow:hidden!important;}
#boxer,
#boxer .boxer-container,
#boxer .boxer-content,
#boxer-overlay{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
#boxer-overlay{background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10005 !important;}
#boxer{background:#fff;border-radius:3px;box-shadow:0 0 25px #333;padding:10px;position:absolute;z-index:10006 !important;;}
#boxer.inline{padding:30px;}
#boxer .boxer-close{background:#fff url(./jquery.fs.boxer-icons.png) no-repeat -70px 10px;border-radius:100%;cursor:pointer;display:block;height:30px;position:absolute;padding:0;right:-8px;top:-8px;width:30px;text-indent:-99999px;z-index:106;}
#boxer .boxer-container{background:#fff;height:100%;overflow:hidden;position:relative;width:100%;z-index:105;zoom:1;}
#boxer .boxer-content{background:#fff;overflow:hidden;padding:0;width:10000px;}
#boxer .boxer-image{float:left;}
#boxer .boxer-video{height:100%;width:100%;}
#boxer .boxer-iframe{float:left;height:100%;overflow:auto;width:100%;}
#boxer .boxer-meta{clear:both;}
#boxer .boxer-arrow{background:#fff url(./jquery.fs.boxer-icons.png) no-repeat 0 0;border-radius:100%;box-shadow:0 0 6px rgba(0,0,0,0.4);cursor:pointer;display:block;height:40px;margin-right:auto;margin-left:auto;position:absolute;text-indent:-99999px;top:0;width:40px;-webkit-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;-ms-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;transition:opacity 0.1s linear;}
#boxer .boxer-arrow.previous{left:20px;}
#boxer .boxer-arrow.next{background-position:-40px 0;right:20px;}
#boxer .boxer-position{color:#999;font-size:11px;margin:0;padding:15px 10px 5px;display:none;}
#boxer .boxer-caption p{margin:0;padding:15px 10px 10px 10px;}
#boxer .boxer-caption.gallery p{padding-top:0;}
#boxer.loading .boxer-container{background:#fff url(./jquery.fs.boxer-loading.gif) no-repeat center;}

/* Mobile */
#boxer.mobile{background-color:#000;border-radius:0;height:100%;left:0;padding:30px 0 0;position:fixed;top:0;width:100%;}
#boxer.mobile .boxer-close{background-color:#000;background-position:-70px -60px;border-radius:0;right:0;top:0;}
#boxer.mobile .boxer-container{background:#000;position:relative;}
#boxer.mobile .boxer-content{background-color:#000;}
#boxer.mobile .boxer-arrow{background-color:transparent;border-radius:0;margin:-20px 0 0;top:50%;}
#boxer.mobile .boxer-arrow.previous{background-position:0 -40px;float:left;left:0;}
#boxer.mobile .boxer-arrow.next{background-position:-40px -40px;float:right;right:0;}
#boxer.mobile .boxer-arrow.disabled{opacity:0.5;}
#boxer.mobile .boxer-meta{bottom:0;background-color:rgba(0,0,0,0.75);left:0;padding:15px 50px 10px;position:absolute;width:100%;}
#boxer.mobile .boxer-position{padding:0;}
#boxer.mobile .boxer-caption p{color:#eee;padding:10px 0 0;}
#boxer.mobile .boxer-image{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);-ms-transform:translate(0px,0px);-o-transform:translate(0px,0px);transform:translate(0px,0px);}
#boxer.mobile.animated .boxer-image{-webkit-transition:-webkit-transform 0.25s ease-out!important;-moz-transition:-moz-transform 0.25s ease-out!important;-ms-transition:-ms-transform 0.25s ease-out!important;-o-transition:-o-transform 0.25s ease-out!important;transition:transform 0.25s ease-out!important;}
#boxer.mobile.loading .boxer-container{background:#000 url(./jquery.fs.boxer-loading-dark.gif) no-repeat center;}
@media screen and (min-width:980px){
	#boxer .boxer-close:hover{background-position:-70px -20px;}
	#boxer .boxer-arrow{opacity:0;}
	#boxer .boxer-content:hover .boxer-arrow{opacity:0.75;}
	#boxer .boxer-content .boxer-arrow:hover{opacity:1;}
	#boxer .boxer-content:hover .boxer-arrow.disabled{opacity:0.3;cursor:default!important;}
	#boxer.mobile .boxer-arrow{opacity:1;}
	#boxer.mobile .boxer-arrow.disabled{opacity:0.5;}
}
@media screen and (max-width:980px){
	#boxer.mobile{position:fixed;}
}