You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

owl.css 4.0KB

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