PluginProbe
FV Player 8 / 8.0.21
FV Player 8 v8.0.21
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 / shortcode-editor.css

shortcode-editor.css in FV Player 8 8.0.21, at css/shortcode-editor.css

1,239 lines 33.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* reset elementor overrides */
2 #fv_player_box input, #fv_player_box select, #fv_player_box textarea { width: initial; border-radius:initial }
3 .partial-underline, .fv_flowplayer_language_add_link { text-decoration: underline; color: #0073aa; }
4 .fvp_item_video-filename, .wp-list-table a { color: #0073aa; }
5
6 #fv_player_boxLoadedContent{ background-color:white; }
7 #fv-player-shortcode-editor { background-color: white; }
8 .fv-wp-flowplayer-notice { background-color: #FFFFE0; border-color: #E6DB55; margin: 5px 0 15px; padding: 0 0.6em; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px; }
9 .fv-wp-flowplayer-notice.fv-wp-flowplayer-note { background-color: #F8F8F8; border-color: #E0E0E0; }
10 .fv-wp-flowplayer-notice p { font-family: sans-serif; font-size: 12px; margin: 0.5em 0; padding: 2px; }
11 .fv-player-tabs-header {}
12 #fv-flowplayer-playlist table { border-bottom: 1px #eee solid; }
13 #fv-player-shortcode-editor table input[type=text], #fv-flowplayer-playlist table input[type=text].with-button { width: 93%; }
14 #fv-player-shortcode-editor table textarea { width: 93%; }
15 #fv-player-shortcode-editor table input[type=text].half-field { width: 37%; }
16 #fv-player-shortcode-editor .fv-player-tab-video-files table input.with-button, #fv-player-shortcode-editor .fv-player-tab-video-files table textarea.with-button { width: 75%; margin-left: 1px; }
17 #fv-player-shortcode-editor .fv-player-tab-subtitles table input.with-button { width: 70%; }
18 #fv-player-shortcode-editor table input.fv_wp_flowplayer_field_subtitles { width: 82%; }
19 #fv-player-shortcode-editor table input.fv_wp_flowplayer_field_subtitles.with-button { width: 59%; }
20 #fv-player-shortcode-editor table select.fv_wp_flowplayer_field_subtitles_lang { width: 10%;float:left; margin: 1px 2px; height: 27px; padding-left: 5px }
21 #fv-flowplayer-playlist table tr.video-size { display: none; }
22 #fv-flowplayer-playlist table tr#fv_wp_flowplayer_file_info { display: none; }
23 #fv-flowplayer-playlist table .fv_wp_flowplayer_field_rtmp { visibility: hidden; }
24 #fv-flowplayer-playlist table .fv_wp_flowplayer_field_rtmp_wrapper th { visibility: hidden; }
25 #fv-flowplayer-playlist table .hint { display: none; }
26 /*#fv-flowplayer-playlist table .button { display: none; }*/
27 #fv-flowplayer-playlist table:first-child tr.video-size { display: table-row; }
28 #fv-flowplayer-playlist table:first-child .hint { display: inline; }
29 #fv-flowplayer-playlist table:first-child tr#fv_wp_flowplayer_file_info { display: none; }
30 #fv-flowplayer-playlist table:first-child .fv_wp_flowplayer_field_rtmp { visibility: visible; }
31 #fv-flowplayer-playlist table:first-child .fv_wp_flowplayer_field_rtmp_wrapper th { visibility: visible; }
32 /*#fv-flowplayer-playlist table:first-child .button { display: inline-block; }*/
33
34 #fv-player-shortcode-editor .fv-player-tab-video-files table .button { width: 22% }
35 #fv-player-shortcode-editor .fv-p layer-tab-subtitles table .button { width: 26% }
36 #fv-player-shortcode-editor .fv-player-tabs .submit-button-wrapper .button { width: auto; }
37
38 #fv-player-shortcode-editor{ top:0; }
39 #fv-player-shortcode-editor td.field {position: relative;}
40 #fv-player-shortcode-editor .fv-player-shortcode-editor-small-spinner {position: absolute; left: 70%; top: 6px;}
41 #fv-player-shortcode-editor td{ vertical-align: top; position: relative }
42 .fv-player-tab table{ margin-bottom: 10px; }
43 .fv-player-tabs-header .nav-tab-wrapper{ margin:0; }
44 .fv-player-tabs-header .nav-tab-wrapper .nav-tab{ margin-left: 0; margin-right: .5em; }
45 .fv-player-tabs-header .nav-tab-wrapper, .wrap h2.nav-tab-wrapper, h1.nav-tab-wrapper{ border-spacing: 0px; padding-top: 0px;}
46
47
48 .is-visible-dependency {
49 display: block;
50 }
51 .is-hidden-dependency {
52 display: none;
53 }
54
55 .fv_player_actions_end-toggle, #fv-player-shortcode-editor .fv_player_interface_hide, .is-visible-dependency.fv_player_interface_hide, .fv-player-playlist-item-title{ display:none; }
56 #fv_player_boxTitle{ display:none!important; }
57 #fv_player_boxLoadedContent{ margin-top:0; }
58
59 #fv-player-shortcode-editor-left{
60 float: left; width:42%; margin-right: 1%;
61 overflow-x: hidden;
62 }
63 #fv-player-shortcode-editor-right{ float: left; width:57%; }
64
65 .fv-player-tab{position:relative;}
66
67 /*Playlist view*/
68 .is-playlist .fv-player-playlist-item-title{ display:block; }
69
70 .always-hide{display:none!important;}
71 .is-playlist .hide-if-playlist{display:none!important;}
72 .is-singular .hide-if-singular{display:none!important;}
73 .is-playlist-active .hide-if-playlist-active{display:none!important;}
74 .is-singular-active .hide-if-singular-active{display:none!important;}
75
76 .fv-player-tab-playlist tr:not(:hover) .fvp_item_remove{visibility: hidden;}
77 .fv-player-tab-playlist tr:hover .fvp_item_remove{visibility: visible;color: #a00;}
78 .fv-player-tab-playlist a{cursor:pointer;}
79
80 .fv-player-tab-playlist .fv-player-playlist-item{ border-spacing: 0 2px; }
81 .fv-player-tab-playlist tbody td{ cursor:pointer; }
82 .fv-player-tab-playlist .fv-player-playlist-item tbody td:first-child{cursor:n-resize;}
83
84 .fv-player-tab-playlist > table > thead > tr > th:nth-child(1),.fv-player-tab-playlist > table > tbody > tr > td:nth-child(1),
85 .fv-player-tab-playlist > table > thead > tr > th:nth-child(2),.fv-player-tab-playlist > table > tbody > tr > td:nth-child(2){ width:65%; }
86 .fv-player-tab-playlist > table > thead{ display:block; }
87 .fv-player-tab-playlist > table > tbody{ display:block;overflow:auto;max-height:calc(100vh - 270px); }
88 #fv-player-list-thumb-toggle > .active{ font-weight:bold; }
89 #fv-player-list-thumb-toggle > a{ box-shadow:none; }
90 #fv-player-shortcode-editor td > input[type="checkbox"]{margin-top:-4px}
91
92 .fv-player-editor-overlay {
93 display: none;
94 background-color: white;
95 padding: 1em;
96 position:absolute;
97 z-index: 21;
98 text-align: center;
99 top: 61px;
100 right: 0;
101 bottom: 0;
102 left: 0;
103 }
104 #fv_player_box .fv-player-editor-overlay textarea {
105 font-family: Consolas, Monaco, monospace;
106 width: 100%;
107 }
108 #fv-player-editor-loading-overlay {
109 background-image: url(../../../../wp-includes/images/wpspin-2x.gif);
110 background-repeat: no-repeat;
111 background-position: center;
112 }
113 .fv-player-editor-overlay-notice {
114 background: #fff;
115 border-left: 4px solid #fff;
116 box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
117 margin: 5px 15px 2px;
118 padding: 1px 12px;
119 text-align: left;
120 visibility: hidden;
121 }
122 .fv-player-editor-overlay-notice.notice-success {
123 border-left-color: #46b450;
124 }
125 .fv-player-editor-overlay-notice.notice-warning {
126 border-left-color: #ffb900;
127 }
128 .fv-player-editor-overlay-notice.notice-error {
129 border-left-color: #dc3232;
130 }
131
132 /*Preview iframe*/
133 #fv-player-shortcode-editor-preview{ position:relative;text-align: center; }
134 #fv-player-shortcode-editor-preview div.fv-player-shortcode-editor-helper {display:none;}
135 #fv-player-shortcode-editor-preview.preview-loading #fv-player-shortcode-editor-preview-spinner,
136 #fv-player-shortcode-editor-preview.preview-no #fv-player-shortcode-editor-preview-no,
137 #fv-player-shortcode-editor-preview.preview-new-tab #fv-player-shortcode-editor-preview-new-tab{display:block;}
138 #fv-player-shortcode-editor-preview.preview-no #fv-player-shortcode-editor-preview-target,
139 #fv-player-shortcode-editor-preview.preview-new-tab #fv-player-shortcode-editor-preview-target{display:none}
140 #fv-player-shortcode-editor-preview.preview-new-tab {display:none!important}
141 #fv-player-shortcode-editor-preview-spinner, .fv-player-shortcode-editor-small-spinner, .fv-player-se-loading-indictor {background-image: url(../../../../wp-includes/images/wpspin-2x.gif); background-color: white; background-repeat: no-repeat; background-position: center}
142 #fv-player-shortcode-editor-preview-spinner{z-index: 2; height: 100%; width: 100%; position: absolute}
143 .fv-player-shortcode-editor-small-spinner, .fv-player-se-loading-indictor {z-index: 2; background-size: 20px; height: 20px; width: 20px; display: inline-block}
144 .row-actions .fv-player-shortcode-editor-small-spinner { margin-top: -6px; position: relative; top: 6px }
145 .fv-player-playlist-item .fv-player-shortcode-editor-small-spinner {position: absolute; top: 4px; right: 123px;}
146 .fv_player_splash_list_preview .fv-player-shortcode-editor-small-spinner {position: absolute; width: 100%; background-color: transparent}
147 .fvp_item_video-thumbnail img{max-width: 142px;max-height: 80px;aspect-ratio: 16/9;object-fit: cover;width: 100%;}
148 .fvp_item_video-thumbnail.no-img {max-width: 142px;aspect-ratio: 16/9;background: radial-gradient(transparent, transparent, rgba( 128, 128, 128, 0.15) );width: 100%;display: inline-block}
149
150 #fv-player-shortcode-editor-preview-new-tab a {margin-top:256px;}
151
152 #fv-player-shortcode-editor-preview div.notice { display: block }
153
154 .first-item-only {
155 display: none;
156 }
157 .fv-player-playlist-item[data-index="0"] .first-item-only {
158 display: table-row;
159 }
160 .fv-player-playlist-item[data-index="0"] .first-item-only.fv_player_interface_hide {
161 display: none;
162 }
163
164 .fv-player-tabs th { width: 21%; text-align: right; }
165 .fv-player-tabs .fv-player-tab-playlist th { text-align: left; }
166 .fv-player-tabs th[valign=top] label {
167 margin-top: 4px;
168 }
169
170
171 /* moved in from main plugin css */
172 .add_media span.wp-media-buttons-icon {
173 background: url("img/media-button.png") no-repeat scroll left top;
174 display: inline-block;
175 height: 16px;
176 margin: 0 2px;
177 vertical-align: text-top;
178 width: 16px;
179 }
180 #cboxWrapper a {
181 text-decoration: none;
182 }
183 a #add-format, a #add-rtmp {
184 background: #333;
185 border-radius: 2px;
186 color: #fff;
187 display: inline-block;
188 font-size: 16px;
189 font-weight: normal;
190 height: 18px;
191 line-height: 1rem;
192 margin: 0 5px 0 0;
193 text-align: center;
194 width: 18px;
195 padding: 0;
196 text-decoration: none;
197 }
198 #fv-wordpress-flowplayer-popup table {
199 width: 100%;
200 }
201 #fv-wordpress-flowplayer-popup table th {
202 text-align: right;
203 width: 18%;
204 padding: 4px 2px;
205 }
206 #fv-wordpress-flowplayer-popup table td {
207 padding: 4px 2px;
208 }
209
210 #fv-player-shortcode-editor-editor ::placeholder {
211 opacity:.5;
212 }
213
214 .fv-player-save-waiting {
215 position: absolute;
216 bottom: 10px;
217 right: 0;
218 }
219
220 #fv-player-editor-notices {
221 position: relative;
222 }
223 .fv-player-editor-notice {
224 position: absolute;
225 bottom: 10px;
226 left: 0;
227 right: 0;
228 background: #fff;
229 border-left: 4px solid gray;
230 box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
231 margin: 5px 15px 2px;
232 padding: 1px 12px;
233 max-width:40%;
234 }
235 .fv-player-editor-notice_success {
236 border-left: 4px solid #46b450;
237 }
238 .fv-player-editor-notice_error {
239 border-left: 4px solid #bf0000;
240 }
241
242 .fv-player-src-playlist-support-notice {
243 margin: 3px 0;
244 padding: 8px;
245 background: #fff;
246 border-left: 4px solid #bf0000;
247 box-shadow: 0 0 0 2px rgba(0,0,0,.1);
248 display: none;
249 position: absolute;
250 z-index: 2;
251 }
252
253 #fv-player-shortcode-editor h1 {
254 color: #23282d;
255 }
256
257 #fv-player-shortcode-editor .nav-tab {
258 float: left;
259 border: 1px solid #ccc;
260 border-bottom: none;
261 padding: 5px 10px;
262 font-size: 14px;
263 line-height: 1.71428571;
264 font-weight: 600;
265 background: #e5e5e5;
266 color: #555;
267 text-decoration: none;
268 white-space: nowrap;
269 }
270 #fv-player-shortcode-editor .nav-tab-active {
271 background: #fff;
272 border-bottom: 1px solid #fff;
273 }
274 #fv-player-shortcode-editor .nav-tab-wrapper {
275 border-bottom: 1px solid #ccc;
276 margin: 0;
277 padding: 0;
278 line-height: inherit;
279 }
280 #fv-player-shortcode-editor .nav-tab-wrapper:not(.wp-clearfix):after {
281 content: "";
282 display: table;
283 clear: both;
284 }
285
286 #fv-player-shortcode-editor-right label {
287 color: black;
288 font-size: 13px;
289 }
290
291 #fv-player-shortcode-editor input[type="text"],
292 #fv-player-shortcode-editor input[type="number"],
293 #fv-player-shortcode-editor select,
294 #fv-player-shortcode-editor textarea {
295 box-shadow: 0 0 0 transparent;
296 border: 1px solid #918f8f;
297 background-color: #fff;
298 color: #32373c;
299 border-radius: 2px;
300 }
301 #fv-player-shortcode-editor textarea{
302 width:100%;
303 }
304 #fv-player-shortcode-editor input[type="text"],
305 #fv-player-shortcode-editor input[type="number"],
306 #fv-player-shortcode-editor select,
307 .fv_player_editor_url_shortened {
308 font-size: 14px;
309 padding: 0 8px;
310 line-height: 2;
311 min-height: 36px;
312 width:100%;
313 word-break: break-all;
314 }
315 #fv-player-shortcode-editor input::placeholder, #fv-player-shortcode-editor textarea::placeholder {
316 color: unset;
317 }
318 .fv_player_editor_url_shortened {
319 margin: 4px 2px;
320 }
321 .fv_player_editor_url_shortened .dashicons {
322 cursor: pointer;
323 }
324 .fv_player_editor_url_shortened .link-preview span.path,
325 .fv_player_editor_url_shortened .link-preview span.sep {
326 color: #aaa;
327 }
328
329 #fv-player-shortcode-editor .fv-player-playlist-item-title, #fv-player-shortcode-editor .fv-player-playlist-item-title:hover{ margin:0;border:0;background:transparent; }
330
331
332 /* Elementor fixes */
333 body.elementor-editor-active #fv-player-shortcode-editor .button, body.elementor-editor-active #fv-player-shortcode-editor .button-primary {
334 display: inline-block;
335 text-decoration: none;
336 font-size: 13px;
337 line-height: 2.15384615;
338 min-height: 30px;
339 margin: 0;
340 padding: 0 10px;
341 cursor: pointer;
342 border-width: 1px;
343 border-style: solid;
344 -webkit-appearance: none;
345 border-radius: 3px;
346 white-space: nowrap;
347 box-sizing: border-box;
348 color: #2271b1;
349 border-color: #2271b1;
350 background: #f6f7f7;
351 }
352 body.elementor-editor-active #fv-player-shortcode-editor .button-primary {
353 background: #2271b1;
354 border-color: #2271b1;
355 color: #fff;
356 text-decoration: none;
357 text-shadow: none;
358 }
359 body.elementor-editor-active #fv-player-shortcode-editor .button:hover {
360 background: #f0f0f1;
361 border-color: #0a4b78;
362 color: #0a4b78;
363 }
364 body.elementor-editor-active #fv-player-shortcode-editor .button-primary:hover {
365 background: #135e96;
366 border-color: #135e96;
367 color: #fff;
368 }
369
370
371 /*
372 New FV Player Editor modal box styling
373 */
374 #fv-player-editor-modal {
375 position: fixed;
376 top: 30px;
377 left: 30px;
378 right: 30px;
379 bottom: 30px;
380 z-index: 160000;
381 }
382 #fv-player-editor-backdrop {
383 position: fixed;
384 top: 0;
385 left: 0;
386 right: 0;
387 bottom: 0;
388 min-height: 360px;
389 background: #000;
390 opacity: 0.7;
391 z-index: 159900;
392 }
393 body.is-fv-player-editor-modal-open {
394 overflow: hidden;
395 }
396 #fv-player-shortcode-editor {
397 overflow: hidden;
398 position: absolute;
399 top: 0;
400 left: 0;
401 right: 0;
402 bottom: 0;
403 }
404 #fv-player-editor-modal-top {
405 top: 0;
406 left: 200px;
407 right: 0;
408 height: 60px;
409 z-index: 200;
410 border-bottom: 1px solid #e9e9e9;
411 display: flex;
412 align-items: center;
413 justify-content:space-between;
414 }
415 #fv-player-editor-modal-top h1 {
416 padding: 0 16px;
417 font-size: 22px;
418 line-height: 2.27272727;
419 margin: 0;
420 font-weight:600;
421 }
422 #fv-player-editor-modal-top #fv-player-editor-modal-close {
423 margin-right: 20px;
424 border: 0;
425 background-color: transparent;
426 display: block;
427 color: #444;
428 height: 38px;
429 width: 40px;
430 cursor: pointer;
431 text-align: center;
432 background-size: 34px;
433 background-repeat: no-repeat;
434 font-size: 0;
435 border-radius: 100%;
436 background-position: center;
437 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
438
439 }
440 #fv-player-editor-modal-top #fv-player-editor-modal-close:hover {
441 background-color: #efefef;
442 }
443
444 #fv-player-shortcode-editor-preview-new-tab, #fv-player-shortcode-editor-preview-no {
445 background-size: contain;
446 background-position: center;
447 image-rendering: -webkit-optimize-contrast;
448 left: 0;
449 right: 0;
450 top: 0;
451 bottom: 0;
452 margin: auto;
453 }
454 #fv-player-shortcode-editor-preview-new-tab, #fv-player-shortcode-editor-preview-no.upload-support {
455 border: 4px dashed #ddd;
456 }
457 #fv-player-shortcode-editor-preview-no .components-base-control__field {
458 justify-content: center;
459 }
460 #fv-player-shortcode-editor-preview-no input[name=hero-src] {
461 width: 25%;
462 }
463 #fv-player-shortcode-editor-preview-no .fv-player-editor-notice {
464 max-width: 100%;
465 position: static;
466 }
467
468 #fv-player-shortcode-editor-left {
469 float: left;
470 width: 67%;
471 margin-right: 0;
472 height: 100%;
473 position:relative;
474 border-right: 1px solid #e9e9e9;
475 display: flex;
476 justify-content: center;
477 box-sizing: border-box;
478 }
479 #fv-player-shortcode-editor-right {
480 float: left;
481 width: 33%;
482 position: relative;
483 height: calc(100% - 60px);
484 }
485 #fv-player-shortcode-editor-preview {
486 width:75%;
487
488 }
489
490 #fv-player-shortcode-editor.is-intro #fv-player-shortcode-editor-left,
491 #fv-player-shortcode-editor.is-intro #fv-player-shortcode-editor-preview {
492 width: 100%;
493 }
494 #fv-player-shortcode-editor.is-intro #fv-player-shortcode-editor-right {
495 display: none;
496 }
497
498 #fv-player-shortcode-editor .nav-tab {
499 float: left;
500 border: 0;
501 border-bottom: 4px solid #fff !important;
502 color:#000 !important;
503 padding: 4px !important;
504 padding-bottom: 10px !important;
505 margin-right: 20px !important;
506 background: #fff;
507 }
508 #fv-player-shortcode-editor .nav-tab:focus{
509 outline:none;
510 box-shadow: initial;
511 }
512 #fv-player-shortcode-editor .nav-tab-wrapper {
513 border-bottom: 1px solid #e9e9e9;
514 padding: 10px 20px;
515 padding-bottom: 0;
516 }
517
518 #fv-player-shortcode-editor-right .nav-tab-active {
519 background-color: #ffffff !important;
520 border-bottom: 4px solid #007cba !important;
521 }
522
523 #fv-player-editor-modal-bottom {
524 position: absolute;
525 width: 100%;
526 /* display: flex; */
527 justify-content: unset;
528 text-align: center;
529 bottom: 0;
530 border-top: 1px solid #e9e9e9;
531 box-sizing:border-box;
532 }
533 #fv-player-editor-modal-bottom a.button, #fv-player-editor-modal-bottom a.button-primary {
534 margin-top: 20px;
535 margin-bottom: 20px;
536 }
537 #fv-player-shortcode-editor.is-playlist-active #fv-player-editor-modal-bottom {
538 border: 0;
539 }
540
541 /*
542 New FV Player Editor inputs styling
543 */
544 #fv-player-shortcode-editor .fv_player_editor-panel__body {
545 border: none;
546 border-top: 1px solid #e0e0e0;
547 padding: 16px;
548 }
549 #fv-player-shortcode-editor .fv_player_editor-panel__body.fv-player-editor-legacy {
550 border-top: none;
551 }
552 #fv-player-shortcode-editor .fv-player-tab .fv_player_editor-panel__body:first-of-type {
553 border-top: 0;
554 }
555
556 #fv-player-shortcode-editor .components-base-control {
557 margin-bottom: 24px;
558 }
559 .fv-player-editor-field-half {
560 /* TODO: How can this work with 2px? Without it the two .fv-player-editor-field-half won't appear on the same line */
561 width: calc( 50% - 2px );
562 display: inline-block;
563 }
564 #fv-player-shortcode-editor .fv_player_editor-panel__body>.components-base-control:not(:last-of-type) {
565
566 }
567
568 #fv-player-shortcode-editor .components-base-control:last-of-type {
569 margin-bottom: 0;
570 }
571
572
573 #fv-player-shortcode-editor .components-base-control__field {
574 display: flex;
575 margin-bottom: 12px;
576 line-height: normal;
577 align-items: center;
578 flex-wrap: wrap;
579 gap: 10px;
580 margin-top:5px;
581 position: relative;
582 }
583 #fv-player-shortcode-editor .components-form-toggle {
584 margin-right: 12px;
585 position: relative;
586 }
587
588
589
590 #fv-player-shortcode-editor .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked {
591 background: none;
592 }
593 #fv-player-shortcode-editor .components-form-toggle input.components-form-toggle__input[type=checkbox] {
594 position: absolute;
595 top: 0;
596 left: 0;
597 width: 100%;
598 height: 100%;
599 opacity: 0;
600 margin: 0;
601 padding: 0;
602 z-index: 1;
603 border: none;
604 }
605 #fv-player-shortcode-editor .components-form-toggle input.components-form-toggle__input[type=checkbox]:before {
606 content: "";
607 }
608
609 #fv-player-shortcode-editor input[type=checkbox], #fv-player-shortcode-editor input[type=radio] {
610 border: 1px solid #8c8f94;
611 border-radius: 4px;
612 box-sizing: border-box;
613 background: #fff;
614 color: #50575e;
615 clear: none;
616 cursor: pointer;
617 display: inline-block;
618 line-height: 0;
619 height: 1rem;
620 margin: -.25rem .25rem 0 0;
621 outline: 0;
622 padding: 0!important;
623 text-align: center;
624 vertical-align: middle;
625 width: 1rem;
626 min-width: 1rem;
627 -webkit-appearance: none;
628 box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
629 transition: .05s border-color ease-in-out;
630 }
631 #fv-player-shortcode-editor input[type=checkbox]:checked::before, #fv-player-shortcode-editor input[type=radio]:checked::before {
632 float: left;
633 display: inline-block;
634 vertical-align: middle;
635 width: 1rem;
636 speak: never;
637 -webkit-font-smoothing: antialiased;
638 -moz-osx-font-smoothing: grayscale;
639 }
640 #fv-player-shortcode-editor input[type=checkbox]:checked::before {
641 content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E);
642 margin: -.1875rem 0 0 -.25rem;
643 height: 1.3125rem;
644 width: 1.3125rem;
645 }
646
647 #fv-player-shortcode-editor .components-form-toggle.is-checked .components-form-toggle__track {
648 background-color: #007cba;
649 border: 9px solid transparent;
650 }
651 #fv-player-shortcode-editor .components-form-toggle.is-checked.is-default .components-form-toggle__track {
652 background-color: gray;
653 border: 9px solid transparent;
654 }
655
656 #fv-player-shortcode-editor .components-form-toggle .components-form-toggle__track {
657 content: "";
658 display: inline-block;
659 box-sizing: border-box;
660 vertical-align: top;
661 background-color: #fff;
662 border: 1px solid #1e1e1e;
663 width: 36px;
664 height: 18px;
665 border-radius: 9px;
666 transition: background .2s ease;
667 }
668 #fv-player-shortcode-editor .components-form-toggle.is-checked .components-form-toggle__thumb {
669 background-color: #fff;
670 border-width: 0;
671 transform: translateX(18px);
672 }
673
674 #fv-player-shortcode-editor .components-form-toggle .components-form-toggle__thumb {
675 display: block;
676 position: absolute;
677 box-sizing: border-box;
678 top: 3px;
679 left: 3px;
680 width: 12px;
681 height: 12px;
682 border-radius: 50%;
683 transition: transform .1s ease;
684 background-color: #1e1e1e;
685 border: 5px solid #1e1e1e;
686 }
687
688 /* Tabs */
689 .fv-player-tabs {
690 height: calc(100% - 123px);
691 }
692 .fv-player-tab {
693 overflow-y: auto;
694 height: 100%;
695 }
696 /* Direct fields */
697 /* lightbox */
698 div#fv-player-editor-field-children-lightbox {
699 display: grid;
700 grid-template-columns: 48% 48%;
701 -ms-grid-columns: 48% 48%;
702 justify-content: space-between;
703 gap: 4%;
704 }
705 div#fv-player-editor-field-children-lightbox .components-base-control {
706 margin-bottom: 0;
707 }
708 /* autoplay */
709 div#fv-player-editor-field-children-autoplay .components-base-control__field {
710 background: #f9f9f9;
711 padding: 10px;
712 border-radius: 5px;
713 }
714 /* alignment */
715 div#fv-player-editor-field-children-align {
716 display: grid;
717 grid-template-columns: 48% 48%;
718 -ms-grid-columns: 48% 48%;
719 gap: 4%;
720 }
721 #fv-player-shortcode-editor .components-flex.components-select-control {
722 width: 100%;
723 }
724
725 .field-with-language {
726 display: grid;
727 width: 100%;
728 grid-template-columns: 36% 60%;
729 gap: 0;
730 justify-content: space-between;
731 }
732
733 @media only screen and (max-width: 1660px) {
734 .fv-player-editor-playlist-item .fvp_item_video-thumbnail {
735 max-width: 100px;
736 }
737 }
738
739 @media only screen and (max-width: 1400px) {
740 #fv-player-shortcode-editor-left {
741 float: left;
742 width: 60%;
743 }
744 #fv-player-shortcode-editor-right {
745 float: left;
746 width: calc(40% - 1px);
747 }
748 }
749 @media only screen and (max-width: 1160px) {
750 #fv-player-shortcode-editor-left {
751 width: 100%;
752 height: 265px;
753 }
754 #fv-player-shortcode-editor.is-intro #fv-player-shortcode-editor-left {
755 height: 100%;
756 }
757 #fv-player-shortcode-editor-right {
758
759 width: calc(100% - 1px);
760 height: calc(100% - 325px);
761 }
762 #fv-player-shortcode-editor .nav-tab-wrapper{
763 display: flex;
764 justify-content: center;
765 }
766 #fv-player-shortcode-editor-preview {
767 width: 390px;
768 }
769 #fv-player-shortcode-editor-preview-no {
770 padding: 20px 0;
771 }
772
773 .fv-player-editor-playlist-item .configure-video,
774 .fv-player-editor-playlist-item .fvp_item_remove,
775 .fv-player-editor-playlist-item .fv-player-editor-playlist-move-up,
776 .fv-player-editor-playlist-item .fv-player-editor-playlist-move-down {
777 display: inherit;
778 visibility: inherit;
779 }
780
781 .fv-player-editor-playlist-item .fvp_item_video-thumbnail {
782 max-width: auto;
783 }
784 }
785 @media only screen and (max-width: 782px) {
786 #fv-player-editor-modal-bottom .button, #fv-player-editor-modal-bottom .button-primary {
787 padding: 0 14px;
788 line-height: 2;
789 font-size: 14px;
790 vertical-align: middle;
791 min-height: 29px;
792 margin-top: 10px;
793 margin-bottom: 10px;
794 }
795 .field-with-language {
796 grid-template-columns: 48% 48%;
797 }
798
799 .fv-player-editor-playlist-item .fvp_item_video-thumbnail {
800 max-width: 60px;
801 }
802 }
803
804 @media only screen and (max-width: 560px) {
805 #fv-player-shortcode-editor-preview {
806 width: 95%;
807 max-width: 390px;
808 }
809 #fv-player-editor-modal {
810 position: fixed;
811 top: 10px;
812 left: 10px;
813 right: 10px;
814 bottom: 10px;
815 z-index: 160000;
816 }
817 #fv-player-editor-modal-top {
818 height: 36px;
819 }
820 #fv-player-editor-modal-bottom .button, #fv-player-editor-modal-bottom .button-primary {
821 padding: 0px 4px;
822 line-height: 22px;
823 font-size: 12px;
824 vertical-align: middle;
825 min-height: unset;
826 height: 24px;
827 margin-top: 6px;
828 margin-bottom: 6px;
829 letter-spacing: -0.03em;
830 }
831 #fv-player-editor-modal-top #fv-player-editor-modal-close {
832 margin-right: 5px;
833 height: 32px;
834 width: 32px;
835 background-size: 24px;
836 }
837 #fv-player-shortcode-editor .nav-tab-wrapper {
838
839 padding: 0px 10px;
840 padding-bottom: 0;
841 }
842 #fv-player-shortcode-editor .nav-tab {
843 margin-top: 0;
844 margin-right: 15px !important;
845 }
846 #fv-player-shortcode-editor-right {
847
848 height: calc(100% - 302px);
849 }
850 .fv-player-tabs {
851 height: calc(100% - 84px);
852 }
853 }
854
855 /*gutenberg extras*/
856 #fv-player-shortcode-editor .components-button.is-secondary {
857 box-shadow: inset 0 0 0 1px #007cba;
858 outline: 1px solid transparent;
859 white-space: nowrap;
860 color: #007cba;
861 background: #f6f7f7;
862
863 }
864
865 #fv-player-shortcode-editor .components-button.is-secondary,
866 #fv-player-shortcode-editor .components-button.is-tertiary {
867 outline: 1px solid transparent;
868 }
869 #fv-player-shortcode-editor .components-button.is-tertiary {
870 white-space: nowrap;
871 color: #007cba;
872 background: transparent;
873 padding: 6px;
874 }
875 #fv-player-shortcode-editor .components-button.is-secondary:hover:not(:disabled),
876 #fv-player-shortcode-editor .components-button.is-tertiary:hover:not(:disabled) {
877 color: #006ba1;
878 box-shadow: inset 0 0 0 1px #006ba1;
879 background: #f0f0f1;
880 }
881
882 #fv-player-shortcode-editor .components-select-control__input {
883
884 margin: 1px;
885 outline: 0;
886 width: 100%;
887 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
888 }
889
890 #fv-player-shortcode-editor .components-form-token-field__help {
891 font-size: 12px;
892 font-style: normal;
893 color: #585757;
894 }
895
896 #fv-player-shortcode-editor .fv_player_editor-panel__body-toggle.components-button .components-panel__arrow {
897 position: absolute;
898 right: 16px;
899 top: 50%;
900 transform: translateY(-50%) rotate(180deg);
901 color: #1e1e1e;
902 fill: currentColor;
903 transition: 0.1s color ease-in-out;
904 }
905
906 #fv-player-shortcode-editor .fv_player_editor-panel__body > .fv_player_editor-panel__body-title {
907 display: block;
908 padding: 0;
909 font-size: inherit;
910 margin-top: 0;
911 margin-bottom: 0;
912 transition: 0.1s background ease-in-out;
913 }
914
915 #fv-player-shortcode-editor .fv_player_editor-panel__body > .fv_player_editor-panel__body-title {
916 margin: -16px;
917 margin-bottom: 5px;
918 }
919
920 #fv-player-shortcode-editor .components-button {
921 display: inline-flex;
922 text-decoration: none;
923 font-weight: normal;
924 font-size: 13px;
925 margin: 0;
926 border: 0;
927 cursor: pointer;
928 -webkit-appearance: none;
929 background: none;
930 transition: box-shadow 0.1s linear;
931 align-items: center;
932 box-sizing: border-box;
933 padding: 6px 12px;
934 border-radius: 2px;
935 color: #1e1e1e;
936 }
937
938 #fv-player-shortcode-editor .fv_player_editor-panel__body-toggle.components-button {
939 position: relative;
940 padding: 16px 48px 16px 16px;
941 outline: none;
942 width: 100%;
943 font-weight: 500;
944 text-align: left;
945 color: #1e1e1e;
946 border: none;
947 box-shadow: none;
948 transition: 0.1s background ease-in-out;
949 height: auto;
950 }
951
952
953 /* Playlist */
954
955 #fv-player-shortcode-editor #fv_wp_flowplayer_field_player_name {
956 width: 65%;
957 margin: 0;
958 position: absolute;
959 margin-top: -48px;
960 }
961
962 #fv-player-shortcode-editor table.widefat {
963 border: 0;
964 box-shadow: none;
965 }
966 a.fvp_item_video-filename {
967 margin-bottom: 5px;
968 }
969 #fv-player-shortcode-editor.is-singular-active h2.fv-player-playlist-item-title.nav-tab {
970 margin-top: 10px !important;
971
972 margin-left: 17px !important;
973 border-bottom: 0 !important;
974 }
975 #fv-player-shortcode-editor table.widefat tbody tr,#fv-player-shortcode-editor table.widefat thead tr {
976 width: 100%;
977 display: table;
978 }
979
980 #fv-player-shortcode-editor .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
981 position: relative;
982 clear: both;
983 width: 65% !important;
984 }
985 #fv-player-shortcode-editor .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before{
986 content:none;
987 }
988 @media only screen and (min-width:560px) and (max-width: 1160px) {
989 #fv-player-shortcode-editor.is-playlist-active #fv_wp_flowplayer_field_player_name {
990 width: 30%;
991 left: 0;
992 right: 0;
993 margin: auto;
994 position: absolute;
995 margin-top: -448px;
996 }
997 #fv-player-shortcode-editor.is-singular-active h2.fv-player-playlist-item-title.nav-tab {
998 position: absolute;
999 }
1000 #fv-player-shortcode-editor.is-playlist-active #fv-player-shortcode-editor-left {
1001 width: 100%;
1002 height: 400px;
1003 }
1004 #fv-player-shortcode-editor.is-playlist-active #fv-player-shortcode-editor-right {
1005 width: calc(100% - 1px);
1006 height: calc(100% - 457px);
1007 }
1008 }
1009 @media only screen and (max-width: 560px) {
1010 #fv-player-shortcode-editor.is-playlist-active #fv_wp_flowplayer_field_player_name{
1011 display:none !important;
1012 }
1013 #fv-player-shortcode-editor.is-singular-active h2.fv-player-playlist-item-title.nav-tab {
1014 margin-top: 0 !important;
1015 }
1016 }
1017
1018 .fv-player-editor-playlist-move-handle {
1019 line-height: 6px;
1020 width: 16px;
1021 height: 24px;
1022 letter-spacing: -2px;
1023 cursor: move;
1024 font-weight: 600;
1025 color: #121212;
1026 display: flex;
1027 font-family: monospace;
1028 font-size: 1.25em;
1029 overflow: hidden;
1030 }
1031
1032 .fv-player-editor-playlist-move-handle::after {
1033 content: ".. .. ..";
1034 }
1035
1036 .fv-player-editor-playlist-item {
1037 display: flex;
1038 align-items: center;
1039 margin-bottom: 6px;
1040 position: relative;
1041 padding: 8px;
1042 min-height: 80px;
1043 box-shadow: rgb(0 0 0 / 7%) 0 0 4px, rgb(0 0 0 / 2%) 0 10px 20px;
1044 }
1045
1046 .fvp_item_video-filename {
1047 font-size: 16px;
1048 color: #121212;
1049 font-weight: 500;
1050 overflow: hidden;
1051 display: -webkit-box;
1052 -webkit-box-orient: vertical;
1053 -webkit-line-clamp: 2;
1054 }
1055
1056 .fvp_item_video-thumbnail {
1057 margin-right: 10px;
1058 line-height: 0;
1059 flex-shrink: 0;
1060 }
1061
1062 #fv-player-shortcode-editor .ui-sortable {
1063 padding: 10px;
1064 }
1065
1066 .fv-player-editor-playlist-item:hover .configure-video,
1067 .fv-player-editor-playlist-item:hover .fvp_item_remove,
1068 .fv-player-editor-playlist-item:hover .fv-player-editor-playlist-move-up,
1069 .fv-player-editor-playlist-item:hover .fv-player-editor-playlist-move-down {
1070 display: inherit;
1071 visibility: inherit;
1072 }
1073
1074 .fv-player-editor-playlist-move-up,
1075 .fv-player-editor-playlist-move-down {
1076 font-size: 20px;
1077 color: #b4b9be;
1078 font-weight: 400;
1079 cursor: pointer;
1080 align-items: center;
1081 justify-content: center;
1082 visibility: hidden;
1083 }
1084
1085 .fv-player-editor-playlist-move {
1086 display: flex;
1087 flex-direction: column;
1088 align-items: center;
1089 margin-right: 10px;
1090 height: 80px;
1091 justify-content: space-between;
1092 }
1093
1094 .fvp_item_video-duration {
1095 margin-left: auto;
1096 font-size: 16px;
1097 font-weight: 500;
1098 margin-right: 10px;
1099 white-space: nowrap;
1100 }
1101
1102 .configure-video {
1103 color: #757575;
1104 text-decoration: none;
1105 display: none;
1106 position: absolute;
1107 bottom: 8px;
1108 font-size: 9px;
1109 text-transform: uppercase;
1110 }
1111
1112 .fvp_item_remove {
1113 color: #b4b9be;
1114 text-decoration: none;
1115 visibility: hidden;
1116 }
1117
1118 .fv-player-editor-playlist-item:first-of-type .fv-player-editor-playlist-move-up,
1119 .fv-player-editor-playlist-item:last-of-type .fv-player-editor-playlist-move-down {
1120 visibility: hidden;
1121 }
1122
1123 .fvp_item_video-title-wrap {
1124 display: flex;
1125 flex-grow: 1;
1126 align-self: flex-start;
1127 align-items: flex-end;
1128 height: 50px;
1129 margin-right: 10px;
1130 }
1131
1132 .fvp_item_video-edit-input {
1133 margin-right: 10px;
1134 }
1135
1136 .playlist_add {
1137 justify-content: center;
1138 margin-left: 10px;
1139 border-radius: 999px;
1140 font-size: 1.5em;
1141 font-weight: 500;
1142 display: flex !important;
1143 width: 34px;
1144 height: 34px;
1145 align-items: center;
1146 color: #757575;
1147 line-height: 1;
1148 font-family: monospace;
1149 background: #f7f7f7;
1150 text-decoration: none;
1151 }
1152 .playlist_add:hover {
1153 background: #d7d7d7;
1154 }
1155
1156 #playlist-hero {
1157 float: right;
1158 width: calc(100% - 65px);
1159 margin-right: 8px;
1160 }
1161 #playlist-hero .components-base-control__field {
1162 margin-top: 0;
1163 }
1164 #fv-player-shortcode-editor #playlist-hero input {
1165 min-height: 34px;
1166 }
1167 #fv-player-shortcode-editor #playlist-hero button {
1168 width: 100%;
1169 }
1170 #fv-player-shortcode-editor #playlist-hero .fv-player-editor-notice {
1171 max-width: 100%;
1172 position: static;
1173 }
1174
1175 #fv-player-shortcode-editor .ui-sortable-placeholder {
1176 background: radial-gradient(rgb(128 128 128 / 15%), transparent);
1177 visibility: visible !important;
1178 }
1179
1180 .fv-player-editor-field-wrap-video_info {
1181 margin-top: -24px;
1182 }
1183 .fv_wp_flowplayer_field_video_info ul {
1184 list-style: none;
1185 margin: 0;
1186 }
1187 .fv_wp_flowplayer_field_video_info li {
1188 background: #eee;
1189 border-radius: 1em;
1190 float: left;
1191 font-size: 13px;
1192 padding: .2em .6em;
1193 margin: 0 .6em .6em;
1194 }
1195 .fv_wp_flowplayer_field_video_info li.error {
1196 background: #f88;
1197 }
1198
1199 .remove_language {
1200 bottom: 1em;
1201 position: absolute;
1202 right: 1em;
1203 text-decoration: none;
1204 visibility: hidden;
1205 }
1206 .components-base-control__field:hover .remove_language {
1207 visibility: visible;
1208 }
1209
1210 /* Legacy inputs in new editor style */
1211 .fv_player_editor-panel__body label {
1212 display: block;
1213 }
1214 .fv_player_editor-panel__body .alignright {
1215 float: unset;
1216 }
1217
1218 /*
1219 * We use the WP Media Library HTML and CSS, here's what's necessary to make it work
1220 */
1221 #fv-player-editor-copy_player-overlay {
1222 padding: 0;
1223 text-align: unset;
1224 }
1225
1226 #fv-player-editor-copy_player-overlay.media-frame .attachments-browser {
1227 height: auto;
1228 position: absolute;
1229 }
1230 #fv-player-editor-copy_player-overlay .media-frame-content {
1231 top: -1px;
1232 }
1233 #fv-player-editor-copy_player-overlay .attachment-details .setting input {
1234 width: 65%;
1235 }
1236 #fv-player-editor-copy_player-overlay .posts-list ul ul {
1237 margin: .5em 1em;
1238 }
1239