[Summary view] [Print] [Text view]

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