[Summary view] [Print] [Text view]

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