dashboard.css 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491
  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: #273fcc;
  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. --about-header-bg-width: 780px;
  123. position: relative;
  124. color: #fff;
  125. }
  126. .welcome-panel-header-image {
  127. position: absolute !important;
  128. top: 0;
  129. right: 0;
  130. bottom: 0;
  131. left: 0;
  132. z-index: 0 !important;
  133. overflow: hidden;
  134. }
  135. .welcome-panel-header-image svg {
  136. display: block;
  137. margin: auto;
  138. width: var(--about-header-bg-width);
  139. height: auto;
  140. transform: scale(0.75);
  141. transform-origin: center top;
  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. .event-icon {
  465. height: 18px;
  466. padding-right: 10px;
  467. width: 18px;
  468. display: none; /* Hide on smaller screens */
  469. }
  470. .event-icon:before {
  471. color: #646970;
  472. font-size: 18px;
  473. }
  474. .event-meetup .event-icon:before {
  475. content: "\f484";
  476. }
  477. .event-wordcamp .event-icon:before {
  478. content: "\f486";
  479. }
  480. .community-events .event-title {
  481. font-weight: 600;
  482. display: block;
  483. }
  484. .community-events .event-date,
  485. .community-events .event-time {
  486. display: block;
  487. }
  488. .community-events-footer {
  489. margin-top: 0;
  490. margin-bottom: 0;
  491. padding: 12px;
  492. border-top: 1px solid #f0f0f1;
  493. color: #dcdcde;
  494. }
  495. /* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */
  496. .community-events-footer .screen-reader-text {
  497. height: inherit;
  498. white-space: nowrap;
  499. }
  500. /* Dashboard WordPress news */
  501. #dashboard_primary .inside {
  502. margin: 0;
  503. padding: 0;
  504. }
  505. #dashboard_primary .widget-loading {
  506. padding: 12px 12px 0;
  507. margin-bottom: 1em !important; /* Needs to override `.postbox .inside > p:last-child` in common.css */
  508. }
  509. /* Notice when JS is off. */
  510. #dashboard_primary .inside .notice {
  511. margin: 0;
  512. }
  513. body #dashboard-widgets .postbox form .submit {
  514. margin: 0;
  515. }
  516. /* Used only for configurable widgets. */
  517. .dashboard-widget-control-form p {
  518. margin-top: 0;
  519. }
  520. .rssSummary {
  521. color: #646970;
  522. margin-top: 4px;
  523. }
  524. #dashboard_primary .rss-widget {
  525. font-size: 13px;
  526. padding: 0 12px;
  527. }
  528. #dashboard_primary .rss-widget:last-child {
  529. border-bottom: none;
  530. padding-bottom: 8px;
  531. }
  532. #dashboard_primary .rss-widget a {
  533. font-weight: 400;
  534. }
  535. #dashboard_primary .rss-widget span,
  536. #dashboard_primary .rss-widget span.rss-date {
  537. color: #646970;
  538. }
  539. #dashboard_primary .rss-widget span.rss-date {
  540. margin-left: 12px;
  541. }
  542. #dashboard_primary .rss-widget ul li {
  543. padding: 4px 0;
  544. margin: 0;
  545. }
  546. /* Dashboard right now */
  547. #dashboard_right_now ul {
  548. margin: 0;
  549. /* contain floats but don't use overflow: hidden */
  550. display: inline-block;
  551. width: 100%;
  552. }
  553. #dashboard_right_now li {
  554. width: 50%;
  555. float: left;
  556. margin-bottom: 10px;
  557. }
  558. #dashboard_right_now .inside {
  559. padding: 0;
  560. }
  561. #dashboard_right_now .main {
  562. padding: 0 12px 11px;
  563. }
  564. #dashboard_right_now .main p {
  565. margin: 0;
  566. }
  567. #dashboard_right_now #wp-version-message .button {
  568. float: right;
  569. position: relative;
  570. top: -5px;
  571. margin-left: 5px;
  572. }
  573. #dashboard_right_now p.search-engines-info {
  574. margin: 1em 0;
  575. }
  576. .mu-storage {
  577. overflow: hidden;
  578. }
  579. #dashboard-widgets h3.mu-storage {
  580. margin: 0 0 10px;
  581. padding: 0;
  582. font-size: 14px;
  583. font-weight: 400;
  584. }
  585. /* Dashboard right now - Colors */
  586. #dashboard_right_now .sub {
  587. color: #50575e;
  588. background: #f6f7f7;
  589. border-top: 1px solid #f0f0f1;
  590. padding: 10px 12px 6px;
  591. }
  592. #dashboard_right_now .sub h3 {
  593. color: #50575e;
  594. }
  595. #dashboard_right_now .sub p {
  596. margin: 0 0 1em;
  597. }
  598. #dashboard_right_now .warning a:before,
  599. #dashboard_right_now .warning span:before {
  600. color: #d63638;
  601. }
  602. /* Dashboard Quick Draft */
  603. #dashboard_quick_press .inside {
  604. margin: 0;
  605. padding: 0;
  606. }
  607. #dashboard_quick_press div.updated {
  608. margin-bottom: 10px;
  609. border: 1px solid #f0f0f1;
  610. border-width: 1px 1px 1px 0;
  611. }
  612. #dashboard_quick_press form {
  613. margin: 12px;
  614. }
  615. #dashboard_quick_press .drafts {
  616. padding: 10px 0 0;
  617. }
  618. /* Dashboard Quick Draft - Form styling */
  619. #dashboard_quick_press label {
  620. display: inline-block;
  621. margin-bottom: 4px;
  622. }
  623. #dashboard_quick_press input,
  624. #dashboard_quick_press textarea {
  625. box-sizing: border-box;
  626. margin: 0;
  627. }
  628. #dashboard-widgets .postbox form .submit {
  629. margin: -39px 0;
  630. float: right;
  631. }
  632. #description-wrap {
  633. margin-top: 12px;
  634. }
  635. #quick-press textarea#content {
  636. min-height: 90px;
  637. max-height: 1300px;
  638. margin: 0 0 8px;
  639. padding: 6px 7px;
  640. resize: none;
  641. }
  642. /* Dashboard Quick Draft - Drafts list */
  643. .js #dashboard_quick_press .drafts {
  644. border-top: 1px solid #f0f0f1;
  645. }
  646. #dashboard_quick_press .drafts abbr {
  647. border: none;
  648. }
  649. #dashboard_quick_press .drafts .view-all {
  650. float: right;
  651. margin: 0 12px 0 0;
  652. }
  653. #dashboard_primary a.rsswidget {
  654. font-weight: 400;
  655. }
  656. #dashboard_quick_press .drafts ul {
  657. margin: 0 12px;
  658. }
  659. #dashboard_quick_press .drafts li {
  660. margin-bottom: 1em;
  661. }
  662. #dashboard_quick_press .drafts li time {
  663. color: #646970;
  664. }
  665. #dashboard_quick_press .drafts p {
  666. margin: 0;
  667. word-wrap: break-word;
  668. }
  669. #dashboard_quick_press .draft-title {
  670. word-wrap: break-word;
  671. }
  672. #dashboard_quick_press .draft-title a,
  673. #dashboard_quick_press .draft-title time {
  674. margin: 0 5px 0 0;
  675. }
  676. /* Dashboard common styles */
  677. #dashboard-widgets h4, /* Back-compat for pre-4.4 */
  678. #dashboard-widgets h3,
  679. #dashboard_quick_press .drafts h2 {
  680. margin: 0 12px 8px;
  681. padding: 0;
  682. font-size: 14px;
  683. font-weight: 400;
  684. color: #1d2327;
  685. }
  686. #dashboard_quick_press .drafts h2 {
  687. line-height: inherit;
  688. }
  689. #dashboard-widgets .inside h4, /* Back-compat for pre-4.4 */
  690. #dashboard-widgets .inside h3 {
  691. margin-left: 0;
  692. margin-right: 0;
  693. }
  694. /* Dashboard activity widget */
  695. #dashboard_activity .comment-meta span.approve:before {
  696. content: "\f227";
  697. font: 20px/.5 dashicons;
  698. margin-left: 5px;
  699. vertical-align: middle;
  700. position: relative;
  701. top: -1px;
  702. margin-right: 2px;
  703. }
  704. #dashboard_activity .inside {
  705. margin: 0;
  706. padding-bottom: 0;
  707. }
  708. #dashboard_activity .no-activity {
  709. overflow: hidden;
  710. padding: 12px 0;
  711. text-align: center;
  712. }
  713. #dashboard_activity .no-activity p {
  714. color: #646970;
  715. font-size: 16px;
  716. }
  717. #dashboard_activity .subsubsub {
  718. float: none;
  719. border-top: 1px solid #f0f0f1;
  720. margin: 0 -12px;
  721. padding: 8px 12px 4px;
  722. }
  723. #dashboard_activity .subsubsub a .count,
  724. #dashboard_activity .subsubsub a.current .count {
  725. color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */
  726. }
  727. #future-posts ul,
  728. #published-posts ul {
  729. clear: both;
  730. margin-bottom: 0;
  731. }
  732. #future-posts li,
  733. #published-posts li {
  734. margin-bottom: 8px;
  735. }
  736. #future-posts ul span,
  737. #published-posts ul span {
  738. display: inline-block;
  739. margin-right: 5px;
  740. min-width: 150px;
  741. color: #646970;
  742. }
  743. .activity-block {
  744. border-bottom: 1px solid #f0f0f1;
  745. margin: 0 -12px;
  746. padding: 8px 12px 4px;
  747. }
  748. .activity-block:last-child {
  749. border-bottom: none;
  750. }
  751. .activity-block .subsubsub li {
  752. color: #dcdcde;
  753. }
  754. /* Dashboard activity widget - Comments */
  755. /* @todo: needs serious de-duplication */
  756. #activity-widget #the-comment-list tr.undo,
  757. #activity-widget #the-comment-list div.undo {
  758. background: none;
  759. padding: 6px 0;
  760. margin-left: 12px;
  761. }
  762. #activity-widget #the-comment-list .comment-item {
  763. background: #f6f7f7;
  764. padding: 12px;
  765. position: relative;
  766. }
  767. #activity-widget #the-comment-list .avatar {
  768. position: absolute;
  769. top: 12px;
  770. }
  771. #activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar {
  772. padding-left: 63px;
  773. }
  774. #activity-widget #the-comment-list .dashboard-comment-wrap blockquote {
  775. margin: 1em 0;
  776. }
  777. #activity-widget #the-comment-list .comment-item p.row-actions {
  778. margin: 4px 0 0;
  779. }
  780. #activity-widget #the-comment-list .comment-item:first-child {
  781. border-top: 1px solid #f0f0f1;
  782. }
  783. #activity-widget #the-comment-list .unapproved {
  784. background-color: #fcf9e8;
  785. }
  786. #activity-widget #the-comment-list .unapproved:before {
  787. content: "";
  788. display: block;
  789. position: absolute;
  790. left: 0;
  791. top: 0;
  792. bottom: 0;
  793. background: #d63638;
  794. width: 4px;
  795. }
  796. #activity-widget #the-comment-list .spam-undo-inside .avatar,
  797. #activity-widget #the-comment-list .trash-undo-inside .avatar {
  798. position: relative;
  799. top: 0;
  800. }
  801. /* Browse happy box */
  802. #dashboard-widgets #dashboard_browser_nag.postbox .inside {
  803. margin: 10px;
  804. }
  805. .postbox .button-link .edit-box {
  806. display: none;
  807. }
  808. .edit-box {
  809. opacity: 0;
  810. }
  811. .hndle:hover .edit-box,
  812. .edit-box:focus {
  813. opacity: 1;
  814. }
  815. #dashboard-widgets form .input-text-wrap input {
  816. width: 100%;
  817. }
  818. #dashboard-widgets form .textarea-wrap textarea {
  819. width: 100%;
  820. }
  821. #dashboard-widgets .postbox form .submit {
  822. float: none;
  823. margin: .5em 0 0;
  824. padding: 0;
  825. border: none;
  826. }
  827. #dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish {
  828. min-width: 0;
  829. }
  830. #dashboard-widgets li a,
  831. #dashboard-widgets .button-link,
  832. .community-events-footer a {
  833. text-decoration: none;
  834. }
  835. #dashboard-widgets h2 a {
  836. text-decoration: underline;
  837. }
  838. #dashboard-widgets .hndle .postbox-title-action {
  839. float: right;
  840. line-height: 1.2;
  841. }
  842. #dashboard_plugins h5 {
  843. font-size: 14px;
  844. }
  845. /* Recent Comments */
  846. #latest-comments #the-comment-list {
  847. position: relative;
  848. margin: 0 -12px;
  849. }
  850. #activity-widget #the-comment-list .comment,
  851. #activity-widget #the-comment-list .pingback {
  852. box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
  853. }
  854. #activity-widget .comments #the-comment-list .alt {
  855. background-color: transparent;
  856. }
  857. #activity-widget #latest-comments #the-comment-list .comment-item {
  858. /* the row-actions paragraph is output only for users with 'edit_comment' capabilities,
  859. for other users this needs a min height equal to the gravatar image */
  860. min-height: 50px;
  861. margin: 0;
  862. padding: 12px;
  863. }
  864. #latest-comments #the-comment-list .pingback {
  865. padding-left: 12px !important;
  866. }
  867. #latest-comments #the-comment-list .comment-item:first-child {
  868. border-top: none;
  869. }
  870. #latest-comments #the-comment-list .comment-meta {
  871. line-height: 1.5;
  872. margin: 0;
  873. color: #646970;
  874. }
  875. #latest-comments #the-comment-list .comment-meta cite {
  876. font-style: normal;
  877. font-weight: 400;
  878. }
  879. #latest-comments #the-comment-list .comment-item blockquote,
  880. #latest-comments #the-comment-list .comment-item blockquote p {
  881. margin: 0;
  882. padding: 0;
  883. display: inline;
  884. }
  885. #latest-comments #the-comment-list .comment-item p.row-actions {
  886. margin: 3px 0 0;
  887. padding: 0;
  888. font-size: 13px;
  889. }
  890. /* Feeds */
  891. .rss-widget ul {
  892. margin: 0;
  893. padding: 0;
  894. list-style: none;
  895. }
  896. a.rsswidget {
  897. font-size: 13px;
  898. font-weight: 600;
  899. line-height: 1.4;
  900. }
  901. .rss-widget ul li {
  902. line-height: 1.5;
  903. margin-bottom: 12px;
  904. }
  905. .rss-widget span.rss-date {
  906. color: #646970;
  907. font-size: 13px;
  908. margin-left: 3px;
  909. }
  910. .rss-widget cite {
  911. display: block;
  912. text-align: right;
  913. margin: 0 0 1em;
  914. padding: 0;
  915. }
  916. .rss-widget cite:before {
  917. content: "\2014";
  918. }
  919. .dashboard-comment-wrap {
  920. word-wrap: break-word;
  921. }
  922. /* Browser Nag */
  923. #dashboard_browser_nag a.update-browser-link {
  924. font-size: 1.2em;
  925. font-weight: 600;
  926. }
  927. #dashboard_browser_nag a {
  928. text-decoration: underline;
  929. }
  930. #dashboard_browser_nag p.browser-update-nag.has-browser-icon {
  931. padding-right: 128px;
  932. }
  933. #dashboard_browser_nag .browser-icon {
  934. margin-top: -32px;
  935. }
  936. #dashboard_browser_nag.postbox {
  937. background-color: #b32d2e;
  938. background-image: none;
  939. border-color: #b32d2e;
  940. color: #fff;
  941. box-shadow: none;
  942. }
  943. #dashboard_browser_nag.postbox h2 {
  944. border-bottom-color: transparent;
  945. background: transparent none;
  946. color: #fff;
  947. box-shadow: none;
  948. }
  949. #dashboard_browser_nag a {
  950. color: #fff;
  951. }
  952. #dashboard_browser_nag.postbox .postbox-header {
  953. border-color: transparent;
  954. }
  955. #dashboard_browser_nag h2.hndle {
  956. border: none;
  957. font-weight: 600;
  958. font-size: 20px;
  959. padding-top: 10px;
  960. }
  961. .postbox#dashboard_browser_nag p a.dismiss {
  962. font-size: 14px;
  963. }
  964. .postbox#dashboard_browser_nag p,
  965. .postbox#dashboard_browser_nag a,
  966. .postbox#dashboard_browser_nag p.browser-update-nag {
  967. font-size: 16px;
  968. }
  969. /* PHP Nag */
  970. #dashboard_php_nag .dashicons-warning {
  971. color: #dba617;
  972. padding-right: 6px;
  973. }
  974. #dashboard_php_nag.php-no-security-updates .dashicons-warning,
  975. #dashboard_php_nag.php-version-lower-than-future-minimum .dashicons-warning {
  976. color: #d63638;
  977. }
  978. #dashboard_php_nag h2 {
  979. display: inline-block;
  980. }
  981. #dashboard_php_nag p {
  982. margin: 12px 0;
  983. }
  984. #dashboard_php_nag .button .dashicons-external {
  985. line-height: 25px;
  986. }
  987. .bigger-bolder-text {
  988. font-weight: 600;
  989. font-size: 14px;
  990. }
  991. /* =Media Queries
  992. -------------------------------------------------------------- */
  993. @media only screen and (min-width: 1600px) {
  994. .welcome-panel .welcome-panel-column-container {
  995. display: flex;
  996. justify-content: center;
  997. }
  998. .welcome-panel-column {
  999. width: 100%;
  1000. max-width: 460px;
  1001. }
  1002. }
  1003. /* one column on the dash */
  1004. @media only screen and (max-width: 799px) {
  1005. #wpbody-content #dashboard-widgets .postbox-container {
  1006. width: 100%;
  1007. }
  1008. #dashboard-widgets .meta-box-sortables {
  1009. min-height: 0;
  1010. }
  1011. .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
  1012. min-height: 100px;
  1013. }
  1014. #dashboard-widgets .meta-box-sortables.empty-container {
  1015. margin-bottom: 0;
  1016. }
  1017. }
  1018. /* two columns on the dash, but keep the setting if one is selected */
  1019. @media only screen and (min-width: 800px) and (max-width: 1499px) {
  1020. #wpbody-content #dashboard-widgets .postbox-container {
  1021. width: 49.5%;
  1022. }
  1023. #wpbody-content #dashboard-widgets #postbox-container-2,
  1024. #wpbody-content #dashboard-widgets #postbox-container-3,
  1025. #wpbody-content #dashboard-widgets #postbox-container-4 {
  1026. float: right;
  1027. width: 50.5%;
  1028. }
  1029. #dashboard-widgets #postbox-container-3 .empty-container,
  1030. #dashboard-widgets #postbox-container-4 .empty-container {
  1031. outline: none;
  1032. height: 0;
  1033. min-height: 0;
  1034. margin-bottom: 0;
  1035. }
  1036. #dashboard-widgets #postbox-container-3 .empty-container:after,
  1037. #dashboard-widgets #postbox-container-4 .empty-container:after {
  1038. display: none;
  1039. }
  1040. #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
  1041. width: 100%;
  1042. }
  1043. #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
  1044. outline: none;
  1045. height: 0;
  1046. min-height: 0;
  1047. margin-bottom: 0;
  1048. }
  1049. /* show the radio buttons for column prefs only for one or two columns */
  1050. .index-php .screen-layout,
  1051. .index-php .columns-prefs {
  1052. display: block;
  1053. }
  1054. .columns-prefs .columns-prefs-3,
  1055. .columns-prefs .columns-prefs-4 {
  1056. display: none;
  1057. }
  1058. #dashboard-widgets .postbox-container .empty-container:after {
  1059. display: block;
  1060. }
  1061. }
  1062. /* three columns on the dash */
  1063. @media only screen and (min-width: 1500px) and (max-width: 1800px) {
  1064. #wpbody-content #dashboard-widgets .postbox-container {
  1065. width: 33.5%;
  1066. }
  1067. #wpbody-content #dashboard-widgets #postbox-container-1 {
  1068. width: 33%;
  1069. }
  1070. #wpbody-content #dashboard-widgets #postbox-container-3,
  1071. #wpbody-content #dashboard-widgets #postbox-container-4 {
  1072. float: right;
  1073. }
  1074. #dashboard-widgets #postbox-container-4 .empty-container {
  1075. outline: none;
  1076. height: 0;
  1077. min-height: 0;
  1078. margin-bottom: 0;
  1079. }
  1080. #dashboard-widgets #postbox-container-4 .empty-container:after {
  1081. display: none;
  1082. }
  1083. #dashboard-widgets .postbox-container .empty-container:after {
  1084. display: block;
  1085. }
  1086. }
  1087. /* Always show the "Drag boxes here" CSS generated content on large screens. */
  1088. @media only screen and (min-width: 1801px) {
  1089. #dashboard-widgets .postbox-container .empty-container:after {
  1090. display: block;
  1091. }
  1092. }
  1093. @media screen and (max-width: 870px) {
  1094. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  1095. .welcome-panel .welcome-panel-column li {
  1096. display: inline-block;
  1097. margin-right: 13px;
  1098. }
  1099. /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
  1100. .welcome-panel .welcome-panel-column ul {
  1101. margin: 0.4em 0 0;
  1102. }
  1103. }
  1104. @media screen and (max-width: 1180px) and (min-width: 783px) {
  1105. .welcome-panel-column {
  1106. grid-template-columns: 1fr;
  1107. }
  1108. [class*="welcome-panel-icon"],
  1109. .welcome-panel-column > svg {
  1110. display: none;
  1111. }
  1112. }
  1113. @media screen and (max-width: 782px) {
  1114. .welcome-panel .welcome-panel-column-container {
  1115. grid-template-columns: 1fr;
  1116. box-sizing: border-box;
  1117. padding: 32px;
  1118. width: 100%;
  1119. }
  1120. .welcome-panel .welcome-panel-column-content {
  1121. max-width: 520px;
  1122. }
  1123. /* Keep the close icon from overlapping the Welcome text. */
  1124. .welcome-panel .welcome-panel-close {
  1125. overflow: hidden;
  1126. text-indent: 40px;
  1127. white-space: nowrap;
  1128. width: 20px;
  1129. height: 20px;
  1130. padding: 5px;
  1131. top: 5px;
  1132. right: 5px;
  1133. }
  1134. .welcome-panel .welcome-panel-close::before {
  1135. top: 5px;
  1136. left: -35px;
  1137. }
  1138. #dashboard-widgets h2 {
  1139. padding: 12px;
  1140. }
  1141. #dashboard_recent_comments #the-comment-list .comment-item .avatar {
  1142. height: 30px;
  1143. width: 30px;
  1144. margin: 4px 10px 5px 0;
  1145. }
  1146. .community-events-toggle-location {
  1147. height: 38px;
  1148. vertical-align: baseline;
  1149. }
  1150. .community-events-form .regular-text {
  1151. height: 32px;
  1152. }
  1153. #community-events-submit {
  1154. margin-bottom: 0;
  1155. /* Override .wp-core-ui .button */
  1156. vertical-align: top;
  1157. }
  1158. .community-events-form label,
  1159. #dashboard-widgets .community-events-cancel.button-link {
  1160. /* Same properties as the submit button for cross-browsers alignment. */
  1161. font-size: 14px;
  1162. line-height: normal;
  1163. height: auto;
  1164. padding: 6px 0;
  1165. border: 1px solid transparent;
  1166. }
  1167. .community-events .spinner {
  1168. margin-top: 7px;
  1169. }
  1170. }
  1171. /* Smartphone */
  1172. @media screen and (max-width: 600px) {
  1173. .welcome-panel-header {
  1174. padding: 32px 32px 64px;
  1175. }
  1176. .welcome-panel-header-image {
  1177. display: none;
  1178. }
  1179. }
  1180. @media screen and (max-width: 480px) {
  1181. .welcome-panel-column {
  1182. gap: 16px;
  1183. }
  1184. }
  1185. @media screen and (max-width: 360px) {
  1186. .welcome-panel-column {
  1187. grid-template-columns: 1fr;
  1188. }
  1189. [class*="welcome-panel-icon"],
  1190. .welcome-panel-column > svg {
  1191. display: none;
  1192. }
  1193. }
  1194. @media screen and (min-width: 355px) {
  1195. .community-events .event-info {
  1196. display: table-row;
  1197. float: left;
  1198. max-width: 59%;
  1199. }
  1200. .event-icon,
  1201. .event-icon[aria-hidden="true"] {
  1202. display: table-cell;
  1203. }
  1204. .event-info-inner {
  1205. display: table-cell;
  1206. }
  1207. .community-events .event-date-time {
  1208. float: right;
  1209. max-width: 39%;
  1210. }
  1211. .community-events .event-date,
  1212. .community-events .event-time {
  1213. text-align: right;
  1214. }
  1215. }