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

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