[Summary view] [Print] [Text view]

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