embed.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /*!
  2. * # Semantic UI 2.4.2 - Video
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Types
  12. *******************************/
  13. .ui.embed {
  14. position: relative;
  15. max-width: 100%;
  16. height: 0px;
  17. overflow: hidden;
  18. background: #DCDDDE;
  19. padding-bottom: 56.25%;
  20. }
  21. /*-----------------
  22. Embedded Content
  23. ------------------*/
  24. .ui.embed iframe,
  25. .ui.embed embed,
  26. .ui.embed object {
  27. position: absolute;
  28. border: none;
  29. width: 100%;
  30. height: 100%;
  31. top: 0px;
  32. left: 0px;
  33. margin: 0em;
  34. padding: 0em;
  35. }
  36. /*-----------------
  37. Embed
  38. ------------------*/
  39. .ui.embed > .embed {
  40. display: none;
  41. }
  42. /*--------------
  43. Placeholder
  44. ---------------*/
  45. .ui.embed > .placeholder {
  46. position: absolute;
  47. cursor: pointer;
  48. top: 0px;
  49. left: 0px;
  50. display: block;
  51. width: 100%;
  52. height: 100%;
  53. background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  54. }
  55. /*--------------
  56. Icon
  57. ---------------*/
  58. .ui.embed > .icon {
  59. cursor: pointer;
  60. position: absolute;
  61. top: 0px;
  62. left: 0px;
  63. width: 100%;
  64. height: 100%;
  65. z-index: 2;
  66. }
  67. .ui.embed > .icon:after {
  68. position: absolute;
  69. top: 0%;
  70. left: 0%;
  71. width: 100%;
  72. height: 100%;
  73. z-index: 3;
  74. content: '';
  75. background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  76. background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  77. opacity: 0.5;
  78. -webkit-transition: opacity 0.5s ease;
  79. transition: opacity 0.5s ease;
  80. }
  81. .ui.embed > .icon:before {
  82. position: absolute;
  83. top: 50%;
  84. left: 50%;
  85. z-index: 4;
  86. -webkit-transform: translateX(-50%) translateY(-50%);
  87. transform: translateX(-50%) translateY(-50%);
  88. color: #FFFFFF;
  89. font-size: 6rem;
  90. text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2);
  91. -webkit-transition: opacity 0.5s ease, color 0.5s ease;
  92. transition: opacity 0.5s ease, color 0.5s ease;
  93. z-index: 10;
  94. }
  95. /*******************************
  96. States
  97. *******************************/
  98. /*--------------
  99. Hover
  100. ---------------*/
  101. .ui.embed .icon:hover:after {
  102. background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  103. background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  104. opacity: 1;
  105. }
  106. .ui.embed .icon:hover:before {
  107. color: #FFFFFF;
  108. }
  109. /*--------------
  110. Active
  111. ---------------*/
  112. .ui.active.embed > .icon,
  113. .ui.active.embed > .placeholder {
  114. display: none;
  115. }
  116. .ui.active.embed > .embed {
  117. display: block;
  118. }
  119. /*******************************
  120. Video Overrides
  121. *******************************/
  122. /*******************************
  123. Site Overrides
  124. *******************************/
  125. /*******************************
  126. Variations
  127. *******************************/
  128. .ui.square.embed {
  129. padding-bottom: 100%;
  130. }
  131. .ui[class*="4:3"].embed {
  132. padding-bottom: 75%;
  133. }
  134. .ui[class*="16:9"].embed {
  135. padding-bottom: 56.25%;
  136. }
  137. .ui[class*="21:9"].embed {
  138. padding-bottom: 42.85714286%;
  139. }