magnific-popup.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. /* Magnific Popup CSS */
  2. .bi bi-camera{
  3. margin: 20 0 20 0;
  4. }
  5. .mfp-bg {
  6. top: 0;
  7. left: 0;
  8. width: 100%;
  9. height: 100%;
  10. z-index: 1042;
  11. overflow: hidden;
  12. position: fixed;
  13. background: #0b0b0b;
  14. opacity: 0.8; }
  15. .mfp-wrap {
  16. top: 0;
  17. left: 0;
  18. width: 100%;
  19. height: 100%;
  20. z-index: 1043;
  21. position: fixed;
  22. outline: none !important;
  23. -webkit-backface-visibility: hidden; }
  24. .mfp-container {
  25. text-align: center;
  26. position: absolute;
  27. width: 100%;
  28. height: 100%;
  29. left: 0;
  30. top: 0;
  31. padding: 0 8px;
  32. box-sizing: border-box; }
  33. .mfp-container:before {
  34. content: '';
  35. display: inline-block;
  36. height: 100%;
  37. vertical-align: middle; }
  38. .mfp-align-top .mfp-container:before {
  39. display: none; }
  40. .mfp-content {
  41. position: relative;
  42. display: inline-block;
  43. vertical-align: middle;
  44. margin: 0 auto;
  45. text-align: left;
  46. z-index: 1045; }
  47. .mfp-inline-holder .mfp-content,
  48. .mfp-ajax-holder .mfp-content {
  49. width: 100%;
  50. cursor: auto; }
  51. .mfp-ajax-cur {
  52. cursor: progress; }
  53. .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  54. cursor: -moz-zoom-out;
  55. cursor: -webkit-zoom-out;
  56. cursor: zoom-out; }
  57. .mfp-zoom {
  58. cursor: pointer;
  59. cursor: -webkit-zoom-in;
  60. cursor: -moz-zoom-in;
  61. cursor: zoom-in; }
  62. .mfp-auto-cursor .mfp-content {
  63. cursor: auto; }
  64. .mfp-close,
  65. .mfp-arrow,
  66. .mfp-preloader,
  67. .mfp-counter {
  68. -webkit-user-select: none;
  69. -moz-user-select: none;
  70. user-select: none; }
  71. .mfp-loading.mfp-figure {
  72. display: none; }
  73. .mfp-hide {
  74. display: none !important; }
  75. .mfp-preloader {
  76. color: #CCC;
  77. position: absolute;
  78. top: 50%;
  79. width: auto;
  80. text-align: center;
  81. margin-top: -0.8em;
  82. left: 8px;
  83. right: 8px;
  84. z-index: 1044; }
  85. .mfp-preloader a {
  86. color: #CCC; }
  87. .mfp-preloader a:hover {
  88. color: #FFF; }
  89. .mfp-s-ready .mfp-preloader {
  90. display: none; }
  91. .mfp-s-error .mfp-content {
  92. display: none; }
  93. button.mfp-close,
  94. button.mfp-arrow {
  95. overflow: visible;
  96. cursor: pointer;
  97. background: transparent;
  98. border: 0;
  99. -webkit-appearance: none;
  100. display: block;
  101. outline: none;
  102. padding: 0;
  103. z-index: 1046;
  104. box-shadow: none;
  105. touch-action: manipulation; }
  106. button::-moz-focus-inner {
  107. padding: 0;
  108. border: 0; }
  109. .mfp-close {
  110. width: 44px;
  111. height: 44px;
  112. line-height: 44px;
  113. position: absolute;
  114. right: 0;
  115. top: 0;
  116. text-decoration: none;
  117. text-align: center;
  118. opacity: 0.65;
  119. padding: 0 0 18px 10px;
  120. color: #FFF;
  121. font-style: normal;
  122. font-size: 28px;
  123. font-family: Arial, Baskerville, monospace; }
  124. .mfp-close:hover,
  125. .mfp-close:focus {
  126. opacity: 1; }
  127. .mfp-close:active {
  128. top: 1px; }
  129. .mfp-close-btn-in .mfp-close {
  130. color: #333; }
  131. .mfp-image-holder .mfp-close,
  132. .mfp-iframe-holder .mfp-close {
  133. color: #FFF;
  134. right: -6px;
  135. text-align: right;
  136. padding-right: 6px;
  137. width: 100%; }
  138. .mfp-counter {
  139. position: absolute;
  140. top: 0;
  141. right: 0;
  142. color: #CCC;
  143. font-size: 12px;
  144. line-height: 18px;
  145. white-space: nowrap; }
  146. .mfp-arrow {
  147. position: absolute;
  148. opacity: 0.65;
  149. margin: 0;
  150. top: 50%;
  151. margin-top: -55px;
  152. padding: 0;
  153. width: 90px;
  154. height: 110px;
  155. -webkit-tap-highlight-color: transparent; }
  156. .mfp-arrow:active {
  157. margin-top: -54px; }
  158. .mfp-arrow:hover,
  159. .mfp-arrow:focus {
  160. opacity: 1; }
  161. .mfp-arrow:before,
  162. .mfp-arrow:after {
  163. content: '';
  164. display: block;
  165. width: 0;
  166. height: 0;
  167. position: absolute;
  168. left: 0;
  169. top: 0;
  170. margin-top: 35px;
  171. margin-left: 35px;
  172. border: medium inset transparent; }
  173. .mfp-arrow:after {
  174. border-top-width: 13px;
  175. border-bottom-width: 13px;
  176. top: 8px; }
  177. .mfp-arrow:before {
  178. border-top-width: 21px;
  179. border-bottom-width: 21px;
  180. opacity: 0.7; }
  181. .mfp-arrow-left {
  182. left: 0; }
  183. .mfp-arrow-left:after {
  184. border-right: 17px solid #FFF;
  185. margin-left: 31px; }
  186. .mfp-arrow-left:before {
  187. margin-left: 25px;
  188. border-right: 27px solid #3F3F3F; }
  189. .mfp-arrow-right {
  190. right: 0; }
  191. .mfp-arrow-right:after {
  192. border-left: 17px solid #FFF;
  193. margin-left: 39px; }
  194. .mfp-arrow-right:before {
  195. border-left: 27px solid #3F3F3F; }
  196. .mfp-iframe-holder {
  197. padding-top: 40px;
  198. padding-bottom: 40px; }
  199. .mfp-iframe-holder .mfp-content {
  200. line-height: 0;
  201. width: 100%;
  202. max-width: 900px; }
  203. .mfp-iframe-holder .mfp-close {
  204. top: -40px; }
  205. .mfp-iframe-scaler {
  206. width: 100%;
  207. height: 0;
  208. overflow: hidden;
  209. padding-top: 56.25%; }
  210. .mfp-iframe-scaler iframe {
  211. position: absolute;
  212. display: block;
  213. top: 0;
  214. left: 0;
  215. width: 100%;
  216. height: 100%;
  217. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  218. background: #000; }
  219. /* Main image in popup */
  220. img.mfp-img {
  221. width: auto;
  222. max-width: 100%;
  223. height: auto;
  224. display: block;
  225. line-height: 0;
  226. box-sizing: border-box;
  227. padding: 40px 0 40px;
  228. margin: 0 auto; }
  229. /* The shadow behind the image */
  230. .mfp-figure {
  231. line-height: 0; }
  232. .mfp-figure:after {
  233. content: '';
  234. position: absolute;
  235. left: 0;
  236. top: 40px;
  237. bottom: 40px;
  238. display: block;
  239. right: 0;
  240. width: auto;
  241. height: auto;
  242. z-index: -1;
  243. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  244. background: #444; }
  245. .mfp-figure small {
  246. color: #BDBDBD;
  247. display: block;
  248. font-size: 12px;
  249. line-height: 14px; }
  250. .mfp-figure figure {
  251. margin: 0; }
  252. .mfp-bottom-bar {
  253. margin-top: -36px;
  254. position: absolute;
  255. top: 100%;
  256. left: 0;
  257. width: 100%;
  258. cursor: auto; }
  259. .mfp-title {
  260. text-align: left;
  261. line-height: 18px;
  262. color: #F3F3F3;
  263. word-wrap: break-word;
  264. padding-right: 36px; }
  265. .mfp-image-holder .mfp-content {
  266. max-width: 100%; }
  267. .mfp-gallery .mfp-image-holder .mfp-figure {
  268. cursor: pointer; }
  269. @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  270. /**
  271. * Remove all paddings around the image on small screen
  272. */
  273. .mfp-img-mobile .mfp-image-holder {
  274. padding-left: 0;
  275. padding-right: 0; }
  276. .mfp-img-mobile img.mfp-img {
  277. padding: 0; }
  278. .mfp-img-mobile .mfp-figure:after {
  279. top: 0;
  280. bottom: 0; }
  281. .mfp-img-mobile .mfp-figure small {
  282. display: inline;
  283. margin-left: 5px; }
  284. .mfp-img-mobile .mfp-bottom-bar {
  285. background: rgba(0, 0, 0, 0.6);
  286. bottom: 0;
  287. margin: 0;
  288. top: auto;
  289. padding: 3px 5px;
  290. position: fixed;
  291. box-sizing: border-box; }
  292. .mfp-img-mobile .mfp-bottom-bar:empty {
  293. padding: 0; }
  294. .mfp-img-mobile .mfp-counter {
  295. right: 5px;
  296. top: 3px; }
  297. .mfp-img-mobile .mfp-close {
  298. top: 0;
  299. right: 0;
  300. width: 35px;
  301. height: 35px;
  302. line-height: 35px;
  303. background: rgba(0, 0, 0, 0.6);
  304. position: fixed;
  305. text-align: center;
  306. padding: 0; } }
  307. @media all and (max-width: 900px) {
  308. .mfp-arrow {
  309. -webkit-transform: scale(0.75);
  310. transform: scale(0.75); }
  311. .mfp-arrow-left {
  312. -webkit-transform-origin: 0;
  313. transform-origin: 0; }
  314. .mfp-arrow-right {
  315. -webkit-transform-origin: 100%;
  316. transform-origin: 100%; }
  317. .mfp-container {
  318. padding-left: 6px;
  319. padding-right: 6px; } }