photoswipe.css 4.9 KB

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