242 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			242 lines
		
	
	
		
			5.1 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;
 | |
|   -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; }
 | |
|   
 | |
| /* CSS für den Autoplay-Button */
 | |
| .pswp__button--autoplay {
 | |
| /* http://www.iconsplace.com/white-icons/play-icon */
 | |
| background: transparent url(../img/play.png) no-repeat scroll 16px 14px !important;
 | |
| }
 | |
| .pswp__button--autoplay.stop {
 | |
| /* http://www.iconsplace.com/white-icons/stop-icon */
 | |
| background-image: url(../img/stop.png) !important;
 | |
| }
 | |
| 
 | |
| div.photoswipe {
 | |
| }
 | |
| div.photoswipe figure {
 | |
| 	display:inline-block;
 | |
| 	margin:.5em 1em 0 0;
 | |
| }
 | |
| div.photoswipe figure img {
 | |
| 	margin: 0 !important;
 | |
| }
 | |
| div.photoswipe figcaption {
 | |
| 	text-align:center;
 | |
| }
 | |
| 
 | |
| div.floatleft {
 | |
| 	float:left;
 | |
| 	margin:0 1em 1em 0;
 | |
| }
 | |
| div.floatleft img.floatleft {
 | |
| 	float:none;
 | |
| }
 | |
| div.floatright {
 | |
| 	float:right;
 | |
| 	margin:0 0 1em 1em;
 | |
| }
 | |
| div.floatright img.floatright {
 | |
| 	float:none;
 | |
| }
 | |
| .img-gallery div.photoswipe figure {
 | |
| 	display:inline-block;
 | |
| 	vertical-align: top;
 | |
| 	text-align:center;
 | |
| 	margin:.5em 1em 0 0;
 | |
| }
 | |
| 
 | |
| 
 | |
| button.pswp__button--share {
 | |
| 	display:none;
 | |
| }
 | |
| 
 | |
| div.img-gallery div.photoswipe,
 | |
| div.img-gallery figure,
 | |
| div.img-gallery div.photoswipe
 | |
|  {
 | |
| 	display: inline;
 | |
| }
 | |
| 
 | |
| 
 | |
| .pswp__img { margin: 0px !important; }
 | |
| 
 | |
| .pswp__caption__center {
 | |
|   text-align: center;
 | |
|   margin: 0 auto;
 | |
|   max-width:90%;
 | |
| } | 
