styles.css
1 /* ========================================================================= */ 2 /* custom colors and icons for dark theme */ 3 /* ========================================================================= */ 4 5 body.theme-dark .lg-backdrop, 6 body.theme-dark .lg-outer .lg-thumb-outer, 7 body.theme-dark .lg-next, 8 body.theme-dark .lg-prev { 9 background-color: rgba(0, 0, 0, 1) !important; 10 } 11 12 body.theme-dark .lg-outer .lg-thumb-item.active, 13 body.theme-dark .lg-outer .lg-thumb-item:hover { 14 outline: 2px solid rgba(255, 255, 255, 1); 15 } 16 17 body.theme-dark .lg-next { 18 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M9.707 13.707l5-5c0.391-0.39 0.391-1.024 0-1.414l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3.293 3.293h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.195 0.195-0.293 0.451-0.293 0.707s0.098 0.512 0.293 0.707c0.391 0.391 1.024 0.391 1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A"); 19 } 20 21 body.theme-dark .lg-prev { 22 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M6.293 13.707l-5-5c-0.391-0.39-0.391-1.024 0-1.414l5-5c0.391-0.391 1.024-0.391 1.414 0s0.391 1.024 0 1.414l-3.293 3.293h9.586c0.552 0 1 0.448 1 1s-0.448 1-1 1h-9.586l3.293 3.293c0.195 0.195 0.293 0.451 0.293 0.707s-0.098 0.512-0.293 0.707c-0.391 0.391-1.024 0.391-1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A"); 23 } 24 25 body.theme-dark .lg-close { 26 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); 27 } 28 29 body.theme-dark .btn-glob-search { 30 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'%3E%3C/circle%3E%3Cpath d='M13.25 16.25 15 18'%3E%3C/path%3E%3C/svg%3E"); 31 } 32 33 /* ========================================================================= */ 34 /* custom colors and icons for light theme */ 35 /* ========================================================================= */ 36 37 body.theme-light .lg-backdrop, 38 body.theme-light .lg-outer .lg-thumb-outer, 39 body.theme-light .lg-next, 40 body.theme-light .lg-prev { 41 background-color: rgba(255, 255, 255, 1); 42 } 43 44 body.theme-light .lg-outer .lg-thumb-item.active, 45 body.theme-light .lg-outer .lg-thumb-item:hover { 46 outline: 2px solid rgba(0, 0, 0, 1); 47 } 48 49 body.theme-light .lg-next { 50 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M9.707 13.707l5-5c0.391-0.39 0.391-1.024 0-1.414l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3.293 3.293h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.195 0.195-0.293 0.451-0.293 0.707s0.098 0.512 0.293 0.707c0.391 0.391 1.024 0.391 1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A"); 51 } 52 53 body.theme-light .lg-prev { 54 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M6.293 13.707l-5-5c-0.391-0.39-0.391-1.024 0-1.414l5-5c0.391-0.391 1.024-0.391 1.414 0s0.391 1.024 0 1.414l-3.293 3.293h9.586c0.552 0 1 0.448 1 1s-0.448 1-1 1h-9.586l3.293 3.293c0.195 0.195 0.293 0.451 0.293 0.707s-0.098 0.512-0.293 0.707c-0.391 0.391-1.024 0.391-1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A"); 55 } 56 57 body.theme-light .lg-close { 58 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); 59 } 60 61 body.theme-light .btn-glob-search { 62 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'%3E%3C/circle%3E%3Cpath d='M13.25 16.25 15 18'%3E%3C/path%3E%3C/svg%3E"); 63 } 64 65 /* ========================================================================= */ 66 /* customized styles for lightgallery css */ 67 /* ========================================================================= */ 68 69 .lg-container { 70 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 71 } 72 73 .lg-container button:not(.clickable-icon) { 74 box-shadow: none !important; 75 } 76 77 .lg-next, 78 .lg-prev { 79 border-radius: 2px; 80 cursor: pointer; 81 display: block; 82 margin-top: -10px; 83 padding: 22px; 84 width: 22px; 85 height: 22px; 86 position: absolute; 87 top: 50%; 88 z-index: 1084; 89 outline: none; 90 border: none; 91 opacity: 0.6 !important; 92 } 93 94 .lg-next.disabled, 95 .lg-prev.disabled { 96 opacity: 0 !important; 97 cursor: default; 98 } 99 100 .lg-next:hover:not(.disabled), 101 .lg-prev:hover:not(.disabled) { 102 opacity: 1 !important; 103 } 104 105 .lg-single-item .lg-next, .lg-single-item 106 .lg-prev { 107 display: none; 108 } 109 110 .lg-next { 111 right: 20px; 112 background-position: center; 113 background-repeat: no-repeat; 114 opacity: 0.6; 115 } 116 117 .lg-next:before { 118 content: ''; 119 } 120 121 .lg-prev { 122 left: 20px; 123 background-position: center; 124 background-repeat: no-repeat; 125 opacity: 0.6; 126 } 127 128 .lg-prev:after { 129 content: ''; 130 } 131 132 @-webkit-keyframes lg-right-end { 133 0% { 134 left: 0; 135 } 136 50% { 137 left: -30px; 138 } 139 100% { 140 left: 0; 141 } 142 } 143 144 @-moz-keyframes lg-right-end { 145 0% { 146 left: 0; 147 } 148 50% { 149 left: -30px; 150 } 151 100% { 152 left: 0; 153 } 154 } 155 156 @-ms-keyframes lg-right-end { 157 0% { 158 left: 0; 159 } 160 50% { 161 left: -30px; 162 } 163 100% { 164 left: 0; 165 } 166 } 167 168 @keyframes lg-right-end { 169 0% { 170 left: 0; 171 } 172 50% { 173 left: -30px; 174 } 175 100% { 176 left: 0; 177 } 178 } 179 180 @-webkit-keyframes lg-left-end { 181 0% { 182 left: 0; 183 } 184 50% { 185 left: 30px; 186 } 187 100% { 188 left: 0; 189 } 190 } 191 192 @-moz-keyframes lg-left-end { 193 0% { 194 left: 0; 195 } 196 50% { 197 left: 30px; 198 } 199 100% { 200 left: 0; 201 } 202 } 203 204 @-ms-keyframes lg-left-end { 205 0% { 206 left: 0; 207 } 208 50% { 209 left: 30px; 210 } 211 100% { 212 left: 0; 213 } 214 } 215 216 @keyframes lg-left-end { 217 0% { 218 left: 0; 219 } 220 50% { 221 left: 30px; 222 } 223 100% { 224 left: 0; 225 } 226 } 227 228 .lg-outer.lg-right-end .lg-object { 229 -webkit-animation: lg-right-end 0.3s; 230 -o-animation: lg-right-end 0.3s; 231 animation: lg-right-end 0.3s; 232 position: relative; 233 } 234 235 .lg-outer.lg-left-end .lg-object { 236 -webkit-animation: lg-left-end 0.3s; 237 -o-animation: lg-left-end 0.3s; 238 animation: lg-left-end 0.3s; 239 position: relative; 240 } 241 242 .lg-toolbar { 243 z-index: 1082; 244 left: 0; 245 position: absolute; 246 top: 0; 247 width: 100%; 248 padding: 0px 20px; 249 } 250 251 .lg-media-overlap .lg-toolbar { 252 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 253 } 254 255 .lg-toolbar .lg-icon { 256 cursor: pointer; 257 float: right; 258 width: 22px; 259 height: 22px; 260 padding: 22px; 261 outline: medium none; 262 will-change: opacity; 263 -webkit-transition: opacity 0.2s linear; 264 -o-transition: opacity 0.2s linear; 265 transition: opacity 0.2s linear; 266 background: none; 267 border: none; 268 box-shadow: none; 269 opacity: 0.6; 270 } 271 272 .lg-toolbar .lg-icon:hover { 273 opacity: 1; 274 } 275 276 .lg-toolbar .lg-close { 277 background-position: center; 278 background-repeat: no-repeat; 279 opacity: 0.6; 280 } 281 282 .lg-toolbar .lg-close:after { 283 content: ''; 284 } 285 286 .lg-sub-html { 287 color: #eee; 288 font-size: 16px; 289 padding: 10px 40px; 290 text-align: center; 291 z-index: 1080; 292 opacity: 0; 293 -webkit-transition: opacity 0.2s ease-out 0s; 294 -o-transition: opacity 0.2s ease-out 0s; 295 transition: opacity 0.2s ease-out 0s; 296 } 297 298 .lg-sub-html h4 { 299 margin: 0; 300 font-size: 13px; 301 font-weight: bold; 302 } 303 304 .lg-sub-html p { 305 font-size: 12px; 306 margin: 5px 0 0; 307 } 308 309 .lg-sub-html a { 310 color: inherit; 311 } 312 313 .lg-sub-html a:hover { 314 text-decoration: underline; 315 } 316 317 .lg-media-overlap .lg-sub-html { 318 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); 319 } 320 321 .lg-item .lg-sub-html { 322 position: absolute; 323 bottom: 0; 324 right: 0; 325 left: 0; 326 } 327 328 .lg-error-msg { 329 font-size: 14px; 330 color: #999; 331 } 332 333 .lg-counter { 334 color: #999; 335 display: inline-block; 336 font-size: 16px; 337 padding-left: 20px; 338 padding-top: 12px; 339 height: 47px; 340 vertical-align: middle; 341 } 342 343 .lg-closing .lg-toolbar, 344 .lg-closing .lg-prev, 345 .lg-closing .lg-next, 346 .lg-closing .lg-sub-html { 347 opacity: 0; 348 -webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear; 349 -moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear; 350 -o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear; 351 transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear; 352 } 353 354 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap, 355 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont { 356 opacity: 0; 357 -moz-transform: scale3d(0.5, 0.5, 0.5); 358 -o-transform: scale3d(0.5, 0.5, 0.5); 359 -ms-transform: scale3d(0.5, 0.5, 0.5); 360 -webkit-transform: scale3d(0.5, 0.5, 0.5); 361 transform: scale3d(0.5, 0.5, 0.5); 362 will-change: transform, opacity; 363 -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; 364 -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; 365 -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; 366 transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; 367 } 368 369 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap, 370 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont { 371 opacity: 1; 372 -moz-transform: scale3d(1, 1, 1); 373 -o-transform: scale3d(1, 1, 1); 374 -ms-transform: scale3d(1, 1, 1); 375 -webkit-transform: scale3d(1, 1, 1); 376 transform: scale3d(1, 1, 1); 377 } 378 379 .lg-icon:focus-visible { 380 color: #fff; 381 border-radius: 3px; 382 outline: 1px dashed rgba(255, 255, 255, 0.6); 383 } 384 385 .lg-toolbar .lg-icon:focus-visible { 386 border-radius: 8px; 387 outline-offset: -5px; 388 } 389 390 .lg-group:after { 391 content: ''; 392 display: table; 393 clear: both; 394 } 395 396 .lg-container { 397 display: none; 398 outline: none; 399 } 400 401 .lg-container.lg-show { 402 display: block; 403 } 404 405 .lg-on { 406 scroll-behavior: unset; 407 } 408 409 .lg-overlay-open { 410 overflow: hidden; 411 } 412 413 .lg-toolbar, 414 .lg-prev, 415 .lg-next, 416 .lg-pager-outer, 417 .lg-hide-sub-html .lg-sub-html { 418 opacity: 0; 419 will-change: transform, opacity; 420 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; 421 -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; 422 -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; 423 transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; 424 } 425 426 .lg-show-in .lg-toolbar, 427 .lg-show-in .lg-prev, 428 .lg-show-in .lg-next, 429 .lg-show-in .lg-pager-outer { 430 opacity: 1; 431 } 432 433 .lg-show-in.lg-hide-sub-html .lg-sub-html { 434 opacity: 1; 435 } 436 437 .lg-show-in .lg-hide-items .lg-prev { 438 opacity: 0; 439 -webkit-transform: translate3d(-10px, 0, 0); 440 transform: translate3d(-10px, 0, 0); 441 } 442 443 .lg-show-in .lg-hide-items .lg-next { 444 opacity: 0; 445 -webkit-transform: translate3d(10px, 0, 0); 446 transform: translate3d(10px, 0, 0); 447 } 448 449 .lg-show-in .lg-hide-items .lg-toolbar { 450 opacity: 0; 451 -webkit-transform: translate3d(0, -10px, 0); 452 transform: translate3d(0, -10px, 0); 453 } 454 455 .lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html { 456 opacity: 0; 457 -webkit-transform: translate3d(0, 20px, 0); 458 transform: translate3d(0, 20px, 0); 459 } 460 461 .lg-outer { 462 width: 100%; 463 height: 100%; 464 position: fixed; 465 top: 0; 466 left: 0; 467 z-index: 1050; 468 text-align: left; 469 opacity: 0.001; 470 outline: none; 471 will-change: auto; 472 overflow: hidden; 473 -webkit-transition: opacity 0.15s ease 0s; 474 -o-transition: opacity 0.15s ease 0s; 475 transition: opacity 0.15s ease 0s; 476 } 477 478 .lg-outer * { 479 -webkit-box-sizing: border-box; 480 -moz-box-sizing: border-box; 481 box-sizing: border-box; 482 } 483 484 .lg-outer.lg-zoom-from-image { 485 opacity: 1; 486 } 487 488 .lg-outer.lg-visible { 489 opacity: 1; 490 } 491 492 .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current { 493 -webkit-transition-duration: inherit !important; 494 transition-duration: inherit !important; 495 -webkit-transition-timing-function: inherit !important; 496 transition-timing-function: inherit !important; 497 } 498 499 .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { 500 -webkit-transition-duration: 0s !important; 501 transition-duration: 0s !important; 502 opacity: 1; 503 } 504 505 .lg-outer.lg-grab img.lg-object { 506 cursor: -webkit-grab; 507 cursor: -moz-grab; 508 cursor: -o-grab; 509 cursor: -ms-grab; 510 cursor: grab; 511 } 512 513 .lg-outer.lg-grabbing img.lg-object { 514 cursor: move; 515 cursor: -webkit-grabbing; 516 cursor: -moz-grabbing; 517 cursor: -o-grabbing; 518 cursor: -ms-grabbing; 519 cursor: grabbing; 520 } 521 522 .lg-outer .lg-content { 523 position: absolute; 524 top: 0; 525 left: 0; 526 right: 0; 527 bottom: 0; 528 } 529 530 .lg-outer .lg-inner { 531 width: 100%; 532 position: absolute; 533 left: 0; 534 top: 0; 535 bottom: 0; 536 -webkit-transition: opacity 0s; 537 -o-transition: opacity 0s; 538 transition: opacity 0s; 539 white-space: nowrap; 540 } 541 542 .lg-outer .lg-item { 543 display: none !important; 544 } 545 546 .lg-outer.lg-css3 .lg-prev-slide, 547 .lg-outer.lg-css3 .lg-current, 548 .lg-outer.lg-css3 .lg-next-slide { 549 display: inline-block !important; 550 } 551 552 .lg-outer.lg-css .lg-current { 553 display: inline-block !important; 554 } 555 556 .lg-outer .lg-item, 557 .lg-outer .lg-img-wrap { 558 display: inline-block; 559 text-align: center; 560 position: absolute; 561 width: 100%; 562 height: 100%; 563 } 564 565 .lg-outer .lg-item:before, 566 .lg-outer .lg-img-wrap:before { 567 content: ''; 568 display: inline-block; 569 height: 100%; 570 vertical-align: middle; 571 } 572 573 .lg-outer .lg-img-wrap { 574 position: absolute; 575 left: 0; 576 right: 0; 577 top: 0; 578 bottom: 0; 579 white-space: nowrap; 580 font-size: 0; 581 } 582 583 .lg-outer .lg-item.lg-complete { 584 background-image: none; 585 } 586 587 .lg-outer .lg-item.lg-current { 588 z-index: 1060; 589 } 590 591 .lg-outer .lg-object { 592 display: inline-block; 593 vertical-align: middle; 594 max-width: 100%; 595 max-height: 100%; 596 width: auto; 597 height: auto; 598 position: relative; 599 } 600 601 .lg-outer .lg-empty-html.lg-sub-html, 602 .lg-outer .lg-empty-html .lg-sub-html { 603 display: none; 604 } 605 606 .lg-outer.lg-hide-download .lg-download { 607 opacity: 0.75; 608 pointer-events: none; 609 } 610 611 .lg-outer .lg-first-slide .lg-dummy-img { 612 position: absolute; 613 top: 50%; 614 left: 50%; 615 } 616 617 .lg-outer.lg-components-open:not(.lg-zoomed) .lg-components { 618 -webkit-transform: translate3d(0, 0%, 0); 619 transform: translate3d(0, 0%, 0); 620 opacity: 1; 621 } 622 623 .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html { 624 opacity: 1; 625 transition: opacity 0.2s ease-out 0.15s; 626 } 627 628 .lg-backdrop { 629 position: fixed; 630 top: 0; 631 left: 0; 632 right: 0; 633 bottom: 0; 634 z-index: 1040; 635 opacity: 0; 636 will-change: auto; 637 -webkit-transition: opacity 333ms ease-in 0s; 638 -o-transition: opacity 333ms ease-in 0s; 639 transition: opacity 333ms ease-in 0s; 640 } 641 642 .lg-backdrop.in { 643 opacity: 1; 644 } 645 646 .lg-css3.lg-no-trans .lg-prev-slide, 647 .lg-css3.lg-no-trans .lg-next-slide, 648 .lg-css3.lg-no-trans .lg-current { 649 -webkit-transition: none 0s ease 0s !important; 650 -moz-transition: none 0s ease 0s !important; 651 -o-transition: none 0s ease 0s !important; 652 transition: none 0s ease 0s !important; 653 } 654 655 .lg-css3.lg-use-css3 .lg-item { 656 -webkit-backface-visibility: hidden; 657 -moz-backface-visibility: hidden; 658 backface-visibility: hidden; 659 } 660 661 .lg-css3.lg-fade .lg-item { 662 opacity: 0; 663 } 664 665 .lg-css3.lg-fade .lg-item.lg-current { 666 opacity: 1; 667 } 668 669 .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { 670 -webkit-transition: opacity 0.1s ease 0s; 671 -moz-transition: opacity 0.1s ease 0s; 672 -o-transition: opacity 0.1s ease 0s; 673 transition: opacity 0.1s ease 0s; 674 } 675 676 .lg-css3.lg-use-css3 .lg-item.lg-start-progress { 677 -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; 678 -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; 679 -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; 680 transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; 681 } 682 683 .lg-css3.lg-use-css3 .lg-item.lg-start-end-progress { 684 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; 685 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; 686 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; 687 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; 688 } 689 690 .lg-css3.lg-slide.lg-use-css3 .lg-item { 691 opacity: 0; 692 } 693 694 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { 695 -webkit-transform: translate3d(-100%, 0, 0); 696 transform: translate3d(-100%, 0, 0); 697 } 698 699 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { 700 -webkit-transform: translate3d(100%, 0, 0); 701 transform: translate3d(100%, 0, 0); 702 } 703 704 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { 705 -webkit-transform: translate3d(0, 0, 0); 706 transform: translate3d(0, 0, 0); 707 opacity: 1; 708 } 709 710 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { 711 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; 712 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; 713 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; 714 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; 715 } 716 717 .lg-container { 718 display: none; 719 } 720 721 .lg-container.lg-show { 722 display: block; 723 } 724 725 .lg-container.lg-dragging-vertical .lg-backdrop { 726 -webkit-transition-duration: 0s !important; 727 transition-duration: 0s !important; 728 } 729 730 .lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current { 731 -webkit-transition-duration: 0s !important; 732 transition-duration: 0s !important; 733 opacity: 1; 734 } 735 736 .lg-inline .lg-backdrop, 737 .lg-inline .lg-outer { 738 position: absolute; 739 } 740 741 .lg-inline .lg-backdrop { 742 z-index: 1; 743 } 744 745 .lg-inline .lg-outer { 746 z-index: 2; 747 } 748 749 .lg-inline .lg-maximize:after { 750 content: ''; 751 } 752 753 .lg-components { 754 -webkit-transform: translate3d(0, 100%, 0); 755 transform: translate3d(0, 100%, 0); 756 will-change: transform; 757 -webkit-transition: -webkit-transform 0.35s ease-out 0s; 758 -moz-transition: -moz-transform 0.35s ease-out 0s; 759 -o-transition: -o-transform 0.35s ease-out 0s; 760 transition: transform 0.35s ease-out 0s; 761 z-index: 1080; 762 position: absolute; 763 bottom: 0; 764 right: 0; 765 left: 0; 766 } 767 768 /* ========================================================================= */ 769 /* below is a customized version of lightgallery thumbnail plugin css */ 770 /* ========================================================================= */ 771 772 .lg-outer .lg-thumb-outer { 773 width: 100%; 774 max-height: 350px; 775 overflow: hidden; 776 float: left; 777 } 778 779 .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { 780 cursor: -webkit-grab; 781 cursor: -moz-grab; 782 cursor: -o-grab; 783 cursor: -ms-grab; 784 cursor: grab; 785 } 786 787 .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { 788 cursor: move; 789 cursor: -webkit-grabbing; 790 cursor: -moz-grabbing; 791 cursor: -o-grabbing; 792 cursor: -ms-grabbing; 793 cursor: grabbing; 794 } 795 796 .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { 797 -webkit-transition-duration: 0s !important; 798 transition-duration: 0s !important; 799 } 800 801 .lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb { 802 -webkit-transition-duration: 0s !important; 803 transition-duration: 0s !important; 804 } 805 806 .lg-outer .lg-thumb-outer.lg-thumb-align-middle { 807 text-align: center; 808 } 809 810 .lg-outer .lg-thumb-outer.lg-thumb-align-left { 811 text-align: left; 812 } 813 814 .lg-outer .lg-thumb-outer.lg-thumb-align-right { 815 text-align: right; 816 } 817 818 .lg-outer.lg-single-item .lg-thumb-outer { 819 display: none; 820 } 821 822 .lg-outer .lg-thumb { 823 padding: 5px 0; 824 height: 100%; 825 margin-bottom: -5px; 826 display: inline-block; 827 vertical-align: middle; 828 } 829 830 @media (min-width: 768px) { 831 .lg-outer .lg-thumb { 832 padding: 10px 0; 833 } 834 } 835 836 .lg-outer .lg-thumb-item { 837 cursor: pointer; 838 float: left; 839 overflow: hidden; 840 height: 100%; 841 border-radius: 2px; 842 outline-color: rgba(255, 255, 255, 0); 843 border: 2px solid rgba(255, 255, 255, 0); 844 margin-bottom: 5px; 845 will-change: outline-color; 846 } 847 848 @media (min-width: 768px) { 849 .lg-outer .lg-thumb-item { 850 border-radius: 4px; 851 outline-color: rgba(255, 255, 255, 0); 852 border: 2px solid rgba(255, 255, 255, 0); 853 -webkit-transition: outline-color 0.25s ease; 854 -o-transition: outline-color 0.25s ease; 855 transition: outline-color 0.25s ease; 856 } 857 } 858 859 .lg-outer .lg-thumb-item img { 860 width: 100%; 861 height: 100%; 862 object-fit: cover; 863 display: block; 864 } 865 866 .lg-outer.lg-can-toggle .lg-item { 867 padding-bottom: 0; 868 } 869 870 .lg-outer .lg-toggle-thumb:after { 871 content: ''; 872 } 873 874 .lg-outer.lg-animate-thumb .lg-thumb { 875 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 876 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 877 } 878 879 /* ========================================================================= */ 880 /* custom button for global search */ 881 /* ========================================================================= */ 882 883 .lg-toolbar .btn-glob-search { 884 background-position: center; 885 background-repeat: no-repeat; 886 opacity: 0.6; 887 } 888 889 .lg-toolbar .btn-glob-search:hover { 890 opacity: 1; 891 892 } 893 894 .lg-toolbar .btn-glob-search:after { 895 content: ''; 896 }