justifiedGallery.min.css (2859B)
1 /*! 2 * justifiedGallery - v3.8.0 3 * http://miromannino.github.io/Justified-Gallery/ 4 * Copyright (c) 2020 Miro Mannino 5 * Licensed under the MIT license. 6 */ 7 .justified-gallery { 8 width: 100%; 9 position: relative; 10 overflow: hidden; 11 } 12 .justified-gallery > a, 13 .justified-gallery > div, 14 .justified-gallery > figure { 15 position: absolute; 16 display: inline-block; 17 overflow: hidden; 18 /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */ 19 filter: "alpha(opacity=10)"; 20 opacity: 0.1; 21 margin: 0; 22 padding: 0; 23 } 24 .justified-gallery > a > img, 25 .justified-gallery > div > img, 26 .justified-gallery > figure > img, 27 .justified-gallery > a > a > img, 28 .justified-gallery > div > a > img, 29 .justified-gallery > figure > a > img, 30 .justified-gallery > a > svg, 31 .justified-gallery > div > svg, 32 .justified-gallery > figure > svg, 33 .justified-gallery > a > a > svg, 34 .justified-gallery > div > a > svg, 35 .justified-gallery > figure > a > svg { 36 position: absolute; 37 top: 50%; 38 left: 50%; 39 margin: 0; 40 padding: 0; 41 border: none; 42 filter: "alpha(opacity=0)"; 43 opacity: 0; 44 } 45 .justified-gallery > a > .jg-caption, 46 .justified-gallery > div > .jg-caption, 47 .justified-gallery > figure > .jg-caption { 48 display: none; 49 position: absolute; 50 bottom: 0; 51 padding: 5px; 52 background-color: #000000; 53 left: 0; 54 right: 0; 55 margin: 0; 56 color: white; 57 font-size: 12px; 58 font-weight: 300; 59 font-family: sans-serif; 60 } 61 .justified-gallery > a > .jg-caption.jg-caption-visible, 62 .justified-gallery > div > .jg-caption.jg-caption-visible, 63 .justified-gallery > figure > .jg-caption.jg-caption-visible { 64 display: initial; 65 filter: "alpha(opacity=70)"; 66 opacity: 0.7; 67 -webkit-transition: opacity 500ms ease-in; 68 -moz-transition: opacity 500ms ease-in; 69 -o-transition: opacity 500ms ease-in; 70 transition: opacity 500ms ease-in; 71 } 72 .justified-gallery > .jg-entry-visible { 73 filter: "alpha(opacity=100)"; 74 opacity: 1; 75 background: none; 76 } 77 .justified-gallery > .jg-entry-visible > img, 78 .justified-gallery > .jg-entry-visible > a > img, 79 .justified-gallery > .jg-entry-visible > svg, 80 .justified-gallery > .jg-entry-visible > a > svg { 81 filter: "alpha(opacity=100)"; 82 opacity: 1; 83 -webkit-transition: opacity 500ms ease-in; 84 -moz-transition: opacity 500ms ease-in; 85 -o-transition: opacity 500ms ease-in; 86 transition: opacity 500ms ease-in; 87 } 88 .justified-gallery > .jg-filtered { 89 display: none; 90 } 91 .justified-gallery > .jg-spinner { 92 position: absolute; 93 bottom: 0; 94 margin-left: -24px; 95 padding: 10px 0 10px 0; 96 left: 50%; 97 filter: "alpha(opacity=100)"; 98 opacity: 1; 99 overflow: initial; 100 } 101 .justified-gallery > .jg-spinner > span { 102 display: inline-block; 103 filter: "alpha(opacity=0)"; 104 opacity: 0; 105 width: 8px; 106 height: 8px; 107 margin: 0 4px 0 4px; 108 background-color: #000; 109 border-radius: 6px; 110 }