PluginProbe ʕ •ᴥ•ʔ
Jetpack – WP Security, Backup, Speed, & Growth / 14.8.1
Jetpack – WP Security, Backup, Speed, & Growth v14.8.1
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 14.4.2 14.5.1 14.6.1 14.7.1 14.8.1 14.9.2 15.0.3 15.1.2 15.2.1 15.3.2 15.4.1 15.5.1 15.6.1 15.7.2 15.8.1 15.9.2 16.0.2 16.1.3 16.2-a.5 16.2-a.3 16.1.2 16.2-a.1 16.1.1 16.1 16.1-beta 16.1-beta.2 16.1-beta.3 16.1-a.5 16.1-a.3 16.0.1 16.1-a.1 16.0 16.0-beta 16.0-a.7 16.0-a.5 15.9.1 16.0-a.3 16.0-a.1 15.9 15.9-beta 15.9-a.7 15.9-a.5 15.9-a.3 15.9-a.1 15.8 15.8-beta 15.8-a.7 15.8-a.5 5.2.5 5.3.4 5.4.4 5.5.5 5.6.5 5.7.5 5.8.4 5.9.4 6.0.4 6.1 6.1.1 6.1.2 6.1.3 6.1.4 6.1.5 6.2 6.2.1 6.2.2 6.2.3 6.2.4 6.2.5 6.3 6.3.1 6.3.2 6.3.3 6.3.4 6.3.5 6.3.6 6.3.7 6.4 6.4.1 6.4.2 6.4.3 6.4.4 6.4.5 6.4.6 6.5 6.5.1 6.5.2 6.5.3 6.5.4 6.6 6.6.1 6.6.2 6.6.3 6.6.4 6.6.5 6.7 6.7.1 6.7.2 6.7.3 6.7.4 6.8 6.8.1 6.8.2 6.8.3 6.8.4 6.8.5 6.9 6.9.1 6.9.2 6.9.3 6.9.4 7.0 7.0.1 7.0.2 7.0.3 7.0.4 7.0.5 7.1 7.1.1 7.1.2 7.1.3 7.1.4 7.1.5 7.2 7.2.1 7.2.1.1 7.2.2 7.2.3 7.2.4 7.2.5 7.3 7.3.0.1 7.3.1 7.3.1.1 7.3.2 7.3.3 7.3.4 7.3.5 7.4 7.4.1 7.4.2 7.4.3 7.4.4 7.4.5 7.5 7.5.0.1 7.5.1 7.5.2 7.5.3 7.5.4 7.5.5 7.5.6 7.5.7 7.6 7.6.1 7.6.2 7.6.3 7.6.4 7.7 7.7.1 7.7.2 7.7.3 7.7.4 7.7.5 7.7.6 7.8 7.8.1 7.8.2 7.8.3 7.8.4 7.9 7.9.1 7.9.2 7.9.3 7.9.4 8.0 8.0.1 8.0.2 8.0.3 8.1 8.1.1 8.1.2 8.1.3 8.1.4 8.2 8.2.0.1 8.2.1 8.2.2 8.2.3 8.2.4 8.2.5 8.2.6 8.3 8.3.1 8.3.2 8.3.3 8.4 8.4.1 8.4.2 8.4.3 8.4.4 8.4.5 8.5 8.5.1 8.5.2 8.5.3 8.6 8.6.1 8.6.2 8.6.3 8.6.4 8.7 8.7.0.1 8.7.1 8.7.2 8.7.3 8.7.4 8.8 8.8.1 8.8.2 8.8.3 8.8.4 8.8.5 8.9 8.9.1 8.9.2 8.9.3 8.9.4 9.0 9.0.1 9.0.2 9.0.3 9.0.4 9.0.5 9.1 9.1.1 9.1.2 9.1.3 9.2 9.2.1 9.2.2 9.2.3 9.2.4 9.3 9.3.1 9.3.2 9.3.3 9.3.4 9.3.5 9.4 9.4.1 9.4.2 9.4.3 9.4.4 9.5 9.5.1 9.5.2 9.5.3 9.5.4 9.5.5 9.6 9.6.1 9.6.2 9.6.3 9.6.4 9.7 9.7.1 9.7.2 15.7-beta.2 9.7.3 15.7.1 9.8 15.8-a.1 9.8.1 15.8-a.3 9.8.2 2.0.9 9.8.3 2.1.7 9.9 2.2.10 9.9.1 2.3.10 9.9.2 2.4.7 9.9.3 2.5.5 2.6.6 2.7.5 2.8.5 2.9.6 3.0.6 3.1.5 3.2.5 3.3.6 3.4.6 3.5.6 3.6.4 3.7.5 3.8.5 3.9.10 4.0.7 4.1.4 4.2.5 4.3.5 4.4.5 4.5.3 4.6.3 4.7.4 4.8.5 4.9.3 5.0.3 5.1.4 trunk 10.0 10.0.1 10.0.2 10.1 10.1.1 10.1.2 10.2 10.2.1 10.2.2 10.2.3 10.3 10.3.1 10.3.2 10.4 10.4.1 10.4.2 10.5 10.5.1 10.5.2 10.5.3 10.6 10.6.1 10.6.2 10.7 10.7.1 10.7.2 10.8 10.8.1 10.8.2 10.9 10.9.1 10.9.2 10.9.3 11.0 11.0.1 11.0.2 11.1 11.1.1 11.1.2 11.1.3 11.1.4 11.2 11.2.1 11.2.2 11.3 11.3.1 11.3.2 11.3.3 11.3.4 11.4 11.4.1 11.4.2 11.5 11.5.1 11.5.2 11.5.3 11.6 11.6.1 11.6.2 11.7 11.7.1 11.7.2 11.7.3 11.8 11.8.3 11.8.4 11.8.5 11.8.6 11.9 11.9.1 11.9.2 11.9.3 12.0 12.0.1 12.0.2 12.1 12.1.1 12.1.2 12.2 12.2.1 12.2.2 12.3 12.3.1 12.4 12.4.1 12.5 12.5.1 12.6 12.6.1 12.6.2 12.6.3 12.7 12.7.1 12.7.2 12.8 12.8.1 12.8.2 12.9 12.9.1 12.9.2 12.9.3 12.9.4 13.0 13.0.1 13.1 13.1.1 13.1.2 13.1.3 13.1.4 13.2 13.2.1 13.2.2 13.2.3 13.3 13.3.1 13.3.2 13.4 13.4.1 13.4.2 13.4.3 13.4.4 13.5 13.5.1 13.6 13.6.1 13.7 13.7.1 13.8 13.8.1 13.8.2 13.9 13.9.1 14.0 14.1 14.2 14.2.1 14.3 14.4 14.4.1 14.5 14.6 14.7 14.8 14.9 14.9.1 15.0 15.0.1 15.0.2 15.1 15.1.1 15.2 15.3 15.3.1 15.4 15.5 15.6 15.7 15.7-a.1 15.7-a.3 15.7-a.5 15.7-a.7 15.7-beta
jetpack / css / jetpack-admin.css
jetpack / css Last commit date
cleanslate-rtl.css 1 year ago cleanslate-rtl.min.css 1 year ago cleanslate.css 1 year ago cleanslate.min.css 1 year ago dashboard-widget-rtl.css 1 year ago dashboard-widget-rtl.min.css 1 year ago dashboard-widget.css 1 year ago dashboard-widget.min.css 1 year ago jetpack-admin-rtl.css 1 year ago jetpack-admin-rtl.min.css 1 year ago jetpack-admin.css 1 year ago jetpack-admin.min.css 1 year ago jetpack-deactivate-dialog-rtl.css 1 year ago jetpack-deactivate-dialog-rtl.min.css 1 year ago jetpack-deactivate-dialog.css 1 year ago jetpack-deactivate-dialog.min.css 1 year ago wordads-ccpa-rtl.css 1 year ago wordads-ccpa-rtl.min.css 1 year ago wordads-ccpa.css 1 year ago wordads-ccpa.min.css 1 year ago
jetpack-admin.css
1497 lines
1 /**
2 * Breakpoint Mixin
3 *
4 * Uses Sass Maps which requires Sass v3.3.0 or newer
5 *
6 *
7 * EXAMPLE
8 *
9 * body {
10 * @include breakpoint(tablet){
11 * font-size: 14px;
12 * };
13 * }
14 */
15 .j-row {
16 width: 100%;
17 margin: 0 auto;
18 }
19 .j-row::before, .j-row::after {
20 content: " ";
21 display: table;
22 }
23 .j-row::after {
24 clear: both;
25 }
26
27 .j-col {
28 padding: 0.85em;
29 width: 100%;
30 float: left;
31 position: relative;
32 }
33
34 @media only screen {
35 .j-sm-5 {
36 width: 41.66667%;
37 }
38 .j-sm-7 {
39 width: 58.33333%;
40 }
41 .j-sm-12 {
42 width: 100%;
43 }
44 }
45 @media (min-width: 530px) {
46 .j-md-4 {
47 width: 33.33333%;
48 }
49 .j-md-6 {
50 width: 50%;
51 }
52 .j-md-8 {
53 width: 66.66667%;
54 }
55 .j-md-12 {
56 width: 100%;
57 }
58 }
59 @media (min-width: 782px) {
60 .j-lrg-4 {
61 width: 33.33333%;
62 }
63 .j-lrg-5 {
64 width: 41.66667%;
65 }
66 .j-lrg-6 {
67 width: 50%;
68 }
69 .j-lrg-7 {
70 width: 58.33333%;
71 }
72 .j-lrg-8 {
73 width: 66.66667%;
74 }
75 .j-lrg-12 {
76 width: 100%;
77 }
78 }
79 @keyframes jetpack-candy {
80 0% {
81 transform: scale(1);
82 }
83 20% {
84 transform: scale(1.15);
85 }
86 60% {
87 transform: scale(0.95);
88 }
89 100% {
90 transform: scale(1);
91 }
92 }
93 @keyframes jetpack-loading-fade {
94 0% {
95 opacity: 0.5;
96 }
97 50% {
98 opacity: 1;
99 }
100 100% {
101 opacity: 0.5;
102 }
103 }
104 @keyframes jetpack-rotate {
105 to {
106 transform: rotate(1turn);
107 }
108 }
109 /**
110 * em()
111 *
112 * Convert px to em in a readable fashion.
113 * ==========================================================================
114
115 * Examples:
116 * 1. font-size: em(14px);
117 * 2. font-size: em(30px/14px);
118 */
119 .button,
120 .download-jetpack {
121 transition: all 0.1s ease-in-out;
122 }
123
124 .jp-button, .jp-button--settings {
125 display: inline-block;
126 position: relative;
127 padding: 0.7692307692em 1.4615384615em;
128 color: #efefef;
129 font-weight: 700;
130 font-size: 0.9285714286em;
131 line-height: 1;
132 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
133 background: #6f7476;
134 border-radius: 3px;
135 }
136 .jp-button:visited, .jp-button--settings:visited {
137 color: #efefef;
138 }
139 .jp-button:hover, .jp-button:focus, .jp-button--settings:hover, .jp-button--settings:focus {
140 color: #fff;
141 background: #57972d;
142 }
143 .jp-button:active, .jp-button--settings:active {
144 background: #57972d;
145 opacity: 0.8;
146 }
147
148 .jp-button--settings {
149 background: #93b45f;
150 color: #e8eedf;
151 }
152 .jp-button--settings:visited {
153 color: #e8eedf;
154 }
155 .jp-button--settings:hover, .jp-button--settings:focus {
156 background: #9fbd72;
157 color: #fff;
158 }
159 .jp-button--settings.current {
160 background: #3c6621;
161 color: #fff;
162 box-shadow: inset 0 2px 0 #365A1F, inset 0 1px 3px #3c6621;
163 }
164
165 .download-jetpack {
166 display: inline-block;
167 position: relative;
168 padding: 0.6428571429em 1.0869565217em 0.5357142857em;
169 color: #fff;
170 font-weight: 400;
171 font-size: 20px;
172 line-height: 1;
173 background: #518d2a;
174 z-index: 3;
175 border-radius: 6px;
176 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
177 }
178 .download-jetpack:visited {
179 color: #fff;
180 }
181 .download-jetpack:hover, .download-jetpack:focus {
182 color: #fff;
183 background: #57972d;
184 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
185 }
186 .download-jetpack:active {
187 top: 6px;
188 box-shadow: 0 0 0 #3e6c20, 0 0 0 rgba(0, 0, 0, 0.4);
189 }
190 .download-jetpack:active::after {
191 top: -6px;
192 }
193 .download-jetpack::before {
194 content: "";
195 display: inline-block;
196 position: relative;
197 top: -2px;
198 margin-right: 13px;
199 width: 30px;
200 height: 30px;
201 vertical-align: middle;
202 background: url(../images/connect-plug.svg) center center no-repeat;
203 background-size: 100%;
204 }
205 .download-jetpack::after {
206 content: "";
207 position: absolute;
208 top: 0;
209 left: 0;
210 width: 100%;
211 height: 100%;
212 }
213 @media (max-width: 1147px) {
214 .download-jetpack {
215 font-size: 1.2857142857em;
216 }
217 .download-jetpack::before {
218 top: -1px;
219 width: 23px;
220 height: 23px;
221 }
222 }
223 @media (max-width: 900px) {
224 .download-jetpack:active {
225 top: 0;
226 }
227 }
228 @media (max-width: 530px) {
229 .download-jetpack {
230 font-size: 1.2142857143em;
231 font-weight: 600;
232 }
233 .download-jetpack::before {
234 width: 19px;
235 height: 19px;
236 margin-right: 9px;
237 }
238 }
239
240 .jp-spinner {
241 display: flex;
242 align-items: center;
243 }
244
245 .jp-spinner__inner,
246 .jp-spinner__outer {
247 margin: auto;
248 box-sizing: border-box;
249 border: 0.1em solid transparent;
250 border-radius: 50%;
251 border-top-color: #00aadc;
252 animation: 3s linear infinite;
253 animation-name: jetpack-rotate;
254 }
255
256 .jp-spinner__outer {
257 width: 20px;
258 height: 20px;
259 font-size: 20px;
260 }
261
262 .jp-spinner__inner {
263 width: 100%;
264 height: 100%;
265 border-right-color: #00aadc;
266 opacity: 0.4;
267 }
268
269 /**
270 * Automatticons
271 *
272 * A quick reference
273 */
274 @font-face {
275 font-family: automatticons;
276 src: url(../_inc/fonts/automatticons/automatticons.eot);
277 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");
278 font-weight: 400;
279 font-style: normal;
280 }
281 .nav-horizontal::after {
282 content: ".";
283 display: block;
284 height: 0;
285 clear: both;
286 visibility: hidden;
287 }
288 .nav-horizontal a {
289 display: inline-block;
290 }
291 .nav-horizontal li {
292 position: relative;
293 float: left;
294 }
295 .nav-horizontal ul {
296 margin: 0;
297 padding: 0;
298 }
299
300 @media (max-width: 782px) {
301 .configure .frame.top.fixed {
302 padding-left: 0;
303 }
304 }
305
306 .wrap.inner,
307 .page-content {
308 max-width: 950px;
309 margin: 0 auto;
310 }
311 .wrap.inner li,
312 .page-content li {
313 line-height: 23px;
314 }
315
316 @media (max-width: 530px) {
317 .page-content {
318 margin-top: 0;
319 }
320 }
321
322 @media (max-width: 1147px) {
323 .wrap.inner {
324 background: #f6f7f7;
325 padding: 15px;
326 }
327 }
328 @media (max-width: 530px) {
329 .wrap.inner {
330 margin-top: 1.7142857143em;
331 }
332 }
333
334 .page-content.about {
335 position: relative;
336 z-index: 10;
337 }
338 @media (max-width: 1147px) {
339 .page-content.about {
340 background: #f6f7f7;
341 padding: 15px;
342 }
343 }
344
345 @media (max-width: 1147px) {
346 .page-content.configure {
347 background: #f6f7f7;
348 }
349 }
350
351 .footer nav {
352 max-width: 550px;
353 margin: 0 auto;
354 }
355
356 .header {
357 left: 0;
358 right: 0;
359 background: #008710;
360 }
361
362 .header-nav li {
363 line-height: 60px;
364 }
365 .header-nav a {
366 padding: 0 0.7142857143em;
367 line-height: 24px;
368 }
369 .header-nav .jetpack-logo a {
370 display: inline-block;
371 position: relative;
372 width: 214px;
373 margin-right: 6px;
374 background: url(../images/jetpack-logo.png) center center no-repeat;
375 background: url(../images/jetpack-logo.svg) center center no-repeat, none;
376 background-size: 183px auto;
377 color: #fff;
378 line-height: 60px;
379 font-weight: 400;
380 }
381 .header-nav .jetpack-logo a span {
382 text-indent: -9999px;
383 visibility: hidden;
384 }
385 .header-nav .jetpack-logo a::before {
386 content: "";
387 position: absolute;
388 top: 0;
389 left: 0;
390 width: 100%;
391 height: 100%;
392 background-size: 183px 32px;
393 }
394 .header-nav .jetpack-modules + .jetpack-modules {
395 margin-left: 15px;
396 }
397
398 .main-nav {
399 float: left;
400 }
401 .main-nav li {
402 margin: 0;
403 }
404 @media (max-width: 900px) {
405 .main-nav {
406 font-size: 13px;
407 }
408 }
409
410 .jetpack-pagestyles #screen-meta {
411 margin: 0;
412 }
413 .jetpack-pagestyles #screen-meta-links .screen-meta-toggle {
414 z-index: 2;
415 }
416 .jetpack-pagestyles #screen-options-link-wrap, .jetpack-pagestyles #contextual-help-link-wrap {
417 border: none;
418 }
419 .jetpack-pagestyles .update-nag {
420 display: none;
421 }
422
423 .loading {
424 bottom: 50%;
425 position: absolute;
426 top: 50%;
427 width: 100%;
428 }
429 .loading span {
430 color: #999;
431 }
432
433 .modal {
434 background: #fff;
435 position: fixed;
436 top: 52px;
437 bottom: 20px;
438 right: 20px;
439 left: 20px;
440 margin-left: 160px;
441 display: none;
442 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
443 z-index: 500;
444 }
445 .modal .close {
446 position: absolute;
447 top: 0;
448 right: 0;
449 font: 300 1.7142857143em Genericons !important;
450 color: #777;
451 content: "\f405";
452 display: inline-block;
453 padding: 0.2857142857em 0.7142857143em 0.4285714286em;
454 z-index: 5;
455 }
456 .modal .close:hover {
457 background: #f0f0f1;
458 opacity: 0.8;
459 }
460 .modal .close:active {
461 background: #f0f0f1;
462 opacity: 0.4;
463 }
464 .modal .content-container {
465 position: absolute;
466 top: 0;
467 right: 0;
468 bottom: 0;
469 left: 0;
470 overflow: auto;
471 padding: 2.1428571429em;
472 }
473 .modal .content {
474 margin: 0 auto;
475 max-width: 900px;
476 text-align: left;
477 }
478 .modal h2 {
479 text-align: left;
480 margin-top: 0;
481 color: #5d6d74;
482 font-weight: 300;
483 line-height: 32px;
484 text-shadow: 0 1px 1px #fff;
485 }
486 @media (max-width: 530px) {
487 .modal h2 {
488 font-size: 26px;
489 }
490 }
491 .modal h5 {
492 clear: left;
493 }
494 .modal p {
495 font-size: 1.2307692308em;
496 }
497 .modal footer {
498 position: absolute;
499 left: 0;
500 bottom: 0;
501 width: 100%;
502 padding: 12px 20px;
503 border-top: 1px solid #dcdcde;
504 background: #fff;
505 text-align: right;
506 }
507 .modal footer ul {
508 margin: 0;
509 }
510 .modal footer li {
511 display: inline-block;
512 margin: 0;
513 }
514 .modal .button-secondary,
515 .modal .button-primary:active {
516 vertical-align: baseline;
517 }
518 @media (max-width: 900px) {
519 .modal {
520 bottom: 5%;
521 margin-left: 36px;
522 font-size: 80%;
523 }
524 .modal .content {
525 top: 38px;
526 }
527 }
528 @media (max-width: 782px) {
529 .modal {
530 top: 66px;
531 margin-left: 0;
532 }
533 }
534 @media (max-width: 600px) {
535 .modal {
536 top: 10px;
537 right: 10px;
538 bottom: 10px;
539 left: 10px;
540 }
541 }
542
543 .jp-info-img {
544 float: right;
545 margin: 0 0 8px 30px;
546 }
547 .jp-info-img img {
548 border: 1px solid #dcdcde;
549 max-width: 100%;
550 height: auto;
551 }
552 .jp-info-img img:first-child {
553 margin-top: 0;
554 }
555 @media (max-width: 782px) {
556 .jp-info-img {
557 float: none;
558 margin: 0 0 15px;
559 }
560 }
561
562 .content-container.modal-footer {
563 bottom: 53px;
564 }
565
566 .shade {
567 background: #000;
568 bottom: 0;
569 cursor: pointer;
570 display: none;
571 left: 0;
572 opacity: 0.2;
573 position: fixed;
574 right: 0;
575 top: 0;
576 z-index: 11;
577 }
578
579 .footer {
580 margin-top: 1.4285714286em;
581 position: relative;
582 padding: 10em 0 4.2857142857em;
583 text-align: center;
584 }
585 .footer::before, .footer::after {
586 content: "";
587 position: absolute;
588 left: 0;
589 pointer-events: none;
590 }
591 .footer::before {
592 top: 0;
593 margin-top: -1px;
594 width: 100%;
595 height: 195px;
596 }
597 .footer::after {
598 display: none;
599 }
600 .footer .download-jetpack {
601 margin-bottom: 33px;
602 }
603 @media (min-width: 1147px) {
604 .footer {
605 padding-bottom: 35px;
606 }
607 }
608 @media (max-width: 1147px) {
609 .footer {
610 padding-top: 165px;
611 padding-bottom: 0;
612 }
613 .footer::before {
614 background-size: 160% auto;
615 }
616 .footer ul {
617 float: none;
618 overflow: hidden;
619 }
620 }
621 @media (max-width: 900px) {
622 .footer {
623 padding-top: 146px;
624 }
625 }
626 @media (max-width: 782px) {
627 .footer {
628 margin-top: 0;
629 }
630 }
631 @media (max-width: 530px) {
632 .footer {
633 margin-top: 0;
634 padding-top: 135px;
635 }
636 }
637 @media (max-width: 320px) {
638 .footer {
639 padding-top: 76px;
640 }
641 }
642
643 .footer nav {
644 max-width: 100%;
645 }
646 .footer nav a,
647 .footer nav a:visited {
648 padding: 4px 6px;
649 color: #999;
650 }
651 .footer nav a:hover, .footer nav a:focus,
652 .footer nav a:visited:hover,
653 .footer nav a:visited:focus {
654 color: #008710;
655 }
656 @media (max-width: 1147px) {
657 .footer nav a:hover, .footer nav a:focus,
658 .footer nav a:visited:hover,
659 .footer nav a:visited:focus {
660 color: #008710;
661 }
662 }
663 @media (max-width: 530px) {
664 .footer nav li {
665 display: block;
666 float: none;
667 margin: 0;
668 text-align: left;
669 }
670 .footer nav a {
671 display: block;
672 padding: 0 16px;
673 line-height: 44px;
674 }
675 }
676
677 .primary {
678 padding: 25px 15px 10px 15px;
679 border-bottom: 1px solid #f0f0f1;
680 }
681
682 .secondary-footer {
683 margin: 0 auto;
684 }
685 .secondary-footer li {
686 margin-right: 5px;
687 }
688 @media (min-width: 782px) {
689 .secondary-footer {
690 padding: 8px 15px 10px;
691 margin-bottom: 30px;
692 border-bottom: 1px solid #f0f0f1;
693 }
694 }
695 @media (min-width: 1147px) {
696 .secondary-footer {
697 margin-bottom: 0;
698 }
699 }
700 @media (max-width: 782px) {
701 .secondary-footer {
702 padding: 8px 15px 8px;
703 border-bottom: none;
704 }
705 }
706 @media (max-width: 530px) {
707 .secondary-footer {
708 margin: 0;
709 padding: 0;
710 border: none;
711 font-weight: 400;
712 }
713 .secondary-footer a {
714 border-top: 1px solid #f0f0f1;
715 }
716 }
717
718 .footer .a8c-attribution {
719 margin: 0;
720 padding: 0 6px;
721 color: #bbb;
722 font-size: 0.7857142857em;
723 font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
724 text-transform: uppercase;
725 }
726 .footer .a8c-attribution a {
727 display: inline-block;
728 position: relative;
729 padding: 4px 16px;
730 right: 9999px;
731 outline: 0;
732 }
733 .footer .a8c-attribution a::after {
734 content: "A";
735 position: absolute;
736 top: 2px;
737 right: -9999px;
738 height: 100%;
739 color: #999;
740 font-size: 1.5454545455em;
741 font-family: "automatticons";
742 text-align: center;
743 }
744 .footer .a8c-attribution a:hover::after {
745 animation: jetpack-candy 0.4s ease-in-out;
746 }
747
748 @media (min-width: 782px) {
749 .secondary {
750 padding: 0 15px 10px 15px;
751 border-bottom: 1px solid #f0f0f1;
752 }
753 }
754 @media (min-width: 1147px) {
755 .secondary {
756 padding: 0 15px 10px 15px;
757 border-bottom: none;
758 }
759 }
760
761 .jetpack-message {
762 background: rgb(0, 160.5, 19.0222222222);
763 border: 1px solid rgb(0, 109.5, 12.9777777778);
764 margin: 33px auto 0;
765 max-width: 90%;
766 position: relative;
767 z-index: 2;
768 }
769 .jetpack-message.is-opt-in {
770 margin: 50px 0 0;
771 max-width: 100%;
772 padding: 10px 15px;
773 background: #fff;
774 border: 0;
775 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
776 font-size: 13px;
777 text-align: center;
778 }
779 .subhead .jetpack-message.is-opt-in {
780 margin: 0;
781 padding-bottom: 0;
782 background: transparent;
783 box-shadow: none;
784 }
785 .subhead .jetpack-message.is-opt-in .jp-button {
786 display: inline-block;
787 }
788 .jetpack-message.is-opt-in p {
789 color: #3c4549;
790 }
791 .jetpack-message.is-opt-in .jp-button {
792 margin-top: 15px;
793 display: none;
794 }
795 .jetpack-message h2 {
796 color: #fff;
797 margin: 0;
798 }
799 .jetpack-message p {
800 color: #fff;
801 margin: 0;
802 opacity: 0.7;
803 }
804 .jetpack-message .squeezer {
805 padding: 23px 23px 23px 80px;
806 position: relative;
807 text-align: left;
808 }
809 .jetpack-message .squeezer::before {
810 color: #fff;
811 content: "\f418";
812 font-family: Genericons;
813 font-size: 33px;
814 height: 33px;
815 left: 25px;
816 opacity: 0.6;
817 position: absolute;
818 top: 23px;
819 top: calc(50% - 22px);
820 }
821 .jetpack-message .squeezer h2 {
822 font-size: 1em;
823 }
824 @media (max-width: 530px) {
825 .jetpack-message .squeezer {
826 padding: 23px;
827 }
828 .jetpack-message .squeezer::before {
829 display: none;
830 }
831 }
832 .jetpack-message .squeezer a {
833 color: #FFF;
834 border-bottom: 1px solid #D5E4BD;
835 }
836 .jetpack-message .squeezer a:hover {
837 border-bottom: 1px solid #F1F6E9;
838 }
839 .jetpack-message.error .squeezer::before, .jetpack-message.jetpack-err .squeezer::before {
840 content: "\f414";
841 }
842
843 .configure-module .jetpack-message {
844 max-width: 100%;
845 }
846
847 @media (max-width: 530px) {
848 .wrap.inner.jp-support .jp-support-column-left {
849 width: 100%;
850 }
851 .wrap.inner.jp-support .jp-support-column-left .widget-text {
852 margin-right: 0;
853 width: 100%;
854 }
855 .wrap.inner.jp-support .jp-support-column-right {
856 width: 100%;
857 }
858 }
859 @media screen and (max-width: 515px) {
860 .jp-frame .header-nav {
861 padding-bottom: 10px;
862 }
863 .jp-frame .header-nav li {
864 line-height: 30px;
865 }
866 .jp-frame .header-nav .jetpack-logo {
867 width: 100%;
868 text-align: center;
869 }
870 .jp-frame .header-nav .jetpack-modules {
871 margin: 0;
872 width: 50%;
873 text-align: right;
874 padding: 0 5px;
875 }
876 .jp-frame .header-nav .jetpack-modules + .jetpack-modules {
877 text-align: left;
878 }
879 .jp-frame .header-nav .jetpack-modules:nth-child(4) {
880 text-align: center;
881 margin: 0 auto;
882 width: 100%;
883 }
884 .jp-frame .header-nav .jetpack-modules:nth-child(4) a {
885 padding: 0 10px;
886 }
887 }
888 #ie-legacy-notice .dops-notice__content {
889 display: inline-block;
890 margin-left: 10px;
891 }
892
893 /**
894 * $gray color functions:
895 *
896 * color.adjust( $gray, $lightness: 10% )
897 * color.adjust( $gray, $lightness: 20% )
898 * color.adjust( $gray, $lightness: 30% )
899 * color.adjust( $gray, $lightness: -10% )
900 * color.adjust( $gray, $lightness: -20% )
901 * color.adjust( $gray, $lightness: -30% )
902 *
903 * See wordpress.com/design-handbook/colors/ for more info.
904 */
905 /**
906 * Rem module
907 *
908 * Convert px to rem in a readable fashion.
909 *
910 * Example: font-size: rem.convert( 21px );
911 */
912 .page-content.configure {
913 margin-top: 0;
914 }
915
916 .configure .frame.top {
917 border: none;
918 box-shadow: none;
919 padding-top: 1.4285714286em;
920 position: relative;
921 top: auto;
922 }
923 .configure .frame.top.fixed {
924 background: #f6f7f7;
925 border-bottom: 1px solid #e9e9e9;
926 padding-left: 160px;
927 margin-top: -6px;
928 position: fixed;
929 right: 0;
930 top: 32px;
931 width: 100%;
932 z-index: 4;
933 box-shadow: 0 2px 2px -2px #f0f0f1;
934 }
935 @media (max-width: 782px) {
936 .configure .frame.top.fixed {
937 border: none;
938 box-shadow: none;
939 padding-top: 1.4285714286em;
940 position: relative;
941 top: auto;
942 }
943 }
944 @media (max-width: 600px) {
945 .configure .frame.top.fixed {
946 top: 0;
947 }
948 }
949
950 .jp-frame-top-fixed .configure {
951 padding-top: 94px;
952 }
953
954 .filter-search {
955 display: none;
956 margin-top: 15px;
957 float: left;
958 }
959 @media (max-width: 782px) {
960 .filter-search {
961 display: block;
962 }
963 }
964 @media (max-width: 530px) {
965 .filter-search {
966 display: none;
967 }
968 }
969 .filter-search .button {
970 background: #fff;
971 border: 1.5px solid rgb(0, 0, 0);
972 border-radius: 4px;
973 font-size: 1rem;
974 line-height: 24px;
975 letter-spacing: -0.01em;
976 color: rgb(0, 0, 0);
977 }
978
979 .fixed-top {
980 box-sizing: border-box;
981 border-bottom: 1px solid #DCDCDE;
982 /* Auto layout */
983 display: flex;
984 flex-direction: row;
985 align-items: center;
986 padding: 16px;
987 gap: 16px;
988 }
989 .fixed-top .tablenav.top {
990 display: flex;
991 padding: 0;
992 margin: 0 0 0 10px;
993 height: auto;
994 }
995 .fixed-top select#bulk-action-selector-top {
996 width: 180px;
997 height: 40px;
998 border: 1px solid #DCDCDE;
999 border-radius: 4px;
1000 padding: 8px 16px;
1001 margin-right: 8px;
1002 line-height: normal;
1003 color: rgb(0, 0, 0);
1004 font-size: 0.875rem;
1005 letter-spacing: -0.02em;
1006 }
1007 .fixed-top .alignleft.actions.bulkactions {
1008 display: flex;
1009 align-items: center;
1010 }
1011 .fixed-top .alignleft.actions.bulkactions .button {
1012 display: flex;
1013 flex-direction: row;
1014 justify-content: center;
1015 align-items: center;
1016 padding: 6px 24px;
1017 height: 40px;
1018 background: #fff;
1019 border: 1.5px solid rgb(0, 0, 0);
1020 border-radius: 4px;
1021 font-size: 1rem;
1022 line-height: 24px;
1023 letter-spacing: -0.01em;
1024 color: rgb(0, 0, 0);
1025 }
1026 #jp-plugin-container .table-bordered {
1027 border-collapse: collapse;
1028 }
1029 #jp-plugin-container .table-bordered .check-column input[type=checkbox] {
1030 width: 20px;
1031 height: 20px;
1032 border-radius: 2px;
1033 margin-left: 0;
1034 }
1035 #jp-plugin-container .table-bordered .check-column input[type=checkbox]::before {
1036 margin: -2px;
1037 color: rgb(0, 0, 0);
1038 width: 21px;
1039 height: 21px;
1040 }
1041 #jp-plugin-container .table-bordered .info {
1042 letter-spacing: -0.02em;
1043 }
1044 #jp-plugin-container .table-bordered .row-actions a.dops-button.is-compact {
1045 color: rgb(0, 0, 0);
1046 line-height: 20px;
1047 font-size: 0.75rem;
1048 font-weight: 600;
1049 background: #fff;
1050 border: 1.5px solid rgb(0, 0, 0);
1051 border-radius: 4px;
1052 box-shadow: none;
1053 text-decoration: none;
1054 padding: 3px 8px;
1055 }
1056 #jp-plugin-container .table-bordered .row-actions .delete a.dops-button.is-compact {
1057 color: #D63638;
1058 border: 1px solid #DCDCDE;
1059 }
1060 #jp-plugin-container .table-bordered .row-actions .configure a {
1061 color: rgb(0, 0, 0);
1062 font-size: 0.75rem;
1063 line-height: 20px;
1064 font-weight: 600;
1065 text-decoration: none;
1066 }
1067 #jp-plugin-container .table-bordered .row-actions .configure a:hover {
1068 text-decoration: underline;
1069 }
1070
1071 .wrap {
1072 margin: 0;
1073 padding: 0 1.5em 1em;
1074 overflow: hidden;
1075 }
1076 .wrap .manage-left {
1077 float: left;
1078 margin: 0;
1079 padding: 0;
1080 width: 63%;
1081 }
1082 .wrap .manage-left table {
1083 width: 100%;
1084 }
1085 .wrap .manage-left th {
1086 font-weight: 400;
1087 }
1088 @media (max-width: 782px) {
1089 .wrap .manage-left {
1090 width: 100%;
1091 }
1092 }
1093 .wrap .manage-right {
1094 margin-top: 24px;
1095 padding: 0;
1096 float: right;
1097 width: 35%;
1098 z-index: 1;
1099 }
1100 .wrap .manage-right p {
1101 font-size: 0.875rem;
1102 line-height: 24px;
1103 letter-spacing: -0.02em;
1104 font-weight: 700;
1105 color: #2C3338;
1106 margin: 16px 0 4px 0;
1107 }
1108 .wrap .manage-right .bumper {
1109 margin-left: 48px;
1110 }
1111 .wrap .manage-right.show {
1112 display: block;
1113 overflow-y: auto;
1114 overflow-x: hidden;
1115 position: absolute;
1116 z-index: 100000;
1117 }
1118 .wrap .manage-right .search-bar {
1119 margin-bottom: 18px;
1120 max-width: 300px;
1121 }
1122 .wrap .manage-right p.search-box {
1123 width: 100%;
1124 height: auto;
1125 margin: 16px 0 0 0;
1126 float: none;
1127 display: block;
1128 position: static;
1129 }
1130 .wrap .manage-right p.search-box input[type=search] {
1131 border: 1px solid #DCDCDE;
1132 border-radius: 4px;
1133 padding: 8px 16px 8px 40px;
1134 line-height: 24px;
1135 font-size: 1rem;
1136 letter-spacing: -0.02em;
1137 color: rgb(0, 0, 0);
1138 font-weight: 400;
1139 height: 40px;
1140 width: 100%;
1141 background-image: url(../images/icon-search.svg);
1142 background-repeat: no-repeat;
1143 background-position: 8px center;
1144 float: none;
1145 }
1146 .wrap .manage-right p.search-box input[type=search]::placeholder {
1147 color: #8C8F94;
1148 }
1149 @media (max-width: 782px) {
1150 .wrap .manage-right p.search-box input[type=search] {
1151 max-width: 90%;
1152 }
1153 }
1154 .wrap .manage-right p.search-box input[type=submit] {
1155 display: none;
1156 }
1157 @media (max-width: 782px) {
1158 .wrap .manage-right .button-group {
1159 white-space: normal;
1160 }
1161 }
1162 .wrap .manage-right .button-group .button {
1163 box-shadow: none;
1164 padding-left: 24px;
1165 padding-right: 24px;
1166 min-width: 90px;
1167 border: 1px solid #DCDCDE;
1168 color: rgb(0, 0, 0);
1169 height: 40px;
1170 font-size: 13px;
1171 line-height: 18px;
1172 font-weight: 400;
1173 background: #fff;
1174 }
1175 .wrap .manage-right .button-group .button:hover {
1176 background: #F6F7F7;
1177 }
1178 .wrap .manage-right .button-group .button:focus {
1179 border-color: rgb(0, 0, 0);
1180 }
1181 .wrap .manage-right .button-group button.dops-button.button.active {
1182 background: rgb(0, 0, 0);
1183 color: #fff;
1184 font-weight: 600;
1185 }
1186 .wrap .manage-right .button-group button.dops-button.button.active:hover {
1187 background: #2C3338;
1188 }
1189 .wrap .manage-right .button-group button.dops-button.button.active:focus {
1190 border-color: #fff;
1191 box-shadow: 0 0 0 1px rgb(0, 0, 0);
1192 }
1193 .wrap .manage-right .subsubsub {
1194 margin: 0;
1195 padding: 0;
1196 }
1197 .wrap .manage-right .subsubsub li {
1198 display: block;
1199 text-align: left;
1200 margin: 0 0 4px 0;
1201 font-size: 14px;
1202 }
1203 .wrap .manage-right .subsubsub li a {
1204 padding: 0;
1205 color: rgb(0, 0, 0);
1206 text-decoration: underline;
1207 font-size: 0.875rem;
1208 line-height: 24px;
1209 letter-spacing: -0.02em;
1210 }
1211 .wrap .manage-right .subsubsub li a:hover {
1212 text-decoration-thickness: 3px;
1213 }
1214 .wrap .manage-right .subsubsub li.current {
1215 border-radius: 4px;
1216 background: rgb(0, 0, 0);
1217 padding: 2px 6px;
1218 }
1219 .wrap .manage-right .subsubsub li.current a, .wrap .manage-right .subsubsub li.current .count {
1220 color: #fff;
1221 text-decoration: none;
1222 font-weight: 700;
1223 }
1224 @media (max-width: 782px) {
1225 .wrap .manage-right {
1226 background: #fff;
1227 bottom: 0;
1228 display: none;
1229 min-width: 300px;
1230 position: fixed;
1231 right: 0;
1232 top: 0;
1233 z-index: 13;
1234 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
1235 }
1236 .wrap .manage-right .bumper {
1237 margin: 13px;
1238 }
1239 .wrap .manage-right .navbar-form {
1240 margin: 16px 0 0 0;
1241 padding: 0;
1242 }
1243 }
1244
1245 @media (max-width: 782px) {
1246 .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
1247 padding: 11px 10px;
1248 display: block;
1249 }
1250 .manage-right.show .subsubsub li {
1251 padding: 5px;
1252 }
1253 }
1254 @media (max-width: 650px) {
1255 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
1256 float: none;
1257 padding-left: 18px;
1258 }
1259 }
1260 @media (max-width: 430px) {
1261 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
1262 display: none;
1263 }
1264 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
1265 display: block;
1266 }
1267 }
1268 .jetpack-modules-list-table-form .widefat td {
1269 width: 100%;
1270 }
1271
1272 .jetpack-module-list .widefat {
1273 border: none;
1274 }
1275 .jetpack-module-list .wrap {
1276 display: flex;
1277 overflow: visible;
1278 }
1279 .jetpack-module-list .wrap .manage-left {
1280 flex-grow: 1;
1281 width: auto;
1282 }
1283 .jetpack-module-list .wrap .manage-right {
1284 flex-grow: 0;
1285 }
1286
1287 tr.jetpack-module {
1288 box-sizing: border-box;
1289 display: flex;
1290 flex-direction: row;
1291 align-items: center;
1292 padding: 16px;
1293 gap: 16px;
1294 width: 100%;
1295 height: 60px;
1296 background: #fff;
1297 border-bottom: 1px solid #DCDCDE;
1298 }
1299 @media (max-width: 782px) {
1300 tr.jetpack-module {
1301 padding: 4px 10px;
1302 height: auto;
1303 }
1304 }
1305 tr.jetpack-module:last-of-type {
1306 border-bottom: 0;
1307 }
1308 tr.jetpack-module th.check-column {
1309 padding-top: 0;
1310 width: auto;
1311 }
1312 tr.jetpack-module a, tr.jetpack-module p {
1313 text-decoration: none;
1314 }
1315
1316 tr.jetpack-module.unavailable {
1317 background: #F9F9F6;
1318 }
1319
1320 tr.jetpack-module.active {
1321 background: #F9F9F6;
1322 }
1323 tr.jetpack-module.active .column-name .info {
1324 font-weight: 700;
1325 }
1326
1327 tr.jetpack-module .column-name {
1328 color: #2C3338;
1329 float: left;
1330 align-items: center;
1331 display: flex;
1332 padding: 0;
1333 }
1334
1335 tr.jetpack-module .row-actions {
1336 align-items: center;
1337 display: flex;
1338 position: relative;
1339 margin-left: auto;
1340 left: 0;
1341 }
1342 tr.jetpack-module .row-actions span.configure {
1343 margin-right: 16px;
1344 }
1345
1346 /* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
1347 .configure-module p {
1348 font-size: 14px;
1349 }
1350 .configure-module p.success, .configure-module p.error {
1351 color: #fff;
1352 padding: 10px;
1353 }
1354 .configure-module p.success {
1355 background-color: #008710;
1356 }
1357 .configure-module p.error {
1358 background-color: #d94f4f;
1359 }
1360
1361 .protect-status p {
1362 font-size: 16px;
1363 }
1364 .protect-status strong {
1365 display: inline-block;
1366 margin-top: 10px;
1367 background: #fff;
1368 padding: 10px;
1369 border: 1px #dcdcde solid;
1370 font-size: 16px;
1371 color: #000;
1372 max-width: 100%;
1373 }
1374 .protect-status.attn {
1375 color: #d94f4f;
1376 }
1377 .protect-status.working {
1378 color: #008710;
1379 }
1380
1381 .protect-whitelist textarea {
1382 width: 100%;
1383 min-height: 150px;
1384 }
1385
1386 /* btns + inputs */
1387 .configure-module input[disabled] {
1388 opacity: 0.5;
1389 }
1390 .configure-module input.button-primary {
1391 font-weight: 700;
1392 }
1393
1394 /* whitelist table */
1395 @media only screen and (min-width: 1100px) {
1396 .protect-whitelist {
1397 width: 65%;
1398 float: left;
1399 }
1400 } /* end > 1065px */
1401 @media only screen and (max-width: 400px) {
1402 .protect-status strong {
1403 font-size: 12px;
1404 overflow: auto;
1405 }
1406 } /* end < 400px */
1407 .manage__icon {
1408 width: 155px;
1409 height: 155px;
1410 margin: 20px auto;
1411 }
1412
1413 .manage-page .manage__description {
1414 max-width: 600px;
1415 text-align: center;
1416 font-size: 22px;
1417 color: #999;
1418 margin: 20px auto;
1419 }
1420 .manage-page .manage__button {
1421 font-size: 16px;
1422 padding: 0 20px;
1423 height: 40px;
1424 line-height: 40px;
1425 }
1426
1427 .manage__title .genericon {
1428 font-size: 38px;
1429 color: #81A944;
1430 }
1431
1432 .manage__link {
1433 font-size: 16px;
1434 padding: 0 20px;
1435 height: 40px;
1436 line-height: 40px;
1437 font-weight: 400;
1438 }
1439 .manage__link .genericon {
1440 font-size: 28px;
1441 vertical-align: middle;
1442 margin-top: -6px;
1443 }
1444
1445 .jp-content .hide {
1446 display: none;
1447 }
1448 .jp-content .landing {
1449 margin: 0 auto;
1450 z-index: 2;
1451 position: relative;
1452 }
1453 .jp-content h1 {
1454 font-weight: 400;
1455 line-height: 1.75em;
1456 position: relative;
1457 z-index: 3;
1458 width: 100%;
1459 text-align: center;
1460 }
1461 .jp-content h1.success {
1462 color: #008710;
1463 }
1464 .jp-content .footer {
1465 padding-top: 0;
1466 margin-top: 0;
1467 background-image: none;
1468 }
1469 .jp-content .footer::before {
1470 height: inherit;
1471 }
1472 .jp-content .more-info::before {
1473 content: none;
1474 }
1475
1476 .landing .wpcom-connect {
1477 min-height: 400px;
1478 }
1479
1480 .wpcom-connect .j-col {
1481 padding: 0;
1482 }
1483
1484 @media (max-width: 1147px) {
1485 .jp-content .landing {
1486 padding: 0 2em;
1487 }
1488 .jp-content .footer {
1489 padding-top: 1.5em;
1490 }
1491 }
1492 @media (max-width: 530px) {
1493 .jp-content .landing {
1494 padding: 0 0.5em;
1495 }
1496 }
1497