Le blog de Victor Héry https://blog.victor-hery.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
4.0 KiB

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