owl.carousel.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /**
  2. * Owl Carousel v2.3.2
  3. * Copyright 2013-2018 David Deutsch
  4. * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
  5. */
  6. /*
  7. * Owl Carousel - Core
  8. */
  9. .owl-carousel {
  10. display: none;
  11. width: 100%;
  12. -webkit-tap-highlight-color: transparent;
  13. /* position relative and z-index fix webkit rendering fonts issue */
  14. position: relative;
  15. z-index: 1; }
  16. .owl-carousel .owl-stage {
  17. position: relative;
  18. -ms-touch-action: pan-Y;
  19. touch-action: manipulation;
  20. -moz-backface-visibility: hidden;
  21. /* fix firefox animation glitch */ }
  22. .owl-carousel .owl-stage:after {
  23. content: ".";
  24. display: block;
  25. clear: both;
  26. visibility: hidden;
  27. line-height: 0;
  28. height: 0; }
  29. .owl-carousel .owl-stage-outer {
  30. position: relative;
  31. overflow: hidden;
  32. /* fix for flashing background */
  33. -webkit-transform: translate3d(0px, 0px, 0px); }
  34. .owl-carousel .owl-wrapper,
  35. .owl-carousel .owl-item {
  36. -webkit-backface-visibility: hidden;
  37. -moz-backface-visibility: hidden;
  38. -ms-backface-visibility: hidden;
  39. -webkit-transform: translate3d(0, 0, 0);
  40. -moz-transform: translate3d(0, 0, 0);
  41. -ms-transform: translate3d(0, 0, 0); }
  42. .owl-carousel .owl-item {
  43. position: relative;
  44. min-height: 1px;
  45. float: left;
  46. -webkit-backface-visibility: hidden;
  47. -webkit-tap-highlight-color: transparent;
  48. -webkit-touch-callout: none; }
  49. .owl-carousel .owl-item img {
  50. display: block;
  51. width: 100%; }
  52. .owl-carousel .owl-nav.disabled,
  53. .owl-carousel .owl-dots.disabled {
  54. display: none; }
  55. .owl-carousel .owl-nav .owl-prev,
  56. .owl-carousel .owl-nav .owl-next,
  57. .owl-carousel .owl-dot {
  58. cursor: pointer;
  59. cursor: hand;
  60. -webkit-user-select: none;
  61. -khtml-user-select: none;
  62. -moz-user-select: none;
  63. -ms-user-select: none;
  64. user-select: none; }
  65. .owl-carousel .owl-nav button.owl-prev,
  66. .owl-carousel .owl-nav button.owl-next,
  67. .owl-carousel button.owl-dot {
  68. background: none;
  69. color: inherit;
  70. border: none;
  71. padding: 0 !important;
  72. font: inherit; }
  73. .owl-carousel.owl-loaded {
  74. display: block; }
  75. .owl-carousel.owl-loading {
  76. opacity: 0;
  77. display: block; }
  78. .owl-carousel.owl-hidden {
  79. opacity: 0; }
  80. .owl-carousel.owl-refresh .owl-item {
  81. visibility: hidden; }
  82. .owl-carousel.owl-drag .owl-item {
  83. -ms-touch-action: none;
  84. touch-action: none;
  85. -webkit-user-select: none;
  86. -moz-user-select: none;
  87. -ms-user-select: none;
  88. user-select: none; }
  89. .owl-carousel.owl-grab {
  90. cursor: move;
  91. cursor: grab; }
  92. .owl-carousel.owl-rtl {
  93. direction: rtl; }
  94. .owl-carousel.owl-rtl .owl-item {
  95. float: right; }
  96. /* No Js */
  97. .no-js .owl-carousel {
  98. display: block; }
  99. /*
  100. * Owl Carousel - Animate Plugin
  101. */
  102. .owl-carousel .animated {
  103. animation-duration: 1000ms;
  104. animation-fill-mode: both; }
  105. .owl-carousel .owl-animated-in {
  106. z-index: 0; }
  107. .owl-carousel .owl-animated-out {
  108. z-index: 1; }
  109. .owl-carousel .fadeOut {
  110. animation-name: fadeOut; }
  111. @keyframes fadeOut {
  112. 0% {
  113. opacity: 1; }
  114. 100% {
  115. opacity: 0; } }
  116. /*
  117. * Owl Carousel - Auto Height Plugin
  118. */
  119. .owl-height {
  120. transition: height 500ms ease-in-out; }
  121. /*
  122. * Owl Carousel - Lazy Load Plugin
  123. */
  124. .owl-carousel .owl-item .owl-lazy {
  125. opacity: 0;
  126. transition: opacity 400ms ease; }
  127. .owl-carousel .owl-item img.owl-lazy {
  128. transform-style: preserve-3d; }
  129. /*
  130. * Owl Carousel - Video Plugin
  131. */
  132. .owl-carousel .owl-video-wrapper {
  133. position: relative;
  134. height: 100%;
  135. background: #000; }
  136. .owl-carousel .owl-video-play-icon {
  137. position: absolute;
  138. height: 80px;
  139. width: 80px;
  140. left: 50%;
  141. top: 50%;
  142. margin-left: -40px;
  143. margin-top: -40px;
  144. background: url("owl.video.play.png") no-repeat;
  145. cursor: pointer;
  146. z-index: 1;
  147. -webkit-backface-visibility: hidden;
  148. transition: transform 100ms ease; }
  149. .owl-carousel .owl-video-play-icon:hover {
  150. -ms-transform: scale(1.3, 1.3);
  151. transform: scale(1.3, 1.3); }
  152. .owl-carousel .owl-video-playing .owl-video-tn,
  153. .owl-carousel .owl-video-playing .owl-video-play-icon {
  154. display: none; }
  155. .owl-carousel .owl-video-tn {
  156. opacity: 0;
  157. height: 100%;
  158. background-position: center center;
  159. background-repeat: no-repeat;
  160. background-size: contain;
  161. transition: opacity 400ms ease; }
  162. .owl-carousel .owl-video-frame {
  163. position: relative;
  164. z-index: 1;
  165. height: 100%;
  166. width: 100%; }