PluginProbe
FV Player 8 / trunk
FV Player 8 vtrunk
trunk 8.0.18 8.0.19 8.0.20 8.0.21 8.0.25 8.0.27 8.1 8.1.3
fv-player / css / playlists.css

playlists.css in FV Player 8 trunk, at css/playlists.css

699 lines 28.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .fp-playlist-external h4 { display: block }
2
3 .flowplayer .fv-fp-playlist-menu .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; }
4 .flowplayer .fp-menu.fv-fp-playlist-menu { width: 4em; }
5 .flowplayer .fp-menu.fv-fp-playlist-menu .fp-selected::before { content: '' }
6
7 #fvp-playlist-play {
8 display: block;
9 text-align: center;
10 }
11 .fv-fp-playlist .fvp-icon,
12 .fv-fp-playlist #fvp-playlist-play,
13 .flowplayer .fp-menu.fv-fp-playlist-menu .fp-selected::before {
14 display: none;
15 }
16 .fv-fp-playlist.mode-repeat-playlist .fvp-icon.fvp-replay-list,
17 .fv-fp-playlist.mode-shuffle-playlist .fvp-icon.fvp-shuffle,
18 .fv-fp-playlist.mode-repeat-track .fvp-icon.fvp-replay-track {
19 display: block;
20 }
21 .fv-fp-playlist.mode-normal #fvp-playlist-play {
22 display: inline-block;
23 }
24 .fv-fp-playlist.mode-normal #fvp-playlist-play {
25 display: inline-block;
26 }
27 .fv-fp-playlist.mode-normal .fvp-icon.fvp-playlist-play {
28 margin-top: 4px;
29 }
30
31 .flowplayer .fp-controls .fv-fp-prevbtn,
32 .flowplayer .fp-controls .fv-fp-nextbtn {
33 margin: 0 .2em 0 .4em;
34 display: flex;
35 vertical-align: middle;
36 }
37 .flowplayer .fp-controls .fv-fp-nextbtn {
38 margin: 0 .4em 0 .2em;
39 }
40 .flowplayer.is-audio .fp-controls .fp-playbtn {
41 margin: 0 .2em 0 .4em;
42 }
43 .fp-prevbtn:after, .fv-fp-prevbtn:after, .fp-nextbtn:before, .fv-fp-nextbtn:before {
44 content: "\e007"; line-height: 1; vertical-align:middle;
45 }
46 .fv-fp-prevbtn:before {
47 content: "";
48 border-left: 2px solid #fff;
49 font-size: 1.2em;
50 }
51 .fp-outlined .fv-fp-prevbtn:before {
52 border-left: 1px solid #fff;
53 }
54 .fv-fp-prevbtn:after {
55 content: "\e007";
56 font-size: 1.2em;
57 display: inline-block;
58 line-height: 1;
59 -webkit-transform: scale(-1.00,1.00);
60 transform: scale(-1.00,1.00);
61 }
62
63 .fv-fp-nextbtn:before {
64 font-size: 1.2em;
65 border-right: 2px solid #fff;
66 }
67 .fp-outlined .fv-fp-nextbtn:before {
68 border-right: 1px solid #fff;
69 }
70
71 .flowplayer.is-tiny .fp-controls .fv-fp-prevbtn, .flowplayer.is-tiny .fp-controls .fv-fp-nextbtn {
72 display: none;
73 }
74
75 .freedomplayer.has-playlist-prevnext.is-mouseover.is-ready .fp-forward,
76 .freedomplayer.has-playlist-prevnext.is-mouseover.is-ready .fp-rewind {
77 display: none;
78 }
79
80 /* Tabs */
81 .fv_flowplayer_tabs { margin: 0 auto; }
82 .fv_flowplayer_tabs ul.ui-tabs,.fv_flowplayer_tabs ul.ui-tabs-nav{margin:0 !important;font-size:13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;line-height:24px !important}
83 .fv_flowplayer_tabs .ui-tabs { padding: 0; zoom: 1; }
84 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: 1px 0; }
85 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-width: 0 !important; margin: 0 4px 2px 0 !important; padding: 0 !important; list-style:none !important;line-height:24px !important;}
86 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 4px 10px !important; color:#5E5E5E !important;line-height:24px !important;background-color:#EFEFEF;}
87 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li.ui-state-active a, .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; color:#FFF !important; background-color:#5E5E5E;}
88 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li a, .fv_flowplayer_tabs .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-state-active a { cursor: pointer; outline: none; border: none; }
89 .fv_flowplayer_tabs .ui-tabs .ui-tabs-panel { padding: 4px 0; display: block; border-width: 0; background: none; }
90 .fv_flowplayer_tabs .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }
91 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li.ui-corner-top, .fv_flowplayer_tabs .ui-tabs-horizontal-top .wpts_ext{padding-bottom:4px!important;height:32px; }
92 .fv_flowplayer_tabs .fv_flowplayer_tabs_cl{display:block;visibility:hidden;clear:left;height:0;content:".";}
93 .fv_flowplayer_tabs .fv_flowplayer_tabs_cr{display:block;visibility:hidden;clear:right;height:0;content:".";}
94 .fv_flowplayer_tabs .ui-tabs .ui-tabs-nav li i.dur {display: none; }
95
96 /* Prev/next playlist */
97 .freedomplayer.fp-default-playlist .fp-prev, .freedomplayer.fp-default-playlist .fp-next {
98 font-size: 240%;
99 color: #fff;
100 padding: 4px;
101 font-weight: bold;
102 text-shadow: 0 0 1px #000;
103 cursor: pointer;
104 z-index: 12; /* make clickable */
105 opacity: 0;
106 }
107 .freedomplayer.fp-default-playlist.is-mouseover:not(.is-fullscreen) .fp-prev,
108 .freedomplayer.fp-default-playlist.is-mouseover:not(.is-fullscreen) .fp-next,
109 .freedomplayer.fp-default-playlist.is-mouseover-bottom .fp-prev,
110 .freedomplayer.fp-default-playlist.is-mouseover-bottom .fp-next {
111 opacity: 0.6;
112 }
113 .freedomplayer.fp-default-playlist.is-mouseover .fp-prev:hover, .freedomplayer.fp-default-playlist.is-mouseover .fp-next:hover {
114 opacity: 1;
115 }
116 .flowplayer .fp-prev {
117 left: 5px;
118 }
119 .flowplayer .fp-next {
120 right: 5px;
121 }
122 .is-mouseout.flowplayer .fp-prev, .is-mouseout.flowplayer .fp-next,
123 .is-cva.flowplayer .fp-prev, .is-cva.flowplayer .fp-next {
124 transition: opacity .1;
125 }
126
127 @-moz-keyframes blending{
128 to { opacity: 1; }
129 }@-webkit-keyframes blending{
130 to { opacity: 1 }
131 }@-o-keyframes blending{
132 to { opacity: 1 }
133 }@-ms-keyframes blending{
134 to { opacity: 1 }
135 }@keyframes blending{
136 to { opacity: 1 }
137 }
138
139 /* Other playlist styles */
140 .fp-playlist-external a,.entry-content .fp-playlist-external a {position:relative;text-decoration:none;border-bottom:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
141 .fp-playlist-external a:focus,.entry-content .fp-playlist-external a:focus {outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
142 .fp-playlist-external a:hover,.entry-content .fp-playlist-external a:hover {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-decoration:none;border-bottom:0}
143 .fp-playlist-external a,.fp-playlist-external a h4,.fp-playlist-vertical-wrapper .fp-playlist-external {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
144 .fp-playlist-external a .fvp-playlist-thumb:empty,.fp-playlist-horizontal a.fvp-video-thumb-no-splash h4 {background-color:#aaa}
145 .fp-playlist-external a .fvp-playlist-thumb {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
146 .fp-playlist-external .fvp-playlist-thumb-img {
147 height: 0;
148 overflow: hidden;
149 padding-top: 56.25%;
150 position: relative;
151 }
152 .fp-playlist-external > a > .fvp-playlist-thumb-img > img,
153 .fp-playlist-external > div > a > .fvp-playlist-thumb-img > img,
154 .fp-playlist-external > a > .fvp-playlist-thumb-img > picture,
155 .fp-playlist-external > div > a > .fvp-playlist-thumb-img > picture {
156 position: absolute;
157 top: 0;
158 left: 0;
159 width: 100%;
160 height: 100%;
161 object-fit: cover;
162 border: 0;
163 }
164 .fvp-playlist-thumb-img.no-image {
165 background: radial-gradient(transparent, transparent, rgba( 128, 128, 128, 0.15) )
166 }
167 .fp-playlist-external a.is-active .fvp-playlist-thumb:after {opacity:0;position:absolute;content:"";top:0;bottom:0;left:0;right:0;opacity:0;border:0;transition: all ease-in-out 1s;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:98}
168 .fp-playlist-external a h4 {font-family:Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:0;font-weight:400;line-height:1.25}
169 .fp-playlist-external a .now-playing {opacity:0;width:100%;height:100%;transition: all 1s ease-in-out 0s;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow: inset 0 0 250px #000;color:#fff;font-size:16px;font-family:"myriad pro",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;text-shadow:0 0 5px #333;z-index:99;-webkit-animation:blending 3s ease-in-out 1s alternate infinite;-moz-animation:blending 3s ease-in-out 1s alternate infinite;animation:blending 3s ease-in-out 1s alternate infinite}
170 .fp-playlist-external a .now-playing span {background-color:transparent;display:block;margin:0 auto;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%)}
171 .fp-playlist-external.fv-playlist-design-2017 a.is-active h4,.fp-playlist-external a.is-active:hover .now-playing {display:none;}
172 .fp-playlist-external.fv-playlist-design-2017 a.is-active:hover h4 {display:block}
173
174 .fp-playlist-horizontal {text-align:center;display:block;margin-left:auto;margin-right:auto;margin-bottom: 24px;clear:both;font-size:0}
175 .fp-playlist-horizontal:before,.fp-playlist-horizontal:after {content:"";display:table}
176 .fp-playlist-horizontal:after {clear:both}
177 .fp-playlist-horizontal a,.entry-content .fp-playlist-horizontal a,.flowplayer.is-fv-narrow + .fp-playlist-horizontal a {width: 33.333333333%;display:inline-block;vertical-align:top;margin:0;padding:0;background-color:#fff;border:1px solid #fff;text-align:center;font-size:13px;line-height:1.2;position:relative}
178 .fp-playlist-horizontal a:hover,.entry-content .fp-playlist-horizontal a:hover {border:1px solid #fff}
179 .fp-playlist-horizontal a:nth-child(3n+1) {clear:both}
180 .fp-playlist-external a .fvp-playlist-thumb {display:block;position:relative;width:100%;height:auto;margin:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;padding-top:56%;border:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
181 .fp-playlist-horizontal a:nth-child(3n+1) .fvp-playlist-thumb:before {display:none}
182 .fp-playlist-external a h4 {opacity:0;position:absolute;top:0%;bottom:0;left:0;right:0;width:100%;margin:0 auto;padding:5px 10px;text-align:center;transition:all 0.3s ease-in-out 0.1s;font-size:13px;color:#fff;background-color:rgba(0, 0, 0, 0.75)}
183 .fp-playlist-external a h4 span {position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%);border:0;padding:5px 10px}
184 .fp-playlist-external a:hover h4,.fp-playlist-external a.fvp-video-thumb-no-splash h4,#dashboard-widgets .flowplayer-wrapper a:hover h4,.fp-playlist-external a.is-active:hover h4, .fp-playlist-external a:hover .dur {opacity:1;color:#fff}
185 .fp-playlist-horizontal a.is-active {-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
186 .is-touch + .fp-playlist-horizontal a h4 {opacity:1;background-color:transparent;text-shadow:0 0 12px #000;top:20%;bottom:20%;font-family:"myriad pro",Helvetica,Arial,sans-serif !important}
187 .is-touch + .fp-playlist-horizontal.is-audio a h4 {text-shadow:none}
188 .is-touch + .fp-playlist-horizontal a h4 span {background-color:rgba(0,0,0,.3)}
189 .is-touch + .fp-playlist-horizontal.is-audio a h4 span {background-color:transparent}
190 .fp-playlist-horizontal.is-wide a,.entry-content .fp-playlist-horizontal.is-wide a {width: 20%}
191 .fp-playlist-horizontal.is-wide a:nth-child(3n+1) .fvp-playlist-thumb:before {display: block}
192 .fp-playlist-horizontal.is-wide a:nth-child(5n+1) .fvp-playlist-thumb:before {display: none}
193 .fp-playlist-horizontal.is-wide a:nth-child(3n+1) {clear:none}
194 .fp-playlist-horizontal.is-wide a:nth-child(5n+1) {clear:both}
195
196 .fv-playlist-slider-wrapper { overflow-x: auto; margin-bottom: 24px;-webkit-overflow-scrolling: touch;display:block}
197 .fv-playlist-slider-wrapper .fp-playlist-horizontal { margin-bottom: 8px; width: 2500px;text-align:left }
198 .fv-playlist-slider-wrapper .fp-playlist-horizontal a, .fv-playlist-slider-wrapper .fp-playlist-horizontal.is-wide a { width: 200px }
199
200 .fp-playlist-vertical {text-align:left;overflow-x:hidden;max-width:100%;background-color:#fff}
201 .fp-playlist-vertical-player {float:left!important;max-width:calc( 100% - 156px)!important}
202 .fp-playlist-vertical-wrapper {margin-bottom:24px;overflow:hidden;display:block}
203 .fp-playlist-vertical-wrapper:before,.fp-playlist-vertical-wrapper:after,.fp-playlist-text-wrapper:before,.fp-playlist-text-wrapper:after {content:"";display:table}
204 .fp-playlist-vertical-wrapper:after,.fp-playlist-text-wrapper:after {clear:both}
205 .fp-playlist-vertical.fp-playlist-only-captions a h4 span {line-height:1}
206 .fp-playlist-vertical a .fvp-playlist-thumb {display:block;position:relative;width:100%;height:auto;margin:0 0 1px;padding-top:55%;border:0;background-color:#fff;background-size:cover;background-position:center center;background-repeat:no-repeat}
207 .fp-playlist-vertical a h4 {margin:0;font-size:13px;color:#000}
208 .fp-playlist-vertical-wrapper .flowplayer {width:75%;float:left}
209 .fp-playlist-vertical-wrapper .fp-playlist-vertical {width:25%;margin-bottom:0;padding:0 2px}
210 .fp-playlist-vertical-wrapper .fp-playlist-vertical a {display:block;margin-bottom:2px}
211 .css-videos .fp-playlist-vertical-wrapper video, .fp-playlist-vertical-wrapper video {min-height:0 !important;height:100% !important}
212 .fp-playlist-external.fp-playlist-vertical a:hover .now-playing {opacity:0}
213 .fp-playlist-only-captions.fp-playlist-vertical a h4 {position:relative;top:auto;background-color:transparent;opacity:1;text-shadow:none}
214 .fp-playlist-only-captions.fp-playlist-vertical a,.fp-playlist-only-captions.fp-playlist-vertical a:hover h4 {color:#000}
215
216 /* Playlist 2014 - classic */
217 .fv-playlist-design-2014.fp-playlist-external a h4 {opacity:1;position:relative;margin-bottom:7px;padding:0 10px 4px;color:#000;background-color:transparent;text-shadow:none}
218 .fv-playlist-design-2014.fp-playlist-external a h4 span {background-color:transparent;position:relative;transform:none;top:auto;padding:0}
219 .fv-playlist-design-2014.fp-playlist-external a:hover h4,.fv-playlist-design-2014.fp-playlist-external a.fvp-video-thumb-no-splash h4,#dashboard-widgets .flowplayer-wrapper .fv-playlist-design-2014 a:hover h4 {color:inherit}
220
221 /* Playlist 2017 - text only */
222 .fp-playlist-text.fp-playlist-external a h4,.visible-captions.fp-playlist-external a h4 {background-color:transparent;opacity:1}
223 .visible-captions.fp-playlist-external a h4 span {color: #fff;background-color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0.5)}
224 .fp-playlist-text.fp-playlist-external a:hover .fvp-playlist-thumb {background-color:#666}
225 .fp-playlist-text.fp-playlist-vertical a {margin-bottom:12px;}
226 .fp-playlist-text.fp-playlist-external a.is-active .fvp-playlist-thumb:after {background-color:transparent}
227 .fp-playlist-text-wrapper .fp-playlist-only-captions a .now-playing {display:none}
228 .fp-playlist-only-captions.fp-playlist-vertical a {display:block;}
229 .fp-playlist-text-wrapper.is-fv-narrow .flowplayer,.fp-playlist-text-wrapper.is-fv-narrow .fp-playlist-text,.fp-playlist-text-wrapper.is-fv-narrow .fp-playlist-only-captions,.fp-playlist-vertical-wrapper.is-fv-narrow .flowplayer,.fp-playlist-vertical-wrapper.is-fv-narrow .fp-playlist-vertical {width:100%;float:none;margin-bottom:0}
230 .fp-playlist-vertical-wrapper.is-fv-narrow .fp-playlist-vertical a {width:49%;float:left;margin:0.75% 0.5%}
231 .fp-playlist-text-wrapper.is-fv-narrow .fp-playlist-only-captions a {width:100%;float:none;display:block}
232 .fp-playlist-external.fp-playlist-vertical.fp-playlist-only-captions a h4, .entry-content .fp-playlist-external.fp-playlist-vertical.fp-playlist-only-captions a h4 { text-align: left; padding:2px 8px }
233 .fp-playlist-external.fp-playlist-vertical.fp-playlist-only-captions a h4 span { position:relative;top:auto;left:auto;right:auto;-webkit-transform:none;transform:none;padding:0 }
234 .fp-playlist-only-captions.fp-playlist-external .dur { opacity:1;color:#999;position:relative;right:auto;top:auto;text-shadow:none;margin-left:6px; }
235 .fp-playlist-only-captions.fp-playlist-external a:hover .dur { color:#999; }
236
237 /* Polaroid Playlist */
238
239 .fp-playlist-external.fp-playlist-polaroid a,
240 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
241 width: 47%;
242 display: inline-block;
243 vertical-align: top;
244 margin: 0 1% 2%;
245 padding: 0;
246 font-size: 16px;
247 line-height: 1.2;
248 position: relative;
249 background: ghostwhite;
250 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
251 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
252 box-shadow: 0 0 5px rgba(0,0,0,0.2);
253 border: 10px solid ghostwhite;
254 padding-bottom: 40px;
255 }
256 .fp-playlist-external.fp-playlist-polaroid a:hover,
257 .entry-content .fp-playlist-external.fp-playlist-polaroid a:hover {
258 background-color: #f4f4f4;
259 border: 10px solid #f4f4f4;
260 }
261 .fp-playlist-external.fp-playlist-polaroid a:before {
262 content: '';
263 position: absolute;
264 top: 10px;
265 bottom: 8px;
266 left: 10px;
267 right: 0px;
268 display: block;
269 -webkit-box-shadow: 0 15px 10px #777;
270 -moz-box-shadow: 0 15px 10px #777;
271 box-shadow: 0 15px 10px #777;
272 -webkit-transform: rotate(2deg);
273 -moz-transform: rotate(2deg);
274 -o-transform: rotate(2deg);
275 -ms-transform: rotate(2deg);
276 transform: rotate(2deg);
277 z-index: -1;
278 }
279 .fp-playlist-external.fp-playlist-polaroid .fvp-playlist-thumb-img {
280 height: 0;
281 overflow: hidden;
282 padding-top: 90%;
283 position: relative;
284 z-index: 3;
285 }
286 .fp-playlist-external.fp-playlist-polaroid a h4 {
287 position: absolute;
288 top: 0;
289 bottom: 2px;
290 left: 0;
291 right: 0;
292 width: 100%;
293 margin: 0 auto;
294 padding: 0;
295 text-align: left;
296 font-size: 14px;
297 font-weight: 400;
298 font-family: Courier, Courier New;
299 line-height: 1.2;
300 background-color: transparent;
301 color: #000;
302 opacity: 1;
303 z-index: 9;
304 }
305 .fp-playlist-external.fp-playlist-polaroid a h4 span {
306 background-color: transparent;
307 color: #000;
308 top: auto;
309 bottom: 0;
310 padding: 0;
311 -webkit-transform: none;
312 -moz-transform: none;
313 transform: none;
314 }
315 .fp-playlist-external.fp-playlist-polaroid .dur {
316 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
317 font-weight: 700;
318 }
319 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
320 clear: both;
321 }
322
323 /* Playlist Duration */
324 .fp-playlist-external .dur { font-style:normal;font-size:13px;position:absolute;top:6px;right:6px;color:#fff;line-height:1;text-shadow:0 0 3px #333;opacity:0;-webkit-transition:all 0.3s ease-in-out 0.1s;-moz-transition:all 0.3s ease-in-out 0.1s;transition:all 0.3s ease-in-out 0.1s }
325
326 /* Vertical Season Style */
327 .fvp-progress-wrap {
328 position: absolute;
329 height: .5em;
330 bottom: .5em;
331 left: .5em;
332 right: .5em;
333 opacity: .5;
334 border-radius: 1em;
335 }
336 .fvp-progress {
337 height: 100%;
338 position: absolute;
339 left: 0;
340 }
341
342 .fvp-playlist-item-info {
343 float: right;
344 text-align: left;
345 width: 65%;
346 }
347 .fp-playlist-season a:after {
348 clear: both;
349 content: "";
350 display: table;
351 }
352 .fp-playlist-season a .fvp-playlist-thumb {
353 width: 33%;
354 height: 200px;
355 padding-top: 0;
356 }
357 .fp-playlist-season a h4 {
358 opacity: 100;
359 position: static;
360 }
361 .fp-playlist-season a h4 span {
362 position: static;
363 }
364 .fp-playlist-season .dur {
365 opacity: 100;
366 position: static;
367 color: inherit;
368 text-shadow: none;
369 }
370
371 .flowplayer.has-playlist-season, .flowplayer.has-playlist-season.skin-custom,
372 .flowplayer.has-playlist-polaroid, .flowplayer.has-playlist-polaroid.skin-custom {
373 display: none;
374 }
375 .flowplayer.has-playlist-season.is-fullscreen, .flowplayer.has-playlist-polaroid.is-fullscreen {
376 display: block;
377 }
378
379 /* Editing Movies and Shows */
380
381 .fp-playlist-external.fp-playlist-season .fp-playlist-external a {
382 clear: both;
383 display: block;
384 margin: 0 0 2em;
385 max-width: 600px;
386 }
387 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info {
388 float: right;
389 font-weight: 300;
390 font-family: inherit;
391 margin: 0 0 .5em;
392 width: 48%;
393 }
394 .fp-playlist-external.fp-playlist-season .fvp-playlist-thumb-img {
395 float: left;
396 width: 48%;
397 position: relative;
398 margin: 0 2% 0 0;
399 padding-top: 28%;
400 margin-bottom: 30px;
401 }
402 .fp-playlist-external.fp-playlist-season .fvp-playlist-thumb-img img {
403 display: block;
404 }
405 .fp-playlist-external.fp-playlist-season .fp-playlist-external a h4 {
406 background: none;
407 text-align: left;
408 padding: 0;
409 font-size: 18px;
410 font-size: 1.125rem;
411 font-weight: 700;
412 margin-bottom: .5em;
413 }
414 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info p:last-child {
415 margin-bottom: .5em;
416 }
417 .fp-playlist-external.fp-playlist-season .fp-playlist-season .dur {
418 color: #aaa;
419 font-weight: 300;
420 }
421 .fp-playlist-external.fp-playlist-season .fp-playlist-external a h4 {
422 background-color: transparent;
423 color: #000;
424 width: auto;
425 text-align: left;
426 }
427 .fp-playlist-external.fp-playlist-season .fvp-progress-wrap {
428 background-color: #999;
429 background-color: rgba(255,255,255,0.5);
430 -webkit-box-shadow: 0 0 3px #000;
431 -moz-box-shadow: 0 0 3px #000;
432 box-shadow: 0 0 3px #000;
433 }
434 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info h4 {
435 text-align: left;
436 font-size: 1em;
437 padding: 0;
438 color: inherit;
439 font-weight: bold;
440 background: transparent;
441 transition: inherit;
442 }
443 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info p {
444 color: inherit;
445 margin-bottom: 0;
446 }
447 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info .dur {
448 color: inherit;
449 font-size: 0.65em;
450 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
451 transition: inherit;
452 }
453 .fp-playlist-external.fv-playlist-design-2017 a.is-active h4 {
454 display: block;
455 text-decoration: underline;
456 }
457 .fp-playlist-external.fp-playlist-season a:hover h4,
458 .fp-playlist-external.fp-playlist-season a.fvp-video-thumb-no-splash h4,
459 .fp-playlist-external.fp-playlist-season a.is-active:hover h4,
460 .fp-playlist-external.fp-playlist-season a:hover .dur {
461 color: inherit;
462 }
463 .fp-playlist-external.fp-playlist-season a .now-playing {
464 display: none;
465 }
466
467 /* Audio player playlist */
468 .fp-playlist-external.is-audio a .now-playing { display:none; }
469 .fp-playlist-external.is-audio { counter-reset: fv-playlist-counter;background-color:#f0f0f0;border-radius:0 0 10px 10px;border-top:1px solid #fff }
470 .flowplayer.is-audio + .visible-captions.fp-playlist-external a h4 span { color:inherit;background-color:transparent; }
471 .fp-playlist-external.is-audio .dur { color:#666;opacity:1;text-shadow:none;position:static;float:right;}
472 .is-audio + .fp-playlist-horizontal {margin-left:0;margin-right:0}
473 .is-audio + .fp-playlist-horizontal a .fvp-playlist-thumb,.entry-content .is-audio + .fp-playlist-horizontal a .fvp-playlist-thumb,.flowplayer.is-audio .fp-player + a { display:none;bottom:0;background-image:none !important }
474 .fp-playlist-external.is-audio.fp-playlist-horizontal a,.entry-content .fp-playlist-external.is-audio.fp-playlist-horizontal a,.flowplayer.is-fv-narrow .fp-playlist-external.is-audio.fp-playlist-horizontal a { counter-increment:fv-playlist-counter;width:100%;display:block;text-align:left;line-height:1.15;margin:0;padding:6px 12px;border:0;color:#666;clear:both;min-height:26px }
475 .fp-playlist-external.is-audio a:nth-child(odd),.entry-content .fp-playlist-external.is-audio a:nth-child(odd) {background-color: #f8f8f8;}
476 .fp-playlist-external.is-audio a h4,.entry-content .fp-playlist-external.is-audio a h4 { display: block;opacity:1;position:relative;text-align:left;font-size:13px;padding:0;clear:none;left:auto;width:auto;background-color:transparent;color:inherit }
477 .fp-playlist-external.is-audio a h4 span,.entry-content .fp-playlist-external.is-audio a h4 span { position:relative;top:auto;padding:0;transform:none }
478 .fp-playlist-external.is-audio a h4:before,.entry-content .fp-playlist-external.is-audio a h4:before { content: counter(fv-playlist-counter, decimal-leading-zero) ". ";float:left;min-width:26px;color:#adadad;font-weight:400 }
479
480 .fp-playlist-external.is-audio a.is-active,.fp-playlist-external.is-audio a.is-active h4,.fp-playlist-external.is-audio a.is-active h4:before {color:#bb0000}
481
482 .fp-playlist-external.is-audio .fvp-playlist-thumb-img {
483 padding-top: 0;
484 }
485
486 /* WIP: Playlist 2022 */
487 .fp-playlist-version-one,
488 .fp-playlist-version-two {
489 max-width: 100% !important;
490 position: relative;
491 display: flex;
492 }
493
494 .fv-playlist-draggable {
495 display: grid;
496 --fp-playlist-items-gap: 20px;
497 grid-auto-flow: column;
498 grid-auto-columns: calc( ( 100% - ( var(--fp-playlist-items-per-row) - 1 ) * var(--fp-playlist-items-gap) ) / var(--fp-playlist-items-per-row) );
499 column-gap: var(--fp-playlist-items-gap);
500 overflow: auto hidden;
501 user-select: none;
502 width: 100%;
503 }
504
505 .fp-playlist-version-one .fv-playlist-draggable::-webkit-scrollbar {
506 width: 0 !important;
507 }
508
509 .fp-playlist-version-one .fv-playlist-draggable {
510 scrollbar-width: none;
511 }
512 .fp-playlist-version-two .fv-playlist-draggable {
513 --fp-playlist-items-gap: 4px;
514 touch-action: pan-x;
515 scrollbar-color: #12784a #2222;
516 scrollbar-width: thin;
517 cursor: pointer;
518 }
519
520 @media (hover: hover) and (pointer: fine) {
521 .fp-playlist-version-two .fv-playlist-draggable {
522 cursor: auto;
523 }
524 }
525
526 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar {
527 height: 30px;
528 background: linear-gradient(to bottom, transparent 18px, rgb(34 34 34 / 13%) 18px 22px, transparent 22px);
529 }
530
531 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar-thumb {
532 background: linear-gradient(to bottom, transparent 18px, #12784a 18px 22px, transparent 22px);
533 }
534
535 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar-thumb:horizontal:hover {
536 background: linear-gradient(to bottom, transparent 17px, #12784a 17px 23px, transparent 23px);
537 }
538
539 .fp-playlist-version-two .fv-playlist-draggable > a:hover .fvp-playlist-thumb-img > img {
540 transform: scale(1.05);
541 }
542
543 .fp-playlist-version-two .fvp-playlist-thumb-img > img {
544 transition: all 0.6s;
545 }
546
547 .fp-playlist-version-two .fv-playlist-draggable > a > * {
548 transition: transform 0.6s ease;
549 border-radius: 20px;
550 }
551
552 .fv-playlist-slider-controls {
553 width: 100%;
554 display: flex;
555 justify-content: space-between;
556 position: absolute;
557 -webkit-tap-highlight-color: #0000;
558 transition: all 0.3s;
559 pointer-events: none;
560 top: 33%;
561 }
562
563 .fp-playlist-version-two .fv-playlist-slider-controls {
564 opacity: 0;
565 }
566
567 .fv-playlist-left-arrow,
568 .fv-playlist-right-arrow {
569 align-items: center;
570 appearance: button;
571 color: #000;
572 border-radius: 50%;
573 border: none;
574 display: flex;
575 width: 50px;
576 justify-content: center;
577 height: 50px;
578 padding: 12px;
579 transition: all .3s;
580 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='m5.5 0 8 7.5-8 7.5-2-2 5.9-5.5L3.6 2z'/%3E%3C/svg%3E") no-repeat center/15px #fff;
581 pointer-events: auto;
582 }
583
584 .fv-playlist-draggable.leftmost + .fv-playlist-slider-controls .fv-playlist-left-arrow,
585 .fv-playlist-draggable.rightmost + .fv-playlist-slider-controls .fv-playlist-right-arrow {
586 opacity: 0;
587 }
588
589 .fp-playlist-version-two:hover .fv-playlist-slider-controls {
590 opacity: 1;
591 }
592
593 .fp-playlist-version-two:hover .fv-playlist-left-arrow {
594 transform: scale(-1) translateX(-30px);
595 }
596
597 .fv-playlist-left-arrow {
598 transform: scale(-1);
599 }
600
601 .fp-playlist-version-two:hover .fv-playlist-right-arrow {
602 transform: translateX(-30px);
603 }
604
605 .fp-playlist-version-one.fp-playlist-external a h4,
606 .fp-playlist-version-two.fp-playlist-external a h4 {
607 position: relative;
608 opacity: 1;
609 margin-top: 10px;
610 background: none;
611 color: inherit;
612 text-align: left;
613 padding: 0;
614 line-height: 1.4;
615 transition: inherit;
616 }
617
618 .fp-playlist-version-one.fp-playlist-external a h4 span,
619 .fp-playlist-version-two.fp-playlist-external a h4 span {
620 position: static;
621 padding: 0;
622 font-size: 16px;
623 font-weight: 700;
624 text-transform: uppercase;
625 display: block;
626 transform: none;
627 }
628
629 .fp-playlist-version-one.fp-playlist-external .dur,
630 .fp-playlist-version-one.fp-playlist-external a:hover .dur,
631 .fp-playlist-version-two.fp-playlist-external .dur,
632 .fp-playlist-version-two.fp-playlist-external a:hover .dur,
633 .fp-playlist-version-one.fp-playlist-external a:hover h4,
634 .fp-playlist-version-two.fp-playlist-external a:hover h4 {
635 color: inherit;
636 transition: inherit;
637 }
638
639 .fp-playlist-version-one.fp-playlist-external .dur,
640 .fp-playlist-version-two.fp-playlist-external .dur {
641 position: static;
642 opacity: 1;
643 text-shadow: none;
644 font-size: 14px;
645 }
646
647 @media only screen and (max-width: 47.9375em) {
648 .fp-playlist-horizontal {margin-left:-1px;margin-right:-1px}
649 .fp-playlist-horizontal a,.entry-content .fp-playlist-horizontal a, .flowplayer.is-fv-narrow + .fp-playlist-horizontal a {width: 50%}
650 .fp-playlist-horizontal a:nth-child(3n+1) {clear:none}
651 .fp-playlist-horizontal a:nth-child(2n+1) {clear:both}
652 .fv-playlist-slider-wrapper .fp-playlist-horizontal a,.entry-content .fv-playlist-slider-wrapper .fp-playlist-horizontal a, .flowplayer.is-fv-narrow + .fv-playlist-slider-wrapper .fp-playlist-horizontal a {width: 200px}
653 }
654
655 @media (max-width: 39.9375em){
656 .fp-playlist-vertical-wrapper .fp-playlist-vertical {padding:0}
657 .fp-playlist-horizontal a h4, .fp-playlist-external a h4 {font-size:12px}
658 .fp-playlist-vertical-wrapper .fp-playlist-vertical a,.fp-playlist-vertical a {width:49.5%;float:left;margin: .75% 0 0 1%}
659 .fp-playlist-only-captions.fp-playlist-vertical a {width:100%;float:none;margin:8px 0}
660 .fp-playlist-vertical a:nth-child(2n+1) {clear:both;margin-left:0}
661 }
662
663 @media only screen and (max-width: 29.9375em) {
664 .fp-playlist-external a h4 {font-size:10px}
665 }
666
667 @media only screen and (max-width: 22.44em) {
668 .fp-playlist-vertical-wrapper.is-fv-narrow .fp-playlist-vertical a {width:100%;float:none;margin:.75% .5%}
669 }
670
671 @media screen and (min-width: 800px) {
672 .fp-playlist-external.fp-playlist-polaroid a,
673 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
674 width: 30.333333333333%;
675 }
676 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
677 clear: none;
678 }
679 .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) {
680 clear: both;
681 }
682 }
683
684 @media screen and (min-width: 1020px) {
685 .fp-playlist-external.fp-playlist-polaroid a,
686 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
687 width: 22%;
688 }
689 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
690 clear: none;
691 }
692 .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) {
693 clear: none;
694 }
695 .fp-playlist-external.fp-playlist-polaroid a:nth-child(4n+1) {
696 clear: both;
697 }
698 }
699