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

3,724 lines 76.9 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 #wpo-load-tables-in-batches.button {
1044 margin-bottom: 15px;
1045 }
1046 }
1047 @media (max-width: 782px) {
1048 #wp-optimize-wrap .button-large {
1049 display: block;
1050 width: 100%;
1051 }
1052 }
1053 #wp-optimize-wrap .red {
1054 color: #F00;
1055 }
1056 #wp-optimize-wrap div[id*=_notice] div.updated,
1057 #wp-optimize-wrap > .notice {
1058 margin-left: 0;
1059 margin-right: 0;
1060 }
1061 #wp-optimize-wrap textarea {
1062 width: 100%;
1063 border-radius: 5px;
1064 height: 100px;
1065 min-height: 100px;
1066 margin-top: 10px;
1067 margin-bottom: 10px;
1068 }
1069
1070 .notice.notice-error.wpo-warning,
1071 .notice.notice-warning.wpo-warning {
1072 margin-bottom: 18px;
1073 }
1074
1075 .notice.notice-warning.wpo-warning p {
1076 padding-left: 36px;
1077 position: relative;
1078 }
1079
1080 .notice.notice-warning.wpo-warning p > .dashicons {
1081 position: absolute;
1082 left: 0;
1083 font-size: 26px;
1084 top: 50%;
1085 transform: translateY(-50%);
1086 height: 26px;
1087 color: #FFB900;
1088 }
1089
1090 .button.button-block {
1091 display: block;
1092 width: 100%;
1093 text-align: center;
1094 }
1095
1096 .wpo-refresh-button {
1097 float: right;
1098 }
1099
1100 .wpo-refresh-button:hover {
1101 cursor: pointer;
1102 }
1103
1104 .wpo-refresh-button .dashicons {
1105 text-decoration: none;
1106 line-height: inherit;
1107 font-size: inherit;
1108 }
1109
1110 /* Helper classes */
1111 *[class*=wpo-badge] {
1112 display: inline-block;
1113 font-size: 0.8em;
1114 text-transform: uppercase;
1115 background: #F2F4F5;
1116 padding: 3px 5px;
1117 line-height: 1;
1118 border-radius: 3px;
1119 }
1120
1121 .wpo-badge__new {
1122 background: #DBE3E6;
1123 color: #00689a;
1124 }
1125
1126 .wpo-first-child {
1127 margin-top: 0;
1128 }
1129 .wpo-first-child span {
1130 font-size: 10px;
1131 color: #3c434a;
1132 font-weight: normal;
1133 }
1134
1135 .save-done {
1136 color: #009B24;
1137 font-size: 30px;
1138 }
1139
1140 .wpo-save-btn-container {
1141 display: -ms-flexbox;
1142 display: flex;
1143 -ms-flex-wrap: wrap;
1144 flex-wrap: wrap;
1145 -ms-flex-direction: row;
1146 flex-direction: row;
1147 -ms-flex-align: center;
1148 align-items: center;
1149 gap: 5px;
1150 }
1151 .wpo-save-btn-container .wpo_spinner {
1152 width: 20px;
1153 height: 20px;
1154 padding-left: 10px;
1155 display: none;
1156 position: relative;
1157 top: 0;
1158 }
1159 .wpo-save-btn-container .save-done {
1160 width: 30px;
1161 height: 30px;
1162 font-size: 30px;
1163 }
1164
1165 p.wpo-take-a-backup {
1166 display: inline-block;
1167 margin: 0;
1168 line-height: 1;
1169 padding-top: 8px;
1170 }
1171
1172 @media (min-width: 782px) {
1173 .button ~ p.wpo-take-a-backup {
1174 margin-left: 20px;
1175 }
1176 #wpo-load-tables-in-batches.button {
1177 margin-right: 15px;
1178 }
1179 }
1180 /* Postbox */
1181 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
1182 border: none;
1183 }
1184 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox > h3:first-child {
1185 margin-top: 0;
1186 }
1187
1188 .wpo-p25,
1189 .postbox.wpo-tab-postbox {
1190 padding: 25px;
1191 }
1192 @media (max-width: 480px) {
1193 .wpo-p25,
1194 .postbox.wpo-tab-postbox {
1195 padding: 15px;
1196 }
1197 }
1198
1199 .wpo-tab-postbox > h3:first-child {
1200 margin-top: 0;
1201 }
1202
1203 /* Field group */
1204 .wpo-fieldgroup {
1205 background: #F2F4F5;
1206 border-radius: 8px;
1207 padding: 20px 18px;
1208 }
1209 .wpo-fieldgroup:not(:last-child) {
1210 margin-bottom: 2em;
1211 }
1212 .wpo-fieldgroup > *:first-child {
1213 margin-top: 0;
1214 }
1215 .wpo-fieldgroup > *:last-child {
1216 margin-bottom: 0;
1217 }
1218 .wpo-fieldgroup.premium-only {
1219 position: relative;
1220 }
1221 .wpo-fieldgroup .switch + label {
1222 font-weight: 600;
1223 }
1224 .wpo-fieldgroup code, .wpo-fieldgroup pre.code {
1225 font-size: inherit;
1226 background: #d8dbdc;
1227 border-radius: 3px;
1228 }
1229 .wpo-fieldgroup pre.code {
1230 padding: 10px;
1231 }
1232 .wpo-fieldgroup ul.wpo-minify-cache-size li {
1233 line-height: normal;
1234 }
1235 .wpo-fieldgroup fieldset label {
1236 display: block;
1237 line-height: 20px;
1238 }
1239 .wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup {
1240 margin-bottom: 6px;
1241 }
1242 .wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup label {
1243 display: inline;
1244 }
1245
1246 .wpo-fieldgroup__subgroup:not(:last-of-type) {
1247 margin-bottom: 20px;
1248 }
1249
1250 /* The switches */
1251 #wp-optimize-wrap .switch {
1252 position: relative;
1253 display: inline-block;
1254 width: 38px;
1255 height: 18px;
1256 margin-right: 6px;
1257 box-sizing: border-box;
1258 /* Hide default HTML checkbox */
1259 }
1260 #wp-optimize-wrap .switch input {
1261 opacity: 0;
1262 width: 0;
1263 height: 0;
1264 }
1265 #wp-optimize-wrap .switch {
1266 /* The slider */
1267 }
1268 #wp-optimize-wrap .switch .slider {
1269 position: absolute;
1270 cursor: pointer;
1271 top: 0;
1272 left: 0;
1273 right: 0;
1274 bottom: 0;
1275 background-color: #F2F4F5;
1276 transition: 0.2s;
1277 }
1278 #wp-optimize-wrap .switch .slider::before {
1279 position: absolute;
1280 content: "";
1281 height: 8px;
1282 width: 8px;
1283 left: 2px;
1284 bottom: 2px;
1285 background-color: #555d66;
1286 border: 1px solid #555d66;
1287 transition: all 0.2s;
1288 }
1289 #wp-optimize-wrap .switch .slider::after {
1290 content: "";
1291 display: block;
1292 position: absolute;
1293 height: 4px;
1294 width: 3px;
1295 right: 4px;
1296 top: 4px;
1297 border-radius: 50%;
1298 border: 1px solid #72777C;
1299 box-sizing: content-box;
1300 }
1301 #wp-optimize-wrap .switch .slider {
1302 /* Rounded sliders */
1303 }
1304 #wp-optimize-wrap .switch .slider.round {
1305 border-radius: 23px;
1306 border: 2px solid #555d66;
1307 }
1308 #wp-optimize-wrap .switch .slider.round::before {
1309 border-radius: 50%;
1310 }
1311 #wp-optimize-wrap .switch input:checked + .slider {
1312 background: var(--wp-admin-theme-color, #0272AA);
1313 border-color: var(--wp-admin-theme-color, #0272AA);
1314 }
1315 #wp-optimize-wrap .switch input:checked + .slider::before {
1316 background: #FFF;
1317 border-color: #FFF;
1318 transform: translateX(20px);
1319 }
1320 #wp-optimize-wrap .switch input:checked + .slider::after {
1321 content: "";
1322 display: block;
1323 position: absolute;
1324 height: 6px;
1325 width: 2px;
1326 left: 7px;
1327 top: 4px;
1328 background: #FFF;
1329 border: none;
1330 }
1331 #wp-optimize-wrap .switch input:disabled + .slider,
1332 #wp-optimize-wrap .switch input:disabled:checked + .slider {
1333 background: rgba(85, 93, 102, 0.5);
1334 border-color: #555d66;
1335 opacity: 0.3;
1336 }
1337 #wp-optimize-wrap .switch input:focus + .slider {
1338 box-shadow: 0 0 0 2px #F2F4F5, 0 0 0 3px #555d66;
1339 }
1340 #wp-optimize-wrap .switch-container {
1341 display: block;
1342 clear: both;
1343 }
1344 #wp-optimize-wrap .switch-container label {
1345 line-height: 1;
1346 vertical-align: middle;
1347 }
1348 #wp-optimize-wrap .switch-container + small {
1349 margin-left: 49px;
1350 }
1351 #wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
1352 padding-top: 0;
1353 }
1354
1355 label.wpo-label__bold {
1356 font-weight: 600;
1357 }
1358
1359 /* Help popup */
1360 .wpo-info {
1361 position: relative;
1362 display: inline-block;
1363 }
1364 @media (max-width: 480px) {
1365 .wpo-info {
1366 display: block;
1367 }
1368 }
1369
1370 .wpo-info__content {
1371 opacity: 0;
1372 visibility: hidden;
1373 position: absolute;
1374 top: 100%;
1375 left: -25px;
1376 background: #FFF;
1377 padding: 20px;
1378 width: 380px;
1379 max-width: 380px;
1380 z-index: 5;
1381 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0), 0px 11px 25px 3000px rgba(0, 0, 0, 0);
1382 transition: 0.2s all;
1383 }
1384 @media (max-width: 480px) {
1385 .wpo-info__content {
1386 width: auto;
1387 }
1388 }
1389
1390 span.wpo-info__close {
1391 display: none;
1392 margin-left: 20px;
1393 color: #444;
1394 }
1395
1396 .wpo-info.opened span.wpo-info__close {
1397 display: inline-block;
1398 }
1399 .wpo-info.opened .wpo-info__content {
1400 opacity: 1;
1401 visibility: visible;
1402 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.3), 0px 11px 25px 3000px rgba(0, 0, 0, 0.3);
1403 }
1404 .wpo-info.opened a.wpo-info__trigger {
1405 z-index: 6;
1406 }
1407
1408 .wpo-info__content img,
1409 .wpo-info__content iframe {
1410 max-width: 100%;
1411 }
1412
1413 a.wpo-info__trigger {
1414 display: inline-block;
1415 text-decoration: none;
1416 padding: 10px;
1417 position: relative;
1418 background: #FFF;
1419 margin-left: -10px;
1420 }
1421
1422 a.wpo-info__trigger span.dashicons {
1423 text-decoration: none;
1424 vertical-align: middle;
1425 }
1426
1427 .wpo_section.wpo_group.wpo-feature-is-disabled .wpo-fieldgroup:not(.wpo-show) {
1428 opacity: 0.5;
1429 }
1430
1431 /* Custom Block UI */
1432 .wpo_shade {
1433 display: block;
1434 position: absolute;
1435 left: 0;
1436 right: 0;
1437 top: 0;
1438 bottom: 0;
1439 width: 100%;
1440 height: 100%;
1441 z-index: 9979;
1442 opacity: 1;
1443 background-color: rgba(255, 255, 255, 0.88);
1444 }
1445
1446 .wpo_shade.hidden {
1447 display: none;
1448 }
1449
1450 .wpo_shade_inner {
1451 text-align: center;
1452 padding-top: 80px;
1453 }
1454
1455 .wpo_shade_inner h4 {
1456 font-size: 2em;
1457 }
1458
1459 .wpo_shade_inner .dashicons.dashicons-update-alt {
1460 font-size: 50px;
1461 height: 50px;
1462 width: 50px;
1463 }
1464
1465 .wpo-rotate {
1466 animation: rotate 1s linear infinite;
1467 transform-origin: 50% 50%;
1468 }
1469
1470 .wpo-info.highlight-dashicons span.dashicons {
1471 color: green;
1472 font-weight: bold;
1473 }
1474
1475 p.wpo-description-show-links {
1476 z-index: 999;
1477 position: relative;
1478 }
1479
1480 /* TABS */
1481 #wp-optimize-wrap h2.nav-tab-wrapper {
1482 margin-bottom: 0;
1483 border-bottom: none;
1484 position: relative;
1485 }
1486 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab,
1487 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover,
1488 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus,
1489 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active {
1490 border: none;
1491 background: transparent;
1492 margin: 0;
1493 border-top: 3px solid transparent;
1494 padding: 7px 15px;
1495 color: var(--wp-admin-theme-color, #0272AA);
1496 }
1497 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons,
1498 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons,
1499 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons,
1500 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active .dashicons {
1501 display: block;
1502 margin: 0 auto;
1503 color: #72777C;
1504 font-size: 30px;
1505 width: 30px;
1506 height: 30px;
1507 }
1508 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill,
1509 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill,
1510 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill,
1511 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill {
1512 display: inline-block;
1513 margin-left: 6px;
1514 padding: 4px;
1515 font-size: 10px;
1516 line-height: 1;
1517 border-radius: 3px;
1518 font-weight: 300;
1519 text-transform: uppercase;
1520 letter-spacing: 0.06em;
1521 }
1522 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only,
1523 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only,
1524 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only,
1525 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
1526 background: var(--wp-admin-theme-color, #0272AA);
1527 color: #FFF;
1528 }
1529 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled,
1530 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled,
1531 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.disabled,
1532 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.disabled {
1533 background: #777;
1534 color: #FFF;
1535 }
1536 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.hidden,
1537 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.hidden,
1538 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.hidden,
1539 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.hidden {
1540 display: none;
1541 }
1542 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active,
1543 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover,
1544 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
1545 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
1546 background: #FFF;
1547 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
1548 border-top-color: var(--wp-admin-theme-color, #0272AA);
1549 }
1550 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons,
1551 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons,
1552 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons,
1553 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
1554 color: var(--wp-admin-theme-color, #0272AA);
1555 }
1556 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1557 display: block;
1558 float: right;
1559 position: relative;
1560 }
1561 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab,
1562 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover,
1563 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus,
1564 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active {
1565 position: relative;
1566 }
1567 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab .dashicons,
1568 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover .dashicons,
1569 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus .dashicons,
1570 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active .dashicons {
1571 display: inline-block;
1572 font-size: 20px;
1573 height: 18px;
1574 transform: translateY(4px);
1575 }
1576 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > span {
1577 display: none;
1578 }
1579 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover a.nav-tab::after {
1580 content: "";
1581 display: block;
1582 position: absolute;
1583 bottom: 0;
1584 right: 0;
1585 height: 2px;
1586 width: 100%;
1587 background-color: #0172aa;
1588 }
1589 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span {
1590 position: absolute;
1591 display: block;
1592 background: #FFF;
1593 padding: 15px;
1594 right: 0;
1595 top: 100%;
1596 z-index: 4;
1597 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
1598 width: 350px;
1599 }
1600 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span a {
1601 display: block;
1602 font-size: 14px;
1603 font-weight: normal;
1604 padding: 6px 3px;
1605 text-align: center;
1606 }
1607 @media (max-width: 782px) {
1608 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1609 display: none;
1610 }
1611 #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
1612 display: none;
1613 }
1614 }
1615 #wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
1616 display: block;
1617 float: right;
1618 }
1619 @media (min-width: 782px) {
1620 #wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
1621 display: none;
1622 }
1623 }
1624 #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 {
1625 text-align: right;
1626 }
1627 #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 {
1628 color: #B5B9BE;
1629 font-size: 18px;
1630 display: inline-block;
1631 height: auto;
1632 line-height: inherit;
1633 width: 20px;
1634 }
1635 @media (min-width: 782px) {
1636 #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 {
1637 position: absolute;
1638 bottom: 14px;
1639 right: 0;
1640 font-size: 12px;
1641 font-weight: 400;
1642 text-decoration: none;
1643 padding: 0;
1644 }
1645 #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 {
1646 color: #B5B9BE;
1647 font-size: 18px;
1648 display: inline-block;
1649 height: auto;
1650 line-height: inherit;
1651 width: 20px;
1652 }
1653 }
1654
1655 @media (max-width: 782px) {
1656 .wpo-mobile-menu-opened h2.nav-tab-wrapper button {
1657 display: none;
1658 }
1659 .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
1660 display: block;
1661 float: none;
1662 }
1663 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab {
1664 display: block !important;
1665 }
1666 .wpo-mobile-menu-opened h2.nav-tab-wrapper a:not(.nav-tab-active) {
1667 background: #f9f9f9 !important;
1668 }
1669 .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 {
1670 border-top: none;
1671 border-left: 3px solid;
1672 }
1673 .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 {
1674 display: inline-block;
1675 line-height: inherit;
1676 }
1677 }
1678 /* Pages MENU */
1679 .wpo-pages-menu {
1680 position: absolute;
1681 bottom: 0;
1682 right: 0;
1683 display: none;
1684 }
1685 @media (max-width: 820px) {
1686 .opened + .wpo-pages-menu {
1687 display: block;
1688 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
1689 }
1690 }
1691 @media (min-width: 821px) {
1692 .wpo-pages-menu {
1693 display: -ms-flexbox;
1694 display: flex;
1695 height: 77px;
1696 }
1697 }
1698 .wpo-pages-menu > a {
1699 text-decoration: none;
1700 position: relative;
1701 color: inherit;
1702 text-align: center;
1703 box-sizing: border-box;
1704 display: block;
1705 color: #555d66;
1706 }
1707 @media (min-width: 821px) {
1708 .wpo-pages-menu > a {
1709 padding: 0 8px;
1710 height: 77px;
1711 display: -ms-flexbox;
1712 display: flex;
1713 -ms-flex-direction: column;
1714 flex-direction: column;
1715 -ms-flex-pack: center;
1716 justify-content: center;
1717 }
1718 .wpo-pages-menu > a > span {
1719 display: block;
1720 margin: 0 auto;
1721 }
1722 }
1723 @media (max-width: 820px) {
1724 .wpo-pages-menu > a {
1725 padding: 15px;
1726 font-size: 1.2em;
1727 }
1728 }
1729 .wpo-pages-menu > a.active::after {
1730 content: "";
1731 display: block;
1732 position: absolute;
1733 bottom: 0;
1734 left: 0;
1735 width: 100%;
1736 height: 3px;
1737 background: #E46B1F;
1738 color: #191e23;
1739 }
1740 @media (max-width: 820px) {
1741 .wpo-pages-menu > a.active::after {
1742 width: 3px;
1743 height: 100%;
1744 }
1745 }
1746 @media (max-width: 820px) {
1747 .wpo-pages-menu > a.active {
1748 color: #E46B1F;
1749 }
1750 }
1751 .wpo-pages-menu > a:hover {
1752 background: #F9F9F9;
1753 color: #191e23;
1754 }
1755 .wpo-pages-menu span.separator {
1756 display: block;
1757 width: 2px;
1758 background: #EFEFEF;
1759 margin-top: 18px;
1760 margin-bottom: 18px;
1761 margin-right: 5px;
1762 margin-left: 5px;
1763 }
1764 @media (max-width: 820px) {
1765 .wpo-pages-menu span.separator {
1766 width: 80%;
1767 height: 2px;
1768 margin: 10px 10%;
1769 }
1770 }
1771 @media (max-width: 820px) {
1772 .wpo-pages-menu {
1773 text-align: center;
1774 top: 100%;
1775 width: 100%;
1776 bottom: auto;
1777 background: #FFF;
1778 }
1779 }
1780 body.rtl .wpo-pages-menu {
1781 left: 0;
1782 right: auto;
1783 }
1784
1785 #wp-optimize-nav-page-menu {
1786 position: absolute;
1787 right: 0;
1788 bottom: 0;
1789 display: -ms-flexbox;
1790 display: flex;
1791 height: 77px;
1792 -ms-flex-direction: column;
1793 flex-direction: column;
1794 padding: 0 20px;
1795 -ms-flex-align: center;
1796 align-items: center;
1797 -ms-flex-pack: center;
1798 justify-content: center;
1799 text-decoration: none;
1800 color: #135e96;
1801 }
1802 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
1803 display: none;
1804 }
1805 #wp-optimize-nav-page-menu.opened .dashicons-menu {
1806 display: none;
1807 }
1808 @media (min-width: 821px) {
1809 #wp-optimize-nav-page-menu {
1810 display: none;
1811 }
1812 }
1813 body.rtl #wp-optimize-nav-page-menu {
1814 right: auto;
1815 left: 0;
1816 }
1817
1818 /* DASHBOARD Menu */
1819 /* Calculate column width with a $spacing gutter */
1820 .wpo-dashboard-pages-menu {
1821 display: -ms-flexbox;
1822 display: flex;
1823 -ms-flex-wrap: wrap;
1824 flex-wrap: wrap;
1825 /* Same size for 1 to 3 items */
1826 }
1827 .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 {
1828 width: calc(33.333% - 13.33333px);
1829 }
1830 .wpo-dashboard-pages-menu {
1831 /* above 3 items, change sizes */
1832 }
1833 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1834 width: calc(25% - 15px);
1835 }
1836 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1837 width: calc(20% - 16px);
1838 }
1839 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1840 padding: 20px;
1841 margin-right: 20px;
1842 box-sizing: border-box;
1843 padding-bottom: 60px;
1844 min-width: 0;
1845 }
1846 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item:last-child {
1847 margin-right: 0;
1848 }
1849 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1850 margin-top: 0;
1851 }
1852 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 .dashicons {
1853 color: #72777C;
1854 line-height: 1;
1855 height: 18px;
1856 margin-top: -2px;
1857 margin-right: 10px;
1858 }
1859 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a {
1860 position: absolute;
1861 bottom: 20px;
1862 left: 20px;
1863 width: calc(100% - 40px) !important;
1864 }
1865 @media (max-width: 782px) {
1866 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1867 width: 100%;
1868 margin-right: 0;
1869 padding-bottom: 20px;
1870 }
1871 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1872 width: auto !important;
1873 left: auto;
1874 bottom: auto;
1875 top: 50%;
1876 transform: translateY(-50%);
1877 right: 20px;
1878 }
1879 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1880 margin: 0;
1881 }
1882 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1883 display: none;
1884 }
1885 }
1886
1887 /* CSS for adverts */
1888 .updraft-ad-container.updated,
1889 .updraft-ad-container {
1890 margin-left: 0px;
1891 margin-right: 0px;
1892 position: relative;
1893 padding-right: 80px;
1894 }
1895
1896 /* General notices (non WPO) on the WPO page */
1897 body[class*=WP-Optimize] .notice, body[class*=WP-Optimize] .error,
1898 body[class*=wp-optimize] .notice,
1899 body[class*=wp-optimize] .error {
1900 margin-left: 0;
1901 margin-right: 0;
1902 }
1903
1904 /*
1905 Make the main error notice sticky
1906 */
1907 body.wp-core-ui.is-scrolled .wpo-main-error-notice {
1908 position: fixed;
1909 top: 132px;
1910 left: 160px;
1911 right: 0;
1912 z-index: 20;
1913 transition: 0.2s all;
1914 }
1915
1916 /* Remove other notices */
1917 div#wpbody-content > .notice:not(.wpo-notice),
1918 div#wpbody-content > .warning:not(.wpo-notice),
1919 div#wpbody-content > .updated:not(.wpo-notice),
1920 div#wpbody-content > .error:not(.wpo-notice) {
1921 display: none;
1922 }
1923
1924 .toplevel_page_WP-Optimize.rtl .notice,
1925 .toplevel_page_WP-Optimize.rtl div.updated,
1926 .toplevel_page_WP-Optimize.rtl div.error,
1927 .toplevel_page_WP-Optimize .notice,
1928 .toplevel_page_WP-Optimize div.updated,
1929 .toplevel_page_WP-Optimize div.error {
1930 margin-right: 0;
1931 }
1932
1933 body.rtl .updraft-ad-container.updated,
1934 body.rtl .updraft-ad-container {
1935 padding-right: 10px;
1936 padding-left: 80px;
1937 }
1938
1939 .updraft_notice_container {
1940 padding: 7px;
1941 display: -ms-flexbox;
1942 display: flex;
1943 -ms-flex-align: left;
1944 align-items: left;
1945 -ms-flex-direction: column;
1946 flex-direction: column;
1947 height: auto;
1948 overflow: hidden;
1949 }
1950
1951 .updraft_review_notice_container {
1952 padding: 12px;
1953 display: -ms-flexbox;
1954 display: flex;
1955 }
1956
1957 .updraft_advert_content_left {
1958 float: none;
1959 width: 80px;
1960 padding-top: 9px;
1961 margin-right: 9px;
1962 }
1963
1964 .updraft_advert_content_left_extra {
1965 float: none;
1966 width: 100px;
1967 padding-right: 15px;
1968 display: -ms-flexbox;
1969 display: flex;
1970 -ms-flex-align: center;
1971 align-items: center;
1972 }
1973
1974 .updraft_advert_content_left img {
1975 min-height: 72px;
1976 min-width: 72px;
1977 }
1978
1979 .updraft_advert_content_right {
1980 float: none;
1981 width: auto;
1982 overflow: hidden;
1983 font-size: 16px;
1984 }
1985
1986 .updraft_advert_content_right p {
1987 font-size: 16px !important;
1988 }
1989
1990 .updraft_advert_bottom {
1991 margin: 10px 0;
1992 padding: 10px;
1993 font-size: 140%;
1994 background-color: #FFF;
1995 border-color: #E6DB55;
1996 border: 1px solid;
1997 border-radius: 4px;
1998 }
1999
2000 .updraft_advert_button_container {
2001 margin-bottom: 10px;
2002 display: -ms-flexbox;
2003 display: flex;
2004 -ms-flex-align: center;
2005 align-items: center;
2006 }
2007
2008 .updraft_advert_button_container .dashicons {
2009 margin-left: 10px;
2010 }
2011
2012 .updraft-advert-dismiss {
2013 position: absolute;
2014 font-size: 13px;
2015 top: 5px;
2016 right: 10px;
2017 }
2018
2019 body.rtl .updraft-advert-dismiss {
2020 left: 10px;
2021 right: auto;
2022 }
2023
2024 h3.updraft_advert_heading {
2025 margin-top: 5px !important;
2026 margin-bottom: 5px !important;
2027 }
2028
2029 h4.updraft_advert_heading {
2030 margin-top: 2px !important;
2031 margin-bottom: 3px !important;
2032 }
2033
2034 .updraft_center_content {
2035 text-align: center;
2036 margin-bottom: 5px;
2037 }
2038
2039 .updraft_notice_link {
2040 padding-left: 5px;
2041 }
2042
2043 .updraft_text_center {
2044 text-align: center;
2045 }
2046
2047 .wpo-main-header + .updraft-ad-container,
2048 .wpo-main-header + .updated {
2049 margin-bottom: 20px;
2050 }
2051
2052 .processed .updated {
2053 margin: 0;
2054 }
2055
2056 @media screen and (min-width: 560px) {
2057 .updraft_notice_container {
2058 -ms-flex-direction: row;
2059 flex-direction: row;
2060 -ms-flex-align: center;
2061 align-items: center;
2062 }
2063 .updraft_advert_content_left, .updraft_advert_content_left_extra {
2064 float: left;
2065 }
2066 }
2067 @media screen and (max-width: 560px) {
2068 body.rtl .updraft-ad-container.updated,
2069 body.rtl .updraft-ad-container {
2070 padding-right: 10px;
2071 padding-left: 10px;
2072 }
2073 }
2074 @media screen and (max-width: 768px) {
2075 .wpo-main-header + .updraft-ad-container,
2076 .wpo-main-header + .updated {
2077 margin-right: 0;
2078 }
2079 }
2080 /* Unused images / wpo_smush_image / image grid*/
2081 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2082 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2083 .wpo_smush_image {
2084 position: relative;
2085 margin: 4px;
2086 width: calc(50% - 8px);
2087 text-align: center;
2088 }
2089 @media (min-width: 500px) {
2090 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2091 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2092 .wpo_smush_image {
2093 width: calc(25% - 8px);
2094 }
2095 }
2096 @media (min-width: 782px) {
2097 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2098 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2099 .wpo_smush_image {
2100 width: calc(16.6666% - 8px);
2101 }
2102 }
2103 @media (min-width: 1100px) {
2104 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2105 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2106 .wpo_smush_image {
2107 width: calc(12.5% - 8px);
2108 }
2109 }
2110 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2111 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2112 .wpo_smush_image .wpo_unused_image__input {
2113 position: absolute;
2114 top: 10px;
2115 opacity: 0;
2116 width: 0;
2117 height: 0;
2118 }
2119 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2120 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2121 .wpo_smush_image .button {
2122 background: #f6f7f7;
2123 border-radius: 3px;
2124 }
2125 #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,
2126 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:focus,
2127 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:active,
2128 .wpo_smush_image .button:focus,
2129 .wpo_smush_image .button:active {
2130 background: #f6f7f7;
2131 }
2132 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2133 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2134 .wpo_smush_image .button:hover {
2135 background: #f0f0f1;
2136 }
2137 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2138 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2139 .wpo_smush_image label {
2140 display: block;
2141 width: 100%;
2142 position: relative;
2143 padding: 1px;
2144 border: 3px solid #F2F4F5;
2145 box-sizing: border-box;
2146 }
2147 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2148 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2149 .wpo_smush_image label::before {
2150 content: "";
2151 display: block;
2152 padding-top: 100%;
2153 }
2154 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2155 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2156 .wpo_smush_image label .thumbnail {
2157 position: absolute;
2158 top: 1px;
2159 left: 1px;
2160 width: calc(100% - 2px);
2161 height: calc(100% - 2px);
2162 background-repeat: no-repeat;
2163 background-size: cover;
2164 background-position: 50% 50%;
2165 overflow: hidden;
2166 background: rgba(220, 220, 220, 0.2);
2167 }
2168 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2169 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2170 .wpo_smush_image label .thumbnail img {
2171 display: block;
2172 margin: 0;
2173 max-height: 100%;
2174 position: absolute;
2175 top: 50%;
2176 left: 50%;
2177 transform: translate(-50%, -50%);
2178 -webkit-user-select: none;
2179 -ms-user-select: none;
2180 user-select: none;
2181 }
2182 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2183 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2184 .wpo_smush_image label span.dashicons {
2185 position: absolute;
2186 top: 50%;
2187 left: 50%;
2188 transform: translate(-50%, -50%);
2189 font-size: 25px;
2190 width: 25px;
2191 opacity: 0.2;
2192 }
2193 #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,
2194 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input:checked + label,
2195 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image.selected label,
2196 .wpo_smush_image .wpo_unused_image__input:checked + label,
2197 .wpo_smush_image.selected label {
2198 border-color: #0272AA;
2199 }
2200 #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2201 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2202 .wpo_smush_image:focus-within label {
2203 box-shadow: 0 0 4px #0272AA;
2204 }
2205 #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,
2206 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a,
2207 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button,
2208 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button:active,
2209 .wpo_smush_image a,
2210 .wpo_smush_image a.button,
2211 .wpo_smush_image a.button:active {
2212 position: absolute;
2213 z-index: 2;
2214 bottom: 13px;
2215 left: 50%;
2216 transform: translateX(-50%);
2217 display: none;
2218 }
2219 #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,
2220 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a,
2221 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button,
2222 #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button:active,
2223 .wpo_smush_image:hover a,
2224 .wpo_smush_image:hover a.button,
2225 .wpo_smush_image:hover a.button:active {
2226 display: inline-block;
2227 }
2228
2229 #wpo_unused_images, #wpo_unused_images_trash, #wpo_smush_images_grid {
2230 width: calc(100% + 8px);
2231 margin-left: -4px;
2232 margin-right: -4px;
2233 max-height: 500px;
2234 overflow-y: auto;
2235 display: -ms-flexbox;
2236 display: flex;
2237 -ms-flex-wrap: wrap;
2238 flex-wrap: wrap;
2239 position: relative;
2240 }
2241 #wpo_unused_images .wpo-fieldgroup, #wpo_unused_images_trash .wpo-fieldgroup, #wpo_smush_images_grid .wpo-fieldgroup {
2242 width: 100%;
2243 margin: 4px;
2244 }
2245
2246 #wpo_unused_images a, #wpo_unused_images_trash a {
2247 outline: none;
2248 }
2249
2250 .wpo-analytics__premium-mask,
2251 .wpo-unused-images__premium-mask,
2252 .wpo-unused-image-sizes__premium-mask,
2253 .wpo-images-dimensions__premium-mask {
2254 position: absolute;
2255 top: 0;
2256 left: 0;
2257 width: 100%;
2258 height: 100%;
2259 z-index: 1;
2260 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
2261 display: -ms-flexbox;
2262 display: flex;
2263 -ms-flex-align: center;
2264 align-items: center;
2265 -ms-flex-pack: center;
2266 justify-content: center;
2267 }
2268
2269 .wpo-analytics__premium-mask,
2270 .wpo-unused-image-sizes__premium-mask {
2271 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2272 }
2273
2274 a.wpo-analytics__premium-link,
2275 a.wpo-unused-images__premium-link,
2276 a.wpo-images-dimensions__premium-link {
2277 background: #FFF;
2278 display: inline-block;
2279 padding: 10px;
2280 border-radius: 3px;
2281 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2282 }
2283
2284 p.wpo-images-dimension-show-links {
2285 z-index: 999;
2286 position: relative;
2287 }
2288
2289 .wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link,
2290 .wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link:hover {
2291 background: none;
2292 border: none;
2293 color: #F00;
2294 }
2295
2296 /* More Plugins page */
2297 /* Plugins family / Premium */
2298 p.wpo-plugin-installed {
2299 color: #009B24;
2300 }
2301
2302 /* Settings repeater */
2303 .wpo-repeater__add {
2304 display: inline-block;
2305 cursor: pointer;
2306 font-weight: bold;
2307 text-decoration: none;
2308 }
2309 .wpo-repeater__add .dashicons {
2310 transform: translateY(-2px);
2311 }
2312
2313 /* Plugin family tab */
2314 .wpo-plugin-family__premium h2 {
2315 margin: 0;
2316 padding: 25px;
2317 }
2318
2319 .wpo-plugin-family__plugins {
2320 display: -ms-flexbox;
2321 display: flex;
2322 -ms-flex-wrap: wrap;
2323 flex-wrap: wrap;
2324 padding-left: 1px;
2325 padding-bottom: 1px;
2326 }
2327
2328 .wpo-plugin-family__plugin {
2329 -ms-flex: auto;
2330 flex: auto;
2331 width: 100%;
2332 padding: 30px;
2333 box-sizing: border-box;
2334 border: 1px solid #E3E4E7;
2335 margin-left: -1px;
2336 margin-bottom: -1px;
2337 }
2338 .wpo-plugin-family__plugin:last-of-type {
2339 -ms-flex-positive: 0;
2340 flex-grow: 0;
2341 }
2342 @media (min-width: 782px) {
2343 .wpo-plugin-family__plugin {
2344 width: 50%;
2345 }
2346 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2347 width: 100%;
2348 }
2349 }
2350 @media (max-width: 1080px) {
2351 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2352 width: 50%;
2353 }
2354 }
2355 @media (max-width: 782px) {
2356 .wpo-plugin-family__free .wpo-plugin-family__plugin {
2357 width: 100%;
2358 }
2359 }
2360
2361 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
2362 padding: 0;
2363 }
2364
2365 /* Added for WPO Premium Features tab */
2366 .wpo_feature_cont {
2367 width: 64.5%;
2368 }
2369
2370 .wpo_plugin_family_cont {
2371 width: 34.5%;
2372 }
2373
2374 @media (max-width: 1080px) {
2375 .wpo_feature_cont,
2376 .wpo_plugin_family_cont {
2377 width: 100%;
2378 float: none;
2379 margin: 0;
2380 }
2381 }
2382 .wpo_feature_cont header,
2383 .wpo_plugin_family_cont header {
2384 padding: 20px;
2385 }
2386 @media (max-width: 1080px) {
2387 .wpo_feature_cont header,
2388 .wpo_plugin_family_cont header {
2389 padding: 40px;
2390 }
2391 }
2392 .wpo_feature_cont header h2,
2393 .wpo_plugin_family_cont header h2 {
2394 margin: 0;
2395 }
2396 .wpo_feature_cont header p,
2397 .wpo_plugin_family_cont header p {
2398 margin-bottom: 0;
2399 }
2400
2401 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
2402 border: none;
2403 border-collapse: collapse;
2404 background-color: white;
2405 font-size: 18px;
2406 text-align: center;
2407 }
2408
2409 .wpo_feat_table td {
2410 border: 1px solid #F1F1F1;
2411 border-bottom-width: 4px;
2412 padding: 15px;
2413 }
2414 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2415 background: rgba(241, 241, 241, 0.38);
2416 }
2417 .wpo_feat_table p {
2418 padding: 0px 10px;
2419 margin: 5px 0px;
2420 font-size: 13px;
2421 }
2422 .wpo_feat_table h4 {
2423 margin: 5px 0px;
2424 }
2425 .wpo_feat_table .dashicons {
2426 width: 25px;
2427 height: 25px;
2428 font-size: 25px;
2429 line-height: 1;
2430 }
2431 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
2432 color: green;
2433 }
2434 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
2435 color: red;
2436 }
2437 .wpo_feat_table tr.wpo-main-feature-row td {
2438 background: #f1f1f1;
2439 border-bottom-color: #fafafa;
2440 }
2441 .wpo_feat_table tr.wpo-main-feature-row td img.wpo-premium-image {
2442 width: 64px;
2443 }
2444
2445 .wpo-premium-image {
2446 display: none;
2447 }
2448
2449 @media screen and (min-width: 720px) {
2450 #wpoptimize_table_list_filter {
2451 width: 40%;
2452 }
2453 .wpo-premium-image {
2454 display: block;
2455 float: left;
2456 padding: 16px 18px;
2457 width: 30px;
2458 height: auto;
2459 }
2460 }
2461 @media screen and (min-width: 1220px) {
2462 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2463 width: 110px;
2464 }
2465 }
2466 .other-plugin-title {
2467 text-decoration: none;
2468 }
2469
2470 @media screen and (max-width: 782px) {
2471 table.wpo_feat_table {
2472 display: block;
2473 }
2474 table.wpo_feat_table tr {
2475 display: -ms-flexbox;
2476 display: flex;
2477 -ms-flex-wrap: wrap;
2478 flex-wrap: wrap;
2479 }
2480 table.wpo_feat_table td {
2481 display: block;
2482 }
2483 table.wpo_feat_table td:first-child {
2484 width: 100%;
2485 border-bottom: none;
2486 }
2487 table.wpo_feat_table td:not(:first-child) {
2488 width: 50%;
2489 box-sizing: border-box;
2490 }
2491 table.wpo_feat_table td:first-child:empty {
2492 display: none;
2493 }
2494 table.wpo_feat_table td[data-colname]::before {
2495 content: attr(data-colname);
2496 font-size: 0.8rem;
2497 color: #CCC;
2498 line-height: 1;
2499 }
2500 }
2501 .wpo-cache-feature-image {
2502 width: 40px;
2503 padding: 16px 14px;
2504 }
2505
2506 /* tablesorter */
2507 #wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span {
2508 font-size: 11px;
2509 }
2510 #wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span.status {
2511 color: #9B0000;
2512 font-weight: bold;
2513 }
2514 #wp-optimize-wrap #wpoptimize_table_list td span {
2515 font-size: 13px;
2516 }
2517 #wp-optimize-wrap .wp-list-table td {
2518 word-break: break-all;
2519 }
2520 @media screen and (max-width: 782px) {
2521 #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 {
2522 display: block;
2523 }
2524 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2525 padding: 3px 8px 3px 35%;
2526 word-break: break-word;
2527 box-sizing: border-box;
2528 }
2529 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
2530 color: #B5B9BE;
2531 }
2532 #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 {
2533 display: block;
2534 }
2535 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
2536 display: block;
2537 box-sizing: border-box;
2538 }
2539 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
2540 display: none !important;
2541 }
2542 }
2543 body.rtl #wp-optimize-wrap .wpo-table-list-filter {
2544 text-align: left;
2545 }
2546 @media screen and (max-width: 782px) {
2547 body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2548 padding: 3px 35% 3px 8px;
2549 }
2550 }
2551
2552 .wpo-text__dim .dashicons-info {
2553 margin-top: 2px;
2554 margin-right: 5px;
2555 border-radius: 30px;
2556 background: #fff;
2557 color: #F00;
2558 }
2559
2560 #page_cache_length_value {
2561 min-height: 28px;
2562 height: 28px;
2563 position: relative;
2564 top: 2px;
2565 }
2566
2567 #wp_optimize_preload_cache_status {
2568 margin-left: 10px;
2569 display: inline-block;
2570 color: #82868B;
2571 font-size: smaller;
2572 }
2573
2574 .align-left {
2575 margin: 10px 10px 0px 0px;
2576 float: left;
2577 }
2578
2579 textarea.cache-settings {
2580 display: block;
2581 clear: both;
2582 min-height: 225px;
2583 overflow: scroll;
2584 min-width: 75%;
2585 margin: 10px 0px;
2586 }
2587
2588 #wp-optimize-purge-cache,
2589 #wp-optimize-purge-cache ~ span,
2590 #wp-optimize-purge-cache ~ img {
2591 vertical-align: middle;
2592 top: auto;
2593 }
2594
2595 #wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
2596 font-size: 12px;
2597 }
2598
2599 #wpo_browser_cache_error_message {
2600 padding-top: 10px;
2601 padding-bottom: 10px;
2602 margin-left: 0;
2603 margin-bottom: 10px;
2604 }
2605 #wpo_browser_cache_error_message:empty {
2606 display: none;
2607 }
2608
2609 #wp-optimize-nav-tab-wpo_cache-advanced-contents label,
2610 #wp-optimize-nav-tab-wpo_cache-preload-contents label,
2611 #wp-optimize-nav-tab-wpo_cache-cache-contents label {
2612 font-weight: 600;
2613 }
2614 #wp-optimize-nav-tab-wpo_cache-advanced-contents label em,
2615 #wp-optimize-nav-tab-wpo_cache-preload-contents label em,
2616 #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
2617 font-weight: normal;
2618 }
2619
2620 .wpo-gzip-already-enabled span.dashicons.dashicons-yes,
2621 .wpo-enabled > span.dashicons.dashicons-yes {
2622 font-size: 40px;
2623 width: 40px;
2624 height: 40px;
2625 line-height: 40px;
2626 vertical-align: middle;
2627 color: green;
2628 }
2629
2630 #wpo_gzip_control_panel {
2631 margin-bottom: 10px;
2632 }
2633 #wpo_gzip_control_panel .wpo_shade_inner {
2634 padding-top: 150px;
2635 }
2636
2637 #wp-optimize-wrap .filename {
2638 display: inline-block;
2639 padding: 6px 0;
2640 }
2641 #wp-optimize-wrap .no-files-yet .filename {
2642 font-style: italic;
2643 }
2644 #wp-optimize-wrap .processed {
2645 margin: 0;
2646 }
2647 #wp-optimize-wrap .processed .wpo_min_log {
2648 padding: 8px;
2649 background: white;
2650 border: 1px solid #CDCDCD;
2651 border-radius: 4px;
2652 line-height: 1.5em;
2653 }
2654 #wp-optimize-wrap .processed .wpo_min_log ul {
2655 overflow-x: auto;
2656 }
2657 #wp-optimize-wrap .processed .wpo_min_log ul li {
2658 white-space: nowrap;
2659 }
2660 #wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
2661 color: #dc3232;
2662 }
2663 #wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
2664 opacity: 0.5;
2665 }
2666 #wp-optimize-wrap .processed .wpo_min_log h5 {
2667 margin-top: 0;
2668 margin-bottom: 8px;
2669 border-bottom: 1px solid #cdcdcd;
2670 padding-bottom: 6px;
2671 }
2672 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error {
2673 color: #9B3600;
2674 }
2675 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
2676 color: #9B3600;
2677 }
2678 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
2679 color: rgb(40.7843137255%, 14.2087286528%, 0%);
2680 }
2681 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
2682 color: #9c9c9c;
2683 display: inline-block;
2684 }
2685 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
2686 content: "—";
2687 display: inline-block;
2688 margin: 0 10px;
2689 }
2690 #wp-optimize-wrap .show-if-enabled {
2691 display: none;
2692 }
2693 #wp-optimize-wrap .is-enabled .show-if-enabled {
2694 display: block;
2695 }
2696 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
2697 display: none;
2698 }
2699 #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]) {
2700 display: none;
2701 }
2702 #wp-optimize-wrap .wpo-minify-features {
2703 padding-top: 1em;
2704 margin-top: 1em;
2705 border-top: 1px solid #bbb;
2706 }
2707 #wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
2708 margin-bottom: 1em;
2709 }
2710 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
2711 display: none;
2712 }
2713 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
2714 display: block;
2715 }
2716 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
2717 margin-bottom: 0;
2718 }
2719 #wp-optimize-wrap .wpo-fieldgroup .wpo-minify-default-exclusions p {
2720 margin: 0;
2721 }
2722 #wp-optimize-wrap .defer-js-settings {
2723 padding-left: 1em;
2724 border-left: 2px solid #E2E2E2;
2725 margin-left: 0.5em;
2726 }
2727 #wp-optimize-wrap .wpo-fieldgroup .wpo-inline-advertise {
2728 display: inline-block;
2729 vertical-align: top;
2730 line-height: 20px;
2731 }
2732 #wp-optimize-wrap {
2733 /*
2734 Asset preload table
2735 */
2736 }
2737 #wp-optimize-wrap .asset-preload-list {
2738 margin-bottom: 1em;
2739 }
2740 #wp-optimize-wrap .asset-preload-list td.asset-href {
2741 width: 55%;
2742 }
2743 #wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
2744 width: 10%;
2745 }
2746 #wp-optimize-wrap .asset-preload-list tr.editing {
2747 display: none;
2748 }
2749 #wp-optimize-wrap .asset-preload-list tr.form {
2750 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1294117647);
2751 }
2752 #wp-optimize-wrap .asset-preload-list tr.form td {
2753 background: #FFF;
2754 border: none;
2755 padding: 10px;
2756 }
2757 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
2758 border-radius: 0 5px 5px 0;
2759 }
2760 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
2761 position: relative;
2762 }
2763 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
2764 content: "";
2765 width: 10px;
2766 height: 10px;
2767 background: #FFF;
2768 display: block;
2769 position: absolute;
2770 top: 0;
2771 left: 0;
2772 transform: translate(10px, -5px) rotate(45deg);
2773 }
2774 #wp-optimize-wrap .asset-preload-list tbody + tr.form td {
2775 padding-top: 37px;
2776 position: relative;
2777 }
2778 #wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
2779 content: attr(data-label);
2780 position: absolute;
2781 top: 1em;
2782 left: 10px;
2783 text-transform: uppercase;
2784 color: #D0D2D4;
2785 }
2786 #wp-optimize-wrap .asset-preload-list input#preload_href {
2787 width: 100%;
2788 min-height: 28px;
2789 }
2790 #wp-optimize-wrap .asset-preload-list select#preload_type {
2791 width: 100%;
2792 }
2793 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
2794 #wp-optimize-wrap .asset-preload-list td.asset-edit {
2795 text-align: right;
2796 }
2797 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button,
2798 #wp-optimize-wrap .asset-preload-list td.asset-edit button {
2799 display: inline-block;
2800 }
2801 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after,
2802 #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
2803 content: "|";
2804 padding-left: 6px;
2805 padding-right: 4px;
2806 }
2807
2808 /* Modal window */
2809 body.wpo-modal-is-opened {
2810 overflow: hidden;
2811 }
2812
2813 .wpo-modal--container {
2814 position: fixed;
2815 top: 0;
2816 left: 0;
2817 padding: 3em;
2818 width: 100%;
2819 height: 100%;
2820 box-sizing: border-box;
2821 z-index: 9999;
2822 overflow: auto;
2823 }
2824
2825 .wpo-modal {
2826 position: relative;
2827 background: #FFF;
2828 width: calc(100% - 6em);
2829 top: 50%;
2830 transform: translateY(-50%);
2831 margin: 0 auto;
2832 padding: 2em;
2833 box-sizing: border-box;
2834 z-index: 2;
2835 }
2836 .wpo-modal > .wpo-modal--close {
2837 border: none;
2838 background: none;
2839 position: absolute;
2840 top: 10px;
2841 right: 10px;
2842 width: 20px;
2843 height: 20px;
2844 line-height: 1;
2845 padding: 0;
2846 }
2847
2848 .wpo-modal--bg {
2849 position: fixed;
2850 top: 0;
2851 left: 0;
2852 width: 100%;
2853 height: 100%;
2854 background: rgba(0, 0, 0, 0.74);
2855 z-index: 1;
2856 }
2857
2858 .wpo-confirm .wpo-modal--content > h3 {
2859 font-size: 2em;
2860 }
2861
2862 .wpo-confirm .wpo-modal--content > h3 .dashicons {
2863 font-size: 30px;
2864 width: 30px;
2865 height: 30px;
2866 transform: translateY(-5px);
2867 }
2868
2869 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2870 color: #feb901;
2871 }
2872
2873 @media (max-width: 782px) {
2874 .wpo-modal--container {
2875 padding: 1em;
2876 display: -ms-flexbox;
2877 display: flex;
2878 -ms-flex-direction: column;
2879 flex-direction: column;
2880 }
2881 .admin-bar .wpo-modal--container {
2882 padding-top: calc(46px + 1em);
2883 }
2884 .wpo-modal {
2885 width: 100%;
2886 top: auto;
2887 transform: none;
2888 margin: auto;
2889 }
2890 }
2891 @media (min-width: 780px) {
2892 .power-tweaks--list {
2893 display: -ms-flexbox;
2894 display: flex;
2895 -ms-flex-direction: row;
2896 flex-direction: row;
2897 -ms-flex-wrap: wrap;
2898 flex-wrap: wrap;
2899 }
2900 }
2901 .power-tweaks--list .wpo-power-tweak {
2902 width: 100%;
2903 }
2904 @media (min-width: 780px) {
2905 .power-tweaks--list .wpo-power-tweak {
2906 width: calc(25% - 1em);
2907 margin-right: 1em;
2908 }
2909 }
2910 @media (min-width: 1080px) {
2911 .power-tweaks--list .wpo-power-tweak {
2912 width: calc(33.33333% - 1em);
2913 margin-right: 1em;
2914 }
2915 }
2916 .power-tweaks--list .wpo-power-tweak {
2917 background: #f2f4f5;
2918 border-radius: 1em;
2919 padding: 1.5em;
2920 margin-bottom: 1em;
2921 box-sizing: border-box;
2922 }
2923 .power-tweaks--list .wpo-power-tweak h4 {
2924 margin-top: 0;
2925 }
2926 .power-tweaks--list .wpo-power-tweak .description {
2927 margin-bottom: 1em;
2928 }
2929 .power-tweaks--list .wpo-power-tweak .details {
2930 padding: 1em;
2931 background: #FFF;
2932 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2933 margin-top: 1em;
2934 margin-bottom: 1em;
2935 }
2936 .power-tweaks--list .wpo-power-tweak .actions {
2937 margin-top: 1em;
2938 margin-bottom: 1em;
2939 }
2940 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status {
2941 max-height: 230px;
2942 overflow-y: auto;
2943 margin: 20px 0;
2944 border: 1px solid #c3c4c7;
2945 scrollbar-width: thin;
2946 scrollbar-color: #a9a9a9 #f2f4f5;
2947 }
2948 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar {
2949 width: 8px;
2950 }
2951 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-track {
2952 background: #f2f4f5;
2953 }
2954 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-thumb {
2955 background-color: #a9a9a9;
2956 border-radius: 4px;
2957 }
2958 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table {
2959 border: none;
2960 border-right: 1px solid #c3c4c7;
2961 }
2962 .power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table thead th {
2963 position: sticky;
2964 top: 0;
2965 z-index: 1;
2966 background: #fff;
2967 box-shadow: inset 0 -1px 0 #c3c4c7;
2968 }
2969 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2970 margin-top: 1em;
2971 font-size: 0.8em;
2972 color: #a9a9a9;
2973 }
2974 .power-tweaks--list .wpo-power-tweak .tweak-is-running {
2975 display: none;
2976 }
2977 .power-tweaks--list .wpo-power-tweak.running {
2978 position: relative;
2979 }
2980 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2981 display: -ms-flexbox;
2982 display: flex;
2983 -ms-flex-align: center;
2984 align-items: center;
2985 -ms-flex-pack: center;
2986 justify-content: center;
2987 position: absolute;
2988 top: 0;
2989 bottom: 0;
2990 left: 0;
2991 right: 0;
2992 background: rgba(242, 244, 245, 0.9);
2993 z-index: 1;
2994 border-radius: 1em;
2995 font-size: 1.7em;
2996 }
2997 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
2998 visibility: visible;
2999 }
3000 .power-tweaks--list a.show-faqs span.dashicons {
3001 font-size: inherit;
3002 height: auto;
3003 width: auto;
3004 line-height: inherit;
3005 text-decoration: none;
3006 margin-left: 4px;
3007 }
3008
3009 .wpo-table-usage__premium-mask {
3010 position: absolute;
3011 top: 0;
3012 left: 0;
3013 width: 100%;
3014 height: 100%;
3015 z-index: 1;
3016 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
3017 display: -ms-flexbox;
3018 display: flex;
3019 -ms-flex-align: center;
3020 align-items: center;
3021 -ms-flex-pack: center;
3022 justify-content: center;
3023 }
3024 .wpo-table-usage__premium-mask a.wpo-table-usage__premium-link {
3025 background: #FFF;
3026 display: inline-block;
3027 padding: 10px;
3028 border-radius: 3px;
3029 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
3030 }
3031
3032 #wpo_404_detector_results h1 {
3033 line-height: 1.2;
3034 word-wrap: break-word;
3035 font-size: 1.2rem;
3036 }
3037
3038 .wpo-dash {
3039 display: -ms-flexbox;
3040 display: flex;
3041 -ms-flex-direction: column;
3042 flex-direction: column;
3043 font-family: "Inter", sans-serif;
3044 }
3045
3046 .wpo-dash-toolbar {
3047 display: none;
3048 }
3049
3050 .wpo-dash-link {
3051 color: #2271B1;
3052 text-decoration: none;
3053 font-weight: 500;
3054 }
3055 .wpo-dash-link:hover, .wpo-dash-link:active {
3056 color: #2271B1;
3057 opacity: 0.7;
3058 text-decoration: none;
3059 }
3060 .wpo-dash-link:focus {
3061 color: #2271B1;
3062 box-shadow: none;
3063 outline: none;
3064 }
3065
3066 .wpo-warn {
3067 color: #b26900;
3068 font-weight: 500;
3069 text-decoration: none;
3070 }
3071 .wpo-warn:hover, .wpo-warn:active {
3072 color: #b26900;
3073 opacity: 0.7;
3074 text-decoration: none;
3075 }
3076 .wpo-warn:focus {
3077 color: #b26900;
3078 box-shadow: none;
3079 outline: none;
3080 }
3081
3082 .wpo-promo-app:hover, .wpo-promo-app:active {
3083 color: #50575e;
3084 }
3085 .wpo-promo-app:focus {
3086 color: #50575e;
3087 box-shadow: none;
3088 outline: none;
3089 }
3090
3091 .wpo-refresh-btn {
3092 display: -ms-inline-flexbox;
3093 display: inline-flex;
3094 -ms-flex-align: center;
3095 align-items: center;
3096 gap: 4px;
3097 background: none;
3098 border: none;
3099 padding: 0;
3100 cursor: pointer;
3101 font-size: 13px;
3102 color: #2271B1;
3103 font-weight: 500;
3104 }
3105 .wpo-refresh-btn:hover {
3106 opacity: 0.7;
3107 }
3108 .wpo-refresh-btn .dashicons {
3109 font-size: 16px;
3110 width: 16px;
3111 height: 16px;
3112 }
3113 .wpo-refresh-btn .dashicons.wpo-spinning {
3114 animation: wpo-spin 1s linear infinite;
3115 }
3116
3117 @keyframes wpo-spin {
3118 to {
3119 transform: rotate(360deg);
3120 }
3121 }
3122 .wpo-top-row {
3123 display: -ms-grid;
3124 display: grid;
3125 -ms-grid-columns: 1fr 1fr;
3126 grid-template-columns: 1fr 1fr;
3127 gap: 0;
3128 }
3129
3130 .wpo-mod-grid {
3131 display: -ms-grid;
3132 display: grid;
3133 -ms-grid-columns: 1fr 1fr;
3134 grid-template-columns: 1fr 1fr;
3135 gap: 12px;
3136 }
3137
3138 .wpo-card,
3139 .wpo-mod-card {
3140 background: #fff;
3141 border: 1px solid #ddd;
3142 padding: 1rem 1.25rem;
3143 }
3144
3145 .wpo-mod-card {
3146 display: -ms-flexbox;
3147 display: flex;
3148 -ms-flex-direction: column;
3149 flex-direction: column;
3150 gap: 8px;
3151 min-width: 0;
3152 box-shadow: 0 0 1px 0 rgba(59, 59, 59, 0.06), 0 1px 1px 0 rgba(59, 59, 59, 0.05), 0 2px 1px 0 rgba(59, 59, 59, 0.03), 0 4px 2px 0 rgba(59, 59, 59, 0.01), 0 7px 2px 0 rgba(59, 59, 59, 0);
3153 }
3154
3155 .wpo-inactive-card {
3156 opacity: 0.8;
3157 }
3158
3159 .wpo-setup-eyebrow {
3160 display: -ms-flexbox;
3161 display: flex;
3162 -ms-flex-align: center;
3163 align-items: center;
3164 gap: 5px;
3165 font-size: 12px;
3166 font-weight: 600;
3167 color: #339900;
3168 text-transform: uppercase;
3169 letter-spacing: 0.05em;
3170 }
3171
3172 .wpo-setup-eyebrow.grey-out {
3173 color: #9FA4A7;
3174 }
3175
3176 .wpo-setup-eyebrow .wpo-dot {
3177 background: currentColor;
3178 }
3179
3180 .wpo-setup-title {
3181 font-size: 32px;
3182 font-weight: 600;
3183 color: #1C252C;
3184 margin: 12px 0 5px;
3185 }
3186
3187 .wpo-setup-sub {
3188 font-size: 14px;
3189 font-weight: 400;
3190 color: #4F565B;
3191 margin: 0 0 15px;
3192 }
3193
3194 .wpo-setup-meta {
3195 width: 100%;
3196 position: absolute;
3197 bottom: -2px;
3198 display: -ms-flexbox;
3199 display: flex;
3200 -ms-flex-direction: row;
3201 flex-direction: row;
3202 -ms-flex-pack: justify;
3203 justify-content: space-between;
3204 -ms-flex-align: center;
3205 align-items: center;
3206 }
3207
3208 .wpo-setup-meta span {
3209 font-size: 12px;
3210 color: #50575e;
3211 }
3212
3213 .wpo-setup-meta .icon-meta {
3214 margin-right: 4px;
3215 }
3216
3217 .wpo-setup-meta a {
3218 font-size: 13px;
3219 }
3220
3221 .wpo-setup-meta a.button.button-setup {
3222 background: #2271B1;
3223 color: #fff;
3224 padding: 0 25px;
3225 height: 25px;
3226 min-height: 25px;
3227 border-radius: 3px;
3228 display: -ms-flexbox;
3229 display: flex;
3230 -ms-flex-align: center;
3231 align-items: center;
3232 box-shadow: none !important;
3233 outline: none !important;
3234 border: none !important;
3235 }
3236
3237 .wpo-setup-meta a.button.button-setup:hover {
3238 opacity: 0.7;
3239 }
3240
3241 .wpo-setup-meta a.button.button-setup span.dashicons.dashicons-arrow-right-alt {
3242 color: #fff;
3243 height: 20px;
3244 margin-left: 5px;
3245 line-height: 1.8;
3246 }
3247
3248 .wpo-setup-meta span.wpo-running-label {
3249 display: -ms-flexbox;
3250 display: flex;
3251 -ms-flex-pack: justify;
3252 justify-content: space-between;
3253 -ms-flex-align: center;
3254 align-items: center;
3255 }
3256
3257 .wpo-setup-meta a.wpo-dash-link {
3258 display: -ms-flexbox;
3259 display: flex;
3260 -ms-flex-direction: row;
3261 flex-direction: row;
3262 -ms-flex-pack: justify;
3263 justify-content: space-between;
3264 -ms-flex-align: center;
3265 align-items: center;
3266 }
3267
3268 .wpo-big-num {
3269 font-size: 40px;
3270 font-weight: 600;
3271 color: #1d2327;
3272 }
3273
3274 .wpo-big-num--green {
3275 color: #339900;
3276 }
3277
3278 .wpo-big-num--zero.grey-out {
3279 color: #9FA4A7;
3280 }
3281
3282 .wpo-big-num--zero span {
3283 font-size: 18px;
3284 }
3285
3286 .wpo-savings-sub {
3287 font-size: 14px;
3288 color: #696F72;
3289 margin: 8px 0 25px;
3290 }
3291
3292 .wpo-savings-bar-label {
3293 font-size: 11px;
3294 color: #8c8f94;
3295 margin-bottom: 6px;
3296 }
3297
3298 .wpo-bar-wrap {
3299 height: 8px;
3300 border-radius: 4px;
3301 background: #eee;
3302 display: -ms-flexbox;
3303 display: flex;
3304 overflow: hidden;
3305 margin-bottom: 10px;
3306 }
3307
3308 .wpo-bar-seg {
3309 height: 100%;
3310 transition: width 0.6s ease;
3311 }
3312
3313 .wpo-bar-legend {
3314 display: -ms-flexbox;
3315 display: flex;
3316 gap: 14px;
3317 -ms-flex-wrap: wrap;
3318 flex-wrap: wrap;
3319 }
3320
3321 .wpo-legend-item {
3322 display: -ms-flexbox;
3323 display: flex;
3324 -ms-flex-align: center;
3325 align-items: center;
3326 gap: 5px;
3327 font-size: 11px;
3328 color: #50575e;
3329 }
3330
3331 .wpo-legend-square {
3332 width: 10px;
3333 height: 10px;
3334 border-radius: 2px;
3335 -ms-flex-negative: 0;
3336 flex-shrink: 0;
3337 }
3338
3339 .wpo-card-saving-bar {
3340 position: relative;
3341 height: 100%;
3342 }
3343
3344 .wpo-bar-wrap.wpo-bar-wrap--empty .wpo-bar-seg {
3345 width: 100%;
3346 height: 100%;
3347 background: #F1F5F8;
3348 border-radius: 4px;
3349 }
3350
3351 .wpo-modules-label {
3352 font-size: 12px;
3353 font-weight: 500;
3354 text-transform: uppercase;
3355 color: #696F72;
3356 margin-bottom: 5px;
3357 }
3358
3359 .wpo-mod-header {
3360 display: -ms-flexbox;
3361 display: flex;
3362 -ms-flex-pack: justify;
3363 justify-content: space-between;
3364 -ms-flex-align: center;
3365 align-items: center;
3366 }
3367
3368 .wpo-mod-icon-title {
3369 display: -ms-flexbox;
3370 display: flex;
3371 -ms-flex-align: center;
3372 align-items: center;
3373 gap: 7px;
3374 font-size: 13px;
3375 color: #50575e;
3376 }
3377
3378 .wpo-mod-big {
3379 font-size: 22px;
3380 font-weight: 500;
3381 color: #1d2327;
3382 line-height: 1.1;
3383 }
3384
3385 .wpo-mod-big span {
3386 font-size: 14px;
3387 font-weight: 400;
3388 color: #50575e;
3389 }
3390
3391 .wpo-mod-desc {
3392 font-size: 12px;
3393 color: #50575e;
3394 line-height: 1.5;
3395 margin: 4px 0 0;
3396 }
3397
3398 .wpo-feature-list {
3399 display: -ms-flexbox;
3400 display: flex;
3401 -ms-flex-direction: column;
3402 flex-direction: column;
3403 gap: 6px;
3404 border-top: 1px solid #eee;
3405 padding-top: 8px;
3406 }
3407
3408 .wpo-feat-row {
3409 display: -ms-flexbox;
3410 display: flex;
3411 -ms-flex-pack: justify;
3412 justify-content: space-between;
3413 -ms-flex-align: center;
3414 align-items: center;
3415 font-size: 12px;
3416 }
3417
3418 .wpo-feat-name {
3419 color: #1C252C;
3420 display: -ms-flexbox;
3421 display: flex;
3422 -ms-flex-align: center;
3423 align-items: center;
3424 gap: 4px;
3425 }
3426
3427 .wpo-feat-name--truncate {
3428 overflow: hidden;
3429 }
3430
3431 .wpo-feat-name--truncate .wpo-dot {
3432 min-width: 8px;
3433 }
3434
3435 .wpo-feat-tasks {
3436 overflow: hidden;
3437 text-overflow: ellipsis;
3438 white-space: nowrap;
3439 }
3440
3441 .wpo-feat-val {
3442 color: #696F72;
3443 -ms-flex-negative: 0;
3444 flex-shrink: 0;
3445 margin-left: 8px;
3446 }
3447
3448 .wpo-feat-val.premium {
3449 color: #C4511C;
3450 }
3451
3452 .wpo-mod-footer {
3453 display: -ms-flexbox;
3454 display: flex;
3455 -ms-flex-pack: justify;
3456 justify-content: space-between;
3457 -ms-flex-align: center;
3458 align-items: center;
3459 padding-top: 15px;
3460 border-top: 1px solid #eee;
3461 margin-top: auto;
3462 }
3463
3464 .wpo-mod-footer span {
3465 font-size: 11px;
3466 color: #8c8f94;
3467 }
3468
3469 .wpo-mod-footer a {
3470 font-size: 12px;
3471 }
3472
3473 .wpo-badge {
3474 display: -ms-inline-flexbox;
3475 display: inline-flex;
3476 -ms-flex-align: center;
3477 align-items: center;
3478 gap: 5px;
3479 font-size: 11px;
3480 font-weight: 500;
3481 padding: 5px 15px;
3482 border-radius: 20px;
3483 }
3484
3485 .wpo-badge.active {
3486 background: #e0f2e0;
3487 color: #267300;
3488 }
3489
3490 .wpo-badge.scheduled {
3491 background: #e0f2e0;
3492 color: #267300;
3493 }
3494
3495 .wpo-badge.inactive {
3496 background: #f0f0f0;
3497 color: #555;
3498 border: 1px solid #ddd;
3499 }
3500
3501 .wpo-badge.active::before,
3502 .wpo-badge.scheduled::before {
3503 content: "✓";
3504 font-size: 11px;
3505 font-weight: 700;
3506 margin-right: 3px;
3507 }
3508
3509 .wpo-dash *[class*=wpo-badge] {
3510 text-transform: capitalize;
3511 }
3512
3513 .wpo-dot {
3514 font-size: 0;
3515 width: 8px;
3516 height: 8px;
3517 background: #9FA4A7;
3518 border-radius: 20px;
3519 }
3520
3521 .wpo-dot-on {
3522 background: #66CC66;
3523 }
3524
3525 .wpo-dot-off {
3526 background: #E5E7E9;
3527 }
3528
3529 .grey-out span.wpo-dot-on {
3530 color: #9FA4A7;
3531 }
3532
3533 .wpo-notice {
3534 background: #f1f8fd;
3535 border: 1px solid #C7E2F6;
3536 border-left: 2px solid #2271B1;
3537 padding: 8px 10px;
3538 display: -ms-flexbox;
3539 display: flex;
3540 gap: 8px;
3541 -ms-flex-align: start;
3542 align-items: flex-start;
3543 font-size: 12px;
3544 color: #50575e;
3545 line-height: 1.5;
3546 margin: 5px 0 10px;
3547 }
3548
3549 .wpo-notice a {
3550 color: #2271B1;
3551 text-decoration: underline;
3552 }
3553
3554 .wpo-promo {
3555 border: 1px solid #FDE5CC;
3556 border-radius: 14px;
3557 background: #FFF5EB;
3558 padding: 0.75rem 1.25rem;
3559 display: -ms-flexbox;
3560 display: flex;
3561 -ms-flex-align: center;
3562 align-items: center;
3563 gap: 1rem;
3564 -ms-flex-wrap: wrap;
3565 flex-wrap: wrap;
3566 margin-top: 20px;
3567 }
3568
3569 .wpo-promo-label {
3570 font-size: 13px;
3571 line-height: 18px;
3572 font-weight: 600;
3573 color: #C4511C;
3574 }
3575
3576 .wpo-promo-apps {
3577 display: -ms-flexbox;
3578 display: flex;
3579 gap: 3rem;
3580 -ms-flex: 1;
3581 flex: 1;
3582 -ms-flex-pack: center;
3583 justify-content: center;
3584 }
3585
3586 .wpo-promo-app {
3587 font-size: 12px;
3588 color: #50575e;
3589 display: -ms-flexbox;
3590 display: flex;
3591 -ms-flex-direction: row;
3592 flex-direction: row;
3593 -ms-flex-align: start;
3594 align-items: flex-start;
3595 gap: 2px;
3596 text-decoration: none;
3597 }
3598 .wpo-promo-app:hover {
3599 opacity: 0.85;
3600 text-decoration: none;
3601 }
3602
3603 .wpo-promo-app img {
3604 display: block;
3605 width: 25px;
3606 height: 25px;
3607 object-fit: contain;
3608 margin-top: -3px;
3609 }
3610
3611 .wpo-promo-app .wpo-promo-app-name {
3612 display: block;
3613 color: #1d2327;
3614 font-weight: 600;
3615 font-size: 12px;
3616 }
3617
3618 .wpo-promo-app span {
3619 display: block;
3620 margin-top: 5px;
3621 }
3622
3623 .wpo-promo-btn {
3624 margin-left: auto;
3625 font-size: 12px;
3626 background: #2271B1;
3627 color: #fff !important;
3628 border: none;
3629 padding: 9px 0;
3630 border-radius: 4px;
3631 cursor: pointer;
3632 text-decoration: none;
3633 width: 152px;
3634 text-align: center;
3635 display: -ms-inline-flexbox;
3636 display: inline-flex;
3637 -ms-flex-align: center;
3638 align-items: center;
3639 -ms-flex-pack: center;
3640 justify-content: center;
3641 gap: 4px;
3642 }
3643
3644 .wpo-promo-btn-icon {
3645 font-size: 14px;
3646 width: 14px;
3647 height: 14px;
3648 transform: rotate(-45deg);
3649 -ms-flex-negative: 0;
3650 flex-shrink: 0;
3651 }
3652
3653 /* Icons */
3654 .wpo-dash .wpo-dash-icon {
3655 width: 15px;
3656 height: 15px;
3657 font-size: 15px;
3658 }
3659
3660 .wpo-dash-link span.dashicons {
3661 color: #2271b1;
3662 font-size: 12px;
3663 }
3664
3665 .wpo-dash a > span.dashicons {
3666 height: inherit;
3667 margin-right: -2px;
3668 text-align: right;
3669 }
3670
3671 .wpo-notice .wpo-dash-icon {
3672 color: #3F81D1;
3673 font-size: 16px;
3674 }
3675
3676 .wpo-top-row {
3677 background-color: #F8FBFC;
3678 border: 1px solid #ddd;
3679 border-radius: 16px;
3680 margin-bottom: 30px;
3681 padding: 25px 0;
3682 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
3683 }
3684
3685 .wpo-top-row .wpo-card {
3686 background: transparent;
3687 position: relative;
3688 border: none;
3689 padding: 0;
3690 margin: 0 20px;
3691 }
3692
3693 span.size-unit {
3694 font-size: 18px;
3695 }
3696
3697 .wpo-unused-images-count {
3698 color: #D90000;
3699 }
3700
3701 .wpo-feat-row.wpo-backup-before-cleanup span.dashicons.dashicons-arrow-right-alt {
3702 font-size: 13px;
3703 margin-top: -1px;
3704 }
3705
3706 @media (max-width: 782px) {
3707 .wpo-mod-grid {
3708 -ms-grid-columns: 1fr;
3709 grid-template-columns: 1fr;
3710 }
3711 .wpo-top-row {
3712 -ms-grid-columns: 1fr;
3713 grid-template-columns: 1fr;
3714 }
3715 .wpo-top-row .wpo-card:nth-child(2) {
3716 margin: 20px;
3717 }
3718 .wpo-promo-apps {
3719 gap: 1rem;
3720 }
3721 .wpo-setup-meta {
3722 bottom: -7px;
3723 }
3724 }