[Summary view] [Print] [Text view]

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