PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.7.0
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.7.0
4.7.0 4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 All 111 releases
← All changes | css/wp-optimize-admin.css +1748 -108 3.2.20 → 4.7.0 View file →
@@ -1,8 +1,742 @@
1 1 @charset "UTF-8";
2 2 /* COLORS */
3 3 /* OTHER VARS */
4 -@import "admin.css";
4 +.wpo_hidden {
5 + display: none !important;
6 +}
7 +
8 +.wpo_info {
9 + background: #FFF;
10 + color: #444;
11 + font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
12 + margin: 2em auto;
13 + padding: 1em 2em;
14 + max-width: 700px;
15 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
16 +}
17 +
18 +#wp-optimize-wrap .widefat thead th, #wp-optimize-wrap .widefat thead td {
19 + border-bottom: 1px solid #E1E1E1;
20 +}
21 +#wp-optimize-wrap .widefat th, #wp-optimize-wrap .widefat td {
22 + padding: 8px 10px;
23 +}
24 +#wp-optimize-wrap .nav-tab-wrapper {
25 + margin: 0;
26 +}
27 +
28 +.wpo_primary_big {
29 + padding: 4px 6px !important;
30 + font-size: 22px !important;
31 + min-height: 34px;
32 + min-width: 200px;
33 +}
34 +
35 +.wpo_section {
36 + clear: both;
37 + padding: 0;
38 + margin: 0;
39 +}
40 +
41 +.wp-optimize-settings {
42 + margin-bottom: 16px;
43 +}
44 +.wp-optimize-settings td > label {
45 + font-weight: bold;
46 + display: block;
47 + margin-bottom: 8px;
48 +}
49 +
50 +.wpo_col {
51 + display: block;
52 + float: left;
53 + margin: 1% 0 1% 1%;
54 +}
55 +.wpo_col:first-child {
56 + margin-left: 0;
57 +}
58 +
59 +.wpo_group:before {
60 + content: "";
61 + display: table;
62 +}
63 +.wpo_group:after {
64 + content: "";
65 + display: table;
66 + clear: both;
67 +}
68 +
69 +.wpo_half_width {
70 + width: 48%;
71 +}
72 +
73 +.wpo_span_3_of_3 {
74 + width: 100%;
75 +}
76 +
77 +.wpo_span_2_of_3 {
78 + width: 65.3%;
79 +}
80 +
81 +.wpo_span_1_of_3 {
82 + width: 32.1%;
83 +}
84 +
85 +.wp-optimize-setting-is-sensitive td > label::before {
86 + content: "\f534";
87 + font-family: "dashicons";
88 + display: inline-block;
89 + margin-right: 6px;
90 + font-style: normal;
91 + line-height: 1;
92 + vertical-align: middle;
93 + width: 20px;
94 + font-size: 18px;
95 + height: 20px;
96 + text-align: center;
97 + color: #72777C;
98 +}
99 +
100 +.wpo-run-optimizations__container {
101 + margin-bottom: 15px;
102 +}
103 +
104 +.wp-optimize-optimizations-table-placeholder {
105 + min-height: 80px;
106 +}
107 +
108 +td.wp-optimize-settings-optimization-checkbox {
109 + width: 18px;
110 + padding-left: 4px;
111 + padding-right: 0;
112 +}
113 +
114 +.wp-optimize-settings-optimization-checkbox input {
115 + margin: 0;
116 + padding: 0;
117 +}
118 +
119 +#retention-period {
120 + width: 60px;
121 +}
122 +
123 +#revisions-count {
124 + width: 60px;
125 +}
126 +
127 +#revisions-retention-count {
128 + width: 60px;
129 +}
130 +
131 +.wp-optimize-settings-optimization-info {
132 + font-size: 11px;
133 + font-style: italic;
134 +}
135 +.wp-optimize-settings-optimization-info a {
136 + text-decoration: underline;
137 +}
138 +
139 +img.addons {
140 + display: block;
141 + margin-left: auto;
142 + margin-right: auto;
143 + margin-bottom: 20px;
144 + max-height: 44px;
145 + height: auto;
146 + max-width: 100%;
147 +}
148 +
149 +.wpo_spinner {
150 + width: 18px;
151 + height: 18px;
152 + padding-left: 10px;
153 + display: none;
154 + position: relative;
155 + top: 4px;
156 +}
157 +
158 +.optimization_spinner {
159 + width: 20px;
160 + height: 20px;
161 +}
162 +
163 +#wp-optimize-auto-options {
164 + margin: 20px 0 0 28px;
165 +}
166 +
167 +.wpo-fieldgroup--auto-cleanup .select2-container {
168 + width: 130px !important;
169 + min-width: 100px;
170 + top: 0;
171 + margin: 5px 0;
172 +}
173 +
174 +.wpo-select2 + .select2-container {
175 + min-width: 130px;
176 +}
177 +.wpo-select2 + .select2-container.select2-container--disabled .select2-selection--single {
178 + color: #a7aaad;
179 + border-color: #dcdcde;
180 + background-color: #f6f7f7;
181 + box-shadow: none;
182 + text-shadow: 0 1px 0 #fff;
183 + cursor: default;
184 + transform: none;
185 + opacity: 0.7;
186 +}
187 +
188 +.display-none {
189 + display: none;
190 +}
191 +
192 +.visibility-hidden {
193 + visibility: hidden;
194 +}
195 +
196 +.margin-one-percent {
197 + margin: 1%;
198 +}
199 +
200 +.save-done {
201 + color: #D94F00;
202 +}
203 +
204 +.wp-optimize-settings-optimization-run-spinner {
205 + position: relative;
206 + top: 2px;
207 +}
208 +
209 +#wpoptimize_table_list .tablesorter-filter-row {
210 + display: none !important;
211 +}
212 +#wpoptimize_table_list .optimization_spinner {
213 + position: relative;
214 + top: 2px;
215 + left: 5px;
216 +}
217 +#wpoptimize_table_list .optimization_spinner.visibility-hidden {
218 + display: none;
219 +}
220 +#wpoptimize_table_list tr th:first-child, #wpoptimize_table_list tr td:first-child {
221 + display: none;
222 +}
223 +#wpoptimize_table_list tr td.no-table {
224 + display: table-cell !important;
225 + background: #FB8787;
226 + font-weight: bold;
227 +}
228 +#wpoptimize_table_list tr td.loading {
229 + text-align: center;
230 +}
231 +#wpoptimize_table_list .optimization_done_icon {
232 + color: #009B24;
233 + font-size: 26px !important;
234 + display: inline-block;
235 + position: relative;
236 +}
237 +
238 +#wpoptimize_table_list_filter {
239 + width: 100%;
240 + margin-bottom: 15px;
241 +}
242 +
243 +#wpoptimize_table_list_tables_not_found {
244 + display: none;
245 + margin: 20px 0;
246 +}
247 +
248 +div#wpoptimize_table_list_tables_not_found + h3 {
249 + margin-top: 30px;
250 +}
251 +
252 +#optimize_form .select2-container {
253 + width: 50% !important;
254 + top: -5px;
255 + height: 40px;
256 + margin-left: 10px;
257 +}
258 +
259 +#wpo_sitelist_show_moreoptions_cron {
260 + font-size: 13px;
261 + line-height: 1.5;
262 + letter-spacing: 1px;
263 +}
264 +
265 +#wp-optimize-nav-tab-contents-images .wpo_span_2_of_3 h3 {
266 + display: inline-block;
267 +}
268 +
269 +.wpo_remove_selected_sizes_btn__container {
270 + margin-top: 20px;
271 +}
272 +
273 +.unused-image-sizes__label {
274 + display: block;
275 + line-height: 1.6;
276 +}
277 +
278 +#wp-optimize-nav-tab-contents-tables a {
279 + vertical-align: middle;
280 +}
281 +
282 +#wpo_sitelist_moreoptions {
283 + margin: 4px 0 6px 0;
284 + border: 1px dotted;
285 + padding: 6px 10px;
286 + overflow-y: scroll;
287 + overflow-x: hidden;
288 + max-height: 150px;
289 +}
290 +
291 +#wpo_sitelist_moreoptions_cron {
292 + margin: 4px 16px 6px 0;
293 + border: 1px dotted;
294 + padding: 6px 10px;
295 + max-height: 300px;
296 + overflow-y: scroll;
297 + overflow-x: hidden;
298 +}
299 +#wpo_sitelist_moreoptions_cron li {
300 + padding-left: 20px;
301 +}
302 +
303 +#wpo_settings_sites_list li {
304 + font-size: 13px;
305 + line-height: 1.5;
306 +}
307 +
308 +#wpo_import_error_message {
309 + display: none;
310 + color: #9B0000;
311 +}
312 +
313 +#wpo_import_success_message {
314 + display: none;
315 + color: #46B450;
316 +}
317 +
318 +#wp-optimize-logging-options {
319 + margin-top: 10px;
320 + background-color: #FFF;
321 + border: 1px solid #CCC;
322 +}
323 +
324 +.wpo_logging_header {
325 + font-weight: bold;
326 + border-bottom: 1px solid #CCC;
327 + padding: 12px 6px;
328 + margin: 0;
329 +}
330 +
331 +.wpo_logging_row {
332 + padding: 5px 0;
333 +}
334 +.wpo_logging_row:nth-child(even) {
335 + background-color: #F9F9F9;
336 + padding: 12px 0;
337 +}
338 +.wpo_logging_row .wpo_additional_logger_options {
339 + padding: 12px 6px;
340 +}
341 +.wpo_logging_row .wpo_additional_logger_options input.wpo_logger_addition_option {
342 + margin-bottom: 10px;
343 +}
344 +
345 +.wpo_logging_logger_title {
346 + display: inline-block;
347 + vertical-align: middle;
348 + width: 38%;
349 +}
350 +
351 +.wpo_logging_options_title {
352 + display: inline-block;
353 + vertical-align: middle;
354 + width: 44%;
355 +}
356 +
357 +.wpo_logging_status_title {
358 + display: inline-block;
359 + vertical-align: middle;
360 + width: 8%;
361 +}
362 +
363 +.wpo_logging_actions_title {
364 + display: inline-block;
365 + vertical-align: middle;
366 + width: 7%;
367 +}
368 +
369 +.wpo_logging_logger_row {
370 + display: inline-block;
371 + vertical-align: middle;
372 + width: 38%;
373 +}
374 +
375 +.wpo_logging_options_row {
376 + display: inline-block;
377 + vertical-align: middle;
378 + width: 44%;
379 + word-wrap: break-word;
380 +}
381 +
382 +.wpo_logging_status_row {
383 + display: inline-block;
384 + vertical-align: middle;
385 + width: 8%;
386 +}
387 +
388 +.wpo_logging_actions_row {
389 + display: inline-block;
390 + vertical-align: middle;
391 + width: 7%;
392 + text-align: left;
393 +}
394 +.wpo_logging_actions_row .wpo_edit_logger {
395 + color: #0085BA;
396 + cursor: pointer;
397 + text-decoration: underline;
398 +}
399 +.wpo_logging_actions_row .wpo_delete_logger {
400 + color: #F00;
401 + cursor: pointer;
402 + text-decoration: underline;
403 +}
404 +.wpo_logging_actions_row .dashicons-no-alt {
405 + background-color: #F06666;
406 + color: #FFF;
407 + width: 20px;
408 + height: 20px;
409 + border-radius: 20px;
410 + display: inline-block;
411 + cursor: pointer;
412 + margin-left: 5px;
413 +}
414 +
415 +.wpo_logging_status_row.active {
416 + color: #29AF29;
417 +}
418 +
419 +.wpo_logging_status_row.inactive {
420 + color: #CDCFD3;
421 +}
422 +
423 +.wpo_add_logger_form {
424 + clear: both;
425 + display: inline-block;
426 + box-sizing: border-box;
427 + width: 100%;
428 +}
429 +
430 +.wpo_logging_edit_row {
431 + padding: 5px;
432 + display: none;
433 + float: right;
434 +}
435 +.wpo_logging_edit_row .wpo_delete_logger {
436 + margin-right: 5px;
437 +}
438 +
439 +.wpo_add_logger_form .dashicons-no-alt {
440 + background-color: #F06666;
441 + color: #FFF;
442 + width: 20px;
443 + height: 20px;
444 + border-radius: 20px;
445 + display: inline-block;
446 + cursor: pointer;
447 + margin-left: 5px;
448 + margin-top: 12px;
449 + margin-right: 10px;
450 + float: right;
451 +}
452 +
453 +.wpo_logger_type {
454 + width: 90%;
455 + margin-top: 10px;
456 +}
457 +
458 +.wpo_logger_addition_option {
459 + width: 100%;
460 + margin-top: 5px;
461 +}
462 +
463 +.wpo_alert_notice {
464 + background-color: #F06666;
465 + color: #FFF;
466 + padding: 1em;
467 + display: block;
468 + margin-bottom: 10px;
469 + border-radius: 5px;
470 +}
471 +
472 +.wpo_error_field {
473 + border-color: #F06666 !important;
474 +}
475 +
476 +.save_settings_reminder {
477 + display: none;
478 + color: #333;
479 + padding: 15px 20px;
480 + background-color: #F0A5A4;
481 + border-radius: 3px;
482 + margin: 15px 0;
483 +}
484 +
485 +#wpo_remove_selected_sizes {
486 + margin-top: 20px;
487 +}
488 +
489 +.wpo_unused_images_buttons_wrap {
490 + float: right;
491 + margin-right: 20px;
492 +}
493 +
494 +.wpo_unused_images_container h3 {
495 + min-width: 150px;
496 +}
497 +
498 +#wpo_unused_images {
499 + max-height: 500px;
500 + overflow-y: auto;
501 +}
502 +#wpo_unused_images a {
503 + outline: none;
504 +}
505 +
506 +#wpo_smush_images_grid {
507 + max-height: 500px;
508 + overflow-y: auto;
509 +}
510 +
511 +#wp-optimize-nav-tab-wpo_database-tables-contents .wpo-take-a-backup {
512 + margin-left: 1%;
513 +}
514 +
515 +.run-single-table-delete {
516 + margin-top: 3px;
517 +}
518 +
519 +.wpo-confirm h4 span.table-name {
520 + font-style: italic;
521 + display: inline-block;
522 + background: #EFEFEF;
523 + padding: 3px 7px;
524 + border-radius: 4px;
525 +}
526 +
527 +#wpo_browser_cache_output {
528 + background: #F0F0F0;
529 + padding: 10px;
530 + border: 1px solid #CCC;
531 + white-space: pre-wrap;
532 +}
533 +
534 +#wpo_gzip_compression_output {
535 + background: #F0F0F0;
536 + padding: 10px;
537 + border: 1px solid #CCC;
538 + white-space: pre-wrap;
539 +}
540 +
541 +#wpo_advanced_cache_output {
542 + background: #F0F0F0;
543 + padding: 10px;
544 + border: 1px solid #CCC;
545 + white-space: pre-wrap;
546 +}
547 +
548 +#wpo_gzip_compression_error_message {
549 + color: #9B0000;
550 +}
551 +
552 +.wpo-error {
553 + color: #9B0000;
554 +}
555 +
556 +.notice.wpo-error__enabling-cache {
557 + white-space: pre-wrap;
558 + margin-bottom: 15px;
559 +}
560 +
561 +.notice.wpo-warnings__enabling-cache {
562 + margin-bottom: 15px;
563 +}
564 +.notice.wpo-warnings__enabling-cache ul {
565 + list-style: inside disc;
566 +}
567 +.notice.wpo-warnings__enabling-cache ul li {
568 + list-style: inside disc;
569 +}
570 +
571 +a.loading.wpo-refresh-gzip-status {
572 + color: rgba(68, 68, 68, 0.5);
573 + text-decoration: none;
574 +}
575 +a.loading.wpo-refresh-gzip-status img.wpo_spinner.display-none {
576 + display: inline-block;
577 +}
578 +
579 +input.wpo_browser_cache_input {
580 + width: 60px;
581 + padding: 0 8px;
582 +}
583 +
584 +.wpo-enabled .wpo-disabled {
585 + display: none;
586 +}
587 +
588 +.wpo-disabled .wpo-enabled {
589 + display: none;
590 +}
591 +
592 +.wpo-button-wrap {
593 + margin-top: 10px;
594 +}
595 +
596 +#wpo-server-info h2 {
597 + margin-top: 2.5em;
598 +}
599 +
600 +#wpo-server-info-report {
601 + display: none;
602 +}
603 +
604 +.wpo-settings-debug {
605 + max-height: 30vh;
606 + overflow: auto;
607 +}
608 +
609 +#wpo-status-report-container pre {
610 + white-space: pre-wrap;
611 + width: 100%;
612 +}
613 +#wpo-status-report-container table td:first-child {
614 + width: 25%;
615 +}
616 +
617 +#wpo-copy-action-result {
618 + display: none;
619 + font-style: italic;
620 +}
621 +
622 +#wpo_404_detector_results {
623 + margin-top: 15px;
624 +}
625 +
626 +.wpo-404-requests {
627 + margin-top: 25px;
628 +}
629 +
630 +.wpo-text-center {
631 + text-align: center;
632 +}
633 +
634 +th.wpo-thin-header {
635 + width: 125px;
636 +}
637 +
638 +th.wpo-thin-header-2 {
639 + width: 175px;
640 +}
641 +
642 +#wpo-save-options-response {
643 + margin-top: 10px;
644 + color: #009B24;
645 +}
646 +
647 +#wpo-table-analysis-reload {
648 + float: right;
649 +}
650 +#wpo-table-analysis-reload span {
651 + vertical-align: middle;
652 +}
653 +
654 +#wpo-wipe-table-usage-data {
655 + margin-top: 15px;
656 +}
657 +
658 +#wp-optimize-database-table-analysis {
659 + font-size: 13px;
660 +}
661 +#wp-optimize-database-table-analysis table th {
662 + font-weight: bold;
663 +}
664 +
665 +#wpo-db-analysis-table-search {
666 + position: relative;
667 + top: 1px;
668 + height: 27px;
669 + padding-bottom: 3px;
670 +}
671 +
672 +hr.wpo-thin-bar {
673 + height: 1px;
674 +}
675 +
676 +.wpo-disabled-section {
677 + pointer-events: none;
678 + opacity: 0.4;
679 +}
680 +
681 +@media screen and (min-width: 549px) {
682 + .show_on_default_sizes {
683 + display: block !important;
684 + }
685 + .show_on_mobile_sizes {
686 + display: none !important;
687 + }
688 +}
689 +@media screen and (max-width: 548px) {
690 + .show_on_default_sizes {
691 + display: none !important;
692 + }
693 + .show_on_mobile_sizes {
694 + display: block !important;
695 + }
696 +}
697 +@media screen and (max-width: 768px) {
698 + .wpo_col {
699 + margin: 1% 0;
700 + }
701 + .wpo_span_3_of_3 {
702 + width: 100%;
703 + }
704 + .wpo_span_2_of_3 {
705 + width: 100%;
706 + }
707 + .wpo_span_1_of_3 {
708 + width: 100%;
709 + }
710 + .wpo_half_width {
711 + width: 100%;
712 + }
713 +}
714 +@media screen and (min-width: 782px) {
715 + td.wp-optimize-settings-optimization-run {
716 + width: 180px;
717 + padding-top: 16px;
718 + }
719 +}
720 +@media (max-width: 782px) {
721 + .unused-image-sizes__label {
722 + margin-left: 30px;
723 + margin-bottom: 15px;
724 + line-height: 1;
725 + word-break: break-word;
726 + }
727 + .unused-image-sizes__label input[type=checkbox] {
728 + margin-left: -30px;
729 + }
730 + body.rtl .unused-image-sizes__label {
731 + margin-right: 30px;
732 + margin-left: 0;
733 + }
734 + body.rtl .unused-image-sizes__label input[type=checkbox] {
735 + margin-left: 4px;
736 + margin-right: -30px;
737 + }
738 +}
5 739 body[class*=toplevel_page_WP-Optimize] #wpbody,
6 740 body[class*=wp-optimize_page_] #wpbody {
7 741 padding-right: 15px;
8 742 }
@@ -55,8 +789,14 @@
55 789 }
56 790 }
57 791
58 792 /* DASHBOARD */
793 +@media (max-width: 600px) {
794 + body.auto-fold #wpcontent {
795 + padding-left: 0;
796 + }
797 +}
798 +
59 799 .wpo-main-header {
60 800 height: 77px;
61 801 position: fixed;
62 802 top: 32px;
@@ -63,9 +803,8 @@
63 803 left: 160px;
64 804 background: #FFF;
65 805 right: 0;
66 806 z-index: 9980;
67 - /* RTL */
68 807 }
69 808 @media (min-width: 820px) {
70 809 .wpo-main-header {
71 810 height: 105px;
@@ -167,10 +906,10 @@
167 906 }
168 907 @media (max-width: 600px) {
169 908 body.auto-fold .wpo-main-header {
170 909 position: absolute;
171 - left: -10px;
172 - right: -10px;
910 + left: 0;
911 + right: 0;
173 912 top: 10px;
174 913 }
175 914 }
176 915 @media (max-width: 600px) {
@@ -185,8 +924,11 @@
185 924 }
186 925 body.is-scrolled .wpo-main-header {
187 926 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
188 927 }
928 +.wpo-main-header {
929 + /* RTL */
930 +}
189 931 body.rtl .wpo-main-header {
190 932 right: 160px;
191 933 left: 0;
192 934 }
@@ -256,8 +998,12 @@
256 998 }
257 999 .wpo-introduction-notice h3 {
258 1000 font-size: 2em;
259 1001 }
1002 +.wpo-introduction-notice > ul {
1003 + list-style-type: disc;
1004 + list-style-position: inside;
1005 +}
260 1006 .wpo-introduction-notice p:not(.font-size__normal) {
261 1007 font-size: 1.2em;
262 1008 }
263 1009 .wpo-introduction-notice .wpo-introduction-notice__footer-links {
@@ -293,8 +1039,13 @@
293 1039 }
294 1040 /* Common BLOCKS */
295 1041 /* Buttons */
296 1042 @media (max-width: 782px) {
1043 + #wp-optimize-wrap #wpo-load-tables-in-batches.button {
1044 + margin-bottom: 15px;
1045 + }
1046 +}
1047 +@media (max-width: 782px) {
297 1048 #wp-optimize-wrap .button-large {
298 1049 display: block;
299 1050 width: 100%;
300 1051 }
@@ -299,9 +1050,9 @@
299 1050 width: 100%;
300 1051 }
301 1052 }
302 1053 #wp-optimize-wrap .red {
303 - color: #E07575;
1054 + color: #F00;
304 1055 }
305 1056 #wp-optimize-wrap div[id*=_notice] div.updated,
306 1057 #wp-optimize-wrap > .notice {
307 1058 margin-left: 0;
@@ -374,14 +1125,44 @@
374 1125
375 1126 .wpo-first-child {
376 1127 margin-top: 0;
377 1128 }
1129 +.wpo-first-child span {
1130 + font-size: 10px;
1131 + color: #3c434a;
1132 + font-weight: normal;
1133 +}
378 1134
379 -#save_done, .save-done {
1135 +.save-done {
380 1136 color: #009B24;
381 - font-size: 250%;
1137 + font-size: 30px;
382 1138 }
383 1139
1140 +.wpo-save-btn-container {
1141 + display: -ms-flexbox;
1142 + display: flex;
1143 + -ms-flex-wrap: wrap;
1144 + flex-wrap: wrap;
1145 + -ms-flex-direction: row;
1146 + flex-direction: row;
1147 + -ms-flex-align: center;
1148 + align-items: center;
1149 + gap: 5px;
1150 +}
1151 +.wpo-save-btn-container .wpo_spinner {
1152 + width: 20px;
1153 + height: 20px;
1154 + padding-left: 10px;
1155 + display: none;
1156 + position: relative;
1157 + top: 0;
1158 +}
1159 +.wpo-save-btn-container .save-done {
1160 + width: 30px;
1161 + height: 30px;
1162 + font-size: 30px;
1163 +}
1164 +
384 1165 p.wpo-take-a-backup {
385 1166 display: inline-block;
386 1167 margin: 0;
387 1168 line-height: 1;
@@ -391,8 +1172,11 @@
391 1172 @media (min-width: 782px) {
392 1173 .button ~ p.wpo-take-a-backup {
393 1174 margin-left: 20px;
394 1175 }
1176 + #wpo-load-tables-in-batches.button {
1177 + margin-right: 15px;
1178 + }
395 1179 }
396 1180 /* Postbox */
397 1181 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
398 1182 border: none;
@@ -404,8 +1188,14 @@
404 1188 .wpo-p25,
405 1189 .postbox.wpo-tab-postbox {
406 1190 padding: 25px;
407 1191 }
1192 +@media (max-width: 480px) {
1193 + .wpo-p25,
1194 + .postbox.wpo-tab-postbox {
1195 + padding: 15px;
1196 + }
1197 +}
408 1198
409 1199 .wpo-tab-postbox > h3:first-child {
410 1200 margin-top: 0;
411 1201 }
@@ -413,9 +1203,9 @@
413 1203 /* Field group */
414 1204 .wpo-fieldgroup {
415 1205 background: #F2F4F5;
416 1206 border-radius: 8px;
417 - padding: 20px;
1207 + padding: 20px 18px;
418 1208 }
419 1209 .wpo-fieldgroup:not(:last-child) {
420 1210 margin-bottom: 2em;
421 1211 }
@@ -438,13 +1228,21 @@
438 1228 }
439 1229 .wpo-fieldgroup pre.code {
440 1230 padding: 10px;
441 1231 }
1232 +.wpo-fieldgroup ul.wpo-minify-cache-size li {
1233 + line-height: normal;
1234 +}
442 1235 .wpo-fieldgroup fieldset label {
443 1236 display: block;
1237 + line-height: 20px;
1238 +}
1239 +.wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup {
444 1240 margin-bottom: 6px;
445 - line-height: 20px;
446 1241 }
1242 +.wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup label {
1243 + display: inline;
1244 +}
447 1245
448 1246 .wpo-fieldgroup__subgroup:not(:last-of-type) {
449 1247 margin-bottom: 20px;
450 1248 }
@@ -457,9 +1255,8 @@
457 1255 height: 18px;
458 1256 margin-right: 6px;
459 1257 box-sizing: border-box;
460 1258 /* Hide default HTML checkbox */
461 - /* The slider */
462 1259 }
463 1260 #wp-optimize-wrap .switch input {
464 1261 opacity: 0;
465 1262 width: 0;
@@ -464,8 +1261,11 @@
464 1261 opacity: 0;
465 1262 width: 0;
466 1263 height: 0;
467 1264 }
1265 +#wp-optimize-wrap .switch {
1266 + /* The slider */
1267 +}
468 1268 #wp-optimize-wrap .switch .slider {
469 1269 position: absolute;
470 1270 cursor: pointer;
471 1271 top: 0;
@@ -473,9 +1273,8 @@
473 1273 right: 0;
474 1274 bottom: 0;
475 1275 background-color: #F2F4F5;
476 1276 transition: 0.2s;
477 - /* Rounded sliders */
478 1277 }
479 1278 #wp-optimize-wrap .switch .slider::before {
480 1279 position: absolute;
481 1280 content: "";
@@ -498,8 +1297,11 @@
498 1297 border-radius: 50%;
499 1298 border: 1px solid #72777C;
500 1299 box-sizing: content-box;
501 1300 }
1301 +#wp-optimize-wrap .switch .slider {
1302 + /* Rounded sliders */
1303 +}
502 1304 #wp-optimize-wrap .switch .slider.round {
503 1305 border-radius: 23px;
504 1306 border: 2px solid #555d66;
505 1307 }
@@ -506,10 +1308,10 @@
506 1308 #wp-optimize-wrap .switch .slider.round::before {
507 1309 border-radius: 50%;
508 1310 }
509 1311 #wp-optimize-wrap .switch input:checked + .slider {
510 - background: #0272AA;
511 - border-color: #0272AA;
1312 + background: var(--wp-admin-theme-color, #0272AA);
1313 + border-color: var(--wp-admin-theme-color, #0272AA);
512 1314 }
513 1315 #wp-optimize-wrap .switch input:checked + .slider::before {
514 1316 background: #FFF;
515 1317 border-color: #FFF;
@@ -545,11 +1347,8 @@
545 1347 }
546 1348 #wp-optimize-wrap .switch-container + small {
547 1349 margin-left: 49px;
548 1350 }
549 -#wp-optimize-wrap .switch-container [data-tooltip] .dashicons {
550 - transform: translateY(-3px);
551 -}
552 1351 #wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
553 1352 padding-top: 0;
554 1353 }
555 1354
@@ -672,8 +1471,13 @@
672 1471 color: green;
673 1472 font-weight: bold;
674 1473 }
675 1474
1475 +p.wpo-description-show-links {
1476 + z-index: 999;
1477 + position: relative;
1478 +}
1479 +
676 1480 /* TABS */
677 1481 #wp-optimize-wrap h2.nav-tab-wrapper {
678 1482 margin-bottom: 0;
679 1483 border-bottom: none;
@@ -687,9 +1491,9 @@
687 1491 background: transparent;
688 1492 margin: 0;
689 1493 border-top: 3px solid transparent;
690 1494 padding: 7px 15px;
691 - color: #0272AA;
1495 + color: var(--wp-admin-theme-color, #0272AA);
692 1496 }
693 1497 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons,
694 1498 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons,
695 1499 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons,
@@ -718,9 +1522,9 @@
718 1522 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only,
719 1523 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only,
720 1524 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only,
721 1525 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
722 - background: #0272AA;
1526 + background: var(--wp-admin-theme-color, #0272AA);
723 1527 color: #FFF;
724 1528 }
725 1529 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled,
726 1530 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled,
@@ -740,15 +1544,15 @@
740 1544 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
741 1545 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
742 1546 background: #FFF;
743 1547 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
744 - border-top-color: #0272AA;
1548 + border-top-color: var(--wp-admin-theme-color, #0272AA);
745 1549 }
746 1550 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons,
747 1551 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons,
748 1552 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons,
749 1553 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
750 - color: #0272AA;
1554 + color: var(--wp-admin-theme-color, #0272AA);
751 1555 }
752 1556 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
753 1557 display: block;
754 1558 float: right;
@@ -768,9 +1572,9 @@
768 1572 font-size: 20px;
769 1573 height: 18px;
770 1574 transform: translateY(4px);
771 1575 }
772 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > div {
1576 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > span {
773 1577 display: none;
774 1578 }
775 1579 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover a.nav-tab::after {
776 1580 content: "";
@@ -781,9 +1585,9 @@
781 1585 height: 2px;
782 1586 width: 100%;
783 1587 background-color: #0172aa;
784 1588 }
785 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div {
1589 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span {
786 1590 position: absolute;
787 1591 display: block;
788 1592 background: #FFF;
789 1593 padding: 15px;
@@ -792,9 +1596,9 @@
792 1596 z-index: 4;
793 1597 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
794 1598 width: 350px;
795 1599 }
796 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div a {
1600 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span a {
797 1601 display: block;
798 1602 font-size: 14px;
799 1603 font-weight: normal;
800 1604 padding: 6px 3px;
@@ -807,14 +1611,14 @@
807 1611 #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
808 1612 display: none;
809 1613 }
810 1614 }
811 -#wp-optimize-wrap h2.nav-tab-wrapper a[role=toggle-menu] {
1615 +#wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
812 1616 display: block;
813 1617 float: right;
814 1618 }
815 1619 @media (min-width: 782px) {
816 - #wp-optimize-wrap h2.nav-tab-wrapper a[role=toggle-menu] {
1620 + #wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
817 1621 display: none;
818 1622 }
819 1623 }
820 1624 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
@@ -848,8 +1652,11 @@
848 1652 }
849 1653 }
850 1654
851 1655 @media (max-width: 782px) {
1656 + .wpo-mobile-menu-opened h2.nav-tab-wrapper button {
1657 + display: none;
1658 + }
852 1659 .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
853 1660 display: block;
854 1661 float: none;
855 1662 }
@@ -866,11 +1673,8 @@
866 1673 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:hover .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a .dashicons {
867 1674 display: inline-block;
868 1675 line-height: inherit;
869 1676 }
870 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a[role=toggle-menu] {
871 - display: none;
872 - }
873 1677 }
874 1678 /* Pages MENU */
875 1679 .wpo-pages-menu {
876 1680 position: absolute;
@@ -992,8 +1796,9 @@
992 1796 align-items: center;
993 1797 -ms-flex-pack: center;
994 1798 justify-content: center;
995 1799 text-decoration: none;
1800 + color: #135e96;
996 1801 }
997 1802 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
998 1803 display: none;
999 1804 }
@@ -1017,13 +1822,15 @@
1017 1822 display: flex;
1018 1823 -ms-flex-wrap: wrap;
1019 1824 flex-wrap: wrap;
1020 1825 /* Same size for 1 to 3 items */
1021 - /* above 3 items, change sizes */
1022 1826 }
1023 1827 .wpo-dashboard-pages-menu[data-itemscount="1"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="2"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="3"] .wpo-dashboard-pages-menu__item {
1024 1828 width: calc(33.333% - 13.33333px);
1025 1829 }
1830 +.wpo-dashboard-pages-menu {
1831 + /* above 3 items, change sizes */
1832 +}
1026 1833 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1027 1834 width: calc(25% - 15px);
1028 1835 }
1029 1836 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
@@ -1148,9 +1955,11 @@
1148 1955 }
1149 1956
1150 1957 .updraft_advert_content_left {
1151 1958 float: none;
1152 - width: 65px;
1959 + width: 80px;
1960 + padding-top: 9px;
1961 + margin-right: 9px;
1153 1962 }
1154 1963
1155 1964 .updraft_advert_content_left_extra {
1156 1965 float: none;
@@ -1161,14 +1970,24 @@
1161 1970 -ms-flex-align: center;
1162 1971 align-items: center;
1163 1972 }
1164 1973
1974 +.updraft_advert_content_left img {
1975 + min-height: 72px;
1976 + min-width: 72px;
1977 +}
1978 +
1165 1979 .updraft_advert_content_right {
1166 1980 float: none;
1167 1981 width: auto;
1168 1982 overflow: hidden;
1983 + font-size: 16px;
1169 1984 }
1170 1985
1986 +.updraft_advert_content_right p {
1987 + font-size: 16px !important;
1988 +}
1989 +
1171 1990 .updraft_advert_bottom {
1172 1991 margin: 10px 0;
1173 1992 padding: 10px;
1174 1993 font-size: 140%;
@@ -1258,9 +2077,11 @@
1258 2077 margin-right: 0;
1259 2078 }
1260 2079 }
1261 2080 /* Unused images / wpo_smush_image / image grid*/
1262 -.wpo_unused_image, .wpo_smush_image {
2081 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2082 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2083 +.wpo_smush_image {
1263 2084 position: relative;
1264 2085 margin: 4px;
1265 2086 width: calc(50% - 8px);
1266 2087 text-align: center;
@@ -1265,23 +2086,31 @@
1265 2086 width: calc(50% - 8px);
1266 2087 text-align: center;
1267 2088 }
1268 2089 @media (min-width: 500px) {
1269 - .wpo_unused_image, .wpo_smush_image {
2090 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2091 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2092 + .wpo_smush_image {
1270 2093 width: calc(25% - 8px);
1271 2094 }
1272 2095 }
1273 2096 @media (min-width: 782px) {
1274 - .wpo_unused_image, .wpo_smush_image {
2097 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2098 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2099 + .wpo_smush_image {
1275 2100 width: calc(16.6666% - 8px);
1276 2101 }
1277 2102 }
1278 2103 @media (min-width: 1100px) {
1279 - .wpo_unused_image, .wpo_smush_image {
2104 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2105 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2106 + .wpo_smush_image {
1280 2107 width: calc(12.5% - 8px);
1281 2108 }
1282 2109 }
1283 -.wpo_unused_image .wpo_unused_image__input, .wpo_smush_image .wpo_unused_image__input {
2110 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2111 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2112 +.wpo_smush_image .wpo_unused_image__input {
1284 2113 position: absolute;
1285 2114 top: 10px;
1286 2115 opacity: 0;
1287 2116 width: 0;
@@ -1286,9 +2115,29 @@
1286 2115 opacity: 0;
1287 2116 width: 0;
1288 2117 height: 0;
1289 2118 }
1290 -.wpo_unused_image label, .wpo_smush_image label {
2119 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2120 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2121 +.wpo_smush_image .button {
2122 + background: #f6f7f7;
2123 + border-radius: 3px;
2124 +}
2125 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:focus, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:active,
2126 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:focus,
2127 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:active,
2128 +.wpo_smush_image .button:focus,
2129 +.wpo_smush_image .button:active {
2130 + background: #f6f7f7;
2131 +}
2132 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2133 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2134 +.wpo_smush_image .button:hover {
2135 + background: #f0f0f1;
2136 +}
2137 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2138 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2139 +.wpo_smush_image label {
1291 2140 display: block;
1292 2141 width: 100%;
1293 2142 position: relative;
1294 2143 padding: 1px;
@@ -1294,14 +2143,18 @@
1294 2143 padding: 1px;
1295 2144 border: 3px solid #F2F4F5;
1296 2145 box-sizing: border-box;
1297 2146 }
1298 -.wpo_unused_image label::before, .wpo_smush_image label::before {
2147 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2148 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2149 +.wpo_smush_image label::before {
1299 2150 content: "";
1300 2151 display: block;
1301 2152 padding-top: 100%;
1302 2153 }
1303 -.wpo_unused_image label .thumbnail, .wpo_smush_image label .thumbnail {
2154 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2155 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2156 +.wpo_smush_image label .thumbnail {
1304 2157 position: absolute;
1305 2158 top: 1px;
1306 2159 left: 1px;
1307 2160 width: calc(100% - 2px);
@@ -1311,9 +2164,11 @@
1311 2164 background-position: 50% 50%;
1312 2165 overflow: hidden;
1313 2166 background: rgba(220, 220, 220, 0.2);
1314 2167 }
1315 -.wpo_unused_image label .thumbnail img, .wpo_smush_image label .thumbnail img {
2168 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2169 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2170 +.wpo_smush_image label .thumbnail img {
1316 2171 display: block;
1317 2172 margin: 0;
1318 2173 max-height: 100%;
1319 2174 position: absolute;
@@ -1323,9 +2178,11 @@
1323 2178 -webkit-user-select: none;
1324 2179 -ms-user-select: none;
1325 2180 user-select: none;
1326 2181 }
1327 -.wpo_unused_image label span.dashicons, .wpo_smush_image label span.dashicons {
2182 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2183 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2184 +.wpo_smush_image label span.dashicons {
1328 2185 position: absolute;
1329 2186 top: 50%;
1330 2187 left: 50%;
1331 2188 transform: translate(-50%, -50%);
@@ -1332,15 +2189,27 @@
1332 2189 font-size: 25px;
1333 2190 width: 25px;
1334 2191 opacity: 0.2;
1335 2192 }
1336 -.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 {
2193 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input:checked + label, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image.selected label,
2194 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input:checked + label,
2195 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image.selected label,
2196 +.wpo_smush_image .wpo_unused_image__input:checked + label,
2197 +.wpo_smush_image.selected label {
1337 2198 border-color: #0272AA;
1338 2199 }
1339 -.wpo_unused_image:focus-within label, .wpo_smush_image:focus-within label {
2200 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2201 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2202 +.wpo_smush_image:focus-within label {
1340 2203 box-shadow: 0 0 4px #0272AA;
1341 2204 }
1342 -.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 {
2205 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a.button, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a.button:active,
2206 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a,
2207 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button,
2208 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button:active,
2209 +.wpo_smush_image a,
2210 +.wpo_smush_image a.button,
2211 +.wpo_smush_image a.button:active {
1343 2212 position: absolute;
1344 2213 z-index: 2;
1345 2214 bottom: 13px;
1346 2215 left: 50%;
@@ -1346,9 +2215,15 @@
1346 2215 left: 50%;
1347 2216 transform: translateX(-50%);
1348 2217 display: none;
1349 2218 }
1350 -.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 {
2219 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button:active,
2220 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a,
2221 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button,
2222 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button:active,
2223 +.wpo_smush_image:hover a,
2224 +.wpo_smush_image:hover a.button,
2225 +.wpo_smush_image:hover a.button:active {
1351 2226 display: inline-block;
1352 2227 }
1353 2228
1354 2229 #wpo_unused_images, #wpo_unused_images_trash, #wpo_smush_images_grid {
@@ -1371,10 +2246,12 @@
1371 2246 #wpo_unused_images a, #wpo_unused_images_trash a {
1372 2247 outline: none;
1373 2248 }
1374 2249
2250 +.wpo-analytics__premium-mask,
1375 2251 .wpo-unused-images__premium-mask,
1376 -.wpo-unused-image-sizes__premium-mask {
2252 +.wpo-unused-image-sizes__premium-mask,
2253 +.wpo-images-dimensions__premium-mask {
1377 2254 position: absolute;
1378 2255 top: 0;
1379 2256 left: 0;
1380 2257 width: 100%;
@@ -1388,13 +2265,16 @@
1388 2265 -ms-flex-pack: center;
1389 2266 justify-content: center;
1390 2267 }
1391 2268
2269 +.wpo-analytics__premium-mask,
1392 2270 .wpo-unused-image-sizes__premium-mask {
1393 2271 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
1394 2272 }
1395 2273
1396 -a.wpo-unused-images__premium-link {
2274 +a.wpo-analytics__premium-link,
2275 +a.wpo-unused-images__premium-link,
2276 +a.wpo-images-dimensions__premium-link {
1397 2277 background: #FFF;
1398 2278 display: inline-block;
1399 2279 padding: 10px;
1400 2280 border-radius: 3px;
@@ -1400,8 +2280,20 @@
1400 2280 border-radius: 3px;
1401 2281 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
1402 2282 }
1403 2283
2284 +p.wpo-images-dimension-show-links {
2285 + z-index: 999;
2286 + position: relative;
2287 +}
2288 +
2289 +.wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link,
2290 +.wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link:hover {
2291 + background: none;
2292 + border: none;
2293 + color: #F00;
2294 +}
2295 +
1404 2296 /* More Plugins page */
1405 2297 /* Plugins family / Premium */
1406 2298 p.wpo-plugin-installed {
1407 2299 color: #009B24;
@@ -1442,8 +2334,12 @@
1442 2334 border: 1px solid #E3E4E7;
1443 2335 margin-left: -1px;
1444 2336 margin-bottom: -1px;
1445 2337 }
2338 +.wpo-plugin-family__plugin:last-of-type {
2339 + -ms-flex-positive: 0;
2340 + flex-grow: 0;
2341 +}
1446 2342 @media (min-width: 782px) {
1447 2343 .wpo-plugin-family__plugin {
1448 2344 width: 50%;
1449 2345 }
@@ -1505,9 +2401,9 @@
1505 2401 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
1506 2402 border: none;
1507 2403 border-collapse: collapse;
1508 2404 background-color: white;
1509 - font-size: 120%;
2405 + font-size: 18px;
1510 2406 text-align: center;
1511 2407 }
1512 2408
1513 2409 .wpo_feat_table td {
@@ -1607,8 +2503,18 @@
1607 2503 padding: 16px 14px;
1608 2504 }
1609 2505
1610 2506 /* tablesorter */
2507 +#wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span {
2508 + font-size: 11px;
2509 +}
2510 +#wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span.status {
2511 + color: #9B0000;
2512 + font-weight: bold;
2513 +}
2514 +#wp-optimize-wrap #wpoptimize_table_list td span {
2515 + font-size: 13px;
2516 +}
1611 2517 #wp-optimize-wrap .wp-list-table td {
1612 2518 word-break: break-all;
1613 2519 }
1614 2520 @media screen and (max-width: 782px) {
@@ -1642,66 +2548,18 @@
1642 2548 padding: 3px 35% 3px 8px;
1643 2549 }
1644 2550 }
1645 2551
1646 -.tablesorter-headerRow th {
1647 - vertical-align: top;
1648 -}
1649 -
1650 -th:not(.sorter-false) .tablesorter-header-inner {
1651 - color: #0074ab;
1652 -}
1653 -th:not(.sorter-false) .tablesorter-header-inner::after {
1654 - content: "";
1655 - font-family: "dashicons";
1656 - font-size: 20px;
1657 - line-height: 20px;
1658 - height: 20px;
1659 - width: 20px;
1660 - display: none;
1661 - vertical-align: bottom;
1662 -}
1663 -
1664 -th.tablesorter-header.tablesorter-headerAsc,
1665 -th.tablesorter-header.tablesorter-headerDesc {
1666 - font-weight: 500;
1667 - border-bottom-color: #0272AA;
1668 -}
1669 -th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after,
1670 -th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
1671 - display: inline-block;
1672 -}
1673 -
1674 -th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
1675 - content: "\f140";
1676 -}
1677 -
1678 -th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after {
1679 - content: "\f142";
1680 -}
1681 -
1682 -th.tablesorter-header:focus {
1683 - outline: none;
1684 - box-shadow: 0 0 3px rgba(0, 116, 171, 0.78);
1685 -}
1686 -th.tablesorter-header:focus:not(.tablesorter-headerAsc):not(.tablesorter-headerDesc) .tablesorter-header-inner::after {
1687 - content: "\f142";
1688 - opacity: 0.5;
1689 -}
1690 -
1691 -.tablesorter.hasFilters tr.filtered {
1692 - display: none;
1693 -}
1694 -
1695 2552 .wpo-text__dim .dashicons-info {
1696 2553 margin-top: 2px;
1697 2554 margin-right: 5px;
1698 2555 border-radius: 30px;
1699 2556 background: #fff;
1700 - color: #E07575;
2557 + color: #F00;
1701 2558 }
1702 2559
1703 2560 #page_cache_length_value {
2561 + min-height: 28px;
1704 2562 height: 28px;
1705 2563 position: relative;
1706 2564 top: 2px;
1707 2565 }
@@ -1768,13 +2626,15 @@
1768 2626 vertical-align: middle;
1769 2627 color: green;
1770 2628 }
1771 2629
1772 -#wp-optimize-wrap {
1773 - /*
1774 - Asset preload table
1775 - */
2630 +#wpo_gzip_control_panel {
2631 + margin-bottom: 10px;
1776 2632 }
2633 +#wpo_gzip_control_panel .wpo_shade_inner {
2634 + padding-top: 150px;
2635 +}
2636 +
1777 2637 #wp-optimize-wrap .filename {
1778 2638 display: inline-block;
1779 2639 padding: 6px 0;
1780 2640 }
@@ -1815,9 +2675,9 @@
1815 2675 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
1816 2676 color: #9B3600;
1817 2677 }
1818 2678 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
1819 - color: #682400;
2679 + color: rgb(40.7843137255%, 14.2087286528%, 0%);
1820 2680 }
1821 2681 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
1822 2682 color: #9c9c9c;
1823 2683 display: inline-block;
@@ -1835,9 +2695,9 @@
1835 2695 }
1836 2696 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
1837 2697 display: none;
1838 2698 }
1839 -#wp-optimize-wrap .wpo-page[data-whichpage=wpo_minify]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab=status]):not([role=toggle-menu]) {
2699 +#wp-optimize-wrap .wpo-page[data-whichpage=wpo_minify]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab=status]):not([data-tab=analytics]):not([role=toggle-menu]):not([data-tab=js]):not([data-tab=font]) {
1840 2700 display: none;
1841 2701 }
1842 2702 #wp-optimize-wrap .wpo-minify-features {
1843 2703 padding-top: 1em;
@@ -1855,13 +2715,26 @@
1855 2715 }
1856 2716 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
1857 2717 margin-bottom: 0;
1858 2718 }
2719 +#wp-optimize-wrap .wpo-fieldgroup .wpo-minify-default-exclusions p {
2720 + margin: 0;
2721 +}
1859 2722 #wp-optimize-wrap .defer-js-settings {
1860 2723 padding-left: 1em;
1861 2724 border-left: 2px solid #E2E2E2;
1862 2725 margin-left: 0.5em;
1863 2726 }
2727 +#wp-optimize-wrap .wpo-fieldgroup .wpo-inline-advertise {
2728 + display: inline-block;
2729 + vertical-align: top;
2730 + line-height: 20px;
2731 +}
2732 +#wp-optimize-wrap {
2733 + /*
2734 + Asset preload table
2735 + */
2736 +}
1864 2737 #wp-optimize-wrap .asset-preload-list {
1865 2738 margin-bottom: 1em;
1866 2739 }
1867 2740 #wp-optimize-wrap .asset-preload-list td.asset-href {
@@ -1911,8 +2784,9 @@
1911 2784 color: #D0D2D4;
1912 2785 }
1913 2786 #wp-optimize-wrap .asset-preload-list input#preload_href {
1914 2787 width: 100%;
2788 + min-height: 28px;
1915 2789 }
1916 2790 #wp-optimize-wrap .asset-preload-list select#preload_type {
1917 2791 width: 100%;
1918 2792 }
@@ -1995,8 +2869,26 @@
1995 2869 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
1996 2870 color: #feb901;
1997 2871 }
1998 2872
2873 +@media (max-width: 782px) {
2874 + .wpo-modal--container {
2875 + padding: 1em;
2876 + display: -ms-flexbox;
2877 + display: flex;
2878 + -ms-flex-direction: column;
2879 + flex-direction: column;
2880 + }
2881 + .admin-bar .wpo-modal--container {
2882 + padding-top: calc(46px + 1em);
2883 + }
2884 + .wpo-modal {
2885 + width: 100%;
2886 + top: auto;
2887 + transform: none;
2888 + margin: auto;
2889 + }
2890 +}
1999 2891 @media (min-width: 780px) {
2000 2892 .power-tweaks--list {
2001 2893 display: -ms-flexbox;
2002 2894 display: flex;
@@ -2007,13 +2899,8 @@
2007 2899 }
2008 2900 }
2009 2901 .power-tweaks--list .wpo-power-tweak {
2010 2902 width: 100%;
2011 - background: #f2f4f5;
2012 - border-radius: 1em;
2013 - padding: 1.5em;
2014 - margin-bottom: 1em;
2015 - box-sizing: border-box;
2016 2903 }
2017 2904 @media (min-width: 780px) {
2018 2905 .power-tweaks--list .wpo-power-tweak {
2019 2906 width: calc(25% - 1em);
@@ -2025,8 +2912,15 @@
2025 2912 width: calc(33.33333% - 1em);
2026 2913 margin-right: 1em;
2027 2914 }
2028 2915 }
2916 +.power-tweaks--list .wpo-power-tweak {
2917 + background: #f2f4f5;
2918 + border-radius: 1em;
2919 + padding: 1.5em;
2920 + margin-bottom: 1em;
2921 + box-sizing: border-box;
2922 +}
2029 2923 .power-tweaks--list .wpo-power-tweak h4 {
2030 2924 margin-top: 0;
2031 2925 }
2032 2926 .power-tweaks--list .wpo-power-tweak .description {
@@ -2042,8 +2936,37 @@
2042 2936 .power-tweaks--list .wpo-power-tweak .actions {
2043 2937 margin-top: 1em;
2044 2938 margin-bottom: 1em;
2045 2939 }
2940 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status {
2941 + max-height: 230px;
2942 + overflow-y: auto;
2943 + margin: 20px 0;
2944 + border: 1px solid #c3c4c7;
2945 + scrollbar-width: thin;
2946 + scrollbar-color: #a9a9a9 #f2f4f5;
2947 +}
2948 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar {
2949 + width: 8px;
2950 +}
2951 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-track {
2952 + background: #f2f4f5;
2953 +}
2954 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-thumb {
2955 + background-color: #a9a9a9;
2956 + border-radius: 4px;
2957 +}
2958 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table {
2959 + border: none;
2960 + border-right: 1px solid #c3c4c7;
2961 +}
2962 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table thead th {
2963 + position: sticky;
2964 + top: 0;
2965 + z-index: 1;
2966 + background: #fff;
2967 + box-shadow: inset 0 -1px 0 #c3c4c7;
2968 +}
2046 2969 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2047 2970 margin-top: 1em;
2048 2971 font-size: 0.8em;
2049 2972 color: #a9a9a9;
@@ -2080,5 +3003,722 @@
2080 3003 width: auto;
2081 3004 line-height: inherit;
2082 3005 text-decoration: none;
2083 3006 margin-left: 4px;
3007 +}
3008 +
3009 +.wpo-table-usage__premium-mask {
3010 + position: absolute;
3011 + top: 0;
3012 + left: 0;
3013 + width: 100%;
3014 + height: 100%;
3015 + z-index: 1;
3016 + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
3017 + display: -ms-flexbox;
3018 + display: flex;
3019 + -ms-flex-align: center;
3020 + align-items: center;
3021 + -ms-flex-pack: center;
3022 + justify-content: center;
3023 +}
3024 +.wpo-table-usage__premium-mask a.wpo-table-usage__premium-link {
3025 + background: #FFF;
3026 + display: inline-block;
3027 + padding: 10px;
3028 + border-radius: 3px;
3029 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
3030 +}
3031 +
3032 +#wpo_404_detector_results h1 {
3033 + line-height: 1.2;
3034 + word-wrap: break-word;
3035 + font-size: 1.2rem;
3036 +}
3037 +
3038 +.wpo-dash {
3039 + display: -ms-flexbox;
3040 + display: flex;
3041 + -ms-flex-direction: column;
3042 + flex-direction: column;
3043 + font-family: "Inter", sans-serif;
3044 +}
3045 +
3046 +.wpo-dash-toolbar {
3047 + display: none;
3048 +}
3049 +
3050 +.wpo-dash-link {
3051 + color: #2271B1;
3052 + text-decoration: none;
3053 + font-weight: 500;
3054 +}
3055 +.wpo-dash-link:hover, .wpo-dash-link:active {
3056 + color: #2271B1;
3057 + opacity: 0.7;
3058 + text-decoration: none;
3059 +}
3060 +.wpo-dash-link:focus {
3061 + color: #2271B1;
3062 + box-shadow: none;
3063 + outline: none;
3064 +}
3065 +
3066 +.wpo-warn {
3067 + color: #b26900;
3068 + font-weight: 500;
3069 + text-decoration: none;
3070 +}
3071 +.wpo-warn:hover, .wpo-warn:active {
3072 + color: #b26900;
3073 + opacity: 0.7;
3074 + text-decoration: none;
3075 +}
3076 +.wpo-warn:focus {
3077 + color: #b26900;
3078 + box-shadow: none;
3079 + outline: none;
3080 +}
3081 +
3082 +.wpo-promo-app:hover, .wpo-promo-app:active {
3083 + color: #50575e;
3084 +}
3085 +.wpo-promo-app:focus {
3086 + color: #50575e;
3087 + box-shadow: none;
3088 + outline: none;
3089 +}
3090 +
3091 +.wpo-refresh-btn {
3092 + display: -ms-inline-flexbox;
3093 + display: inline-flex;
3094 + -ms-flex-align: center;
3095 + align-items: center;
3096 + gap: 4px;
3097 + background: none;
3098 + border: none;
3099 + padding: 0;
3100 + cursor: pointer;
3101 + font-size: 13px;
3102 + color: #2271B1;
3103 + font-weight: 500;
3104 +}
3105 +.wpo-refresh-btn:hover {
3106 + opacity: 0.7;
3107 +}
3108 +.wpo-refresh-btn .dashicons {
3109 + font-size: 16px;
3110 + width: 16px;
3111 + height: 16px;
3112 +}
3113 +.wpo-refresh-btn .dashicons.wpo-spinning {
3114 + animation: wpo-spin 1s linear infinite;
3115 +}
3116 +
3117 +@keyframes wpo-spin {
3118 + to {
3119 + transform: rotate(360deg);
3120 + }
3121 +}
3122 +.wpo-top-row {
3123 + display: -ms-grid;
3124 + display: grid;
3125 + -ms-grid-columns: 1fr 1fr;
3126 + grid-template-columns: 1fr 1fr;
3127 + gap: 0;
3128 +}
3129 +
3130 +.wpo-mod-grid {
3131 + display: -ms-grid;
3132 + display: grid;
3133 + -ms-grid-columns: 1fr 1fr;
3134 + grid-template-columns: 1fr 1fr;
3135 + gap: 12px;
3136 +}
3137 +
3138 +.wpo-card,
3139 +.wpo-mod-card {
3140 + background: #fff;
3141 + border: 1px solid #ddd;
3142 + padding: 1rem 1.25rem;
3143 +}
3144 +
3145 +.wpo-mod-card {
3146 + display: -ms-flexbox;
3147 + display: flex;
3148 + -ms-flex-direction: column;
3149 + flex-direction: column;
3150 + gap: 8px;
3151 + min-width: 0;
3152 + box-shadow: 0 0 1px 0 rgba(59, 59, 59, 0.06), 0 1px 1px 0 rgba(59, 59, 59, 0.05), 0 2px 1px 0 rgba(59, 59, 59, 0.03), 0 4px 2px 0 rgba(59, 59, 59, 0.01), 0 7px 2px 0 rgba(59, 59, 59, 0);
3153 +}
3154 +
3155 +.wpo-inactive-card {
3156 + opacity: 0.8;
3157 +}
3158 +
3159 +.wpo-setup-eyebrow {
3160 + display: -ms-flexbox;
3161 + display: flex;
3162 + -ms-flex-align: center;
3163 + align-items: center;
3164 + gap: 5px;
3165 + font-size: 12px;
3166 + font-weight: 600;
3167 + color: #339900;
3168 + text-transform: uppercase;
3169 + letter-spacing: 0.05em;
3170 +}
3171 +
3172 +.wpo-setup-eyebrow.grey-out {
3173 + color: #9FA4A7;
3174 +}
3175 +
3176 +.wpo-setup-eyebrow .wpo-dot {
3177 + background: currentColor;
3178 +}
3179 +
3180 +.wpo-setup-title {
3181 + font-size: 32px;
3182 + font-weight: 600;
3183 + color: #1C252C;
3184 + margin: 12px 0 5px;
3185 +}
3186 +
3187 +.wpo-setup-sub {
3188 + font-size: 14px;
3189 + font-weight: 400;
3190 + color: #4F565B;
3191 + margin: 0 0 15px;
3192 +}
3193 +
3194 +.wpo-setup-meta {
3195 + width: 100%;
3196 + position: absolute;
3197 + bottom: -2px;
3198 + display: -ms-flexbox;
3199 + display: flex;
3200 + -ms-flex-direction: row;
3201 + flex-direction: row;
3202 + -ms-flex-pack: justify;
3203 + justify-content: space-between;
3204 + -ms-flex-align: center;
3205 + align-items: center;
3206 +}
3207 +
3208 +.wpo-setup-meta span {
3209 + font-size: 12px;
3210 + color: #50575e;
3211 +}
3212 +
3213 +.wpo-setup-meta .icon-meta {
3214 + margin-right: 4px;
3215 +}
3216 +
3217 +.wpo-setup-meta a {
3218 + font-size: 13px;
3219 +}
3220 +
3221 +.wpo-setup-meta a.button.button-setup {
3222 + background: #2271B1;
3223 + color: #fff;
3224 + padding: 0 25px;
3225 + height: 25px;
3226 + min-height: 25px;
3227 + border-radius: 3px;
3228 + display: -ms-flexbox;
3229 + display: flex;
3230 + -ms-flex-align: center;
3231 + align-items: center;
3232 + box-shadow: none !important;
3233 + outline: none !important;
3234 + border: none !important;
3235 +}
3236 +
3237 +.wpo-setup-meta a.button.button-setup:hover {
3238 + opacity: 0.7;
3239 +}
3240 +
3241 +.wpo-setup-meta a.button.button-setup span.dashicons.dashicons-arrow-right-alt {
3242 + color: #fff;
3243 + height: 20px;
3244 + margin-left: 5px;
3245 + line-height: 1.8;
3246 +}
3247 +
3248 +.wpo-setup-meta span.wpo-running-label {
3249 + display: -ms-flexbox;
3250 + display: flex;
3251 + -ms-flex-pack: justify;
3252 + justify-content: space-between;
3253 + -ms-flex-align: center;
3254 + align-items: center;
3255 +}
3256 +
3257 +.wpo-setup-meta a.wpo-dash-link {
3258 + display: -ms-flexbox;
3259 + display: flex;
3260 + -ms-flex-direction: row;
3261 + flex-direction: row;
3262 + -ms-flex-pack: justify;
3263 + justify-content: space-between;
3264 + -ms-flex-align: center;
3265 + align-items: center;
3266 +}
3267 +
3268 +.wpo-big-num {
3269 + font-size: 40px;
3270 + font-weight: 600;
3271 + color: #1d2327;
3272 +}
3273 +
3274 +.wpo-big-num--green {
3275 + color: #339900;
3276 +}
3277 +
3278 +.wpo-big-num--zero.grey-out {
3279 + color: #9FA4A7;
3280 +}
3281 +
3282 +.wpo-big-num--zero span {
3283 + font-size: 18px;
3284 +}
3285 +
3286 +.wpo-savings-sub {
3287 + font-size: 14px;
3288 + color: #696F72;
3289 + margin: 8px 0 25px;
3290 +}
3291 +
3292 +.wpo-savings-bar-label {
3293 + font-size: 11px;
3294 + color: #8c8f94;
3295 + margin-bottom: 6px;
3296 +}
3297 +
3298 +.wpo-bar-wrap {
3299 + height: 8px;
3300 + border-radius: 4px;
3301 + background: #eee;
3302 + display: -ms-flexbox;
3303 + display: flex;
3304 + overflow: hidden;
3305 + margin-bottom: 10px;
3306 +}
3307 +
3308 +.wpo-bar-seg {
3309 + height: 100%;
3310 + transition: width 0.6s ease;
3311 +}
3312 +
3313 +.wpo-bar-legend {
3314 + display: -ms-flexbox;
3315 + display: flex;
3316 + gap: 14px;
3317 + -ms-flex-wrap: wrap;
3318 + flex-wrap: wrap;
3319 +}
3320 +
3321 +.wpo-legend-item {
3322 + display: -ms-flexbox;
3323 + display: flex;
3324 + -ms-flex-align: center;
3325 + align-items: center;
3326 + gap: 5px;
3327 + font-size: 11px;
3328 + color: #50575e;
3329 +}
3330 +
3331 +.wpo-legend-square {
3332 + width: 10px;
3333 + height: 10px;
3334 + border-radius: 2px;
3335 + -ms-flex-negative: 0;
3336 + flex-shrink: 0;
3337 +}
3338 +
3339 +.wpo-card-saving-bar {
3340 + position: relative;
3341 + height: 100%;
3342 +}
3343 +
3344 +.wpo-bar-wrap.wpo-bar-wrap--empty .wpo-bar-seg {
3345 + width: 100%;
3346 + height: 100%;
3347 + background: #F1F5F8;
3348 + border-radius: 4px;
3349 +}
3350 +
3351 +.wpo-modules-label {
3352 + font-size: 12px;
3353 + font-weight: 500;
3354 + text-transform: uppercase;
3355 + color: #696F72;
3356 + margin-bottom: 5px;
3357 +}
3358 +
3359 +.wpo-mod-header {
3360 + display: -ms-flexbox;
3361 + display: flex;
3362 + -ms-flex-pack: justify;
3363 + justify-content: space-between;
3364 + -ms-flex-align: center;
3365 + align-items: center;
3366 +}
3367 +
3368 +.wpo-mod-icon-title {
3369 + display: -ms-flexbox;
3370 + display: flex;
3371 + -ms-flex-align: center;
3372 + align-items: center;
3373 + gap: 7px;
3374 + font-size: 13px;
3375 + color: #50575e;
3376 +}
3377 +
3378 +.wpo-mod-big {
3379 + font-size: 22px;
3380 + font-weight: 500;
3381 + color: #1d2327;
3382 + line-height: 1.1;
3383 +}
3384 +
3385 +.wpo-mod-big span {
3386 + font-size: 14px;
3387 + font-weight: 400;
3388 + color: #50575e;
3389 +}
3390 +
3391 +.wpo-mod-desc {
3392 + font-size: 12px;
3393 + color: #50575e;
3394 + line-height: 1.5;
3395 + margin: 4px 0 0;
3396 +}
3397 +
3398 +.wpo-feature-list {
3399 + display: -ms-flexbox;
3400 + display: flex;
3401 + -ms-flex-direction: column;
3402 + flex-direction: column;
3403 + gap: 6px;
3404 + border-top: 1px solid #eee;
3405 + padding-top: 8px;
3406 +}
3407 +
3408 +.wpo-feat-row {
3409 + display: -ms-flexbox;
3410 + display: flex;
3411 + -ms-flex-pack: justify;
3412 + justify-content: space-between;
3413 + -ms-flex-align: center;
3414 + align-items: center;
3415 + font-size: 12px;
3416 +}
3417 +
3418 +.wpo-feat-name {
3419 + color: #1C252C;
3420 + display: -ms-flexbox;
3421 + display: flex;
3422 + -ms-flex-align: center;
3423 + align-items: center;
3424 + gap: 4px;
3425 +}
3426 +
3427 +.wpo-feat-name--truncate {
3428 + overflow: hidden;
3429 +}
3430 +
3431 +.wpo-feat-name--truncate .wpo-dot {
3432 + min-width: 8px;
3433 +}
3434 +
3435 +.wpo-feat-tasks {
3436 + overflow: hidden;
3437 + text-overflow: ellipsis;
3438 + white-space: nowrap;
3439 +}
3440 +
3441 +.wpo-feat-val {
3442 + color: #696F72;
3443 + -ms-flex-negative: 0;
3444 + flex-shrink: 0;
3445 + margin-left: 8px;
3446 +}
3447 +
3448 +.wpo-feat-val.premium {
3449 + color: #C4511C;
3450 +}
3451 +
3452 +.wpo-mod-footer {
3453 + display: -ms-flexbox;
3454 + display: flex;
3455 + -ms-flex-pack: justify;
3456 + justify-content: space-between;
3457 + -ms-flex-align: center;
3458 + align-items: center;
3459 + padding-top: 15px;
3460 + border-top: 1px solid #eee;
3461 + margin-top: auto;
3462 +}
3463 +
3464 +.wpo-mod-footer span {
3465 + font-size: 11px;
3466 + color: #8c8f94;
3467 +}
3468 +
3469 +.wpo-mod-footer a {
3470 + font-size: 12px;
3471 +}
3472 +
3473 +.wpo-badge {
3474 + display: -ms-inline-flexbox;
3475 + display: inline-flex;
3476 + -ms-flex-align: center;
3477 + align-items: center;
3478 + gap: 5px;
3479 + font-size: 11px;
3480 + font-weight: 500;
3481 + padding: 5px 15px;
3482 + border-radius: 20px;
3483 +}
3484 +
3485 +.wpo-badge.active {
3486 + background: #e0f2e0;
3487 + color: #267300;
3488 +}
3489 +
3490 +.wpo-badge.scheduled {
3491 + background: #e0f2e0;
3492 + color: #267300;
3493 +}
3494 +
3495 +.wpo-badge.inactive {
3496 + background: #f0f0f0;
3497 + color: #555;
3498 + border: 1px solid #ddd;
3499 +}
3500 +
3501 +.wpo-badge.active::before,
3502 +.wpo-badge.scheduled::before {
3503 + content: "✓";
3504 + font-size: 11px;
3505 + font-weight: 700;
3506 + margin-right: 3px;
3507 +}
3508 +
3509 +.wpo-dash *[class*=wpo-badge] {
3510 + text-transform: capitalize;
3511 +}
3512 +
3513 +.wpo-dot {
3514 + font-size: 0;
3515 + width: 8px;
3516 + height: 8px;
3517 + background: #9FA4A7;
3518 + border-radius: 20px;
3519 +}
3520 +
3521 +.wpo-dot-on {
3522 + background: #66CC66;
3523 +}
3524 +
3525 +.wpo-dot-off {
3526 + background: #E5E7E9;
3527 +}
3528 +
3529 +.grey-out span.wpo-dot-on {
3530 + color: #9FA4A7;
3531 +}
3532 +
3533 +.wpo-notice {
3534 + background: #f1f8fd;
3535 + border: 1px solid #C7E2F6;
3536 + border-left: 2px solid #2271B1;
3537 + padding: 8px 10px;
3538 + display: -ms-flexbox;
3539 + display: flex;
3540 + gap: 8px;
3541 + -ms-flex-align: start;
3542 + align-items: flex-start;
3543 + font-size: 12px;
3544 + color: #50575e;
3545 + line-height: 1.5;
3546 + margin: 5px 0 10px;
3547 +}
3548 +
3549 +.wpo-notice a {
3550 + color: #2271B1;
3551 + text-decoration: underline;
3552 +}
3553 +
3554 +.wpo-promo {
3555 + border: 1px solid #FDE5CC;
3556 + border-radius: 14px;
3557 + background: #FFF5EB;
3558 + padding: 0.75rem 1.25rem;
3559 + display: -ms-flexbox;
3560 + display: flex;
3561 + -ms-flex-align: center;
3562 + align-items: center;
3563 + gap: 1rem;
3564 + -ms-flex-wrap: wrap;
3565 + flex-wrap: wrap;
3566 + margin-top: 20px;
3567 +}
3568 +
3569 +.wpo-promo-label {
3570 + font-size: 13px;
3571 + line-height: 18px;
3572 + font-weight: 600;
3573 + color: #C4511C;
3574 +}
3575 +
3576 +.wpo-promo-apps {
3577 + display: -ms-flexbox;
3578 + display: flex;
3579 + gap: 3rem;
3580 + -ms-flex: 1;
3581 + flex: 1;
3582 + -ms-flex-pack: center;
3583 + justify-content: center;
3584 +}
3585 +
3586 +.wpo-promo-app {
3587 + font-size: 12px;
3588 + color: #50575e;
3589 + display: -ms-flexbox;
3590 + display: flex;
3591 + -ms-flex-direction: row;
3592 + flex-direction: row;
3593 + -ms-flex-align: start;
3594 + align-items: flex-start;
3595 + gap: 2px;
3596 + text-decoration: none;
3597 +}
3598 +.wpo-promo-app:hover {
3599 + opacity: 0.85;
3600 + text-decoration: none;
3601 +}
3602 +
3603 +.wpo-promo-app img {
3604 + display: block;
3605 + width: 25px;
3606 + height: 25px;
3607 + object-fit: contain;
3608 + margin-top: -3px;
3609 +}
3610 +
3611 +.wpo-promo-app .wpo-promo-app-name {
3612 + display: block;
3613 + color: #1d2327;
3614 + font-weight: 600;
3615 + font-size: 12px;
3616 +}
3617 +
3618 +.wpo-promo-app span {
3619 + display: block;
3620 + margin-top: 5px;
3621 +}
3622 +
3623 +.wpo-promo-btn {
3624 + margin-left: auto;
3625 + font-size: 12px;
3626 + background: #2271B1;
3627 + color: #fff !important;
3628 + border: none;
3629 + padding: 9px 0;
3630 + border-radius: 4px;
3631 + cursor: pointer;
3632 + text-decoration: none;
3633 + width: 152px;
3634 + text-align: center;
3635 + display: -ms-inline-flexbox;
3636 + display: inline-flex;
3637 + -ms-flex-align: center;
3638 + align-items: center;
3639 + -ms-flex-pack: center;
3640 + justify-content: center;
3641 + gap: 4px;
3642 +}
3643 +
3644 +.wpo-promo-btn-icon {
3645 + font-size: 14px;
3646 + width: 14px;
3647 + height: 14px;
3648 + transform: rotate(-45deg);
3649 + -ms-flex-negative: 0;
3650 + flex-shrink: 0;
3651 +}
3652 +
3653 +/* Icons */
3654 +.wpo-dash .wpo-dash-icon {
3655 + width: 15px;
3656 + height: 15px;
3657 + font-size: 15px;
3658 +}
3659 +
3660 +.wpo-dash-link span.dashicons {
3661 + color: #2271b1;
3662 + font-size: 12px;
3663 +}
3664 +
3665 +.wpo-dash a > span.dashicons {
3666 + height: inherit;
3667 + margin-right: -2px;
3668 + text-align: right;
3669 +}
3670 +
3671 +.wpo-notice .wpo-dash-icon {
3672 + color: #3F81D1;
3673 + font-size: 16px;
3674 +}
3675 +
3676 +.wpo-top-row {
3677 + background-color: #F8FBFC;
3678 + border: 1px solid #ddd;
3679 + border-radius: 16px;
3680 + margin-bottom: 30px;
3681 + padding: 25px 0;
3682 + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
3683 +}
3684 +
3685 +.wpo-top-row .wpo-card {
3686 + background: transparent;
3687 + position: relative;
3688 + border: none;
3689 + padding: 0;
3690 + margin: 0 20px;
3691 +}
3692 +
3693 +span.size-unit {
3694 + font-size: 18px;
3695 +}
3696 +
3697 +.wpo-unused-images-count {
3698 + color: #D90000;
3699 +}
3700 +
3701 +.wpo-feat-row.wpo-backup-before-cleanup span.dashicons.dashicons-arrow-right-alt {
3702 + font-size: 13px;
3703 + margin-top: -1px;
3704 +}
3705 +
3706 +@media (max-width: 782px) {
3707 + .wpo-mod-grid {
3708 + -ms-grid-columns: 1fr;
3709 + grid-template-columns: 1fr;
3710 + }
3711 + .wpo-top-row {
3712 + -ms-grid-columns: 1fr;
3713 + grid-template-columns: 1fr;
3714 + }
3715 + .wpo-top-row .wpo-card:nth-child(2) {
3716 + margin: 20px;
3717 + }
3718 + .wpo-promo-apps {
3719 + gap: 1rem;
3720 + }
3721 + .wpo-setup-meta {
3722 + bottom: -7px;
3723 + }
2084 3724 }