PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / 1.5
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF v1.5
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 1.5, at assets/css/admin.css

3,572 lines 73.1 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: float */
6 .imagify-start {
7 float: left;
8 }
9 .imagify-end {
10 float: right;
11 }
12
13 /* Util: text-align */
14 .imagify-txt-start.imagify-txt-start.imagify-txt-start {
15 text-align: left;
16 }
17 .imagify-txt-center.imagify-txt-center.imagify-txt-center {
18 text-align: center;
19 }
20 .imagify-txt-end.imagify-txt-end.imagify-txt-end {
21 text-align: right;
22 }
23
24 /* Util: margin/padding */
25 .imagify-mt1.imagify-mt1 {
26 margin-top: 1em;
27 }
28 .imagify-mb1.imagify-mb1 {
29 margin-bottom: 1em;
30 }
31 .imagify-mr1.imagify-mr1 {
32 margin-right: 1em;
33 }
34 .imagify-ml2.imagify-ml2 {
35 margin-left: 2em;
36 }
37 .imagify-mr2.imagify-mr2 {
38 margin-right: 2em;
39 }
40
41 .imagify-pl0.imagify-pl0.imagify-pl0 {
42 padding-left: 0;
43 }
44 .imagify-pr1.imagify-pr1 {
45 padding-right: 1em;
46 }
47
48 /* Util: Overflow */
49 .imagify-oh {
50 overflow: hidden;
51 }
52 .imagify-clear {
53 clear: both;
54 }
55 .imagify-clearfix:after,
56 .imagify-inline-options:after {
57 content: "";
58 display: table;
59 clear: both;
60 }
61
62 /* Default counter */
63 .imagify-count.imagify-count {
64 counter-reset: num;
65 }
66 .imagify-count .imagify-count-title {
67 font-weight: bold;
68 }
69 .imagify-default-settings {
70 color: #73818c;
71 font-weight: normal;
72 }
73 .imagify-count .imagify-count-title:before {
74 counter-increment: num 1;
75 content: counter(num) ". ";
76 }
77
78 /* Table layout */
79 .imagify-table {
80 display: table;
81 width: 100%;
82 }
83 .imagify-cell {
84 display: table-cell;
85 padding: 10px;
86 vertical-align: top;
87 }
88 .imagify-cell.va-top,
89 .va-top .imagify-cell {
90 vertical-align: top;
91 }
92
93 .imagify-bulk-submit .imagify-cell {
94 padding-top: 0;
95 }
96
97
98 body.imagify-modal-is-open {
99 overflow: hidden;
100 }
101 .imagify-plugins-error {
102 overflow: hidden;
103 padding-left: 20px;
104 list-style-type: disc
105 }
106 .imagify-plugins-error li {
107 width:300px;
108 line-height:30px
109 }
110 @media (max-width: 570px) {
111 .imagify-plugins-error li {
112 width: auto;
113 }
114 }
115
116 .imagify-notice-dismiss.notice-dismiss {
117 text-decoration: none;
118 }
119
120 .imagify-spinner {
121 display: inline-block;
122 width: 20px;
123 height: 20px;
124 margin-right: 5px;
125 vertical-align: middle;
126 background: rgba(0, 0, 0, 0) url("../images/spinner.gif") no-repeat scroll 0 0 / 20px 20px;
127 opacity: 0.7;
128 }
129 .spinner.imagify-hidden {
130 width: 0;
131 margin: 4px 0 0 0;
132 }
133
134 .misc-pub-section.misc-pub-imagify h4 {
135 font-size: 14px;
136 margin-top: 5px;
137 margin-bottom: 0;
138 }
139
140 /* Some Sweet alert styles */
141 .imagify-sweet-alert button {
142 margin-top: 17px !important;
143 height: 45px !important;
144 letter-spacing: 3px;
145 text-transform: uppercase !important;
146 border-radius: 3px !important;
147 background-color: #40b1d0 !important;
148 box-shadow: 0 3px 0 #338ea6 !important;
149 }
150 .imagify-sweet-alert button.cancel {
151 background: #777 !important;
152 box-shadow: 0 3px 0 #444 !important;
153 }
154 .imagify-sweet-alert-signup .sa-confirm-button-container {
155 width: 40%;
156 }
157 .imagify-sweet-alert-signup button {
158 width: 100%;
159 padding: 0 !important;
160 }
161 .imagify-sweet-alert .sa-input-error:before,
162 .imagify-sweet-alert .sa-input-error:after,
163 .imagify-sweet-alert .la-ball-fall {
164 top: 25% !important;
165 }
166
167 #wpwrap {
168 transition: all .4s;
169 }
170 .stop-scrolling #wpwrap {
171 filter: blur(2px);
172 }
173 .stop-scrolling #wpwrap #wpadminbar {
174 top: -32px;
175 }
176
177 /* Some basic colors */
178 .imagify-primary.imagify-primary.imagify-primary {
179 color: #40b1d0;
180 }
181 .imagify-secondary.imagify-secondary.imagify-secondary {
182 color: #8cc152;
183 }
184
185 #imagify-check-api-container {
186 font-weight: bold;
187 }
188
189 #imagify-check-api-container .dashicons {
190 font-size: 25px;
191 }
192
193 #imagify-check-api-container .dashicons-no:before {
194 color: #f06e57;
195 vertical-align: -1px;
196 }
197
198 #imagify-check-api-container .dashicons-yes:before {
199 color: #8BC34A;
200 vertical-align: -1px;
201 }
202 .imagify-valid {
203 color: #8BC34A;
204 }
205
206 .imagify-chart {
207 width: 33.33%;
208 position: relative;
209 }
210 #imagify-overview-chart-legend {
211 overflow: hidden;
212 }
213 .imagify-doughnut-legend {
214 margin-top: 38px;
215 list-style: none;
216 }
217
218 .imagify-doughnut-legend li {
219 display: block;
220 padding-left: 30px;
221 position: relative;
222 margin-bottom: 15px;
223 border-radius: 5px;
224 padding: 3px 8px 2px 31px;
225 font-size: 14px;
226 font-weight: 600;
227 cursor: default;
228 -webkit-transition: background-color 200ms ease-in-out;
229 -moz-transition: background-color 200ms ease-in-out;
230 -o-transition: background-color 200ms ease-in-out;
231 transition: background-color 200ms ease-in-out;
232 }
233
234 .imagify-doughnut-legend li span {
235 display: block;
236 position: absolute;
237 left: 0; top: 0;
238 width: 25px;
239 height: 25px;
240 border-radius: 50%;
241 }
242
243 .imagify-chart {
244 float: left;
245 margin-bottom: 20px;
246 }
247 td .imagify-chart {
248 float: none;
249 margin-bottom: 0;
250 }
251
252 .imagify-chart-container {
253 position: relative;
254 width: 180px;
255 float: left;
256 margin-right: 20px;
257 }
258 .imagify-global-optim-phrase {
259 width: 180px;
260 padding-top: 20px;
261 font-size: 14px;
262 font-weight: bold;
263 text-align: center;
264 }
265 .imagify-total-percent {
266 color: #46b1ce;
267 }
268 td .imagify-chart-container {
269 width: 18px;
270 height: 18px;
271 float: none;
272 margin-right: 10px;
273 }
274 td .imagify-chart {
275 top: 4px;
276 }
277
278 .imagify-chart-percent {
279 position: absolute;
280 left: 0; right: 0;
281 top: 50%;
282 margin-top: -14px;
283 text-align: center;
284 font-size: 55px;
285 font-weight: bold;
286 color: #46B1CE;
287 }
288 .imagify-chart-percent span {
289 font-size: 20px;
290 vertical-align: super;
291 }
292
293 .media_page_imagify-bulk-optimization .notice,
294 body[class*="_imagify-ngg-bulk-optimization"] .notice,
295 .settings_page_imagify .notice {
296 margin-right: 20px;
297 margin-left: 2px;
298 }
299
300 .media_page_imagify-bulk-optimization .media-item,
301 body[class*="_imagify-ngg-bulk-optimization"] .media-item {
302 margin: 0;
303 }
304
305 .media_page_imagify-bulk-optimization .media-item .progress,
306 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress {
307 float: none;
308 width: 100%;
309 margin: 0;
310 background: #1F2331;
311 box-shadow: 0;
312 border-radius: 0;
313 }
314
315 .media_page_imagify-bulk-optimization .media-item .percent,
316 body[class*="_imagify-ngg-bulk-optimization"] .media-item .percent {
317 width: auto;
318 padding: 0 5px;
319 line-height: 1.85;
320 font-size: 12px;
321 }
322
323 .media_page_imagify-bulk-optimization .media-item .progress,
324 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress,
325 body[class*="_imagify-ngg-bulk-optimization"] .media-item .percent,
326 .media_page_imagify-bulk-optimization .media-item .percent {
327 text-align: right;
328 }
329 .media_page_imagify-bulk-optimization .media-item .progress .bar,
330 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress .bar {
331 width: 1px;
332 height: 22px;
333 margin-top: 0;
334 background: #46B1CE;
335 border-radius: 0;
336 overflow: visible;
337 -webkit-transition: width .5s;
338 transition: width .5s;
339 }
340
341
342 /*
343 *
344 * == Settings page
345 *
346 */
347
348
349 /* Basic HTML elements */
350
351 .imagify-settings a,
352 .imagify-settings .button,
353 .imagify-settings input,
354 .imagify-welcome a,
355 .imagify-welcome .button,
356 .imagify-weolcome input {
357 -webkit-transition: all .275s;
358 transition: all .275s;
359 }
360 .imagify-settings a {
361 color: #40b1d0;
362 }
363
364 .imagify-options-title {
365 padding-bottom: .5em;
366 border-bottom: 3px solid #F2F2F2;
367 font-size: 13px;
368 font-weight: 500;
369 text-transform: uppercase;
370 letter-spacing: 0.025em;
371 color: #40b1d0;
372 }
373
374 .imagify-settings,
375 .imagify-settings p,
376 .imagify-settings th {
377 color: #5F758E;
378 }
379 @media (max-width: 782px) {
380 .imagify-settings .form-table th {
381 padding-top: 2em;
382 padding-bottom: .5em;
383 }
384 }
385 .imagify-settings .form-table td {
386 vertical-align: top;
387 }
388 .imagify-settings .form-table th span {
389 cursor: pointer;
390 }
391 .imagify-middle th {
392 padding-top: 35px;
393 }
394 .imagify-settings .button,
395 .imagify-welcome .button,
396 .imagify-notice .button,
397 .imagify-button.imagify-button,
398 .imagify-button-primary.imagify-button-primary,
399 .imagify-button-secondary.imagify-button-secondary {
400 height: auto;
401 padding: 8px 20px;
402 border: 0 none;
403 font-size: 14px;
404 font-weight: 600;
405 box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
406 border-radius: 3px;
407 cursor: pointer;
408 transition: all .275s;
409 }
410
411 .imagify-notice .button-mini {
412 padding: 2px 10px;
413 font-size: 13px;
414 }
415 .button-primary.button-mini {
416 padding: 2px 10px;
417 }
418 .imagify-settings .button.button-mini-flat {
419 padding: 3px 6px 5px;
420 font-size: 12px;
421 box-shadow: none!important;
422 line-height: 1.2;
423 }
424 .imagify-settings .button.button-mini-flat:hover,
425 .imagify-settings .button.button-mini-flat:focus {
426 box-shadow: none!important;
427 }
428
429 .imagify-title .button-ghost.button-ghost,
430 .imagify-button-ghost.imagify-button-ghost {
431 padding: 2px 9px;
432 border: 1px solid #40B1D0;
433 font-size: 12px;
434 font-weight: normal;
435 color: #40B1D0;
436 background: transparent;
437 box-shadow: none;
438 }
439 .imagify-title .button-ghost.button-ghost:hover,
440 .imagify-title .button-ghost.button-ghost:focus,
441 .imagify-button-ghost.imagify-button-ghost:hover,
442 .imagify-button-ghost.imagify-button-ghost:focus {
443 border-color: transparent;
444 color: #000;
445 background: #40B1D0;
446 }
447 .imagify-button-ghost.imagify-button-ghost:hover,
448 .imagify-button-ghost.imagify-button-ghost:focus {
449 color: #FFF;
450 }
451 .imagify-button-medium.imagify-button-medium {
452 text-transform: uppercase;
453 letter-spacing: 0.1em;
454 padding: 3px 10px;
455 font-weight: bold;
456 }
457 .imagify-button-medium.imagify-button-ghost {
458 border-width: 2px;
459 }
460 .button .dashicons {
461 margin-right: 5px;
462 vertical-align: middle;
463 }
464 .imagify-settings .button-primary.button-primary,
465 .imagify-welcome .button-primary.button-primary,
466 .imagify-button-primary.imagify-button-primary {
467 background: #40B1D0;
468 color: #FFF;
469 box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
470 text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799!important;
471 }
472 .imagify-button-secondary.imagify-button-secondary {
473 background: #8BC34A;
474 color: #FFF;
475 box-shadow: 0 3px 0 #6F9C3B;
476 text-shadow: 0 -1px 1px #6F9C3B, 1px 0 1px #6F9C3B, 0 1px 1px #6F9C3B!important;
477 }
478 .imagify-settings .button-primary:hover,
479 .imagify-settings .button-primary:focus,
480 .imagify-welcome .button-primary:hover,
481 .imagify-welcome .button-primary:focus,
482 .imagify-button-primary.imagify-button-primary:hover,
483 .imagify-button-primary.imagify-button-primary:focus {
484 background: rgb(51, 142, 166);
485 box-shadow: 0 3px 0 rgb(31, 122, 146);
486 }
487 .imagify-button-secondary.imagify-button-secondary:hover,
488 .imagify-button-secondary.imagify-button-secondary:focus {
489 background: #6F9C3B;
490 color: #FFF;
491 }
492
493 .imagify-button-light.imagify-button-light {
494 background: #FFF;
495 color: #4a4a4a;
496 box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
497 }
498 .imagify-button-light.imagify-button-light:hover,
499 .imagify-button-light.imagify-button-light:focus {
500 color: #FFF;
501 background: rgba(0, 0, 0, .2);
502 }
503
504 /* Modifier */
505 .imagify-section-positive .imagify-button-light {
506 color: #709A41;
507 }
508 .imagify-button.imagify-button-big {
509 font-size: 15px;
510 padding: 11px 30px;
511 }
512 .imagify-button-big .dashicons {
513 font-size: 1.45em;
514 margin-right: 6px;
515 margin-left: -4px;
516 }
517
518 .imagify-settings .button .dashicons,
519 .imagify-welcome .button .dashicons,
520 .imagify-notice .button .dashicons,
521 .imagify-button.imagify-button .dashicons,
522 .imagify-button-primary.imagify-button-primary .dashicons,
523 .imagify-button-secondary.imagify-button-secondary .dashicons {
524 vertical-align: middle;
525 }
526 .button-text {
527 display: inline-block;
528 vertical-align: middle;
529 }
530
531
532 /* exception */
533 #imagify-bulk-action {
534 padding: 11px 20px;
535 }
536 .wp_attachment_image .imagify-button-primary,
537 .media-frame-content .imagify-button-primary {
538 float: left;
539 padding: 0 10px 1px;
540 margin: 0 5px 2px 0;
541 font-size: 13px;
542 line-height: 26px;
543 box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
544 }
545
546 .imagify-settings input[type="text"] {
547 color: #4A4A4A;
548 font-weight: 600;
549 box-shadow: none;
550 }
551 .imagify-settings div.submit.submit {
552 padding-left: 235px;
553 padding-top: 40px;
554 }
555 .imagify-settings p.submit {
556 float: left;
557 margin-top: 0;
558 }
559 .imagify-settings p.submit .button {
560 margin: 0 5px;
561 }
562 @media (max-width: 850px) {
563 .imagify-settings div.submit {
564 padding-left: 0;
565 }
566 .imagify-settings p.submit {
567 text-align: center;
568 }
569 }
570
571
572 /* Header & Subheader */
573
574 .imagify-title.imagify-title {
575 position: relative;
576 padding: 30px 50px;
577 font-size: 23px;
578 background: #2E3243;
579 color: #FFF;
580 }
581 .imagify-settings .imagify-title + .imagify-notice {
582 margin: 0;
583 border-right: 1px solid #D9D9D9;
584 padding-top: 15px;
585 padding-bottom: 15px;
586 }
587 .imagify-logo {
588 vertical-align: top;
589 }
590 .imagify-sub-header,
591 .imagify-sub-title.imagify-sub-title, /* heavier is better */
592 .imagify-settings div.submit,
593 .imagify-section {
594 margin: 0;
595 padding: 20px;
596 background: #F2F5F7;
597 }
598 .imagify-sub-title.imagify-sub-title,
599 .imagify-section-positive {
600 padding-left: 40px;
601 }
602 .imagify-section-positive {
603 background: #8cc152;
604 color: #FFF;
605 }
606 .imagify-section-positive p {
607 color: #FFF
608 }
609 .imagify-section-gray {
610 background: #D9E4EB;
611 }
612 .imagify-section-gray .imagify-count-title {
613 color: #4a4a4a;
614 }
615
616 .imagify-section p:first-child {
617 margin-top: 0;
618 }
619 .imagify-section p:last-child {
620 margin-bottom: 0;
621 }
622 p.imagify-section-title.imagify-section-title {
623 font-size: 20px;
624 margin-top: -.3em;
625 margin-bottom: -.6em;
626 }
627
628 .imagify-bulk-info {
629 margin: 1em 1em 1em 5px;
630 transition: margin .3s;
631 }
632 @media (max-width: 850px) {
633 .imagify-bulk-info {
634 margin: 1em;
635 }
636 }
637 .imagify-bulk-info p {
638 display: inline-block;
639 text-align: left;
640 width: 400px;
641 max-width: 100%;
642 font-weight: bold;
643 }
644
645 @media (min-width: 1500px) {
646 .imagify-settings div.submit {
647 display: table;
648 width: 100%;
649 }
650 .imagify-settings div.submit > * {
651 display: table-cell;
652 vertical-align: middle;
653 }
654 .imagify-bulk-info {
655 padding: 0 25px;
656 text-align: right;
657 }
658 }
659 .imagify-settings div.submit {
660 margin-top: 2em;
661 padding: 20px 0;
662 }
663 .imagify-sub-header th {
664 text-align: right;
665 }
666 .imagify-sub-header .form-table {
667 margin: 0;
668 }
669 .imagify-sub-header th,
670 .imagify-sub-header td {
671 padding-top: 0;
672 padding-bottom: 0;
673 }
674 [for="api_key"] {
675 padding-top: 5px;
676 }
677
678 .imagify-notice .imagify-rate-us.imagify-rate-us {
679 position: relative;
680 bottom: 0; right: 0;
681 text-align: left;
682 }
683
684 .imagify-notice .imagify-rate-us .stars {
685 margin: 0;
686 }
687
688 .imagify-rate-us.imagify-rate-us {
689 position: absolute;
690 bottom: 50%;
691 right: 20px;
692 text-align: right;
693 margin-bottom: -2.4em;
694 color: #FFF;
695 }
696 .imagify-rate-us a {
697 color: #40B1D0;
698 }
699 .imagify-rate-us .stars {
700 display: inline-block;
701 margin: 2px 0 0 10px;
702 text-decoration: none;
703 letter-spacing: .2em;
704 vertical-align: -1px;
705 }
706 .imagify-rate-us .stars .dashicons:before {
707 font-size: 18px;
708 }
709 .imagify-rate-us a:hover,
710 .imagify-rate-us a:focus {
711 color: #FEE102;
712 }
713 @media (max-width: 1220px) {
714 .imagify-rate-us.imagify-rate-us {
715 position: static;
716 margin-bottom: 0;
717 text-align: left;
718 }
719 .imagify-rate-us.imagify-rate-us br {
720 display: none;
721 }
722 .imagify-rate-us .stars {
723 display: block;
724 margin-left: 0;
725 }
726 }
727
728 /* WP Rocket notice */
729 .imagify-rkt-notice.imagify-rkt-notice {
730 position: relative;
731 display: -webkit-box;
732 display: -webkit-flex;
733 display: -ms-flexbox;
734 display: flex;
735 -webkit-box-align: center;
736 -webkit-align-items: center;
737 -ms-flex-align: center;
738 -ms-grid-row-align: center;
739 align-items: center;
740 padding: 10px 45px 10px 0;
741 border: 0 none;
742 box-shadow: none;
743 color: #FFF;
744 background: #412355;
745 }
746 .media_page_imagify-bulk-optimization .imagify-rkt-notice {
747 margin-left: 2px;
748 margin-right: 20px;
749 }
750 @media (max-width: 782px) {
751 .media_page_imagify-bulk-optimization .imagify-rkt-notice {
752 margin-left: 0;
753 margin-right: 12px;
754 }
755 }
756 .imagify-rkt-notice .imagify-cross {
757 position: absolute;
758 right: 8px; top: 50%;
759 width: 22px; height: 22px;
760 padding: 0;
761 margin-top: -11px;
762 background: transparent;
763 color: #FD7300;
764 border-radius: 50%;
765 transition: all .275s;
766 }
767 .imagify-rkt-notice .imagify-cross .dashicons {
768 position: relative;
769 top: 2px; left: 1px;
770 transition: all .275s;
771 }
772 .imagify-rkt-notice .imagify-cross:hover {
773 background: #FFF;
774 }
775 .imagify-rkt-notice .imagify-cross:hover .dashicons {
776 color: #412355;
777 }
778 .imagify-rkt-notice .imagify-rkt-cta,
779 .imagify-rkt-notice .imagify-rkt-logo,
780 .imagify-rkt-notice .imagify-rkt-coupon {
781 -webkit-flex-shrink: 0;
782 -ms-flex-negative: 0;
783 flex-shrink: 0;
784 }
785 .imagify-rkt-notice .imagify-rkt-logo {
786 width: 150px!important; /* !important because of a dirtugly WP Engine code */
787 text-align: center;
788 padding: 0 25px 0 30px;
789 line-height: 0.8;
790 }
791 .imagify-rkt-notice .imagify-rkt-msg {
792 width: 100%!important; /* !important because of a dirtugly WP Engine code */
793 padding: 0 15px;
794 font-size: 14px;
795 line-height: 1.6;
796 }
797 .imagify-rkt-notice .imagify-rkt-coupon {
798 width: 150px!important; /* !important because of a dirtugly WP Engine code */
799 padding: 0 15px;
800 }
801 .imagify-rkt-notice .imagify-rkt-coupon-code {
802 padding: 5px 10px;
803 font-size: 23px;
804 font-weight: bold;
805 border: 1px dashed #F7A933;
806 color: #F7A933;
807 }
808 .imagify-rkt-notice .imagify-rkt-cta {
809 width: 250px!important; /* !important because of a dirtugly WP Engine code */
810 -webkit-box-flex: 1;
811 -webkit-flex-grow: 1;
812 -ms-flex-positive: 1;
813 flex-grow: 1;
814 -webkit-flex-basis: 200px;
815 -ms-flex-preferred-size: 200px;
816 flex-basis: 200px;
817 }
818 .imagify-rkt-notice .button.button {
819 position: relative;
820 top: -1px;
821 height: auto;
822 font-weight: 600;
823 font-size: 14px;
824 box-shadow: 0 4px 0 #B27A27;
825 border: 0 none;
826 padding: 9px 18px 9px;
827 background: #F7A933;
828 text-shadow: 1px 1px 1px rgba(0,0,0,.2);
829 }
830 @media (max-width: 880px) {
831 .imagify-rkt-notice {
832 -webkit-flex-wrap: wrap;
833 -ms-flex-wrap: wrap;
834 flex-wrap: wrap;
835 }
836 .imagify-rkt-notice .imagify-rkt-msg,
837 .imagify-rkt-notice .imagify-rkt-cta,
838 .imagify-rkt-notice .imagify-rkt-logo {
839 text-align: left;
840 padding: 5px 15px;
841 }
842 .imagify-cross.imagify-cross {
843 top: 8px;
844 margin-top: 0;
845 }
846 .imagify-rkt-notice .imagify-cross .dashicons {
847 top: 1px;
848 }
849 }
850
851
852 /* Sections */
853
854 .imagify-settings-section {
855 padding: 10px 20px;
856 }
857 [id="imagify-settings"],
858 .imagify-welcome .imagify-settings-section {
859 border: 1px solid #D9D9D9;
860 border-top: 0 none;
861 background: #FFF;
862 }
863 .imagify-br {
864 line-height: 2;
865 }
866
867
868 /* Some colors */
869 .imagify-important {
870 color: #F5A623;
871 }
872 .imagify-info,
873 .imagify-info a {
874 color: #40B1D0;
875 font-size: 12px;
876 }
877 .imagify-info {
878 position: relative;
879 display: inline-block;
880 padding-left: 25px;
881 vertical-align: top;
882 }
883 .imagify-info .dashicons {
884 position: absolute;
885 left: 0; top: -1px;
886 }
887 label + .imagify-info,
888 label + .imagify-options-line,
889 .imagify-visual-label {
890 display: inline-block;
891 max-width: 70%;
892 margin-left: 15px;
893 margin-top: 2px!important;
894 -webkit-transition: opacity .3s;
895 transition: opacity .3s;
896 }
897 .imagify-visual-label {
898 vertical-align: -5px;
899 }
900 label[for="imagify_sizes_full"] + .imagify-info {
901 vertical-align: middle;
902 }
903
904 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label + .imagify-options-line,
905 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label .imagify-visual-label {
906 opacity: .5;
907 }
908 .imagify-settings.imagify-settings [type="checkbox"]:checked + label + .imagify-options-line,
909 .imagify-settings.imagify-settings [type="checkbox"]:checked + label .imagify-visual-label {
910 opacity: 1;
911 }
912
913 .imagify-checkbox-marged {
914 max-width: 500px;
915 margin-left: 45px;
916 }
917
918
919
920 /* Custom checkboxes in CSS */
921
922 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked),
923 .imagify-settings.imagify-settings [type="checkbox"]:checked,
924 .imagify-checkbox.imagify-checkbox:not(:checked),
925 .imagify-checkbox.imagify-checkbox:checked {
926 opacity: 0.01;
927 }
928 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked):focus,
929 .imagify-settings.imagify-settings [type="checkbox"]:checked:focus,
930 .imagify-checkbox.imagify-checkbox:not(:checked):focus,
931 .imagify-checkbox.imagify-checkbox:checked:focus {
932 box-shadow: none!important; /* system value to override */
933 outline: none!important;
934 border: 0 none!important;
935 }
936
937 .imagify-settings [type="checkbox"]:not(:checked) + label,
938 .imagify-settings [type="checkbox"]:checked + label,
939 .imagify-checkbox.imagify-checkbox:not(:checked) + label,
940 .imagify-checkbox.imagify-checkbox:checked + label {
941 position: relative;
942 padding-left: 6px;
943 cursor: pointer;
944 vertical-align: top;
945 }
946
947 /* checkbox aspect */
948 .imagify-settings [type="checkbox"]:not(:checked) + label:before,
949 .imagify-settings [type="checkbox"]:checked + label:before,
950 .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
951 .imagify-checkbox.imagify-checkbox:checked + label:before {
952 content: '';
953 position: absolute;
954 left: 0; top: 0;
955 width: 28px; height: 28px;
956 margin: 0 0 0 -24px;
957 border: 2px solid #8BA6B4;
958 background: #FFFFFF;
959 border-radius: 4px;
960 }
961 /* checked mark aspect */
962 .imagify-settings [type="checkbox"]:not(:checked) + label:after,
963 .imagify-settings [type="checkbox"]:checked + label:after,
964 .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
965 .imagify-checkbox.imagify-checkbox:checked + label:after {
966 content: "✓";
967 position: absolute;
968 font-size: 1.4em;
969 top: 3px; left: -16px;
970 -webkit-transition: all .2s;
971 -moz-transition: all .2s;
972 -ms-transition: all .2s;
973 transition: all .2s;
974 }
975 /* disabled aspect */
976 .imagify-settings [type="checkbox"][disabled]:not(:checked) + label:before,
977 .imagify-settings [type="checkbox"][disabled]:checked + label:before,
978 .imagify-checkbox.imagify-checkbox[disabled]:not(:checked) + label:before,
979 .imagify-checkbox.imagify-checkbox[disabled]:checked + label:before {
980 border-color: #ccc;
981 background: #ddd;
982 }
983 /* checked mark aspect changes */
984 .imagify-settings [type="checkbox"]:not(:checked) + label:after,
985 .imagify-checkbox.imagify-checkbox:not(:checked) + label:after {
986 opacity: 0;
987 -webkit-transform: scale(0);
988 -moz-transform: scale(0);
989 -ms-transform: scale(0);
990 transform: scale(0);
991 }
992 .imagify-settings [type="checkbox"]:checked + label:after,
993 .imagify-checkbox.imagify-checkbox:checked + label:after {
994 opacity: 1;
995 -webkit-transform: scale(1);
996 -moz-transform: scale(1);
997 -ms-transform: scale(1);
998 transform: scale(1);
999 }
1000 input[id^="imagify_sizes_"]:checked + label {
1001 font-weight: bold;
1002 }
1003
1004 /* medium version */
1005 .medium.imagify-checkbox:not(:checked) + label:before,
1006 .medium.imagify-checkbox:checked + label:before {
1007 width: 22px;
1008 height: 22px;
1009 border-width: 1.5px;
1010 border-radius: 2px;
1011 margin-top: 0;
1012 }
1013 .medium.imagify-checkbox:not(:checked) + label:after,
1014 .medium.imagify-checkbox:checked + label:after {
1015 font-size: 1.1em;
1016 left: -17px;
1017 top: 3px;
1018 }
1019
1020 /* mini version */
1021 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:before,
1022 .imagify-settings .mini[type="checkbox"]:checked + label:before,
1023 .mini.imagify-checkbox:not(:checked) + label:before,
1024 .mini.imagify-checkbox:checked + label:before {
1025 width: 15px;
1026 height: 15px;
1027 border-width: 1px;
1028 border-radius: 2px;
1029 margin-top: 0;
1030 }
1031 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:after,
1032 .imagify-settings .mini[type="checkbox"]:checked + label:after,
1033 .mini.imagify-checkbox:not(:checked) + label:after,
1034 .mini.imagify-checkbox:checked + label:after {
1035 font-size: .9em;
1036 left: -21px;
1037 top: 1px;
1038 }
1039 /* focus aspect */
1040 .imagify-settings [type="checkbox"]:not(:checked):focus + label:before,
1041 .imagify-settings [type="checkbox"]:checked:focus + label:before,
1042 .imagify-checkbox.imagify-checkbox:not(:checked):focus + label:before,
1043 .imagify-checkbox.imagify-checkbox:checked:focus + label:before {
1044 border-style: dotted;
1045 border-color: #40b1d0;
1046 }
1047
1048 /* Custom radio in CSS */
1049 .imagify-inline-options {
1050 position: relative;
1051 display: table;
1052 width: 100%;
1053 max-width: 600px;
1054 border-collapse: collapse;
1055 }
1056 .imagify-small-options {
1057 width: 300px;
1058 margin: 1em auto .5em;
1059 background: #338EA6;
1060 border-radius: 4px;
1061 }
1062 .imagify-inline-options input[type="radio"]:not(:checked),
1063 .imagify-inline-options input[type="radio"]:checked {
1064 position: absolute;
1065 left: 5px; top: 5px;
1066 display: none;
1067 }
1068 .imagify-inline-options input[type="radio"]:not(:checked) + label,
1069 .imagify-inline-options input[type="radio"]:checked + label {
1070 position: relative;
1071 display: table-cell;
1072 padding: 13px 10px;
1073 text-align: center;
1074
1075 font-weight: 600;
1076 font-size: 16px;
1077 text-transform: uppercase;
1078 letter-spacing: 0.1em;
1079 color: #FFF;
1080 background: #2E3243;
1081 border-left: 1px solid rgba(255, 255, 255, 0.2);
1082 box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset, inset -1px 0 0 rgba(255, 255, 255, 0.2);
1083 z-index: 2;
1084 -webkit-transition: all .275s;
1085 transition: all .275s;
1086 }
1087 .imagify-small-options input[type="radio"]:not(:checked) + label,
1088 .imagify-small-options input[type="radio"]:checked + label {
1089 padding: 8px 10px;
1090 font-size: 13px;
1091 color: #FFF;
1092 box-shadow: none;
1093 border-left: 0;
1094 }
1095 .imagify-bulk-submit .imagify-inline-options input[type="radio"]:not(:checked) + label,
1096 .imagify-bulk-submit .imagify-inline-options input[type="radio"]:checked + label {
1097 margin-bottom: 1.75em;
1098 }
1099 .imagify-inline-options input[type="radio"]:not(:checked) + label:first-of-type,
1100 .imagify-inline-options input[type="radio"]:checked + label:first-of-type {
1101 border-radius: 3px 0 0 3px;
1102 }
1103 .imagify-inline-options input[type="radio"]:not(:checked) + label:last-of-type,
1104 .imagify-inline-options input[type="radio"]:checked + label:last-of-type {
1105 border-radius: 0 3px 3px 0;
1106 }
1107
1108 .imagify-inline-options input[type="radio"]:checked + label {
1109 background: #8BC34A
1110 }
1111
1112 .imagify-small-options input[type="radio"]:not(:checked) + label {
1113 background: #338EA6;
1114 color: rgba(255, 255, 255, .4);
1115 }
1116 .imagify-small-options input[type="radio"]:checked + label {
1117 background: #40B1D0;
1118 }
1119
1120 .imagify-inline-options .imagify-info {
1121 margin-top: 15px;
1122 }
1123 .imagify-btn-info {
1124 display: block;
1125 font-size: 0.7em;
1126 letter-spacing: 0;
1127 line-height: 1;
1128 text-transform: none;
1129 }
1130
1131 /* Some inputs */
1132 #describe-resize-larger input {
1133 width: 5em;
1134 }
1135
1136 /* Ads & columns */
1137 .imagify-cols:after {
1138 content: "";
1139 display: table;
1140 clear: both;
1141 }
1142 .imagify-col {
1143 float: left;
1144 width: 50%;
1145 }
1146 .imagify-main {
1147 float: left;
1148 width: 70%;
1149 }
1150 .imagify-sidebar {
1151 float: right;
1152 width: 28%;
1153 max-width: 300px;
1154 }
1155 .imagify-sidebar-section {
1156 border: 1px solid #BBB;
1157 background: #FFF;
1158 }
1159 .imagify-sidebar-section + .imagify-sidebar-section {
1160 margin-top: 2em;
1161 }
1162 @media (max-width: 820px) {
1163 .imagify-settings {
1164 display: flex;
1165 flex-direction: column;
1166 }
1167 .imagify-main {
1168 width: auto;
1169 float: none;
1170 }
1171 .imagify-sidebar {
1172 order: 2;
1173 float: none;
1174 width: auto;
1175 max-width: none;
1176 margin-left: 0;
1177 margin-top: 25px;
1178 }
1179 .wp-media-products {
1180 text-align: center;
1181 }
1182 .wp-media-products li {
1183 display: inline-block;
1184 width: 100%;
1185 max-width: 276px;
1186 }
1187 }
1188 @media (min-width: 1400px) {
1189 .imagify-main {
1190 width: 74%;
1191 }
1192 }
1193 .imagify-sidebar-title {
1194 display: block;
1195 padding: 20px 15px;
1196 border-bottom: 1px solid #BBB;
1197 font-size: 14px;
1198 font-weight: bold;
1199 color: #23282d;
1200 background: #F2F5F7;
1201 }
1202 .imagify-sidebar-title img {
1203 vertical-align: top;
1204 margin-right: 5px;
1205 }
1206 .imagify-sidebar .wp-media-products {
1207 margin-top: 0;
1208 margin-bottom: -.5em;
1209 }
1210 .imagify-sidebar .wp-media-products .links {
1211 display: block;
1212 padding: 85px 25px 24px;
1213 text-align: center;
1214 background-color: #2E3243;
1215 background-size: contain;
1216 background-repeat: no-repeat;
1217 background-position: 50% 0;
1218 text-decoration: none;
1219 }
1220 .imagify-sidebar .wp-media-products .links p {
1221 margin: 1.5em auto;
1222 color: #FFF;
1223 }
1224 .imagify-sidebar .wp-media-products .wprocket-link {
1225 background-image: linear-gradient(to bottom, rgba(59, 30, 78 ,0), rgba(59, 30, 78 ,0) 130px, rgba(59 ,30 ,78 , 1) 210px), url("../images/sidebar-wp-rocket.jpg");
1226 background-color: #3B1E4E;
1227 background-repeat: repeat-x, no-repeat;
1228 }
1229
1230 .imagify-sidebar-content {
1231 padding: 10px 20px;
1232 }
1233
1234 .imagify-mark-styled {
1235 display: inline-block;
1236 padding: 1px 2px 1px 4px;
1237 line-height: 1.3;
1238 font-weight: bold;
1239 background: #F7A933;
1240 transform-origine: 50% 50%;
1241 transform: rotateZ(-2deg) rotateX(-10deg) skewX(-2deg) skewY(-3deg);
1242 text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
1243 }
1244 .imagify-mark-styled span {
1245 display: inline-block;
1246 transform: rotateZ(2deg) rotateX(10deg) skewX(2deg) skewY(3deg);
1247 }
1248
1249 .imagify-discount-code {
1250 margin: 0.35em 0 .5em;
1251 display: block;
1252 font-size: 2em;
1253 letter-spacing: .05em;
1254 font-weight: bold;
1255 text-align: center;
1256 text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
1257 }
1258 .imagify-big-text {
1259 font-size: 15px;
1260 font-weight: bold;
1261 }
1262 .imagify-big-text strong {
1263 font-size: 20px;
1264 }
1265 a.btn-rocket {
1266 display: block;
1267 font-size: 1.15em;
1268 padding: 12px;
1269 background: #F7A933;
1270 box-shadow: 0 3px 0 #D69626;
1271 border-radius: 3px;
1272 color: #FFF;
1273 text-transform: uppercase;
1274 font-weight: bold;
1275 text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
1276 text-decoration: none;
1277 }
1278 a.btn-rocket:hover,
1279 a.btn-rocket:focus {
1280 background: darkorange;
1281 box-shadow: 0 3px 0 darkorange;
1282 }
1283
1284
1285 /*
1286 * == Welcome section
1287 */
1288
1289 .imagify-welcome {
1290 margin: 30px 20px 0 0;
1291 }
1292 .imagify-welcome .baseline {
1293 display: inline-block;
1294 margin: .2em 0 0 2em;
1295 font-size: 17px;
1296 }
1297 .imagify-welcome .imagify-logo {
1298 vertical-align: middle;
1299 }
1300 .imagify-welcome-remove {
1301 position: absolute;
1302 top: 50%; right: 15px;
1303 margin-top: -8px;
1304 color: #FFF;
1305 text-decoration: none;
1306 }
1307 .imagify-columns {
1308 overflow: hidden;
1309 padding: 15px 0;
1310 counter-reset: cols;
1311 }
1312 .imagify-columns [class^="col-"] {
1313 float: left;
1314 -webkit-box-sizing: border-box;
1315 -moz-box-sizing: border-box;
1316 box-sizing: border-box;
1317 }
1318 .imagify-columns .col-1-3 {
1319 width: 33.333%;
1320 padding-left: 28px;
1321 }
1322 .imagify-columns .col-2-3 {
1323 width: 66.666%;
1324 padding-left: 28px
1325 }
1326 .imagify-columns .col-1-2 {
1327 width: 50%;
1328 padding: 0 20px;
1329 }
1330 .imagify-columns .col-overview {
1331 padding-left: 20px;
1332 }
1333 .imagify-columns .col-informations {
1334 width: 36.6%;
1335 padding-right: 30px;
1336 }
1337 .imagify-columns .col-statistics {
1338 width: 30%;
1339 }
1340 @media (max-width: 830px) {
1341 .imagify-columns [class^="col-"] {
1342 float: none;
1343 margin-bottom: 1.5em;
1344 }
1345 .imagify-columns .col-1-3,
1346 .imagify-columns .col-1-2 {
1347 width: auto;
1348 padding: 0 28px;
1349 clear: both;
1350 padding-top: 1em;
1351 }
1352 }
1353 .imagify-columns [class^="col-"] img {
1354 float: left;
1355 margin-right: 18px;
1356 }
1357 .imagify-col-content {
1358 overflow: hidden;
1359 }
1360 .imagify-col-title {
1361 margin: 0 0 15px 0;
1362 font-size: 23px;
1363 }
1364 .counter .imagify-col-title:before {
1365 counter-increment: cols;
1366 content: counter(cols) ". ";
1367 color: #40B1D0;
1368 }
1369 .imagify-col-desc {
1370 color: #5F758E;
1371 margin-bottom: 2em;
1372 }
1373
1374
1375 /*
1376 * == Imagify Notices
1377 */
1378 .imagify-notice.imagify-notice {
1379 position: relative;
1380 display: -webkit-box;
1381 display: -webkit-flex;
1382 display: -ms-flexbox;
1383 display: flex;
1384 padding: 0;
1385 margin: 10px 20px 10px 2px;
1386 border: 0 none;
1387 background: #2E3243;
1388 box-shadow: none;
1389 color: #FFF;
1390 }
1391 @media (max-width:782px) {
1392 .imagify-notice.imagify-notice,
1393 .imagify-welcome {
1394 margin-right: 12px;
1395 }
1396 }
1397 @media (max-width: 450px) {
1398 .imagify-notice.imagify-notice {
1399 -webkit-box-orient: vertical;
1400 -webkit-box-direction: normal;
1401 -webkit-flex-direction: column;
1402 -ms-flex-direction: column;
1403 flex-direction: column;
1404 }
1405 }
1406 .wrap .imagify-notice {
1407 margin: 5px 15px 2px;
1408 position: relative;
1409 }
1410 .imagify-notice-logo {
1411 padding: 18px 23px;
1412 background: #40B1D0;
1413 }
1414 .updated .imagify-notice-logo {
1415 background: #8BC34A;
1416 }
1417 .error .imagify-notice-logo {
1418 background: #D0021B;
1419 }
1420
1421 .imagify-notice-title {
1422 font-size: 15px;
1423 }
1424
1425 .imagify-notice-content {
1426 padding: 5px 23px;
1427 }
1428 .imagify-notice-content.imagify-notice-content p {
1429 margin: 0.65em 0;
1430 }
1431 .imagify-notice a {
1432 color: #40B1D0;
1433 }
1434 .imagify-notice a:hover,
1435 .imagify-notice a:focus {
1436 color: #FEE102;
1437 }
1438
1439 .imagify-notice code {
1440 background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
1441 }
1442
1443 /*
1444 * == Custom column & Metabox
1445 */
1446 .column-imagify_optimized_file.column-imagify_optimized_file {
1447 width: 300px;
1448 text-align: center;
1449 vertical-align: middle;
1450 }
1451 .column-imagify_optimized_file > * {
1452 max-width: 235px;
1453 margin: 0 auto;
1454 }
1455 ul.imagify-datas-list.imagify-datas-list {
1456 margin: 0 auto;
1457 color: #555;
1458 font-size: 10px;
1459 }
1460 .compat-field-imagify .label {
1461 vertical-align: top;
1462 }
1463 .compat-field-imagify ul.imagify-datas-list {
1464 margin-top: 7px;
1465 font-size: 11px;
1466 }
1467 ul.imagify-datas-list .big {
1468 font-size: 12px;
1469 color: #40B1D0;
1470 }
1471 .imagify-data-item {
1472 overflow: hidden;
1473 }
1474 .imagify-data-item .imagify-chart {
1475 display: inline-block;
1476 top: 1px;
1477 width: 20px;
1478 vertical-align: middle;
1479 margin-bottom: 0;
1480 }
1481 li.imagify-data-item {
1482 clear: both;
1483 margin-bottom: 2px;
1484 }
1485 ul.imagify-datas-list .imagify-data-item span.data,
1486 ul.imagify-datas-list .imagify-data-item strong {
1487 float: left;
1488 width: 50%;
1489 -webkit-box-sizing: border-box;
1490 -moz-box-sizing: border-box;
1491 box-sizing: border-box;
1492 }
1493 ul.imagify-datas-list .imagify-data-item span.data {
1494 text-align: left;
1495 padding-right: 5px;
1496 }
1497 .compat-field-imagify .imagify-datas-list .imagify-data-item .data {
1498 width: 130px;
1499 text-align: left;
1500 font-weight: bold;
1501 }
1502 .media-sidebar .imagify-datas-list .imagify-data-item .data {
1503 width: auto;
1504 float: none;
1505 }
1506 ul.imagify-datas-list .imagify-data-item strong {
1507 text-align: left;
1508 padding-left: 5px;
1509 }
1510 .media-sidebar .imagify-datas-list .imagify-data-item strong {
1511 width: auto;
1512 float: none;
1513 }
1514
1515 .imagify-datas-more-action.imagify-datas-more-action {
1516 margin: .4em auto;
1517 background: linear-gradient(to bottom, transparent, transparent 49%, rgba(0,0,0,.075) 50%, rgba(0,0,0,.075) 58%, transparent 58%, transparent);
1518 }
1519 .imagify-datas-more-action a {
1520 display: inline-block;
1521 padding: 0 5px;
1522 background: #40B1D0;
1523 color: #FFF;
1524 text-transform: uppercase;
1525 font-size: 9px;
1526 font-weight: bold;
1527 line-height: 1.9;
1528 text-decoration: none;
1529 }
1530 .imagify-datas-more-action a.is-open {
1531 background: #555;
1532 }
1533 .imagify-datas-more-action a.is-open .dashicons {
1534 transform: rotate(180deg);
1535 }
1536 .imagify-datas-more-action a .dashicons {
1537 font-size: 14px;
1538 vertical-align: middle;
1539 line-height: .8;
1540 }
1541 .imagify-datas-more-action a .dashicons:before {
1542 vertical-align: middle;
1543 line-height: 20px;
1544 }
1545 .imagify-datas-more-action .the-text {
1546 display: inline-block;
1547 vertical-align: middle;
1548 height: 20px;
1549 line-height: 20px;
1550 }
1551
1552 ul.imagify-datas-details.imagify-datas-details {
1553 margin: .7em auto;
1554 }
1555 .imagify-datas-details strong {
1556 color: #40B1D0;
1557 }
1558 .imagify-datas-details .original {
1559 color: #555;
1560 }
1561
1562 .imagify-datas-actions-links {
1563 overflow: hidden;
1564 border-top: 2px solid transparent;
1565 padding-top: 5px;
1566 font-size: 8px;
1567 }
1568 .imagify-datas-actions-links a {
1569 position: relative;
1570 display: inline-block;
1571 padding-left: 17px;
1572 text-decoration: none;
1573 font-weight: 600;
1574 }
1575 .compat-field-imagify .imagify-datas-actions-links {
1576 max-width: 300px;
1577 }
1578 .misc-pub-imagify .imagify-datas-actions-links {
1579 border-top: 2px solid #f2f2f2;
1580 padding-bottom: 5px;
1581 }
1582 /* Media edition */
1583 .compat-field-imagify .imagify-datas-actions-links a,
1584 .misc-pub-imagify .imagify-datas-actions-links a {
1585 font-size: 10px;
1586 float: left;
1587 width: 50%;
1588 }
1589 .media-sidebar .compat-field-imagify .imagify-datas-actions-links a,
1590 .submitbox .misc-pub-imagify .imagify-datas-actions-links a {
1591 display: block;
1592 width: auto;
1593 float: none;
1594 }
1595 /* Medias list */
1596 .column-imagify_optimized_file .imagify-datas-actions-links a {
1597 margin: 0 .7em;
1598 padding-left: 15px;
1599 }
1600 .imagify-datas-actions-links a:only-child {
1601 float: none;
1602 width: auto;
1603 }
1604 .imagify-datas-details.is-open + .imagify-datas-actions-links {
1605 border-top-color: rgba(0,0,0,.075);
1606 }
1607 .imagify-datas-actions-links .dashicons {
1608 position: absolute;
1609 left: 0; top: 4px;
1610 width: 12px;
1611 margin-right: 2px;
1612 font-size: 11px;
1613 }
1614
1615 /*
1616 * == Bulk page
1617 */
1618
1619 .imagify-title > h1 {
1620 padding: 0;
1621 }
1622 .imagify-title-right {
1623 display: table;
1624 float: right;
1625 margin-top: -10px;
1626 }
1627 .imagify-title-right p {
1628 margin: 0;
1629 }
1630 .imagify-title-right a {
1631 font-weight: bold;
1632 text-decoration: none;
1633 }
1634 .imagify-title-right > div {
1635 display: table-cell;
1636 vertical-align: middle;
1637 }
1638 .imagify-title-right .dashicons-arrow-down-alt2 {
1639 vertical-align: -4px;
1640 margin-left: 2px;
1641 }
1642 @media (max-width: 1200px) {
1643 .imagify-bulk .imagify-title {
1644 display: -webkit-box;
1645 display: -webkit-flex;
1646 display: -ms-flexbox;
1647 display: flex;
1648 -webkit-box-orient: vertical;
1649 -webkit-box-direction: normal;
1650 -webkit-flex-direction: column;
1651 -ms-flex-direction: column;
1652 flex-direction: column;
1653 }
1654 .imagify-title-right {
1655 -webkit-box-ordinal-group: 3;
1656 -webkit-order: 2;
1657 -ms-flex-order: 2;
1658 order: 2;
1659 margin-top: 20px;
1660 }
1661 }
1662 .imagify-account,
1663 .imagify-account-link {
1664 padding-right: 15px;
1665 }
1666 .imagify-sep-v {
1667 width: 1px;
1668 background: rgba(255, 255, 255, .2);
1669 }
1670 .imagify-credit-left {
1671 position: relative;
1672 min-width: 280px;
1673 padding-left: 15px;
1674 }
1675 .imagify-meteo-icon {
1676 display: inline-block;
1677 height: 38px;
1678 vertical-align: middle;
1679 margin-right: 10px;
1680 }
1681 .imagify-user-plan {
1682 color: #40b1d0;
1683 }
1684
1685 @media (max-width: 630px) {
1686 .imagify-title-right {
1687 display: block;
1688 width: auto;
1689 }
1690 .imagify-title-right > div {
1691 display: block;
1692 width: auto;
1693 margin-top: 10px;
1694 max-width: 100%;
1695 }
1696 .imagify-credit-left {
1697 padding-left: 0;
1698 }
1699 }
1700 /*
1701 .imagify-meteo-icon:after {
1702 opacity: 0;
1703 visibility: hidden;
1704 content: attr(data-title);
1705 position: absolute;
1706 top: 100%;
1707 left: 50%;
1708 font-size: 11px;
1709 line-height: 1.3;
1710 width: 150px;
1711 margin-left: -80px;
1712 padding: 6px 12px;
1713 background: #60758d;
1714 border-radius: 4px;
1715 -webkit-transition: opacity .3s;
1716 transition: opacity .3s;
1717 }
1718 .imagify-meteo-icon:hover:after,
1719 .imagify-meteo-icon:focus:after {
1720 opacity: 1;
1721 visibility: visible;
1722 }
1723 */
1724 .imagify-meteo-title.imagify-meteo-title {
1725 color: #FFF;
1726 font-size: 17px;
1727 }
1728 .imagify-space-left {
1729 display: inline-block;
1730 min-height: 38px;
1731 min-width: 245px;
1732 vertical-align: middle;
1733 }
1734 .imagify-space-left > p {
1735 color: #FFF;
1736 }
1737 [class^="imagify-bar-"],
1738 #wp-admin-bar-imagify-profile [class^="imagify-bar-"] {
1739 position: relative;
1740 height: 15px;
1741 width: 100%;
1742 background: #60758D;
1743 color: #FFF;
1744 font-size: 10px;
1745 }
1746 .base-transparent {
1747 background: transparent;
1748 }
1749 [class^="imagify-bar-"].right-outside-number {
1750 -webkit-box-sizing: border-box;
1751 box-sizing: border-box;
1752 padding-right: 45px;
1753 }
1754 .right-outside-number .imagify-barnb {
1755 display: block;
1756 margin-right: -45px;
1757 text-align: right;
1758 font-weight: bold;
1759 line-height: 15px;
1760 }
1761 .imagify-progress-value,
1762 #wp-admin-bar-imagify-profile .imagify-progress-value {
1763 position: absolute;
1764 top: 0; right: 0; left: 0; bottom: 0;
1765 text-align: center;
1766 line-height: 13px;
1767 font-weight: bold;
1768 }
1769 .imagify-progress,
1770 #wp-admin-bar-imagify-profile .imagify-progress {
1771 height: 15px;
1772 }
1773 .imagify-bar-positive .imagify-progress {
1774 background: #8CC152;
1775 }
1776 .imagify-bar-positive .imagify-barnb {
1777 color: #8CC152;
1778 }
1779 .imagify-bar-negative .imagify-progress {
1780 background: #73818C;
1781 }
1782 .imagify-bar-negative .imagify-barnb {
1783 color: #73818C;
1784 }
1785 .imagify-bar-neutral .imagify-progress {
1786 background: #F5A623;
1787 }
1788 .imagify-space-left .imagify-bar-negative .imagify-progress {
1789 background: #D0021B;
1790 }
1791
1792 /* admin bar version */
1793 #wpadminbar #wp-admin-bar-imagify-profile * {
1794 line-height: 1.5;
1795 white-space: initial;
1796 }
1797 #wpadminbar #wp-admin-bar-imagify .ab-submenu {
1798 padding-bottom: 0;
1799 }
1800 #wpadminbar #wp-admin-bar-imagify-profile .ab-item {
1801 height: auto;
1802 padding: 0 13px;
1803 }
1804 #wpadminbar #wp-admin-bar-imagify-profile {
1805 min-width: 200px;
1806 padding: 15px 0 10px;
1807 margin-top: 0.7em;
1808 background: #222;
1809 }
1810 #wp-admin-bar-imagify .dashicons {
1811 font-family: "dashicons";
1812 font-size: 18px;
1813 vertical-align: middle;
1814 margin: 0 5px 0 0;
1815 }
1816 #wp-admin-bar-imagify .button-text {
1817 display: inline-block;
1818 vertical-align: middle;
1819 }
1820 #wp-admin-bar-imagify .imagify-abq-row {
1821 display: table;
1822 width: 100%;
1823 }
1824 #wp-admin-bar-imagify .imagify-abq-row + .imagify-abq-row {
1825 margin-top: .75em;
1826 }
1827 #wp-admin-bar-imagify .imagify-abq-row > * {
1828 display: table-cell;
1829 }
1830 #wp-admin-bar-imagify-profile .imagify-meteo-icon {
1831 padding-right: 7px;
1832 }
1833 #wp-admin-bar-imagify-profile .imagify-meteo-icon img {
1834 width: 37px;
1835 }
1836 #wp-admin-bar-imagify-profile .imagify-meteo-title {
1837 font-size: 17px;
1838 }
1839 #wp-admin-bar-imagify-profile .imagify-meteo-subs {
1840 color: #72889F;
1841 }
1842 #wpadminbar #wp-admin-bar-imagify-profile strong {
1843 font-weight: bold;
1844 }
1845 #wpadminbar #wp-admin-bar-imagify-profile .imagify-user-plan,
1846 #wpadminbar #wp-admin-bar-imagify-profile a {
1847 padding: 0;
1848 color: #40B1D0;
1849 }
1850 #wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link {
1851 display: table;
1852 }
1853 #wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link > * {
1854 display: table-cell;
1855 }
1856 #wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left {
1857 max-width: 210px;
1858 min-width: 210px;
1859 width: 210px;
1860 }
1861 #wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left p {
1862 font-size: 12px;
1863 }
1864 #wp-admin-bar-imagify-profile .imagify-error,
1865 #wp-admin-bar-imagify-profile .imagify-warning {
1866 padding: 10px;
1867 margin: 0 -13px -13px;
1868 }
1869 #wp-admin-bar-imagify-profile .imagify-error p + p,
1870 #wp-admin-bar-imagify-profile .imagify-warning p + p {
1871 margin-top: .5em;
1872 }
1873 #wp-admin-bar-imagify-profile .imagify-error p + p + p,
1874 #wp-admin-bar-imagify-profile .imagify-warning p + p + p {
1875 margin-top: 1em;
1876 }
1877
1878 .btn-ghost,
1879 #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost {
1880 display: inline-block;
1881 height: auto;
1882 padding: 7px 10px;
1883 border: 1px solid #FFF;
1884 text-align: center;
1885 background: transparent;
1886 color: #FFF;
1887 border-radius: 3px;
1888 transition: all .275s;
1889 }
1890
1891 .btn-ghost:hover,
1892 .btn-ghost:focus,
1893 #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:hover,
1894 #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:focus {
1895 background: #FFF;
1896 color: #888;
1897 }
1898 .imagify-list-infos {
1899 max-width: 100%;
1900 width: 415px;
1901 }
1902 .imagify-list-infos li,
1903 .imagify-info-block {
1904 position: relative;
1905 padding: 10px;
1906 padding-left: 42px;
1907 background: #D9E4EB;
1908 border-radius: 4px;
1909 line-height: 1.6;
1910 }
1911 .imagify-list-infos .imagify-alt.imagify-alt {
1912 background: #8BA7B5;
1913 color: #FFF;
1914 font-weight: bold;
1915 }
1916 .imagify-list-infos li + li {
1917 margin-top: 1em;
1918 }
1919 .imagify-list-infos li:before,
1920 .imagify-info-block:before {
1921 content: "";
1922 position: absolute;
1923 left: 13px; top: 14px;
1924 height: 16px; width: 16px;
1925 border: 1px solid #46b1ce;
1926 border-radius: 10px;
1927 }
1928 .imagify-list-infos li:after,
1929 .imagify-info-block:after {
1930 content: "i";
1931 position: absolute;
1932 left: 20px; top: 13px;
1933 font-style: italic;
1934 color: #46b1ce;
1935 }
1936 .imagify-cell .imagify-info-block {
1937 padding-top: 0;
1938 }
1939 .imagify-cell .imagify-info-block:after {
1940 top: 6px;
1941 }
1942 .imagify-cell .imagify-info-block:before {
1943 top: 7px;
1944 }
1945 .imagify-list-infos .imagify-alt:before,
1946 .imagify-list-infos .imagify-alt:after {
1947 color: #fff;
1948 border-color: #fff;
1949 }
1950 .imagify-sub-title.imagify-sub-title {
1951 font-size: 23px;
1952 background: #FFF;
1953 color: #2E3243;
1954 border-left: 1px solid #D9D9D9;
1955 border-right: 1px solid #D9D9D9;
1956 font-weight: lighter;
1957 }
1958 .imagify-sub-title .icon-bulk {
1959 margin-right: 10px;
1960 vertical-align: middle;
1961 }
1962 .imagify-sub-title .title-text {
1963 display: inline-block;
1964 line-height: 1;
1965 vertical-align: middle;
1966 }
1967 .imagify-bulk .imagify-settings-section {
1968 border: 1px solid #D9D9D9;
1969 border-top: 0;
1970 background: #F2F5F7;
1971 color: #4A4A4A;
1972 }
1973 .imagify-bulk .imagify-settings-section p,
1974 .imagify-bulk .imagify-settings-section li,
1975 .imagify-bulk .imagify-settings-section h3 {
1976 color: #4A4A4A;
1977 }
1978 .imagify-bulk .imagify-settings-section h3 {
1979 margin-bottom: 2em;
1980 }
1981 .imagify-title .imagify-tooltips {
1982 position: absolute;
1983 top: 100%;
1984 left: 0;
1985 }
1986 .imagify-tooltips .icon-round {
1987 float: left;
1988 display: inline-block;
1989 width: 28px;
1990 height: 28px;
1991 border: 1px solid #FFF;
1992 margin-right: 8px;
1993 margin-bottom: 8px;
1994 font-size: 17px;
1995 font-style: italic;
1996 line-height: 29px;
1997 font-weight: bold;
1998 text-align: center;
1999 border-radius: 50%;
2000 }
2001 .imagify-tooltips .tooltip-content {
2002 display: block;
2003 position: relative;
2004 max-width: 250px;
2005 padding: 7px 15px 8px;
2006 background: #2e3242;
2007 color: #FFF;
2008 font-size: 10px;
2009 border-radius: 3px;
2010 }
2011 .imagify-tooltips.right .tooltip-content {
2012 margin-left: 12px;
2013 }
2014 .imagify-tooltips.bottom .tooltip-content {
2015 margin-top: 4px;
2016 }
2017 .imagify-inline-options label .tooltip-content {
2018 position: absolute;
2019 left: 0; right: 0;
2020 top: 100%;
2021 text-transform: none;
2022 font-size: 10px;
2023 letter-spacing: 0;
2024 text-align: center;
2025 }
2026 .imagify-tooltips .tooltip-content:after {
2027 content: "";
2028 position: absolute;
2029 }
2030 .imagify-tooltips.right .tooltip-content:after {
2031 top: 16px; left: -6px;
2032 border-right: 8px solid #2e3242;
2033 border-top: 6px solid transparent;
2034 border-bottom: 6px solid transparent;
2035 }
2036 .imagify-tooltips.bottom .tooltip-content:after {
2037 top: -5px; left: 50%;
2038 margin-left: -3px;
2039 border-bottom: 6px solid #2e3242;
2040 border-left: 6px solid transparent;
2041 border-right: 6px solid transparent;
2042 }
2043 .imagify-space-tooltips .tooltip-content {
2044 max-width: 280px;
2045 margin-top: 20px;
2046 margin-left: 0;
2047 padding: 5px 15px 5px;
2048 font-size: 13px;
2049 background: #40B1D0;
2050 box-shadow: 0 3px 0 #338EA6;
2051 }
2052 .imagify-space-tooltips .tooltip-content:after {
2053 top: -14px;
2054 left: 50%;
2055 margin-left: -7px;
2056 border: 0 none;
2057 border-bottom: 15px solid #40B1D0;
2058 border-left: 15px solid transparent;
2059 border-right: 15px solid transparent;
2060 }
2061 .tooltip-content.tooltip-table {
2062 display: table;
2063 width: 100%;
2064 }
2065 .tooltip-content.tooltip-table > * {
2066 display: table-cell;
2067 vertical-align: middle;
2068 }
2069 .tooltip-content .cell-icon {
2070 width: 28px;
2071 }
2072 .tooltip-content .cell-icon .icon {
2073 margin-bottom: 0;
2074 }
2075 .tooltip-content .cell-text {
2076 padding: 5px 10px 5px 0;
2077 line-height: 1.3;
2078 }
2079 .tooltip-content .cell-sep {
2080 width: 1px;
2081 background: rgba(255, 255, 255, .4);
2082 }
2083 .tooltip-content .cell-cta {
2084 padding-left: 10px;
2085 }
2086 .tooltip-content .cell-cta a {
2087 display: block;
2088 color: #FFF;
2089 width: 100%;
2090 height: 100%;
2091 white-space: nowrap;
2092 }
2093
2094 .imagify-number-you-optimized .number {
2095 display: table-cell;
2096 padding-right: 15px;
2097 font-size: 36px;
2098 font-weight: bold;
2099 line-height: 1.1;
2100 vertical-align: middle;
2101 white-space: nowrap;
2102 }
2103 .imagify-number-you-optimized .text {
2104 display: table-cell;
2105 vertical-align: middle;
2106 overflow: hidden;
2107 font-size: 12px;
2108 }
2109 .imagify-number-you-optimized .text br {
2110 display: none;
2111 }
2112 .imagify-number-you-optimized > p {
2113 display: table;
2114 }
2115 .imagify-number-you-optimized {
2116 padding-bottom: 0.85em;
2117 margin-bottom: 1.35em;
2118 overflow: hidden;
2119 border-bottom: 1px solid rgba(0,0,0, 0.05);
2120 }
2121 .imagify-bars p {
2122 font-weight: bold;
2123 font-size: 12px;
2124 margin-bottom: 0;
2125 }
2126 .imagify-bars + .imagify-number-you-optimized {
2127 border-bottom: 0;
2128 padding-top: 0.85em;
2129 }
2130 .imagify-bars + .imagify-number-you-optimized p {
2131 color: #46b1ce;
2132 }
2133
2134 /*
2135 * == Bulk table
2136 */
2137 .imagify-bulk-table {
2138 margin-top: 2em;
2139 max-height: 600px;
2140 max-height: 60vh;
2141 overflow: auto;
2142 }
2143 .imagify-bulk-table table {
2144 width: 100%;
2145 border-spacing: 0;
2146 border-collapse: collapse;
2147 border: 1px solid #D3D3D3;
2148 }
2149 .imagify-bulk-table td {
2150 padding: 8px 15px;
2151 }
2152 .imagify-bulk-table thead tr,
2153 .imagify-bulk-table thead th {
2154 background: #2E3242;
2155 }
2156 .imagify-bulk-table tfoot tr,
2157 .imagify-bulk-table tfoot th {
2158 background: #73818C;
2159 }
2160 .imagify-bulk-table thead th {
2161 padding: 14px 15px;
2162 text-align: left;
2163 color: #F2F5F7;
2164 font-weight: bold;
2165 font-size: 14px;
2166 }
2167 .imagify-bulk-table tfoot td {
2168 padding: 14px 15px;
2169 color: #F9FAFA;
2170 }
2171
2172 .imagify-bulk-table tbody tr,
2173 .imagify-bulk-table tbody td {
2174 background: #FFF;
2175 }
2176 .imagify-bulk-table tbody tr:nth-child(odd),
2177 .imagify-bulk-table tbody tr:nth-child(odd) td {
2178 background: #F2F5F7;
2179 }
2180
2181 .imagify-bulk-table .imagify-row-progress {
2182 display: none;
2183 }
2184
2185 .imagify-bulk-table .imagify-row-progress,
2186 .imagify-bulk-table .imagify-row-progress td {
2187 height: 15px;
2188 padding: 0;
2189 }
2190 .imagify-bulk-table .imagify-no-uploaded-yet td {
2191 height: 200px;
2192 font-size: 17px;
2193 letter-spacing: .1em;
2194 word-spacing: .12em;
2195 vertical-align: middle;
2196 text-transform: uppercase;
2197 font-weight: bold;
2198 text-align: center;
2199 color: #999;
2200 background-color: #FFF;
2201 }
2202
2203 .imagify-row-complete {
2204 padding: 35px 20px;
2205 margin-top: 2em;
2206 background: #8BC34A;
2207 color: #FFF;
2208 text-shadow: 0 0 2px rgba(0,0,0,.1);
2209 }
2210 .imagify-row-complete .imagify-ac-chart {
2211 margin-top: 3px;
2212 }
2213 .imagify-row-complete p {
2214 color: #FFF;
2215 margin: 0;
2216 }
2217
2218 @-webkit-keyframes congrate {
2219 0% {
2220 opacity: 0;
2221 -webkit-transform: scale(1);
2222 }
2223 50% {
2224 -webkit-transform: scale(1.05);
2225 opacity: 1;
2226 }
2227 100% {
2228 -webkit-transform: scale(1);
2229 opacity: 1;
2230 }
2231 }
2232 ​
2233 @keyframes congrate {
2234 0% {
2235 opacity: 0;
2236 transform: scale(1);
2237 }
2238 50% {
2239 transform: scale(1.05);
2240 opacity: 1;
2241 }
2242 100% {
2243 transform: scale(1);
2244 opacity: 1;
2245 }
2246 }
2247
2248
2249 .imagify-row-complete.done {
2250 -webkit-animation: congrate 500ms ease-in-out;
2251 animation: congrate 500ms ease-in-out;
2252 }
2253
2254 .imagify-all-complete {
2255 margin: 1.5em 0;
2256 }
2257 .imagify-all-complete > div {
2258 display: inline-block;
2259 vertical-align: middle;
2260 }
2261 .imagify-ac-report {
2262 min-width: 310px;
2263 }
2264 .imagify-ac-chart {
2265 width: 46px;
2266 height: 46px;
2267 float: left;
2268 margin: 0 20px 0 10px;
2269 }
2270 .imagify-ac-report-text {
2271 overflow: hidden;
2272 }
2273 .imagify-ac-report-text p {
2274 line-height: 1.3;
2275 }
2276 .imagify-ac-rt-big {
2277 font-weight: bold;
2278 font-size: 24px;
2279 letter-spacing: 0.15em;
2280 word-spacing: 0.15em;
2281 text-transform: uppercase;
2282 }
2283 .imagify-ac-share {
2284 text-align: right;
2285 }
2286 .imagify-ac-share-content {
2287 display: inline-block;
2288 padding: 10px 15px;
2289 background: rgba(255,255,255,.2);
2290 }
2291 .imagify-ac-share-content > * {
2292 display: inline-block;
2293 vertical-align: middle;
2294 }
2295 .imagify-bulk-table .imagify-ac-share-content p {
2296 margin-right: 5px;
2297 }
2298 .imagify-share-networks,
2299 .imagify-share-networks li {
2300 margin: 0;
2301 }
2302 .imagify-share-networks li {
2303 display: inline-block;
2304 }
2305 .imagify-share-networks a {
2306 display: inline-block;
2307 vertical-align: -7px;
2308 margin: 0 5px;
2309 text-decoration: none;
2310 color: #FFF;
2311 }
2312
2313 /* TD's width */
2314 .imagify-cell-filename {
2315 max-width: 200px;
2316 }
2317 .imagify-cell-status {
2318 max-width: 145px;
2319 }
2320 .imagify-cell-status .dashicons-warning {
2321 margin-right: 2px;
2322 }
2323 .imagify-cell-thumbnails {
2324 max-width: 120px;
2325 }
2326
2327 td.imagify-cell-filename {
2328 text-overflow: clip; /* ellipsis replace all the text by ... :`/ */
2329 white-space: nowrap;
2330 overflow: hidden;
2331 }
2332 .imagify-bulk-table td.imagify-cell-totaloriginal {
2333 padding-right: 78px;
2334 }
2335
2336 .imagiuploaded,
2337 .imagifilename {
2338 display: inline-block;
2339 vertical-align: middle;
2340 }
2341 .imagifilename {
2342 font-size: 12px;
2343 }
2344 .imagiuploaded {
2345 width: 33px;
2346 height: 33px;
2347 margin-right: 5px;
2348 margin-left: -8px;
2349 overflow: hidden;
2350 background: url(../images/upload-image.png) 0 0 no-repeat;
2351 background-size: cover;
2352 }
2353 .imagiuploaded img {
2354 max-widht: 100%;
2355 height: auto;
2356 }
2357
2358 .imagistatus {
2359 color: #8CA6B3;
2360 text-transform: uppercase;
2361 font-weight: bold;
2362 }
2363 .status-compressing {
2364 color: #46B1CE;
2365 }
2366 .status-error {
2367 color: #CE0B24;
2368 }
2369 .status-warning {
2370 color: #f5a623;
2371 }
2372 .status-complete {
2373 color: #8CC152;
2374 }
2375 .imagify-error {
2376 background: #D0021B;
2377 color: #FFF;
2378 }
2379 .imagify-warning,
2380 #wpadminbar .imagify-warning * {
2381 background: #f5a623;
2382 color: #FFF;
2383 text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
2384 }
2385 .imagify-bulk-table .imagify-cell-thumbnails {
2386 text-align: center;
2387 }
2388 .imagify-cell-percentage,
2389 .imagify-cell-savings {
2390 color: #46B1CE;
2391 font-weight: bold;
2392 }
2393 .imagify-cell-optimized {
2394 font-weight: bold;
2395 }
2396
2397 .imagify-cell-totaloriginal {
2398 text-align: right;
2399 }
2400
2401 /* icon rotate */
2402 .dashicons.rotate {
2403 -webkit-animation: icon-rotate 2.6s infinite linear;
2404 animation: icon-rotate 2.6s infinite linear;
2405 }
2406 .dashicons-admin-generic {
2407 transform-origin: 48.75% 51.75%;
2408 }
2409
2410
2411 /* Imagify Modal */
2412 .imagify-modal {
2413 display: flex;
2414 flex-direction: column;
2415 align-items: center;
2416 justify-content: center;
2417 }
2418 .js .imagify-modal {
2419 display: none;
2420 position: fixed;
2421 top: 0; right: 0; bottom: 0; left: 0;
2422 background-color: #1F2332;
2423 background-color: rgba(31,35,50,.95);
2424 z-index: 99999;
2425 }
2426 .imagify-modal-content {
2427 -webkit-box-sizing: border-box;
2428 -moz-box-sizing: border-box;
2429 box-sizing: border-box;
2430 position: relative;
2431 width: 800px;
2432 max-width: 95%;
2433 max-height: 90vw;
2434 overflow: auto;
2435 padding: 20px 25px;
2436 margin: 1em auto;
2437 background: #FFF;
2438 box-shadow: 1px 1px 4px rgba(0,0,0,.7);
2439 border-radius: 3px;
2440 }
2441 #imagify-visual-comparison .imagify-modal-content,
2442 .imagify-visual-comparison .imagify-modal-content {
2443 max-width: 1400px;
2444 background: transparent;
2445 padding: 5px;
2446 box-shadow: none;
2447 border-radius: 0;
2448 }
2449 .imagify-modal .h2 {
2450 margin: .5em 0;
2451 color: #8ba6b4;
2452 font-weight: normal;
2453 font-size: 24px;
2454 letter-spacing: 0.075em;
2455 text-align: center;
2456 }
2457 .imagify-modal .h3 {
2458 color: #40b1d0;
2459 font-weight: normal;
2460 font-size: 18px;
2461 letter-spacing: 0.075em;
2462 text-align: center;
2463 }
2464 .text-justify {
2465 text-align: justify;
2466 }
2467
2468 .imagify-modal .close-btn {
2469 display: none;
2470 visibility: hidden;
2471 position: absolute;
2472 right: 20px; top: 20px;
2473 font-size: 1.2em;
2474 border: 0;
2475 background: transparent none;
2476 border-radius: 0;
2477 cursor: pointer;
2478 }
2479 .imagify-modal .close-btn i {
2480 margin-left: -2px;
2481 }
2482 .imagify-modal .close-btn:hover,
2483 .imagify-modal .close-btn:focus {
2484 color: #40b1d0;
2485 }
2486 .js .imagify-modal .close-btn {
2487 display: block;
2488 visibility: visible;
2489 }
2490 #imagify-visual-comparison .close-btn,
2491 .imagify-visual-comparison .close-btn {
2492 top: 50px;
2493 right: 5px;
2494 width: 33px;
2495 height: 33px;
2496 padding: 1px 0 0 2px;
2497 border: 1px solid #F2F2F2;
2498 color: #F2F2F2;
2499 line-height: 19px;
2500 text-align: center;
2501 border-radius: 50%;
2502 }
2503
2504 /* Attachment page exception */
2505 .wp_attachment_image #imagify-visual-comparison .close-btn,
2506 .imagify-visual-comparison .close-btn {
2507 top: 0;
2508 }
2509 /* Attachment page exception */
2510 .wp_attachment_image #imagify-visual-comparison .imagify-modal-content,
2511 .imagify-visual-comparison .imagify-modal-content {
2512 padding-top: 40px;
2513 }
2514
2515 .imagify-modal .imagify-comparison-title {
2516 font-size: 28px;
2517 margin-bottom: 1em;
2518 color: #F2F2F2;
2519 text-align: left;
2520 }
2521 .imagify-modal .imagify-comparison-title .twentytwenty-duo-buttons {
2522 position: static;
2523 margin: 0 10px 0 15px;
2524 }
2525 .imagify-comparison-title .twentytwenty-duo-buttons button {
2526 float: none;
2527 padding: 6px 12px;
2528 font-size: 16px;
2529 text-transform: none;
2530 border: 1px solid #40B1D0;
2531 color: #888899;
2532 letter-spacing: 0;
2533 }
2534 .imagify-comparison-title .twentytwenty-duo-buttons button:focus {
2535 outline: none;
2536 box-shadow: none;
2537 }
2538 .imagify-comparison-title .twentytwenty-duo-buttons .selected {
2539 border: 1px solid #40B1D0;
2540 color: #FFF;
2541 background: #40B1D0;
2542 }
2543
2544 .imagify-comparison-levels {
2545 margin: 15px 0;
2546 overflow: hidden;
2547 }
2548 .imagify-comparison-levels div {
2549 display: none;
2550 min-width: 175px;
2551 font-size: 11px;
2552 }
2553 .imagify-comparison-levels .imagify-chart,
2554 .imagify-comparison-levels .imagify-chart-container {
2555 width: 25px;
2556 float: none;
2557 margin: 0;
2558 }
2559 .imagify-visual-comparison .imagify-chart-container canvas {
2560 width: 15px!important;
2561 height: 15px!important;
2562 margin-right: 5px;
2563 }
2564 .imagify-c-level.go-left {
2565 float: left;
2566 }
2567 .imagify-c-level.go-right {
2568 float: right;
2569 }
2570 .imagify-c-level.go-right,
2571 .imagify-c-level.go-left {
2572 display: table;
2573 }
2574 .imagify-c-level .imagify-c-level-row {
2575 display: table-row;
2576 margin: 0;
2577 color: #FFF;
2578 }
2579 .imagify-c-level-row > span {
2580 display: table-cell;
2581 padding: 2px 0;
2582 }
2583 .imagify-c-level-row .value {
2584 text-align: right;
2585 padding-left: 5px;
2586 }
2587 .imagify-c-level-row .value.level {
2588 color: #40b1d0;
2589 }
2590 .imagify-c-level-row .value.size {
2591 color: #8bc34a;
2592 font-weight: bold;
2593 }
2594 .imagify-c-level-row .value .imagify-chart {
2595 top: 1px;
2596 }
2597
2598 @-webkit-keyframes icon-rotate {
2599 from {
2600 -webkit-transform: rotate(0deg);
2601 transform: rotate(0deg);
2602 }
2603 to {
2604 -webkit-transform: rotate(360deg);
2605 transform: rotate(360deg);
2606 }
2607 }
2608 @keyframes icon-rotate {
2609 from {
2610 transform: rotate(0deg);
2611 }
2612 to {
2613 transform: rotate(360deg);
2614 }
2615 }
2616
2617 .imagify-menu-bar-img {
2618 margin-top: 1em;
2619 }
2620
2621 /**
2622 * Visual Comparison
2623 */
2624 .imagify-modal .loader {
2625 position: absolute;
2626 top: 50%;
2627 left: 50%;
2628 margin: -32px 0 0 -32px;
2629 opacity: 0;
2630 visibility: hidden;
2631 transition: opacity .4s;
2632 }
2633 .imagify-modal .loading .loader {
2634 visibility: visible;
2635 opacity: 1;
2636 }
2637
2638 .imagify-settings .imagify-visual-comparison-text {
2639 margin-top: 1em;
2640 color: #40b1d0;
2641 font-weight: bold;
2642 }
2643
2644 /**
2645 * Payment Modals
2646 */
2647
2648 /* Flexbox re-groups */
2649 .imagify-modal-cols,
2650 .imagify-border-styled,
2651 .imagify-offer-header,
2652 .imagify-payment-modal .imagify-modal-content,
2653 .imagify-flex-table,
2654 .imagify-tabs {
2655 display: -webkit-box;
2656 display: -webkit-flex;
2657 display: -ms-flexbox;
2658 display: flex;
2659 -webkit-box-orient: horizontal;
2660 -webkit-box-direction: normal;
2661 -webkit-flex-direction: row;
2662 -ms-flex-direction: row;
2663 flex-direction: row;
2664 }
2665 .imagify-modal-cols,
2666 .imagify-border-styled {
2667 -webkit-box-pack: center;
2668 -webkit-justify-content: center;
2669 -ms-flex-pack: center;
2670 justify-content: center;
2671 -webkit-box-align: center;
2672 -webkit-align-items: center;
2673 -ms-flex-align: center;
2674 align-items: center;
2675 }
2676
2677 .imagify-payment-modal {
2678 text-align: center;
2679 color: #7A8996;
2680 }
2681 .imagify-payment-modal * {
2682 box-sizing: border-box;
2683 }
2684 .imagify-modal-loader {
2685 position: absolute;
2686 top: 0; left: 0; right: 0; bottom: 0;
2687 background: #fff url('../images/loader-balls.svg') center no-repeat;
2688 z-index: 10;
2689 }
2690 .imagify-payment-modal .imagify-modal-content {
2691 width: 980px;
2692 max-width: 100%;
2693 min-width: 925px;
2694 padding: 0;
2695 }
2696 .imagify-payment-modal .imagify-modal-main {
2697 width: 70%;
2698 }
2699 .imagify-payment-modal .imagify-modal-sidebar {
2700 width: 30%;
2701 padding: 15px 20px;
2702 background: #1F2332;
2703 color: #FFF;
2704 }
2705 .imagify-payment-steps {
2706 padding-top: 15px;
2707 margin-top: 0;
2708 margin-left: 0;
2709 list-style: none;
2710 counter-reset: steps;
2711 }
2712 .imagify-payment-steps li {
2713 position: relative;
2714 display: inline-block;
2715 counter-increment: steps;
2716 font-weight: bold;
2717 }
2718 .imagify-payment-steps li + li {
2719 margin-left: 35px;
2720 }
2721 .imagify-payment-steps li + li:after {
2722 content: "";
2723 position: absolute;
2724 top: 19px;
2725 left: -90px;
2726 z-index: 1;
2727 width: 150px;
2728 height: 2px;
2729 background: #E5EBEF;
2730 }
2731 .imagify-payment-steps li + li.active:after {
2732 background: #40B1D0;
2733 }
2734 .imagify-payment-steps li:before {
2735 display: block;
2736 position: relative;
2737 content: counter( steps, decimal );
2738 width: 36px;
2739 height: 36px;
2740 margin: 0 auto .3em;
2741 border: 2px solid #E5EBEF;
2742 text-align: center;
2743 line-height: 34px;
2744 font-size: 1.4em;
2745 color: #E5EBEF;
2746 background: #FFF;
2747 border-radius: 50%;
2748 z-index: 2;
2749 }
2750 .imagify-payment-steps .active:before {
2751 color: #40B1D0;
2752 border-color: #40B1D0;
2753 }
2754 .imagify-modal-section {
2755 padding: 0 25px;
2756 }
2757 .imagify-modal-section.section-gray {
2758 margin: 1em 0;
2759 padding: 10px 25px 15px;
2760 background: #F6F7FB;
2761 }
2762 .imagify-tabs-contents .section-gray {
2763 padding: 8px 25px 10px;
2764 }
2765 .imagify-modal-section .imagify-modal-title:first-child {
2766 margin-top: .3em;
2767 margin-bottom: .5em;
2768 }
2769 .imagify-modal-title {
2770 font-size: 1.8em;
2771 font-weight: lighter;
2772 }
2773
2774 .imagify-border-styled {
2775 width: 200px;
2776 margin: 0 auto;
2777 color: #8BC34A;
2778 font-weight: bold;
2779 font-size: 0.925em;
2780 }
2781 .imagify-big-number {
2782 font-size: 3.7em;
2783 font-weight: bold;
2784 margin: -3px 0;
2785 color: #4A4A4A;
2786 line-height: 1;
2787 }
2788
2789 .imagify-border-styled:before,
2790 .imagify-border-styled:after {
2791 content: "";
2792 height: 1px;
2793 background: rgba(0,0,0,.1);
2794 -webkit-flex-basis: 40px;
2795 -ms-flex-preferred-size: 40px;
2796 flex-basis: 40px;
2797 }
2798 .imagify-border-styled:before {
2799 margin-right: 5px;
2800 }
2801 .imagify-border-styled:after {
2802 margin-left: 5px;
2803 }
2804 .imagify-payment-modal strong {
2805 font-weight: bold;
2806 color: #4A4A4A;
2807 }
2808
2809 .imagify-col {
2810 -webkit-flex-basis: 50%;
2811 -ms-flex-preferred-size: 50%;
2812 flex-basis: 50%;
2813 }
2814 .imagify-modal .imagify-cols {
2815 padding: 0 20px;
2816 }
2817 .imagify-iconed {
2818 position: relative;
2819 text-align: left;
2820 padding-left: 42px;
2821 margin-right: 15px;
2822 font-weight: 500;
2823 }
2824 .imagify-iconed .dashicons,
2825 .imagify-iconed .icon {
2826 position: absolute;
2827 font-size: 2em;
2828 left: 0; top: 2px;
2829 color: #40B1D0;
2830 }
2831 .imagify-payment-modal .close-btn {
2832 top: 10px;
2833 right: 10px;
2834 width: 24px;
2835 height: 24px;
2836 padding: 2px 0 0 4.5px; /* Safari iOS bug fix */
2837 color: #FFF;
2838 background: #40B1D0;
2839 border-radius: 50%;
2840 -webkit-transition: all .275s;
2841 transition: all .275s;
2842 }
2843 .imagify-payment-modal .close-btn i {
2844 margin-left: -3.5px;
2845 margin-top: 1px;
2846 }
2847 .imagify-payment-modal .close-btn:hover {
2848 background: #F6F7FB;
2849 }
2850
2851 /* OFFERS */
2852 .imagify-offer-line {
2853 margin-top: 1.5em;
2854 }
2855 .imagify-offer-line + .imagify-offer-line {
2856 margin-top: 0.75em;
2857 }
2858 .imagify-offer-header {
2859 -webkit-box-pack: justify;
2860 -webkit-justify-content: space-between;
2861 -ms-flex-pack: justify;
2862 justify-content: space-between;
2863 -webkit-box-align: center;
2864 -webkit-align-items: center;
2865 -ms-flex-align: center;
2866 align-items: center;
2867 padding: 0 0 0 15px;
2868 border-radius: 4px 4px 0 0;
2869 -webkit-transition: all .275s;
2870 transition: all .275s;
2871 }
2872 .imagify-offer-header.imagify-offer-header.imagify-offer-header .imagify-inline-options label:last-child {
2873 border-radius: 0 4px 0 0;
2874 }
2875 .imagify-offer-header .imagify-inline-options {
2876 width: auto;
2877 }
2878 .imagify-offer-title {
2879 font-weight: bold;
2880 margin: 0;
2881 }
2882 .imagify-offer-header,
2883 .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label {
2884 background: #E5EBEF;
2885 }
2886 .imagify-offer-onetime .imagify-offer-header {
2887 padding-top:8px;
2888 padding-bottom: 8px;
2889 }
2890 .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label,
2891 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
2892 position: relative;
2893 padding: 7px 30px;
2894 font-size: 1em;
2895 letter-spacing: 0.05em;
2896 color: inherit;
2897 box-shadow: 0 0 0;
2898 border-radius: 0;
2899 }
2900 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
2901 background: #F6F7FB;
2902 }
2903
2904 .imagify-2-free {
2905 position: absolute;
2906 bottom: 100%; left: 0; right: 0;
2907 padding: 2px 10px;
2908 margin-bottom: 8px;
2909 font-size: 0.8em;
2910 letter-spacing: 0;
2911 text-transform: none;
2912 text-align: center;
2913 color: #FFF;
2914 background: #10121A;
2915 border-radius: 2px;
2916 }
2917 .imagify-2-free:after {
2918 content: "";
2919 position: absolute;
2920 left: 50%; bottom: -3px;
2921 margin-left: -3px;
2922 border-top: 3px solid #10121A;
2923 border-left: 3px solid transparent;
2924 border-right: 3px solid transparent;
2925 }
2926 /* right position */
2927 .imagify-2-free.imagify-b-right {
2928 bottom: auto;
2929 left: 100%; right: -100%;
2930 margin-bottom: 0;
2931 margin-left: 8px;
2932 }
2933 .imagify-2-free.imagify-b-right:after {
2934 left: -3px; bottom: auto; top: 50%;
2935 margin-top: -3px; margin-left: 0;
2936 border-right: 3px solid #10121A;
2937 border-top: 3px solid transparent;
2938 border-bottom: 3px solid transparent;
2939 border-left: 0;
2940 }
2941
2942 /* bottom position */
2943 .imagify-2-free.imagify-b-bottom {
2944 bottom: -100%;
2945 left: 0; right: 0;
2946 margin-top: 8px;
2947 }
2948 .imagify-2-free.imagify-b-bottom:after {
2949 top: -3px; bottom: auto;
2950 border-bottom: 3px solid #10121A;
2951 border-left: 3px solid transparent;
2952 border-right: 3px solid transparent;
2953 border-top: 0;
2954 }
2955
2956
2957 .imagify-offer-content {
2958 text-align: left;
2959 background: #F6F7FB;
2960 border-radius: 0 0 4px 4px;
2961 -webkit-transition: all .275s;
2962 transition: all .275s;
2963 }
2964 .imagify-offer-onetime .imagify-offer-content {
2965 padding: 10px 0;
2966 }
2967
2968 /* Checkboxes adjustment */
2969 div.imagify-col-checkbox {
2970 position: relative;
2971 width: 35.5%;
2972 padding-top: 10px;
2973 padding-bottom: 7px;
2974 }
2975 .imagify-col-checkbox label {
2976 display: block;
2977 }
2978 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked),
2979 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked {
2980 position: absolute;
2981 top: 50%; left: 6px;
2982 margin: -8px 0 0 0;
2983 }
2984 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
2985 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked + label:before {
2986 margin: 0;
2987 top: -3px;
2988 left: 6px;
2989 -webkit-transition: all .275s;
2990 transition: all .275s;
2991 }
2992 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
2993 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked + label:after {
2994 top: 0;
2995 left: 13px;
2996 }
2997 .imagify-col-checkbox label {
2998 padding-left: 55px!important;
2999 }
3000
3001 /* Offer col */
3002 .imagify-offer-size {
3003 font-size: 30px;
3004 color: #2E3243;
3005 font-weight: bold;
3006 -webkit-transition: all .275s;
3007 transition: all .275s;
3008 }
3009 .imagify-offer-by {
3010 font-size: 10px;
3011 -webkit-transition: all .275s;
3012 transition: all .275s;
3013 }
3014 .imagify-approx {
3015 display: block;
3016 font-size: 11px;
3017 line-height: 1.2;
3018 -webkit-transition: all .275s;
3019 transition: all .275s;
3020 }
3021
3022 div.imagify-col-price {
3023 width: 30%;
3024 }
3025 .imagify-flex-table .imagify-price-block {
3026 padding-left: 0;
3027 padding-right: 0;
3028 }
3029 .imagify-flex-table .imagify-price-complement {
3030 padding-right: 0;
3031 font-size: 10px;
3032 font-weight: bold;
3033 }
3034 .imagify-price-block span {
3035 display: inline-block;
3036 vertical-align: middle;
3037 }
3038 span.imagify-dollars {
3039 color: #1F2332;
3040 font-size: 18px;
3041 font-weight: bold;
3042 vertical-align: -2px;
3043 }
3044 .imagify-offer-onetime .imagify-col-price {
3045 padding-top: 0;
3046 }
3047 .imagify-offer-onetime .imagify-dollars {
3048 vertical-align: -7px;
3049 }
3050 .imagify-price-big,
3051 .imagify-price-mini {
3052 color: #40B1D0;
3053 font-weight: bold;
3054 }
3055 .imagify-price-big {
3056 font-size: 36px;
3057 }
3058 span.imagify-price-mini {
3059 font-size: 18px;
3060 vertical-align: 2px;
3061 }
3062 span.imagify-price-by {
3063 font-size: 10px;
3064 color: #1F2332;
3065 vertical-align: -13px;
3066 text-indent: -27px;
3067 }
3068
3069 .imagify-col-other-actions {
3070 width: 18.5%;
3071 text-align: right;
3072 }
3073 .imagify-col-other-actions a {
3074 font-size: 11px;
3075 }
3076
3077 /* Offer selected */
3078 .imagify-offer-selected,
3079 .imagify-offer-selected .imagify-offer-title,
3080 .imagify-offer-selected .imagify-offer-size,
3081 .imagify-offer-selected .imagify-price-big,
3082 .imagify-offer-selected .imagify-price-mini,
3083 .imagify-offer-selected .imagify-price-complement,
3084 .imagify-offer-selected .imagify-col-other-actions a {
3085 color: #FFF;
3086 }
3087 .imagify-offer-selected .imagify-offer-header,
3088 .imagify-offer-selected .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label {
3089 background: #338EA6;
3090 }
3091 .imagify-offer-selected .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
3092 background: #40B1D0;
3093 }
3094 .imagify-offer-selected .imagify-offer-content {
3095 background: #40B1D0;
3096 }
3097 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
3098 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:checked + label:before {
3099 border-color: #FFF;
3100 background: #40B1D0;
3101 }
3102 .imagify-offer-selected .imagify-offer-by {
3103 color: #2E3243;
3104 }
3105
3106 .imagify-submit-line {
3107 margin: 2em 0;
3108 }
3109 .imagify-submit-line button {
3110 font-size: 16px;
3111 }
3112
3113 .imagify-footer-lines {
3114 width: 500px;
3115 max-width: 100%;
3116 margin: 2em auto 1em;
3117 font-size: 0.85em;
3118 line-height: 1.6;
3119 }
3120
3121 /* Year selected */
3122 .imagify-year-selected .imagify-switch-my .imagify-yearly {
3123 display: block;
3124 }
3125 .imagify-year-selected .imagify-switch-my .imagify-monthly {
3126 display: none;
3127 }
3128 /* Month selected */
3129 .imagify-month-selected .imagify-switch-my .imagify-yearly {
3130 display: none;
3131 }
3132 .imagify-month-selected .imagify-switch-my .imagify-monthly {
3133 display: block;
3134 }
3135
3136 /* Flexbox table */
3137 .imagify-flex-table {
3138 -webkit-box-align: center;
3139 -webkit-align-items: center;
3140 -ms-flex-align: center;
3141 align-items: center;
3142 }
3143 .imagify-flex-table > * {
3144 -webkit-box-flex: 1;
3145 -webkit-flex-grow: 1;
3146 -ms-flex-positive: 1;
3147 flex-grow: 1;
3148 padding: 7px 15px;
3149 }
3150
3151 /* Pricing table */
3152 div.imagify-col-details {
3153 width: 22%;
3154 padding-left: 25px;
3155 }
3156 .imagify-col-details p {
3157 margin: 0;
3158 }
3159 .imagify-pricing-table {
3160 margin: 0 20px;
3161 }
3162 .imagify-pricing-table .imagify-offer-line {
3163 padding: .6em 0;
3164 border: 2px solid #E8EEF0;
3165 text-align: left;
3166 border-radius: 3px;
3167 }
3168 .imagify-pricing-table .imagify-offer-line:first-child {
3169 margin-top: .75em;
3170 }
3171 .imagify-pricing-table .imagify-offer-line + .imagify-offer-line {
3172 margin-top: -2px;
3173 }
3174 .imagify-pricing-table .imagify-col-other-actions {
3175 width: 20.5%;
3176 }
3177 .imagify-pricing-table .imagify-approx {
3178 margin-left: 0;
3179 line-height: 0.5;
3180 margin-bottom: 1em;
3181 }
3182 .imagify-pricing-table .imagify-offer-selected {
3183 -webkit-transform: scale(1.03);
3184 transform: scale(1.03);
3185 background: #40B1D0;
3186 border-width: 0;
3187 }
3188 .imagify-pricing-table .imagify-offer-selected .imagify-approx {
3189 color: #FFF;
3190 }
3191 .imagify-pricing-table .imagify-button-secondary {
3192 padding: 3px 20px;
3193 box-shadow: none;
3194 text-transform: uppercase;
3195 font-size: 12px;
3196 letter-spacing: 0.025em;
3197 }
3198 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary {
3199 border: 2px solid #FFF;
3200 background: #40B1D0;
3201 box-shadow: none;
3202 text-shadow: none!important;
3203 }
3204 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary:hover,
3205 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary:focus {
3206 background: #FFF;
3207 color: #40B1D0;
3208 }
3209
3210 .imagify-col .imagify-special-needs {
3211 margin-left: 25px;
3212 }
3213 .imagify-special-needs strong {
3214 font-size: 25px;
3215 font-weight: bold;
3216 color: #40B1D0;
3217 }
3218 .imagify-special-needs span {
3219 display: block;
3220 font-size: 12px;
3221 margin-top: -.5em;
3222 }
3223 div.imagify-col-price {
3224 position: relative;
3225 }
3226
3227 /* we recommend line */
3228 .imagify-recommend {
3229 display: none;
3230 position: absolute;
3231 left: -20px; bottom: 100%;
3232 padding: 0;
3233 margin-bottom: 8px;
3234 color: #1F2332;
3235 font-weight: bold;
3236 font-style: italic;
3237 }
3238 .imagify-offer-selected .imagify-recommend {
3239 display: block;
3240 }
3241 [class*="imagify-onetime-"] .imagify-recommend {
3242 left: 65px;
3243 margin-bottom: 20px;
3244 }
3245 .imagify-recommend:before {
3246 content: "";
3247 position: absolute;
3248 top: 7px; left: -35px;
3249 width: 29px; height: 30px;
3250 background: url("../images/icon-arrow-choice.png") scroll 0 no-repeat;
3251 background-size: contain;
3252 }
3253 @media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
3254 .imagify-recommend:before {
3255 background-image: url("../images/icon-arrow-choice.svg");
3256 }
3257 }
3258
3259 /* One Time Adjustments */
3260 .imagify-offer-line[class*="imagify-onetime-"] {
3261 padding: 0;
3262 margin: .3em 0 0;
3263 }
3264 .imagify-offer-line.imagify-offer-line[class*="imagify-onetime-"]:first-child {
3265 margin-top: 2em;
3266 }
3267 .imagify-offer-line[class*="imagify-onetime-"] + .imagify-offer-line {
3268 margin-top: .5em;
3269 }
3270 .imagify-offer-selected.imagify-offer-line[class*="imagify-onetime-"] {
3271 -webkit-transform: scale(1);
3272 transform: scale(1);
3273 border-width: 2px;
3274 }
3275
3276 /* cols */
3277 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details {
3278 position: relative;
3279 overflow: hidden;
3280 width: 21%;
3281 background: #1F2332;
3282 color: #FFF;
3283 }
3284 .imagify-offer-selected.imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details {
3285 background: #338EA6;
3286 }
3287 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details:before {
3288 content: "";
3289 position: absolute;
3290 bottom: 0; right: 25px;
3291 width: 75px; height: 54px;
3292 background: url("../images/icon-pack.png");
3293 }
3294 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-other-actions {
3295 width: 30%;
3296 }
3297
3298 .imagify-offer-line[class*="imagify-onetime-"] .imagify-offer-size,
3299 .imagify-offer-line[class*="imagify-onetime-"] .imagify-approx {
3300 color: #FFF;
3301 }
3302 .imagify-offer-line[class*="imagify-onetime-"] .imagify-offer-size {
3303 font-size: 24px;
3304 }
3305 .imagify-offer-line[class*="imagify-onetime-"] .imagify-approx {
3306 font-size: 12px;
3307 }
3308 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-block {
3309 padding-left: 10px;
3310 }
3311 .imagify-offer-line[class*="imagify-onetime-"] .imagify-dollars {
3312 vertical-align: middle;
3313 }
3314 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-big {
3315 vertical-align: -5px;
3316 }
3317 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-mini {
3318 vertical-align: 7px;
3319 }
3320
3321 /* Simple Tabs*/
3322 .imagify-tabs {
3323 margin-bottom: 0;
3324 list-style: none;
3325 background: #E5EBEF;
3326 }
3327 .imagify-modal-content .imagify-tabs {
3328 margin: 1em 0 0;
3329 }
3330 .imagify-tab {
3331 -webkit-box-flex: 1;
3332 -webkit-flex-grow: 1;
3333 -ms-flex-positive: 1;
3334 flex-grow: 1;
3335 width: 50%;
3336 margin: 0;
3337 font-size: 23px;
3338 }
3339 .imagify-tab a {
3340 display: block;
3341 padding: 15px 10px;
3342 color: inherit;
3343 text-decoration: none;
3344 }
3345 .imagify-tab a:focus {
3346 box-shadow: none;
3347 outline: none;
3348 color: #40B1D8;
3349 }
3350 .imagify-tab.imagify-current a {
3351 background: #F6F7FB;
3352 }
3353 .imagify-tab-content.imagify-current {
3354 display: block;
3355 }
3356 .imagify-tab-content {
3357 display: none;
3358 }
3359 .imagify-tab-content .imagify-modal-section:first-child {
3360 margin-top: 0;
3361 }
3362
3363 /* Modal sidebar */
3364 .imagify-modal-sidebar-content,
3365 .imagify-payment-modal .imagify-modal-sidebar {
3366 display: -webkit-box;
3367 display: -webkit-flex;
3368 display: -ms-flexbox;
3369 display: flex;
3370 -webkit-box-orient: vertical;
3371 -webkit-box-direction: normal;
3372 -webkit-flex-direction: column;
3373 -ms-flex-direction: column;
3374 flex-direction: column;
3375 }
3376 .imagify-modal-sidebar-content {
3377 -webkit-box-flex: 1;
3378 -webkit-flex-grow: 1;
3379 -ms-flex-positive: 1;
3380 flex-grow: 1;
3381 }
3382 p.imagify-modal-sidebar-title {
3383 margin-top: 5px;
3384 padding-right: 40px;
3385 font-size: 18px;
3386 color: #FFF;
3387 }
3388 .imagify-modal-testimony {
3389 margin-top: 1em;
3390 }
3391 .imagify-modal-testimony + .imagify-modal-testimony {
3392 margin-top: 2em;
3393 }
3394 @media (max-height:620px) {
3395 .imagify-modal-testimony + .imagify-modal-testimony {
3396 display: none;
3397 }
3398 }
3399 .imagify-modal-testimony-person {
3400 display: table;
3401 width: 100%;
3402 }
3403 .imagify-modal-testimony-person > * {
3404 display: table-cell;
3405 vertical-align: middle;
3406 }
3407 .imagify-modal-avatar {
3408 width: 114px;
3409 line-height: 0;
3410 }
3411 .imagify-modal-avatar img {
3412 border: 2px solid #FFF;
3413 border-radius: 50%;
3414 width: 96px; height: 96px;
3415 }
3416 .imagify-modal-identity a {
3417 text-decoration: none;
3418 font-weight: bold;
3419 }
3420 .imagify-modal-identity a:first-child {
3421 font-size: 13px;
3422 }
3423 .imagify-modal-identity a:first-child + a {
3424 display: block;
3425 font-size: 10px;
3426 color: #7A8996;
3427 }
3428 .imagify-modal-testimony-content p {
3429 font-size: 13px;
3430 font-style: italic;
3431 line-height: 1.7;
3432 color: #7A8996;
3433 }
3434 .imagify-modal-sidebar-trust {
3435 margin-top: auto;
3436 padding-top: 1.5em;
3437 }
3438 .imagify-modal-sidebar-trust p {
3439 margin: 0;
3440 font-weight: bold;
3441 font-size: 12px;
3442 line-height: 1.7;
3443 }
3444 .imagify-modal-sidebar-trust p img {
3445 margin-right: 3px;
3446 vertical-align: -2px;
3447 }
3448 .imagify-modal-sidebar-trust p + p {
3449 font-size: 11px;
3450 }
3451
3452 /* Cart */
3453 .imagify-cart {
3454 text-align: left;
3455 }
3456 .imagify-cart .imagify-cart-list {
3457 border-top: 1px solid rgba(122, 137, 150, .2);
3458 border-bottom: 1px solid rgba(122, 137, 150, .2);
3459 }
3460 .imagify-cart .imagify-cart-label {
3461 margin-bottom: 0.5em;
3462 font-size: 10px;
3463 color: #2E3243;
3464 }
3465 .imagify-cart-list p {
3466 margin: 0;
3467 font-weight: bold;
3468 }
3469 .imagify-cart-item {
3470 margin: .4em 0;
3471 }
3472 .imagify-cart .imagify-cart-suggestion {
3473 margin-top: -.3em;
3474 }
3475 .imagify-cart-suggestion a,
3476 .imagify-cl-description p {
3477 font-size: 10px;
3478 }
3479 .imagify-remove-from-cart {
3480 border: 0;
3481 padding: 0;
3482 width: 14px;
3483 height: 14px;
3484 line-height: 13px;
3485 border-radius: 50%;
3486 background: #40B1D0;
3487 cursor: pointer;
3488 transition: background .3s;
3489 }
3490 .imagify-remove-from-cart i:before {
3491 position: relative;
3492 top: -6px; left: -3px;
3493 font-size: 13px;
3494 color: #FFF;
3495 }
3496 .imagify-remove-from-cart:hover,
3497 .imagify-remove-from-cart:focus {
3498 background: #D0021B;
3499 }
3500
3501 /* col sizes */
3502 .imagify-cart .imagify-cl-remove {
3503 -webkit-box-flex: 0;
3504 -webkit-flex-grow: 0;
3505 -ms-flex-positive: 0;
3506 flex-grow: 0;
3507 width: 45px;
3508 }
3509 .imagify-cart .imagify-cl-name {
3510 -webkit-box-flex: 0;
3511 -webkit-flex-grow: 0;
3512 -ms-flex-positive: 0;
3513 flex-grow: 0;
3514 width: 200px;
3515 }
3516 .imagify-cart .imagify-cl-description {
3517 -webkit-align-self: flex-start;
3518 -ms-flex-item-align: start;
3519 align-self: flex-start;
3520 padding-top: 10px;
3521 }
3522 .imagify-cart .imagify-cl-price {
3523 text-align: right;
3524 }
3525
3526 #imagify-payment-iframe {
3527 width: 100%;
3528 height: 375px;
3529 margin-top: 1em;
3530 background: #f6f7fb url(../images/loader-balls.svg) 50% 175px no-repeat;
3531 }
3532
3533 .imagify-success-view {
3534 display: -webkit-box;
3535 display: -webkit-flex;
3536 display: -ms-flexbox;
3537 display: flex;
3538 -webkit-box-align: center;
3539 -webkit-align-items: center;
3540 -ms-flex-align: center;
3541 align-items: center;
3542 -webkit-box-orient: vertical;
3543 -webkit-box-direction: normal;
3544 -webkit-flex-direction: column;
3545 -ms-flex-direction: column;
3546 flex-direction: column;
3547 -webkit-box-pack: center;
3548 -webkit-justify-content: center;
3549 -ms-flex-pack: center;
3550 justify-content: center;
3551 height: 100%;
3552 }
3553 .imagify-success-view p {
3554 font-weight: bold;
3555 font-size: 16px;
3556 }
3557
3558 /* Imagify cart item removing */
3559 .imagify-cart-emptied-item {
3560 margin: .3em auto;
3561 padding: 6px 20px;
3562 background: #E6EBEF;
3563 border-radius: 20px;
3564 }
3565 .imagify-cart-emptied-item.imagify-cart-emptied-item p {
3566 font-weight: bold;
3567 }
3568 .imagify-cart-emptied-item a {
3569 color: #40b1d0;
3570 float: right;
3571 font-weight: bold;
3572 }