[Summary view] [Print] [Text view]

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