PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / trunk
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels vtrunk
2.9.1 2.9.0 trunk 1.0.0 1.1.0 1.2.0 1.3.0 1.4.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 2.0.0 2.1.0 2.2.0 2.3.2 2.3.3 2.3.5 2.3.6 2.3.8 2.3.9 2.4.3 All 37 releases
automatic-youtube-gallery / admin / assets / css / admin.css

admin.css in Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels trunk, at admin/assets/css/admin.css

849 lines 18.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*----------------------------------------------------------------------------------------------
2 *
3 * Base
4 *
5 *--------------------------------------------------------------------------------------------*/
6 .ayg .widefat {
7 max-width: 100%;
8 }
9
10 .ayg .spinner {
11 float: none;
12 visibility: visible;
13 margin: 0;
14 }
15
16 .ayg .ayg-no-margin {
17 margin: 0;
18 }
19
20 .ayg .ayg-no-padding {
21 padding: 0;
22 }
23
24 .ayg .ayg-text-error {
25 color: #b31105;
26 }
27
28 .ayg .ayg-text-success {
29 color: #008000;
30 }
31
32 .ayg .ayg-text-info {
33 color: var(--wp-admin-theme-color, #3858e9);
34 }
35
36 .ayg .ayg-button {
37 display: inline-flex;
38 align-items: center;
39 justify-content: center;
40 gap: 0.35em;
41 }
42
43 @media screen and (max-width: 320px) {
44 .ayg .button-hero {
45 width: 100%;
46 }
47 }
48
49 /** Animations: Dots */
50 @keyframes ayg-dots {
51 0%, 20% {
52 content: ".";
53 }
54 40% {
55 content: "..";
56 }
57 60% {
58 content: "...";
59 }
60 90%, 100% {
61 content: "";
62 }
63 }
64
65 .ayg .ayg-animate-dots:before {
66 display: inline-block;
67 animation: ayg-dots 2s linear infinite;
68 width: 1.2em;
69 content: "";
70 }
71
72 /*----------------------------------------------------------------------------------------------
73 *
74 * Accordion
75 *
76 *--------------------------------------------------------------------------------------------*/
77 .ayg details {
78 transition: box-shadow 0.3s ease;
79 outline: 1px solid #ddd;
80 border: 0;
81 border-radius: 3px;
82 background-color: #fff;
83 }
84
85 .ayg details:hover {
86 box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
87 }
88
89 .ayg details[open] {
90 background-color: #fff;
91 }
92
93 .ayg details > summary {
94 display: flex;
95 align-items: center;
96 gap: 0.25em;
97 outline: none;
98 cursor: pointer;
99 padding: 0.75em 1em;
100 list-style: none;
101 overflow: hidden;
102 }
103
104 .ayg details > summary > span {
105 flex: 1;
106 min-width: 0;
107 overflow: hidden;
108 text-overflow: ellipsis;
109 white-space: nowrap;
110 }
111
112 .ayg details[open] > summary {
113 border-bottom: 1px solid #ddd;
114 }
115
116 .ayg details > summary::after {
117 display: inline-block;
118 transform-origin: 50% 50%;
119 transform: rotate(0deg);
120 transition: transform 0.2s ease;
121 margin-left: auto;
122 width: 16px;
123 height: 16px;
124 vertical-align: middle;
125 line-height: 1;
126 font-family: dashicons;
127 font-size: 16px;
128 content: "\f347";
129 }
130
131 .ayg details[open] > summary::after {
132 transform: rotate(180deg);
133 }
134
135 .ayg details > div,
136 .ayg details > ol {
137 margin: 0;
138 padding: 1em 1.25em;
139 color: #555;
140 }
141
142 .ayg details > ol {
143 list-style-position: inside;
144 }
145
146 /*----------------------------------------------------------------------------------------------
147 *
148 * Tabs
149 *
150 *--------------------------------------------------------------------------------------------*/
151 .ayg .nav-tab {
152 border-top-left-radius: 3px;
153 border-top-right-radius: 3px;
154 padding: 5px 15px;
155 }
156
157 @media screen and (max-width: 782px) {
158 .ayg h2.nav-tab-wrapper {
159 display: flex;
160 flex-wrap: wrap;
161 gap: 0.5em;
162 }
163
164 .ayg h2.nav-tab-wrapper .nav-tab {
165 margin: 0;
166 }
167 }
168
169 /*----------------------------------------------------------------------------------------------
170 *
171 * Badges
172 *
173 *--------------------------------------------------------------------------------------------*/
174 .ayg .ayg-badge {
175 display: inline-block;
176 padding: 0 0.75em;
177 border: 1px solid transparent;
178 border-radius: 2px;
179 font-size: 0.85em;
180 font-weight: 500;
181 line-height: 1.8;
182 white-space: nowrap;
183 }
184
185 .ayg .ayg-badge-idle {
186 background: #f0f0f0;
187 border-color: #dcdcde;
188 color: #50575e;
189 }
190
191 .ayg .ayg-badge-running {
192 border: 1px solid #bfdbfe;
193 background-color: #dbeafe;
194 color: #1f2937;
195 }
196
197 .ayg .ayg-badge-paused {
198 border: 1px solid #ffe69c;
199 background-color: #fff3cd;
200 color: #664d03;
201 }
202
203 .ayg .ayg-badge-error {
204 border: 1px solid #f1aeb5;
205 background-color: #f8d7da;
206 color: #58151c;
207 }
208
209 .ayg .ayg-badge-completed {
210 border: 1px solid #a3cfbb;
211 background-color: #d1e7dd;
212 color: #0a3622;
213 }
214
215 .ayg .ayg-badge-live {
216 border: 1px solid #d8b4fe;
217 background-color: #f3e8ff;
218 color: #6b21a8;
219 }
220
221 /*----------------------------------------------------------------------------------------------
222 *
223 * Notices
224 *
225 *--------------------------------------------------------------------------------------------*/
226 .ayg .ayg-notice {
227 margin-top: 0;
228 border-radius: 2px;
229 padding: 1em;
230 }
231
232 .ayg .ayg-notice-info {
233 border: 1px solid #bfdbfe;
234 background-color: #dbeafe;
235 color: #1f2937;
236 }
237
238 .ayg .ayg-notice-warning {
239 border: 1px solid #ffe69c;
240 background-color: #fff3cd;
241 color: #664d03;
242 }
243
244 .ayg .ayg-notice-error {
245 border: 1px solid #f1aeb5;
246 background-color: #f8d7da;
247 color: #58151c;
248 }
249
250 .ayg .ayg-notice-success {
251 border: 1px solid #a3cfbb;
252 background-color: #d1e7dd;
253 color: #0a3622;
254 }
255
256 /*----------------------------------------------------------------------------------------------
257 *
258 * Cards
259 *
260 *--------------------------------------------------------------------------------------------*/
261 .ayg .ayg-card {
262 border: 1px solid #dcdcde;
263 border-radius: 3px;
264 background: #fff;
265 padding: 1.5em;
266 }
267
268 /*----------------------------------------------------------------------------------------------
269 *
270 * Form
271 *
272 *--------------------------------------------------------------------------------------------*/
273 .ayg .ayg-form {
274 display: flex;
275 flex-direction: column;
276 gap: 0.5em;
277 }
278
279 .ayg-form .ayg-form-controls {
280 display: flex;
281 flex-direction: column;
282 gap: 1.5em;
283 }
284
285 .ayg-form .ayg-form-control {
286 display: flex;
287 flex-direction: column;
288 gap: 0.5em;
289 }
290
291 .ayg-form .ayg-form-control .ayg-form-label {
292 display: flex;
293 align-items: center;
294 gap: 0.5em;
295 line-height: 1.5;
296 color: #000;
297 }
298
299 .ayg-form .ayg-form-required,
300 .ayg-form .ayg-form-control .ayg-form-required {
301 color: #b31105;
302 }
303
304 .ayg-form .ayg-form-control .ayg-form-field {
305 box-sizing: border-box;
306 }
307
308 .ayg-form .ayg-form-control label input[type="checkbox"] {
309 margin: 0;
310 }
311
312 .ayg-form .ayg-form-control .wp-picker-input-wrap label {
313 display: inline-block;
314 }
315
316 .ayg-form .ayg-form-control .wp-picker-input-wrap label input[type="text"] {
317 padding-top: 0;
318 padding-bottom: 0;
319 }
320
321 .ayg-form .ayg-form-control input[readonly],
322 .ayg-form .ayg-form-control textarea[readonly] {
323 pointer-events: none;
324 }
325
326 .ayg-form .ayg-form-control .description {
327 margin: 0;
328 word-break: break-word;
329 }
330
331 .ayg-form .ayg-form-actions {
332 display: flex;
333 flex-wrap: wrap;
334 align-items: center;
335 gap: 0.5em;
336 }
337
338 .ayg-form .ayg-form-status:empty {
339 display: none !important;
340 }
341
342 .ayg-form .ayg-form-status > span {
343 display: flex;
344 align-items: center;
345 gap: 0.25em;
346 }
347
348 .ayg-form .ayg-form-status .ayg-animate-dots {
349 margin-left: -0.25em;
350 }
351
352 .ayg-form .ayg-form-invalid .ayg-form-label {
353 color: #b31105;
354 }
355
356 .ayg-form .ayg-form-invalid input[type="text"],
357 .ayg-form .ayg-form-invalid textarea {
358 outline: 2px solid #b31105;
359 border: 0;
360 }
361
362 /* Toggle form controls based on source type */
363 .ayg-form .ayg-form-control-channel,
364 .ayg-form .ayg-form-control-playlist,
365 .ayg-form .ayg-form-control-username,
366 .ayg-form .ayg-form-control-search,
367 .ayg-form .ayg-form-control-video,
368 .ayg-form .ayg-form-control-videos,
369 .ayg-form .ayg-form-control-order,
370 .ayg-form .ayg-form-control-limit,
371 .ayg-form .ayg-form-control-exclude,
372 .ayg-form .ayg-form-control-schedule {
373 display: none;
374 }
375
376 .ayg-form-field-type-channel .ayg-form-control-channel,
377 .ayg-form-field-type-channel .ayg-form-control-exclude,
378 .ayg-form-field-type-channel .ayg-form-control-schedule {
379 display: flex;
380 }
381
382 .ayg-form-field-type-playlist .ayg-form-control-playlist,
383 .ayg-form-field-type-playlist .ayg-form-control-exclude,
384 .ayg-form-field-type-playlist .ayg-form-control-schedule {
385 display: flex;
386 }
387
388 .ayg-form-field-type-username .ayg-form-control-username,
389 .ayg-form-field-type-username .ayg-form-control-exclude,
390 .ayg-form-field-type-username .ayg-form-control-schedule {
391 display: flex;
392 }
393
394 .ayg-form-field-type-search .ayg-form-control-search,
395 .ayg-form-field-type-search .ayg-form-control-order,
396 .ayg-form-field-type-search .ayg-form-control-limit {
397 display: flex;
398 }
399
400 .ayg-form-field-type-search .ayg-form-control-sort_by,
401 .ayg-form-field-type-search .ayg-form-control-sort_order,
402 .ayg-form-field-type-search .ayg-form-control-duration_filter,
403 .ayg-form-field-type-search .ayg-form-control-duration {
404 display: none;
405 }
406
407 .ayg-form-field-type-video .ayg-form-control-video {
408 display: flex;
409 }
410
411 .ayg-form-field-type-video .ayg-form-control-autoadvance {
412 display: none;
413 }
414
415 .ayg-form-field-type-livestream .ayg-form-control-channel {
416 display: flex;
417 }
418
419 .ayg-form-field-type-livestream .ayg-form-control-cache,
420 .ayg-form-field-type-livestream .ayg-form-control-player_title,
421 .ayg-form-field-type-livestream .ayg-form-control-player_description,
422 .ayg-form-field-type-livestream .ayg-form-control-autoadvance,
423 .ayg-form-field-type-livestream .ayg-form-control-loop {
424 display: none;
425 }
426
427 .ayg-form-field-type-videos .ayg-form-control-videos {
428 display: flex;
429 }
430
431 .ayg-form-field-type-video .ayg-form-section-gallery,
432 .ayg-form-field-type-livestream .ayg-form-section-gallery {
433 display: none;
434 }
435
436 .ayg-form-field-type-video .ayg-form-section-search,
437 .ayg-form-field-type-livestream .ayg-form-section-search {
438 display: none;
439 }
440
441 .ayg-form-field-theme-slider .ayg-form-section-search,
442 .ayg-form-field-theme-slider-popup .ayg-form-section-search,
443 .ayg-form-field-theme-slider-inline .ayg-form-section-search,
444 .ayg-form-field-theme-playlister .ayg-form-section-search {
445 display: none;
446 }
447
448 .ayg-form-field-type-search .ayg-form-section-import-history,
449 .ayg-form-field-type-video .ayg-form-section-import-history,
450 .ayg-form-field-type-livestream .ayg-form-section-import-history,
451 .ayg-form-field-type-videos .ayg-form-section-import-history {
452 display: none;
453 }
454
455 /*----------------------------------------------------------------------------------------------
456 *
457 * Dashboard Page
458 *
459 *--------------------------------------------------------------------------------------------*/
460 #ayg-dashboard {
461 display: flex;
462 flex-direction: column;
463 gap: 2em;
464 margin: 0 auto;
465 padding: 25px 30px 0 10px;
466 max-width: 1024px;
467 }
468
469 /* About section */
470 #ayg-dashboard .about-wrap {
471 display: flex;
472 flex-direction: column;
473 gap: 1.5em;
474 margin: 0;
475 max-width: 100%;
476 min-height: 160px;
477 }
478
479 #ayg-dashboard .about-wrap h1 {
480 margin: 0 160px 0 0;
481 font-size: 2.1em;
482 }
483
484 #ayg-dashboard .about-wrap .about-text {
485 margin: -0.5em 160px 0 0;
486 }
487
488 #ayg-dashboard .about-wrap .button-hero {
489 align-self: flex-start;
490 margin: 0;
491 }
492
493 #ayg-dashboard .about-wrap .wp-badge {
494 margin: 0;
495 border-radius: 4px;
496 background: #ec4338 url( '../images/logo.png' ) no-repeat center 15px;
497 background-size: 100px 100px;
498 }
499
500 @media screen and (max-width: 782px) {
501 #ayg-dashboard {
502 padding: 20px 20px 0 10px;
503 }
504
505 #ayg-dashboard .about-wrap h1 {
506 font-size: 1.8em;
507 }
508
509 #ayg-dashboard .about-wrap .about-text {
510 font-size: 1.2em;
511 }
512 }
513
514 @media screen and (max-width: 500px) {
515 #ayg-dashboard .about-wrap h1 {
516 margin-right: 0;
517 }
518
519 #ayg-dashboard .about-wrap .about-text {
520 margin-right: 0;
521 }
522
523 #ayg-dashboard .about-wrap .button {
524 width: 100%;
525 }
526 }
527
528 /* Gallery List: WP List Table */
529 .ayg-gallery-list table {
530 outline: 1px solid #c3c4c7;
531 border: 0;
532 border-radius: 3px;
533 }
534
535 .ayg-gallery-list table td.column-source,
536 .ayg-gallery-list table td.column-videos,
537 .ayg-gallery-list table td.column-schedule {
538 font-size: 0.9em;
539 }
540
541 .ayg-gallery-list td.column-status .ayg-badge {
542 min-width: 84px;
543 max-width: 160px;
544 text-align: center;
545 white-space: normal;
546 overflow-wrap: break-word;
547 }
548
549 @media screen and (max-width: 782px) {
550 .ayg-gallery-list .search-box {
551 flex-wrap: nowrap;
552 margin-bottom: 0.5em;
553 }
554
555 .ayg-gallery-list .tablenav.top {
556 display: none;
557 }
558 }
559
560 /* Gallery Form */
561 .ayg-gallery-form {
562 display: flex;
563 flex-direction: column;
564 gap: 1.5em;
565 margin: 0 auto;
566 width: 100%;
567 max-width: 900px;
568 }
569
570 .ayg-gallery-form .ayg-back-to-galleries-link a {
571 text-decoration: none;
572 }
573
574 .ayg-gallery-form .ayg-gallery-form-heading {
575 margin: 0;
576 }
577
578 @media screen and (max-width: 320px) {
579 .ayg-gallery-form .ayg-gallery-form-heading {
580 font-size: 1.6em;
581 }
582 }
583
584 /* Gallery Form: Shortcode notice */
585 .ayg-gallery-form .ayg-notice-shortcode {
586 display: flex;
587 align-items: center;
588 gap: 1em;
589 }
590
591 .ayg-gallery-form .ayg-notice-shortcode .ayg-notice-shortcode-text {
592 display: flex;
593 flex-direction: column;
594 gap: 0.5em;
595 margin-right: auto;
596 }
597
598 .ayg-gallery-form .ayg-notice-shortcode .ayg-notice-shortcode-text code {
599 align-self: flex-start;
600 }
601
602 .ayg-gallery-form .ayg-notice-shortcode .ayg-button-copy-shortcode {
603 flex-shrink: 0;
604 }
605
606 @media (max-width: 782px) {
607 .ayg-gallery-form .ayg-notice-shortcode {
608 flex-direction: column;
609 align-items: flex-start;
610 }
611 }
612
613 /* Gallery Form: KPIs */
614 .ayg-gallery-form .ayg-kpi-cards {
615 display: flex;
616 flex-wrap: wrap;
617 gap: 1.5em;
618 }
619
620 .ayg-gallery-form .ayg-card-kpi {
621 display: flex;
622 flex: 1 1 220px;
623 flex-direction: row;
624 align-items: center;
625 gap: 1em;
626 }
627
628 .ayg-gallery-form .ayg-kpi-icon {
629 flex-shrink: 0;
630 width: 1em;
631 height: 1em;
632 color: var(--wp-admin-theme-color, #3858e9);
633 font-size: 2.25em;
634 }
635
636 .ayg-gallery-form .ayg-kpi-body {
637 display: flex;
638 flex-direction: column;
639 min-width: 0;
640 }
641
642 .ayg-gallery-form .ayg-kpi-value {
643 line-height: 1.1;
644 white-space: nowrap;
645 color: #1d2327;
646 font-size: 1.9em;
647 font-weight: 700;
648 }
649
650 .ayg-gallery-form .ayg-kpi-value-date {
651 font-size: 1em;
652 font-weight: 600;
653 }
654
655 .ayg-gallery-form .ayg-kpi-label {
656 margin-top: 0.2em;
657 color: #646970;
658 font-size: 0.9em;
659 }
660
661 .ayg-gallery-form .ayg-kpi-sublabel {
662 color: #646970;
663 font-size: 0.85em;
664 }
665
666 @media (max-width: 782px) {
667 .ayg-gallery-form .ayg-kpi-value {
668 font-size: 1.5em;
669 }
670 }
671
672 /* Gallery Form: Form sections */
673 .ayg-gallery-form .ayg-form {
674 gap: 1em;
675 }
676
677 .ayg-gallery-form details > summary {
678 padding: 1em 1.5em;
679 font-size: 1.1em;
680 font-weight: 500;
681 }
682
683 .ayg-gallery-form details > summary::after {
684 width: 18px;
685 height: 18px;
686 font-size: 18px;
687 }
688
689 .ayg-gallery-form details > div {
690 padding: 1.5em;
691 }
692
693 .ayg-gallery-form .ayg-form-actions .ayg-form-status {
694 display: flex;
695 flex-basis: 100%;
696 align-items: center;
697 gap: 0.35em;
698 margin-top: 0.5em;
699 }
700
701 .ayg-gallery-form .ayg-form-field-type-channel .ayg-form-control-cache,
702 .ayg-gallery-form .ayg-form-field-type-playlist .ayg-form-control-cache,
703 .ayg-gallery-form .ayg-form-field-type-username .ayg-form-control-cache,
704 .ayg-gallery-form .ayg-form-field-type-video .ayg-form-control-cache,
705 .ayg-gallery-form .ayg-form-field-type-videos .ayg-form-control-cache {
706 display: none;
707 }
708
709 .ayg-gallery-form .ayg-form-field-type-search .ayg-form-section-search {
710 display: none;
711 }
712
713 /* Gallery Form: Import History */
714 .ayg-gallery-form table {
715 outline: 1px solid #c3c4c7;
716 border: 0;
717 border-radius: 3px;
718 }
719
720 .ayg-gallery-form table .column-number {
721 width: 10%;
722 vertical-align: top;
723 text-align: center;
724 }
725
726 .ayg-gallery-form table .column-date {
727 width: 30%;
728 }
729
730 .ayg-gallery-form table .column-videos ul {
731 margin: 0;
732 font-size: 0.9em;
733 }
734
735 .ayg-gallery-form table .column-videos ul li {
736 margin-bottom: 3px;
737 }
738
739 .ayg-gallery-form table .column-status p {
740 margin: 0;
741 margin-top: 0.5em;
742 }
743
744 /*----------------------------------------------------------------------------------------------
745 *
746 * Settings Page
747 *
748 *--------------------------------------------------------------------------------------------*/
749 #ayg-settings h1 {
750 margin-bottom: 0.25em;
751 font-size: 1.8em;
752 }
753
754 #ayg-settings .subsubsub {
755 margin-bottom: 1em;
756 }
757
758 #ayg-table-delete-cache {
759 margin-top: 0;
760 }
761
762 #ayg-settings.player_type-youtube tr.player_color {
763 display: none;
764 }
765
766 /*----------------------------------------------------------------------------------------------
767 *
768 * Block
769 *
770 *--------------------------------------------------------------------------------------------*/
771 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row {
772 margin-bottom: 1.25em;
773 }
774
775 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row label {
776 text-transform: unset;
777 line-height: 1.6;
778 font-size: 13px;
779 font-weight: normal;
780 }
781
782 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-base-control {
783 width: 100%;
784 }
785
786 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-base-control__help {
787 overflow: hidden;
788 text-overflow: ellipsis;
789 }
790
791 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-range-control__wrapper {
792 flex: 1 1 100%;
793 }
794
795 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row .block-editor-panel-color-gradient-settings {
796 border: 0;
797 padding: 0;
798 width: 100%;
799 }
800
801 .block-editor .automatic-youtube-gallery-block-panel .components-panel__row .block-editor-tools-panel-color-gradient-settings__item {
802 margin-top: 18px;
803 }
804
805 /*----------------------------------------------------------------------------------------------
806 *
807 * Widget
808 *
809 *--------------------------------------------------------------------------------------------*/
810 .ayg-widget-form .ayg-widget-field-title {
811 margin-bottom: 1em;
812 }
813
814 .ayg-widget-form .ayg-form details > summary {
815 background-color: #f0f0f0;
816 font-size: 14px;
817 }
818
819 .ayg-widget-form .ayg-form details select.ayg-form-field {
820 padding-left: 8px;
821 line-height: 1.5;
822 }
823
824 .ayg-widget-form .ayg-form .ayg-form-controls {
825 gap: 1.25em;
826 }
827
828 .ayg-widget-form .ayg-form .ayg-form-control {
829 gap: 0.35em;
830 }
831
832 .ayg-widget-form p {
833 margin: 0 !important;
834 line-height: 1.5 !important;
835 }
836
837 .ayg-widget-form label {
838 line-height: normal !important;
839 }
840
841 /*----------------------------------------------------------------------------------------------
842 *
843 * Elementor
844 *
845 *--------------------------------------------------------------------------------------------*/
846 .elementor-control-type-wp_widget .ayg-widget-form p.description {
847 color: #909090;
848 font-size: 0.9em;
849 }