You are here

Home » API reference » Slick Carousel 7.2

slick.media.css in Slick Carousel 7.2

Provides media integration with pure CSS fluid video wrapper.

File

css/components/slick.media.css
View source 
  1. /**

  2.  * @file

  3.  * Provides media integration with pure CSS fluid video wrapper.

  4.  */

  5. 

  6. .media__iframe,

  7. .litebox,

  8. .slick__slide picture {

  9.   border: 0;

  10.   display: block;

  11.   max-width: 100%;

  12. }

  13. 

  14. .media--ratio iframe,

  15. .media-icon {

  16.   -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;

  17.   transition: visibility 0s linear 0.5s, opacity 0.5s linear;

  18. }

  19. 

  20. .media-icon {

  21.   cursor: pointer;

  22.   display: block;

  23.   opacity: 0;

  24.   position: absolute;

  25.   visibility: hidden;

  26.   z-index: 9;

  27. }

  28. 

  29. .media-icon--play,

  30. .media-icon--close,

  31. .media-icon--spinner {

  32.   height: 80px;

  33.   left: 50%;

  34.   margin: -40px 0 0 -40px;

  35.   top: 50%;

  36.   width: 80px;

  37. }

  38. 

  39. .media-icon--close::before,

  40. .media-icon--close::after,

  41. .media-icon--play::before {

  42.   content: '';

  43.   display: block;

  44.   position: absolute;

  45.   pointer-events: none;

  46. }

  47. 

  48. .media-icon--close::before,

  49. .media-icon--close::after {

  50.   background: white;

  51.   border-radius: 4px;

  52.   height: 8px;

  53.   left: 50%;

  54.   margin: -4px 0 0 -40px;

  55.   top: 50%;

  56.   width: 80px;

  57.   -ms-transform: rotate(45deg);

  58.   -webkit-transform: rotate(45deg);

  59.   transform: rotate(45deg);

  60. }

  61. 

  62. .media-icon--close::after {

  63.   -ms-transform: rotate(-45deg);

  64.   -webkit-transform: rotate(-45deg);

  65.   transform: rotate(-45deg);

  66. }

  67. 

  68. .media-icon--close:hover::before,

  69. .media-icon--close:hover::after {

  70.   background-color: #ff6d2c;

  71. }

  72. 

  73. .is-playing .media-icon--close {

  74.   visibility: hidden;

  75. }

  76. 

  77. .media-icon--play {

  78.   border: 8px solid white;

  79.   border-radius: 50%;

  80. }

  81. 

  82. .media-icon--play::before {

  83.   border: 16px solid transparent;

  84.   border-left: 24px solid white;

  85.   left: 50%;

  86.   line-height: 60px;

  87.   margin: -16px 0 0 -6px;

  88.   top: 50%;

  89. }

  90. 

  91. .media--loading .media-icon--play::before {

  92.   display: none;

  93. }

  94. 

  95. .media-icon--play:hover {

  96.   border-color: #ff6d2c;

  97. }

  98. 

  99. .media-icon--play:hover::before {

  100.   border-left-color: #ff6d2c;

  101. }

  102. 

  103. .is-playing:hover .media-icon {

  104.   -webkit-transition-delay: 0s;

  105.   transition-delay: 0s;

  106. }

  107. 

  108. /* Ensures not affecting iframe only without media swicther */

  109. .media--player.media--ratio > iframe {

  110.   opacity: 0;

  111.   visibility: hidden;

  112. }

  113. 

  114. .media--switch .media__image,

  115. .media-icon--play,

  116. .is-playing .media__iframe,

  117. .is-playing.media--ratio > iframe,

  118. .is-playing:hover .media-icon--close {

  119.   opacity: 1;

  120.   visibility: visible;

  121. }

  122. 

  123. .is-playing .media__iframe {

  124.   z-index: 3;

  125. }

  126. 

  127. .is-playing > img,

  128. .is-playing .media__image,

  129. .is-playing.media--switch + .slide__pattern,

  130. .is-playing.media--switch .media__image,

  131. .is-playing .media-icon--play,

  132. .is-playing:hover .media-icon--play {

  133.   opacity: 0;

  134.   position: absolute;

  135.   visibility: hidden;

  136.   z-index: -1;

  137. }

  138. 

  139. .is-playing .slide__pattern {

  140.   display: none;

  141. }

  142. 

  143. /**

  144.  * Fallback non-JS, if no-js class is provided by theme.

  145.  */

  146. .no-js .media--switch .media__image,

  147. .no-js .media--switch .media-icon {

  148.   opacity: 0;

  149.   visibility: hidden;

  150. }

  151. 

  152. .no-js .media--switch .media__iframe {

  153.   opacity: 1;

  154.   visibility: visible;

  155. }