PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.6.1
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.6.1
4.7.0 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 All 111 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 4.6.1, at css/wp-optimize-admin.css

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