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