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 +237 -130 1.1.02.6.3 View file →
@@ -2,256 +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 - height: 0;
33 - padding-bottom: 56.25%;
63 +#ayg-table-api-key .ayg-ajax-status span {
64 + margin: 0 0.5em;
34 65 }
35 66
36 -#ayg-welcome .feature-video iframe {
37 - position: absolute;
38 - width: 100%;
39 - height: 100%;
40 - top: 0;
41 - left: 0;
67 +#ayg-shortcode-builder {
68 + display: grid;
69 + gap: 2em;
42 70 }
43 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 +
44 82 /*----------------------------------------------------------------------------------------------
45 83 *
46 - * Admin Notice
84 + * Settings
47 85 *
48 86 *--------------------------------------------------------------------------------------------*/
49 - #ayg-admin-notice a {
50 - text-decoration: none;
87 +#ayg-table-delete-cache {
88 + margin-top: 0;
51 89 }
52 90
53 -.ayg-admin-notice-link-premium {
54 - color: green;
91 +#ayg-table-delete-cache .ayg-text-success {
92 + line-height: 30px;
93 + margin: 0 0.5em;
55 94 }
56 95
96 +#ayg-settings.player_type-youtube tr.player_color {
97 + display: none;
98 +}
99 +
57 100 /*----------------------------------------------------------------------------------------------
58 101 *
59 102 * Modal
60 103 *
61 104 *--------------------------------------------------------------------------------------------*/
62 - .ayg-modal {
63 - position: fixed;
64 - width: 100%;
65 - height: 100%;
66 - margin: 0;
67 - padding: 0;
68 - top: 0;
69 - left: 0;
70 - 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;
71 113 }
72 114
73 -.ayg-modal-bg {
74 - width: 100%;
75 - height: 100%;
76 - background-color: #000;
77 - 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;
78 120 }
79 121
80 -.ayg-modal-content {
81 - position: absolute;
82 - width: 100%;
83 - height: 100%;
84 - margin: 0;
85 - padding: 0;
86 - top: 0;
87 - left: 0;
88 - overflow-y: auto;
89 - z-index: 1;
122 +.mfp-fade.mfp-bg.mfp-ready {
123 + opacity: 0.8;
90 124 }
91 125
92 -.ayg-modal-body {
93 - position: relative;
94 - width: 90%;
95 - max-width: 540px;
96 - margin: 50px auto;
97 - padding: 15px;
98 - background-color: #fff;
126 +.mfp-fade.mfp-bg.mfp-removing {
127 + opacity: 0;
99 128 }
100 129
101 -.ayg-modal-body .ayg-modal-close {
102 - position: absolute;
103 - width: 25px;
104 - height: 25px;
105 - top: 15px;
106 - right: 15px;
107 - color: #999;
108 - font-size: 25px;
109 - text-align: center;
110 - 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;
111 135 }
112 136
113 -.ayg-modal-body .ayg-editor-title {
114 - margin: 0 25px 15px 0;
137 +.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
138 + opacity: 1;
115 139 }
116 140
141 +.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
142 + opacity: 0;
143 +}
144 +
117 145 /*----------------------------------------------------------------------------------------------
118 146 *
119 147 * Editor
120 148 *
121 149 *--------------------------------------------------------------------------------------------*/
122 -.ayg-editor-section-header {
123 - margin: 5px 0 0 0;
124 - padding: 10px;
125 - background: #f9f9f9;
126 - border: 1px solid #ddd;
127 - font-size: 1.1em;
128 - font-weight: normal;
129 - 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;
130 172 cursor: pointer;
131 173 }
132 174
133 -.ayg-editor-section-header:hover {
134 - background: #f0f0f0;
175 +.ayg-editor .ayg-editor-section-header:hover {
176 + background: #f9f9f9;
135 177 }
136 178
137 -.ayg-editor-section-header .dashicons-before {
179 +.ayg-editor .ayg-editor-section-header .dashicons-before {
138 180 color: #006799;
139 - line-height: 1.1em;
140 181 }
141 182
142 -.ayg-editor-section-header .dashicons-plus {
143 - display: inline-block;
183 +.ayg-editor .ayg-editor-section-header .dashicons-plus {
184 + display: flex;
144 185 }
145 186
146 -.ayg-editor-section-header .dashicons-minus {
187 +.ayg-editor .ayg-editor-section-header .dashicons-minus {
147 188 display: none;
148 189 }
149 190
150 -.ayg-active .ayg-editor-section-header .dashicons-plus {
191 +.ayg-editor .ayg-active .ayg-editor-section-header .dashicons-plus {
151 192 display: none;
152 193 }
153 194
154 -.ayg-active .ayg-editor-section-header .dashicons-minus {
155 - display: inline-block;
195 +.ayg-editor .ayg-active .ayg-editor-section-header .dashicons-minus {
196 + display: flex;
156 197 }
157 198
158 -.ayg-editor-controls {
159 - margin: -1px 0 0 0;
160 - padding: 10px;
161 - 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;
162 207 }
163 208
164 209 .ayg-editor-control {
165 - margin-bottom: 15px;
210 + display: flex;
211 + flex-direction: column;
212 + gap: 0.25em;
166 213 }
167 214
168 -.ayg-editor-control label {
169 - display: block;
170 - 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;
171 221 }
172 222
173 -.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 {
174 228 display: inline-block;
175 229 }
176 230
177 -.ayg-editor-control-playlist,
178 -.ayg-editor-control-channel,
179 -.ayg-editor-control-username,
180 -.ayg-editor-control-search,
181 -.ayg-editor-control-video,
182 -.ayg-editor-control-videos,
183 -.ayg-editor-control-order,
184 -.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 {
185 252 display: none;
186 253 }
187 254
188 255 .ayg-editor-field-type-playlist .ayg-editor-control-playlist {
189 - display: block;
256 + display: flex;
190 257 }
191 258
192 -.ayg-editor-field-type-channel .ayg-editor-control-channel {
193 - 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;
194 262 }
195 263
196 264 .ayg-editor-field-type-username .ayg-editor-control-username {
197 - display: block;
265 + display: flex;
198 266 }
199 267
200 268 .ayg-editor-field-type-search .ayg-editor-control-search,
201 269 .ayg-editor-field-type-search .ayg-editor-control-order,
202 270 .ayg-editor-field-type-search .ayg-editor-control-limit {
203 - display: block;
271 + display: flex;
204 272 }
205 273
206 274 .ayg-editor-field-type-video .ayg-editor-control-video {
207 - display: block;
275 + display: flex;
208 276 }
209 277
210 -.ayg-editor-field-type-video .ayg-editor-section-gallery {
278 +.ayg-editor-field-type-video .ayg-editor-control-autoadvance {
211 279 display: none;
212 280 }
213 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 +
214 290 .ayg-editor-field-type-videos .ayg-editor-control-videos {
215 - display: block;
291 + display: flex;
216 292 }
217 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 +
218 311 /*----------------------------------------------------------------------------------------------
219 312 *
220 - * Shortcode Builder
313 + * Block
221 314 *
222 315 *--------------------------------------------------------------------------------------------*/
223 - #ayg-media-button .dashicons:before {
224 - color: #FFF;
316 +.automatic-youtube-gallery-block-panel .components-panel__row {
317 + margin-bottom: 1.25em;
225 318 }
226 319
227 -#ayg-shortcode-builder {
228 - position: relative;
229 - width: auto;
230 - max-width: 500px;
231 - margin: 32px auto;
232 - padding: 20px;
233 - background: #FFF;
320 +.automatic-youtube-gallery-block-panel .components-panel__row .components-base-control {
321 + width: 100%;
234 322 }
235 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 +
236 348 /*----------------------------------------------------------------------------------------------
237 349 *
238 - * Block
350 + * Widget
239 351 *
240 352 *--------------------------------------------------------------------------------------------*/
241 - .ayg-block-panel label {
242 - font-weight: 500;
243 - }
353 +.widget-inside .ayg-editor {
354 + margin-top: 1em;
355 +}
244 356
245 357 /*----------------------------------------------------------------------------------------------
246 358 *
247 - * Widget
359 + * Elementor
248 360 *
249 361 *--------------------------------------------------------------------------------------------*/
250 - .widget .ayg-editor {
251 - margin-bottom: 15px;
252 - }
253 -
254 - .widget .ayg-editor .description {
255 - padding: 5px 0 !important;
256 - word-break: break-word;
257 - }
362 +#elementor-controls .ayg-editor-section-header {
363 + padding: 0.35em 0.5em;
364 +}