github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/video.less (about) 1 /*! 2 * # Semantic UI - Video 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Theme 15 *******************************/ 16 17 @type : 'module'; 18 @element : 'video'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Video 24 *******************************/ 25 26 .ui.video { 27 position: relative; 28 background-color: @background; 29 position: relative; 30 max-width: 100%; 31 padding-bottom: 56.25%; 32 height: 0px; 33 overflow: hidden; 34 } 35 36 /*-------------- 37 Content 38 ---------------*/ 39 40 /* Placeholder Image */ 41 .ui.video .placeholder { 42 background-color: @placeholderBackground; 43 } 44 45 /* Play Icon Overlay */ 46 .ui.video .play { 47 cursor: pointer; 48 position: absolute; 49 top: 0px; 50 left: 0px; 51 z-index: 10; 52 53 width: 100%; 54 height: 100%; 55 56 opacity: @playOpacity; 57 transition: opacity 0.3s; 58 } 59 .ui.video .play.icon:before { 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 z-index: 11; 64 65 background: @playBackground; 66 67 width: (@playSize + @playBorderSize); 68 height: (@playSize + @playBorderSize); 69 line-height: (@playSize + @playBorderSize); 70 border-radius: @playBorderRadius; 71 72 color: @playColor; 73 font-size: @playSize; 74 text-shadow: @playShadow; 75 transform: translateX(-50%) translateY(-50%); 76 } 77 78 .ui.video .placeholder { 79 position: absolute; 80 top: 0px; 81 left: 0px; 82 display: block; 83 width: 100%; 84 height: 100%; 85 } 86 87 /* IFrame Embed */ 88 .ui.video .embed iframe, 89 .ui.video .embed embed, 90 .ui.video .embed object { 91 position: absolute; 92 border: none; 93 width: 100%; 94 height: 100%; 95 top: 0px; 96 left: 0px; 97 margin: 0em; 98 padding: 0em; 99 } 100 101 /******************************* 102 States 103 *******************************/ 104 105 /*-------------- 106 Hover 107 ---------------*/ 108 109 .ui.video .play:hover { 110 opacity: @playHoverOpacity; 111 } 112 113 /*-------------- 114 Active 115 ---------------*/ 116 117 .ui.video.active .play, 118 .ui.video.active .placeholder { 119 display: none; 120 } 121 .ui.video.active .embed { 122 display: inline; 123 } 124 125 .loadUIOverrides();