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