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