PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 2.2.11
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v2.2.11
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 2.2.11, at css/wp-optimize-admin.css

1,678 lines 29.4 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;
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 /* big button */
20
21 .wpo_primary_big {
22 padding: 4px 6px !important;
23 font-size: 22px !important;
24 min-height: 34px;
25 min-width: 200px;
26 }
27
28 /* SECTIONS */
29
30 .wpo_section {
31 clear: both;
32 padding: 0;
33 margin: 0;
34 }
35
36 .wp-optimize-settings {
37 margin-bottom: 16px;
38 }
39
40 .wp-optimize-settings td > label {
41 font-weight: bold;
42 display: block;
43 margin-bottom: 8px;
44 }
45
46 /* COLUMN SETUP */
47
48 .wpo_col {
49 display: block;
50 float: left;
51 margin: 1% 0 1% 1%;
52 }
53
54 .wpo_col:first-child {
55 margin-left: 0;
56 }
57
58 /* GROUPING */
59
60 .wpo_group:before,
61 .wpo_group:after {
62 content: "";
63 display: table;
64 }
65
66 .wpo_group:after {
67 clear: both;
68 }
69
70 .wpo_half_width {
71 width: 48%;
72 }
73
74 /* GRID OF THREE */
75
76 .wpo_span_3_of_3 {
77 width: 100%;
78 }
79
80 .wpo_span_2_of_3 {
81 width: 65.3%;
82 }
83
84 .wpo_span_1_of_3 {
85 width: 32.1%;
86 }
87
88 .nav-tab-wrapper {
89 margin: 14px 0px;
90 }
91
92 @media screen and (min-width: 549px) {
93
94 .show_on_default_sizes {
95 display: block !important;
96 }
97
98 .show_on_mobile_sizes {
99 display: none !important;
100 }
101
102 }
103
104 @media screen and (max-width: 548px) {
105
106 .show_on_default_sizes {
107 display: none !important;
108 }
109
110 .show_on_mobile_sizes {
111 display: block !important;
112 }
113
114 }
115
116 @media screen and (max-width: 768px) {
117
118 .wpo_col {
119 margin: 1% 0;
120 }
121
122 .wpo_span_3_of_3 {
123 width: 100%;
124 }
125
126 .wpo_span_2_of_3 {
127 width: 100%;
128 }
129
130 .wpo_span_1_of_3 {
131 width: 100%;
132 }
133
134 .wpo_half_width {
135 width: 100%;
136 }
137
138 }
139
140 /* .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 */
141
142 .wp-optimize-setting-is-sensitive td > label::before {
143 content: "\f534";
144 font-family: 'dashicons';
145 display: inline-block;
146 margin-right: 6px;
147 font-style: normal;
148 line-height: 1;
149 vertical-align: middle;
150 width: 20px;
151 font-size: 18px;
152 height: 20px;
153 text-align: center;
154 color: #72777C;
155 }
156
157 .wpo-run-optimizations__container {
158 margin-bottom: 15px;
159 }
160
161 td.wp-optimize-settings-optimization-checkbox {
162 width: 18px;
163 padding-left: 4px;
164 padding-right: 0px;
165 }
166
167 .wp-optimize-settings-optimization-checkbox input {
168 margin: 0px;
169 padding: 0px;
170 }
171
172 #retention-period {
173 width: 60px;
174 }
175
176 .wp-optimize-settings-optimization-info {
177 font-size: 80%;
178 font-style: italic;
179 }
180
181 .wp-optimize-settings input[type="checkbox"] {
182 /* width: 18px; */
183 }
184
185 /* Added for the Image on Addons tab*/
186
187 img.addons {
188 display: block;
189 margin-left: auto;
190 margin-right: auto;
191 margin-bottom: 20px;
192 max-height: 44px;
193 height: auto;
194 max-width: 100%;
195 }
196
197 .wpo_spinner {
198 width: 18px;
199 height: 18px;
200 padding-left: 10px;
201 display: none;
202 position: relative;
203 top: 4px;
204 }
205
206 .optimization_spinner {
207 width: 20px;
208 height: 20px;
209 }
210
211 #wp-optimize-auto-options {
212 margin: 20px 0 0 28px;
213 }
214
215 .display-none {
216 display: none;
217 }
218
219 .visibility-hidden {
220 visibility: hidden;
221 }
222
223 .margin-one-percent {
224 margin: 1%;
225 }
226
227 #save_done, .save-done {
228 color: #D94F00;
229 font-size: 250% !important;
230 }
231
232 .wp-optimize-settings-optimization-info a {
233 text-decoration: underline;
234 }
235
236 .wp-optimize-settings-optimization-run-spinner {
237 position: relative;
238 top: 2px;
239 }
240
241 @media screen and (min-width: 782px) {
242
243 td.wp-optimize-settings-optimization-run {
244 width: 180px;
245 padding-top: 16px;
246 }
247
248 }
249
250 #wpoptimize_table_list .tablesorter-filter-row {
251 display: none !important;
252 }
253
254 #wpoptimize_table_list .optimization_spinner {
255 position: relative;
256 top: 2px;
257 left: 5px;
258 }
259
260 #wpoptimize_table_list .optimization_spinner.visibility-hidden {
261 display: none;
262 }
263
264 #wpoptimize_table_list_filter {
265 width: 100%;
266 margin-bottom: 15px;
267 }
268
269 #wpoptimize_table_list_tables_not_found {
270 display: none;
271 margin: 20px 0;
272 }
273
274 div#wpoptimize_table_list_tables_not_found + h3 {
275 margin-top: 30px;
276 }
277
278 #optimize_form .select2-container,
279 #wp-optimize-auto-options .select2-container {
280 width: 50% !important;
281 top: -5px;
282 height: 40px;
283 margin-left: 10px;
284 }
285
286 #wpoptimize_table_list .optimization_done_icon {
287 color: #009B24;
288 font-size: 200%;
289 display: inline-block;
290 position: relative;
291 }
292
293 #wpo_sitelist_show_moreoptions_cron {
294 font-size: 13px;
295 line-height: 1.5;
296 letter-spacing: 1px;
297 }
298
299 #wp-optimize-nav-tab-contents-images .wpo_span_2_of_3 h3 {
300 display: inline-block;
301 }
302
303 .wpo_remove_selected_sizes_btn__container {
304 margin-top: 20px;
305 }
306
307 .unused-image-sizes__label {
308 display: block;
309 line-height: 1.6;
310 }
311
312 @media (max-width: 782px) {
313
314 .unused-image-sizes__label {
315 margin-left: 30px;
316 margin-bottom: 15px;
317 line-height: 1;
318 }
319
320 .unused-image-sizes__label input[type=checkbox] {
321 margin-left: -30px;
322 }
323
324 }
325
326 #wp-optimize-nav-tab-contents-tables a {
327 vertical-align: middle;
328 }
329
330 #wpo_sitelist_moreoptions,
331 #wpo_sitelist_moreoptions_cron {
332 margin: 4px 16px 6px 0;
333 border: 1px dotted;
334 padding: 6px 10px;
335 max-height: 300px;
336 overflow-y: scroll;
337 overflow-x: hidden;
338 }
339
340 #wpo_sitelist_moreoptions {
341 max-height: 150px;
342 margin-right: 0;
343 }
344
345 #wpo_settings_sites_list li,
346 #wpo_settings_sites_list li a {
347 font-size: 13px;
348 line-height: 1.5;
349 }
350
351 #wpo_sitelist_moreoptions_cron li {
352 padding-left: 20px;
353 }
354
355 #wpo_import_error_message {
356 display: none;
357 color: #9B0000;
358 }
359
360 #wpo_import_success_message {
361 display: none;
362 color: #46B450;
363 }
364
365 #wp-optimize-logging-options {
366 margin-top: 10px;
367 }
368
369 /* Logger settings*/
370
371 .wpo_logging_header {
372 font-weight: bold;
373 border-top: 1px solid #333;
374 border-bottom: 1px solid #333;
375 padding: 5px 0;
376 margin: 0;
377 }
378
379 .wpo_logging_row {
380 border-bottom: 1px solid #A1A2A3;
381 padding: 5px 0;
382 }
383
384 .wpo_logging_logger_title,
385 .wpo_logging_options_title,
386 .wpo_logging_status_title,
387 .wpo_logging_actions_title,
388 .wpo_logging_logger_row,
389 .wpo_logging_options_row,
390 .wpo_logging_status_row,
391 .wpo_logging_actions_row {
392 display: inline-block;
393 vertical-align: middle;
394 }
395
396 .wpo_logging_logger_title,
397 .wpo_logging_logger_row {
398 width: 38%;
399 }
400
401 .wpo_logging_options_title,
402 .wpo_logging_options_row {
403 width: 44%;
404 }
405
406 .wpo_logging_status_title,
407 .wpo_logging_status_row {
408 width: 8%;
409 }
410
411 .wpo_logging_actions_title,
412 .wpo_logging_actions_row {
413 width: 7%;
414 }
415
416 .wpo_logging_actions_row {
417 text-align: right;
418 }
419
420 .wpo_logging_options_row {
421 word-wrap: break-word;
422 }
423
424 .wpo_logging_actions_row .dashicons-no-alt,
425 .wpo_add_logger_form .dashicons-no-alt {
426 background-color: #F06666;
427 color: #FFF;
428 width: 20px;
429 height: 20px;
430 border-radius: 20px;
431 display: inline-block;
432 cursor: pointer;
433 margin-left: 5px;
434 }
435
436 .wpo_add_logger_form .dashicons-no-alt {
437 margin-top: 12px;
438 margin-right: 10px;
439 float: right;
440 }
441
442 .wpo_logger_type {
443 width: 90%;
444 margin-top: 10px;
445 }
446
447 .wpo_logger_addition_option {
448 width: 100%;
449 margin-top: 5px;
450 }
451
452 .wpo_alert_notice {
453 background-color: #F06666;
454 color: #FFF;
455 padding: 5px;
456 display: block;
457 margin-bottom: 5px;
458 border-radius: 5px;
459 }
460
461 .wpo_error_field {
462 border-color: #F06666 !important;
463 }
464
465 .save_settings_reminder {
466 display: none;
467 color: #333;
468 padding: 15px 20px;
469 background-color: #F0A5A4;
470 border-radius: 3px;
471 margin: 15px 0;
472 }
473
474 #wpo_remove_selected_sizes {
475 margin-top: 20px;
476 }
477
478 .wpo_unused_images_buttons_wrap {
479 display: none;
480 }
481
482 .wpo_unused_images_container h3 {
483 min-width: 150px;
484 }
485
486 #wpo_unused_images, #wpo_smush_images_grid {
487 max-height: 500px;
488 overflow-y: auto;
489 }
490
491 #wpo_unused_images a {
492 outline: none;
493 }
494
495 #wp-optimize-nav-tab-wpo_database-tables-contents .wpo-take-a-backup {
496 margin-left: 1%;
497 }
498
499 .run-single-table-delete {
500 margin-top: 3px;
501 }
502
503 #wpo_browser_cache_output,
504 #wpo_gzip_compression_output {
505 background: #F0F0F0;
506 padding: 10px;
507 border: 1px solid #CCC;
508 }
509
510 #wpo_browser_cache_error_message,
511 #wpo_gzip_compression_error_message,
512 .wpo-error {
513 color: #9B0000;
514 }
515
516 #wpo_browser_cache_expire_days,
517 #wpo_browser_cache_expire_hours {
518 width: 50px;
519 }
520
521 .wpo-enabled .wpo-disabled {
522 display: none;
523 }
524
525 .wpo-disabled .wpo-enabled {
526 display: none;
527 }
528
529 #wp-optimize-wrap {
530 position: relative;
531 padding-top: 100px;
532
533 }
534
535 @media (min-width: 820px) {
536
537 #wp-optimize-wrap {
538 padding-top: 120px;
539 }
540 }
541
542 @media (max-width: 782px) {
543
544 #wp-optimize-wrap {
545 margin-right: 0;
546 }
547 }
548
549 /* DASHBOARD */
550
551 .wpo-main-header {
552
553 height: 77px;
554 position: fixed;
555 top: 32px;
556 left: 160px;
557 background: #FFF;
558 right: 0;
559 z-index: 9980;
560 }
561
562 @media (min-width: 820px) {
563
564 .wpo-main-header {
565 height: 105px;
566 }
567 }
568
569 .wpo-main-header .wpo-logo__container {
570 display: -ms-flexbox;
571 display: flex;
572 -ms-flex-direction: column;
573 flex-direction: column;
574 -ms-flex-pack: center;
575 justify-content: center;
576 position: relative;
577 height: 100%;
578 line-height: 1;
579 font-size: 1rem;
580 padding-left: 50px;
581 margin-left: 10px;
582 }
583
584 .wpo-main-header .wpo-logo {
585 position: absolute;
586 left: 0;
587 top: 50%;
588 transform: translateY(-50%);
589 width: 50px;
590 }
591
592 .wpo-main-header .wpo-subheader {
593 margin: 0;
594 font-weight: 300;
595 color: #72777C;
596 line-height: 1.3;
597 }
598
599 @media (max-width: 1080px) {
600
601 .wpo-main-header .wpo-subheader {
602 display: none;
603 }
604 }
605
606 .wpo-main-header p.wpo-header-links {
607 margin: 0;
608 font-size: 0.7rem;
609 position: absolute;
610 right: 0;
611 padding: 6px 15px;
612 background: #EDEEEF;
613 border-bottom-left-radius: 5px;
614 z-index: 1;
615 }
616
617 .wpo-main-header p.wpo-header-links a {
618 text-decoration: none;
619 }
620
621 .wpo-main-header p.wpo-header-links .wpo-header-links__label {
622 color: #82868B;
623 position: absolute;
624 right: 100%;
625 width: 110px;
626 text-align: right;
627 padding-right: 10px;
628 }
629
630 @media (max-width: 820px) {
631
632 .wpo-main-header p.wpo-header-links {
633 display: none;
634 }
635 }
636
637 .wpo-main-header p.wpo-header-links__mobile {
638 padding: 10px;
639 background: #EDEEEF;
640 margin-bottom: 0;
641 }
642
643 @media (min-width: 820px) {
644
645 .wpo-main-header p.wpo-header-links__mobile {
646 display: none;
647 }
648 }
649
650 .wpo-main-header p.wpo-header-links__mobile a {
651 display: inline-block;
652 padding: 4px;
653 font-size: .8rem;
654 }
655
656 .wpo-main-header p.wpo-header-links__mobile .wpo-header-links__label {
657 color: #82868B;
658 }
659
660 @media (max-width: 600px) {
661
662 .wpo-main-header .wpo-logo__container strong {
663 width: 140px;
664 display: inline-block;
665 }
666 }
667
668 @media (max-width: 960px) {
669
670 body.auto-fold .wpo-main-header {
671 left: 36px;
672 }
673 }
674
675 @media (max-width: 782px) {
676
677 body.auto-fold .wpo-main-header {
678 left: 0;
679 top: 46px;
680 }
681 }
682
683 @media (max-width: 600px) {
684
685 body.auto-fold .wpo-main-header {
686 position: absolute;
687 left: -10px;
688 right: -10px;
689 top: 0;
690 }
691 }
692
693 @media (min-width: 782px) {
694
695 body.folded .wpo-main-header {
696 left: 36px;
697 }
698 }
699
700 body.is-scrolled .wpo-main-header {
701 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
702 }
703
704 @media (min-width: 769px) {
705
706 .wpo-page {
707 padding-right: 15px;
708 }
709 }
710
711 .wpo-page:not(.active) {
712 display: none;
713 }
714
715 /* Columns */
716
717 @media (min-width: 1200px) {
718
719 .wpo-tab-postbox.right-col {
720 width: 350px;
721 float: right;
722 box-sizing: border-box;
723 margin-top: 3.1rem;
724 }
725
726 .right-col + .wpo-main {
727 float: left;
728 box-sizing: border-box;
729 width: calc(100% - 380px);
730 }
731
732 }
733
734 /* Common BLOCKS */
735
736 /* Buttons */
737
738 @media (max-width: 782px) {
739
740 #wp-optimize-wrap .button-large {
741 display: block;
742 width: 100%;
743 }
744 }
745
746 #wp-optimize-wrap .red {
747 color: #E07575;
748 }
749
750 #wp-optimize-wrap div[id*="_notice"] div.updated {
751 margin-left: 0;
752 }
753
754 .button.button-block {
755 display: block;
756 width: 100%;
757 text-align: center;
758 }
759
760 .wpo-refresh-button {
761 float: right;
762 }
763
764 .wpo-refresh-button:hover {
765 cursor: pointer;
766 }
767
768 .wpo-refresh-button .dashicons {
769 text-decoration: none;
770 line-height: inherit;
771 font-size: inherit;
772 }
773
774 /* Helper classes */
775
776 *[class*="wpo-badge"] {
777 display: inline-block;
778 font-size: .8em;
779 text-transform: uppercase;
780 background: #EDEFF0;
781 padding: 3px 5px;
782 line-height: 1;
783 border-radius: 3px;
784 }
785
786 .wpo-badge__new {
787 background: #DBE3E6;
788 color: #00689a;
789 }
790
791 .wpo-text__dim {
792 color: #B5B9BE;
793 }
794
795 .wpo-fieldgroup .wpo-text__dim {
796 color: #82868B;
797 }
798
799 .wpo-first-child {
800 margin-top: 0;
801 }
802
803 #save_done, .save-done {
804 color: #009B24;
805 font-size: 250%;
806 }
807
808 p.wpo-take-a-backup {
809 display: inline-block;
810 margin: 0;
811 line-height: 1;
812 padding-top: 8px;
813 }
814
815 @media (min-width: 782px) {
816
817 p.wpo-take-a-backup {
818 margin-left: 20px;
819 }
820 }
821
822 /* Postbox */
823
824 #wp-optimize-nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
825 border: none;
826
827 }
828
829 #wp-optimize-nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox > h3:first-child {
830 margin-top: 0;
831 }
832
833 .wpo-p25,
834 .postbox.wpo-tab-postbox {
835 padding: 25px;
836 }
837
838 .wpo-tab-postbox > h3:first-child {
839 margin-top: 0;
840 }
841
842 /* Field group */
843
844 .wpo-fieldgroup {
845 background: #EDEFF0;
846 border-radius: 8px;
847 padding: 20px
848 }
849
850 .wpo-fieldgroup:not(:last-child) {
851 margin-bottom: 2em;
852 }
853
854 .wpo-fieldgroup > *:first-child {
855 margin-top: 0;
856 }
857
858 .wpo-fieldgroup > *:last-child {
859 margin-bottom: 0;
860 }
861
862 .wpo-fieldgroup__subgroup:not(:last-of-type) {
863 margin-bottom: 20px;
864 }
865
866 /* TABS */
867
868 h2#wp-optimize-nav-tab-wrapper {
869 margin-bottom: 0;
870 border-bottom: none;
871 position: relative;
872 }
873
874 h2#wp-optimize-nav-tab-wrapper .nav-tab,
875 h2#wp-optimize-nav-tab-wrapper .nav-tab:hover,
876 h2#wp-optimize-nav-tab-wrapper .nav-tab:focus,
877 h2#wp-optimize-nav-tab-wrapper .nav-tab:focus:active {
878 border: none;
879 background: transparent;
880 margin: 0;
881 border-top: 3px solid transparent;
882 padding: 7px 15px;
883 color: #0272AA;
884 }
885
886 h2#wp-optimize-nav-tab-wrapper .nav-tab .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab:hover .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab:focus .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab:focus:active .dashicons {
887 display: block;
888 margin: 0 auto;
889 color: #72777C;
890 font-size: 30px;
891 width: 30px;
892 height: 30px;
893 }
894
895 h2#wp-optimize-nav-tab-wrapper .nav-tab-active,
896 h2#wp-optimize-nav-tab-wrapper .nav-tab-active:hover,
897 h2#wp-optimize-nav-tab-wrapper .nav-tab-active:focus,
898 h2#wp-optimize-nav-tab-wrapper .nav-tab-active:focus:active {
899 background: #FFF;
900 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
901 border-top-color: #0272AA;
902 }
903
904 h2#wp-optimize-nav-tab-wrapper .nav-tab-active .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab-active:hover .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab-active:focus .dashicons, h2#wp-optimize-nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
905 color: #0272AA;
906 }
907
908 @media (max-width: 782px) {
909
910 h2#wp-optimize-nav-tab-wrapper a:not(.nav-tab-active) {
911 display: none;
912 }
913 }
914
915 h2#wp-optimize-nav-tab-wrapper a[role="toggle-menu"] {
916 display: block;
917 float: right;
918 }
919
920 @media (min-width: 782px) {
921
922 h2#wp-optimize-nav-tab-wrapper a[role="toggle-menu"] {
923 display: none;
924 }
925 }
926
927 h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
928 text-align: right;
929 }
930
931 h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
932 color: #B5B9BE;
933 font-size: 18px;
934 display: inline-block;
935 height: auto;
936 line-height: inherit;
937 width: 20px;
938 }
939
940 @media (min-width: 782px) {
941
942 h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
943 position: absolute;
944 bottom: 14px;
945 right: 0;
946 font-size: 12px;
947 font-weight: 400;
948 text-decoration: none;
949 padding: 0;
950 }
951
952 h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, h2#wp-optimize-nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
953 color: #B5B9BE;
954 font-size: 18px;
955 display: inline-block;
956 height: auto;
957 line-height: inherit;
958 width: 20px;
959 }
960 }
961
962 .wpo-mobile-menu-opened .wpo-main .wpo-tab-postbox {
963 display: none;
964 }
965
966 .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a {
967 display: block;
968 float: none
969 }
970
971 .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a.nav-tab-active,
972 .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a.nav-tab-active:focus {
973 border-top: none;
974 border-left: 3px solid;
975 }
976
977 .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a.nav-tab-active .dashicons, .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a.nav-tab-active:focus .dashicons, .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a:focus .dashicons, .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a:hover .dashicons, .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a .dashicons {
978 display: inline-block;
979 line-height: inherit;
980 }
981
982 .wpo-mobile-menu-opened h2#wp-optimize-nav-tab-wrapper a[role="toggle-menu"] {
983 display: none;
984 }
985
986 /* Pages MENU */
987
988 .wpo-pages-menu {
989 position: absolute;
990 bottom: 0;
991 right: 0;
992 display: none;
993
994 }
995
996 @media (max-width: 820px) {
997
998 .opened + .wpo-pages-menu {
999 display: block;
1000 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
1001 }
1002 }
1003
1004 @media (min-width: 821px) {
1005
1006 .wpo-pages-menu {
1007 display: -ms-flexbox;
1008 display: flex;
1009 height: 77px;
1010 }
1011 }
1012
1013 .wpo-pages-menu > a {
1014 text-decoration: none;
1015 position: relative;
1016 color: inherit;
1017 text-align: center;
1018 box-sizing: border-box;
1019 display: block;
1020 color: #555d66;
1021 }
1022
1023 @media (min-width: 821px) {
1024
1025 .wpo-pages-menu > a {
1026 padding: 0 8px;
1027 height: 77px;
1028 display: -ms-flexbox;
1029 display: flex;
1030 -ms-flex-direction: column;
1031 flex-direction: column;
1032 -ms-flex-pack: center;
1033 justify-content: center;
1034 }
1035
1036 .wpo-pages-menu > a > span {
1037 display: block;
1038 margin: 0 auto;
1039 }
1040 }
1041
1042 @media (max-width: 820px) {
1043
1044 .wpo-pages-menu > a {
1045 padding: 15px;
1046 font-size: 1.2em;
1047 }
1048 }
1049
1050 .wpo-pages-menu > a.active::after {
1051 content: '';
1052 display: block;
1053 position: absolute;
1054 bottom: 0;
1055 left: 0;
1056 width: 100%;
1057 height: 3px;
1058 background: #E46B1F;
1059 color: #191e23;
1060 }
1061
1062 @media (max-width: 820px) {
1063
1064 .wpo-pages-menu > a.active::after {
1065 width: 3px;
1066 height: 100%;
1067 }
1068 }
1069
1070 @media (max-width: 820px) {
1071
1072 .wpo-pages-menu > a.active {
1073 color: #E46B1F;
1074 }
1075 }
1076
1077 .wpo-pages-menu > a:hover {
1078 background: #F9F9F9;
1079 color: #191e23;
1080 }
1081
1082 .wpo-pages-menu span.separator {
1083 display: block;
1084 width: 2px;
1085 background: #EFEFEF;
1086 margin-top: 18px;
1087 margin-bottom: 18px;
1088 margin-right: 5px;
1089 margin-left: 5px;
1090 }
1091
1092 @media (max-width: 820px) {
1093
1094 .wpo-pages-menu span.separator {
1095 width: 80%;
1096 height: 2px;
1097 margin: 10px 10%;
1098 }
1099 }
1100
1101 @media (max-width: 820px) {
1102
1103 .wpo-pages-menu {
1104 text-align: center;
1105 top: 100%;
1106 width: 100%;
1107 bottom: auto;
1108 background: #FFF;
1109 }
1110 }
1111
1112 #wp-optimize-nav-page-menu {
1113 position: absolute;
1114 right: 0;
1115 bottom: 0;
1116 display: -ms-flexbox;
1117 display: flex;
1118 height: 77px;
1119 -ms-flex-direction: column;
1120 flex-direction: column;
1121 padding: 0 20px;
1122 -ms-flex-align: center;
1123 align-items: center;
1124 -ms-flex-pack: center;
1125 justify-content: center;
1126 text-decoration: none
1127 }
1128
1129 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
1130 display: none;
1131 }
1132
1133 #wp-optimize-nav-page-menu.opened .dashicons-menu {
1134 display: none;
1135 }
1136
1137 @media (min-width: 821px) {
1138
1139 #wp-optimize-nav-page-menu {
1140 display: none;
1141 }
1142 }
1143
1144 /* DASHBOARD Menu */
1145
1146 /* Calculate column width with a $spacing gutter */
1147
1148 .wpo-dashboard-pages-menu {
1149 display: -ms-flexbox;
1150 display: flex;
1151 -ms-flex-wrap: wrap;
1152 flex-wrap: wrap
1153
1154 /* Same size for 1 to 3 items */
1155
1156 }
1157
1158 .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 {
1159 width: calc(33.333% - 13.33333px);
1160 }
1161
1162 .wpo-dashboard-pages-menu {/* above 3 items, change sizes */
1163 }
1164
1165 .wpo-dashboard-pages-menu[data-itemscount="4"] .wpo-dashboard-pages-menu__item {
1166 width: calc(25% - 15px);
1167 }
1168
1169 .wpo-dashboard-pages-menu[data-itemscount="5"] .wpo-dashboard-pages-menu__item {
1170 width: calc(20% - 16px);
1171 }
1172
1173 .wpo-dashboard-pages-menu[data-itemscount="6"] .wpo-dashboard-pages-menu__item {
1174 width: calc(16.66667% - 16.66667px);
1175 }
1176
1177 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1178 padding: 20px;
1179 margin-right: 20px;
1180 box-sizing: border-box;
1181 padding-bottom: 60px;
1182 min-width: 0;
1183 }
1184
1185 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item:last-child {
1186 margin-right: 0;
1187 }
1188
1189 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1190 margin-top: 0;
1191 }
1192
1193 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 .dashicons {
1194 color: #72777C;
1195 line-height: 1;
1196 height: 18px;
1197 margin-top: -2px;
1198 margin-right: 10px
1199 }
1200
1201 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a {
1202 position: absolute;
1203 bottom: 20px;
1204 left: 20px;
1205 width: calc(100% - 40px) !important;
1206 }
1207
1208 @media (max-width: 782px) {
1209
1210 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1211 width: 100%;
1212 margin-right: 0;
1213 padding-bottom: 20px;
1214 }
1215
1216 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1217 width: auto !important;
1218 left: auto;
1219 bottom: auto;
1220 top: 50%;
1221 transform: translateY(-50%);
1222 right: 20px;
1223 }
1224
1225 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1226 margin: 0;
1227 }
1228
1229 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1230 display: none;
1231 }
1232 }
1233
1234 /* Admin bar separator */
1235
1236 #wpadminbar .quicklinks .menupop.hover ul li.separator .ab-item.ab-empty-item {
1237 height: 2px;
1238 line-height: 2px;
1239 background: rgba(255, 255, 255, 0.0902);
1240 margin: 5px 10px;
1241 width: auto;
1242 min-width: 0;
1243 }
1244
1245 /* Unused images / wpo_smush_image / image grid*/
1246
1247 .wpo_unused_image, .wpo_smush_image {
1248 position: relative;
1249 margin: 4px;
1250 width: calc(50% - 8px);
1251 text-align: center;
1252
1253 }
1254
1255 @media (min-width: 500px) {
1256
1257 .wpo_unused_image, .wpo_smush_image {
1258 width: calc(25% - 8px);
1259 }
1260 }
1261
1262 @media (min-width: 782px) {
1263
1264 .wpo_unused_image, .wpo_smush_image {
1265 width: calc(16.6666% - 8px);
1266 }
1267 }
1268
1269 @media (min-width: 1100px) {
1270
1271 .wpo_unused_image, .wpo_smush_image {
1272 width: calc(12.5% - 8px);
1273 }
1274 }
1275
1276 .wpo_unused_image .wpo_unused_image__input, .wpo_smush_image .wpo_unused_image__input {
1277 position: absolute;
1278 top: 10px;
1279 visibility: hidden;
1280 }
1281
1282 .wpo_unused_image label, .wpo_smush_image label {
1283 display: block;
1284 width: 100%;
1285 position: relative;
1286 padding: 1px;
1287 border: 3px solid #EDEFF0;
1288 box-sizing: border-box;
1289 }
1290
1291 .wpo_unused_image label::before, .wpo_smush_image label::before {
1292 content: "";
1293 display: block;
1294 padding-top: 100%;
1295 }
1296
1297 .wpo_unused_image label .thumbnail, .wpo_smush_image label .thumbnail {
1298 position: absolute;
1299 top: 1px;
1300 left: 1px;
1301 width: calc(100% - 2px);
1302 height: calc(100% - 2px);
1303 background-repeat: no-repeat;
1304 background-size: cover;
1305 background-position: 50% 50%;
1306 overflow: hidden;
1307 background: rgba(220, 220, 220, 0.2);
1308 }
1309
1310 .wpo_unused_image label .thumbnail img, .wpo_smush_image label .thumbnail img {
1311 display: block;
1312 margin: 0;
1313 max-height: 100%;
1314 position: absolute;
1315 top: 50%;
1316 left: 50%;
1317 transform: translate(-50%,-50%);
1318 -webkit-user-select: none;
1319 -moz-user-select: none;
1320 -ms-user-select: none;
1321 user-select: none;
1322 }
1323
1324 .wpo_unused_image .wpo_unused_image__input:checked + label,
1325 .wpo_unused_image.checked label,
1326 .wpo_smush_image .wpo_unused_image__input:checked + label,
1327 .wpo_smush_image.checked label {
1328 border-color: #0272AA;
1329 }
1330
1331 .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 {
1332 position: absolute;
1333 z-index: 2;
1334 bottom: 13px;
1335 left: 50%;
1336 transform: translateX(-50%);
1337 display: none;
1338 }
1339
1340 .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 {
1341 display: inline-block;
1342 }
1343
1344 #wpo_unused_images, #wpo_smush_images_grid {
1345 width: calc(100% + 8px);
1346 margin-left: -4px;
1347 margin-right: -4px;
1348 max-height: 500px;
1349 overflow-y: auto;
1350 display: -ms-flexbox;
1351 display: flex;
1352 -ms-flex-wrap: wrap;
1353 flex-wrap: wrap;
1354
1355 }
1356
1357 #wpo_unused_images .wpo-fieldgroup, #wpo_smush_images_grid .wpo-fieldgroup {
1358 width: 100%;
1359 }
1360
1361 #wpo_unused_images a {
1362 outline: none;
1363 }
1364
1365 /* More Plugins page */
1366
1367 /* Plugins family / Premium */
1368
1369 p.wpo-plugin-installed {
1370 color: #009B24;
1371 }
1372
1373 /* Settings repeater */
1374
1375 .wpo-repeater__add {
1376 display: inline-block;
1377 cursor: pointer;
1378 font-weight: bold;
1379 text-decoration: none;
1380 }
1381
1382 /* Plugin familly tab */
1383
1384 .wpo-plugin-family__premium h2 {
1385 margin: 0;
1386 padding: 25px;
1387 }
1388
1389 .wpo-plugin-family__plugins {
1390 display: -ms-flexbox;
1391 display: flex;
1392 -ms-flex-wrap: wrap;
1393 flex-wrap: wrap;
1394 padding-left: 1px;
1395 padding-bottom: 1px;
1396 }
1397
1398 .wpo-plugin-family__plugin {
1399 -ms-flex: auto;
1400 flex: auto;
1401 width: 100%;
1402 padding: 30px;
1403 box-sizing: border-box;
1404 border: 1px solid #E3E4E7;
1405 margin-left: -1px;
1406 margin-bottom: -1px;
1407
1408 }
1409
1410 @media (min-width: 782px) {
1411
1412 .wpo-plugin-family__plugin {
1413 width: 50%;
1414 }
1415
1416 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1417 width: 100%;
1418 }
1419 }
1420
1421 @media (max-width: 1080px) {
1422
1423 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1424 width: 50%;
1425 }
1426 }
1427
1428 @media (max-width: 782px) {
1429
1430 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1431 width: 100%;
1432 }
1433 }
1434
1435 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
1436 padding: 0;
1437 }
1438
1439 /* Added for WPO Premium Features tab */
1440
1441 .wpo_feature_cont {
1442 width: 64.5%;
1443 }
1444
1445 .wpo_plugin_family_cont {
1446 width: 34.5%;
1447 }
1448
1449 @media (max-width: 1080px) {
1450
1451 .wpo_feature_cont,
1452 .wpo_plugin_family_cont {
1453 width: 100%;
1454 float: none;
1455 margin: 0;
1456 }
1457
1458 }
1459
1460 .wpo_feature_cont header, .wpo_plugin_family_cont header {
1461 padding: 20px;
1462
1463 }
1464
1465 @media (max-width: 1080px) {
1466
1467 .wpo_feature_cont header, .wpo_plugin_family_cont header {
1468 padding: 40px;
1469 }
1470 }
1471
1472 .wpo_feature_cont header h2, .wpo_plugin_family_cont header h2 {
1473 margin: 0;
1474 }
1475
1476 .wpo_feature_cont header p, .wpo_plugin_family_cont header p {
1477 margin-bottom: 0;
1478 }
1479
1480 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
1481 border: none;
1482 border-collapse: collapse;
1483 background-color: white;
1484 font-size: 120%;
1485 text-align: center;
1486 }
1487
1488 .wpo_feat_table td {
1489 border: 1px solid #F1F1F1;
1490 border-bottom-width: 4px;
1491 padding: 15px;
1492 }
1493
1494 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1495 background: rgba(241, 241, 241, 0.38);
1496 }
1497
1498 .wpo_feat_table p {
1499 padding: 0px 10px;
1500 margin: 5px 0px;
1501 font-size: 13px;
1502 }
1503
1504 .wpo_feat_table h4 {
1505 margin: 5px 0px;
1506 }
1507
1508 .wpo_feat_table .dashicons {
1509 width: 25px;
1510 height: 25px;
1511 font-size: 25px;
1512 line-height: 1;
1513 }
1514
1515 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
1516 color: green;
1517 }
1518
1519 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
1520 color: red;
1521 }
1522
1523 .wpo-premium-image {
1524 display: none;
1525 }
1526
1527 @media screen and (min-width: 720px) {
1528
1529 #wpoptimize_table_list_filter {
1530 width: 40%;
1531 }
1532
1533 .wpo-premium-image {
1534 display: block;
1535 float: left;
1536 padding: 16px 18px;
1537 width: 30px;
1538 height: auto;
1539 }
1540
1541 }
1542
1543 @media screen and (min-width: 1220px) {
1544
1545 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1546 width: 110px;
1547 }
1548
1549 }
1550
1551 .other-plugin-title {
1552 text-decoration: none;
1553 }
1554
1555 @media screen and (max-width: 782px) {
1556
1557 table.wpo_feat_table {
1558
1559 display: block;
1560 }
1561
1562 table.wpo_feat_table tr {
1563 display: -ms-flexbox;
1564 display: flex;
1565 -ms-flex-wrap: wrap;
1566 flex-wrap: wrap;
1567 }
1568
1569 table.wpo_feat_table td {
1570 display: block
1571 }
1572
1573 table.wpo_feat_table td:first-child {
1574 width: 100%;
1575 border-bottom: none;
1576 }
1577
1578 table.wpo_feat_table td:not(:first-child) {
1579 width: 50%;
1580 box-sizing: border-box;
1581 }
1582
1583 table.wpo_feat_table td:first-child:empty {
1584 display: none;
1585 }
1586
1587 table.wpo_feat_table td[data-colname]::before {
1588 content: attr(data-colname);
1589 font-size: 0.8rem;
1590 color: #CCC;
1591 line-height: 1;
1592 }
1593
1594 }
1595
1596 /* tablesorter */
1597
1598 #wp-optimize-wrap .wp-list-table td {
1599 word-break: break-all;
1600 }
1601
1602 @media screen and (max-width: 782px ) {
1603
1604 #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 {
1605 display: block;
1606 }
1607
1608 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
1609 padding: 3px 8px 3px 35%;
1610 word-break: break-word;
1611 box-sizing: border-box
1612
1613 }
1614
1615 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
1616 color: #B5B9BE;
1617 }
1618
1619 #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 {
1620 display: block;
1621 }
1622
1623 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
1624 display: block;
1625 box-sizing: border-box;
1626 }
1627
1628 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
1629 display: none !important;
1630 }
1631 }
1632
1633 th:not(.sorter-false) .tablesorter-header-inner {
1634
1635 color: #0074ab
1636
1637 }
1638
1639 th:not(.sorter-false) .tablesorter-header-inner::after {
1640 content: '';
1641 font-family: 'dashicons';
1642 font-size: 20px;
1643 line-height: 20px;
1644 height: 20px;
1645 width: 20px;
1646 display: inline-block;
1647 vertical-align: bottom;
1648 }
1649
1650 th.tablesorter-header.tablesorter-headerAsc,
1651 th.tablesorter-header.tablesorter-headerDesc {
1652 font-weight: 500;
1653 border-bottom-color: #0272AA;
1654 }
1655
1656 th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
1657 content: "\f140";
1658 }
1659
1660 th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after {
1661 content: "\f142";
1662 }
1663
1664 th.tablesorter-header:focus {
1665 outline: none;
1666 box-shadow: 0 0 3px rgba(0, 116, 171, 0.78)
1667
1668 }
1669
1670 th.tablesorter-header:focus:not(.tablesorter-headerAsc):not(.tablesorter-headerDesc) .tablesorter-header-inner::after {
1671 content: "\f142";
1672 opacity: 0.5;
1673 }
1674
1675 .tablesorter.hasFilters tr.filtered {
1676 display: none;
1677 }
1678