[Summary view] [Print] [Text view]

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