[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /* 2 column liquid layout */
   3  #wpwrap {
   4      height: auto;
   5      min-height: 100%;
   6      width: 100%;
   7      position: relative;
   8      -webkit-font-smoothing: subpixel-antialiased;
   9  }
  10  
  11  #wpcontent {
  12      height: 100%;
  13      padding-right: 20px;
  14  }
  15  
  16  #wpcontent,
  17  #wpfooter {
  18      margin-right: 160px;
  19  }
  20  
  21  .folded #wpcontent,
  22  .folded #wpfooter {
  23      margin-right: 36px;
  24  }
  25  
  26  #wpbody-content {
  27      padding-bottom: 65px;
  28      float: right;
  29      width: 100%;
  30      overflow: visible;
  31  }
  32  
  33  /* inner 2 column liquid layout */
  34  
  35  .inner-sidebar {
  36      float: left;
  37      clear: left;
  38      display: none;
  39      width: 281px;
  40      position: relative;
  41  }
  42  
  43  .columns-2 .inner-sidebar {
  44      margin-left: auto;
  45      width: 286px;
  46      display: block;
  47  }
  48  
  49  .inner-sidebar #side-sortables,
  50  .columns-2 .inner-sidebar #side-sortables {
  51      min-height: 300px;
  52      width: 280px;
  53      padding: 0;
  54  }
  55  
  56  .has-right-sidebar .inner-sidebar {
  57      display: block;
  58  }
  59  
  60  .has-right-sidebar #post-body {
  61      float: right;
  62      clear: right;
  63      width: 100%;
  64      margin-left: -2000px;
  65  }
  66  
  67  .has-right-sidebar #post-body-content {
  68      margin-left: 300px;
  69      float: none;
  70      width: auto;
  71  }
  72  
  73  /* 2 columns main area */
  74  
  75  #col-left {
  76      float: right;
  77      width: 35%;
  78  }
  79  
  80  #col-right {
  81      float: left;
  82      width: 65%;
  83  }
  84  
  85  #col-left .col-wrap {
  86      padding: 0 0 0 6px;
  87  }
  88  
  89  #col-right .col-wrap {
  90      padding: 0 6px 0 0;
  91  }
  92  
  93  /* utility classes */
  94  .alignleft {
  95      float: right;
  96  }
  97  
  98  .alignright {
  99      float: left;
 100  }
 101  
 102  .textleft {
 103      text-align: right;
 104  }
 105  
 106  .textright {
 107      text-align: left;
 108  }
 109  
 110  .clear {
 111      clear: both;
 112  }
 113  
 114  /* modern clearfix */
 115  .wp-clearfix:after {
 116      content: "";
 117      display: table;
 118      clear: both;
 119  }
 120  
 121  /* Hide visually but not from screen readers */
 122  .screen-reader-text,
 123  .screen-reader-text span,
 124  .ui-helper-hidden-accessible {
 125      border: 0;
 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-right: 2px;
 143  }
 144  
 145  .screen-reader-shortcut {
 146      position: absolute;
 147      top: -1000em;
 148      right: 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-right: 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-right: 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: right;
 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: right;
 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 8px 0 0;
 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 3px 0 0;
 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-right: 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 2px 0 20px;
 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-left: 5px;
 600  }
 601  
 602  .wp-header-end {
 603      visibility: hidden;
 604      margin: -2px 0 0;
 605  }
 606  
 607  .subtitle {
 608      margin: 0;
 609      padding-right: 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-right: 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-right: 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-right: 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-left: 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-left-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-right: 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-right: 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: right;
 937      line-height: 2.30769231; /* 30px */
 938  }
 939  
 940  #delete-link {
 941      line-height: 2.30769231; /* 30px */
 942      vertical-align: middle;
 943      text-align: right;
 944      margin-right: 8px;
 945  }
 946  
 947  #delete-link a {
 948      text-decoration: none;
 949  }
 950  
 951  #publishing-action {
 952      text-align: left;
 953      float: left;
 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: left;
 978  }
 979  
 980  #save-post {
 981      float: right;
 982  }
 983  
 984  .preview {
 985      float: left;
 986  }
 987  
 988  #sticky-span {
 989      margin-right: 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: left;
1006  }
1007  
1008  #misc-publishing-actions .notice {
1009      margin-right: 10px;
1010      margin-left: 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-right: 5px;
1056      margin-left: 20px;
1057  }
1058  
1059  .filter-items {
1060      float: right;
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: left;
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 select,
1120  .wp-filter .search-form.search-plugins .wp-filter-search,
1121  .no-js .wp-filter .search-form.search-plugins .button {
1122      display: inline-block;
1123      vertical-align: top;
1124  }
1125  
1126  .wp-filter .button.drawer-toggle {
1127      margin: 10px 9px 0;
1128      padding: 0 6px 0 10px;
1129      border-color: transparent;
1130      background-color: transparent;
1131      color: #646970;
1132      vertical-align: baseline;
1133      box-shadow: none;
1134  }
1135  
1136  .wp-filter .drawer-toggle:before {
1137      content: "\f111";
1138      margin: 0 0 0 5px;
1139      color: #646970;
1140      font: normal 16px/1 dashicons;
1141      vertical-align: text-bottom;
1142      -webkit-font-smoothing: antialiased;
1143      -moz-osx-font-smoothing: grayscale;
1144  }
1145  
1146  .wp-filter .button.drawer-toggle:hover,
1147  .wp-filter .drawer-toggle:hover:before,
1148  .wp-filter .button.drawer-toggle:focus,
1149  .wp-filter .drawer-toggle:focus:before {
1150      background-color: transparent;
1151      color: #135e96;
1152  }
1153  
1154  .wp-filter .button.drawer-toggle:hover,
1155  .wp-filter .button.drawer-toggle:focus:active {
1156      border-color: transparent;
1157  }
1158  
1159  .wp-filter .button.drawer-toggle:focus {
1160      border-color: #4f94d4;
1161  }
1162  
1163  .wp-filter .button.drawer-toggle:active {
1164      background: transparent;
1165      box-shadow: none;
1166      transform: none;
1167  }
1168  
1169  .wp-filter .drawer-toggle.current:before {
1170      color: #fff;
1171  }
1172  
1173  .filter-drawer,
1174  .wp-filter .favorites-form {
1175      display: none;
1176      margin: 0 -20px 0 -10px;
1177      padding: 20px;
1178      border-top: 1px solid #f0f0f1;
1179      background: #f6f7f7;
1180      overflow: hidden;
1181  }
1182  
1183  .wp-filter .favorites-form .favorites-username {
1184      display: flex;
1185      align-items: center;
1186      flex-wrap: wrap;
1187      gap: 0.5rem;
1188  }
1189  
1190  .wp-filter .favorites-form .favorites-username input {
1191      margin: 0;
1192  }
1193  
1194  .show-filters .filter-drawer,
1195  .show-favorites-form .favorites-form {
1196      display: block;
1197  }
1198  
1199  .show-filters .filter-links a.current {
1200      border-bottom: none;
1201  }
1202  
1203  .show-filters .wp-filter .button.drawer-toggle {
1204      border-radius: 2px;
1205      background: #646970;
1206      color: #fff;
1207  }
1208  
1209  .show-filters .wp-filter .drawer-toggle:hover,
1210  .show-filters .wp-filter .drawer-toggle:focus {
1211      background: #2271b1;
1212  }
1213  
1214  .show-filters .wp-filter .drawer-toggle:before {
1215      color: #fff;
1216  }
1217  
1218  .filter-group {
1219      box-sizing: border-box;
1220      position: relative;
1221      float: right;
1222      margin: 0 0 0 1%;
1223      padding: 20px 10px 10px;
1224      width: 24%;
1225      background: #fff;
1226      border: 1px solid #dcdcde;
1227      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1228  }
1229  
1230  .filter-group legend {
1231      position: absolute;
1232      top: 10px;
1233      display: block;
1234      margin: 0;
1235      padding: 0;
1236      font-size: 1em;
1237      font-weight: 600;
1238  }
1239  
1240  .filter-drawer .filter-group-feature {
1241      margin: 28px 0 0;
1242      list-style-type: none;
1243      font-size: 12px;
1244  }
1245  
1246  .filter-drawer .filter-group-feature input,
1247  .filter-drawer .filter-group-feature label {
1248      line-height: 1.4;
1249  }
1250  
1251  .filter-drawer .filter-group-feature input {
1252      position: absolute;
1253      margin: 0;
1254  }
1255  
1256  .filter-group .filter-group-feature label {
1257      display: block;
1258      margin: 14px 23px 14px 0;
1259  }
1260  
1261  .filter-drawer .buttons {
1262      clear: both;
1263      margin-bottom: 20px;
1264  }
1265  
1266  .filter-drawer .filter-group + .buttons {
1267      margin-bottom: 0;
1268      padding-top: 20px;
1269  }
1270  
1271  .filter-drawer .buttons .button span {
1272      display: inline-block;
1273      opacity: 0.8;
1274      font-size: 12px;
1275      text-indent: 10px;
1276  }
1277  
1278  .wp-filter .button.clear-filters {
1279      display: none;
1280      margin-right: 10px;
1281  }
1282  
1283  .wp-filter .button-link.edit-filters {
1284      padding: 0 5px;
1285      line-height: 2.2;
1286  }
1287  
1288  .filtered-by {
1289      display: none;
1290      margin: 0;
1291  }
1292  
1293  .filtered-by > span {
1294      font-weight: 600;
1295  }
1296  
1297  .filtered-by a {
1298      margin-right: 10px;
1299  }
1300  
1301  .filtered-by .tags {
1302      display: flex;
1303      align-items: flex-start;
1304      flex-wrap: wrap;
1305      gap: 8px;
1306  }
1307  
1308  .filtered-by .tag {
1309      padding: 4px 8px;
1310      border: 1px solid #dcdcde;
1311      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1312      background: #fff;
1313      font-size: 11px;
1314  }
1315  
1316  .filters-applied .filter-group,
1317  .filters-applied .filter-drawer .buttons,
1318  .filters-applied .filter-drawer br {
1319      display: none;
1320  }
1321  
1322  .filters-applied .filtered-by {
1323      display: flex;
1324      align-items: center;
1325      flex-wrap: wrap;
1326      gap: 10px;
1327  }
1328  
1329  .filters-applied .filter-drawer {
1330      padding: 20px;
1331  }
1332  
1333  .show-filters .favorites-form,
1334  .show-filters .content-filterable,
1335  .show-filters.filters-applied.loading-content .content-filterable,
1336  .loading-content .content-filterable,
1337  .error .content-filterable {
1338      display: none;
1339  }
1340  
1341  .show-filters.filters-applied .content-filterable {
1342      display: block;
1343  }
1344  
1345  .loading-content .spinner {
1346      display: block;
1347      margin: 40px auto 0;
1348      float: none;
1349  }
1350  
1351  @media only screen and (max-width: 1138px) {
1352      .wp-filter .search-form {
1353          margin: 11px 0;
1354      }
1355  }
1356  
1357  @media only screen and (max-width: 1120px) {
1358      .filter-drawer {
1359          border-bottom: 1px solid #f0f0f1;
1360      }
1361  
1362      .filter-group {
1363          margin-bottom: 0;
1364          margin-top: 5px;
1365          width: 100%;
1366      }
1367  
1368      .filter-group li {
1369          margin: 10px 0;
1370      }
1371  }
1372  
1373  @media only screen and (max-width: 1000px) {
1374      .filter-items {
1375          float: none;
1376      }
1377  
1378      .wp-filter .media-toolbar-primary,
1379      .wp-filter .media-toolbar-secondary,
1380      .wp-filter .search-form {
1381          float: none; /* Remove float from media-views.css */
1382          position: relative;
1383          max-width: 100%;
1384      }
1385      .wp-filter .search-form {
1386          margin: 11px 0;
1387          flex-wrap: wrap;
1388          row-gap: 10px;
1389      }
1390  }
1391  
1392  @media only screen and (max-width: 782px) {
1393      .filter-group li {
1394          padding: 0;
1395          width: 50%;
1396      }
1397  }
1398  
1399  @media only screen and (max-width: 320px) {
1400      .filter-count {
1401          display: none;
1402      }
1403  
1404      .wp-filter .drawer-toggle {
1405          margin: 10px 0;
1406      }
1407  
1408      .filter-group li,
1409      .wp-filter .search-form input[type="search"] {
1410          width: 100%;
1411      }
1412  }
1413  
1414  /*------------------------------------------------------------------------------
1415    4.0 - Notifications
1416  ------------------------------------------------------------------------------*/
1417  
1418  .notice,
1419  div.updated,
1420  div.error {
1421      background: #fff;
1422      border: 1px solid #c3c4c7;
1423      border-right-width: 4px;
1424      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1425      margin: 5px 15px 2px;
1426      padding: 1px 12px;
1427  }
1428  
1429  div[class="update-message"] { /* back-compat for pre-4.6 */
1430      padding: 0.5em 0 0.5em 12px;
1431  }
1432  
1433  .notice p,
1434  .notice-title,
1435  div.updated p,
1436  div.error p,
1437  .form-table td .notice p {
1438      margin: 0.5em 0;
1439      padding: 2px;
1440  }
1441  
1442  .error a {
1443      text-decoration: underline;
1444  }
1445  
1446  .updated a {
1447      padding-bottom: 2px;
1448  }
1449  
1450  .notice-alt {
1451      box-shadow: none;
1452  }
1453  
1454  .notice-large {
1455      padding: 10px 20px;
1456  }
1457  
1458  .notice-title {
1459      display: inline-block;
1460      color: #1d2327;
1461      font-size: 18px;
1462  }
1463  
1464  .wp-core-ui .notice.is-dismissible {
1465      padding-left: 38px;
1466      position: relative;
1467  }
1468  
1469  .notice-dismiss {
1470      position: absolute;
1471      top: 0;
1472      left: 1px;
1473      border: none;
1474      margin: 0;
1475      padding: 9px;
1476      background: none;
1477      color: #787c82;
1478      cursor: pointer;
1479  }
1480  
1481  .notice-dismiss:hover:before,
1482  .notice-dismiss:active:before,
1483  .notice-dismiss:focus:before {
1484      color: #d63638;
1485  }
1486  
1487  .notice-dismiss:focus {
1488      box-shadow: 0 0 0 2px #2271b1;
1489      /* Only visible in Windows High Contrast mode */
1490      outline: 2px solid transparent;
1491  }
1492  
1493  .notice-success,
1494  div.updated {
1495      border-right-color: #00a32a;
1496  }
1497  
1498  .notice-success.notice-alt {
1499      background-color: #edfaef;
1500  }
1501  
1502  .notice-warning {
1503      border-right-color: #dba617;
1504  }
1505  
1506  .notice-warning.notice-alt {
1507      background-color: #fcf9e8;
1508  }
1509  
1510  .notice-error,
1511  div.error {
1512      border-right-color: #d63638;
1513  }
1514  
1515  .notice-error.notice-alt {
1516      background-color: #fcf0f1;
1517  }
1518  
1519  .notice-info {
1520      border-right-color: #72aee6;
1521  }
1522  
1523  .notice-info.notice-alt {
1524      background-color: #f0f6fc;
1525  }
1526  
1527  #plugin-information-footer .update-now:not(.button-disabled):before {
1528      color: #d63638;
1529      content: "\f463";
1530      display: inline-block;
1531      font: normal 20px/1 dashicons;
1532      margin: -3px -2px 0 5px;
1533      speak: never;
1534      -webkit-font-smoothing: antialiased;
1535      -moz-osx-font-smoothing: grayscale;
1536      vertical-align: middle;
1537  }
1538  
1539  #plugin-information-footer .notice {
1540      margin-top: -5px;
1541  }
1542  
1543  .update-message p:before,
1544  .updating-message p:before,
1545  .updated-message p:before,
1546  .import-php .updating-message:before,
1547  .button.updating-message:before,
1548  .button.updated-message:before,
1549  .button.installed:before,
1550  .button.installing:before,
1551  .button.activating-message:before,
1552  .button.activated-message:before {
1553      display: inline-block;
1554      font: normal 20px/1 'dashicons';
1555      -webkit-font-smoothing: antialiased;
1556      -moz-osx-font-smoothing: grayscale;
1557      vertical-align: top;
1558  }
1559  
1560  .wrap .notice,
1561  .wrap div.updated,
1562  .wrap div.error,
1563  .media-upload-form .notice,
1564  .media-upload-form div.error {
1565      margin: 5px 0 15px;
1566  }
1567  
1568  .wrap #templateside .notice {
1569      display: block;
1570      margin: 0;
1571      padding: 5px 8px;
1572      font-weight: 600;
1573      text-decoration: none;
1574  }
1575  
1576  .wrap #templateside span.notice {
1577      margin-right: -12px;
1578  }
1579  
1580  #templateside li.notice a {
1581      padding: 0;
1582  }
1583  
1584  /* Update icon. */
1585  .update-message p:before,
1586  .updating-message p:before,
1587  .import-php .updating-message:before,
1588  .button.updating-message:before,
1589  .button.installing:before,
1590  .button.activating-message:before {
1591      color: #d63638;
1592      content: "\f463";
1593  }
1594  
1595  /* Spins the update icon. */
1596  .updating-message p:before,
1597  .import-php .updating-message:before,
1598  .button.updating-message:before,
1599  .button.installing:before,
1600  .button.activating-message:before,
1601  .plugins .column-auto-updates .dashicons-update.spin,
1602  .theme-overlay .theme-autoupdate .dashicons-update.spin {
1603      animation: rotation 2s infinite linear;
1604  }
1605  
1606  @media (prefers-reduced-motion: reduce) {
1607      .updating-message p:before,
1608      .import-php .updating-message:before,
1609      .button.updating-message:before,
1610      .button.installing:before,
1611      .button.activating-message:before,
1612      .plugins .column-auto-updates .dashicons-update.spin,
1613      .theme-overlay .theme-autoupdate .dashicons-update.spin {
1614          animation: none;
1615      }
1616  }
1617  
1618  .theme-overlay .theme-autoupdate .dashicons-update.spin {
1619      margin-left: 3px;
1620  }
1621  
1622  /* Updated icon (check mark). */
1623  .updated-message p:before,
1624  .installed p:before,
1625  .button.updated-message:before,
1626  .button.activated-message:before {
1627      color: #68de7c;
1628      content: "\f147";
1629  }
1630  
1631  /* Error icon. */
1632  .update-message.notice-error p:before {
1633      color: #d63638;
1634      content: "\f534";
1635  }
1636  
1637  .wrap .notice p:before,
1638  .import-php .updating-message:before {
1639      margin-left: 6px;
1640  }
1641  
1642  .import-php .updating-message:before {
1643      vertical-align: bottom;
1644  }
1645  
1646  #update-nag,
1647  .update-nag {
1648      display: inline-block;
1649      line-height: 1.4;
1650      padding: 11px 15px;
1651      font-size: 14px;
1652      margin: 25px 2px 0 20px;
1653  }
1654  
1655  ul#dismissed-updates {
1656      display: none;
1657  }
1658  
1659  #dismissed-updates li > p {
1660      margin-top: 0;
1661  }
1662  
1663  #dismiss,
1664  #undismiss {
1665      margin-right: 0.5em;
1666  }
1667  
1668  form.upgrade {
1669      margin-top: 8px;
1670  }
1671  
1672  form.upgrade .hint {
1673      font-style: italic;
1674      font-size: 85%;
1675      margin: -0.5em 0 2em;
1676  }
1677  
1678  .update-php .spinner {
1679      float: none;
1680      margin: -4px 0;
1681  }
1682  
1683  h2.wp-current-version {
1684      margin-bottom: .3em;
1685  }
1686  
1687  p.update-last-checked {
1688      margin-top: 0;
1689  }
1690  
1691  p.auto-update-status {
1692      margin-top: 2em;
1693      line-height: 1.8;
1694  }
1695  
1696  #ajax-loading,
1697  .ajax-loading,
1698  .ajax-feedback,
1699  .imgedit-wait-spin,
1700  .list-ajax-loading { /* deprecated */
1701      visibility: hidden;
1702  }
1703  
1704  #ajax-response.alignleft {
1705      margin-right: 2em;
1706  }
1707  
1708  .button.updating-message:before,
1709  .button.updated-message:before,
1710  .button.installed:before,
1711  .button.installing:before,
1712  .button.activated-message:before,
1713  .button.activating-message:before {
1714      margin: 3px -2px 0 5px;
1715  }
1716  
1717  #plugin-information-footer .button {
1718      padding: 0 14px;
1719      line-height: 2.71428571; /* 38px */
1720      font-size: 14px;
1721      vertical-align: middle;
1722      min-height: 40px;
1723      margin-bottom: 4px;
1724  }
1725  
1726  #plugin-information-footer .button.installed:before,
1727  #plugin-information-footer .button.installing:before,
1728  #plugin-information-footer .button.updating-message:before,
1729  #plugin-information-footer .button.updated-message:before,
1730  #plugin-information-footer .button.activated-message:before,
1731  #plugin-information-footer .button.activating-message:before {
1732      margin: 9px -2px 0 5px;
1733  }
1734  
1735  #plugin-information-footer .button.update-now.updating-message:before {
1736      margin: -3px -2px 0 5px;
1737  }
1738  
1739  .button-primary.updating-message:before,
1740  .button-primary.activating-message:before {
1741      color: #fff;
1742  }
1743  
1744  .button-primary.updated-message:before,
1745  .button-primary.activated-message:before {
1746      color: #9ec2e6;
1747  }
1748  
1749  .button.updated-message,
1750  .button.activated-message {
1751      transition-property: border, background, color;
1752      transition-duration: .05s;
1753      transition-timing-function: ease-in-out;
1754  }
1755  
1756  @media aural {
1757      .wrap .notice p:before,
1758      .button.installing:before,
1759      .button.installed:before,
1760      .update-message p:before {
1761          speak: never;
1762      }
1763  }
1764  
1765  
1766  /* @todo: this does not need its own section anymore */
1767  /*------------------------------------------------------------------------------
1768    6.0 - Admin Header
1769  ------------------------------------------------------------------------------*/
1770  #adminmenu a,
1771  #taglist a,
1772  #catlist a {
1773      text-decoration: none;
1774  }
1775  
1776  /*------------------------------------------------------------------------------
1777    6.1 - Screen Options Tabs
1778  ------------------------------------------------------------------------------*/
1779  
1780  #screen-options-wrap,
1781  #contextual-help-wrap {
1782      margin: 0;
1783      padding: 8px 20px 12px;
1784      position: relative;
1785  }
1786  
1787  #contextual-help-wrap {
1788      overflow: auto;
1789      margin-right: 0;
1790  }
1791  
1792  #screen-meta-links {
1793      float: left;
1794      margin: 0 0 0 20px;
1795  }
1796  
1797  /* screen options and help tabs revert */
1798  #screen-meta {
1799      display: none;
1800      margin: 0 0 -1px 20px;
1801      position: relative;
1802      background-color: #fff;
1803      border: 1px solid #c3c4c7;
1804      border-top: none;
1805      box-shadow: 0 0 0 transparent;
1806  }
1807  
1808  #screen-options-link-wrap,
1809  #contextual-help-link-wrap {
1810      float: right;
1811      margin: 0 6px 0 0;
1812  }
1813  
1814  #screen-meta-links .screen-meta-toggle {
1815      position: relative;
1816      top: 0;
1817  }
1818  
1819  #screen-meta-links .show-settings {
1820      border: 1px solid #c3c4c7;
1821      border-top: none;
1822      height: auto;
1823      margin-bottom: 0;
1824      padding: 3px 16px 3px 6px;
1825      background: #fff;
1826      border-radius: 0 0 4px 4px;
1827      color: #646970;
1828      line-height: 1.7;
1829      box-shadow: 0 0 0 transparent;
1830      transition: box-shadow 0.1s linear;
1831  }
1832  
1833  #screen-meta-links .show-settings:hover,
1834  #screen-meta-links .show-settings:active,
1835  #screen-meta-links .show-settings:focus {
1836      color: #2c3338;
1837  }
1838  
1839  #screen-meta-links .show-settings:focus {
1840      border-color: #2271b1;
1841      box-shadow: 0 0 0 1px #2271b1;
1842      /* Only visible in Windows High Contrast mode */
1843      outline: 2px solid transparent;
1844  }
1845  
1846  #screen-meta-links .show-settings:active {
1847      transform: none;
1848  }
1849  
1850  #screen-meta-links .show-settings:after {
1851      left: 0;
1852      content: "\f140";
1853      font: normal 20px/1 dashicons;
1854      speak: never;
1855      display: inline-block;
1856      padding: 0 0 0 5px;
1857      bottom: 2px;
1858      position: relative;
1859      vertical-align: bottom;
1860      -webkit-font-smoothing: antialiased;
1861      -moz-osx-font-smoothing: grayscale;
1862      text-decoration: none;
1863  }
1864  
1865  #screen-meta-links .screen-meta-active:after {
1866      content: "\f142";
1867  }
1868  
1869  /* end screen options and help tabs */
1870  
1871  .toggle-arrow {
1872      background-repeat: no-repeat;
1873      background-position: top right;
1874      background-color: transparent;
1875      height: 22px;
1876      line-height: 22px;
1877      display: block;
1878  }
1879  
1880  .toggle-arrow-active {
1881      background-position: bottom right;
1882  }
1883  
1884  #screen-options-wrap h5, /* Back-compat for old plugins */
1885  #screen-options-wrap legend,
1886  #contextual-help-wrap h5 {
1887      margin: 0;
1888      padding: 8px 0;
1889      font-size: 13px;
1890      font-weight: 600;
1891  }
1892  
1893  .metabox-prefs label {
1894      display: inline-block;
1895      padding-left: 15px;
1896      line-height: 2.35;
1897  }
1898  
1899  #number-of-columns {
1900      display: inline-block;
1901      vertical-align: middle;
1902      line-height: 30px;
1903  }
1904  
1905  .metabox-prefs input[type=checkbox] {
1906      margin-top: 0;
1907      margin-left: 6px;
1908  }
1909  
1910  .metabox-prefs label input,
1911  .metabox-prefs label input[type=checkbox] {
1912      margin: -4px 0 0 5px;
1913  }
1914  
1915  .metabox-prefs .columns-prefs label input {
1916      margin: -1px 0 0 2px;
1917  }
1918  
1919  .metabox-prefs label a {
1920      display: none;
1921  }
1922  
1923  .metabox-prefs .screen-options input,
1924  .metabox-prefs .screen-options label {
1925      margin-top: 0;
1926      margin-bottom: 0;
1927      vertical-align: middle;
1928  }
1929  
1930  .metabox-prefs .screen-options .screen-per-page {
1931      margin-left: 15px;
1932      padding-left: 0;
1933  }
1934  
1935  .metabox-prefs .screen-options label {
1936      line-height: 2.2;
1937      padding-left: 0;
1938  }
1939  
1940  .screen-options + .screen-options {
1941      margin-top: 10px;
1942  }
1943  
1944  .metabox-prefs .submit {
1945      margin-top: 1em;
1946      padding: 0;
1947  }
1948  
1949  /*------------------------------------------------------------------------------
1950    6.2 - Help Menu
1951  ------------------------------------------------------------------------------*/
1952  
1953  #contextual-help-wrap {
1954      padding: 0;
1955  }
1956  
1957  #contextual-help-columns {
1958      position: relative;
1959  }
1960  
1961  #contextual-help-back {
1962      position: absolute;
1963      top: 0;
1964      bottom: 0;
1965      right: 150px;
1966      left: 170px;
1967      border: 1px solid #c3c4c7;
1968      border-top: none;
1969      border-bottom: none;
1970      background: #f0f6fc;
1971  }
1972  
1973  #contextual-help-wrap.no-sidebar #contextual-help-back {
1974      left: 0;
1975      border-left-width: 0;
1976      border-bottom-left-radius: 2px;
1977  }
1978  
1979  .contextual-help-tabs {
1980      float: right;
1981      width: 150px;
1982      margin: 0;
1983  }
1984  
1985  .contextual-help-tabs ul {
1986      margin: 1em 0;
1987  }
1988  
1989  .contextual-help-tabs li {
1990      margin-bottom: 0;
1991      list-style-type: none;
1992      border-style: solid;
1993      border-width: 0 2px 0 0;
1994      border-color: transparent;
1995  }
1996  
1997  .contextual-help-tabs a {
1998      display: block;
1999      padding: 5px 12px 5px 5px;
2000      line-height: 1.4;
2001      text-decoration: none;
2002      border: 1px solid transparent;
2003      border-left: none;
2004      border-right: none;
2005  }
2006  
2007  .contextual-help-tabs a:hover {
2008      color: #2c3338;
2009  }
2010  
2011  .contextual-help-tabs .active {
2012      padding: 0;
2013      margin: 0 0 0 -1px;
2014      border-right: 2px solid #72aee6;
2015      background: #f0f6fc;
2016      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
2017  }
2018  
2019  .contextual-help-tabs .active a {
2020      border-color: #c3c4c7;
2021      color: #2c3338;
2022  }
2023  
2024  .contextual-help-tabs-wrap {
2025      padding: 0 20px;
2026      overflow: auto;
2027  }
2028  
2029  .help-tab-content {
2030      display: none;
2031      margin: 0 0 12px 22px;
2032      line-height: 1.6;
2033  }
2034  
2035  .help-tab-content.active {
2036      display: block;
2037  }
2038  
2039  .help-tab-content ul li {
2040      list-style-type: disc;
2041      margin-right: 18px;
2042  }
2043  
2044  .contextual-help-sidebar {
2045      width: 150px;
2046      float: left;
2047      padding: 0 12px 0 8px;
2048      overflow: auto;
2049  }
2050  
2051  /*------------------------------------------------------------------------------
2052    8.0 - Layout Blocks
2053  ------------------------------------------------------------------------------*/
2054  
2055  html.wp-toolbar {
2056      padding-top: var(--wp-admin--admin-bar--height);
2057      box-sizing: border-box;
2058      -ms-overflow-style: scrollbar; /* See ticket #48545 */
2059  }
2060  
2061  .widefat th,
2062  .widefat td {
2063      color: #50575e;
2064  }
2065  
2066  .widefat th,
2067  .widefat thead td,
2068  .widefat tfoot td {
2069      font-weight: 400;
2070  }
2071  
2072  .widefat thead tr th,
2073  .widefat thead tr td,
2074  .widefat tfoot tr th,
2075  .widefat tfoot tr td {
2076      color: #2c3338;
2077  }
2078  
2079  .widefat td p {
2080      margin: 2px 0 0.8em;
2081  }
2082  
2083  .widefat p,
2084  .widefat ol,
2085  .widefat ul {
2086      color: #2c3338;
2087  }
2088  
2089  .widefat .column-comment p {
2090      margin: 0.6em 0;
2091  }
2092  
2093  .widefat .column-comment ul {
2094      list-style: initial;
2095      margin-right: 2em;
2096  }
2097  
2098  /* Screens with postboxes */
2099  .postbox-container {
2100      float: right;
2101  }
2102  
2103  .postbox-container .meta-box-sortables {
2104      box-sizing: border-box;
2105  }
2106  
2107  #wpbody-content .metabox-holder {
2108      padding-top: 10px;
2109  }
2110  
2111  .metabox-holder .postbox-container .meta-box-sortables {
2112      /* The jQuery UI Sortables need some initial height to work properly. */
2113      min-height: 1px;
2114      position: relative;
2115  }
2116  
2117  #post-body-content {
2118      width: 100%;
2119      min-width: 463px;
2120      float: right;
2121  }
2122  
2123  #post-body.columns-2 #postbox-container-1 {
2124      float: left;
2125      margin-left: -300px;
2126      width: 280px;
2127  }
2128  
2129  #post-body.columns-2 #side-sortables {
2130      min-height: 250px;
2131  }
2132  
2133  /* one column on the dash */
2134  @media only screen and (max-width: 799px) {
2135      #wpbody-content .metabox-holder .postbox-container .empty-container {
2136          outline: none;
2137          height: 0;
2138          min-height: 0;
2139      }
2140  }
2141  
2142  .js .widget .widget-top,
2143  .js .postbox .hndle {
2144      cursor: move;
2145  }
2146  
2147  .js .widget .widget-top.is-non-sortable,
2148  .js .postbox .hndle.is-non-sortable {
2149      cursor: auto;
2150  }
2151  
2152  /* Configurable dashboard widgets "Configure" edit-box link. */
2153  .hndle a {
2154      font-size: 12px;
2155      font-weight: 400;
2156  }
2157  
2158  .postbox-header {
2159      display: flex;
2160      align-items: center;
2161      justify-content: space-between;
2162      border-bottom: 1px solid #c3c4c7;
2163  }
2164  
2165  .postbox-header .hndle {
2166      flex-grow: 1;
2167      /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
2168      display: flex;
2169      justify-content: space-between;
2170      align-items: center;
2171  }
2172  
2173  .postbox-header .handle-actions {
2174      flex-shrink: 0;
2175  }
2176  
2177  /* Post box order and toggle buttons. */
2178  .postbox .handle-order-higher,
2179  .postbox .handle-order-lower,
2180  .postbox .handlediv {
2181      width: 1.62rem;
2182      height: 1.62rem;
2183      margin: 0;
2184      padding: 0;
2185      border: 0;
2186      background: none;
2187      cursor: pointer;
2188  }
2189  
2190  .postbox .handle-order-higher,
2191  .postbox .handle-order-lower {
2192      color: #787c82;
2193      width: 1.62rem;
2194  }
2195  
2196  /* Post box order buttons in the block editor meta boxes area. */
2197  .edit-post-meta-boxes-area .postbox .handle-order-higher,
2198  .edit-post-meta-boxes-area .postbox .handle-order-lower {
2199      width: 44px;
2200      height: 44px;
2201      color: #1d2327
2202  }
2203  
2204  .postbox .handle-order-higher[aria-disabled="true"],
2205  .postbox .handle-order-lower[aria-disabled="true"] {
2206      cursor: default;
2207      color: #a7aaad;
2208  }
2209  
2210  .sortable-placeholder {
2211      border: 1px dashed #c3c4c7;
2212      margin-bottom: 20px;
2213  }
2214  
2215  .postbox,
2216  .stuffbox {
2217      margin-bottom: 20px;
2218      padding: 0;
2219      line-height: 1;
2220  }
2221  
2222  .postbox.closed {
2223      border-bottom: 0;
2224  }
2225  
2226  /* user-select is not a part of the CSS standard - may change behavior in the future */
2227  .postbox .hndle,
2228  .stuffbox .hndle {
2229      -webkit-user-select: none;
2230      user-select: none;
2231  }
2232  
2233  .postbox .inside {
2234      padding: 0 12px 12px;
2235      line-height: 1.4;
2236      font-size: 13px;
2237  }
2238  
2239  .stuffbox .inside {
2240      padding: 0;
2241      line-height: 1.4;
2242      font-size: 13px;
2243      margin-top: 0;
2244  }
2245  
2246  .postbox .inside {
2247      margin: 11px 0;
2248      position: relative;
2249  }
2250  
2251  .postbox .inside > p:last-child,
2252  .rss-widget ul li:last-child {
2253      margin-bottom: 1px !important;
2254  }
2255  
2256  .postbox.closed h3 {
2257      border: none;
2258      box-shadow: none;
2259  }
2260  
2261  .postbox table.form-table {
2262      margin-bottom: 0;
2263  }
2264  
2265  .postbox table.widefat {
2266      box-shadow: none;
2267  }
2268  
2269  .temp-border {
2270      border: 1px dotted #c3c4c7;
2271  }
2272  
2273  .columns-prefs label {
2274      padding: 0 0 0 10px;
2275  }
2276  
2277  /* @todo: what is this doing here */
2278  #dashboard_right_now .versions .b,
2279  #post-status-display,
2280  #post-visibility-display,
2281  #adminmenu .wp-submenu li.current,
2282  #adminmenu .wp-submenu li.current a,
2283  #adminmenu .wp-submenu li.current a:hover,
2284  .media-item .percent,
2285  .plugins .name,
2286  #pass-strength-result.strong,
2287  #pass-strength-result.short,
2288  #ed_reply_toolbar #ed_reply_strong,
2289  .item-controls .item-order a,
2290  .feature-filter .feature-name,
2291  #comment-status-display {
2292      font-weight: 600;
2293  }
2294  
2295  /*------------------------------------------------------------------------------
2296    21.0 - Admin Footer
2297  ------------------------------------------------------------------------------*/
2298  
2299  #wpfooter {
2300      position: absolute;
2301      bottom: 0;
2302      right: 0;
2303      left: 0;
2304      padding: 10px 20px;
2305      color: #50575e;
2306  }
2307  
2308  #wpfooter p {
2309      font-size: 13px;
2310      margin: 0;
2311      line-height: 1.55;
2312  }
2313  
2314  #footer-thankyou {
2315      font-style: italic;
2316  }
2317  
2318  /*------------------------------------------------------------------------------
2319    25.0 - Tabbed Admin Screen Interface (Experimental)
2320  ------------------------------------------------------------------------------*/
2321  
2322  .nav-tab {
2323      float: right;
2324      border: 1px solid #c3c4c7;
2325      border-bottom: none;
2326      margin-right: 0.5em; /* half the font size so set the font size properly */
2327      padding: 5px 10px;
2328      font-size: 14px;
2329      line-height: 1.71428571;
2330      font-weight: 600;
2331      background: #dcdcde;
2332      color: #50575e;
2333      text-decoration: none;
2334      white-space: nowrap;
2335  }
2336  
2337  h3 .nav-tab, /* Back-compat for pre-4.4 */
2338  .nav-tab-small .nav-tab {
2339      padding: 5px 14px;
2340      font-size: 12px;
2341      line-height: 1.33;
2342  }
2343  
2344  .nav-tab:hover,
2345  .nav-tab:focus {
2346      background-color: #fff;
2347      color: #3c434a;
2348  }
2349  
2350  .nav-tab-active,
2351  .nav-tab:focus:active {
2352      box-shadow: none;
2353  }
2354  
2355  .nav-tab-active {
2356      margin-bottom: -1px;
2357      color: #3c434a;
2358  }
2359  
2360  .nav-tab-active,
2361  .nav-tab-active:hover,
2362  .nav-tab-active:focus,
2363  .nav-tab-active:focus:active {
2364      border-bottom: 1px solid #f0f0f1;
2365      background: #f0f0f1;
2366      color: #000;
2367  }
2368  
2369  h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
2370  .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
2371  .nav-tab-wrapper {
2372      border-bottom: 1px solid #c3c4c7;
2373      margin: 0;
2374      padding-top: 9px;
2375      padding-bottom: 0;
2376      line-height: inherit;
2377  }
2378  
2379  /* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */
2380  .nav-tab-wrapper:not(.wp-clearfix):after {
2381      content: "";
2382      display: table;
2383      clear: both;
2384  }
2385  
2386  /*------------------------------------------------------------------------------
2387    26.0 - Misc
2388  ------------------------------------------------------------------------------*/
2389  
2390  .spinner {
2391      background: url(../images/spinner.gif) no-repeat;
2392      background-size: 20px 20px;
2393      display: inline-block;
2394      visibility: hidden;
2395      float: left;
2396      vertical-align: middle;
2397      opacity: 0.7;
2398      filter: alpha(opacity=70);
2399      width: 20px;
2400      height: 20px;
2401      margin: 4px 10px 0;
2402  }
2403  
2404  .spinner.is-active,
2405  .loading-content .spinner {
2406      visibility: visible;
2407  }
2408  
2409  #template > div {
2410      margin-left: 16em;
2411  }
2412  #template .notice {
2413      margin-top: 1em;
2414      margin-left: 3%;
2415  }
2416  #template .notice p {
2417      width: auto;
2418  }
2419  #template .submit .spinner {
2420      float: none;
2421  }
2422  
2423  .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
2424  .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
2425  .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
2426  .metabox-holder h2.hndle {
2427      font-size: 14px;
2428      padding: 8px 12px;
2429      margin: 0;
2430      line-height: 1.4;
2431  }
2432  
2433  /* Back-compat for nav-menus screen */
2434  .nav-menus-php .metabox-holder h3 {
2435      padding: 0;
2436  }
2437  
2438  .accordion-container h3.accordion-section-title {
2439      padding: 0 !important;
2440  }
2441  
2442  .accordion-section-title button.accordion-trigger,
2443  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
2444      background: inherit;
2445      color: #1d2327;
2446      display: block;
2447      position: relative;
2448      text-align: right;
2449      width: 100%;
2450      outline: none;
2451      border: 0;
2452      padding: 10px 14px 11px 10px;
2453      line-height: 1.5;
2454      cursor: pointer;
2455  }
2456  
2457  .accordion-section-title button.accordion-trigger:focus,
2458  .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
2459      box-shadow: 0 0 0 2px #2271b1;
2460      outline: 2px solid transparent;
2461  }
2462  
2463  .accordion-section-title span.dashicons.dashicons-arrow-down,
2464  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
2465      position: absolute;
2466      left: 10px;
2467      right: auto;
2468      color: #787c82;
2469      border-radius: 50px;
2470      top: 50%;
2471      transform: translateY(-50%);
2472  }
2473  
2474  .accordion-section-title:hover span.dashicons.dashicons-arrow-down,
2475  .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
2476      color: #1d2327;
2477  }
2478  
2479  .accordion-section-title span.dashicons.dashicons-arrow-down::before,
2480  .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
2481      position: relative;
2482      right: -1px;
2483  }
2484  
2485  .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
2486  .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
2487      transform: rotate(-180deg) translate(0, 50%);
2488  }
2489  
2490  #templateside ul li a {
2491      text-decoration: none;
2492  }
2493  
2494  .plugin-install #description,
2495  .plugin-install-network #description {
2496      width: 60%;
2497  }
2498  
2499  table .vers,
2500  table .column-visible,
2501  table .column-rating {
2502      text-align: right;
2503  }
2504  
2505  .attention,
2506  .error-message {
2507      color: #d63638;
2508      font-weight: 600;
2509  }
2510  
2511  /* Scrollbar fix for bulk upgrade iframe */
2512  body.iframe {
2513      height: 98%;
2514  }
2515  
2516  /* Upgrader styles, Specific to Language Packs */
2517  .lp-show-latest p {
2518      display: none;
2519  }
2520  .lp-show-latest p:last-child,
2521  .lp-show-latest .lp-error p {
2522      display: block;
2523  }
2524  
2525  /* - Only used once or twice in all of WP - deprecate for global style
2526  ------------------------------------------------------------------------------*/
2527  .media-icon {
2528      width: 62px; /* icon + border */
2529      text-align: center;
2530  }
2531  
2532  .media-icon img {
2533      border: 1px solid #dcdcde;
2534      border: 1px solid rgba(0, 0, 0, 0.07);
2535  }
2536  
2537  #howto {
2538      font-size: 11px;
2539      margin: 0 5px;
2540      display: block;
2541  }
2542  
2543  .importers {
2544      font-size: 16px;
2545      width: auto;
2546  }
2547  
2548  .importers td {
2549      padding-left: 14px;
2550      line-height: 1.4;
2551  }
2552  
2553  .importers .import-system {
2554      max-width: 250px;
2555  }
2556  
2557  .importers td.desc {
2558      max-width: 500px;
2559  }
2560  
2561  .importer-title,
2562  .importer-desc,
2563  .importer-action {
2564      display: block;
2565  }
2566  
2567  .importer-title {
2568      color: #000;
2569      font-size: 14px;
2570      font-weight: 400;
2571      margin-bottom: .2em;
2572  }
2573  
2574  .importer-action {
2575      line-height: 1.55; /* Same as with .updating-message */
2576      color: #50575e;
2577      margin-bottom: 1em;
2578  }
2579  
2580  #post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */
2581  #post-body #post-body-content #namediv h2 {
2582      margin-top: 0;
2583  }
2584  
2585  .edit-comment-author {
2586      color: #1d2327;
2587      border-bottom: 1px solid #f0f0f1;
2588  }
2589  
2590  #namediv h3 label, /* Back-compat for pre-4.4 */
2591  #namediv h2 label {
2592      vertical-align: baseline;
2593  }
2594  
2595  #namediv table {
2596      width: 100%;
2597  }
2598  
2599  #namediv td.first {
2600      width: 10px;
2601      white-space: nowrap;
2602  }
2603  
2604  #namediv input {
2605      width: 100%;
2606  }
2607  
2608  #namediv p {
2609      margin: 10px 0;
2610  }
2611  
2612  /* - Used - but could/should be deprecated with a CSS reset
2613  ------------------------------------------------------------------------------*/
2614  .zerosize {
2615      height: 0;
2616      width: 0;
2617      margin: 0;
2618      border: 0;
2619      padding: 0;
2620      overflow: hidden;
2621      position: absolute;
2622  }
2623  
2624  br.clear {
2625      height: 2px;
2626      line-height: 0.15;
2627  }
2628  
2629  .checkbox {
2630      border: none;
2631      margin: 0;
2632      padding: 0;
2633  }
2634  
2635  fieldset {
2636      border: 0;
2637      padding: 0;
2638      margin: 0;
2639  }
2640  
2641  .post-categories {
2642      display: inline;
2643      margin: 0;
2644      padding: 0;
2645  }
2646  
2647  .post-categories li {
2648      display: inline;
2649  }
2650  
2651  /* Star Ratings - Back-compat for pre-3.8 */
2652  div.star-holder {
2653      position: relative;
2654      height: 17px;
2655      width: 100px;
2656      background: url(../images/stars.png?ver=20121108) repeat-x bottom right;
2657  }
2658  
2659  div.star-holder .star-rating {
2660      background: url(../images/stars.png?ver=20121108) repeat-x top right;
2661      height: 17px;
2662      float: right;
2663  }
2664  
2665  /* Star Ratings */
2666  .star-rating {
2667      white-space: nowrap;
2668  }
2669  .star-rating .star {
2670      display: inline-block;
2671      width: 20px;
2672      height: 20px;
2673      -webkit-font-smoothing: antialiased;
2674      font-size: 20px;
2675      line-height: 1;
2676      font-family: dashicons;
2677      text-decoration: inherit;
2678      font-weight: 400;
2679      font-style: normal;
2680      vertical-align: top;
2681      transition: color .1s ease-in;
2682      text-align: center;
2683      color: #dba617;
2684  }
2685  
2686  .star-rating .star-full:before {
2687      content: "\f155";
2688  }
2689  
2690  .star-rating .star-half:before {
2691      content: "\f459";
2692  }
2693  
2694  .rtl .star-rating .star-half {
2695      transform: rotateY(-180deg);
2696  }
2697  
2698  .star-rating .star-empty:before {
2699      content: "\f154";
2700  }
2701  
2702  div.action-links {
2703      font-weight: 400;
2704      margin: 6px 0 0;
2705  }
2706  
2707  /* Plugin install thickbox */
2708  #plugin-information {
2709      background: #fff;
2710      position: fixed;
2711      top: 0;
2712      left: 0;
2713      bottom: 0;
2714      right: 0;
2715      height: 100%;
2716      padding: 0;
2717  }
2718  
2719  #plugin-information-scrollable {
2720      overflow: auto;
2721      -webkit-overflow-scrolling: touch;
2722      height: 100%;
2723  }
2724  
2725  #plugin-information-title {
2726      padding: 0 26px;
2727      background: #f6f7f7;
2728      font-size: 22px;
2729      font-weight: 600;
2730      line-height: 2.4;
2731      position: relative;
2732      height: 56px;
2733  }
2734  
2735  #plugin-information-title.with-banner {
2736      margin-left: 0;
2737      height: 250px;
2738      background-size: cover;
2739  }
2740  
2741  #plugin-information-title h2 {
2742      font-size: 1em;
2743      font-weight: 600;
2744      padding: 0;
2745      margin: 0;
2746      overflow: hidden;
2747      text-overflow: ellipsis;
2748      white-space: nowrap;
2749  }
2750  
2751  #plugin-information-title.with-banner h2 {
2752      position: relative;
2753      font-family: "Helvetica Neue", sans-serif;
2754      display: inline-block;
2755      font-size: 30px;
2756      line-height: 1.68;
2757      box-sizing: border-box;
2758      max-width: 100%;
2759      padding: 0 15px;
2760      margin-top: 174px;
2761      color: #fff;
2762      background: rgba(29, 35, 39, 0.9);
2763      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
2764      box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
2765      border-radius: 8px;
2766  }
2767  
2768  #plugin-information-title div.vignette {
2769      display: none;
2770  }
2771  
2772  #plugin-information-title.with-banner div.vignette {
2773      position: absolute;
2774      display: block;
2775      top: 0;
2776      right: 0;
2777      height: 250px;
2778      width: 100%;
2779      background: transparent;
2780      box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2781  }
2782  
2783  #plugin-information-tabs {
2784      padding: 0 16px;
2785      position: relative;
2786      left: 0;
2787      right: 0;
2788      min-height: 36px;
2789      font-size: 0;
2790      z-index: 1;
2791      border-bottom: 1px solid #dcdcde;
2792      background: #f6f7f7;
2793  }
2794  
2795  #plugin-information-tabs a {
2796      position: relative;
2797      display: inline-block;
2798      padding: 9px 10px;
2799      margin: 0;
2800      height: 18px;
2801      line-height: 1.3;
2802      font-size: 14px;
2803      text-decoration: none;
2804      transition: none;
2805  }
2806  
2807  #plugin-information-tabs a.current {
2808      margin: 0 -1px -1px;
2809      background: #fff;
2810      border: 1px solid #dcdcde;
2811      border-bottom-color: #fff;
2812      padding-top: 8px;
2813      color: #2c3338;
2814  }
2815  
2816  #plugin-information-tabs.with-banner a.current {
2817      border-top: none;
2818      padding-top: 9px;
2819  }
2820  
2821  #plugin-information-tabs a:active,
2822  #plugin-information-tabs a:focus {
2823      outline: none;
2824  }
2825  
2826  #plugin-information-content {
2827      overflow: hidden; /* equal height column trick */
2828      background: #fff;
2829      position: relative;
2830      top: 0;
2831      left: 0;
2832      right: 0;
2833      min-height: 100%;
2834      /* Height of title + tabs + install now */
2835      min-height: calc( 100% - 152px );
2836  }
2837  
2838  #plugin-information-content.with-banner {
2839      /* Height of banner + tabs + install now */
2840      min-height: calc( 100% - 346px );
2841  }
2842  
2843  #section-holder {
2844      position: relative;
2845      top: 0;
2846      left: 250px;
2847      bottom: 0;
2848      right: 0;
2849      margin-top: 10px;
2850      margin-left: 250px; /* FYI box */
2851      padding: 10px 26px 99999px; /* equal height column trick */
2852      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2853  }
2854  
2855  #section-holder .notice {
2856      margin: 5px 0 15px;
2857  }
2858  
2859  #section-holder .updated {
2860      margin: 16px 0;
2861  }
2862  
2863  #plugin-information .fyi {
2864      float: left;
2865      position: relative;
2866      top: 0;
2867      left: 0;
2868      padding: 16px 16px 99999px; /* equal height column trick */
2869      margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2870      width: 217px;
2871      border-right: 1px solid #dcdcde;
2872      background: #f6f7f7;
2873      color: #646970;
2874  }
2875  
2876  #plugin-information .fyi strong {
2877      color: #3c434a;
2878  }
2879  
2880  #plugin-information .fyi h3 {
2881      font-weight: 600;
2882      text-transform: uppercase;
2883      font-size: 12px;
2884      color: #646970;
2885      margin: 24px 0 8px;
2886  }
2887  
2888  #plugin-information .fyi h2 {
2889      font-size: 0.9em;
2890      margin-bottom: 0;
2891      margin-left: 0;
2892  }
2893  
2894  #plugin-information .fyi ul {
2895      padding: 0;
2896      margin: 0;
2897      list-style: none;
2898  }
2899  
2900  #plugin-information .fyi li {
2901      margin: 0 0 10px;
2902  }
2903  
2904  #plugin-information .fyi-description {
2905      margin-top: 0;
2906  }
2907  
2908  #plugin-information .counter-container {
2909      margin: 3px 0;
2910  }
2911  
2912  #plugin-information .counter-label {
2913      float: right;
2914      margin-left: 5px;
2915      min-width: 55px;
2916  }
2917  
2918  #plugin-information .counter-back {
2919      height: 17px;
2920      width: 92px;
2921      background-color: #dcdcde;
2922      float: right;
2923  }
2924  
2925  #plugin-information .counter-bar {
2926      height: 17px;
2927      background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
2928      float: right;
2929  }
2930  
2931  #plugin-information .counter-count {
2932      margin-right: 5px;
2933  }
2934  
2935  #plugin-information .fyi ul.contributors {
2936      margin-top: 10px;
2937  }
2938  
2939  #plugin-information .fyi ul.contributors li {
2940      display: inline-block;
2941      margin-left: 8px;
2942      vertical-align: middle;
2943  }
2944  
2945  #plugin-information .fyi ul.contributors li {
2946      display: inline-block;
2947      margin-left: 8px;
2948      vertical-align: middle;
2949  }
2950  
2951  #plugin-information .fyi ul.contributors li img {
2952      vertical-align: middle;
2953      margin-left: 4px;
2954  }
2955  
2956  #plugin-information-footer {
2957      padding: 13px 16px;
2958      position: absolute;
2959      left: 0;
2960      bottom: 0;
2961      right: 0;
2962      height: 40px; /* actual height: 40+13+13+1=67 */
2963      border-top: 1px solid #dcdcde;
2964      background: #f6f7f7;
2965  }
2966  
2967  /* rtl:ignore */
2968  #plugin-information .section {
2969      direction: ltr;
2970  }
2971  
2972  /* rtl:ignore */
2973  #plugin-information .section ul,
2974  #plugin-information .section ol {
2975      list-style-type: disc;
2976      margin-left: 24px;
2977  }
2978  
2979  #plugin-information .section,
2980  #plugin-information .section p {
2981      font-size: 14px;
2982      line-height: 1.7;
2983  }
2984  
2985  #plugin-information #section-screenshots ol {
2986      list-style: none;
2987      margin: 0;
2988  }
2989  
2990  #plugin-information #section-screenshots li img {
2991      vertical-align: text-top;
2992      margin-top: 16px;
2993      max-width: 100%;
2994      width: auto;
2995      height: auto;
2996      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
2997  }
2998  
2999  /* rtl:ignore */
3000  #plugin-information #section-screenshots li p {
3001      font-style: italic;
3002      padding-left: 20px;
3003  }
3004  
3005  #plugin-information pre {
3006      padding: 7px;
3007      overflow: auto;
3008      border: 1px solid #c3c4c7;
3009  }
3010  
3011  #plugin-information blockquote {
3012      border-right: 2px solid #dcdcde;
3013      color: #646970;
3014      font-style: italic;
3015      margin: 1em 0;
3016      padding: 0 1em 0 0;
3017  }
3018  
3019  /* rtl:ignore */
3020  #plugin-information .review {
3021      overflow: hidden; /* clearfix */
3022      width: 100%;
3023      margin-bottom: 20px;
3024      border-bottom: 1px solid #dcdcde;
3025  }
3026  
3027  #plugin-information .review-title-section {
3028      overflow: hidden; /* clearfix */
3029  }
3030  
3031  /* rtl:ignore */
3032  #plugin-information .review-title-section h4 {
3033      display: inline-block;
3034      float: left;
3035      margin: 0 6px 0 0;
3036  }
3037  
3038  #plugin-information .reviewer-info p {
3039      clear: both;
3040      margin: 0;
3041      padding-top: 2px;
3042  }
3043  
3044  /* rtl:ignore */
3045  #plugin-information .reviewer-info .avatar {
3046      float: left;
3047      margin: 4px 6px 0 0;
3048  }
3049  
3050  /* rtl:ignore */
3051  #plugin-information .reviewer-info .star-rating {
3052      float: left;
3053  }
3054  
3055  /* rtl:ignore */
3056  #plugin-information .review-meta {
3057      float: left;
3058      margin-left: 0.75em;
3059  }
3060  
3061  /* rtl:ignore */
3062  #plugin-information .review-body {
3063      float: left;
3064      width: 100%;
3065  }
3066  
3067  .plugin-version-author-uri {
3068      font-size: 13px;
3069  }
3070  
3071  /* For non-js plugin installation screen ticket #36430. */
3072  .update-php .button.button-primary {
3073      margin-left: 1em;
3074  }
3075  
3076  @media screen and (max-width: 771px) {
3077      #plugin-information-title.with-banner {
3078          height: 100px;
3079      }
3080  
3081      #plugin-information-title.with-banner h2 {
3082          margin-top: 30px;
3083          font-size: 20px;
3084          line-height: 2;
3085          max-width: 85%;
3086      }
3087  
3088      #plugin-information-title.with-banner div.vignette {
3089          height: 100px;
3090      }
3091  
3092      #plugin-information-tabs {
3093          overflow: hidden; /* clearfix */
3094          padding: 0;
3095          height: auto; /* let tabs wrap */
3096      }
3097  
3098      #plugin-information-tabs a.current {
3099          margin-bottom: 0;
3100          border-bottom: none;
3101      }
3102  
3103      #plugin-information .fyi {
3104          float: none;
3105          border: 1px solid #dcdcde;
3106          position: static;
3107          width: auto;
3108          margin: 26px 26px 0;
3109          padding-bottom: 0; /* reset from the two column height fix */
3110      }
3111  
3112      #section-holder {
3113          position: static;
3114          margin: 0;
3115          padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */
3116      }
3117  
3118      #plugin-information .fyi h3,
3119      #plugin-information .fyi small {
3120          display: none;
3121      }
3122  
3123      #plugin-information-footer {
3124          padding: 12px 16px 0;
3125          height: 46px;
3126      }
3127  }
3128  
3129  /* Thickbox for the Plugin details modal. */
3130  #TB_window.plugin-details-modal {
3131      background: #fff;
3132  }
3133  
3134  #TB_window.plugin-details-modal.thickbox-loading:before {
3135      content: "";
3136      display: block;
3137      width: 20px;
3138      height: 20px;
3139      position: absolute;
3140      right: 50%;
3141      top: 50%;
3142      z-index: -1;
3143      margin: -10px -10px 0 0;
3144      background: #fff url(../images/spinner.gif) no-repeat center;
3145      background-size: 20px 20px;
3146      transform: translateZ(0);
3147  }
3148  
3149  @media print,
3150      (min-resolution: 120dpi) {
3151  
3152      #TB_window.plugin-details-modal.thickbox-loading:before {
3153          background-image: url(../images/spinner-2x.gif);
3154      }
3155  }
3156  
3157  .plugin-details-modal #TB_title {
3158      float: right;
3159      height: 1px;
3160  }
3161  
3162  .plugin-details-modal #TB_ajaxWindowTitle {
3163      display: none;
3164  }
3165  
3166  .plugin-details-modal #TB_closeWindowButton {
3167      right: auto;
3168      left: -30px;
3169      color: #f0f0f1;
3170  }
3171  
3172  .plugin-details-modal #TB_closeWindowButton:hover,
3173  .plugin-details-modal #TB_closeWindowButton:focus {
3174      outline: none;
3175      box-shadow: none;
3176  }
3177  
3178  .plugin-details-modal #TB_closeWindowButton:hover::after,
3179  .plugin-details-modal #TB_closeWindowButton:focus::after {
3180      outline: 2px solid;
3181      outline-offset: -4px;
3182      border-radius: 4px;
3183  }
3184  
3185  .plugin-details-modal .tb-close-icon {
3186      display: none;
3187  }
3188  
3189  .plugin-details-modal #TB_closeWindowButton:after {
3190      content: "\f335";
3191      font: normal 32px/29px 'dashicons';
3192      speak: never;
3193      -webkit-font-smoothing: antialiased;
3194      -moz-osx-font-smoothing: grayscale;
3195  }
3196  
3197  /* move plugin install close icon to top on narrow screens */
3198  @media screen and (max-width: 830px) {
3199      .plugin-details-modal #TB_closeWindowButton {
3200          left: 0;
3201          top: -30px;
3202      }
3203  }
3204  
3205  /* @todo: move this. */
3206  img {
3207      border: none;
3208  }
3209  
3210  /* Metabox collapse arrow indicators */
3211  .sidebar-name .toggle-indicator::before,
3212  .meta-box-sortables .postbox .toggle-indicator::before,
3213  .meta-box-sortables .postbox .order-higher-indicator::before,
3214  .meta-box-sortables .postbox .order-lower-indicator::before,
3215  .bulk-action-notice .toggle-indicator::before,
3216  .privacy-text-box .toggle-indicator::before {
3217      content: "\f142";
3218      display: inline-block;
3219      font: normal 20px/1 dashicons;
3220      speak: never;
3221      -webkit-font-smoothing: antialiased;
3222      -moz-osx-font-smoothing: grayscale;
3223      text-decoration: none;
3224  }
3225  
3226  .js .widgets-holder-wrap.closed .toggle-indicator::before,
3227  .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
3228  .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
3229  .privacy-text-box.closed .toggle-indicator::before {
3230      content: "\f140";
3231  }
3232  
3233  .postbox .handle-order-higher .order-higher-indicator::before {
3234      content: "\f343";
3235      color: inherit;
3236  }
3237  
3238  .postbox .handle-order-lower .order-lower-indicator::before {
3239      content: "\f347";
3240      color: inherit;
3241  }
3242  
3243  .postbox .handle-order-higher .order-higher-indicator::before,
3244  .postbox .handle-order-lower .order-lower-indicator::before {
3245      position: relative;
3246      top: 0.11rem;
3247      width: 20px;
3248      height: 20px;
3249  }
3250  
3251  .postbox .handlediv .toggle-indicator::before {
3252      width: 20px;
3253      border-radius: 50%;
3254  }
3255  
3256  .postbox .handlediv .toggle-indicator::before {
3257      position: relative;
3258      top: 0.05rem;
3259      text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
3260  }
3261  
3262  .rtl .postbox .handlediv .toggle-indicator::before {
3263      text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
3264  }
3265  
3266  .bulk-action-notice .toggle-indicator::before {
3267      line-height: 16px;
3268      vertical-align: top;
3269      color: #787c82;
3270  }
3271  
3272  .postbox .handle-order-higher:focus,
3273  .postbox .handle-order-lower:focus,
3274  .postbox .handlediv:focus {
3275      box-shadow: inset 0 0 0 2px #2271b1;
3276      border-radius: 50%;
3277      /* Only visible in Windows High Contrast mode */
3278      outline: 2px solid transparent;
3279  }
3280  
3281  .postbox .handle-order-higher:focus .order-higher-indicator::before,
3282  .postbox .handle-order-lower:focus .order-lower-indicator::before,
3283  .postbox .handlediv:focus .toggle-indicator::before {
3284      box-shadow: none;
3285      /* Only visible in Windows High Contrast mode */
3286      outline: 1px solid transparent;
3287  }
3288  
3289  /* @todo: appears to be Press This only and overridden */
3290  #photo-add-url-div input[type="text"] {
3291      width: 300px;
3292  }
3293  
3294  /* Theme/Plugin file editor */
3295  .alignleft h2 {
3296      margin: 0;
3297  }
3298  
3299  #template textarea {
3300      font-family: Consolas, Monaco, monospace;
3301      font-size: 13px;
3302      background: #f6f7f7;
3303      tab-size: 4;
3304  }
3305  
3306  #template textarea,
3307  #template .CodeMirror {
3308      width: 100%;
3309      min-height: 60vh;
3310      height: calc( 100vh - 295px );
3311      border: 1px solid #dcdcde;
3312      box-sizing: border-box;
3313  }
3314  
3315  #templateside > h2 {
3316      padding-top: 6px;
3317      padding-bottom: 7px;
3318      margin: 0;
3319  }
3320  
3321  #templateside ol,
3322  #templateside ul {
3323      margin: 0;
3324      padding: 0;
3325  }
3326  #templateside > ul {
3327      box-sizing: border-box;
3328      margin-top: 0;
3329      overflow: auto;
3330      padding: 0;
3331      min-height: 60vh;
3332      height: calc(100vh - 295px);
3333      background-color: #f6f7f7;
3334      border: 1px solid #dcdcde;
3335      border-right: none;
3336  }
3337  #templateside ul ul {
3338      padding-right: 12px;
3339  }
3340  #templateside > ul > li > ul[role=group] {
3341      padding-right: 0;
3342  }
3343  
3344  /*
3345   * Styles for Theme and Plugin file editors.
3346   */
3347  
3348  /* Hide collapsed items. */
3349  [role="treeitem"][aria-expanded="false"] > ul {
3350      display: none;
3351  }
3352  
3353  /* Use arrow dashicons for folder states, but hide from screen readers. */
3354  [role="treeitem"] span[aria-hidden] {
3355      display: inline;
3356      font-family: dashicons;
3357      font-size: 20px;
3358      position: absolute;
3359      pointer-events: none;
3360  }
3361  [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
3362      content: "\f141";
3363  }
3364  [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
3365      content: "\f140";
3366  }
3367  [role="treeitem"] .folder-label {
3368      display: block;
3369      padding: 3px 12px 3px 3px;
3370      cursor: pointer;
3371  }
3372  
3373  /* Remove outline, and create our own focus and hover styles */
3374  [role="treeitem"] {
3375      outline: 0;
3376  }
3377  
3378  [role="treeitem"] a:focus,
3379  [role="treeitem"] .folder-label.focus {
3380      color: #043959;
3381      /* Reset default focus style. */
3382      box-shadow: none;
3383      /* Use an inset outline instead, so it's visible also over the current file item. */
3384      outline: 2px solid #2271b1;
3385      outline-offset: -2px;
3386  }
3387  
3388  [role="treeitem"].hover,
3389  [role="treeitem"] .folder-label.hover {
3390      background-color: #f0f0f1;
3391  }
3392  
3393  .tree-folder {
3394      margin: 0;
3395      position: relative;
3396  }
3397  [role="treeitem"] li {
3398      position: relative;
3399  }
3400  
3401  /* Styles for folder indicators/depth */
3402  .tree-folder .tree-folder::after {
3403      content: "";
3404      display: block;
3405      position: absolute;
3406      right: 2px;
3407      border-right: 1px solid #c3c4c7;
3408      top: -13px;
3409      bottom: 10px;
3410  }
3411  .tree-folder > li::before {
3412      content: "";
3413      position: absolute;
3414      display: block;
3415      border-right: 1px solid #c3c4c7;
3416      right: 2px;
3417      top: -5px;
3418      height: 18px;
3419      width: 7px;
3420      border-bottom: 1px solid #c3c4c7;
3421  }
3422  .tree-folder > li::after {
3423      content: "";
3424      position: absolute;
3425      display: block;
3426      border-right: 1px solid #c3c4c7;
3427      right: 2px;
3428      bottom: -7px;
3429      top: 0;
3430  }
3431  
3432  /* current-file needs to adjustment for .notice styles */
3433  #templateside .current-file {
3434      margin: -4px 0 -2px;
3435  }
3436  .tree-folder > .current-file::before {
3437      right: 4px;
3438      height: 15px;
3439      width: 0;
3440      border-right: none;
3441      top: 3px;
3442  }
3443  .tree-folder > .current-file::after {
3444      bottom: -4px;
3445      height: 7px;
3446      right: 2px;
3447      top: auto;
3448  }
3449  
3450  /* Lines shouldn't continue on last item */
3451  .tree-folder > li:last-child::after,
3452  .tree-folder li:last-child > .tree-folder::after {
3453      display: none;
3454  }
3455  
3456  #theme-plugin-editor-selector,
3457  #theme-plugin-editor-label,
3458  #documentation label {
3459      font-weight: 600;
3460  }
3461  
3462  #theme-plugin-editor-label {
3463      display: inline-block;
3464      margin-bottom: 1em;
3465  }
3466  
3467  /* rtl:ignore */
3468  #template textarea,
3469  #docs-list {
3470      direction: ltr;
3471  }
3472  
3473  .fileedit-sub #theme,
3474  .fileedit-sub #plugin {
3475      max-width: 40%;
3476  }
3477  .fileedit-sub .alignright {
3478      text-align: left;
3479  }
3480  
3481  #template p {
3482      width: 97%;
3483  }
3484  
3485  #file-editor-linting-error {
3486      margin-top: 1em;
3487      margin-bottom: 1em;
3488  }
3489  #file-editor-linting-error > .notice {
3490      margin: 0;
3491      display: inline-block;
3492  }
3493  #file-editor-linting-error > .notice > p {
3494      width: auto;
3495  }
3496  #template .submit {
3497      margin-top: 1em;
3498      padding: 0;
3499  }
3500  
3501  #template .submit input[type=submit][disabled] {
3502      cursor: not-allowed;
3503  }
3504  #templateside {
3505      float: left;
3506      width: 16em;
3507      word-wrap: break-word;
3508  }
3509  
3510  #postcustomstuff p.submit {
3511      margin: 0;
3512  }
3513  
3514  #templateside h4 {
3515      margin: 1em 0 0;
3516  }
3517  
3518  #templateside li {
3519      margin: 4px 0;
3520  }
3521  
3522  #templateside li:not(.howto) a,
3523  .theme-editor-php .highlight {
3524      display: block;
3525      padding: 3px 12px 3px 0;
3526      text-decoration: none;
3527  }
3528  
3529  #templateside li.current-file > a {
3530      padding-bottom: 0;
3531  }
3532  
3533  #templateside li:not(.howto) > a:first-of-type {
3534      padding-top: 0;
3535  }
3536  
3537  #templateside li.howto {
3538      padding: 6px 12px 12px;
3539  }
3540  
3541  .theme-editor-php .highlight {
3542      margin: -3px -12px -3px 3px;
3543  }
3544  
3545  #templateside .highlight {
3546      border: none;
3547      font-weight: 600;
3548  }
3549  
3550  .nonessential {
3551      color: #646970;
3552      font-size: 11px;
3553      font-style: italic;
3554      padding-right: 12px;
3555  }
3556  
3557  #documentation {
3558      margin-top: 10px;
3559  }
3560  
3561  #documentation label {
3562      line-height: 1.8;
3563      vertical-align: baseline;
3564  }
3565  
3566  .fileedit-sub {
3567      padding: 10px 0 8px;
3568      line-height: 180%;
3569  }
3570  
3571  #file-editor-warning .file-editor-warning-content {
3572      margin: 25px;
3573  }
3574  
3575  /* @todo: can we use a common class for these? */
3576  .nav-menus-php .item-edit:before,
3577  .wp-customizer .control-section .accordion-section-title:after,
3578  .wp-customizer .accordion-section-title:after,
3579  .widget-top .widget-action .toggle-indicator:before {
3580      content: "\f140";
3581      font: normal 20px/1 dashicons;
3582      speak: never;
3583      display: block;
3584      -webkit-font-smoothing: antialiased;
3585      -moz-osx-font-smoothing: grayscale;
3586      text-decoration: none;
3587  }
3588  
3589  .widget-top .widget-action .toggle-indicator:before {
3590      padding: 1px 0 1px 2px;
3591      border-radius: 50%;
3592  }
3593  
3594  .handlediv,
3595  .postbox .handlediv.button-link,
3596  .item-edit,
3597  .toggle-indicator {
3598      color: #787c82;
3599  }
3600  
3601  .widget-action {
3602      color: #50575e; /* #fafafa background in the Widgets screen */
3603  }
3604  
3605  .widget-top:hover .widget-action,
3606  .widget-action:focus,
3607  .handlediv:hover,
3608  .handlediv:focus,
3609  .postbox .handlediv.button-link:hover,
3610  .postbox .handlediv.button-link:focus,
3611  .item-edit:hover,
3612  .item-edit:focus,
3613  .sidebar-name:hover .toggle-indicator {
3614      color: #1d2327;
3615      /* Only visible in Windows High Contrast mode */
3616      outline: 2px solid transparent;
3617  }
3618  
3619  .widget-top .widget-action:focus .toggle-indicator:before {
3620      box-shadow: 0 0 0 2px #2271b1;
3621      /* Only visible in Windows High Contrast mode */
3622      outline: 2px solid transparent;
3623  }
3624  
3625  #customize-info.open .accordion-section-title:after,
3626  .nav-menus-php .menu-item-edit-active .item-edit:before,
3627  .widget.open .widget-top .widget-action .toggle-indicator:before,
3628  .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
3629      content: "\f142";
3630  }
3631  
3632  /*!
3633   * jQuery UI Draggable/Sortable 1.11.4
3634   * http://jqueryui.com
3635   *
3636   * Copyright jQuery Foundation and other contributors
3637   * Released under the MIT license.
3638   * http://jquery.org/license
3639   */
3640  .ui-draggable-handle,
3641  .ui-sortable-handle {
3642      touch-action: none;
3643  }
3644  
3645  /* Accordion */
3646  .accordion-section {
3647      border-bottom: 1px solid #dcdcde;
3648      margin: 0;
3649  }
3650  
3651  .accordion-section.open .accordion-section-content,
3652  .no-js .accordion-section .accordion-section-content {
3653      display: block;
3654  }
3655  
3656  .accordion-section.open:hover {
3657      border-bottom-color: #dcdcde;
3658  }
3659  
3660  .accordion-section-content {
3661      display: none;
3662      padding: 10px 20px 15px;
3663      overflow: hidden;
3664      background: #fff;
3665  }
3666  
3667  .accordion-section-title {
3668      margin: 0;
3669      position: relative;
3670      border-right: 1px solid #dcdcde;
3671      border-left: 1px solid #dcdcde;
3672      -webkit-user-select: none;
3673      user-select: none;
3674  }
3675  
3676  .js .accordion-section-title {
3677      cursor: pointer;
3678  }
3679  
3680  .js .accordion-section-title:after {
3681      position: absolute;
3682      top: 12px;
3683      left: 10px;
3684      z-index: 1;
3685  }
3686  
3687  .accordion-section-title:focus {
3688      /* Only visible in Windows High Contrast mode */
3689      outline: 1px solid transparent;
3690  }
3691  
3692  .accordion-section-title:hover:after,
3693  .accordion-section-title:focus:after {
3694      border-color: #a7aaad transparent;
3695      /* Only visible in Windows High Contrast mode */
3696      outline: 1px solid transparent;
3697  }
3698  
3699  .cannot-expand .accordion-section-title {
3700      cursor: auto;
3701  }
3702  
3703  .cannot-expand .accordion-section-title:after {
3704      display: none;
3705  }
3706  
3707  .control-section .accordion-section-title,
3708  .customize-pane-child .accordion-section-title {
3709      border-right: none;
3710      border-left: none;
3711      padding: 10px 14px 11px 10px;
3712      line-height: 1.55;
3713      background: #fff;
3714  }
3715  
3716  .control-section .accordion-section-title:after,
3717  .customize-pane-child .accordion-section-title:after {
3718      top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
3719  }
3720  
3721  .js .control-section:hover .accordion-section-title,
3722  .js .control-section .accordion-section-title:hover,
3723  .js .control-section.open .accordion-section-title,
3724  .js .control-section .accordion-section-title:focus {
3725      color: #1d2327;
3726      background: #f6f7f7;
3727  }
3728  
3729  .control-section.open .accordion-section-title {
3730      /* When expanded */
3731      border-bottom: 1px solid #dcdcde;
3732  }
3733  
3734  /* Edit Site */
3735  .network-admin .edit-site-actions {
3736      margin-top: 0;
3737  }
3738  
3739  /* My Sites */
3740  .my-sites {
3741      display: block;
3742      overflow: auto;
3743      zoom: 1;
3744  }
3745  
3746  .my-sites li {
3747      display: block;
3748      padding: 8px 3%;
3749      min-height: 130px;
3750      margin: 0;
3751  }
3752  
3753  @media only screen and (max-width: 599px) {
3754      .my-sites li {
3755          min-height: 0;
3756      }
3757  }
3758  
3759  @media only screen and (min-width: 600px) {
3760      .my-sites.striped li {
3761          background-color: #fff;
3762          position: relative;
3763      }
3764      .my-sites.striped li:after {
3765          content: "";
3766          width: 1px;
3767          height: 100%;
3768          position: absolute;
3769          top: 0;
3770          left: 0;
3771          background: #c3c4c7;
3772      }
3773  
3774  }
3775  @media only screen and (min-width: 600px) and (max-width: 699px) {
3776      .my-sites li{
3777          float: right;
3778          width: 44%;
3779      }
3780      .my-sites.striped li {
3781          background-color: #fff;
3782      }
3783      .my-sites.striped li:nth-of-type(2n+1) {
3784          clear: right;
3785      }
3786      .my-sites.striped li:nth-of-type(2n+2):after {
3787          content: none;
3788      }
3789      .my-sites li:nth-of-type(4n+1),
3790      .my-sites li:nth-of-type(4n+2) {
3791          background-color: #f6f7f7;
3792      }
3793  
3794  }
3795  
3796  @media only screen and (min-width: 700px) and (max-width: 1199px) {
3797      .my-sites li {
3798          float: right;
3799          width: 27.333333%;
3800          background-color: #fff;
3801      }
3802      .my-sites.striped li:nth-of-type(3n+3):after {
3803          content: none;
3804      }
3805      .my-sites li:nth-of-type(6n+1),
3806      .my-sites li:nth-of-type(6n+2),
3807      .my-sites li:nth-of-type(6n+3) {
3808          background-color: #f6f7f7;
3809      }
3810  }
3811  
3812  @media only screen and (min-width: 1200px) and (max-width: 1399px) {
3813      .my-sites li {
3814          float: right;
3815          width: 21%;
3816          padding: 8px 2%;
3817          background-color: #fff;
3818      }
3819      .my-sites.striped li:nth-of-type(4n+1) {
3820          clear: right;
3821      }
3822      .my-sites.striped li:nth-of-type(4n+4):after {
3823          content: none;
3824      }
3825      .my-sites li:nth-of-type(8n+1),
3826      .my-sites li:nth-of-type(8n+2),
3827      .my-sites li:nth-of-type(8n+3),
3828      .my-sites li:nth-of-type(8n+4) {
3829          background-color: #f6f7f7;
3830      }
3831  }
3832  
3833  @media only screen and (min-width: 1400px) and (max-width: 1599px) {
3834      .my-sites li {
3835          float: right;
3836          width: 16%;
3837          padding: 8px 2%;
3838          background-color: #fff;
3839      }
3840      .my-sites.striped li:nth-of-type(5n+1) {
3841          clear: right;
3842      }
3843      .my-sites.striped li:nth-of-type(5n+5):after {
3844          content: none;
3845      }
3846      .my-sites li:nth-of-type(10n+1),
3847      .my-sites li:nth-of-type(10n+2),
3848      .my-sites li:nth-of-type(10n+3),
3849      .my-sites li:nth-of-type(10n+4),
3850      .my-sites li:nth-of-type(10n+5) {
3851          background-color: #f6f7f7;
3852      }
3853  }
3854  
3855  @media only screen and (min-width: 1600px) {
3856      .my-sites li {
3857          float: right;
3858          width: 12.666666%;
3859          padding: 8px 2%;
3860          background-color: #fff;
3861      }
3862      .my-sites.striped li:nth-of-type(6n+1) {
3863          clear: right;
3864      }
3865      .my-sites.striped li:nth-of-type(6n+6):after {
3866          content: none;
3867      }
3868      .my-sites li:nth-of-type(12n+1),
3869      .my-sites li:nth-of-type(12n+2),
3870      .my-sites li:nth-of-type(12n+3),
3871      .my-sites li:nth-of-type(12n+4),
3872      .my-sites li:nth-of-type(12n+5),
3873      .my-sites li:nth-of-type(12n+6) {
3874          background-color: #f6f7f7;
3875      }
3876  }
3877  
3878  .my-sites li a {
3879      text-decoration: none;
3880  }
3881  
3882  /* =Media Queries
3883  -------------------------------------------------------------- */
3884  
3885  /**
3886   * HiDPI Displays
3887   */
3888  @media print,
3889    (min-resolution: 120dpi) {
3890      /* Back-compat for pre-3.8 */
3891      div.star-holder,
3892      div.star-holder .star-rating {
3893          background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom right;
3894          background-size: 21px 37px;
3895      }
3896  
3897      .spinner {
3898          background-image: url(../images/spinner-2x.gif);
3899      }
3900  
3901  }
3902  
3903  @media screen and (max-width: 782px) {
3904      html.wp-toolbar {
3905          padding-top: var(--wp-admin--admin-bar--height);
3906      }
3907  
3908      .screen-reader-shortcut:focus {
3909          top: -39px;
3910      }
3911  
3912      .block-editor-page .screen-reader-shortcut:focus {
3913          top: 7px;
3914      }
3915  
3916      body {
3917          min-width: 240px;
3918          overflow-x: hidden;
3919      }
3920  
3921      body * {
3922          -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3923      }
3924  
3925      #wpcontent {
3926          position: relative;
3927          margin-right: 0;
3928          padding-right: 10px;
3929      }
3930  
3931      #wpbody-content {
3932          padding-bottom: 100px;
3933      }
3934  
3935      .wrap {
3936          clear: both;
3937          margin-left: 12px;
3938          margin-right: 0;
3939      }
3940  
3941      /* categories */
3942      #col-left,
3943      #col-right {
3944          float: none;
3945          width: auto;
3946      }
3947  
3948      #col-left .col-wrap,
3949      #col-right .col-wrap {
3950          padding: 0;
3951      }
3952  
3953      /* Hidden Elements */
3954      #collapse-menu,
3955      .post-format-select {
3956          display: none !important;
3957      }
3958  
3959      .wrap h1.wp-heading-inline {
3960          margin-bottom: 0.5em;
3961      }
3962  
3963      .wrap .add-new-h2, /* deprecated */
3964      .wrap .add-new-h2:active, /* deprecated */
3965      .wrap .page-title-action,
3966      .wrap .page-title-action:active {
3967          padding: 10px 15px;
3968          font-size: 14px;
3969          white-space: nowrap;
3970      }
3971  
3972      /* Feedback Messages */
3973      .notice,
3974      .wrap div.updated,
3975      .wrap div.error,
3976      .media-upload-form div.error {
3977          margin: 20px 0 10px;
3978          padding: 5px 10px;
3979          font-size: 14px;
3980          line-height: 175%;
3981      }
3982  
3983      .wp-core-ui .notice.is-dismissible {
3984          padding-left: 46px;
3985      }
3986  
3987      .notice-dismiss {
3988          padding: 13px;
3989      }
3990  
3991      .wrap .icon32 + h2 {
3992          margin-top: -2px;
3993      }
3994  
3995      .wp-responsive-open #wpbody {
3996          left: -16em;
3997      }
3998  
3999      code {
4000          word-wrap: break-word;
4001          word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
4002          word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
4003      }
4004  
4005      /* General Metabox */
4006      .postbox {
4007          font-size: 14px;
4008      }
4009  
4010      .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
4011      .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
4012      .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
4013      .metabox-holder h2 {
4014          padding: 12px;
4015      }
4016  
4017      .nav-menus-php .metabox-holder h3 {
4018          padding: 0;
4019      }
4020  
4021      .postbox .handlediv {
4022          margin-top: 3px;
4023      }
4024  
4025      /* Subsubsub Nav */
4026      .subsubsub {
4027          font-size: 16px;
4028          text-align: center;
4029          margin-bottom: 15px;
4030      }
4031  
4032      /* Theme/Plugin File Editor */
4033  
4034      #template textarea,
4035      #template .CodeMirror {
4036          box-sizing: border-box;
4037      }
4038  
4039      #templateside {
4040          float: none;
4041          width: auto;
4042      }
4043  
4044      #templateside > ul {
4045          border-right: 1px solid #dcdcde;
4046      }
4047  
4048      #templateside li {
4049          margin: 0;
4050      }
4051  
4052      #templateside li:not(.howto) a {
4053          display: block;
4054          padding: 5px;
4055      }
4056      #templateside li.howto {
4057          padding: 12px;
4058      }
4059  
4060      #templateside .highlight {
4061          padding: 5px;
4062          margin-right: -5px;
4063          margin-top: -5px;
4064      }
4065  
4066      #template > div,
4067      #template .notice {
4068          float: none;
4069          margin: 1em 0;
4070          width: auto;
4071      }
4072  
4073      #template .CodeMirror,
4074      #template textarea {
4075          width: 100%;
4076      }
4077  
4078      #templateside ul ul {
4079          padding-right: 1.5em;
4080      }
4081      [role="treeitem"] .folder-label {
4082          display: block;
4083          padding: 5px;
4084      }
4085      .tree-folder > li::before,
4086      .tree-folder > li::after,
4087      .tree-folder .tree-folder::after {
4088          right: -8px;
4089      }
4090      .tree-folder > li::before {
4091          top: 0;
4092          height: 13px;
4093      }
4094      .tree-folder > .current-file::before {
4095          right: -5px;
4096          top: 7px;
4097          width: 4px;
4098      }
4099      .tree-folder > .current-file::after {
4100          height: 9px;
4101          right: -8px;
4102      }
4103      .wrap #templateside span.notice {
4104          margin-right: -5px;
4105          width: 100%;
4106      }
4107  
4108      .fileedit-sub .alignright {
4109          float: right;
4110          margin-top: 15px;
4111          width: 100%;
4112          text-align: right;
4113      }
4114  
4115      .fileedit-sub .alignright label {
4116          display: block;
4117      }
4118  
4119      .fileedit-sub #theme,
4120      .fileedit-sub #plugin {
4121          margin-right: 0;
4122          max-width: 70%;
4123      }
4124  
4125      .fileedit-sub input[type="submit"] {
4126          margin-bottom: 0;
4127      }
4128  
4129      #documentation label[for="docs-list"] {
4130          display: block;
4131      }
4132  
4133      #documentation select[name="docs-list"] {
4134          margin-right: 0;
4135          max-width: 60%;
4136      }
4137  
4138      #documentation input[type="button"] {
4139          margin-bottom: 0;
4140      }
4141  
4142      #wpfooter {
4143          display: none;
4144      }
4145  
4146      #comments-form .checkforspam {
4147          display: none;
4148      }
4149  
4150      .edit-comment-author {
4151          margin: 2px 0 0;
4152      }
4153  
4154      .filter-drawer .filter-group-feature input,
4155      .filter-drawer .filter-group-feature label {
4156          line-height: 2.1;
4157      }
4158  
4159      .filter-drawer .filter-group-feature label {
4160          margin-right: 32px;
4161      }
4162  
4163      .wp-filter .button.drawer-toggle {
4164          font-size: 13px;
4165          line-height: 2;
4166          height: 28px;
4167      }
4168  
4169      /* Fix help tab columns for smaller screens */
4170      #screen-meta #contextual-help-wrap {
4171          overflow: visible;
4172      }
4173  
4174      #screen-meta #contextual-help-back,
4175      #screen-meta .contextual-help-sidebar {
4176          display: none;
4177      }
4178  
4179      #screen-meta .contextual-help-tabs {
4180          clear: both;
4181          width: 100%;
4182          float: none;
4183      }
4184  
4185      #screen-meta .contextual-help-tabs ul {
4186          margin: 0 0 1em;
4187          padding: 1em 0 0;
4188      }
4189  
4190      #screen-meta .contextual-help-tabs .active {
4191          margin: 0;
4192      }
4193  
4194      #screen-meta .contextual-help-tabs-wrap {
4195          clear: both;
4196          max-width: 100%;
4197          float: none;
4198      }
4199  
4200      #screen-meta,
4201      #screen-meta-links {
4202          margin-left: 10px;
4203      }
4204  
4205      #screen-meta-links {
4206          margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
4207      }
4208  
4209      .wp-filter .search-form input[type="search"] {
4210          font-size: 1rem;
4211      }
4212  
4213      .wp-filter .search-form.search-plugins {
4214          /* This element is a flex item. */
4215          min-width: 100%;
4216      }
4217  }
4218  
4219  /* Smartphone */
4220  @media screen and (max-width: 600px) {
4221      /* Disable horizontal scroll when responsive menu is open
4222         since we push the main content off to the right. */
4223      #wpwrap.wp-responsive-open {
4224          overflow-x: hidden;
4225      }
4226  
4227      html.wp-toolbar {
4228          padding-top: 0;
4229      }
4230  
4231      .screen-reader-shortcut:focus {
4232          top: 7px;
4233      }
4234  
4235      #wpbody {
4236          padding-top: 46px;
4237      }
4238  
4239      /* Keep full-width boxes on Edit Post page from causing horizontal scroll */
4240      div#post-body.metabox-holder.columns-1 {
4241          overflow-x: hidden;
4242      }
4243  
4244      h1.nav-tab-wrapper,
4245      .wrap h2.nav-tab-wrapper,
4246      .nav-tab-wrapper {
4247          border-bottom: 0;
4248      }
4249  
4250      h1 .nav-tab,
4251      h2 .nav-tab,
4252      h3 .nav-tab,
4253      nav .nav-tab {
4254          margin: 10px 0 0 10px;
4255          border-bottom: 1px solid #c3c4c7;
4256      }
4257  
4258      .nav-tab-active:hover,
4259      .nav-tab-active:focus,
4260      .nav-tab-active:focus:active {
4261          border-bottom: 1px solid #c3c4c7;
4262      }
4263  
4264      .wp-filter .search-form.search-plugins label {
4265          width: 100%;
4266      }
4267  }
4268  
4269  @media screen and (max-width: 480px) {
4270      .metabox-prefs-container {
4271          display: grid;
4272      }
4273  
4274      .metabox-prefs-container > * {
4275          display: inline-block;
4276          padding: 2px;
4277      }
4278  }
4279  
4280  @media screen and (max-width: 320px) {
4281      /* Prevent default center alignment and larger font for the Right Now widget when
4282         the network dashboard is viewed on a small mobile device. */
4283      #network_dashboard_right_now .subsubsub {
4284          font-size: 14px;
4285          text-align: right;
4286      }
4287  }