lity.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /*! Lity - v2.4.0 - 2019-08-10
  2. * http://sorgalla.com/lity/
  3. * Copyright (c) 2015-2019 Jan Sorgalla; Licensed MIT */
  4. .lity {
  5. z-index: 9990;
  6. position: fixed;
  7. top: 0;
  8. right: 0;
  9. bottom: 0;
  10. left: 0;
  11. white-space: nowrap;
  12. background: #0b0b0b;
  13. background: rgba(0, 0, 0, 0.9);
  14. outline: none !important;
  15. opacity: 0;
  16. -webkit-transition: opacity 0.3s ease;
  17. -o-transition: opacity 0.3s ease;
  18. transition: opacity 0.3s ease;
  19. }
  20. .lity.lity-opened {
  21. opacity: 1;
  22. }
  23. .lity.lity-closed {
  24. opacity: 0;
  25. }
  26. .lity * {
  27. -webkit-box-sizing: border-box;
  28. -moz-box-sizing: border-box;
  29. box-sizing: border-box;
  30. }
  31. .lity-wrap {
  32. z-index: 9990;
  33. position: fixed;
  34. top: 0;
  35. right: 0;
  36. bottom: 0;
  37. left: 0;
  38. text-align: center;
  39. outline: none !important;
  40. }
  41. .lity-wrap:before {
  42. content: '';
  43. display: inline-block;
  44. height: 100%;
  45. vertical-align: middle;
  46. margin-right: -0.25em;
  47. }
  48. .lity-loader {
  49. z-index: 9991;
  50. color: #fff;
  51. position: absolute;
  52. top: 50%;
  53. margin-top: -0.8em;
  54. width: 100%;
  55. text-align: center;
  56. font-size: 14px;
  57. font-family: Arial, Helvetica, sans-serif;
  58. opacity: 0;
  59. -webkit-transition: opacity 0.3s ease;
  60. -o-transition: opacity 0.3s ease;
  61. transition: opacity 0.3s ease;
  62. }
  63. .lity-loading .lity-loader {
  64. opacity: 1;
  65. }
  66. .lity-container {
  67. z-index: 9992;
  68. position: relative;
  69. text-align: left;
  70. vertical-align: middle;
  71. display: inline-block;
  72. white-space: normal;
  73. max-width: 100%;
  74. max-height: 100%;
  75. outline: none !important;
  76. }
  77. .lity-content {
  78. z-index: 9993;
  79. width: 100%;
  80. -webkit-transform: scale(1);
  81. -ms-transform: scale(1);
  82. -o-transform: scale(1);
  83. transform: scale(1);
  84. -webkit-transition: -webkit-transform 0.3s ease;
  85. transition: -webkit-transform 0.3s ease;
  86. -o-transition: -o-transform 0.3s ease;
  87. transition: transform 0.3s ease;
  88. transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
  89. }
  90. .lity-loading .lity-content,
  91. .lity-closed .lity-content {
  92. -webkit-transform: scale(0.8);
  93. -ms-transform: scale(0.8);
  94. -o-transform: scale(0.8);
  95. transform: scale(0.8);
  96. }
  97. .lity-content:after {
  98. content: '';
  99. position: absolute;
  100. left: 0;
  101. top: 0;
  102. bottom: 0;
  103. display: block;
  104. right: 0;
  105. width: auto;
  106. height: auto;
  107. z-index: -1;
  108. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  109. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  110. }
  111. .lity-close {
  112. z-index: 9994;
  113. width: 35px;
  114. height: 35px;
  115. position: fixed;
  116. right: 0;
  117. top: 0;
  118. -webkit-appearance: none;
  119. cursor: pointer;
  120. text-decoration: none;
  121. text-align: center;
  122. padding: 0;
  123. color: #fff;
  124. font-style: normal;
  125. font-size: 35px;
  126. font-family: Arial, Baskerville, monospace;
  127. line-height: 35px;
  128. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  129. border: 0;
  130. background: none;
  131. outline: none;
  132. -webkit-box-shadow: none;
  133. box-shadow: none;
  134. }
  135. .lity-close::-moz-focus-inner {
  136. border: 0;
  137. padding: 0;
  138. }
  139. .lity-close:hover,
  140. .lity-close:focus,
  141. .lity-close:active,
  142. .lity-close:visited {
  143. text-decoration: none;
  144. text-align: center;
  145. padding: 0;
  146. color: #fff;
  147. font-style: normal;
  148. font-size: 35px;
  149. font-family: Arial, Baskerville, monospace;
  150. line-height: 35px;
  151. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  152. border: 0;
  153. background: none;
  154. outline: none;
  155. -webkit-box-shadow: none;
  156. box-shadow: none;
  157. }
  158. .lity-close:active {
  159. top: 1px;
  160. }
  161. /* Image */
  162. .lity-image img {
  163. max-width: 100%;
  164. display: block;
  165. line-height: 0;
  166. border: 0;
  167. }
  168. /* iFrame */
  169. .lity-iframe .lity-container,
  170. .lity-youtube .lity-container,
  171. .lity-vimeo .lity-container,
  172. .lity-facebookvideo .lity-container,
  173. .lity-googlemaps .lity-container {
  174. width: 100%;
  175. max-width: 964px;
  176. }
  177. .lity-iframe-container {
  178. width: 100%;
  179. height: 0;
  180. padding-top: 56.25%;
  181. overflow: auto;
  182. pointer-events: auto;
  183. -webkit-transform: translateZ(0);
  184. transform: translateZ(0);
  185. -webkit-overflow-scrolling: touch;
  186. }
  187. .lity-iframe-container iframe {
  188. position: absolute;
  189. display: block;
  190. top: 0;
  191. left: 0;
  192. width: 100%;
  193. height: 100%;
  194. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  195. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  196. background: #000;
  197. }
  198. .lity-hide {
  199. display: none;
  200. }