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

2,137 lines 47.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /* COLORS */
3 /* OTHER VARS */
4 @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-analytics__premium-mask,
1392 .wpo-unused-images__premium-mask,
1393 .wpo-unused-image-sizes__premium-mask,
1394 .wpo-images-dimensions__premium-mask {
1395 position: absolute;
1396 top: 0;
1397 left: 0;
1398 width: 100%;
1399 height: 100%;
1400 z-index: 1;
1401 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
1402 display: -ms-flexbox;
1403 display: flex;
1404 -ms-flex-align: center;
1405 align-items: center;
1406 -ms-flex-pack: center;
1407 justify-content: center;
1408 }
1409
1410 .wpo-analytics__premium-mask,
1411 .wpo-unused-image-sizes__premium-mask {
1412 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
1413 }
1414
1415 a.wpo-analytics__premium-link,
1416 a.wpo-unused-images__premium-link,
1417 a.wpo-images-dimensions__premium-link {
1418 background: #FFF;
1419 display: inline-block;
1420 padding: 10px;
1421 border-radius: 3px;
1422 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
1423 }
1424
1425 p.wpo-images-dimension-show-links {
1426 z-index: 999;
1427 position: relative;
1428 }
1429
1430 /* More Plugins page */
1431 /* Plugins family / Premium */
1432 p.wpo-plugin-installed {
1433 color: #009B24;
1434 }
1435
1436 /* Settings repeater */
1437 .wpo-repeater__add {
1438 display: inline-block;
1439 cursor: pointer;
1440 font-weight: bold;
1441 text-decoration: none;
1442 }
1443 .wpo-repeater__add .dashicons {
1444 transform: translateY(-2px);
1445 }
1446
1447 /* Plugin family tab */
1448 .wpo-plugin-family__premium h2 {
1449 margin: 0;
1450 padding: 25px;
1451 }
1452
1453 .wpo-plugin-family__plugins {
1454 display: -ms-flexbox;
1455 display: flex;
1456 -ms-flex-wrap: wrap;
1457 flex-wrap: wrap;
1458 padding-left: 1px;
1459 padding-bottom: 1px;
1460 }
1461
1462 .wpo-plugin-family__plugin {
1463 -ms-flex: auto;
1464 flex: auto;
1465 width: 100%;
1466 padding: 30px;
1467 box-sizing: border-box;
1468 border: 1px solid #E3E4E7;
1469 margin-left: -1px;
1470 margin-bottom: -1px;
1471 }
1472 .wpo-plugin-family__plugin:last-of-type {
1473 -ms-flex-positive: 0;
1474 flex-grow: 0;
1475 }
1476 @media (min-width: 782px) {
1477 .wpo-plugin-family__plugin {
1478 width: 50%;
1479 }
1480 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1481 width: 100%;
1482 }
1483 }
1484 @media (max-width: 1080px) {
1485 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1486 width: 50%;
1487 }
1488 }
1489 @media (max-width: 782px) {
1490 .wpo-plugin-family__free .wpo-plugin-family__plugin {
1491 width: 100%;
1492 }
1493 }
1494
1495 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
1496 padding: 0;
1497 }
1498
1499 /* Added for WPO Premium Features tab */
1500 .wpo_feature_cont {
1501 width: 64.5%;
1502 }
1503
1504 .wpo_plugin_family_cont {
1505 width: 34.5%;
1506 }
1507
1508 @media (max-width: 1080px) {
1509 .wpo_feature_cont,
1510 .wpo_plugin_family_cont {
1511 width: 100%;
1512 float: none;
1513 margin: 0;
1514 }
1515 }
1516 .wpo_feature_cont header,
1517 .wpo_plugin_family_cont header {
1518 padding: 20px;
1519 }
1520 @media (max-width: 1080px) {
1521 .wpo_feature_cont header,
1522 .wpo_plugin_family_cont header {
1523 padding: 40px;
1524 }
1525 }
1526 .wpo_feature_cont header h2,
1527 .wpo_plugin_family_cont header h2 {
1528 margin: 0;
1529 }
1530 .wpo_feature_cont header p,
1531 .wpo_plugin_family_cont header p {
1532 margin-bottom: 0;
1533 }
1534
1535 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
1536 border: none;
1537 border-collapse: collapse;
1538 background-color: white;
1539 font-size: 120%;
1540 text-align: center;
1541 }
1542
1543 .wpo_feat_table td {
1544 border: 1px solid #F1F1F1;
1545 border-bottom-width: 4px;
1546 padding: 15px;
1547 }
1548 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1549 background: rgba(241, 241, 241, 0.38);
1550 }
1551 .wpo_feat_table p {
1552 padding: 0px 10px;
1553 margin: 5px 0px;
1554 font-size: 13px;
1555 }
1556 .wpo_feat_table h4 {
1557 margin: 5px 0px;
1558 }
1559 .wpo_feat_table .dashicons {
1560 width: 25px;
1561 height: 25px;
1562 font-size: 25px;
1563 line-height: 1;
1564 }
1565 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
1566 color: green;
1567 }
1568 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
1569 color: red;
1570 }
1571 .wpo_feat_table tr.wpo-main-feature-row td {
1572 background: #f1f1f1;
1573 border-bottom-color: #fafafa;
1574 }
1575 .wpo_feat_table tr.wpo-main-feature-row td img.wpo-premium-image {
1576 width: 64px;
1577 }
1578
1579 .wpo-premium-image {
1580 display: none;
1581 }
1582
1583 @media screen and (min-width: 720px) {
1584 #wpoptimize_table_list_filter {
1585 width: 40%;
1586 }
1587 .wpo-premium-image {
1588 display: block;
1589 float: left;
1590 padding: 16px 18px;
1591 width: 30px;
1592 height: auto;
1593 }
1594 }
1595 @media screen and (min-width: 1220px) {
1596 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
1597 width: 110px;
1598 }
1599 }
1600 .other-plugin-title {
1601 text-decoration: none;
1602 }
1603
1604 @media screen and (max-width: 782px) {
1605 table.wpo_feat_table {
1606 display: block;
1607 }
1608 table.wpo_feat_table tr {
1609 display: -ms-flexbox;
1610 display: flex;
1611 -ms-flex-wrap: wrap;
1612 flex-wrap: wrap;
1613 }
1614 table.wpo_feat_table td {
1615 display: block;
1616 }
1617 table.wpo_feat_table td:first-child {
1618 width: 100%;
1619 border-bottom: none;
1620 }
1621 table.wpo_feat_table td:not(:first-child) {
1622 width: 50%;
1623 box-sizing: border-box;
1624 }
1625 table.wpo_feat_table td:first-child:empty {
1626 display: none;
1627 }
1628 table.wpo_feat_table td[data-colname]::before {
1629 content: attr(data-colname);
1630 font-size: 0.8rem;
1631 color: #CCC;
1632 line-height: 1;
1633 }
1634 }
1635 .wpo-cache-feature-image {
1636 width: 40px;
1637 padding: 16px 14px;
1638 }
1639
1640 /* tablesorter */
1641 #wp-optimize-wrap .wp-list-table td {
1642 word-break: break-all;
1643 }
1644 @media screen and (max-width: 782px) {
1645 #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 {
1646 display: block;
1647 }
1648 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
1649 padding: 3px 8px 3px 35%;
1650 word-break: break-word;
1651 box-sizing: border-box;
1652 }
1653 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
1654 color: #B5B9BE;
1655 }
1656 #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 {
1657 display: block;
1658 }
1659 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
1660 display: block;
1661 box-sizing: border-box;
1662 }
1663 #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
1664 display: none !important;
1665 }
1666 }
1667 body.rtl #wp-optimize-wrap .wpo-table-list-filter {
1668 text-align: left;
1669 }
1670 @media screen and (max-width: 782px) {
1671 body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
1672 padding: 3px 35% 3px 8px;
1673 }
1674 }
1675
1676 .tablesorter-headerRow th {
1677 vertical-align: top;
1678 }
1679
1680 th:not(.sorter-false) .tablesorter-header-inner {
1681 color: #0074ab;
1682 }
1683 th:not(.sorter-false) .tablesorter-header-inner::after {
1684 content: "";
1685 font-family: "dashicons";
1686 font-size: 20px;
1687 line-height: 20px;
1688 height: 20px;
1689 width: 20px;
1690 display: none;
1691 vertical-align: bottom;
1692 }
1693
1694 th.tablesorter-header.tablesorter-headerAsc,
1695 th.tablesorter-header.tablesorter-headerDesc {
1696 font-weight: 500;
1697 border-bottom-color: #0272AA;
1698 }
1699 th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after,
1700 th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
1701 display: inline-block;
1702 }
1703
1704 th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
1705 content: "\f140";
1706 }
1707
1708 th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after {
1709 content: "\f142";
1710 }
1711
1712 th.tablesorter-header:focus {
1713 outline: none;
1714 box-shadow: 0 0 3px rgba(0, 116, 171, 0.78);
1715 }
1716 th.tablesorter-header:focus:not(.tablesorter-headerAsc):not(.tablesorter-headerDesc) .tablesorter-header-inner::after {
1717 content: "\f142";
1718 opacity: 0.5;
1719 }
1720
1721 .tablesorter.hasFilters tr.filtered {
1722 display: none;
1723 }
1724
1725 .wpo-text__dim .dashicons-info {
1726 margin-top: 2px;
1727 margin-right: 5px;
1728 border-radius: 30px;
1729 background: #fff;
1730 color: #E07575;
1731 }
1732
1733 #page_cache_length_value {
1734 height: 28px;
1735 position: relative;
1736 top: 2px;
1737 }
1738
1739 #wp_optimize_preload_cache_status {
1740 margin-left: 10px;
1741 display: inline-block;
1742 color: #82868B;
1743 font-size: smaller;
1744 }
1745
1746 .align-left {
1747 margin: 10px 10px 0px 0px;
1748 float: left;
1749 }
1750
1751 textarea.cache-settings {
1752 display: block;
1753 clear: both;
1754 min-height: 225px;
1755 overflow: scroll;
1756 min-width: 75%;
1757 margin: 10px 0px;
1758 }
1759
1760 #wp-optimize-purge-cache,
1761 #wp-optimize-purge-cache ~ span,
1762 #wp-optimize-purge-cache ~ img {
1763 vertical-align: middle;
1764 top: auto;
1765 }
1766
1767 #wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
1768 font-size: 12px;
1769 }
1770
1771 #wpo_browser_cache_error_message {
1772 padding-top: 10px;
1773 padding-bottom: 10px;
1774 margin-left: 0;
1775 margin-bottom: 10px;
1776 }
1777 #wpo_browser_cache_error_message:empty {
1778 display: none;
1779 }
1780
1781 #wp-optimize-nav-tab-wpo_cache-advanced-contents label,
1782 #wp-optimize-nav-tab-wpo_cache-preload-contents label,
1783 #wp-optimize-nav-tab-wpo_cache-cache-contents label {
1784 font-weight: 600;
1785 }
1786 #wp-optimize-nav-tab-wpo_cache-advanced-contents label em,
1787 #wp-optimize-nav-tab-wpo_cache-preload-contents label em,
1788 #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
1789 font-weight: normal;
1790 }
1791
1792 .wpo-gzip-already-enabled span.dashicons.dashicons-yes,
1793 .wpo-enabled > span.dashicons.dashicons-yes {
1794 font-size: 40px;
1795 width: 40px;
1796 height: 40px;
1797 line-height: 40px;
1798 vertical-align: middle;
1799 color: green;
1800 }
1801
1802 #wp-optimize-wrap {
1803 /*
1804 Asset preload table
1805 */
1806 }
1807 #wp-optimize-wrap .filename {
1808 display: inline-block;
1809 padding: 6px 0;
1810 }
1811 #wp-optimize-wrap .no-files-yet .filename {
1812 font-style: italic;
1813 }
1814 #wp-optimize-wrap .processed {
1815 margin: 0;
1816 }
1817 #wp-optimize-wrap .processed .wpo_min_log {
1818 padding: 8px;
1819 background: white;
1820 border: 1px solid #CDCDCD;
1821 border-radius: 4px;
1822 line-height: 1.5em;
1823 }
1824 #wp-optimize-wrap .processed .wpo_min_log ul {
1825 overflow-x: auto;
1826 }
1827 #wp-optimize-wrap .processed .wpo_min_log ul li {
1828 white-space: nowrap;
1829 }
1830 #wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
1831 color: #dc3232;
1832 }
1833 #wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
1834 opacity: 0.5;
1835 }
1836 #wp-optimize-wrap .processed .wpo_min_log h5 {
1837 margin-top: 0;
1838 margin-bottom: 8px;
1839 border-bottom: 1px solid #cdcdcd;
1840 padding-bottom: 6px;
1841 }
1842 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error {
1843 color: #9B3600;
1844 }
1845 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
1846 color: #9B3600;
1847 }
1848 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
1849 color: #682400;
1850 }
1851 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
1852 color: #9c9c9c;
1853 display: inline-block;
1854 }
1855 #wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
1856 content: "—";
1857 display: inline-block;
1858 margin: 0 10px;
1859 }
1860 #wp-optimize-wrap .show-if-enabled {
1861 display: none;
1862 }
1863 #wp-optimize-wrap .is-enabled .show-if-enabled {
1864 display: block;
1865 }
1866 #wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
1867 display: none;
1868 }
1869 #wp-optimize-wrap .wpo-page[data-whichpage=wpo_minify]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab=status]):not([role=toggle-menu]) {
1870 display: none;
1871 }
1872 #wp-optimize-wrap .wpo-minify-features {
1873 padding-top: 1em;
1874 margin-top: 1em;
1875 border-top: 1px solid #bbb;
1876 }
1877 #wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
1878 margin-bottom: 1em;
1879 }
1880 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
1881 display: none;
1882 }
1883 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
1884 display: block;
1885 }
1886 #wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
1887 margin-bottom: 0;
1888 }
1889 #wp-optimize-wrap .defer-js-settings {
1890 padding-left: 1em;
1891 border-left: 2px solid #E2E2E2;
1892 margin-left: 0.5em;
1893 }
1894 #wp-optimize-wrap .asset-preload-list {
1895 margin-bottom: 1em;
1896 }
1897 #wp-optimize-wrap .asset-preload-list td.asset-href {
1898 width: 55%;
1899 }
1900 #wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
1901 width: 10%;
1902 }
1903 #wp-optimize-wrap .asset-preload-list tr.editing {
1904 display: none;
1905 }
1906 #wp-optimize-wrap .asset-preload-list tr.form {
1907 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1294117647);
1908 }
1909 #wp-optimize-wrap .asset-preload-list tr.form td {
1910 background: #FFF;
1911 border: none;
1912 padding: 10px;
1913 }
1914 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
1915 border-radius: 0 5px 5px 0;
1916 }
1917 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
1918 position: relative;
1919 }
1920 #wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
1921 content: "";
1922 width: 10px;
1923 height: 10px;
1924 background: #FFF;
1925 display: block;
1926 position: absolute;
1927 top: 0;
1928 left: 0;
1929 transform: translate(10px, -5px) rotate(45deg);
1930 }
1931 #wp-optimize-wrap .asset-preload-list tbody + tr.form td {
1932 padding-top: 37px;
1933 position: relative;
1934 }
1935 #wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
1936 content: attr(data-label);
1937 position: absolute;
1938 top: 1em;
1939 left: 10px;
1940 text-transform: uppercase;
1941 color: #D0D2D4;
1942 }
1943 #wp-optimize-wrap .asset-preload-list input#preload_href {
1944 width: 100%;
1945 }
1946 #wp-optimize-wrap .asset-preload-list select#preload_type {
1947 width: 100%;
1948 }
1949 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
1950 #wp-optimize-wrap .asset-preload-list td.asset-edit {
1951 text-align: right;
1952 }
1953 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button,
1954 #wp-optimize-wrap .asset-preload-list td.asset-edit button {
1955 display: inline-block;
1956 }
1957 #wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after,
1958 #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
1959 content: "|";
1960 padding-left: 6px;
1961 padding-right: 4px;
1962 }
1963
1964 /* Modal window */
1965 body.wpo-modal-is-opened {
1966 overflow: hidden;
1967 }
1968
1969 .wpo-modal--container {
1970 position: fixed;
1971 top: 0;
1972 left: 0;
1973 padding: 3em;
1974 width: 100%;
1975 height: 100%;
1976 box-sizing: border-box;
1977 z-index: 9999;
1978 overflow: auto;
1979 }
1980
1981 .wpo-modal {
1982 position: relative;
1983 background: #FFF;
1984 width: calc(100% - 6em);
1985 top: 50%;
1986 transform: translateY(-50%);
1987 margin: 0 auto;
1988 padding: 2em;
1989 box-sizing: border-box;
1990 z-index: 2;
1991 }
1992 .wpo-modal > .wpo-modal--close {
1993 border: none;
1994 background: none;
1995 position: absolute;
1996 top: 10px;
1997 right: 10px;
1998 width: 20px;
1999 height: 20px;
2000 line-height: 1;
2001 padding: 0;
2002 }
2003
2004 .wpo-modal--bg {
2005 position: fixed;
2006 top: 0;
2007 left: 0;
2008 width: 100%;
2009 height: 100%;
2010 background: rgba(0, 0, 0, 0.74);
2011 z-index: 1;
2012 }
2013
2014 .wpo-confirm .wpo-modal--content > h3 {
2015 font-size: 2em;
2016 }
2017
2018 .wpo-confirm .wpo-modal--content > h3 .dashicons {
2019 font-size: 30px;
2020 width: 30px;
2021 height: 30px;
2022 transform: translateY(-5px);
2023 }
2024
2025 .wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2026 color: #feb901;
2027 }
2028
2029 @media (min-width: 780px) {
2030 .power-tweaks--list {
2031 display: -ms-flexbox;
2032 display: flex;
2033 -ms-flex-direction: row;
2034 flex-direction: row;
2035 -ms-flex-wrap: wrap;
2036 flex-wrap: wrap;
2037 }
2038 }
2039 .power-tweaks--list .wpo-power-tweak {
2040 width: 100%;
2041 background: #f2f4f5;
2042 border-radius: 1em;
2043 padding: 1.5em;
2044 margin-bottom: 1em;
2045 box-sizing: border-box;
2046 }
2047 @media (min-width: 780px) {
2048 .power-tweaks--list .wpo-power-tweak {
2049 width: calc(25% - 1em);
2050 margin-right: 1em;
2051 }
2052 }
2053 @media (min-width: 1080px) {
2054 .power-tweaks--list .wpo-power-tweak {
2055 width: calc(33.33333% - 1em);
2056 margin-right: 1em;
2057 }
2058 }
2059 .power-tweaks--list .wpo-power-tweak h4 {
2060 margin-top: 0;
2061 }
2062 .power-tweaks--list .wpo-power-tweak .description {
2063 margin-bottom: 1em;
2064 }
2065 .power-tweaks--list .wpo-power-tweak .details {
2066 padding: 1em;
2067 background: #FFF;
2068 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2069 margin-top: 1em;
2070 margin-bottom: 1em;
2071 }
2072 .power-tweaks--list .wpo-power-tweak .actions {
2073 margin-top: 1em;
2074 margin-bottom: 1em;
2075 }
2076 .power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2077 margin-top: 1em;
2078 font-size: 0.8em;
2079 color: #a9a9a9;
2080 }
2081 .power-tweaks--list .wpo-power-tweak .tweak-is-running {
2082 display: none;
2083 }
2084 .power-tweaks--list .wpo-power-tweak.running {
2085 position: relative;
2086 }
2087 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2088 display: -ms-flexbox;
2089 display: flex;
2090 -ms-flex-align: center;
2091 align-items: center;
2092 -ms-flex-pack: center;
2093 justify-content: center;
2094 position: absolute;
2095 top: 0;
2096 bottom: 0;
2097 left: 0;
2098 right: 0;
2099 background: rgba(242, 244, 245, 0.9);
2100 z-index: 1;
2101 border-radius: 1em;
2102 font-size: 1.7em;
2103 }
2104 .power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
2105 visibility: visible;
2106 }
2107 .power-tweaks--list a.show-faqs span.dashicons {
2108 font-size: inherit;
2109 height: auto;
2110 width: auto;
2111 line-height: inherit;
2112 text-decoration: none;
2113 margin-left: 4px;
2114 }
2115
2116 .wpo-table-usage__premium-mask {
2117 position: absolute;
2118 top: 0;
2119 left: 0;
2120 width: 100%;
2121 height: 100%;
2122 z-index: 1;
2123 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2124 display: -ms-flexbox;
2125 display: flex;
2126 -ms-flex-align: center;
2127 align-items: center;
2128 -ms-flex-pack: center;
2129 justify-content: center;
2130 }
2131 .wpo-table-usage__premium-mask a.wpo-table-usage__premium-link {
2132 background: #FFF;
2133 display: inline-block;
2134 padding: 10px;
2135 border-radius: 3px;
2136 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2137 }