lightgallery-core.css 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. .lg-group:after {
  2. content: '';
  3. display: table;
  4. clear: both;
  5. }
  6. .lg-container {
  7. display: none;
  8. outline: none;
  9. }
  10. .lg-container.lg-show {
  11. display: block;
  12. }
  13. .lg-on {
  14. scroll-behavior: unset;
  15. }
  16. .lg-toolbar,
  17. .lg-prev,
  18. .lg-next,
  19. .lg-pager-outer,
  20. .lg-hide-sub-html .lg-sub-html {
  21. opacity: 0;
  22. will-change: transform, opacity;
  23. -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;
  24. -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;
  25. -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;
  26. transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  27. }
  28. .lg-show-in .lg-toolbar,
  29. .lg-show-in .lg-prev,
  30. .lg-show-in .lg-next,
  31. .lg-show-in .lg-pager-outer {
  32. opacity: 1;
  33. }
  34. .lg-show-in.lg-hide-sub-html .lg-sub-html {
  35. opacity: 1;
  36. }
  37. .lg-show-in .lg-hide-items .lg-prev {
  38. opacity: 0;
  39. -webkit-transform: translate3d(-10px, 0, 0);
  40. transform: translate3d(-10px, 0, 0);
  41. }
  42. .lg-show-in .lg-hide-items .lg-next {
  43. opacity: 0;
  44. -webkit-transform: translate3d(10px, 0, 0);
  45. transform: translate3d(10px, 0, 0);
  46. }
  47. .lg-show-in .lg-hide-items .lg-toolbar {
  48. opacity: 0;
  49. -webkit-transform: translate3d(0, -10px, 0);
  50. transform: translate3d(0, -10px, 0);
  51. }
  52. .lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
  53. opacity: 0;
  54. -webkit-transform: translate3d(0, 20px, 0);
  55. transform: translate3d(0, 20px, 0);
  56. }
  57. .lg-outer {
  58. width: 100%;
  59. height: 100%;
  60. position: fixed;
  61. top: 0;
  62. left: 0;
  63. z-index: 1050;
  64. text-align: left;
  65. opacity: 0.001;
  66. outline: none;
  67. will-change: auto;
  68. overflow: hidden;
  69. -webkit-transition: opacity 0.15s ease 0s;
  70. -o-transition: opacity 0.15s ease 0s;
  71. transition: opacity 0.15s ease 0s;
  72. }
  73. .lg-outer * {
  74. -webkit-box-sizing: border-box;
  75. -moz-box-sizing: border-box;
  76. box-sizing: border-box;
  77. }
  78. .lg-outer.lg-zoom-from-image {
  79. opacity: 1;
  80. }
  81. .lg-outer.lg-visible {
  82. opacity: 1;
  83. }
  84. .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 {
  85. -webkit-transition-duration: inherit !important;
  86. transition-duration: inherit !important;
  87. -webkit-transition-timing-function: inherit !important;
  88. transition-timing-function: inherit !important;
  89. }
  90. .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 {
  91. -webkit-transition-duration: 0s !important;
  92. transition-duration: 0s !important;
  93. opacity: 1;
  94. }
  95. .lg-outer.lg-grab img.lg-object {
  96. cursor: -webkit-grab;
  97. cursor: -moz-grab;
  98. cursor: -o-grab;
  99. cursor: -ms-grab;
  100. cursor: grab;
  101. }
  102. .lg-outer.lg-grabbing img.lg-object {
  103. cursor: move;
  104. cursor: -webkit-grabbing;
  105. cursor: -moz-grabbing;
  106. cursor: -o-grabbing;
  107. cursor: -ms-grabbing;
  108. cursor: grabbing;
  109. }
  110. .lg-outer .lg-content {
  111. position: absolute;
  112. top: 0;
  113. left: 0;
  114. right: 0;
  115. bottom: 0;
  116. }
  117. .lg-outer .lg-inner {
  118. width: 100%;
  119. position: absolute;
  120. left: 0;
  121. top: 0;
  122. bottom: 0;
  123. -webkit-transition: opacity 0s;
  124. -o-transition: opacity 0s;
  125. transition: opacity 0s;
  126. white-space: nowrap;
  127. }
  128. .lg-outer .lg-item {
  129. display: none !important;
  130. }
  131. .lg-outer .lg-item:not(.lg-start-end-progress) {
  132. background: url("../images/loading.gif") no-repeat scroll center center transparent;
  133. }
  134. .lg-outer.lg-css3 .lg-prev-slide,
  135. .lg-outer.lg-css3 .lg-current,
  136. .lg-outer.lg-css3 .lg-next-slide {
  137. display: inline-block !important;
  138. }
  139. .lg-outer.lg-css .lg-current {
  140. display: inline-block !important;
  141. }
  142. .lg-outer .lg-item,
  143. .lg-outer .lg-img-wrap {
  144. display: inline-block;
  145. text-align: center;
  146. position: absolute;
  147. width: 100%;
  148. height: 100%;
  149. }
  150. .lg-outer .lg-item:before,
  151. .lg-outer .lg-img-wrap:before {
  152. content: '';
  153. display: inline-block;
  154. height: 100%;
  155. vertical-align: middle;
  156. }
  157. .lg-outer .lg-img-wrap {
  158. position: absolute;
  159. left: 0;
  160. right: 0;
  161. top: 0;
  162. bottom: 0;
  163. white-space: nowrap;
  164. font-size: 0;
  165. }
  166. .lg-outer .lg-item.lg-complete {
  167. background-image: none;
  168. }
  169. .lg-outer .lg-item.lg-current {
  170. z-index: 1060;
  171. }
  172. .lg-outer .lg-object {
  173. display: inline-block;
  174. vertical-align: middle;
  175. max-width: 100%;
  176. max-height: 100%;
  177. width: auto;
  178. height: auto;
  179. position: relative;
  180. }
  181. .lg-outer .lg-empty-html.lg-sub-html,
  182. .lg-outer .lg-empty-html .lg-sub-html {
  183. display: none;
  184. }
  185. .lg-outer.lg-hide-download .lg-download {
  186. opacity: 0.75;
  187. pointer-events: none;
  188. }
  189. .lg-outer .lg-first-slide .lg-dummy-img {
  190. position: absolute;
  191. top: 50%;
  192. left: 50%;
  193. }
  194. .lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
  195. -webkit-transform: translate3d(0, 0%, 0);
  196. transform: translate3d(0, 0%, 0);
  197. opacity: 1;
  198. }
  199. .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
  200. opacity: 1;
  201. transition: opacity 0.2s ease-out 0.15s;
  202. }
  203. .lg-backdrop {
  204. position: fixed;
  205. top: 0;
  206. left: 0;
  207. right: 0;
  208. bottom: 0;
  209. z-index: 1040;
  210. background-color: #000;
  211. opacity: 0;
  212. will-change: auto;
  213. -webkit-transition: opacity 333ms ease-in 0s;
  214. -o-transition: opacity 333ms ease-in 0s;
  215. transition: opacity 333ms ease-in 0s;
  216. }
  217. .lg-backdrop.in {
  218. opacity: 1;
  219. }
  220. .lg-css3.lg-no-trans .lg-prev-slide,
  221. .lg-css3.lg-no-trans .lg-next-slide,
  222. .lg-css3.lg-no-trans .lg-current {
  223. -webkit-transition: none 0s ease 0s !important;
  224. -moz-transition: none 0s ease 0s !important;
  225. -o-transition: none 0s ease 0s !important;
  226. transition: none 0s ease 0s !important;
  227. }
  228. .lg-css3.lg-use-css3 .lg-item {
  229. -webkit-backface-visibility: hidden;
  230. -moz-backface-visibility: hidden;
  231. backface-visibility: hidden;
  232. }
  233. .lg-css3.lg-fade .lg-item {
  234. opacity: 0;
  235. }
  236. .lg-css3.lg-fade .lg-item.lg-current {
  237. opacity: 1;
  238. }
  239. .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 {
  240. -webkit-transition: opacity 0.1s ease 0s;
  241. -moz-transition: opacity 0.1s ease 0s;
  242. -o-transition: opacity 0.1s ease 0s;
  243. transition: opacity 0.1s ease 0s;
  244. }
  245. .lg-css3.lg-use-css3 .lg-item.lg-start-progress {
  246. -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  247. -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  248. -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  249. transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  250. }
  251. .lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
  252. -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  253. -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  254. -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  255. transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  256. }
  257. .lg-css3.lg-slide.lg-use-css3 .lg-item {
  258. opacity: 0;
  259. }
  260. .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
  261. -webkit-transform: translate3d(-100%, 0, 0);
  262. transform: translate3d(-100%, 0, 0);
  263. }
  264. .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
  265. -webkit-transform: translate3d(100%, 0, 0);
  266. transform: translate3d(100%, 0, 0);
  267. }
  268. .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  269. -webkit-transform: translate3d(0, 0, 0);
  270. transform: translate3d(0, 0, 0);
  271. opacity: 1;
  272. }
  273. .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 {
  274. -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  275. -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  276. -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  277. transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  278. }
  279. .lg-container {
  280. display: none;
  281. }
  282. .lg-container.lg-show {
  283. display: block;
  284. }
  285. .lg-container.lg-dragging-vertical .lg-backdrop {
  286. -webkit-transition-duration: 0s !important;
  287. transition-duration: 0s !important;
  288. }
  289. .lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
  290. -webkit-transition-duration: 0s !important;
  291. transition-duration: 0s !important;
  292. opacity: 1;
  293. }
  294. .lg-inline .lg-backdrop,
  295. .lg-inline .lg-outer {
  296. position: absolute;
  297. }
  298. .lg-inline .lg-backdrop {
  299. z-index: 1;
  300. }
  301. .lg-inline .lg-outer {
  302. z-index: 2;
  303. }
  304. .lg-inline .lg-maximize:after {
  305. content: '\e909';
  306. }
  307. .lg-components {
  308. -webkit-transform: translate3d(0, 100%, 0);
  309. transform: translate3d(0, 100%, 0);
  310. will-change: transform;
  311. -webkit-transition: -webkit-transform 0.35s ease-out 0s;
  312. -moz-transition: -moz-transform 0.35s ease-out 0s;
  313. -o-transition: -o-transform 0.35s ease-out 0s;
  314. transition: transform 0.35s ease-out 0s;
  315. z-index: 1080;
  316. position: absolute;
  317. bottom: 0;
  318. right: 0;
  319. left: 0;
  320. }