PluginProbe
Jetpack – WP Security, Backup, Speed, & Growth / 13.1.2
Jetpack – WP Security, Backup, Speed, & Growth v13.1.2
16.2-beta 12.0.3 12.1.3 12.2.3 12.3.2 12.4.2 12.5.2 12.6.4 12.7.3 12.8.3 12.9.5 13.0.2 13.1.5 13.2.4 13.3.3 13.4.5 13.5.2 13.6.2 13.7.2 13.8.3 13.9.2 14.0.1 14.1.1 14.2.2 14.3.1 All 501 releases
jetpack / css / jetpack-admin.css

jetpack-admin.css in Jetpack – WP Security, Backup, Speed, & Growth 13.1.2, at css/jetpack-admin.css

1,450 lines 26.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .j-row {
2 width: 100%;
3 margin: 0 auto;
4 }
5 .j-row:before, .j-row:after {
6 content: " ";
7 display: table;
8 }
9 .j-row:after {
10 clear: both;
11 }
12
13 .j-col {
14 padding: 0.85em;
15 width: 100%;
16 float: left;
17 position: relative;
18 }
19
20 @media only screen {
21 .j-sm-5 {
22 width: 41.66667%;
23 }
24 .j-sm-7 {
25 width: 58.33333%;
26 }
27 .j-sm-12 {
28 width: 100%;
29 }
30 }
31 @media (min-width: 530px) {
32 .j-md-4 {
33 width: 33.33333%;
34 }
35 .j-md-6 {
36 width: 50%;
37 }
38 .j-md-8 {
39 width: 66.66667%;
40 }
41 .j-md-12 {
42 width: 100%;
43 }
44 }
45 @media (min-width: 782px) {
46 .j-lrg-4 {
47 width: 33.33333%;
48 }
49 .j-lrg-5 {
50 width: 41.66667%;
51 }
52 .j-lrg-6 {
53 width: 50%;
54 }
55 .j-lrg-7 {
56 width: 58.33333%;
57 }
58 .j-lrg-8 {
59 width: 66.66667%;
60 }
61 .j-lrg-12 {
62 width: 100%;
63 }
64 }
65 @keyframes jetpack-candy {
66 0% {
67 transform: scale(1);
68 }
69 20% {
70 transform: scale(1.15);
71 }
72 60% {
73 transform: scale(0.95);
74 }
75 100% {
76 transform: scale(1);
77 }
78 }
79 @keyframes jetpack-loading-fade {
80 0% {
81 opacity: 0.5;
82 }
83 50% {
84 opacity: 1;
85 }
86 100% {
87 opacity: 0.5;
88 }
89 }
90 @keyframes jetpack-rotate {
91 to {
92 transform: rotate(1turn);
93 }
94 }
95 .button,
96 .download-jetpack {
97 transition: all 0.1s ease-in-out;
98 }
99
100 .jp-button, .jp-button--settings {
101 display: inline-block;
102 position: relative;
103 padding: 0.7692307692em 1.4615384615em;
104 color: #efefef;
105 font-weight: bold;
106 font-size: 0.9285714286em;
107 line-height: 1;
108 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
109 background: #6f7476;
110 border-radius: 3px;
111 }
112 .jp-button:visited, .jp-button--settings:visited {
113 color: #efefef;
114 }
115 .jp-button:hover, .jp-button--settings:hover, .jp-button:focus, .jp-button--settings:focus {
116 color: #fff;
117 background: #57972d;
118 }
119 .jp-button:active, .jp-button--settings:active {
120 background: #57972d;
121 opacity: 0.8;
122 }
123
124 .jp-button--settings {
125 background: #93b45f;
126 color: #e8eedf;
127 }
128 .jp-button--settings:visited {
129 color: #e8eedf;
130 }
131 .jp-button--settings:hover, .jp-button--settings:focus {
132 background: #9fbd72;
133 color: #fff;
134 }
135 .jp-button--settings.current {
136 background: #3c6621;
137 color: #fff;
138 box-shadow: inset 0 2px 0 #365A1F, inset 0 1px 3px #3c6621;
139 }
140
141 .download-jetpack {
142 display: inline-block;
143 position: relative;
144 padding: 0.6428571429em 1.0869565217em 0.5357142857em;
145 color: #fff;
146 font-weight: 400;
147 font-size: 20px;
148 line-height: 1;
149 background: #518d2a;
150 z-index: 3;
151 border-radius: 6px;
152 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
153 }
154 .download-jetpack:visited {
155 color: #fff;
156 }
157 .download-jetpack:hover, .download-jetpack:focus {
158 color: #fff;
159 background: #57972d;
160 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
161 }
162 .download-jetpack:active {
163 top: 6px;
164 box-shadow: 0 0px 0 #3e6c20, 0 0 0 rgba(0, 0, 0, 0.4);
165 }
166 .download-jetpack:active:after {
167 top: -6px;
168 }
169 .download-jetpack:before {
170 content: "";
171 display: inline-block;
172 position: relative;
173 top: -2px;
174 margin-right: 13px;
175 width: 30px;
176 height: 30px;
177 vertical-align: middle;
178 background: url(../images/connect-plug.svg) center center no-repeat;
179 background-size: 100%;
180 }
181 .download-jetpack:after {
182 content: "";
183 position: absolute;
184 top: 0;
185 left: 0;
186 width: 100%;
187 height: 100%;
188 }
189 @media (max-width: 1147px) {
190 .download-jetpack {
191 font-size: 1.2857142857em;
192 }
193 .download-jetpack:before {
194 top: -1px;
195 width: 23px;
196 height: 23px;
197 }
198 }
199 @media (max-width: 900px) {
200 .download-jetpack:active {
201 top: 0;
202 }
203 }
204 @media (max-width: 530px) {
205 .download-jetpack {
206 font-size: 1.2142857143em;
207 font-weight: 600;
208 }
209 .download-jetpack:before {
210 width: 19px;
211 height: 19px;
212 margin-right: 9px;
213 }
214 }
215
216 .jp-spinner {
217 display: flex;
218 align-items: center;
219 }
220
221 .jp-spinner__inner,
222 .jp-spinner__outer {
223 margin: auto;
224 box-sizing: border-box;
225 border: 0.1em solid transparent;
226 border-radius: 50%;
227 border-top-color: #00aadc;
228 animation: 3s linear infinite;
229 animation-name: jetpack-rotate;
230 }
231
232 .jp-spinner__outer {
233 width: 20px;
234 height: 20px;
235 font-size: 20px;
236 }
237
238 .jp-spinner__inner {
239 width: 100%;
240 height: 100%;
241 border-right-color: #00aadc;
242 opacity: 0.4;
243 }
244
245 @font-face {
246 font-family: "automatticons";
247 src: url(../_inc/fonts/automatticons/automatticons.eot);
248 src: url(../_inc/fonts/automatticons/automatticons.eot?#iefix) format("embedded-opentype"), url(../_inc/fonts/automatticons/automatticons.woff) format("woff"), url(../_inc/fonts/automatticons/automatticons.ttf) format("truetype"), url(../_inc/fonts/automatticons/automatticons.svg#automatticonsregular) format("svg");
249 font-weight: normal;
250 font-style: normal;
251 }
252 .nav-horizontal:after {
253 content: ".";
254 display: block;
255 height: 0;
256 clear: both;
257 visibility: hidden;
258 }
259 .nav-horizontal a {
260 display: inline-block;
261 }
262 .nav-horizontal li {
263 position: relative;
264 float: left;
265 }
266 .nav-horizontal ul {
267 margin: 0;
268 padding: 0;
269 }
270
271 @media (max-width: 782px) {
272 .configure .frame.top.fixed {
273 padding-left: 0;
274 }
275 }
276
277 .wrap.inner,
278 .page-content {
279 max-width: 950px;
280 margin: 0 auto;
281 }
282 .wrap.inner li,
283 .page-content li {
284 line-height: 23px;
285 }
286
287 @media (max-width: 530px) {
288 .page-content {
289 margin-top: 0;
290 }
291 }
292
293 @media (max-width: 1147px) {
294 .wrap.inner {
295 background: #f6f7f7;
296 padding: 15px;
297 }
298 }
299 @media (max-width: 530px) {
300 .wrap.inner {
301 margin-top: 1.7142857143em;
302 }
303 }
304
305 .page-content.about {
306 position: relative;
307 z-index: 10;
308 }
309 @media (max-width: 1147px) {
310 .page-content.about {
311 background: #f6f7f7;
312 padding: 15px;
313 }
314 }
315
316 @media (max-width: 1147px) {
317 .page-content.configure {
318 background: #f6f7f7;
319 }
320 }
321
322 .footer nav {
323 max-width: 550px;
324 margin: 0 auto;
325 }
326
327 .header {
328 left: 0;
329 right: 0;
330 background: #008710;
331 }
332
333 .header-nav li {
334 line-height: 60px;
335 }
336 .header-nav a {
337 padding: 0 0.7142857143em;
338 line-height: 24px;
339 }
340 .header-nav .jetpack-logo a {
341 display: inline-block;
342 position: relative;
343 width: 214px;
344 margin-right: 6px;
345 background: url(../images/jetpack-logo.png) center center no-repeat;
346 background: url(../images/jetpack-logo.svg) center center no-repeat, none;
347 background-size: 183px auto;
348 color: #fff;
349 line-height: 60px;
350 font-weight: normal;
351 }
352 .header-nav .jetpack-logo a span {
353 text-indent: -9999px;
354 visibility: hidden;
355 }
356 .header-nav .jetpack-logo a:before {
357 content: "";
358 position: absolute;
359 top: 0;
360 left: 0;
361 width: 100%;
362 height: 100%;
363 background-size: 183px 32px;
364 }
365 .header-nav .jetpack-modules + .jetpack-modules {
366 margin-left: 15px;
367 }
368
369 .main-nav {
370 float: left;
371 }
372 .main-nav li {
373 margin: 0;
374 }
375 @media (max-width: 900px) {
376 .main-nav {
377 font-size: 13px;
378 }
379 }
380
381 .jetpack-pagestyles #screen-meta {
382 margin: 0;
383 }
384 .jetpack-pagestyles #screen-meta-links .screen-meta-toggle {
385 z-index: 2;
386 }
387 .jetpack-pagestyles #screen-options-link-wrap, .jetpack-pagestyles #contextual-help-link-wrap {
388 border: none;
389 }
390 .jetpack-pagestyles .update-nag {
391 display: none;
392 }
393
394 .loading {
395 bottom: 50%;
396 position: absolute;
397 top: 50%;
398 width: 100%;
399 }
400 .loading span {
401 color: #999;
402 }
403
404 .modal {
405 background: #fff;
406 position: fixed;
407 top: 52px;
408 bottom: 20px;
409 right: 20px;
410 left: 20px;
411 margin-left: 160px;
412 display: none;
413 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
414 z-index: 500;
415 }
416 .modal .close {
417 position: absolute;
418 top: 0;
419 right: 0;
420 font: 300 1.7142857143em "genericons" !important;
421 color: #777;
422 content: "\f405";
423 display: inline-block;
424 padding: 0.2857142857em 0.7142857143em 0.4285714286em;
425 z-index: 5;
426 }
427 .modal .close:hover {
428 background: #f0f0f1;
429 opacity: 0.8;
430 }
431 .modal .close:active {
432 background: #f0f0f1;
433 opacity: 0.4;
434 }
435 .modal .content-container {
436 position: absolute;
437 top: 0;
438 right: 0;
439 bottom: 0;
440 left: 0;
441 overflow: auto;
442 padding: 2.1428571429em;
443 }
444 .modal .content {
445 margin: 0 auto;
446 max-width: 900px;
447 text-align: left;
448 }
449 .modal h2 {
450 text-align: left;
451 margin-top: 0;
452 color: #5d6d74;
453 font-weight: 300;
454 line-height: 32px;
455 text-shadow: 0 1px 1px #fff;
456 }
457 @media (max-width: 530px) {
458 .modal h2 {
459 font-size: 26px;
460 }
461 }
462 .modal h5 {
463 clear: left;
464 }
465 .modal p {
466 font-size: 1.2307692308em;
467 }
468 .modal footer {
469 position: absolute;
470 left: 0;
471 bottom: 0;
472 width: 100%;
473 padding: 12px 20px;
474 border-top: 1px solid #dcdcde;
475 background: #fff;
476 text-align: right;
477 }
478 .modal footer ul {
479 margin: 0;
480 }
481 .modal footer li {
482 display: inline-block;
483 margin: 0;
484 }
485 .modal .button-secondary,
486 .modal .button-primary:active {
487 vertical-align: baseline;
488 }
489 @media (max-width: 900px) {
490 .modal {
491 bottom: 5%;
492 margin-left: 36px;
493 font-size: 80%;
494 }
495 .modal .content {
496 top: 38px;
497 }
498 }
499 @media (max-width: 782px) {
500 .modal {
501 top: 66px;
502 margin-left: 0;
503 }
504 }
505 @media (max-width: 600px) {
506 .modal {
507 top: 10px;
508 right: 10px;
509 bottom: 10px;
510 left: 10px;
511 }
512 }
513
514 .jp-info-img {
515 float: right;
516 margin: 0 0 8px 30px;
517 }
518 .jp-info-img img {
519 border: 1px solid #dcdcde;
520 max-width: 100%;
521 height: auto;
522 }
523 .jp-info-img img:first-child {
524 margin-top: 0;
525 }
526 @media (max-width: 782px) {
527 .jp-info-img {
528 float: none;
529 margin: 0 0 15px;
530 }
531 }
532
533 .content-container.modal-footer {
534 bottom: 53px;
535 }
536
537 .shade {
538 background: #000;
539 bottom: 0;
540 cursor: pointer;
541 display: none;
542 left: 0;
543 opacity: 0.2;
544 position: fixed;
545 right: 0;
546 top: 0;
547 z-index: 11;
548 }
549
550 .footer {
551 margin-top: 1.4285714286em;
552 position: relative;
553 padding: 10em 0 4.2857142857em;
554 text-align: center;
555 }
556 .footer:before, .footer:after {
557 content: "";
558 position: absolute;
559 left: 0;
560 pointer-events: none;
561 }
562 .footer:before {
563 top: 0;
564 margin-top: -1px;
565 width: 100%;
566 height: 195px;
567 }
568 .footer:after {
569 display: none;
570 }
571 .footer .download-jetpack {
572 margin-bottom: 33px;
573 }
574 @media (min-width: 1147px) {
575 .footer {
576 padding-bottom: 35px;
577 }
578 }
579 @media (max-width: 1147px) {
580 .footer {
581 padding-top: 165px;
582 padding-bottom: 0;
583 }
584 .footer:before {
585 background-size: 160% auto;
586 }
587 .footer ul {
588 float: none;
589 overflow: hidden;
590 }
591 }
592 @media (max-width: 900px) {
593 .footer {
594 padding-top: 146px;
595 }
596 }
597 @media (max-width: 782px) {
598 .footer {
599 margin-top: 0;
600 }
601 }
602 @media (max-width: 530px) {
603 .footer {
604 margin-top: 0;
605 padding-top: 135px;
606 }
607 }
608 @media (max-width: 320px) {
609 .footer {
610 padding-top: 76px;
611 }
612 }
613
614 .footer nav {
615 max-width: 100%;
616 }
617 .footer nav a,
618 .footer nav a:visited {
619 padding: 4px 6px;
620 color: #999;
621 }
622 .footer nav a:hover, .footer nav a:focus,
623 .footer nav a:visited:hover,
624 .footer nav a:visited:focus {
625 color: #008710;
626 }
627 @media (max-width: 1147px) {
628 .footer nav a:hover, .footer nav a:focus,
629 .footer nav a:visited:hover,
630 .footer nav a:visited:focus {
631 color: #008710;
632 }
633 }
634 @media (max-width: 530px) {
635 .footer nav li {
636 display: block;
637 float: none;
638 margin: 0;
639 text-align: left;
640 }
641 .footer nav a {
642 display: block;
643 padding: 0 16px;
644 line-height: 44px;
645 }
646 }
647
648 .primary {
649 padding: 25px 15px 10px 15px;
650 border-bottom: 1px solid #f0f0f1;
651 }
652
653 .secondary-footer {
654 margin: 0 auto;
655 }
656 .secondary-footer li {
657 margin-right: 5px;
658 }
659 @media (min-width: 782px) {
660 .secondary-footer {
661 padding: 8px 15px 10px;
662 margin-bottom: 30px;
663 border-bottom: 1px solid #f0f0f1;
664 }
665 }
666 @media (min-width: 1147px) {
667 .secondary-footer {
668 margin-bottom: 0;
669 }
670 }
671 @media (max-width: 782px) {
672 .secondary-footer {
673 padding: 8px 15px 8px;
674 border-bottom: none;
675 }
676 }
677 @media (max-width: 530px) {
678 .secondary-footer {
679 margin: 0;
680 padding: 0;
681 border: none;
682 font-weight: 400;
683 }
684 .secondary-footer a {
685 border-top: 1px solid #f0f0f1;
686 }
687 }
688
689 .footer .a8c-attribution {
690 margin: 0;
691 padding: 0 6px;
692 color: #bbb;
693 font-size: 0.7857142857em;
694 font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
695 text-transform: uppercase;
696 }
697 .footer .a8c-attribution a {
698 display: inline-block;
699 position: relative;
700 padding: 4px 16px;
701 right: 9999px;
702 outline: 0;
703 }
704 .footer .a8c-attribution a:after {
705 content: "A";
706 position: absolute;
707 top: 2px;
708 right: -9999px;
709 height: 100%;
710 color: #999;
711 font-size: 1.5454545455em;
712 font-family: "automatticons";
713 text-align: center;
714 }
715 .footer .a8c-attribution a:hover:after {
716 animation: jetpack-candy 0.4s ease-in-out;
717 }
718
719 @media (min-width: 782px) {
720 .secondary {
721 padding: 0 15px 10px 15px;
722 border-bottom: 1px solid #f0f0f1;
723 }
724 }
725 @media (min-width: 1147px) {
726 .secondary {
727 padding: 0 15px 10px 15px;
728 border-bottom: none;
729 }
730 }
731
732 .jetpack-message {
733 background: #00a113;
734 border: 1px solid #006e0d;
735 margin: 33px auto 0;
736 max-width: 90%;
737 position: relative;
738 z-index: 2;
739 }
740 .jetpack-message.is-opt-in {
741 margin: 50px 0 0;
742 max-width: 100%;
743 padding: 10px 15px;
744 background: #fff;
745 border: 0;
746 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
747 font-size: 13px;
748 text-align: center;
749 }
750 .subhead .jetpack-message.is-opt-in {
751 margin: 0;
752 padding-bottom: 0;
753 background: transparent;
754 box-shadow: none;
755 }
756 .subhead .jetpack-message.is-opt-in .jp-button, .subhead .jetpack-message.is-opt-in .jp-button--settings {
757 display: inline-block;
758 }
759 .jetpack-message.is-opt-in p {
760 color: #3c4549;
761 }
762 .jetpack-message.is-opt-in .jp-button, .jetpack-message.is-opt-in .jp-button--settings {
763 margin-top: 15px;
764 display: none;
765 }
766 .jetpack-message .squeezer h2 {
767 font-size: 1em;
768 }
769 .jetpack-message h2 {
770 color: #fff;
771 margin: 0;
772 }
773 .jetpack-message p {
774 color: #fff;
775 margin: 0;
776 opacity: 0.7;
777 }
778 .jetpack-message .squeezer {
779 padding: 23px 23px 23px 80px;
780 position: relative;
781 text-align: left;
782 }
783 .jetpack-message .squeezer:before {
784 color: #fff;
785 content: "\f418";
786 font-family: "Genericons";
787 font-size: 33px;
788 height: 33px;
789 left: 25px;
790 opacity: 0.6;
791 position: absolute;
792 top: 23px;
793 top: calc(50% - 22px);
794 }
795 @media (max-width: 530px) {
796 .jetpack-message .squeezer {
797 padding: 23px;
798 }
799 .jetpack-message .squeezer:before {
800 display: none;
801 }
802 }
803 .jetpack-message .squeezer a {
804 color: #FFF;
805 border-bottom: 1px solid #D5E4BD;
806 }
807 .jetpack-message .squeezer a:hover {
808 border-bottom: 1px solid #F1F6E9;
809 }
810 .jetpack-message.error .squeezer:before, .jetpack-message.jetpack-err .squeezer:before {
811 content: "\f414";
812 }
813
814 .configure-module .jetpack-message {
815 max-width: 100%;
816 }
817
818 @media (max-width: 530px) {
819 .wrap.inner.jp-support .jp-support-column-left {
820 width: 100%;
821 }
822 .wrap.inner.jp-support .jp-support-column-left .widget-text {
823 margin-right: 0;
824 width: 100%;
825 }
826 .wrap.inner.jp-support .jp-support-column-right {
827 width: 100%;
828 }
829 }
830 @media screen and (max-width: 515px) {
831 .jp-frame .header-nav {
832 padding-bottom: 10px;
833 }
834 .jp-frame .header-nav li {
835 line-height: 30px;
836 }
837 .jp-frame .header-nav .jetpack-logo {
838 width: 100%;
839 text-align: center;
840 }
841 .jp-frame .header-nav .jetpack-modules {
842 margin: 0;
843 width: 50%;
844 text-align: right;
845 padding: 0 5px;
846 }
847 .jp-frame .header-nav .jetpack-modules + .jetpack-modules {
848 text-align: left;
849 }
850 .jp-frame .header-nav .jetpack-modules:nth-child(4) {
851 text-align: center;
852 margin: 0 auto;
853 width: 100%;
854 }
855 .jp-frame .header-nav .jetpack-modules:nth-child(4) a {
856 padding: 0 10px;
857 }
858 }
859 #ie-legacy-notice .dops-notice__content {
860 display: inline-block;
861 margin-left: 10px;
862 }
863
864 .page-content.configure {
865 margin-top: 0;
866 }
867
868 .configure .frame.top {
869 border: none;
870 box-shadow: none;
871 padding-top: 1.4285714286em;
872 position: relative;
873 top: auto;
874 }
875 .configure .frame.top.fixed {
876 background: #f6f7f7;
877 border-bottom: 1px solid #e9e9e9;
878 padding-left: 160px;
879 margin-top: -6px;
880 position: fixed;
881 right: 0;
882 top: 32px;
883 width: 100%;
884 z-index: 4;
885 box-shadow: 0 2px 2px -2px #f0f0f1;
886 }
887 @media (max-width: 782px) {
888 .configure .frame.top.fixed {
889 border: none;
890 box-shadow: none;
891 padding-top: 1.4285714286em;
892 position: relative;
893 top: auto;
894 }
895 }
896 @media (max-width: 600px) {
897 .configure .frame.top.fixed {
898 top: 0;
899 }
900 }
901
902 .jp-frame-top-fixed .configure {
903 padding-top: 94px;
904 }
905
906 .filter-search {
907 display: none;
908 margin-top: 15px;
909 float: left;
910 }
911 @media (max-width: 782px) {
912 .filter-search {
913 display: block;
914 }
915 }
916 @media (max-width: 530px) {
917 .filter-search {
918 display: none;
919 }
920 }
921 .filter-search .button {
922 background: rgb(255, 255, 255);
923 border: 1.5px solid rgb(0, 0, 0);
924 border-radius: 4px;
925 font-size: 1rem;
926 line-height: 24px;
927 letter-spacing: -0.01em;
928 color: rgb(0, 0, 0);
929 }
930
931 .fixed-top {
932 box-sizing: border-box;
933 border-bottom: 1px solid #DCDCDE;
934 /* Auto layout */
935 display: flex;
936 flex-direction: row;
937 align-items: center;
938 padding: 16px;
939 gap: 16px;
940 }
941 .fixed-top .tablenav.top {
942 display: flex;
943 padding: 0;
944 margin: 0 0 0 10px;
945 height: auto;
946 }
947 .fixed-top select#bulk-action-selector-top {
948 width: 180px;
949 height: 40px;
950 border: 1px solid #DCDCDE;
951 border-radius: 4px;
952 padding: 8px 16px;
953 margin-right: 8px;
954 line-height: normal;
955 color: rgb(0, 0, 0);
956 font-size: 0.875rem;
957 letter-spacing: -0.02em;
958 }
959 .fixed-top .alignleft.actions.bulkactions {
960 display: flex;
961 align-items: center;
962 }
963 .fixed-top .alignleft.actions.bulkactions .button {
964 display: flex;
965 flex-direction: row;
966 justify-content: center;
967 align-items: center;
968 padding: 6px 24px;
969 width: 93px;
970 height: 40px;
971 background: rgb(255, 255, 255);
972 border: 1.5px solid rgb(0, 0, 0);
973 border-radius: 4px;
974 font-size: 1rem;
975 line-height: 24px;
976 letter-spacing: -0.01em;
977 color: rgb(0, 0, 0);
978 }
979 #jp-plugin-container .table-bordered {
980 border-collapse: collapse;
981 }
982 #jp-plugin-container .table-bordered .check-column input[type=checkbox] {
983 width: 20px;
984 height: 20px;
985 border-radius: 2px;
986 margin-left: 0;
987 }
988 #jp-plugin-container .table-bordered .check-column input[type=checkbox]::before {
989 margin: -2px;
990 color: rgb(0, 0, 0);
991 width: 21px;
992 height: 21px;
993 }
994 #jp-plugin-container .table-bordered .info {
995 letter-spacing: -0.02em;
996 }
997 #jp-plugin-container .table-bordered .row-actions a.dops-button.is-compact {
998 color: rgb(0, 0, 0);
999 line-height: 20px;
1000 font-size: 0.75rem;
1001 font-weight: 600;
1002 background: rgb(255, 255, 255);
1003 border: 1.5px solid rgb(0, 0, 0);
1004 border-radius: 4px;
1005 box-shadow: none;
1006 text-decoration: none;
1007 padding: 3px 8px;
1008 }
1009 #jp-plugin-container .table-bordered .row-actions .delete a.dops-button.is-compact {
1010 color: #D63638;
1011 border: 1px solid #DCDCDE;
1012 }
1013 #jp-plugin-container .table-bordered .row-actions .configure a {
1014 color: rgb(0, 0, 0);
1015 font-size: 0.75rem;
1016 line-height: 20px;
1017 font-weight: 600;
1018 text-decoration: none;
1019 }
1020 #jp-plugin-container .table-bordered .row-actions .configure a:hover {
1021 text-decoration: underline;
1022 }
1023
1024 .wrap {
1025 margin: 0;
1026 padding: 0 1.5em 1em;
1027 overflow: hidden;
1028 }
1029 .wrap .manage-left {
1030 float: left;
1031 margin: 0;
1032 padding: 0;
1033 width: 63%;
1034 }
1035 .wrap .manage-left table {
1036 width: 100%;
1037 }
1038 .wrap .manage-left th {
1039 font-weight: 400;
1040 }
1041 @media (max-width: 782px) {
1042 .wrap .manage-left {
1043 width: 100%;
1044 }
1045 }
1046 .wrap .manage-right {
1047 margin-top: 24px;
1048 padding: 0;
1049 float: right;
1050 width: 35%;
1051 z-index: 1;
1052 }
1053 .wrap .manage-right p {
1054 font-size: 0.875rem;
1055 line-height: 24px;
1056 letter-spacing: -0.02em;
1057 font-weight: 700;
1058 color: #2C3338;
1059 margin: 16px 0 4px 0;
1060 }
1061 .wrap .manage-right .bumper {
1062 margin-left: 48px;
1063 }
1064 .wrap .manage-right.show {
1065 display: block;
1066 overflow-y: auto;
1067 overflow-x: hidden;
1068 position: absolute;
1069 z-index: 100000;
1070 }
1071 .wrap .manage-right .search-bar {
1072 margin-bottom: 18px;
1073 max-width: 300px;
1074 }
1075 .wrap .manage-right p.search-box {
1076 width: 100%;
1077 height: auto;
1078 margin: 16px 0 0 0;
1079 float: none;
1080 display: block;
1081 position: static;
1082 }
1083 .wrap .manage-right p.search-box input[type=search] {
1084 border: 1px solid #DCDCDE;
1085 border-radius: 4px;
1086 padding: 8px 16px 8px 40px;
1087 line-height: 24px;
1088 font-size: 1rem;
1089 letter-spacing: -0.02em;
1090 color: rgb(0, 0, 0);
1091 font-weight: 400;
1092 height: 40px;
1093 width: 100%;
1094 background-image: url(../images/icon-search.svg);
1095 background-repeat: no-repeat;
1096 background-position: 8px center;
1097 float: none;
1098 }
1099 .wrap .manage-right p.search-box input[type=search]::placeholder {
1100 color: #8C8F94;
1101 }
1102 @media (max-width: 782px) {
1103 .wrap .manage-right p.search-box input[type=search] {
1104 max-width: 90%;
1105 }
1106 }
1107 .wrap .manage-right p.search-box input[type=submit] {
1108 display: none;
1109 }
1110 @media (max-width: 782px) {
1111 .wrap .manage-right .button-group {
1112 white-space: normal;
1113 }
1114 }
1115 .wrap .manage-right .button-group .button {
1116 box-shadow: none;
1117 padding-left: 24px;
1118 padding-right: 24px;
1119 min-width: 90px;
1120 border: 1px solid #DCDCDE;
1121 color: rgb(0, 0, 0);
1122 height: 40px;
1123 font-size: 13px;
1124 line-height: 18px;
1125 font-weight: 400;
1126 background: rgb(255, 255, 255);
1127 }
1128 .wrap .manage-right .button-group .button:hover {
1129 background: #F6F7F7;
1130 }
1131 .wrap .manage-right .button-group .button:focus {
1132 border-color: rgb(0, 0, 0);
1133 }
1134 .wrap .manage-right .button-group button.dops-button.button.active {
1135 background: rgb(0, 0, 0);
1136 color: rgb(255, 255, 255);
1137 font-weight: 600;
1138 }
1139 .wrap .manage-right .button-group button.dops-button.button.active:hover {
1140 background: #2C3338;
1141 }
1142 .wrap .manage-right .button-group button.dops-button.button.active:focus {
1143 border-color: rgb(255, 255, 255);
1144 box-shadow: 0 0 0 1px rgb(0, 0, 0);
1145 }
1146 .wrap .manage-right .subsubsub {
1147 margin: 0;
1148 padding: 0;
1149 }
1150 .wrap .manage-right .subsubsub li {
1151 display: block;
1152 text-align: left;
1153 margin: 0 0 4px 0;
1154 font-size: 14px;
1155 }
1156 .wrap .manage-right .subsubsub li a {
1157 padding: 0;
1158 color: rgb(0, 0, 0);
1159 text-decoration: underline;
1160 font-size: 0.875rem;
1161 line-height: 24px;
1162 letter-spacing: -0.02em;
1163 }
1164 .wrap .manage-right .subsubsub li a:hover {
1165 text-decoration-thickness: 3px;
1166 }
1167 .wrap .manage-right .subsubsub li.current {
1168 border-radius: 4px;
1169 background: rgb(0, 0, 0);
1170 padding: 2px 6px;
1171 }
1172 .wrap .manage-right .subsubsub li.current a, .wrap .manage-right .subsubsub li.current .count {
1173 color: rgb(255, 255, 255);
1174 text-decoration: none;
1175 font-weight: 700;
1176 }
1177 @media (max-width: 782px) {
1178 .wrap .manage-right {
1179 background: #fff;
1180 bottom: 0;
1181 display: none;
1182 min-width: 300px;
1183 position: fixed;
1184 right: 0;
1185 top: 0;
1186 z-index: 13;
1187 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
1188 }
1189 .wrap .manage-right .bumper {
1190 margin: 13px;
1191 }
1192 .wrap .manage-right .navbar-form {
1193 margin: 16px 0 0 0;
1194 padding: 0;
1195 }
1196 }
1197
1198 @media (max-width: 782px) {
1199 .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
1200 padding: 11px 10px;
1201 display: block;
1202 }
1203 .manage-right.show .subsubsub li {
1204 padding: 5px;
1205 }
1206 }
1207 @media (max-width: 650px) {
1208 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
1209 float: none;
1210 padding-left: 18px;
1211 }
1212 }
1213 @media (max-width: 430px) {
1214 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
1215 display: none;
1216 }
1217 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
1218 display: block;
1219 }
1220 }
1221 .jetpack-modules-list-table-form .widefat td {
1222 width: 100%;
1223 }
1224
1225 .jetpack-module-list .widefat {
1226 border: none;
1227 }
1228 .jetpack-module-list .wrap {
1229 display: flex;
1230 overflow: visible;
1231 }
1232 .jetpack-module-list .wrap .manage-left {
1233 flex-grow: 1;
1234 width: auto;
1235 }
1236 .jetpack-module-list .wrap .manage-right {
1237 flex-grow: 0;
1238 }
1239
1240 tr.jetpack-module {
1241 box-sizing: border-box;
1242 display: flex;
1243 flex-direction: row;
1244 align-items: center;
1245 padding: 16px;
1246 gap: 16px;
1247 width: 100%;
1248 height: 60px;
1249 background: rgb(255, 255, 255);
1250 border-bottom: 1px solid #DCDCDE;
1251 }
1252 @media (max-width: 782px) {
1253 tr.jetpack-module {
1254 padding: 4px 10px;
1255 height: auto;
1256 }
1257 }
1258 tr.jetpack-module:last-of-type {
1259 border-bottom: 0;
1260 }
1261 tr.jetpack-module th.check-column {
1262 padding-top: 0;
1263 width: auto;
1264 }
1265 tr.jetpack-module a, tr.jetpack-module p {
1266 text-decoration: none;
1267 }
1268
1269 tr.jetpack-module.unavailable {
1270 background: #F9F9F6;
1271 }
1272
1273 tr.jetpack-module.active {
1274 background: #F9F9F6;
1275 }
1276 tr.jetpack-module.active .column-name .info {
1277 font-weight: 700;
1278 }
1279
1280 tr.jetpack-module .column-name {
1281 color: #2C3338;
1282 float: left;
1283 align-items: center;
1284 display: flex;
1285 padding: 0;
1286 }
1287
1288 tr.jetpack-module .row-actions {
1289 align-items: center;
1290 display: flex;
1291 position: relative;
1292 margin-left: auto;
1293 left: 0;
1294 }
1295 tr.jetpack-module .row-actions span.configure {
1296 margin-right: 16px;
1297 }
1298
1299 /* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
1300 .configure-module p {
1301 font-size: 14px;
1302 }
1303 .configure-module p.success, .configure-module p.error {
1304 color: rgb(255, 255, 255);
1305 padding: 10px;
1306 }
1307 .configure-module p.success {
1308 background-color: #008710;
1309 }
1310 .configure-module p.error {
1311 background-color: #d94f4f;
1312 }
1313
1314 .protect-status p {
1315 font-size: 16px;
1316 }
1317 .protect-status strong {
1318 display: inline-block;
1319 margin-top: 10px;
1320 background: #fff;
1321 padding: 10px;
1322 border: 1px #dcdcde solid;
1323 font-size: 16px;
1324 color: #000;
1325 max-width: 100%;
1326 }
1327 .protect-status.attn {
1328 color: #d94f4f;
1329 }
1330 .protect-status.working {
1331 color: #008710;
1332 }
1333
1334 .protect-whitelist textarea {
1335 width: 100%;
1336 min-height: 150px;
1337 }
1338
1339 /* btns + inputs */
1340 .configure-module input[disabled] {
1341 opacity: 0.5;
1342 }
1343 .configure-module input.button-primary {
1344 font-weight: bold;
1345 }
1346
1347 /* whitelist table */
1348 @media only screen and (min-width: 1100px) {
1349 .protect-whitelist {
1350 width: 65%;
1351 float: left;
1352 }
1353 } /* end > 1065px */
1354 @media only screen and (max-width: 400px) {
1355 .protect-status strong {
1356 font-size: 12px;
1357 overflow: auto;
1358 }
1359 } /* end < 400px */
1360 .manage__icon {
1361 width: 155px;
1362 height: 155px;
1363 margin: 20px auto;
1364 }
1365
1366 .manage-page .manage__description {
1367 max-width: 600px;
1368 text-align: center;
1369 font-size: 22px;
1370 color: #999;
1371 margin: 20px auto;
1372 }
1373 .manage-page .manage__button {
1374 font-size: 16px;
1375 padding: 0 20px;
1376 height: 40px;
1377 line-height: 40px;
1378 }
1379
1380 .manage__title .genericon {
1381 font-size: 38px;
1382 color: #81A944;
1383 }
1384
1385 .manage__link {
1386 font-size: 16px;
1387 padding: 0 20px;
1388 height: 40px;
1389 line-height: 40px;
1390 font-weight: normal;
1391 }
1392 .manage__link .genericon {
1393 font-size: 28px;
1394 vertical-align: middle;
1395 margin-top: -6px;
1396 }
1397
1398 .jp-content .hide {
1399 display: none;
1400 }
1401 .jp-content .landing {
1402 margin: 0 auto;
1403 z-index: 2;
1404 position: relative;
1405 }
1406 .jp-content h1 {
1407 font-weight: 400;
1408 line-height: 1.75em;
1409 position: relative;
1410 z-index: 3;
1411 width: 100%;
1412 text-align: center;
1413 }
1414 .jp-content h1.success {
1415 color: #008710;
1416 }
1417 .jp-content .footer {
1418 padding-top: 0;
1419 margin-top: 0;
1420 background-image: none;
1421 }
1422 .jp-content .footer:before {
1423 height: inherit;
1424 }
1425 .jp-content .more-info:before {
1426 content: none;
1427 }
1428
1429 .landing .wpcom-connect {
1430 min-height: 400px;
1431 }
1432
1433 .wpcom-connect .j-col {
1434 padding: 0;
1435 }
1436
1437 @media (max-width: 1147px) {
1438 .jp-content .landing {
1439 padding: 0 2em;
1440 }
1441 .jp-content .footer {
1442 padding-top: 1.5em;
1443 }
1444 }
1445 @media (max-width: 530px) {
1446 .jp-content .landing {
1447 padding: 0 0.5em;
1448 }
1449 }
1450