PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.6.4
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.6.4
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 +237 -131 1.2.02.6.4 View file →
@@ -2,257 +2,363 @@
2 2 *
3 3 * Global
4 4 *
5 5 *--------------------------------------------------------------------------------------------*/
6 +.ayg-margin-bottom {
7 + margin-bottom: 1em;
8 +}
9 +
6 10 .ayg-text-center {
7 11 text-align: center;
8 12 }
9 13
10 -.ayg-no-scroll {
11 - overflow: hidden;
14 +.ayg-text-error {
15 + color: #EC4338;
12 16 }
13 17
18 +.ayg-text-success {
19 + color: green;
20 +}
21 +
22 +.ayg-ajax-status .spinner {
23 + float: none;
24 + visibility: visible;
25 +}
26 +
27 +/* Tabs */
28 +.ayg .nav-tab {
29 + border-top-left-radius: 3px;
30 + border-top-right-radius: 3px;
31 + padding: 5px 15px;
32 +}
33 +
34 +@media screen and (max-width: 782px) {
35 + .ayg h2.nav-tab-wrapper {
36 + display: flex;
37 + flex-wrap: wrap;
38 + justify-content: center;
39 + gap: 0.5em;
40 + }
41 +
42 + .ayg h2.nav-tab-wrapper .nav-tab {
43 + margin: 0;
44 + }
45 +}
46 +
14 47 /*----------------------------------------------------------------------------------------------
15 48 *
16 - * Welcome
49 + * Dashboard
17 50 *
18 51 *--------------------------------------------------------------------------------------------*/
19 -#ayg-welcome h1 {
52 +#ayg-dashboard h1 {
20 53 font-size: 2em;
21 54 font-weight: 500;
22 55 }
23 56
24 -#ayg-welcome .wp-badge {
57 +#ayg-dashboard .wp-badge {
25 58 margin-bottom: 0;
59 + border-radius: 3px;
26 60 background: #EC4338 url( '../images/logo.png' ) no-repeat top;
27 61 }
28 62
29 -#ayg-welcome .feature-video {
30 - position: relative;
31 - width: 100%;
32 - max-width: 100%;
33 - height: 0;
34 - padding-bottom: 56.25%;
63 +#ayg-table-api-key .ayg-ajax-status span {
64 + margin: 0 0.5em;
35 65 }
36 66
37 -#ayg-welcome .feature-video iframe {
38 - position: absolute;
39 - width: 100%;
40 - height: 100%;
41 - top: 0;
42 - left: 0;
67 +#ayg-shortcode-builder {
68 + display: grid;
69 + gap: 2em;
43 70 }
44 71
72 +#ayg-shortcode-builder .ayg-left-col .ayg-col-content {
73 + margin-top: 2em;
74 +}
75 +
76 +@media only screen and (min-width: 768px) {
77 + #ayg-shortcode-builder {
78 + grid-template-columns: 3fr 2fr;
79 + }
80 +}
81 +
45 82 /*----------------------------------------------------------------------------------------------
46 83 *
47 - * Admin Notice
84 + * Settings
48 85 *
49 86 *--------------------------------------------------------------------------------------------*/
50 - #ayg-admin-notice a {
51 - text-decoration: none;
87 +#ayg-table-delete-cache {
88 + margin-top: 0;
52 89 }
53 90
54 -.ayg-admin-notice-link-premium {
55 - color: green;
91 +#ayg-table-delete-cache .ayg-text-success {
92 + line-height: 30px;
93 + margin: 0 0.5em;
56 94 }
57 95
96 +#ayg-settings.player_type-youtube tr.player_color {
97 + display: none;
98 +}
99 +
58 100 /*----------------------------------------------------------------------------------------------
59 101 *
60 102 * Modal
61 103 *
62 104 *--------------------------------------------------------------------------------------------*/
63 - .ayg-modal {
64 - position: fixed;
65 - width: 100%;
66 - height: 100%;
67 - margin: 0;
68 - padding: 0;
69 - top: 0;
70 - left: 0;
71 - z-index: 9999;
105 +.ayg-modal {
106 + position: relative;
107 + margin: 2em auto;
108 + border-radius: 3px;
109 + background-color: #fff;
110 + padding: 1em;
111 + width: auto;
112 + max-width: 640px;
72 113 }
73 114
74 -.ayg-modal-bg {
75 - width: 100%;
76 - height: 100%;
77 - background-color: #000;
78 - opacity: 0.9;
115 +.mfp-fade.mfp-bg {
116 + -webkit-transition: all 0.15s ease-out;
117 + -moz-transition: all 0.15s ease-out;
118 + transition: all 0.15s ease-out;
119 + opacity: 0;
79 120 }
80 121
81 -.ayg-modal-content {
82 - position: absolute;
83 - width: 100%;
84 - height: 100%;
85 - margin: 0;
86 - padding: 0;
87 - top: 0;
88 - left: 0;
89 - overflow-y: auto;
90 - z-index: 1;
122 +.mfp-fade.mfp-bg.mfp-ready {
123 + opacity: 0.8;
91 124 }
92 125
93 -.ayg-modal-body {
94 - position: relative;
95 - width: 90%;
96 - max-width: 540px;
97 - margin: 50px auto;
98 - padding: 15px;
99 - background-color: #fff;
126 +.mfp-fade.mfp-bg.mfp-removing {
127 + opacity: 0;
100 128 }
101 129
102 -.ayg-modal-body .ayg-modal-close {
103 - position: absolute;
104 - width: 25px;
105 - height: 25px;
106 - top: 15px;
107 - right: 15px;
108 - color: #999;
109 - font-size: 25px;
110 - text-align: center;
111 - cursor: pointer;
130 +.mfp-fade.mfp-wrap .mfp-content {
131 + -webkit-transition: all 0.15s ease-out;
132 + -moz-transition: all 0.15s ease-out;
133 + transition: all 0.15s ease-out;
134 + opacity: 0;
112 135 }
113 136
114 -.ayg-modal-body .ayg-editor-title {
115 - margin: 0 25px 15px 0;
137 +.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
138 + opacity: 1;
116 139 }
117 140
141 +.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
142 + opacity: 0;
143 +}
144 +
118 145 /*----------------------------------------------------------------------------------------------
119 146 *
120 147 * Editor
121 148 *
122 149 *--------------------------------------------------------------------------------------------*/
123 -.ayg-editor-section-header {
124 - margin: 5px 0 0 0;
125 - padding: 10px;
126 - background: #f9f9f9;
127 - border: 1px solid #ddd;
128 - font-size: 1.1em;
129 - font-weight: normal;
130 - line-height: normal;
150 +.ayg-editor {
151 + display: flex;
152 + flex-direction: column;
153 + gap: 0.5em;
154 +}
155 +
156 +.ayg-editor .widefat {
157 + max-width: 100%;
158 +}
159 +
160 +.ayg-editor .ayg-editor-section {
161 + border: 1px solid #ccc;
162 + border-radius: 3px;
163 + overflow: hidden;
164 +}
165 +
166 +.ayg-editor .ayg-editor-section-header {
167 + display: flex;
168 + align-items: center;
169 + gap: 0.5em;
170 + padding: 0.75em;
171 + background: #e5e5e5;
131 172 cursor: pointer;
132 173 }
133 174
134 -.ayg-editor-section-header:hover {
135 - background: #f0f0f0;
175 +.ayg-editor .ayg-editor-section-header:hover {
176 + background: #f9f9f9;
136 177 }
137 178
138 -.ayg-editor-section-header .dashicons-before {
179 +.ayg-editor .ayg-editor-section-header .dashicons-before {
139 180 color: #006799;
140 - line-height: 1.1em;
141 181 }
142 182
143 -.ayg-editor-section-header .dashicons-plus {
144 - display: inline-block;
183 +.ayg-editor .ayg-editor-section-header .dashicons-plus {
184 + display: flex;
145 185 }
146 186
147 -.ayg-editor-section-header .dashicons-minus {
187 +.ayg-editor .ayg-editor-section-header .dashicons-minus {
148 188 display: none;
149 189 }
150 190
151 -.ayg-active .ayg-editor-section-header .dashicons-plus {
191 +.ayg-editor .ayg-active .ayg-editor-section-header .dashicons-plus {
152 192 display: none;
153 193 }
154 194
155 -.ayg-active .ayg-editor-section-header .dashicons-minus {
156 - display: inline-block;
195 +.ayg-editor .ayg-active .ayg-editor-section-header .dashicons-minus {
196 + display: flex;
157 197 }
158 198
159 -.ayg-editor-controls {
160 - margin: -1px 0 0 0;
161 - padding: 10px;
162 - border: 1px solid #ddd;
199 +.ayg-editor .ayg-editor-controls {
200 + display: flex;
201 + flex-direction: column;
202 + gap: 1em;
203 + margin-top: -1px;
204 + padding: 1em;
205 + background: #fff;
206 + border-top: 1px solid #ccc;
163 207 }
164 208
165 209 .ayg-editor-control {
166 - margin-bottom: 15px;
210 + display: flex;
211 + flex-direction: column;
212 + gap: 0.25em;
167 213 }
168 214
169 -.ayg-editor-control label {
170 - display: block;
171 - margin-bottom: 5px;
215 +.ayg-editor .ayg-editor-controls .ayg-editor-control label {
216 + display: flex;
217 + align-items: center;
218 + gap: 0.5em;
219 + line-height: 1.5;
220 + font-weight: 500;
172 221 }
173 222
174 -.ayg-editor-control .wp-picker-input-wrap label {
223 +.ayg-editor .ayg-editor-controls .ayg-editor-control label input[type="checkbox"] {
224 + margin: 0;
225 +}
226 +
227 +.ayg-editor .ayg-editor-controls .ayg-editor-control .wp-picker-input-wrap label {
175 228 display: inline-block;
176 229 }
177 230
178 -.ayg-editor-control-playlist,
179 -.ayg-editor-control-channel,
180 -.ayg-editor-control-username,
181 -.ayg-editor-control-search,
182 -.ayg-editor-control-video,
183 -.ayg-editor-control-videos,
184 -.ayg-editor-control-order,
185 -.ayg-editor-control-limit {
231 +.ayg-editor .ayg-editor-controls .ayg-editor-control .wp-picker-input-wrap label input[type="text"] {
232 + padding-top: 0;
233 + padding-bottom: 0;
234 +}
235 +
236 +.ayg-editor .ayg-editor-controls .ayg-editor-control .description {
237 + margin: 0;
238 + line-height: 1.5;
239 + word-break: break-word;
240 + font-size: 90%;
241 + font-weight: normal;
242 +}
243 +
244 +.ayg-editor .ayg-editor-control-playlist,
245 +.ayg-editor .ayg-editor-control-channel,
246 +.ayg-editor .ayg-editor-control-username,
247 +.ayg-editor .ayg-editor-control-search,
248 +.ayg-editor .ayg-editor-control-video,
249 +.ayg-editor .ayg-editor-control-videos,
250 +.ayg-editor .ayg-editor-control-order,
251 +.ayg-editor .ayg-editor-control-limit {
186 252 display: none;
187 253 }
188 254
189 255 .ayg-editor-field-type-playlist .ayg-editor-control-playlist {
190 - display: block;
256 + display: flex;
191 257 }
192 258
193 -.ayg-editor-field-type-channel .ayg-editor-control-channel {
194 - display: block;
259 +.ayg-editor-field-type-channel .ayg-editor-control-channel,
260 +.ayg-editor-field-type-livestream .ayg-editor-control-channel {
261 + display: flex;
195 262 }
196 263
197 264 .ayg-editor-field-type-username .ayg-editor-control-username {
198 - display: block;
265 + display: flex;
199 266 }
200 267
201 268 .ayg-editor-field-type-search .ayg-editor-control-search,
202 269 .ayg-editor-field-type-search .ayg-editor-control-order,
203 270 .ayg-editor-field-type-search .ayg-editor-control-limit {
204 - display: block;
271 + display: flex;
205 272 }
206 273
207 274 .ayg-editor-field-type-video .ayg-editor-control-video {
208 - display: block;
275 + display: flex;
209 276 }
210 277
211 -.ayg-editor-field-type-video .ayg-editor-section-gallery {
278 +.ayg-editor-field-type-video .ayg-editor-control-autoadvance {
212 279 display: none;
213 280 }
214 281
282 +.ayg-editor-field-type-livestream .ayg-editor-control-cache,
283 +.ayg-editor-field-type-livestream .ayg-editor-control-player_title,
284 +.ayg-editor-field-type-livestream .ayg-editor-control-player_description,
285 +.ayg-editor-field-type-livestream .ayg-editor-control-autoadvance,
286 +.ayg-editor-field-type-livestream .ayg-editor-control-loop {
287 + display: none;
288 +}
289 +
215 290 .ayg-editor-field-type-videos .ayg-editor-control-videos {
216 - display: block;
291 + display: flex;
217 292 }
218 293
294 +.ayg-editor-field-type-video .ayg-editor-section-gallery,
295 +.ayg-editor-field-type-livestream .ayg-editor-section-gallery {
296 + display: none;
297 +}
298 +
299 +.ayg-editor-field-type-video .ayg-editor-section-search,
300 +.ayg-editor-field-type-livestream .ayg-editor-section-search {
301 + display: none;
302 +}
303 +
304 +.ayg-editor-field-theme-slider .ayg-editor-section-search,
305 +.ayg-editor-field-theme-slider-popup .ayg-editor-section-search,
306 +.ayg-editor-field-theme-slider-inline .ayg-editor-section-search,
307 +.ayg-editor-field-theme-playlister .ayg-editor-section-search {
308 + display: none;
309 +}
310 +
219 311 /*----------------------------------------------------------------------------------------------
220 312 *
221 - * Shortcode Builder
313 + * Block
222 314 *
223 315 *--------------------------------------------------------------------------------------------*/
224 - #ayg-media-button .dashicons:before {
225 - color: #FFF;
316 +.automatic-youtube-gallery-block-panel .components-panel__row {
317 + margin-bottom: 1.25em;
226 318 }
227 319
228 -#ayg-shortcode-builder {
229 - position: relative;
230 - width: auto;
231 - max-width: 500px;
232 - margin: 32px auto;
233 - padding: 20px;
234 - background: #FFF;
320 +.automatic-youtube-gallery-block-panel .components-panel__row .components-base-control {
321 + width: 100%;
235 322 }
236 323
324 +.automatic-youtube-gallery-block-panel .components-panel__row .components-range-control__wrapper {
325 + flex: 1 1 100%;
326 +}
327 +
328 +.automatic-youtube-gallery-block-panel .components-panel__row .block-editor-panel-color-gradient-settings {
329 + padding-left: 0;
330 + padding-right: 0;
331 + width: 100%;
332 +}
333 +
334 +.wp-block-automatic-youtube-gallery-block .components-spinner {
335 + display: flex;
336 + align-items: center;
337 + width: 100%;
338 +}
339 +
340 +.wp-block-automatic-youtube-gallery-block .components-placeholder {
341 + display: none;
342 +}
343 +
344 +.is-loading .wp-block-automatic-youtube-gallery-block {
345 + opacity: 0.5;
346 +}
347 +
237 348 /*----------------------------------------------------------------------------------------------
238 349 *
239 - * Block
350 + * Widget
240 351 *
241 352 *--------------------------------------------------------------------------------------------*/
242 - .ayg-block-panel label {
243 - font-weight: 500;
244 - }
353 +.widget-inside .ayg-editor {
354 + margin-top: 1em;
355 +}
245 356
246 357 /*----------------------------------------------------------------------------------------------
247 358 *
248 - * Widget
359 + * Elementor
249 360 *
250 361 *--------------------------------------------------------------------------------------------*/
251 - .widget .ayg-editor {
252 - margin-bottom: 15px;
253 - }
254 -
255 - .widget .ayg-editor .description {
256 - padding: 5px 0 !important;
257 - word-break: break-word;
258 - }
362 +#elementor-controls .ayg-editor-section-header {
363 + padding: 0.35em 0.5em;
364 +}