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