[Summary view] [Print] [Text view]

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