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