1 2.flowplayer, .flowplayer.is-playing, .flowplayer.is-fullscreen .fp-player { 3 /* background-color:#1C1C1C; */ 4 background-color: rgba(0, 0, 0, 0.01); 5} 6 7/* waiting element of fixed size to accomodate custom graphic */ 8.flowplayer .fp-waiting { 9 width: 90px; 10 height: 90px; 11 background-image: url(/icons/default/loading.gif); 12} 13/* 14.fp-waiting, 15.fp-waiting:before, 16.fp-waiting:after { 17 background: #eee; 18 -webkit-animation: load1 1s infinite ease-in-out; 19 animation: load1 1s infinite ease-in-out; 20 width: 1em; 21 height: 3em; 22} 23 24.fp-waiting:before, 25.fp-waiting:after { 26 position: absolute; 27 top: 0; 28 content: ''; 29} 30 31.fp-waiting:before { 32 left: -1.5em; 33 -webkit-animation-delay: -0.32s; 34 animation-delay: -0.32s; 35} 36.fp-waiting { 37 color: #eee; 38 text-indent: -9999em; 39 margin: 90px auto; 40 position: relative; 41 font-size: 11px; 42 -webkit-transform: translateZ(0); 43 -ms-transform: translateZ(0); 44 transform: translateZ(0); 45 -webkit-animation-delay: -0.16s; 46 animation-delay: -0.16s; 47} 48.fp-waiting:after { 49 left: 1.5em; 50 opacity: 1.0; 51} 52@-webkit-keyframes load1 { 53 0%, 54 80%, 55 100% { 56 box-shadow: 0 0; 57 height: 3em; 58 } 59 40% { 60 box-shadow: 0 -2em; 61 height: 3em; 62 } 63} 64@keyframes load1 { 65 0% { 66 opacity: 1; 67 box-shadow: 0 0; 68 height: 3em; 69 } 70 40% { 71 opacity: 0.8; 72 box-shadow: 0 -3em; 73 height: 4em; 74 } 75 80% { 76 box-shadow: 0 0; 77 height: 3em; 78 } 79 100% { 80 opacity: 1; 81 box-shadow: 0 0; 82 height: 3em; 83 } 84} 85*/ 86 87/* hide default loading animation or text */ 88.flowplayer .fp-waiting em, .flowplayer .fp-waiting p { 89 display: none; 90} 91 92.flowplayer .fp-subtitle p { 93 font-size: 80px; 94} 95 96 97#overlay { 98 position: absolute; 99 z-index: 20; 100 font-size: 19px; 101 color: white; 102 background-color: black; 103 align-items: center; 104 justify-content: center; 105 display: none; 106} 107 108#media-control { 109 width: 100%; 110 display: flex; 111 padding-bottom: 5px; 112 align-items: center; 113} 114 115#title { 116 font-size: 14px; 117 font-weight: 600; 118} 119 120#audio-track { 121 margin-left: 14px; 122 margin-right: 14px; 123} 124 125#progress-slider { 126 margin: 12px; 127 height: 4px; 128} 129 130#volume-slider { 131 width: 90px; 132 height: 4px; 133 margin-right: 12px; 134} 135 136#play, #pause, #buffer { 137 font-size: 24px; 138 color: #E65100; 139 margin-right: 12px; 140} 141 142#play, #pause { 143 cursor: pointer; 144} 145 146#play:hover, #pause:hover { 147 opacity: 0.8; 148} 149 150#pause, #buffer { 151 display: none; 152} 153 154#progress-and-duration { 155 margin-left: 15px; 156 margin-right: 15px; 157 min-width: 90px; 158} 159 160#cast-active, #cast-idle { 161 padding: 8px; 162 margin: 0 4px; 163 cursor: pointer; 164 display: none; 165} 166 167#audio-on, #audio-off { 168 cursor: pointer; 169 font-size: 20px; 170 padding: 8px; 171} 172 173#audio-off { 174 display: none; 175} 176 177#new-window, #fullscreen, #share, #download, #cc-on, #cc-off { 178 font-size: 20px; 179 padding: 8px; 180 margin: 0 4px; 181 cursor: pointer; 182} 183 184#cc-off, #cc-on { 185 font-size: 26px; 186 display: none; 187} 188 189#cc-on, #cast-active { 190 color: #E65100; 191} 192 193#fullscreen { 194 font-size: 26px; 195} 196 197/* Work-around for Safari */ 198#new-window, #share, #download, #audio-on, #audio-off { 199 width: 20px; 200} 201#cast-active, #cast-idle { 202 width: 24px; 203} 204#cc-on, #cc-off, #fullscreen { 205 width: 26px; 206} 207 208/* TODO: Layout work-around */ 209#new-window, #share, #download, #cc-on, #cc-off, #fullscreen, #audio-on, #audio-off, #cast-active, #cast-idle, #star, #audio-track { 210 z-index: 1 211} 212 213.ui-slider .ui-slider-handle { 214 width: 12px; 215 height: 12px; 216 cursor: pointer; 217 background: #E65100; 218 display: none; 219 border: none; 220} 221 222.ui-slider { 223 cursor: pointer; 224 border: none; 225} 226 227.ui-slider-range-min { 228 background: #E65100; 229} 230 231.ui-slider-handle:focus { 232 outline: none; 233} 234 235 236/* initially hide speed buttons while they cannot be used */ 237.is-splash.flowplayer .buttons, .is-loading.flowplayer .buttons { 238 display: none; 239} 240 241 242.flowplayer .buttons { 243 position: absolute; 244 right: 120px; 245 bottom: 40px; 246 z-index: 12; /* make clickable */ 247 display: block; 248 opacity: 1; 249 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 250} 251 252.is-mouseout.flowplayer .buttons { 253 opacity: 0; 254 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 255 /* same transition as other ui elements like fullscreen */ 256 -webkit-transition: opacity .15s .3s; 257 -moz-transition: opacity .15s .3s; 258 transition: opacity .15s .3s; 259} 260 261.flowplayer .buttons span { 262 padding: 1ex; 263 margin: 0.5ex; 264 width: 3.2em; 265 display: inline-block; 266 text-align: center; 267 font-weight: bold; 268 color: #eee; 269 background-color: rgba(51, 51, 51, 0.60); 270 cursor: pointer; 271 -webkit-border-radius: 3px; 272 -moz-border-radius: 3px; 273 border-radius: 3px; 274} 275 276.flowplayer .buttons span.active { 277 color: #00a7c8; 278 background-color: #ccc; 279 cursor: default; 280} 281 282p { 283 margin: 0 0 0 0; 284} 285