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

2,841 lines 58.8 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 #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 #wpoptimize_table_list td:nth-child(2) span {
2374 font-size: 11px;
2375 }
2376 #wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span.status {
2377 color: #9B0000;
2378 font-weight: bold;
2379 }
2380 #wp-optimize-wrap #wpoptimize_table_list td span {
2381 font-size: 13px;
2382 }
2383 #wp-optimize-wrap .wp-list-table td {
2384 word-break: break-all;
2385 }
2386 @media screen and (max-width: 782px) {
2387 #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 {
2388 display: block;
2389 }
2390 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2391 padding: 3px 8px 3px 35%;
2392 word-break: break-word;
2393 box-sizing: border-box;
2394 }
2395 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
2396 color: #B5B9BE;
2397 }
2398 #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 {
2399 display: block;
2400 }
2401 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
2402 display: block;
2403 box-sizing: border-box;
2404 }
2405 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
2406 display: none !important;
2407 }
2408 }
2409 body.rtl #wp-optimize-wrap .wpo-table-list-filter {
2410 text-align: left;
2411 }
2412 @media screen and (max-width: 782px) {
2413 body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2414 padding: 3px 35% 3px 8px;
2415 }
2416 }
2417
2418 .wpo-text__dim .dashicons-info {
2419 margin-top: 2px;
2420 margin-right: 5px;
2421 border-radius: 30px;
2422 background: #fff;
2423 color: #F00;
2424 }
2425
2426 #page_cache_length_value {
2427 height: 28px;
2428 position: relative;
2429 top: 2px;
2430 }
2431
2432 #wp_optimize_preload_cache_status {
2433 margin-left: 10px;
2434 display: inline-block;
2435 color: #82868B;
2436 font-size: smaller;
2437 }
2438
2439 .align-left {
2440 margin: 10px 10px 0px 0px;
2441 float: left;
2442 }
2443
2444 textarea.cache-settings {
2445 display: block;
2446 clear: both;
2447 min-height: 225px;
2448 overflow: scroll;
2449 min-width: 75%;
2450 margin: 10px 0px;
2451 }
2452
2453 #wp-optimize-purge-cache,
2454 #wp-optimize-purge-cache ~ span,
2455 #wp-optimize-purge-cache ~ img {
2456 vertical-align: middle;
2457 top: auto;
2458 }
2459
2460 #wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
2461 font-size: 12px;
2462 }
2463
2464 #wpo_browser_cache_error_message {
2465 padding-top: 10px;
2466 padding-bottom: 10px;
2467 margin-left: 0;
2468 margin-bottom: 10px;
2469 }
2470 #wpo_browser_cache_error_message:empty {
2471 display: none;
2472 }
2473
2474 #wp-optimize-nav-tab-wpo_cache-advanced-contents label,
2475 #wp-optimize-nav-tab-wpo_cache-preload-contents label,
2476 #wp-optimize-nav-tab-wpo_cache-cache-contents label {
2477 font-weight: 600;
2478 }
2479 #wp-optimize-nav-tab-wpo_cache-advanced-contents label em,
2480 #wp-optimize-nav-tab-wpo_cache-preload-contents label em,
2481 #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
2482 font-weight: normal;
2483 }
2484
2485 .wpo-gzip-already-enabled span.dashicons.dashicons-yes,
2486 .wpo-enabled > span.dashicons.dashicons-yes {
2487 font-size: 40px;
2488 width: 40px;
2489 height: 40px;
2490 line-height: 40px;
2491 vertical-align: middle;
2492 color: green;
2493 }
2494
2495 #wp-optimize-wrap .filename {
2496 display: inline-block;
2497 padding: 6px 0;
2498 }
2499 #wp-optimize-wrap .no-files-yet .filename {
2500 font-style: italic;
2501 }
2502 #wp-optimize-wrap .processed {
2503 margin: 0;
2504 }
2505 #wp-optimize-wrap .processed .wpo_min_log {
2506 padding: 8px;
2507 background: white;
2508 border: 1px solid #CDCDCD;
2509 border-radius: 4px;
2510 line-height: 1.5em;
2511 }
2512 #wp-optimize-wrap .processed .wpo_min_log ul {
2513 overflow-x: auto;
2514 }
2515 #wp-optimize-wrap .processed .wpo_min_log ul li {
2516 white-space: nowrap;
2517 }
2518 #wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
2519 color: #dc3232;
2520 }
2521 #wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
2522 opacity: 0.5;
2523 }
2524 #wp-optimize-wrap .processed .wpo_min_log h5 {
2525 margin-top: 0;
2526 margin-bottom: 8px;
2527 border-bottom: 1px solid #cdcdcd;
2528 padding-bottom: 6px;
2529 }
2530 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error {
2531 color: #9B3600;
2532 }
2533 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
2534 color: #9B3600;
2535 }
2536 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
2537 color: rgb(104, 36.2322580645, 0);
2538 }
2539 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
2540 color: #9c9c9c;
2541 display: inline-block;
2542 }
2543 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
2544 content: "—";
2545 display: inline-block;
2546 margin: 0 10px;
2547 }
2548 #wp-optimize-wrap .show-if-enabled {
2549 display: none;
2550 }
2551 #wp-optimize-wrap .is-enabled .show-if-enabled {
2552 display: block;
2553 }
2554 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
2555 display: none;
2556 }
2557 #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]) {
2558 display: none;
2559 }
2560 #wp-optimize-wrap .wpo-minify-features {
2561 padding-top: 1em;
2562 margin-top: 1em;
2563 border-top: 1px solid #bbb;
2564 }
2565 #wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
2566 margin-bottom: 1em;
2567 }
2568 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
2569 display: none;
2570 }
2571 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
2572 display: block;
2573 }
2574 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
2575 margin-bottom: 0;
2576 }
2577 #wp-optimize-wrap .wpo-fieldgroup .wpo-minify-default-exclusions p {
2578 margin: 0;
2579 }
2580 #wp-optimize-wrap .defer-js-settings {
2581 padding-left: 1em;
2582 border-left: 2px solid #E2E2E2;
2583 margin-left: 0.5em;
2584 }
2585 #wp-optimize-wrap {
2586 /*
2587 Asset preload table
2588 */
2589 }
2590 #wp-optimize-wrap .asset-preload-list {
2591 margin-bottom: 1em;
2592 }
2593 #wp-optimize-wrap .asset-preload-list td.asset-href {
2594 width: 55%;
2595 }
2596 #wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
2597 width: 10%;
2598 }
2599 #wp-optimize-wrap .asset-preload-list tr.editing {
2600 display: none;
2601 }
2602 #wp-optimize-wrap .asset-preload-list tr.form {
2603 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1294117647);
2604 }
2605 #wp-optimize-wrap .asset-preload-list tr.form td {
2606 background: #FFF;
2607 border: none;
2608 padding: 10px;
2609 }
2610 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
2611 border-radius: 0 5px 5px 0;
2612 }
2613 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
2614 position: relative;
2615 }
2616 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
2617 content: "";
2618 width: 10px;
2619 height: 10px;
2620 background: #FFF;
2621 display: block;
2622 position: absolute;
2623 top: 0;
2624 left: 0;
2625 transform: translate(10px, -5px) rotate(45deg);
2626 }
2627 #wp-optimize-wrap .asset-preload-list tbody + tr.form td {
2628 padding-top: 37px;
2629 position: relative;
2630 }
2631 #wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
2632 content: attr(data-label);
2633 position: absolute;
2634 top: 1em;
2635 left: 10px;
2636 text-transform: uppercase;
2637 color: #D0D2D4;
2638 }
2639 #wp-optimize-wrap .asset-preload-list input#preload_href {
2640 width: 100%;
2641 }
2642 #wp-optimize-wrap .asset-preload-list select#preload_type {
2643 width: 100%;
2644 }
2645 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
2646 #wp-optimize-wrap .asset-preload-list td.asset-edit {
2647 text-align: right;
2648 }
2649 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button,
2650 #wp-optimize-wrap .asset-preload-list td.asset-edit button {
2651 display: inline-block;
2652 }
2653 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after,
2654 #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
2655 content: "|";
2656 padding-left: 6px;
2657 padding-right: 4px;
2658 }
2659
2660 /* Modal window */
2661 body.wpo-modal-is-opened {
2662 overflow: hidden;
2663 }
2664
2665 .wpo-modal--container {
2666 position: fixed;
2667 top: 0;
2668 left: 0;
2669 padding: 3em;
2670 width: 100%;
2671 height: 100%;
2672 box-sizing: border-box;
2673 z-index: 9999;
2674 overflow: auto;
2675 }
2676
2677 .wpo-modal {
2678 position: relative;
2679 background: #FFF;
2680 width: calc(100% - 6em);
2681 top: 50%;
2682 transform: translateY(-50%);
2683 margin: 0 auto;
2684 padding: 2em;
2685 box-sizing: border-box;
2686 z-index: 2;
2687 }
2688 .wpo-modal > .wpo-modal--close {
2689 border: none;
2690 background: none;
2691 position: absolute;
2692 top: 10px;
2693 right: 10px;
2694 width: 20px;
2695 height: 20px;
2696 line-height: 1;
2697 padding: 0;
2698 }
2699
2700 .wpo-modal--bg {
2701 position: fixed;
2702 top: 0;
2703 left: 0;
2704 width: 100%;
2705 height: 100%;
2706 background: rgba(0, 0, 0, 0.74);
2707 z-index: 1;
2708 }
2709
2710 .wpo-confirm .wpo-modal--content > h3 {
2711 font-size: 2em;
2712 }
2713
2714 .wpo-confirm .wpo-modal--content > h3 .dashicons {
2715 font-size: 30px;
2716 width: 30px;
2717 height: 30px;
2718 transform: translateY(-5px);
2719 }
2720
2721 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2722 color: #feb901;
2723 }
2724
2725 @media (min-width: 780px) {
2726 .power-tweaks--list {
2727 display: -ms-flexbox;
2728 display: flex;
2729 -ms-flex-direction: row;
2730 flex-direction: row;
2731 -ms-flex-wrap: wrap;
2732 flex-wrap: wrap;
2733 }
2734 }
2735 .power-tweaks--list .wpo-power-tweak {
2736 width: 100%;
2737 }
2738 @media (min-width: 780px) {
2739 .power-tweaks--list .wpo-power-tweak {
2740 width: calc(25% - 1em);
2741 margin-right: 1em;
2742 }
2743 }
2744 @media (min-width: 1080px) {
2745 .power-tweaks--list .wpo-power-tweak {
2746 width: calc(33.33333% - 1em);
2747 margin-right: 1em;
2748 }
2749 }
2750 .power-tweaks--list .wpo-power-tweak {
2751 background: #f2f4f5;
2752 border-radius: 1em;
2753 padding: 1.5em;
2754 margin-bottom: 1em;
2755 box-sizing: border-box;
2756 }
2757 .power-tweaks--list .wpo-power-tweak h4 {
2758 margin-top: 0;
2759 }
2760 .power-tweaks--list .wpo-power-tweak .description {
2761 margin-bottom: 1em;
2762 }
2763 .power-tweaks--list .wpo-power-tweak .details {
2764 padding: 1em;
2765 background: #FFF;
2766 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2767 margin-top: 1em;
2768 margin-bottom: 1em;
2769 }
2770 .power-tweaks--list .wpo-power-tweak .actions {
2771 margin-top: 1em;
2772 margin-bottom: 1em;
2773 }
2774 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2775 margin-top: 1em;
2776 font-size: 0.8em;
2777 color: #a9a9a9;
2778 }
2779 .power-tweaks--list .wpo-power-tweak .tweak-is-running {
2780 display: none;
2781 }
2782 .power-tweaks--list .wpo-power-tweak.running {
2783 position: relative;
2784 }
2785 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2786 display: -ms-flexbox;
2787 display: flex;
2788 -ms-flex-align: center;
2789 align-items: center;
2790 -ms-flex-pack: center;
2791 justify-content: center;
2792 position: absolute;
2793 top: 0;
2794 bottom: 0;
2795 left: 0;
2796 right: 0;
2797 background: rgba(242, 244, 245, 0.9);
2798 z-index: 1;
2799 border-radius: 1em;
2800 font-size: 1.7em;
2801 }
2802 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
2803 visibility: visible;
2804 }
2805 .power-tweaks--list a.show-faqs span.dashicons {
2806 font-size: inherit;
2807 height: auto;
2808 width: auto;
2809 line-height: inherit;
2810 text-decoration: none;
2811 margin-left: 4px;
2812 }
2813
2814 .wpo-table-usage__premium-mask {
2815 position: absolute;
2816 top: 0;
2817 left: 0;
2818 width: 100%;
2819 height: 100%;
2820 z-index: 1;
2821 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2822 display: -ms-flexbox;
2823 display: flex;
2824 -ms-flex-align: center;
2825 align-items: center;
2826 -ms-flex-pack: center;
2827 justify-content: center;
2828 }
2829 .wpo-table-usage__premium-mask a.wpo-table-usage__premium-link {
2830 background: #FFF;
2831 display: inline-block;
2832 padding: 10px;
2833 border-radius: 3px;
2834 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2835 }
2836
2837 #wpo_404_detector_results h1 {
2838 line-height: 1.2;
2839 word-wrap: break-word;
2840 font-size: 1.2rem;
2841 }