blueimp-gallery.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. @charset "UTF-8";
  2. /*
  3. * blueimp Gallery CSS 2.11.1
  4. * https://github.com/blueimp/Gallery
  5. *
  6. * Copyright 2013, Sebastian Tschan
  7. * https://blueimp.net
  8. *
  9. * Licensed under the MIT license:
  10. * http://www.opensource.org/licenses/MIT
  11. */
  12. .blueimp-gallery,
  13. .blueimp-gallery > .slides > .slide > .slide-content {
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. bottom: 0;
  18. left: 0;
  19. /* Prevent artifacts in Mozilla Firefox: */
  20. -moz-backface-visibility: hidden;
  21. }
  22. .blueimp-gallery > .slides > .slide > .slide-content {
  23. margin: auto;
  24. width: auto;
  25. height: auto;
  26. max-width: 100%;
  27. max-height: 100%;
  28. opacity: 1;
  29. }
  30. .blueimp-gallery {
  31. position: fixed;
  32. z-index: 999999;
  33. overflow: hidden;
  34. background: #000;
  35. background: rgba(0, 0, 0, 0.9);
  36. opacity: 0;
  37. display: none;
  38. direction: ltr;
  39. -ms-touch-action: none;
  40. touch-action: none;
  41. }
  42. .blueimp-gallery-carousel {
  43. position: relative;
  44. z-index: auto;
  45. margin: 1em auto;
  46. /* Set the carousel width/height ratio to 16/9: */
  47. padding-bottom: 56.25%;
  48. box-shadow: 0 0 10px #000;
  49. -ms-touch-action: pan-y;
  50. touch-action: pan-y;
  51. }
  52. .blueimp-gallery-display {
  53. display: block;
  54. opacity: 1;
  55. }
  56. .blueimp-gallery > .slides {
  57. position: relative;
  58. height: 100%;
  59. overflow: hidden;
  60. }
  61. .blueimp-gallery-carousel > .slides {
  62. position: absolute;
  63. }
  64. .blueimp-gallery > .slides > .slide {
  65. position: relative;
  66. float: left;
  67. height: 100%;
  68. text-align: center;
  69. -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  70. -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  71. -ms-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  72. -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  73. transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  74. }
  75. .blueimp-gallery,
  76. .blueimp-gallery > .slides > .slide > .slide-content {
  77. -webkit-transition: opacity 0.5s linear;
  78. -moz-transition: opacity 0.5s linear;
  79. -ms-transition: opacity 0.5s linear;
  80. -o-transition: opacity 0.5s linear;
  81. transition: opacity 0.5s linear;
  82. }
  83. .blueimp-gallery > .slides > .slide-loading {
  84. background: url(../img/loading.gif) center no-repeat;
  85. background-size: 64px 64px;
  86. }
  87. .blueimp-gallery > .slides > .slide-loading > .slide-content {
  88. opacity: 0;
  89. }
  90. .blueimp-gallery > .slides > .slide-error {
  91. background: url(../img/error.png) center no-repeat;
  92. }
  93. .blueimp-gallery > .slides > .slide-error > .slide-content {
  94. display: none;
  95. }
  96. .blueimp-gallery > .prev,
  97. .blueimp-gallery > .next {
  98. position: absolute;
  99. top: 50%;
  100. left: 15px;
  101. width: 40px;
  102. height: 40px;
  103. margin-top: -23px;
  104. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  105. font-size: 60px;
  106. font-weight: 100;
  107. line-height: 30px;
  108. color: #fff;
  109. text-decoration: none;
  110. text-shadow: 0 0 2px #000;
  111. text-align: center;
  112. background: #222;
  113. background: rgba(0, 0, 0, 0.5);
  114. -webkit-box-sizing: content-box;
  115. -moz-box-sizing: content-box;
  116. box-sizing: content-box;
  117. border: 3px solid #fff;
  118. -webkit-border-radius: 23px;
  119. -moz-border-radius: 23px;
  120. border-radius: 23px;
  121. opacity: 0.5;
  122. cursor: pointer;
  123. display: none;
  124. }
  125. .blueimp-gallery > .next {
  126. left: auto;
  127. right: 15px;
  128. }
  129. .blueimp-gallery > .close,
  130. .blueimp-gallery > .title {
  131. position: absolute;
  132. top: 15px;
  133. left: 15px;
  134. margin: 0 40px 0 0;
  135. font-size: 20px;
  136. line-height: 30px;
  137. color: #fff;
  138. text-shadow: 0 0 2px #000;
  139. opacity: 0.8;
  140. display: none;
  141. }
  142. .blueimp-gallery > .close {
  143. padding: 15px;
  144. right: 15px;
  145. left: auto;
  146. margin: -15px;
  147. font-size: 30px;
  148. text-decoration: none;
  149. cursor: pointer;
  150. }
  151. .blueimp-gallery > .play-pause {
  152. position: absolute;
  153. right: 15px;
  154. bottom: 15px;
  155. width: 15px;
  156. height: 15px;
  157. background: url(../img/play-pause.png) 0 0 no-repeat;
  158. cursor: pointer;
  159. opacity: 0.5;
  160. display: none;
  161. }
  162. .blueimp-gallery-playing > .play-pause {
  163. background-position: -15px 0;
  164. }
  165. .blueimp-gallery > .prev:hover,
  166. .blueimp-gallery > .next:hover,
  167. .blueimp-gallery > .close:hover,
  168. .blueimp-gallery > .title:hover,
  169. .blueimp-gallery > .play-pause:hover {
  170. color: #fff;
  171. opacity: 1;
  172. }
  173. .blueimp-gallery-controls > .prev,
  174. .blueimp-gallery-controls > .next,
  175. .blueimp-gallery-controls > .close,
  176. .blueimp-gallery-controls > .title,
  177. .blueimp-gallery-controls > .play-pause {
  178. display: block;
  179. /* Fix z-index issues (controls behind slide element) on Android: */
  180. -webkit-transform: translateZ(0);
  181. -moz-transform: translateZ(0);
  182. -ms-transform: translateZ(0);
  183. -o-transform: translateZ(0);
  184. transform: translateZ(0);
  185. }
  186. .blueimp-gallery-single > .prev,
  187. .blueimp-gallery-left > .prev,
  188. .blueimp-gallery-single > .next,
  189. .blueimp-gallery-right > .next,
  190. .blueimp-gallery-single > .play-pause {
  191. display: none;
  192. }
  193. .blueimp-gallery > .slides > .slide > .slide-content,
  194. .blueimp-gallery > .prev,
  195. .blueimp-gallery > .next,
  196. .blueimp-gallery > .close,
  197. .blueimp-gallery > .play-pause {
  198. -webkit-user-select: none;
  199. -khtml-user-select: none;
  200. -moz-user-select: none;
  201. -ms-user-select: none;
  202. user-select: none;
  203. }
  204. /* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
  205. body:last-child .blueimp-gallery > .slides > .slide-error {
  206. background-image: url(../img/error.svg);
  207. }
  208. body:last-child .blueimp-gallery > .play-pause {
  209. width: 20px;
  210. height: 20px;
  211. background-size: 40px 20px;
  212. background-image: url(../img/play-pause.svg);
  213. }
  214. body:last-child .blueimp-gallery-playing > .play-pause {
  215. background-position: -20px 0;
  216. }
  217. /* IE7 fixes */
  218. *+html .blueimp-gallery > .slides > .slide {
  219. min-height: 300px;
  220. }
  221. *+html .blueimp-gallery > .slides > .slide > .slide-content {
  222. position: relative;
  223. }