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.

1496 lines
29 KiB

1 year ago
  1. #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
  2. width: 100%;
  3. }
  4. #wpbody-content #dashboard-widgets.columns-2 .postbox-container {
  5. width: 49.5%;
  6. }
  7. #wpbody-content #dashboard-widgets.columns-2 #postbox-container-2,
  8. #wpbody-content #dashboard-widgets.columns-2 #postbox-container-3,
  9. #wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 {
  10. float: right;
  11. width: 50.5%;
  12. }
  13. #wpbody-content #dashboard-widgets.columns-3 .postbox-container {
  14. width: 33.5%;
  15. }
  16. #wpbody-content #dashboard-widgets.columns-3 #postbox-container-1 {
  17. width: 33%;
  18. }
  19. #wpbody-content #dashboard-widgets.columns-3 #postbox-container-3,
  20. #wpbody-content #dashboard-widgets.columns-3 #postbox-container-4 {
  21. float: right;
  22. }
  23. #wpbody-content #dashboard-widgets.columns-4 .postbox-container {
  24. width: 25%;
  25. }
  26. #dashboard-widgets .postbox-container {
  27. width: 25%;
  28. }
  29. #dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container {
  30. border: none !important;
  31. }
  32. #dashboard-widgets-wrap {
  33. overflow: hidden;
  34. margin: 0 -8px;
  35. }
  36. #dashboard-widgets .postbox .inside {
  37. margin-bottom: 0;
  38. }
  39. #dashboard-widgets .meta-box-sortables {
  40. display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
  41. /* Required min-height to make the jQuery UI Sortable drop zone work. */
  42. min-height: 100px;
  43. margin: 0 8px 20px;
  44. }
  45. #dashboard-widgets .postbox-container .empty-container {
  46. outline: 3px dashed #c3c4c7;
  47. height: 250px;
  48. }
  49. /* Only highlight drop zones when dragging and only in the 2 columns layout. */
  50. .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
  51. outline: 3px dashed #646970;
  52. /* Prevent margin on the child from collapsing with margin on the parent. */
  53. display: flow-root;
  54. }
  55. #dashboard-widgets .postbox-container .empty-container:after {
  56. content: attr(data-emptystring);
  57. margin: auto;
  58. position: absolute;
  59. top: 50%;
  60. left: 0;
  61. right: 0;
  62. transform: translateY( -50% );
  63. padding: 0 2em;
  64. text-align: center;
  65. color: #646970;
  66. font-size: 16px;
  67. line-height: 1.5;
  68. display: none;
  69. }
  70. /* @todo: this was originally in this section, but likely belongs elsewhere */
  71. #the-comment-list td.comment p.comment-author {
  72. margin-top: 0;
  73. margin-left: 0;
  74. }
  75. #the-comment-list p.comment-author img {
  76. float: left;
  77. margin-right: 8px;
  78. }
  79. #the-comment-list p.comment-author strong a {
  80. border: none;
  81. }
  82. #the-comment-list td {
  83. vertical-align: top;
  84. }
  85. #the-comment-list td.comment {
  86. word-wrap: break-word;
  87. }
  88. #the-comment-list td.comment img {
  89. max-width: 100%;
  90. }
  91. /* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */
  92. .index-php #screen-meta-links {
  93. margin: 0 20px 8px 0;
  94. }
  95. /* Welcome Panel */
  96. .welcome-panel {
  97. position: relative;
  98. overflow: auto;
  99. margin: 16px 0;
  100. background-color: #151515;
  101. font-size: 14px;
  102. line-height: 1.3;
  103. clear: both;
  104. }
  105. .welcome-panel h2 {
  106. margin: 0;
  107. font-size: 48px;
  108. font-weight: 600;
  109. line-height: 1.25;
  110. }
  111. .welcome-panel h3 {
  112. margin: 0;
  113. font-size: 20px;
  114. font-weight: 400;
  115. line-height: 1.4;
  116. }
  117. .welcome-panel p {
  118. font-size: inherit;
  119. line-height: inherit;
  120. }
  121. .welcome-panel-header {
  122. position: relative;
  123. color: #fff;
  124. }
  125. .welcome-panel-header-image {
  126. position: absolute !important;
  127. top: 0;
  128. right: 0;
  129. bottom: 0;
  130. left: 0;
  131. z-index: 0 !important;
  132. overflow: hidden;
  133. }
  134. .welcome-panel-header-image svg {
  135. display: block;
  136. margin: auto;
  137. width: 100%;
  138. height: 100%;
  139. }
  140. .rtl .welcome-panel-header-image svg {
  141. transform: scaleX(-1);
  142. }
  143. .welcome-panel-header * {
  144. color: inherit;
  145. position: relative;
  146. z-index: 1;
  147. }
  148. .welcome-panel-header a:focus,
  149. .welcome-panel-header a:hover {
  150. color: inherit;
  151. text-decoration: none;
  152. }
  153. .welcome-panel-header a:focus,
  154. .welcome-panel .welcome-panel-close:focus {
  155. outline-color: currentColor;
  156. outline-offset: 1px;
  157. box-shadow: none;
  158. }
  159. .welcome-panel-header p {
  160. margin: 0.5em 0 0;
  161. font-size: 20px;
  162. line-height: 1.4;
  163. }
  164. .welcome-panel .welcome-panel-close {
  165. position: absolute;
  166. top: 10px;
  167. right: 10px;
  168. padding: 10px 15px 10px 24px;
  169. font-size: 13px;
  170. line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
  171. text-decoration: none;
  172. z-index: 1; /* Raise above the version image. */
  173. }
  174. .welcome-panel .welcome-panel-close:before {
  175. position: absolute;
  176. top: 8px;
  177. left: 0;
  178. transition: all .1s ease-in-out;
  179. content: '\f335';
  180. font-size: 24px;
  181. color: #fff;
  182. }
  183. .welcome-panel .welcome-panel-close {
  184. color: #fff;
  185. }
  186. .welcome-panel .welcome-panel-close:hover,
  187. .welcome-panel .welcome-panel-close:focus,
  188. .welcome-panel .welcome-panel-close:hover::before,
  189. .welcome-panel .welcome-panel-close:focus::before {
  190. color: #fff972;
  191. }
  192. /* @deprecated 5.9.0 -- Button removed from panel. */
  193. .wp-core-ui .welcome-panel .button.button-hero {
  194. margin: 15px 13px 3px 0;
  195. padding: 12px 36px;
  196. height: auto;
  197. line-height: 1.4285714;
  198. white-space: normal;
  199. }
  200. .welcome-panel-content {
  201. min-height: 400px;
  202. display: flex;
  203. flex-direction: column;
  204. justify-content: space-between;
  205. }
  206. .welcome-panel-header {
  207. box-sizing: border-box;
  208. margin-left: auto;
  209. margin-right: auto;
  210. max-width: 1500px;
  211. width: 100%;
  212. padding: 48px 0 80px 48px;
  213. }
  214. .welcome-panel .welcome-panel-column-container {
  215. box-sizing: border-box;
  216. width: 100%;
  217. clear: both;
  218. display: grid;
  219. z-index: 1;
  220. padding: 48px;
  221. grid-template-columns: repeat(3, 1fr);
  222. gap: 32px;
  223. align-self: flex-end;
  224. background: #fff;
  225. }
  226. [class*="welcome-panel-icon"] {
  227. height: 60px;
  228. width: 60px;
  229. background-position: center;
  230. background-size: 24px 24px;
  231. background-repeat: no-repeat;
  232. border-radius: 100%;
  233. }
  234. .welcome-panel-column > svg {
  235. margin-top: 4px;
  236. }
  237. .welcome-panel-column {
  238. display: grid;
  239. grid-template-columns: min-content 1fr;
  240. gap: 24px;
  241. }
  242. .welcome-panel-icon-pages {
  243. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E");
  244. }
  245. .welcome-panel-icon-layout {
  246. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E");
  247. }
  248. .welcome-panel-icon-styles {
  249. background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E");
  250. }
  251. /* @deprecated 5.9.0 -- Section removed from welcome panel. */
  252. .welcome-panel .welcome-widgets-menus {
  253. line-height: 1.14285714;
  254. }
  255. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  256. .welcome-panel .welcome-panel-column ul {
  257. margin: 0.8em 1em 1em 0;
  258. }
  259. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  260. .welcome-panel li {
  261. font-size: 14px;
  262. }
  263. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  264. .welcome-panel li a {
  265. text-decoration: none;
  266. }
  267. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  268. .welcome-panel .welcome-panel-column li {
  269. line-height: 1.14285714;
  270. list-style-type: none;
  271. padding: 0 0 8px;
  272. }
  273. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  274. .welcome-panel .welcome-icon {
  275. background: transparent !important;
  276. }
  277. /* Welcome Panel and Right Now common Icons style */
  278. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  279. .welcome-panel .welcome-icon:before,
  280. #dashboard_right_now li a:before,
  281. #dashboard_right_now li span:before,
  282. #dashboard_right_now .search-engines-info:before {
  283. color: #646970;
  284. font: normal 20px/1 dashicons;
  285. speak: never;
  286. display: inline-block;
  287. padding: 0 10px 0 0;
  288. position: relative;
  289. -webkit-font-smoothing: antialiased;
  290. -moz-osx-font-smoothing: grayscale;
  291. text-decoration: none !important;
  292. vertical-align: top;
  293. }
  294. /* Welcome Panel specific Icons styles */
  295. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  296. .welcome-panel .welcome-write-blog:before,
  297. .welcome-panel .welcome-edit-page:before {
  298. content: "\f119";
  299. top: -3px;
  300. }
  301. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  302. .welcome-panel .welcome-add-page:before {
  303. content: "\f132";
  304. top: -1px;
  305. }
  306. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  307. .welcome-panel .welcome-setup-home:before {
  308. content: "\f102";
  309. top: -1px;
  310. }
  311. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  312. .welcome-panel .welcome-view-site:before {
  313. content: "\f115";
  314. top: -2px;
  315. }
  316. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  317. .welcome-panel .welcome-widgets-menus:before {
  318. content: "\f116";
  319. top: -2px;
  320. }
  321. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  322. .welcome-panel .welcome-widgets:before {
  323. content: "\f538";
  324. top: -2px;
  325. }
  326. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  327. .welcome-panel .welcome-menus:before {
  328. content: "\f163";
  329. top: -2px;
  330. }
  331. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  332. .welcome-panel .welcome-comments:before {
  333. content: "\f117";
  334. top: -1px;
  335. }
  336. /* @deprecated 5.9.0 -- Icons removed from welcome panel. */
  337. .welcome-panel .welcome-learn-more:before {
  338. content: "\f118";
  339. top: -1px;
  340. }
  341. /* Right Now specific Icons styles */
  342. #dashboard_right_now .search-engines-info:before,
  343. #dashboard_right_now li a:before,
  344. #dashboard_right_now li > span:before { /* get only the first level span to exclude screen-reader-text in mu-storage */
  345. content: "\f159"; /* generic icon for items added by CPTs ? */
  346. padding: 0 5px 0 0;
  347. }
  348. #dashboard_right_now .page-count a:before,
  349. #dashboard_right_now .page-count span:before {
  350. content: "\f105";
  351. }
  352. #dashboard_right_now .post-count a:before,
  353. #dashboard_right_now .post-count span:before {
  354. content: "\f109";
  355. }
  356. #dashboard_right_now .comment-count a:before {
  357. content: "\f101";
  358. }
  359. #dashboard_right_now .comment-mod-count a:before {
  360. content: "\f125";
  361. }
  362. #dashboard_right_now .storage-count a:before {
  363. content: "\f104";
  364. }
  365. #dashboard_right_now .storage-count.warning a:before {
  366. content: "\f153";
  367. }
  368. #dashboard_right_now .search-engines-info:before {
  369. content: "\f348";
  370. }
  371. /* Dashboard WordPress events */
  372. .community-events-errors {
  373. margin: 0;
  374. }
  375. .community-events-loading {
  376. padding: 10px 12px 8px;
  377. }
  378. .community-events {
  379. margin-bottom: 6px;
  380. padding: 0 12px;
  381. }
  382. .community-events .spinner {
  383. float: none;
  384. margin: 5px 2px 0;
  385. vertical-align: top;
  386. }
  387. .community-events-errors[aria-hidden="true"],
  388. .community-events-errors [aria-hidden="true"],
  389. .community-events-loading[aria-hidden="true"],
  390. .community-events[aria-hidden="true"],
  391. .community-events form[aria-hidden="true"] {
  392. display: none;
  393. }
  394. .community-events .activity-block:first-child,
  395. .community-events h2 {
  396. padding-top: 12px;
  397. padding-bottom: 10px;
  398. }
  399. .community-events-form {
  400. margin: 15px 0 5px;
  401. }
  402. .community-events-form .regular-text {
  403. width: 40%;
  404. height: 29px;
  405. margin: 0;
  406. vertical-align: top;
  407. }
  408. .community-events li.event-none {
  409. border-left: 4px solid #72aee6;
  410. }
  411. #dashboard-widgets .community-events li.event-none a {
  412. text-decoration: underline;
  413. }
  414. .community-events-form label {
  415. display: inline-block;
  416. vertical-align: top;
  417. line-height: 2.15384615;
  418. height: 28px;
  419. }
  420. .community-events .activity-block > p {
  421. margin-bottom: 0;
  422. display: inline;
  423. }
  424. .community-events-toggle-location {
  425. vertical-align: middle;
  426. }
  427. #community-events-submit {
  428. margin-left: 3px;
  429. margin-right: 3px;
  430. }
  431. /* Needs higher specificity than #dashboard-widgets .button-link */
  432. #dashboard-widgets .community-events-cancel.button-link {
  433. vertical-align: top;
  434. /* Same properties as the submit button for cross-browsers alignment. */
  435. line-height: 2;
  436. height: 28px;
  437. text-decoration: underline;
  438. }
  439. .community-events ul {
  440. background-color: #f6f7f7;
  441. padding-left: 0;
  442. padding-right: 0;
  443. padding-bottom: 0;
  444. }
  445. .community-events li {
  446. margin: 0;
  447. padding: 8px 12px;
  448. color: #2c3338;
  449. }
  450. .community-events li:first-child {
  451. border-top: 1px solid #f0f0f1;
  452. }
  453. .community-events li ~ li {
  454. border-top: 1px solid #f0f0f1;
  455. }
  456. .community-events .activity-block.last {
  457. border-bottom: 1px solid #f0f0f1;
  458. padding-top: 0;
  459. margin-top: -1px;
  460. }
  461. .community-events .event-info {
  462. display: block;
  463. }
  464. .community-events .ce-separator::before {
  465. content: "\2022";
  466. }
  467. .event-icon {
  468. height: 18px;
  469. padding-right: 10px;
  470. width: 18px;
  471. display: none; /* Hide on smaller screens */
  472. }
  473. .event-icon:before {
  474. color: #646970;
  475. font-size: 18px;
  476. }
  477. .event-meetup .event-icon:before {
  478. content: "\f484";
  479. }
  480. .event-wordcamp .event-icon:before {
  481. content: "\f486";
  482. }
  483. .community-events .event-title {
  484. font-weight: 600;
  485. display: block;
  486. }
  487. .community-events .event-date,
  488. .community-events .event-time {
  489. display: block;
  490. }
  491. .community-events-footer {
  492. margin-top: 0;
  493. margin-bottom: 0;
  494. padding: 12px;
  495. border-top: 1px solid #f0f0f1;
  496. color: #dcdcde;
  497. }
  498. /* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */
  499. .community-events-footer .screen-reader-text {
  500. height: inherit;
  501. white-space: nowrap;
  502. }
  503. /* Dashboard WordPress news */
  504. #dashboard_primary .inside {
  505. margin: 0;
  506. padding: 0;
  507. }
  508. #dashboard_primary .widget-loading {
  509. padding: 12px 12px 0;
  510. margin-bottom: 1em !important; /* Needs to override `.postbox .inside > p:last-child` in common.css */
  511. }
  512. /* Notice when JS is off. */
  513. #dashboard_primary .inside .notice {
  514. margin: 0;
  515. }
  516. body #dashboard-widgets .postbox form .submit {
  517. margin: 0;
  518. }
  519. /* Used only for configurable widgets. */
  520. .dashboard-widget-control-form p {
  521. margin-top: 0;
  522. }
  523. .rssSummary {
  524. color: #646970;
  525. margin-top: 4px;
  526. }
  527. #dashboard_primary .rss-widget {
  528. font-size: 13px;
  529. padding: 0 12px;
  530. }
  531. #dashboard_primary .rss-widget:last-child {
  532. border-bottom: none;
  533. padding-bottom: 8px;
  534. }
  535. #dashboard_primary .rss-widget a {
  536. font-weight: 400;
  537. }
  538. #dashboard_primary .rss-widget span,
  539. #dashboard_primary .rss-widget span.rss-date {
  540. color: #646970;
  541. }
  542. #dashboard_primary .rss-widget span.rss-date {
  543. margin-left: 12px;
  544. }
  545. #dashboard_primary .rss-widget ul li {
  546. padding: 4px 0;
  547. margin: 0;
  548. }
  549. /* Dashboard right now */
  550. #dashboard_right_now ul {
  551. margin: 0;
  552. /* contain floats but don't use overflow: hidden */
  553. display: inline-block;
  554. width: 100%;
  555. }
  556. #dashboard_right_now li {
  557. width: 50%;
  558. float: left;
  559. margin-bottom: 10px;
  560. }
  561. #dashboard_right_now .inside {
  562. padding: 0;
  563. }
  564. #dashboard_right_now .main {
  565. padding: 0 12px 11px;
  566. }
  567. #dashboard_right_now .main p {
  568. margin: 0;
  569. }
  570. #dashboard_right_now #wp-version-message .button {
  571. float: right;
  572. position: relative;
  573. top: -5px;
  574. margin-left: 5px;
  575. }
  576. #dashboard_right_now p.search-engines-info {
  577. margin: 1em 0;
  578. }
  579. .mu-storage {
  580. overflow: hidden;
  581. }
  582. #dashboard-widgets h3.mu-storage {
  583. margin: 0 0 10px;
  584. padding: 0;
  585. font-size: 14px;
  586. font-weight: 400;
  587. }
  588. /* Dashboard right now - Colors */
  589. #dashboard_right_now .sub {
  590. color: #50575e;
  591. background: #f6f7f7;
  592. border-top: 1px solid #f0f0f1;
  593. padding: 10px 12px 6px;
  594. }
  595. #dashboard_right_now .sub h3 {
  596. color: #50575e;
  597. }
  598. #dashboard_right_now .sub p {
  599. margin: 0 0 1em;
  600. }
  601. #dashboard_right_now .warning a:before,
  602. #dashboard_right_now .warning span:before {
  603. color: #d63638;
  604. }
  605. /* Dashboard Quick Draft */
  606. #dashboard_quick_press .inside {
  607. margin: 0;
  608. padding: 0;
  609. }
  610. #dashboard_quick_press div.updated {
  611. margin-bottom: 10px;
  612. border: 1px solid #f0f0f1;
  613. border-width: 1px 1px 1px 0;
  614. }
  615. #dashboard_quick_press form {
  616. margin: 12px;
  617. }
  618. #dashboard_quick_press .drafts {
  619. padding: 10px 0 0;
  620. }
  621. /* Dashboard Quick Draft - Form styling */
  622. #dashboard_quick_press label {
  623. display: inline-block;
  624. margin-bottom: 4px;
  625. }
  626. #dashboard_quick_press input,
  627. #dashboard_quick_press textarea {
  628. box-sizing: border-box;
  629. margin: 0;
  630. }
  631. #dashboard-widgets .postbox form .submit {
  632. margin: -39px 0;
  633. float: right;
  634. }
  635. #description-wrap {
  636. margin-top: 12px;
  637. }
  638. #quick-press textarea#content {
  639. min-height: 90px;
  640. max-height: 1300px;
  641. margin: 0 0 8px;
  642. padding: 6px 7px;
  643. resize: none;
  644. }
  645. /* Dashboard Quick Draft - Drafts list */
  646. .js #dashboard_quick_press .drafts {
  647. border-top: 1px solid #f0f0f1;
  648. }
  649. #dashboard_quick_press .drafts abbr {
  650. border: none;
  651. }
  652. #dashboard_quick_press .drafts .view-all {
  653. float: right;
  654. margin: 0 12px 0 0;
  655. }
  656. #dashboard_primary a.rsswidget {
  657. font-weight: 400;
  658. }
  659. #dashboard_quick_press .drafts ul {
  660. margin: 0 12px;
  661. }
  662. #dashboard_quick_press .drafts li {
  663. margin-bottom: 1em;
  664. }
  665. #dashboard_quick_press .drafts li time {
  666. color: #646970;
  667. }
  668. #dashboard_quick_press .drafts p {
  669. margin: 0;
  670. word-wrap: break-word;
  671. }
  672. #dashboard_quick_press .draft-title {
  673. word-wrap: break-word;
  674. }
  675. #dashboard_quick_press .draft-title a,
  676. #dashboard_quick_press .draft-title time {
  677. margin: 0 5px 0 0;
  678. }
  679. /* Dashboard common styles */
  680. #dashboard-widgets h4, /* Back-compat for pre-4.4 */
  681. #dashboard-widgets h3,
  682. #dashboard_quick_press .drafts h2 {
  683. margin: 0 12px 8px;
  684. padding: 0;
  685. font-size: 14px;
  686. font-weight: 400;
  687. color: #1d2327;
  688. }
  689. #dashboard_quick_press .drafts h2 {
  690. line-height: inherit;
  691. }
  692. #dashboard-widgets .inside h4, /* Back-compat for pre-4.4 */
  693. #dashboard-widgets .inside h3 {
  694. margin-left: 0;
  695. margin-right: 0;
  696. }
  697. /* Dashboard activity widget */
  698. #dashboard_activity .comment-meta span.approve:before {
  699. content: "\f227";
  700. font: 20px/.5 dashicons;
  701. margin-left: 5px;
  702. vertical-align: middle;
  703. position: relative;
  704. top: -1px;
  705. margin-right: 2px;
  706. }
  707. #dashboard_activity .inside {
  708. margin: 0;
  709. padding-bottom: 0;
  710. }
  711. #dashboard_activity .no-activity {
  712. overflow: hidden;
  713. padding: 12px 0;
  714. text-align: center;
  715. }
  716. #dashboard_activity .no-activity p {
  717. color: #646970;
  718. font-size: 16px;
  719. }
  720. #dashboard_activity .subsubsub {
  721. float: none;
  722. border-top: 1px solid #f0f0f1;
  723. margin: 0 -12px;
  724. padding: 8px 12px 4px;
  725. }
  726. #dashboard_activity .subsubsub a .count,
  727. #dashboard_activity .subsubsub a.current .count {
  728. color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */
  729. }
  730. #future-posts ul,
  731. #published-posts ul {
  732. margin: 8px -12px 0 -12px;
  733. }
  734. #future-posts li,
  735. #published-posts li {
  736. display: grid;
  737. grid-template-columns: clamp(160px, calc(2vw + 140px), 200px) auto;
  738. column-gap: 10px;
  739. color: #646970;
  740. padding: 4px 12px;
  741. }
  742. #future-posts li:nth-child(odd),
  743. #published-posts li:nth-child(odd) {
  744. background-color: #f6f7f7;
  745. }
  746. .activity-block {
  747. border-bottom: 1px solid #f0f0f1;
  748. margin: 0 -12px 6px -12px;
  749. padding: 8px 12px 4px;
  750. }
  751. .activity-block:last-child {
  752. border-bottom: none;
  753. margin-bottom: 0;
  754. }
  755. .activity-block .subsubsub li {
  756. color: #dcdcde;
  757. }
  758. /* Dashboard activity widget - Comments */
  759. /* @todo: needs serious de-duplication */
  760. #activity-widget #the-comment-list tr.undo,
  761. #activity-widget #the-comment-list div.undo {
  762. background: none;
  763. padding: 6px 0;
  764. margin-left: 12px;
  765. }
  766. #activity-widget #the-comment-list .comment-item {
  767. background: #f6f7f7;
  768. padding: 12px;
  769. position: relative;
  770. }
  771. #activity-widget #the-comment-list .avatar {
  772. position: absolute;
  773. top: 12px;
  774. }
  775. #activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar {
  776. padding-left: 63px;
  777. }
  778. #activity-widget #the-comment-list .dashboard-comment-wrap blockquote {
  779. margin: 1em 0;
  780. }
  781. #activity-widget #the-comment-list .comment-item p.row-actions {
  782. margin: 4px 0 0;
  783. }
  784. #activity-widget #the-comment-list .comment-item:first-child {
  785. border-top: 1px solid #f0f0f1;
  786. }
  787. #activity-widget #the-comment-list .unapproved {
  788. background-color: #fcf9e8;
  789. }
  790. #activity-widget #the-comment-list .unapproved:before {
  791. content: "";
  792. display: block;
  793. position: absolute;
  794. left: 0;
  795. top: 0;
  796. bottom: 0;
  797. background: #d63638;
  798. width: 4px;
  799. }
  800. #activity-widget #the-comment-list .spam-undo-inside .avatar,
  801. #activity-widget #the-comment-list .trash-undo-inside .avatar {
  802. position: relative;
  803. top: 0;
  804. }
  805. /* Browse happy box */
  806. #dashboard-widgets #dashboard_browser_nag.postbox .inside {
  807. margin: 10px;
  808. }
  809. .postbox .button-link .edit-box {
  810. display: none;
  811. }
  812. .edit-box {
  813. opacity: 0;
  814. }
  815. .hndle:hover .edit-box,
  816. .edit-box:focus {
  817. opacity: 1;
  818. }
  819. #dashboard-widgets form .input-text-wrap input {
  820. width: 100%;
  821. }
  822. #dashboard-widgets form .textarea-wrap textarea {
  823. width: 100%;
  824. }
  825. #dashboard-widgets .postbox form .submit {
  826. float: none;
  827. margin: .5em 0 0;
  828. padding: 0;
  829. border: none;
  830. }
  831. #dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish {
  832. min-width: 0;
  833. }
  834. #dashboard-widgets li a,
  835. #dashboard-widgets .button-link,
  836. .community-events-footer a {
  837. text-decoration: none;
  838. }
  839. #dashboard-widgets h2 a {
  840. text-decoration: underline;
  841. }
  842. #dashboard-widgets .hndle .postbox-title-action {
  843. float: right;
  844. line-height: 1.2;
  845. }
  846. #dashboard_plugins h5 {
  847. font-size: 14px;
  848. }
  849. /* Recent Comments */
  850. #latest-comments #the-comment-list {
  851. position: relative;
  852. margin: 0 -12px;
  853. }
  854. #activity-widget #the-comment-list .comment,
  855. #activity-widget #the-comment-list .pingback {
  856. box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
  857. }
  858. #activity-widget .comments #the-comment-list .alt {
  859. background-color: transparent;
  860. }
  861. #activity-widget #latest-comments #the-comment-list .comment-item {
  862. /* the row-actions paragraph is output only for users with 'edit_comment' capabilities,
  863. for other users this needs a min height equal to the gravatar image */
  864. min-height: 50px;
  865. margin: 0;
  866. padding: 12px;
  867. }
  868. #latest-comments #the-comment-list .pingback {
  869. padding-left: 12px !important;
  870. }
  871. #latest-comments #the-comment-list .comment-item:first-child {
  872. border-top: none;
  873. }
  874. #latest-comments #the-comment-list .comment-meta {
  875. line-height: 1.5;
  876. margin: 0;
  877. color: #646970;
  878. }
  879. #latest-comments #the-comment-list .comment-meta cite {
  880. font-style: normal;
  881. font-weight: 400;
  882. }
  883. #latest-comments #the-comment-list .comment-item blockquote,
  884. #latest-comments #the-comment-list .comment-item blockquote p {
  885. margin: 0;
  886. padding: 0;
  887. display: inline;
  888. }
  889. #latest-comments #the-comment-list .comment-item p.row-actions {
  890. margin: 3px 0 0;
  891. padding: 0;
  892. font-size: 13px;
  893. }
  894. /* Feeds */
  895. .rss-widget ul {
  896. margin: 0;
  897. padding: 0;
  898. list-style: none;
  899. }
  900. a.rsswidget {
  901. font-size: 13px;
  902. font-weight: 600;
  903. line-height: 1.4;
  904. }
  905. .rss-widget ul li {
  906. line-height: 1.5;
  907. margin-bottom: 12px;
  908. }
  909. .rss-widget span.rss-date {
  910. color: #646970;
  911. font-size: 13px;
  912. margin-left: 3px;
  913. }
  914. .rss-widget cite {
  915. display: block;
  916. text-align: right;
  917. margin: 0 0 1em;
  918. padding: 0;
  919. }
  920. .rss-widget cite:before {
  921. content: "\2014";
  922. }
  923. .dashboard-comment-wrap {
  924. word-wrap: break-word;
  925. }
  926. /* Browser Nag */
  927. #dashboard_browser_nag a.update-browser-link {
  928. font-size: 1.2em;
  929. font-weight: 600;
  930. }
  931. #dashboard_browser_nag a {
  932. text-decoration: underline;
  933. }
  934. #dashboard_browser_nag p.browser-update-nag.has-browser-icon {
  935. padding-right: 128px;
  936. }
  937. #dashboard_browser_nag .browser-icon {
  938. margin-top: -32px;
  939. }
  940. #dashboard_browser_nag.postbox {
  941. background-color: #b32d2e;
  942. background-image: none;
  943. border-color: #b32d2e;
  944. color: #fff;
  945. box-shadow: none;
  946. }
  947. #dashboard_browser_nag.postbox h2 {
  948. border-bottom-color: transparent;
  949. background: transparent none;
  950. color: #fff;
  951. box-shadow: none;
  952. }
  953. #dashboard_browser_nag a {
  954. color: #fff;
  955. }
  956. #dashboard_browser_nag.postbox .postbox-header {
  957. border-color: transparent;
  958. }
  959. #dashboard_browser_nag h2.hndle {
  960. border: none;
  961. font-weight: 600;
  962. font-size: 20px;
  963. padding-top: 10px;
  964. }
  965. .postbox#dashboard_browser_nag p a.dismiss {
  966. font-size: 14px;
  967. }
  968. .postbox#dashboard_browser_nag p,
  969. .postbox#dashboard_browser_nag a,
  970. .postbox#dashboard_browser_nag p.browser-update-nag {
  971. font-size: 16px;
  972. }
  973. /* PHP Nag */
  974. #dashboard_php_nag .dashicons-warning {
  975. color: #dba617;
  976. padding-right: 6px;
  977. }
  978. #dashboard_php_nag.php-no-security-updates .dashicons-warning,
  979. #dashboard_php_nag.php-version-lower-than-future-minimum .dashicons-warning {
  980. color: #d63638;
  981. }
  982. #dashboard_php_nag h2 {
  983. display: inline-block;
  984. }
  985. #dashboard_php_nag p {
  986. margin: 12px 0;
  987. }
  988. #dashboard_php_nag .button .dashicons-external {
  989. line-height: 25px;
  990. }
  991. .bigger-bolder-text {
  992. font-weight: 600;
  993. font-size: 14px;
  994. }
  995. /* =Media Queries
  996. -------------------------------------------------------------- */
  997. @media only screen and (min-width: 1600px) {
  998. .welcome-panel .welcome-panel-column-container {
  999. display: flex;
  1000. justify-content: center;
  1001. }
  1002. .welcome-panel-column {
  1003. width: 100%;
  1004. max-width: 460px;
  1005. }
  1006. }
  1007. /* one column on the dash */
  1008. @media only screen and (max-width: 799px) {
  1009. #wpbody-content #dashboard-widgets .postbox-container {
  1010. width: 100%;
  1011. }
  1012. #dashboard-widgets .meta-box-sortables {
  1013. min-height: 0;
  1014. }
  1015. .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
  1016. min-height: 100px;
  1017. }
  1018. #dashboard-widgets .meta-box-sortables.empty-container {
  1019. margin-bottom: 0;
  1020. }
  1021. }
  1022. /* two columns on the dash, but keep the setting if one is selected */
  1023. @media only screen and (min-width: 800px) and (max-width: 1499px) {
  1024. #wpbody-content #dashboard-widgets .postbox-container {
  1025. width: 49.5%;
  1026. }
  1027. #wpbody-content #dashboard-widgets #postbox-container-2,
  1028. #wpbody-content #dashboard-widgets #postbox-container-3,
  1029. #wpbody-content #dashboard-widgets #postbox-container-4 {
  1030. float: right;
  1031. width: 50.5%;
  1032. }
  1033. #dashboard-widgets #postbox-container-3 .empty-container,
  1034. #dashboard-widgets #postbox-container-4 .empty-container {
  1035. outline: none;
  1036. height: 0;
  1037. min-height: 0;
  1038. margin-bottom: 0;
  1039. }
  1040. #dashboard-widgets #postbox-container-3 .empty-container:after,
  1041. #dashboard-widgets #postbox-container-4 .empty-container:after {
  1042. display: none;
  1043. }
  1044. #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
  1045. width: 100%;
  1046. }
  1047. #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
  1048. outline: none;
  1049. height: 0;
  1050. min-height: 0;
  1051. margin-bottom: 0;
  1052. }
  1053. /* show the radio buttons for column prefs only for one or two columns */
  1054. .index-php .screen-layout,
  1055. .index-php .columns-prefs {
  1056. display: block;
  1057. }
  1058. .columns-prefs .columns-prefs-3,
  1059. .columns-prefs .columns-prefs-4 {
  1060. display: none;
  1061. }
  1062. #dashboard-widgets .postbox-container .empty-container:after {
  1063. display: block;
  1064. }
  1065. }
  1066. /* three columns on the dash */
  1067. @media only screen and (min-width: 1500px) and (max-width: 1800px) {
  1068. #wpbody-content #dashboard-widgets .postbox-container {
  1069. width: 33.5%;
  1070. }
  1071. #wpbody-content #dashboard-widgets #postbox-container-1 {
  1072. width: 33%;
  1073. }
  1074. #wpbody-content #dashboard-widgets #postbox-container-3,
  1075. #wpbody-content #dashboard-widgets #postbox-container-4 {
  1076. float: right;
  1077. }
  1078. #dashboard-widgets #postbox-container-4 .empty-container {
  1079. outline: none;
  1080. height: 0;
  1081. min-height: 0;
  1082. margin-bottom: 0;
  1083. }
  1084. #dashboard-widgets #postbox-container-4 .empty-container:after {
  1085. display: none;
  1086. }
  1087. #dashboard-widgets .postbox-container .empty-container:after {
  1088. display: block;
  1089. }
  1090. }
  1091. /* Always show the "Drag boxes here" CSS generated content on large screens. */
  1092. @media only screen and (min-width: 1801px) {
  1093. #dashboard-widgets .postbox-container .empty-container:after {
  1094. display: block;
  1095. }
  1096. }
  1097. @media screen and (max-width: 870px) {
  1098. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  1099. .welcome-panel .welcome-panel-column li {
  1100. display: inline-block;
  1101. margin-right: 13px;
  1102. }
  1103. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  1104. .welcome-panel .welcome-panel-column ul {
  1105. margin: 0.4em 0 0;
  1106. }
  1107. }
  1108. @media screen and (max-width: 1180px) and (min-width: 783px) {
  1109. .welcome-panel-column {
  1110. grid-template-columns: 1fr;
  1111. }
  1112. [class*="welcome-panel-icon"],
  1113. .welcome-panel-column > svg {
  1114. display: none;
  1115. }
  1116. }
  1117. @media screen and (max-width: 782px) {
  1118. .welcome-panel .welcome-panel-column-container {
  1119. grid-template-columns: 1fr;
  1120. box-sizing: border-box;
  1121. padding: 32px;
  1122. width: 100%;
  1123. }
  1124. .welcome-panel .welcome-panel-column-content {
  1125. max-width: 520px;
  1126. }
  1127. /* Keep the close icon from overlapping the Welcome text. */
  1128. .welcome-panel .welcome-panel-close {
  1129. overflow: hidden;
  1130. text-indent: 40px;
  1131. white-space: nowrap;
  1132. width: 20px;
  1133. height: 20px;
  1134. padding: 5px;
  1135. top: 5px;
  1136. right: 5px;
  1137. }
  1138. .welcome-panel .welcome-panel-close::before {
  1139. top: 5px;
  1140. left: -35px;
  1141. }
  1142. #dashboard-widgets h2 {
  1143. padding: 12px;
  1144. }
  1145. #dashboard_recent_comments #the-comment-list .comment-item .avatar {
  1146. height: 30px;
  1147. width: 30px;
  1148. margin: 4px 10px 5px 0;
  1149. }
  1150. .community-events-toggle-location {
  1151. height: 38px;
  1152. vertical-align: baseline;
  1153. }
  1154. .community-events-form .regular-text {
  1155. height: 32px;
  1156. }
  1157. #community-events-submit {
  1158. margin-bottom: 0;
  1159. /* Override .wp-core-ui .button */
  1160. vertical-align: top;
  1161. }
  1162. .community-events-form label,
  1163. #dashboard-widgets .community-events-cancel.button-link {
  1164. /* Same properties as the submit button for cross-browsers alignment. */
  1165. font-size: 14px;
  1166. line-height: normal;
  1167. height: auto;
  1168. padding: 6px 0;
  1169. border: 1px solid transparent;
  1170. }
  1171. .community-events .spinner {
  1172. margin-top: 7px;
  1173. }
  1174. }
  1175. /* Smartphone */
  1176. @media screen and (max-width: 600px) {
  1177. .welcome-panel-header {
  1178. padding: 32px 32px 64px;
  1179. }
  1180. .welcome-panel-header-image {
  1181. display: none;
  1182. }
  1183. }
  1184. @media screen and (max-width: 480px) {
  1185. .welcome-panel-column {
  1186. gap: 16px;
  1187. }
  1188. }
  1189. @media screen and (max-width: 360px) {
  1190. .welcome-panel-column {
  1191. grid-template-columns: 1fr;
  1192. }
  1193. [class*="welcome-panel-icon"],
  1194. .welcome-panel-column > svg {
  1195. display: none;
  1196. }
  1197. }
  1198. @media screen and (min-width: 355px) {
  1199. .community-events .event-info {
  1200. display: table-row;
  1201. float: left;
  1202. max-width: 59%;
  1203. }
  1204. .event-icon,
  1205. .event-icon[aria-hidden="true"] {
  1206. display: table-cell;
  1207. }
  1208. .event-info-inner {
  1209. display: table-cell;
  1210. }
  1211. .community-events .event-date-time {
  1212. float: right;
  1213. max-width: 39%;
  1214. }
  1215. .community-events .event-date,
  1216. .community-events .event-time {
  1217. text-align: right;
  1218. }
  1219. }