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.

93 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. right: 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. transition: opacity 0.3s;
  39. }
  40. .ui.video .play.icon:before {
  41. position: absolute;
  42. top: 50%;
  43. right: 50%;
  44. z-index: 11;
  45. font-size: 6rem;
  46. margin: -3rem -3rem 0em 0em;
  47. color: #FFFFFF;
  48. text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
  49. }
  50. .ui.video .placeholder {
  51. display: block;
  52. width: 100%;
  53. height: 100%;
  54. }
  55. /* IFrame Embed */
  56. .ui.video .embed {
  57. display: none;
  58. }
  59. /*******************************
  60. States
  61. *******************************/
  62. /*--------------
  63. Hover
  64. ---------------*/
  65. .ui.video .play:hover {
  66. opacity: 1;
  67. }
  68. /*--------------
  69. Active
  70. ---------------*/
  71. .ui.video.active .play,
  72. .ui.video.active .placeholder {
  73. display: none;
  74. }
  75. .ui.video.active .embed {
  76. display: block;
  77. }