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.

80 lines
1.5 KiB

  1. /*
  2. * # Semantic - Video
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Video
  13. *******************************/
  14. .ui.video {
  15. position: relative;
  16. max-width: 100%;
  17. }
  18. /*--------------
  19. Content
  20. ---------------*/
  21. /* Placeholder Image */
  22. .ui.video .placeholder {
  23. background-color: #333333;
  24. }
  25. /* Play Icon Overlay */
  26. .ui.video .play {
  27. cursor: pointer;
  28. position: absolute;
  29. top: 0px;
  30. left: 0px;
  31. z-index: 10;
  32. width: 100%;
  33. height: 100%;
  34. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  35. filter: alpha(opacity=60);
  36. opacity: 0.6;
  37. -webkit-transition: opacity 0.3s;
  38. -moz-transition: opacity 0.3s;
  39. -o-transition: opacity 0.3s;
  40. -ms-transition: opacity 0.3s;
  41. transition: opacity 0.3s;
  42. }
  43. .ui.video .play.icon:before {
  44. position: absolute;
  45. top: 50%;
  46. left: 50%;
  47. z-index: 11;
  48. font-size: 6rem;
  49. margin: -3rem 0em 0em -3rem;
  50. color: #FFFFFF;
  51. text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
  52. }
  53. .ui.video .placeholder {
  54. display: block;
  55. width: 100%;
  56. height: 100%;
  57. }
  58. /* IFrame Embed */
  59. .ui.video .embed {
  60. display: none;
  61. }
  62. /*******************************
  63. States
  64. *******************************/
  65. /*--------------
  66. Hover
  67. ---------------*/
  68. .ui.video .play:hover {
  69. opacity: 1;
  70. }
  71. /*--------------
  72. Active
  73. ---------------*/
  74. .ui.video.active .play,
  75. .ui.video.active .placeholder {
  76. display: none;
  77. }
  78. .ui.video.active .embed {
  79. display: block;
  80. }