179 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			179 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
 | |
| /*
 | |
| 	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
 | |
| */
 | |
| /* pswp = photoswipe */
 | |
| .pswp {
 | |
|   display: none;
 | |
|   position: absolute;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   left: 0;
 | |
|   top: 0;
 | |
|   overflow: hidden;
 | |
|   -ms-touch-action: none;
 | |
|   touch-action: none;
 | |
|   z-index: 1500;
 | |
|   -webkit-text-size-adjust: 100%;
 | |
|   /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
 | |
|   -webkit-backface-visibility: hidden;
 | |
|   outline: none; }
 | |
|   .pswp * {
 | |
|     -webkit-box-sizing: border-box;
 | |
|             box-sizing: border-box; }
 | |
|   .pswp img {
 | |
|     max-width: none; }
 | |
| 
 | |
| /* style is added when JS option showHideOpacity is set to true */
 | |
| .pswp--animate_opacity {
 | |
|   /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
 | |
|   opacity: 0.001;
 | |
|   will-change: opacity;
 | |
|   /* for open/close transition */
 | |
|   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
 | |
|           transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 | |
| 
 | |
| .pswp--open {
 | |
|   display: block; }
 | |
| 
 | |
| .pswp--zoom-allowed .pswp__img {
 | |
|   /* autoprefixer: off */
 | |
|   cursor: -webkit-zoom-in;
 | |
|   cursor: -moz-zoom-in;
 | |
|   cursor: zoom-in; }
 | |
| 
 | |
| .pswp--zoomed-in .pswp__img {
 | |
|   /* autoprefixer: off */
 | |
|   cursor: -webkit-grab;
 | |
|   cursor: -moz-grab;
 | |
|   cursor: grab; }
 | |
| 
 | |
| .pswp--dragging .pswp__img {
 | |
|   /* autoprefixer: off */
 | |
|   cursor: -webkit-grabbing;
 | |
|   cursor: -moz-grabbing;
 | |
|   cursor: grabbing; }
 | |
| 
 | |
| /*
 | |
| 	Background is added as a separate element.
 | |
| 	As animating opacity is much faster than animating rgba() background-color.
 | |
| */
 | |
| .pswp__bg {
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   top: 0;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   background: #000;
 | |
|   opacity: 0;
 | |
|   transform: translateZ(0);
 | |
|   -webkit-backface-visibility: hidden;
 | |
|   will-change: opacity; }
 | |
| 
 | |
| .pswp__scroll-wrap {
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   top: 0;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   overflow: hidden; }
 | |
| 
 | |
| .pswp__container,
 | |
| .pswp__zoom-wrap {
 | |
|   -ms-touch-action: none;
 | |
|   touch-action: none;
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   right: 0;
 | |
|   top: 0;
 | |
|   bottom: 0; }
 | |
| 
 | |
| /* Prevent selection and tap highlights */
 | |
| .pswp__container,
 | |
| .pswp__img {
 | |
|   -webkit-user-select: none;
 | |
|   -moz-user-select: none;
 | |
|   -ms-user-select: none;
 | |
|       user-select: none;
 | |
|   -webkit-tap-highlight-color: transparent;
 | |
|   -webkit-touch-callout: none; }
 | |
| 
 | |
| .pswp__zoom-wrap {
 | |
|   position: absolute;
 | |
|   width: 100%;
 | |
|   -webkit-transform-origin: left top;
 | |
|   -ms-transform-origin: left top;
 | |
|   transform-origin: left top;
 | |
|   /* for open/close transition */
 | |
|   -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
 | |
|           transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 | |
| 
 | |
| .pswp__bg {
 | |
|   will-change: opacity;
 | |
|   /* for open/close transition */
 | |
|   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
 | |
|           transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 | |
| 
 | |
| .pswp--animated-in .pswp__bg,
 | |
| .pswp--animated-in .pswp__zoom-wrap {
 | |
|   -webkit-transition: none;
 | |
|   transition: none; }
 | |
| 
 | |
| .pswp__container,
 | |
| .pswp__zoom-wrap {
 | |
|   -webkit-backface-visibility: hidden; }
 | |
| 
 | |
| .pswp__item {
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   right: 0;
 | |
|   top: 0;
 | |
|   bottom: 0;
 | |
|   overflow: hidden; }
 | |
| 
 | |
| .pswp__img {
 | |
|   position: absolute;
 | |
|   width: auto;
 | |
|   height: auto;
 | |
|   top: 0;
 | |
|   left: 0; }
 | |
| 
 | |
| /*
 | |
| 	stretched thumbnail or div placeholder element (see below)
 | |
| 	style is added to avoid flickering in webkit/blink when layers overlap
 | |
| */
 | |
| .pswp__img--placeholder {
 | |
|   -webkit-backface-visibility: hidden; }
 | |
| 
 | |
| /*
 | |
| 	div element that matches size of large image
 | |
| 	large image loads on top of it
 | |
| */
 | |
| .pswp__img--placeholder--blank {
 | |
|   background: #222; }
 | |
| 
 | |
| .pswp--ie .pswp__img {
 | |
|   width: 100% !important;
 | |
|   height: auto !important;
 | |
|   left: 0;
 | |
|   top: 0; }
 | |
| 
 | |
| /*
 | |
| 	Error message appears when image is not loaded
 | |
| 	(JS option errorMsg controls markup)
 | |
| */
 | |
| .pswp__error-msg {
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   top: 50%;
 | |
|   width: 100%;
 | |
|   text-align: center;
 | |
|   font-size: 14px;
 | |
|   line-height: 16px;
 | |
|   margin-top: -8px;
 | |
|   color: #CCC; }
 | |
| 
 | |
| .pswp__error-msg a {
 | |
|   color: #CCC;
 | |
|   text-decoration: underline; }
 |