Нема описа

photoswipe.css 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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: 1500;
  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. /* adjust for admin bar */
  58. .admin-bar .pswp {
  59. height: calc(100% - 32px);
  60. top: 32px;
  61. }
  62. @media screen and (max-width: 782px) {
  63. .admin-bar .pswp {
  64. height: calc(100% - 46px);
  65. top: 46px;
  66. }
  67. }
  68. /* style is added when JS option showHideOpacity is set to true */
  69. .pswp--animate_opacity {
  70. /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  71. opacity: 0.001;
  72. will-change: opacity;
  73. /* for open/close transition */
  74. -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  75. transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  76. .pswp--open {
  77. display: block; }
  78. .pswp--zoom-allowed .pswp__img {
  79. /* autoprefixer: off */
  80. cursor: -webkit-zoom-in;
  81. cursor: -moz-zoom-in;
  82. cursor: zoom-in; }
  83. .pswp--zoomed-in .pswp__img {
  84. /* autoprefixer: off */
  85. cursor: -webkit-grab;
  86. cursor: -moz-grab;
  87. cursor: grab; }
  88. .pswp--dragging .pswp__img {
  89. /* autoprefixer: off */
  90. cursor: -webkit-grabbing;
  91. cursor: -moz-grabbing;
  92. cursor: grabbing; }
  93. /*
  94. Background is added as a separate element.
  95. As animating opacity is much faster than animating rgba() background-color.
  96. */
  97. .pswp__bg {
  98. position: absolute;
  99. left: 0;
  100. top: 0;
  101. width: 100%;
  102. height: 100%;
  103. background: #000;
  104. opacity: 0;
  105. -webkit-transform: translateZ(0);
  106. transform: translateZ(0);
  107. -webkit-backface-visibility: hidden;
  108. will-change: opacity; }
  109. .pswp__scroll-wrap {
  110. position: absolute;
  111. left: 0;
  112. top: 0;
  113. width: 100%;
  114. height: 100%;
  115. overflow: hidden; }
  116. .pswp__container,
  117. .pswp__zoom-wrap {
  118. -ms-touch-action: none;
  119. touch-action: none;
  120. position: absolute;
  121. left: 0;
  122. right: 0;
  123. top: 0;
  124. bottom: 0; }
  125. /* Prevent selection and tap highlights */
  126. .pswp__container,
  127. .pswp__img {
  128. -webkit-user-select: none;
  129. -moz-user-select: none;
  130. -ms-user-select: none;
  131. user-select: none;
  132. -webkit-tap-highlight-color: transparent;
  133. -webkit-touch-callout: none; }
  134. .pswp__zoom-wrap {
  135. position: absolute;
  136. width: 100%;
  137. -webkit-transform-origin: left top;
  138. -ms-transform-origin: left top;
  139. transform-origin: left top;
  140. /* for open/close transition */
  141. -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  142. transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  143. .pswp__bg {
  144. will-change: opacity;
  145. /* for open/close transition */
  146. -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  147. transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
  148. .pswp--animated-in .pswp__bg,
  149. .pswp--animated-in .pswp__zoom-wrap {
  150. -webkit-transition: none;
  151. transition: none; }
  152. .pswp__container,
  153. .pswp__zoom-wrap {
  154. -webkit-backface-visibility: hidden; }
  155. .pswp__item {
  156. position: absolute;
  157. left: 0;
  158. right: 0;
  159. top: 0;
  160. bottom: 0;
  161. overflow: hidden; }
  162. .pswp__img {
  163. position: absolute;
  164. width: auto;
  165. height: auto;
  166. top: 0;
  167. left: 0; }
  168. /*
  169. stretched thumbnail or div placeholder element (see below)
  170. style is added to avoid flickering in webkit/blink when layers overlap
  171. */
  172. .pswp__img--placeholder {
  173. -webkit-backface-visibility: hidden; }
  174. /*
  175. div element that matches size of large image
  176. large image loads on top of it
  177. */
  178. .pswp__img--placeholder--blank {
  179. background: #222; }
  180. .pswp--ie .pswp__img {
  181. width: 100% !important;
  182. height: auto !important;
  183. left: 0;
  184. top: 0; }
  185. /*
  186. Error message appears when image is not loaded
  187. (JS option errorMsg controls markup)
  188. */
  189. .pswp__error-msg {
  190. position: absolute;
  191. left: 0;
  192. top: 50%;
  193. width: 100%;
  194. text-align: center;
  195. font-size: 14px;
  196. line-height: 16px;
  197. margin-top: -8px;
  198. color: #CCC; }
  199. .pswp__error-msg a {
  200. color: #CCC;
  201. text-decoration: underline; }