photoswipe.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
  2. /*
  3. Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
  4. */
  5. /* pswp = photoswipe */
  6. .pswp {
  7. display: none;
  8. position: absolute;
  9. width: 100%;
  10. height: 100%;
  11. left: 0;
  12. top: 0;
  13. overflow: hidden;
  14. -ms-touch-action: none;
  15. touch-action: none;
  16. z-index: 1500;
  17. -webkit-text-size-adjust: 100%;
  18. /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  19. -webkit-backface-visibility: hidden;
  20. outline: none; }
  21. .pswp * {
  22. -webkit-box-sizing: border-box;
  23. box-sizing: border-box; }
  24. .pswp img {
  25. max-width: none; }
  26. /* style is added when JS option showHideOpacity is set to true */
  27. .pswp--animate_opacity {
  28. /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  29. opacity: 0.001;
  30. will-change: opacity;
  31. /* for open/close transition */
  32. -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  33. transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  34. .pswp--open {
  35. display: block; }
  36. .pswp--zoom-allowed .pswp__img {
  37. /* autoprefixer: off */
  38. cursor: -webkit-zoom-in;
  39. cursor: -moz-zoom-in;
  40. cursor: zoom-in; }
  41. .pswp--zoomed-in .pswp__img {
  42. /* autoprefixer: off */
  43. cursor: -webkit-grab;
  44. cursor: -moz-grab;
  45. cursor: grab; }
  46. .pswp--dragging .pswp__img {
  47. /* autoprefixer: off */
  48. cursor: -webkit-grabbing;
  49. cursor: -moz-grabbing;
  50. cursor: grabbing; }
  51. /*
  52. Background is added as a separate element.
  53. As animating opacity is much faster than animating rgba() background-color.
  54. */
  55. .pswp__bg {
  56. position: absolute;
  57. left: 0;
  58. top: 0;
  59. width: 100%;
  60. height: 100%;
  61. background: #000;
  62. opacity: 0;
  63. -webkit-transform: translateZ(0);
  64. transform: translateZ(0);
  65. -webkit-backface-visibility: hidden;
  66. will-change: opacity; }
  67. .pswp__scroll-wrap {
  68. position: absolute;
  69. left: 0;
  70. top: 0;
  71. width: 100%;
  72. height: 100%;
  73. overflow: hidden; }
  74. .pswp__container,
  75. .pswp__zoom-wrap {
  76. -ms-touch-action: none;
  77. touch-action: none;
  78. position: absolute;
  79. left: 0;
  80. right: 0;
  81. top: 0;
  82. bottom: 0; }
  83. /* Prevent selection and tap highlights */
  84. .pswp__container,
  85. .pswp__img {
  86. -webkit-user-select: none;
  87. -moz-user-select: none;
  88. -ms-user-select: none;
  89. user-select: none;
  90. -webkit-tap-highlight-color: transparent;
  91. -webkit-touch-callout: none; }
  92. .pswp__zoom-wrap {
  93. position: absolute;
  94. width: 100%;
  95. -webkit-transform-origin: left top;
  96. -ms-transform-origin: left top;
  97. transform-origin: left top;
  98. /* for open/close transition */
  99. -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  100. transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  101. .pswp__bg {
  102. will-change: opacity;
  103. /* for open/close transition */
  104. -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  105. transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  106. .pswp--animated-in .pswp__bg,
  107. .pswp--animated-in .pswp__zoom-wrap {
  108. -webkit-transition: none;
  109. transition: none; }
  110. .pswp__container,
  111. .pswp__zoom-wrap {
  112. -webkit-backface-visibility: hidden; }
  113. .pswp__item {
  114. position: absolute;
  115. left: 0;
  116. right: 0;
  117. top: 0;
  118. bottom: 0;
  119. overflow: hidden; }
  120. .pswp__img {
  121. position: absolute;
  122. width: auto;
  123. height: auto;
  124. top: 0;
  125. left: 0; }
  126. /*
  127. stretched thumbnail or div placeholder element (see below)
  128. style is added to avoid flickering in webkit/blink when layers overlap
  129. */
  130. .pswp__img--placeholder {
  131. -webkit-backface-visibility: hidden; }
  132. /*
  133. div element that matches size of large image
  134. large image loads on top of it
  135. */
  136. .pswp__img--placeholder--blank {
  137. background: #222; }
  138. .pswp--ie .pswp__img {
  139. width: 100% !important;
  140. height: auto !important;
  141. left: 0;
  142. top: 0; }
  143. /*
  144. Error message appears when image is not loaded
  145. (JS option errorMsg controls markup)
  146. */
  147. .pswp__error-msg {
  148. position: absolute;
  149. left: 0;
  150. top: 50%;
  151. width: 100%;
  152. text-align: center;
  153. font-size: 14px;
  154. line-height: 16px;
  155. margin-top: -8px;
  156. color: #CCC; }
  157. .pswp__error-msg a {
  158. color: #CCC;
  159. text-decoration: underline; }