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.

168 lines
3.0 KiB

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