[Summary view] [Print] [Text view]

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