PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / 2.3.1
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF v2.3.1
2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.9 2.2.8 trunk 1.10 1.3.3 1.3.4 1.3.5 1.3.5.1 1.3.5.2 1.3.6 1.3.6.1 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.5 All 103 releases
imagify / assets / css / admin.css

admin.css in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 2.3.1, at assets/css/admin.css

1,824 lines 37.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * == Utilities Classes
3 */
4
5 /* Util: Flexbox */
6 .imagify-flex {
7 display: flex;
8 }
9 .imagify-vcenter {
10 align-items: center;
11 }
12 .imagify-noshrink {
13 flex-shrink: 0;
14 }
15 .imagify-nogrow {
16 flex-grow: 0;
17 }
18
19 /* Util: dimension */
20 .imagify-wauto {
21 width: auto;
22 }
23 .imagify-hauto {
24 height: auto;
25 }
26 .imagify-full-width {
27 width: 100%;
28 }
29
30 /* Util: float */
31 .imagify-start {
32 float: left;
33 }
34 .imagify-end {
35 float: right;
36 }
37
38 /* Util: text-align */
39 .imagify-txt-start.imagify-txt-start.imagify-txt-start {
40 text-align: left;
41 }
42 .imagify-txt-center.imagify-txt-center.imagify-txt-center {
43 text-align: center;
44 }
45 .imagify-txt-end.imagify-txt-end.imagify-txt-end {
46 text-align: right;
47 }
48
49 /* Util: margin/padding */
50 .imagify-mt0.imagify-mt0 {
51 margin-top: 0;
52 }
53 .imagify-mt1.imagify-mt1 {
54 margin-top: 1em;
55 }
56 .imagify-mt2.imagify-mt2 {
57 margin-top: 2em;
58 }
59 .imagify-mt3.imagify-mt3 {
60 margin-top: 3em;
61 }
62 .imagify-mb0.imagify-mb0 {
63 margin-bottom: 0;
64 }
65 .imagify-mb1.imagify-mb1 {
66 margin-bottom: 1em;
67 }
68 .imagify-mr1.imagify-mr1 {
69 margin-right: 1em;
70 }
71 .imagify-ml2.imagify-ml2 {
72 margin-left: 2em;
73 }
74 .imagify-mr2.imagify-mr2 {
75 margin-right: 2em;
76 }
77
78 .imagify-pl0.imagify-pl0.imagify-pl0 {
79 padding-left: 0;
80 }
81 .imagify-pb0.imagify-pb0 {
82 padding-bottom: 0;
83 }
84 .imagify-pr1.imagify-pr1 {
85 padding-right: 1em;
86 }
87 .imagify-pr2.imagify-pr2 {
88 padding-right: 2em;
89 }
90
91 /* Util: Overflow */
92 .imagify-oh {
93 overflow: hidden;
94 }
95 .imagify-clear {
96 clear: both;
97 }
98 .imagify-clearfix:after,
99 .imagify-inline-options:after,
100 .imagify-settings-main-content:after,
101 .imagify-settings-section:after {
102 content: "";
103 display: table;
104 width: 100%;
105 clear: both;
106 }
107 .imagify-setting-optim-level .imagify-inline-options:after {
108 display: none;
109 }
110
111 /* Util: Dividers */
112 .imagify-divider {
113 height: 1px;
114 margin: 20px 0;
115 background: #D2D3D6;
116 }
117 .imagify-pipe {
118 display: inline-block;
119 margin: 0 .75em;
120 vertical-align: middle;
121 height: 15px;
122 width: 1px;
123 background: #979797;
124 }
125
126 /* Titles */
127 .imagify-h3-like.imagify-h3-like.imagify-h3-like {
128 margin-bottom: 0;
129 font-size: 19px;
130 font-weight: 500;
131 color: #1F2332;
132 }
133 .imagify-h4-like.imagify-h4-like.imagify-h4-like {
134 font-size: 14px;
135 font-weight: bold;
136 color: #2E3243;
137 }
138
139 /* Default counter */
140 .imagify-count.imagify-count {
141 counter-reset: num;
142 }
143 .imagify-count .imagify-count-title {
144 font-weight: bold;
145 }
146 .imagify-default-settings {
147 color: #73818c;
148 font-weight: normal;
149 }
150 .imagify-count .imagify-count-title:before {
151 counter-increment: num 1;
152 content: counter(num) ". ";
153 }
154
155 /* List counter */
156 .imagify-count-list {
157 counter-reset: listcount;
158 }
159 .imagify-count-list li {
160 display: flex;
161 align-items: center;
162 }
163 .imagify-count-list li + li {
164 margin-top: .5em;
165 }
166 .imagify-count-list li:before {
167 display: flex;
168 flex-basis: 24px;
169 flex-shrink: 0;
170 flex-grow: 0;
171 align-items: center;
172 justify-content: center;
173 margin-right: 16px;
174 border: 2px solid #40b1d0;
175 width: 24px;
176 height: 24px;
177 counter-increment: listcount 1;
178 content: counter(listcount);
179 color: #40b1d0;
180 border-radius: 50%;
181 }
182
183 /* Table layout */
184 .imagify-table {
185 display: table;
186 width: 100%;
187 }
188 .imagify-cell {
189 display: table-cell;
190 padding: 10px;
191 vertical-align: top;
192 }
193 .imagify-cell.va-top,
194 .va-top .imagify-cell {
195 vertical-align: top;
196 }
197
198 .imagify-bulk-submit .imagify-cell {
199 padding-top: 0;
200 }
201
202 /* When an "Imagify" modal is open in a page */
203 body.imagify-modal-is-open {
204 overflow: hidden;
205 }
206
207 /* Loader/Spinner */
208 .imagify-spinner {
209 display: inline-block;
210 width: 20px;
211 height: 20px;
212 margin-right: 5px;
213 vertical-align: middle;
214 background: rgba(0, 0, 0, 0) url("../images/spinner.gif") no-repeat scroll 0 0 / 20px 20px;
215 opacity: 0.7;
216 }
217 .spinner.imagify-hidden {
218 width: 0;
219 margin: 4px 0 0 0;
220 }
221
222 /* Some basic colors */
223 .imagify-primary.imagify-primary.imagify-primary {
224 color: #40b1d0;
225 }
226 .imagify-secondary.imagify-secondary.imagify-secondary,
227 .imagify-valid {
228 color: #8BC34A;
229 }
230
231 /* Informations in column (media popin, media details) */
232 .misc-pub-section.misc-pub-imagify h4 {
233 font-size: 14px;
234 margin-top: 5px;
235 margin-bottom: 0;
236 }
237
238 /* Doughnut */
239 .imagify-chart {
240 position: relative;
241 top: 1px;
242 display: inline-block;
243 vertical-align: middle;
244 }
245 .imagify-chart-container {
246 position: relative;
247 display: inline-block;
248 margin-right: 5px;
249 }
250 .imagify-chart-container canvas {
251 display: block;
252 }
253
254 /**
255 *
256 * == Settings page
257 *
258 */
259
260
261 /* Basic HTML elements for Options and Bulk pages */
262 .imagify-settings a,
263 .imagify-settings .button,
264 .imagify-settings input,
265 .imagify-welcome a,
266 .imagify-welcome .button,
267 .imagify-weolcome input {
268 -webkit-transition: all .275s;
269 transition: all .275s;
270 }
271 .imagify-settings a {
272 color: #40b1d0;
273 }
274
275 .imagify-settings,
276 .imagify-settings p,
277 .imagify-settings th {
278 color: #5F758E;
279 }
280
281 /* Buttons */
282 .imagify-main-content .button,
283 .imagify-settings-section .button,
284 .imagify-welcome .button,
285 .imagify-notice .button,
286 .imagify-button.imagify-button,
287 .imagify-button-primary.imagify-button-primary,
288 .imagify-button-secondary.imagify-button-secondary {
289 height: auto;
290 padding: 11px 22px;
291 border: 0 none;
292 font-size: 14px;
293 font-weight: 600;
294 text-transform: uppercase;
295 letter-spacing: 0.01em;
296 word-spacing: 0.01em;
297 box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
298 border-radius: 3px;
299 cursor: pointer;
300 transition: all .275s;
301 }
302
303 .button-primary.button-mini {
304 padding: 2px 10px;
305 }
306 .imagify-settings .button.button-mini-flat {
307 padding: 3px 6px 5px;
308 font-size: 12px;
309 box-shadow: none!important;
310 line-height: 1.2;
311 }
312 .imagify-settings .button.button-mini-flat:hover,
313 .imagify-settings .button.button-mini-flat:focus {
314 box-shadow: none!important;
315 }
316
317 .imagify-title .button-ghost.button-ghost,
318 .imagify-button-ghost.imagify-button-ghost {
319 padding: 2px 9px;
320 border: 1px solid #40B1D0;
321 font-size: 12px;
322 font-weight: normal;
323 color: #40B1D0;
324 background: transparent;
325 box-shadow: none;
326 }
327 .imagify-title .button-ghost.button-ghost:hover,
328 .imagify-title .button-ghost.button-ghost:focus,
329 .imagify-button-ghost.imagify-button-ghost:hover,
330 .imagify-button-ghost.imagify-button-ghost:focus {
331 border-color: transparent;
332 color: #000;
333 background: #40B1D0;
334 }
335 .imagify-button-ghost.imagify-button-ghost:hover,
336 .imagify-button-ghost.imagify-button-ghost:focus {
337 color: #FFF;
338 }
339 .imagify-button-medium.imagify-button-medium {
340 text-transform: uppercase;
341 letter-spacing: 0.1em;
342 padding: 3px 10px;
343 font-weight: bold;
344 }
345 .imagify-button-medium.imagify-button-ghost {
346 border-width: 2px;
347 }
348 [class*="imagify-"] .button .dashicons {
349 margin-right: 5px;
350 vertical-align: middle;
351 line-height: 1;
352 }
353
354 .imagify-settings .button-primary.button-primary,
355 .imagify-welcome .button-primary.button-primary,
356 .imagify-button-primary.imagify-button-primary {
357 background: #40B1D0;
358 color: #FFF;
359 box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
360 text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799!important;
361 }
362 .imagify-button-secondary.imagify-button-secondary {
363 background: #8BC34A;
364 color: #FFF;
365 box-shadow: 0 3px 0 #6F9C3B;
366 text-shadow: 0 -1px 1px #6F9C3B, 1px 0 1px #6F9C3B, 0 1px 1px #6F9C3B!important;
367 }
368 .imagify-settings .button-primary:hover,
369 .imagify-settings .button-primary:focus,
370 .imagify-welcome .button-primary:hover,
371 .imagify-welcome .button-primary:focus,
372 .imagify-button-primary.imagify-button-primary:hover,
373 .imagify-button-primary.imagify-button-primary:focus {
374 background: rgb(51, 142, 166);
375 box-shadow: 0 3px 0 rgb(31, 122, 146);
376 }
377 .imagify-button-secondary.imagify-button-secondary:hover,
378 .imagify-button-secondary.imagify-button-secondary:focus {
379 background: #6F9C3B;
380 color: #FFF;
381 }
382
383 .imagify-button-light.imagify-button-light {
384 background: #FFF;
385 color: #4a4a4a;
386 box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
387 }
388 .imagify-block-secondary .imagify-button-light.imagify-button-light {
389 color: #6F9C3B;
390 }
391 .imagify-button-light.imagify-button-light:hover,
392 .imagify-button-light.imagify-button-light:focus {
393 color: #FFF;
394 background: rgba(0, 0, 0, .2);
395 }
396
397 /* Buttons clean */
398 .button.imagify-button-clean,
399 .imagify-button-clean {
400 padding: 0;
401 background: transparent;
402 box-shadow: none;
403 }
404 .imagify-button-clean .dashicons-plus {
405 width: 32px;
406 height: 25px;
407 }
408 .imagify-button-clean .dashicons-plus:before {
409 display: flex;
410 align-items: center;
411 justify-content: center;
412 width: 25px;
413 height: 22px;
414 margin-left: 2px;
415 padding-top: 3px;
416 font-size: 17px;
417 background: #40B1D0;
418 color: #FFF;
419 transition: all .275s;
420 }
421 .button.imagify-button-clean:hover,
422 .button.imagify-button-clean:focus,
423 .button.imagify-button-clean:active,
424 .button.imagify-button-clean[disabled] {
425 background: transparent!important;
426 color: #343A49;
427 box-shadow: none;
428 }
429 .button.imagify-button-clean:hover .dashicons-plus:before,
430 .button.imagify-button-clean:focus .dashicons-plus:before {
431 background: #343A49;
432 }
433
434 /* Buttons link-like */
435 button.imagify-link-like {
436 border: 0;
437 padding: 0;
438 color: inherit;
439 text-decoration: underline;
440 font-size: 13px;
441 box-shadow: none;
442 background: transparent;
443 cursor: pointer;
444 }
445
446 /* Modifier */
447 .imagify-section-positive .imagify-button-light {
448 color: #709A41;
449 }
450 .imagify-button.imagify-button-big {
451 font-size: 15px;
452 padding: 11px 30px;
453 }
454 .imagify-button-big .dashicons {
455 font-size: 1.45em;
456 margin-right: 6px;
457 margin-left: -4px;
458 }
459
460 .imagify-settings .button .dashicons,
461 .imagify-welcome .button .dashicons,
462 .imagify-notice .button .dashicons,
463 .imagify-button.imagify-button .dashicons,
464 .imagify-button-primary.imagify-button-primary .dashicons,
465 .imagify-button-secondary.imagify-button-secondary .dashicons {
466 vertical-align: middle;
467 line-height: 1;
468 }
469
470 [class*="imagify-"] .button-text {
471 display: inline-block;
472 vertical-align: middle;
473 }
474
475 /* Exception in Media edition page and post Edition pages (insert media popin) */
476 .wp_attachment_image .imagify-button-primary,
477 .media-frame-content .imagify-button-primary {
478 padding: 0 10px 1px;
479 margin: 0 5px 2px 0;
480 font-size: 13px;
481 line-height: 26px;
482 box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
483 }
484 .wp_attachment_image .imagify-button-primary {
485 float: left;
486 }
487
488 /**
489 * == Header & Subheader & Sections
490 *
491 * (options, Welcome Notice, Bulk)
492 */
493 .imagify-title.imagify-title {
494 position: relative;
495 padding: 10px 30px;
496 font-size: 23px;
497 background: #1F2332;
498 color: #FFF;
499 }
500 .imagify-welcome .imagify-logo {
501 opacity: 1;
502 }
503 .imagify-welcome .imagify-title {
504 display: flex;
505 padding: 20px 30px;
506 }
507 .imagify-settings .imagify-title { /* (options and bulk) */
508 display: flex;
509 justify-content: space-between;
510 align-items: center;
511 }
512 .imagify-settings .imagify-logo-block {
513 display: flex;
514 align-items: center;
515 flex-shrink: 0;
516 flex-grow: 0;
517 padding: 0;
518 margin-right: 35px;
519 color: inherit;
520 }
521 .imagify-logo-block sup {
522 color: #1F2332;
523 }
524 .imagify-settings .imagify-title + .imagify-notice {
525 margin: 0;
526 border-right: 1px solid #D9D9D9;
527 padding-top: 15px;
528 padding-bottom: 15px;
529 }
530 .imagify-title .title-text {
531 font-size: 28px;
532 font-weight: bold;
533 color: #FFF;
534 }
535 .imagify-lb-icon {
536 padding-right: 18px;
537 }
538 .imagify-lb-text img {
539 margin-bottom: .15em;
540 }
541 .imagify-lb-text {
542 font-size: 23px;
543 font-weight: bold;
544 color: #FFF;
545 }
546 .imagify-logo {
547 display: block;
548 vertical-align: top;
549 opacity: .4;
550 }
551 .imagify-sub-header,
552 .imagify-sub-title.imagify-sub-title, /* heavier is better */
553 .imagify-settings div.submit,
554 .imagify-section {
555 margin: 0;
556 padding: 20px;
557 background: #F2F5F7;
558 }
559 .imagify-sub-title.imagify-sub-title,
560 .imagify-section-positive {
561 padding-left: 40px;
562 }
563 .imagify-section-positive {
564 background: #8cc152;
565 color: #FFF;
566 }
567 .imagify-section-positive p {
568 color: #FFF
569 }
570 .imagify-section-gray {
571 background: #D9E4EB;
572 }
573 .imagify-section-gray .imagify-count-title {
574 color: #4a4a4a;
575 }
576 .imagify-section p:first-child {
577 margin-top: 0;
578 }
579 .imagify-section p:last-child {
580 margin-bottom: 0;
581 }
582
583 /* Documentation link */
584 .imagify-settings .imagify-documentation-link-box {
585 display: flex;
586 padding: 12px 13px 14px;
587 border: 1px solid #40b1d0;
588 color: #E5EBEF;
589 border-radius: 3px;
590 }
591 .imagify-documentation-link-icon {
592 width: 23px;
593 height: 31px;
594 font-size: 2.6em;
595 margin-right: 15px;
596 line-height: 1.3;
597 }
598 .imagify-documentation-link-box span {
599 font-size: 12px;
600 }
601 .imagify-documentation-link-box a {
602 font-weight: bold;
603 }
604
605 @media (max-width: 1120px) {
606 .imagify-settings .imagify-title {
607 flex-wrap: wrap;
608 }
609 }
610
611 .imagify-settings-section {
612 padding: 10px 20px;
613 }
614 .imagify-account-info-col .imagify-settings-section {
615 padding-right: 0;
616 }
617 .imagify-settings-main-content,
618 .imagify-welcome .imagify-settings-section {
619 border: 1px solid #D9D9D9;
620 border-top-width: 0;
621 background: #FFF;
622 }
623
624 .imagify-settings-main-content {
625 padding-bottom: 20px;
626 }
627 .imagify-settings-main-content p,
628 .imagify-settings-main-content .imagify-setting-line {
629 font-size: 14px;
630 line-height: 1.5;
631 }
632
633 .imagify-settings-main-content .code {
634 max-height: 10em;
635 padding: 3px 5px 2px 5px;
636 overflow: auto;
637 background: #EAEAEA;
638 background: rgba(0,0,0,.07);
639 }
640
641 .imagify-settings-main-content + .imagify-settings-main-content {
642 margin-top: 20px;
643 border-top-width: 1px;
644 }
645
646 .imagify-br {
647 line-height: 2;
648 }
649
650 /* New to imagify, title */
651 p.imagify-section-title.imagify-section-title {
652 font-size: 20px;
653 margin-top: -.3em;
654 margin-bottom: -.6em;
655 }
656
657 /**
658 * == Rating (Notice + Settings)
659 */
660 .imagify-rate-us.imagify-rate-us {
661 text-align: right;
662 margin: -1em -2.4em -1em 0;
663 color: #FFF;
664 }
665 .imagify-rate-us a {
666 color: #40B1D0;
667 }
668 .imagify-rate-us .stars {
669 display: inline-block;
670 margin: 2px 0 0 10px;
671 text-decoration: none;
672 letter-spacing: .2em;
673 vertical-align: -1px;
674 }
675 .imagify-rate-us .stars .dashicons:before {
676 font-size: 18px;
677 }
678 .imagify-rate-us a:hover,
679 .imagify-rate-us a:focus {
680 color: #FEE102;
681 }
682 @media (max-width: 1220px) {
683 .imagify-rate-us.imagify-rate-us {
684 position: static;
685 margin-bottom: 0;
686 text-align: left;
687 }
688 .imagify-rate-us.imagify-rate-us br {
689 display: none;
690 }
691 .imagify-rate-us .stars {
692 display: block;
693 margin-left: 0;
694 }
695 }
696
697 /**
698 * == Messages & infos
699 */
700 .imagify-important {
701 color: #F5A623;
702 }
703 .imagify-success,
704 .imagify-settings .imagify-success {
705 color: #8BC34A;
706 }
707 .imagify-info,
708 .imagify-info a {
709 color: #7A8996;
710 font-size: 12px;
711 }
712 .imagify-info {
713 position: relative;
714 display: inline-block;
715 padding-left: 25px;
716 }
717 .imagify-info .dashicons {
718 position: absolute;
719 left: 0; top: 0;
720 color: #40B1D0;
721 }
722
723 /* Custom checkboxes in CSS */
724 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked),
725 .imagify-settings.imagify-settings [type="checkbox"]:checked,
726 .imagify-checkbox.imagify-checkbox:not(:checked),
727 .imagify-checkbox.imagify-checkbox:checked {
728 position: absolute;
729 opacity: 0.01;
730 }
731 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked):focus,
732 .imagify-settings.imagify-settings [type="checkbox"]:checked:focus,
733 .imagify-checkbox.imagify-checkbox:not(:checked):focus,
734 .imagify-checkbox.imagify-checkbox:checked:focus {
735 box-shadow: none!important; /* system value to override */
736 outline: none!important;
737 border: 0 none!important;
738 }
739
740 .imagify-settings [type="checkbox"]:not(:checked) + label,
741 .imagify-settings [type="checkbox"]:checked + label,
742 .imagify-checkbox.imagify-checkbox:not(:checked) + label,
743 .imagify-checkbox.imagify-checkbox:checked + label {
744 position: relative;
745 display: flex;
746 align-items: center;
747 min-height: 24px;
748 padding-left: 40px;
749 cursor: pointer;
750 font-size: 14px;
751 font-weight: bold;
752 color: #2E3243;
753 }
754
755 /* checkbox aspect */
756 .imagify-settings [type="checkbox"]:not(:checked) + label:before,
757 .imagify-settings [type="checkbox"]:checked + label:before,
758 .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
759 .imagify-checkbox.imagify-checkbox:checked + label:before {
760 content: '';
761 position: absolute;
762 left: 0; top: 0;
763 width: 22px; height: 22px;
764 border: 2px solid #8BA6B4;
765 background: #FFFFFF;
766 border-radius: 3px;
767 }
768 /* checked mark aspect */
769 .imagify-settings [type="checkbox"]:not(:checked) + label:after,
770 .imagify-settings [type="checkbox"]:checked + label:after,
771 .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
772 .imagify-checkbox.imagify-checkbox:checked + label:after {
773 content: "✓";
774 position: absolute;
775 font-size: 1.4em;
776 top: -2px; left: 4.5px;
777 color: #8BA6B4;
778 font-weight: normal;
779 -webkit-transition: all .2s;
780 -moz-transition: all .2s;
781 -ms-transition: all .2s;
782 transition: all .2s;
783 }
784 /* disabled aspect */
785 .imagify-settings [type="checkbox"][disabled]:not(:checked) + label:before,
786 .imagify-settings [type="checkbox"][disabled]:checked + label:before,
787 .imagify-checkbox.imagify-checkbox[disabled]:not(:checked) + label:before,
788 .imagify-checkbox.imagify-checkbox[disabled]:checked + label:before {
789 border-color: #ccc;
790 background: #ddd;
791 }
792 /* checked mark aspect changes */
793 .imagify-settings [type="checkbox"]:not(:checked) + label:after,
794 .imagify-checkbox.imagify-checkbox:not(:checked) + label:after {
795 opacity: 0;
796 -webkit-transform: scale(0);
797 -moz-transform: scale(0);
798 -ms-transform: scale(0);
799 transform: scale(0);
800 }
801 .imagify-settings [type="checkbox"]:checked + label:after,
802 .imagify-checkbox.imagify-checkbox:checked + label:after {
803 opacity: 1;
804 -webkit-transform: scale(1);
805 -moz-transform: scale(1);
806 -ms-transform: scale(1);
807 transform: scale(1);
808 }
809
810 /* medium version */
811 .medium.imagify-checkbox:not(:checked) + label:before,
812 .medium.imagify-checkbox:checked + label:before {
813 width: 22px;
814 height: 22px;
815 border-width: 1.5px;
816 border-radius: 2px;
817 margin-top: 0;
818 }
819 .medium.imagify-checkbox:not(:checked) + label:after,
820 .medium.imagify-checkbox:checked + label:after {
821 font-size: 1.1em;
822 left: -17px;
823 top: 3px;
824 }
825
826 /* mini version */
827 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:before,
828 .imagify-settings .mini[type="checkbox"]:checked + label:before,
829 .mini.imagify-checkbox:not(:checked) + label:before,
830 .mini.imagify-checkbox:checked + label:before {
831 width: 15px;
832 height: 15px;
833 border-width: 1px;
834 border-radius: 2px;
835 margin-top: 0;
836 }
837 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:after,
838 .imagify-settings .mini[type="checkbox"]:checked + label:after,
839 .mini.imagify-checkbox:not(:checked) + label:after,
840 .mini.imagify-checkbox:checked + label:after {
841 font-size: .9em;
842 left: -21px;
843 top: -0.5px;
844 }
845 /* focus aspect */
846 .imagify-settings [type="checkbox"]:not(:checked):focus + label:before,
847 .imagify-settings [type="checkbox"]:checked:focus + label:before,
848 .imagify-checkbox.imagify-checkbox:not(:checked):focus + label:before,
849 .imagify-checkbox.imagify-checkbox:checked:focus + label:before {
850 border-style: dotted;
851 border-color: #40b1d0;
852 }
853
854 /* Checkbox groups */
855 .imagify-check-group {
856 padding-left: 2px;
857 margin-bottom: 0;
858 }
859 .imagify-check-group.imagify-is-scrollable {
860 height: 15em;
861 overflow-y: auto;
862 padding: 8px;
863 margin: 1.5em 0 0 -8px;
864 background: #F4F7F9;
865 border: 1px solid #D2D3D6;
866 border-radius: 3px;
867 }
868 .imagify-is-scrollable legend + p {
869 margin-top: 0;
870 }
871 .imagify-is-scrollable [type="checkbox"]:not(:checked) + label:before,
872 .imagify-is-scrollable [type="checkbox"]:checked + label:before {
873 background: #F4F7F9;
874 }
875 .imagify-settings .imagify-check-group.imagify-check-group label {
876 color: #338EA6;
877 font-weight: 500;
878 }
879
880 /* Custom radio in CSS */
881 .imagify-inline-options {
882 position: relative;
883 display: table;
884 width: 100%;
885 max-width: 600px;
886 border-collapse: collapse;
887 }
888
889 .imagify-inline-options input[type="radio"]:not(:checked),
890 .imagify-inline-options input[type="radio"]:checked {
891 position: absolute;
892 left: 5px; top: 5px;
893 display: none;
894 }
895
896 .imagify-inline-options input[type="radio"]:not(:checked) + label,
897 .imagify-inline-options input[type="radio"]:checked + label {
898 position: relative;
899 display: table-cell;
900 padding: 13px 10px;
901 text-align: center;
902
903 font-weight: 600;
904 font-size: 16px;
905 text-transform: uppercase;
906 letter-spacing: 0.1em;
907 color: #FFF;
908 background: #2E3243;
909 box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset;
910 z-index: 2;
911 -webkit-transition: all .275s;
912 transition: all .275s;
913 cursor: pointer;
914 }
915
916 .imagify-inline-options input[type="radio"]:not(:checked) + label:first-of-type,
917 .imagify-inline-options input[type="radio"]:checked + label:first-of-type {
918 border-radius: 3px 0 0 3px;
919 }
920
921 .imagify-inline-options input[type="radio"]:not(:checked) + label:last-of-type,
922 .imagify-inline-options input[type="radio"]:checked + label:last-of-type {
923 border-radius: 0 3px 3px 0;
924 }
925
926 .imagify-inline-options input[type="radio"]:checked + label {
927 background: #8BC34A
928 }
929
930 .imagify-inline-options input[type="radio"]:disabled + label {
931 background: #ccc;
932 color: #999;
933 cursor:not-allowed;
934 }
935
936 .imagify-inline-options .imagify-info {
937 margin-top: 15px;
938 }
939
940 /**
941 * Account information columns (Settings & Bulk)
942 */
943 .imagify-col.imagify-col.imagify-account-info-col,
944 .imagify-account-info-col {
945 width: 380px;
946 max-width: 100%;
947 padding: 0 20px 0 0;
948 }
949 .imagify-col.imagify-col.imagify-shared-with-account-col,
950 .imagify-shared-with-account-col {
951 width: calc(100% - 380px);
952 padding: 0;
953 }
954
955 .imagify-account-info-col .imagify-options-title {
956 padding: 24px 26px;
957 color: #FFF;
958 background: #1F2332;
959 }
960 .imagify-block-secondary {
961 padding: 26px 26px 35px;
962 border: 1px solid #75A345;
963 background: #8BC34A;
964 border-radius: 3px;
965 color: #FFF;
966 }
967 .imagify-block-secondary.imagify-block-secondary p,
968 .imagify-account-info-col .imagify-block-secondary.imagify-block-secondary h3 {
969 color: inherit;
970 }
971 .imagify-account-info-col .imagify-col-content h3:first-child {
972 margin-top: 0;
973 }
974 .imagify-account-info-col .imagify-col-content h3 {
975 font-size: 19px;
976 }
977 .imagify-account-info-col .imagify-col-content p {
978 margin: 1.5em 0;
979 }
980 .imagify-account-info-col .imagify-col-content p:first-child {
981 margin-top: 0;
982 }
983
984 .imagify-user-plan-label {
985 float: right;
986 margin-top: -4px;
987 padding: 2px 10px;
988 border: 2px solid #40B1D0;
989 font-size: 14px;
990 text-transform: uppercase;
991 letter-spacing: 0.02em;
992 color: #40B1D0;
993 border-radius: 3px;
994 }
995
996 /* Content given after remote answer, avoid "flash" effect on content */
997 .imagify-user-plan-label:empty {
998 display: none;
999 }
1000
1001 /**
1002 * == Columns
1003 */
1004 .imagify-columns {
1005 overflow: hidden;
1006 padding: 15px 0;
1007 counter-reset: cols;
1008 }
1009 .imagify-columns [class^="col-"] {
1010 float: left;
1011 -webkit-box-sizing: border-box;
1012 -moz-box-sizing: border-box;
1013 box-sizing: border-box;
1014 }
1015 .imagify-columns .col-1-3 {
1016 width: 33.333%;
1017 padding-left: 28px;
1018 }
1019 .imagify-columns .col-2-3 {
1020 width: 66.666%;
1021 padding-left: 28px
1022 }
1023 .imagify-columns .col-1-2 {
1024 width: 50%;
1025 padding: 0 20px;
1026 }
1027
1028 @media (max-width: 830px) {
1029 .imagify-columns [class^="col-"] {
1030 float: none;
1031 margin-bottom: 1.5em;
1032 }
1033 .imagify-columns .col-1-3,
1034 .imagify-columns .col-1-2 {
1035 width: auto;
1036 padding: 0 28px;
1037 clear: both;
1038 padding-top: 1em;
1039 }
1040 }
1041
1042 /**
1043 * == Custom column & Metabox
1044 */
1045 .column-imagify_optimized_file.column-imagify_optimized_file {
1046 width: 300px;
1047 text-align: center;
1048 vertical-align: middle;
1049 }
1050 .column-imagify_optimized_file > * {
1051 max-width: 21em;
1052 margin: 0 auto;
1053 }
1054 @media (min-width: 1151px) and (max-width: 1800px) {
1055 .column-imagify_optimized_file.column-imagify_optimized_file {
1056 width: 21em;
1057 }
1058 }
1059 @media (min-width: 783px) and (max-width: 1150px) {
1060 .column-imagify_optimized_file.column-imagify_optimized_file {
1061 width: 13em;
1062 }
1063 table.media .column-title .has-media-icon ~ .row-actions.row-actions {
1064 margin-left: 0;
1065 }
1066 }
1067 @media (max-width: 782px) {
1068 table.media .column-imagify_optimized_file.column-imagify_optimized_file {
1069 text-align: left;
1070 }
1071 table.media .imagify-datas-more-action,
1072 table.media .imagify-datas-actions-links {
1073 text-align: center;
1074 }
1075 table.media .column-imagify_optimized_file > *,
1076 table.media .column-imagify_optimized_file .imagify-datas-actions-links a {
1077 max-width: 100%;
1078 margin-left: 0;
1079 }
1080 }
1081 @media (min-width: 783px) and (max-width: 1150px), (max-width: 360px) {
1082 table.media .imagify-hide-if-small {
1083 position: absolute;
1084 margin: -1px;
1085 padding: 0;
1086 height: 1px;
1087 width: 1px;
1088 overflow: hidden;
1089 clip: rect(0 0 0 0);
1090 border: 0;
1091 word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
1092 }
1093 }
1094 .compat-field-imagify .label {
1095 vertical-align: top;
1096 }
1097 .compat-field-imagify ul.imagify-datas-list {
1098 margin-top: 7px;
1099 font-size: 11px;
1100 }
1101 ul.imagify-datas-list.imagify-datas-list {
1102 margin: 0 auto;
1103 color: #555;
1104 }
1105 ul.imagify-datas-list .big {
1106 font-size: 12px;
1107 color: #40B1D0;
1108 }
1109 .imagify-data-item {
1110 overflow: hidden;
1111 }
1112 li.imagify-data-item {
1113 clear: both;
1114 margin-bottom: 2px;
1115 }
1116 ul.imagify-datas-list .imagify-data-item span.data,
1117 ul.imagify-datas-list .imagify-data-item strong {
1118 float: left;
1119 width: 38%;
1120 -webkit-box-sizing: border-box;
1121 -moz-box-sizing: border-box;
1122 box-sizing: border-box;
1123 }
1124 ul.imagify-datas-list .imagify-data-item span.data {
1125 width: 62%;
1126 padding-right: 5px;
1127 text-align: left;
1128 }
1129 .compat-field-imagify .imagify-datas-list .imagify-data-item .data {
1130 width: 130px;
1131 text-align: left;
1132 font-weight: bold;
1133 }
1134 ul.imagify-datas-list .imagify-data-item strong {
1135 text-align: left;
1136 padding-left: 5px;
1137 }
1138 .media-sidebar .imagify-datas-list .imagify-data-item .data {
1139 width: auto;
1140 float: none;
1141 }
1142 .media-sidebar .imagify-datas-list .imagify-data-item strong {
1143 display: inline-block;
1144 width: auto;
1145 float: none;
1146 }
1147 .media-sidebar .imagify-datas-list .imagify-data-item .imagify-chart {
1148 float: left;
1149 }
1150 .imagify-datas-more-action.imagify-datas-more-action {
1151 margin: .4em auto;
1152 background: linear-gradient(to bottom, transparent, transparent 49%, rgba(0,0,0,.075) 50%, rgba(0,0,0,.075) 58%, transparent 58%, transparent);
1153 }
1154 .imagify-datas-more-action a {
1155 display: inline-block;
1156 padding: 0 5px;
1157 background: #40B1D0;
1158 color: #FFF;
1159 text-transform: uppercase;
1160 font-size: 9px;
1161 font-weight: bold;
1162 line-height: 1.9;
1163 text-decoration: none;
1164 }
1165 .imagify-datas-more-action a.is-open {
1166 background: #555;
1167 }
1168 .imagify-datas-more-action a.is-open .dashicons {
1169 transform: rotate(180deg);
1170 }
1171 .imagify-datas-more-action a .dashicons {
1172 font-size: 14px;
1173 vertical-align: middle;
1174 line-height: .8;
1175 }
1176 .imagify-datas-more-action a .dashicons:before {
1177 vertical-align: middle;
1178 line-height: 20px;
1179 }
1180 .imagify-datas-more-action .the-text {
1181 display: inline-block;
1182 vertical-align: middle;
1183 height: auto;
1184 line-height: inherit;
1185 }
1186
1187 ul.imagify-datas-details.imagify-datas-details {
1188 margin: .7em auto;
1189 }
1190 .imagify-datas-details strong {
1191 color: #40B1D0;
1192 }
1193 .imagify-datas-details .original {
1194 color: #555;
1195 }
1196
1197 .imagify-datas-actions-links {
1198 overflow: hidden;
1199 border-top: 2px solid transparent;
1200 padding-top: 5px;
1201 font-size: 11px;
1202 }
1203 .nggform .imagify-datas-actions-links {
1204 position: relative;
1205 z-index: 2;
1206 }
1207 .nggform .row-actions {
1208 z-index: 1;
1209 }
1210 .imagify-datas-actions-links a {
1211 position: relative;
1212 display: inline-block;
1213 padding-left: 17px;
1214 text-decoration: none;
1215 font-weight: 600;
1216 }
1217 .compat-field-imagify .imagify-datas-actions-links {
1218 max-width: 300px;
1219 }
1220 .misc-pub-imagify .imagify-datas-actions-links {
1221 border-top: 2px solid #f2f2f2;
1222 padding-bottom: 5px;
1223 }
1224 /* Library */
1225 .column-imagify_optimized_file .imagify-datas-actions-links a {
1226 margin: 0 .7em;
1227 padding-left: 15px;
1228 }
1229
1230 /* Media edition */
1231 .compat-field-imagify .imagify-datas-actions-links a,
1232 .misc-pub-imagify .imagify-datas-actions-links a {
1233 float: left;
1234 width: 50%;
1235 }
1236 .media-sidebar .compat-field-imagify .imagify-datas-actions-links a,
1237 .submitbox .misc-pub-imagify .imagify-datas-actions-links a {
1238 display: block;
1239 width: auto;
1240 float: none;
1241 }
1242 .media-sidebar .compat-field-imagify .imagify-datas-actions-links br,
1243 .submitbox .misc-pub-imagify .imagify-datas-actions-links br {
1244 display: none;
1245 }
1246 .imagify-datas-actions-links a:only-child {
1247 float: none;
1248 width: auto;
1249 }
1250 .imagify-datas-details.is-open + .imagify-datas-actions-links {
1251 border-top-color: rgba(0,0,0,.075);
1252 }
1253 .imagify-datas-actions-links .dashicons {
1254 position: absolute;
1255 left: 0; top: 4px;
1256 width: 12px;
1257 margin-right: 2px;
1258 font-size: 11px;
1259 }
1260
1261 /**
1262 * == Bulk page
1263 */
1264
1265 .imagify-account,
1266 .imagify-account-link {
1267 padding-right: 15px;
1268 }
1269 .imagify-meteo-icon {
1270 display: inline-block;
1271 height: 38px;
1272 vertical-align: middle;
1273 margin-right: 10px;
1274 }
1275 .imagify-user-plan {
1276 color: #40b1d0;
1277 }
1278
1279 .imagify-meteo-title.imagify-meteo-title {
1280 color: #FFF;
1281 font-size: 17px;
1282 }
1283 .imagify-space-left > p {
1284 color: #FFF;
1285 }
1286 [class^="imagify-bar-"] {
1287 position: relative;
1288 height: 8px;
1289 width: 100%;
1290 background: #343A49;
1291 color: #FFF;
1292 font-size: 10px;
1293 }
1294
1295 .imagify-progress {
1296 height: 8px;
1297 }
1298 .imagify-progress {
1299 transition: width .3s;
1300 }
1301 .imagify-bar-positive .imagify-progress {
1302 background: #8CC152;
1303 }
1304 .imagify-bar-positive .imagify-barnb {
1305 color: #8CC152;
1306 }
1307 .imagify-bar-primary .imagify-progress {
1308 background: #40B1D0;
1309 }
1310 .imagify-bar-primary .imagify-barnb {
1311 color: #40B1D0;
1312 }
1313 .imagify-bar-negative .imagify-progress {
1314 background: #D2D3D6;
1315 }
1316 .imagify-bar-negative .imagify-barnb {
1317 color: #7A8996;
1318 }
1319 .imagify-bar-neutral .imagify-progress {
1320 background: #F5A623;
1321 }
1322 .imagify-space-left .imagify-bar-negative .imagify-progress {
1323 background: #ffffff;
1324 }
1325
1326 .imagify-btn-ghost {
1327 display: inline-block;
1328 height: auto;
1329 padding: 7px 10px;
1330 border: 1px solid #FFF;
1331 text-align: center;
1332 background: transparent;
1333 color: #FFF;
1334 border-radius: 3px;
1335 transition: all .275s;
1336 }
1337
1338 .imagify-btn-ghost:hover,
1339 .imagify-btn-ghost:focus {
1340 background: #FFF;
1341 color: #888;
1342 }
1343
1344 /* Some Errors */
1345 .imagify-error {
1346 background: #D0021B;
1347 color: #FFF;
1348 }
1349 .imagify-settings-section .imagify-error {
1350 display: inline-block;
1351 padding: 7px 10px;
1352 margin: 10px 0 0 45px;
1353 border-radius: 3px;
1354 }
1355 .imagify-settings-section .imagify-error code {
1356 font-weight: normal;
1357 }
1358 .imagify-settings-section .imagify-error.hidden {
1359 display: none;
1360 }
1361 .imagify-warning {
1362 background: #f5a623;
1363 color: #FFF;
1364 text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
1365 }
1366
1367 /* Imagify Modal (is everywhere) */
1368 .imagify-modal {
1369 display: -webkit-box;
1370 display: -ms-flexbox;
1371 display: flex;
1372 -webkit-box-orient: vertical;
1373 -webkit-box-direction: normal;
1374 -ms-flex-direction: column;
1375 flex-direction: column;
1376 -webkit-box-align: center;
1377 -ms-flex-align: center;
1378 align-items: center;
1379 -webkit-box-pack: center;
1380 -ms-flex-pack: center;
1381 justify-content: center;
1382 }
1383 .js .imagify-modal {
1384 display: none;
1385 position: fixed;
1386 top: 0; right: 0; bottom: 0; left: 0;
1387 background-color: #1F2332;
1388 background-color: rgba(31,35,50,.95);
1389 z-index: 99999;
1390 }
1391 .imagify-modal-content {
1392 -webkit-box-sizing: border-box;
1393 -moz-box-sizing: border-box;
1394 box-sizing: border-box;
1395 position: relative;
1396 width: 800px;
1397 max-width: 95%;
1398 max-height: 90vh;
1399 overflow: auto;
1400 padding: 20px 25px;
1401 margin: 1em auto;
1402 background: #FFF;
1403 box-shadow: 1px 1px 4px rgba(0,0,0,.7);
1404 border-radius: 3px;
1405 }
1406 .imagify-modal-loading .imagify-modal-content{
1407 overflow: hidden;
1408 }
1409 #imagify-visual-comparison .imagify-modal-content,
1410 .imagify-visual-comparison .imagify-modal-content {
1411 max-width: 1400px;
1412 background: transparent;
1413 padding: 5px;
1414 box-shadow: none;
1415 border-radius: 0;
1416 }
1417 .imagify-modal .h2 {
1418 margin: .5em 0;
1419 color: #8ba6b4;
1420 font-weight: normal;
1421 font-size: 24px;
1422 letter-spacing: 0.075em;
1423 text-align: center;
1424 }
1425 .imagify-modal .h3 {
1426 color: #40b1d0;
1427 font-weight: normal;
1428 font-size: 18px;
1429 letter-spacing: 0.075em;
1430 text-align: center;
1431 }
1432 .imagify-modal .close-btn {
1433 display: none;
1434 visibility: hidden;
1435 position: absolute;
1436 right: 20px; top: 20px;
1437 font-size: 1.2em;
1438 border: 0;
1439 background: transparent none;
1440 border-radius: 0;
1441 cursor: pointer;
1442 }
1443 .imagify-modal .close-btn i {
1444 margin-left: -2px;
1445 }
1446 .imagify-modal .close-btn:hover,
1447 .imagify-modal .close-btn:focus {
1448 color: #40b1d0;
1449 }
1450 .js .imagify-modal .close-btn {
1451 display: block;
1452 visibility: visible;
1453 z-index: 12;
1454 }
1455
1456 /* Attachments specifics */
1457 .wp_attachment_image #imagify-visual-comparison .imagify-modal-content,
1458 .imagify-visual-comparison .imagify-modal-content {
1459 padding-top: 40px;
1460 }
1461
1462 /* Col, behavior depending on parent */
1463 .imagify-col {
1464 float: left;
1465 width: 50%;
1466 box-sizing: border-box;
1467 -webkit-flex-basis: 50%;
1468 -ms-flex-preferred-size: 50%;
1469 flex-basis: 50%;
1470 }
1471 .imagify-col {
1472 padding-right: 20px;
1473 }
1474 .imagify-col + .imagify-col {
1475 padding-right: 0;
1476 padding-left: 20px;
1477 }
1478
1479 .imagify-col:target {
1480 animation: hello 1s 3 linear backwards;
1481 }
1482
1483 @keyframes hello {
1484 0%, 100% {
1485 background: #FFF;
1486 }
1487 50% {
1488 background: #F4F7F9;
1489 }
1490 }
1491 @media (max-width: 730px) {
1492 .imagify-settings .imagify-documentation-link-box{
1493 margin-top: 2em;
1494 }
1495 }
1496
1497 @media (max-width: 782px) {
1498 input[type="radio"], input[type="checkbox"] {
1499 height: 1.5625rem;
1500 width: 1.5625rem;
1501 margin: 1px;
1502 }
1503 [class*="imagify-"] .button-text{
1504 font-size: 13px;
1505 }
1506 .imagify-account-info-col .imagify-settings-section{
1507 padding: 0 10px;
1508 }
1509 .imagify-settings-section{
1510 padding: 10px;
1511 }
1512 .imagify-check-group.imagify-is-scrollable{
1513 margin: auto;
1514 }
1515 .imagify-settings-section .imagify-col,
1516 .imagify-col.imagify-col.imagify-shared-with-account-col,
1517 .imagify-media-lib-section .imagify-col,
1518 .imagify-custom-folders-section .imagify-col,
1519 .imagify-shared-with-account-col {
1520 width:100%;
1521 float: none;
1522 padding-right: 0;
1523 }
1524 .imagify-col.imagify-col.imagify-account-info-col,
1525 .imagify-media-lib-section .imagify-account-info-col,
1526 .imagify-custom-folders-section .imagify-account-info-col,
1527 .imagify-account-info-col{
1528 width: 100%;
1529 float: none;
1530 padding-left: 0;
1531 padding-right: 0;
1532 }
1533 .imagify-lb-text{
1534 font-size: 20px;
1535 }
1536 .imagify-vcenter{
1537 -webkit-flex-direction: column;
1538 -ms-flex-direction: column;
1539 flex-direction: column;
1540 -webkit-box-direction: normal;
1541 -webkit-box-orient: vertical;
1542 -moz-box-direction: normal;
1543 -moz-box-orient: vertical;
1544 align-items: center;
1545 }
1546 .imagify-pr2.imagify-pr2{
1547 padding-right: 0em;
1548 }
1549 }
1550
1551 .imagify-upsell {
1552 position:relative;
1553 background: #c51161;
1554 padding: 20px 25px;
1555 }
1556
1557 .imagify-upsell p {
1558 color: #fff !important;
1559 }
1560
1561 .imagify-upsell-button {
1562 display: block;
1563 background: #fff;
1564 border-radius: 5px;
1565 color: #c51161 !important;
1566 font-weight: bold;
1567 padding: 10px 0;
1568 text-align: center;
1569 text-decoration: none;
1570 text-transform: uppercase;
1571 }
1572
1573 .imagify-upsell-arrow::after {
1574 content: '\2192';
1575 font-size: large;
1576 margin-left: 5px;
1577 vertical-align: top;
1578 }
1579
1580 .imagify-upsell .imagify-meteo-icon {
1581 filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
1582 }
1583
1584 .imagify-original-fize-size {
1585 display: block !important;
1586 }
1587
1588 .imagify-original-fize-size .value {
1589 padding-left: 15px !important;
1590 }
1591 .imagify-plugin-family-cards {
1592 display: flex;
1593 flex-wrap: wrap;
1594 margin: 0 -10px;
1595 }
1596 .imagify-plugin-family-col {
1597 width: 25%;
1598 box-sizing: border-box;
1599 padding: 0 10px;
1600 margin-bottom: 20px;
1601 display: flex;
1602 flex-direction: column;
1603 }
1604 @media (max-width: 1200px) {
1605 .imagify-plugin-family-col {
1606 width: 50%;
1607 }
1608 }
1609 @media (max-width: 600px) {
1610 .imagify-plugin-family-col {
1611 width: 100%;
1612 }
1613 }
1614 .imagify-card {
1615 border: 1px solid #dfdfdf;
1616 background-color: #f4f7f9;
1617 border-radius: 5px;
1618 width: 100%;
1619 display: flex;
1620 flex-direction: column;
1621 flex: 1 1 auto;
1622 }
1623 .imagify-card-header {
1624 margin-bottom: 10px;
1625 padding-top: 25px;
1626 }
1627 .imagify-card-logo {
1628 min-height: 42px;
1629 display: flex;
1630 align-items: center;
1631 justify-content: center;
1632 }
1633 .imagify-card-logo img {
1634 display: block;
1635 margin: 0 auto;
1636 max-width: 100%;
1637 height: auto;
1638 }
1639 .imagify-card-header h4 {
1640 text-align: center;
1641 color: #323232;
1642 font-size: 1.1em;
1643 font-weight:bold;
1644 }
1645 .imagify-card-body {
1646 margin-bottom: 10px;
1647 padding: 0 10px 0 10px;
1648 flex: 1 1 auto;
1649 }
1650 .imagify-card-body p {
1651 font-size: 1em;
1652 color: #323232;
1653 text-align:center;
1654 line-height: 17px;
1655 }
1656 .imagify-card-footer {
1657 display: flex;
1658 justify-content: center;
1659 align-items: center;
1660 padding: 10px;
1661 height: 40px;
1662 margin-top: auto;
1663 }
1664 .imagify-card-footer span {
1665 text-transform: uppercase;
1666 font-weight:bold;
1667 color: #6f9c3b;
1668 }
1669 .imagify-card-footer a {
1670 margin: 0 15px 0 15px;
1671 font-size: 1em;
1672 font-weight: bold;
1673 }
1674 .imagify-card-footer a.imagify-card-btn {
1675 text-transform: uppercase;
1676 text-decoration: none;
1677 background-color: #2f3242;
1678 padding: 8px 20px 8px 20px;
1679 color: white;
1680 }
1681 .imagify-upsell-cta {
1682 display: inline-flex;
1683 align-items: center;
1684 justify-content: center;
1685 }
1686 .imagify-upsell-cta .imagify-svg-icon {
1687 margin-left: 7px;
1688 margin-top: 2px;
1689 }
1690 .imagify-upsell.imagify-col-content .imagify-space-left p {
1691 font-size: 14px;
1692 }
1693
1694 /* Analytics opt-in ============================================================================= */
1695 .imagify-analytics-section {
1696 padding: 20px 24px;
1697 background: #f6f7f7;
1698 border-radius: 4px;
1699 }
1700
1701 .imagify-analytics-optin {
1702 display: flex;
1703 flex-direction: column;
1704 gap: 8px;
1705 }
1706
1707 .imagify-analytics-label {
1708 display: inline-flex;
1709 align-items: center;
1710 gap: 12px;
1711 cursor: pointer;
1712 font-size: 14px;
1713 font-weight: 600;
1714 color: #2E3243;
1715 }
1716
1717 /* Hide native checkbox */
1718 .imagify-analytics-checkbox {
1719 position: absolute;
1720 opacity: 0;
1721 width: 0;
1722 height: 0;
1723 }
1724
1725 /* Toggle switch track */
1726 .imagify-analytics-toggle-ui {
1727 position: relative;
1728 display: inline-block;
1729 width: 48px;
1730 height: 26px;
1731 background: #ccc;
1732 border-radius: 13px;
1733 transition: background .2s ease;
1734 flex-shrink: 0;
1735 }
1736
1737 /* Toggle switch thumb */
1738 .imagify-analytics-toggle-ui::after {
1739 content: '';
1740 position: absolute;
1741 top: 3px;
1742 left: 3px;
1743 width: 20px;
1744 height: 20px;
1745 background: #fff;
1746 border-radius: 50%;
1747 box-shadow: 0 1px 3px rgba(0,0,0,.3);
1748 transition: transform .2s ease;
1749 }
1750
1751 .imagify-analytics-checkbox:checked ~ .imagify-analytics-toggle-ui,
1752 .imagify-analytics-label .imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui {
1753 background: #40B1D0;
1754 }
1755
1756 .imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui::after {
1757 transform: translateX(22px);
1758 }
1759
1760 .imagify-analytics-description {
1761 margin: 0;
1762 color: #666;
1763 font-size: 13px;
1764 }
1765
1766 .imagify-btn-link {
1767 background: none;
1768 border: none;
1769 padding: 0;
1770 color: #40B1D0;
1771 text-decoration: underline;
1772 cursor: pointer;
1773 font-size: inherit;
1774 }
1775
1776 .imagify-btn-link:hover {
1777 color: #338ea6;
1778 }
1779
1780 /* Analytics data table (modal + thank-you notice) */
1781 .imagify-analytics-data-table {
1782 width: 100%;
1783 border-collapse: collapse;
1784 margin: 12px 0;
1785 border-left: 3px solid #40B1D0;
1786 background-color: #F0FAFD;
1787 border-radius: 4px;
1788 overflow: hidden;
1789 }
1790
1791 .imagify-analytics-data-table td {
1792 padding: 8px 12px;
1793 font-size: 13px;
1794 border-bottom: 1px solid #D8EFF6;
1795 vertical-align: top;
1796 color: #2E3243;
1797 }
1798
1799 .imagify-analytics-data-table td:first-child {
1800 font-weight: 600;
1801 width: 40%;
1802 }
1803
1804 .imagify-analytics-data-table tr:last-child td {
1805 border-bottom: 0;
1806 }
1807
1808 /* Thank-you notice text colour override */
1809 .imagify-analytics-thankyou-notice,
1810 .imagify-analytics-thankyou-notice p {
1811 color: #1d2327;
1812 }
1813
1814 /* Opt-in ask notice */
1815 .imagify-analytics-optin-notice .imagify-analytics-data-container {
1816 margin-bottom: 12px;
1817 }
1818
1819 .imagify-analytics-optin-notice .imagify-analytics-data-container .description {
1820 color: #666;
1821 font-size: 13px;
1822 }
1823
1824