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 / bulk.css

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

1,318 lines 23.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Doughnut legend */
2 #imagify-overview-chart-legend {
3 overflow: hidden;
4 }
5
6 .imagify-doughnut-legend {
7 margin-top: 38px;
8 list-style: none;
9 }
10
11 .imagify-doughnut-legend li {
12 display: block;
13 padding-left: 30px;
14 position: relative;
15 margin-bottom: 15px;
16 border-radius: 5px;
17 padding: 3px 8px 2px 31px;
18 font-size: 13px;
19 cursor: default;
20 -webkit-transition: background-color 200ms ease-in-out;
21 -moz-transition: background-color 200ms ease-in-out;
22 -o-transition: background-color 200ms ease-in-out;
23 transition: background-color 200ms ease-in-out;
24 }
25
26 .imagify-doughnut-legend li span {
27 display: block;
28 position: absolute;
29 left: 0;
30 top: 0;
31 width: 25px;
32 height: 25px;
33 border-radius: 50%;
34 }
35
36 .imagify-global-optim-phrase {
37 width: 180px;
38 padding-top: 20px;
39 font-size: 14px;
40 text-align: center;
41 }
42
43 .imagify-total-percent {
44 color: #46b1ce;
45 }
46
47 .imagify-overview-chart-container {
48 float: left;
49 margin-right: 20px;
50 }
51
52 .imagify-chart-percent {
53 position: absolute;
54 left: 0;
55 right: 0;
56 top: 50%;
57 margin-top: -.5em;
58 line-height: 1;
59 text-align: center;
60 font-size: 55px;
61 font-weight: bold;
62 color: #46B1CE;
63 }
64
65 .imagify-chart-percent span {
66 font-size: 20px;
67 vertical-align: super;
68 }
69
70 .media_page_imagify-bulk-optimization .media-item,
71 body[class*="_imagify-ngg-bulk-optimization"] .media-item {
72 margin: 0;
73 }
74
75 .media_page_imagify-bulk-optimization .media-item .progress,
76 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress {
77 float: none;
78 width: 100%;
79 height: 8px;
80 margin: 0;
81 overflow: visible;
82 background: #1F2331;
83 box-shadow: 0;
84 border-radius: 0;
85 }
86
87 .media_page_imagify-bulk-optimization .media-item .percent,
88 body[class*="_imagify-ngg-bulk-optimization"] .media-item .percent {
89 position: absolute;
90 top: 6px;
91 right: -28px;
92 text-shadow: none;
93 width: auto;
94 padding: 0 5px;
95 line-height: 1.85;
96 font-size: 14px;
97 font-weight: bold;
98 color: #40B1D0;
99 }
100
101 .media_page_imagify-bulk-optimization .media-item .progress,
102 .media_page_imagify-bulk-optimization .media-item .percent,
103 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress,
104 body[class*="_imagify-ngg-bulk-optimization"] .media-item .percent {
105 text-align: right;
106 }
107
108 .media_page_imagify-bulk-optimization .media-item .progress .bar,
109 body[class*="_imagify-ngg-bulk-optimization"] .media-item .progress .bar {
110 position: relative;
111 width: 1px;
112 height: 8px;
113 margin-top: 0;
114 background: #46B1CE;
115 border-radius: 0;
116 -webkit-transition: width .5s;
117 transition: width .5s;
118 }
119
120 #imagify-bulk-action {
121 padding: 11px 20px;
122 }
123
124 /* Bulk overview columns */
125 .imagify-columns .col-overview.col-overview {
126 width: calc(100% - 465px);
127 padding-left: 20px;
128 }
129
130 .imagify-columns .col-statistics.col-statistics {
131 width: 60%;
132 }
133
134 .imagify-columns .col-chart.col-chart {
135 width: 40%;
136 }
137
138 @media (max-width: 1520px) and (min-width: 1381px), (max-width: 1086px) {
139 .imagify-columns .col-statistics.col-statistics,
140 .imagify-columns .col-chart.col-chart {
141 width: 50%;
142 }
143 }
144
145 @media (max-width: 1380px) and (min-width: 1246px), (max-width: 380px) {
146 .imagify-overview-chart-container {
147 float: none;
148 margin-right: 0;
149 }
150
151 .imagify-doughnut-legend {
152 margin-top: 18px;
153 }
154
155 .imagify-global-optim-phrase {
156 padding-top: 0;
157 width: auto;
158 }
159 }
160
161 @media (max-width: 808px) {
162 .imagify-columns .col-statistics.col-statistics,
163 .imagify-columns .col-chart.col-chart {
164 width: auto;
165 float: none;
166 padding: 0;
167 }
168
169 .imagify-columns .col-chart.col-chart {
170 margin-top: 3em;
171 }
172 }
173
174 /* Header */
175 .imagify-sep-v {
176 width: 1px;
177 background: rgba(255, 255, 255, .2);
178 }
179
180 .base-transparent {
181 background: transparent;
182 }
183
184 [class^="imagify-bar-"].right-outside-number {
185 -webkit-box-sizing: border-box;
186 box-sizing: border-box;
187 padding-right: 4.5em;
188 }
189
190 .right-outside-number .imagify-barnb {
191 display: block;
192 margin-right: -5.25em;
193 text-align: right;
194 font-weight: bold;
195 line-height: .8;
196 }
197
198 .imagify-h2-like {
199 margin: 0 0 .5em 0;
200 padding-bottom: .5em;
201 border-bottom: 1px solid #E9EFF2;
202 font-size: 24px;
203 color: #000;
204 font-weight: bold;
205 }
206
207 .imagify-h2-like .dashicons,
208 .imagify-h2-like .dashicons:before {
209 font-size: 38px;
210 height: 38px;
211 width: 38px;
212 margin-right: 12px;
213 vertical-align: -5px;
214 color: #40B1D0;
215 }
216
217 .imagify-info-block {
218 position: relative;
219 padding: 10px;
220 padding-left: 42px;
221 background: #D9E4EB;
222 border-radius: 4px;
223 line-height: 1.6;
224 }
225
226 .imagify-list-infos {
227 margin: 0;
228 padding: 0;
229 }
230
231 .imagify-list-infos li {
232 display: flex;
233 align-items: center;
234 padding: 15px 5px;
235 text-align: left;
236 font-size: 14px;
237 line-height: 1.5;
238 color: #626E7B;
239 }
240
241 .imagify-list-infos li:first-child {
242 padding-top: 5px;
243 }
244
245 .imagify-list-infos li:last-child {
246 padding-bottom: 5px;
247 }
248
249 .imagify-list-infos li + li {
250 border-top: 1px solid #E9EFF2;
251 }
252
253 .imagify-info-icon {
254 flex-grow: 0;
255 flex-basis: 50px;
256 }
257
258 .imagify-info-icon + span {
259 padding-left: 20px;
260 }
261
262 .imagify-list-infos a:before {
263 content: '';
264 display: block;
265 }
266
267 /* Some main sections/content */
268 .imagify-bulk .imagify-settings-section {
269 border: 1px solid #D9D9D9;
270 border-top: 0;
271 background: #FFF;
272 color: #4A4A4A;
273 }
274
275 .imagify-bulk p,
276 .imagify-bulk li,
277 .imagify-bulk h3 {
278 color: #4A4A4A;
279 }
280
281 .imagify-bulk .imagify-settings-section h3 {
282 margin-bottom: 2em;
283 }
284
285 /* Account information col */
286 .imagify-account-info-col .imagify-options-title {
287 display: flex;
288 align-items: center;
289 }
290
291 .imagify-account-info-col p.imagify-meteo-title {
292 margin: 0;
293 font-size: 24px;
294 font-weight: bold;
295 color: #FFF;
296 }
297
298 .imagify-account-info-col .imagify-options-title > a {
299 flex-basis: 100px;
300 margin-left: auto;
301 margin-right: 10px;
302 text-decoration: underline;
303 font-size: 12px;
304 }
305
306 .imagify-account-info-col .imagify-meteo-title .dashicons,
307 .imagify-account-info-col .imagify-meteo-title .dashicons:before {
308 font-size: 38px;
309 width: 38px;
310 height: 38px;
311 margin-right: 4px;
312 color: #40B1D0;
313 }
314
315 .imagify-col-content .imagify-block-secondary {
316 margin-left: -1px;
317 margin-right: -1px;
318 }
319
320 .imagify-col-content .imagify-space-left {
321 margin: 15px 30px 15px 0;
322 }
323
324 .imagify-col-content .imagify-space-left p {
325 margin: 0 0 10px 0;
326 font-size: 19px;
327 font-weight: 500;
328 color: #343A49;
329 }
330
331 .imagify-col-content .imagify-meteo-icon {
332 height: 64px;
333 margin: 15px 15px 15px 0;
334 }
335
336 .imagify-col-content .imagify-section-title + p {
337 margin-top: 10px;
338 }
339
340 .imagify-account-info-col .imagify-h3-like.imagify-h3-like {
341 color: inherit;
342 }
343
344 /* Tooltips */
345 .imagify-title .imagify-tooltips {
346 position: absolute;
347 top: 100%;
348 left: 0;
349 }
350
351 .imagify-tooltips .icon-round {
352 float: left;
353 display: inline-block;
354 width: 28px;
355 height: 28px;
356 border: 1px solid #FFF;
357 margin-right: 8px;
358 margin-bottom: 8px;
359 font-size: 17px;
360 font-style: italic;
361 line-height: 29px;
362 font-weight: bold;
363 text-align: center;
364 border-radius: 50%;
365 }
366
367 .imagify-tooltips .tooltip-content {
368 display: block;
369 position: relative;
370 max-width: 250px;
371 padding: 7px 15px 8px;
372 background: #2e3242;
373 color: #FFF;
374 font-size: 10px;
375 border-radius: 3px;
376 }
377
378 .imagify-tooltips.right .tooltip-content {
379 margin-left: 12px;
380 }
381
382 .imagify-tooltips.bottom .tooltip-content {
383 margin-top: 4px;
384 }
385
386 .imagify-inline-options label .tooltip-content {
387 position: absolute;
388 left: 0;
389 right: 0;
390 top: 100%;
391 text-transform: none;
392 font-size: 10px;
393 letter-spacing: 0;
394 text-align: center;
395 }
396
397 .imagify-tooltips .tooltip-content:after {
398 content: "";
399 position: absolute;
400 }
401
402 .imagify-tooltips.right .tooltip-content:after {
403 top: 16px;
404 left: -6px;
405 border-right: 8px solid #2e3242;
406 border-top: 6px solid transparent;
407 border-bottom: 6px solid transparent;
408 }
409
410 .imagify-tooltips.bottom .tooltip-content:after {
411 top: -5px;
412 left: 50%;
413 margin-left: -3px;
414 border-bottom: 6px solid #2e3242;
415 border-left: 6px solid transparent;
416 border-right: 6px solid transparent;
417 }
418
419 .imagify-space-tooltips .tooltip-content {
420 max-width: 280px;
421 margin-top: 20px;
422 margin-left: 0;
423 padding: 5px 15px 5px;
424 font-size: 13px;
425 background: #40B1D0;
426 box-shadow: 0 3px 0 #338EA6;
427 }
428
429 .imagify-space-tooltips .tooltip-content:after {
430 top: -14px;
431 left: 50%;
432 margin-left: -7px;
433 border: 0 none;
434 border-bottom: 15px solid #40B1D0;
435 border-left: 15px solid transparent;
436 border-right: 15px solid transparent;
437 }
438
439 .tooltip-content.tooltip-table {
440 display: table;
441 width: 100%;
442 }
443
444 .tooltip-content.tooltip-table > * {
445 display: table-cell;
446 vertical-align: middle;
447 }
448
449 .tooltip-content .cell-icon {
450 width: 28px;
451 }
452
453 .tooltip-content .cell-icon .icon {
454 margin-bottom: 0;
455 }
456
457 .tooltip-content .cell-text {
458 padding: 5px 10px 5px 0;
459 line-height: 1.3;
460 }
461
462 .tooltip-content .cell-sep {
463 width: 1px;
464 background: rgba(255, 255, 255, .4);
465 }
466
467 .tooltip-content .cell-cta {
468 padding-left: 10px;
469 }
470
471 .tooltip-content .cell-cta a {
472 display: block;
473 color: #FFF;
474 width: 100%;
475 height: 100%;
476 white-space: nowrap;
477 }
478
479 /* Number display */
480 .imagify-number-you-optimized {
481 margin-bottom: 1.35em;
482 overflow: hidden;
483 }
484
485 .imagify-number-you-optimized .number {
486 display: table-cell;
487 padding-right: 15px;
488 font-size: 48px;
489 font-weight: bold;
490 line-height: 1;
491 vertical-align: middle;
492 white-space: nowrap;
493 color: #000;
494 }
495
496 .imagify-number-you-optimized [id="imagify-total-optimized-attachments-pct"] {
497 color: #40B1D0;
498 }
499
500 .imagify-number-you-optimized .text {
501 display: table-cell;
502 vertical-align: middle;
503 overflow: hidden;
504 font-size: 12px;
505 color: #626E7B;
506 }
507
508 .imagify-number-you-optimized > p {
509 display: table;
510 }
511
512 /* Number and bars */
513 .imagify-bars {
514 padding-right: 15px;
515 }
516
517 .imagify-bars p {
518 font-size: 12px;
519 margin-bottom: 5px;
520 }
521
522 .imagify-bars + .imagify-number-you-optimized {
523 border-bottom: 0;
524 padding-top: 0.85em;
525 }
526
527 .imagify-bars + .imagify-number-you-optimized p {
528 color: #46b1ce;
529 }
530
531 /* Table */
532 .imagify-bulk-table {
533 margin-top: 2em;
534 }
535
536 .imagify-table-header {
537 justify-content: space-between;
538 padding: 15px 25px;
539 background: #343A49;
540 color: #FFF;
541 }
542
543 .imagify-newbie {
544 margin-top: 4em;
545 position: relative;
546 overflow: visible;
547 }
548
549 .imagify-newbie .imagify-new-feature.imagify-new-feature {
550 position: absolute;
551 top: 0;
552 left: 25px;
553 transform: translateY(-50%);
554 margin: 0;
555 padding: 8px 20px;
556 font-size: 14px;
557 letter-spacing: .02em;
558 text-transform: uppercase;
559 font-weight: bold;
560 color: #FFF;
561 background: #8BC34A;
562 }
563
564 .imagify-newbie .imagify-table-header {
565 padding: 30px 25px;
566 border: 2px solid #8BC34A;
567 background: #F3F9EC;
568 }
569
570 .imagify-th-titles .dashicons,
571 .imagify-th-titles .dashicons:before {
572 width: 38px;
573 height: 38px;
574 margin-right: 20px;
575 font-size: 38px;
576 color: #40B1D0;
577 }
578
579 .imagify-newbie .imagify-th-titles .dashicons:before {
580 color: #8BC34A;
581 }
582
583 .imagify-th-title.imagify-th-title.imagify-th-title {
584 margin: 0;
585 font-size: 24px;
586 font-weight: 500;
587 color: #FFF;
588 }
589
590 .imagify-newbie .imagify-th-title.imagify-th-title {
591 color: #343A49;
592 }
593
594 .imagify-th-subtitle.imagify-th-subtitle.imagify-th-subtitle {
595 margin: 0 0 5px;
596 font-size: 14px;
597 color: #7A8996;
598 font-weight: 500;
599 }
600
601 .imagify-th-action .imagify-button-clean {
602 font-size: 12px;
603 color: #7A8996;
604 }
605
606 .imagify-th-action .imagify-is-active {
607 color: #FFF;
608 }
609
610 .imagify-th-action .button:hover,
611 .imagify-th-action .button:focus {
612 color: #FFF;
613 }
614
615 .imagify-bulk-table table {
616 width: 100%;
617 border-spacing: 0;
618 border-collapse: collapse;
619 }
620
621 .imagify-bulk-table td {
622 padding: 20px;
623 }
624
625 .imagify-bulk-table-details {
626 border-bottom: 2px solid #E5EBEF;
627 }
628
629 .imagify-bulk-table-details thead tr,
630 .imagify-bulk-table-details thead th {
631 background: #4A5362;
632 }
633
634 .imagify-bulk-table-details thead th {
635 padding: 12px 20px;
636 text-align: left;
637 font-weight: bold;
638 color: #E5EBEF;
639 font-size: 12px;
640 }
641
642 .imagify-bulk-table-details tbody tr:nth-child(odd) td {
643 background: #F2F5F7;
644 }
645
646 .imagify-bulk-table-content {
647 border: 1px solid #D3D3D3;
648 border-top: 0;
649 }
650
651 .imagify-bulk-table-footer {
652 padding: 20px;
653 color: #626E7B;
654 background: #F2F5F7;
655 }
656
657 .imagify-bulk-table tbody tr + tr {
658 border-top: 3px solid #F2F5F7;
659 }
660
661 .imagify-bulk-table tbody tr,
662 .imagify-bulk-table tbody td {
663 background: #FFF;
664 }
665
666 @media (max-width: 782px) {
667 .imagify-row-folder-type,
668 tr.imagify-row-working,
669 tr.imagify-row-waiting {
670 padding-top: 20px;
671 }
672 }
673
674 .imagify-bulk-table .imagify-row-progress {
675 display: none;
676 height: 8px;
677 padding: 0;
678 }
679
680 .imagify-bulk-table .imagify-no-uploaded-yet td {
681 height: 200px;
682 font-size: 17px;
683 letter-spacing: .1em;
684 word-spacing: .12em;
685 vertical-align: middle;
686 text-transform: uppercase;
687 font-weight: bold;
688 text-align: center;
689 color: #999;
690 background-color: #FFF;
691 }
692
693 /* Custom Level Optimization Select */
694 .imagify-selector {
695 position: relative;
696 }
697
698 .imagify-selector-list {
699 background: #FFF;
700 border: 1px solid #F4F7F9;
701 box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
702 border-radius: 3px;
703 font-weight: bold;
704 text-transform: uppercase;
705 letter-spacing: .02em;
706 }
707
708 .imagify-selector-list li:first-child label {
709 border-radius: 3px 3px 0 0;
710 }
711
712 .imagify-selector-list li:last-child label {
713 border-radius: 0 0 3px 3px;
714 }
715
716 .imagify-selector-list li {
717 margin: 0;
718 }
719
720 .imagify-selector-list li + li {
721 border-top: 1px solid #F4F7F9;
722 }
723
724 .imagify-selector-list svg {
725 margin-right: 5px;
726 }
727
728 .imagify-selector-list input:checked + label,
729 .imagify-selector-list .imagify-selector-current-value label {
730 background: #343A49;
731 color: #FFF;
732 }
733
734 .imagify-selector-list input:checked + label:hover,
735 .imagify-selector-list .imagify-selector-current-value label:hover,
736 .imagify-selector-list label:hover,
737 .imagify-selector-list input:focus + label,
738 .imagify-selector-list .imagify-selector-current-value input:focus + label {
739 background: #40B1D0;
740 color: #F4F7F9;
741 }
742
743 .imagify-selector-list input:checked + label:hover polygon,
744 .imagify-selector-list .imagify-selector-current-value label:hover polygon,
745 .imagify-selector-list label:hover polygon,
746 .imagify-selector-list input:focus + label polygon,
747 .imagify-selector-list .imagify-selector-current-value input:focus + label polygon {
748 fill: #FFF;
749 }
750
751 .imagify-selector-list input:checked + label:hover polygon[fill="#CCD1D6"],
752 .imagify-selector-list .imagify-selector-current-value label:hover polygon[fill="#CCD1D6"],
753 .imagify-selector-list label:hover polygon[fill="#CCD1D6"],
754 .imagify-selector-list input:focus + label polygon[fill="#CCD1D6"],
755 .imagify-selector-list .imagify-selector-current-value input:focus + label polygon[fill="#CCD1D6"] {
756 fill: #3694AE;
757 }
758
759 .imagify-selector-list li label {
760 display: block;
761 padding: 10px;
762 transition: all .275s;
763 }
764
765 .imagify-selector-list polygon {
766 transition: all .275s;
767 }
768
769 .imagify-selector-list {
770 position: absolute;
771 top: 0;
772 left: 0;
773 right: 0;
774 transition: all .275s;
775 transform: translateY(-50%);
776 }
777
778 .imagify-selector-list[aria-hidden="true"] {
779 opacity: 0;
780 visibility: hidden;
781 transform: translateY(-50%) scale(0);
782 }
783
784 .imagify-selector-list[aria-hidden="false"] {
785 opacity: 1;
786 visibility: visible;
787 transform: translateY(-50%) scale(1);
788 }
789
790 .button .imagify-selector-current-value-info {
791 position: relative;
792 padding-right: 20px;
793 }
794
795 .button .imagify-selector-current-value-info:after {
796 content: '';
797 position: absolute;
798 right: 0;
799 top: 50%;
800 margin-top: -3px;
801 border-top: 6px solid #7A8996;
802 border-left: 6px solid transparent;
803 border-right: 6px solid transparent;
804 }
805
806 /* Complete row / success */
807 .imagify-row-complete {
808 margin-top: 2em;
809 color: #FFF;
810 text-shadow: 0 0 2px rgba(0, 0, 0, .1);
811 }
812
813 .imagify-row-complete .imagify-ac-chart {
814 margin-top: 3px;
815 }
816
817 .imagify-row-complete.imagify-row-complete p {
818 color: #FFF;
819 margin: 0;
820 }
821
822 @-webkit-keyframes congrate {
823 0% {
824 opacity: 0;
825 -webkit-transform: scale(1);
826 }
827 50% {
828 -webkit-transform: scale(1.05);
829 opacity: 1;
830 }
831 100% {
832 -webkit-transform: scale(1);
833 opacity: 1;
834 }
835 }
836
837 @keyframes congrate {
838 0% {
839 opacity: 0;
840 transform: scale(1);
841 }
842 50% {
843 transform: scale(1.05);
844 opacity: 1;
845 }
846 100% {
847 transform: scale(1);
848 opacity: 1;
849 }
850 }
851
852 .imagify-row-complete.done {
853 -webkit-animation: congrate 500ms ease-in-out;
854 animation: congrate 500ms ease-in-out;
855 }
856
857 .imagify-all-complete {
858 display: flex;
859 justify-content: space-between;
860 margin: 1.5em 0;
861 }
862
863 .imagify-ac-report {
864 display: flex;
865 justify-content: center;
866 align-items: center;
867 flex: auto;
868 padding: 35px 20px;
869 background: #8BC34A;
870 min-width: 310px;
871 }
872
873 .imagify-ac-chart {
874 width: 46px;
875 height: 46px;
876 float: left;
877 margin: 0 20px 0 10px;
878 }
879
880 .imagify-ac-report-text {
881 overflow: hidden;
882 }
883
884 .imagify-ac-report-text p {
885 line-height: 1.3;
886 }
887
888 .imagify-ac-rt-big {
889 font-weight: bold;
890 font-size: 24px;
891 letter-spacing: 0.15em;
892 word-spacing: 0.15em;
893 text-transform: uppercase;
894 }
895
896 .imagify-ac-spread-word, .imagify-ac-leave-review {
897 flex: auto;
898 padding: 35px 20px;
899 background: #343A49;
900 }
901
902 .imagify-ac-spread-word h3 {
903 color: #fff;
904 text-transform: uppercase;
905 }
906
907 .imagify-ac-spread-word .stars {
908 text-decoration: none;
909 }
910
911 .imagify-ac-leave-review {
912 display: flex;
913 justify-content: center;
914 align-items: center;
915 }
916
917 /* TD's width */
918 .imagify-cell-checkbox {
919 width: 35px;
920 }
921
922 .imagify-cell-checkbox p {
923 margin: 0;
924 }
925
926 .imagify-cell-checkbox-loader {
927 display: block;
928 width: 27px;
929 height: 28px;
930 line-height: 0;
931 animation: loading 4s infinite linear;
932 }
933
934 @keyframes loading {
935 0% {
936 transform: rotate(0);
937 }
938 100% {
939 transform: rotate(360deg);
940 }
941 }
942
943 .imagify-cell-checkbox-loader.hidden {
944 display: none;
945 animation: none;
946 }
947
948 .imagify-cell-title label,
949 .imagify-cell-label {
950 font-size: 14px;
951 text-transform: uppercase;
952 letter-spacing: .02em;
953 font-weight: bold;
954 }
955
956 .imagify-cell-label {
957 margin-right: 10px;
958 }
959
960 .imagify-cell-value {
961 font-size: 12px;
962 font-weight: 500;
963 color: #7A8996;
964 }
965
966 td.imagify-cell-title {
967 padding-left: 0;
968 }
969
970 .imagify-cell-title label,
971 .imagify-cell-original-size .imagify-cell-label {
972 color: #1F2332;
973 }
974
975 .imagify-cell-optimized-size,
976 .imagify-cell-original-size {
977 font-weight: 500;
978 color: #7A8996;
979 font-size: 12px;
980 }
981
982 .imagify-cell-optimized-size .imagify-cell-label {
983 color: #338EA6;
984 }
985
986 .imagify-cell-count-optimized {
987 font-size: 14px;
988 font-weight: bold;
989 color: #338EA6;
990 }
991
992 .imagify-cell-count-errors {
993 color: #C51162;
994 font-weight: bold;
995 font-size: 14px;
996 }
997
998 .imagify-cell-count-errors a {
999 margin-left: 5px;
1000 color: #7A8996;
1001 font-weight: normal;
1002 font-size: 12px;
1003 }
1004
1005 .imagify-cell-filename {
1006 max-width: 200px;
1007 }
1008
1009 .imagify-cell-status {
1010 max-width: 145px;
1011 }
1012
1013 .imagify-cell-status .dashicons-warning {
1014 margin-right: 2px;
1015 }
1016
1017 .imagify-cell-thumbnails {
1018 max-width: 120px;
1019 }
1020
1021 td.imagify-cell-filename {
1022 text-overflow: clip; /* ellipsis replace all the text by ... :`/ */
1023 white-space: nowrap;
1024 overflow: hidden;
1025 }
1026
1027 .imagify-bulk-table .imagify-cell-thumbnails {
1028 text-align: center;
1029 }
1030
1031 .imagify-cell-percentage,
1032 .imagify-cell-savings {
1033 color: #46B1CE;
1034 font-weight: bold;
1035 }
1036
1037 .imagify-bulk-table td.imagify-cell-totaloriginal {
1038 padding-right: 78px;
1039 }
1040
1041 .imagify-cell-totaloriginal {
1042 text-align: right;
1043 }
1044
1045 .imagify-cell-level {
1046 width: 145px;
1047 }
1048
1049 .imagify-selector-button.imagify-selector-button {
1050 border: 1px solid #FFF;
1051 padding: 2px 10px;
1052 }
1053
1054 .imagify-selector-button.imagify-selector-button:hover,
1055 .imagify-selector-button.imagify-selector-button:focus {
1056 border-color: #EEE;
1057 box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
1058 }
1059
1060 .imagiuploaded,
1061 .imagifilename {
1062 display: inline-block;
1063 vertical-align: middle;
1064 margin-left: 5px;
1065 color: #626E7B;
1066 font-weight: 500;
1067 }
1068
1069 .imagifilename {
1070 font-size: 12px;
1071 }
1072
1073 .imagiuploaded {
1074 width: 33px;
1075 height: 33px;
1076 margin-right: 5px;
1077 margin-left: -8px;
1078 overflow: hidden;
1079 background: url(../images/upload-image.png) 0 0 no-repeat;
1080 background-size: cover;
1081 }
1082
1083 .imagiuploaded img {
1084 max-width: 100%;
1085 height: auto;
1086 }
1087
1088 .imagistatus {
1089 color: #8CA6B3;
1090 text-transform: uppercase;
1091 font-weight: bold;
1092 }
1093
1094 .imagistatus .dashicons {
1095 margin-right: 5px;
1096 }
1097
1098 .status-compressing {
1099 color: #46B1CE;
1100 }
1101
1102 .status-error {
1103 color: #CE0B24;
1104 }
1105
1106 .status-warning {
1107 color: #f5a623;
1108 }
1109
1110 .status-complete {
1111 color: #8CC152;
1112 }
1113
1114 /* Submit Bulk */
1115 .imagify-bulk-submit {
1116 padding: 15px 0 8px 0;
1117 }
1118
1119 .imagify-settings .button-primary.button-primary[disabled] {
1120 color: #4A4A4A !important;
1121 background: #D9E4EB !important;
1122 text-shadow: none !important;
1123 cursor: not-allowed;
1124 }
1125
1126 /* Icon rotation */
1127 .dashicons.rotate {
1128 -webkit-animation: icon-rotate 2.6s infinite linear;
1129 animation: icon-rotate 2.6s infinite linear;
1130 }
1131
1132 .imagify-cell-status .dashicons-admin-generic {
1133 transform-origin: 48.75% 51.75%;
1134 }
1135
1136 @-webkit-keyframes icon-rotate {
1137 from {
1138 -webkit-transform: rotate(0deg);
1139 transform: rotate(0deg);
1140 }
1141 to {
1142 -webkit-transform: rotate(360deg);
1143 transform: rotate(360deg);
1144 }
1145 }
1146
1147 @keyframes icon-rotate {
1148 from {
1149 transform: rotate(0deg);
1150 }
1151 to {
1152 transform: rotate(360deg);
1153 }
1154 }
1155
1156 .imagify-col.imagify-col.imagify-account-info-col {
1157 width: 465px;
1158 }
1159
1160 @media (max-width: 1245px) {
1161 .imagify-col.imagify-col.imagify-account-info-col {
1162 width: auto;
1163 max-width: none;
1164 float: none;
1165 }
1166
1167 .imagify-columns .col-overview.col-overview {
1168 float: none;
1169 width: auto;
1170 padding-left: 0;
1171 padding-right: 0;
1172 }
1173 }
1174
1175 @media (max-width: 1200px) {
1176 .imagify-settings .imagify-title .imagify-logo {
1177 display: none;
1178 }
1179 }
1180
1181 @media (max-width: 940px) {
1182 .imagify-bulk-table-container tbody,
1183 .imagify-bulk-table-container tr {
1184 text-align: left;
1185 }
1186
1187 .imagify-bulk-table-container tbody,
1188 .imagify-bulk-table-container tbody tr,
1189 .imagify-bulk-table-container tbody td {
1190 display: block;
1191 }
1192
1193 .imagify-bulk-table-container tbody td {
1194 padding: 20px;
1195 }
1196
1197 .imagify-cell-checkbox,
1198 .imagify-cell-title {
1199 float: left;
1200 }
1201
1202 .imagify-cell-checkbox {
1203 width: 26px;
1204 }
1205
1206 .imagify-bulk-table-container .imagify-cell-title {
1207 padding-left: 10px;
1208 width: calc(100% - 96px);
1209 }
1210
1211 .imagify-cell-title:after,
1212 .imagify-cell-count-optimized:before {
1213 content: '';
1214 display: table;
1215 clear: both;
1216 width: 100%;
1217 }
1218
1219 .imagify-cell-count-optimized {
1220 clear: both;
1221 }
1222
1223 .imagify-bulk-table-container .imagify-cell-title ~ td {
1224 display: inline-block;
1225 }
1226
1227 .imagify-bulk-table-container td.imagify-cell-level {
1228 display: block
1229 }
1230 }
1231
1232 @media (max-width: 918px) {
1233 .imagify-settings .imagify-title {
1234 display: block;
1235 }
1236
1237 .imagify-settings .imagify-documentation-link-box {
1238 display: inline-flex;
1239 }
1240 }
1241
1242 .hidden {
1243 display: none;
1244 }
1245
1246 @media (max-width: 782px) {
1247 .imagify-table-header,
1248 .imagify-newbie .imagify-table-header,
1249 .imagify-account-info-col .imagify-options-title{
1250 -webkit-flex-direction: column;
1251 -ms-flex-direction: column;
1252 flex-direction: column;
1253 -webkit-box-direction: normal;
1254 -webkit-box-orient: vertical;
1255 -moz-box-direction: normal;
1256 -moz-box-orient: vertical;
1257 align-items: center;
1258 }
1259 .imagify-newbie .imagify-th-titles{
1260 width: 100%;
1261 }
1262 .imagify-newbie .imagify-th-title.imagify-th-title {
1263 color: #343A49;
1264 font-size: 16px;
1265 padding-bottom: 20px;
1266 }
1267 .imagify-newbie .imagify-th-titles .dashicons,
1268 .imagify-newbie .imagify-th-titles .dashicons:before{
1269 margin: 0px;
1270 }
1271 .imagify-newbie .imagify-th-action{
1272 display: flex;
1273 max-width: 100%;
1274 }
1275 .imagify-newbie .imagify-th-action a{
1276 max-width: 100%;
1277 font-size: 11px;
1278 padding: 11px 12px;
1279 }
1280 .imagify-columns .col-chart.col-chart{
1281 text-align: center;
1282 }
1283 .imagify-doughnut-legend{
1284 margin-top: 18px;
1285 width: 60%;
1286 margin: 10px auto;
1287 }
1288 .imagify-account-info-col .imagify-options-title > a{
1289 flex-basis: unset;
1290 margin: auto;
1291 }
1292 .imagify-th-title.imagify-th-title.imagify-th-title{
1293 font-size: 20px;
1294 }
1295 .imagify-account-info-col p.imagify-meteo-title{
1296 font-size: 20px;
1297 }
1298 .imagify-bulk-table-container tbody td{
1299 padding: 10px;
1300 }
1301 .imagify-col-content .imagify-space-left{
1302 width: auto;
1303 margin: 0 0 15px 0;
1304 }
1305 }
1306
1307 .imagify-notice-dismiss {
1308 text-decoration: none;
1309 }
1310
1311 .imagify-notice-dismiss::before {
1312 color: #fff;
1313 }
1314
1315 .imagify-notice-dismiss.notice-dismiss:hover::before {
1316 color: #fff;
1317 }
1318