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

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