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