PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.3.2
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.3.2
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
← All changes | admin/assets/css/admin.css +198 -693 trunk2.3.2 View file →
@@ -1,849 +1,354 @@
1 1 /*----------------------------------------------------------------------------------------------
2 2 *
3 - * Base
3 + * Global
4 4 *
5 5 *--------------------------------------------------------------------------------------------*/
6 -.ayg .widefat {
7 - max-width: 100%;
6 +.ayg-text-center {
7 + text-align: center;
8 8 }
9 9
10 -.ayg .spinner {
11 - float: none;
12 - visibility: visible;
13 - margin: 0;
10 +.ayg-text-error {
11 + color: #EC4338;
14 12 }
15 13
16 -.ayg .ayg-no-margin {
17 - margin: 0;
14 +.ayg-text-success {
15 + color: green;
18 16 }
19 17
20 -.ayg .ayg-no-padding {
21 - padding: 0;
18 +.ayg-ajax-status .spinner {
19 + float: none;
20 + visibility: visible;
22 21 }
23 22
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 23 /*----------------------------------------------------------------------------------------------
73 24 *
74 - * Accordion
25 + * Dashboard
75 26 *
76 27 *--------------------------------------------------------------------------------------------*/
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;
28 +#ayg-dashboard h1 {
29 + font-size: 2em;
30 + font-weight: 500;
83 31 }
84 32
85 -.ayg details:hover {
86 - box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
33 +#ayg-dashboard .wp-badge {
34 + margin-bottom: 0;
35 + background: #EC4338 url( '../images/logo.png' ) no-repeat top;
87 36 }
88 37
89 -.ayg details[open] {
90 - background-color: #fff;
38 +#ayg-table-api-key .ayg-ajax-status span {
39 + margin: 0 7px;
91 40 }
92 41
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;
42 +#ayg-shortcode-builder {
43 + display: -webkit-flex; /* Safari */
44 + -webkit-flex-wrap: wrap; /* Safari 6.1+ */
45 + display: flex;
46 + flex-wrap: wrap;
47 + margin: 0 -15px;
102 48 }
103 49
104 -.ayg details > summary > span {
105 - flex: 1;
106 - min-width: 0;
107 - overflow: hidden;
108 - text-overflow: ellipsis;
109 - white-space: nowrap;
50 +#ayg-shortcode-builder .ayg-left-col,
51 +#ayg-shortcode-builder .ayg-right-col {
52 + width: 100%;
110 53 }
111 54
112 -.ayg details[open] > summary {
113 - border-bottom: 1px solid #ddd;
55 +#ayg-shortcode-builder .ayg-col-content {
56 + padding: 15px;
114 57 }
115 58
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;
59 +@media only screen and (min-width: 768px) {
60 + #ayg-shortcode-builder .ayg-left-col {
61 + width: 60%;
162 62 }
163 63
164 - .ayg h2.nav-tab-wrapper .nav-tab {
165 - margin: 0;
64 + #ayg-shortcode-builder .ayg-right-col {
65 + width: 40%;
166 66 }
167 67 }
168 68
169 69 /*----------------------------------------------------------------------------------------------
170 70 *
171 - * Badges
71 + * Settings
172 72 *
173 73 *--------------------------------------------------------------------------------------------*/
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;
74 +#ayg-table-delete-cache {
75 + margin-top: 0;
183 76 }
184 77
185 -.ayg .ayg-badge-idle {
186 - background: #f0f0f0;
187 - border-color: #dcdcde;
188 - color: #50575e;
78 +#ayg-table-delete-cache .ayg-text-success {
79 + line-height: 28px;
80 + margin: 0 7px;
189 81 }
190 82
191 -.ayg .ayg-badge-running {
192 - border: 1px solid #bfdbfe;
193 - background-color: #dbeafe;
194 - color: #1f2937;
83 +.ayg-settings-pagination_type-more tr.previous_button_label,
84 +.ayg-settings-pagination_type-more tr.next_button_label {
85 + display: none;
195 86 }
196 87
197 -.ayg .ayg-badge-paused {
198 - border: 1px solid #ffe69c;
199 - background-color: #fff3cd;
200 - color: #664d03;
88 +.ayg-settings-pagination_type-pager tr.more_button_label {
89 + display: none;
201 90 }
202 91
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 92 /*----------------------------------------------------------------------------------------------
222 93 *
223 - * Notices
94 + * Modal
224 95 *
225 96 *--------------------------------------------------------------------------------------------*/
226 -.ayg .ayg-notice {
227 - margin-top: 0;
228 - border-radius: 2px;
229 - padding: 1em;
97 +.ayg-modal {
98 + position: fixed;
99 + width: 100%;
100 + height: 100%;
101 + margin: 0;
102 + padding: 0;
103 + top: 0;
104 + left: 0;
105 + z-index: 9999;
230 106 }
231 107
232 -.ayg .ayg-notice-info {
233 - border: 1px solid #bfdbfe;
234 - background-color: #dbeafe;
235 - color: #1f2937;
108 +.ayg-modal-bg {
109 + width: 100%;
110 + height: 100%;
111 + background-color: #000;
112 + opacity: 0.9;
236 113 }
237 114
238 -.ayg .ayg-notice-warning {
239 - border: 1px solid #ffe69c;
240 - background-color: #fff3cd;
241 - color: #664d03;
115 +.ayg-modal-content {
116 + position: absolute;
117 + width: 100%;
118 + height: 100%;
119 + margin: 0;
120 + padding: 0;
121 + top: 0;
122 + left: 0;
123 + overflow-y: auto;
124 + z-index: 1;
242 125 }
243 126
244 -.ayg .ayg-notice-error {
245 - border: 1px solid #f1aeb5;
246 - background-color: #f8d7da;
247 - color: #58151c;
127 +.ayg-modal-body {
128 + position: relative;
129 + width: 90%;
130 + max-width: 540px;
131 + margin: 50px auto;
132 + padding: 15px;
133 + background-color: #fff;
248 134 }
249 135
250 -.ayg .ayg-notice-success {
251 - border: 1px solid #a3cfbb;
252 - background-color: #d1e7dd;
253 - color: #0a3622;
136 +.ayg-modal-body .ayg-modal-close {
137 + position: absolute;
138 + width: 25px;
139 + height: 25px;
140 + top: 15px;
141 + right: 15px;
142 + color: #999;
143 + font-size: 25px;
144 + text-align: center;
145 + cursor: pointer;
254 146 }
255 147
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;
148 +.ayg-modal-body .ayg-modal-title {
149 + margin: 0 25px 15px 0;
266 150 }
267 151
268 152 /*----------------------------------------------------------------------------------------------
269 153 *
270 - * Form
154 + * Editor
271 155 *
272 156 *--------------------------------------------------------------------------------------------*/
273 -.ayg .ayg-form {
274 - display: flex;
275 - flex-direction: column;
276 - gap: 0.5em;
157 +.ayg-editor-section-header {
158 + margin: 5px 0 0 0;
159 + padding: 10px;
160 + background: #e5e5e5;
161 + border: 1px solid #ccc;
162 + cursor: pointer;
277 163 }
278 164
279 -.ayg-form .ayg-form-controls {
280 - display: flex;
281 - flex-direction: column;
282 - gap: 1.5em;
165 +.ayg-editor-section-header:hover {
166 + background: #f9f9f9;
283 167 }
284 168
285 -.ayg-form .ayg-form-control {
286 - display: flex;
287 - flex-direction: column;
288 - gap: 0.5em;
169 +.ayg-editor-section-header .dashicons-before {
170 + color: #006799;
289 171 }
290 172
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 {
173 +.ayg-editor-section-header .dashicons-plus {
313 174 display: inline-block;
314 175 }
315 176
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 {
177 +.ayg-editor-section-header .dashicons-minus {
373 178 display: none;
374 179 }
375 180
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 {
181 +.ayg-active .ayg-editor-section-header .dashicons-plus {
404 182 display: none;
405 183 }
406 184
407 -.ayg-form-field-type-video .ayg-form-control-video {
408 - display: flex;
185 +.ayg-active .ayg-editor-section-header .dashicons-minus {
186 + display: inline-block;
409 187 }
410 188
411 -.ayg-form-field-type-video .ayg-form-control-autoadvance {
412 - display: none;
189 +.ayg-editor-controls {
190 + margin: -1px 0 0 0;
191 + padding: 12px 12px 0 12px;
192 + background: #fff;
193 + border: 1px solid #ccc;
413 194 }
414 195
415 -.ayg-form-field-type-livestream .ayg-form-control-channel {
416 - display: flex;
196 +.ayg-editor-control {
197 + margin-bottom: 15px;
417 198 }
418 199
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;
200 +.ayg-editor-control label {
201 + display: block;
202 + margin-bottom: 5px;
203 + font-weight: 600;
425 204 }
426 205
427 -.ayg-form-field-type-videos .ayg-form-control-videos {
428 - display: flex;
206 +.ayg-editor-control .wp-picker-input-wrap label {
207 + display: inline-block;
429 208 }
430 209
431 -.ayg-form-field-type-video .ayg-form-section-gallery,
432 -.ayg-form-field-type-livestream .ayg-form-section-gallery {
433 - display: none;
210 +.ayg-editor-control .description {
211 + font-size: 90%;
434 212 }
435 213
436 -.ayg-form-field-type-video .ayg-form-section-search,
437 -.ayg-form-field-type-livestream .ayg-form-section-search {
214 +.ayg-editor-control-playlist,
215 +.ayg-editor-control-channel,
216 +.ayg-editor-control-username,
217 +.ayg-editor-control-search,
218 +.ayg-editor-control-video,
219 +.ayg-editor-control-videos,
220 +.ayg-editor-control-order,
221 +.ayg-editor-control-limit,
222 +.ayg-editor-control-privacy_enhanced_mode,
223 +.ayg-editor-control-origin {
438 224 display: none;
439 225 }
440 226
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 {
227 +.ayg-editor-field-pagination_type-more .ayg-editor-control-previous_button_label,
228 +.ayg-editor-field-pagination_type-more .ayg-editor-control-next_button_label {
445 229 display: none;
446 230 }
447 231
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 {
232 +.ayg-editor-field-pagination_type-pager .ayg-editor-control-more_button_label {
452 233 display: none;
453 234 }
454 235
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;
236 +.ayg-editor-field-type-playlist .ayg-editor-control-playlist {
237 + display: block;
467 238 }
468 239
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;
240 +.ayg-editor-field-type-channel .ayg-editor-control-channel,
241 +.ayg-editor-field-type-livestream .ayg-editor-control-channel {
242 + display: block;
477 243 }
478 244
479 -#ayg-dashboard .about-wrap h1 {
480 - margin: 0 160px 0 0;
481 - font-size: 2.1em;
245 +.ayg-editor-field-type-username .ayg-editor-control-username {
246 + display: block;
482 247 }
483 248
484 -#ayg-dashboard .about-wrap .about-text {
485 - margin: -0.5em 160px 0 0;
249 +.ayg-editor-field-type-search .ayg-editor-control-search,
250 +.ayg-editor-field-type-search .ayg-editor-control-order,
251 +.ayg-editor-field-type-search .ayg-editor-control-limit {
252 + display: block;
486 253 }
487 254
488 -#ayg-dashboard .about-wrap .button-hero {
489 - align-self: flex-start;
490 - margin: 0;
255 +.ayg-editor-field-type-video .ayg-editor-control-video {
256 + display: block;
491 257 }
492 258
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;
259 +.ayg-editor-field-type-video .ayg-editor-control-autoadvance {
260 + display: none;
498 261 }
499 262
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 {
263 +.ayg-editor-field-type-livestream .ayg-editor-control-cache,
264 +.ayg-editor-field-type-livestream .ayg-editor-control-player_title,
265 +.ayg-editor-field-type-livestream .ayg-editor-control-player_description,
266 +.ayg-editor-field-type-livestream .ayg-editor-control-autoadvance,
267 +.ayg-editor-field-type-livestream .ayg-editor-control-loop {
706 268 display: none;
707 269 }
708 270
709 -.ayg-gallery-form .ayg-form-field-type-search .ayg-form-section-search {
271 +.ayg-editor-field-type-video .ayg-editor-section-gallery,
272 +.ayg-editor-field-type-livestream .ayg-editor-section-gallery {
710 273 display: none;
711 274 }
712 275
713 -/* Gallery Form: Import History */
714 -.ayg-gallery-form table {
715 - outline: 1px solid #c3c4c7;
716 - border: 0;
717 - border-radius: 3px;
276 +.ayg-editor-field-type-videos .ayg-editor-control-videos {
277 + display: block;
718 278 }
719 279
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 280 /*----------------------------------------------------------------------------------------------
745 281 *
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 282 * Block
769 283 *
770 284 *--------------------------------------------------------------------------------------------*/
771 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row {
772 - margin-bottom: 1.25em;
285 +.automatic-youtube-gallery-block-panel .components-panel__row .components-base-control {
286 + width: 100%;
773 287 }
774 288
775 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row label {
776 - text-transform: unset;
777 - line-height: 1.6;
289 +.automatic-youtube-gallery-block-panel .components-panel__row .components-base-control label {
778 290 font-size: 13px;
779 - font-weight: normal;
291 + font-weight: normal;
292 + text-transform: capitalize;
780 293 }
781 294
782 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-base-control {
295 +.automatic-youtube-gallery-block-panel .components-panel__row .block-editor-panel-color-gradient-settings {
783 296 width: 100%;
297 + padding-left: 0;
298 + padding-right: 0;
784 299 }
785 300
786 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-base-control__help {
787 - overflow: hidden;
788 - text-overflow: ellipsis;
301 +.is-loading .wp-block-automatic-youtube-gallery-block {
302 + opacity: 0.5;
789 303 }
790 304
791 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row .components-range-control__wrapper {
792 - flex: 1 1 100%;
305 +.is-loading .wp-block-automatic-youtube-gallery-block .ayg-error,
306 +.is-loading .wp-block-automatic-youtube-gallery-block .ayg-fallback-message {
307 + visibility: hidden;
793 308 }
794 309
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%;
310 +.is-loading .automatic-youtube-gallery-block-spinner {
311 + position: absolute;
312 + margin: 0;
313 + padding: 10px;
314 + top: 0;
315 + left: 0;
316 + background: #fff;
799 317 }
800 318
801 -.block-editor .automatic-youtube-gallery-block-panel .components-panel__row .block-editor-tools-panel-color-gradient-settings__item {
802 - margin-top: 18px;
319 +.is-loading .automatic-youtube-gallery-block-spinner svg {
320 + margin: 0 10px 0 0;
803 321 }
804 322
323 +.is-loading .automatic-youtube-gallery-block-spinner span {
324 + line-height: 16px;
325 + vertical-align: top;
326 +}
327 +
805 328 /*----------------------------------------------------------------------------------------------
806 329 *
807 330 * Widget
808 331 *
809 332 *--------------------------------------------------------------------------------------------*/
810 -.ayg-widget-form .ayg-widget-field-title {
811 - margin-bottom: 1em;
333 +.widget .ayg-editor {
334 + margin: 10px 0;
812 335 }
813 336
814 -.ayg-widget-form .ayg-form details > summary {
815 - background-color: #f0f0f0;
816 - font-size: 14px;
337 +.widget .ayg-editor .ayg-editor-control {
338 + margin-bottom: 12px;
817 339 }
818 340
819 -.ayg-widget-form .ayg-form details select.ayg-form-field {
820 - padding-left: 8px;
821 - line-height: 1.5;
341 +.widget .ayg-editor .ayg-editor-control label {
342 + display: block;
343 + margin-bottom: 0;
344 + font-weight: 600;
822 345 }
823 346
824 -.ayg-widget-form .ayg-form .ayg-form-controls {
825 - gap: 1.25em;
347 +.widget .ayg-editor .ayg-editor-control .wp-picker-input-wrap label {
348 + display: inline-block;
826 349 }
827 350
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;
351 +.widget .ayg-editor .ayg-editor-control .description {
352 + margin: 0;
353 + word-break: break-word;
849 354 }