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

2,084 lines 46.4 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 @import "admin.css";
5 body[class*=toplevel_page_WP-Optimize] #wpbody,
6 body[class*=wp-optimize_page_] #wpbody {
7 padding-right: 15px;
8 }
9 @media screen and (max-width: 768px) {
10 body[class*=toplevel_page_WP-Optimize] #wpbody,
11 body[class*=wp-optimize_page_] #wpbody {
12 padding-right: 0;
13 }
14 }
15
16 body.toplevel_page_WP-Optimize.rtl #wpbody {
17 padding-left: 15px;
18 padding-right: 0;
19 }
20 @media screen and (max-width: 768px) {
21 body.toplevel_page_WP-Optimize.rtl #wpbody {
22 padding-left: 10px;
23 }
24 }
25
26 body[class*=toplevel_page_WP-Optimize] #wpbody-content,
27 body[class*=wp-optimize_page_] #wpbody-content {
28 padding-top: 80px;
29 }
30 @media (max-width: 600px) {
31 body[class*=toplevel_page_WP-Optimize] #wpbody-content,
32 body[class*=wp-optimize_page_] #wpbody-content {
33 padding-top: 0;
34 }
35 }
36 @media (min-width: 820px) {
37 body[class*=toplevel_page_WP-Optimize] #wpbody-content,
38 body[class*=wp-optimize_page_] #wpbody-content {
39 padding-top: 100px;
40 }
41 }
42
43 #wp-optimize-wrap {
44 position: relative;
45 padding-top: 20px;
46 }
47 @media (max-width: 600px) {
48 #wp-optimize-wrap {
49 padding-top: 110px;
50 }
51 }
52 @media (max-width: 782px) {
53 #wp-optimize-wrap {
54 margin-right: 0;
55 }
56 }
57
58 /* DASHBOARD */
59 .wpo-main-header {
60 height: 77px;
61 position: fixed;
62 top: 32px;
63 left: 160px;
64 background: #FFF;
65 right: 0;
66 z-index: 9980;
67 /* RTL */
68 }
69 @media (min-width: 820px) {
70 .wpo-main-header {
71 height: 105px;
72 }
73 }
74 .wpo-main-header .wpo-logo__container {
75 display: -ms-flexbox;
76 display: flex;
77 -ms-flex-direction: column;
78 flex-direction: column;
79 -ms-flex-pack: center;
80 justify-content: center;
81 position: relative;
82 height: 100%;
83 line-height: 1;
84 font-size: 1rem;
85 padding-left: 50px;
86 margin-left: 10px;
87 }
88 .wpo-main-header .wpo-logo {
89 position: absolute;
90 left: 0;
91 top: 50%;
92 transform: translateY(-50%);
93 width: 50px;
94 }
95 .wpo-main-header .wpo-subheader {
96 margin: 0;
97 font-weight: 300;
98 color: #72777C;
99 line-height: 1.3;
100 }
101 @media (max-width: 1080px) {
102 .wpo-main-header .wpo-subheader {
103 display: none;
104 }
105 }
106 .wpo-main-header p.wpo-header-links {
107 margin: 0;
108 font-size: 0.7rem;
109 position: absolute;
110 right: 0;
111 padding: 6px 15px;
112 background: #EDEEEF;
113 border-bottom-left-radius: 5px;
114 z-index: 1;
115 }
116 .wpo-main-header p.wpo-header-links a {
117 text-decoration: none;
118 }
119 .wpo-main-header p.wpo-header-links .wpo-header-links__label {
120 color: #82868B;
121 position: absolute;
122 right: 100%;
123 width: 110px;
124 text-align: right;
125 padding-right: 10px;
126 }
127 @media (max-width: 820px) {
128 .wpo-main-header p.wpo-header-links {
129 display: none;
130 }
131 }
132 .wpo-main-header p.wpo-header-links__mobile {
133 padding: 10px;
134 background: #EDEEEF;
135 margin-bottom: 0;
136 }
137 @media (min-width: 820px) {
138 .wpo-main-header p.wpo-header-links__mobile {
139 display: none;
140 }
141 }
142 .wpo-main-header p.wpo-header-links__mobile a {
143 display: inline-block;
144 padding: 4px;
145 font-size: 0.8rem;
146 }
147 .wpo-main-header p.wpo-header-links__mobile .wpo-header-links__label {
148 color: #82868B;
149 }
150 @media (max-width: 600px) {
151 .wpo-main-header .wpo-logo__container strong {
152 width: 140px;
153 display: inline-block;
154 }
155 }
156 @media (max-width: 960px) {
157 body.auto-fold .wpo-main-header {
158 left: 36px;
159 }
160 }
161 @media (max-width: 782px) {
162 body.auto-fold .wpo-main-header {
163 left: 0;
164 top: -70px;
165 position: absolute;
166 }
167 }
168 @media (max-width: 600px) {
169 body.auto-fold .wpo-main-header {
170 position: absolute;
171 left: -10px;
172 right: -10px;
173 top: 10px;
174 }
175 }
176 @media (max-width: 600px) {
177 body.auto-fold #screen-meta + #wp-optimize-wrap .wpo-main-header {
178 top: 0;
179 }
180 }
181 @media (min-width: 782px) {
182 body.folded .wpo-main-header {
183 left: 36px;
184 }
185 }
186 body.is-scrolled .wpo-main-header {
187 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
188 }
189 body.rtl .wpo-main-header {
190 right: 160px;
191 left: 0;
192 }
193 body.rtl .wpo-main-header .wpo-logo__container {
194 padding-left: 10px;
195 padding-right: 50px;
196 margin-left: 0;
197 margin-right: 10px;
198 }
199 body.rtl .wpo-main-header .wpo-logo {
200 position: absolute;
201 left: auto;
202 right: 0;
203 }
204 body.rtl .wpo-main-header p.wpo-header-links {
205 right: auto;
206 left: 0;
207 border-bottom-right-radius: 5px;
208 border-bottom-left-radius: 0;
209 }
210 body.rtl .wpo-main-header p.wpo-header-links .wpo-header-links__label {
211 position: absolute;
212 left: 100%;
213 right: auto;
214 width: 110px;
215 text-align: left;
216 padding-left: 10px;
217 }
218 @media (max-width: 960px) {
219 body.rtl.auto-fold .wpo-main-header {
220 right: 36px;
221 }
222 }
223 @media (max-width: 782px) {
224 body.rtl.auto-fold .wpo-main-header {
225 right: 0;
226 top: 46px;
227 }
228 }
229 @media (max-width: 600px) {
230 body.rtl.auto-fold .wpo-main-header {
231 position: absolute;
232 left: -10px;
233 right: -10px;
234 top: 10px;
235 }
236 }
237 @media (min-width: 782px) {
238 body.rtl.folded .wpo-main-header {
239 right: 36px;
240 left: 0;
241 }
242 }
243
244 body.rtl .wpo-page {
245 padding-right: 0;
246 }
247 .wpo-page:not(.active) {
248 display: none;
249 }
250
251 .wpo-introduction-notice {
252 padding: 15px 20px;
253 margin-top: 30px;
254 margin-bottom: 30px;
255 background: #FFF url("../images/notices/logo-bg-notice.png") no-repeat 100% 100%;
256 }
257 .wpo-introduction-notice h3 {
258 font-size: 2em;
259 }
260 .wpo-introduction-notice p:not(.font-size__normal) {
261 font-size: 1.2em;
262 }
263 .wpo-introduction-notice .wpo-introduction-notice__footer-links {
264 padding-top: 20px;
265 }
266 .wpo-introduction-notice .wpo-introduction-notice__footer-links > a, .wpo-introduction-notice .wpo-introduction-notice__footer-links > span {
267 display: inline-block;
268 margin-left: 5px;
269 margin-right: 5px;
270 }
271
272 /* Columns */
273 @media (min-width: 1200px) {
274 .wpo-tab-postbox.right-col {
275 width: 350px;
276 float: right;
277 box-sizing: border-box;
278 margin-top: 3.1rem;
279 }
280 .right-col + .wpo-main {
281 float: left;
282 box-sizing: border-box;
283 width: calc(100% - 380px);
284 }
285 }
286 @keyframes rotate {
287 0% {
288 transform: rotate(0);
289 }
290 100% {
291 transform: rotate(360deg);
292 }
293 }
294 /* Common BLOCKS */
295 /* Buttons */
296 @media (max-width: 782px) {
297 #wp-optimize-wrap .button-large {
298 display: block;
299 width: 100%;
300 }
301 }
302 #wp-optimize-wrap .red {
303 color: #E07575;
304 }
305 #wp-optimize-wrap div[id*=_notice] div.updated,
306 #wp-optimize-wrap > .notice {
307 margin-left: 0;
308 margin-right: 0;
309 }
310 #wp-optimize-wrap textarea {
311 width: 100%;
312 border-radius: 5px;
313 height: 100px;
314 min-height: 100px;
315 margin-top: 10px;
316 margin-bottom: 10px;
317 }
318
319 .notice.notice-error.wpo-warning,
320 .notice.notice-warning.wpo-warning {
321 margin-bottom: 18px;
322 }
323
324 .notice.notice-warning.wpo-warning p {
325 padding-left: 36px;
326 position: relative;
327 }
328
329 .notice.notice-warning.wpo-warning p > .dashicons {
330 position: absolute;
331 left: 0;
332 font-size: 26px;
333 top: 50%;
334 transform: translateY(-50%);
335 height: 26px;
336 color: #FFB900;
337 }
338
339 .button.button-block {
340 display: block;
341 width: 100%;
342 text-align: center;
343 }
344
345 .wpo-refresh-button {
346 float: right;
347 }
348
349 .wpo-refresh-button:hover {
350 cursor: pointer;
351 }
352
353 .wpo-refresh-button .dashicons {
354 text-decoration: none;
355 line-height: inherit;
356 font-size: inherit;
357 }
358
359 /* Helper classes */
360 *[class*=wpo-badge] {
361 display: inline-block;
362 font-size: 0.8em;
363 text-transform: uppercase;
364 background: #F2F4F5;
365 padding: 3px 5px;
366 line-height: 1;
367 border-radius: 3px;
368 }
369
370 .wpo-badge__new {
371 background: #DBE3E6;
372 color: #00689a;
373 }
374
375 .wpo-first-child {
376 margin-top: 0;
377 }
378
379 #save_done, .save-done {
380 color: #009B24;
381 font-size: 250%;
382 }
383
384 p.wpo-take-a-backup {
385 display: inline-block;
386 margin: 0;
387 line-height: 1;
388 padding-top: 8px;
389 }
390
391 @media (min-width: 782px) {
392 .button ~ p.wpo-take-a-backup {
393 margin-left: 20px;
394 }
395 }
396 /* Postbox */
397 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
398 border: none;
399 }
400 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox > h3:first-child {
401 margin-top: 0;
402 }
403
404 .wpo-p25,
405 .postbox.wpo-tab-postbox {
406 padding: 25px;
407 }
408
409 .wpo-tab-postbox > h3:first-child {
410 margin-top: 0;
411 }
412
413 /* Field group */
414 .wpo-fieldgroup {
415 background: #F2F4F5;
416 border-radius: 8px;
417 padding: 20px;
418 }
419 .wpo-fieldgroup:not(:last-child) {
420 margin-bottom: 2em;
421 }
422 .wpo-fieldgroup > *:first-child {
423 margin-top: 0;
424 }
425 .wpo-fieldgroup > *:last-child {
426 margin-bottom: 0;
427 }
428 .wpo-fieldgroup.premium-only {
429 position: relative;
430 }
431 .wpo-fieldgroup .switch + label {
432 font-weight: 600;
433 }
434 .wpo-fieldgroup code, .wpo-fieldgroup pre.code {
435 font-size: inherit;
436 background: #d8dbdc;
437 border-radius: 3px;
438 }
439 .wpo-fieldgroup pre.code {
440 padding: 10px;
441 }
442 .wpo-fieldgroup fieldset label {
443 display: block;
444 margin-bottom: 6px;
445 line-height: 20px;
446 }
447
448 .wpo-fieldgroup__subgroup:not(:last-of-type) {
449 margin-bottom: 20px;
450 }
451
452 /* The switches */
453 #wp-optimize-wrap .switch {
454 position: relative;
455 display: inline-block;
456 width: 38px;
457 height: 18px;
458 margin-right: 6px;
459 box-sizing: border-box;
460 /* Hide default HTML checkbox */
461 /* The slider */
462 }
463 #wp-optimize-wrap .switch input {
464 opacity: 0;
465 width: 0;
466 height: 0;
467 }
468 #wp-optimize-wrap .switch .slider {
469 position: absolute;
470 cursor: pointer;
471 top: 0;
472 left: 0;
473 right: 0;
474 bottom: 0;
475 background-color: #F2F4F5;
476 transition: 0.2s;
477 /* Rounded sliders */
478 }
479 #wp-optimize-wrap .switch .slider::before {
480 position: absolute;
481 content: "";
482 height: 8px;
483 width: 8px;
484 left: 2px;
485 bottom: 2px;
486 background-color: #555d66;
487 border: 1px solid #555d66;
488 transition: all 0.2s;
489 }
490 #wp-optimize-wrap .switch .slider::after {
491 content: "";
492 display: block;
493 position: absolute;
494 height: 4px;
495 width: 3px;
496 right: 4px;
497 top: 4px;
498 border-radius: 50%;
499 border: 1px solid #72777C;
500 box-sizing: content-box;
501 }
502 #wp-optimize-wrap .switch .slider.round {
503 border-radius: 23px;
504 border: 2px solid #555d66;
505 }
506 #wp-optimize-wrap .switch .slider.round::before {
507 border-radius: 50%;
508 }
509 #wp-optimize-wrap .switch input:checked + .slider {
510 background: #0272AA;
511 border-color: #0272AA;
512 }
513 #wp-optimize-wrap .switch input:checked + .slider::before {
514 background: #FFF;
515 border-color: #FFF;
516 transform: translateX(20px);
517 }
518 #wp-optimize-wrap .switch input:checked + .slider::after {
519 content: "";
520 display: block;
521 position: absolute;
522 height: 6px;
523 width: 2px;
524 left: 7px;
525 top: 4px;
526 background: #FFF;
527 border: none;
528 }
529 #wp-optimize-wrap .switch input:disabled + .slider,
530 #wp-optimize-wrap .switch input:disabled:checked + .slider {
531 background: rgba(85, 93, 102, 0.5);
532 border-color: #555d66;
533 opacity: 0.3;
534 }
535 #wp-optimize-wrap .switch input:focus + .slider {
536 box-shadow: 0 0 0 2px #F2F4F5, 0 0 0 3px #555d66;
537 }
538 #wp-optimize-wrap .switch-container {
539 display: block;
540 clear: both;
541 }
542 #wp-optimize-wrap .switch-container label {
543 line-height: 1;
544 vertical-align: middle;
545 }
546 #wp-optimize-wrap .switch-container + small {
547 margin-left: 49px;
548 }
549 #wp-optimize-wrap .switch-container [data-tooltip] .dashicons {
550 transform: translateY(-3px);
551 }
552 #wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
553 padding-top: 0;
554 }
555
556 label.wpo-label__bold {
557 font-weight: 600;
558 }
559
560 /* Help popup */
561 .wpo-info {
562 position: relative;
563 display: inline-block;
564 }
565 @media (max-width: 480px) {
566 .wpo-info {
567 display: block;
568 }
569 }
570
571 .wpo-info__content {
572 opacity: 0;
573 visibility: hidden;
574 position: absolute;
575 top: 100%;
576 left: -25px;
577 background: #FFF;
578 padding: 20px;
579 width: 380px;
580 max-width: 380px;
581 z-index: 5;
582 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0), 0px 11px 25px 3000px rgba(0, 0, 0, 0);
583 transition: 0.2s all;
584 }
585 @media (max-width: 480px) {
586 .wpo-info__content {
587 width: auto;
588 }
589 }
590
591 span.wpo-info__close {
592 display: none;
593 margin-left: 20px;
594 color: #444;
595 }
596
597 .wpo-info.opened span.wpo-info__close {
598 display: inline-block;
599 }
600 .wpo-info.opened .wpo-info__content {
601 opacity: 1;
602 visibility: visible;
603 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.3), 0px 11px 25px 3000px rgba(0, 0, 0, 0.3);
604 }
605 .wpo-info.opened a.wpo-info__trigger {
606 z-index: 6;
607 }
608
609 .wpo-info__content img,
610 .wpo-info__content iframe {
611 max-width: 100%;
612 }
613
614 a.wpo-info__trigger {
615 display: inline-block;
616 text-decoration: none;
617 padding: 10px;
618 position: relative;
619 background: #FFF;
620 margin-left: -10px;
621 }
622
623 a.wpo-info__trigger span.dashicons {
624 text-decoration: none;
625 vertical-align: middle;
626 }
627
628 .wpo_section.wpo_group.wpo-feature-is-disabled .wpo-fieldgroup:not(.wpo-show) {
629 opacity: 0.5;
630 }
631
632 /* Custom Block UI */
633 .wpo_shade {
634 display: block;
635 position: absolute;
636 left: 0;
637 right: 0;
638 top: 0;
639 bottom: 0;
640 width: 100%;
641 height: 100%;
642 z-index: 9979;
643 opacity: 1;
644 background-color: rgba(255, 255, 255, 0.88);
645 }
646
647 .wpo_shade.hidden {
648 display: none;
649 }
650
651 .wpo_shade_inner {
652 text-align: center;
653 padding-top: 80px;
654 }
655
656 .wpo_shade_inner h4 {
657 font-size: 2em;
658 }
659
660 .wpo_shade_inner .dashicons.dashicons-update-alt {
661 font-size: 50px;
662 height: 50px;
663 width: 50px;
664 }
665
666 .wpo-rotate {
667 animation: rotate 1s linear infinite;
668 transform-origin: 50% 50%;
669 }
670
671 .wpo-info.highlight-dashicons span.dashicons {
672 color: green;
673 font-weight: bold;
674 }
675
676 /* TABS */
677 #wp-optimize-wrap h2.nav-tab-wrapper {
678 margin-bottom: 0;
679 border-bottom: none;
680 position: relative;
681 }
682 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab,
683 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover,
684 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus,
685 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active {
686 border: none;
687 background: transparent;
688 margin: 0;
689 border-top: 3px solid transparent;
690 padding: 7px 15px;
691 color: #0272AA;
692 }
693 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons,
694 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons,
695 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons,
696 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active .dashicons {
697 display: block;
698 margin: 0 auto;
699 color: #72777C;
700 font-size: 30px;
701 width: 30px;
702 height: 30px;
703 }
704 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill,
705 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill,
706 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill,
707 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill {
708 display: inline-block;
709 margin-left: 6px;
710 padding: 4px;
711 font-size: 10px;
712 line-height: 1;
713 border-radius: 3px;
714 font-weight: 300;
715 text-transform: uppercase;
716 letter-spacing: 0.06em;
717 }
718 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only,
719 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only,
720 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only,
721 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
722 background: #0272AA;
723 color: #FFF;
724 }
725 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled,
726 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled,
727 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.disabled,
728 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.disabled {
729 background: #777;
730 color: #FFF;
731 }
732 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.hidden,
733 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.hidden,
734 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.hidden,
735 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.hidden {
736 display: none;
737 }
738 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active,
739 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover,
740 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
741 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
742 background: #FFF;
743 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
744 border-top-color: #0272AA;
745 }
746 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons,
747 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons,
748 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons,
749 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
750 color: #0272AA;
751 }
752 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
753 display: block;
754 float: right;
755 position: relative;
756 }
757 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab,
758 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover,
759 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus,
760 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active {
761 position: relative;
762 }
763 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab .dashicons,
764 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover .dashicons,
765 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus .dashicons,
766 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active .dashicons {
767 display: inline-block;
768 font-size: 20px;
769 height: 18px;
770 transform: translateY(4px);
771 }
772 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > div {
773 display: none;
774 }
775 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover a.nav-tab::after {
776 content: "";
777 display: block;
778 position: absolute;
779 bottom: 0;
780 right: 0;
781 height: 2px;
782 width: 100%;
783 background-color: #0172aa;
784 }
785 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div {
786 position: absolute;
787 display: block;
788 background: #FFF;
789 padding: 15px;
790 right: 0;
791 top: 100%;
792 z-index: 4;
793 box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
794 width: 350px;
795 }
796 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div a {
797 display: block;
798 font-size: 14px;
799 font-weight: normal;
800 padding: 6px 3px;
801 text-align: center;
802 }
803 @media (max-width: 782px) {
804 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
805 display: none;
806 }
807 #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
808 display: none;
809 }
810 }
811 #wp-optimize-wrap h2.nav-tab-wrapper a[role=toggle-menu] {
812 display: block;
813 float: right;
814 }
815 @media (min-width: 782px) {
816 #wp-optimize-wrap h2.nav-tab-wrapper a[role=toggle-menu] {
817 display: none;
818 }
819 }
820 #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 {
821 text-align: right;
822 }
823 #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 {
824 color: #B5B9BE;
825 font-size: 18px;
826 display: inline-block;
827 height: auto;
828 line-height: inherit;
829 width: 20px;
830 }
831 @media (min-width: 782px) {
832 #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 {
833 position: absolute;
834 bottom: 14px;
835 right: 0;
836 font-size: 12px;
837 font-weight: 400;
838 text-decoration: none;
839 padding: 0;
840 }
841 #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 {
842 color: #B5B9BE;
843 font-size: 18px;
844 display: inline-block;
845 height: auto;
846 line-height: inherit;
847 width: 20px;
848 }
849 }
850
851 @media (max-width: 782px) {
852 .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
853 display: block;
854 float: none;
855 }
856 .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab {
857 display: block !important;
858 }
859 .wpo-mobile-menu-opened h2.nav-tab-wrapper a:not(.nav-tab-active) {
860 background: #f9f9f9 !important;
861 }
862 .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 {
863 border-top: none;
864 border-left: 3px solid;
865 }
866 .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 display: inline-block;
868 line-height: inherit;
869 }
870 .wpo-mobile-menu-opened h2.nav-tab-wrapper a[role=toggle-menu] {
871 display: none;
872 }
873 }
874 /* Pages MENU */
875 .wpo-pages-menu {
876 position: absolute;
877 bottom: 0;
878 right: 0;
879 display: none;
880 }
881 @media (max-width: 820px) {
882 .opened + .wpo-pages-menu {
883 display: block;
884 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
885 }
886 }
887 @media (min-width: 821px) {
888 .wpo-pages-menu {
889 display: -ms-flexbox;
890 display: flex;
891 height: 77px;
892 }
893 }
894 .wpo-pages-menu > a {
895 text-decoration: none;
896 position: relative;
897 color: inherit;
898 text-align: center;
899 box-sizing: border-box;
900 display: block;
901 color: #555d66;
902 }
903 @media (min-width: 821px) {
904 .wpo-pages-menu > a {
905 padding: 0 8px;
906 height: 77px;
907 display: -ms-flexbox;
908 display: flex;
909 -ms-flex-direction: column;
910 flex-direction: column;
911 -ms-flex-pack: center;
912 justify-content: center;
913 }
914 .wpo-pages-menu > a > span {
915 display: block;
916 margin: 0 auto;
917 }
918 }
919 @media (max-width: 820px) {
920 .wpo-pages-menu > a {
921 padding: 15px;
922 font-size: 1.2em;
923 }
924 }
925 .wpo-pages-menu > a.active::after {
926 content: "";
927 display: block;
928 position: absolute;
929 bottom: 0;
930 left: 0;
931 width: 100%;
932 height: 3px;
933 background: #E46B1F;
934 color: #191e23;
935 }
936 @media (max-width: 820px) {
937 .wpo-pages-menu > a.active::after {
938 width: 3px;
939 height: 100%;
940 }
941 }
942 @media (max-width: 820px) {
943 .wpo-pages-menu > a.active {
944 color: #E46B1F;
945 }
946 }
947 .wpo-pages-menu > a:hover {
948 background: #F9F9F9;
949 color: #191e23;
950 }
951 .wpo-pages-menu span.separator {
952 display: block;
953 width: 2px;
954 background: #EFEFEF;
955 margin-top: 18px;
956 margin-bottom: 18px;
957 margin-right: 5px;
958 margin-left: 5px;
959 }
960 @media (max-width: 820px) {
961 .wpo-pages-menu span.separator {
962 width: 80%;
963 height: 2px;
964 margin: 10px 10%;
965 }
966 }
967 @media (max-width: 820px) {
968 .wpo-pages-menu {
969 text-align: center;
970 top: 100%;
971 width: 100%;
972 bottom: auto;
973 background: #FFF;
974 }
975 }
976 body.rtl .wpo-pages-menu {
977 left: 0;
978 right: auto;
979 }
980
981 #wp-optimize-nav-page-menu {
982 position: absolute;
983 right: 0;
984 bottom: 0;
985 display: -ms-flexbox;
986 display: flex;
987 height: 77px;
988 -ms-flex-direction: column;
989 flex-direction: column;
990 padding: 0 20px;
991 -ms-flex-align: center;
992 align-items: center;
993 -ms-flex-pack: center;
994 justify-content: center;
995 text-decoration: none;
996 }
997 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
998 display: none;
999 }
1000 #wp-optimize-nav-page-menu.opened .dashicons-menu {
1001 display: none;
1002 }
1003 @media (min-width: 821px) {
1004 #wp-optimize-nav-page-menu {
1005 display: none;
1006 }
1007 }
1008 body.rtl #wp-optimize-nav-page-menu {
1009 right: auto;
1010 left: 0;
1011 }
1012
1013 /* DASHBOARD Menu */
1014 /* Calculate column width with a $spacing gutter */
1015 .wpo-dashboard-pages-menu {
1016 display: -ms-flexbox;
1017 display: flex;
1018 -ms-flex-wrap: wrap;
1019 flex-wrap: wrap;
1020 /* Same size for 1 to 3 items */
1021 /* above 3 items, change sizes */
1022 }
1023 .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 width: calc(33.333% - 13.33333px);
1025 }
1026 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1027 width: calc(25% - 15px);
1028 }
1029 .wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1030 width: calc(20% - 16px);
1031 }
1032 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1033 padding: 20px;
1034 margin-right: 20px;
1035 box-sizing: border-box;
1036 padding-bottom: 60px;
1037 min-width: 0;
1038 }
1039 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item:last-child {
1040 margin-right: 0;
1041 }
1042 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1043 margin-top: 0;
1044 }
1045 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 .dashicons {
1046 color: #72777C;
1047 line-height: 1;
1048 height: 18px;
1049 margin-top: -2px;
1050 margin-right: 10px;
1051 }
1052 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a {
1053 position: absolute;
1054 bottom: 20px;
1055 left: 20px;
1056 width: calc(100% - 40px) !important;
1057 }
1058 @media (max-width: 782px) {
1059 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1060 width: 100%;
1061 margin-right: 0;
1062 padding-bottom: 20px;
1063 }
1064 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1065 width: auto !important;
1066 left: auto;
1067 bottom: auto;
1068 top: 50%;
1069 transform: translateY(-50%);
1070 right: 20px;
1071 }
1072 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1073 margin: 0;
1074 }
1075 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1076 display: none;
1077 }
1078 }
1079
1080 /* CSS for adverts */
1081 .updraft-ad-container.updated,
1082 .updraft-ad-container {
1083 margin-left: 0px;
1084 margin-right: 0px;
1085 position: relative;
1086 padding-right: 80px;
1087 }
1088
1089 /* General notices (non WPO) on the WPO page */
1090 body[class*=WP-Optimize] .notice, body[class*=WP-Optimize] .error,
1091 body[class*=wp-optimize] .notice,
1092 body[class*=wp-optimize] .error {
1093 margin-left: 0;
1094 margin-right: 0;
1095 }
1096
1097 /*
1098 Make the main error notice sticky
1099 */
1100 body.wp-core-ui.is-scrolled .wpo-main-error-notice {
1101 position: fixed;
1102 top: 132px;
1103 left: 160px;
1104 right: 0;
1105 z-index: 20;
1106 transition: 0.2s all;
1107 }
1108
1109 /* Remove other notices */
1110 div#wpbody-content > .notice:not(.wpo-notice),
1111 div#wpbody-content > .warning:not(.wpo-notice),
1112 div#wpbody-content > .updated:not(.wpo-notice),
1113 div#wpbody-content > .error:not(.wpo-notice) {
1114 display: none;
1115 }
1116
1117 .toplevel_page_WP-Optimize.rtl .notice,
1118 .toplevel_page_WP-Optimize.rtl div.updated,
1119 .toplevel_page_WP-Optimize.rtl div.error,
1120 .toplevel_page_WP-Optimize .notice,
1121 .toplevel_page_WP-Optimize div.updated,
1122 .toplevel_page_WP-Optimize div.error {
1123 margin-right: 0;
1124 }
1125
1126 body.rtl .updraft-ad-container.updated,
1127 body.rtl .updraft-ad-container {
1128 padding-right: 10px;
1129 padding-left: 80px;
1130 }
1131
1132 .updraft_notice_container {
1133 padding: 7px;
1134 display: -ms-flexbox;
1135 display: flex;
1136 -ms-flex-align: left;
1137 align-items: left;
1138 -ms-flex-direction: column;
1139 flex-direction: column;
1140 height: auto;
1141 overflow: hidden;
1142 }
1143
1144 .updraft_review_notice_container {
1145 padding: 12px;
1146 display: -ms-flexbox;
1147 display: flex;
1148 }
1149
1150 .updraft_advert_content_left {
1151 float: none;
1152 width: 65px;
1153 }
1154
1155 .updraft_advert_content_left_extra {
1156 float: none;
1157 width: 100px;
1158 padding-right: 15px;
1159 display: -ms-flexbox;
1160 display: flex;
1161 -ms-flex-align: center;
1162 align-items: center;
1163 }
1164
1165 .updraft_advert_content_right {
1166 float: none;
1167 width: auto;
1168 overflow: hidden;
1169 }
1170
1171 .updraft_advert_bottom {
1172 margin: 10px 0;
1173 padding: 10px;
1174 font-size: 140%;
1175 background-color: #FFF;
1176 border-color: #E6DB55;
1177 border: 1px solid;
1178 border-radius: 4px;
1179 }
1180
1181 .updraft_advert_button_container {
1182 margin-bottom: 10px;
1183 display: -ms-flexbox;
1184 display: flex;
1185 -ms-flex-align: center;
1186 align-items: center;
1187 }
1188
1189 .updraft_advert_button_container .dashicons {
1190 margin-left: 10px;
1191 }
1192
1193 .updraft-advert-dismiss {
1194 position: absolute;
1195 font-size: 13px;
1196 top: 5px;
1197 right: 10px;
1198 }
1199
1200 body.rtl .updraft-advert-dismiss {
1201 left: 10px;
1202 right: auto;
1203 }
1204
1205 h3.updraft_advert_heading {
1206 margin-top: 5px !important;
1207 margin-bottom: 5px !important;
1208 }
1209
1210 h4.updraft_advert_heading {
1211 margin-top: 2px !important;
1212 margin-bottom: 3px !important;
1213 }
1214
1215 .updraft_center_content {
1216 text-align: center;
1217 margin-bottom: 5px;
1218 }
1219
1220 .updraft_notice_link {
1221 padding-left: 5px;
1222 }
1223
1224 .updraft_text_center {
1225 text-align: center;
1226 }
1227
1228 .wpo-main-header + .updraft-ad-container,
1229 .wpo-main-header + .updated {
1230 margin-bottom: 20px;
1231 }
1232
1233 .processed .updated {
1234 margin: 0;
1235 }
1236
1237 @media screen and (min-width: 560px) {
1238 .updraft_notice_container {
1239 -ms-flex-direction: row;
1240 flex-direction: row;
1241 -ms-flex-align: center;
1242 align-items: center;
1243 }
1244 .updraft_advert_content_left, .updraft_advert_content_left_extra {
1245 float: left;
1246 }
1247 }
1248 @media screen and (max-width: 560px) {
1249 body.rtl .updraft-ad-container.updated,
1250 body.rtl .updraft-ad-container {
1251 padding-right: 10px;
1252 padding-left: 10px;
1253 }
1254 }
1255 @media screen and (max-width: 768px) {
1256 .wpo-main-header + .updraft-ad-container,
1257 .wpo-main-header + .updated {
1258 margin-right: 0;
1259 }
1260 }
1261 /* Unused images / wpo_smush_image / image grid*/
1262 .wpo_unused_image, .wpo_smush_image {
1263 position: relative;
1264 margin: 4px;
1265 width: calc(50% - 8px);
1266 text-align: center;
1267 }
1268 @media (min-width: 500px) {
1269 .wpo_unused_image, .wpo_smush_image {
1270 width: calc(25% - 8px);
1271 }
1272 }
1273 @media (min-width: 782px) {
1274 .wpo_unused_image, .wpo_smush_image {
1275 width: calc(16.6666% - 8px);
1276 }
1277 }
1278 @media (min-width: 1100px) {
1279 .wpo_unused_image, .wpo_smush_image {
1280 width: calc(12.5% - 8px);
1281 }
1282 }
1283 .wpo_unused_image .wpo_unused_image__input, .wpo_smush_image .wpo_unused_image__input {
1284 position: absolute;
1285 top: 10px;
1286 opacity: 0;
1287 width: 0;
1288 height: 0;
1289 }
1290 .wpo_unused_image label, .wpo_smush_image label {
1291 display: block;
1292 width: 100%;
1293 position: relative;
1294 padding: 1px;
1295 border: 3px solid #F2F4F5;
1296 box-sizing: border-box;
1297 }
1298 .wpo_unused_image label::before, .wpo_smush_image label::before {
1299 content: "";
1300 display: block;
1301 padding-top: 100%;
1302 }
1303 .wpo_unused_image label .thumbnail, .wpo_smush_image label .thumbnail {
1304 position: absolute;
1305 top: 1px;
1306 left: 1px;
1307 width: calc(100% - 2px);
1308 height: calc(100% - 2px);
1309 background-repeat: no-repeat;
1310 background-size: cover;
1311 background-position: 50% 50%;
1312 overflow: hidden;
1313 background: rgba(220, 220, 220, 0.2);
1314 }
1315 .wpo_unused_image label .thumbnail img, .wpo_smush_image label .thumbnail img {
1316 display: block;
1317 margin: 0;
1318 max-height: 100%;
1319 position: absolute;
1320 top: 50%;
1321 left: 50%;
1322 transform: translate(-50%, -50%);
1323 -webkit-user-select: none;
1324 -ms-user-select: none;
1325 user-select: none;
1326 }
1327 .wpo_unused_image label span.dashicons, .wpo_smush_image label span.dashicons {
1328 position: absolute;
1329 top: 50%;
1330 left: 50%;
1331 transform: translate(-50%, -50%);
1332 font-size: 25px;
1333 width: 25px;
1334 opacity: 0.2;
1335 }
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 {
1337 border-color: #0272AA;
1338 }
1339 .wpo_unused_image:focus-within label, .wpo_smush_image:focus-within label {
1340 box-shadow: 0 0 4px #0272AA;
1341 }
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 {
1343 position: absolute;
1344 z-index: 2;
1345 bottom: 13px;
1346 left: 50%;
1347 transform: translateX(-50%);
1348 display: none;
1349 }
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 {
1351 display: inline-block;
1352 }
1353
1354 #wpo_unused_images, #wpo_unused_images_trash, #wpo_smush_images_grid {
1355 width: calc(100% + 8px);
1356 margin-left: -4px;
1357 margin-right: -4px;
1358 max-height: 500px;
1359 overflow-y: auto;
1360 display: -ms-flexbox;
1361 display: flex;
1362 -ms-flex-wrap: wrap;
1363 flex-wrap: wrap;
1364 position: relative;
1365 }
1366 #wpo_unused_images .wpo-fieldgroup, #wpo_unused_images_trash .wpo-fieldgroup, #wpo_smush_images_grid .wpo-fieldgroup {
1367 width: 100%;
1368 margin: 4px;
1369 }
1370
1371 #wpo_unused_images a, #wpo_unused_images_trash a {
1372 outline: none;
1373 }
1374
1375 .wpo-unused-images__premium-mask,
1376 .wpo-unused-image-sizes__premium-mask {
1377 position: absolute;
1378 top: 0;
1379 left: 0;
1380 width: 100%;
1381 height: 100%;
1382 z-index: 1;
1383 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
1384 display: -ms-flexbox;
1385 display: flex;
1386 -ms-flex-align: center;
1387 align-items: center;
1388 -ms-flex-pack: center;
1389 justify-content: center;
1390 }
1391
1392 .wpo-unused-image-sizes__premium-mask {
1393 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
1394 }
1395
1396 a.wpo-unused-images__premium-link {
1397 background: #FFF;
1398 display: inline-block;
1399 padding: 10px;
1400 border-radius: 3px;
1401 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
1402 }
1403
1404 /* More Plugins page */
1405 /* Plugins family / Premium */
1406 p.wpo-plugin-installed {
1407 color: #009B24;
1408 }
1409
1410 /* Settings repeater */
1411 .wpo-repeater__add {
1412 display: inline-block;
1413 cursor: pointer;
1414 font-weight: bold;
1415 text-decoration: none;
1416 }
1417 .wpo-repeater__add .dashicons {
1418 transform: translateY(-2px);
1419 }
1420
1421 /* Plugin family tab */
1422 .wpo-plugin-family__premium h2 {
1423 margin: 0;
1424 padding: 25px;
1425 }
1426
1427 .wpo-plugin-family__plugins {
1428 display: -ms-flexbox;
1429 display: flex;
1430 -ms-flex-wrap: wrap;
1431 flex-wrap: wrap;
1432 padding-left: 1px;
1433 padding-bottom: 1px;
1434 }
1435
1436 .wpo-plugin-family__plugin {
1437 -ms-flex: auto;
1438 flex: auto;
1439 width: 100%;
1440 padding: 30px;
1441 box-sizing: border-box;
1442 border: 1px solid #E3E4E7;
1443 margin-left: -1px;
1444 margin-bottom: -1px;
1445 }
1446 @media (min-width: 782px) {
1447 .wpo-plugin-family__plugin {
1448 width: 50%;
1449 }
1450 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1451 width: 100%;
1452 }
1453 }
1454 @media (max-width: 1080px) {
1455 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1456 width: 50%;
1457 }
1458 }
1459 @media (max-width: 782px) {
1460 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1461 width: 100%;
1462 }
1463 }
1464
1465 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
1466 padding: 0;
1467 }
1468
1469 /* Added for WPO Premium Features tab */
1470 .wpo_feature_cont {
1471 width: 64.5%;
1472 }
1473
1474 .wpo_plugin_family_cont {
1475 width: 34.5%;
1476 }
1477
1478 @media (max-width: 1080px) {
1479 .wpo_feature_cont,
1480 .wpo_plugin_family_cont {
1481 width: 100%;
1482 float: none;
1483 margin: 0;
1484 }
1485 }
1486 .wpo_feature_cont header,
1487 .wpo_plugin_family_cont header {
1488 padding: 20px;
1489 }
1490 @media (max-width: 1080px) {
1491 .wpo_feature_cont header,
1492 .wpo_plugin_family_cont header {
1493 padding: 40px;
1494 }
1495 }
1496 .wpo_feature_cont header h2,
1497 .wpo_plugin_family_cont header h2 {
1498 margin: 0;
1499 }
1500 .wpo_feature_cont header p,
1501 .wpo_plugin_family_cont header p {
1502 margin-bottom: 0;
1503 }
1504
1505 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
1506 border: none;
1507 border-collapse: collapse;
1508 background-color: white;
1509 font-size: 120%;
1510 text-align: center;
1511 }
1512
1513 .wpo_feat_table td {
1514 border: 1px solid #F1F1F1;
1515 border-bottom-width: 4px;
1516 padding: 15px;
1517 }
1518 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1519 background: rgba(241, 241, 241, 0.38);
1520 }
1521 .wpo_feat_table p {
1522 padding: 0px 10px;
1523 margin: 5px 0px;
1524 font-size: 13px;
1525 }
1526 .wpo_feat_table h4 {
1527 margin: 5px 0px;
1528 }
1529 .wpo_feat_table .dashicons {
1530 width: 25px;
1531 height: 25px;
1532 font-size: 25px;
1533 line-height: 1;
1534 }
1535 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
1536 color: green;
1537 }
1538 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
1539 color: red;
1540 }
1541 .wpo_feat_table tr.wpo-main-feature-row td {
1542 background: #f1f1f1;
1543 border-bottom-color: #fafafa;
1544 }
1545 .wpo_feat_table tr.wpo-main-feature-row td img.wpo-premium-image {
1546 width: 64px;
1547 }
1548
1549 .wpo-premium-image {
1550 display: none;
1551 }
1552
1553 @media screen and (min-width: 720px) {
1554 #wpoptimize_table_list_filter {
1555 width: 40%;
1556 }
1557 .wpo-premium-image {
1558 display: block;
1559 float: left;
1560 padding: 16px 18px;
1561 width: 30px;
1562 height: auto;
1563 }
1564 }
1565 @media screen and (min-width: 1220px) {
1566 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1567 width: 110px;
1568 }
1569 }
1570 .other-plugin-title {
1571 text-decoration: none;
1572 }
1573
1574 @media screen and (max-width: 782px) {
1575 table.wpo_feat_table {
1576 display: block;
1577 }
1578 table.wpo_feat_table tr {
1579 display: -ms-flexbox;
1580 display: flex;
1581 -ms-flex-wrap: wrap;
1582 flex-wrap: wrap;
1583 }
1584 table.wpo_feat_table td {
1585 display: block;
1586 }
1587 table.wpo_feat_table td:first-child {
1588 width: 100%;
1589 border-bottom: none;
1590 }
1591 table.wpo_feat_table td:not(:first-child) {
1592 width: 50%;
1593 box-sizing: border-box;
1594 }
1595 table.wpo_feat_table td:first-child:empty {
1596 display: none;
1597 }
1598 table.wpo_feat_table td[data-colname]::before {
1599 content: attr(data-colname);
1600 font-size: 0.8rem;
1601 color: #CCC;
1602 line-height: 1;
1603 }
1604 }
1605 .wpo-cache-feature-image {
1606 width: 40px;
1607 padding: 16px 14px;
1608 }
1609
1610 /* tablesorter */
1611 #wp-optimize-wrap .wp-list-table td {
1612 word-break: break-all;
1613 }
1614 @media screen and (max-width: 782px) {
1615 #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 {
1616 display: block;
1617 }
1618 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
1619 padding: 3px 8px 3px 35%;
1620 word-break: break-word;
1621 box-sizing: border-box;
1622 }
1623 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
1624 color: #B5B9BE;
1625 }
1626 #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 {
1627 display: block;
1628 }
1629 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
1630 display: block;
1631 box-sizing: border-box;
1632 }
1633 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
1634 display: none !important;
1635 }
1636 }
1637 body.rtl #wp-optimize-wrap .wpo-table-list-filter {
1638 text-align: left;
1639 }
1640 @media screen and (max-width: 782px) {
1641 body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
1642 padding: 3px 35% 3px 8px;
1643 }
1644 }
1645
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 .wpo-text__dim .dashicons-info {
1696 margin-top: 2px;
1697 margin-right: 5px;
1698 border-radius: 30px;
1699 background: #fff;
1700 color: #E07575;
1701 }
1702
1703 #page_cache_length_value {
1704 height: 28px;
1705 position: relative;
1706 top: 2px;
1707 }
1708
1709 #wp_optimize_preload_cache_status {
1710 margin-left: 10px;
1711 display: inline-block;
1712 color: #82868B;
1713 font-size: smaller;
1714 }
1715
1716 .align-left {
1717 margin: 10px 10px 0px 0px;
1718 float: left;
1719 }
1720
1721 textarea.cache-settings {
1722 display: block;
1723 clear: both;
1724 min-height: 225px;
1725 overflow: scroll;
1726 min-width: 75%;
1727 margin: 10px 0px;
1728 }
1729
1730 #wp-optimize-purge-cache,
1731 #wp-optimize-purge-cache ~ span,
1732 #wp-optimize-purge-cache ~ img {
1733 vertical-align: middle;
1734 top: auto;
1735 }
1736
1737 #wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
1738 font-size: 12px;
1739 }
1740
1741 #wpo_browser_cache_error_message {
1742 padding-top: 10px;
1743 padding-bottom: 10px;
1744 margin-left: 0;
1745 margin-bottom: 10px;
1746 }
1747 #wpo_browser_cache_error_message:empty {
1748 display: none;
1749 }
1750
1751 #wp-optimize-nav-tab-wpo_cache-advanced-contents label,
1752 #wp-optimize-nav-tab-wpo_cache-preload-contents label,
1753 #wp-optimize-nav-tab-wpo_cache-cache-contents label {
1754 font-weight: 600;
1755 }
1756 #wp-optimize-nav-tab-wpo_cache-advanced-contents label em,
1757 #wp-optimize-nav-tab-wpo_cache-preload-contents label em,
1758 #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
1759 font-weight: normal;
1760 }
1761
1762 .wpo-gzip-already-enabled span.dashicons.dashicons-yes,
1763 .wpo-enabled > span.dashicons.dashicons-yes {
1764 font-size: 40px;
1765 width: 40px;
1766 height: 40px;
1767 line-height: 40px;
1768 vertical-align: middle;
1769 color: green;
1770 }
1771
1772 #wp-optimize-wrap {
1773 /*
1774 Asset preload table
1775 */
1776 }
1777 #wp-optimize-wrap .filename {
1778 display: inline-block;
1779 padding: 6px 0;
1780 }
1781 #wp-optimize-wrap .no-files-yet .filename {
1782 font-style: italic;
1783 }
1784 #wp-optimize-wrap .processed {
1785 margin: 0;
1786 }
1787 #wp-optimize-wrap .processed .wpo_min_log {
1788 padding: 8px;
1789 background: white;
1790 border: 1px solid #CDCDCD;
1791 border-radius: 4px;
1792 line-height: 1.5em;
1793 }
1794 #wp-optimize-wrap .processed .wpo_min_log ul {
1795 overflow-x: auto;
1796 }
1797 #wp-optimize-wrap .processed .wpo_min_log ul li {
1798 white-space: nowrap;
1799 }
1800 #wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
1801 color: #dc3232;
1802 }
1803 #wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
1804 opacity: 0.5;
1805 }
1806 #wp-optimize-wrap .processed .wpo_min_log h5 {
1807 margin-top: 0;
1808 margin-bottom: 8px;
1809 border-bottom: 1px solid #cdcdcd;
1810 padding-bottom: 6px;
1811 }
1812 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error {
1813 color: #9B3600;
1814 }
1815 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
1816 color: #9B3600;
1817 }
1818 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
1819 color: #682400;
1820 }
1821 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
1822 color: #9c9c9c;
1823 display: inline-block;
1824 }
1825 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
1826 content: "—";
1827 display: inline-block;
1828 margin: 0 10px;
1829 }
1830 #wp-optimize-wrap .show-if-enabled {
1831 display: none;
1832 }
1833 #wp-optimize-wrap .is-enabled .show-if-enabled {
1834 display: block;
1835 }
1836 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
1837 display: none;
1838 }
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]) {
1840 display: none;
1841 }
1842 #wp-optimize-wrap .wpo-minify-features {
1843 padding-top: 1em;
1844 margin-top: 1em;
1845 border-top: 1px solid #bbb;
1846 }
1847 #wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
1848 margin-bottom: 1em;
1849 }
1850 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
1851 display: none;
1852 }
1853 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
1854 display: block;
1855 }
1856 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
1857 margin-bottom: 0;
1858 }
1859 #wp-optimize-wrap .defer-js-settings {
1860 padding-left: 1em;
1861 border-left: 2px solid #E2E2E2;
1862 margin-left: 0.5em;
1863 }
1864 #wp-optimize-wrap .asset-preload-list {
1865 margin-bottom: 1em;
1866 }
1867 #wp-optimize-wrap .asset-preload-list td.asset-href {
1868 width: 55%;
1869 }
1870 #wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
1871 width: 10%;
1872 }
1873 #wp-optimize-wrap .asset-preload-list tr.editing {
1874 display: none;
1875 }
1876 #wp-optimize-wrap .asset-preload-list tr.form {
1877 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1294117647);
1878 }
1879 #wp-optimize-wrap .asset-preload-list tr.form td {
1880 background: #FFF;
1881 border: none;
1882 padding: 10px;
1883 }
1884 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
1885 border-radius: 0 5px 5px 0;
1886 }
1887 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
1888 position: relative;
1889 }
1890 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
1891 content: "";
1892 width: 10px;
1893 height: 10px;
1894 background: #FFF;
1895 display: block;
1896 position: absolute;
1897 top: 0;
1898 left: 0;
1899 transform: translate(10px, -5px) rotate(45deg);
1900 }
1901 #wp-optimize-wrap .asset-preload-list tbody + tr.form td {
1902 padding-top: 37px;
1903 position: relative;
1904 }
1905 #wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
1906 content: attr(data-label);
1907 position: absolute;
1908 top: 1em;
1909 left: 10px;
1910 text-transform: uppercase;
1911 color: #D0D2D4;
1912 }
1913 #wp-optimize-wrap .asset-preload-list input#preload_href {
1914 width: 100%;
1915 }
1916 #wp-optimize-wrap .asset-preload-list select#preload_type {
1917 width: 100%;
1918 }
1919 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
1920 #wp-optimize-wrap .asset-preload-list td.asset-edit {
1921 text-align: right;
1922 }
1923 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button,
1924 #wp-optimize-wrap .asset-preload-list td.asset-edit button {
1925 display: inline-block;
1926 }
1927 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after,
1928 #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
1929 content: "|";
1930 padding-left: 6px;
1931 padding-right: 4px;
1932 }
1933
1934 /* Modal window */
1935 body.wpo-modal-is-opened {
1936 overflow: hidden;
1937 }
1938
1939 .wpo-modal--container {
1940 position: fixed;
1941 top: 0;
1942 left: 0;
1943 padding: 3em;
1944 width: 100%;
1945 height: 100%;
1946 box-sizing: border-box;
1947 z-index: 9999;
1948 overflow: auto;
1949 }
1950
1951 .wpo-modal {
1952 position: relative;
1953 background: #FFF;
1954 width: calc(100% - 6em);
1955 top: 50%;
1956 transform: translateY(-50%);
1957 margin: 0 auto;
1958 padding: 2em;
1959 box-sizing: border-box;
1960 z-index: 2;
1961 }
1962 .wpo-modal > .wpo-modal--close {
1963 border: none;
1964 background: none;
1965 position: absolute;
1966 top: 10px;
1967 right: 10px;
1968 width: 20px;
1969 height: 20px;
1970 line-height: 1;
1971 padding: 0;
1972 }
1973
1974 .wpo-modal--bg {
1975 position: fixed;
1976 top: 0;
1977 left: 0;
1978 width: 100%;
1979 height: 100%;
1980 background: rgba(0, 0, 0, 0.74);
1981 z-index: 1;
1982 }
1983
1984 .wpo-confirm .wpo-modal--content > h3 {
1985 font-size: 2em;
1986 }
1987
1988 .wpo-confirm .wpo-modal--content > h3 .dashicons {
1989 font-size: 30px;
1990 width: 30px;
1991 height: 30px;
1992 transform: translateY(-5px);
1993 }
1994
1995 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
1996 color: #feb901;
1997 }
1998
1999 @media (min-width: 780px) {
2000 .power-tweaks--list {
2001 display: -ms-flexbox;
2002 display: flex;
2003 -ms-flex-direction: row;
2004 flex-direction: row;
2005 -ms-flex-wrap: wrap;
2006 flex-wrap: wrap;
2007 }
2008 }
2009 .power-tweaks--list .wpo-power-tweak {
2010 width: 100%;
2011 background: #f2f4f5;
2012 border-radius: 1em;
2013 padding: 1.5em;
2014 margin-bottom: 1em;
2015 box-sizing: border-box;
2016 }
2017 @media (min-width: 780px) {
2018 .power-tweaks--list .wpo-power-tweak {
2019 width: calc(25% - 1em);
2020 margin-right: 1em;
2021 }
2022 }
2023 @media (min-width: 1080px) {
2024 .power-tweaks--list .wpo-power-tweak {
2025 width: calc(33.33333% - 1em);
2026 margin-right: 1em;
2027 }
2028 }
2029 .power-tweaks--list .wpo-power-tweak h4 {
2030 margin-top: 0;
2031 }
2032 .power-tweaks--list .wpo-power-tweak .description {
2033 margin-bottom: 1em;
2034 }
2035 .power-tweaks--list .wpo-power-tweak .details {
2036 padding: 1em;
2037 background: #FFF;
2038 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2039 margin-top: 1em;
2040 margin-bottom: 1em;
2041 }
2042 .power-tweaks--list .wpo-power-tweak .actions {
2043 margin-top: 1em;
2044 margin-bottom: 1em;
2045 }
2046 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2047 margin-top: 1em;
2048 font-size: 0.8em;
2049 color: #a9a9a9;
2050 }
2051 .power-tweaks--list .wpo-power-tweak .tweak-is-running {
2052 display: none;
2053 }
2054 .power-tweaks--list .wpo-power-tweak.running {
2055 position: relative;
2056 }
2057 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2058 display: -ms-flexbox;
2059 display: flex;
2060 -ms-flex-align: center;
2061 align-items: center;
2062 -ms-flex-pack: center;
2063 justify-content: center;
2064 position: absolute;
2065 top: 0;
2066 bottom: 0;
2067 left: 0;
2068 right: 0;
2069 background: rgba(242, 244, 245, 0.9);
2070 z-index: 1;
2071 border-radius: 1em;
2072 font-size: 1.7em;
2073 }
2074 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
2075 visibility: visible;
2076 }
2077 .power-tweaks--list a.show-faqs span.dashicons {
2078 font-size: inherit;
2079 height: auto;
2080 width: auto;
2081 line-height: inherit;
2082 text-decoration: none;
2083 margin-left: 4px;
2084 }