[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: rect(1px, 1px, 1px, 1px);
 126      clip-path: inset(50%);
 127      height: 1px;
 128      margin: -1px;
 129      overflow: hidden;
 130      padding: 0;
 131      position: absolute;
 132      width: 1px;
 133      word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
 134  }
 135  
 136  .button .screen-reader-text {
 137      height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */
 138  }
 139  
 140  .screen-reader-text + .dashicons-external {
 141      margin-top: -1px;
 142      margin-left: 2px;
 143  }
 144  
 145  .screen-reader-shortcut {
 146      position: absolute;
 147      top: -1000em;
 148      left: 6px;
 149      height: auto;
 150      width: auto;
 151      display: block;
 152      font-size: 14px;
 153      font-weight: 600;
 154      padding: 15px 23px 14px;
 155      /* Background and color set to prevent false positives in automated accessibility tests. */
 156      background: #f0f0f1;
 157      color: #2271b1;
 158      z-index: 100000;
 159      line-height: normal;
 160  }
 161  
 162  .screen-reader-shortcut:focus {
 163      top: -25px;
 164      /* Overrides a:focus in the admin. See ticket #56789. */
 165      color: #2271b1;
 166      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 167      text-decoration: none;
 168      /* Only visible in Windows High Contrast mode */
 169      outline: 2px solid transparent;
 170      outline-offset: -2px;
 171  }
 172  
 173  .hidden,
 174  .js .closed .inside,
 175  .js .hide-if-js,
 176  .no-js .hide-if-no-js,
 177  .js.wp-core-ui .hide-if-js,
 178  .js .wp-core-ui .hide-if-js,
 179  .no-js.wp-core-ui .hide-if-no-js,
 180  .no-js .wp-core-ui .hide-if-no-js {
 181      display: none;
 182  }
 183  
 184  /* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */
 185  .widget-top,
 186  .menu-item-handle,
 187  .widget-inside,
 188  #menu-settings-column .accordion-container,
 189  #menu-management .menu-edit,
 190  .manage-menus,
 191  table.widefat,
 192  .stuffbox,
 193  p.popular-tags,
 194  .widgets-holder-wrap,
 195  .wp-editor-container,
 196  .popular-tags,
 197  .feature-filter,
 198  .comment-ays {
 199      border: 1px solid #c3c4c7;
 200      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 201  }
 202  
 203  table.widefat,
 204  .wp-editor-container,
 205  .stuffbox,
 206  p.popular-tags,
 207  .widgets-holder-wrap,
 208  .popular-tags,
 209  .feature-filter,
 210  .comment-ays {
 211      background: #fff;
 212  }
 213  
 214  /* general */
 215  html,
 216  body {
 217      height: 100%;
 218      margin: 0;
 219      padding: 0;
 220  }
 221  
 222  body {
 223      background: #f0f0f1;
 224      color: #3c434a;
 225      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 226      font-size: 13px;
 227      line-height: 1.4em;
 228      min-width: 600px;
 229  }
 230  
 231  body.iframe {
 232      min-width: 0;
 233      padding-top: 1px;
 234  }
 235  
 236  body.modal-open {
 237      overflow: hidden;
 238  }
 239  
 240  body.mobile.modal-open #wpwrap {
 241      overflow: hidden;
 242      position: fixed;
 243      height: 100%;
 244  }
 245  
 246  iframe,
 247  img {
 248      border: 0;
 249  }
 250  
 251  td {
 252      font-family: inherit;
 253      font-size: inherit;
 254      font-weight: inherit;
 255      line-height: inherit;
 256  }
 257  
 258  /* Any change to the default link style must be applied to button-link too. */
 259  a {
 260      color: #2271b1;
 261      transition-property: border, background, color;
 262      transition-duration: .05s;
 263      transition-timing-function: ease-in-out;
 264  }
 265  
 266  a,
 267  div {
 268      outline: 0;
 269  }
 270  
 271  a:hover,
 272  a:active {
 273      color: #135e96;
 274  }
 275  
 276  a:focus,
 277  a:focus .media-icon img,
 278  a:focus .plugin-icon,
 279  .wp-person a:focus .gravatar {
 280      color: #043959;
 281      box-shadow: 0 0 0 2px #2271b1;
 282      /* Only visible in Windows High Contrast mode */
 283      outline: 2px solid transparent;
 284  }
 285  
 286  #adminmenu a:focus {
 287      box-shadow: none;
 288      /* Only visible in Windows High Contrast mode */
 289      outline: 1px solid transparent;
 290      outline-offset: -1px;
 291  }
 292  
 293  .screen-reader-text:focus {
 294      box-shadow: none;
 295      outline: none;
 296  }
 297  
 298  blockquote,
 299  q {
 300      quotes: none;
 301  }
 302  
 303  blockquote:before,
 304  blockquote:after,
 305  q:before,
 306  q:after {
 307      content: "";
 308      content: none;
 309  }
 310  
 311  p,
 312  .wp-die-message {
 313      font-size: 13px;
 314      line-height: 1.5;
 315      margin: 1em 0;
 316  }
 317  
 318  blockquote {
 319      margin: 1em;
 320  }
 321  
 322  li,
 323  dd {
 324      margin-bottom: 6px;
 325  }
 326  
 327  h1,
 328  h2,
 329  h3,
 330  h4,
 331  h5,
 332  h6 {
 333      display: block;
 334      font-weight: 600;
 335  }
 336  
 337  h1 {
 338      color: #1d2327;
 339      font-size: 2em;
 340      margin: .67em 0;
 341  }
 342  
 343  h2,
 344  h3 {
 345      color: #1d2327;
 346      font-size: 1.3em;
 347      margin: 1em 0;
 348  }
 349  
 350  .update-core-php h2 {
 351      margin-top: 4em;
 352  }
 353  
 354  .update-php h2,
 355  .update-messages h2,
 356  h4 {
 357      font-size: 1em;
 358      margin: 1.33em 0;
 359  }
 360  
 361  h5 {
 362      font-size: 0.83em;
 363      margin: 1.67em 0;
 364  }
 365  
 366  h6 {
 367      font-size: 0.67em;
 368      margin: 2.33em 0;
 369  }
 370  
 371  ul,
 372  ol {
 373      padding: 0;
 374  }
 375  
 376  ul {
 377      list-style: none;
 378  }
 379  
 380  ol {
 381      list-style-type: decimal;
 382      margin-left: 2em;
 383  }
 384  
 385  ul.ul-disc {
 386      list-style: disc outside;
 387  }
 388  
 389  ul.ul-square {
 390      list-style: square outside;
 391  }
 392  
 393  ol.ol-decimal {
 394      list-style: decimal outside;
 395  }
 396  
 397  ul.ul-disc,
 398  ul.ul-square,
 399  ol.ol-decimal {
 400      margin-left: 1.8em;
 401  }
 402  
 403  ul.ul-disc > li,
 404  ul.ul-square > li,
 405  ol.ol-decimal > li {
 406      margin: 0 0 0.5em;
 407  }
 408  
 409  /* rtl:ignore */
 410  .ltr {
 411      direction: ltr;
 412  }
 413  
 414  /* rtl:ignore */
 415  .code,
 416  code {
 417      font-family: Consolas, Monaco, monospace;
 418      direction: ltr;
 419      unicode-bidi: embed;
 420  }
 421  
 422  kbd,
 423  code {
 424      padding: 3px 5px 2px;
 425      margin: 0 1px;
 426      background: #f0f0f1;
 427      background: rgba(0, 0, 0, 0.07);
 428      font-size: 13px;
 429  }
 430  
 431  .subsubsub {
 432      list-style: none;
 433      margin: 8px 0 0;
 434      padding: 0;
 435      font-size: 13px;
 436      float: left;
 437      color: #646970;
 438  }
 439  
 440  .subsubsub a {
 441      line-height: 2;
 442      padding: .2em;
 443      text-decoration: none;
 444  }
 445  
 446  .subsubsub a .count,
 447  .subsubsub a.current .count {
 448      color: #50575e; /* #f1f1f1 background */
 449      font-weight: 400;
 450  }
 451  
 452  .subsubsub a.current {
 453      font-weight: 600;
 454      border: none;
 455  }
 456  
 457  .subsubsub li {
 458      display: inline-block;
 459      margin: 0;
 460      padding: 0;
 461      white-space: nowrap;
 462  }
 463  
 464  /* .widefat - main style for tables */
 465  .widefat {
 466      border-spacing: 0;
 467      width: 100%;
 468      clear: both;
 469      margin: 0;
 470  }
 471  
 472  .widefat * {
 473      word-wrap: break-word;
 474  }
 475  
 476  .widefat a,
 477  .widefat button.button-link {
 478      text-decoration: none;
 479  }
 480  
 481  .widefat td,
 482  .widefat th {
 483      padding: 8px 10px;
 484  }
 485  
 486  .widefat thead th,
 487  .widefat thead td {
 488      border-bottom: 1px solid #c3c4c7;
 489  }
 490  
 491  .widefat tfoot th,
 492  .widefat tfoot td {
 493      border-top: 1px solid #c3c4c7;
 494      border-bottom: none;
 495  }
 496  
 497  .widefat .no-items td {
 498      border-bottom-width: 0;
 499  }
 500  
 501  .widefat td {
 502      vertical-align: top;
 503  }
 504  
 505  .widefat td,
 506  .widefat td p,
 507  .widefat td ol,
 508  .widefat td ul {
 509      font-size: 13px;
 510      line-height: 1.5em;
 511  }
 512  
 513  .widefat th,
 514  .widefat thead td,
 515  .widefat tfoot td {
 516      text-align: left;
 517      line-height: 1.3em;
 518      font-size: 14px;
 519  }
 520  
 521  .widefat th input,
 522  .updates-table td input,
 523  .widefat thead td input,
 524  .widefat tfoot td input {
 525      margin: 0 0 0 8px;
 526      padding: 0;
 527      vertical-align: text-top;
 528  }
 529  
 530  .widefat .check-column {
 531      width: 2.2em;
 532      padding: 6px 0 25px;
 533      vertical-align: top;
 534  }
 535  
 536  .widefat tbody th.check-column {
 537      padding: 9px 0 22px;
 538  }
 539  
 540  .widefat thead td.check-column,
 541  .widefat tbody th.check-column,
 542  .updates-table tbody td.check-column,
 543  .widefat tfoot td.check-column {
 544      padding: 11px 0 0 3px;
 545  }
 546  
 547  .widefat thead td.check-column,
 548  .widefat tfoot td.check-column {
 549      padding-top: 4px;
 550      vertical-align: middle;
 551  }
 552  
 553  .update-php div.updated,
 554  .update-php div.error {
 555      margin-left: 0;
 556  }
 557  
 558  .js-update-details-toggle .dashicons {
 559      text-decoration: none;
 560  }
 561  
 562  .js-update-details-toggle[aria-expanded="true"] .dashicons::before {
 563      content: "\f142";
 564  }
 565  
 566  .no-js .widefat thead .check-column input,
 567  .no-js .widefat tfoot .check-column input {
 568      display: none;
 569  }
 570  
 571  .widefat .num,
 572  .column-comments,
 573  .column-links,
 574  .column-posts {
 575      text-align: center;
 576  }
 577  
 578  .widefat th#comments {
 579      vertical-align: middle;
 580  }
 581  
 582  .wrap {
 583      margin: 10px 20px 0 2px;
 584  }
 585  
 586  .wrap > h2:first-child, /* Back-compat for pre-4.4 */
 587  .wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */
 588  .postbox .inside h2, /* Back-compat for pre-4.4 */
 589  .wrap h1 {
 590      font-size: 23px;
 591      font-weight: 400;
 592      margin: 0;
 593      padding: 9px 0 4px;
 594      line-height: 1.3;
 595  }
 596  
 597  .wrap h1.wp-heading-inline {
 598      display: inline-block;
 599      margin-right: 5px;
 600  }
 601  
 602  .wp-header-end {
 603      visibility: hidden;
 604      margin: -2px 0 0;
 605  }
 606  
 607  .subtitle {
 608      margin: 0;
 609      padding-left: 25px;
 610      color: #50575e;
 611      font-size: 14px;
 612      font-weight: 400;
 613      line-height: 1;
 614  }
 615  
 616  .subtitle strong {
 617      word-break: break-all;
 618  }
 619  
 620  .wrap .add-new-h2, /* deprecated */
 621  .wrap .add-new-h2:active, /* deprecated */
 622  .wrap .page-title-action,
 623  .wrap .page-title-action:active {
 624      display: inline-block;
 625      position: relative;
 626      box-sizing: border-box;
 627      cursor: pointer;
 628      white-space: nowrap;
 629      text-decoration: none;
 630      text-shadow: none;
 631      top: -3px;
 632      margin-left: 4px;
 633      border: 1px solid #2271b1;
 634      border-radius: 3px;
 635      background: #f6f7f7;
 636      font-size: 13px;
 637      font-weight: 400;
 638      line-height: 2.15384615;
 639      color: #2271b1; /* use the standard color used for buttons */
 640      padding: 0 10px;
 641      min-height: 30px;
 642      -webkit-appearance: none;
 643  
 644  }
 645  
 646  .wrap .wp-heading-inline + .page-title-action {
 647      margin-left: 0;
 648  }
 649  
 650  .wrap .add-new-h2:hover, /* deprecated */
 651  .wrap .page-title-action:hover {
 652      background: #f0f0f1;
 653      border-color: #0a4b78;
 654      color: #0a4b78;
 655  }
 656  
 657  /* lower specificity: color needs to be overridden by :hover and :active */
 658  .page-title-action:focus {
 659      color: #0a4b78;
 660  }
 661  
 662  /* Dashicon for language options on General Settings and Profile screens */
 663  .form-table th label[for="locale"] .dashicons,
 664  .form-table th label[for="WPLANG"] .dashicons {
 665      margin-left: 5px;
 666  }
 667  
 668  .wrap .page-title-action:focus {
 669      border-color: #3582c4;
 670      box-shadow: 0 0 0 1px #3582c4;
 671      /* Only visible in Windows High Contrast mode */
 672      outline: 2px solid transparent;
 673  }
 674  
 675  .wrap h1.long-header {
 676      padding-right: 0;
 677  }
 678  
 679  .wp-dialog {
 680      background-color: #fff;
 681  }
 682  
 683  .widgets-chooser ul,
 684  #widgets-left .widget-in-question .widget-top,
 685  #available-widgets .widget-top:hover,
 686  div#widgets-right .widget-top:hover,
 687  #widgets-left .widget-top:hover {
 688      border-color: #8c8f94;
 689      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 690  }
 691  
 692  .sorthelper {
 693      background-color: #c5d9ed;
 694  }
 695  
 696  .ac_match,
 697  .subsubsub a.current {
 698      color: #000;
 699  }
 700  
 701  .striped > tbody > :nth-child(odd),
 702  ul.striped > :nth-child(odd),
 703  .alternate {
 704      background-color: #f6f7f7;
 705  }
 706  
 707  .bar {
 708      background-color: #f0f0f1;
 709      border-right-color: #4f94d4;
 710  }
 711  
 712  /* Helper classes for plugins to leverage the active WordPress color scheme */
 713  
 714  .highlight {
 715      background-color: #f0f6fc;
 716      color: #3c434a;
 717  }
 718  
 719  .wp-ui-primary {
 720      color: #fff;
 721      background-color: #2c3338;
 722  }
 723  .wp-ui-text-primary {
 724      color: #2c3338;
 725  }
 726  
 727  .wp-ui-highlight {
 728      color: #fff;
 729      background-color: #2271b1;
 730  }
 731  .wp-ui-text-highlight {
 732      color: #2271b1;
 733  }
 734  
 735  .wp-ui-notification {
 736      color: #fff;
 737      background-color: #d63638;
 738  }
 739  .wp-ui-text-notification {
 740      color: #d63638;
 741  }
 742  
 743  .wp-ui-text-icon {
 744      color: #8c8f94; /* same as new icons */
 745  }
 746  
 747  /* For emoji replacement images */
 748  img.emoji {
 749      display: inline !important;
 750      border: none !important;
 751      height: 1em !important;
 752      width: 1em !important;
 753      margin: 0 .07em !important;
 754      vertical-align: -0.1em !important;
 755      background: none !important;
 756      padding: 0 !important;
 757      box-shadow: none !important;
 758  }
 759  
 760  /*------------------------------------------------------------------------------
 761    1.0 - Text Styles
 762  ------------------------------------------------------------------------------*/
 763  
 764  .widget .widget-top,
 765  .postbox .hndle,
 766  .stuffbox .hndle,
 767  .control-section .accordion-section-title,
 768  .sidebar-name,
 769  #nav-menu-header,
 770  #nav-menu-footer,
 771  .menu-item-handle,
 772  .checkbox,
 773  .side-info,
 774  #your-profile #rich_editing,
 775  .widefat thead th,
 776  .widefat thead td,
 777  .widefat tfoot th,
 778  .widefat tfoot td {
 779      line-height: 1.4em;
 780  }
 781  
 782  .widget .widget-top,
 783  .menu-item-handle {
 784      background: #f6f7f7;
 785      color: #1d2327;
 786  }
 787  
 788  .stuffbox .hndle {
 789      border-bottom: 1px solid #c3c4c7;
 790  }
 791  
 792  .quicktags {
 793      background-color: #c3c4c7;
 794      color: #000;
 795      font-size: 12px;
 796  }
 797  
 798  .icon32 {
 799      display: none;
 800  }
 801  
 802  /* @todo can we combine these into a class or use an existing dashicon one? */
 803  .welcome-panel .welcome-panel-close:before,
 804  .tagchecklist .ntdelbutton .remove-tag-icon:before,
 805  #bulk-titles .ntdelbutton:before,
 806  .notice-dismiss:before {
 807      background: none;
 808      color: #787c82;
 809      content: "\f153";
 810      display: block;
 811      font: normal 16px/20px dashicons;
 812      speak: never;
 813      height: 20px;
 814      text-align: center;
 815      width: 20px;
 816      -webkit-font-smoothing: antialiased;
 817      -moz-osx-font-smoothing: grayscale;
 818  }
 819  
 820  .welcome-panel .welcome-panel-close:before {
 821      margin: 0;
 822  }
 823  
 824  .tagchecklist .ntdelbutton .remove-tag-icon:before {
 825      margin-left: 2px;
 826      border-radius: 50%;
 827      color: #2271b1;
 828      /* vertically center the icon cross browsers */
 829      line-height: 1.28;
 830  }
 831  
 832  .tagchecklist .ntdelbutton:focus {
 833      outline: 0;
 834  }
 835  
 836  .tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
 837  .tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
 838  #bulk-titles .ntdelbutton:hover:before,
 839  #bulk-titles .ntdelbutton:focus:before {
 840      color: #d63638;
 841  }
 842  
 843  .tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
 844      box-shadow: 0 0 0 2px #2271b1;
 845      /* Only visible in Windows High Contrast mode */
 846      outline: 2px solid transparent;
 847  }
 848  
 849  .key-labels label {
 850      line-height: 24px;
 851  }
 852  
 853  strong, b {
 854      font-weight: 600;
 855  }
 856  
 857  .pre {
 858      /* https://developer.mozilla.org/en-US/docs/CSS/white-space */
 859      white-space: pre-wrap; /* css-3 */
 860      word-wrap: break-word; /* IE 5.5 - 7 */
 861  }
 862  
 863  .howto {
 864      color: #646970;
 865      display: block;
 866  }
 867  
 868  p.install-help {
 869      margin: 8px 0;
 870      font-style: italic;
 871  }
 872  
 873  .no-break {
 874      white-space: nowrap;
 875  }
 876  
 877  hr {
 878      border: 0;
 879      border-top: 1px solid #dcdcde;
 880      border-bottom: 1px solid #f6f7f7;
 881  }
 882  
 883  .row-actions span.delete a,
 884  .row-actions span.trash a,
 885  .row-actions span.spam a,
 886  .plugins a.delete,
 887  #all-plugins-table .plugins a.delete,
 888  #search-plugins-table .plugins a.delete,
 889  .submitbox .submitdelete,
 890  #media-items a.delete,
 891  #media-items a.delete-permanently,
 892  #nav-menu-footer .menu-delete,
 893  #delete-link a.delete,
 894  a#remove-post-thumbnail,
 895  .privacy_requests .remove-personal-data .remove-personal-data-handle {
 896      color: #b32d2e;
 897  }
 898  
 899  abbr.required,
 900  span.required,
 901  .file-error,
 902  .row-actions .delete a:hover,
 903  .row-actions .trash a:hover,
 904  .row-actions .spam a:hover,
 905  .plugins a.delete:hover,
 906  #all-plugins-table .plugins a.delete:hover,
 907  #search-plugins-table .plugins a.delete:hover,
 908  .submitbox .submitdelete:hover,
 909  #media-items a.delete:hover,
 910  #media-items a.delete-permanently:hover,
 911  #nav-menu-footer .menu-delete:hover,
 912  #delete-link a.delete:hover,
 913  a#remove-post-thumbnail:hover,
 914  .privacy_requests .remove-personal-data .remove-personal-data-handle:hover {
 915      color: #b32d2e;
 916      border: none;
 917  }
 918  
 919  .application-password-display .success {
 920      color: #007017;
 921      margin-left: 0.5rem;
 922  }
 923  
 924  /*------------------------------------------------------------------------------
 925    3.0 - Actions
 926  ------------------------------------------------------------------------------*/
 927  
 928  #major-publishing-actions {
 929      padding: 10px;
 930      clear: both;
 931      border-top: 1px solid #dcdcde;
 932      background: #f6f7f7;
 933  }
 934  
 935  #delete-action {
 936      float: left;
 937      line-height: 2.30769231; /* 30px */
 938  }
 939  
 940  #delete-link {
 941      line-height: 2.30769231; /* 30px */
 942      vertical-align: middle;
 943      text-align: left;
 944      margin-left: 8px;
 945  }
 946  
 947  #delete-link a {
 948      text-decoration: none;
 949  }
 950  
 951  #publishing-action {
 952      text-align: right;
 953      float: right;
 954      line-height: 1.9;
 955  }
 956  
 957  #publishing-action .spinner {
 958      float: none;
 959      margin-top: 5px;
 960  }
 961  
 962  #misc-publishing-actions {
 963      padding: 6px 0 0;
 964  }
 965  
 966  .misc-pub-section {
 967      padding: 6px 10px 8px;
 968  }
 969  
 970  .word-wrap-break-word,
 971  .misc-pub-filename {
 972      word-wrap: break-word;
 973  }
 974  
 975  #minor-publishing-actions {
 976      padding: 10px 10px 0;
 977      text-align: right;
 978  }
 979  
 980  #save-post {
 981      float: left;
 982  }
 983  
 984  .preview {
 985      float: right;
 986  }
 987  
 988  #sticky-span {
 989      margin-left: 18px;
 990  }
 991  
 992  .approve,
 993  .unapproved .unapprove {
 994      display: none;
 995  }
 996  
 997  .unapproved .approve,
 998  .spam .approve,
 999  .trash .approve {
1000      display: inline;
1001  }
1002  
1003  td.action-links,
1004  th.action-links {
1005      text-align: right;
1006  }
1007  
1008  #misc-publishing-actions .notice {
1009      margin-left: 10px;
1010      margin-right: 10px;
1011  }
1012  
1013  /* Filter bar */
1014  .wp-filter {
1015      display: inline-block;
1016      position: relative;
1017      box-sizing: border-box;
1018      margin: 12px 0 25px;
1019      padding: 0 10px;
1020      width: 100%;
1021      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1022      border: 1px solid #c3c4c7;
1023      background: #fff;
1024      color: #50575e;
1025      font-size: 13px;
1026  }
1027  
1028  .wp-filter a {
1029      text-decoration: none;
1030  }
1031  
1032  .filter-count {
1033      display: inline-block;
1034      vertical-align: middle;
1035      min-width: 4em;
1036  }
1037  
1038  .title-count,
1039  .filter-count .count {
1040      display: inline-block;
1041      position: relative;
1042      top: -1px;
1043      padding: 4px 10px;
1044      border-radius: 30px;
1045      background: #646970;
1046      color: #fff;
1047      font-size: 14px;
1048      font-weight: 600;
1049  }
1050  
1051  /* not a part of filter bar, but derived from it, so here for now */
1052  .title-count {
1053      display: inline;
1054      top: -3px;
1055      margin-left: 5px;
1056      margin-right: 20px;
1057  }
1058  
1059  .filter-items {
1060      float: left;
1061  }
1062  
1063  .filter-links {
1064      display: inline-block;
1065      margin: 0;
1066  }
1067  
1068  .filter-links li {
1069      display: inline-block;
1070      margin: 0;
1071  }
1072  
1073  .filter-links li > a {
1074      display: inline-block;
1075      margin: 0 10px;
1076      padding: 15px 0;
1077      border-bottom: 4px solid #fff;
1078      color: #646970;
1079      cursor: pointer;
1080  }
1081  
1082  .filter-links .current {
1083      box-shadow: none;
1084      border-bottom: 4px solid #646970;
1085      color: #1d2327;
1086  }
1087  
1088  .filter-links li > a:hover,
1089  .filter-links li > a:focus,
1090  .show-filters .filter-links a.current:hover,
1091  .show-filters .filter-links a.current:focus {
1092      color: #135e96;
1093  }
1094  
1095  .wp-filter .search-form {
1096      float: right;
1097      display: flex;
1098      align-items: center;
1099      column-gap: .5rem;
1100  }
1101  
1102  .wp-filter .search-form input[type="search"] {
1103      width: 280px;
1104      max-width: 100%;
1105  }
1106  
1107  .wp-filter .search-form select {
1108      margin: 0;
1109  }
1110  
1111  /* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
1112  .plugin-install-php .wp-filter {
1113      display: flex;
1114      flex-wrap: wrap;
1115      justify-content: space-between;
1116      align-items: center;
1117  }
1118  
1119  .wp-filter .search-form.search-plugins {
1120      /* This element is a flex item: the inherited float won't have any effect. */
1121      margin-top: 0;
1122  }
1123  
1124  .wp-filter .search-form.search-plugins select,
1125  .wp-filter .search-form.search-plugins .wp-filter-search,
1126  .no-js .wp-filter .search-form.search-plugins .button {
1127      display: inline-block;
1128      vertical-align: top;
1129  }
1130  
1131  .wp-filter .button.drawer-toggle {
1132      margin: 10px 9px 0;
1133      padding: 0 10px 0 6px;
1134      border-color: transparent;
1135      background-color: transparent;
1136      color: #646970;
1137      vertical-align: baseline;
1138      box-shadow: none;
1139  }
1140  
1141  .wp-filter .drawer-toggle:before {
1142      content: "\f111";
1143      margin: 0 5px 0 0;
1144      color: #646970;
1145      font: normal 16px/1 dashicons;
1146      vertical-align: text-bottom;
1147      -webkit-font-smoothing: antialiased;
1148      -moz-osx-font-smoothing: grayscale;
1149  }
1150  
1151  .wp-filter .button.drawer-toggle:hover,
1152  .wp-filter .drawer-toggle:hover:before,
1153  .wp-filter .button.drawer-toggle:focus,
1154  .wp-filter .drawer-toggle:focus:before {
1155      background-color: transparent;
1156      color: #135e96;
1157  }
1158  
1159  .wp-filter .button.drawer-toggle:hover,
1160  .wp-filter .button.drawer-toggle:focus:active {
1161      border-color: transparent;
1162  }
1163  
1164  .wp-filter .button.drawer-toggle:focus {
1165      border-color: #4f94d4;
1166  }
1167  
1168  .wp-filter .button.drawer-toggle:active {
1169      background: transparent;
1170      box-shadow: none;
1171      transform: none;
1172  }
1173  
1174  .wp-filter .drawer-toggle.current:before {
1175      color: #fff;
1176  }
1177  
1178  .filter-drawer,
1179  .wp-filter .favorites-form {
1180      display: none;
1181      margin: 0 -10px 0 -20px;
1182      padding: 20px;
1183      border-top: 1px solid #f0f0f1;
1184      background: #f6f7f7;
1185      overflow: hidden;
1186  }
1187  
1188  .wp-filter .favorites-form .favorites-username {
1189      display: flex;
1190      align-items: center;
1191      flex-wrap: wrap;
1192      gap: 0.5rem;
1193  }
1194  
1195  .wp-filter .favorites-form .favorites-username input {
1196      margin: 0;
1197  }
1198  
1199  .show-filters .filter-drawer,
1200  .show-favorites-form .favorites-form {
1201      display: block;
1202  }
1203  
1204  .show-filters .filter-links a.current {
1205      border-bottom: none;
1206  }
1207  
1208  .show-filters .wp-filter .button.drawer-toggle {
1209      border-radius: 2px;
1210      background: #646970;
1211      color: #fff;
1212  }
1213  
1214  .show-filters .wp-filter .drawer-toggle:hover,
1215  .show-filters .wp-filter .drawer-toggle:focus {
1216      background: #2271b1;
1217  }
1218  
1219  .show-filters .wp-filter .drawer-toggle:before {
1220      color: #fff;
1221  }
1222  
1223  .filter-group {
1224      box-sizing: border-box;
1225      position: relative;
1226      float: left;
1227      margin: 0 1% 0 0;
1228      padding: 20px 10px 10px;
1229      width: 24%;
1230      background: #fff;
1231      border: 1px solid #dcdcde;
1232      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1233  }
1234  
1235  .filter-group legend {
1236      position: absolute;
1237      top: 10px;
1238      display: block;
1239      margin: 0;
1240      padding: 0;
1241      font-size: 1em;
1242      font-weight: 600;
1243  }
1244  
1245  .filter-drawer .filter-group-feature {
1246      margin: 28px 0 0;
1247      list-style-type: none;
1248      font-size: 12px;
1249  }
1250  
1251  .filter-drawer .filter-group-feature input,
1252  .filter-drawer .filter-group-feature label {
1253      line-height: 1.4;
1254  }
1255  
1256  .filter-drawer .filter-group-feature input {
1257      position: absolute;
1258      margin: 0;
1259  }
1260  
1261  .filter-group .filter-group-feature label {
1262      display: block;
1263      margin: 14px 0 14px 23px;
1264  }
1265  
1266  .filter-drawer .buttons {
1267      clear: both;
1268      margin-bottom: 20px;
1269  }
1270  
1271  .filter-drawer .filter-group + .buttons {
1272      margin-bottom: 0;
1273      padding-top: 20px;
1274  }
1275  
1276  .filter-drawer .buttons .button span {
1277      display: inline-block;
1278      opacity: 0.8;
1279      font-size: 12px;
1280      text-indent: 10px;
1281  }
1282  
1283  .wp-filter .button.clear-filters {
1284      display: none;
1285      margin-left: 10px;
1286  }
1287  
1288  .wp-filter .button-link.edit-filters {
1289      padding: 0 5px;
1290      line-height: 2.2;
1291  }
1292  
1293  .filtered-by {
1294      display: none;
1295      margin: 0;
1296  }
1297  
1298  .filtered-by > span {
1299      font-weight: 600;
1300  }
1301  
1302  .filtered-by a {
1303      margin-left: 10px;
1304  }
1305  
1306  .filtered-by .tags {
1307      display: flex;
1308      align-items: flex-start;
1309      flex-wrap: wrap;
1310      gap: 8px;
1311  }
1312  
1313  .filtered-by .tag {
1314      padding: 4px 8px;
1315      border: 1px solid #dcdcde;
1316      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1317      background: #fff;
1318      font-size: 11px;
1319  }
1320  
1321  .filters-applied .filter-group,
1322  .filters-applied .filter-drawer .buttons,
1323  .filters-applied .filter-drawer br {
1324      display: none;
1325  }
1326  
1327  .filters-applied .filtered-by {
1328      display: flex;
1329      align-items: center;
1330      flex-wrap: wrap;
1331      gap: 10px;
1332  }
1333  
1334  .filters-applied .filter-drawer {
1335      padding: 20px;
1336  }
1337  
1338  .show-filters .favorites-form,
1339  .show-filters .content-filterable,
1340  .show-filters.filters-applied.loading-content .content-filterable,
1341  .loading-content .content-filterable,
1342  .error .content-filterable {
1343      display: none;
1344  }
1345  
1346  .show-filters.filters-applied .content-filterable {
1347      display: block;
1348  }
1349  
1350  .loading-content .spinner {
1351      display: block;
1352      margin: 40px auto 0;
1353      float: none;
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  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
2437      background: inherit;
2438      color: #1d2327;
2439      display: block;
2440      position: relative;
2441      text-align: left;
2442      width: 100%;
2443      outline: none;
2444      border: 0;
2445      padding: 10px 10px 11px 14px;
2446      line-height: 1.5;
2447      cursor: pointer;
2448  }
2449  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
2450      box-shadow: 0 0 0 2px #2271b1;
2451      outline: 2px solid transparent;
2452  }
2453  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
2454      position: absolute;
2455      right: 10px;
2456      left: auto;
2457      color: #787c82;
2458      border-radius: 50px;
2459  }
2460  .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
2461      color: #1d2327;
2462  }
2463  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
2464      position: relative;
2465      left: -1px
2466  }
2467  
2468  .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
2469      transform: rotate(180deg);
2470  }
2471  
2472  #templateside ul li a {
2473      text-decoration: none;
2474  }
2475  
2476  .plugin-install #description,
2477  .plugin-install-network #description {
2478      width: 60%;
2479  }
2480  
2481  table .vers,
2482  table .column-visible,
2483  table .column-rating {
2484      text-align: left;
2485  }
2486  
2487  .attention,
2488  .error-message {
2489      color: #d63638;
2490      font-weight: 600;
2491  }
2492  
2493  /* Scrollbar fix for bulk upgrade iframe */
2494  body.iframe {
2495      height: 98%;
2496  }
2497  
2498  /* Upgrader styles, Specific to Language Packs */
2499  .lp-show-latest p {
2500      display: none;
2501  }
2502  .lp-show-latest p:last-child,
2503  .lp-show-latest .lp-error p {
2504      display: block;
2505  }
2506  
2507  /* - Only used once or twice in all of WP - deprecate for global style
2508  ------------------------------------------------------------------------------*/
2509  .media-icon {
2510      width: 62px; /* icon + border */
2511      text-align: center;
2512  }
2513  
2514  .media-icon img {
2515      border: 1px solid #dcdcde;
2516      border: 1px solid rgba(0, 0, 0, 0.07);
2517  }
2518  
2519  #howto {
2520      font-size: 11px;
2521      margin: 0 5px;
2522      display: block;
2523  }
2524  
2525  .importers {
2526      font-size: 16px;
2527      width: auto;
2528  }
2529  
2530  .importers td {
2531      padding-right: 14px;
2532      line-height: 1.4;
2533  }
2534  
2535  .importers .import-system {
2536      max-width: 250px;
2537  }
2538  
2539  .importers td.desc {
2540      max-width: 500px;
2541  }
2542  
2543  .importer-title,
2544  .importer-desc,
2545  .importer-action {
2546      display: block;
2547  }
2548  
2549  .importer-title {
2550      color: #000;
2551      font-size: 14px;
2552      font-weight: 400;
2553      margin-bottom: .2em;
2554  }
2555  
2556  .importer-action {
2557      line-height: 1.55; /* Same as with .updating-message */
2558      color: #50575e;
2559      margin-bottom: 1em;
2560  }
2561  
2562  #post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */
2563  #post-body #post-body-content #namediv h2 {
2564      margin-top: 0;
2565  }
2566  
2567  .edit-comment-author {
2568      color: #1d2327;
2569      border-bottom: 1px solid #f0f0f1;
2570  }
2571  
2572  #namediv h3 label, /* Back-compat for pre-4.4 */
2573  #namediv h2 label {
2574      vertical-align: baseline;
2575  }
2576  
2577  #namediv table {
2578      width: 100%;
2579  }
2580  
2581  #namediv td.first {
2582      width: 10px;
2583      white-space: nowrap;
2584  }
2585  
2586  #namediv input {
2587      width: 100%;
2588  }
2589  
2590  #namediv p {
2591      margin: 10px 0;
2592  }
2593  
2594  /* - Used - but could/should be deprecated with a CSS reset
2595  ------------------------------------------------------------------------------*/
2596  .zerosize {
2597      height: 0;
2598      width: 0;
2599      margin: 0;
2600      border: 0;
2601      padding: 0;
2602      overflow: hidden;
2603      position: absolute;
2604  }
2605  
2606  br.clear {
2607      height: 2px;
2608      line-height: 0.15;
2609  }
2610  
2611  .checkbox {
2612      border: none;
2613      margin: 0;
2614      padding: 0;
2615  }
2616  
2617  fieldset {
2618      border: 0;
2619      padding: 0;
2620      margin: 0;
2621  }
2622  
2623  .post-categories {
2624      display: inline;
2625      margin: 0;
2626      padding: 0;
2627  }
2628  
2629  .post-categories li {
2630      display: inline;
2631  }
2632  
2633  /* Star Ratings - Back-compat for pre-3.8 */
2634  div.star-holder {
2635      position: relative;
2636      height: 17px;
2637      width: 100px;
2638      background: url(../images/stars.png?ver=20121108) repeat-x bottom left;
2639  }
2640  
2641  div.star-holder .star-rating {
2642      background: url(../images/stars.png?ver=20121108) repeat-x top left;
2643      height: 17px;
2644      float: left;
2645  }
2646  
2647  /* Star Ratings */
2648  .star-rating {
2649      white-space: nowrap;
2650  }
2651  .star-rating .star {
2652      display: inline-block;
2653      width: 20px;
2654      height: 20px;
2655      -webkit-font-smoothing: antialiased;
2656      font-size: 20px;
2657      line-height: 1;
2658      font-family: dashicons;
2659      text-decoration: inherit;
2660      font-weight: 400;
2661      font-style: normal;
2662      vertical-align: top;
2663      transition: color .1s ease-in;
2664      text-align: center;
2665      color: #dba617;
2666  }
2667  
2668  .star-rating .star-full:before {
2669      content: "\f155";
2670  }
2671  
2672  .star-rating .star-half:before {
2673      content: "\f459";
2674  }
2675  
2676  .rtl .star-rating .star-half {
2677      transform: rotateY(180deg);
2678  }
2679  
2680  .star-rating .star-empty:before {
2681      content: "\f154";
2682  }
2683  
2684  div.action-links {
2685      font-weight: 400;
2686      margin: 6px 0 0;
2687  }
2688  
2689  /* Plugin install thickbox */
2690  #plugin-information {
2691      background: #fff;
2692      position: fixed;
2693      top: 0;
2694      right: 0;
2695      bottom: 0;
2696      left: 0;
2697      height: 100%;
2698      padding: 0;
2699  }
2700  
2701  #plugin-information-scrollable {
2702      overflow: auto;
2703      -webkit-overflow-scrolling: touch;
2704      height: 100%;
2705  }
2706  
2707  #plugin-information-title {
2708      padding: 0 26px;
2709      background: #f6f7f7;
2710      font-size: 22px;
2711      font-weight: 600;
2712      line-height: 2.4;
2713      position: relative;
2714      height: 56px;
2715  }
2716  
2717  #plugin-information-title.with-banner {
2718      margin-right: 0;
2719      height: 250px;
2720      background-size: cover;
2721  }
2722  
2723  #plugin-information-title h2 {
2724      font-size: 1em;
2725      font-weight: 600;
2726      padding: 0;
2727      margin: 0;
2728      overflow: hidden;
2729      text-overflow: ellipsis;
2730      white-space: nowrap;
2731  }
2732  
2733  #plugin-information-title.with-banner h2 {
2734      position: relative;
2735      font-family: "Helvetica Neue", sans-serif;
2736      display: inline-block;
2737      font-size: 30px;
2738      line-height: 1.68;
2739      box-sizing: border-box;
2740      max-width: 100%;
2741      padding: 0 15px;
2742      margin-top: 174px;
2743      color: #fff;
2744      background: rgba(29, 35, 39, 0.9);
2745      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
2746      box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
2747      border-radius: 8px;
2748  }
2749  
2750  #plugin-information-title div.vignette {
2751      display: none;
2752  }
2753  
2754  #plugin-information-title.with-banner div.vignette {
2755      position: absolute;
2756      display: block;
2757      top: 0;
2758      left: 0;
2759      height: 250px;
2760      width: 100%;
2761      background: transparent;
2762      box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2763  }
2764  
2765  #plugin-information-tabs {
2766      padding: 0 16px;
2767      position: relative;
2768      right: 0;
2769      left: 0;
2770      min-height: 36px;
2771      font-size: 0;
2772      z-index: 1;
2773      border-bottom: 1px solid #dcdcde;
2774      background: #f6f7f7;
2775  }
2776  
2777  #plugin-information-tabs a {
2778      position: relative;
2779      display: inline-block;
2780      padding: 9px 10px;
2781      margin: 0;
2782      height: 18px;
2783      line-height: 1.3;
2784      font-size: 14px;
2785      text-decoration: none;
2786      transition: none;
2787  }
2788  
2789  #plugin-information-tabs a.current {
2790      margin: 0 -1px -1px;
2791      background: #fff;
2792      border: 1px solid #dcdcde;
2793      border-bottom-color: #fff;
2794      padding-top: 8px;
2795      color: #2c3338;
2796  }
2797  
2798  #plugin-information-tabs.with-banner a.current {
2799      border-top: none;
2800      padding-top: 9px;
2801  }
2802  
2803  #plugin-information-tabs a:active,
2804  #plugin-information-tabs a:focus {
2805      outline: none;
2806  }
2807  
2808  #plugin-information-content {
2809      overflow: hidden; /* equal height column trick */
2810      background: #fff;
2811      position: relative;
2812      top: 0;
2813      right: 0;
2814      left: 0;
2815      min-height: 100%;
2816      /* Height of title + tabs + install now */
2817      min-height: calc( 100% - 152px );
2818  }
2819  
2820  #plugin-information-content.with-banner {
2821      /* Height of banner + tabs + install now */
2822      min-height: calc( 100% - 346px );
2823  }
2824  
2825  #section-holder {
2826      position: relative;
2827      top: 0;
2828      right: 250px;
2829      bottom: 0;
2830      left: 0;
2831      margin-top: 10px;
2832      margin-right: 250px; /* FYI box */
2833      padding: 10px 26px 99999px; /* equal height column trick */
2834      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2835  }
2836  
2837  #section-holder .notice {
2838      margin: 5px 0 15px;
2839  }
2840  
2841  #section-holder .updated {
2842      margin: 16px 0;
2843  }
2844  
2845  #plugin-information .fyi {
2846      float: right;
2847      position: relative;
2848      top: 0;
2849      right: 0;
2850      padding: 16px 16px 99999px; /* equal height column trick */
2851      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2852      width: 217px;
2853      border-left: 1px solid #dcdcde;
2854      background: #f6f7f7;
2855      color: #646970;
2856  }
2857  
2858  #plugin-information .fyi strong {
2859      color: #3c434a;
2860  }
2861  
2862  #plugin-information .fyi h3 {
2863      font-weight: 600;
2864      text-transform: uppercase;
2865      font-size: 12px;
2866      color: #646970;
2867      margin: 24px 0 8px;
2868  }
2869  
2870  #plugin-information .fyi h2 {
2871      font-size: 0.9em;
2872      margin-bottom: 0;
2873      margin-right: 0;
2874  }
2875  
2876  #plugin-information .fyi ul {
2877      padding: 0;
2878      margin: 0;
2879      list-style: none;
2880  }
2881  
2882  #plugin-information .fyi li {
2883      margin: 0 0 10px;
2884  }
2885  
2886  #plugin-information .fyi-description {
2887      margin-top: 0;
2888  }
2889  
2890  #plugin-information .counter-container {
2891      margin: 3px 0;
2892  }
2893  
2894  #plugin-information .counter-label {
2895      float: left;
2896      margin-right: 5px;
2897      min-width: 55px;
2898  }
2899  
2900  #plugin-information .counter-back {
2901      height: 17px;
2902      width: 92px;
2903      background-color: #dcdcde;
2904      float: left;
2905  }
2906  
2907  #plugin-information .counter-bar {
2908      height: 17px;
2909      background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
2910      float: left;
2911  }
2912  
2913  #plugin-information .counter-count {
2914      margin-left: 5px;
2915  }
2916  
2917  #plugin-information .fyi ul.contributors {
2918      margin-top: 10px;
2919  }
2920  
2921  #plugin-information .fyi ul.contributors li {
2922      display: inline-block;
2923      margin-right: 8px;
2924      vertical-align: middle;
2925  }
2926  
2927  #plugin-information .fyi ul.contributors li {
2928      display: inline-block;
2929      margin-right: 8px;
2930      vertical-align: middle;
2931  }
2932  
2933  #plugin-information .fyi ul.contributors li img {
2934      vertical-align: middle;
2935      margin-right: 4px;
2936  }
2937  
2938  #plugin-information-footer {
2939      padding: 13px 16px;
2940      position: absolute;
2941      right: 0;
2942      bottom: 0;
2943      left: 0;
2944      height: 40px; /* actual height: 40+13+13+1=67 */
2945      border-top: 1px solid #dcdcde;
2946      background: #f6f7f7;
2947  }
2948  
2949  /* rtl:ignore */
2950  #plugin-information .section {
2951      direction: ltr;
2952  }
2953  
2954  /* rtl:ignore */
2955  #plugin-information .section ul,
2956  #plugin-information .section ol {
2957      list-style-type: disc;
2958      margin-left: 24px;
2959  }
2960  
2961  #plugin-information .section,
2962  #plugin-information .section p {
2963      font-size: 14px;
2964      line-height: 1.7;
2965  }
2966  
2967  #plugin-information #section-screenshots ol {
2968      list-style: none;
2969      margin: 0;
2970  }
2971  
2972  #plugin-information #section-screenshots li img {
2973      vertical-align: text-top;
2974      margin-top: 16px;
2975      max-width: 100%;
2976      width: auto;
2977      height: auto;
2978      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
2979  }
2980  
2981  /* rtl:ignore */
2982  #plugin-information #section-screenshots li p {
2983      font-style: italic;
2984      padding-left: 20px;
2985  }
2986  
2987  #plugin-information pre {
2988      padding: 7px;
2989      overflow: auto;
2990      border: 1px solid #c3c4c7;
2991  }
2992  
2993  #plugin-information blockquote {
2994      border-left: 2px solid #dcdcde;
2995      color: #646970;
2996      font-style: italic;
2997      margin: 1em 0;
2998      padding: 0 0 0 1em;
2999  }
3000  
3001  /* rtl:ignore */
3002  #plugin-information .review {
3003      overflow: hidden; /* clearfix */
3004      width: 100%;
3005      margin-bottom: 20px;
3006      border-bottom: 1px solid #dcdcde;
3007  }
3008  
3009  #plugin-information .review-title-section {
3010      overflow: hidden; /* clearfix */
3011  }
3012  
3013  /* rtl:ignore */
3014  #plugin-information .review-title-section h4 {
3015      display: inline-block;
3016      float: left;
3017      margin: 0 6px 0 0;
3018  }
3019  
3020  #plugin-information .reviewer-info p {
3021      clear: both;
3022      margin: 0;
3023      padding-top: 2px;
3024  }
3025  
3026  /* rtl:ignore */
3027  #plugin-information .reviewer-info .avatar {
3028      float: left;
3029      margin: 4px 6px 0 0;
3030  }
3031  
3032  /* rtl:ignore */
3033  #plugin-information .reviewer-info .star-rating {
3034      float: left;
3035  }
3036  
3037  /* rtl:ignore */
3038  #plugin-information .review-meta {
3039      float: left;
3040      margin-left: 0.75em;
3041  }
3042  
3043  /* rtl:ignore */
3044  #plugin-information .review-body {
3045      float: left;
3046      width: 100%;
3047  }
3048  
3049  .plugin-version-author-uri {
3050      font-size: 13px;
3051  }
3052  
3053  /* For non-js plugin installation screen ticket #36430. */
3054  .update-php .button.button-primary {
3055      margin-right: 1em;
3056  }
3057  
3058  @media screen and (max-width: 771px) {
3059      #plugin-information-title.with-banner {
3060          height: 100px;
3061      }
3062  
3063      #plugin-information-title.with-banner h2 {
3064          margin-top: 30px;
3065          font-size: 20px;
3066          line-height: 2;
3067          max-width: 85%;
3068      }
3069  
3070      #plugin-information-title.with-banner div.vignette {
3071          height: 100px;
3072      }
3073  
3074      #plugin-information-tabs {
3075          overflow: hidden; /* clearfix */
3076          padding: 0;
3077          height: auto; /* let tabs wrap */
3078      }
3079  
3080      #plugin-information-tabs a.current {
3081          margin-bottom: 0;
3082          border-bottom: none;
3083      }
3084  
3085      #plugin-information .fyi {
3086          float: none;
3087          border: 1px solid #dcdcde;
3088          position: static;
3089          width: auto;
3090          margin: 26px 26px 0;
3091          padding-bottom: 0; /* reset from the two column height fix */
3092      }
3093  
3094      #section-holder {
3095          position: static;
3096          margin: 0;
3097          padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */
3098      }
3099  
3100      #plugin-information .fyi h3,
3101      #plugin-information .fyi small {
3102          display: none;
3103      }
3104  
3105      #plugin-information-footer {
3106          padding: 12px 16px 0;
3107          height: 46px;
3108      }
3109  }
3110  
3111  /* Thickbox for the Plugin details modal. */
3112  #TB_window.plugin-details-modal {
3113      background: #fff;
3114  }
3115  
3116  #TB_window.plugin-details-modal.thickbox-loading:before {
3117      content: "";
3118      display: block;
3119      width: 20px;
3120      height: 20px;
3121      position: absolute;
3122      left: 50%;
3123      top: 50%;
3124      z-index: -1;
3125      margin: -10px 0 0 -10px;
3126      background: #fff url(../images/spinner.gif) no-repeat center;
3127      background-size: 20px 20px;
3128      transform: translateZ(0);
3129  }
3130  
3131  @media print,
3132      (min-resolution: 120dpi) {
3133  
3134      #TB_window.plugin-details-modal.thickbox-loading:before {
3135          background-image: url(../images/spinner-2x.gif);
3136      }
3137  }
3138  
3139  .plugin-details-modal #TB_title {
3140      float: left;
3141      height: 1px;
3142  }
3143  
3144  .plugin-details-modal #TB_ajaxWindowTitle {
3145      display: none;
3146  }
3147  
3148  .plugin-details-modal #TB_closeWindowButton {
3149      left: auto;
3150      right: -30px;
3151      color: #f0f0f1;
3152  }
3153  
3154  .plugin-details-modal #TB_closeWindowButton:hover,
3155  .plugin-details-modal #TB_closeWindowButton:focus {
3156      outline: none;
3157      box-shadow: none;
3158  }
3159  
3160  .plugin-details-modal #TB_closeWindowButton:hover::after,
3161  .plugin-details-modal #TB_closeWindowButton:focus::after {
3162      outline: 2px solid;
3163      outline-offset: -4px;
3164      border-radius: 4px;
3165  }
3166  
3167  .plugin-details-modal .tb-close-icon {
3168      display: none;
3169  }
3170  
3171  .plugin-details-modal #TB_closeWindowButton:after {
3172      content: "\f335";
3173      font: normal 32px/29px 'dashicons';
3174      speak: never;
3175      -webkit-font-smoothing: antialiased;
3176      -moz-osx-font-smoothing: grayscale;
3177  }
3178  
3179  /* move plugin install close icon to top on narrow screens */
3180  @media screen and (max-width: 830px) {
3181      .plugin-details-modal #TB_closeWindowButton {
3182          right: 0;
3183          top: -30px;
3184      }
3185  }
3186  
3187  /* @todo: move this. */
3188  img {
3189      border: none;
3190  }
3191  
3192  /* Metabox collapse arrow indicators */
3193  .sidebar-name .toggle-indicator::before,
3194  .meta-box-sortables .postbox .toggle-indicator::before,
3195  .meta-box-sortables .postbox .order-higher-indicator::before,
3196  .meta-box-sortables .postbox .order-lower-indicator::before,
3197  .bulk-action-notice .toggle-indicator::before,
3198  .privacy-text-box .toggle-indicator::before {
3199      content: "\f142";
3200      display: inline-block;
3201      font: normal 20px/1 dashicons;
3202      speak: never;
3203      -webkit-font-smoothing: antialiased;
3204      -moz-osx-font-smoothing: grayscale;
3205      text-decoration: none;
3206  }
3207  
3208  .js .widgets-holder-wrap.closed .toggle-indicator::before,
3209  .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
3210  .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
3211  .privacy-text-box.closed .toggle-indicator::before {
3212      content: "\f140";
3213  }
3214  
3215  .postbox .handle-order-higher .order-higher-indicator::before {
3216      content: "\f343";
3217      color: inherit;
3218  }
3219  
3220  .postbox .handle-order-lower .order-lower-indicator::before {
3221      content: "\f347";
3222      color: inherit;
3223  }
3224  
3225  .postbox .handle-order-higher .order-higher-indicator::before,
3226  .postbox .handle-order-lower .order-lower-indicator::before {
3227      position: relative;
3228      top: 0.11rem;
3229      width: 20px;
3230      height: 20px;
3231  }
3232  
3233  .postbox .handlediv .toggle-indicator::before {
3234      width: 20px;
3235      border-radius: 50%;
3236  }
3237  
3238  .postbox .handlediv .toggle-indicator::before {
3239      position: relative;
3240      top: 0.05rem;
3241      text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
3242  }
3243  
3244  .rtl .postbox .handlediv .toggle-indicator::before {
3245      text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
3246  }
3247  
3248  .bulk-action-notice .toggle-indicator::before {
3249      line-height: 16px;
3250      vertical-align: top;
3251      color: #787c82;
3252  }
3253  
3254  .postbox .handle-order-higher:focus,
3255  .postbox .handle-order-lower:focus,
3256  .postbox .handlediv:focus {
3257      box-shadow: inset 0 0 0 2px #2271b1;
3258      border-radius: 50%;
3259      /* Only visible in Windows High Contrast mode */
3260      outline: 2px solid transparent;
3261  }
3262  
3263  .postbox .handle-order-higher:focus .order-higher-indicator::before,
3264  .postbox .handle-order-lower:focus .order-lower-indicator::before,
3265  .postbox .handlediv:focus .toggle-indicator::before {
3266      box-shadow: none;
3267      /* Only visible in Windows High Contrast mode */
3268      outline: 1px solid transparent;
3269  }
3270  
3271  /* @todo: appears to be Press This only and overridden */
3272  #photo-add-url-div input[type="text"] {
3273      width: 300px;
3274  }
3275  
3276  /* Theme/Plugin file editor */
3277  .alignleft h2 {
3278      margin: 0;
3279  }
3280  
3281  #template textarea {
3282      font-family: Consolas, Monaco, monospace;
3283      font-size: 13px;
3284      background: #f6f7f7;
3285      tab-size: 4;
3286  }
3287  
3288  #template textarea,
3289  #template .CodeMirror {
3290      width: 100%;
3291      min-height: 60vh;
3292      height: calc( 100vh - 295px );
3293      border: 1px solid #dcdcde;
3294      box-sizing: border-box;
3295  }
3296  
3297  #templateside > h2 {
3298      padding-top: 6px;
3299      padding-bottom: 7px;
3300      margin: 0;
3301  }
3302  
3303  #templateside ol,
3304  #templateside ul {
3305      margin: 0;
3306      padding: 0;
3307  }
3308  #templateside > ul {
3309      box-sizing: border-box;
3310      margin-top: 0;
3311      overflow: auto;
3312      padding: 0;
3313      min-height: 60vh;
3314      height: calc(100vh - 295px);
3315      background-color: #f6f7f7;
3316      border: 1px solid #dcdcde;
3317      border-left: none;
3318  }
3319  #templateside ul ul {
3320      padding-left: 12px;
3321  }
3322  #templateside > ul > li > ul[role=group] {
3323      padding-left: 0;
3324  }
3325  
3326  /*
3327   * Styles for Theme and Plugin file editors.
3328   */
3329  
3330  /* Hide collapsed items. */
3331  [role="treeitem"][aria-expanded="false"] > ul {
3332      display: none;
3333  }
3334  
3335  /* Use arrow dashicons for folder states, but hide from screen readers. */
3336  [role="treeitem"] span[aria-hidden] {
3337      display: inline;
3338      font-family: dashicons;
3339      font-size: 20px;
3340      position: absolute;
3341      pointer-events: none;
3342  }
3343  [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
3344      content: "\f139";
3345  }
3346  [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
3347      content: "\f140";
3348  }
3349  [role="treeitem"] .folder-label {
3350      display: block;
3351      padding: 3px 3px 3px 12px;
3352      cursor: pointer;
3353  }
3354  
3355  /* Remove outline, and create our own focus and hover styles */
3356  [role="treeitem"] {
3357      outline: 0;
3358  }
3359  
3360  [role="treeitem"] a:focus,
3361  [role="treeitem"] .folder-label.focus {
3362      color: #043959;
3363      /* Reset default focus style. */
3364      box-shadow: none;
3365      /* Use an inset outline instead, so it's visible also over the current file item. */
3366      outline: 2px solid #2271b1;
3367      outline-offset: -2px;
3368  }
3369  
3370  [role="treeitem"].hover,
3371  [role="treeitem"] .folder-label.hover {
3372      background-color: #f0f0f1;
3373  }
3374  
3375  .tree-folder {
3376      margin: 0;
3377      position: relative;
3378  }
3379  [role="treeitem"] li {
3380      position: relative;
3381  }
3382  
3383  /* Styles for folder indicators/depth */
3384  .tree-folder .tree-folder::after {
3385      content: "";
3386      display: block;
3387      position: absolute;
3388      left: 2px;
3389      border-left: 1px solid #c3c4c7;
3390      top: -13px;
3391      bottom: 10px;
3392  }
3393  .tree-folder > li::before {
3394      content: "";
3395      position: absolute;
3396      display: block;
3397      border-left: 1px solid #c3c4c7;
3398      left: 2px;
3399      top: -5px;
3400      height: 18px;
3401      width: 7px;
3402      border-bottom: 1px solid #c3c4c7;
3403  }
3404  .tree-folder > li::after {
3405      content: "";
3406      position: absolute;
3407      display: block;
3408      border-left: 1px solid #c3c4c7;
3409      left: 2px;
3410      bottom: -7px;
3411      top: 0;
3412  }
3413  
3414  /* current-file needs to adjustment for .notice styles */
3415  #templateside .current-file {
3416      margin: -4px 0 -2px;
3417  }
3418  .tree-folder > .current-file::before {
3419      left: 4px;
3420      height: 15px;
3421      width: 0;
3422      border-left: none;
3423      top: 3px;
3424  }
3425  .tree-folder > .current-file::after {
3426      bottom: -4px;
3427      height: 7px;
3428      left: 2px;
3429      top: auto;
3430  }
3431  
3432  /* Lines shouldn't continue on last item */
3433  .tree-folder > li:last-child::after,
3434  .tree-folder li:last-child > .tree-folder::after {
3435      display: none;
3436  }
3437  
3438  #theme-plugin-editor-selector,
3439  #theme-plugin-editor-label,
3440  #documentation label {
3441      font-weight: 600;
3442  }
3443  
3444  #theme-plugin-editor-label {
3445      display: inline-block;
3446      margin-bottom: 1em;
3447  }
3448  
3449  /* rtl:ignore */
3450  #template textarea,
3451  #docs-list {
3452      direction: ltr;
3453  }
3454  
3455  .fileedit-sub #theme,
3456  .fileedit-sub #plugin {
3457      max-width: 40%;
3458  }
3459  .fileedit-sub .alignright {
3460      text-align: right;
3461  }
3462  
3463  #template p {
3464      width: 97%;
3465  }
3466  
3467  #file-editor-linting-error {
3468      margin-top: 1em;
3469      margin-bottom: 1em;
3470  }
3471  #file-editor-linting-error > .notice {
3472      margin: 0;
3473      display: inline-block;
3474  }
3475  #file-editor-linting-error > .notice > p {
3476      width: auto;
3477  }
3478  #template .submit {
3479      margin-top: 1em;
3480      padding: 0;
3481  }
3482  
3483  #template .submit input[type=submit][disabled] {
3484      cursor: not-allowed;
3485  }
3486  #templateside {
3487      float: right;
3488      width: 16em;
3489      word-wrap: break-word;
3490  }
3491  
3492  #postcustomstuff p.submit {
3493      margin: 0;
3494  }
3495  
3496  #templateside h4 {
3497      margin: 1em 0 0;
3498  }
3499  
3500  #templateside li {
3501      margin: 4px 0;
3502  }
3503  
3504  #templateside li:not(.howto) a,
3505  .theme-editor-php .highlight {
3506      display: block;
3507      padding: 3px 0 3px 12px;
3508      text-decoration: none;
3509  }
3510  
3511  #templateside li.current-file > a {
3512      padding-bottom: 0;
3513  }
3514  
3515  #templateside li:not(.howto) > a:first-of-type {
3516      padding-top: 0;
3517  }
3518  
3519  #templateside li.howto {
3520      padding: 6px 12px 12px;
3521  }
3522  
3523  .theme-editor-php .highlight {
3524      margin: -3px 3px -3px -12px;
3525  }
3526  
3527  #templateside .highlight {
3528      border: none;
3529      font-weight: 600;
3530  }
3531  
3532  .nonessential {
3533      color: #646970;
3534      font-size: 11px;
3535      font-style: italic;
3536      padding-left: 12px;
3537  }
3538  
3539  #documentation {
3540      margin-top: 10px;
3541  }
3542  
3543  #documentation label {
3544      line-height: 1.8;
3545      vertical-align: baseline;
3546  }
3547  
3548  .fileedit-sub {
3549      padding: 10px 0 8px;
3550      line-height: 180%;
3551  }
3552  
3553  #file-editor-warning .file-editor-warning-content {
3554      margin: 25px;
3555  }
3556  
3557  /* @todo: can we use a common class for these? */
3558  .nav-menus-php .item-edit:before,
3559  .wp-customizer .control-section .accordion-section-title:after,
3560  .wp-customizer .accordion-section-title:after,
3561  .widget-top .widget-action .toggle-indicator:before {
3562      content: "\f140";
3563      font: normal 20px/1 dashicons;
3564      speak: never;
3565      display: block;
3566      -webkit-font-smoothing: antialiased;
3567      -moz-osx-font-smoothing: grayscale;
3568      text-decoration: none;
3569  }
3570  
3571  .widget-top .widget-action .toggle-indicator:before {
3572      padding: 1px 2px 1px 0;
3573      border-radius: 50%;
3574  }
3575  
3576  .handlediv,
3577  .postbox .handlediv.button-link,
3578  .item-edit,
3579  .toggle-indicator {
3580      color: #787c82;
3581  }
3582  
3583  .widget-action {
3584      color: #50575e; /* #fafafa background in the Widgets screen */
3585  }
3586  
3587  .widget-top:hover .widget-action,
3588  .widget-action:focus,
3589  .handlediv:hover,
3590  .handlediv:focus,
3591  .postbox .handlediv.button-link:hover,
3592  .postbox .handlediv.button-link:focus,
3593  .item-edit:hover,
3594  .item-edit:focus,
3595  .sidebar-name:hover .toggle-indicator {
3596      color: #1d2327;
3597      /* Only visible in Windows High Contrast mode */
3598      outline: 2px solid transparent;
3599  }
3600  
3601  .widget-top .widget-action:focus .toggle-indicator:before {
3602      box-shadow: 0 0 0 2px #2271b1;
3603      /* Only visible in Windows High Contrast mode */
3604      outline: 2px solid transparent;
3605  }
3606  
3607  #customize-info.open .accordion-section-title:after,
3608  .nav-menus-php .menu-item-edit-active .item-edit:before,
3609  .widget.open .widget-top .widget-action .toggle-indicator:before,
3610  .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
3611      content: "\f142";
3612  }
3613  
3614  /*!
3615   * jQuery UI Draggable/Sortable 1.11.4
3616   * http://jqueryui.com
3617   *
3618   * Copyright jQuery Foundation and other contributors
3619   * Released under the MIT license.
3620   * http://jquery.org/license
3621   */
3622  .ui-draggable-handle,
3623  .ui-sortable-handle {
3624      touch-action: none;
3625  }
3626  
3627  /* Accordion */
3628  .accordion-section {
3629      border-bottom: 1px solid #dcdcde;
3630      margin: 0;
3631  }
3632  
3633  .accordion-section.open .accordion-section-content,
3634  .no-js .accordion-section .accordion-section-content {
3635      display: block;
3636  }
3637  
3638  .accordion-section.open:hover {
3639      border-bottom-color: #dcdcde;
3640  }
3641  
3642  .accordion-section-content {
3643      display: none;
3644      padding: 10px 20px 15px;
3645      overflow: hidden;
3646      background: #fff;
3647  }
3648  
3649  .accordion-section-title {
3650      margin: 0;
3651      padding: 12px 15px 15px;
3652      position: relative;
3653      border-left: 1px solid #dcdcde;
3654      border-right: 1px solid #dcdcde;
3655      -webkit-user-select: none;
3656      user-select: none;
3657  }
3658  
3659  .js .accordion-section-title {
3660      cursor: pointer;
3661  }
3662  
3663  .js .accordion-section-title:after {
3664      position: absolute;
3665      top: 12px;
3666      right: 10px;
3667      z-index: 1;
3668  }
3669  
3670  .accordion-section-title:focus {
3671      /* Only visible in Windows High Contrast mode */
3672      outline: 1px solid transparent;
3673  }
3674  
3675  .accordion-section-title:hover:after,
3676  .accordion-section-title:focus:after {
3677      border-color: #a7aaad transparent;
3678      /* Only visible in Windows High Contrast mode */
3679      outline: 1px solid transparent;
3680  }
3681  
3682  .cannot-expand .accordion-section-title {
3683      cursor: auto;
3684  }
3685  
3686  .cannot-expand .accordion-section-title:after {
3687      display: none;
3688  }
3689  
3690  .control-section .accordion-section-title,
3691  .customize-pane-child .accordion-section-title {
3692      border-left: none;
3693      border-right: none;
3694      padding: 10px 10px 11px 14px;
3695      line-height: 1.55;
3696      background: #fff;
3697  }
3698  
3699  .control-section .accordion-section-title:after,
3700  .customize-pane-child .accordion-section-title:after {
3701      top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
3702  }
3703  
3704  .js .control-section:hover .accordion-section-title,
3705  .js .control-section .accordion-section-title:hover,
3706  .js .control-section.open .accordion-section-title,
3707  .js .control-section .accordion-section-title:focus {
3708      color: #1d2327;
3709      background: #f6f7f7;
3710  }
3711  
3712  .control-section.open .accordion-section-title {
3713      /* When expanded */
3714      border-bottom: 1px solid #dcdcde;
3715  }
3716  
3717  /* Edit Site */
3718  .network-admin .edit-site-actions {
3719      margin-top: 0;
3720  }
3721  
3722  /* My Sites */
3723  .my-sites {
3724      display: block;
3725      overflow: auto;
3726      zoom: 1;
3727  }
3728  
3729  .my-sites li {
3730      display: block;
3731      padding: 8px 3%;
3732      min-height: 130px;
3733      margin: 0;
3734  }
3735  
3736  @media only screen and (max-width: 599px) {
3737      .my-sites li {
3738          min-height: 0;
3739      }
3740  }
3741  
3742  @media only screen and (min-width: 600px) {
3743      .my-sites.striped li {
3744          background-color: #fff;
3745          position: relative;
3746      }
3747      .my-sites.striped li:after {
3748          content: "";
3749          width: 1px;
3750          height: 100%;
3751          position: absolute;
3752          top: 0;
3753          right: 0;
3754          background: #c3c4c7;
3755      }
3756  
3757  }
3758  @media only screen and (min-width: 600px) and (max-width: 699px) {
3759      .my-sites li{
3760          float: left;
3761          width: 44%;
3762      }
3763      .my-sites.striped li {
3764          background-color: #fff;
3765      }
3766      .my-sites.striped li:nth-of-type(2n+1) {
3767          clear: left;
3768      }
3769      .my-sites.striped li:nth-of-type(2n+2):after {
3770          content: none;
3771      }
3772      .my-sites li:nth-of-type(4n+1),
3773      .my-sites li:nth-of-type(4n+2) {
3774          background-color: #f6f7f7;
3775      }
3776  
3777  }
3778  
3779  @media only screen and (min-width: 700px) and (max-width: 1199px) {
3780      .my-sites li {
3781          float: left;
3782          width: 27.333333%;
3783          background-color: #fff;
3784      }
3785      .my-sites.striped li:nth-of-type(3n+3):after {
3786          content: none;
3787      }
3788      .my-sites li:nth-of-type(6n+1),
3789      .my-sites li:nth-of-type(6n+2),
3790      .my-sites li:nth-of-type(6n+3) {
3791          background-color: #f6f7f7;
3792      }
3793  }
3794  
3795  @media only screen and (min-width: 1200px) and (max-width: 1399px) {
3796      .my-sites li {
3797          float: left;
3798          width: 21%;
3799          padding: 8px 2%;
3800          background-color: #fff;
3801      }
3802      .my-sites.striped li:nth-of-type(4n+1) {
3803          clear: left;
3804      }
3805      .my-sites.striped li:nth-of-type(4n+4):after {
3806          content: none;
3807      }
3808      .my-sites li:nth-of-type(8n+1),
3809      .my-sites li:nth-of-type(8n+2),
3810      .my-sites li:nth-of-type(8n+3),
3811      .my-sites li:nth-of-type(8n+4) {
3812          background-color: #f6f7f7;
3813      }
3814  }
3815  
3816  @media only screen and (min-width: 1400px) and (max-width: 1599px) {
3817      .my-sites li {
3818          float: left;
3819          width: 16%;
3820          padding: 8px 2%;
3821          background-color: #fff;
3822      }
3823      .my-sites.striped li:nth-of-type(5n+1) {
3824          clear: left;
3825      }
3826      .my-sites.striped li:nth-of-type(5n+5):after {
3827          content: none;
3828      }
3829      .my-sites li:nth-of-type(10n+1),
3830      .my-sites li:nth-of-type(10n+2),
3831      .my-sites li:nth-of-type(10n+3),
3832      .my-sites li:nth-of-type(10n+4),
3833      .my-sites li:nth-of-type(10n+5) {
3834          background-color: #f6f7f7;
3835      }
3836  }
3837  
3838  @media only screen and (min-width: 1600px) {
3839      .my-sites li {
3840          float: left;
3841          width: 12.666666%;
3842          padding: 8px 2%;
3843          background-color: #fff;
3844      }
3845      .my-sites.striped li:nth-of-type(6n+1) {
3846          clear: left;
3847      }
3848      .my-sites.striped li:nth-of-type(6n+6):after {
3849          content: none;
3850      }
3851      .my-sites li:nth-of-type(12n+1),
3852      .my-sites li:nth-of-type(12n+2),
3853      .my-sites li:nth-of-type(12n+3),
3854      .my-sites li:nth-of-type(12n+4),
3855      .my-sites li:nth-of-type(12n+5),
3856      .my-sites li:nth-of-type(12n+6) {
3857          background-color: #f6f7f7;
3858      }
3859  }
3860  
3861  .my-sites li a {
3862      text-decoration: none;
3863  }
3864  
3865  /* =Media Queries
3866  -------------------------------------------------------------- */
3867  
3868  /**
3869   * HiDPI Displays
3870   */
3871  @media print,
3872    (min-resolution: 120dpi) {
3873      /* Back-compat for pre-3.8 */
3874      div.star-holder,
3875      div.star-holder .star-rating {
3876          background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left;
3877          background-size: 21px 37px;
3878      }
3879  
3880      .spinner {
3881          background-image: url(../images/spinner-2x.gif);
3882      }
3883  
3884  }
3885  
3886  @media screen and (max-width: 782px) {
3887      html.wp-toolbar {
3888          padding-top: var(--wp-admin--admin-bar--height);
3889      }
3890  
3891      .screen-reader-shortcut:focus {
3892          top: -39px;
3893      }
3894  
3895      body {
3896          min-width: 240px;
3897          overflow-x: hidden;
3898      }
3899  
3900      body * {
3901          -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3902      }
3903  
3904      #wpcontent {
3905          position: relative;
3906          margin-left: 0;
3907          padding-left: 10px;
3908      }
3909  
3910      #wpbody-content {
3911          padding-bottom: 100px;
3912      }
3913  
3914      .wrap {
3915          clear: both;
3916          margin-right: 12px;
3917          margin-left: 0;
3918      }
3919  
3920      /* categories */
3921      #col-left,
3922      #col-right {
3923          float: none;
3924          width: auto;
3925      }
3926  
3927      #col-left .col-wrap,
3928      #col-right .col-wrap {
3929          padding: 0;
3930      }
3931  
3932      /* Hidden Elements */
3933      #collapse-menu,
3934      .post-format-select {
3935          display: none !important;
3936      }
3937  
3938      .wrap h1.wp-heading-inline {
3939          margin-bottom: 0.5em;
3940      }
3941  
3942      .wrap .add-new-h2, /* deprecated */
3943      .wrap .add-new-h2:active, /* deprecated */
3944      .wrap .page-title-action,
3945      .wrap .page-title-action:active {
3946          padding: 10px 15px;
3947          font-size: 14px;
3948          white-space: nowrap;
3949      }
3950  
3951      /* Feedback Messages */
3952      .notice,
3953      .wrap div.updated,
3954      .wrap div.error,
3955      .media-upload-form div.error {
3956          margin: 20px 0 10px;
3957          padding: 5px 10px;
3958          font-size: 14px;
3959          line-height: 175%;
3960      }
3961  
3962      .wp-core-ui .notice.is-dismissible {
3963          padding-right: 46px;
3964      }
3965  
3966      .notice-dismiss {
3967          padding: 13px;
3968      }
3969  
3970      .wrap .icon32 + h2 {
3971          margin-top: -2px;
3972      }
3973  
3974      .wp-responsive-open #wpbody {
3975          right: -16em;
3976      }
3977  
3978      code {
3979          word-wrap: break-word;
3980          word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
3981          word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
3982      }
3983  
3984      /* General Metabox */
3985      .postbox {
3986          font-size: 14px;
3987      }
3988  
3989      .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
3990      .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
3991      .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
3992      .metabox-holder h2 {
3993          padding: 12px;
3994      }
3995  
3996      .nav-menus-php .metabox-holder h3 {
3997          padding: 0;
3998      }
3999  
4000      .postbox .handlediv {
4001          margin-top: 3px;
4002      }
4003  
4004      /* Subsubsub Nav */
4005      .subsubsub {
4006          font-size: 16px;
4007          text-align: center;
4008          margin-bottom: 15px;
4009      }
4010  
4011      /* Theme/Plugin File Editor */
4012  
4013      #template textarea,
4014      #template .CodeMirror {
4015          box-sizing: border-box;
4016      }
4017  
4018      #templateside {
4019          float: none;
4020          width: auto;
4021      }
4022  
4023      #templateside > ul {
4024          border-left: 1px solid #dcdcde;
4025      }
4026  
4027      #templateside li {
4028          margin: 0;
4029      }
4030  
4031      #templateside li:not(.howto) a {
4032          display: block;
4033          padding: 5px;
4034      }
4035      #templateside li.howto {
4036          padding: 12px;
4037      }
4038  
4039      #templateside .highlight {
4040          padding: 5px;
4041          margin-left: -5px;
4042          margin-top: -5px;
4043      }
4044  
4045      #template > div,
4046      #template .notice {
4047          float: none;
4048          margin: 1em 0;
4049          width: auto;
4050      }
4051  
4052      #template .CodeMirror,
4053      #template textarea {
4054          width: 100%;
4055      }
4056  
4057      #templateside ul ul {
4058          padding-left: 1.5em;
4059      }
4060      [role="treeitem"] .folder-label {
4061          display: block;
4062          padding: 5px;
4063      }
4064      .tree-folder > li::before,
4065      .tree-folder > li::after,
4066      .tree-folder .tree-folder::after {
4067          left: -8px;
4068      }
4069      .tree-folder > li::before {
4070          top: 0;
4071          height: 13px;
4072      }
4073      .tree-folder > .current-file::before {
4074          left: -5px;
4075          top: 7px;
4076          width: 4px;
4077      }
4078      .tree-folder > .current-file::after {
4079          height: 9px;
4080          left: -8px;
4081      }
4082      .wrap #templateside span.notice {
4083          margin-left: -5px;
4084          width: 100%;
4085      }
4086  
4087      .fileedit-sub .alignright {
4088          float: left;
4089          margin-top: 15px;
4090          width: 100%;
4091          text-align: left;
4092      }
4093  
4094      .fileedit-sub .alignright label {
4095          display: block;
4096      }
4097  
4098      .fileedit-sub #theme,
4099      .fileedit-sub #plugin {
4100          margin-left: 0;
4101          max-width: 70%;
4102      }
4103  
4104      .fileedit-sub input[type="submit"] {
4105          margin-bottom: 0;
4106      }
4107  
4108      #documentation label[for="docs-list"] {
4109          display: block;
4110      }
4111  
4112      #documentation select[name="docs-list"] {
4113          margin-left: 0;
4114          max-width: 60%;
4115      }
4116  
4117      #documentation input[type="button"] {
4118          margin-bottom: 0;
4119      }
4120  
4121      #wpfooter {
4122          display: none;
4123      }
4124  
4125      #comments-form .checkforspam {
4126          display: none;
4127      }
4128  
4129      .edit-comment-author {
4130          margin: 2px 0 0;
4131      }
4132  
4133      .filter-drawer .filter-group-feature input,
4134      .filter-drawer .filter-group-feature label {
4135          line-height: 2.1;
4136      }
4137  
4138      .filter-drawer .filter-group-feature label {
4139          margin-left: 32px;
4140      }
4141  
4142      .wp-filter .button.drawer-toggle {
4143          font-size: 13px;
4144          line-height: 2;
4145          height: 28px;
4146      }
4147  
4148      /* Fix help tab columns for smaller screens */
4149      #screen-meta #contextual-help-wrap {
4150          overflow: visible;
4151      }
4152  
4153      #screen-meta #contextual-help-back,
4154      #screen-meta .contextual-help-sidebar {
4155          display: none;
4156      }
4157  
4158      #screen-meta .contextual-help-tabs {
4159          clear: both;
4160          width: 100%;
4161          float: none;
4162      }
4163  
4164      #screen-meta .contextual-help-tabs ul {
4165          margin: 0 0 1em;
4166          padding: 1em 0 0;
4167      }
4168  
4169      #screen-meta .contextual-help-tabs .active {
4170          margin: 0;
4171      }
4172  
4173      #screen-meta .contextual-help-tabs-wrap {
4174          clear: both;
4175          max-width: 100%;
4176          float: none;
4177      }
4178  
4179      #screen-meta,
4180      #screen-meta-links {
4181          margin-right: 10px;
4182      }
4183  
4184      #screen-meta-links {
4185          margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
4186      }
4187  
4188      .wp-filter .search-form input[type="search"] {
4189          font-size: 1rem;
4190      }
4191  
4192      .wp-filter .search-form.search-plugins {
4193          /* This element is a flex item. */
4194          min-width: 100%;
4195      }
4196  }
4197  
4198  /* Smartphone */
4199  @media screen and (max-width: 600px) {
4200      /* Disable horizontal scroll when responsive menu is open
4201         since we push the main content off to the right. */
4202      #wpwrap.wp-responsive-open {
4203          overflow-x: hidden;
4204      }
4205  
4206      html.wp-toolbar {
4207          padding-top: 0;
4208      }
4209  
4210      .screen-reader-shortcut:focus {
4211          top: 7px;
4212      }
4213  
4214      #wpbody {
4215          padding-top: 46px;
4216      }
4217  
4218      /* Keep full-width boxes on Edit Post page from causing horizontal scroll */
4219      div#post-body.metabox-holder.columns-1 {
4220          overflow-x: hidden;
4221      }
4222  
4223      h1.nav-tab-wrapper,
4224      .wrap h2.nav-tab-wrapper,
4225      .nav-tab-wrapper {
4226          border-bottom: 0;
4227      }
4228  
4229      h1 .nav-tab,
4230      h2 .nav-tab,
4231      h3 .nav-tab,
4232      nav .nav-tab {
4233          margin: 10px 10px 0 0;
4234          border-bottom: 1px solid #c3c4c7;
4235      }
4236  
4237      .nav-tab-active:hover,
4238      .nav-tab-active:focus,
4239      .nav-tab-active:focus:active {
4240          border-bottom: 1px solid #c3c4c7;
4241      }
4242  
4243      .wp-filter .search-form.search-plugins label {
4244          width: 100%;
4245      }
4246  }
4247  
4248  @media screen and (max-width: 480px) {
4249      .metabox-prefs-container {
4250          display: grid;
4251      }
4252  
4253      .metabox-prefs-container > * {
4254          display: inline-block;
4255          padding: 2px;
4256      }
4257  }
4258  
4259  @media screen and (max-width: 320px) {
4260      /* Prevent default center alignment and larger font for the Right Now widget when
4261         the network dashboard is viewed on a small mobile device. */
4262      #network_dashboard_right_now .subsubsub {
4263          font-size: 14px;
4264          text-align: left;
4265      }
4266  }