Advertisement
delvinkrasniqi

Untitled

Feb 14th, 2020
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.78 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement