SHARE
TWEET

Untitled

delvinkrasniqi Feb 14th, 2020 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*!
  2.  * baguetteBox.js
  3.  * @author  feimosi
  4.  * @version 1.8.1
  5.  * @url https://github.com/feimosi/baguetteBox.js
  6.  */
  7.  
  8.  #baguetteBox-overlay {
  9.     display: none;
  10.     opacity: 0;
  11.     position: fixed;
  12.     overflow: hidden;
  13.     top: 0;
  14.     left: 0;
  15.     width: 100%;
  16.     height: 100%;
  17.     z-index: 1000000;
  18.     background-color: #222;
  19.     background-color: rgba(0, 0, 0, .8);
  20.     -webkit-transition: opacity .5s ease;
  21.     transition: opacity .5s ease;
  22. }
  23.  
  24. #baguetteBox-overlay.visible {
  25.     opacity: 1;
  26. }
  27.  
  28. #baguetteBox-overlay .full-image {
  29.     display: inline-block;
  30.     position: relative;
  31.     width: 100%;
  32.     height: 100%;
  33.     text-align: center;
  34. }
  35.  
  36. #baguetteBox-overlay .full-image figure {
  37.     display: inline;
  38.     margin: 0;
  39.     height: 100%;
  40. }
  41.  
  42. #baguetteBox-overlay .full-image img {
  43.     display: inline-block;
  44.     width: auto;
  45.     height: auto;
  46.     max-height: 100%;
  47.     max-width: 100%;
  48.     vertical-align: middle;
  49.     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  50.     box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  51. }
  52.  
  53. #baguetteBox-overlay .full-image figcaption {
  54.     display: block;
  55.     position: absolute;
  56.     bottom: 0;
  57.     width: 100%;
  58.     text-align: center;
  59.     white-space: normal;
  60.     color: #ccc;
  61.     background-color: #000;
  62.     background-color: rgba(0, 0, 0, .6);
  63.  
  64. }
  65.  
  66. #baguetteBox-overlay .full-image:before {
  67.     content: "";
  68.     display: inline-block;
  69.     height: 50%;
  70.     width: 1px;
  71.     margin-right: -1px;
  72. }
  73.  
  74. #baguetteBox-slider {
  75.     position: absolute;
  76.     left: 0;
  77.     top: 0;
  78.     height: 100%;
  79.     width: 100%;
  80.     white-space: nowrap;
  81.     -webkit-transition: left .4s ease, -webkit-transform .4s ease;
  82.     transition: left .4s ease, -webkit-transform .4s ease;
  83.     transition: left .4s ease, transform .4s ease;
  84.     transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease;
  85. }
  86.  
  87. #baguetteBox-slider.bounce-from-right {
  88.     -webkit-animation: bounceFromRight .4s ease-out;
  89.     animation: bounceFromRight .4s ease-out;
  90. }
  91.  
  92. #baguetteBox-slider.bounce-from-left {
  93.     -webkit-animation: bounceFromLeft .4s ease-out;
  94.     animation: bounceFromLeft .4s ease-out;
  95. }
  96.  
  97. @-webkit-keyframes bounceFromRight {
  98.     0%,
  99.     100% {
  100.         margin-left: 0;
  101.     }
  102.     50% {
  103.         margin-left: -30px;
  104.     }
  105. }
  106.  
  107. @keyframes bounceFromRight {
  108.     0%,
  109.     100% {
  110.         margin-left: 0;
  111.     }
  112.     50% {
  113.         margin-left: -30px;
  114.     }
  115. }
  116.  
  117. @-webkit-keyframes bounceFromLeft {
  118.     0%,
  119.     100% {
  120.         margin-left: 0;
  121.     }
  122.     50% {
  123.         margin-left: 30px;
  124.     }
  125. }
  126.  
  127. @keyframes bounceFromLeft {
  128.     0%,
  129.     100% {
  130.         margin-left: 0;
  131.     }
  132.     50% {
  133.         margin-left: 30px;
  134.     }
  135. }
  136.  
  137. .baguetteBox-button#next-button,
  138. .baguetteBox-button#previous-button {
  139.     top: 50%;
  140.     top: calc(50% - 30px);
  141.     width: 44px;
  142.     height: 60px;
  143. }
  144.  
  145. .baguetteBox-button {
  146.     position: absolute;
  147.     cursor: pointer;
  148.     outline: 0;
  149.     padding: 0;
  150.     margin: 0;
  151.     border: 0;
  152.     -moz-border-radius: 15%;
  153.     border-radius: 15%;
  154.     background-color: #323232;
  155.     background-color: rgba(50, 50, 50, .5);
  156.     color: #ddd;
  157.     -webkit-transition: background-color .4s ease;
  158.     transition: background-color .4s ease;
  159. }
  160.  
  161. .baguetteBox-button:focus,
  162. .baguetteBox-button:hover {
  163.     background-color: rgba(50, 50, 50, .9);
  164. }
  165.  
  166. .baguetteBox-button#next-button {
  167.     right: 2%;
  168. }
  169.  
  170. .baguetteBox-button#previous-button {
  171.     left: 2%;
  172. }
  173.  
  174. .baguetteBox-button#close-button {
  175.     top: 20px;
  176.     right: 2%;
  177.     right: calc(2% + 6px);
  178.     width: 30px;
  179.     height: 30px
  180. }
  181.  
  182. .baguetteBox-button svg {
  183.     position: absolute;
  184.     left: 0;
  185.     top: 0;
  186. }
  187.  
  188. .baguetteBox-spinner {
  189.     width: 40px;
  190.     height: 40px;
  191.     display: inline-block;
  192.     position: absolute;
  193.     top: 50%;
  194.     left: 50%;
  195.     margin-top: -20px;
  196.     margin-left: -20px;
  197. }
  198.  
  199. .baguetteBox-double-bounce1,
  200. .baguetteBox-double-bounce2 {
  201.     width: 100%;
  202.     height: 100%;
  203.     -moz-border-radius: 50%;
  204.     border-radius: 50%;
  205.     background-color: #fff;
  206.     opacity: .6;
  207.     position: absolute;
  208.     top: 0;
  209.     left: 0;
  210.     -webkit-animation: bounce 2s infinite ease-in-out;
  211.     animation: bounce 2s infinite ease-in-out;
  212. }
  213.  
  214. .baguetteBox-double-bounce2 {
  215.     -webkit-animation-delay: -1s;
  216.     animation-delay: -1s;
  217. }
  218.  
  219. @-webkit-keyframes bounce {
  220.     0%,
  221.     100% {
  222.         -webkit-transform: scale(0);
  223.         transform: scale(0);
  224.     }
  225.     50% {
  226.         -webkit-transform: scale(1);
  227.         transform: scale(1);
  228.     }
  229. }
  230.  
  231. @keyframes bounce {
  232.     0%,
  233.     100% {
  234.         -webkit-transform: scale(0);
  235.         -moz-transform: scale(0);
  236.         transform: scale(0);
  237.     }
  238.     50% {
  239.         -webkit-transform: scale(1);
  240.         -moz-transform: scale(1);
  241.         transform: scale(1);
  242.     }
  243. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top