lightbox.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. body.lb-disable-scrolling {
  2. overflow: hidden;
  3. }
  4. .lightboxOverlay {
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. z-index: 9999;
  9. background-color: black;
  10. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  11. opacity: 0.8;
  12. display: none;
  13. }
  14. .lightbox {
  15. position: absolute;
  16. left: 0;
  17. width: 100%;
  18. z-index: 10000;
  19. text-align: center;
  20. line-height: 0;
  21. font-weight: normal;
  22. outline: none;
  23. }
  24. .lightbox .lb-image {
  25. display: block;
  26. height: auto;
  27. max-width: inherit;
  28. max-height: none;
  29. border-radius: 3px;
  30. /* Image border */
  31. border: 4px solid white;
  32. }
  33. .lightbox a img {
  34. border: none;
  35. }
  36. .lb-outerContainer {
  37. position: relative;
  38. *zoom: 1;
  39. width: 250px;
  40. height: 250px;
  41. margin: 0 auto;
  42. border-radius: 4px;
  43. /* Background color behind image.
  44. This is visible during transitions. */
  45. background-color: white;
  46. }
  47. .lb-outerContainer:after {
  48. content: "";
  49. display: table;
  50. clear: both;
  51. }
  52. .lb-loader {
  53. position: absolute;
  54. top: 43%;
  55. left: 0;
  56. height: 25%;
  57. width: 100%;
  58. text-align: center;
  59. line-height: 0;
  60. }
  61. .lb-cancel {
  62. display: block;
  63. width: 32px;
  64. height: 32px;
  65. margin: 0 auto;
  66. background: url(../images/loading.gif) no-repeat;
  67. }
  68. .lb-nav {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. height: 100%;
  73. width: 100%;
  74. z-index: 10;
  75. }
  76. .lb-container > .nav {
  77. left: 0;
  78. }
  79. .lb-nav a {
  80. outline: none;
  81. background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  82. }
  83. .lb-prev, .lb-next {
  84. height: 100%;
  85. cursor: pointer;
  86. display: block;
  87. }
  88. .lb-nav a.lb-prev {
  89. width: 34%;
  90. left: 0;
  91. float: left;
  92. background: url(../images/prev.png) left 48% no-repeat;
  93. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  94. opacity: 0;
  95. -webkit-transition: opacity 0.6s;
  96. -moz-transition: opacity 0.6s;
  97. -o-transition: opacity 0.6s;
  98. transition: opacity 0.6s;
  99. }
  100. .lb-nav a.lb-prev:hover {
  101. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  102. opacity: 1;
  103. }
  104. .lb-nav a.lb-next {
  105. width: 64%;
  106. right: 0;
  107. float: right;
  108. background: url(../images/next.png) right 48% no-repeat;
  109. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  110. opacity: 0;
  111. -webkit-transition: opacity 0.6s;
  112. -moz-transition: opacity 0.6s;
  113. -o-transition: opacity 0.6s;
  114. transition: opacity 0.6s;
  115. }
  116. .lb-nav a.lb-next:hover {
  117. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  118. opacity: 1;
  119. }
  120. .lb-dataContainer {
  121. margin: 0 auto;
  122. padding-top: 5px;
  123. *zoom: 1;
  124. width: 100%;
  125. border-bottom-left-radius: 4px;
  126. border-bottom-right-radius: 4px;
  127. }
  128. .lb-dataContainer:after {
  129. content: "";
  130. display: table;
  131. clear: both;
  132. }
  133. .lb-data {
  134. padding: 0 4px;
  135. color: #ccc;
  136. }
  137. .lb-data .lb-details {
  138. width: 85%;
  139. float: left;
  140. text-align: left;
  141. line-height: 1.1em;
  142. }
  143. .lb-data .lb-caption {
  144. font-size: 13px;
  145. font-weight: bold;
  146. line-height: 1em;
  147. }
  148. .lb-data .lb-caption a {
  149. color: #4ae;
  150. }
  151. .lb-data .lb-number {
  152. display: block;
  153. clear: left;
  154. padding-bottom: 1em;
  155. font-size: 12px;
  156. color: #999999;
  157. }
  158. .lb-data .lb-close {
  159. display: block;
  160. float: right;
  161. width: 30px;
  162. height: 30px;
  163. background: url(../images/close.png) top right no-repeat;
  164. text-align: right;
  165. outline: none;
  166. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  167. opacity: 0.7;
  168. -webkit-transition: opacity 0.2s;
  169. -moz-transition: opacity 0.2s;
  170. -o-transition: opacity 0.2s;
  171. transition: opacity 0.2s;
  172. }
  173. .lb-data .lb-close:hover {
  174. cursor: pointer;
  175. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  176. opacity: 1;
  177. }