[Summary view] [Print] [Text view]

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