blueimp-gallery.css 5.4 KB

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