PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / 1.7
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF v1.7
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 / options.css

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

800 lines 15.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wrap.imagify-settings {
2 margin-right: 0;
3 }
4 .imagify-settings.imagify-have-rocket {
5 margin-right: 20px;
6 }
7
8 /* The field that checks the API Key */
9 #imagify-check-api-container {
10 display: block;
11 margin-top: 6px;
12 font-weight: bold;
13 }
14
15 #imagify-check-api-container .dashicons {
16 font-size: 25px;
17 }
18
19 #imagify-check-api-container .dashicons-no:before {
20 color: #f06e57;
21 vertical-align: -1px;
22 }
23
24 #imagify-check-api-container .imagify-icon {
25 font-size: 1.8em;
26 margin-right: 3px;
27 margin-left: 1px;
28 color: #8BC34A;
29 vertical-align: -2px;
30 }
31
32 .imagify-account-info-col .imagify-api-line {
33 padding: 22px 26px;
34 background: #343A49
35 }
36
37 .imagify-api-line label,
38 p.imagify-api-key-invite-title {
39 display: block;
40 margin-bottom: 6px;
41 font-size: 14px;
42 text-transform: uppercase;
43 letter-spacing: 0.02em;
44 font-weight: bold;
45 color: #343A49;
46 }
47 .imagify-account-info-col .imagify-api-line label {
48 color: #E5EBEF;
49 display: inline-block;
50 }
51 .imagify-api-line.imagify-api-line input[type="text"] {
52 width: 100%;
53 padding: 6px 10px;
54 border: 1px solid #40B1D0;
55 font-family: "PT Mono", "Consolas", monospace;
56 font-size: 14px;
57 letter-spacing: 0.01em;
58 font-weight: bold;
59 color: #40B1D0;
60 background: transparent;
61 box-shadow: none;
62 }
63
64 .imagify-no-api-key .imagify-api-line {
65 margin: 3em 0 0 0;
66 padding: 2em 0 0;
67 border-top: 1px solid #D5D6D9;
68 }
69 .imagify-no-api-key .imagify-api-line input[type="text"] {
70 margin-top: 5px;
71 width: 400px;
72 max-width: 100%;
73 }
74 .imagify-settings .imagify-no-api-key div.submit.submit {
75 border: 0;
76 padding: 0 16px;
77 margin-top: 0;
78 background: #FFF;
79 }
80 .imagify-settings .imagify-no-api-key div.submit.submit p {
81 padding-bottom: 0;
82 }
83
84 .imagify-options-title {
85 margin: .75em 0 0 0;
86 font-size: 24px;
87 letter-spacing: 0.02em;
88 font-weight: bold;
89 color: #343A49;
90 }
91
92 .imagify-options-subtitle {
93 padding-bottom: .3em;
94 margin-bottom: 20px;
95 border-bottom: 1px solid #D2D3D6;
96 font-size: 14px;
97 letter-spacing: 0.01em;
98 font-weight: bold;
99 text-transform: uppercase;
100 color: #626E7B;
101 }
102
103 .imagify-options-subtitle a {
104 font-size: 12px;
105 color: #338EA6;
106 text-transform: none;
107 letter-spacing: 0;
108 }
109
110 .imagify-options-subtitle .imagify-info {
111 margin-left: 15px;
112 }
113
114 .imagify-setting-line {
115 border-top: 1px solid #D2D3D6;
116 padding: 25px 0 13px;
117 }
118 .imagify-options-subtitle + .imagify-setting-line {
119 border-top: 0;
120 padding-top: 8px;
121 }
122
123 /* 3 inlined buttons + Visual comparison */
124 .imagify-setting-optim-level {
125 display: flex;
126 flex-wrap: wrap;
127 align-items: center;
128 }
129
130 .imagify-setting-optim-level {
131 padding: 8px 0 18px;
132 }
133 .imagify-setting-optim-level > p {
134 margin: 0;
135 }
136 .imagify-setting-optim-level .imagify-inline-options {
137 flex-basis: 60%;
138 flex-grow: 1;
139 width: auto;
140 display: flex;
141 background: #2E3243;
142 border-radius: 3px;
143 }
144 .imagify-setting-optim-level .imagify-inline-options label {
145 display: block !important;
146 width: 100%;
147 font-size: 14px !important;
148 border-radius: 3px!important;
149 }
150 .imagify-setting-optim-level .imagify-visual-comparison-text {
151 flex-basis: 40%;
152 flex-shrink: 1;
153 padding-left: 20px;
154 color: #626E7B;
155 box-sizing: border-box;
156 }
157 .imagify-setting-optim-level.imagify-setting-optim-level .imagify-visual-comparison-btn {
158 padding-top: 5px;
159 margin-top: 2px;
160 border-radius: 2px;
161 text-transform: none;
162 letter-spacing: 0;
163 text-shadow: none!important;
164 }
165
166 /* TODO: maybe remove table lines, we don't use theme anymore… */
167 @media (max-width: 782px) {
168 .imagify-settings .form-table th {
169 padding-top: 2em;
170 padding-bottom: .5em;
171 }
172 }
173 .imagify-settings .form-table td {
174 vertical-align: top;
175 }
176 .imagify-settings .form-table th span {
177 cursor: pointer;
178 }
179 .imagify-middle th {
180 padding-top: 35px;
181 }
182
183 .imagify-settings input[type="text"] {
184 color: #4A4A4A;
185 font-weight: 600;
186 box-shadow: none;
187 }
188
189 .imagify-settings div.submit.submit {
190 border-top: 1px solid #D9D9D9;
191 margin-top: 2em;
192 padding: 18px 0 7px 30px;
193 }
194 .imagify-settings .hidden + div.submit.submit {
195 margin-top: -1px;
196 }
197 .imagify-settings p.submit {
198 float: left;
199 margin-top: 0;
200 }
201 .imagify-settings p.submit .button {
202 margin: 0 5px;
203 }
204
205 .imagify-sub-header th {
206 text-align: right;
207 }
208 .imagify-sub-header .form-table {
209 margin: 0;
210 }
211 .imagify-sub-header th,
212 .imagify-sub-header td {
213 padding-top: 0;
214 padding-bottom: 0;
215 }
216
217 .imagify-sub-header [for="api_key"] {
218 padding-top: 5px;
219 }
220
221 @media (max-width: 1120px) {
222 .imagify-settings .imagify-logo-block {
223 margin-right: 0;
224 }
225 .imagify-settings .imagify-rate-us.imagify-rate-us {
226 margin: 1em 0 -1em;
227 }
228 }
229
230 .imagify-settings .imagify-rate-us {
231 margin-right: 25px;
232 margin-left: auto;
233 }
234
235 /* Label & fake labels */
236 label + .imagify-info,
237 .imagify-visual-label {
238 display: inline-block;
239 width: 550px;
240 max-width: calc(100% - 38px);
241 margin-left: 38px;
242 padding-right: 25px;
243 }
244 label + .imagify-options-line {
245 display: block;
246 margin: 8px 0 20px 40px;
247 font-size: 14px;
248 -webkit-transition: opacity .3s;
249 transition: opacity .3s;
250 }
251 .imagify-options-line + .imagify-info {
252 margin-left: 38px;
253 }
254 label + .imagify-info {
255 margin-top: 10px;
256 }
257 .imagify-visual-label {
258 vertical-align: -5px;
259 }
260 label[for="imagify_sizes_full"] + .imagify-info {
261 vertical-align: middle;
262 }
263
264 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label + .imagify-options-line,
265 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label .imagify-visual-label {
266 opacity: .5;
267 }
268 .imagify-settings.imagify-settings [type="checkbox"]:checked + label + .imagify-options-line,
269 .imagify-settings.imagify-settings [type="checkbox"]:checked + label .imagify-visual-label {
270 opacity: 1;
271 }
272
273 .imagify-checkbox-marged {
274 max-width: 500px;
275 margin-left: 45px;
276 }
277
278 #imagify_resize_larger_w {
279 width: 5em;
280 height: auto;
281 padding: 6px;
282 margin: 0 6px;
283 border: 1px solid #8BA6B4;
284 box-shadow: none;
285 border-radius: 2px;
286 color: #338EA6;
287 font-weight: bold;
288 }
289
290 .imagify-menu-bar-img {
291 max-width: 100%;
292 height: auto;
293 margin-top: 0;
294 border: 1px solid #8BA6B4;
295 }
296
297 /* Layout */
298 .imagify-col.imagify-main {
299 float: left;
300 width: calc(100% - 320px);
301 padding-left: 0;
302 padding-right: 0;
303 }
304 .imagify-have-rocket .imagify-main {
305 float: none;
306 width: 1265px;
307 max-width: 100%;
308 }
309 .imagify-sidebar {
310 float: left;
311 width: 300px;
312 max-width: 100%;
313 }
314
315 /* Sidebar with Ads */
316 .imagify-sidebar-section {
317 border: 1px solid #BBB;
318 background: #1F2332;
319 }
320 .imagify-sidebar-section + .imagify-sidebar-section {
321 margin-top: 2em;
322 }
323
324 @media (max-width: 820px) {
325 .imagify-settings {
326 display: -webkit-box;
327 display: -ms-flexbox;
328 display: flex;
329 -webkit-box-orient: vertical;
330 -webkit-box-direction: normal;
331 -ms-flex-direction: column;
332 flex-direction: column;
333 }
334 .imagify-main {
335 width: auto;
336 float: none;
337 }
338 .imagify-sidebar {
339 order: 2;
340 float: none;
341 width: auto;
342 max-width: none;
343 margin-left: 0;
344 margin-top: 25px;
345 }
346 .wp-media-products {
347 text-align: center;
348 }
349 .wp-media-products li {
350 display: inline-block;
351 width: 100%;
352 max-width: 276px;
353 }
354 }
355 @media (min-width: 1400px) {
356 .imagify-main {
357 width: 74%;
358 }
359 }
360 .imagify-sidebar-section {
361 position: relative;
362 padding: 10px 20px;
363 text-align: center;
364 color: #F2F2F2;
365 }
366 .imagify-sidebar-close {
367 position: absolute;
368 top: 8px;
369 right: 12px;
370 text-decoration: none;
371 }
372 .imagify-sidebar-close i {
373 font-size: 2em;
374 color: rgba(255,255,255,.5);
375 }
376 p.imagify-sidebar-title {
377 margin: 1.2em 0 1.5em;
378 text-align: left;
379 color: #F56640;
380 text-transform: uppercase;
381 letter-spacing: 0.015em;
382 word-spacing: 0.015em;
383 font-weight: bold;
384 }
385 p.imagify-sidebar-description {
386 margin: 1.5em 0;
387 text-align: left;
388 font-weight: 500;
389 color: #F2F2F2;
390 }
391 .imagify-sidebar-description strong {
392 color: #39CE9A;
393 }
394 .imagify-rocket-cta-promo {
395 display: block;
396 padding: 8px 10px;
397 margin: 1.3em 0 .5em 0;
398 border: 2px dashed #F56640;
399 border-radius: 3px;
400 font-size: 18px;
401 font-weight: bold;
402 color: #F56640;
403 }
404 .imagify-rocket-cta-promo strong {
405 color: #F2F2F2;
406 }
407 a.btn-rocket {
408 display: block;
409 font-size: 15px;
410 padding: 10px 12px;
411 margin: 0 0 1.5em;
412 background: #F56640;
413 border-radius: 3px;
414 color: #F2F2F2;
415 text-transform: uppercase;
416 font-weight: bold;
417 text-decoration: none;
418 }
419 a.btn-rocket:hover,
420 a.btn-rocket:focus {
421 background: #AC2B15;
422 }
423
424 .imagify-sidebar-section ul {
425 margin-top: 20px;
426 }
427
428 .imagify-sidebar-section li {
429 position: relative;
430 margin: 1.2em 0;
431 padding-left: 25px;
432 text-align: left;
433 }
434 .imagify-sidebar-section li:before {
435 content: "";
436 position: absolute;
437 left: 0; top: 0;
438 color: #39CE9A;
439 font-size: 18px;
440 }
441
442 /* Menu in admin bar label exception */
443 label[for="imagify_admin_bar_menu"] {
444 font-weight: normal !important;
445 color: #626E7B !important;
446 }
447
448 /* Select / Unselect all buttons */
449 .imagify-select-all-buttons {
450 margin-top: 8px;
451 }
452 .imagify-link-like.imagify-select-all {
453 font-weight: bold;
454 font-size: 12px;
455 color: #3694AE;
456 }
457 .imagify-select-all.imagify-is-inactive {
458 color: inherit;
459 text-decoration: none;
460 cursor: default;
461 }
462
463 /* Add Themes box */
464 .imagify-fts-header {
465 padding: 10px 16px;
466 background: #343A49;
467 color: #FFF;
468 }
469 .imagify-fts-header i {
470 font-size: 1.8em;
471 margin-right: 12px;
472 }
473 .imagify-fts-header p {
474 margin: 0;
475 color: #FFF;
476 }
477 .imagify-fts-header strong,
478 #imagify-add-themes-to-custom-folder strong {
479 color: #40B1D0;
480 font-weight: bold;
481 }
482
483 .imagify-fts-content {
484 padding: 16px;
485 background: #F4F7F9;
486 border: 1px solid #CDD0D4;
487 border-top: 0;
488 }
489
490 .imagify-fts-content p {
491 margin-top: 0;
492 }
493
494 .imagify-kindof-title {
495 margin-top: 2em;
496 padding: 0 0 10px 0;
497 border-bottom: 1px solid #D2D3D6;
498 justify-content: space-between;
499 font-weight: bold;
500 }
501 .imagify-kindof-title .imagify-button-primary {
502 padding: 4px 13px 4px 10px;
503 }
504 .imagify-kindof-title .imagify-button-primary .dashicons {
505 vertical-align: -7.5px;
506 }
507 .imagify-kindof-title .imagify-button-primary:hover,
508 .imagify-kindof-title .imagify-button-primary:focus {
509 color: #FFF;
510 }
511
512 p.imagify-custom-folder-line {
513 position: relative;
514 margin: 0;
515 padding: 12px 15px;
516 color: #4A5362;
517 font-weight: 500;
518 transition: all .75s;
519 }
520 .imagify-custom-folder-line.imagify-will-remove {
521 background: #C51162;
522 color: #FFF;
523 transform: translateX(-120px);
524 opacity: 0;
525 }
526 .imagify-custom-folder-line:first-child {
527 margin-top: -.5em;
528 }
529 .imagify-custom-folder-line + .imagify-custom-folder-line {
530 border-top: 1px solid #E9EFF2;
531 }
532
533 .imagify-custom-folders-remove {
534 position: absolute;
535 right: 0;
536 top: 6px;
537 border: 0;
538 padding: 5px 10px 4px;
539 box-shadow: none;
540 color: #7A8996;
541 border-radius: 16px;
542 font-size: 13px;
543 line-height: 18px;
544 background: #FFF;
545 transition: all .275s;
546 cursor: pointer;
547 }
548 .imagify-custom-folders-remove-text {
549 max-width: 0;
550 overflow: hidden;
551 white-space: nowrap;
552 display: inline-block;
553 transform: scale(0);
554 opacity: 0;
555 transition: all .275s;
556 }
557 .imagify-custom-folders-remove:hover,
558 .imagify-custom-folders-remove:focus {
559 background: #D9EFF6;
560 color: #225E6E;
561 }
562 .imagify-custom-folders-remove:hover .imagify-custom-folders-remove-text,
563 .imagify-custom-folders-remove:focus .imagify-custom-folders-remove-text {
564 max-width: 6em;
565 transform: scale(1);
566 opacity: 1;
567 }
568
569 /* Files tree Part */
570 .imagify-add-custom-folder + .imagify-loader {
571 display: none;
572 vertical-align: middle;
573 }
574 .imagify-add-custom-folder[disabled] + .imagify-loader {
575 display: inline-block;
576 }
577
578 .imagify-folders-information {
579 position: relative;
580 margin: -5px 0 20px 0;
581 padding: 10px 10px 10px 40px;
582 text-align: left;
583 background: #F2F2F2;
584 }
585 .imagify-folders-information i {
586 position: absolute;
587 left: 10px;
588 top: 50%;
589 margin-top: -10px;
590 }
591
592 /* Tree */
593 .imagify-folders-tree {
594 margin: 0;
595 text-align: left;
596 }
597 .imagify-folders-tree li {
598 clear: left;
599 }
600 .imagify-folders-tree .imagify-folder {
601 box-sizing: border-box;
602 position: relative;
603 width: 48px;
604 z-index: 2;
605 float: left;
606 margin-top: -3px;
607 padding: 0 8px 0 0;
608 border: 0;
609 background: transparent!important;
610 box-shadow: none;
611 cursor: pointer;
612 transition: all .275s;
613 }
614 .imagify-folders-tree span.imagify-folder {
615 padding-left: 1.5px;
616 }
617 .imagify-folders-tree .imagify-folder:before {
618 content: "+";
619 display: inline-block;
620 width: 13px;
621 height: 21px;
622 font-size: 1.5em;
623 vertical-align: .15em;
624 }
625 .imagify-folders-tree span.imagify-folder:before {
626 content: '';
627 }
628 .imagify-folders-tree .imagify-folder-icon path {
629 transition: all .275s;
630 }
631 .imagify-folders-tree .imagify-is-open .imagify-folder-icon path {
632 stroke: #7A8996;
633 }
634 .imagify-folders-tree .imagify-is-open.imagify-folder:before {
635 content: "-";
636 color: #7A8996;
637 }
638 .imagify-folders-tree .imagify-is-open ~ label {
639 color: #7A8996;
640 }
641
642 .imagify-folders-tree button.imagify-folder:hover,
643 .imagify-folders-tree button.imagify-folder:focus,
644 .imagify-folders-tree button.imagify-folder:hover path,
645 .imagify-folders-tree button.imagify-folder:focus path {
646 color: #3694AE;
647 stroke: #3694AE;
648 }
649
650 .imagify-folders-tree .imagify-folder:disabled,
651 .imagify-folders-tree .imagify-folder.disabled {
652 color: rgb(127, 127, 127);
653 }
654 .imagify-swal-content .imagify-folders-tree label {
655 position: relative;
656 display: block;
657 width: 100%;
658 padding: 3px 0;
659 font-size: 15px;
660 font-weight: 500;
661 vertical-align: top;
662 transition: all .475s;
663 }
664 .imagify-swal-content .imagify-folders-tree label:hover,
665 .imagify-folders-tree input:focus + label {
666 background: #F4F7F9;
667 }
668
669 .imagify-folders-tree .imagify-folder-already-selected label,
670 .imagify-folders-tree .imagify-folder-already-selected label:hover,
671 .imagify-folders-tree .imagify-folder-already-selected input:focus + label {
672 background: #40B1D0;
673 color: #FFF;
674 border-radius: 3px;
675 cursor: default;
676 }
677 .imagify-folders-tree .imagify-folder-already-selected button,
678 .imagify-folders-tree .imagify-folder-already-selected button path {
679 color: #FFF;
680 stroke: #FFF;
681 cursor: default;
682 }
683 .imagify-folders-tree .imagify-folder-already-selected button:hover path,
684 .imagify-folders-tree .imagify-folder-already-selected button:focus path {
685 stroke: #FFF;
686 }
687 .imagify-folders-tree .imagify-folder-already-selected button:before {
688 content: '';
689 }
690
691 /* Add Folder fake checkbox */
692 .imagify-add-ed-folder {
693 position: absolute;
694 top: 0;
695 bottom: 0;
696 right: 0;
697 font-size: 11px;
698 text-transform: uppercase;
699 letter-spacing: 0.02em;
700 word-spacing: 0.02em;
701 color: #3694AE;
702 background: #F4F7F9;
703 opacity: 0;
704 transform: translateX(15px);
705 transition: all .275s;
706 }
707 label:hover .imagify-add-ed-folder,
708 input:focus + label .imagify-add-ed-folder,
709 input:checked + label .imagify-add-ed-folder,
710 .imagify-folder-already-selected .imagify-add-ed-folder {
711 opacity: 1;
712 transform: translateX(0);
713 }
714 input:checked + label .imagify-add-ed-folder {
715 background: #FFF;
716 }
717 input:checked:focus + label .imagify-add-ed-folder,
718 input:checked + label:hover .imagify-add-ed-folder {
719 background: #F4F7F9;
720 }
721 .imagify-folder-already-selected .imagify-add-ed-folder {
722 background: #40B1D0;
723 color: #FFF;
724 }
725 .imagify-fake-checkbox {
726 position: relative;
727 display: inline-block;
728 width: 14px;
729 height: 14px;
730 margin: 3.5px 15px 0 5px;
731 border: 1.5px solid #3694AE;
732 border-radius: 3px;
733 vertical-align: -4px;
734 }
735 .imagify-fake-checkbox:after {
736 position: absolute;
737 left: 1px;
738 top: 0;
739 content: "";
740 color: #3694AE;
741 font-size: 14px;
742 line-height: .9;
743 font-style: normal;
744 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
745 opacity: 0;
746 transform: scale(0);
747 transition: all .475s;
748 }
749 input:checked + label .imagify-fake-checkbox:after,
750 .imagify-folder-already-selected .imagify-fake-checkbox:after {
751 opacity: 1;
752 transform: scale(1);
753 }
754 .imagify-folder-already-selected .imagify-fake-checkbox {
755 border-color: #40B1D0;
756 }
757 .imagify-folder-already-selected .imagify-fake-checkbox:after {
758 color: #FFF;
759 }
760
761 /* Sub Trees */
762 .imagify-folders-sub-tree {
763 position: relative;
764 margin-left: .75em;
765 padding-top: .6em;
766 padding-left: 1em;
767 border-left: 1px dotted rgba(98, 110, 123, .3);
768 }
769 .imagify-folders-sub-tree li {
770 position: relative;
771 margin-bottom: 4px;
772 }
773 .imagify-folders-sub-tree li:before {
774 content: "";
775 position: absolute;
776 top: 12px;
777 left: -1em;
778 height: 1px;
779 width: 0.9em;
780 border-top: 1px dotted rgba(98, 110, 123, .3);
781 }
782 .imagify-folders-sub-tree li:last-child:after {
783 content: "";
784 position: absolute;
785 left: -1.1em;
786 bottom: 0;
787 height: 11px;
788 width: 3px;
789 background: #FFF;
790 }
791
792 .imagify-empty-folder {
793 margin-top: -.5em;
794 }
795 .imagify-empty-folder em {
796 font-size: 12px;
797 font-weight: 500;
798 color: #A2AFBC;
799 }
800