[Summary view] [Print] [Text view]

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