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