magnific-popup.css (8049B)
1 /* Magnific Popup CSS */ 2 .mfp-bg { 3 top: 0; 4 left: 0; 5 width: 100%; 6 height: 100%; 7 z-index: 1042; 8 overflow: hidden; 9 position: fixed; 10 background: #0b0b0b; 11 opacity: 0.8; 12 filter: alpha(opacity=80); } 13 14 .mfp-wrap { 15 top: 0; 16 left: 0; 17 width: 100%; 18 height: 100%; 19 z-index: 1043; 20 position: fixed; 21 outline: none !important; 22 -webkit-backface-visibility: hidden; } 23 24 .mfp-container { 25 text-align: center; 26 position: absolute; 27 width: 100%; 28 height: 100%; 29 left: 0; 30 top: 0; 31 padding: 0 8px; 32 -webkit-box-sizing: border-box; 33 -moz-box-sizing: border-box; 34 box-sizing: border-box; } 35 36 .mfp-container:before { 37 content: ''; 38 display: inline-block; 39 height: 100%; 40 vertical-align: middle; } 41 42 .mfp-align-top .mfp-container:before { 43 display: none; } 44 45 .mfp-content { 46 position: relative; 47 display: inline-block; 48 vertical-align: middle; 49 margin: 0 auto; 50 text-align: left; 51 z-index: 1045; } 52 53 .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { 54 width: 100%; 55 cursor: auto; } 56 57 .mfp-ajax-cur { 58 cursor: progress; } 59 60 .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { 61 cursor: -moz-zoom-out; 62 cursor: -webkit-zoom-out; 63 cursor: zoom-out; } 64 65 .mfp-zoom { 66 cursor: pointer; 67 cursor: -webkit-zoom-in; 68 cursor: -moz-zoom-in; 69 cursor: zoom-in; } 70 71 .mfp-auto-cursor .mfp-content { 72 cursor: auto; } 73 74 .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { 75 -webkit-user-select: none; 76 -moz-user-select: none; 77 user-select: none; } 78 79 .mfp-loading.mfp-figure { 80 display: none; } 81 82 .mfp-hide { 83 display: none !important; } 84 85 .mfp-preloader { 86 color: #cccccc; 87 position: absolute; 88 top: 50%; 89 width: auto; 90 text-align: center; 91 margin-top: -0.8em; 92 left: 8px; 93 right: 8px; 94 z-index: 1044; } 95 .mfp-preloader a { 96 color: #cccccc; } 97 .mfp-preloader a:hover { 98 color: white; } 99 100 .mfp-s-ready .mfp-preloader { 101 display: none; } 102 103 .mfp-s-error .mfp-content { 104 display: none; } 105 106 button.mfp-close, button.mfp-arrow { 107 overflow: visible; 108 cursor: pointer; 109 background: transparent; 110 border: 0; 111 -webkit-appearance: none; 112 display: block; 113 outline: none; 114 padding: 0; 115 z-index: 1046; 116 -webkit-box-shadow: none; 117 box-shadow: none; } 118 button::-moz-focus-inner { 119 padding: 0; 120 border: 0; } 121 122 .mfp-close { 123 width: 44px; 124 height: 44px; 125 line-height: 44px; 126 position: absolute; 127 right: 0; 128 top: 0; 129 text-decoration: none; 130 text-align: center; 131 opacity: 0.65; 132 padding: 0 0 18px 10px; 133 color: white; 134 font-style: normal; 135 font-size: 28px; 136 font-family: Arial, Baskerville, monospace; } 137 .mfp-close:hover, .mfp-close:focus { 138 opacity: 1; } 139 .mfp-close:active { 140 top: 1px; } 141 142 .mfp-close-btn-in .mfp-close { 143 color: #333333; } 144 145 .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { 146 color: white; 147 right: -6px; 148 text-align: right; 149 padding-right: 6px; 150 width: 100%; } 151 152 .mfp-counter { 153 position: absolute; 154 top: 0; 155 right: 0; 156 color: #cccccc; 157 font-size: 12px; 158 line-height: 18px; } 159 160 .mfp-arrow { 161 position: absolute; 162 opacity: 0.65; 163 margin: 0; 164 top: 50%; 165 margin-top: -55px; 166 padding: 0; 167 width: 90px; 168 height: 110px; 169 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 170 .mfp-arrow:active { 171 margin-top: -54px; } 172 .mfp-arrow:hover, .mfp-arrow:focus { 173 opacity: 1; } 174 .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { 175 content: ''; 176 display: block; 177 width: 0; 178 height: 0; 179 position: absolute; 180 left: 0; 181 top: 0; 182 margin-top: 35px; 183 margin-left: 35px; 184 border: medium inset transparent; } 185 .mfp-arrow:after, .mfp-arrow .mfp-a { 186 border-top-width: 13px; 187 border-bottom-width: 13px; 188 top: 8px; } 189 .mfp-arrow:before, .mfp-arrow .mfp-b { 190 border-top-width: 21px; 191 border-bottom-width: 21px; } 192 193 .mfp-arrow-left { 194 left: 0; } 195 .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { 196 border-right: 17px solid white; 197 margin-left: 31px; } 198 .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { 199 margin-left: 25px; 200 border-right: 27px solid #3f3f3f; } 201 202 .mfp-arrow-right { 203 right: 0; } 204 .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { 205 border-left: 17px solid white; 206 margin-left: 39px; } 207 .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { 208 border-left: 27px solid #3f3f3f; } 209 210 .mfp-iframe-holder { 211 padding-top: 40px; 212 padding-bottom: 40px; } 213 .mfp-iframe-holder .mfp-content { 214 line-height: 0; 215 width: 100%; 216 max-width: 900px; } 217 .mfp-iframe-holder .mfp-close { 218 top: -40px; } 219 220 .mfp-iframe-scaler { 221 width: 100%; 222 height: 0; 223 overflow: hidden; 224 padding-top: 56.25%; } 225 .mfp-iframe-scaler iframe { 226 position: absolute; 227 display: block; 228 top: 0; 229 left: 0; 230 width: 100%; 231 height: 100%; 232 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); 233 background: black; } 234 235 /* Main image in popup */ 236 img.mfp-img { 237 width: auto; 238 max-width: 100%; 239 height: auto; 240 display: block; 241 line-height: 0; 242 -webkit-box-sizing: border-box; 243 -moz-box-sizing: border-box; 244 box-sizing: border-box; 245 padding: 40px 0 40px; 246 margin: 0 auto; } 247 248 /* The shadow behind the image */ 249 .mfp-figure { 250 line-height: 0; } 251 .mfp-figure:after { 252 content: ''; 253 position: absolute; 254 left: 0; 255 top: 40px; 256 bottom: 40px; 257 display: block; 258 right: 0; 259 width: auto; 260 height: auto; 261 z-index: -1; 262 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); 263 background: #444444; } 264 .mfp-figure small { 265 color: #bdbdbd; 266 display: block; 267 font-size: 12px; 268 line-height: 14px; } 269 270 .mfp-bottom-bar { 271 margin-top: -36px; 272 position: absolute; 273 top: 100%; 274 left: 0; 275 width: 100%; 276 cursor: auto; } 277 278 .mfp-title { 279 text-align: left; 280 line-height: 18px; 281 color: #f3f3f3; 282 word-wrap: break-word; 283 padding-right: 36px; } 284 285 .mfp-image-holder .mfp-content { 286 max-width: 100%; } 287 288 .mfp-gallery .mfp-image-holder .mfp-figure { 289 cursor: pointer; } 290 291 @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { 292 /** 293 * Remove all paddings around the image on small screen 294 */ 295 .mfp-img-mobile .mfp-image-holder { 296 padding-left: 0; 297 padding-right: 0; } 298 .mfp-img-mobile img.mfp-img { 299 padding: 0; } 300 .mfp-img-mobile .mfp-figure { 301 /* The shadow behind the image */ } 302 .mfp-img-mobile .mfp-figure:after { 303 top: 0; 304 bottom: 0; } 305 .mfp-img-mobile .mfp-figure small { 306 display: inline; 307 margin-left: 5px; } 308 .mfp-img-mobile .mfp-bottom-bar { 309 background: rgba(0, 0, 0, 0.6); 310 bottom: 0; 311 margin: 0; 312 top: auto; 313 padding: 3px 5px; 314 position: fixed; 315 -webkit-box-sizing: border-box; 316 -moz-box-sizing: border-box; 317 box-sizing: border-box; } 318 .mfp-img-mobile .mfp-bottom-bar:empty { 319 padding: 0; } 320 .mfp-img-mobile .mfp-counter { 321 right: 5px; 322 top: 3px; } 323 .mfp-img-mobile .mfp-close { 324 top: 0; 325 right: 0; 326 width: 35px; 327 height: 35px; 328 line-height: 35px; 329 background: rgba(0, 0, 0, 0.6); 330 position: fixed; 331 text-align: center; 332 padding: 0; } } 333 334 @media all and (max-width: 900px) { 335 .mfp-arrow { 336 -webkit-transform: scale(0.75); 337 transform: scale(0.75); } 338 .mfp-arrow-left { 339 -webkit-transform-origin: 0; 340 transform-origin: 0; } 341 .mfp-arrow-right { 342 -webkit-transform-origin: 100%; 343 transform-origin: 100%; } 344 .mfp-container { 345 padding-left: 6px; 346 padding-right: 6px; } } 347 348 .mfp-ie7 .mfp-img { 349 padding: 0; } 350 .mfp-ie7 .mfp-bottom-bar { 351 width: 600px; 352 left: 50%; 353 margin-left: -300px; 354 margin-top: 5px; 355 padding-bottom: 5px; } 356 .mfp-ie7 .mfp-container { 357 padding: 0; } 358 .mfp-ie7 .mfp-content { 359 padding-top: 44px; } 360 .mfp-ie7 .mfp-close { 361 top: 0; 362 right: 0; 363 padding-top: 0; }