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