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