Advertisement
arie_cristianD

magnific-popup

Nov 6th, 2023
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.88 KB | None | 0 0
  1. .mfp-bg {
  2.     top: 0;
  3.     left: 0;
  4.     width: 100%;
  5.     height: 100%;
  6.     z-index: 1042;
  7.     overflow: hidden;
  8.     position: fixed;
  9.     background: #0b0b0b;
  10.     opacity: .8
  11. }
  12.  
  13. .mfp-wrap {
  14.     top: 0;
  15.     left: 0;
  16.     width: 100%;
  17.     height: 100%;
  18.     z-index: 1043;
  19.     position: fixed;
  20.     outline: 0!important;
  21.     -webkit-backface-visibility: hidden
  22. }
  23.  
  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. }
  34.  
  35. .mfp-container:before {
  36.     content: '';
  37.     display: inline-block;
  38.     height: 100%;
  39.     vertical-align: middle
  40. }
  41.  
  42. .mfp-align-top .mfp-container:before {
  43.     display: none
  44. }
  45.  
  46. .mfp-content {
  47.     position: relative;
  48.     display: inline-block;
  49.     vertical-align: middle;
  50.     margin: 0 auto;
  51.     text-align: left;
  52.     z-index: 1045
  53. }
  54.  
  55. .mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content {
  56.     width: 100%;
  57.     cursor: auto
  58. }
  59.  
  60. .mfp-ajax-cur {
  61.     cursor: progress
  62. }
  63.  
  64. .mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  65.     cursor: -moz-zoom-out;
  66.     cursor: -webkit-zoom-out;
  67.     cursor: zoom-out
  68. }
  69.  
  70. .mfp-zoom {
  71.     cursor: pointer;
  72.     cursor: -webkit-zoom-in;
  73.     cursor: -moz-zoom-in;
  74.     cursor: zoom-in
  75. }
  76.  
  77. .mfp-auto-cursor .mfp-content {
  78.     cursor: auto
  79. }
  80.  
  81. .mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader {
  82.     -webkit-user-select: none;
  83.     -moz-user-select: none;
  84.     user-select: none
  85. }
  86.  
  87. .mfp-loading.mfp-figure {
  88.     display: none
  89. }
  90.  
  91. .mfp-hide {
  92.     display: none!important
  93. }
  94.  
  95. .mfp-preloader {
  96.     color: #ccc;
  97.     position: absolute;
  98.     top: 50%;
  99.     width: auto;
  100.     text-align: center;
  101.     margin-top: -.8em;
  102.     left: 8px;
  103.     right: 8px;
  104.     z-index: 1044
  105. }
  106.  
  107. .mfp-preloader a {
  108.     color: #ccc
  109. }
  110.  
  111. .mfp-preloader a:hover {
  112.     color: #fff
  113. }
  114.  
  115. .mfp-s-ready .mfp-preloader {
  116.     display: none
  117. }
  118.  
  119. .mfp-s-error .mfp-content {
  120.     display: none
  121. }
  122.  
  123. button.mfp-arrow,button.mfp-close {
  124.     overflow: visible;
  125.     cursor: pointer;
  126.     background: 0 0;
  127.     border: 0;
  128.     -webkit-appearance: none;
  129.     display: block;
  130.     outline: 0;
  131.     padding: 0;
  132.     z-index: 1046;
  133.     box-shadow: none;
  134.     touch-action: manipulation
  135. }
  136.  
  137. button::-moz-focus-inner {
  138.     padding: 0;
  139.     border: 0
  140. }
  141.  
  142. .mfp-close {
  143.     width: 44px;
  144.     height: 44px;
  145.     line-height: 44px;
  146.     position: absolute;
  147.     right: 0;
  148.     top: 0;
  149.     text-decoration: none;
  150.     text-align: center;
  151.     opacity: .65;
  152.     padding: 0 0 18px 10px;
  153.     color: #fff;
  154.     font-style: normal;
  155.     font-size: 28px;
  156.     font-family: Arial,Baskerville,monospace
  157. }
  158.  
  159. .mfp-close:focus,.mfp-close:hover {
  160.     opacity: 1
  161. }
  162.  
  163. .mfp-close:active {
  164.     top: 1px
  165. }
  166.  
  167. .mfp-close-btn-in .mfp-close {
  168.     color: #333
  169. }
  170.  
  171. .mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close {
  172.     color: #fff;
  173.     right: -6px;
  174.     text-align: right;
  175.     padding-right: 6px;
  176.     width: 100%
  177. }
  178.  
  179. .mfp-counter {
  180.     position: absolute;
  181.     top: 0;
  182.     right: 0;
  183.     color: #ccc;
  184.     font-size: 12px;
  185.     line-height: 18px;
  186.     white-space: nowrap
  187. }
  188.  
  189. .mfp-arrow {
  190.     position: absolute;
  191.     opacity: .65;
  192.     margin: 0;
  193.     top: 50%;
  194.     margin-top: -55px;
  195.     padding: 0;
  196.     width: 90px;
  197.     height: 110px;
  198.     -webkit-tap-highlight-color: transparent
  199. }
  200.  
  201. .mfp-arrow:active {
  202.     margin-top: -54px
  203. }
  204.  
  205. .mfp-arrow:focus,.mfp-arrow:hover {
  206.     opacity: 1
  207. }
  208.  
  209. .mfp-arrow:after,.mfp-arrow:before {
  210.     content: '';
  211.     display: block;
  212.     width: 0;
  213.     height: 0;
  214.     position: absolute;
  215.     left: 0;
  216.     top: 0;
  217.     margin-top: 35px;
  218.     margin-left: 35px;
  219.     border: medium inset transparent
  220. }
  221.  
  222. .mfp-arrow:after {
  223.     border-top-width: 13px;
  224.     border-bottom-width: 13px;
  225.     top: 8px
  226. }
  227.  
  228. .mfp-arrow:before {
  229.     border-top-width: 21px;
  230.     border-bottom-width: 21px;
  231.     opacity: .7
  232. }
  233.  
  234. .mfp-arrow-left {
  235.     left: 0
  236. }
  237.  
  238. .mfp-arrow-left:after {
  239.     border-right: 17px solid #fff;
  240.     margin-left: 31px
  241. }
  242.  
  243. .mfp-arrow-left:before {
  244.     margin-left: 25px;
  245.     border-right: 27px solid #3f3f3f
  246. }
  247.  
  248. .mfp-arrow-right {
  249.     right: 0
  250. }
  251.  
  252. .mfp-arrow-right:after {
  253.     border-left: 17px solid #fff;
  254.     margin-left: 39px
  255. }
  256.  
  257. .mfp-arrow-right:before {
  258.     border-left: 27px solid #3f3f3f
  259. }
  260.  
  261. .mfp-iframe-holder {
  262.     padding-top: 40px;
  263.     padding-bottom: 40px
  264. }
  265.  
  266. .mfp-iframe-holder .mfp-content {
  267.     line-height: 0;
  268.     width: 100%;
  269.     max-width: 900px
  270. }
  271.  
  272. .mfp-iframe-holder .mfp-close {
  273.     top: -40px
  274. }
  275.  
  276. .mfp-iframe-scaler {
  277.     width: 100%;
  278.     height: 0;
  279.     overflow: hidden;
  280.     padding-top: 56.25%
  281. }
  282.  
  283. .mfp-iframe-scaler iframe {
  284.     position: absolute;
  285.     display: block;
  286.     top: 0;
  287.     left: 0;
  288.     width: 100%;
  289.     height: 100%;
  290.     box-shadow: 0 0 8px rgba(0,0,0,.6);
  291.     background: #000
  292. }
  293.  
  294. img.mfp-img {
  295.     width: auto;
  296.     max-width: 100%;
  297.     height: auto;
  298.     display: block;
  299.     line-height: 0;
  300.     box-sizing: border-box;
  301.     padding: 40px 0 40px;
  302.     margin: 0 auto
  303. }
  304.  
  305. .mfp-figure {
  306.     line-height: 0
  307. }
  308.  
  309. .mfp-figure:after {
  310.     content: '';
  311.     position: absolute;
  312.     left: 0;
  313.     top: 40px;
  314.     bottom: 40px;
  315.     display: block;
  316.     right: 0;
  317.     width: auto;
  318.     height: auto;
  319.     z-index: -1;
  320.     box-shadow: 0 0 8px rgba(0,0,0,.6);
  321.     background: #444
  322. }
  323.  
  324. .mfp-figure small {
  325.     color: #bdbdbd;
  326.     display: block;
  327.     font-size: 12px;
  328.     line-height: 14px
  329. }
  330.  
  331. .mfp-figure figure {
  332.     margin: 0
  333. }
  334.  
  335. .mfp-bottom-bar {
  336.     margin-top: -36px;
  337.     position: absolute;
  338.     top: 100%;
  339.     left: 0;
  340.     width: 100%;
  341.     cursor: auto
  342. }
  343.  
  344. .mfp-title {
  345.     text-align: left;
  346.     line-height: 18px;
  347.     color: #f3f3f3;
  348.     word-wrap: break-word;
  349.     padding-right: 36px
  350. }
  351.  
  352. .mfp-image-holder .mfp-content {
  353.     max-width: 100%
  354. }
  355.  
  356. .mfp-gallery .mfp-image-holder .mfp-figure {
  357.     cursor: pointer
  358. }
  359.  
  360. @media screen and (max-width: 800px) and (orientation:landscape),screen and (max-height:300px) {
  361.     .mfp-img-mobile .mfp-image-holder {
  362.         padding-left:0;
  363.         padding-right: 0
  364.     }
  365.  
  366.     .mfp-img-mobile img.mfp-img {
  367.         padding: 0
  368.     }
  369.  
  370.     .mfp-img-mobile .mfp-figure:after {
  371.         top: 0;
  372.         bottom: 0
  373.     }
  374.  
  375.     .mfp-img-mobile .mfp-figure small {
  376.         display: inline;
  377.         margin-left: 5px
  378.     }
  379.  
  380.     .mfp-img-mobile .mfp-bottom-bar {
  381.         background: rgba(0,0,0,.6);
  382.         bottom: 0;
  383.         margin: 0;
  384.         top: auto;
  385.         padding: 3px 5px;
  386.         position: fixed;
  387.         box-sizing: border-box
  388.     }
  389.  
  390.     .mfp-img-mobile .mfp-bottom-bar:empty {
  391.         padding: 0
  392.     }
  393.  
  394.     .mfp-img-mobile .mfp-counter {
  395.         right: 5px;
  396.         top: 3px
  397.     }
  398.  
  399.     .mfp-img-mobile .mfp-close {
  400.         top: 0;
  401.         right: 0;
  402.         width: 35px;
  403.         height: 35px;
  404.         line-height: 35px;
  405.         background: rgba(0,0,0,.6);
  406.         position: fixed;
  407.         text-align: center;
  408.         padding: 0
  409.     }
  410. }
  411.  
  412. @media all and (max-width: 900px) {
  413.     .mfp-arrow {
  414.         -webkit-transform:scale(.75);
  415.         transform: scale(.75)
  416.     }
  417.  
  418.     .mfp-arrow-left {
  419.         -webkit-transform-origin: 0;
  420.         transform-origin: 0
  421.     }
  422.  
  423.     .mfp-arrow-right {
  424.         -webkit-transform-origin: 100%;
  425.         transform-origin: 100%
  426.     }
  427.  
  428.     .mfp-container {
  429.         padding-left: 6px;
  430.         padding-right: 6px
  431.     }
  432. }
  433.  
  434. .mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg {
  435.     opacity: 0;
  436.     -webkit-backface-visibility: hidden;
  437.     -webkit-transition: all .3s ease-out;
  438.     -moz-transition: all .3s ease-out;
  439.     -o-transition: all .3s ease-out;
  440.     transition: all .3s ease-out
  441. }
  442.  
  443. .mfp-with-zoom.mfp-ready .mfp-container {
  444.     opacity: 1
  445. }
  446.  
  447. .mfp-with-zoom.mfp-ready.mfp-bg {
  448.     opacity: .8
  449. }
  450.  
  451. .mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg {
  452.     opacity: 0
  453. }
  454.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement