You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4155 lines
72 KiB

1 year ago
  1. /* 2 column liquid layout */
  2. #wpwrap {
  3. height: auto;
  4. min-height: 100%;
  5. width: 100%;
  6. position: relative;
  7. -webkit-font-smoothing: subpixel-antialiased;
  8. }
  9. #wpcontent {
  10. height: 100%;
  11. padding-left: 20px;
  12. }
  13. #wpcontent,
  14. #wpfooter {
  15. margin-left: 160px;
  16. }
  17. .folded #wpcontent,
  18. .folded #wpfooter {
  19. margin-left: 36px;
  20. }
  21. #wpbody-content {
  22. padding-bottom: 65px;
  23. float: left;
  24. width: 100%;
  25. overflow: visible;
  26. }
  27. /* inner 2 column liquid layout */
  28. .inner-sidebar {
  29. float: right;
  30. clear: right;
  31. display: none;
  32. width: 281px;
  33. position: relative;
  34. }
  35. .columns-2 .inner-sidebar {
  36. margin-right: auto;
  37. width: 286px;
  38. display: block;
  39. }
  40. .inner-sidebar #side-sortables,
  41. .columns-2 .inner-sidebar #side-sortables {
  42. min-height: 300px;
  43. width: 280px;
  44. padding: 0;
  45. }
  46. .has-right-sidebar .inner-sidebar {
  47. display: block;
  48. }
  49. .has-right-sidebar #post-body {
  50. float: left;
  51. clear: left;
  52. width: 100%;
  53. margin-right: -2000px;
  54. }
  55. .has-right-sidebar #post-body-content {
  56. margin-right: 300px;
  57. float: none;
  58. width: auto;
  59. }
  60. /* 2 columns main area */
  61. #col-left {
  62. float: left;
  63. width: 35%;
  64. }
  65. #col-right {
  66. float: right;
  67. width: 65%;
  68. }
  69. #col-left .col-wrap {
  70. padding: 0 6px 0 0;
  71. }
  72. #col-right .col-wrap {
  73. padding: 0 0 0 6px;
  74. }
  75. /* utility classes */
  76. .alignleft {
  77. float: left;
  78. }
  79. .alignright {
  80. float: right;
  81. }
  82. .textleft {
  83. text-align: left;
  84. }
  85. .textright {
  86. text-align: right;
  87. }
  88. .clear {
  89. clear: both;
  90. }
  91. /* modern clearfix */
  92. .wp-clearfix:after {
  93. content: "";
  94. display: table;
  95. clear: both;
  96. }
  97. /* Hide visually but not from screen readers */
  98. .screen-reader-text,
  99. .screen-reader-text span,
  100. .ui-helper-hidden-accessible {
  101. border: 0;
  102. clip: rect(1px, 1px, 1px, 1px);
  103. -webkit-clip-path: inset(50%);
  104. clip-path: inset(50%);
  105. height: 1px;
  106. margin: -1px;
  107. overflow: hidden;
  108. padding: 0;
  109. position: absolute;
  110. width: 1px;
  111. word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
  112. }
  113. .button .screen-reader-text {
  114. height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */
  115. }
  116. .screen-reader-text + .dashicons-external {
  117. margin-top: -1px;
  118. margin-left: 2px;
  119. }
  120. .screen-reader-shortcut {
  121. position: absolute;
  122. top: -1000em;
  123. left: 6px;
  124. height: auto;
  125. width: auto;
  126. display: block;
  127. font-size: 14px;
  128. font-weight: 600;
  129. padding: 15px 23px 14px;
  130. /* Background and color set to prevent false positives in automated accessibility tests. */
  131. background: #f0f0f1;
  132. color: #2271b1;
  133. z-index: 100000;
  134. line-height: normal;
  135. }
  136. .screen-reader-shortcut:focus {
  137. top: -25px;
  138. /* Overrides a:focus in the admin. See ticket #56789. */
  139. color: #2271b1;
  140. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  141. text-decoration: none;
  142. /* Only visible in Windows High Contrast mode */
  143. outline: 2px solid transparent;
  144. outline-offset: -2px;
  145. }
  146. .hidden,
  147. .js .closed .inside,
  148. .js .hide-if-js,
  149. .no-js .hide-if-no-js,
  150. .js.wp-core-ui .hide-if-js,
  151. .js .wp-core-ui .hide-if-js,
  152. .no-js.wp-core-ui .hide-if-no-js,
  153. .no-js .wp-core-ui .hide-if-no-js {
  154. display: none;
  155. }
  156. /* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */
  157. .widget-top,
  158. .menu-item-handle,
  159. .widget-inside,
  160. #menu-settings-column .accordion-container,
  161. #menu-management .menu-edit,
  162. .manage-menus,
  163. table.widefat,
  164. .stuffbox,
  165. p.popular-tags,
  166. .widgets-holder-wrap,
  167. .wp-editor-container,
  168. .popular-tags,
  169. .feature-filter,
  170. .comment-ays {
  171. border: 1px solid #c3c4c7;
  172. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  173. }
  174. table.widefat,
  175. .wp-editor-container,
  176. .stuffbox,
  177. p.popular-tags,
  178. .widgets-holder-wrap,
  179. .popular-tags,
  180. .feature-filter,
  181. .comment-ays {
  182. background: #fff;
  183. }
  184. /* general */
  185. html,
  186. body {
  187. height: 100%;
  188. margin: 0;
  189. padding: 0;
  190. }
  191. body {
  192. background: #f0f0f1;
  193. color: #3c434a;
  194. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  195. font-size: 13px;
  196. line-height: 1.4em;
  197. min-width: 600px;
  198. }
  199. body.iframe {
  200. min-width: 0;
  201. padding-top: 1px;
  202. }
  203. body.modal-open {
  204. overflow: hidden;
  205. }
  206. body.mobile.modal-open #wpwrap {
  207. overflow: hidden;
  208. position: fixed;
  209. height: 100%;
  210. }
  211. iframe,
  212. img {
  213. border: 0;
  214. }
  215. td {
  216. font-family: inherit;
  217. font-size: inherit;
  218. font-weight: inherit;
  219. line-height: inherit;
  220. }
  221. /* Any change to the default link style must be applied to button-link too. */
  222. a {
  223. color: #2271b1;
  224. transition-property: border, background, color;
  225. transition-duration: .05s;
  226. transition-timing-function: ease-in-out;
  227. }
  228. a,
  229. div {
  230. outline: 0;
  231. }
  232. a:hover,
  233. a:active {
  234. color: #135e96;
  235. }
  236. a:focus,
  237. a:focus .media-icon img,
  238. a:focus .plugin-icon,
  239. .wp-person a:focus .gravatar {
  240. color: #043959;
  241. box-shadow:
  242. 0 0 0 1px #4f94d4,
  243. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  244. /* Only visible in Windows High Contrast mode */
  245. outline: 1px solid transparent;
  246. }
  247. #adminmenu a:focus {
  248. box-shadow: none;
  249. /* Only visible in Windows High Contrast mode */
  250. outline: 1px solid transparent;
  251. outline-offset: -1px;
  252. }
  253. .screen-reader-text:focus {
  254. box-shadow: none;
  255. outline: none;
  256. }
  257. blockquote,
  258. q {
  259. quotes: none;
  260. }
  261. blockquote:before,
  262. blockquote:after,
  263. q:before,
  264. q:after {
  265. content: "";
  266. content: none;
  267. }
  268. p,
  269. .wp-die-message {
  270. font-size: 13px;
  271. line-height: 1.5;
  272. margin: 1em 0;
  273. }
  274. blockquote {
  275. margin: 1em;
  276. }
  277. li,
  278. dd {
  279. margin-bottom: 6px;
  280. }
  281. h1,
  282. h2,
  283. h3,
  284. h4,
  285. h5,
  286. h6 {
  287. display: block;
  288. font-weight: 600;
  289. }
  290. h1 {
  291. color: #1d2327;
  292. font-size: 2em;
  293. margin: .67em 0;
  294. }
  295. h2,
  296. h3 {
  297. color: #1d2327;
  298. font-size: 1.3em;
  299. margin: 1em 0;
  300. }
  301. .update-core-php h2 {
  302. margin-top: 4em;
  303. }
  304. .update-php h2,
  305. .update-messages h2,
  306. h4 {
  307. font-size: 1em;
  308. margin: 1.33em 0;
  309. }
  310. h5 {
  311. font-size: 0.83em;
  312. margin: 1.67em 0;
  313. }
  314. h6 {
  315. font-size: 0.67em;
  316. margin: 2.33em 0;
  317. }
  318. ul,
  319. ol {
  320. padding: 0;
  321. }
  322. ul {
  323. list-style: none;
  324. }
  325. ol {
  326. list-style-type: decimal;
  327. margin-left: 2em;
  328. }
  329. ul.ul-disc {
  330. list-style: disc outside;
  331. }
  332. ul.ul-square {
  333. list-style: square outside;
  334. }
  335. ol.ol-decimal {
  336. list-style: decimal outside;
  337. }
  338. ul.ul-disc,
  339. ul.ul-square,
  340. ol.ol-decimal {
  341. margin-left: 1.8em;
  342. }
  343. ul.ul-disc > li,
  344. ul.ul-square > li,
  345. ol.ol-decimal > li {
  346. margin: 0 0 0.5em;
  347. }
  348. /* rtl:ignore */
  349. .ltr {
  350. direction: ltr;
  351. }
  352. /* rtl:ignore */
  353. .code,
  354. code {
  355. font-family: Consolas, Monaco, monospace;
  356. direction: ltr;
  357. unicode-bidi: embed;
  358. }
  359. kbd,
  360. code {
  361. padding: 3px 5px 2px;
  362. margin: 0 1px;
  363. background: #f0f0f1;
  364. background: rgba(0, 0, 0, 0.07);
  365. font-size: 13px;
  366. }
  367. .subsubsub {
  368. list-style: none;
  369. margin: 8px 0 0;
  370. padding: 0;
  371. font-size: 13px;
  372. float: left;
  373. color: #646970;
  374. }
  375. .subsubsub a {
  376. line-height: 2;
  377. padding: .2em;
  378. text-decoration: none;
  379. }
  380. .subsubsub a .count,
  381. .subsubsub a.current .count {
  382. color: #50575e; /* #f1f1f1 background */
  383. font-weight: 400;
  384. }
  385. .subsubsub a.current {
  386. font-weight: 600;
  387. border: none;
  388. }
  389. .subsubsub li {
  390. display: inline-block;
  391. margin: 0;
  392. padding: 0;
  393. white-space: nowrap;
  394. }
  395. /* .widefat - main style for tables */
  396. .widefat {
  397. border-spacing: 0;
  398. width: 100%;
  399. clear: both;
  400. margin: 0;
  401. }
  402. .widefat * {
  403. word-wrap: break-word;
  404. }
  405. .widefat a,
  406. .widefat button.button-link {
  407. text-decoration: none;
  408. }
  409. .widefat td,
  410. .widefat th {
  411. padding: 8px 10px;
  412. }
  413. .widefat thead th,
  414. .widefat thead td {
  415. border-bottom: 1px solid #c3c4c7;
  416. }
  417. .widefat tfoot th,
  418. .widefat tfoot td {
  419. border-top: 1px solid #c3c4c7;
  420. border-bottom: none;
  421. }
  422. .widefat .no-items td {
  423. border-bottom-width: 0;
  424. }
  425. .widefat td {
  426. vertical-align: top;
  427. }
  428. .widefat td,
  429. .widefat td p,
  430. .widefat td ol,
  431. .widefat td ul {
  432. font-size: 13px;
  433. line-height: 1.5em;
  434. }
  435. .widefat th,
  436. .widefat thead td,
  437. .widefat tfoot td {
  438. text-align: left;
  439. line-height: 1.3em;
  440. font-size: 14px;
  441. }
  442. .widefat th input,
  443. .updates-table td input,
  444. .widefat thead td input,
  445. .widefat tfoot td input {
  446. margin: 0 0 0 8px;
  447. padding: 0;
  448. vertical-align: text-top;
  449. }
  450. .widefat .check-column {
  451. width: 2.2em;
  452. padding: 6px 0 25px;
  453. vertical-align: top;
  454. }
  455. .widefat tbody th.check-column {
  456. padding: 9px 0 22px;
  457. }
  458. .widefat thead td.check-column,
  459. .widefat tbody th.check-column,
  460. .updates-table tbody td.check-column,
  461. .widefat tfoot td.check-column {
  462. padding: 11px 0 0 3px;
  463. }
  464. .widefat thead td.check-column,
  465. .widefat tfoot td.check-column {
  466. padding-top: 4px;
  467. vertical-align: middle;
  468. }
  469. .update-php div.updated,
  470. .update-php div.error {
  471. margin-left: 0;
  472. }
  473. .js-update-details-toggle .dashicons {
  474. text-decoration: none;
  475. }
  476. .js-update-details-toggle[aria-expanded="true"] .dashicons::before {
  477. content: "\f142";
  478. }
  479. .no-js .widefat thead .check-column input,
  480. .no-js .widefat tfoot .check-column input {
  481. display: none;
  482. }
  483. .widefat .num,
  484. .column-comments,
  485. .column-links,
  486. .column-posts {
  487. text-align: center;
  488. }
  489. .widefat th#comments {
  490. vertical-align: middle;
  491. }
  492. .wrap {
  493. margin: 10px 20px 0 2px;
  494. }
  495. .wrap > h2:first-child, /* Back-compat for pre-4.4 */
  496. .wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */
  497. .postbox .inside h2, /* Back-compat for pre-4.4 */
  498. .wrap h1 {
  499. font-size: 23px;
  500. font-weight: 400;
  501. margin: 0;
  502. padding: 9px 0 4px;
  503. line-height: 1.3;
  504. }
  505. .wrap h1.wp-heading-inline {
  506. display: inline-block;
  507. margin-right: 5px;
  508. }
  509. .wp-header-end {
  510. visibility: hidden;
  511. margin: -2px 0 0;
  512. }
  513. .subtitle {
  514. margin: 0;
  515. padding-left: 25px;
  516. color: #50575e;
  517. font-size: 14px;
  518. font-weight: 400;
  519. line-height: 1;
  520. }
  521. .subtitle strong {
  522. word-break: break-all;
  523. }
  524. .wrap .add-new-h2, /* deprecated */
  525. .wrap .add-new-h2:active, /* deprecated */
  526. .wrap .page-title-action,
  527. .wrap .page-title-action:active {
  528. display: inline-block;
  529. position: relative;
  530. box-sizing: border-box;
  531. cursor: pointer;
  532. white-space: nowrap;
  533. text-decoration: none;
  534. text-shadow: none;
  535. top: -3px;
  536. margin-left: 4px;
  537. border: 1px solid #2271b1;
  538. border-radius: 3px;
  539. background: #f6f7f7;
  540. font-size: 13px;
  541. font-weight: 400;
  542. line-height: 2.15384615;
  543. color: #2271b1; /* use the standard color used for buttons */
  544. padding: 0 10px;
  545. min-height: 30px;
  546. -webkit-appearance: none;
  547. }
  548. .wrap .wp-heading-inline + .page-title-action {
  549. margin-left: 0;
  550. }
  551. .wrap .add-new-h2:hover, /* deprecated */
  552. .wrap .page-title-action:hover {
  553. background: #f0f0f1;
  554. border-color: #0a4b78;
  555. color: #0a4b78;
  556. }
  557. /* lower specificity: color needs to be overridden by :hover and :active */
  558. .page-title-action:focus {
  559. color: #0a4b78;
  560. }
  561. /* Dashicon for language options on General Settings and Profile screens */
  562. .form-table th label[for="locale"] .dashicons,
  563. .form-table th label[for="WPLANG"] .dashicons {
  564. margin-left: 5px;
  565. }
  566. .wrap .page-title-action:focus {
  567. border-color: #3582c4;
  568. box-shadow: 0 0 0 1px #3582c4;
  569. /* Only visible in Windows High Contrast mode */
  570. outline: 2px solid transparent;
  571. }
  572. .wrap h1.long-header {
  573. padding-right: 0;
  574. }
  575. .wp-dialog {
  576. background-color: #fff;
  577. }
  578. .widgets-chooser ul,
  579. #widgets-left .widget-in-question .widget-top,
  580. #available-widgets .widget-top:hover,
  581. div#widgets-right .widget-top:hover,
  582. #widgets-left .widget-top:hover {
  583. border-color: #8c8f94;
  584. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  585. }
  586. .sorthelper {
  587. background-color: #c5d9ed;
  588. }
  589. .ac_match,
  590. .subsubsub a.current {
  591. color: #000;
  592. }
  593. .striped > tbody > :nth-child(odd),
  594. ul.striped > :nth-child(odd),
  595. .alternate {
  596. background-color: #f6f7f7;
  597. }
  598. .bar {
  599. background-color: #f0f0f1;
  600. border-right-color: #4f94d4;
  601. }
  602. /* Helper classes for plugins to leverage the active WordPress color scheme */
  603. .highlight {
  604. background-color: #f0f6fc;
  605. color: #3c434a;
  606. }
  607. .wp-ui-primary {
  608. color: #fff;
  609. background-color: #2c3338;
  610. }
  611. .wp-ui-text-primary {
  612. color: #2c3338;
  613. }
  614. .wp-ui-highlight {
  615. color: #fff;
  616. background-color: #2271b1;
  617. }
  618. .wp-ui-text-highlight {
  619. color: #2271b1;
  620. }
  621. .wp-ui-notification {
  622. color: #fff;
  623. background-color: #d63638;
  624. }
  625. .wp-ui-text-notification {
  626. color: #d63638;
  627. }
  628. .wp-ui-text-icon {
  629. color: #8c8f94; /* same as new icons */
  630. }
  631. /* For emoji replacement images */
  632. img.emoji {
  633. display: inline !important;
  634. border: none !important;
  635. height: 1em !important;
  636. width: 1em !important;
  637. margin: 0 .07em !important;
  638. vertical-align: -0.1em !important;
  639. background: none !important;
  640. padding: 0 !important;
  641. box-shadow: none !important;
  642. }
  643. /*------------------------------------------------------------------------------
  644. 1.0 - Text Styles
  645. ------------------------------------------------------------------------------*/
  646. .widget .widget-top,
  647. .postbox .hndle,
  648. .stuffbox .hndle,
  649. .control-section .accordion-section-title,
  650. .sidebar-name,
  651. #nav-menu-header,
  652. #nav-menu-footer,
  653. .menu-item-handle,
  654. .checkbox,
  655. .side-info,
  656. #your-profile #rich_editing,
  657. .widefat thead th,
  658. .widefat thead td,
  659. .widefat tfoot th,
  660. .widefat tfoot td {
  661. line-height: 1.4em;
  662. }
  663. .widget .widget-top,
  664. .menu-item-handle {
  665. background: #f6f7f7;
  666. color: #1d2327;
  667. }
  668. .stuffbox .hndle {
  669. border-bottom: 1px solid #c3c4c7;
  670. }
  671. .quicktags {
  672. background-color: #c3c4c7;
  673. color: #000;
  674. font-size: 12px;
  675. }
  676. .icon32 {
  677. display: none;
  678. }
  679. /* @todo can we combine these into a class or use an existing dashicon one? */
  680. .welcome-panel .welcome-panel-close:before,
  681. .tagchecklist .ntdelbutton .remove-tag-icon:before,
  682. #bulk-titles .ntdelbutton:before,
  683. .notice-dismiss:before {
  684. background: none;
  685. color: #787c82;
  686. content: "\f153";
  687. display: block;
  688. font: normal 16px/20px dashicons;
  689. speak: never;
  690. height: 20px;
  691. text-align: center;
  692. width: 20px;
  693. -webkit-font-smoothing: antialiased;
  694. -moz-osx-font-smoothing: grayscale;
  695. }
  696. .welcome-panel .welcome-panel-close:before {
  697. margin: 0;
  698. }
  699. .tagchecklist .ntdelbutton .remove-tag-icon:before {
  700. margin-left: 2px;
  701. border-radius: 50%;
  702. color: #2271b1;
  703. /* vertically center the icon cross browsers */
  704. line-height: 1.28;
  705. }
  706. .tagchecklist .ntdelbutton:focus {
  707. outline: 0;
  708. }
  709. .tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
  710. .tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
  711. #bulk-titles .ntdelbutton:hover:before,
  712. #bulk-titles .ntdelbutton:focus:before {
  713. color: #d63638;
  714. }
  715. .tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
  716. box-shadow:
  717. 0 0 0 1px #4f94d4,
  718. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  719. }
  720. .key-labels label {
  721. line-height: 24px;
  722. }
  723. strong, b {
  724. font-weight: 600;
  725. }
  726. .pre {
  727. /* https://developer.mozilla.org/en-US/docs/CSS/white-space */
  728. white-space: pre-wrap; /* css-3 */
  729. word-wrap: break-word; /* IE 5.5 - 7 */
  730. }
  731. .howto {
  732. color: #646970;
  733. display: block;
  734. }
  735. p.install-help {
  736. margin: 8px 0;
  737. font-style: italic;
  738. }
  739. .no-break {
  740. white-space: nowrap;
  741. }
  742. hr {
  743. border: 0;
  744. border-top: 1px solid #dcdcde;
  745. border-bottom: 1px solid #f6f7f7;
  746. }
  747. .row-actions span.delete a,
  748. .row-actions span.trash a,
  749. .row-actions span.spam a,
  750. .plugins a.delete,
  751. #all-plugins-table .plugins a.delete,
  752. #search-plugins-table .plugins a.delete,
  753. .submitbox .submitdelete,
  754. #media-items a.delete,
  755. #media-items a.delete-permanently,
  756. #nav-menu-footer .menu-delete,
  757. #delete-link a.delete,
  758. a#remove-post-thumbnail,
  759. .privacy_requests .remove-personal-data .remove-personal-data-handle {
  760. color: #b32d2e;
  761. }
  762. abbr.required,
  763. span.required,
  764. .file-error,
  765. .row-actions .delete a:hover,
  766. .row-actions .trash a:hover,
  767. .row-actions .spam a:hover,
  768. .plugins a.delete:hover,
  769. #all-plugins-table .plugins a.delete:hover,
  770. #search-plugins-table .plugins a.delete:hover,
  771. .submitbox .submitdelete:hover,
  772. #media-items a.delete:hover,
  773. #media-items a.delete-permanently:hover,
  774. #nav-menu-footer .menu-delete:hover,
  775. #delete-link a.delete:hover,
  776. a#remove-post-thumbnail:hover,
  777. .privacy_requests .remove-personal-data .remove-personal-data-handle:hover {
  778. color: #b32d2e;
  779. border: none;
  780. }
  781. /*------------------------------------------------------------------------------
  782. 3.0 - Actions
  783. ------------------------------------------------------------------------------*/
  784. #major-publishing-actions {
  785. padding: 10px;
  786. clear: both;
  787. border-top: 1px solid #dcdcde;
  788. background: #f6f7f7;
  789. }
  790. #delete-action {
  791. float: left;
  792. line-height: 2.30769231; /* 30px */
  793. }
  794. #delete-link {
  795. line-height: 2.30769231; /* 30px */
  796. vertical-align: middle;
  797. text-align: left;
  798. margin-left: 8px;
  799. }
  800. #delete-link a {
  801. text-decoration: none;
  802. }
  803. #publishing-action {
  804. text-align: right;
  805. float: right;
  806. line-height: 1.9;
  807. }
  808. #publishing-action .spinner {
  809. float: none;
  810. margin-top: 5px;
  811. }
  812. #misc-publishing-actions {
  813. padding: 6px 0 0;
  814. }
  815. .misc-pub-section {
  816. padding: 6px 10px 8px;
  817. }
  818. .word-wrap-break-word,
  819. .misc-pub-filename {
  820. word-wrap: break-word;
  821. }
  822. #minor-publishing-actions {
  823. padding: 10px 10px 0;
  824. text-align: right;
  825. }
  826. #save-post {
  827. float: left;
  828. }
  829. .preview {
  830. float: right;
  831. }
  832. #sticky-span {
  833. margin-left: 18px;
  834. }
  835. .approve,
  836. .unapproved .unapprove {
  837. display: none;
  838. }
  839. .unapproved .approve,
  840. .spam .approve,
  841. .trash .approve {
  842. display: inline;
  843. }
  844. td.action-links,
  845. th.action-links {
  846. text-align: right;
  847. }
  848. #misc-publishing-actions .notice {
  849. margin-left: 10px;
  850. margin-right: 10px;
  851. }
  852. /* Filter bar */
  853. .wp-filter {
  854. display: inline-block;
  855. position: relative;
  856. box-sizing: border-box;
  857. margin: 12px 0 25px;
  858. padding: 0 10px;
  859. width: 100%;
  860. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  861. border: 1px solid #c3c4c7;
  862. background: #fff;
  863. color: #50575e;
  864. font-size: 13px;
  865. }
  866. .wp-filter a {
  867. text-decoration: none;
  868. }
  869. .filter-count {
  870. display: inline-block;
  871. vertical-align: middle;
  872. min-width: 4em;
  873. }
  874. .title-count,
  875. .filter-count .count {
  876. display: inline-block;
  877. position: relative;
  878. top: -1px;
  879. padding: 4px 10px;
  880. border-radius: 30px;
  881. background: #646970;
  882. color: #fff;
  883. font-size: 14px;
  884. font-weight: 600;
  885. }
  886. /* not a part of filter bar, but derived from it, so here for now */
  887. .title-count {
  888. display: inline;
  889. top: -3px;
  890. margin-left: 5px;
  891. margin-right: 20px;
  892. }
  893. .filter-items {
  894. float: left;
  895. }
  896. .filter-links {
  897. display: inline-block;
  898. margin: 0;
  899. }
  900. .filter-links li {
  901. display: inline-block;
  902. margin: 0;
  903. }
  904. .filter-links li > a {
  905. display: inline-block;
  906. margin: 0 10px;
  907. padding: 15px 0;
  908. border-bottom: 4px solid #fff;
  909. color: #646970;
  910. cursor: pointer;
  911. }
  912. .filter-links .current {
  913. box-shadow: none;
  914. border-bottom: 4px solid #646970;
  915. color: #1d2327;
  916. }
  917. .filter-links li > a:hover,
  918. .filter-links li > a:focus,
  919. .show-filters .filter-links a.current:hover,
  920. .show-filters .filter-links a.current:focus {
  921. color: #135e96;
  922. }
  923. .wp-filter .search-form {
  924. float: right;
  925. margin: 10px 0;
  926. }
  927. .wp-filter .search-form input[type="search"] {
  928. width: 280px;
  929. max-width: 100%;
  930. }
  931. .wp-filter .search-form select {
  932. margin: 0;
  933. }
  934. /* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
  935. .plugin-install-php .wp-filter {
  936. display: flex;
  937. flex-wrap: wrap;
  938. justify-content: space-between;
  939. align-items: center;
  940. }
  941. .wp-filter .search-form.search-plugins {
  942. /* This element is a flex item: the inherited float won't have any effect. */
  943. margin-top: 0;
  944. }
  945. .wp-filter .search-form.search-plugins select,
  946. .wp-filter .search-form.search-plugins .wp-filter-search {
  947. display: inline-block;
  948. margin-top: 10px;
  949. vertical-align: top;
  950. }
  951. .wp-filter .button.drawer-toggle {
  952. margin: 10px 9px 0;
  953. padding: 0 10px 0 6px;
  954. border-color: transparent;
  955. background-color: transparent;
  956. color: #646970;
  957. vertical-align: baseline;
  958. box-shadow: none;
  959. }
  960. .wp-filter .drawer-toggle:before {
  961. content: "\f111";
  962. margin: 0 5px 0 0;
  963. color: #646970;
  964. font: normal 16px/1 dashicons;
  965. vertical-align: text-bottom;
  966. -webkit-font-smoothing: antialiased;
  967. -moz-osx-font-smoothing: grayscale;
  968. }
  969. .wp-filter .button.drawer-toggle:hover,
  970. .wp-filter .drawer-toggle:hover:before,
  971. .wp-filter .button.drawer-toggle:focus,
  972. .wp-filter .drawer-toggle:focus:before {
  973. background-color: transparent;
  974. color: #135e96;
  975. }
  976. .wp-filter .button.drawer-toggle:hover,
  977. .wp-filter .button.drawer-toggle:focus:active {
  978. border-color: transparent;
  979. }
  980. .wp-filter .button.drawer-toggle:focus {
  981. border-color: #4f94d4;
  982. }
  983. .wp-filter .button.drawer-toggle:active {
  984. background: transparent;
  985. box-shadow: none;
  986. transform: none;
  987. }
  988. .wp-filter .drawer-toggle.current:before {
  989. color: #fff;
  990. }
  991. .filter-drawer,
  992. .wp-filter .favorites-form {
  993. display: none;
  994. margin: 0 -10px 0 -20px;
  995. padding: 20px;
  996. border-top: 1px solid #f0f0f1;
  997. background: #f6f7f7;
  998. overflow: hidden;
  999. }
  1000. .show-filters .filter-drawer,
  1001. .show-favorites-form .favorites-form {
  1002. display: block;
  1003. }
  1004. .show-filters .filter-links a.current {
  1005. border-bottom: none;
  1006. }
  1007. .show-filters .wp-filter .button.drawer-toggle {
  1008. border-radius: 2px;
  1009. background: #646970;
  1010. color: #fff;
  1011. }
  1012. .show-filters .wp-filter .drawer-toggle:hover,
  1013. .show-filters .wp-filter .drawer-toggle:focus {
  1014. background: #2271b1;
  1015. }
  1016. .show-filters .wp-filter .drawer-toggle:before {
  1017. color: #fff;
  1018. }
  1019. .filter-group {
  1020. box-sizing: border-box;
  1021. position: relative;
  1022. float: left;
  1023. margin: 0 1% 0 0;
  1024. padding: 20px 10px 10px;
  1025. width: 24%;
  1026. background: #fff;
  1027. border: 1px solid #dcdcde;
  1028. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  1029. }
  1030. .filter-group legend {
  1031. position: absolute;
  1032. top: 10px;
  1033. display: block;
  1034. margin: 0;
  1035. padding: 0;
  1036. font-size: 1em;
  1037. font-weight: 600;
  1038. }
  1039. .filter-drawer .filter-group-feature {
  1040. margin: 28px 0 0;
  1041. list-style-type: none;
  1042. font-size: 12px;
  1043. }
  1044. .filter-drawer .filter-group-feature input,
  1045. .filter-drawer .filter-group-feature label {
  1046. line-height: 1.4;
  1047. }
  1048. .filter-drawer .filter-group-feature input {
  1049. position: absolute;
  1050. margin: 0;
  1051. }
  1052. .filter-group .filter-group-feature label {
  1053. display: block;
  1054. margin: 14px 0 14px 23px;
  1055. }
  1056. .filter-drawer .buttons {
  1057. clear: both;
  1058. margin-bottom: 20px;
  1059. }
  1060. .filter-drawer .filter-group + .buttons {
  1061. margin-bottom: 0;
  1062. padding-top: 20px;
  1063. }
  1064. .filter-drawer .buttons .button span {
  1065. display: inline-block;
  1066. opacity: 0.8;
  1067. font-size: 12px;
  1068. text-indent: 10px;
  1069. }
  1070. .wp-filter .button.clear-filters {
  1071. display: none;
  1072. margin-left: 10px;
  1073. }
  1074. .wp-filter .button-link.edit-filters {
  1075. padding: 0 5px;
  1076. line-height: 2.2;
  1077. }
  1078. .filtered-by {
  1079. display: none;
  1080. margin: 0;
  1081. }
  1082. .filtered-by > span {
  1083. font-weight: 600;
  1084. }
  1085. .filtered-by a {
  1086. margin-left: 10px;
  1087. }
  1088. .filtered-by .tags {
  1089. display: inline;
  1090. }
  1091. .filtered-by .tag {
  1092. margin: 0 5px;
  1093. padding: 4px 8px;
  1094. border: 1px solid #dcdcde;
  1095. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  1096. background: #fff;
  1097. font-size: 11px;
  1098. }
  1099. .filters-applied .filter-group,
  1100. .filters-applied .filter-drawer .buttons,
  1101. .filters-applied .filter-drawer br {
  1102. display: none;
  1103. }
  1104. .filters-applied .filtered-by {
  1105. display: block;
  1106. }
  1107. .filters-applied .filter-drawer {
  1108. padding: 20px;
  1109. }
  1110. .show-filters .favorites-form,
  1111. .show-filters .content-filterable,
  1112. .show-filters.filters-applied.loading-content .content-filterable,
  1113. .loading-content .content-filterable,
  1114. .error .content-filterable {
  1115. display: none;
  1116. }
  1117. .show-filters.filters-applied .content-filterable {
  1118. display: block;
  1119. }
  1120. .loading-content .spinner {
  1121. display: block;
  1122. margin: 40px auto 0;
  1123. float: none;
  1124. }
  1125. @media only screen and (max-width: 1120px) {
  1126. .filter-drawer {
  1127. border-bottom: 1px solid #f0f0f1;
  1128. }
  1129. .filter-group {
  1130. margin-bottom: 0;
  1131. margin-top: 5px;
  1132. width: 100%;
  1133. }
  1134. .filter-group li {
  1135. margin: 10px 0;
  1136. }
  1137. }
  1138. @media only screen and (max-width: 1000px) {
  1139. .filter-items {
  1140. float: none;
  1141. }
  1142. .wp-filter .media-toolbar-primary,
  1143. .wp-filter .media-toolbar-secondary,
  1144. .wp-filter .search-form {
  1145. float: none; /* Remove float from media-views.css */
  1146. position: relative;
  1147. max-width: 100%;
  1148. }
  1149. }
  1150. @media only screen and (max-width: 782px) {
  1151. .filter-group li {
  1152. padding: 0;
  1153. width: 50%;
  1154. }
  1155. }
  1156. @media only screen and (max-width: 320px) {
  1157. .filter-count {
  1158. display: none;
  1159. }
  1160. .wp-filter .drawer-toggle {
  1161. margin: 10px 0;
  1162. }
  1163. .filter-group li,
  1164. .wp-filter .search-form input[type="search"] {
  1165. width: 100%;
  1166. }
  1167. }
  1168. /*------------------------------------------------------------------------------
  1169. 4.0 - Notifications
  1170. ------------------------------------------------------------------------------*/
  1171. .notice,
  1172. div.updated,
  1173. div.error {
  1174. background: #fff;
  1175. border: 1px solid #c3c4c7;
  1176. border-left-width: 4px;
  1177. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  1178. margin: 5px 15px 2px;
  1179. padding: 1px 12px;
  1180. }
  1181. div[class="update-message"] { /* back-compat for pre-4.6 */
  1182. padding: 0.5em 12px 0.5em 0;
  1183. }
  1184. .notice p,
  1185. .notice-title,
  1186. div.updated p,
  1187. div.error p,
  1188. .form-table td .notice p {
  1189. margin: 0.5em 0;
  1190. padding: 2px;
  1191. }
  1192. .error a {
  1193. text-decoration: underline;
  1194. }
  1195. .updated a {
  1196. padding-bottom: 2px;
  1197. }
  1198. .notice-alt {
  1199. box-shadow: none;
  1200. }
  1201. .notice-large {
  1202. padding: 10px 20px;
  1203. }
  1204. .notice-title {
  1205. display: inline-block;
  1206. color: #1d2327;
  1207. font-size: 18px;
  1208. }
  1209. .wp-core-ui .notice.is-dismissible {
  1210. padding-right: 38px;
  1211. position: relative;
  1212. }
  1213. .notice-dismiss {
  1214. position: absolute;
  1215. top: 0;
  1216. right: 1px;
  1217. border: none;
  1218. margin: 0;
  1219. padding: 9px;
  1220. background: none;
  1221. color: #787c82;
  1222. cursor: pointer;
  1223. }
  1224. .notice-dismiss:hover:before,
  1225. .notice-dismiss:active:before,
  1226. .notice-dismiss:focus:before {
  1227. color: #d63638;
  1228. }
  1229. .notice-dismiss:focus {
  1230. outline: none;
  1231. box-shadow:
  1232. 0 0 0 1px #4f94d4,
  1233. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  1234. }
  1235. .notice-success,
  1236. div.updated {
  1237. border-left-color: #00a32a;
  1238. }
  1239. .notice-success.notice-alt {
  1240. background-color: #edfaef;
  1241. }
  1242. .notice-warning {
  1243. border-left-color: #dba617;
  1244. }
  1245. .notice-warning.notice-alt {
  1246. background-color: #fcf9e8;
  1247. }
  1248. .notice-error,
  1249. div.error {
  1250. border-left-color: #d63638;
  1251. }
  1252. .notice-error.notice-alt {
  1253. background-color: #fcf0f1;
  1254. }
  1255. .notice-info {
  1256. border-left-color: #72aee6;
  1257. }
  1258. .notice-info.notice-alt {
  1259. background-color: #f0f6fc;
  1260. }
  1261. .update-message p:before,
  1262. .updating-message p:before,
  1263. .updated-message p:before,
  1264. .import-php .updating-message:before,
  1265. .button.updating-message:before,
  1266. .button.updated-message:before,
  1267. .button.installed:before,
  1268. .button.installing:before {
  1269. display: inline-block;
  1270. font: normal 20px/1 'dashicons';
  1271. -webkit-font-smoothing: antialiased;
  1272. -moz-osx-font-smoothing: grayscale;
  1273. vertical-align: top;
  1274. }
  1275. .wrap .notice,
  1276. .wrap div.updated,
  1277. .wrap div.error,
  1278. .media-upload-form .notice,
  1279. .media-upload-form div.error {
  1280. margin: 5px 0 15px;
  1281. }
  1282. .wrap #templateside .notice {
  1283. display: block;
  1284. margin: 0;
  1285. padding: 5px 8px;
  1286. font-weight: 600;
  1287. text-decoration: none;
  1288. }
  1289. .wrap #templateside span.notice {
  1290. margin-left: -12px;
  1291. }
  1292. #templateside li.notice a {
  1293. padding: 0;
  1294. }
  1295. /* Update icon. */
  1296. .update-message p:before,
  1297. .updating-message p:before,
  1298. .import-php .updating-message:before,
  1299. .button.updating-message:before,
  1300. .button.installing:before {
  1301. color: #d63638;
  1302. content: "\f463";
  1303. }
  1304. /* Spins the update icon. */
  1305. .updating-message p:before,
  1306. .import-php .updating-message:before,
  1307. .button.updating-message:before,
  1308. .button.installing:before,
  1309. .plugins .column-auto-updates .dashicons-update.spin,
  1310. .theme-overlay .theme-autoupdate .dashicons-update.spin {
  1311. animation: rotation 2s infinite linear;
  1312. }
  1313. @media (prefers-reduced-motion: reduce) {
  1314. .updating-message p:before,
  1315. .import-php .updating-message:before,
  1316. .button.updating-message:before,
  1317. .button.installing:before,
  1318. .plugins .column-auto-updates .dashicons-update.spin,
  1319. .theme-overlay .theme-autoupdate .dashicons-update.spin {
  1320. animation: none;
  1321. }
  1322. }
  1323. .theme-overlay .theme-autoupdate .dashicons-update.spin {
  1324. margin-right: 3px;
  1325. }
  1326. /* Updated icon (check mark). */
  1327. .updated-message p:before,
  1328. .installed p:before,
  1329. .button.updated-message:before {
  1330. color: #68de7c;
  1331. content: "\f147";
  1332. }
  1333. /* Error icon. */
  1334. .update-message.notice-error p:before {
  1335. color: #d63638;
  1336. content: "\f534";
  1337. }
  1338. .wrap .notice p:before,
  1339. .import-php .updating-message:before {
  1340. margin-right: 6px;
  1341. }
  1342. .import-php .updating-message:before {
  1343. vertical-align: bottom;
  1344. }
  1345. #update-nag,
  1346. .update-nag {
  1347. display: inline-block;
  1348. line-height: 1.4;
  1349. padding: 11px 15px;
  1350. font-size: 14px;
  1351. margin: 25px 20px 0 2px;
  1352. }
  1353. ul#dismissed-updates {
  1354. display: none;
  1355. }
  1356. #dismissed-updates li > p {
  1357. margin-top: 0;
  1358. }
  1359. #dismiss,
  1360. #undismiss {
  1361. margin-left: 0.5em;
  1362. }
  1363. form.upgrade {
  1364. margin-top: 8px;
  1365. }
  1366. form.upgrade .hint {
  1367. font-style: italic;
  1368. font-size: 85%;
  1369. margin: -0.5em 0 2em;
  1370. }
  1371. .update-php .spinner {
  1372. float: none;
  1373. margin: -4px 0;
  1374. }
  1375. h2.wp-current-version {
  1376. margin-bottom: .3em;
  1377. }
  1378. p.update-last-checked {
  1379. margin-top: 0;
  1380. }
  1381. p.auto-update-status {
  1382. margin-top: 2em;
  1383. line-height: 1.8;
  1384. }
  1385. #ajax-loading,
  1386. .ajax-loading,
  1387. .ajax-feedback,
  1388. .imgedit-wait-spin,
  1389. .list-ajax-loading { /* deprecated */
  1390. visibility: hidden;
  1391. }
  1392. #ajax-response.alignleft {
  1393. margin-left: 2em;
  1394. }
  1395. .button.updating-message:before,
  1396. .button.updated-message:before,
  1397. .button.installed:before,
  1398. .button.installing:before {
  1399. margin: 3px 5px 0 -2px;
  1400. }
  1401. .button-primary.updating-message:before {
  1402. color: #fff;
  1403. }
  1404. .button-primary.updated-message:before {
  1405. color: #9ec2e6;
  1406. }
  1407. .button.updated-message {
  1408. transition-property: border, background, color;
  1409. transition-duration: .05s;
  1410. transition-timing-function: ease-in-out;
  1411. }
  1412. @media aural {
  1413. .wrap .notice p:before,
  1414. .button.installing:before,
  1415. .button.installed:before,
  1416. .update-message p:before {
  1417. speak: never;
  1418. }
  1419. }
  1420. /* @todo: this does not need its own section anymore */
  1421. /*------------------------------------------------------------------------------
  1422. 6.0 - Admin Header
  1423. ------------------------------------------------------------------------------*/
  1424. #adminmenu a,
  1425. #taglist a,
  1426. #catlist a {
  1427. text-decoration: none;
  1428. }
  1429. /*------------------------------------------------------------------------------
  1430. 6.1 - Screen Options Tabs
  1431. ------------------------------------------------------------------------------*/
  1432. #screen-options-wrap,
  1433. #contextual-help-wrap {
  1434. margin: 0;
  1435. padding: 8px 20px 12px;
  1436. position: relative;
  1437. }
  1438. #contextual-help-wrap {
  1439. overflow: auto;
  1440. margin-left: 0;
  1441. }
  1442. #screen-meta-links {
  1443. float: right;
  1444. margin: 0 20px 0 0;
  1445. }
  1446. /* screen options and help tabs revert */
  1447. #screen-meta {
  1448. display: none;
  1449. margin: 0 20px -1px 0;
  1450. position: relative;
  1451. background-color: #fff;
  1452. border: 1px solid #c3c4c7;
  1453. border-top: none;
  1454. box-shadow: 0 0 0 transparent;
  1455. }
  1456. #screen-options-link-wrap,
  1457. #contextual-help-link-wrap {
  1458. float: left;
  1459. margin: 0 0 0 6px;
  1460. }
  1461. #screen-meta-links .screen-meta-toggle {
  1462. position: relative;
  1463. top: 0;
  1464. }
  1465. #screen-meta-links .show-settings {
  1466. border: 1px solid #c3c4c7;
  1467. border-top: none;
  1468. height: auto;
  1469. margin-bottom: 0;
  1470. padding: 3px 6px 3px 16px;
  1471. background: #fff;
  1472. border-radius: 0 0 4px 4px;
  1473. color: #646970;
  1474. line-height: 1.7;
  1475. box-shadow: 0 0 0 transparent;
  1476. transition: box-shadow 0.1s linear;
  1477. }
  1478. #screen-meta-links .show-settings:hover,
  1479. #screen-meta-links .show-settings:active,
  1480. #screen-meta-links .show-settings:focus {
  1481. color: #2c3338;
  1482. }
  1483. #screen-meta-links .show-settings:focus {
  1484. border-color: #4f94d4;
  1485. box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
  1486. }
  1487. #screen-meta-links .show-settings:active {
  1488. transform: none;
  1489. }
  1490. #screen-meta-links .show-settings:after {
  1491. right: 0;
  1492. content: "\f140";
  1493. font: normal 20px/1 dashicons;
  1494. speak: never;
  1495. display: inline-block;
  1496. padding: 0 5px 0 0;
  1497. bottom: 2px;
  1498. position: relative;
  1499. vertical-align: bottom;
  1500. -webkit-font-smoothing: antialiased;
  1501. -moz-osx-font-smoothing: grayscale;
  1502. text-decoration: none;
  1503. }
  1504. #screen-meta-links .screen-meta-active:after {
  1505. content: "\f142";
  1506. }
  1507. /* end screen options and help tabs */
  1508. .toggle-arrow {
  1509. background-repeat: no-repeat;
  1510. background-position: top left;
  1511. background-color: transparent;
  1512. height: 22px;
  1513. line-height: 22px;
  1514. display: block;
  1515. }
  1516. .toggle-arrow-active {
  1517. background-position: bottom left;
  1518. }
  1519. #screen-options-wrap h5, /* Back-compat for old plugins */
  1520. #screen-options-wrap legend,
  1521. #contextual-help-wrap h5 {
  1522. margin: 0;
  1523. padding: 8px 0;
  1524. font-size: 13px;
  1525. font-weight: 600;
  1526. }
  1527. .metabox-prefs label {
  1528. display: inline-block;
  1529. padding-right: 15px;
  1530. line-height: 2.35;
  1531. }
  1532. #number-of-columns {
  1533. display: inline-block;
  1534. vertical-align: middle;
  1535. line-height: 30px;
  1536. }
  1537. .metabox-prefs input[type=checkbox] {
  1538. margin-top: 0;
  1539. margin-right: 6px;
  1540. }
  1541. .metabox-prefs label input,
  1542. .metabox-prefs label input[type=checkbox] {
  1543. margin: -4px 5px 0 0;
  1544. }
  1545. .metabox-prefs .columns-prefs label input {
  1546. margin: -1px 2px 0 0;
  1547. }
  1548. .metabox-prefs label a {
  1549. display: none;
  1550. }
  1551. .metabox-prefs .screen-options input,
  1552. .metabox-prefs .screen-options label {
  1553. margin-top: 0;
  1554. margin-bottom: 0;
  1555. vertical-align: middle;
  1556. }
  1557. .metabox-prefs .screen-options .screen-per-page {
  1558. margin-right: 15px;
  1559. padding-right: 0;
  1560. }
  1561. .metabox-prefs .screen-options label {
  1562. line-height: 2.2;
  1563. padding-right: 0;
  1564. }
  1565. .screen-options + .screen-options {
  1566. margin-top: 10px;
  1567. }
  1568. .metabox-prefs .submit {
  1569. margin-top: 1em;
  1570. padding: 0;
  1571. }
  1572. /*------------------------------------------------------------------------------
  1573. 6.2 - Help Menu
  1574. ------------------------------------------------------------------------------*/
  1575. #contextual-help-wrap {
  1576. padding: 0;
  1577. }
  1578. #contextual-help-columns {
  1579. position: relative;
  1580. }
  1581. #contextual-help-back {
  1582. position: absolute;
  1583. top: 0;
  1584. bottom: 0;
  1585. left: 150px;
  1586. right: 170px;
  1587. border: 1px solid #c3c4c7;
  1588. border-top: none;
  1589. border-bottom: none;
  1590. background: #f0f6fc;
  1591. }
  1592. #contextual-help-wrap.no-sidebar #contextual-help-back {
  1593. right: 0;
  1594. border-right-width: 0;
  1595. border-bottom-right-radius: 2px;
  1596. }
  1597. .contextual-help-tabs {
  1598. float: left;
  1599. width: 150px;
  1600. margin: 0;
  1601. }
  1602. .contextual-help-tabs ul {
  1603. margin: 1em 0;
  1604. }
  1605. .contextual-help-tabs li {
  1606. margin-bottom: 0;
  1607. list-style-type: none;
  1608. border-style: solid;
  1609. border-width: 0 0 0 2px;
  1610. border-color: transparent;
  1611. }
  1612. .contextual-help-tabs a {
  1613. display: block;
  1614. padding: 5px 5px 5px 12px;
  1615. line-height: 1.4;
  1616. text-decoration: none;
  1617. border: 1px solid transparent;
  1618. border-right: none;
  1619. border-left: none;
  1620. }
  1621. .contextual-help-tabs a:hover {
  1622. color: #2c3338;
  1623. }
  1624. .contextual-help-tabs .active {
  1625. padding: 0;
  1626. margin: 0 -1px 0 0;
  1627. border-left: 2px solid #72aee6;
  1628. background: #f0f6fc;
  1629. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
  1630. }
  1631. .contextual-help-tabs .active a {
  1632. border-color: #c3c4c7;
  1633. color: #2c3338;
  1634. }
  1635. .contextual-help-tabs-wrap {
  1636. padding: 0 20px;
  1637. overflow: auto;
  1638. }
  1639. .help-tab-content {
  1640. display: none;
  1641. margin: 0 22px 12px 0;
  1642. line-height: 1.6;
  1643. }
  1644. .help-tab-content.active {
  1645. display: block;
  1646. }
  1647. .help-tab-content ul li {
  1648. list-style-type: disc;
  1649. margin-left: 18px;
  1650. }
  1651. .contextual-help-sidebar {
  1652. width: 150px;
  1653. float: right;
  1654. padding: 0 8px 0 12px;
  1655. overflow: auto;
  1656. }
  1657. /*------------------------------------------------------------------------------
  1658. 8.0 - Layout Blocks
  1659. ------------------------------------------------------------------------------*/
  1660. html.wp-toolbar {
  1661. padding-top: 32px;
  1662. box-sizing: border-box;
  1663. -ms-overflow-style: scrollbar; /* See ticket #48545 */
  1664. }
  1665. .widefat th,
  1666. .widefat td {
  1667. color: #50575e;
  1668. }
  1669. .widefat th,
  1670. .widefat thead td,
  1671. .widefat tfoot td {
  1672. font-weight: 400;
  1673. }
  1674. .widefat thead tr th,
  1675. .widefat thead tr td,
  1676. .widefat tfoot tr th,
  1677. .widefat tfoot tr td {
  1678. color: #2c3338;
  1679. }
  1680. .widefat td p {
  1681. margin: 2px 0 0.8em;
  1682. }
  1683. .widefat p,
  1684. .widefat ol,
  1685. .widefat ul {
  1686. color: #2c3338;
  1687. }
  1688. .widefat .column-comment p {
  1689. margin: 0.6em 0;
  1690. }
  1691. .widefat .column-comment ul {
  1692. list-style: initial;
  1693. margin-left: 2em;
  1694. }
  1695. /* Screens with postboxes */
  1696. .postbox-container {
  1697. float: left;
  1698. }
  1699. .postbox-container .meta-box-sortables {
  1700. box-sizing: border-box;
  1701. }
  1702. #wpbody-content .metabox-holder {
  1703. padding-top: 10px;
  1704. }
  1705. .metabox-holder .postbox-container .meta-box-sortables {
  1706. /* The jQuery UI Sortables need some initial height to work properly. */
  1707. min-height: 1px;
  1708. position: relative;
  1709. }
  1710. #post-body-content {
  1711. width: 100%;
  1712. min-width: 463px;
  1713. float: left;
  1714. }
  1715. #post-body.columns-2 #postbox-container-1 {
  1716. float: right;
  1717. margin-right: -300px;
  1718. width: 280px;
  1719. }
  1720. #post-body.columns-2 #side-sortables {
  1721. min-height: 250px;
  1722. }
  1723. /* one column on the dash */
  1724. @media only screen and (max-width: 799px) {
  1725. #wpbody-content .metabox-holder .postbox-container .empty-container {
  1726. outline: none;
  1727. height: 0;
  1728. min-height: 0;
  1729. }
  1730. }
  1731. .js .widget .widget-top,
  1732. .js .postbox .hndle {
  1733. cursor: move;
  1734. }
  1735. .js .widget .widget-top.is-non-sortable,
  1736. .js .postbox .hndle.is-non-sortable {
  1737. cursor: auto;
  1738. }
  1739. /* Configurable dashboard widgets "Configure" edit-box link. */
  1740. .hndle a {
  1741. font-size: 12px;
  1742. font-weight: 400;
  1743. }
  1744. .postbox-header {
  1745. display: flex;
  1746. align-items: center;
  1747. justify-content: space-between;
  1748. border-bottom: 1px solid #c3c4c7;
  1749. }
  1750. .postbox-header .hndle {
  1751. flex-grow: 1;
  1752. /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
  1753. display: flex;
  1754. justify-content: space-between;
  1755. align-items: center;
  1756. }
  1757. .postbox-header .handle-actions {
  1758. flex-shrink: 0;
  1759. }
  1760. /* Post box order and toggle buttons. */
  1761. .postbox .handle-order-higher,
  1762. .postbox .handle-order-lower,
  1763. .postbox .handlediv {
  1764. width: 36px;
  1765. height: 36px;
  1766. margin: 0;
  1767. padding: 0;
  1768. border: 0;
  1769. background: none;
  1770. cursor: pointer;
  1771. }
  1772. .postbox .handle-order-higher,
  1773. .postbox .handle-order-lower {
  1774. color: #787c82;
  1775. width: 1.62rem;
  1776. }
  1777. /* Post box order buttons in the block editor meta boxes area. */
  1778. .edit-post-meta-boxes-area .postbox .handle-order-higher,
  1779. .edit-post-meta-boxes-area .postbox .handle-order-lower {
  1780. width: 44px;
  1781. height: 44px;
  1782. color: #1d2327
  1783. }
  1784. .postbox .handle-order-higher[aria-disabled="true"],
  1785. .postbox .handle-order-lower[aria-disabled="true"] {
  1786. cursor: default;
  1787. color: #a7aaad;
  1788. }
  1789. .sortable-placeholder {
  1790. border: 1px dashed #c3c4c7;
  1791. margin-bottom: 20px;
  1792. }
  1793. .postbox,
  1794. .stuffbox {
  1795. margin-bottom: 20px;
  1796. padding: 0;
  1797. line-height: 1;
  1798. }
  1799. .postbox.closed {
  1800. border-bottom: 0;
  1801. }
  1802. /* user-select is not a part of the CSS standard - may change behavior in the future */
  1803. .postbox .hndle,
  1804. .stuffbox .hndle {
  1805. -webkit-user-select: none;
  1806. user-select: none;
  1807. }
  1808. .postbox .inside {
  1809. padding: 0 12px 12px;
  1810. line-height: 1.4;
  1811. font-size: 13px;
  1812. }
  1813. .stuffbox .inside {
  1814. padding: 0;
  1815. line-height: 1.4;
  1816. font-size: 13px;
  1817. margin-top: 0;
  1818. }
  1819. .postbox .inside {
  1820. margin: 11px 0;
  1821. position: relative;
  1822. }
  1823. .postbox .inside > p:last-child,
  1824. .rss-widget ul li:last-child {
  1825. margin-bottom: 1px !important;
  1826. }
  1827. .postbox.closed h3 {
  1828. border: none;
  1829. box-shadow: none;
  1830. }
  1831. .postbox table.form-table {
  1832. margin-bottom: 0;
  1833. }
  1834. .postbox table.widefat {
  1835. box-shadow: none;
  1836. }
  1837. .temp-border {
  1838. border: 1px dotted #c3c4c7;
  1839. }
  1840. .columns-prefs label {
  1841. padding: 0 10px 0 0;
  1842. }
  1843. /* @todo: what is this doing here */
  1844. #dashboard_right_now .versions .b,
  1845. #post-status-display,
  1846. #post-visibility-display,
  1847. #adminmenu .wp-submenu li.current,
  1848. #adminmenu .wp-submenu li.current a,
  1849. #adminmenu .wp-submenu li.current a:hover,
  1850. .media-item .percent,
  1851. .plugins .name,
  1852. #pass-strength-result.strong,
  1853. #pass-strength-result.short,
  1854. #ed_reply_toolbar #ed_reply_strong,
  1855. .item-controls .item-order a,
  1856. .feature-filter .feature-name,
  1857. #comment-status-display {
  1858. font-weight: 600;
  1859. }
  1860. /*------------------------------------------------------------------------------
  1861. 21.0 - Admin Footer
  1862. ------------------------------------------------------------------------------*/
  1863. #wpfooter {
  1864. position: absolute;
  1865. bottom: 0;
  1866. left: 0;
  1867. right: 0;
  1868. padding: 10px 20px;
  1869. color: #50575e;
  1870. }
  1871. #wpfooter p {
  1872. font-size: 13px;
  1873. margin: 0;
  1874. line-height: 1.55;
  1875. }
  1876. #footer-thankyou {
  1877. font-style: italic;
  1878. }
  1879. /*------------------------------------------------------------------------------
  1880. 25.0 - Tabbed Admin Screen Interface (Experimental)
  1881. ------------------------------------------------------------------------------*/
  1882. .nav-tab {
  1883. float: left;
  1884. border: 1px solid #c3c4c7;
  1885. border-bottom: none;
  1886. margin-left: 0.5em; /* half the font size so set the font size properly */
  1887. padding: 5px 10px;
  1888. font-size: 14px;
  1889. line-height: 1.71428571;
  1890. font-weight: 600;
  1891. background: #dcdcde;
  1892. color: #50575e;
  1893. text-decoration: none;
  1894. white-space: nowrap;
  1895. }
  1896. h3 .nav-tab, /* Back-compat for pre-4.4 */
  1897. .nav-tab-small .nav-tab {
  1898. padding: 5px 14px;
  1899. font-size: 12px;
  1900. line-height: 1.33;
  1901. }
  1902. .nav-tab:hover,
  1903. .nav-tab:focus {
  1904. background-color: #fff;
  1905. color: #3c434a;
  1906. }
  1907. .nav-tab-active,
  1908. .nav-tab:focus:active {
  1909. box-shadow: none;
  1910. }
  1911. .nav-tab-active {
  1912. margin-bottom: -1px;
  1913. color: #3c434a;
  1914. }
  1915. .nav-tab-active,
  1916. .nav-tab-active:hover,
  1917. .nav-tab-active:focus,
  1918. .nav-tab-active:focus:active {
  1919. border-bottom: 1px solid #f0f0f1;
  1920. background: #f0f0f1;
  1921. color: #000;
  1922. }
  1923. h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
  1924. .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
  1925. .nav-tab-wrapper {
  1926. border-bottom: 1px solid #c3c4c7;
  1927. margin: 0;
  1928. padding-top: 9px;
  1929. padding-bottom: 0;
  1930. line-height: inherit;
  1931. }
  1932. /* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */
  1933. .nav-tab-wrapper:not(.wp-clearfix):after {
  1934. content: "";
  1935. display: table;
  1936. clear: both;
  1937. }
  1938. /*------------------------------------------------------------------------------
  1939. 26.0 - Misc
  1940. ------------------------------------------------------------------------------*/
  1941. .spinner {
  1942. background: url(../images/spinner.gif) no-repeat;
  1943. background-size: 20px 20px;
  1944. display: inline-block;
  1945. visibility: hidden;
  1946. float: right;
  1947. vertical-align: middle;
  1948. opacity: 0.7;
  1949. filter: alpha(opacity=70);
  1950. width: 20px;
  1951. height: 20px;
  1952. margin: 4px 10px 0;
  1953. }
  1954. .spinner.is-active,
  1955. .loading-content .spinner {
  1956. visibility: visible;
  1957. }
  1958. #template > div {
  1959. margin-right: 16em;
  1960. }
  1961. #template .notice {
  1962. margin-top: 1em;
  1963. margin-right: 3%;
  1964. }
  1965. #template .notice p {
  1966. width: auto;
  1967. }
  1968. #template .submit .spinner {
  1969. float: none;
  1970. }
  1971. .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
  1972. .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
  1973. .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
  1974. .metabox-holder h2.hndle {
  1975. font-size: 14px;
  1976. padding: 8px 12px;
  1977. margin: 0;
  1978. line-height: 1.4;
  1979. }
  1980. /* Back-compat for nav-menus screen */
  1981. .nav-menus-php .metabox-holder h3 {
  1982. padding: 10px 10px 11px 14px;
  1983. line-height: 1.5;
  1984. }
  1985. #templateside ul li a {
  1986. text-decoration: none;
  1987. }
  1988. .plugin-install #description,
  1989. .plugin-install-network #description {
  1990. width: 60%;
  1991. }
  1992. table .vers,
  1993. table .column-visible,
  1994. table .column-rating {
  1995. text-align: left;
  1996. }
  1997. .attention,
  1998. .error-message {
  1999. color: #d63638;
  2000. font-weight: 600;
  2001. }
  2002. /* Scrollbar fix for bulk upgrade iframe */
  2003. body.iframe {
  2004. height: 98%;
  2005. }
  2006. /* Upgrader styles, Specific to Language Packs */
  2007. .lp-show-latest p {
  2008. display: none;
  2009. }
  2010. .lp-show-latest p:last-child,
  2011. .lp-show-latest .lp-error p {
  2012. display: block;
  2013. }
  2014. /* - Only used once or twice in all of WP - deprecate for global style
  2015. ------------------------------------------------------------------------------*/
  2016. .media-icon {
  2017. width: 62px; /* icon + border */
  2018. text-align: center;
  2019. }
  2020. .media-icon img {
  2021. border: 1px solid #dcdcde;
  2022. border: 1px solid rgba(0, 0, 0, 0.07);
  2023. }
  2024. #howto {
  2025. font-size: 11px;
  2026. margin: 0 5px;
  2027. display: block;
  2028. }
  2029. .importers {
  2030. font-size: 16px;
  2031. width: auto;
  2032. }
  2033. .importers td {
  2034. padding-right: 14px;
  2035. line-height: 1.4;
  2036. }
  2037. .importers .import-system {
  2038. max-width: 250px;
  2039. }
  2040. .importers td.desc {
  2041. max-width: 500px;
  2042. }
  2043. .importer-title,
  2044. .importer-desc,
  2045. .importer-action {
  2046. display: block;
  2047. }
  2048. .importer-title {
  2049. color: #000;
  2050. font-size: 14px;
  2051. font-weight: 400;
  2052. margin-bottom: .2em;
  2053. }
  2054. .importer-action {
  2055. line-height: 1.55; /* Same as with .updating-message */
  2056. color: #50575e;
  2057. margin-bottom: 1em;
  2058. }
  2059. #post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */
  2060. #post-body #post-body-content #namediv h2 {
  2061. margin-top: 0;
  2062. }
  2063. .edit-comment-author {
  2064. color: #1d2327;
  2065. border-bottom: 1px solid #f0f0f1;
  2066. }
  2067. #namediv h3 label, /* Back-compat for pre-4.4 */
  2068. #namediv h2 label {
  2069. vertical-align: baseline;
  2070. }
  2071. #namediv table {
  2072. width: 100%;
  2073. }
  2074. #namediv td.first {
  2075. width: 10px;
  2076. white-space: nowrap;
  2077. }
  2078. #namediv input {
  2079. width: 100%;
  2080. }
  2081. #namediv p {
  2082. margin: 10px 0;
  2083. }
  2084. /* - Used - but could/should be deprecated with a CSS reset
  2085. ------------------------------------------------------------------------------*/
  2086. .zerosize {
  2087. height: 0;
  2088. width: 0;
  2089. margin: 0;
  2090. border: 0;
  2091. padding: 0;
  2092. overflow: hidden;
  2093. position: absolute;
  2094. }
  2095. br.clear {
  2096. height: 2px;
  2097. line-height: 0.15;
  2098. }
  2099. .checkbox {
  2100. border: none;
  2101. margin: 0;
  2102. padding: 0;
  2103. }
  2104. fieldset {
  2105. border: 0;
  2106. padding: 0;
  2107. margin: 0;
  2108. }
  2109. .post-categories {
  2110. display: inline;
  2111. margin: 0;
  2112. padding: 0;
  2113. }
  2114. .post-categories li {
  2115. display: inline;
  2116. }
  2117. /* Star Ratings - Back-compat for pre-3.8 */
  2118. div.star-holder {
  2119. position: relative;
  2120. height: 17px;
  2121. width: 100px;
  2122. background: url(../images/stars.png?ver=20121108) repeat-x bottom left;
  2123. }
  2124. div.star-holder .star-rating {
  2125. background: url(../images/stars.png?ver=20121108) repeat-x top left;
  2126. height: 17px;
  2127. float: left;
  2128. }
  2129. /* Star Ratings */
  2130. .star-rating {
  2131. white-space: nowrap;
  2132. }
  2133. .star-rating .star {
  2134. display: inline-block;
  2135. width: 20px;
  2136. height: 20px;
  2137. -webkit-font-smoothing: antialiased;
  2138. font-size: 20px;
  2139. line-height: 1;
  2140. font-family: dashicons;
  2141. text-decoration: inherit;
  2142. font-weight: 400;
  2143. font-style: normal;
  2144. vertical-align: top;
  2145. transition: color .1s ease-in;
  2146. text-align: center;
  2147. color: #dba617;
  2148. }
  2149. .star-rating .star-full:before {
  2150. content: "\f155";
  2151. }
  2152. .star-rating .star-half:before {
  2153. content: "\f459";
  2154. }
  2155. .rtl .star-rating .star-half {
  2156. transform: rotateY(180deg);
  2157. }
  2158. .star-rating .star-empty:before {
  2159. content: "\f154";
  2160. }
  2161. div.action-links {
  2162. font-weight: 400;
  2163. margin: 6px 0 0;
  2164. }
  2165. /* Plugin install thickbox */
  2166. #plugin-information {
  2167. background: #fff;
  2168. position: fixed;
  2169. top: 0;
  2170. right: 0;
  2171. bottom: 0;
  2172. left: 0;
  2173. height: 100%;
  2174. padding: 0;
  2175. }
  2176. #plugin-information-scrollable {
  2177. overflow: auto;
  2178. -webkit-overflow-scrolling: touch;
  2179. height: 100%;
  2180. }
  2181. #plugin-information-title {
  2182. padding: 0 26px;
  2183. background: #f6f7f7;
  2184. font-size: 22px;
  2185. font-weight: 600;
  2186. line-height: 2.4;
  2187. position: relative;
  2188. height: 56px;
  2189. }
  2190. #plugin-information-title.with-banner {
  2191. margin-right: 0;
  2192. height: 250px;
  2193. background-size: cover;
  2194. }
  2195. #plugin-information-title h2 {
  2196. font-size: 1em;
  2197. font-weight: 600;
  2198. padding: 0;
  2199. margin: 0;
  2200. overflow: hidden;
  2201. text-overflow: ellipsis;
  2202. white-space: nowrap;
  2203. }
  2204. #plugin-information-title.with-banner h2 {
  2205. position: relative;
  2206. font-family: "Helvetica Neue", sans-serif;
  2207. display: inline-block;
  2208. font-size: 30px;
  2209. line-height: 1.68;
  2210. box-sizing: border-box;
  2211. max-width: 100%;
  2212. padding: 0 15px;
  2213. margin-top: 174px;
  2214. color: #fff;
  2215. background: rgba(29, 35, 39, 0.9);
  2216. text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  2217. box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
  2218. border-radius: 8px;
  2219. }
  2220. #plugin-information-title div.vignette {
  2221. display: none;
  2222. }
  2223. #plugin-information-title.with-banner div.vignette {
  2224. position: absolute;
  2225. display: block;
  2226. top: 0;
  2227. left: 0;
  2228. height: 250px;
  2229. width: 100%;
  2230. background: transparent;
  2231. box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  2232. }
  2233. #plugin-information-tabs {
  2234. padding: 0 16px;
  2235. position: relative;
  2236. right: 0;
  2237. left: 0;
  2238. min-height: 36px;
  2239. font-size: 0;
  2240. z-index: 1;
  2241. border-bottom: 1px solid #dcdcde;
  2242. background: #f6f7f7;
  2243. }
  2244. #plugin-information-tabs a {
  2245. position: relative;
  2246. display: inline-block;
  2247. padding: 9px 10px;
  2248. margin: 0;
  2249. height: 18px;
  2250. line-height: 1.3;
  2251. font-size: 14px;
  2252. text-decoration: none;
  2253. transition: none;
  2254. }
  2255. #plugin-information-tabs a.current {
  2256. margin: 0 -1px -1px;
  2257. background: #fff;
  2258. border: 1px solid #dcdcde;
  2259. border-bottom-color: #fff;
  2260. padding-top: 8px;
  2261. color: #2c3338;
  2262. }
  2263. #plugin-information-tabs.with-banner a.current {
  2264. border-top: none;
  2265. padding-top: 9px;
  2266. }
  2267. #plugin-information-tabs a:active,
  2268. #plugin-information-tabs a:focus {
  2269. outline: none;
  2270. }
  2271. #plugin-information-content {
  2272. overflow: hidden; /* equal height column trick */
  2273. background: #fff;
  2274. position: relative;
  2275. top: 0;
  2276. right: 0;
  2277. left: 0;
  2278. min-height: 100%;
  2279. /* Height of title + tabs + install now */
  2280. min-height: calc( 100% - 152px );
  2281. }
  2282. #plugin-information-content.with-banner {
  2283. /* Height of banner + tabs + install now */
  2284. min-height: calc( 100% - 346px );
  2285. }
  2286. #section-holder {
  2287. position: relative;
  2288. top: 0;
  2289. right: 250px;
  2290. bottom: 0;
  2291. left: 0;
  2292. margin-top: 10px;
  2293. margin-right: 250px; /* FYI box */
  2294. padding: 10px 26px 99999px; /* equal height column trick */
  2295. margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
  2296. }
  2297. #section-holder .notice {
  2298. margin: 5px 0 15px;
  2299. }
  2300. #section-holder .updated {
  2301. margin: 16px 0;
  2302. }
  2303. #plugin-information .fyi {
  2304. float: right;
  2305. position: relative;
  2306. top: 0;
  2307. right: 0;
  2308. padding: 16px 16px 99999px; /* equal height column trick */
  2309. margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
  2310. width: 217px;
  2311. border-left: 1px solid #dcdcde;
  2312. background: #f6f7f7;
  2313. color: #646970;
  2314. }
  2315. #plugin-information .fyi strong {
  2316. color: #3c434a;
  2317. }
  2318. #plugin-information .fyi h3 {
  2319. font-weight: 600;
  2320. text-transform: uppercase;
  2321. font-size: 12px;
  2322. color: #646970;
  2323. margin: 24px 0 8px;
  2324. }
  2325. #plugin-information .fyi h2 {
  2326. font-size: 0.9em;
  2327. margin-bottom: 0;
  2328. margin-right: 0;
  2329. }
  2330. #plugin-information .fyi ul {
  2331. padding: 0;
  2332. margin: 0;
  2333. list-style: none;
  2334. }
  2335. #plugin-information .fyi li {
  2336. margin: 0 0 10px;
  2337. }
  2338. #plugin-information .fyi-description {
  2339. margin-top: 0;
  2340. }
  2341. #plugin-information .counter-container {
  2342. margin: 3px 0;
  2343. }
  2344. #plugin-information .counter-label {
  2345. float: left;
  2346. margin-right: 5px;
  2347. min-width: 55px;
  2348. }
  2349. #plugin-information .counter-back {
  2350. height: 17px;
  2351. width: 92px;
  2352. background-color: #dcdcde;
  2353. float: left;
  2354. }
  2355. #plugin-information .counter-bar {
  2356. height: 17px;
  2357. background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
  2358. float: left;
  2359. }
  2360. #plugin-information .counter-count {
  2361. margin-left: 5px;
  2362. }
  2363. #plugin-information .fyi ul.contributors {
  2364. margin-top: 10px;
  2365. }
  2366. #plugin-information .fyi ul.contributors li {
  2367. display: inline-block;
  2368. margin-right: 8px;
  2369. vertical-align: middle;
  2370. }
  2371. #plugin-information .fyi ul.contributors li {
  2372. display: inline-block;
  2373. margin-right: 8px;
  2374. vertical-align: middle;
  2375. }
  2376. #plugin-information .fyi ul.contributors li img {
  2377. vertical-align: middle;
  2378. margin-right: 4px;
  2379. }
  2380. #plugin-information-footer {
  2381. padding: 13px 16px;
  2382. position: absolute;
  2383. right: 0;
  2384. bottom: 0;
  2385. left: 0;
  2386. height: 40px; /* actual height: 40+13+13+1=67 */
  2387. border-top: 1px solid #dcdcde;
  2388. background: #f6f7f7;
  2389. }
  2390. /* rtl:ignore */
  2391. #plugin-information .section {
  2392. direction: ltr;
  2393. }
  2394. /* rtl:ignore */
  2395. #plugin-information .section ul,
  2396. #plugin-information .section ol {
  2397. list-style-type: disc;
  2398. margin-left: 24px;
  2399. }
  2400. #plugin-information .section,
  2401. #plugin-information .section p {
  2402. font-size: 14px;
  2403. line-height: 1.7;
  2404. }
  2405. #plugin-information #section-screenshots ol {
  2406. list-style: none;
  2407. margin: 0;
  2408. }
  2409. #plugin-information #section-screenshots li img {
  2410. vertical-align: text-top;
  2411. margin-top: 16px;
  2412. max-width: 100%;
  2413. width: auto;
  2414. height: auto;
  2415. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  2416. }
  2417. /* rtl:ignore */
  2418. #plugin-information #section-screenshots li p {
  2419. font-style: italic;
  2420. padding-left: 20px;
  2421. }
  2422. #plugin-information pre {
  2423. padding: 7px;
  2424. overflow: auto;
  2425. border: 1px solid #c3c4c7;
  2426. }
  2427. #plugin-information blockquote {
  2428. border-left: 2px solid #dcdcde;
  2429. color: #646970;
  2430. font-style: italic;
  2431. margin: 1em 0;
  2432. padding: 0 0 0 1em;
  2433. }
  2434. /* rtl:ignore */
  2435. #plugin-information .review {
  2436. overflow: hidden; /* clearfix */
  2437. width: 100%;
  2438. margin-bottom: 20px;
  2439. border-bottom: 1px solid #dcdcde;
  2440. }
  2441. #plugin-information .review-title-section {
  2442. overflow: hidden; /* clearfix */
  2443. }
  2444. /* rtl:ignore */
  2445. #plugin-information .review-title-section h4 {
  2446. display: inline-block;
  2447. float: left;
  2448. margin: 0 6px 0 0;
  2449. }
  2450. #plugin-information .reviewer-info p {
  2451. clear: both;
  2452. margin: 0;
  2453. padding-top: 2px;
  2454. }
  2455. /* rtl:ignore */
  2456. #plugin-information .reviewer-info .avatar {
  2457. float: left;
  2458. margin: 4px 6px 0 0;
  2459. }
  2460. /* rtl:ignore */
  2461. #plugin-information .reviewer-info .star-rating {
  2462. float: left;
  2463. }
  2464. /* rtl:ignore */
  2465. #plugin-information .review-meta {
  2466. float: left;
  2467. margin-left: 0.75em;
  2468. }
  2469. /* rtl:ignore */
  2470. #plugin-information .review-body {
  2471. float: left;
  2472. width: 100%;
  2473. }
  2474. .plugin-version-author-uri {
  2475. font-size: 13px;
  2476. }
  2477. /* For non-js plugin installation screen ticket #36430. */
  2478. .update-php .button.button-primary {
  2479. margin-right: 1em;
  2480. }
  2481. @media screen and (max-width: 771px) {
  2482. #plugin-information-title.with-banner {
  2483. height: 100px;
  2484. }
  2485. #plugin-information-title.with-banner h2 {
  2486. margin-top: 30px;
  2487. font-size: 20px;
  2488. line-height: 2;
  2489. max-width: 85%;
  2490. }
  2491. #plugin-information-title.with-banner div.vignette {
  2492. height: 100px;
  2493. }
  2494. #plugin-information-tabs {
  2495. overflow: hidden; /* clearfix */
  2496. padding: 0;
  2497. height: auto; /* let tabs wrap */
  2498. }
  2499. #plugin-information-tabs a.current {
  2500. margin-bottom: 0;
  2501. border-bottom: none;
  2502. }
  2503. #plugin-information .fyi {
  2504. float: none;
  2505. border: 1px solid #dcdcde;
  2506. position: static;
  2507. width: auto;
  2508. margin: 26px 26px 0;
  2509. padding-bottom: 0; /* reset from the two column height fix */
  2510. }
  2511. #section-holder {
  2512. position: static;
  2513. margin: 0;
  2514. padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */
  2515. }
  2516. #plugin-information .fyi h3,
  2517. #plugin-information .fyi small {
  2518. display: none;
  2519. }
  2520. #plugin-information-footer {
  2521. padding: 12px 16px 0;
  2522. height: 46px;
  2523. }
  2524. }
  2525. /* Thickbox for the Plugin details modal. */
  2526. #TB_window.plugin-details-modal {
  2527. background: #fff;
  2528. }
  2529. #TB_window.plugin-details-modal.thickbox-loading:before {
  2530. content: "";
  2531. display: block;
  2532. width: 20px;
  2533. height: 20px;
  2534. position: absolute;
  2535. left: 50%;
  2536. top: 50%;
  2537. z-index: -1;
  2538. margin: -10px 0 0 -10px;
  2539. background: #fff url(../images/spinner.gif) no-repeat center;
  2540. background-size: 20px 20px;
  2541. transform: translateZ(0);
  2542. }
  2543. @media print,
  2544. (-webkit-min-device-pixel-ratio: 1.25),
  2545. (min-resolution: 120dpi) {
  2546. #TB_window.plugin-details-modal.thickbox-loading:before {
  2547. background-image: url(../images/spinner-2x.gif);
  2548. }
  2549. }
  2550. .plugin-details-modal #TB_title {
  2551. float: left;
  2552. height: 1px;
  2553. }
  2554. .plugin-details-modal #TB_ajaxWindowTitle {
  2555. display: none;
  2556. }
  2557. .plugin-details-modal #TB_closeWindowButton {
  2558. left: auto;
  2559. right: -30px;
  2560. color: #f0f0f1;
  2561. }
  2562. .plugin-details-modal #TB_closeWindowButton:hover,
  2563. .plugin-details-modal #TB_closeWindowButton:focus {
  2564. outline: none;
  2565. box-shadow: none;
  2566. }
  2567. .plugin-details-modal #TB_closeWindowButton:hover::after,
  2568. .plugin-details-modal #TB_closeWindowButton:focus::after {
  2569. outline: 2px solid;
  2570. outline-offset: -4px;
  2571. border-radius: 4px;
  2572. }
  2573. .plugin-details-modal .tb-close-icon {
  2574. display: none;
  2575. }
  2576. .plugin-details-modal #TB_closeWindowButton:after {
  2577. content: "\f335";
  2578. font: normal 32px/29px 'dashicons';
  2579. speak: never;
  2580. -webkit-font-smoothing: antialiased;
  2581. -moz-osx-font-smoothing: grayscale;
  2582. }
  2583. /* move plugin install close icon to top on narrow screens */
  2584. @media screen and (max-width: 830px) {
  2585. .plugin-details-modal #TB_closeWindowButton {
  2586. right: 0;
  2587. top: -30px;
  2588. }
  2589. }
  2590. /* @todo: move this. */
  2591. img {
  2592. border: none;
  2593. }
  2594. /* Metabox collapse arrow indicators */
  2595. .sidebar-name .toggle-indicator::before,
  2596. .meta-box-sortables .postbox .toggle-indicator::before,
  2597. .meta-box-sortables .postbox .order-higher-indicator::before,
  2598. .meta-box-sortables .postbox .order-lower-indicator::before,
  2599. .bulk-action-notice .toggle-indicator::before,
  2600. .privacy-text-box .toggle-indicator::before {
  2601. content: "\f142";
  2602. display: inline-block;
  2603. font: normal 20px/1 dashicons;
  2604. speak: never;
  2605. -webkit-font-smoothing: antialiased;
  2606. -moz-osx-font-smoothing: grayscale;
  2607. text-decoration: none;
  2608. }
  2609. .js .widgets-holder-wrap.closed .toggle-indicator::before,
  2610. .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
  2611. .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
  2612. .privacy-text-box.closed .toggle-indicator::before {
  2613. content: "\f140";
  2614. }
  2615. .postbox .handle-order-higher .order-higher-indicator::before {
  2616. content: "\f343";
  2617. color: inherit;
  2618. }
  2619. .postbox .handle-order-lower .order-lower-indicator::before {
  2620. content: "\f347";
  2621. color: inherit;
  2622. }
  2623. .postbox .handle-order-higher .order-higher-indicator::before,
  2624. .postbox .handle-order-lower .order-lower-indicator::before {
  2625. position: relative;
  2626. top: 0.11rem;
  2627. width: 20px;
  2628. height: 20px;
  2629. }
  2630. .postbox .handlediv .toggle-indicator::before {
  2631. width: 20px;
  2632. border-radius: 50%;
  2633. }
  2634. .postbox .handlediv .toggle-indicator::before {
  2635. position: relative;
  2636. top: 0.05rem;
  2637. text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
  2638. }
  2639. .rtl .postbox .handlediv .toggle-indicator::before {
  2640. text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
  2641. }
  2642. .bulk-action-notice .toggle-indicator::before {
  2643. line-height: 16px;
  2644. vertical-align: top;
  2645. color: #787c82;
  2646. }
  2647. .postbox .handle-order-higher:focus,
  2648. .postbox .handle-order-lower:focus,
  2649. .postbox .handlediv:focus {
  2650. box-shadow:
  2651. 0 0 0 1px #4f94d4,
  2652. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  2653. /* Only visible in Windows High Contrast mode */
  2654. outline: 1px solid transparent;
  2655. }
  2656. .postbox .handle-order-higher:focus .order-higher-indicator::before,
  2657. .postbox .handle-order-lower:focus .order-lower-indicator::before,
  2658. .postbox .handlediv:focus .toggle-indicator::before {
  2659. box-shadow: none;
  2660. /* Only visible in Windows High Contrast mode */
  2661. outline: 1px solid transparent;
  2662. }
  2663. /* @todo: appears to be Press This only and overridden */
  2664. #photo-add-url-div input[type="text"] {
  2665. width: 300px;
  2666. }
  2667. /* Theme/Plugin file editor */
  2668. .alignleft h2 {
  2669. margin: 0;
  2670. }
  2671. #template textarea {
  2672. font-family: Consolas, Monaco, monospace;
  2673. font-size: 13px;
  2674. background: #f6f7f7;
  2675. -o-tab-size: 4;
  2676. tab-size: 4;
  2677. }
  2678. #template textarea,
  2679. #template .CodeMirror {
  2680. width: 100%;
  2681. min-height: 60vh;
  2682. height: calc( 100vh - 295px );
  2683. border: 1px solid #dcdcde;
  2684. box-sizing: border-box;
  2685. }
  2686. #templateside > h2 {
  2687. padding-top: 6px;
  2688. padding-bottom: 7px;
  2689. margin: 0;
  2690. }
  2691. #templateside ol,
  2692. #templateside ul {
  2693. margin: 0;
  2694. padding: 0;
  2695. }
  2696. #templateside > ul {
  2697. box-sizing: border-box;
  2698. margin-top: 0;
  2699. overflow: auto;
  2700. padding: 0;
  2701. min-height: 60vh;
  2702. height: calc(100vh - 295px);
  2703. background-color: #f6f7f7;
  2704. border: 1px solid #dcdcde;
  2705. border-left: none;
  2706. }
  2707. #templateside ul ul {
  2708. padding-left: 12px;
  2709. }
  2710. #templateside > ul > li > ul[role=group] {
  2711. padding-left: 0;
  2712. }
  2713. /*
  2714. * Styles for Theme and Plugin file editors.
  2715. */
  2716. /* Hide collapsed items. */
  2717. [role="treeitem"][aria-expanded="false"] > ul {
  2718. display: none;
  2719. }
  2720. /* Use arrow dashicons for folder states, but hide from screen readers. */
  2721. [role="treeitem"] span[aria-hidden] {
  2722. display: inline;
  2723. font-family: dashicons;
  2724. font-size: 20px;
  2725. position: absolute;
  2726. pointer-events: none;
  2727. }
  2728. [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
  2729. content: "\f139";
  2730. }
  2731. [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
  2732. content: "\f140";
  2733. }
  2734. [role="treeitem"] .folder-label {
  2735. display: block;
  2736. padding: 3px 3px 3px 12px;
  2737. cursor: pointer;
  2738. }
  2739. /* Remove outline, and create our own focus and hover styles */
  2740. [role="treeitem"] {
  2741. outline: 0;
  2742. }
  2743. [role="treeitem"] .folder-label.focus {
  2744. color: #043959;
  2745. box-shadow:
  2746. 0 0 0 1px #4f94d4,
  2747. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  2748. }
  2749. [role="treeitem"].hover,
  2750. [role="treeitem"] .folder-label.hover {
  2751. background-color: #f0f0f1;
  2752. }
  2753. .tree-folder {
  2754. margin: 0;
  2755. position: relative;
  2756. }
  2757. [role="treeitem"] li {
  2758. position: relative;
  2759. }
  2760. /* Styles for folder indicators/depth */
  2761. .tree-folder .tree-folder::after {
  2762. content: "";
  2763. display: block;
  2764. position: absolute;
  2765. left: 2px;
  2766. border-left: 1px solid #c3c4c7;
  2767. top: -13px;
  2768. bottom: 10px;
  2769. }
  2770. .tree-folder > li::before {
  2771. content: "";
  2772. position: absolute;
  2773. display: block;
  2774. border-left: 1px solid #c3c4c7;
  2775. left: 2px;
  2776. top: -5px;
  2777. height: 18px;
  2778. width: 7px;
  2779. border-bottom: 1px solid #c3c4c7;
  2780. }
  2781. .tree-folder > li::after {
  2782. content: "";
  2783. position: absolute;
  2784. display: block;
  2785. border-left: 1px solid #c3c4c7;
  2786. left: 2px;
  2787. bottom: -7px;
  2788. top: 0;
  2789. }
  2790. /* current-file needs to adjustment for .notice styles */
  2791. #templateside .current-file {
  2792. margin: -4px 0 -2px;
  2793. }
  2794. .tree-folder > .current-file::before {
  2795. left: 4px;
  2796. height: 15px;
  2797. width: 0;
  2798. border-left: none;
  2799. top: 3px;
  2800. }
  2801. .tree-folder > .current-file::after {
  2802. bottom: -4px;
  2803. height: 7px;
  2804. left: 2px;
  2805. top: auto;
  2806. }
  2807. /* Lines shouldn't continue on last item */
  2808. .tree-folder > li:last-child::after,
  2809. .tree-folder li:last-child > .tree-folder::after {
  2810. display: none;
  2811. }
  2812. #theme-plugin-editor-selector,
  2813. #theme-plugin-editor-label,
  2814. #documentation label {
  2815. font-weight: 600;
  2816. }
  2817. #theme-plugin-editor-label {
  2818. display: inline-block;
  2819. margin-bottom: 1em;
  2820. }
  2821. /* rtl:ignore */
  2822. #template textarea,
  2823. #docs-list {
  2824. direction: ltr;
  2825. }
  2826. .fileedit-sub #theme,
  2827. .fileedit-sub #plugin {
  2828. max-width: 40%;
  2829. }
  2830. .fileedit-sub .alignright {
  2831. text-align: right;
  2832. }
  2833. #template p {
  2834. width: 97%;
  2835. }
  2836. #file-editor-linting-error {
  2837. margin-top: 1em;
  2838. margin-bottom: 1em;
  2839. }
  2840. #file-editor-linting-error > .notice {
  2841. margin: 0;
  2842. display: inline-block;
  2843. }
  2844. #file-editor-linting-error > .notice > p {
  2845. width: auto;
  2846. }
  2847. #template .submit {
  2848. margin-top: 1em;
  2849. padding: 0;
  2850. }
  2851. #template .submit input[type=submit][disabled] {
  2852. cursor: not-allowed;
  2853. }
  2854. #templateside {
  2855. float: right;
  2856. width: 16em;
  2857. word-wrap: break-word;
  2858. }
  2859. #postcustomstuff p.submit {
  2860. margin: 0;
  2861. }
  2862. #templateside h4 {
  2863. margin: 1em 0 0;
  2864. }
  2865. #templateside li {
  2866. margin: 4px 0;
  2867. }
  2868. #templateside li:not(.howto) a,
  2869. .theme-editor-php .highlight {
  2870. display: block;
  2871. padding: 3px 0 3px 12px;
  2872. text-decoration: none;
  2873. }
  2874. #templateside li:not(.howto) > a:first-of-type {
  2875. padding-top: 0;
  2876. }
  2877. #templateside li.howto {
  2878. padding: 6px 12px 12px;
  2879. }
  2880. .theme-editor-php .highlight {
  2881. margin: -3px 3px -3px -12px;
  2882. }
  2883. #templateside .highlight {
  2884. border: none;
  2885. font-weight: 600;
  2886. }
  2887. .nonessential {
  2888. color: #646970;
  2889. font-size: 11px;
  2890. font-style: italic;
  2891. padding-left: 12px;
  2892. }
  2893. #documentation {
  2894. margin-top: 10px;
  2895. }
  2896. #documentation label {
  2897. line-height: 1.8;
  2898. vertical-align: baseline;
  2899. }
  2900. .fileedit-sub {
  2901. padding: 10px 0 8px;
  2902. line-height: 180%;
  2903. }
  2904. #file-editor-warning .file-editor-warning-content {
  2905. margin: 25px;
  2906. }
  2907. /* @todo: can we use a common class for these? */
  2908. .nav-menus-php .item-edit:before,
  2909. .widget-top .widget-action .toggle-indicator:before,
  2910. .control-section .accordion-section-title:after,
  2911. .accordion-section-title:after {
  2912. content: "\f140";
  2913. font: normal 20px/1 dashicons;
  2914. speak: never;
  2915. display: block;
  2916. -webkit-font-smoothing: antialiased;
  2917. -moz-osx-font-smoothing: grayscale;
  2918. text-decoration: none;
  2919. }
  2920. .widget-top .widget-action .toggle-indicator:before {
  2921. padding: 1px 2px 1px 0;
  2922. border-radius: 50%;
  2923. }
  2924. .handlediv,
  2925. .postbox .handlediv.button-link,
  2926. .item-edit,
  2927. .toggle-indicator,
  2928. .accordion-section-title:after {
  2929. color: #787c82;
  2930. }
  2931. .widget-action {
  2932. color: #50575e; /* #fafafa background in the Widgets screen */
  2933. }
  2934. .widget-top:hover .widget-action,
  2935. .widget-action:focus,
  2936. .handlediv:hover,
  2937. .handlediv:focus,
  2938. .postbox .handlediv.button-link:hover,
  2939. .postbox .handlediv.button-link:focus,
  2940. .item-edit:hover,
  2941. .item-edit:focus,
  2942. .sidebar-name:hover .toggle-indicator,
  2943. .accordion-section-title:hover:after {
  2944. color: #1d2327;
  2945. /* Only visible in Windows High Contrast mode */
  2946. outline: 1px solid transparent;
  2947. }
  2948. .widget-top .widget-action:focus .toggle-indicator:before {
  2949. box-shadow:
  2950. 0 0 0 1px #4f94d4,
  2951. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  2952. }
  2953. .control-section .accordion-section-title:after,
  2954. .accordion-section-title:after {
  2955. float: right;
  2956. right: 20px;
  2957. top: -2px;
  2958. }
  2959. .control-section.open .accordion-section-title:after,
  2960. #customize-info.open .accordion-section-title:after,
  2961. .nav-menus-php .menu-item-edit-active .item-edit:before,
  2962. .widget.open .widget-top .widget-action .toggle-indicator:before,
  2963. .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
  2964. content: "\f142";
  2965. }
  2966. /*!
  2967. * jQuery UI Draggable/Sortable 1.11.4
  2968. * http://jqueryui.com
  2969. *
  2970. * Copyright jQuery Foundation and other contributors
  2971. * Released under the MIT license.
  2972. * http://jquery.org/license
  2973. */
  2974. .ui-draggable-handle,
  2975. .ui-sortable-handle {
  2976. touch-action: none;
  2977. }
  2978. /* Accordion */
  2979. .accordion-section {
  2980. border-bottom: 1px solid #dcdcde;
  2981. margin: 0;
  2982. }
  2983. .accordion-section.open .accordion-section-content,
  2984. .no-js .accordion-section .accordion-section-content {
  2985. display: block;
  2986. }
  2987. .accordion-section.open:hover {
  2988. border-bottom-color: #dcdcde;
  2989. }
  2990. .accordion-section-content {
  2991. display: none;
  2992. padding: 10px 20px 15px;
  2993. overflow: hidden;
  2994. background: #fff;
  2995. }
  2996. .accordion-section-title {
  2997. margin: 0;
  2998. padding: 12px 15px 15px;
  2999. position: relative;
  3000. border-left: 1px solid #dcdcde;
  3001. border-right: 1px solid #dcdcde;
  3002. -webkit-user-select: none;
  3003. user-select: none;
  3004. }
  3005. .js .accordion-section-title {
  3006. cursor: pointer;
  3007. }
  3008. .js .accordion-section-title:after {
  3009. position: absolute;
  3010. top: 12px;
  3011. right: 10px;
  3012. z-index: 1;
  3013. }
  3014. .accordion-section-title:focus {
  3015. /* Only visible in Windows High Contrast mode */
  3016. outline: 1px solid transparent;
  3017. }
  3018. .accordion-section-title:hover:after,
  3019. .accordion-section-title:focus:after {
  3020. border-color: #a7aaad transparent;
  3021. /* Only visible in Windows High Contrast mode */
  3022. outline: 1px solid transparent;
  3023. }
  3024. .cannot-expand .accordion-section-title {
  3025. cursor: auto;
  3026. }
  3027. .cannot-expand .accordion-section-title:after {
  3028. display: none;
  3029. }
  3030. .control-section .accordion-section-title,
  3031. .customize-pane-child .accordion-section-title {
  3032. border-left: none;
  3033. border-right: none;
  3034. padding: 10px 10px 11px 14px;
  3035. line-height: 1.55;
  3036. background: #fff;
  3037. }
  3038. .control-section .accordion-section-title:after,
  3039. .customize-pane-child .accordion-section-title:after {
  3040. top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
  3041. }
  3042. .js .control-section:hover .accordion-section-title,
  3043. .js .control-section .accordion-section-title:hover,
  3044. .js .control-section.open .accordion-section-title,
  3045. .js .control-section .accordion-section-title:focus {
  3046. color: #1d2327;
  3047. background: #f6f7f7;
  3048. }
  3049. .control-section.open .accordion-section-title {
  3050. /* When expanded */
  3051. border-bottom: 1px solid #dcdcde;
  3052. }
  3053. /* Edit Site */
  3054. .network-admin .edit-site-actions {
  3055. margin-top: 0;
  3056. }
  3057. /* My Sites */
  3058. .my-sites {
  3059. display: block;
  3060. overflow: auto;
  3061. zoom: 1;
  3062. }
  3063. .my-sites li {
  3064. display: block;
  3065. padding: 8px 3%;
  3066. min-height: 130px;
  3067. margin: 0;
  3068. }
  3069. @media only screen and (max-width: 599px) {
  3070. .my-sites li {
  3071. min-height: 0;
  3072. }
  3073. }
  3074. @media only screen and (min-width: 600px) {
  3075. .my-sites.striped li {
  3076. background-color: #fff;
  3077. position: relative;
  3078. }
  3079. .my-sites.striped li:after {
  3080. content: "";
  3081. width: 1px;
  3082. height: 100%;
  3083. position: absolute;
  3084. top: 0;
  3085. right: 0;
  3086. background: #c3c4c7;
  3087. }
  3088. }
  3089. @media only screen and (min-width: 600px) and (max-width: 699px) {
  3090. .my-sites li{
  3091. float: left;
  3092. width: 44%;
  3093. }
  3094. .my-sites.striped li {
  3095. background-color: #fff;
  3096. }
  3097. .my-sites.striped li:nth-of-type(2n+1) {
  3098. clear: left;
  3099. }
  3100. .my-sites.striped li:nth-of-type(2n+2):after {
  3101. content: none;
  3102. }
  3103. .my-sites li:nth-of-type(4n+1),
  3104. .my-sites li:nth-of-type(4n+2) {
  3105. background-color: #f6f7f7;
  3106. }
  3107. }
  3108. @media only screen and (min-width: 700px) and (max-width: 1199px) {
  3109. .my-sites li {
  3110. float: left;
  3111. width: 27.333333%;
  3112. background-color: #fff;
  3113. }
  3114. .my-sites.striped li:nth-of-type(3n+3):after {
  3115. content: none;
  3116. }
  3117. .my-sites li:nth-of-type(6n+1),
  3118. .my-sites li:nth-of-type(6n+2),
  3119. .my-sites li:nth-of-type(6n+3) {
  3120. background-color: #f6f7f7;
  3121. }
  3122. }
  3123. @media only screen and (min-width: 1200px) and (max-width: 1399px) {
  3124. .my-sites li {
  3125. float: left;
  3126. width: 21%;
  3127. padding: 8px 2%;
  3128. background-color: #fff;
  3129. }
  3130. .my-sites.striped li:nth-of-type(4n+1) {
  3131. clear: left;
  3132. }
  3133. .my-sites.striped li:nth-of-type(4n+4):after {
  3134. content: none;
  3135. }
  3136. .my-sites li:nth-of-type(8n+1),
  3137. .my-sites li:nth-of-type(8n+2),
  3138. .my-sites li:nth-of-type(8n+3),
  3139. .my-sites li:nth-of-type(8n+4) {
  3140. background-color: #f6f7f7;
  3141. }
  3142. }
  3143. @media only screen and (min-width: 1400px) and (max-width: 1599px) {
  3144. .my-sites li {
  3145. float: left;
  3146. width: 16%;
  3147. padding: 8px 2%;
  3148. background-color: #fff;
  3149. }
  3150. .my-sites.striped li:nth-of-type(5n+1) {
  3151. clear: left;
  3152. }
  3153. .my-sites.striped li:nth-of-type(5n+5):after {
  3154. content: none;
  3155. }
  3156. .my-sites li:nth-of-type(10n+1),
  3157. .my-sites li:nth-of-type(10n+2),
  3158. .my-sites li:nth-of-type(10n+3),
  3159. .my-sites li:nth-of-type(10n+4),
  3160. .my-sites li:nth-of-type(10n+5) {
  3161. background-color: #f6f7f7;
  3162. }
  3163. }
  3164. @media only screen and (min-width: 1600px) {
  3165. .my-sites li {
  3166. float: left;
  3167. width: 12.666666%;
  3168. padding: 8px 2%;
  3169. background-color: #fff;
  3170. }
  3171. .my-sites.striped li:nth-of-type(6n+1) {
  3172. clear: left;
  3173. }
  3174. .my-sites.striped li:nth-of-type(6n+6):after {
  3175. content: none;
  3176. }
  3177. .my-sites li:nth-of-type(12n+1),
  3178. .my-sites li:nth-of-type(12n+2),
  3179. .my-sites li:nth-of-type(12n+3),
  3180. .my-sites li:nth-of-type(12n+4),
  3181. .my-sites li:nth-of-type(12n+5),
  3182. .my-sites li:nth-of-type(12n+6) {
  3183. background-color: #f6f7f7;
  3184. }
  3185. }
  3186. .my-sites li a {
  3187. text-decoration: none;
  3188. }
  3189. /* =Media Queries
  3190. -------------------------------------------------------------- */
  3191. /**
  3192. * HiDPI Displays
  3193. */
  3194. @media print,
  3195. (-webkit-min-device-pixel-ratio: 1.25),
  3196. (min-resolution: 120dpi) {
  3197. /* Back-compat for pre-3.8 */
  3198. div.star-holder,
  3199. div.star-holder .star-rating {
  3200. background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left;
  3201. background-size: 21px 37px;
  3202. }
  3203. .spinner {
  3204. background-image: url(../images/spinner-2x.gif);
  3205. }
  3206. }
  3207. @media screen and (max-width: 782px) {
  3208. html.wp-toolbar {
  3209. padding-top: 46px;
  3210. }
  3211. .screen-reader-shortcut:focus {
  3212. top: -39px;
  3213. }
  3214. body {
  3215. min-width: 240px;
  3216. overflow-x: hidden;
  3217. }
  3218. body * {
  3219. -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  3220. }
  3221. #wpcontent {
  3222. position: relative;
  3223. margin-left: 0;
  3224. padding-left: 10px;
  3225. }
  3226. #wpbody-content {
  3227. padding-bottom: 100px;
  3228. }
  3229. .wrap {
  3230. clear: both;
  3231. margin-right: 12px;
  3232. margin-left: 0;
  3233. }
  3234. /* categories */
  3235. #col-left,
  3236. #col-right {
  3237. float: none;
  3238. width: auto;
  3239. }
  3240. #col-left .col-wrap,
  3241. #col-right .col-wrap {
  3242. padding: 0;
  3243. }
  3244. /* Hidden Elements */
  3245. #collapse-menu,
  3246. .post-format-select {
  3247. display: none !important;
  3248. }
  3249. .wrap h1.wp-heading-inline {
  3250. margin-bottom: 0.5em;
  3251. }
  3252. .wrap .add-new-h2, /* deprecated */
  3253. .wrap .add-new-h2:active, /* deprecated */
  3254. .wrap .page-title-action,
  3255. .wrap .page-title-action:active {
  3256. padding: 10px 15px;
  3257. font-size: 14px;
  3258. white-space: nowrap;
  3259. }
  3260. /* Feedback Messages */
  3261. .notice,
  3262. .wrap div.updated,
  3263. .wrap div.error,
  3264. .media-upload-form div.error {
  3265. margin: 20px 0 10px;
  3266. padding: 5px 10px;
  3267. font-size: 14px;
  3268. line-height: 175%;
  3269. }
  3270. .wp-core-ui .notice.is-dismissible {
  3271. padding-right: 46px;
  3272. }
  3273. .notice-dismiss {
  3274. padding: 13px;
  3275. }
  3276. .wrap .icon32 + h2 {
  3277. margin-top: -2px;
  3278. }
  3279. .wp-responsive-open #wpbody {
  3280. right: -16em;
  3281. }
  3282. code {
  3283. word-wrap: break-word;
  3284. word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
  3285. word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
  3286. }
  3287. /* General Metabox */
  3288. .postbox {
  3289. font-size: 14px;
  3290. }
  3291. .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
  3292. .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
  3293. .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
  3294. .metabox-holder h2 {
  3295. padding: 12px;
  3296. }
  3297. .postbox .handlediv {
  3298. margin-top: 3px;
  3299. }
  3300. /* Subsubsub Nav */
  3301. .subsubsub {
  3302. font-size: 16px;
  3303. text-align: center;
  3304. margin-bottom: 15px;
  3305. }
  3306. /* Theme/Plugin File Editor */
  3307. #template textarea,
  3308. #template .CodeMirror {
  3309. box-sizing: border-box;
  3310. }
  3311. #templateside {
  3312. float: none;
  3313. width: auto;
  3314. }
  3315. #templateside > ul {
  3316. border-left: 1px solid #dcdcde;
  3317. }
  3318. #templateside li {
  3319. margin: 0;
  3320. }
  3321. #templateside li:not(.howto) a {
  3322. display: block;
  3323. padding: 5px;
  3324. }
  3325. #templateside li.howto {
  3326. padding: 12px;
  3327. }
  3328. #templateside .highlight {
  3329. padding: 5px;
  3330. margin-left: -5px;
  3331. margin-top: -5px;
  3332. }
  3333. #template > div,
  3334. #template .notice {
  3335. float: none;
  3336. margin: 1em 0;
  3337. width: auto;
  3338. }
  3339. #template .CodeMirror,
  3340. #template textarea {
  3341. width: 100%;
  3342. }
  3343. #templateside ul ul {
  3344. padding-left: 1.5em;
  3345. }
  3346. [role="treeitem"] .folder-label {
  3347. display: block;
  3348. padding: 5px;
  3349. }
  3350. .tree-folder > li::before,
  3351. .tree-folder > li::after,
  3352. .tree-folder .tree-folder::after {
  3353. left: -8px;
  3354. }
  3355. .tree-folder > li::before {
  3356. top: 0;
  3357. height: 13px;
  3358. }
  3359. .tree-folder > .current-file::before {
  3360. left: -5px;
  3361. top: 7px;
  3362. width: 4px;
  3363. }
  3364. .tree-folder > .current-file::after {
  3365. height: 9px;
  3366. left: -8px;
  3367. }
  3368. .wrap #templateside span.notice {
  3369. margin-left: -5px;
  3370. width: 100%;
  3371. }
  3372. .fileedit-sub .alignright {
  3373. float: left;
  3374. margin-top: 15px;
  3375. width: 100%;
  3376. text-align: left;
  3377. }
  3378. .fileedit-sub .alignright label {
  3379. display: block;
  3380. }
  3381. .fileedit-sub #theme,
  3382. .fileedit-sub #plugin {
  3383. margin-left: 0;
  3384. max-width: 70%;
  3385. }
  3386. .fileedit-sub input[type="submit"] {
  3387. margin-bottom: 0;
  3388. }
  3389. #documentation label[for="docs-list"] {
  3390. display: block;
  3391. }
  3392. #documentation select[name="docs-list"] {
  3393. margin-left: 0;
  3394. max-width: 60%;
  3395. }
  3396. #documentation input[type="button"] {
  3397. margin-bottom: 0;
  3398. }
  3399. #wpfooter {
  3400. display: none;
  3401. }
  3402. #comments-form .checkforspam {
  3403. display: none;
  3404. }
  3405. .edit-comment-author {
  3406. margin: 2px 0 0;
  3407. }
  3408. .filter-drawer .filter-group-feature input,
  3409. .filter-drawer .filter-group-feature label {
  3410. line-height: 2.1;
  3411. }
  3412. .filter-drawer .filter-group-feature label {
  3413. margin-left: 32px;
  3414. }
  3415. .wp-filter .button.drawer-toggle {
  3416. font-size: 13px;
  3417. line-height: 2;
  3418. height: 28px;
  3419. }
  3420. /* Fix help tab columns for smaller screens */
  3421. #screen-meta #contextual-help-wrap {
  3422. overflow: visible;
  3423. }
  3424. #screen-meta #contextual-help-back,
  3425. #screen-meta .contextual-help-sidebar {
  3426. display: none;
  3427. }
  3428. #screen-meta .contextual-help-tabs {
  3429. clear: both;
  3430. width: 100%;
  3431. float: none;
  3432. }
  3433. #screen-meta .contextual-help-tabs ul {
  3434. margin: 0 0 1em;
  3435. padding: 1em 0 0;
  3436. }
  3437. #screen-meta .contextual-help-tabs .active {
  3438. margin: 0;
  3439. }
  3440. #screen-meta .contextual-help-tabs-wrap {
  3441. clear: both;
  3442. max-width: 100%;
  3443. float: none;
  3444. }
  3445. #screen-meta,
  3446. #screen-meta-links {
  3447. margin-right: 10px;
  3448. }
  3449. #screen-meta-links {
  3450. margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
  3451. }
  3452. .wp-filter .search-form input[type="search"] {
  3453. width: 100%;
  3454. font-size: 1rem;
  3455. }
  3456. .wp-filter .search-form.search-plugins {
  3457. /* This element is a flex item. */
  3458. min-width: 100%;
  3459. }
  3460. }
  3461. /* Smartphone */
  3462. @media screen and (max-width: 600px) {
  3463. /* Disable horizontal scroll when responsive menu is open
  3464. since we push the main content off to the right. */
  3465. #wpwrap.wp-responsive-open {
  3466. overflow-x: hidden;
  3467. }
  3468. html.wp-toolbar {
  3469. padding-top: 0;
  3470. }
  3471. .screen-reader-shortcut:focus {
  3472. top: 7px;
  3473. }
  3474. #wpbody {
  3475. padding-top: 46px;
  3476. }
  3477. /* Keep full-width boxes on Edit Post page from causing horizontal scroll */
  3478. div#post-body.metabox-holder.columns-1 {
  3479. overflow-x: hidden;
  3480. }
  3481. h1.nav-tab-wrapper,
  3482. .wrap h2.nav-tab-wrapper,
  3483. .nav-tab-wrapper {
  3484. border-bottom: 0;
  3485. }
  3486. h1 .nav-tab,
  3487. h2 .nav-tab,
  3488. h3 .nav-tab,
  3489. nav .nav-tab {
  3490. margin: 10px 10px 0 0;
  3491. border-bottom: 1px solid #c3c4c7;
  3492. }
  3493. .nav-tab-active:hover,
  3494. .nav-tab-active:focus,
  3495. .nav-tab-active:focus:active {
  3496. border-bottom: 1px solid #c3c4c7;
  3497. }
  3498. }
  3499. @media screen and (max-width: 480px) {
  3500. .metabox-prefs-container {
  3501. display: grid;
  3502. }
  3503. .metabox-prefs-container > * {
  3504. display: inline-block;
  3505. padding: 2px;
  3506. }
  3507. }
  3508. @media screen and (max-width: 320px) {
  3509. /* Prevent default center alignment and larger font for the Right Now widget when
  3510. the network dashboard is viewed on a small mobile device. */
  3511. #network_dashboard_right_now .subsubsub {
  3512. font-size: 14px;
  3513. text-align: left;
  3514. }
  3515. }