nivo-lightbox.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * Nivo Lightbox v1.3.1
  3. * http://dev7studios.com/nivo-lightbox
  4. *
  5. * Copyright 2013, Dev7studios
  6. * Free to use and abuse under the MIT license.
  7. * http://www.opensource.org/licenses/mit-license.php
  8. */
  9. .nivo-lightbox-overlay {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. z-index: 999999;
  14. width: 100%;
  15. height: 100%;
  16. overflow: hidden;
  17. visibility: hidden;
  18. opacity: 0;
  19. background: rgba(0, 0, 0, 0.8);
  20. -webkit-box-sizing: border-box;
  21. -moz-box-sizing: border-box;
  22. box-sizing: border-box;
  23. }
  24. .nivo-lightbox-overlay.nivo-lightbox-open {
  25. visibility: visible;
  26. opacity: 1;
  27. }
  28. .nivo-lightbox-wrap {
  29. position: absolute;
  30. top: 10%;
  31. bottom: 10%;
  32. left: 10%;
  33. right: 10%;
  34. }
  35. .nivo-lightbox-content {
  36. width: 100%;
  37. height: 100%;
  38. }
  39. .nivo-lightbox-title-wrap {
  40. position: absolute;
  41. bottom: 0;
  42. left: 0;
  43. width: 100%;
  44. z-index: 99999;
  45. text-align: center;
  46. }
  47. .nivo-lightbox-nav { display: none; }
  48. .nivo-lightbox-prev {
  49. position: absolute;
  50. top: 50%;
  51. left: 0;
  52. }
  53. .nivo-lightbox-next {
  54. position: absolute;
  55. top: 50%;
  56. right: 0;
  57. }
  58. .nivo-lightbox-close {
  59. position: absolute;
  60. top: 2%;
  61. right: 2%;
  62. }
  63. .nivo-lightbox-image { text-align: center; }
  64. .nivo-lightbox-image img {
  65. max-width: 100%;
  66. max-height: 100%;
  67. width: auto;
  68. height: auto;
  69. vertical-align: middle;
  70. }
  71. .nivo-lightbox-content iframe {
  72. width: 100%;
  73. height: 100%;
  74. }
  75. .nivo-lightbox-inline,
  76. .nivo-lightbox-ajax {
  77. max-height: 100%;
  78. overflow: auto;
  79. -webkit-box-sizing: border-box;
  80. -moz-box-sizing: border-box;
  81. box-sizing: border-box;
  82. /* https://bugzilla.mozilla.org/show_bug.cgi?id=308801 */
  83. }
  84. .nivo-lightbox-error {
  85. display: table;
  86. text-align: center;
  87. width: 100%;
  88. height: 100%;
  89. color: #fff;
  90. text-shadow: 0 1px 1px #000;
  91. }
  92. .nivo-lightbox-error p {
  93. display: table-cell;
  94. vertical-align: middle;
  95. }
  96. /* Effects
  97. **********************************************/
  98. .nivo-lightbox-notouch .nivo-lightbox-effect-fade,
  99. .nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
  100. .nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
  101. .nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
  102. .nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
  103. .nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
  104. .nivo-lightbox-notouch .nivo-lightbox-effect-fall {
  105. -webkit-transition: all 0.2s ease-in-out;
  106. -moz-transition: all 0.2s ease-in-out;
  107. -ms-transition: all 0.2s ease-in-out;
  108. -o-transition: all 0.2s ease-in-out;
  109. transition: all 0.2s ease-in-out;
  110. }
  111. /* fadeScale */
  112. .nivo-lightbox-effect-fadeScale .nivo-lightbox-wrap {
  113. -webkit-transition: all 0.3s;
  114. -moz-transition: all 0.3s;
  115. -ms-transition: all 0.3s;
  116. -o-transition: all 0.3s;
  117. transition: all 0.3s;
  118. -webkit-transform: scale(0.7);
  119. -moz-transform: scale(0.7);
  120. -ms-transform: scale(0.7);
  121. transform: scale(0.7);
  122. }
  123. .nivo-lightbox-effect-fadeScale.nivo-lightbox-open .nivo-lightbox-wrap {
  124. -webkit-transform: scale(1);
  125. -moz-transform: scale(1);
  126. -ms-transform: scale(1);
  127. transform: scale(1);
  128. }
  129. /* slideLeft / slideRight / slideUp / slideDown */
  130. .nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap,
  131. .nivo-lightbox-effect-slideRight .nivo-lightbox-wrap,
  132. .nivo-lightbox-effect-slideUp .nivo-lightbox-wrap,
  133. .nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
  134. -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  135. -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  136. -ms-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  137. -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  138. transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  139. }
  140. .nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap {
  141. -webkit-transform: translateX(-10%);
  142. -moz-transform: translateX(-10%);
  143. -ms-transform: translateX(-10%);
  144. transform: translateX(-10%);
  145. }
  146. .nivo-lightbox-effect-slideRight .nivo-lightbox-wrap {
  147. -webkit-transform: translateX(10%);
  148. -moz-transform: translateX(10%);
  149. -ms-transform: translateX(10%);
  150. transform: translateX(10%);
  151. }
  152. .nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
  153. .nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
  154. -webkit-transform: translateX(0);
  155. -moz-transform: translateX(0);
  156. -ms-transform: translateX(0);
  157. transform: translateX(0);
  158. }
  159. .nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
  160. -webkit-transform: translateY(-10%);
  161. -moz-transform: translateY(-10%);
  162. -ms-transform: translateY(-10%);
  163. transform: translateY(-10%);
  164. }
  165. .nivo-lightbox-effect-slideUp .nivo-lightbox-wrap {
  166. -webkit-transform: translateY(10%);
  167. -moz-transform: translateY(10%);
  168. -ms-transform: translateY(10%);
  169. transform: translateY(10%);
  170. }
  171. .nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap,
  172. .nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
  173. -webkit-transform: translateY(0);
  174. -moz-transform: translateY(0);
  175. -ms-transform: translateY(0);
  176. transform: translateY(0);
  177. }
  178. /* fall */
  179. .nivo-lightbox-body-effect-fall .nivo-lightbox-effect-fall {
  180. -webkit-perspective: 1000px;
  181. -moz-perspective: 1000px;
  182. perspective: 1000px;
  183. }
  184. .nivo-lightbox-effect-fall .nivo-lightbox-wrap {
  185. -webkit-transition: all 0.3s ease-out;
  186. -moz-transition: all 0.3s ease-out;
  187. -ms-transition: all 0.3s ease-out;
  188. -o-transition: all 0.3s ease-out;
  189. transition: all 0.3s ease-out;
  190. -webkit-transform: translateZ(300px);
  191. -moz-transform: translateZ(300px);
  192. -ms-transform: translateZ(300px);
  193. transform: translateZ(300px);
  194. }
  195. .nivo-lightbox-effect-fall.nivo-lightbox-open .nivo-lightbox-wrap {
  196. -webkit-transform: translateZ(0);
  197. -moz-transform: translateZ(0);
  198. -ms-transform: translateZ(0);
  199. transform: translateZ(0);
  200. }
  201. .icon-close{
  202. font-size: 24px;
  203. }