Нет описания

jetpack-admin.css 25KB

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