PluginProbe
Jetpack – WP Security, Backup, Speed, & Growth / 12.2
Jetpack – WP Security, Backup, Speed, & Growth v12.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 12.2, at css/jetpack-admin.css

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