photoswipe.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  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-backface-visibility: hidden;
  64. will-change: opacity; }
  65. .pswp__scroll-wrap {
  66. position: absolute;
  67. left: 0;
  68. top: 0;
  69. width: 100%;
  70. height: 100%;
  71. overflow: hidden; }
  72. .pswp__container,
  73. .pswp__zoom-wrap {
  74. -ms-touch-action: none;
  75. touch-action: none;
  76. position: absolute;
  77. left: 0;
  78. right: 0;
  79. top: 0;
  80. bottom: 0; }
  81. /* Prevent selection and tap highlights */
  82. .pswp__container,
  83. .pswp__img {
  84. -webkit-user-select: none;
  85. -moz-user-select: none;
  86. -ms-user-select: none;
  87. user-select: none;
  88. -webkit-tap-highlight-color: transparent;
  89. -webkit-touch-callout: none; }
  90. .pswp__zoom-wrap {
  91. position: absolute;
  92. width: 100%;
  93. -webkit-transform-origin: left top;
  94. -ms-transform-origin: left top;
  95. transform-origin: left top;
  96. /* for open/close transition */
  97. -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  98. transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  99. .pswp__bg {
  100. will-change: opacity;
  101. /* for open/close transition */
  102. -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  103. transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  104. .pswp--animated-in .pswp__bg,
  105. .pswp--animated-in .pswp__zoom-wrap {
  106. -webkit-transition: none;
  107. transition: none; }
  108. .pswp__container,
  109. .pswp__zoom-wrap {
  110. -webkit-backface-visibility: hidden; }
  111. .pswp__item {
  112. position: absolute;
  113. left: 0;
  114. right: 0;
  115. top: 0;
  116. bottom: 0;
  117. overflow: hidden; }
  118. .pswp__img {
  119. position: absolute;
  120. width: auto;
  121. height: auto;
  122. top: 0;
  123. left: 0; }
  124. /*
  125. stretched thumbnail or div placeholder element (see below)
  126. style is added to avoid flickering in webkit/blink when layers overlap
  127. */
  128. .pswp__img--placeholder {
  129. -webkit-backface-visibility: hidden; }
  130. /*
  131. div element that matches size of large image
  132. large image loads on top of it
  133. */
  134. .pswp__img--placeholder--blank {
  135. background: #222; }
  136. .pswp--ie .pswp__img {
  137. width: 100% !important;
  138. height: auto !important;
  139. left: 0;
  140. top: 0; }
  141. /*
  142. Error message appears when image is not loaded
  143. (JS option errorMsg controls markup)
  144. */
  145. .pswp__error-msg {
  146. position: absolute;
  147. left: 0;
  148. top: 50%;
  149. width: 100%;
  150. text-align: center;
  151. font-size: 14px;
  152. line-height: 16px;
  153. margin-top: -8px;
  154. color: #CCC; }
  155. .pswp__error-msg a {
  156. color: #CCC;
  157. text-decoration: underline; }