PluginProbe
PowerPress Podcasting plugin by Blubrry / trunk
PowerPress Podcasting plugin by Blubrry vtrunk
11.17.9 11.17.8 11.17.7 11.17.6 11.17.4 11.17.3 11.17.2 11.17.1 11.17 11.16.11 11.16.10 11.16.9 11.16.8 11.16.7 11.16.6 11.16.5 11.16.4 11.16.3 11.16.2 11.16.1 11.9.13 11.9.14 11.9.15 11.9.16 11.9.17 All 383 releases
powerpress / css / episode-box.css

episode-box.css in PowerPress Podcasting plugin by Blubrry trunk, at css/episode-box.css

1,252 lines 26.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* pp-tooltip container */
2 div[class^="pp-tooltip"] {
3 position: relative;
4 display: inline-block;
5 background-color: #dadada;
6 color: white;
7 padding: 1px 6px 1px 6px;
8 border-radius: 9px;
9 width: 16px;
10 height: 16px;
11 text-align: center;
12 font-family: Roboto, serif;
13 }
14
15 /* pp-tooltip text */
16 div[class^="pp-tooltip"] .text-pp-tooltip {
17 position: absolute;
18 visibility: hidden;
19 min-width: 300px;
20 background-color: #3e3f42;
21 color: #fff;
22 text-align: center;
23 padding: 5px;
24 border-radius: 6px;
25 z-index: 1;
26 font-family: Roboto, sans-serif;
27 top: -100%;
28 }
29
30 .pp-tooltip-left .text-pp-tooltip {
31 right: 1%;
32 margin-right: 120%;
33 }
34
35 .pp-tooltip-right .text-pp-tooltip {
36 margin-left: -5px;
37 border-width: 5px;
38 left: 150%;
39 }
40
41 /* Show the pp-tooltip text when you mouse over the pp-tooltip container */
42 div[class^="pp-tooltip"]:hover .text-pp-tooltip {
43 visibility: visible;
44 }
45
46 /* arrow on pp-tooltip */
47 div[class^="pp-tooltip"] .text-pp-tooltip::after {
48 content: " ";
49 position: absolute;
50 border-width: 5px;
51 border-style: solid;
52 top: 50%;
53 }
54
55 .pp-tooltip-left .text-pp-tooltip::after {
56 border-color: transparent transparent transparent #3e3f42;
57 right: -3%;
58 }
59
60 .pp-tooltip-right .text-pp-tooltip::after {
61 border-color: transparent #3e3f42 transparent transparent;
62 left: -3%;
63 }
64
65 .chapter-builder {
66 background-color: #eee;
67 border-radius: 5px;
68 padding: 25px;
69 margin-top: 25px;
70 }
71
72 /* Style the tab */
73 .pp-tab {
74 font-size: 16px;
75 overflow: hidden;
76 border-bottom: 1px solid #EFEFEF;
77 border-top: 1px solid #EFEFEF;
78 width: 100%;
79 }
80
81 /* Style the buttons that are used to open the tab content */
82 .pp-tab button {
83 background-color: inherit;
84 float: left;
85 border: none;
86 outline: none;
87 cursor: pointer;
88 padding: 3vh 0;
89 margin: 0 3%;
90 transition: 0.3s;
91 width: 10%;
92 }
93
94 /* mobile horizontal scrolling tabs */
95 @media (max-width: 782px) {
96 .pp-tab {
97 display: flex;
98 flex-wrap: nowrap;
99 overflow-x: auto;
100 overflow-y: hidden;
101 -webkit-overflow-scrolling: touch;
102 scrollbar-width: none;
103 -ms-overflow-style: none;
104 }
105 .pp-tab::-webkit-scrollbar {
106 display: none;
107 }
108 .pp-tab button {
109 float: none;
110 flex: 0 0 auto;
111 width: auto;
112 padding: 2vh 3%;
113 white-space: nowrap;
114 }
115 }
116
117 /* Change background color of buttons on hover */
118 .pp-tab button:hover {
119 background-color: #ddd;
120 }
121
122 /* Create an active/current tablink class */
123 .pp-tab button.active {
124 border-bottom: 3px solid #1a6deb;
125 font-weight: bold;
126 }
127
128 .pp-tabcontent {
129 margin: 0 14px 14px 14px;
130 }
131
132 .pp-metamarks-row {
133 margin-top: 3em;
134 margin-left: 1em;
135 position: relative;
136 width: 90%;
137 box-shadow: inset 0 0 0 1px #EAEDF3;
138 border: 1px solid #EAEDF3;
139 border-radius: 4px;
140 }
141
142 .pp-metamark-delete a {
143 margin: 4px 0pt 0pt -2px;
144 cursor: pointer;
145 width: 10px;
146 height: 10px;
147 text-indent: -9999px;
148 overflow: hidden;
149 top: 4px;
150 left: -14px;
151 }
152
153 div[id^="pp-hide-metamark"] {
154 padding: 2em 2em 0 2em;
155 }
156
157 .pp-metamark-preview-pos-, .pp-metamark-delete {
158 display: inline-block;
159 margin: 1em;
160 }
161
162 .pp-metamark-edit, .pp-metamark-preview-type- {
163 margin: 1em 0;
164 display: inline-block;
165 }
166
167 .metamark-top-section {
168 border-bottom: 1px solid #EAEDF3;
169 border-radius: 4px 4px 0 0;
170 box-shadow: inset 0 0 0 1px #EAEDF3;
171 width: 100%;
172 }
173
174 div[class^="metamark-preview-"] {
175 font-weight: bold;
176 }
177
178 .pp-metamark-edit, .pp-metamark-delete {
179 float: right;
180 }
181
182 select[id^="pp-metamark-type-"] {
183 width: 100%;
184 height: 52px;
185 vertical-align: top;
186 }
187
188 input[id^="pp-metamark-pos-"], input[id^="pp-metamark-dur-"], input[id^="pp-metamark-link-"], input[id^="pp-metamark-pos-"]:focus, input[id^="pp-metamark-dur-"]:focus, input[id^="pp-metamark-link-"]:focus {
189 width: 100%;
190 height: 58px;
191 vertical-align: top;
192 }
193
194 select[id^="pp-generate-language-"][class="pp-ep-box-input"], select[id^="pp-generate-language-"][class="pp-ep-box-input"]:focus {
195 width: 20%;
196 margin-top: 1em;
197 }
198
199 select[id^="pp-upload-language-"][class="pp-ep-box-input"], select[id^="pp-upload-language-"][class="pp-ep-box-input"]:focus {
200 width: 20%;
201 margin-top: 1em;
202 }
203
204 select[id^="pp-upload-language-"][class="pp-ep-box-input"] {
205 margin-left: 10px;
206 }
207
208 select[id^="pp-generate-language-"][class="pp-ep-box-input"] {
209 margin-left: 30px;
210 }
211
212 input[id^="powerpress_transcript_url_"][class="pp-ep-box-input"], input[id^="powerpress_transcript_url_"][class="pp-ep-box-input"]:focus {
213 width: 70%;
214 margin-top: 1em;
215 margin-left: 30px;
216 }
217
218 textarea[id^="pp-metamark-val-"][class="pp-ep-box-input"], textarea[id^="pp-metamark-val-"][class="pp-ep-box-input"]:focus {
219 height: 72px;
220 width: 100%;
221 margin: auto;
222 vertical-align: top;
223 resize: none;
224 }
225
226 div[id^="pp-dur-label"] {
227 float: right;
228 width: 30%;
229 }
230
231 div[id^="pp-pos-label"], div[id^="pp-type-label"] {
232 margin-right: 4%;
233 width: 30%;
234 }
235
236 .powerpress-label-container {
237 display: inline-block;
238 margin-top: 2ch;
239 height: 70px;
240 }
241
242 div[id^="select-media-file"] {
243 vertical-align: top;
244 }
245
246 a[id^="pp-change-media-link"], div[id^="save-media"] {
247 cursor: pointer;
248 }
249
250 select[id^="powerpress_category_"] {
251 max-width: 51.6%;
252 width: 100%;
253 height: 56px;
254 }
255
256 div[id^="pp-category-dropdown-"] {
257 margin: 1em 1em 0 1em;
258 }
259
260 .pp-ep-box-input.pp-width, .pp-ep-box-input.pp-width:focus {
261 width: 100%;
262 }
263
264 #powerpress-podcast .inside {
265 margin: 0;
266 padding: 0;
267 }
268
269 div[id^="apple-podcast-opt"] {
270 border-radius: 4px;
271 background-color: #F1F4F9;
272 padding: 3%;
273 width: 90%;
274 margin-bottom: 5vh;
275 }
276
277 div[id^="ep-info-not-apple"] {
278 margin-bottom: 20px;
279 }
280
281 .pp-blue-button {
282 display: inline-block;
283 border-radius: 4px;
284 background-color: #fafafa;
285 color: #263238;
286 border: 1px solid black;
287 font-family: Roboto, sans-serif;
288 font-size: 16px;
289 font-weight: 500;
290 padding: 1ch 2em 1ch 2em;
291 cursor: pointer;
292 text-align: center;
293 }
294
295 .pp-blue-button.pp-action-active {
296 background-color: #0c74d5;
297 color: white;
298 border-color: #0c74d5;
299 }
300
301 .pp-gray-button {
302 background-color: #f5f5f5;
303 box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
304 color: black;
305 display: inline-block;
306 border-radius: 4px;
307 font-family: Roboto, sans-serif;
308 font-size: 14px;
309 font-weight: 600;
310 padding: 0.5ch 1em 0.5ch 1em;
311 margin-right: 1em;
312 cursor: pointer;
313 text-align: center;
314 border: 0;
315 }
316
317 h4[class^="pp-section-title"] {
318 color: #3E3F42;
319 font-family: Roboto, sans-serif;
320 font-size: 16px;
321 font-weight: bold;
322 line-height: 38px;
323 margin-bottom: 0;
324 margin-top: 0;
325 float: left;
326 display: inline-block;
327 }
328
329 .pp-section-title-block {
330 width: 100%;
331 }
332
333 .pp-ep-box-text {
334 font-size: 14px;
335 margin-top: 2ch;
336 margin-bottom: 0;
337 font-family: Roboto, sans-serif;
338 display: block;
339 }
340
341 .pp-ep-box-settings-text {
342 font-size: 12px;
343 letter-spacing: 0.35px;
344 margin-top: 3ch;
345 margin-bottom: 0;
346 display: block;
347 }
348
349 .pp-section-subtitle {
350 color: #5A5C60;
351 font-family: Roboto, sans-serif;
352 font-size: 14px;
353 font-weight: 500;
354 line-height: 16px;
355 }
356
357 /* Style the tab content */
358 .pp-tabcontent {
359 display: none;
360 border-top: none;
361 padding: 40px 40px 14px 40px;
362 }
363
364 .pp-tabcontent.active {
365 display: block;
366 }
367
368 h3[id^="pp-pp-selected-media-head"] {
369 color: #263238;
370 font-family: Roboto, sans-serif;
371 font-size: 20px;
372 font-weight: bold;
373 letter-spacing: -0.06px;
374 line-height: 24px;
375 margin: 0;
376 }
377
378 .pp-ep-box-settings {
379 float: right;
380 }
381
382 .ep-box-settings-icon {
383 cursor: pointer;
384 }
385
386 div[id^="pp-edit-media-button"] {
387 text-align: center;
388 }
389
390 div[id^="a-pp-selected-media"] {
391 padding: 1em 2em 0 2em;
392 }
393
394 div[class="powerpress_remove_container"] {
395 padding: 2ch 2ch;
396 }
397
398 div[class^="metamark-preview-"] {
399 font-weight: bold;
400 }
401
402 div[id^="explicit-switch-base"] {
403 display: flex;
404 padding: 5px;
405 background-color: #e6e6e6;
406 width: 100%;
407 border-radius: 4px;
408 }
409
410 .pp-explicit-option {
411 background-color: #e6e6e6;
412 }
413
414 .explicit-selected {
415 background-color: white;
416 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
417 border-radius: 4px;
418 }
419
420 .pp-explicit-option, .explicit-selected {
421 font-weight: bold;
422 flex: 1;
423 padding-top: 1ch;
424 padding-bottom: 1ch;
425 text-align: center;
426 font-size: 14px;
427 font-family: Roboto, sans-serif;
428 cursor: pointer;
429 }
430
431 div[id^="pp-selected-media-text"] {
432 width: 100%;
433 display: inline-block;
434 }
435
436 .powerpress_podcast_box, #episode-box-container {
437 padding: 10px;
438 }
439
440 div[id^="pp-change-media-file"] {
441 vertical-align: top;
442 }
443
444 div[class^="ep-box-line"] {
445 box-sizing: border-box;
446 display: inline-block;
447 height: 1px;
448 width: 100%;
449 border-top: 1px solid #EFEFEF;
450 }
451
452 div[class="ep-box-line-bold"], div[class="ep-box-line-margin-bold"] {
453 border-top: 2px solid #EFEFEF;
454 width: 92%;
455 }
456
457 div[class="ep-box-line-bold"] {
458 margin-left: 4%;
459 margin-right: 4%;
460 }
461
462 .ep-box-line-margin, .ep-box-line-margin-bold {
463 margin: 17px 0 17px 0;
464 }
465
466 .pp-shortcode-example {
467 box-sizing: border-box;
468 border: 1px solid #E8E8E8;
469 background-color: #F0F0F0;
470 line-height: 36px;
471 padding-left: 2em;
472 padding-right: 2em;
473 }
474
475 .pp-hidden-settings {
476 display: none;
477 }
478
479 div[id^="ep-box-blubrry-connect-"] {
480 background-color: #f1f4f9;
481 margin-top: 1em;
482 width: 98%;
483 padding: 1em 1ch;
484 }
485
486 div[id^="ep-box-blubrry-connected-"] {
487 margin-left: 1em;
488 margin-top: 1em;
489 width: 98%;
490 padding: 1em 1ch;
491 }
492
493 .ep-box-blubrry-icon {
494 display: inline-block;
495 width: 2em;
496 vertical-align: top;
497 margin-left: 1em;
498 margin-top: 1ch;
499 }
500
501 .ep-box-blubrry-info-container {
502 display: inline-block;
503 max-width: calc(100% - 320px);
504 }
505
506 img[id^="pp-image-preview"] {
507 width: 16vh;
508 height: 16vh;
509 border: 3px solid #717171;
510 }
511
512 img[id^="poster-pp-image-preview"] {
513 width: 32vh;
514 height: 18vh;
515 object-fit: contain;
516 border: 3px solid #717171;
517 }
518
519 .powerpress-art-text input[class="pp-ep-box-input"] {
520 display: block;
521 clear: both;
522 margin-top: var(--pp-spacing-sm);
523 font-size: var(--pp-font-size-sm);
524 }
525
526 .powerpress-art-text .thickbox {
527 display: inline-block;
528 margin-top: var(--pp-spacing-lg);
529 }
530
531 .powerpress-art-preview .pp-section-subtitle {
532 font-weight: bold;
533 }
534
535 .powerpress-art-preview p[id*="image-preview-caption"] {
536 margin: var(--pp-spacing-xs);
537 }
538
539 div[class^="pp-tooltip"] .text-pp-tooltip.pp-tooltip-tall {
540 top: -150%;
541 }
542
543 .powerpress-art-text {
544 width: 70%;
545 display: inline-block;
546 vertical-align: top;
547 }
548
549 .powerpress-art-preview {
550 width: 28%;
551 display: inline-block;
552 }
553
554 div[id^="ep-box-filename-container"] {
555 text-overflow: ellipsis;
556 white-space: nowrap;
557 max-width: 85%;
558 overflow: hidden;
559 display: inline-block;
560 }
561
562 p[id^="ep-box-filename"] {
563 color: #4b4c4e;
564 font-family: Roboto, sans-serif;
565 font-size: 14px;
566 letter-spacing: 0.15px;
567 line-height: 56px;
568 margin: 0 5px 0 5px;
569 display: inline;
570 }
571 /*
572 div[id^="pp-warning-messages"] {
573 margin-left: 3em;
574 }
575 */
576 div[id^="pp-connect-account-"], div[id^="pp-cancel-container"] {
577 display: inline-block;
578 }
579
580 div[id^="pp-cancel-container-"] {
581 float: right;
582 margin-right: 2em;
583 }
584
585 div[id^="hidden-media-details-"] {
586 padding: 1em;
587 margin-top: 2em;
588 background-color: #f1f4f9;
589 }
590
591 div[class^="details-"] {
592 display: inline-block;
593 font-family: Roboto, sans-serif;
594 }
595
596 .details-specify {
597 width: 45%;
598 }
599
600 .details-not-specified, .details-auto-detect {
601 width: 25%;
602 }
603
604 div[id^="media-input-"] {
605 margin-top: 1ch;
606 }
607
608 .pp-media-edit-details {
609 color: #2C65DB;
610 font-family: Roboto Medium, sans-serif;
611 font-size: 12px;
612 line-height: 22px;
613 cursor: pointer;
614 border: none;
615 box-shadow: none;
616 background-color: #F1F4F9;
617 text-decoration: none;
618 }
619
620 button.media-details, button.apple-advanced {
621 color: #2C65DB;
622 font-family: Roboto Medium, sans-serif;
623 font-size: 12px;
624 line-height: 22px;
625 cursor: pointer;
626 border: none;
627 box-shadow: none;
628 background-color: #F5F5F5;
629 font-weight: bold;
630 }
631
632 button.media-details {
633 background-color: #ffffff;
634 }
635
636 .media-details-head {
637 color: #3e3f42;
638 font-weight: bold;
639 font-family: Roboto Medium, sans-serif;
640 font-size: 14px;
641 line-height: 22px;
642 margin: 0 1em;
643 }
644
645 input[id^="powerpress_size"], input[id^="powerpress_size"]:focus {
646 width: 50%;
647 text-align: center;
648 height: 28px;
649 }
650
651 input[id^="powerpress_duration_"][class="pp-ep-box-input"], input[id^="powerpress_duration_"][class="pp-ep-box-input"]:focus {
652 width: 48px;
653 text-align: center;
654 height: 34px;
655 }
656
657 div[id^="media-file-details"] {
658 width: 100%;
659 }
660
661 .pp-detail-section {
662 margin: 0 1em 2ch 1em;
663 }
664
665 .details-auto-detect {
666 width: 30%
667 }
668
669 .details-specify {
670 width: 43%;
671 }
672
673 .details-not-specified {
674 width: 25%;
675 }
676
677 .blubrry-connect-info {
678 margin: 0 1ch;
679 }
680
681 h4.blubrry-connect-info {
682 color: #3E3F42;
683 font-family: Roboto, sans-serif;
684 font-size: 16px;
685 font-weight: bold;
686 line-height: 20px;
687 }
688
689 p.blubrry-connect-info {
690 font-size: 14px;
691 margin-bottom: 0;
692 }
693
694 a[id^="ep-box-connect-account"], a[id^="pp-change-media-link"] {
695 text-decoration: none;
696 display: inline-block;
697 width: 35ch;
698 margin-right: 1em;
699 }
700
701 div[id^="ep-box-connect-account-button-"], div[id^="change-media-button"] {
702 border-radius: 4px;
703 border: 1px solid #969696;
704 color: #0c74d5;
705 padding: 1ch 2em 1ch 2em;
706 margin-right: 1em;
707 text-align: center;
708 font-family: Roboto, sans-serif;
709 font-size: 14px;
710 font-weight: 600;
711 }
712
713 a[id^="ep-box-connect-account"], div[id^="ep-box-connect-account-button-"], a[id^="pp-change-media-link"], div[id^="change-media-button"] {
714 float: right;
715 }
716
717 input[class="media-details-radio"] {
718 width: 22px;
719 height: 22px;
720 border: 2px solid #B1B1B1;
721 }
722
723 input[class="media-details-radio"]:checked {
724 border: 2px solid #0c74d5;
725 }
726
727 input[class="media-details-radio"]:checked:before {
728 width: 12px;
729 height: 12px;
730 margin: 3px;
731 background-color: #0c74d5;
732 }
733
734 label[class="ep-box-caption"] {
735 color: var(--pp-color-gray-600);
736 font-family: var(--pp-font-family);
737 font-size: var(--pp-font-size-sm);
738 letter-spacing: 0.4px;
739 font-weight: 300;
740 display: block;
741 margin: var(--pp-spacing-xs) 0 0;
742 }
743
744 label[class^="pp-ep-box-label"] {
745 position: relative;
746 top: 2px;
747 padding: 0 2px 0 2px;
748 bottom: 10px;
749 background: transparent;
750 }
751
752 label[class^="pp-ep-box-label-under"] {
753 position: relative;
754 padding: 0 2px 0 2px;
755 bottom: 10px;
756 left: 10px;
757 top: 0;
758 background: transparent;
759 }
760
761 input[class="pp-ep-box-input"], textarea[class="pp-ep-box-input"], select[class="pp-ep-box-input"], div[class="pp-ep-box-input"] {
762 border-radius: 4px;
763 background-color: white;
764 border: 1px solid #B1B1B1;
765 font-size: 14px;
766 height: 56px;
767 width: 100%;
768 }
769
770 input[class="pp-ep-box-input"]:focus, textarea[class="pp-ep-box-input"]:focus, select[class="pp-ep-box-input"]:focus, div[class="pp-ep-box-input"]:focus {
771 border-radius: 4px;
772 background-color: white;
773 border: 1px solid #B1B1B1;
774 font-size: 14px;
775 height: 56px;
776 width: 100%;
777 }
778
779 textarea[id^="powerpress_summary_"], textarea[id^="powerpress_summary_"]:focus {
780 height: 130px;
781 resize: none;
782 padding: 10px;
783 font-family: Roboto, sans-serif;
784 font-size: 14px;
785 line-height: 22px;
786 width: 100%;
787 }
788
789 textarea[id^="powerpress_embed_"] {
790 resize: none;
791 }
792
793 textarea[id^="powerpress_summary_"]::-webkit-scrollbar {
794 height: 85%;
795 }
796
797 /* Track */
798 textarea[id^="powerpress_summary_"]::-webkit-scrollbar-track {
799 box-shadow: inset 0 0 5px grey;
800 border-radius: 4px;
801 }
802
803 /* Handle */
804 textarea[id^="powerpress_summary_"]::-webkit-scrollbar-thumb {
805 background: white;
806 border-radius: 4px;
807 border: grey 1px solid;
808 }
809
810
811 input[id^="powerpress_url_"], div[id^="powerpress_url_"], input[id^="powerpress_url_"]:focus {
812 width: 100%;
813 border-radius: 4px;
814 box-sizing: border-box;
815 height: 56px;
816 }
817
818 div[id^="powerpress_url_show_"] {
819 width: 100%;
820 background-color: #f1f4f9;
821 font-size: 14px;
822 height: 56px;
823 border-radius: 0;
824 }
825
826 input[id^="powerpress_itunes_image_"], input[id^="powerpress_image_"], input[id^="powerpress_itunes_image_"]:focus, input[id^="powerpress_image_"]:focus {
827 width: 90%;
828 border-radius: 4px;
829 box-sizing: border-box;
830 height: 56px;
831 }
832
833 input[id^="powerpress_feature_"] {
834 border-radius: 2px;
835 border: 2px solid #66788A;
836 height: 18px;
837 width: 18px;
838 }
839
840 /*input[class="ep-box-checkbox"] {
841 box-sizing: border-box;
842 height: 16px;
843 width: 16px;
844 border: 1px solid #D8DCE6;
845 border-radius: 3px;
846 background: linear-gradient(0deg, #F6F7F9 0%, #FFFFFF 100%);
847 box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.05), 0 1px 1px 0 rgba(22,29,37,0.05);
848 margin: 1em 1ch 1em 1ch;
849 }*/
850
851 input.ep-box-checkbox {
852 border: 2px solid #d4d8e0;
853 border-radius: 3px;
854 height: 18px;
855 width: 18px;
856 box-shadow: none;
857 margin-right: 1em;
858 }
859
860 input.ep-box-checkbox:checked {
861 background-color: #2278cf;
862 border-color: #2278cf;
863 }
864
865 input.ep-box-checkbox:checked:disabled {
866 background-color: rgba(0,0,0,0.5);
867 border-color: rgba(0,0,0,0.2);
868 }
869
870 input.ep-box-checkbox:checked::before {
871 content: url('../images/check_white.svg');
872 height: 21px;
873 width: 21px;
874 margin: -3px 0 0 -4px;
875 }
876
877 input.ep-box-checkbox:checked + label.pp-checkbox-label {
878 color: #0c74d5;
879 }
880
881 .pp-section-container {
882 display: block;
883 margin-bottom: 4ch;
884 width: 100%;
885 justify-content: space-between;
886 }
887
888 .pp-tabcontent > .pp-section-container:last-child {
889 margin-bottom: 0;
890 }
891
892 .apple-opt-section-container {
893 display: block;
894 margin-bottom: 2ch;
895 width: 100%;
896 justify-content: space-between;
897 }
898
899 div[id^="apple-feature"] {
900 margin-top: 1vh;
901 }
902
903 div[id^="title-container"] {
904 width: 50%;
905 }
906
907 div[id^="season-container"] {
908 width: 30%;
909 }
910
911 input[id^="powerpress_episode_season"]:disabled {
912 background-color: #f5f5f5;
913 }
914
915 div[id^="pp-explicit-container"] {
916 margin-bottom: 1em;
917 }
918
919 div[id^="apple-title-container"] {
920 width: 55%;
921 margin-right: 3ch;
922 }
923
924 div[id^="episode-no-container"], div[id^="season-container"] {
925 display:inline-block;
926 width:18%;
927 margin-top: 3vh;
928 }
929
930 div[id^="season-container"] {
931 float: right;
932 }
933
934 div[id^="feature-container"] {
935 margin-top: 3vh;
936 width: 70%;
937 }
938
939 div[id^="type-container"] {
940 width: 29.5%;
941 vertical-align: top;
942 margin: 2ch 0 0 0;
943 }
944
945 div[id^="media-input"] {
946 width: 100%;
947 }
948
949 div[id^="edit-media-file-"] {
950 float: right;
951 }
952 div[id^="ep-box-min-blubrry-connect-"] {
953 margin-top: 1ch;
954 }
955
956 /* Responsiveness with buttons, Apple Opt Section, and third option in media details */
957 @media (max-width: 1152px) {
958 .details-not-specified {
959 margin-top: 1em;
960 width: 100%
961 }
962 .details-auto-detect, .details-specify {
963 width: 48%
964 }
965 div[id^="feature-container"] {
966 width: 100%;
967 }
968
969
970 select[id^="pp-upload-language-"][class="pp-ep-box-input"], select[id^="pp-generate-language-"][class="pp-ep-box-input"] {
971 width: 90%;
972 }
973
974 select[id^="pp-upload-language-"][class="pp-ep-box-input"]:focus, select[id^="pp-generate-language-"][class="pp-ep-box-input"]:focus {
975 width: 90%;
976 }
977
978 select[id^="pp-upload-language-"][class="pp-ep-box-input"] {
979 margin-left: 30px;
980 }
981 input[id^="powerpress_transcript_url_"][class="pp-ep-box-input"], input[id^="powerpress_transcript_url_"][class="pp-ep-box-input"]:focus {
982 width: 90%;
983 }
984 }
985
986 /* Responsiveness for second option in media details (all 3 stack), explicit switch, and episode and season no */
987 @media (max-width: 832px) {
988 div[class^="details-"] {
989 width: 100%;
990 margin-top: 1em;
991 }
992 .pp-detail-section {
993 margin: 2ch 1em 2ch 1em;
994 }
995 div[id^="apple-title-container"] {
996 width: 100%;
997 margin-top: 1em;
998 }
999 div[id^="episode-no-container"] {
1000 width: 45%;
1001 }
1002 div[id^="season-container"] {
1003 width: 45%;
1004 }
1005 .pp-tabcontent {
1006 padding: 15px;
1007 }
1008 #wpbody select {
1009 height: 52px;
1010 }
1011 div[id^="pp-type-label"] {
1012 width: 99%;
1013 margin: 1em 0 1em 0;
1014 }
1015 div[id^="pp-pos-label"] {
1016 width: 40%;
1017 margin-left: 0;
1018 }
1019 div[id^="pp-dur-label"] {
1020 width: 40%;
1021 margin-right: 0;
1022 }
1023 .powerpress-art-text, .powerpress-art-preview {
1024 width: 100%;
1025 }
1026 div[id^="type-container"] {
1027 width: 50%;
1028 }
1029 input[type="checkbox"]:checked:before {
1030 font: normal 21px/1 dashicons;
1031 }
1032 .powerpress-art-preview {
1033 text-align: center;
1034 }
1035 input[id^="powerpress_itunes_image_"], input[id^="powerpress_image_"], input[id^="powerpress_itunes_image_"]:focus, input[id^="powerpress_image_"]:focus {
1036 width: 100%;
1037 }
1038 }
1039
1040 /* More responsiveness with buttons */
1041 @media (max-width: 592px) {
1042 div[id^="ep-box-filename-container"] {
1043 max-width: 70%;
1044 }
1045 .pp-blue-button, .pp-gray-button {
1046 display: block;
1047 margin: 1ch 0 0 0;
1048 }
1049 .pp-explicit-option, .explicit-selected {
1050 font-size: 12px;
1051 }
1052 .artwork-button {
1053 padding: 1em 2ch;
1054 }
1055 div[id^="apple-podcast-opt"] {
1056 padding: 6%;
1057 }
1058 div[id^="pp-display-player"], div[id^="pp-player-size"] {
1059 width: 100%;
1060 }
1061 div[id^="type-container"] {
1062 width: 100%;
1063 }
1064 input[id^="powerpress_duration_"][class="pp-ep-box-input"], input[id^="powerpress_duration_"][class="pp-ep-box-input"]:focus {
1065 width: 36px;
1066 padding: 6px;
1067 height: 28px;
1068 }
1069 select[id^="powerpress_category"] option {
1070 width: 100%;
1071 }
1072 }
1073
1074 @media (max-width: 375px) {
1075 .pp-detail-section {
1076 margin: 2ch 1em 2ch 0;
1077 }
1078 .media-details {
1079 margin-left: 0;
1080 }
1081 .pp-explicit-option, .explicit-selected {
1082 width: 31%;
1083 }
1084 div[id^="pp-pos-label"], div[id^="pp-dur-label"] {
1085 width: 100%;
1086 margin: 1em 0 1em 0;
1087 }
1088 .tab {
1089 font-size: 12px;
1090 }
1091 a[id^="show-details-link"], a[id^="hide-details-link"] {
1092 font-size: 12px;
1093 }
1094 input[id^="powerpress_duration_"][class="pp-ep-box-input"], input[id^="powerpress_duration_"][class="pp-ep-box-input"]:focus {
1095 width: 28px;
1096 padding: 2px;
1097 }
1098 }
1099
1100
1101 /* Responsiveness with buttons, Apple Opt Section, and third option in media details */
1102 @media (max-width: 1456px) {
1103 .classic-editor .details-not-specified {
1104 margin-top: 1em;
1105 width: 100%
1106 }
1107 .classic-editor .details-auto-detect, .classic-editor .details-specify {
1108 width: 48%
1109 }
1110 .classic-editor div[id^="feature-container"] {
1111 width: 100%;
1112 }
1113 }
1114
1115 @media (max-width: 1256px) {
1116 .classic-editor div[class^="details-"] {
1117 width: 100%;
1118 margin-top: 1em;
1119 margin-left: 1em;
1120 }
1121 }
1122
1123 /* Responsiveness for second option in media details (all 3 stack), explicit switch, and episode and season no */
1124 @media (max-width: 1132px) {
1125 .classic-editor div[class^="details-"] {
1126 width: 100%;
1127 margin-top: 1em;
1128 }
1129 .classic-editor .pp-detail-section {
1130 margin: 2ch 1em 2ch 1em;
1131 }
1132 .classic-editor div[id^="apple-title-container"] {
1133 width: 100%;
1134 margin-top: 1em;
1135 }
1136 .classic-editor div[id^="episode-no-container"] {
1137 width: 45%;
1138 }
1139 .classic-editor div[id^="season-container"] {
1140 width: 45%;
1141 }
1142 .classic-editor .pp-tabcontent {
1143 padding: 15px;
1144 }
1145 .classic-editor #wpbody select {
1146 height: 52px;
1147 }
1148 .classic-editor div[id^="pp-type-label"] {
1149 width: 99%;
1150 margin: 1em 0 1em 0;
1151 }
1152 .classic-editor div[id^="pp-pos-label"] {
1153 width: 40%;
1154 margin-left: 0;
1155 }
1156 .classic-editor div[id^="pp-dur-label"] {
1157 width: 40%;
1158 margin-right: 0;
1159 }
1160 .classic-editor .powerpress-art-text, .classic-editor .powerpress-art-preview {
1161 width: 100%;
1162 }
1163 .classic-editor div[id^="type-container"] {
1164 width: 50%;
1165 }
1166 .classic-editor input[type="checkbox"]:checked:before {
1167 font: normal 21px/1 dashicons;
1168 }
1169 .classic-editor .powerpress-art-preview {
1170 text-align: center;
1171 }
1172 .classic-editor input[id^="powerpress_itunes_image_"], .classic-editor input[id^="powerpress_image_"], .classic-editor input[id^="powerpress_itunes_image_"]:focus, .classic-editor input[id^="powerpress_image_"]:focus {
1173 width: 100%;
1174 }
1175 }
1176
1177 @media (max-width: 1050px) {
1178 .classic-editor .ep-box-blubrry-info-container {
1179 max-width: calc(100% - 50px);
1180 }
1181 .classic-editor a[id^="ep-box-connect-account-"], .classic-editor a[id^="pp-change-media-link-"] {
1182 float: none;
1183 width: 100%;
1184 }
1185 .classic-editor div[id^="ep-box-connect-account-button-"], .classic-editor div[id^="change-media-button-"] {
1186 float: none;
1187 margin-top: 1em;
1188 }
1189 }
1190
1191 @media (max-width: 640px) {
1192 .ep-box-blubrry-info-container {
1193 max-width: calc(100% - 50px);
1194 }
1195 a[id^="ep-box-connect-account-"], a[id^="pp-change-media-link-"] {
1196 float: none;
1197 width: 100%;
1198 }
1199 div[id^="ep-box-connect-account-button-"] {
1200 float: none;
1201 margin: 1em 0 0 1ch;
1202 }
1203 div[id^="change-media-button-"] {
1204 float: none;
1205 margin-top: 1em;
1206 }
1207 }
1208 /* More responsiveness with buttons */
1209 @media (max-width: 892px) {
1210 .classic-editor .pp-blue-button, .classic-editor .pp-gray-button {
1211 display: block;
1212 }
1213 .classic-editor .pp-explicit-option, .classic-editor .explicit-selected {
1214 font-size: 12px;
1215 }
1216 .classic-editor .artwork-button {
1217 padding: 1em 2ch;
1218 }
1219 .classic-editor div[id^="apple-podcast-opt"] {
1220 padding: 6%;
1221 }
1222 .classic-editor div[id^="pp-display-player"], .classic-editor div[id^="pp-player-size"] {
1223 width: 100%;
1224 }
1225 .classic-editor div[id^="type-container"] {
1226 width: 100%;
1227 }
1228 .classic-editor input[id^="powerpress_duration_"][class="pp-ep-box-input"], .classic-editor input[id^="powerpress_duration_"][class="pp-ep-box-input"]:focus {
1229 width: 36px;
1230 padding: 6px;
1231 height: 28px;
1232 }
1233 .classic-editor select[id^="powerpress_category"] option {
1234 width: 100%;
1235 }
1236 }
1237
1238 .ml-0 {
1239 margin-left: 0 !important;
1240 }
1241 .mr-0 {
1242 margin-right: 0 !important;
1243 }
1244 .pl-0 {
1245 padding-left: 0 !important;
1246 }
1247 .pr-0 {
1248 padding-right: 0 !important;
1249 }
1250 .mt-4 {
1251 margin-top: 20px !important;
1252 }