PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 3.2.5
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v3.2.5
4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 3.8.0 All 110 releases
wp-optimize / css / wp-optimize-admin.css

wp-optimize-admin.css in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 3.2.5, at css/wp-optimize-admin.css

3,021 lines 56.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* COLORS */
2
3 /* OTHER VARS */
4
5 .wpo_hidden {
6 display: none !important;
7 }
8
9 .wpo_info {
10 background: #FFF;
11 color: #444;
12 font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
13 margin: 2em auto;
14 padding: 1em 2em;
15 max-width: 700px;
16 box-shadow: 0 1px 3px rgba(0,0,0,0.13);
17 }
18
19 #wp-optimize-wrap .widefat thead th, #wp-optimize-wrap .widefat thead td {
20 border-bottom: 1px solid #E1E1E1;
21 }
22
23 #wp-optimize-wrap .widefat td, #wp-optimize-wrap .widefat th {
24 padding: 8px 10px;
25 }
26
27 /* big button */
28
29 .wpo_primary_big {
30 padding: 4px 6px !important;
31 font-size: 22px !important;
32 min-height: 34px;
33 min-width: 200px;
34 }
35
36 /* SECTIONS */
37
38 .wpo_section {
39 clear: both;
40 padding: 0;
41 margin: 0;
42 }
43
44 .wp-optimize-settings {
45 margin-bottom: 16px;
46 }
47
48 .wp-optimize-settings td > label {
49 font-weight: bold;
50 display: block;
51 margin-bottom: 8px;
52 }
53
54 /* COLUMN SETUP */
55
56 .wpo_col {
57 display: block;
58 float: left;
59 margin: 1% 0 1% 1%;
60 }
61
62 .wpo_col:first-child {
63 margin-left: 0;
64 }
65
66 /* GROUPING */
67
68 .wpo_group:before,
69 .wpo_group:after {
70 content: "";
71 display: table;
72 }
73
74 .wpo_group:after {
75 clear: both;
76 }
77
78 .wpo_half_width {
79 width: 48%;
80 }
81
82 /* GRID OF THREE */
83
84 .wpo_span_3_of_3 {
85 width: 100%;
86 }
87
88 .wpo_span_2_of_3 {
89 width: 65.3%;
90 }
91
92 .wpo_span_1_of_3 {
93 width: 32.1%;
94 }
95
96 #wp-optimize-wrap .nav-tab-wrapper {
97 margin: 0;
98 }
99
100 @media screen and (min-width: 549px) {
101
102 .show_on_default_sizes {
103 display: block !important;
104 }
105
106 .show_on_mobile_sizes {
107 display: none !important;
108 }
109
110 }
111
112 @media screen and (max-width: 548px) {
113
114 .show_on_default_sizes {
115 display: none !important;
116 }
117
118 .show_on_mobile_sizes {
119 display: block !important;
120 }
121
122 }
123
124 @media screen and (max-width: 768px) {
125
126 .wpo_col {
127 margin: 1% 0;
128 }
129
130 .wpo_span_3_of_3 {
131 width: 100%;
132 }
133
134 .wpo_span_2_of_3 {
135 width: 100%;
136 }
137
138 .wpo_span_1_of_3 {
139 width: 100%;
140 }
141
142 .wpo_half_width {
143 width: 100%;
144 }
145
146 }
147
148 /* .wp-optimize-settings-clean-transient label, .wp-optimize-settings-clean-pingbacks label, .wp-optimize-settings-clean-trackbacks label, .wp-optimize-settings-clean-postmeta label, .wp-optimize-settings-clean-orphandata label, .wp-optimize-settings-clean-commentmeta label */
149
150 /* Optimizations tab */
151
152 .wp-optimize-setting-is-sensitive td > label::before {
153 content: "\f534";
154 font-family: 'dashicons';
155 display: inline-block;
156 margin-right: 6px;
157 font-style: normal;
158 line-height: 1;
159 vertical-align: middle;
160 width: 20px;
161 font-size: 18px;
162 height: 20px;
163 text-align: center;
164 color: #72777C;
165 }
166
167 .wpo-run-optimizations__container {
168 margin-bottom: 15px;
169 }
170
171 .wp-optimize-optimizations-table-placeholder {
172 min-height: 80px;
173 }
174
175 td.wp-optimize-settings-optimization-checkbox {
176 width: 18px;
177 padding-left: 4px;
178 padding-right: 0px;
179 }
180
181 .wp-optimize-settings-optimization-checkbox input {
182 margin: 0px;
183 padding: 0px;
184 }
185
186 #retention-period, #revisions-count {
187 width: 60px;
188 }
189
190 .wp-optimize-settings-optimization-info {
191 font-size: 80%;
192 font-style: italic;
193 }
194
195 .wp-optimize-settings input[type="checkbox"] {
196 /* width: 18px; */
197 }
198
199 /* Added for the Image on Addons tab*/
200
201 img.addons {
202 display: block;
203 margin-left: auto;
204 margin-right: auto;
205 margin-bottom: 20px;
206 max-height: 44px;
207 height: auto;
208 max-width: 100%;
209 }
210
211 .wpo_spinner {
212 width: 18px;
213 height: 18px;
214 padding-left: 10px;
215 display: none;
216 position: relative;
217 top: 4px;
218 }
219
220 .optimization_spinner {
221 width: 20px;
222 height: 20px;
223 }
224
225 #wp-optimize-auto-options {
226 margin: 20px 0 0 28px;
227 }
228
229 .display-none {
230 display: none;
231 }
232
233 .visibility-hidden {
234 visibility: hidden;
235 }
236
237 .margin-one-percent {
238 margin: 1%;
239 }
240
241 #save_done, .save-done {
242 color: #D94F00;
243 font-size: 220% !important;
244 }
245
246 .wp-optimize-settings-optimization-info a {
247 text-decoration: underline;
248 }
249
250 .wp-optimize-settings-optimization-run-spinner {
251 position: relative;
252 top: 2px;
253 }
254
255 @media screen and (min-width: 782px) {
256
257 td.wp-optimize-settings-optimization-run {
258 width: 180px;
259 padding-top: 16px;
260 }
261
262 }
263
264 #wpoptimize_table_list .tablesorter-filter-row {
265 display: none !important;
266 }
267
268 #wpoptimize_table_list .optimization_spinner {
269 position: relative;
270 top: 2px;
271 left: 5px;
272 }
273
274 #wpoptimize_table_list .optimization_spinner.visibility-hidden {
275 display: none;
276 }
277
278 #wpoptimize_table_list_filter {
279 width: 100%;
280 margin-bottom: 15px;
281 }
282
283 #wpoptimize_table_list_tables_not_found {
284 display: none;
285 margin: 20px 0;
286 }
287
288 div#wpoptimize_table_list_tables_not_found + h3 {
289 margin-top: 30px;
290 }
291
292 /* Hide First column */
293
294 #wpoptimize_table_list tr th:first-child,
295 #wpoptimize_table_list tr td:first-child {
296 display: none;
297 }
298
299 #wpoptimize_table_list tr td.no-table {
300 display: table-cell !important;
301 background: #FB8787;
302 font-weight: bold;
303 }
304
305 #optimize_form .select2-container,
306 #wp-optimize-auto-options .select2-container {
307 width: 50% !important;
308 top: -5px;
309 height: 40px;
310 margin-left: 10px;
311 }
312
313 #wpoptimize_table_list .optimization_done_icon {
314 color: #009B24;
315 font-size: 200%;
316 display: inline-block;
317 position: relative;
318 }
319
320 #wpo_sitelist_show_moreoptions_cron {
321 font-size: 13px;
322 line-height: 1.5;
323 letter-spacing: 1px;
324 }
325
326 #wp-optimize-nav-tab-contents-images .wpo_span_2_of_3 h3 {
327 display: inline-block;
328 }
329
330 .wpo_remove_selected_sizes_btn__container {
331 margin-top: 20px;
332 }
333
334 .unused-image-sizes__label {
335 display: block;
336 line-height: 1.6;
337 }
338
339 @media (max-width: 782px) {
340
341 .unused-image-sizes__label {
342 margin-left: 30px;
343 margin-bottom: 15px;
344 line-height: 1;
345 word-break: break-word;
346 }
347
348 .unused-image-sizes__label input[type=checkbox] {
349 margin-left: -30px;
350 }
351
352 body.rtl .unused-image-sizes__label {
353 margin-right: 30px;
354 margin-left: 0;
355 }
356
357 body.rtl .unused-image-sizes__label input[type=checkbox] {
358 margin-left: 4px;
359 margin-right: -30px;
360 }
361
362 }
363
364 #wp-optimize-nav-tab-contents-tables a {
365 vertical-align: middle;
366 }
367
368 #wpo_sitelist_moreoptions,
369 #wpo_sitelist_moreoptions_cron {
370 margin: 4px 16px 6px 0;
371 border: 1px dotted;
372 padding: 6px 10px;
373 max-height: 300px;
374 overflow-y: scroll;
375 overflow-x: hidden;
376 }
377
378 #wpo_sitelist_moreoptions {
379 max-height: 150px;
380 margin-right: 0;
381 }
382
383 #wpo_settings_sites_list li,
384 #wpo_settings_sites_list li a {
385 font-size: 13px;
386 line-height: 1.5;
387 }
388
389 #wpo_sitelist_moreoptions_cron li {
390 padding-left: 20px;
391 }
392
393 #wpo_import_error_message {
394 display: none;
395 color: #9B0000;
396 }
397
398 #wpo_import_success_message {
399 display: none;
400 color: #46B450;
401 }
402
403 #wp-optimize-logging-options {
404 margin-top: 10px;
405 }
406
407 /* Logger settings*/
408
409 .wpo_logging_header {
410 font-weight: bold;
411 border-top: 1px solid #333;
412 border-bottom: 1px solid #333;
413 padding: 5px 0;
414 margin: 0;
415 }
416
417 .wpo_logging_row {
418 border-bottom: 1px solid #A1A2A3;
419 padding: 5px 0;
420 }
421
422 .wpo_logging_logger_title,
423 .wpo_logging_options_title,
424 .wpo_logging_status_title,
425 .wpo_logging_actions_title,
426 .wpo_logging_logger_row,
427 .wpo_logging_options_row,
428 .wpo_logging_status_row,
429 .wpo_logging_actions_row {
430 display: inline-block;
431 vertical-align: middle;
432 }
433
434 .wpo_logging_logger_title,
435 .wpo_logging_logger_row {
436 width: 38%;
437 }
438
439 .wpo_logging_options_title,
440 .wpo_logging_options_row {
441 width: 44%;
442 }
443
444 .wpo_logging_status_title,
445 .wpo_logging_status_row {
446 width: 8%;
447 }
448
449 .wpo_logging_actions_title,
450 .wpo_logging_actions_row {
451 width: 7%;
452 }
453
454 .wpo_logging_actions_row {
455 text-align: right;
456 }
457
458 .wpo_logging_options_row {
459 word-wrap: break-word;
460 }
461
462 .wpo_logging_actions_row .dashicons-no-alt,
463 .wpo_add_logger_form .dashicons-no-alt {
464 background-color: #F06666;
465 color: #FFF;
466 width: 20px;
467 height: 20px;
468 border-radius: 20px;
469 display: inline-block;
470 cursor: pointer;
471 margin-left: 5px;
472 }
473
474 .wpo_add_logger_form .dashicons-no-alt {
475 margin-top: 12px;
476 margin-right: 10px;
477 float: right;
478 }
479
480 .wpo_logger_type {
481 width: 90%;
482 margin-top: 10px;
483 }
484
485 .wpo_logger_addition_option {
486 width: 100%;
487 margin-top: 5px;
488 }
489
490 .wpo_alert_notice {
491 background-color: #F06666;
492 color: #FFF;
493 padding: 1em;
494 display: block;
495 margin-bottom: 10px;
496 border-radius: 5px;
497 }
498
499 .wpo_error_field {
500 border-color: #F06666 !important;
501 }
502
503 .save_settings_reminder {
504 display: none;
505 color: #333;
506 padding: 15px 20px;
507 background-color: #F0A5A4;
508 border-radius: 3px;
509 margin: 15px 0;
510 }
511
512 #wpo_remove_selected_sizes {
513 margin-top: 20px;
514 }
515
516 .wpo_unused_images_buttons_wrap {
517 float: right;
518 margin-right: 20px;
519 }
520
521 .wpo_unused_images_container h3 {
522 min-width: 150px;
523 }
524
525 #wpo_unused_images, #wpo_smush_images_grid {
526 max-height: 500px;
527 overflow-y: auto;
528 }
529
530 #wpo_unused_images a {
531 outline: none;
532 }
533
534 #wp-optimize-nav-tab-wpo_database-tables-contents .wpo-take-a-backup {
535 margin-left: 1%;
536 }
537
538 .run-single-table-delete {
539 margin-top: 3px;
540 }
541
542 .wpo-confirm h4 span.table-name {
543 font-style: italic;
544 display: inline-block;
545 background: #EFEFEF;
546 padding: 3px 7px;
547 border-radius: 4px;
548 }
549
550 #wpo_browser_cache_output,
551 #wpo_gzip_compression_output,
552 #wpo_advanced_cache_output {
553 background: #F0F0F0;
554 padding: 10px;
555 border: 1px solid #CCC;
556 white-space: pre-wrap;
557 }
558
559 #wpo_gzip_compression_error_message,
560 .wpo-error {
561 color: #9B0000;
562 }
563
564 .notice.wpo-error__enabling-cache {
565 white-space: pre-wrap;
566 margin-bottom: 15px;
567 }
568
569 .notice.wpo-warnings__enabling-cache {
570 margin-bottom: 15px;
571 }
572
573 .notice.wpo-warnings__enabling-cache ul, .notice.wpo-warnings__enabling-cache ul li {
574 list-style: inside disc;
575 }
576
577 a.loading.wpo-refresh-gzip-status {
578 color: rgba(68, 68, 68, 0.5);
579 text-decoration: none;
580 }
581
582 a.loading.wpo-refresh-gzip-status img.wpo_spinner.display-none {
583 display: inline-block;
584 }
585
586 #wpo_browser_cache_expire_days,
587 #wpo_browser_cache_expire_hours {
588 width: 50px;
589 }
590
591 .wpo-enabled .wpo-disabled {
592 display: none;
593 }
594
595 .wpo-disabled .wpo-enabled {
596 display: none;
597 }
598
599 .wpo-button-wrap {
600 margin-top: 10px;
601 }
602
603 body[class*="toplevel_page_WP-Optimize"] #wpbody,
604 body[class*="wp-optimize_page_"] #wpbody {
605 padding-right: 15px;
606 }
607
608 @media screen and (max-width: 768px) {
609
610 body[class*="toplevel_page_WP-Optimize"] #wpbody,
611 body[class*="wp-optimize_page_"] #wpbody {
612 padding-right: 0;
613 }
614 }
615
616 body.toplevel_page_WP-Optimize.rtl #wpbody {
617 padding-left: 15px;
618 padding-right: 0;
619 }
620
621 @media screen and (max-width: 768px) {
622
623 body.toplevel_page_WP-Optimize.rtl #wpbody {
624 padding-left: 10px;
625 }
626 }
627
628 body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
629 body[class*="wp-optimize_page_"] #wpbody-content {
630 padding-top: 80px;
631 }
632
633 @media (max-width: 600px) {
634
635 body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
636 body[class*="wp-optimize_page_"] #wpbody-content {
637 padding-top: 0;
638 }
639 }
640
641 @media (min-width: 820px) {
642
643 body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
644 body[class*="wp-optimize_page_"] #wpbody-content {
645 padding-top: 100px;
646 }
647 }
648
649 #wp-optimize-wrap {
650 position: relative;
651 padding-top: 20px;
652 }
653
654 @media (max-width: 600px) {
655
656 #wp-optimize-wrap {
657 padding-top: 110px;
658 }
659 }
660
661 @media (max-width: 782px) {
662
663 #wp-optimize-wrap {
664 margin-right: 0;
665 }
666 }
667
668 /* DASHBOARD */
669
670 .wpo-main-header {
671
672 height: 77px;
673 position: fixed;
674 top: 32px;
675 left: 160px;
676 background: #FFF;
677 right: 0;
678 z-index: 9980;
679
680 }
681
682 @media (min-width: 820px) {
683
684 .wpo-main-header {
685 height: 105px;
686 }
687 }
688
689 .wpo-main-header .wpo-logo__container {
690 display: -ms-flexbox;
691 display: flex;
692 -ms-flex-direction: column;
693 flex-direction: column;
694 -ms-flex-pack: center;
695 justify-content: center;
696 position: relative;
697 height: 100%;
698 line-height: 1;
699 font-size: 1rem;
700 padding-left: 50px;
701 margin-left: 10px;
702 }
703
704 .wpo-main-header .wpo-logo {
705 position: absolute;
706 left: 0;
707 top: 50%;
708 transform: translateY(-50%);
709 width: 50px;
710 }
711
712 .wpo-main-header .wpo-subheader {
713 margin: 0;
714 font-weight: 300;
715 color: #72777C;
716 line-height: 1.3;
717 }
718
719 @media (max-width: 1080px) {
720
721 .wpo-main-header .wpo-subheader {
722 display: none;
723 }
724 }
725
726 .wpo-main-header p.wpo-header-links {
727 margin: 0;
728 font-size: 0.7rem;
729 position: absolute;
730 right: 0;
731 padding: 6px 15px;
732 background: #EDEEEF;
733 border-bottom-left-radius: 5px;
734 z-index: 1;
735 }
736
737 .wpo-main-header p.wpo-header-links a {
738 text-decoration: none;
739 }
740
741 .wpo-main-header p.wpo-header-links .wpo-header-links__label {
742 color: #82868B;
743 position: absolute;
744 right: 100%;
745 width: 110px;
746 text-align: right;
747 padding-right: 10px;
748 }
749
750 @media (max-width: 820px) {
751
752 .wpo-main-header p.wpo-header-links {
753 display: none;
754 }
755 }
756
757 .wpo-main-header p.wpo-header-links__mobile {
758 padding: 10px;
759 background: #EDEEEF;
760 margin-bottom: 0;
761 }
762
763 @media (min-width: 820px) {
764
765 .wpo-main-header p.wpo-header-links__mobile {
766 display: none;
767 }
768 }
769
770 .wpo-main-header p.wpo-header-links__mobile a {
771 display: inline-block;
772 padding: 4px;
773 font-size: .8rem;
774 }
775
776 .wpo-main-header p.wpo-header-links__mobile .wpo-header-links__label {
777 color: #82868B;
778 }
779
780 @media (max-width: 600px) {
781
782 .wpo-main-header .wpo-logo__container strong {
783 width: 140px;
784 display: inline-block;
785 }
786 }
787
788 @media (max-width: 960px) {
789
790 body.auto-fold .wpo-main-header {
791 left: 36px;
792 }
793 }
794
795 @media (max-width: 782px) {
796
797 body.auto-fold .wpo-main-header {
798 left: 0;
799 top: -70px;
800 position: absolute;
801 }
802 }
803
804 @media (max-width: 600px) {
805
806 body.auto-fold .wpo-main-header {
807 position: absolute;
808 left: -10px;
809 right: -10px;
810 top: 10px;
811 }
812 }
813
814 @media (max-width: 600px) {
815
816 body.auto-fold #screen-meta + #wp-optimize-wrap .wpo-main-header {
817 top: 0;
818 }
819 }
820
821 @media (min-width: 782px) {
822
823 body.folded .wpo-main-header {
824 left: 36px;
825 }
826 }
827
828 body.is-scrolled .wpo-main-header {
829 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
830 }
831
832 /* RTL */
833
834 body.rtl .wpo-main-header {
835 right: 160px;
836 left: 0;
837 }
838
839 body.rtl .wpo-main-header .wpo-logo__container {
840 padding-left: 10px;
841 padding-right: 50px;
842 margin-left: 0;
843 margin-right: 10px;
844 }
845
846 body.rtl .wpo-main-header .wpo-logo {
847 position: absolute;
848 left: auto;
849 right: 0;
850 }
851
852 body.rtl .wpo-main-header p.wpo-header-links {
853 right: auto;
854 left: 0;
855 border-bottom-right-radius: 5px;
856 border-bottom-left-radius: 0;
857 }
858
859 body.rtl .wpo-main-header p.wpo-header-links .wpo-header-links__label {
860 position: absolute;
861 left: 100%;
862 right: auto;
863 width: 110px;
864 text-align: left;
865 padding-left: 10px;
866 }
867
868 @media (max-width: 960px) {
869
870 body.rtl.auto-fold .wpo-main-header {
871 right: 36px;
872 }
873 }
874
875 @media (max-width: 782px) {
876
877 body.rtl.auto-fold .wpo-main-header {
878 right: 0;
879 top: 46px;
880 }
881 }
882
883 @media (max-width: 600px) {
884
885 body.rtl.auto-fold .wpo-main-header {
886 position: absolute;
887 left: -10px;
888 right: -10px;
889 top: 10px;
890 }
891 }
892
893 @media (min-width: 782px) {
894
895 body.rtl.folded .wpo-main-header {
896 right: 36px;
897 left: 0;
898 }
899 }
900
901 body.rtl .wpo-page {
902 padding-right: 0;
903 }
904
905 @media (min-width: 769px) {
906
907 .wpo-page {}
908 }
909
910 .wpo-page:not(.active) {
911 display: none;
912 }
913
914 .wpo-introduction-notice {
915 padding: 15px 20px;
916 margin-top: 30px;
917 margin-bottom: 30px;
918 background: #FFF url('../images/notices/logo-bg-notice.png') no-repeat 100% 100%;
919 }
920
921 .wpo-introduction-notice h3 {
922 font-size: 2em;
923 }
924
925 .wpo-introduction-notice p:not(.font-size__normal) {
926 font-size: 1.2em;
927 }
928
929 .wpo-introduction-notice .wpo-introduction-notice__footer-links {
930 padding-top: 20px;
931 }
932
933 .wpo-introduction-notice .wpo-introduction-notice__footer-links > a, .wpo-introduction-notice .wpo-introduction-notice__footer-links > span {
934 display: inline-block;
935 margin-left: 5px;
936 margin-right: 5px;
937 }
938
939 /* Columns */
940
941 @media (min-width: 1200px) {
942
943 .wpo-tab-postbox.right-col {
944 width: 350px;
945 float: right;
946 box-sizing: border-box;
947 margin-top: 3.1rem;
948 }
949
950 .right-col + .wpo-main {
951 float: left;
952 box-sizing: border-box;
953 width: calc(100% - 380px);
954 }
955
956 }
957
958 @keyframes rotate {
959
960 0% {
961 transform: rotate(0);
962 }
963
964 100% {
965 transform: rotate(360deg);
966 }
967
968 }
969
970 /* Common BLOCKS */
971
972 /* Buttons */
973
974 @media (max-width: 782px) {
975
976 #wp-optimize-wrap .button-large {
977 display: block;
978 width: 100%;
979 }
980 }
981
982 #wp-optimize-wrap .red {
983 color: #E07575;
984 }
985
986 #wp-optimize-wrap div[id*="_notice"] div.updated,
987 #wp-optimize-wrap > .notice {
988 margin-left: 0;
989 margin-right: 0;
990 }
991
992 #wp-optimize-wrap textarea {
993 width: 100%;
994 border-radius: 5px;
995 height: 100px;
996 min-height: 100px;
997 margin-top: 10px;
998 margin-bottom: 10px;
999 }
1000
1001 .notice.notice-error.wpo-warning,
1002 .notice.notice-warning.wpo-warning {
1003 margin-bottom: 18px;
1004 }
1005
1006 .notice.notice-warning.wpo-warning p {
1007 padding-left: 36px;
1008 position: relative;
1009 }
1010
1011 .notice.notice-warning.wpo-warning p > .dashicons {
1012 position: absolute;
1013 left: 0;
1014 font-size: 26px;
1015 top: 50%;
1016 transform: translateY(-50%);
1017 height: 26px;
1018 color: #FFB900;
1019 }
1020
1021 .button.button-block {
1022 display: block;
1023 width: 100%;
1024 text-align: center;
1025 }
1026
1027 .wpo-refresh-button {
1028 float: right;
1029 }
1030
1031 .wpo-refresh-button:hover {
1032 cursor: pointer;
1033 }
1034
1035 .wpo-refresh-button .dashicons {
1036 text-decoration: none;
1037 line-height: inherit;
1038 font-size: inherit;
1039 }
1040
1041 /* Helper classes */
1042
1043 *[class*="wpo-badge"] {
1044 display: inline-block;
1045 font-size: .8em;
1046 text-transform: uppercase;
1047 background: #F2F4F5;
1048 padding: 3px 5px;
1049 line-height: 1;
1050 border-radius: 3px;
1051 }
1052
1053 .wpo-badge__new {
1054 background: #DBE3E6;
1055 color: #00689a;
1056 }
1057
1058 .wpo-first-child {
1059 margin-top: 0;
1060 }
1061
1062 #save_done, .save-done {
1063 color: #009B24;
1064 font-size: 250%;
1065 }
1066
1067 p.wpo-take-a-backup {
1068 display: inline-block;
1069 margin: 0;
1070 line-height: 1;
1071 padding-top: 8px;
1072 }
1073
1074 @media (min-width: 782px) {
1075 .button ~ p.wpo-take-a-backup {
1076 margin-left: 20px;
1077 }
1078 }
1079
1080 /* Postbox */
1081
1082 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
1083 border: none;
1084
1085 }
1086
1087 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox > h3:first-child {
1088 margin-top: 0;
1089 }
1090
1091 .wpo-p25,
1092 .postbox.wpo-tab-postbox {
1093 padding: 25px;
1094 }
1095
1096 .wpo-tab-postbox > h3:first-child {
1097 margin-top: 0;
1098 }
1099
1100 /* Field group */
1101
1102 .wpo-fieldgroup {
1103 background: #F2F4F5;
1104 border-radius: 8px;
1105 padding: 20px
1106
1107 }
1108
1109 .wpo-fieldgroup:not(:last-child) {
1110 margin-bottom: 2em;
1111 }
1112
1113 .wpo-fieldgroup > *:first-child {
1114 margin-top: 0;
1115 }
1116
1117 .wpo-fieldgroup > *:last-child {
1118 margin-bottom: 0;
1119 }
1120
1121 .wpo-fieldgroup.premium-only {
1122 position: relative;
1123 }
1124
1125 .wpo-fieldgroup .switch + label {
1126 font-weight: 600;
1127 }
1128
1129 .wpo-fieldgroup code, .wpo-fieldgroup pre.code {
1130 font-size: inherit;
1131 background: #d8dbdc;
1132 border-radius: 3px;
1133 }
1134
1135 .wpo-fieldgroup pre.code {
1136 padding: 10px;
1137 }
1138
1139 .wpo-fieldgroup fieldset label {
1140 display: block;
1141 margin-bottom: 6px;
1142 line-height: 20px;
1143 }
1144
1145 .wpo-fieldgroup__subgroup:not(:last-of-type) {
1146 margin-bottom: 20px;
1147 }
1148
1149 /* The switches */
1150
1151 #wp-optimize-wrap .switch {
1152 position: relative;
1153 display: inline-block;
1154 width: 38px;
1155 height: 18px;
1156 margin-right: 6px;
1157 box-sizing: border-box;
1158
1159 }
1160
1161 /* Hide default HTML checkbox */
1162
1163 #wp-optimize-wrap .switch input {
1164 opacity: 0;
1165 width: 0;
1166 height: 0;
1167 }
1168
1169 /* The slider */
1170
1171 #wp-optimize-wrap .switch .slider {
1172 position: absolute;
1173 cursor: pointer;
1174 top: 0;
1175 left: 0;
1176 right: 0;
1177 bottom: 0;
1178 background-color: #F2F4F5;
1179 transition: .2s
1180
1181 }
1182
1183 #wp-optimize-wrap .switch .slider::before {
1184 position: absolute;
1185 content: "";
1186 height: 8px;
1187 width: 8px;
1188 left: 2px;
1189 bottom: 2px;
1190 background-color: #555d66;
1191 border: 1px solid #555d66;
1192 transition: all .2s;
1193 }
1194
1195 #wp-optimize-wrap .switch .slider::after {
1196 content: '';
1197 display: block;
1198 position: absolute;
1199 height: 4px;
1200 width: 3px;
1201 right: 4px;
1202 top: 4px;
1203 border-radius: 50%;
1204 border: 1px solid #72777C;
1205 box-sizing: content-box;
1206 }
1207
1208 #wp-optimize-wrap .switch .slider {/* Rounded sliders */
1209 }
1210
1211 #wp-optimize-wrap .switch .slider.round {
1212 border-radius: 23px;
1213 border: 2px solid #555d66;
1214 }
1215
1216 #wp-optimize-wrap .switch .slider.round::before {
1217 border-radius: 50%;
1218 }
1219
1220 #wp-optimize-wrap .switch input:checked + .slider {
1221 background: #0272AA;
1222 border-color: #0272AA
1223
1224 }
1225
1226 #wp-optimize-wrap .switch input:checked + .slider::before {
1227 background: #FFF;
1228 border-color: #FFF;
1229 transform: translateX(20px);
1230 }
1231
1232 #wp-optimize-wrap .switch input:checked + .slider::after {
1233 content: '';
1234 display: block;
1235 position: absolute;
1236 height: 6px;
1237 width: 2px;
1238 left: 7px;
1239 top: 4px;
1240 background: #FFF;
1241 border: none;
1242 }
1243
1244 #wp-optimize-wrap .switch input:disabled + .slider,
1245 #wp-optimize-wrap .switch input:disabled:checked + .slider {
1246 background: transparentize(#555d66, 0.5);
1247 border-color: #555d66;
1248 opacity: 0.3;
1249 }
1250
1251 #wp-optimize-wrap .switch input:focus + .slider {
1252 box-shadow: 0 0 0 2px #F2F4F5, 0 0 0 3px #555d66;
1253 }
1254
1255 #wp-optimize-wrap .switch-container {
1256 display: block;
1257 clear: both;
1258 }
1259
1260 #wp-optimize-wrap .switch-container label {
1261 line-height: 1;
1262 vertical-align: middle;
1263 }
1264
1265 #wp-optimize-wrap .switch-container + small {
1266 margin-left: 49px;
1267 }
1268
1269 #wp-optimize-wrap .switch-container [data-tooltip] .dashicons {
1270 transform: translateY(-3px);
1271 }
1272
1273 #wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
1274 padding-top: 0;
1275 }
1276
1277 label.wpo-label__bold {
1278 font-weight: 600;
1279 }
1280
1281 /* Help popup */
1282
1283 .wpo-info {
1284 position: relative;
1285 display: inline-block;
1286 }
1287
1288 @media (max-width:480px) {
1289
1290 .wpo-info {
1291 display: block;
1292 }
1293 }
1294
1295 .wpo-info__content {
1296 opacity: 0;
1297 visibility: hidden;
1298 position: absolute;
1299 top: 100%;
1300 left: -25px;
1301 background: #FFF;
1302 padding: 20px;
1303 width: 380px;
1304 max-width: 380px;
1305 z-index: 5;
1306 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0), 0px 11px 25px 3000px rgba(0, 0, 0, 0);
1307 transition: 0.2s all;
1308 }
1309
1310 @media (max-width:480px) {
1311
1312 .wpo-info__content {
1313 width: auto;
1314 }
1315 }
1316
1317 span.wpo-info__close {
1318 display: none;
1319 margin-left: 20px;
1320 color: #444;
1321 }
1322
1323 .wpo-info.opened span.wpo-info__close {
1324 display: inline-block;
1325 }
1326
1327 .wpo-info.opened .wpo-info__content {
1328 opacity: 1;
1329 visibility: visible;
1330 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.3), 0px 11px 25px 3000px rgba(0, 0, 0, 0.3);
1331 }
1332
1333 .wpo-info.opened a.wpo-info__trigger {
1334 z-index: 6;
1335 }
1336
1337 .wpo-info__content img,
1338 .wpo-info__content iframe {
1339 max-width: 100%;
1340 }
1341
1342 a.wpo-info__trigger {
1343 display: inline-block;
1344 text-decoration: none;
1345 padding: 10px;
1346 position: relative;
1347 background: #FFF;
1348 margin-left: -10px;
1349 }
1350
1351 a.wpo-info__trigger span.dashicons {
1352 text-decoration: none;
1353 vertical-align: middle;
1354 }
1355
1356 .wpo_section.wpo_group.wpo-feature-is-disabled .wpo-fieldgroup:not(.wpo-show) {
1357 opacity: 0.5;
1358 }
1359
1360 /* Custom Block UI */
1361
1362 .wpo_shade {
1363 display: block;
1364 position: absolute;
1365 left: 0;
1366 right: 0;
1367 top: 0;
1368 bottom: 0;
1369 width: 100%;
1370 height: 100%;
1371 z-index: 9979;
1372 opacity: 1;
1373 background-color: rgba(255, 255, 255, 0.88);
1374 }
1375
1376 .wpo_shade.hidden {
1377 display: none;
1378 }
1379
1380 .wpo_shade_inner {
1381 text-align: center;
1382 padding-top: 80px;
1383 }
1384
1385 .wpo_shade_inner h4 {
1386 font-size: 2em;
1387 }
1388
1389 .wpo_shade_inner .dashicons.dashicons-update-alt {
1390 font-size: 50px;
1391 height: 50px;
1392 width: 50px;
1393 }
1394
1395 .wpo-rotate {
1396 animation: rotate 1s linear infinite;
1397 transform-origin: 50% 50%;
1398 }
1399
1400 .wpo-info.highlight-dashicons span.dashicons {
1401 color: green;
1402 font-weight: bold;
1403 }
1404
1405 /* TABS */
1406
1407 #wp-optimize-wrap h2.nav-tab-wrapper {
1408 margin-bottom: 0;
1409 border-bottom: none;
1410 position: relative;
1411 }
1412
1413 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab,
1414 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover,
1415 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus,
1416 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active {
1417 border: none;
1418 background: transparent;
1419 margin: 0;
1420 border-top: 3px solid transparent;
1421 padding: 7px 15px;
1422 color: #0272AA;
1423 }
1424
1425 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active .dashicons {
1426 display: block;
1427 margin: 0 auto;
1428 color: #72777C;
1429 font-size: 30px;
1430 width: 30px;
1431 height: 30px;
1432 }
1433
1434 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill {
1435 display: inline-block;
1436 margin-left: 6px;
1437 padding: 4px;
1438 font-size: 10px;
1439 line-height: 1;
1440 border-radius: 3px;
1441 font-weight: 300;
1442 text-transform: uppercase;
1443 letter-spacing: .06em
1444 }
1445
1446 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
1447 background: #0272AA;
1448 color: #FFF;
1449 }
1450
1451 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.disabled {
1452 background: #777;
1453 color: #FFF;
1454 }
1455
1456 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.hidden {
1457 display: none;
1458 }
1459
1460 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active,
1461 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover,
1462 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
1463 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
1464 background: #FFF;
1465 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
1466 border-top-color: #0272AA;
1467 }
1468
1469 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
1470 color: #0272AA;
1471 }
1472
1473 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1474 display: block;
1475 float: right;
1476 position: relative;
1477 }
1478
1479 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab,
1480 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover,
1481 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus,
1482 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active {
1483 position: relative;
1484 }
1485
1486 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active .dashicons {
1487 display: inline-block;
1488 font-size: 20px;
1489 height: 18px;
1490 transform: translateY(4px);
1491 }
1492
1493 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > div {
1494 display: none;
1495 }
1496
1497 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover a.nav-tab::after {
1498 content: '';
1499 display: block;
1500 position: absolute;
1501 bottom: 0;
1502 right: 0;
1503 height: 2px;
1504 width: 100%;
1505 background-color: #0172aa;
1506 }
1507
1508 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div {
1509 position: absolute;
1510 display: block;
1511 background: #FFF;
1512 padding: 15px;
1513 right: 0;
1514 top: 100%;
1515 z-index: 4;
1516 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
1517 width: 350px;
1518 }
1519
1520 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div a {
1521 display: block;
1522 font-size: 14px;
1523 font-weight: normal;
1524 padding: 6px 3px;
1525 text-align: center;
1526 }
1527
1528 @media (max-width: 782px) {
1529
1530 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1531 display: none;
1532 }
1533
1534 #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
1535 display: none;
1536 }
1537 }
1538
1539 #wp-optimize-wrap h2.nav-tab-wrapper a[role="toggle-menu"] {
1540 display: block;
1541 float: right;
1542 }
1543
1544 @media (min-width: 782px) {
1545
1546 #wp-optimize-wrap h2.nav-tab-wrapper a[role="toggle-menu"] {
1547 display: none;
1548 }
1549 }
1550
1551 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
1552 text-align: right;
1553 }
1554
1555 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
1556 color: #B5B9BE;
1557 font-size: 18px;
1558 display: inline-block;
1559 height: auto;
1560 line-height: inherit;
1561 width: 20px;
1562 }
1563
1564 @media (min-width: 782px) {
1565
1566 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
1567 position: absolute;
1568 bottom: 14px;
1569 right: 0;
1570 font-size: 12px;
1571 font-weight: 400;
1572 text-decoration: none;
1573 padding: 0;
1574 }
1575
1576 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
1577 color: #B5B9BE;
1578 font-size: 18px;
1579 display: inline-block;
1580 height: auto;
1581 line-height: inherit;
1582 width: 20px;
1583 }
1584 }
1585
1586 @media (max-width: 782px) {
1587
1588 .wpo-mobile-menu-opened .wpo-main .wpo-tab-postbox {
1589 // display: none;
1590 }
1591
1592 .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
1593 display: block;
1594 float: none
1595 }
1596
1597 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab {
1598 display: block !important;
1599 }
1600
1601 .wpo-mobile-menu-opened h2.nav-tab-wrapper a:not(.nav-tab-active) {
1602 background: #f9f9f9 !important;
1603 }
1604
1605 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active,
1606 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus {
1607 border-top: none;
1608 border-left: 3px solid;
1609 }
1610
1611 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:hover .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a .dashicons {
1612 display: inline-block;
1613 line-height: inherit;
1614 }
1615
1616 .wpo-mobile-menu-opened h2.nav-tab-wrapper a[role="toggle-menu"] {
1617 display: none;
1618 }
1619
1620 }
1621
1622 /* Pages MENU */
1623
1624 .wpo-pages-menu {
1625 position: absolute;
1626 bottom: 0;
1627 right: 0;
1628 display: none;
1629 }
1630
1631 @media (max-width: 820px) {
1632
1633 .opened + .wpo-pages-menu {
1634 display: block;
1635 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
1636 }
1637 }
1638
1639 @media (min-width: 821px) {
1640
1641 .wpo-pages-menu {
1642 display: -ms-flexbox;
1643 display: flex;
1644 height: 77px;
1645 }
1646 }
1647
1648 .wpo-pages-menu > a {
1649 text-decoration: none;
1650 position: relative;
1651 color: inherit;
1652 text-align: center;
1653 box-sizing: border-box;
1654 display: block;
1655 color: #555d66;
1656 }
1657
1658 @media (min-width: 821px) {
1659
1660 .wpo-pages-menu > a {
1661 padding: 0 8px;
1662 height: 77px;
1663 display: -ms-flexbox;
1664 display: flex;
1665 -ms-flex-direction: column;
1666 flex-direction: column;
1667 -ms-flex-pack: center;
1668 justify-content: center;
1669 }
1670
1671 .wpo-pages-menu > a > span {
1672 display: block;
1673 margin: 0 auto;
1674 }
1675 }
1676
1677 @media (max-width: 820px) {
1678
1679 .wpo-pages-menu > a {
1680 padding: 15px;
1681 font-size: 1.2em;
1682 }
1683 }
1684
1685 .wpo-pages-menu > a.active::after {
1686 content: '';
1687 display: block;
1688 position: absolute;
1689 bottom: 0;
1690 left: 0;
1691 width: 100%;
1692 height: 3px;
1693 background: #E46B1F;
1694 color: #191e23;
1695 }
1696
1697 @media (max-width: 820px) {
1698
1699 .wpo-pages-menu > a.active::after {
1700 width: 3px;
1701 height: 100%;
1702 }
1703 }
1704
1705 @media (max-width: 820px) {
1706
1707 .wpo-pages-menu > a.active {
1708 color: #E46B1F;
1709 }
1710 }
1711
1712 .wpo-pages-menu > a:hover {
1713 background: #F9F9F9;
1714 color: #191e23;
1715 }
1716
1717 .wpo-pages-menu span.separator {
1718 display: block;
1719 width: 2px;
1720 background: #EFEFEF;
1721 margin-top: 18px;
1722 margin-bottom: 18px;
1723 margin-right: 5px;
1724 margin-left: 5px;
1725 }
1726
1727 @media (max-width: 820px) {
1728
1729 .wpo-pages-menu span.separator {
1730 width: 80%;
1731 height: 2px;
1732 margin: 10px 10%;
1733 }
1734 }
1735
1736 @media (max-width: 820px) {
1737
1738 .wpo-pages-menu {
1739 text-align: center;
1740 top: 100%;
1741 width: 100%;
1742 bottom: auto;
1743 background: #FFF;
1744 }
1745 }
1746
1747 body.rtl .wpo-pages-menu {
1748 left: 0;
1749 right: auto;
1750 }
1751
1752 #wp-optimize-nav-page-menu {
1753 position: absolute;
1754 right: 0;
1755 bottom: 0;
1756 display: -ms-flexbox;
1757 display: flex;
1758 height: 77px;
1759 -ms-flex-direction: column;
1760 flex-direction: column;
1761 padding: 0 20px;
1762 -ms-flex-align: center;
1763 align-items: center;
1764 -ms-flex-pack: center;
1765 justify-content: center;
1766 text-decoration: none
1767 }
1768
1769 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
1770 display: none;
1771 }
1772
1773 #wp-optimize-nav-page-menu.opened .dashicons-menu {
1774 display: none;
1775 }
1776
1777 @media (min-width: 821px) {
1778
1779 #wp-optimize-nav-page-menu {
1780 display: none;
1781 }
1782 }
1783
1784 body.rtl #wp-optimize-nav-page-menu {
1785 right: auto;
1786 left: 0;
1787 }
1788
1789 /* DASHBOARD Menu */
1790
1791 /* Calculate column width with a $spacing gutter */
1792
1793 .wpo-dashboard-pages-menu {
1794 display: -ms-flexbox;
1795 display: flex;
1796 -ms-flex-wrap: wrap;
1797 flex-wrap: wrap
1798
1799 /* Same size for 1 to 3 items */
1800
1801 }
1802
1803 .wpo-dashboard-pages-menu[data-itemscount="1"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="2"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="3"] .wpo-dashboard-pages-menu__item {
1804 width: calc(33.333% - 13.33333px);
1805 }
1806
1807 .wpo-dashboard-pages-menu {/* above 3 items, change sizes */
1808 }
1809
1810 .wpo-dashboard-pages-menu[data-itemscount="4"] .wpo-dashboard-pages-menu__item {
1811 width: calc(25% - 15px);
1812 }
1813
1814 .wpo-dashboard-pages-menu[data-itemscount="5"] .wpo-dashboard-pages-menu__item {
1815 width: calc(20% - 16px);
1816 }
1817
1818 .wpo-dashboard-pages-menu[data-itemscount="6"] .wpo-dashboard-pages-menu__item {
1819 width: calc(16.66667% - 16.66667px);
1820 }
1821
1822 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1823 padding: 20px;
1824 margin-right: 20px;
1825 box-sizing: border-box;
1826 padding-bottom: 60px;
1827 min-width: 0;
1828 }
1829
1830 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item:last-child {
1831 margin-right: 0;
1832 }
1833
1834 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1835 margin-top: 0;
1836 }
1837
1838 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 .dashicons {
1839 color: #72777C;
1840 line-height: 1;
1841 height: 18px;
1842 margin-top: -2px;
1843 margin-right: 10px
1844 }
1845
1846 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a {
1847 position: absolute;
1848 bottom: 20px;
1849 left: 20px;
1850 width: calc(100% - 40px) !important;
1851 }
1852
1853 @media (max-width: 782px) {
1854
1855 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1856 width: 100%;
1857 margin-right: 0;
1858 padding-bottom: 20px;
1859 }
1860
1861 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1862 width: auto !important;
1863 left: auto;
1864 bottom: auto;
1865 top: 50%;
1866 transform: translateY(-50%);
1867 right: 20px;
1868 }
1869
1870 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1871 margin: 0;
1872 }
1873
1874 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1875 display: none;
1876 }
1877 }
1878
1879 /* CSS for adverts */
1880
1881 .updraft-ad-container.updated,
1882 .updraft-ad-container {
1883 margin-left: 0px;
1884 margin-right: 0px;
1885 position: relative;
1886 padding-right: 80px;
1887 }
1888
1889 /* General notices (non WPO) on the WPO page */
1890
1891 body[class*=WP-Optimize] .notice, body[class*=WP-Optimize] .error, body[class*=wp-optimize] .notice, body[class*=wp-optimize] .error {
1892 margin-left: 0;
1893 margin-right: 0;
1894 }
1895
1896 /*
1897 Make the main error notice sticky
1898 */
1899
1900 body.wp-core-ui.is-scrolled .wpo-main-error-notice {
1901 position:fixed;
1902 top: 132px;
1903 left: 160px;
1904 right: 0;
1905 z-index: 20;
1906 transition: .2s all;
1907 }
1908
1909 /* Remove other notices */
1910
1911 div#wpbody-content > .notice:not(.wpo-notice),
1912 div#wpbody-content > .warning:not(.wpo-notice),
1913 div#wpbody-content > .updated:not(.wpo-notice),
1914 div#wpbody-content > .error:not(.wpo-notice) {
1915 display: none;
1916 }
1917
1918 .toplevel_page_WP-Optimize.rtl .notice,
1919 .toplevel_page_WP-Optimize.rtl div.updated,
1920 .toplevel_page_WP-Optimize.rtl div.error,
1921 .toplevel_page_WP-Optimize .notice,
1922 .toplevel_page_WP-Optimize div.updated,
1923 .toplevel_page_WP-Optimize div.error {
1924 margin-right: 0;
1925 }
1926
1927 body.rtl .updraft-ad-container.updated,
1928 body.rtl .updraft-ad-container {
1929 padding-right: 10px;
1930 padding-left: 80px;
1931 }
1932
1933 .updraft_notice_container {
1934 padding: 7px;
1935 display: -ms-flexbox;
1936 display: flex;
1937 -ms-flex-align: left;
1938 align-items: left;
1939 -ms-flex-direction: column;
1940 flex-direction: column;
1941 height: auto;
1942 overflow: hidden;
1943 }
1944
1945 .updraft_review_notice_container {
1946 padding: 12px;
1947 display: -ms-flexbox;
1948 display: flex;
1949 }
1950
1951 .updraft_advert_content_left {
1952 float: none;
1953 width: 65px;
1954 }
1955
1956 .updraft_advert_content_left_extra {
1957 float: none;
1958 width: 100px;
1959 padding-right: 15px;
1960 display: -ms-flexbox;
1961 display: flex;
1962 -ms-flex-align: center;
1963 align-items: center;
1964 }
1965
1966 .updraft_advert_content_right {
1967 float: none;
1968 width: auto;
1969 overflow: hidden;
1970 }
1971
1972 .updraft_advert_bottom {
1973 margin: 10px 0;
1974 padding: 10px;
1975 font-size: 140%;
1976 background-color: #FFF;
1977 border-color: #E6DB55;
1978 border: 1px solid;
1979 border-radius: 4px;
1980 }
1981
1982 .updraft_advert_button_container {
1983 margin-bottom: 10px;
1984 display: -ms-flexbox;
1985 display: flex;
1986 -ms-flex-align: center;
1987 align-items: center;
1988 }
1989
1990 .updraft_advert_button_container .dashicons {
1991 margin-left: 10px;
1992 }
1993
1994 .updraft-advert-dismiss {
1995 position: absolute;
1996 font-size: 13px;
1997 top: 5px;
1998 right: 10px;
1999 }
2000
2001 body.rtl .updraft-advert-dismiss {
2002 left: 10px;
2003 right: auto;
2004 }
2005
2006 h3.updraft_advert_heading {
2007 margin-top: 5px !important;
2008 margin-bottom: 5px !important;
2009 }
2010
2011 h4.updraft_advert_heading {
2012 margin-top: 2px !important;
2013 margin-bottom: 3px !important;
2014 }
2015
2016 .updraft_center_content {
2017 text-align: center;
2018 margin-bottom: 5px;
2019 }
2020
2021 .updraft_notice_link {
2022 padding-left: 5px;
2023 }
2024
2025 .updraft_text_center {
2026 text-align: center;
2027 }
2028
2029 .wpo-main-header + .updraft-ad-container,
2030 .wpo-main-header + .updated {
2031 margin-bottom: 20px;
2032 }
2033
2034 .processed .updated {
2035 margin: 0;
2036 }
2037
2038 @media screen and (min-width: 560px) {
2039
2040 .updraft_notice_container {
2041 -ms-flex-direction: row;
2042 flex-direction: row;
2043 -ms-flex-align: center;
2044 align-items: center;
2045 }
2046
2047 .updraft_advert_content_left, .updraft_advert_content_left_extra {
2048 float: left;
2049 }
2050
2051 }
2052
2053 @media screen and (max-width: 560px) {
2054
2055 body.rtl .updraft-ad-container.updated,
2056 body.rtl .updraft-ad-container {
2057 padding-right: 10px;
2058 padding-left: 10px;
2059 }
2060
2061 }
2062
2063 @media screen and (max-width: 768px) {
2064
2065 .wpo-main-header + .updraft-ad-container,
2066 .wpo-main-header + .updated {
2067 margin-right: 0;
2068 }
2069
2070 }
2071
2072 /* Unused images / wpo_smush_image / image grid*/
2073
2074 .wpo_unused_image, .wpo_smush_image {
2075 position: relative;
2076 margin: 4px;
2077 width: calc(50% - 8px);
2078 text-align: center;
2079
2080 }
2081
2082 @media (min-width: 500px) {
2083
2084 .wpo_unused_image, .wpo_smush_image {
2085 width: calc(25% - 8px);
2086 }
2087 }
2088
2089 @media (min-width: 782px) {
2090
2091 .wpo_unused_image, .wpo_smush_image {
2092 width: calc(16.6666% - 8px);
2093 }
2094 }
2095
2096 @media (min-width: 1100px) {
2097
2098 .wpo_unused_image, .wpo_smush_image {
2099 width: calc(12.5% - 8px);
2100 }
2101 }
2102
2103 .wpo_unused_image .wpo_unused_image__input, .wpo_smush_image .wpo_unused_image__input {
2104 position: absolute;
2105 top: 10px;
2106 opacity: 0;
2107 width: 0;
2108 height: 0;
2109 }
2110
2111 .wpo_unused_image label, .wpo_smush_image label {
2112 display: block;
2113 width: 100%;
2114 position: relative;
2115 padding: 1px;
2116 border: 3px solid #F2F4F5;
2117 box-sizing: border-box;
2118 }
2119
2120 .wpo_unused_image label::before, .wpo_smush_image label::before {
2121 content: "";
2122 display: block;
2123 padding-top: 100%;
2124 }
2125
2126 .wpo_unused_image label .thumbnail, .wpo_smush_image label .thumbnail {
2127 position: absolute;
2128 top: 1px;
2129 left: 1px;
2130 width: calc(100% - 2px);
2131 height: calc(100% - 2px);
2132 background-repeat: no-repeat;
2133 background-size: cover;
2134 background-position: 50% 50%;
2135 overflow: hidden;
2136 background: rgba(220, 220, 220, 0.2);
2137 }
2138
2139 .wpo_unused_image label .thumbnail img, .wpo_smush_image label .thumbnail img {
2140 display: block;
2141 margin: 0;
2142 max-height: 100%;
2143 position: absolute;
2144 top: 50%;
2145 left: 50%;
2146 transform: translate(-50%,-50%);
2147 -webkit-user-select: none;
2148 -ms-user-select: none;
2149 user-select: none;
2150 }
2151
2152 .wpo_unused_image label span.dashicons, .wpo_smush_image label span.dashicons {
2153 position: absolute;
2154 top: 50%;
2155 left: 50%;
2156 transform: translate(-50%, -50%);
2157 font-size: 25px;
2158 width: 25px;
2159 opacity: .2;
2160 }
2161
2162 .wpo_unused_image .wpo_unused_image__input:checked + label,
2163 .wpo_unused_image.selected label,
2164 .wpo_smush_image .wpo_unused_image__input:checked + label,
2165 .wpo_smush_image.selected label {
2166 border-color: #0272AA;
2167 }
2168
2169 .wpo_unused_image:focus-within label, .wpo_smush_image:focus-within label {
2170 box-shadow: 0 0 4px #0272AA;
2171 }
2172
2173 .wpo_unused_image a, .wpo_unused_image a.button, .wpo_unused_image a.button:active, .wpo_smush_image a, .wpo_smush_image a.button, .wpo_smush_image a.button:active {
2174 position: absolute;
2175 z-index: 2;
2176 bottom: 13px;
2177 left: 50%;
2178 transform: translateX(-50%);
2179 display: none;
2180 }
2181
2182 .wpo_unused_image:hover a, .wpo_unused_image:hover a.button, .wpo_unused_image:hover a.button:active, .wpo_smush_image:hover a, .wpo_smush_image:hover a.button, .wpo_smush_image:hover a.button:active {
2183 display: inline-block;
2184 }
2185
2186 #wpo_unused_images, #wpo_unused_images_trash, #wpo_smush_images_grid {
2187 width: calc(100% + 8px);
2188 margin-left: -4px;
2189 margin-right: -4px;
2190 max-height: 500px;
2191 overflow-y: auto;
2192 display: -ms-flexbox;
2193 display: flex;
2194 -ms-flex-wrap: wrap;
2195 flex-wrap: wrap;
2196 position: relative;
2197
2198 }
2199
2200 #wpo_unused_images .wpo-fieldgroup, #wpo_unused_images_trash .wpo-fieldgroup, #wpo_smush_images_grid .wpo-fieldgroup {
2201 width: 100%;
2202 margin: 4px;
2203 }
2204
2205 #wpo_unused_images a, #wpo_unused_images_trash a {
2206 outline: none;
2207 }
2208
2209 .wpo-unused-images__premium-mask,
2210 .wpo-unused-image-sizes__premium-mask {
2211 position: absolute;
2212 top: 0;
2213 left: 0;
2214 width: 100%;
2215 height: 100%;
2216 z-index: 1;
2217 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
2218 display: -ms-flexbox;
2219 display: flex;
2220 -ms-flex-align: center;
2221 align-items: center;
2222 -ms-flex-pack: center;
2223 justify-content: center;
2224 }
2225
2226 .wpo-unused-image-sizes__premium-mask {
2227 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2228 }
2229
2230 a.wpo-unused-images__premium-link {
2231 background: #FFF;
2232 display: inline-block;
2233 padding: 10px;
2234 border-radius: 3px;
2235 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2236 }
2237
2238 /* More Plugins page */
2239
2240 /* Plugins family / Premium */
2241
2242 p.wpo-plugin-installed {
2243 color: #009B24;
2244 }
2245
2246 /* Settings repeater */
2247
2248 .wpo-repeater__add {
2249 display: inline-block;
2250 cursor: pointer;
2251 font-weight: bold;
2252 text-decoration: none;
2253 }
2254
2255 .wpo-repeater__add .dashicons {
2256 transform: translateY(-2px);
2257 }
2258
2259 /* Plugin familly tab */
2260
2261 .wpo-plugin-family__premium h2 {
2262 margin: 0;
2263 padding: 25px;
2264 }
2265
2266 .wpo-plugin-family__plugins {
2267 display: -ms-flexbox;
2268 display: flex;
2269 -ms-flex-wrap: wrap;
2270 flex-wrap: wrap;
2271 padding-left: 1px;
2272 padding-bottom: 1px;
2273 }
2274
2275 .wpo-plugin-family__plugin {
2276 -ms-flex: auto;
2277 flex: auto;
2278 width: 100%;
2279 padding: 30px;
2280 box-sizing: border-box;
2281 border: 1px solid #E3E4E7;
2282 margin-left: -1px;
2283 margin-bottom: -1px;
2284
2285 }
2286
2287 @media (min-width: 782px) {
2288
2289 .wpo-plugin-family__plugin {
2290 width: 50%;
2291 }
2292
2293 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2294 width: 100%;
2295 }
2296 }
2297
2298 @media (max-width: 1080px) {
2299
2300 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2301 width: 50%;
2302 }
2303 }
2304
2305 @media (max-width: 782px) {
2306
2307 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2308 width: 100%;
2309 }
2310 }
2311
2312 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
2313 padding: 0;
2314 }
2315
2316 /* Added for WPO Premium Features tab */
2317
2318 .wpo_feature_cont {
2319 width: 64.5%;
2320 }
2321
2322 .wpo_plugin_family_cont {
2323 width: 34.5%;
2324 }
2325
2326 @media (max-width: 1080px) {
2327
2328 .wpo_feature_cont,
2329 .wpo_plugin_family_cont {
2330 width: 100%;
2331 float: none;
2332 margin: 0;
2333 }
2334
2335 }
2336
2337 .wpo_feature_cont header, .wpo_plugin_family_cont header {
2338 padding: 20px;
2339
2340 }
2341
2342 @media (max-width: 1080px) {
2343
2344 .wpo_feature_cont header, .wpo_plugin_family_cont header {
2345 padding: 40px;
2346 }
2347 }
2348
2349 .wpo_feature_cont header h2, .wpo_plugin_family_cont header h2 {
2350 margin: 0;
2351 }
2352
2353 .wpo_feature_cont header p, .wpo_plugin_family_cont header p {
2354 margin-bottom: 0;
2355 }
2356
2357 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
2358 border: none;
2359 border-collapse: collapse;
2360 background-color: white;
2361 font-size: 120%;
2362 text-align: center;
2363 }
2364
2365 .wpo_feat_table td {
2366 border: 1px solid #F1F1F1;
2367 border-bottom-width: 4px;
2368 padding: 15px;
2369 }
2370
2371 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2372 background: rgba(241, 241, 241, 0.38);
2373 }
2374
2375 .wpo_feat_table p {
2376 padding: 0px 10px;
2377 margin: 5px 0px;
2378 font-size: 13px;
2379 }
2380
2381 .wpo_feat_table h4 {
2382 margin: 5px 0px;
2383 }
2384
2385 .wpo_feat_table .dashicons {
2386 width: 25px;
2387 height: 25px;
2388 font-size: 25px;
2389 line-height: 1;
2390 }
2391
2392 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
2393 color: green;
2394 }
2395
2396 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
2397 color: red;
2398 }
2399
2400 .wpo_feat_table tr.wpo-main-feature-row td {
2401 background: #f1f1f1;
2402 border-bottom-color: #fafafa;
2403 }
2404
2405 .wpo_feat_table tr.wpo-main-feature-row td img.wpo-premium-image {
2406 width: 64px;
2407 }
2408
2409 .wpo-premium-image {
2410 display: none;
2411 }
2412
2413 @media screen and (min-width: 720px) {
2414
2415 #wpoptimize_table_list_filter {
2416 width: 40%;
2417 }
2418
2419 .wpo-premium-image {
2420 display: block;
2421 float: left;
2422 padding: 16px 18px;
2423 width: 30px;
2424 height: auto;
2425 }
2426
2427 }
2428
2429 @media screen and (min-width: 1220px) {
2430
2431 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2432 width: 110px;
2433 }
2434
2435 }
2436
2437 .other-plugin-title {
2438 text-decoration: none;
2439 }
2440
2441 @media screen and (max-width: 782px) {
2442
2443 table.wpo_feat_table {
2444
2445 display: block;
2446 }
2447
2448 table.wpo_feat_table tr {
2449 display: -ms-flexbox;
2450 display: flex;
2451 -ms-flex-wrap: wrap;
2452 flex-wrap: wrap;
2453 }
2454
2455 table.wpo_feat_table td {
2456 display: block
2457 }
2458
2459 table.wpo_feat_table td:first-child {
2460 width: 100%;
2461 border-bottom: none;
2462 }
2463
2464 table.wpo_feat_table td:not(:first-child) {
2465 width: 50%;
2466 box-sizing: border-box;
2467 }
2468
2469 table.wpo_feat_table td:first-child:empty {
2470 display: none;
2471 }
2472
2473 table.wpo_feat_table td[data-colname]::before {
2474 content: attr(data-colname);
2475 font-size: 0.8rem;
2476 color: #CCC;
2477 line-height: 1;
2478 }
2479
2480 }
2481
2482 .wpo-cache-feature-image {
2483 width: 40px;
2484 padding: 16px 14px;
2485 }
2486
2487 /* tablesorter */
2488
2489 #wp-optimize-wrap .wp-list-table td {
2490 word-break: break-all;
2491 }
2492
2493 @media screen and (max-width: 782px ) {
2494
2495 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody tr, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody th, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2496 display: block;
2497 }
2498
2499 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2500 padding: 3px 8px 3px 35%;
2501 word-break: break-word;
2502 box-sizing: border-box
2503
2504 }
2505
2506 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
2507 color: #B5B9BE;
2508 }
2509
2510 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead tr {
2511 display: block;
2512 }
2513
2514 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
2515 display: block;
2516 box-sizing: border-box;
2517 }
2518
2519 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
2520 display: none !important;
2521 }
2522 }
2523
2524 body.rtl #wp-optimize-wrap .wpo-table-list-filter {
2525 text-align: left;
2526 }
2527
2528 @media screen and (max-width: 782px ) {
2529 body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2530 padding: 3px 35% 3px 8px;
2531 }
2532 }
2533
2534 .tablesorter-headerRow th {
2535 vertical-align: top;
2536 }
2537
2538 th:not(.sorter-false) .tablesorter-header-inner {
2539
2540 color: #0074ab
2541
2542 }
2543
2544 th:not(.sorter-false) .tablesorter-header-inner::after {
2545 content: '';
2546 font-family: 'dashicons';
2547 font-size: 20px;
2548 line-height: 20px;
2549 height: 20px;
2550 width: 20px;
2551 display: none;
2552 vertical-align: bottom;
2553 }
2554
2555 th.tablesorter-header.tablesorter-headerAsc,
2556 th.tablesorter-header.tablesorter-headerDesc {
2557 font-weight: 500;
2558 border-bottom-color: #0272AA;
2559 }
2560
2561 th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after, th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
2562 display: inline-block;
2563 }
2564
2565 th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
2566 content: "\f140";
2567 }
2568
2569 th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after {
2570 content: "\f142";
2571 }
2572
2573 th.tablesorter-header:focus {
2574 outline: none;
2575 box-shadow: 0 0 3px rgba(0, 116, 171, 0.78)
2576
2577 }
2578
2579 th.tablesorter-header:focus:not(.tablesorter-headerAsc):not(.tablesorter-headerDesc) .tablesorter-header-inner::after {
2580 content: "\f142";
2581 opacity: 0.5;
2582 }
2583
2584 .tablesorter.hasFilters tr.filtered {
2585 display: none;
2586 }
2587
2588 .wpo-text__dim .dashicons-info {
2589 margin-top: 2px;
2590 margin-right: 5px;
2591 border-radius: 30px;
2592 background: #fff;
2593 color: #E07575;
2594 }
2595
2596 #page_cache_length_value {
2597 height: 28px;
2598 position: relative;
2599 top: 2px;
2600 }
2601
2602 #wp_optimize_preload_cache_status {
2603 margin-left: 10px;
2604 display: inline-block;
2605 color: #82868B;
2606 font-size: smaller;
2607 }
2608
2609 .align-left {
2610 margin: 10px 10px 0px 0px;
2611 float: left;
2612 }
2613
2614 textarea.cache-settings {
2615 display: block;
2616 clear: both;
2617 min-height: 225px;
2618 overflow: scroll;
2619 min-width: 75%;
2620 margin: 10px 0px;
2621 }
2622
2623 #wp-optimize-purge-cache,
2624 #wp-optimize-purge-cache ~ span,
2625 #wp-optimize-purge-cache ~ img {
2626 vertical-align: middle;
2627 top: auto;
2628 }
2629
2630 #wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
2631 font-size: 12px;
2632 }
2633
2634 #wpo_browser_cache_error_message {
2635 padding-top: 10px;
2636 padding-bottom: 10px;
2637 margin-left: 0;
2638 margin-bottom: 10px
2639 }
2640
2641 #wpo_browser_cache_error_message:empty {
2642 display: none;
2643 }
2644
2645 #wp-optimize-nav-tab-wpo_cache-advanced-contents label, #wp-optimize-nav-tab-wpo_cache-preload-contents label, #wp-optimize-nav-tab-wpo_cache-cache-contents label {
2646 font-weight: 600;
2647 }
2648
2649 #wp-optimize-nav-tab-wpo_cache-advanced-contents label em, #wp-optimize-nav-tab-wpo_cache-preload-contents label em, #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
2650 font-weight: normal;
2651 }
2652
2653 .wpo-gzip-already-enabled span.dashicons.dashicons-yes,
2654 .wpo-enabled > span.dashicons.dashicons-yes {
2655 font-size: 40px;
2656 width: 40px;
2657 height: 40px;
2658 line-height: 40px;
2659 vertical-align: middle;
2660 color: green;
2661 }
2662
2663 #wp-optimize-wrap .filename {
2664 display: inline-block;
2665 padding: 6px 0;
2666 }
2667
2668 #wp-optimize-wrap .no-files-yet .filename {
2669 font-style: italic;
2670 }
2671
2672 #wp-optimize-wrap .processed {
2673 margin: 0;
2674 }
2675
2676 #wp-optimize-wrap .processed .wpo_min_log {
2677 padding: 8px;
2678 background: white;
2679 border: 1px solid #CDCDCD;
2680 border-radius: 4px;
2681 line-height: 1.5em;
2682 }
2683
2684 #wp-optimize-wrap .processed .wpo_min_log ul {
2685 overflow-x: auto;
2686 }
2687
2688 #wp-optimize-wrap .processed .wpo_min_log ul li {
2689 white-space: nowrap
2690 }
2691
2692 #wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
2693 color: #dc3232;
2694 }
2695
2696 #wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
2697 opacity: 0.5;
2698 }
2699
2700 #wp-optimize-wrap .processed .wpo_min_log h5 {
2701 margin-top: 0;
2702 margin-bottom: 8px;
2703 border-bottom: 1px solid #cdcdcd;
2704 padding-bottom: 6px;
2705 }
2706
2707 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
2708 color: #9c9c9c;
2709 display: inline-block
2710 }
2711
2712 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
2713 content: '';
2714 display: inline-block;
2715 margin: 0 10px;
2716 }
2717
2718 #wp-optimize-wrap .show-if-enabled {
2719 display: none;
2720 }
2721
2722 #wp-optimize-wrap .is-enabled .show-if-enabled {
2723 display: block;
2724 }
2725
2726 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
2727 display: none;
2728 }
2729
2730 #wp-optimize-wrap .wpo-page[data-whichpage="wpo_minify"]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab="status"]):not([role="toggle-menu"]){
2731 display: none;
2732 }
2733
2734 #wp-optimize-wrap .wpo-minify-features {
2735 padding-top: 1em;
2736 margin-top: 1em;
2737 border-top: 1px solid #bbb;
2738 }
2739
2740 #wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
2741 margin-bottom: 1em;
2742 }
2743
2744 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
2745 display: none;
2746 }
2747
2748 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
2749 display: block;
2750 }
2751
2752 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
2753 margin-bottom: 0;
2754 }
2755
2756 #wp-optimize-wrap .defer-js-settings {
2757 padding-left: 1em;
2758 border-left: 2px solid #E2E2E2;
2759 margin-left: 0.5em;
2760 }
2761
2762 /*
2763 Asset preload table
2764 */
2765
2766 #wp-optimize-wrap .asset-preload-list {
2767 margin-bottom: 1em;
2768 }
2769
2770 #wp-optimize-wrap .asset-preload-list td.asset-href {
2771 width: 55%;
2772 }
2773
2774 #wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
2775 width: 10%;
2776 }
2777
2778 #wp-optimize-wrap .asset-preload-list tr.editing {
2779 display: none;
2780 }
2781
2782 #wp-optimize-wrap .asset-preload-list tr.form {
2783 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12941);
2784 }
2785
2786 #wp-optimize-wrap .asset-preload-list tr.form td {
2787 background: #FFF;
2788 border: none;
2789 padding: 10px;
2790 }
2791
2792 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
2793 border-radius: 0 5px 5px 0;
2794 }
2795
2796 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
2797 position: relative
2798 }
2799
2800 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
2801 content: '';
2802 width: 10px;
2803 height: 10px;
2804 background: #FFF;
2805 display: block;
2806 position: absolute;
2807 top: 0;
2808 left: 0;
2809 transform: translate(10px, -5px) rotate(45deg);
2810 }
2811
2812 #wp-optimize-wrap .asset-preload-list tbody + tr.form td {
2813 padding-top: 37px;
2814 position: relative
2815 }
2816
2817 #wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
2818 content: attr(data-label);
2819 position: absolute;
2820 top: 1em;
2821 left: 10px;
2822 text-transform: uppercase;
2823 color: #D0D2D4;
2824 }
2825
2826 #wp-optimize-wrap .asset-preload-list input#preload_href {
2827 width: 100%;
2828 }
2829
2830 #wp-optimize-wrap .asset-preload-list select#preload_type {
2831 width: 100%;
2832 }
2833
2834 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
2835 #wp-optimize-wrap .asset-preload-list td.asset-edit {
2836 text-align: right;
2837 }
2838
2839 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button, #wp-optimize-wrap .asset-preload-list td.asset-edit button {
2840 display: inline-block
2841 }
2842
2843 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after, #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
2844 content: '|';
2845 padding-left: 6px;
2846 padding-right: 4px;
2847 }
2848
2849 /* Modal window */
2850
2851 body.wpo-modal-is-opened {
2852 overflow: hidden;
2853 }
2854
2855 .wpo-modal--container {
2856 position: fixed;
2857 top: 0;
2858 left: 0;
2859 padding: 3em;
2860 width: 100%;
2861 height: 100%;
2862 box-sizing: border-box;
2863 z-index: 9999;
2864 overflow: auto;
2865 }
2866
2867 .wpo-modal {
2868 position: relative;
2869 background: #FFF;
2870 width: calc(100% - 6em);
2871 top: 50%;
2872 transform: translateY(-50%);
2873 margin: 0 auto;
2874 padding: 2em;
2875 box-sizing: border-box;
2876 z-index: 2;
2877 }
2878
2879 .wpo-modal > .wpo-modal--close {
2880 border: none;
2881 background: none;
2882 position: absolute;
2883 top: 10px;
2884 right: 10px;
2885 width: 20px;
2886 height: 20px;
2887 line-height: 1;
2888 padding: 0;
2889 }
2890
2891 .wpo-modal--bg {
2892 position: fixed;
2893 top: 0;
2894 left: 0;
2895 width: 100%;
2896 height: 100%;
2897 background: rgba(0, 0, 0, 0.74);
2898 z-index: 1;
2899 }
2900
2901 .wpo-confirm .wpo-modal--content > h3 {
2902 font-size: 2em;
2903 }
2904
2905 .wpo-confirm .wpo-modal--content > h3 .dashicons {
2906 font-size: 30px;
2907 width: 30px;
2908 height: 30px;
2909 transform: translateY(-5px);
2910 }
2911
2912 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2913 color: #feb901;
2914 }
2915
2916 @media (min-width: 780px) {
2917
2918 .power-tweaks--list {
2919 display: -ms-flexbox;
2920 display: flex;
2921 -ms-flex-direction: row;
2922 flex-direction: row;
2923 -ms-flex-wrap: wrap;
2924 flex-wrap: wrap;
2925 }
2926 }
2927
2928 .power-tweaks--list .wpo-power-tweak {
2929 width: 100%;
2930 }
2931
2932 @media (min-width: 780px) {
2933
2934 .power-tweaks--list .wpo-power-tweak {
2935 width: calc(25% - 1em);
2936 margin-right: 1em;
2937 }
2938 }
2939
2940 @media (min-width: 1080px) {
2941
2942 .power-tweaks--list .wpo-power-tweak {
2943 width: calc(33.33333% - 1em);
2944 margin-right: 1em;
2945 }
2946 }
2947
2948 .power-tweaks--list .wpo-power-tweak {
2949 background: #f2f4f5;
2950 border-radius: 1em;
2951 padding: 1.5em;
2952 margin-bottom: 1em;
2953 box-sizing: border-box;
2954 }
2955
2956 .power-tweaks--list .wpo-power-tweak h4 {
2957 margin-top: 0;
2958 }
2959
2960 .power-tweaks--list .wpo-power-tweak .description {
2961 margin-bottom: 1em;
2962 }
2963
2964 .power-tweaks--list .wpo-power-tweak .details {
2965 padding: 1em;
2966 background: #FFF;
2967 box-shadow: 0 2px 3px rgba(0,0,0,0.1);
2968 margin-top: 1em;
2969 margin-bottom: 1em;
2970 }
2971
2972 .power-tweaks--list .wpo-power-tweak .actions {
2973 margin-top: 1em;
2974 margin-bottom: 1em;
2975 }
2976
2977 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2978 margin-top: 1em;
2979 font-size: 0.8em;
2980 color: #a9a9a9;
2981 }
2982
2983 .power-tweaks--list .wpo-power-tweak .tweak-is-running {
2984 display: none;
2985 }
2986
2987 .power-tweaks--list .wpo-power-tweak.running {
2988 position: relative;
2989 }
2990
2991 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2992 display: -ms-flexbox;
2993 display: flex;
2994 -ms-flex-align: center;
2995 align-items: center;
2996 -ms-flex-pack: center;
2997 justify-content: center;
2998 position: absolute;
2999 top: 0;
3000 bottom: 0;
3001 left: 0;
3002 right: 0;
3003 background: rgb(242, 244, 245, 0.9);
3004 z-index: 1;
3005 border-radius: 1em;
3006 font-size: 1.7em;
3007 }
3008
3009 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
3010 visibility: visible;
3011 }
3012
3013 .power-tweaks--list a.show-faqs span.dashicons {
3014 font-size: inherit;
3015 height: auto;
3016 width: auto;
3017 line-height: inherit;
3018 text-decoration: none;
3019 margin-left: 4px;
3020 }
3021