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