justifiedGallery.min.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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. }