CSS   25

Magnific Popup CSS

Guest on 12th May 2022 09:29:06 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.