[Summary view] [Print] [Text view]

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