PluginProbe ʕ •ᴥ•ʔ
Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel / trunk
Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel vtrunk
trunk 1.10.3 2.0.24 2.1.34 2.2.44 2.3.3 2.4.32 3.0.6 3.1.11 3.1.12 3.1.13 3.1.20 3.1.25 3.1.26 3.1.26.1 3.1.26.2
foogallery / css / admin-foogallery.css
foogallery / css Last commit date
admin-foogallery-gallery-piles.css 7 months ago admin-foogallery.css 7 months ago admin-page-foogallery-extensions.css 7 months ago admin-page-foogallery-help.css 7 months ago admin-page-foogallery-settings.css 7 months ago admin-tinymce.css 7 months ago foogallery-foovideo-overrides.css 7 months ago foogallery.admin.datasources.css 7 months ago foogallery.admin.min.css 4 years ago foogallery.admin.template.css 7 months ago
admin-foogallery.css
1267 lines
1 :root {
2 --foogallery-color-wp-primary: #2271b1;
3 --foogallery-color-pro-starter: #1E8CBA;
4 --foogallery-color-pro-expert: #31be4d;
5 --foogallery-color-pro-commerce: #B0459D;
6
7 /* 50% transparent colors */
8 --foogallery-color-wp-primary-50: rgba(from var(--foogallery-color-wp-primary) R G B / 50%);
9 --foogallery-color-pro-starter-50: rgba(from var(--foogallery-color-pro-starter) R G B / 50%);
10 --foogallery-color-pro-expert-50: rgba(from var(--foogallery-color-pro-expert) R G B / 50%);
11 --foogallery-color-pro-commerce-50: rgba(from var(--foogallery-color-pro-commerce) R G B / 50%);
12
13 /* Fully transparent colors - used for animations like pulse */
14 --foogallery-color-wp-primary-0: rgba(from var(--foogallery-color-wp-primary) R G B / 0%);
15 --foogallery-color-pro-starter-0: rgba(from var(--foogallery-color-pro-starter) R G B / 0%);
16 --foogallery-color-pro-expert-0: rgba(from var(--foogallery-color-pro-expert) R G B / 0%);
17 --foogallery-color-pro-commerce-0: rgba(from var(--foogallery-color-pro-commerce) R G B / 0%);
18 }
19
20 .foogallery-attachments-list .add-attachment {
21 background: #ddd;
22 border: #888 1px dashed;
23 position: relative;
24 float: left;
25 padding: 0;
26 color: #464646;
27 list-style: none;
28 text-align: center;
29 -webkit-user-select: none;
30 -moz-user-select: none;
31 -ms-user-select: none;
32 -o-user-select: none;
33 user-select: none;
34 }
35
36 .foogallery-attachments-list .add-attachment a {
37 display: table-cell;
38 vertical-align: middle;
39 height: 150px;
40 text-align: center;
41 width: 150px;
42 color:#666;
43 font-weight: bold;
44 text-decoration: none;
45 }
46
47 .foogallery-attachments-list .add-attachment a:hover {
48 color:#444;
49 }
50
51 .foogallery-attachments-list .add-attachment a div.dashicons {
52 font-size:50px;
53 width: 50px;
54 height: 50px;
55 }
56
57 .foogallery-attachments-list .add-attachment a span {
58 display: block;
59 }
60
61
62 .foogallery-attachments-list .attachment-preview,
63 .foogallery-attachments-list .attachment-preview .thumbnail {
64 width: 150px;
65 height: 150px;
66 cursor:move;
67 }
68
69 .foogallery-attachments-list .attachment {
70 border: transparent 1px solid;
71 box-shadow: none !important;
72 width: auto !important;
73 padding: 0 !important;
74 }
75
76 .foogallery-attachments-list .attachment.placeholder {
77 width: 150px !important;
78 height: 150px;
79 border: #1e8cbe 1px dashed;
80 background: #eee;
81 }
82
83 .foogallery-attachments-list li {
84 margin: 0px 10px 10px 0px !important;
85 }
86
87 .foogallery-attachments-list .attachment.ui-sortable-helper {
88 opacity: 0.5;
89 }
90
91 .foogallery-attachments-list .attachment.ui-sortable-helper:hover .close {
92 display: none;
93 }
94
95 .foogallery-attachments-list input.describe {
96 margin:0;
97 width: 150px;
98 font-size: 12px;
99 }
100
101 .foogallery-attachments-list .attachment .attachment-preview a {
102 display: none;
103 position: absolute;
104 padding: 0;
105 font-size: 20px;
106 line-height: 20px;
107 text-align: center;
108 text-decoration: none;
109 background-color: #444;
110 border-top-right-radius: 50%;
111 border-top-left-radius: 50%;
112 border-bottom-right-radius: 50%;
113 border-bottom-left-radius: 50%;
114 }
115
116 .foogallery-attachments-list .attachment .attachment-preview:hover a {
117 display: block;
118 }
119
120 .foogallery-attachments-list .attachment .attachment-preview a span {
121 color:#fff;
122 }
123
124 .foogallery-attachments-list .attachment .attachment-preview a:hover span {
125 color:#ddd;
126 }
127
128 .foogallery-attachments-list .attachment .attachment-preview a.remove {
129 top: 5px;
130 right: 5px;
131 }
132
133 .foogallery-attachments-list .attachment .attachment-preview a.info {
134 top: 5px;
135 left: 5px;
136 }
137
138 .foogallery_template_field td {
139 padding-bottom: 20px;
140 }
141
142 .foogallery_template_field th {
143 vertical-align: top;
144 text-align: left;
145 padding: 0.3em 10px 0;
146 }
147 .rtl .foogallery_template_field th {
148 text-align: right;
149 }
150
151 .foogallery_template_field textarea {
152 min-width: 500px;
153 min-height: 100px;
154 width: 100%;
155 }
156
157 .foogallery_template_field.foogallery_template_field_type-help {
158 border-bottom: none;
159 }
160
161 .foogallery_template_field.foogallery_template_field_type-help td {
162 padding-bottom: 0;
163 }
164
165 .foogallery_template_field.foogallery_template_field_type-icon td {
166 padding-bottom: 0;
167 }
168
169 .foogallery_metabox_field-icon label {
170 display:inline-block;
171 margin-right:10px;
172 border:solid 3px transparent;
173 background:#aaa;
174 border-radius: 3px;
175 -moz-border-radius: 3px;
176 -webkit-border-radius: 3px;
177 padding:5px;
178 line-height: 0;
179 margin-bottom: 10px;
180 }
181
182 .foogallery_metabox_field-icon input:checked + label {
183 border:solid 3px #444;
184 background: #888;
185 }
186
187 .foogallery_metabox_field-icon label:hover {
188 border:solid 3px #444;
189 }
190
191 .foogallery_template_field.foogallery_template_field_type-htmlicon td {
192 padding-bottom: 0;
193 }
194
195 .foogallery_metabox_field-htmlicon label {
196 display:inline-block;
197 margin-right:10px;
198 border:solid 3px transparent;
199 background:#aaa;
200 border-radius: 3px;
201 -moz-border-radius: 3px;
202 -webkit-border-radius: 3px;
203 padding:5px;
204 line-height: 0;
205 margin-bottom: 10px;
206 cursor: pointer;
207 }
208
209 .foogallery_template_field_id-lightbox_custom_button_theme .foogallery_metabox_field-htmlicon label,
210 .foogallery_template_field_id-lightbox_custom_button_highlight .foogallery_metabox_field-htmlicon label
211 {
212 padding:0px;
213 }
214
215 .foogallery_metabox_field-htmlicon input:checked + label {
216 border:solid 3px #444;
217 background: #888;
218 }
219
220 .foogallery_metabox_field-htmlicon label:hover {
221 border:solid 3px #444;
222 }
223
224 .foogallery_metabox_field-thumb_size label {
225 vertical-align: baseline;
226 }
227
228 .foogallery_metabox_field-thumb_size input[type="number"] {
229 margin-right: 10px;
230 margin-left: 10px;
231 }
232
233 .foogallery_template_field_type-text input[type="text"] {
234 width: 100%;
235 }
236
237 .foogallery_template_field_type-text input.small-text {
238 width: 65px;
239 height: 28px;
240 line-height: 1;
241 }
242
243 #foogallery_pages ul li:hover .row-actions { visibility: visible; }
244
245 .foogallery-shortcode {
246 text-align: center;
247 }
248
249 .foogallery-shortcode input {
250 cursor: pointer;
251 text-align: center;
252 padding: 10px;
253 font-family: "courier new", courier;
254 border: none;
255 box-shadow: none;
256 background: #efefef;
257 }
258
259 .wp-list-table .foogallery-shortcode {
260 cursor: pointer;
261 font-size: 1em;
262 border: none;
263 box-shadow: none;
264 background: #efefef;
265 font-family: "courier new", courier;
266 }
267
268 .foogallery-shortcode-message {
269 font-style: italic;
270 color: #2EA2CC !important;
271 }
272
273 .foogallery-help {
274 position: relative;
275 display: block;
276 line-height: 19px;
277 padding: 10px;
278 text-align: left;
279 background-color: #F4F4FF;
280 box-shadow: 0px 0px 2px #1E8CBA88;
281 -webkit-box-shadow: 0px 0px 2px #1E8CBA88;
282 border-radius: 10px;
283 margin-bottom: 10px;
284 }
285
286 .foogallery-help .dashicons {
287 color: #1E8CBA;
288 }
289
290 .foogallery-help h4 {
291 display: inline-block;
292 margin: 0;
293 color: #1E8CBA;
294 }
295
296 .foogallery-help p {
297 display: inline;
298 margin: 0;
299 }
300
301 .foogallery-help h4 + p {
302 display: block;
303 margin: 5px 0 0 22px;
304 }
305
306 .foogallery-help p code {
307 font-size: 12px;
308 }
309
310 .rtl .foogallery-help {
311 text-align: right;
312 }
313
314 .foogallery-settings-line-height2 .foogallery-help p {
315 line-height: 2;
316 }
317
318 .foogallery-warning {
319 box-shadow: 0px 0px 2px #dba617;
320 -webkit-box-shadow: 0px 0px 2px #dba617;
321 background-color: #fffcf4;
322 }
323
324 .foogallery-warning .dashicons,
325 .foogallery-warning h4 {
326 color: #dba617;
327 }
328
329 tr.foogallery_template_field[data-foogallery-hidden] {
330 display: none;
331 }
332
333 tr.foogallery_template_field[data-foogallery-invisible] {
334 display: none;
335 }
336
337 .foogallery_template_field_type-promo .foogallery-promo {
338 position: relative;
339 display: block;
340 font-size: 14px;
341 line-height: 19px;
342 padding: 10px 10px 10px 40px;
343 text-align: left;
344 background-color: #f7fff4;
345 box-shadow: 0px 0px 2px #31be4d88;
346 -webkit-box-shadow: 0px 0px 2px #31be4d88;
347 border-radius: 10px;
348 margin-bottom: 10px;
349 }
350
351
352 .rtl .foogallery_template_field_type-promo .foogallery-promo {
353 padding: 11px 40px 11px 10px;
354 text-align: right;
355 margin: 2px 0 0 5px;
356 }
357
358 .foogallery_template_field_type-promo.foogallery_promo_prostarter .foogallery-promo {
359 border-color: #3397C1;
360 background-color: #f6fffe;
361 box-shadow: 0px 0px 2px #3397C188;
362 -webkit-box-shadow: 0px 0px 2px #3397C188;
363 }
364
365 .foogallery_template_field_type-promo.foogallery_promo_commerce .foogallery-promo {
366 border-color: #B0459D;
367 background-color: #fdf6ff;
368 box-shadow: 0px 0px 2px #B0459D88;
369 -webkit-box-shadow: 0px 0px 2px #B0459D88;
370 }
371
372 .foogallery_template_field_type-promo .foogallery-promo:before {
373 /* content: "\f313"; award */
374 content: "\f155"; /* star */
375 font: 400 30px/1 dashicons !important;
376 speak: none;
377 color: #31be4d;
378 display: inline-block;
379 -webkit-font-smoothing: antialiased;
380 -moz-osx-font-smoothing: grayscale;
381 position: absolute;
382 left: 5px;
383 margin-top: -5px;
384 height: 1em;
385 }
386
387 .rtl .foogallery_template_field_type-promo .foogallery-promo:before {
388 left: auto;
389 right: 5px;
390 }
391
392 .foogallery_template_field_type-promo.foogallery_promo_prostarter .foogallery-promo:before {
393 color: #3397C1;
394 }
395
396 .foogallery_template_field_type-promo.foogallery_promo_commerce .foogallery-promo:before {
397 color: #B0459D;
398 }
399
400 #post-body.columns-2 #postbox-container-1 .foogallery-promo {
401 padding-left: 11px;
402 margin-left: 5px;
403 }
404 .rtl #post-body.columns-2 #postbox-container-1 .foogallery-promo {
405 padding-right: 11px;
406 margin-right: 5px;
407 }
408
409 #post-body.columns-2 #postbox-container-1 .foogallery-promo:before {
410 content: '';
411 }
412
413 .foogallery_template_field_type-promo .foogallery-promo .button-primary {
414 background: #1d7b30;
415 border-color: #1d7b30;
416 margin-right: 10px;
417 }
418 .rtl .foogallery_template_field_type-promo .foogallery-promo .button-primary {
419 margin-left: 10px;
420 margin-right: 0;
421 }
422
423 .foogallery_template_field_type-promo .foogallery-promo .button-secondary {
424 border-color: #1d7b30;
425 color: #1d7b30;
426 }
427
428 .foogallery_template_field_type-promo.foogallery_promo_prostarter .foogallery-promo .button-primary {
429 background: #3397C1;
430 border-color: #3397C1;
431 }
432
433 .foogallery_template_field_type-promo.foogallery_promo_prostarter .foogallery-promo .button-secondary {
434 border-color: #3397C1;
435 color: #3397C1;
436 }
437
438 .foogallery_template_field_type-promo.foogallery_promo_commerce .foogallery-promo .button-primary {
439 background: #B0459D;
440 border-color: #B0459D;
441 }
442
443 .foogallery_template_field_type-promo.foogallery_promo_commerce .foogallery-promo .button-secondary {
444 border-color: #B0459D;
445 color: #B0459D;
446 }
447
448 .foogallery_template_field_promo th .dashicons {
449 color: #31be4d;
450 }
451
452 .foogallery_metabox_field-radio label.foogallery-promo i {
453 font: 400 15px/1 dashicons !important;
454 speak: none;
455 color: #31be4d;
456 vertical-align: inherit;
457 padding-left: 2px;
458 }
459
460 .foogallery_metabox_field-radio label.foogallery-promo-prostarter i {
461 font: 400 15px/1 dashicons !important;
462 speak: none;
463 color: #3397C1;
464 vertical-align: inherit;
465 padding-left: 2px;
466 }
467
468 .foogallery_metabox_field-radio label.foogallery_promo_commerce i {
469 font: 400 15px/1 dashicons !important;
470 speak: none;
471 color: #B0459D;
472 vertical-align: inherit;
473 padding-left: 2px;
474 }
475
476 /** <gallery settings styling overrides> **/
477
478 .foogallery-metabox-settings {
479 width: 100%;
480 border-collapse: collapse;
481 }
482
483 .foogallery-metabox-settings th {
484 font-weight: 500;
485 padding: 10px;
486 width: 180px;
487 text-align: right;
488 border-right: solid 1px #eee;
489 }
490
491 .foogallery-metabox-settings td {
492 padding: 10px;
493 }
494
495 .foogallery_metabox_field-select select {
496 min-width: 250px;
497 }
498
499 .foogallery-thumbsize-crop {
500 margin-top: 10px;
501 }
502
503 .foogallery_metabox_field-checkboxlist > input,
504 .foogallery_metabox_field-checkboxlist > label {
505 margin-bottom: 10px;
506 display: inline-block;
507 }
508
509 .foogallery_metabox_field-checkboxlist input[type="checkbox"] {
510 margin: 0 0 10px 0;
511 }
512
513 .foogallery-metabox-settings .foogallery-settings-description {
514 color: #aaa;
515 font-style: italic;
516 margin: 0.7em 0 0 0;
517 font-size: 0.9em;
518 }
519
520 .foogallery-metabox-settings .foogallery_template_field_type-htmlicon .foogallery-settings-description {
521 margin: 0;
522 }
523
524 .foogallery-metabox-settings .foogallery-settings-help {
525 color: #aaa;
526 }
527
528 /** </gallery settings styling overrides> **/
529
530 /* <Gallery Settings Radio Fields> */
531
532 .foogallery_metabox_field-radio {
533 display: flex;
534 flex-wrap: wrap;
535 flex-direction: row;
536 gap: 10px;
537 }
538
539 .foogallery_metabox_field-radio label {
540 min-width: 6em;
541 }
542
543 .foogallery-radios-8em .foogallery_metabox_field-radio label {
544 min-width: 8em;
545 }
546
547 .foogallery-radios-10em .foogallery_metabox_field-radio label {
548 min-width: 10em;
549 }
550
551 .foogallery-radios-12em .foogallery_metabox_field-radio label {
552 min-width: 12em;
553 }
554
555 .foogallery-radios-stacked .foogallery_metabox_field-radio label {
556 width: 100%; /* the label will be 100%, which will stack them */
557 }
558
559 /* </Gallery Settings Radio Fields> */
560
561 .foogallery_metabox_custom_css {
562 width: 100%;
563 height: 10em;
564 }
565
566 .foo-nav-tabs a:focus {
567 box-shadow: none;
568 outline: 0;
569 }
570
571 .foogallery-thumbnail-preview {
572 display: inline-block;
573 }
574
575 #foogallery_apply_retina_support_container {
576 margin-top: 5px;
577 }
578
579 .widefat th.column-icon {
580 width: 60px;
581 }
582
583 #foogallery_settings .inside {
584 margin: 0;
585 padding: 0;
586 }
587 /** Balloon.css **/
588 button[data-balloon]{overflow:visible}[data-balloon]{position:relative}[data-balloon]:after,[data-balloon]:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;pointer-events:none;-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;bottom:100%;left:50%;position:absolute;z-index:10;-webkit-transform:translate(-50%,10px);-ms-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top}[data-balloon]:after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);font-size:12px;padding:.5em 1em;white-space:nowrap;margin-bottom:11px}[data-balloon]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:6px;width:18px;content:"";margin-bottom:5px}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;pointer-events:auto;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon-pos=down]:after,[data-balloon-pos=down]:before{bottom:auto;left:50%;top:100%;-webkit-transform:translate(-50%,-10px);-ms-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon-pos=down]:after{margin-top:11px}[data-balloon-pos=down]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:6px;width:18px;margin-top:5px;margin-bottom:0}[data-balloon-pos=down]:hover:after,[data-balloon-pos=down]:hover:before,[data-balloon-pos=down][data-balloon-visible]:after,[data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-balloon-pos=left]:after,[data-balloon-pos=left]:before{bottom:auto;left:auto;right:100%;top:50%;-webkit-transform:translate(10px,-50%);-ms-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon-pos=left]:after{margin-right:11px}[data-balloon-pos=left]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:18px;width:6px;margin-right:5px;margin-bottom:0}[data-balloon-pos=left]:hover:after,[data-balloon-pos=left]:hover:before,[data-balloon-pos=left][data-balloon-visible]:after,[data-balloon-pos=left][data-balloon-visible]:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-balloon-pos=right]:after,[data-balloon-pos=right]:before{bottom:auto;left:100%;top:50%;-webkit-transform:translate(-10px,-50%);-ms-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon-pos=right]:after{margin-left:11px}[data-balloon-pos=right]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:18px;width:6px;margin-bottom:0;margin-left:5px}[data-balloon-pos=right]:hover:after,[data-balloon-pos=right]:hover:before,[data-balloon-pos=right][data-balloon-visible]:after,[data-balloon-pos=right][data-balloon-visible]:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-balloon-length]:after{white-space:normal}[data-balloon-length=small]:after{width:80px}[data-balloon-length=medium]:after{width:150px}[data-balloon-length=large]:after{width:260px}[data-balloon-length=xlarge]:after{width:90vw}@media screen and (min-width:768px){[data-balloon-length=xlarge]:after{width:380px}}[data-balloon-length=fit]:after{width:100%}
589
590 /** Balloon.css overrides **/
591 [data-balloon]:after,
592 [data-balloon]:before {
593 text-align: center;
594 line-height: 1.2em;
595 }
596
597 .foogallery-items-view-switch-container.foogallery-hidden {
598 display: none;
599 }
600
601 .foogallery-items-view-switch-container {
602 display: inline-flex;
603 margin: 0 10px;
604 }
605
606 .foogallery-items-view-switch-container .spinner {
607 margin: 2px 10px 0;
608 }
609
610 .foogallery-items-view-switch {
611 vertical-align: middle;
612 display: inline-block;
613 }
614
615 .foogallery-items-view-switch a {
616 font-size: 11px;
617 padding: 4px 10px;
618 line-height: 12px;
619 border: 1px solid #2271b1;
620 float: left;
621 display: inline-block;
622 text-decoration: none;
623 margin: 0;
624 border-radius: 3px;
625 text-align: center;
626 white-space: nowrap;
627 vertical-align: middle;
628 -ms-touch-action: manipulation;
629 touch-action: manipulation;
630 cursor: pointer;
631 -webkit-user-select: none;
632 -moz-user-select: none;
633 -ms-user-select: none;
634 user-select: none;
635 /*background: #f7f7f7;*/
636 /*color: #555;*/
637
638 color: #2271b1;
639 background: #f6f7f7;
640 }
641 .foogallery-items-view-switch a:hover {
642 background: #f0f0f1;
643 border-color: #0a4b78;
644 color: #0a4b78;
645 }
646 .foogallery-items-view-switch a:focus {
647 box-shadow: none;
648 outline: none;
649 }
650
651 .foogallery-items-view-switch a:first-child:not(:last-child) {
652 border-top-right-radius: 0;
653 border-bottom-right-radius: 0;
654 border-right: none;
655 }
656
657 .foogallery-items-view-switch a:last-child:not(:first-child) {
658 border-top-left-radius: 0;
659 border-bottom-left-radius: 0;
660 border-left: none;
661 }
662
663 .foogallery-items-view-switch a:first-child {
664 margin-right: 0;
665 }
666
667 .foogallery-items-view-switch a.current {
668 background: #2271b1;
669 border-color: #2271b1;
670 color: #fff;
671 }
672
673 .foogallery-items-view-switch a.current:hover {
674 background: #135e96;
675 border-color: #135e96;
676 color: #fff;
677 }
678
679 .foogallery-items-view-switch a+a {
680 margin-left: -1px;
681 }
682
683 .foogallery-gallery-items-metabox-title {
684 float:none;
685 }
686
687 .foogallery_preview_container {
688 position: relative;
689 padding: 10px;
690 }
691
692 /* Header-based Viewport Controls */
693 .foogallery-items-view-switch-container {
694 display: flex;
695 align-items: center;
696 gap: 15px;
697 padding: 0;
698 }
699
700 .foogallery-preview-actions {
701 display: flex;
702 gap: 4px;
703 }
704
705 .foogallery-preview-actions button {
706 display: flex;
707 align-items: center;
708 justify-content: center;
709 padding: 0;
710 background: #fff;
711 border: none;
712 cursor: pointer;
713 transition: all 0.2s ease;
714 color: #ddd;
715 }
716
717 .foogallery-preview-actions button:hover {
718 color: #aaa;
719 }
720
721 .foogallery-preview-actions button.foogallery-preview-refresh-btn {
722 color: #aaa;
723 }
724
725 .foogallery-preview-actions button.active {
726 color: #000;
727 }
728
729 .foogallery-viewport-btn .dashicons {
730 width: 16px;
731 height: 16px;
732 font-size: 16px;
733 line-height: 1;
734 }
735
736 /* Preview Wrapper with Viewport Simulation */
737 .foogallery-preview-wrapper {
738 transition: all 0.3s ease;
739 margin: 0 auto;
740 border: 1px solid #ddd;
741 background: #fff;
742 position: relative;
743 width: 100%;
744 }
745
746 .foogallery-preview-wrapper.viewport-desktop {
747 max-width: 100% !important;
748 box-shadow: none !important;
749 border: none;
750 }
751
752 .foogallery-preview-wrapper.viewport-tablet {
753 max-width: 768px !important;
754 box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
755 }
756
757 .foogallery-preview-wrapper.viewport-mobile {
758 max-width: 375px !important;
759 box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
760 }
761
762 .foogallery-items-add {
763 padding:20px;
764 text-align: center
765 }
766 .foogallery-items-view-preview {
767 overflow: hidden;
768 }
769
770 .foogallery-items-view .button-hero .dashicons {
771 vertical-align: middle;
772 padding-right: 10px;
773 width: 24px;
774 height: 24px;
775 font-size: 24px;
776 font-weight: normal;
777 }
778 .rtl .foogallery-items-view .button-hero .dashicons {
779 padding-left: 10px;
780 padding-right: 0;
781 }
782
783 .foogallery_preview_container .foogallery {
784 visibility: visible;
785 opacity: 1;
786 transition: visibility 0.3s ease, opacity 0.3s ease;
787 }
788
789 .foogallery_preview_container.loading .foogallery {
790 /* visibility: hidden; */
791 opacity: 0.5;
792 }
793
794 .fs-submenu-item.foogallery {
795 font-size: 13px;
796 line-height: 1.2;
797 }
798
799 .foogallery_metabox_field-thumb_size_no_crop {
800 display: inline-flex;
801 align-items: center;
802 }
803
804 .foogallery_template_field_type-thumb_size_no_crop input.small-text+label {
805 margin-left: 10px;
806 }
807 .rtl .foogallery_template_field_type-thumb_size_no_crop input.small-text+label {
808 margin-left: 0;
809 margin-right: 10px;
810 }
811
812 .foogallery_template_field_type-thumb_size_no_crop label+input {
813 margin-left: 5px;
814 }
815 .rtl .foogallery_template_field_type-thumb_size_no_crop label+input {
816 margin-left: 0;
817 margin-right: 5px;
818 }
819
820 /* changes to the media modal */
821 .compat-item .compat-attachment-fields th.label label span {
822 text-align: left;
823 }
824
825 .compat-item .compat-attachment-fields td.field {
826 width: 100%;
827 margin: 0;
828 }
829
830 .foogallery-attachments-list {
831 max-height: 486px;
832 /*max-height: 324px;*/
833 /*max-height: 162px;*/
834 overflow: scroll;
835 overflow-x: hidden;
836 list-style: none;
837 border: 1px solid #ccd0d4;
838 padding: 10px;
839 }
840 .foogallery-attachments-list-bar {
841 display: flex;
842 flex-direction: row;
843 justify-content: flex-end;
844 align-items: center;
845 }
846 .foogallery-attachments-list:after,
847 .foogallery-attachments-list-bar:after {
848 content: '';
849 display: block;
850 clear: both;
851 }
852
853 .foogallery-attachments-list-bar button.alignright {
854 margin-left: 5px;
855 }
856
857 .foogallery-custom-metabox-header {
858 justify-content: flex-start !important;
859 }
860
861 .foogallery-custom-metabox-header .foogallery-template-selector {
862 margin: 0 10px;
863 }
864
865 .foogallery-custom-metabox-header .foogallery-template-selector select {
866 font-size: 13px;
867 margin: 0 6px;
868 }
869
870 .foogallery-multi-filtering-modal-close {
871 float: right;
872 margin-left: 5px !important;
873 }
874
875 #foogallery-image-edit-modal .foogallery-image-edit-main {
876 text-align: center;
877 padding: 0 0 20px;
878 }
879 #foogallery-image-edit-modal .foogallery-image-edit-meta{
880 padding: 10px 0px;
881 position: relative;
882 }
883 #foogallery-image-edit-modal .attachment-details {
884 display: grid;
885 grid-template-columns: 1fr 2fr;
886 /*grid-gap: 15px;*/
887 padding: 0;
888 background: #f0f0f1;
889 }
890 #foogallery-image-edit-modal .foogallery-image-edit-view {
891 margin-bottom: 15px;
892 }
893 /*
894 CSS for the main interaction
895 */
896 #foogallery-image-edit-modal .tabset .foogallery-img-modal-tab-wrapper > input[type="radio"] {
897 position: absolute;
898 left: -200vw;
899 }
900
901 #foogallery-image-edit-modal .tab-panel {
902 display: none;
903 padding: 30px 0;
904 }
905 #foogallery-image-edit-modal .tab-panel.active {
906 display: block;
907 }
908 #foogallery-image-edit-modal .tabset .foogallery-img-modal-tab-wrapper > label {
909 position: relative;
910 display: inline-block;
911 padding: 5px 10px 5px;
912 border: 1px solid transparent;
913 border-bottom: 0;
914 cursor: pointer;
915 font-weight: 600;
916 }
917 #foogallery-image-edit-modal .tabset .foogallery-img-modal-tab-wrapper > label:hover,
918 #foogallery-image-edit-modal .tabset .foogallery-img-modal-tab-wrapper > input:focus + label {
919 color: #06c;
920 }
921 #foogallery-image-edit-modal .tabset .foogallery-img-modal-tab-wrapper > input:checked + label {
922 border-color: #ccc;
923 border-bottom-color: rgb(204, 204, 204);
924 border-bottom: 3px solid #fff !important;
925 margin-bottom: -1.7px;
926 cursor: pointer;
927 }
928 .foogallery-image-edit-meta {
929 background-color: #fff;
930 padding: 10px;
931 }
932 #foogallery-image-edit-modal .tabset{
933 max-width: 100%;
934 padding: 0px 10px;
935 border-bottom: 1px solid #ccc;
936 }
937
938 #foogallery-image-edit-modal .media-frame-title h1 {
939 float: left;
940 }
941 #foogallery-image-edit-modal .media-frame-title .attachment-modal-autosave {
942 float: right;
943 display: inline-block;
944 margin: 15px;
945 }
946 #foogallery-image-edit-modal .media-frame-title .attachment-modal-autosave label {
947 vertical-align: text-bottom;
948 }
949
950 #foogallery-panel-main select {
951 margin: 0px 8px;
952 }
953 #foogallery-panel-taxonomies label{
954 margin-bottom: 10px;
955 display: block;
956 }
957 #foogallery-panel-taxonomies li {
958 position: relative;
959 float: left;
960 margin-right: 8px;
961 margin-bottom: 10px;
962 }
963 #foogallery-image-edit-modal .tab-panels #foogallery-panel-taxonomies .taxonomy_add input {
964 width: 100px;
965 margin-right: 5px !important;
966 float: left;
967 min-height: 26px;
968 font-size: 11px;
969 margin-top: 0;
970 }
971 #foogallery-panel-taxonomies .taxonomy_add a, #foogallery-panel-taxonomies .taxonomy_remove a {
972 box-shadow: none;
973 }
974 #foogallery-panel-thumbnails label {
975 display: inline-block;
976 vertical-align: text-bottom;
977 margin-right: 30px;
978 }
979 #foogallery-panel-thumbnails #foogallery_crop_pos {
980 display: inline-block;
981 vertical-align: text-top;
982 margin-bottom: 20px;
983 }
984 #foogallery-panel-watermark-preview {
985 margin-bottom: 20px;
986 display: none;
987 }
988 #foogallery-panel-watermark-preview label {
989 margin-bottom: 10px;
990 display: block;
991 }
992 .foogallery-panel-info-inner{
993 background: #f6f7f7;
994 padding: 10px;;
995 }
996 #foogallery-image-edit-modal .attachment-details .setting .name {
997 font-weight: 600;
998 }
999 #foogallery-image-edit-modal .attachment-details .copy-to-clipboard-container {
1000 margin-left: 0;
1001 margin-bottom: 15px;
1002 padding: 0;
1003 }
1004 #foogallery-image-edit-modal .foogallery-attachments-list-bar {
1005 margin-top: 20px;
1006 }
1007
1008 #foogallery_clear_img_thumb_cache, #foogallery-img-modal-alternate-image-delete {
1009 background: #d63638;
1010 border-color: #d63638;
1011 }
1012 #foogallery-image-edit-modal .not-loaded .spinner.is-active{
1013 margin: 10px;
1014 }
1015 .foogallery-img-modal-tab-wrapper {
1016 display: inline-block;
1017 }
1018 #foogallery-image-edit-modal .tab-panels .settings span.setting {
1019 display: grid;
1020 grid-template-columns: 35% auto;
1021 grid-gap: 30px;
1022 }
1023 #foogallery-image-edit-modal .tab-panels .settings span.setting.has-description {
1024 margin-bottom: 0px;
1025 }
1026 #foogallery-image-edit-modal .tab-panels .settings .description {
1027 padding-left: calc(35% + 30px);
1028 float: none;
1029 width: auto;
1030 }
1031 #foogallery-image-edit-modal .tab-panels .settings span.setting > *:not(label) {
1032 width: calc(100% - 10px);
1033 box-sizing: border-box;
1034 max-width: 100%;
1035 margin-left: 0px !important;
1036 margin-right: 0px !important;
1037 }
1038 #foogallery-image-edit-modal .tab-panels .settings span.setting input,
1039 #foogallery-image-edit-modal .tab-panels .settings span.setting textarea,
1040 #foogallery-image-edit-modal .tab-panels .settings span.setting select {
1041 margin: 0;
1042 }
1043 #foogallery-image-edit-modal .tab-panels .settings span.setting .setting-with-buttons {
1044 display: flex;
1045 flex-wrap: nowrap;
1046 grid-template-columns: unset;
1047 grid-gap: unset;
1048 }
1049
1050 #foogallery-image-edit-modal .tab-panels .settings span.setting .setting-with-buttons input {
1051 width: 100%;
1052 }
1053
1054 #foogallery-image-edit-modal .tab-panels .settings span.setting .setting-with-buttons > div {
1055 display: flex;
1056 }
1057
1058 #foogallery-image-edit-modal .tab-panels .settings span.setting .setting-with-buttons > div > button {
1059 margin-left: 5px;
1060 }
1061
1062 #foogallery-image-edit-modal .tab-panels .settings span.setting span {
1063 text-align: left;
1064 }
1065 #foogallery-image-edit-modal .tab-panels {
1066 padding: 0px 10px;
1067 }
1068 #foogallery-image-edit-modal .tab-panels .settings span.setting input[type="radio"] {
1069 width: auto;
1070 margin: 8px 3px 0 !important;
1071 }
1072 #foogallery-image-edit-modal .attachment-details #foogallery-panel-taxonomies .setting .name {
1073 padding-top: 5px;
1074 }
1075 #foogallery-panel-watermark .attachment_protection_generate {
1076 float: left;
1077 }
1078 .foogallery-modal-footer-wrap {
1079 text-align: right;
1080 margin-bottom: 10px;
1081 margin-right: 20px;
1082 }
1083 #foogallery-panel-watermark-preview.watermark-preview-show {
1084 display: block;
1085 }
1086 #foogallery-panel-watermark-preview a:focus {
1087 outline: none;
1088 box-shadow: none;
1089 }
1090 .foogallery-modal-footer-wrap {
1091 text-align: right;
1092 margin-bottom: 10px;
1093 margin-right: 20px;
1094 }
1095 .foogallery-image-edit-footer {
1096 position: absolute;
1097 bottom: 10px;
1098 width: 100%;
1099 right: 10px;
1100 text-align: right;
1101 }
1102 .foogallery-image-edit-footer .spinner {
1103 margin-top: 5px;
1104 float: unset;
1105 }
1106 #attachments-data-save-btn {
1107 float: right;
1108 }
1109 #foogallery-panel-taxonomies ul {
1110 margin: 0;
1111 padding: 0;
1112 }
1113 #foogallery-panel-taxonomies ul:after {
1114 content: '';
1115 display: block;
1116 clear: both;
1117 }
1118 #foogallery-image-edit-modal .media-modal-close {
1119 border-left: 1px solid #dcdcde;
1120 }
1121 #foogallery-panel-info .foogallery-panel-info-inner {
1122 text-align: left;
1123 padding: 10px 20px;
1124 column-count: 2;
1125 column-rule: 2px solid #000;
1126 column-gap: 50px;
1127 margin-bottom: 20px;
1128 -webkit-column-break-inside: avoid;
1129 page-break-inside: avoid;
1130 break-inside: avoid;
1131 column-fill: balance;
1132 }
1133 .foogallery-panel-info-inner > div {
1134 webkit-column-break-inside: avoid;
1135 page-break-inside: avoid;
1136 break-inside: avoid;
1137 }
1138 .foogallery-modal-info-fields * {
1139 vertical-align: middle;
1140 font-size: 13px;
1141 }
1142 .foogallery-modal-info-fields label {
1143 font-weight: 600;
1144 }
1145 #foogallery-img-modal-alternate-image-delete {
1146 background-color: #f6f7f7;
1147 color: #2271b1;
1148 border: 1px solid #2271b1;
1149 }
1150 #foogallery-img-modal-alternate-image-delete:hover {
1151 color: #0a4b78;
1152 background-color: #f0f0f1;
1153 border-color: #0a4b78;
1154 }
1155 #foogallery-image-edit-modal .tab-panels .settings span.setting.alternate-image-upload-settings {
1156 grid-template-columns: 1fr;
1157 }
1158 #foogallery-image-edit-modal .tab-panels .alternate-image-upload-wrap {
1159 margin-left: 43px;
1160 }
1161 #foogallery-image-edit-modal .tab-panels .settings span.setting.override-thumbnail, #foogallery-image-edit-modal .tab-panels .settings span.setting.override-thumbnail-preview, #foogallery-image-edit-modal .tab-panels .settings span.setting.alternate-image-delete {
1162 display: none;
1163 }
1164 #foogallery-image-edit-modal .tab-panels .settings span.setting.override-thumbnail.is-override-thumbnail, #foogallery-image-edit-modal .tab-panels .settings span.setting.override-thumbnail-preview.is-override-thumbnail, #foogallery-image-edit-modal .tab-panels .settings span.alternate-image-delete.is-override-thumbnail {
1165 display: grid;
1166 }
1167
1168 .foogallery-feature-promo {
1169 position: relative;
1170 padding-left: 40px;
1171 vertical-align: middle;
1172 flex: 1;
1173 line-height: 2;
1174 }
1175
1176 .foogallery-feature-promo:before {
1177 content: "\f348";
1178 font: 400 30px/1 dashicons !important;
1179 speak: none;
1180 color: #2271b1;
1181 display: inline-block;
1182 -webkit-font-smoothing: antialiased;
1183 -moz-osx-font-smoothing: grayscale;
1184 position: absolute;
1185 left: 5px;
1186 height: 1em;
1187 }
1188
1189 .foogallery-gallery-notice .dashicons {
1190 color: #00d0ff;
1191 }
1192
1193 .foogallery-gallery-notice ul {
1194 margin-top: 0;
1195 }
1196
1197 .foogallery-hidden {
1198 display: none;
1199 }
1200
1201
1202 .foogallery-add-actions {
1203 display: flex;
1204 justify-content: center;
1205 align-items: stretch;
1206 gap: 18px;
1207 flex-wrap: wrap;
1208 margin: 15px 0 0;
1209 }
1210
1211 .foogallery-add-actions .button.button-hero {
1212 display: flex;
1213 flex-direction: column;
1214 align-items: center;
1215 justify-content: center;
1216 text-align: center;
1217 min-width: 160px;
1218 min-height: 120px;
1219 padding: 20px 24px;
1220 font-size: 14px;
1221 line-height: 1.4;
1222 }
1223
1224 .foogallery-add-actions .button.button-hero .dashicons {
1225 font-size: 32px;
1226 width: 32px;
1227 height: 32px;
1228 margin-bottom: 8px;
1229 }
1230
1231 .foogallery-add-actions .foogallery-add-button-label {
1232 display: block;
1233 }
1234
1235
1236 .foogallery-dropzone {
1237 display: none;
1238 border: 2px dashed #ccc;
1239 border-radius: 6px;
1240 padding: 30px;
1241 text-align: center;
1242 margin-bottom: 15px;
1243 color: #777;
1244 background: #fafafa;
1245 position: relative;
1246 transition: all 0.2s ease;
1247 }
1248 .foogallery-dropzone.visible { display: block; animation: fadeIn 0.15s ease; }
1249 .foogallery-dropzone.drag-over {
1250 border-color: #0073aa;
1251 background: #f0f8ff;
1252 color: #0073aa;
1253 }
1254 .foogallery-dropzone .upload-progress {
1255 position: absolute;
1256 bottom: 0;
1257 left: 0;
1258 height: 4px;
1259 width: 0%;
1260 background: #0073aa;
1261 transition: width 0.2s ease;
1262 }
1263 @keyframes fadeIn {
1264 from { opacity: 0; transform: scale(0.98); }
1265 to { opacity: 1; transform: scale(1); }
1266 }
1267