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

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