PluginProbe
FV Player 8 / 8.1
FV Player 8 v8.1
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 8.1, at css/playlists.css

697 lines 28.7 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 position: absolute;
155 top: 0;
156 left: 0;
157 width: 100%;
158 height: 100%;
159 object-fit: cover;
160 border: 0;
161 }
162 .fvp-playlist-thumb-img.no-image {
163 background: radial-gradient(transparent, transparent, rgba( 128, 128, 128, 0.15) )
164 }
165 .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}
166 .fp-playlist-external a h4 {font-family:Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:0;font-weight:400;line-height:1.25}
167 .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}
168 .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%)}
169 .fp-playlist-external.fv-playlist-design-2017 a.is-active h4,.fp-playlist-external a.is-active:hover .now-playing {display:none;}
170 .fp-playlist-external.fv-playlist-design-2017 a.is-active:hover h4 {display:block}
171
172 .fp-playlist-horizontal {text-align:center;display:block;margin-left:auto;margin-right:auto;margin-bottom: 24px;clear:both;font-size:0}
173 .fp-playlist-horizontal:before,.fp-playlist-horizontal:after {content:"";display:table}
174 .fp-playlist-horizontal:after {clear:both}
175 .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}
176 .fp-playlist-horizontal a:hover,.entry-content .fp-playlist-horizontal a:hover {border:1px solid #fff}
177 .fp-playlist-horizontal a:nth-child(3n+1) {clear:both}
178 .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}
179 .fp-playlist-horizontal a:nth-child(3n+1) .fvp-playlist-thumb:before {display:none}
180 .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)}
181 .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}
182 .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}
183 .fp-playlist-horizontal a.is-active {-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
184 .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}
185 .is-touch + .fp-playlist-horizontal.is-audio a h4 {text-shadow:none}
186 .is-touch + .fp-playlist-horizontal a h4 span {background-color:rgba(0,0,0,.3)}
187 .is-touch + .fp-playlist-horizontal.is-audio a h4 span {background-color:transparent}
188 .fp-playlist-horizontal.is-wide a,.entry-content .fp-playlist-horizontal.is-wide a {width: 20%}
189 .fp-playlist-horizontal.is-wide a:nth-child(3n+1) .fvp-playlist-thumb:before {display: block}
190 .fp-playlist-horizontal.is-wide a:nth-child(5n+1) .fvp-playlist-thumb:before {display: none}
191 .fp-playlist-horizontal.is-wide a:nth-child(3n+1) {clear:none}
192 .fp-playlist-horizontal.is-wide a:nth-child(5n+1) {clear:both}
193
194 .fv-playlist-slider-wrapper { overflow-x: auto; margin-bottom: 24px;-webkit-overflow-scrolling: touch;display:block}
195 .fv-playlist-slider-wrapper .fp-playlist-horizontal { margin-bottom: 8px; width: 2500px;text-align:left }
196 .fv-playlist-slider-wrapper .fp-playlist-horizontal a, .fv-playlist-slider-wrapper .fp-playlist-horizontal.is-wide a { width: 200px }
197
198 .fp-playlist-vertical {text-align:left;overflow-x:hidden;max-width:100%;background-color:#fff}
199 .fp-playlist-vertical-player {float:left!important;max-width:calc( 100% - 156px)!important}
200 .fp-playlist-vertical-wrapper {margin-bottom:24px;overflow:hidden;display:block}
201 .fp-playlist-vertical-wrapper:before,.fp-playlist-vertical-wrapper:after,.fp-playlist-text-wrapper:before,.fp-playlist-text-wrapper:after {content:"";display:table}
202 .fp-playlist-vertical-wrapper:after,.fp-playlist-text-wrapper:after {clear:both}
203 .fp-playlist-vertical.fp-playlist-only-captions a h4 span {line-height:1}
204 .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}
205 .fp-playlist-vertical a h4 {margin:0;font-size:13px;color:#000}
206 .fp-playlist-vertical-wrapper .flowplayer {width:75%;float:left}
207 .fp-playlist-vertical-wrapper .fp-playlist-vertical {width:25%;margin-bottom:0;padding:0 2px}
208 .fp-playlist-vertical-wrapper .fp-playlist-vertical a {display:block;margin-bottom:2px}
209 .css-videos .fp-playlist-vertical-wrapper video, .fp-playlist-vertical-wrapper video {min-height:0 !important;height:100% !important}
210 .fp-playlist-external.fp-playlist-vertical a:hover .now-playing {opacity:0}
211 .fp-playlist-only-captions.fp-playlist-vertical a h4 {position:relative;top:auto;background-color:transparent;opacity:1;text-shadow:none}
212 .fp-playlist-only-captions.fp-playlist-vertical a,.fp-playlist-only-captions.fp-playlist-vertical a:hover h4 {color:#000}
213
214 /* Playlist 2014 - classic */
215 .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}
216 .fv-playlist-design-2014.fp-playlist-external a h4 span {background-color:transparent;position:relative;transform:none;top:auto;padding:0}
217 .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}
218
219 /* Playlist 2017 - text only */
220 .fp-playlist-text.fp-playlist-external a h4,.visible-captions.fp-playlist-external a h4 {background-color:transparent;opacity:1}
221 .visible-captions.fp-playlist-external a h4 span {color: #fff;background-color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0.5)}
222 .fp-playlist-text.fp-playlist-external a:hover .fvp-playlist-thumb {background-color:#666}
223 .fp-playlist-text.fp-playlist-vertical a {margin-bottom:12px;}
224 .fp-playlist-text.fp-playlist-external a.is-active .fvp-playlist-thumb:after {background-color:transparent}
225 .fp-playlist-text-wrapper .fp-playlist-only-captions a .now-playing {display:none}
226 .fp-playlist-only-captions.fp-playlist-vertical a {display:block;}
227 .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}
228 .fp-playlist-vertical-wrapper.is-fv-narrow .fp-playlist-vertical a {width:49%;float:left;margin:0.75% 0.5%}
229 .fp-playlist-text-wrapper.is-fv-narrow .fp-playlist-only-captions a {width:100%;float:none;display:block}
230 .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 }
231 .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 }
232 .fp-playlist-only-captions.fp-playlist-external .dur { opacity:1;color:#999;position:relative;right:auto;top:auto;text-shadow:none;margin-left:6px; }
233 .fp-playlist-only-captions.fp-playlist-external a:hover .dur { color:#999; }
234
235 /* Polaroid Playlist */
236
237 .fp-playlist-external.fp-playlist-polaroid a,
238 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
239 width: 47%;
240 display: inline-block;
241 vertical-align: top;
242 margin: 0 1% 2%;
243 padding: 0;
244 font-size: 16px;
245 line-height: 1.2;
246 position: relative;
247 background: ghostwhite;
248 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
249 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
250 box-shadow: 0 0 5px rgba(0,0,0,0.2);
251 border: 10px solid ghostwhite;
252 padding-bottom: 40px;
253 }
254 .fp-playlist-external.fp-playlist-polaroid a:hover,
255 .entry-content .fp-playlist-external.fp-playlist-polaroid a:hover {
256 background-color: #f4f4f4;
257 border: 10px solid #f4f4f4;
258 }
259 .fp-playlist-external.fp-playlist-polaroid a:before {
260 content: '';
261 position: absolute;
262 top: 10px;
263 bottom: 8px;
264 left: 10px;
265 right: 0px;
266 display: block;
267 -webkit-box-shadow: 0 15px 10px #777;
268 -moz-box-shadow: 0 15px 10px #777;
269 box-shadow: 0 15px 10px #777;
270 -webkit-transform: rotate(2deg);
271 -moz-transform: rotate(2deg);
272 -o-transform: rotate(2deg);
273 -ms-transform: rotate(2deg);
274 transform: rotate(2deg);
275 z-index: -1;
276 }
277 .fp-playlist-external.fp-playlist-polaroid .fvp-playlist-thumb-img {
278 height: 0;
279 overflow: hidden;
280 padding-top: 90%;
281 position: relative;
282 z-index: 3;
283 }
284 .fp-playlist-external.fp-playlist-polaroid a h4 {
285 position: absolute;
286 top: 0;
287 bottom: 2px;
288 left: 0;
289 right: 0;
290 width: 100%;
291 margin: 0 auto;
292 padding: 0;
293 text-align: left;
294 font-size: 14px;
295 font-weight: 400;
296 font-family: Courier, Courier New;
297 line-height: 1.2;
298 background-color: transparent;
299 color: #000;
300 opacity: 1;
301 z-index: 9;
302 }
303 .fp-playlist-external.fp-playlist-polaroid a h4 span {
304 background-color: transparent;
305 color: #000;
306 top: auto;
307 bottom: 0;
308 padding: 0;
309 -webkit-transform: none;
310 -moz-transform: none;
311 transform: none;
312 }
313 .fp-playlist-external.fp-playlist-polaroid .dur {
314 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
315 font-weight: 700;
316 }
317 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
318 clear: both;
319 }
320
321 /* Playlist Duration */
322 .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 }
323
324 /* Vertical Season Style */
325 .fvp-progress-wrap {
326 position: absolute;
327 height: .5em;
328 bottom: .5em;
329 left: .5em;
330 right: .5em;
331 opacity: .5;
332 border-radius: 1em;
333 }
334 .fvp-progress {
335 height: 100%;
336 position: absolute;
337 left: 0;
338 }
339
340 .fvp-playlist-item-info {
341 float: right;
342 text-align: left;
343 width: 65%;
344 }
345 .fp-playlist-season a:after {
346 clear: both;
347 content: "";
348 display: table;
349 }
350 .fp-playlist-season a .fvp-playlist-thumb {
351 width: 33%;
352 height: 200px;
353 padding-top: 0;
354 }
355 .fp-playlist-season a h4 {
356 opacity: 100;
357 position: static;
358 }
359 .fp-playlist-season a h4 span {
360 position: static;
361 }
362 .fp-playlist-season .dur {
363 opacity: 100;
364 position: static;
365 color: inherit;
366 text-shadow: none;
367 }
368
369 .flowplayer.has-playlist-season, .flowplayer.has-playlist-season.skin-custom,
370 .flowplayer.has-playlist-polaroid, .flowplayer.has-playlist-polaroid.skin-custom {
371 display: none;
372 }
373 .flowplayer.has-playlist-season.is-fullscreen, .flowplayer.has-playlist-polaroid.is-fullscreen {
374 display: block;
375 }
376
377 /* Editing Movies and Shows */
378
379 .fp-playlist-external.fp-playlist-season .fp-playlist-external a {
380 clear: both;
381 display: block;
382 margin: 0 0 2em;
383 max-width: 600px;
384 }
385 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info {
386 float: right;
387 font-weight: 300;
388 font-family: inherit;
389 margin: 0 0 .5em;
390 width: 48%;
391 }
392 .fp-playlist-external.fp-playlist-season .fvp-playlist-thumb-img {
393 float: left;
394 width: 48%;
395 position: relative;
396 margin: 0 2% 0 0;
397 padding-top: 28%;
398 margin-bottom: 30px;
399 }
400 .fp-playlist-external.fp-playlist-season .fvp-playlist-thumb-img img {
401 display: block;
402 }
403 .fp-playlist-external.fp-playlist-season .fp-playlist-external a h4 {
404 background: none;
405 text-align: left;
406 padding: 0;
407 font-size: 18px;
408 font-size: 1.125rem;
409 font-weight: 700;
410 margin-bottom: .5em;
411 }
412 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info p:last-child {
413 margin-bottom: .5em;
414 }
415 .fp-playlist-external.fp-playlist-season .fp-playlist-season .dur {
416 color: #aaa;
417 font-weight: 300;
418 }
419 .fp-playlist-external.fp-playlist-season .fp-playlist-external a h4 {
420 background-color: transparent;
421 color: #000;
422 width: auto;
423 text-align: left;
424 }
425 .fp-playlist-external.fp-playlist-season .fvp-progress-wrap {
426 background-color: #999;
427 background-color: rgba(255,255,255,0.5);
428 -webkit-box-shadow: 0 0 3px #000;
429 -moz-box-shadow: 0 0 3px #000;
430 box-shadow: 0 0 3px #000;
431 }
432 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info h4 {
433 text-align: left;
434 font-size: 1em;
435 padding: 0;
436 color: inherit;
437 font-weight: bold;
438 background: transparent;
439 transition: inherit;
440 }
441 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info p {
442 color: inherit;
443 margin-bottom: 0;
444 }
445 .fp-playlist-external.fp-playlist-season .fvp-playlist-item-info .dur {
446 color: inherit;
447 font-size: 0.65em;
448 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
449 transition: inherit;
450 }
451 .fp-playlist-external.fv-playlist-design-2017 a.is-active h4 {
452 display: block;
453 text-decoration: underline;
454 }
455 .fp-playlist-external.fp-playlist-season a:hover h4,
456 .fp-playlist-external.fp-playlist-season a.fvp-video-thumb-no-splash h4,
457 .fp-playlist-external.fp-playlist-season a.is-active:hover h4,
458 .fp-playlist-external.fp-playlist-season a:hover .dur {
459 color: inherit;
460 }
461 .fp-playlist-external.fp-playlist-season a .now-playing {
462 display: none;
463 }
464
465 /* Audio player playlist */
466 .fp-playlist-external.is-audio a .now-playing { display:none; }
467 .fp-playlist-external.is-audio { counter-reset: fv-playlist-counter;background-color:#f0f0f0;border-radius:0 0 10px 10px;border-top:1px solid #fff }
468 .flowplayer.is-audio + .visible-captions.fp-playlist-external a h4 span { color:inherit;background-color:transparent; }
469 .fp-playlist-external.is-audio .dur { color:#666;opacity:1;text-shadow:none;position:static;float:right;}
470 .is-audio + .fp-playlist-horizontal {margin-left:0;margin-right:0}
471 .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 }
472 .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 }
473 .fp-playlist-external.is-audio a:nth-child(odd),.entry-content .fp-playlist-external.is-audio a:nth-child(odd) {background-color: #f8f8f8;}
474 .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 }
475 .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 }
476 .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 }
477
478 .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}
479
480 .fp-playlist-external.is-audio .fvp-playlist-thumb-img {
481 padding-top: 0;
482 }
483
484 /* WIP: Playlist 2022 */
485 .fp-playlist-version-one,
486 .fp-playlist-version-two {
487 max-width: 100% !important;
488 position: relative;
489 display: flex;
490 }
491
492 .fv-playlist-draggable {
493 display: grid;
494 --fp-playlist-items-gap: 20px;
495 grid-auto-flow: column;
496 grid-auto-columns: calc( ( 100% - ( var(--fp-playlist-items-per-row) - 1 ) * var(--fp-playlist-items-gap) ) / var(--fp-playlist-items-per-row) );
497 column-gap: var(--fp-playlist-items-gap);
498 overflow: auto hidden;
499 user-select: none;
500 width: 100%;
501 }
502
503 .fp-playlist-version-one .fv-playlist-draggable::-webkit-scrollbar {
504 width: 0 !important;
505 }
506
507 .fp-playlist-version-one .fv-playlist-draggable {
508 scrollbar-width: none;
509 }
510 .fp-playlist-version-two .fv-playlist-draggable {
511 --fp-playlist-items-gap: 4px;
512 touch-action: pan-x;
513 scrollbar-color: #12784a #2222;
514 scrollbar-width: thin;
515 cursor: pointer;
516 }
517
518 @media (hover: hover) and (pointer: fine) {
519 .fp-playlist-version-two .fv-playlist-draggable {
520 cursor: auto;
521 }
522 }
523
524 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar {
525 height: 30px;
526 background: linear-gradient(to bottom, transparent 18px, rgb(34 34 34 / 13%) 18px 22px, transparent 22px);
527 }
528
529 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar-thumb {
530 background: linear-gradient(to bottom, transparent 18px, #12784a 18px 22px, transparent 22px);
531 }
532
533 .fp-playlist-version-two .fv-playlist-draggable::-webkit-scrollbar-thumb:horizontal:hover {
534 background: linear-gradient(to bottom, transparent 17px, #12784a 17px 23px, transparent 23px);
535 }
536
537 .fp-playlist-version-two .fv-playlist-draggable > a:hover .fvp-playlist-thumb-img > img {
538 transform: scale(1.05);
539 }
540
541 .fp-playlist-version-two .fvp-playlist-thumb-img > img {
542 transition: all 0.6s;
543 }
544
545 .fp-playlist-version-two .fv-playlist-draggable > a > * {
546 transition: transform 0.6s ease;
547 border-radius: 20px;
548 }
549
550 .fv-playlist-slider-controls {
551 width: 100%;
552 display: flex;
553 justify-content: space-between;
554 position: absolute;
555 -webkit-tap-highlight-color: #0000;
556 transition: all 0.3s;
557 pointer-events: none;
558 top: 33%;
559 }
560
561 .fp-playlist-version-two .fv-playlist-slider-controls {
562 opacity: 0;
563 }
564
565 .fv-playlist-left-arrow,
566 .fv-playlist-right-arrow {
567 align-items: center;
568 appearance: button;
569 color: #000;
570 border-radius: 50%;
571 border: none;
572 display: flex;
573 width: 50px;
574 justify-content: center;
575 height: 50px;
576 padding: 12px;
577 transition: all .3s;
578 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;
579 pointer-events: auto;
580 }
581
582 .fv-playlist-draggable.leftmost + .fv-playlist-slider-controls .fv-playlist-left-arrow,
583 .fv-playlist-draggable.rightmost + .fv-playlist-slider-controls .fv-playlist-right-arrow {
584 opacity: 0;
585 }
586
587 .fp-playlist-version-two:hover .fv-playlist-slider-controls {
588 opacity: 1;
589 }
590
591 .fp-playlist-version-two:hover .fv-playlist-left-arrow {
592 transform: scale(-1) translateX(-30px);
593 }
594
595 .fv-playlist-left-arrow {
596 transform: scale(-1);
597 }
598
599 .fp-playlist-version-two:hover .fv-playlist-right-arrow {
600 transform: translateX(-30px);
601 }
602
603 .fp-playlist-version-one.fp-playlist-external a h4,
604 .fp-playlist-version-two.fp-playlist-external a h4 {
605 position: relative;
606 opacity: 1;
607 margin-top: 10px;
608 background: none;
609 color: inherit;
610 text-align: left;
611 padding: 0;
612 line-height: 1.4;
613 transition: inherit;
614 }
615
616 .fp-playlist-version-one.fp-playlist-external a h4 span,
617 .fp-playlist-version-two.fp-playlist-external a h4 span {
618 position: static;
619 padding: 0;
620 font-size: 16px;
621 font-weight: 700;
622 text-transform: uppercase;
623 display: block;
624 transform: none;
625 }
626
627 .fp-playlist-version-one.fp-playlist-external .dur,
628 .fp-playlist-version-one.fp-playlist-external a:hover .dur,
629 .fp-playlist-version-two.fp-playlist-external .dur,
630 .fp-playlist-version-two.fp-playlist-external a:hover .dur,
631 .fp-playlist-version-one.fp-playlist-external a:hover h4,
632 .fp-playlist-version-two.fp-playlist-external a:hover h4 {
633 color: inherit;
634 transition: inherit;
635 }
636
637 .fp-playlist-version-one.fp-playlist-external .dur,
638 .fp-playlist-version-two.fp-playlist-external .dur {
639 position: static;
640 opacity: 1;
641 text-shadow: none;
642 font-size: 14px;
643 }
644
645 @media only screen and (max-width: 47.9375em) {
646 .fp-playlist-horizontal {margin-left:-1px;margin-right:-1px}
647 .fp-playlist-horizontal a,.entry-content .fp-playlist-horizontal a, .flowplayer.is-fv-narrow + .fp-playlist-horizontal a {width: 50%}
648 .fp-playlist-horizontal a:nth-child(3n+1) {clear:none}
649 .fp-playlist-horizontal a:nth-child(2n+1) {clear:both}
650 .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}
651 }
652
653 @media (max-width: 39.9375em){
654 .fp-playlist-vertical-wrapper .fp-playlist-vertical {padding:0}
655 .fp-playlist-horizontal a h4, .fp-playlist-external a h4 {font-size:12px}
656 .fp-playlist-vertical-wrapper .fp-playlist-vertical a,.fp-playlist-vertical a {width:49.5%;float:left;margin: .75% 0 0 1%}
657 .fp-playlist-only-captions.fp-playlist-vertical a {width:100%;float:none;margin:8px 0}
658 .fp-playlist-vertical a:nth-child(2n+1) {clear:both;margin-left:0}
659 }
660
661 @media only screen and (max-width: 29.9375em) {
662 .fp-playlist-external a h4 {font-size:10px}
663 }
664
665 @media only screen and (max-width: 22.44em) {
666 .fp-playlist-vertical-wrapper.is-fv-narrow .fp-playlist-vertical a {width:100%;float:none;margin:.75% .5%}
667 }
668
669 @media screen and (min-width: 800px) {
670 .fp-playlist-external.fp-playlist-polaroid a,
671 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
672 width: 30.333333333333%;
673 }
674 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
675 clear: none;
676 }
677 .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) {
678 clear: both;
679 }
680 }
681
682 @media screen and (min-width: 1020px) {
683 .fp-playlist-external.fp-playlist-polaroid a,
684 .entry-content .fp-playlist-external.fp-playlist-polaroid a {
685 width: 22%;
686 }
687 .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) {
688 clear: none;
689 }
690 .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) {
691 clear: none;
692 }
693 .fp-playlist-external.fp-playlist-polaroid a:nth-child(4n+1) {
694 clear: both;
695 }
696 }
697