[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      margin-bottom: 0;
1877      padding: 0 6px 0 16px;
1878      background: #fff;
1879      border-radius: 0 0 4px 4px;
1880      color: #646970;
1881      box-shadow: 0 0 0 transparent;
1882      transition: box-shadow 0.1s linear;
1883  }
1884  
1885  #screen-meta-links .show-settings:hover,
1886  #screen-meta-links .show-settings:active,
1887  #screen-meta-links .show-settings:focus {
1888      color: #2c3338;
1889  }
1890  
1891  #screen-meta-links .show-settings:focus {
1892      border-color: var(--wp-admin-theme-color, #3858e9);
1893      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1894      /* Only visible in Windows High Contrast mode */
1895      outline: 2px solid transparent;
1896  }
1897  
1898  #screen-meta-links .show-settings:active {
1899      transform: none;
1900  }
1901  
1902  #screen-meta-links .show-settings:after {
1903      right: 0;
1904      content: "\f140";
1905      content: "\f140" / '';
1906      font: normal 20px/1.5 dashicons; /* line-height 1.5 = 30px to match compact button */
1907      display: inline-block;
1908      padding: 0 5px 0 0;
1909      vertical-align: top;
1910      -webkit-font-smoothing: antialiased;
1911      -moz-osx-font-smoothing: grayscale;
1912      text-decoration: none;
1913  }
1914  
1915  #screen-meta-links .screen-meta-active:after {
1916      content: "\f142";
1917      content: "\f142" / '';
1918  }
1919  
1920  /* end screen options and help tabs */
1921  
1922  .toggle-arrow {
1923      background-repeat: no-repeat;
1924      background-position: top left;
1925      background-color: transparent;
1926      height: 22px;
1927      line-height: 22px;
1928      display: block;
1929  }
1930  
1931  .toggle-arrow-active {
1932      background-position: bottom left;
1933  }
1934  
1935  #screen-options-wrap h5, /* Back-compat for old plugins */
1936  #screen-options-wrap legend,
1937  #contextual-help-wrap h5 {
1938      margin: 0;
1939      padding: 8px 0;
1940      font-size: 13px;
1941      font-weight: 600;
1942  }
1943  
1944  .metabox-prefs label {
1945      display: inline-block;
1946      padding-right: 15px;
1947      line-height: 2.35;
1948  }
1949  
1950  #number-of-columns {
1951      display: inline-block;
1952      vertical-align: middle;
1953      line-height: 30px;
1954  }
1955  
1956  .metabox-prefs input[type=checkbox] {
1957      margin-top: 0;
1958      margin-right: 6px;
1959  }
1960  
1961  .metabox-prefs label input,
1962  .metabox-prefs label input[type=checkbox] {
1963      margin: -4px 5px 0 0;
1964  }
1965  
1966  .metabox-prefs .columns-prefs label input {
1967      margin: -1px 2px 0 0;
1968  }
1969  
1970  .metabox-prefs label a {
1971      display: none;
1972  }
1973  
1974  .metabox-prefs .screen-options input,
1975  .metabox-prefs .screen-options label {
1976      margin-top: 0;
1977      margin-bottom: 0;
1978      vertical-align: middle;
1979  }
1980  
1981  .metabox-prefs .screen-options .screen-per-page {
1982      margin-right: 15px;
1983      padding-right: 0;
1984  }
1985  
1986  .metabox-prefs .screen-options label {
1987      line-height: 2.2;
1988      padding-right: 0;
1989  }
1990  
1991  .screen-options + .screen-options {
1992      margin-top: 10px;
1993  }
1994  
1995  .metabox-prefs .submit {
1996      margin-top: 1em;
1997      padding: 0;
1998  }
1999  
2000  /*------------------------------------------------------------------------------
2001    6.2 - Help Menu
2002  ------------------------------------------------------------------------------*/
2003  
2004  #contextual-help-wrap {
2005      padding: 0;
2006  }
2007  
2008  #contextual-help-columns {
2009      position: relative;
2010  }
2011  
2012  #contextual-help-back {
2013      position: absolute;
2014      top: 0;
2015      bottom: 0;
2016      left: 150px;
2017      right: 170px;
2018      border: 1px solid #c3c4c7;
2019      border-top: none;
2020      border-bottom: none;
2021      background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2022  }
2023  
2024  #contextual-help-wrap.no-sidebar #contextual-help-back {
2025      right: 0;
2026      border-right-width: 0;
2027      border-bottom-right-radius: 2px;
2028  }
2029  
2030  .contextual-help-tabs {
2031      float: left;
2032      width: 150px;
2033      margin: 0;
2034  }
2035  
2036  .contextual-help-tabs ul {
2037      margin: 1em 0;
2038  }
2039  
2040  .contextual-help-tabs li {
2041      margin-bottom: 0;
2042      list-style-type: none;
2043      border-style: solid;
2044      border-width: 0 0 0 2px;
2045      border-color: transparent;
2046  }
2047  
2048  .contextual-help-tabs a {
2049      display: block;
2050      padding: 5px 5px 5px 12px;
2051      line-height: 1.4;
2052      text-decoration: none;
2053      border: 1px solid transparent;
2054      border-right: none;
2055      border-left: none;
2056  }
2057  
2058  .contextual-help-tabs a:hover {
2059      color: #2c3338;
2060  }
2061  
2062  .contextual-help-tabs .active {
2063      padding: 0;
2064      margin: 0 -1px 0 0;
2065      border-left: 2px solid var(--wp-admin-theme-color);
2066      background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, white);
2067      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
2068  }
2069  
2070  .contextual-help-tabs .active a {
2071      border-color: #c3c4c7;
2072      color: #2c3338;
2073  }
2074  
2075  .contextual-help-tabs-wrap {
2076      padding: 0 20px;
2077      overflow: auto;
2078  }
2079  
2080  .help-tab-content {
2081      display: none;
2082      margin: 0 22px 12px 0;
2083      line-height: 1.6;
2084  }
2085  
2086  .help-tab-content.active {
2087      display: block;
2088  }
2089  
2090  .help-tab-content ul li {
2091      list-style-type: disc;
2092      margin-left: 18px;
2093  }
2094  
2095  .contextual-help-sidebar {
2096      width: 150px;
2097      float: right;
2098      padding: 0 8px 0 12px;
2099      overflow: auto;
2100  }
2101  
2102  /*------------------------------------------------------------------------------
2103    8.0 - Layout Blocks
2104  ------------------------------------------------------------------------------*/
2105  
2106  html.wp-toolbar {
2107      padding-top: var(--wp-admin--admin-bar--height);
2108      box-sizing: border-box;
2109      -ms-overflow-style: scrollbar; /* See ticket #48545 */
2110  }
2111  
2112  .widefat th,
2113  .widefat td {
2114      color: #50575e;
2115  }
2116  
2117  .widefat th,
2118  .widefat thead td,
2119  .widefat tfoot td {
2120      font-weight: 400;
2121  }
2122  
2123  .widefat thead tr th,
2124  .widefat thead tr td,
2125  .widefat tfoot tr th,
2126  .widefat tfoot tr td {
2127      color: #2c3338;
2128  }
2129  
2130  .widefat td p {
2131      margin: 2px 0 0.8em;
2132  }
2133  
2134  .widefat p,
2135  .widefat ol,
2136  .widefat ul {
2137      color: #2c3338;
2138  }
2139  
2140  .widefat .column-comment p {
2141      margin: 0.6em 0;
2142  }
2143  
2144  .widefat .column-comment ul {
2145      list-style: initial;
2146      margin-left: 2em;
2147  }
2148  
2149  /* Screens with postboxes */
2150  .postbox-container {
2151      float: left;
2152  }
2153  
2154  .postbox-container .meta-box-sortables {
2155      box-sizing: border-box;
2156  }
2157  
2158  #wpbody-content .metabox-holder {
2159      padding-top: 10px;
2160  }
2161  
2162  .metabox-holder .postbox-container .meta-box-sortables {
2163      /* The jQuery UI Sortables need some initial height to work properly. */
2164      min-height: 1px;
2165      position: relative;
2166  }
2167  
2168  #post-body-content {
2169      width: 100%;
2170      min-width: 463px;
2171      float: left;
2172  }
2173  
2174  #post-body.columns-2 #postbox-container-1 {
2175      float: right;
2176      margin-right: -300px;
2177      width: 280px;
2178  }
2179  
2180  #post-body.columns-2 #side-sortables {
2181      min-height: 250px;
2182  }
2183  
2184  /* one column on the dash */
2185  @media only screen and (max-width: 799px) {
2186      #wpbody-content .metabox-holder .postbox-container .empty-container {
2187          outline: none;
2188          height: 0;
2189          min-height: 0;
2190      }
2191  }
2192  
2193  .js .widget .widget-top,
2194  .js .postbox .hndle {
2195      cursor: move;
2196  }
2197  
2198  .js .widget .widget-top.is-non-sortable,
2199  .js .postbox .hndle.is-non-sortable {
2200      cursor: auto;
2201  }
2202  
2203  /* Configurable dashboard widgets "Configure" edit-box link. */
2204  .hndle a {
2205      font-size: 12px;
2206      font-weight: 400;
2207  }
2208  
2209  .postbox-header {
2210      display: flex;
2211      align-items: center;
2212      justify-content: space-between;
2213      border-bottom: 1px solid #c3c4c7;
2214  }
2215  
2216  .postbox-header .hndle {
2217      flex-grow: 1;
2218      /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
2219      display: flex;
2220      justify-content: space-between;
2221      align-items: center;
2222  }
2223  
2224  .postbox-header .handle-actions {
2225      flex-shrink: 0;
2226  }
2227  
2228  /* Post box order and toggle buttons. */
2229  .postbox .handle-order-higher,
2230  .postbox .handle-order-lower,
2231  .postbox .handlediv {
2232      width: 1.62rem;
2233      height: 1.62rem;
2234      margin: 0;
2235      padding: 0;
2236      border: 0;
2237      background: none;
2238      cursor: pointer;
2239  }
2240  
2241  .postbox .handle-order-higher,
2242  .postbox .handle-order-lower {
2243      color: #646970;
2244      width: 1.62rem;
2245  }
2246  
2247  /* Post box order buttons in the block editor meta boxes area. */
2248  .edit-post-meta-boxes-area .postbox .handle-order-higher,
2249  .edit-post-meta-boxes-area .postbox .handle-order-lower {
2250      width: 44px;
2251      height: 44px;
2252      color: #1d2327
2253  }
2254  
2255  .postbox .handle-order-higher[aria-disabled="true"],
2256  .postbox .handle-order-lower[aria-disabled="true"] {
2257      cursor: default;
2258      color: #a7aaad;
2259  }
2260  
2261  .sortable-placeholder:not(.empty-container .sortable-placeholder) {
2262      border: 1px dashed #c3c4c7;
2263      border-radius: 8px;
2264      margin-bottom: 20px;
2265  }
2266  
2267  .postbox,
2268  .stuffbox {
2269      margin-bottom: 20px;
2270      padding: 0;
2271      line-height: 1;
2272  }
2273  
2274  .postbox.closed .postbox-header {
2275      border-bottom: 0;
2276  }
2277  
2278  /* user-select is not a part of the CSS standard - may change behavior in the future */
2279  .postbox .hndle,
2280  .stuffbox .hndle {
2281      -webkit-user-select: none;
2282      user-select: none;
2283  }
2284  
2285  .postbox .inside {
2286      padding: 0 12px 12px;
2287      line-height: 1.4;
2288      font-size: 13px;
2289  }
2290  
2291  .stuffbox .inside {
2292      padding: 0;
2293      line-height: 1.4;
2294      font-size: 13px;
2295      margin-top: 0;
2296  }
2297  
2298  .postbox .inside {
2299      margin: 11px 0;
2300      position: relative;
2301  }
2302  
2303  .postbox .inside > p:last-child,
2304  .rss-widget ul li:last-child {
2305      margin-bottom: 1px !important;
2306  }
2307  
2308  .postbox.closed h3 {
2309      border: none;
2310      box-shadow: none;
2311  }
2312  
2313  .postbox table.form-table {
2314      margin-bottom: 0;
2315  }
2316  
2317  .postbox table.widefat {
2318      box-shadow: none;
2319  }
2320  
2321  .temp-border {
2322      border: 1px dotted #c3c4c7;
2323  }
2324  
2325  .columns-prefs label {
2326      padding: 0 10px 0 0;
2327  }
2328  
2329  /* @todo: what is this doing here */
2330  #dashboard_right_now .versions .b,
2331  #post-status-display,
2332  #post-visibility-display,
2333  #adminmenu .wp-submenu li.current,
2334  #adminmenu .wp-submenu li.current a,
2335  #adminmenu .wp-submenu li.current a:hover,
2336  .media-item .percent,
2337  .plugins .name,
2338  #pass-strength-result.strong,
2339  #pass-strength-result.short,
2340  #ed_reply_toolbar #ed_reply_strong,
2341  .item-controls .item-order a,
2342  .feature-filter .feature-name,
2343  #comment-status-display {
2344      font-weight: 600;
2345  }
2346  
2347  /*------------------------------------------------------------------------------
2348    21.0 - Admin Footer
2349  ------------------------------------------------------------------------------*/
2350  
2351  #wpfooter {
2352      position: absolute;
2353      bottom: 0;
2354      left: 0;
2355      right: 0;
2356      padding: 10px 20px;
2357      color: #50575e;
2358  }
2359  
2360  #wpfooter p {
2361      font-size: 13px;
2362      margin: 0;
2363      line-height: 1.55;
2364  }
2365  
2366  #footer-thankyou {
2367      font-style: italic;
2368  }
2369  
2370  /*------------------------------------------------------------------------------
2371    25.0 - Tabbed Admin Screen Interface (Experimental)
2372  ------------------------------------------------------------------------------*/
2373  
2374  .nav-tab {
2375      float: left;
2376      border: 1px solid #c3c4c7;
2377      border-bottom: none;
2378      margin-left: 0.5em; /* half the font size so set the font size properly */
2379      padding: 5px 10px;
2380      font-size: 14px;
2381      line-height: 1.71428571;
2382      font-weight: 600;
2383      background: #dcdcde;
2384      color: #50575e;
2385      text-decoration: none;
2386      white-space: nowrap;
2387  }
2388  
2389  h3 .nav-tab, /* Back-compat for pre-4.4 */
2390  .nav-tab-small .nav-tab {
2391      padding: 5px 14px;
2392      font-size: 12px;
2393      line-height: 1.33;
2394  }
2395  
2396  .nav-tab:hover,
2397  .nav-tab:focus {
2398      background-color: #fff;
2399      color: #3c434a;
2400  }
2401  
2402  .nav-tab-active,
2403  .nav-tab:focus:active {
2404      box-shadow: none;
2405  }
2406  
2407  .nav-tab-active {
2408      margin-bottom: -1px;
2409      color: #3c434a;
2410  }
2411  
2412  .nav-tab-active,
2413  .nav-tab-active:hover,
2414  .nav-tab-active:focus,
2415  .nav-tab-active:focus:active {
2416      border-bottom: 1px solid #f0f0f1;
2417      background: #f0f0f1;
2418      color: #000;
2419  }
2420  
2421  h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
2422  .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
2423  .nav-tab-wrapper {
2424      border-bottom: 1px solid #c3c4c7;
2425      margin: 0;
2426      padding-top: 9px;
2427      padding-bottom: 0;
2428      line-height: inherit;
2429  }
2430  
2431  /* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */
2432  .nav-tab-wrapper:not(.wp-clearfix):after {
2433      content: "";
2434      display: table;
2435      clear: both;
2436  }
2437  
2438  /*------------------------------------------------------------------------------
2439    26.0 - Misc
2440  ------------------------------------------------------------------------------*/
2441  
2442  .spinner {
2443      background: url(../images/spinner.gif) no-repeat;
2444      background-size: 20px 20px;
2445      display: inline-block;
2446      visibility: hidden;
2447      float: right;
2448      vertical-align: middle;
2449      opacity: 0.7;
2450      filter: alpha(opacity=70);
2451      width: 20px;
2452      height: 20px;
2453      margin: 10px 10px 0;
2454  }
2455  
2456  .spinner.is-active,
2457  .loading-content .spinner {
2458      visibility: visible;
2459  }
2460  
2461  #template > div {
2462      margin-right: 16em;
2463  }
2464  #template .notice {
2465      margin-top: 1em;
2466      margin-right: 3%;
2467  }
2468  #template .notice p {
2469      width: auto;
2470  }
2471  #template .submit .spinner {
2472      float: none;
2473      vertical-align: top;
2474  }
2475  
2476  .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
2477  .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
2478  .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
2479  .metabox-holder h2.hndle {
2480      font-size: 14px;
2481      padding: 8px 12px;
2482      margin: 0;
2483      line-height: 1.4;
2484  }
2485  
2486  /* Back-compat for nav-menus screen */
2487  .nav-menus-php .metabox-holder h3 {
2488      padding: 0;
2489  }
2490  
2491  .accordion-container h3.accordion-section-title {
2492      padding: 0 !important;
2493  }
2494  
2495  .accordion-section-title button.accordion-trigger,
2496  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
2497      background: inherit;
2498      color: #1d2327;
2499      display: block;
2500      position: relative;
2501      text-align: left;
2502      width: 100%;
2503      outline: none;
2504      border: 0;
2505      padding: 10px 10px 11px 14px;
2506      line-height: 1.5;
2507      cursor: pointer;
2508  }
2509  
2510  .accordion-section-title button.accordion-trigger:focus,
2511  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
2512      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
2513      outline: 2px solid transparent;
2514  }
2515  
2516  .accordion-section-title span.dashicons.dashicons-arrow-down,
2517  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
2518      position: absolute;
2519      right: 10px;
2520      left: auto;
2521      color: #787c82;
2522      border-radius: 50px;
2523      top: 50%;
2524      transform: translateY(-50%);
2525  }
2526  
2527  .accordion-section-title:hover span.dashicons.dashicons-arrow-down,
2528  .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
2529      color: #1d2327;
2530  }
2531  
2532  .accordion-section-title span.dashicons.dashicons-arrow-down::before,
2533  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
2534      position: relative;
2535      left: -1px;
2536  }
2537  
2538  .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
2539  .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
2540      transform: rotate(180deg) translate(0, 50%);
2541  }
2542  
2543  #templateside ul li a {
2544      text-decoration: none;
2545  }
2546  
2547  .plugin-install #description,
2548  .plugin-install-network #description {
2549      width: 60%;
2550  }
2551  
2552  table .vers,
2553  table .column-visible,
2554  table .column-rating {
2555      text-align: left;
2556  }
2557  
2558  .attention,
2559  .error-message {
2560      color: #d63638;
2561      font-weight: 600;
2562  }
2563  
2564  /* Scrollbar fix for bulk upgrade iframe */
2565  body.iframe {
2566      height: 98%;
2567  }
2568  
2569  /* Upgrader styles, Specific to Language Packs */
2570  .lp-show-latest p {
2571      display: none;
2572  }
2573  .lp-show-latest p:last-child,
2574  .lp-show-latest .lp-error p {
2575      display: block;
2576  }
2577  
2578  /* - Only used once or twice in all of WP - deprecate for global style
2579  ------------------------------------------------------------------------------*/
2580  .media-icon {
2581      width: 62px; /* icon + border */
2582      text-align: center;
2583  }
2584  
2585  .media-icon img {
2586      border: 1px solid #dcdcde;
2587      border: 1px solid rgba(0, 0, 0, 0.07);
2588  }
2589  
2590  #howto {
2591      font-size: 11px;
2592      margin: 0 5px;
2593      display: block;
2594  }
2595  
2596  .importers {
2597      font-size: 16px;
2598      width: auto;
2599  }
2600  
2601  .importers td {
2602      padding-right: 14px;
2603      line-height: 1.4;
2604  }
2605  
2606  .importers .import-system {
2607      max-width: 250px;
2608  }
2609  
2610  .importers td.desc {
2611      max-width: 500px;
2612  }
2613  
2614  .importer-title,
2615  .importer-desc,
2616  .importer-action {
2617      display: block;
2618  }
2619  
2620  .importer-title {
2621      color: #000;
2622      font-size: 14px;
2623      font-weight: 400;
2624      margin-bottom: .2em;
2625  }
2626  
2627  .importer-action {
2628      line-height: 1.55; /* Same as with .updating-message */
2629      color: #50575e;
2630      margin-bottom: 1em;
2631  }
2632  
2633  #post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */
2634  #post-body #post-body-content #namediv h2 {
2635      margin-top: 0;
2636  }
2637  
2638  .edit-comment-author {
2639      color: #1d2327;
2640      border-bottom: 1px solid #f0f0f1;
2641  }
2642  
2643  #namediv h3 label, /* Back-compat for pre-4.4 */
2644  #namediv h2 label {
2645      vertical-align: baseline;
2646  }
2647  
2648  #namediv table {
2649      width: 100%;
2650  }
2651  
2652  #namediv td.first {
2653      width: 10px;
2654      white-space: nowrap;
2655  }
2656  
2657  #namediv input {
2658      width: 100%;
2659  }
2660  
2661  #namediv p {
2662      margin: 10px 0;
2663  }
2664  
2665  /* - Used - but could/should be deprecated with a CSS reset
2666  ------------------------------------------------------------------------------*/
2667  .zerosize {
2668      height: 0;
2669      width: 0;
2670      margin: 0;
2671      border: 0;
2672      padding: 0;
2673      overflow: hidden;
2674      position: absolute;
2675  }
2676  
2677  br.clear {
2678      height: 2px;
2679      line-height: 0.15;
2680  }
2681  
2682  .checkbox {
2683      border: none;
2684      margin: 0;
2685      padding: 0;
2686  }
2687  
2688  fieldset {
2689      border: 0;
2690      padding: 0;
2691      margin: 0;
2692  }
2693  
2694  .post-categories {
2695      display: inline;
2696      margin: 0;
2697      padding: 0;
2698  }
2699  
2700  .post-categories li {
2701      display: inline;
2702  }
2703  
2704  /* Star Ratings - Back-compat for pre-3.8 */
2705  div.star-holder {
2706      position: relative;
2707      height: 17px;
2708      width: 100px;
2709      background: url(../images/stars.png?ver=20121108) repeat-x bottom left;
2710  }
2711  
2712  div.star-holder .star-rating {
2713      background: url(../images/stars.png?ver=20121108) repeat-x top left;
2714      height: 17px;
2715      float: left;
2716  }
2717  
2718  /* Star Ratings */
2719  .star-rating {
2720      white-space: nowrap;
2721  }
2722  .star-rating .star {
2723      display: inline-block;
2724      width: 20px;
2725      height: 20px;
2726      -webkit-font-smoothing: antialiased;
2727      font-size: 20px;
2728      line-height: 1;
2729      font-family: dashicons;
2730      text-decoration: inherit;
2731      font-weight: 400;
2732      font-style: normal;
2733      vertical-align: top;
2734      transition: color .1s ease-in;
2735      text-align: center;
2736      color: #dba617;
2737  }
2738  
2739  .star-rating .star-full:before {
2740      content: "\f155";
2741      content: "\f155" / '';
2742  }
2743  
2744  .star-rating .star-half:before {
2745      content: "\f459";
2746      content: "\f459" / '';
2747  }
2748  
2749  .rtl .star-rating .star-half {
2750      transform: rotateY(180deg);
2751  }
2752  
2753  .star-rating .star-empty:before {
2754      content: "\f154";
2755      content: "\f154" / '';
2756  }
2757  
2758  div.action-links {
2759      font-weight: 400;
2760      margin: 6px 0 0;
2761  }
2762  
2763  /* Plugin install thickbox */
2764  #plugin-information {
2765      background: #fff;
2766      position: fixed;
2767      top: 0;
2768      right: 0;
2769      bottom: 0;
2770      left: 0;
2771      height: 100%;
2772      padding: 0;
2773  }
2774  
2775  #plugin-information-scrollable {
2776      overflow: auto;
2777      -webkit-overflow-scrolling: touch;
2778      height: 100%;
2779  }
2780  
2781  #plugin-information-title {
2782      padding: 0 26px;
2783      background: #f6f7f7;
2784      font-size: 22px;
2785      font-weight: 600;
2786      line-height: 2.4;
2787      position: relative;
2788      height: 56px;
2789  }
2790  
2791  #plugin-information-title.with-banner {
2792      margin-right: 0;
2793      height: 250px;
2794      background-size: cover;
2795  }
2796  
2797  #plugin-information-title h2 {
2798      font-size: 1em;
2799      font-weight: 600;
2800      padding: 0;
2801      margin: 0;
2802      overflow: hidden;
2803      text-overflow: ellipsis;
2804      white-space: nowrap;
2805  }
2806  
2807  #plugin-information-title.with-banner h2 {
2808      position: relative;
2809      font-family: "Helvetica Neue", sans-serif;
2810      display: inline-block;
2811      font-size: 30px;
2812      line-height: 1.68;
2813      box-sizing: border-box;
2814      max-width: 100%;
2815      padding: 0 15px;
2816      margin-top: 174px;
2817      color: #fff;
2818      background: rgba(29, 35, 39, 0.9);
2819      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
2820      box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
2821      border-radius: 8px;
2822  }
2823  
2824  #plugin-information-title div.vignette {
2825      display: none;
2826  }
2827  
2828  #plugin-information-title.with-banner div.vignette {
2829      position: absolute;
2830      display: block;
2831      top: 0;
2832      left: 0;
2833      height: 250px;
2834      width: 100%;
2835      background: transparent;
2836      box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2837  }
2838  
2839  #plugin-information-tabs {
2840      padding: 0 16px;
2841      position: relative;
2842      right: 0;
2843      left: 0;
2844      min-height: 36px;
2845      font-size: 0;
2846      z-index: 1;
2847      border-bottom: 1px solid #dcdcde;
2848      background: #f6f7f7;
2849  }
2850  
2851  #plugin-information-tabs a {
2852      position: relative;
2853      display: inline-block;
2854      padding: 9px 10px;
2855      margin: 0;
2856      height: 18px;
2857      line-height: 1.3;
2858      font-size: 14px;
2859      text-decoration: none;
2860      transition: none;
2861  }
2862  
2863  #plugin-information-tabs a.current {
2864      margin: 0 -1px -1px;
2865      background: #fff;
2866      border: 1px solid #dcdcde;
2867      border-bottom-color: #fff;
2868      padding-top: 8px;
2869      color: #2c3338;
2870  }
2871  
2872  #plugin-information-tabs.with-banner a.current {
2873      border-top: none;
2874      padding-top: 9px;
2875  }
2876  
2877  #plugin-information-tabs a:active,
2878  #plugin-information-tabs a:focus {
2879      outline: none;
2880  }
2881  
2882  #plugin-information-content {
2883      overflow: hidden; /* equal height column trick */
2884      background: #fff;
2885      position: relative;
2886      top: 0;
2887      right: 0;
2888      left: 0;
2889      min-height: 100%;
2890      /* Height of title + tabs + install now */
2891      min-height: calc( 100% - 152px );
2892  }
2893  
2894  #plugin-information-content.with-banner {
2895      /* Height of banner + tabs + install now */
2896      min-height: calc( 100% - 346px );
2897  }
2898  
2899  #section-holder {
2900      position: relative;
2901      top: 0;
2902      right: 250px;
2903      bottom: 0;
2904      left: 0;
2905      margin-top: 10px;
2906      margin-right: 250px; /* FYI box */
2907      padding: 10px 26px 99999px; /* equal height column trick */
2908      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2909  }
2910  
2911  #section-holder .notice {
2912      margin: 5px 0 15px;
2913  }
2914  
2915  #section-holder .updated {
2916      margin: 16px 0;
2917  }
2918  
2919  #plugin-information .fyi {
2920      float: right;
2921      position: relative;
2922      top: 0;
2923      right: 0;
2924      padding: 16px 16px 99999px; /* equal height column trick */
2925      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2926      width: 217px;
2927      border-left: 1px solid #dcdcde;
2928      background: #f6f7f7;
2929      color: #646970;
2930  }
2931  
2932  #plugin-information .fyi strong {
2933      color: #3c434a;
2934  }
2935  
2936  #plugin-information .fyi h3 {
2937      font-weight: 600;
2938      text-transform: uppercase;
2939      font-size: 12px;
2940      color: #646970;
2941      margin: 24px 0 8px;
2942  }
2943  
2944  #plugin-information .fyi h2 {
2945      font-size: 0.9em;
2946      margin-bottom: 0;
2947      margin-right: 0;
2948  }
2949  
2950  #plugin-information .fyi ul {
2951      padding: 0;
2952      margin: 0;
2953      list-style: none;
2954  }
2955  
2956  #plugin-information .fyi li {
2957      margin: 0 0 10px;
2958  }
2959  
2960  #plugin-information .fyi-description {
2961      margin-top: 0;
2962  }
2963  
2964  #plugin-information .counter-container {
2965      margin: 3px 0;
2966  }
2967  
2968  #plugin-information .counter-label {
2969      float: left;
2970      margin-right: 5px;
2971      min-width: 55px;
2972  }
2973  
2974  #plugin-information .counter-back {
2975      height: 17px;
2976      width: 92px;
2977      background-color: #dcdcde;
2978      float: left;
2979  }
2980  
2981  #plugin-information .counter-bar {
2982      height: 17px;
2983      background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
2984      float: left;
2985  }
2986  
2987  #plugin-information .counter-count {
2988      margin-left: 5px;
2989  }
2990  
2991  #plugin-information .fyi ul.contributors {
2992      margin-top: 10px;
2993  }
2994  
2995  #plugin-information .fyi ul.contributors li {
2996      display: inline-block;
2997      margin-right: 8px;
2998      vertical-align: middle;
2999  }
3000  
3001  #plugin-information .fyi ul.contributors li {
3002      display: inline-block;
3003      margin-right: 8px;
3004      vertical-align: middle;
3005  }
3006  
3007  #plugin-information .fyi ul.contributors li img {
3008      vertical-align: middle;
3009      margin-right: 4px;
3010  }
3011  
3012  #plugin-information-footer {
3013      padding: 13px 16px;
3014      position: absolute;
3015      right: 0;
3016      bottom: 0;
3017      left: 0;
3018      height: 40px; /* actual height: 40+13+13+1=67 */
3019      border-top: 1px solid #dcdcde;
3020      background: #f6f7f7;
3021  }
3022  
3023  /* rtl:ignore */
3024  #plugin-information .section {
3025      direction: ltr;
3026  }
3027  
3028  /* rtl:ignore */
3029  #plugin-information .section ul,
3030  #plugin-information .section ol {
3031      list-style-type: disc;
3032      margin-left: 24px;
3033  }
3034  
3035  #plugin-information .section,
3036  #plugin-information .section p {
3037      font-size: 14px;
3038      line-height: 1.7;
3039  }
3040  
3041  #plugin-information #section-screenshots ol {
3042      list-style: none;
3043      margin: 0;
3044  }
3045  
3046  #plugin-information #section-screenshots li img {
3047      vertical-align: text-top;
3048      margin-top: 16px;
3049      max-width: 100%;
3050      width: auto;
3051      height: auto;
3052      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
3053  }
3054  
3055  /* rtl:ignore */
3056  #plugin-information #section-screenshots li p {
3057      font-style: italic;
3058      padding-left: 20px;
3059  }
3060  
3061  #plugin-information pre {
3062      padding: 7px;
3063      overflow: auto;
3064      border: 1px solid #c3c4c7;
3065  }
3066  
3067  #plugin-information blockquote {
3068      border-left: 2px solid #dcdcde;
3069      color: #646970;
3070      font-style: italic;
3071      margin: 1em 0;
3072      padding: 0 0 0 1em;
3073  }
3074  
3075  /* rtl:ignore */
3076  #plugin-information .review {
3077      overflow: hidden; /* clearfix */
3078      width: 100%;
3079      margin-bottom: 20px;
3080      border-bottom: 1px solid #dcdcde;
3081  }
3082  
3083  #plugin-information .review-title-section {
3084      overflow: hidden; /* clearfix */
3085  }
3086  
3087  /* rtl:ignore */
3088  #plugin-information .review-title-section h4 {
3089      display: inline-block;
3090      float: left;
3091      margin: 0 6px 0 0;
3092  }
3093  
3094  #plugin-information .reviewer-info p {
3095      clear: both;
3096      margin: 0;
3097      padding-top: 2px;
3098  }
3099  
3100  /* rtl:ignore */
3101  #plugin-information .reviewer-info .avatar {
3102      float: left;
3103      margin: 4px 6px 0 0;
3104  }
3105  
3106  /* rtl:ignore */
3107  #plugin-information .reviewer-info .star-rating {
3108      float: left;
3109  }
3110  
3111  /* rtl:ignore */
3112  #plugin-information .review-meta {
3113      float: left;
3114      margin-left: 0.75em;
3115  }
3116  
3117  /* rtl:ignore */
3118  #plugin-information .review-body {
3119      float: left;
3120      width: 100%;
3121  }
3122  
3123  .plugin-version-author-uri {
3124      font-size: 13px;
3125  }
3126  
3127  /* For non-js plugin installation screen ticket #36430. */
3128  .update-php .button.button-primary {
3129      margin-right: 1em;
3130  }
3131  
3132  @media screen and (max-width: 771px) {
3133      #plugin-information-title.with-banner {
3134          height: 100px;
3135      }
3136  
3137      #plugin-information-title.with-banner h2 {
3138          margin-top: 30px;
3139          font-size: 20px;
3140          line-height: 2;
3141          max-width: 85%;
3142      }
3143  
3144      #plugin-information-title.with-banner div.vignette {
3145          height: 100px;
3146      }
3147  
3148      #plugin-information-tabs {
3149          overflow: hidden; /* clearfix */
3150          padding: 0;
3151          height: auto; /* let tabs wrap */
3152      }
3153  
3154      #plugin-information-tabs a.current {
3155          margin-bottom: 0;
3156          border-bottom: none;
3157      }
3158  
3159      #plugin-information .fyi {
3160          float: none;
3161          border: 1px solid #dcdcde;
3162          position: static;
3163          width: auto;
3164          margin: 26px 26px 0;
3165          padding-bottom: 0; /* reset from the two column height fix */
3166      }
3167  
3168      #section-holder {
3169          position: static;
3170          margin: 0;
3171          padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */
3172      }
3173  
3174      #plugin-information .fyi h3,
3175      #plugin-information .fyi small {
3176          display: none;
3177      }
3178  
3179      #plugin-information-footer {
3180          padding: 12px 16px 0;
3181          height: 46px;
3182      }
3183  }
3184  
3185  /* Thickbox for the Plugin details modal. */
3186  #TB_window.plugin-details-modal {
3187      background: #fff;
3188  }
3189  
3190  #TB_window.plugin-details-modal.thickbox-loading:before {
3191      content: "";
3192      display: block;
3193      width: 20px;
3194      height: 20px;
3195      position: absolute;
3196      left: 50%;
3197      top: 50%;
3198      z-index: -1;
3199      margin: -10px 0 0 -10px;
3200      background: #fff url(../images/spinner.gif) no-repeat center;
3201      background-size: 20px 20px;
3202      transform: translateZ(0);
3203  }
3204  
3205  @media print,
3206      (min-resolution: 120dpi) {
3207  
3208      #TB_window.plugin-details-modal.thickbox-loading:before {
3209          background-image: url(../images/spinner-2x.gif);
3210      }
3211  }
3212  
3213  .plugin-details-modal #TB_title {
3214      float: left;
3215      height: 1px;
3216  }
3217  
3218  .plugin-details-modal #TB_ajaxWindowTitle {
3219      display: none;
3220  }
3221  
3222  .plugin-details-modal #TB_closeWindowButton {
3223      left: auto;
3224      right: -30px;
3225      color: #f0f0f1;
3226  }
3227  
3228  .plugin-details-modal #TB_closeWindowButton:hover,
3229  .plugin-details-modal #TB_closeWindowButton:focus {
3230      outline: none;
3231      box-shadow: none;
3232  }
3233  
3234  .plugin-details-modal #TB_closeWindowButton:hover::after,
3235  .plugin-details-modal #TB_closeWindowButton:focus::after {
3236      outline: 2px solid;
3237      outline-offset: -4px;
3238      border-radius: 4px;
3239  }
3240  
3241  .plugin-details-modal .tb-close-icon {
3242      display: none;
3243  }
3244  
3245  .plugin-details-modal #TB_closeWindowButton:after {
3246      content: "\f335";
3247      content: "\f335" / '';
3248      font: normal 32px/29px 'dashicons';
3249      -webkit-font-smoothing: antialiased;
3250      -moz-osx-font-smoothing: grayscale;
3251  }
3252  
3253  /* move plugin install close icon to top on narrow screens */
3254  @media screen and (max-width: 830px) {
3255      .plugin-details-modal #TB_closeWindowButton {
3256          right: 0;
3257          top: -30px;
3258      }
3259  }
3260  
3261  /* @todo: move this. */
3262  img {
3263      border: none;
3264  }
3265  
3266  /* Metabox collapse arrow indicators */
3267  .sidebar-name .toggle-indicator::before,
3268  .meta-box-sortables .postbox .toggle-indicator::before,
3269  .meta-box-sortables .postbox .order-higher-indicator::before,
3270  .meta-box-sortables .postbox .order-lower-indicator::before,
3271  .bulk-action-notice .toggle-indicator::before,
3272  .privacy-text-box .toggle-indicator::before {
3273      content: "\f142";
3274      content: "\f142" / '';
3275      display: inline-block;
3276      font: normal 20px/1 dashicons;
3277      -webkit-font-smoothing: antialiased;
3278      -moz-osx-font-smoothing: grayscale;
3279      text-decoration: none;
3280  }
3281  
3282  .js .widgets-holder-wrap.closed .toggle-indicator::before,
3283  .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
3284  .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
3285  .privacy-text-box.closed .toggle-indicator::before {
3286      content: "\f140";
3287      content: "\f140" / '';
3288  }
3289  
3290  .postbox .handle-order-higher .order-higher-indicator::before {
3291      content: "\f343";
3292      content: "\f343" / '';
3293      color: inherit;
3294  }
3295  
3296  .postbox .handle-order-lower .order-lower-indicator::before {
3297      content: "\f347";
3298      content: "\f347" / '';
3299      color: inherit;
3300  }
3301  
3302  .postbox .handle-order-higher .order-higher-indicator::before,
3303  .postbox .handle-order-lower .order-lower-indicator::before {
3304      position: relative;
3305      top: 0.11rem;
3306      width: 20px;
3307      height: 20px;
3308  }
3309  
3310  .postbox .handlediv .toggle-indicator::before {
3311      width: 20px;
3312      border-radius: 50%;
3313  }
3314  
3315  .postbox .handlediv .toggle-indicator::before {
3316      position: relative;
3317      top: 0.05rem;
3318      text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
3319  }
3320  
3321  .rtl .postbox .handlediv .toggle-indicator::before {
3322      text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
3323  }
3324  
3325  .bulk-action-notice .toggle-indicator::before {
3326      line-height: 16px;
3327      vertical-align: top;
3328      color: #787c82;
3329  }
3330  
3331  .postbox .handle-order-higher:focus,
3332  .postbox .handle-order-lower:focus,
3333  .postbox .handlediv:focus {
3334      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
3335      border-radius: 50%;
3336      /* Only visible in Windows High Contrast mode */
3337      outline: 2px solid transparent;
3338  }
3339  
3340  .postbox .handle-order-higher:focus .order-higher-indicator::before,
3341  .postbox .handle-order-lower:focus .order-lower-indicator::before,
3342  .postbox .handlediv:focus .toggle-indicator::before {
3343      box-shadow: none;
3344      /* Only visible in Windows High Contrast mode */
3345      outline: 1px solid transparent;
3346  }
3347  
3348  /* @todo: appears to be Press This only and overridden */
3349  #photo-add-url-div input[type="text"] {
3350      width: 300px;
3351  }
3352  
3353  /* Theme/Plugin file editor */
3354  .alignleft h2 {
3355      margin: 0;
3356  }
3357  
3358  #template textarea {
3359      font-family: Consolas, Monaco, monospace;
3360      font-size: 13px;
3361      background: #f6f7f7;
3362      tab-size: 4;
3363  }
3364  
3365  #template textarea,
3366  #template .CodeMirror {
3367      width: 100%;
3368      min-height: 60vh;
3369      height: calc( 100vh - 295px );
3370      border: 1px solid #dcdcde;
3371      box-sizing: border-box;
3372  }
3373  
3374  #templateside > h2 {
3375      padding-top: 6px;
3376      padding-bottom: 7px;
3377      margin: 0;
3378  }
3379  
3380  #templateside ol,
3381  #templateside ul {
3382      margin: 0;
3383      padding: 0;
3384  }
3385  #templateside > ul {
3386      box-sizing: border-box;
3387      margin-top: 0;
3388      overflow: auto;
3389      padding: 0;
3390      min-height: 60vh;
3391      height: calc(100vh - 295px);
3392      background-color: #f6f7f7;
3393      border: 1px solid #dcdcde;
3394      border-left: none;
3395  }
3396  #templateside ul ul {
3397      padding-left: 12px;
3398  }
3399  #templateside > ul > li > ul[role=group] {
3400      padding-left: 0;
3401  }
3402  
3403  /*
3404   * Styles for Theme and Plugin file editors.
3405   */
3406  
3407  /* Hide collapsed items. */
3408  [role="treeitem"][aria-expanded="false"] > ul {
3409      display: none;
3410  }
3411  
3412  /* Use arrow dashicons for folder states, but hide from screen readers. */
3413  [role="treeitem"] span[aria-hidden] {
3414      display: inline;
3415      font-family: dashicons;
3416      font-size: 20px;
3417      position: absolute;
3418      pointer-events: none;
3419  }
3420  [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
3421      content: "\f139";
3422      content: "\f139" / '';
3423  }
3424  [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
3425      content: "\f140";
3426      content: "\f140" / '';
3427  }
3428  [role="treeitem"] .folder-label {
3429      display: block;
3430      padding: 3px 3px 3px 12px;
3431      cursor: pointer;
3432  }
3433  
3434  /* Remove outline, and create our own focus and hover styles */
3435  [role="treeitem"] {
3436      outline: 0;
3437  }
3438  
3439  [role="treeitem"] a:focus,
3440  [role="treeitem"] .folder-label.focus {
3441      color: #043959;
3442      /* Reset default focus style. */
3443      box-shadow: none;
3444      /* Use an inset outline instead, so it's visible also over the current file item. */
3445      outline: 2px solid var(--wp-admin-theme-color, #3858e9);
3446      outline-offset: -2px;
3447  }
3448  
3449  [role="treeitem"].hover,
3450  [role="treeitem"] .folder-label.hover {
3451      background-color: #f0f0f1;
3452  }
3453  
3454  .tree-folder {
3455      margin: 0;
3456      position: relative;
3457  }
3458  [role="treeitem"] li {
3459      position: relative;
3460  }
3461  
3462  /* Styles for folder indicators/depth */
3463  .tree-folder .tree-folder::after {
3464      content: "";
3465      display: block;
3466      position: absolute;
3467      left: 2px;
3468      border-left: 1px solid #c3c4c7;
3469      top: -13px;
3470      bottom: 10px;
3471  }
3472  .tree-folder > li::before {
3473      content: "";
3474      position: absolute;
3475      display: block;
3476      border-left: 1px solid #c3c4c7;
3477      left: 2px;
3478      top: -5px;
3479      height: 18px;
3480      width: 7px;
3481      border-bottom: 1px solid #c3c4c7;
3482  }
3483  .tree-folder > li::after {
3484      content: "";
3485      position: absolute;
3486      display: block;
3487      border-left: 1px solid #c3c4c7;
3488      left: 2px;
3489      bottom: -7px;
3490      top: 0;
3491  }
3492  
3493  /* current-file needs to adjustment for .notice styles */
3494  #templateside .current-file {
3495      margin: -4px 0 -2px;
3496  }
3497  .tree-folder > .current-file::before {
3498      left: 4px;
3499      height: 15px;
3500      width: 0;
3501      border-left: none;
3502      top: 3px;
3503  }
3504  .tree-folder > .current-file::after {
3505      bottom: -4px;
3506      height: 7px;
3507      left: 2px;
3508      top: auto;
3509  }
3510  
3511  /* Lines shouldn't continue on last item */
3512  .tree-folder > li:last-child::after,
3513  .tree-folder li:last-child > .tree-folder::after {
3514      display: none;
3515  }
3516  
3517  #theme-plugin-editor-selector,
3518  #theme-plugin-editor-label,
3519  #documentation label {
3520      font-weight: 600;
3521  }
3522  
3523  #theme-plugin-editor-label {
3524      display: inline-block;
3525      margin-bottom: 1em;
3526  }
3527  
3528  /* rtl:ignore */
3529  #template textarea,
3530  #docs-list {
3531      direction: ltr;
3532  }
3533  
3534  .fileedit-sub #theme,
3535  .fileedit-sub #plugin {
3536      max-width: 40%;
3537  }
3538  .fileedit-sub .alignright {
3539      text-align: right;
3540  }
3541  
3542  #template p {
3543      width: 97%;
3544  }
3545  
3546  #file-editor-linting-error {
3547      margin-top: 1em;
3548      margin-bottom: 1em;
3549  }
3550  #file-editor-linting-error > .notice {
3551      margin: 0;
3552      display: inline-block;
3553  }
3554  #file-editor-linting-error > .notice > p {
3555      width: auto;
3556  }
3557  #template .submit {
3558      margin-top: 1em;
3559      padding: 0;
3560  }
3561  
3562  #template .submit input[type=submit][disabled] {
3563      cursor: not-allowed;
3564  }
3565  #templateside {
3566      float: right;
3567      width: 16em;
3568      word-wrap: break-word;
3569  }
3570  
3571  #postcustomstuff p.submit {
3572      margin: 0;
3573  }
3574  
3575  #templateside h4 {
3576      margin: 1em 0 0;
3577  }
3578  
3579  #templateside li {
3580      margin: 4px 0;
3581  }
3582  
3583  #templateside li:not(.howto) a,
3584  .theme-editor-php .highlight {
3585      display: block;
3586      padding: 3px 0 3px 12px;
3587      text-decoration: none;
3588  }
3589  
3590  #templateside li.current-file > a {
3591      padding-bottom: 0;
3592  }
3593  
3594  #templateside li:not(.howto) > a:first-of-type {
3595      padding-top: 0;
3596  }
3597  
3598  #templateside li.howto {
3599      padding: 6px 12px 12px;
3600  }
3601  
3602  .theme-editor-php .highlight {
3603      margin: -3px 3px -3px -12px;
3604  }
3605  
3606  #templateside .highlight {
3607      border: none;
3608      font-weight: 600;
3609  }
3610  
3611  .nonessential {
3612      color: #646970;
3613      font-size: 11px;
3614      font-style: italic;
3615      padding-left: 12px;
3616  }
3617  
3618  #documentation {
3619      margin-top: 10px;
3620  }
3621  
3622  #documentation label {
3623      line-height: 1.8;
3624      vertical-align: baseline;
3625  }
3626  
3627  .fileedit-sub {
3628      padding: 10px 0 8px;
3629      line-height: 180%;
3630  }
3631  
3632  #file-editor-warning .file-editor-warning-content {
3633      margin: 25px;
3634  }
3635  
3636  /* @todo: can we use a common class for these? */
3637  .nav-menus-php .item-edit:before,
3638  .wp-customizer .control-section .accordion-section-title:after,
3639  .wp-customizer .accordion-section-title:after,
3640  .widget-top .widget-action .toggle-indicator:before {
3641      content: "\f140";
3642      content: "\f140" / '';
3643      font: normal 20px/1 dashicons;
3644      display: block;
3645      -webkit-font-smoothing: antialiased;
3646      -moz-osx-font-smoothing: grayscale;
3647      text-decoration: none;
3648  }
3649  
3650  .widget-top .widget-action .toggle-indicator:before {
3651      padding: 1px 2px 1px 0;
3652      border-radius: 50%;
3653  }
3654  
3655  .handlediv,
3656  .postbox .handlediv.button-link,
3657  .item-edit,
3658  .toggle-indicator {
3659      color: #646970;
3660  }
3661  
3662  .widget-action {
3663      color: #50575e; /* #fafafa background in the Widgets screen */
3664  }
3665  
3666  .widget-top:hover .widget-action,
3667  .widget-action:focus,
3668  .handlediv:hover,
3669  .handlediv:focus,
3670  .postbox .handlediv.button-link:hover,
3671  .postbox .handlediv.button-link:focus,
3672  .item-edit:hover,
3673  .item-edit:focus,
3674  .sidebar-name:hover .toggle-indicator {
3675      color: #1d2327;
3676      /* Only visible in Windows High Contrast mode */
3677      outline: 2px solid transparent;
3678  }
3679  
3680  .widget-top .widget-action:focus .toggle-indicator:before {
3681      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
3682      /* Only visible in Windows High Contrast mode */
3683      outline: 2px solid transparent;
3684  }
3685  
3686  #customize-info.open .accordion-section-title:after,
3687  .nav-menus-php .menu-item-edit-active .item-edit:before,
3688  .widget.open .widget-top .widget-action .toggle-indicator:before,
3689  .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
3690      content: "\f142";
3691      content: "\f142" / '';
3692  }
3693  
3694  /*!
3695   * jQuery UI Draggable/Sortable 1.11.4
3696   * http://jqueryui.com
3697   *
3698   * Copyright jQuery Foundation and other contributors
3699   * Released under the MIT license.
3700   * http://jquery.org/license
3701   */
3702  .ui-draggable-handle,
3703  .ui-sortable-handle {
3704      touch-action: none;
3705  }
3706  
3707  /* Accordion */
3708  .accordion-section {
3709      border-bottom: 1px solid #dcdcde;
3710      margin: 0;
3711  }
3712  
3713  .accordion-section.open .accordion-section-content,
3714  .no-js .accordion-section .accordion-section-content {
3715      display: block;
3716  }
3717  
3718  .accordion-section.open:hover {
3719      border-bottom-color: #dcdcde;
3720  }
3721  
3722  .accordion-section-content {
3723      display: none;
3724      padding: 10px 20px 15px;
3725      overflow: hidden;
3726      background: #fff;
3727  }
3728  
3729  .accordion-section-title {
3730      margin: 0;
3731      position: relative;
3732      border-left: 1px solid #dcdcde;
3733      border-right: 1px solid #dcdcde;
3734      -webkit-user-select: none;
3735      user-select: none;
3736  }
3737  
3738  .js .accordion-section-title {
3739      cursor: pointer;
3740  }
3741  
3742  .js .accordion-section-title:after {
3743      position: absolute;
3744      top: 12px;
3745      right: 10px;
3746      z-index: 1;
3747  }
3748  
3749  .accordion-section-title:focus {
3750      /* Only visible in Windows High Contrast mode */
3751      outline: 1px solid transparent;
3752  }
3753  
3754  .accordion-section-title:hover:after,
3755  .accordion-section-title:focus:after {
3756      border-color: #a7aaad transparent;
3757      /* Only visible in Windows High Contrast mode */
3758      outline: 1px solid transparent;
3759  }
3760  
3761  .cannot-expand .accordion-section-title {
3762      cursor: auto;
3763  }
3764  
3765  .cannot-expand .accordion-section-title:after {
3766      display: none;
3767  }
3768  
3769  .control-section .accordion-section-title,
3770  .customize-pane-child .accordion-section-title {
3771      border-left: none;
3772      border-right: none;
3773      padding: 10px 10px 11px 14px;
3774      line-height: 1.55;
3775      background: #fff;
3776  }
3777  
3778  .control-section .accordion-section-title:after,
3779  .customize-pane-child .accordion-section-title:after {
3780      top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
3781  }
3782  
3783  .js .control-section:hover .accordion-section-title,
3784  .js .control-section .accordion-section-title:hover,
3785  .js .control-section.open .accordion-section-title,
3786  .js .control-section .accordion-section-title:focus {
3787      color: #1d2327;
3788      background: #f6f7f7;
3789  }
3790  
3791  .control-section.open .accordion-section-title {
3792      /* When expanded */
3793      border-bottom: 1px solid #dcdcde;
3794  }
3795  
3796  /* Edit Site */
3797  .network-admin .edit-site-actions {
3798      margin-top: 0;
3799  }
3800  
3801  /* My Sites */
3802  .my-sites {
3803      display: block;
3804      overflow: auto;
3805      zoom: 1;
3806  }
3807  
3808  .my-sites li {
3809      display: block;
3810      padding: 8px 3%;
3811      min-height: 130px;
3812      margin: 0;
3813  }
3814  
3815  @media only screen and (max-width: 599px) {
3816      .my-sites li {
3817          min-height: 0;
3818      }
3819  }
3820  
3821  @media only screen and (min-width: 600px) {
3822      .my-sites.striped li {
3823          background-color: #fff;
3824          position: relative;
3825      }
3826      .my-sites.striped li:after {
3827          content: "";
3828          width: 1px;
3829          height: 100%;
3830          position: absolute;
3831          top: 0;
3832          right: 0;
3833          background: #c3c4c7;
3834      }
3835  
3836  }
3837  @media only screen and (min-width: 600px) and (max-width: 699px) {
3838      .my-sites li{
3839          float: left;
3840          width: 44%;
3841      }
3842      .my-sites.striped li {
3843          background-color: #fff;
3844      }
3845      .my-sites.striped li:nth-of-type(2n+1) {
3846          clear: left;
3847      }
3848      .my-sites.striped li:nth-of-type(2n+2):after {
3849          content: none;
3850      }
3851      .my-sites li:nth-of-type(4n+1),
3852      .my-sites li:nth-of-type(4n+2) {
3853          background-color: #f6f7f7;
3854      }
3855  
3856  }
3857  
3858  @media only screen and (min-width: 700px) and (max-width: 1199px) {
3859      .my-sites li {
3860          float: left;
3861          width: 27.333333%;
3862          background-color: #fff;
3863      }
3864      .my-sites.striped li:nth-of-type(3n+3):after {
3865          content: none;
3866      }
3867      .my-sites li:nth-of-type(6n+1),
3868      .my-sites li:nth-of-type(6n+2),
3869      .my-sites li:nth-of-type(6n+3) {
3870          background-color: #f6f7f7;
3871      }
3872  }
3873  
3874  @media only screen and (min-width: 1200px) and (max-width: 1399px) {
3875      .my-sites li {
3876          float: left;
3877          width: 21%;
3878          padding: 8px 2%;
3879          background-color: #fff;
3880      }
3881      .my-sites.striped li:nth-of-type(4n+1) {
3882          clear: left;
3883      }
3884      .my-sites.striped li:nth-of-type(4n+4):after {
3885          content: none;
3886      }
3887      .my-sites li:nth-of-type(8n+1),
3888      .my-sites li:nth-of-type(8n+2),
3889      .my-sites li:nth-of-type(8n+3),
3890      .my-sites li:nth-of-type(8n+4) {
3891          background-color: #f6f7f7;
3892      }
3893  }
3894  
3895  @media only screen and (min-width: 1400px) and (max-width: 1599px) {
3896      .my-sites li {
3897          float: left;
3898          width: 16%;
3899          padding: 8px 2%;
3900          background-color: #fff;
3901      }
3902      .my-sites.striped li:nth-of-type(5n+1) {
3903          clear: left;
3904      }
3905      .my-sites.striped li:nth-of-type(5n+5):after {
3906          content: none;
3907      }
3908      .my-sites li:nth-of-type(10n+1),
3909      .my-sites li:nth-of-type(10n+2),
3910      .my-sites li:nth-of-type(10n+3),
3911      .my-sites li:nth-of-type(10n+4),
3912      .my-sites li:nth-of-type(10n+5) {
3913          background-color: #f6f7f7;
3914      }
3915  }
3916  
3917  @media only screen and (min-width: 1600px) {
3918      .my-sites li {
3919          float: left;
3920          width: 12.666666%;
3921          padding: 8px 2%;
3922          background-color: #fff;
3923      }
3924      .my-sites.striped li:nth-of-type(6n+1) {
3925          clear: left;
3926      }
3927      .my-sites.striped li:nth-of-type(6n+6):after {
3928          content: none;
3929      }
3930      .my-sites li:nth-of-type(12n+1),
3931      .my-sites li:nth-of-type(12n+2),
3932      .my-sites li:nth-of-type(12n+3),
3933      .my-sites li:nth-of-type(12n+4),
3934      .my-sites li:nth-of-type(12n+5),
3935      .my-sites li:nth-of-type(12n+6) {
3936          background-color: #f6f7f7;
3937      }
3938  }
3939  
3940  .my-sites li a {
3941      text-decoration: none;
3942  }
3943  
3944  /* =Media Queries
3945  -------------------------------------------------------------- */
3946  
3947  /**
3948   * HiDPI Displays
3949   */
3950  @media print,
3951    (min-resolution: 120dpi) {
3952      /* Back-compat for pre-3.8 */
3953      div.star-holder,
3954      div.star-holder .star-rating {
3955          background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left;
3956          background-size: 21px 37px;
3957      }
3958  
3959      .spinner {
3960          background-image: url(../images/spinner-2x.gif);
3961      }
3962  
3963  }
3964  
3965  @media screen and (max-width: 782px) {
3966      html.wp-toolbar {
3967          padding-top: var(--wp-admin--admin-bar--height);
3968      }
3969  
3970      .screen-reader-shortcut:focus {
3971          top: -39px;
3972      }
3973  
3974      .block-editor-page .screen-reader-shortcut:focus {
3975          top: 7px;
3976      }
3977  
3978      .screen-reader-shortcut[href="#wp-toolbar"] {
3979          display: none;
3980      }
3981  
3982      body {
3983          min-width: 240px;
3984          overflow-x: hidden;
3985      }
3986  
3987      body * {
3988          -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3989      }
3990  
3991      #wpcontent {
3992          position: relative;
3993          margin-left: 0;
3994          padding-left: 10px;
3995      }
3996  
3997      #wpbody-content {
3998          padding-bottom: 100px;
3999      }
4000  
4001      .wrap {
4002          clear: both;
4003          margin-right: 12px;
4004          margin-left: 0;
4005      }
4006  
4007      /* categories */
4008      #col-left,
4009      #col-right {
4010          float: none;
4011          width: auto;
4012      }
4013  
4014      #col-left .col-wrap,
4015      #col-right .col-wrap {
4016          padding: 0;
4017      }
4018  
4019      /* Hidden Elements */
4020      #collapse-menu,
4021      .post-format-select {
4022          display: none !important;
4023      }
4024  
4025      .wrap h1.wp-heading-inline {
4026          margin-bottom: 0.5em;
4027      }
4028  
4029      .wrap .add-new-h2, /* deprecated */
4030      .wrap .add-new-h2:active, /* deprecated */
4031      .wrap .page-title-action,
4032      .wrap .page-title-action:active {
4033          padding: 0 14px;
4034          font-size: 14px;
4035          white-space: nowrap;
4036          min-height: 40px;
4037          line-height: 2.71428571;
4038          vertical-align: middle;
4039      }
4040  
4041      /* Feedback Messages */
4042      .notice,
4043      .wrap div.updated,
4044      .wrap div.error,
4045      .media-upload-form div.error {
4046          margin: 20px 0 10px;
4047          padding: 5px 10px;
4048          font-size: 14px;
4049          line-height: 175%;
4050      }
4051  
4052      .wp-core-ui .notice.is-dismissible {
4053          padding-right: 46px;
4054      }
4055  
4056      .notice-dismiss {
4057          padding: 13px;
4058      }
4059  
4060      .wrap .icon32 + h2 {
4061          margin-top: -2px;
4062      }
4063  
4064      .wp-responsive-open #wpbody {
4065          right: -16em;
4066      }
4067  
4068      code {
4069          word-wrap: break-word;
4070          word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
4071          word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
4072      }
4073  
4074      /* General Metabox */
4075      .postbox {
4076          font-size: 14px;
4077      }
4078  
4079      .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
4080      .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
4081      .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
4082      .metabox-holder h2 {
4083          padding: 12px;
4084      }
4085  
4086      .nav-menus-php .metabox-holder h3 {
4087          padding: 0;
4088      }
4089  
4090      .postbox .handlediv {
4091          margin-top: 3px;
4092      }
4093  
4094      /* Subsubsub Nav */
4095      .subsubsub {
4096          font-size: 16px;
4097          text-align: center;
4098          margin-bottom: 15px;
4099      }
4100  
4101      /* Theme/Plugin File Editor */
4102  
4103      #template textarea,
4104      #template .CodeMirror {
4105          box-sizing: border-box;
4106      }
4107  
4108      #templateside {
4109          float: none;
4110          width: auto;
4111      }
4112  
4113      #templateside > ul {
4114          border-left: 1px solid #dcdcde;
4115      }
4116  
4117      #templateside li {
4118          margin: 0;
4119      }
4120  
4121      #templateside li:not(.howto) a {
4122          display: block;
4123          padding: 5px;
4124      }
4125      #templateside li.howto {
4126          padding: 12px;
4127      }
4128  
4129      #templateside .highlight {
4130          padding: 5px;
4131          margin-left: -5px;
4132          margin-top: -5px;
4133      }
4134  
4135      #template > div,
4136      #template .notice {
4137          float: none;
4138          margin: 1em 0;
4139          width: auto;
4140      }
4141  
4142      #template .CodeMirror,
4143      #template textarea {
4144          width: 100%;
4145      }
4146  
4147      #templateside ul ul {
4148          padding-left: 1.5em;
4149      }
4150      [role="treeitem"] .folder-label {
4151          display: block;
4152          padding: 5px;
4153      }
4154      .tree-folder > li::before,
4155      .tree-folder > li::after,
4156      .tree-folder .tree-folder::after {
4157          left: -8px;
4158      }
4159      .tree-folder > li::before {
4160          top: 0;
4161          height: 13px;
4162      }
4163      .tree-folder > .current-file::before {
4164          left: -5px;
4165          top: 7px;
4166          width: 4px;
4167      }
4168      .tree-folder > .current-file::after {
4169          height: 9px;
4170          left: -8px;
4171      }
4172      .wrap #templateside span.notice {
4173          margin-left: -5px;
4174          width: 100%;
4175      }
4176  
4177      .fileedit-sub .alignright {
4178          float: left;
4179          margin-top: 15px;
4180          width: 100%;
4181          text-align: left;
4182      }
4183  
4184      .fileedit-sub .alignright label {
4185          display: block;
4186      }
4187  
4188      .fileedit-sub #theme,
4189      .fileedit-sub #plugin {
4190          margin-left: 0;
4191          max-width: 70%;
4192      }
4193  
4194      .fileedit-sub input[type="submit"] {
4195          margin-bottom: 0;
4196      }
4197  
4198      #documentation label[for="docs-list"] {
4199          display: block;
4200      }
4201  
4202      #documentation select[name="docs-list"] {
4203          margin-left: 0;
4204          max-width: 60%;
4205      }
4206  
4207      #documentation input[type="button"] {
4208          margin-bottom: 0;
4209      }
4210  
4211      #wpfooter {
4212          display: none;
4213      }
4214  
4215      #comments-form .checkforspam {
4216          display: none;
4217      }
4218  
4219      .edit-comment-author {
4220          margin: 2px 0 0;
4221      }
4222  
4223      .filter-drawer .filter-group-feature input,
4224      .filter-drawer .filter-group-feature label {
4225          line-height: 2.1;
4226      }
4227  
4228      .filter-drawer .filter-group-feature label {
4229          margin-left: 32px;
4230      }
4231  
4232      .wp-filter .button.drawer-toggle {
4233          font-size: 13px;
4234          line-height: 2;
4235          height: 28px;
4236      }
4237  
4238      /* Fix help tab columns for smaller screens */
4239      #screen-meta #contextual-help-wrap {
4240          overflow: visible;
4241      }
4242  
4243      #screen-meta #contextual-help-back,
4244      #screen-meta .contextual-help-sidebar {
4245          display: none;
4246      }
4247  
4248      #screen-meta .contextual-help-tabs {
4249          clear: both;
4250          width: 100%;
4251          float: none;
4252      }
4253  
4254      #screen-meta .contextual-help-tabs ul {
4255          margin: 0 0 1em;
4256          padding: 1em 0 0;
4257      }
4258  
4259      #screen-meta .contextual-help-tabs .active {
4260          margin: 0;
4261      }
4262  
4263      #screen-meta .contextual-help-tabs-wrap {
4264          clear: both;
4265          max-width: 100%;
4266          float: none;
4267      }
4268  
4269      #screen-meta,
4270      #screen-meta-links {
4271          margin-right: 10px;
4272      }
4273  
4274      #screen-meta-links {
4275          margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
4276      }
4277  
4278      #screen-meta-links .show-settings:after {
4279          line-height: 1.9;
4280      }
4281  
4282      .wp-filter .search-form input[type="search"] {
4283          font-size: 1rem;
4284      }
4285  
4286      .wp-filter .search-form.search-plugins {
4287          /* This element is a flex item. */
4288          min-width: 100%;
4289      }
4290  }
4291  
4292  /* Smartphone */
4293  @media screen and (max-width: 600px) {
4294      /* Disable horizontal scroll when responsive menu is open
4295         since we push the main content off to the right. */
4296      #wpwrap.wp-responsive-open {
4297          overflow-x: hidden;
4298      }
4299  
4300      html.wp-toolbar {
4301          padding-top: 0;
4302      }
4303  
4304      .screen-reader-shortcut:focus {
4305          top: 7px;
4306      }
4307  
4308      #wpbody {
4309          padding-top: 46px;
4310      }
4311  
4312      /* Keep full-width boxes on Edit Post page from causing horizontal scroll */
4313      div#post-body.metabox-holder.columns-1 {
4314          overflow-x: hidden;
4315      }
4316  
4317      h1.nav-tab-wrapper,
4318      .wrap h2.nav-tab-wrapper,
4319      .nav-tab-wrapper {
4320          border-bottom: 0;
4321      }
4322  
4323      h1 .nav-tab,
4324      h2 .nav-tab,
4325      h3 .nav-tab,
4326      nav .nav-tab {
4327          margin: 10px 10px 0 0;
4328          border-bottom: 1px solid #c3c4c7;
4329      }
4330  
4331      .nav-tab-active:hover,
4332      .nav-tab-active:focus,
4333      .nav-tab-active:focus:active {
4334          border-bottom: 1px solid #c3c4c7;
4335      }
4336  
4337      .wp-filter .search-form.search-plugins label {
4338          width: 100%;
4339      }
4340  }
4341  
4342  @media screen and (max-width: 480px) {
4343      .metabox-prefs-container {
4344          display: grid;
4345      }
4346  
4347      .metabox-prefs-container > * {
4348          display: inline-block;
4349          padding: 2px;
4350      }
4351  }
4352  
4353  @media screen and (max-width: 320px) {
4354      /* Prevent default center alignment and larger font for the Right Now widget when
4355         the network dashboard is viewed on a small mobile device. */
4356      #network_dashboard_right_now .subsubsub {
4357          font-size: 14px;
4358          text-align: left;
4359      }
4360  }