[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.1;
 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  }
 965  
 966  #misc-publishing-actions {
 967      padding: 6px 0 0;
 968  }
 969  
 970  .misc-pub-section {
 971      padding: 6px 10px 8px;
 972  }
 973  
 974  .word-wrap-break-word,
 975  .misc-pub-filename {
 976      word-wrap: break-word;
 977  }
 978  
 979  #minor-publishing-actions {
 980      padding: 10px 10px 0;
 981      text-align: right;
 982  }
 983  
 984  #save-post {
 985      float: left;
 986  }
 987  
 988  .preview {
 989      float: right;
 990  }
 991  
 992  #sticky-span {
 993      margin-left: 18px;
 994  }
 995  
 996  .approve,
 997  .unapproved .unapprove {
 998      display: none;
 999  }
1000  
1001  .unapproved .approve,
1002  .spam .approve,
1003  .trash .approve {
1004      display: inline;
1005  }
1006  
1007  td.action-links,
1008  th.action-links {
1009      text-align: right;
1010  }
1011  
1012  #misc-publishing-actions .notice {
1013      margin-left: 10px;
1014      margin-right: 10px;
1015  }
1016  
1017  /* Filter bar */
1018  .wp-filter {
1019      display: inline-block;
1020      position: relative;
1021      box-sizing: border-box;
1022      margin: 12px 0 25px;
1023      padding: 0 10px;
1024      width: 100%;
1025      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1026      border: 1px solid #c3c4c7;
1027      background: #fff;
1028      color: #50575e;
1029      font-size: 13px;
1030  }
1031  
1032  .wp-filter a {
1033      text-decoration: none;
1034  }
1035  
1036  .filter-count {
1037      display: inline-block;
1038      vertical-align: middle;
1039      min-width: 4em;
1040  }
1041  
1042  .title-count,
1043  .filter-count .count {
1044      display: inline-block;
1045      position: relative;
1046      top: -1px;
1047      padding: 4px 10px;
1048      border-radius: 30px;
1049      background: #646970;
1050      color: #fff;
1051      font-size: 14px;
1052      font-weight: 600;
1053  }
1054  
1055  /* not a part of filter bar, but derived from it, so here for now */
1056  .title-count {
1057      display: inline;
1058      top: -3px;
1059      margin-left: 5px;
1060      margin-right: 20px;
1061  }
1062  
1063  .filter-items {
1064      float: left;
1065  }
1066  
1067  .filter-links {
1068      display: inline-block;
1069      margin: 0;
1070  }
1071  
1072  .filter-links li {
1073      display: inline-block;
1074      margin: 0;
1075  }
1076  
1077  .filter-links li > a {
1078      display: inline-block;
1079      margin: 0 10px;
1080      padding: 15px 0;
1081      border-bottom: 4px solid #fff;
1082      color: #646970;
1083      cursor: pointer;
1084  }
1085  
1086  .filter-links .current {
1087      box-shadow: none;
1088      border-bottom: 4px solid var(--wp-admin-theme-color);
1089      color: #1d2327;
1090  }
1091  
1092  .filter-links li > a:hover,
1093  .filter-links li > a:focus,
1094  .show-filters .filter-links a.current:hover,
1095  .show-filters .filter-links a.current:focus {
1096      color: var(--wp-admin-theme-color);
1097  }
1098  
1099  .wp-filter .search-form {
1100      float: right;
1101      display: flex;
1102      align-items: center;
1103      column-gap: .5rem;
1104  }
1105  
1106  .wp-filter .search-form input[type="search"] {
1107      width: 280px;
1108      max-width: 100%;
1109  }
1110  
1111  .wp-filter .search-form select {
1112      margin: 0;
1113  }
1114  
1115  .wp-filter .search-form input[type="search"] {
1116      min-height: 32px;
1117      padding: 0 8px;
1118  }
1119  
1120  .wp-filter .search-form select,
1121  .wp-filter .filter-items select {
1122      min-height: 32px;
1123      line-height: 2.14285714; /* 30px for 32px height with 14px font */
1124      padding: 0 24px 0 8px;
1125  }
1126  
1127  .wp-filter .button {
1128      min-height: 32px;
1129      line-height: 2.30769231; /* 30px for 32px height with 13px font */
1130      padding: 0 12px;
1131  }
1132  
1133  /* Use flexbox only on the plugins install page and upload page. The `filter-links` and search form children will become flex items. */
1134  .plugin-install-php .wp-filter,
1135  .upload-php .wp-filter {
1136      display: flex;
1137      flex-wrap: wrap;
1138      justify-content: space-between;
1139      align-items: center;
1140  }
1141  
1142  .wp-filter .search-form.search-plugins select,
1143  .wp-filter .search-form.search-plugins .wp-filter-search,
1144  .no-js .wp-filter .search-form.search-plugins .button {
1145      display: inline-block;
1146      vertical-align: top;
1147  }
1148  
1149  .wp-filter .button.drawer-toggle {
1150      margin: 10px 9px 0;
1151      padding: 0 10px 0 6px;
1152      border-color: transparent;
1153      background-color: transparent;
1154      color: #646970;
1155      vertical-align: baseline;
1156      box-shadow: none;
1157  }
1158  
1159  .wp-filter .drawer-toggle:before {
1160      content: "\f111";
1161      content: "\f111" / '';
1162      margin: 0 5px 0 0;
1163      color: #646970;
1164      font: normal 16px/1 dashicons;
1165      vertical-align: text-bottom;
1166      -webkit-font-smoothing: antialiased;
1167      -moz-osx-font-smoothing: grayscale;
1168  }
1169  
1170  .wp-filter .button.drawer-toggle:hover,
1171  .wp-filter .drawer-toggle:hover:before,
1172  .wp-filter .button.drawer-toggle:focus,
1173  .wp-filter .drawer-toggle:focus:before {
1174      background-color: transparent;
1175      color: var(--wp-admin-theme-color);
1176  }
1177  
1178  .wp-filter .button.drawer-toggle:hover,
1179  .wp-filter .button.drawer-toggle:focus:active {
1180      border-color: transparent;
1181  }
1182  
1183  .wp-filter .button.drawer-toggle:focus {
1184      border-color: var(--wp-admin-theme-color);
1185  }
1186  
1187  .wp-filter .button.drawer-toggle:active {
1188      background: transparent;
1189      box-shadow: none;
1190      transform: none;
1191  }
1192  
1193  .wp-filter .drawer-toggle.current:before {
1194      color: #fff;
1195  }
1196  
1197  .filter-drawer,
1198  .wp-filter .favorites-form {
1199      display: none;
1200      margin: 0 -10px 0 -20px;
1201      padding: 20px;
1202      border-top: 1px solid #f0f0f1;
1203      background: #f6f7f7;
1204      overflow: hidden;
1205  }
1206  
1207  .wp-filter .favorites-form .favorites-username {
1208      display: flex;
1209      align-items: center;
1210      flex-wrap: wrap;
1211      gap: 0.5rem;
1212  }
1213  
1214  .wp-filter .favorites-form .favorites-username input {
1215      margin: 0;
1216  }
1217  
1218  .show-filters .filter-drawer,
1219  .show-favorites-form .favorites-form {
1220      display: block;
1221  }
1222  
1223  .show-filters .filter-links a.current {
1224      border-bottom: none;
1225  }
1226  
1227  .show-filters .wp-filter .button.drawer-toggle {
1228      border-radius: 2px;
1229      background: #646970;
1230      color: #fff;
1231  }
1232  
1233  .show-filters .wp-filter .drawer-toggle:hover,
1234  .show-filters .wp-filter .drawer-toggle:focus {
1235      background: var(--wp-admin-theme-color);
1236  }
1237  
1238  .show-filters .wp-filter .drawer-toggle:before {
1239      color: #fff;
1240  }
1241  
1242  .filter-group {
1243      box-sizing: border-box;
1244      position: relative;
1245      float: left;
1246      margin: 0 1% 0 0;
1247      padding: 20px 10px 10px;
1248      width: 24%;
1249      background: #fff;
1250      border: 1px solid #dcdcde;
1251      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1252  }
1253  
1254  .filter-group legend {
1255      position: absolute;
1256      top: 10px;
1257      display: block;
1258      margin: 0;
1259      padding: 0;
1260      font-size: 1em;
1261      font-weight: 600;
1262  }
1263  
1264  .filter-drawer .filter-group-feature {
1265      margin: 28px 0 0;
1266      list-style-type: none;
1267      font-size: 12px;
1268  }
1269  
1270  .filter-drawer .filter-group-feature input,
1271  .filter-drawer .filter-group-feature label {
1272      line-height: 1.4;
1273  }
1274  
1275  .filter-drawer .filter-group-feature input {
1276      position: absolute;
1277      margin: 0;
1278  }
1279  
1280  .filter-group .filter-group-feature label {
1281      display: block;
1282      margin: 14px 0 14px 23px;
1283  }
1284  
1285  .filter-drawer .buttons {
1286      clear: both;
1287      margin-bottom: 20px;
1288  }
1289  
1290  .filter-drawer .filter-group + .buttons {
1291      margin-bottom: 0;
1292      padding-top: 20px;
1293  }
1294  
1295  .filter-drawer .buttons .button span {
1296      display: inline-block;
1297      opacity: 0.8;
1298      font-size: 12px;
1299      text-indent: 10px;
1300  }
1301  
1302  .wp-filter .button.clear-filters {
1303      display: none;
1304      margin-left: 10px;
1305  }
1306  
1307  .wp-filter .button-link.edit-filters {
1308      padding: 0 5px;
1309      line-height: 2.2;
1310  }
1311  
1312  .filtered-by {
1313      display: none;
1314      margin: 0;
1315  }
1316  
1317  .filtered-by > span {
1318      font-weight: 600;
1319  }
1320  
1321  .filtered-by a {
1322      margin-left: 10px;
1323  }
1324  
1325  .filtered-by .tags {
1326      display: flex;
1327      align-items: flex-start;
1328      flex-wrap: wrap;
1329      gap: 8px;
1330  }
1331  
1332  .filtered-by .tag {
1333      padding: 4px 8px;
1334      border: 1px solid #dcdcde;
1335      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1336      background: #fff;
1337      font-size: 11px;
1338  }
1339  
1340  .filters-applied .filter-group,
1341  .filters-applied .filter-drawer .buttons,
1342  .filters-applied .filter-drawer br {
1343      display: none;
1344  }
1345  
1346  .filters-applied .filtered-by {
1347      display: flex;
1348      align-items: center;
1349      flex-wrap: wrap;
1350      gap: 10px;
1351  }
1352  
1353  .filters-applied .filter-drawer {
1354      padding: 20px;
1355  }
1356  
1357  .show-filters .favorites-form,
1358  .show-filters .content-filterable,
1359  .show-filters.filters-applied.loading-content .content-filterable,
1360  .loading-content .content-filterable,
1361  .error .content-filterable {
1362      display: none;
1363  }
1364  
1365  .show-filters.filters-applied .content-filterable {
1366      display: block;
1367  }
1368  
1369  .loading-content .spinner {
1370      display: block;
1371      margin: 40px auto 0;
1372      float: none;
1373  }
1374  
1375  @media only screen and (max-width: 1138px) {
1376      .wp-filter .search-form {
1377          margin: 11px 0;
1378      }
1379  }
1380  
1381  @media only screen and (max-width: 1250px) {
1382      .wp-filter:has(.plugin-install-search) .search-form {
1383          margin: 11px 0;
1384      }
1385  }
1386  
1387  @media only screen and (max-width: 1120px) {
1388      .filter-drawer {
1389          border-bottom: 1px solid #f0f0f1;
1390      }
1391  
1392      .filter-group {
1393          margin-bottom: 0;
1394          margin-top: 5px;
1395          width: 100%;
1396      }
1397  
1398      .filter-group li {
1399          margin: 10px 0;
1400      }
1401  }
1402  
1403  @media only screen and (max-width: 1000px) {
1404      .filter-items {
1405          float: none;
1406      }
1407  
1408      .wp-filter .media-toolbar-primary,
1409      .wp-filter .media-toolbar-secondary,
1410      .wp-filter .search-form {
1411          float: none; /* Remove float from media-views.css */
1412          position: relative;
1413          max-width: 100%;
1414      }
1415      .wp-filter .search-form {
1416          margin: 11px 0;
1417          flex-wrap: wrap;
1418          row-gap: 10px;
1419      }
1420  }
1421  
1422  @media only screen and (max-width: 782px) {
1423      .filter-group li {
1424          padding: 0;
1425          width: 50%;
1426      }
1427  }
1428  
1429  @media only screen and (max-width: 320px) {
1430      .filter-count {
1431          display: none;
1432      }
1433  
1434      .wp-filter .drawer-toggle {
1435          margin: 10px 0;
1436      }
1437  
1438      .filter-group li,
1439      .wp-filter .search-form input[type="search"] {
1440          width: 100%;
1441      }
1442  }
1443  
1444  /*------------------------------------------------------------------------------
1445    4.0 - Notifications
1446  ------------------------------------------------------------------------------*/
1447  
1448  .notice,
1449  div.updated,
1450  div.error {
1451      background: #fff;
1452      border: none;
1453      border-left: 4px solid #c3c4c7;
1454      box-shadow: none;
1455      margin: 5px 15px 2px;
1456      padding: 8px 12px;
1457  }
1458  
1459  div[class="update-message"] { /* back-compat for pre-4.6 */
1460      padding: 0.5em 12px 0.5em 0;
1461  }
1462  
1463  .notice p,
1464  .notice-title,
1465  div.updated p,
1466  div.error p,
1467  .form-table td .notice p {
1468      margin: 0.5em 0;
1469      padding: 0;
1470      font-size: 13px;
1471      line-height: 1.54;
1472      color: #1e1e1e;
1473  }
1474  
1475  div.notice a,
1476  div.error a,
1477  div.updated a {
1478      color: var(--wp-admin-theme-color-darker-10);
1479      text-decoration: underline;
1480  }
1481  
1482  div.notice a:hover,
1483  div.error a:hover,
1484  div.updated a:hover {
1485      color: var(--wp-admin-theme-color-darker-20);
1486  }
1487  
1488  div.notice a:focus,
1489  div.error a:focus,
1490  div.updated a:focus {
1491      box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1492      outline: 2px solid transparent;
1493      border-radius: 2px;
1494  }
1495  
1496  .notice-alt {
1497      box-shadow: none;
1498  }
1499  
1500  .notice-large {
1501      padding: 10px 20px;
1502  }
1503  
1504  .notice-title {
1505      display: inline-block;
1506      color: #1d2327;
1507      font-size: 18px;
1508  }
1509  
1510  .wp-core-ui .notice.is-dismissible {
1511      padding-right: 48px;
1512      position: relative;
1513  }
1514  
1515  .notice-dismiss {
1516      position: absolute;
1517      top: 12px;
1518      right: 12px;
1519      border: none;
1520      margin: 0;
1521      padding: 0;
1522      background: none;
1523      color: #1e1e1e;
1524      cursor: pointer;
1525      width: 24px;
1526      height: 24px;
1527      display: flex;
1528      align-items: center;
1529      justify-content: center;
1530      border-radius: 2px;
1531  }
1532  
1533  .notice-dismiss:hover:before,
1534  .notice-dismiss:active:before {
1535      color: #1e1e1e;
1536      opacity: 0.7;
1537  }
1538  
1539  .notice-dismiss:focus {
1540      box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1541      /* Only visible in Windows High Contrast mode */
1542      outline: 2px solid transparent;
1543  }
1544  
1545  .notice-dismiss:focus:before {
1546      color: #1e1e1e;
1547  }
1548  
1549  .notice-success,
1550  div.updated {
1551      border-left-color: #4ab866;
1552      background-color: #eff9f1;
1553  }
1554  
1555  .notice-success.notice-alt,
1556  div.updated.notice-alt {
1557      background-color: #eff9f1;
1558  }
1559  
1560  .notice-warning {
1561      border-left-color: #f0b849;
1562      background-color: #fef8ee;
1563  }
1564  
1565  .notice-warning.notice-alt {
1566      background-color: #fef8ee;
1567  }
1568  
1569  .notice-error,
1570  div.error {
1571      border-left-color: #cc1818;
1572      background-color: #fcf0f0;
1573  }
1574  
1575  .notice-error.notice-alt,
1576  div.error.notice-alt {
1577      background-color: #fcf0f0;
1578  }
1579  
1580  .notice-info {
1581      border-left-color: #3858e9;
1582      background-color: #fff;
1583  }
1584  
1585  .notice-info.notice-alt {
1586      background-color: #fff;
1587  }
1588  
1589  #plugin-information-footer .update-now:not(.button-disabled):before {
1590      color: #d63638;
1591      content: "\f463";
1592      content: "\f463" / '';
1593      display: inline-block;
1594      font: normal 20px/1 dashicons;
1595      margin: -3px 5px 0 -2px;
1596      -webkit-font-smoothing: antialiased;
1597      -moz-osx-font-smoothing: grayscale;
1598      vertical-align: middle;
1599  }
1600  
1601  #plugin-information-footer .notice {
1602      margin-top: -5px;
1603  }
1604  
1605  .update-message p:before,
1606  .updating-message p:before,
1607  .updated-message p:before,
1608  .import-php .updating-message:before,
1609  .button.updating-message:before,
1610  .button.updated-message:before,
1611  .button.installed:before,
1612  .button.installing:before,
1613  .button.activating-message:before,
1614  .button.activated-message:before {
1615      display: inline-block;
1616      font: normal 20px/1 'dashicons';
1617      -webkit-font-smoothing: antialiased;
1618      -moz-osx-font-smoothing: grayscale;
1619      vertical-align: top;
1620  }
1621  
1622  .wrap .notice,
1623  .wrap div.updated,
1624  .wrap div.error,
1625  .media-upload-form .notice,
1626  .media-upload-form div.error {
1627      margin: 5px 0 15px;
1628  }
1629  
1630  .wrap #templateside .notice {
1631      display: block;
1632      margin: 0;
1633      padding: 5px 8px;
1634      font-weight: 600;
1635      text-decoration: none;
1636  }
1637  
1638  .wrap #templateside span.notice {
1639      margin-left: -12px;
1640  }
1641  
1642  #templateside li.notice a {
1643      padding: 0;
1644  }
1645  
1646  /* Update icon. */
1647  .update-message p:before,
1648  .updating-message p:before,
1649  .import-php .updating-message:before,
1650  .button.updating-message:before,
1651  .button.installing:before,
1652  .button.activating-message:before {
1653      color: #d63638;
1654      content: "\f463";
1655      content: "\f463" / '';
1656  }
1657  
1658  /* Spins the update icon. */
1659  .updating-message p:before,
1660  .import-php .updating-message:before,
1661  .button.updating-message:before,
1662  .button.installing:before,
1663  .button.activating-message:before,
1664  .plugins .column-auto-updates .dashicons-update.spin,
1665  .theme-overlay .theme-autoupdate .dashicons-update.spin {
1666      animation: rotation 2s infinite linear;
1667  }
1668  
1669  @media (prefers-reduced-motion: reduce) {
1670      .updating-message p:before,
1671      .import-php .updating-message:before,
1672      .button.updating-message:before,
1673      .button.installing:before,
1674      .button.activating-message:before,
1675      .plugins .column-auto-updates .dashicons-update.spin,
1676      .theme-overlay .theme-autoupdate .dashicons-update.spin {
1677          animation: none;
1678      }
1679  }
1680  
1681  .theme-overlay .theme-autoupdate .dashicons-update.spin {
1682      margin-right: 3px;
1683  }
1684  
1685  /* Updated icon (check mark). */
1686  .updated-message p:before,
1687  .installed p:before,
1688  .button.updated-message:before,
1689  .button.activated-message:before {
1690      color: #68de7c;
1691      content: "\f147";
1692      content: "\f147" / '';
1693  }
1694  
1695  /* Error icon. */
1696  .update-message.notice-error p:before {
1697      color: #d63638;
1698      content: "\f534";
1699      content: "\f534" / '';
1700  }
1701  
1702  .wrap .notice p:before,
1703  .import-php .updating-message:before {
1704      margin-right: 6px;
1705  }
1706  
1707  .import-php .updating-message:before {
1708      vertical-align: bottom;
1709  }
1710  
1711  #update-nag,
1712  .update-nag {
1713      display: inline-block;
1714      line-height: 1.4;
1715      padding: 11px 15px;
1716      font-size: 14px;
1717      margin: 25px 20px 0 2px;
1718  }
1719  
1720  ul#dismissed-updates {
1721      display: none;
1722  }
1723  
1724  #dismissed-updates li > p {
1725      margin-top: 0;
1726  }
1727  
1728  #dismiss,
1729  #undismiss {
1730      margin-left: 0.5em;
1731  }
1732  
1733  form.upgrade {
1734      margin-top: 8px;
1735  }
1736  
1737  form.upgrade .hint {
1738      font-style: italic;
1739      font-size: 85%;
1740      margin: -0.5em 0 2em;
1741  }
1742  
1743  .update-php .spinner {
1744      float: none;
1745      margin: -4px 0;
1746  }
1747  
1748  h2.wp-current-version {
1749      margin-bottom: .3em;
1750  }
1751  
1752  p.update-last-checked {
1753      margin-top: 0;
1754  }
1755  
1756  p.auto-update-status {
1757      margin-top: 2em;
1758      line-height: 1.8;
1759  }
1760  
1761  #ajax-loading,
1762  .ajax-loading,
1763  .ajax-feedback,
1764  .imgedit-wait-spin,
1765  .list-ajax-loading { /* deprecated */
1766      visibility: hidden;
1767  }
1768  
1769  #ajax-response.alignleft {
1770      margin-left: 2em;
1771  }
1772  
1773  .button.updating-message:before,
1774  .button.updated-message:before,
1775  .button.installed:before,
1776  .button.installing:before,
1777  .button.activated-message:before,
1778  .button.activating-message:before {
1779      margin: 0 5px 0 -2px;
1780      line-height: 1.9; /* 38px (20px * 1.9) - matches button */
1781      vertical-align: top;
1782  }
1783  
1784  #plugin-information-footer .button {
1785      padding: 0 14px;
1786      line-height: 2.71428571; /* 38px */
1787      font-size: 14px;
1788      vertical-align: middle;
1789      min-height: 40px;
1790      margin-bottom: 4px;
1791  }
1792  
1793  #plugin-information-footer .button.installed:before,
1794  #plugin-information-footer .button.installing:before,
1795  #plugin-information-footer .button.updating-message:before,
1796  #plugin-information-footer .button.updated-message:before,
1797  #plugin-information-footer .button.activated-message:before,
1798  #plugin-information-footer .button.activating-message:before {
1799      margin: 0 5px 0 -2px;
1800      line-height: 1.9; /* 38px (20px * 1.9) - matches button */
1801      vertical-align: top;
1802  }
1803  
1804  #plugin-information-footer .button.update-now.updating-message:before {
1805      margin: 0 5px 0 -2px;
1806  }
1807  
1808  .button-primary.updating-message:before,
1809  .button-primary.activating-message:before {
1810      color: #fff;
1811  }
1812  
1813  .button-primary.updated-message:before,
1814  .button-primary.activated-message:before {
1815      color: #9ec2e6;
1816  }
1817  
1818  .button.updated-message,
1819  .button.activated-message {
1820      transition-property: border, background, color;
1821      transition-duration: .05s;
1822      transition-timing-function: ease-in-out;
1823  }
1824  
1825  
1826  /* @todo: this does not need its own section anymore */
1827  /*------------------------------------------------------------------------------
1828    6.0 - Admin Header
1829  ------------------------------------------------------------------------------*/
1830  #adminmenu a,
1831  #taglist a,
1832  #catlist a {
1833      text-decoration: none;
1834  }
1835  
1836  /*------------------------------------------------------------------------------
1837    6.1 - Screen Options Tabs
1838  ------------------------------------------------------------------------------*/
1839  
1840  #screen-options-wrap,
1841  #contextual-help-wrap {
1842      margin: 0;
1843      padding: 8px 20px 12px;
1844      position: relative;
1845  }
1846  
1847  #contextual-help-wrap {
1848      overflow: auto;
1849      margin-left: 0;
1850  }
1851  
1852  #screen-meta-links {
1853      float: right;
1854      margin: 0 20px 0 0;
1855  }
1856  
1857  /* screen options and help tabs revert */
1858  #screen-meta {
1859      display: none;
1860      margin: 0 20px -1px 0;
1861      position: relative;
1862      background-color: #fff;
1863      border: 1px solid #c3c4c7;
1864      border-top: none;
1865      box-shadow: 0 0 0 transparent;
1866  }
1867  
1868  #screen-options-link-wrap,
1869  #contextual-help-link-wrap {
1870      float: left;
1871      margin: 0 0 0 6px;
1872  }
1873  
1874  #screen-meta-links .screen-meta-toggle {
1875      position: relative;
1876      top: 0;
1877  }
1878  
1879  #screen-meta-links .show-settings {
1880      border: 1px solid #c3c4c7;
1881      border-top: none;
1882      height: auto;
1883      min-height: 32px; /* Compact size for header buttons */
1884      margin-bottom: 0;
1885      padding: 0 6px 0 16px;
1886      background: #fff;
1887      border-radius: 0 0 4px 4px;
1888      color: #646970;
1889      line-height: 2.30769231; /* 30px - matches compact button */
1890      box-shadow: 0 0 0 transparent;
1891      transition: box-shadow 0.1s linear;
1892  }
1893  
1894  #screen-meta-links .show-settings:hover,
1895  #screen-meta-links .show-settings:active,
1896  #screen-meta-links .show-settings:focus {
1897      color: #2c3338;
1898  }
1899  
1900  #screen-meta-links .show-settings:focus {
1901      border-color: var(--wp-admin-theme-color, #3858e9);
1902      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1903      /* Only visible in Windows High Contrast mode */
1904      outline: 2px solid transparent;
1905  }
1906  
1907  #screen-meta-links .show-settings:active {
1908      transform: none;
1909  }
1910  
1911  #screen-meta-links .show-settings:after {
1912      right: 0;
1913      content: "\f140";
1914      content: "\f140" / '';
1915      font: normal 20px/1.5 dashicons; /* line-height 1.5 = 30px to match compact button */
1916      display: inline-block;
1917      padding: 0 5px 0 0;
1918      vertical-align: top;
1919      -webkit-font-smoothing: antialiased;
1920      -moz-osx-font-smoothing: grayscale;
1921      text-decoration: none;
1922  }
1923  
1924  #screen-meta-links .screen-meta-active:after {
1925      content: "\f142";
1926      content: "\f142" / '';
1927  }
1928  
1929  /* end screen options and help tabs */
1930  
1931  .toggle-arrow {
1932      background-repeat: no-repeat;
1933      background-position: top left;
1934      background-color: transparent;
1935      height: 22px;
1936      line-height: 22px;
1937      display: block;
1938  }
1939  
1940  .toggle-arrow-active {
1941      background-position: bottom left;
1942  }
1943  
1944  #screen-options-wrap h5, /* Back-compat for old plugins */
1945  #screen-options-wrap legend,
1946  #contextual-help-wrap h5 {
1947      margin: 0;
1948      padding: 8px 0;
1949      font-size: 13px;
1950      font-weight: 600;
1951  }
1952  
1953  .metabox-prefs label {
1954      display: inline-block;
1955      padding-right: 15px;
1956      line-height: 2.35;
1957  }
1958  
1959  #number-of-columns {
1960      display: inline-block;
1961      vertical-align: middle;
1962      line-height: 30px;
1963  }
1964  
1965  .metabox-prefs input[type=checkbox] {
1966      margin-top: 0;
1967      margin-right: 6px;
1968  }
1969  
1970  .metabox-prefs label input,
1971  .metabox-prefs label input[type=checkbox] {
1972      margin: -4px 5px 0 0;
1973  }
1974  
1975  .metabox-prefs .columns-prefs label input {
1976      margin: -1px 2px 0 0;
1977  }
1978  
1979  .metabox-prefs label a {
1980      display: none;
1981  }
1982  
1983  .metabox-prefs .screen-options input,
1984  .metabox-prefs .screen-options label {
1985      margin-top: 0;
1986      margin-bottom: 0;
1987      vertical-align: middle;
1988  }
1989  
1990  .metabox-prefs .screen-options .screen-per-page {
1991      margin-right: 15px;
1992      padding-right: 0;
1993  }
1994  
1995  .metabox-prefs .screen-options label {
1996      line-height: 2.2;
1997      padding-right: 0;
1998  }
1999  
2000  .screen-options + .screen-options {
2001      margin-top: 10px;
2002  }
2003  
2004  .metabox-prefs .submit {
2005      margin-top: 1em;
2006      padding: 0;
2007  }
2008  
2009  /*------------------------------------------------------------------------------
2010    6.2 - Help Menu
2011  ------------------------------------------------------------------------------*/
2012  
2013  #contextual-help-wrap {
2014      padding: 0;
2015  }
2016  
2017  #contextual-help-columns {
2018      position: relative;
2019  }
2020  
2021  #contextual-help-back {
2022      position: absolute;
2023      top: 0;
2024      bottom: 0;
2025      left: 150px;
2026      right: 170px;
2027      border: 1px solid #c3c4c7;
2028      border-top: none;
2029      border-bottom: none;
2030      background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2031  }
2032  
2033  #contextual-help-wrap.no-sidebar #contextual-help-back {
2034      right: 0;
2035      border-right-width: 0;
2036      border-bottom-right-radius: 2px;
2037  }
2038  
2039  .contextual-help-tabs {
2040      float: left;
2041      width: 150px;
2042      margin: 0;
2043  }
2044  
2045  .contextual-help-tabs ul {
2046      margin: 1em 0;
2047  }
2048  
2049  .contextual-help-tabs li {
2050      margin-bottom: 0;
2051      list-style-type: none;
2052      border-style: solid;
2053      border-width: 0 0 0 2px;
2054      border-color: transparent;
2055  }
2056  
2057  .contextual-help-tabs a {
2058      display: block;
2059      padding: 5px 5px 5px 12px;
2060      line-height: 1.4;
2061      text-decoration: none;
2062      border: 1px solid transparent;
2063      border-right: none;
2064      border-left: none;
2065  }
2066  
2067  .contextual-help-tabs a:hover {
2068      color: #2c3338;
2069  }
2070  
2071  .contextual-help-tabs .active {
2072      padding: 0;
2073      margin: 0 -1px 0 0;
2074      border-left: 2px solid var(--wp-admin-theme-color);
2075      background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, white);
2076      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
2077  }
2078  
2079  .contextual-help-tabs .active a {
2080      border-color: #c3c4c7;
2081      color: #2c3338;
2082  }
2083  
2084  .contextual-help-tabs-wrap {
2085      padding: 0 20px;
2086      overflow: auto;
2087  }
2088  
2089  .help-tab-content {
2090      display: none;
2091      margin: 0 22px 12px 0;
2092      line-height: 1.6;
2093  }
2094  
2095  .help-tab-content.active {
2096      display: block;
2097  }
2098  
2099  .help-tab-content ul li {
2100      list-style-type: disc;
2101      margin-left: 18px;
2102  }
2103  
2104  .contextual-help-sidebar {
2105      width: 150px;
2106      float: right;
2107      padding: 0 8px 0 12px;
2108      overflow: auto;
2109  }
2110  
2111  /*------------------------------------------------------------------------------
2112    8.0 - Layout Blocks
2113  ------------------------------------------------------------------------------*/
2114  
2115  html.wp-toolbar {
2116      padding-top: var(--wp-admin--admin-bar--height);
2117      box-sizing: border-box;
2118      -ms-overflow-style: scrollbar; /* See ticket #48545 */
2119  }
2120  
2121  .widefat th,
2122  .widefat td {
2123      color: #50575e;
2124  }
2125  
2126  .widefat th,
2127  .widefat thead td,
2128  .widefat tfoot td {
2129      font-weight: 400;
2130  }
2131  
2132  .widefat thead tr th,
2133  .widefat thead tr td,
2134  .widefat tfoot tr th,
2135  .widefat tfoot tr td {
2136      color: #2c3338;
2137  }
2138  
2139  .widefat td p {
2140      margin: 2px 0 0.8em;
2141  }
2142  
2143  .widefat p,
2144  .widefat ol,
2145  .widefat ul {
2146      color: #2c3338;
2147  }
2148  
2149  .widefat .column-comment p {
2150      margin: 0.6em 0;
2151  }
2152  
2153  .widefat .column-comment ul {
2154      list-style: initial;
2155      margin-left: 2em;
2156  }
2157  
2158  /* Screens with postboxes */
2159  .postbox-container {
2160      float: left;
2161  }
2162  
2163  .postbox-container .meta-box-sortables {
2164      box-sizing: border-box;
2165  }
2166  
2167  #wpbody-content .metabox-holder {
2168      padding-top: 10px;
2169  }
2170  
2171  .metabox-holder .postbox-container .meta-box-sortables {
2172      /* The jQuery UI Sortables need some initial height to work properly. */
2173      min-height: 1px;
2174      position: relative;
2175  }
2176  
2177  #post-body-content {
2178      width: 100%;
2179      min-width: 463px;
2180      float: left;
2181  }
2182  
2183  #post-body.columns-2 #postbox-container-1 {
2184      float: right;
2185      margin-right: -300px;
2186      width: 280px;
2187  }
2188  
2189  #post-body.columns-2 #side-sortables {
2190      min-height: 250px;
2191  }
2192  
2193  /* one column on the dash */
2194  @media only screen and (max-width: 799px) {
2195      #wpbody-content .metabox-holder .postbox-container .empty-container {
2196          outline: none;
2197          height: 0;
2198          min-height: 0;
2199      }
2200  }
2201  
2202  .js .widget .widget-top,
2203  .js .postbox .hndle {
2204      cursor: move;
2205  }
2206  
2207  .js .widget .widget-top.is-non-sortable,
2208  .js .postbox .hndle.is-non-sortable {
2209      cursor: auto;
2210  }
2211  
2212  /* Configurable dashboard widgets "Configure" edit-box link. */
2213  .hndle a {
2214      font-size: 12px;
2215      font-weight: 400;
2216  }
2217  
2218  .postbox-header {
2219      display: flex;
2220      align-items: center;
2221      justify-content: space-between;
2222      border-bottom: 1px solid #c3c4c7;
2223  }
2224  
2225  .postbox-header .hndle {
2226      flex-grow: 1;
2227      /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
2228      display: flex;
2229      justify-content: space-between;
2230      align-items: center;
2231  }
2232  
2233  .postbox-header .handle-actions {
2234      flex-shrink: 0;
2235  }
2236  
2237  /* Post box order and toggle buttons. */
2238  .postbox .handle-order-higher,
2239  .postbox .handle-order-lower,
2240  .postbox .handlediv {
2241      width: 1.62rem;
2242      height: 1.62rem;
2243      margin: 0;
2244      padding: 0;
2245      border: 0;
2246      background: none;
2247      cursor: pointer;
2248  }
2249  
2250  .postbox .handle-order-higher,
2251  .postbox .handle-order-lower {
2252      color: #646970;
2253      width: 1.62rem;
2254  }
2255  
2256  /* Post box order buttons in the block editor meta boxes area. */
2257  .edit-post-meta-boxes-area .postbox .handle-order-higher,
2258  .edit-post-meta-boxes-area .postbox .handle-order-lower {
2259      width: 44px;
2260      height: 44px;
2261      color: #1d2327
2262  }
2263  
2264  .postbox .handle-order-higher[aria-disabled="true"],
2265  .postbox .handle-order-lower[aria-disabled="true"] {
2266      cursor: default;
2267      color: #a7aaad;
2268  }
2269  
2270  .sortable-placeholder:not(.empty-container .sortable-placeholder) {
2271      border: 1px dashed #c3c4c7;
2272      border-radius: 8px;
2273      margin-bottom: 20px;
2274  }
2275  
2276  .postbox,
2277  .stuffbox {
2278      margin-bottom: 20px;
2279      padding: 0;
2280      line-height: 1;
2281  }
2282  
2283  .postbox.closed .postbox-header {
2284      border-bottom: 0;
2285  }
2286  
2287  /* user-select is not a part of the CSS standard - may change behavior in the future */
2288  .postbox .hndle,
2289  .stuffbox .hndle {
2290      -webkit-user-select: none;
2291      user-select: none;
2292  }
2293  
2294  .postbox .inside {
2295      padding: 0 12px 12px;
2296      line-height: 1.4;
2297      font-size: 13px;
2298  }
2299  
2300  .stuffbox .inside {
2301      padding: 0;
2302      line-height: 1.4;
2303      font-size: 13px;
2304      margin-top: 0;
2305  }
2306  
2307  .postbox .inside {
2308      margin: 11px 0;
2309      position: relative;
2310  }
2311  
2312  .postbox .inside > p:last-child,
2313  .rss-widget ul li:last-child {
2314      margin-bottom: 1px !important;
2315  }
2316  
2317  .postbox.closed h3 {
2318      border: none;
2319      box-shadow: none;
2320  }
2321  
2322  .postbox table.form-table {
2323      margin-bottom: 0;
2324  }
2325  
2326  .postbox table.widefat {
2327      box-shadow: none;
2328  }
2329  
2330  .temp-border {
2331      border: 1px dotted #c3c4c7;
2332  }
2333  
2334  .columns-prefs label {
2335      padding: 0 10px 0 0;
2336  }
2337  
2338  /* @todo: what is this doing here */
2339  #dashboard_right_now .versions .b,
2340  #post-status-display,
2341  #post-visibility-display,
2342  #adminmenu .wp-submenu li.current,
2343  #adminmenu .wp-submenu li.current a,
2344  #adminmenu .wp-submenu li.current a:hover,
2345  .media-item .percent,
2346  .plugins .name,
2347  #pass-strength-result.strong,
2348  #pass-strength-result.short,
2349  #ed_reply_toolbar #ed_reply_strong,
2350  .item-controls .item-order a,
2351  .feature-filter .feature-name,
2352  #comment-status-display {
2353      font-weight: 600;
2354  }
2355  
2356  /*------------------------------------------------------------------------------
2357    21.0 - Admin Footer
2358  ------------------------------------------------------------------------------*/
2359  
2360  #wpfooter {
2361      position: absolute;
2362      bottom: 0;
2363      left: 0;
2364      right: 0;
2365      padding: 10px 20px;
2366      color: #50575e;
2367  }
2368  
2369  #wpfooter p {
2370      font-size: 13px;
2371      margin: 0;
2372      line-height: 1.55;
2373  }
2374  
2375  #footer-thankyou {
2376      font-style: italic;
2377  }
2378  
2379  /*------------------------------------------------------------------------------
2380    25.0 - Tabbed Admin Screen Interface (Experimental)
2381  ------------------------------------------------------------------------------*/
2382  
2383  .nav-tab {
2384      float: left;
2385      border: 1px solid #c3c4c7;
2386      border-bottom: none;
2387      margin-left: 0.5em; /* half the font size so set the font size properly */
2388      padding: 5px 10px;
2389      font-size: 14px;
2390      line-height: 1.71428571;
2391      font-weight: 600;
2392      background: #dcdcde;
2393      color: #50575e;
2394      text-decoration: none;
2395      white-space: nowrap;
2396  }
2397  
2398  h3 .nav-tab, /* Back-compat for pre-4.4 */
2399  .nav-tab-small .nav-tab {
2400      padding: 5px 14px;
2401      font-size: 12px;
2402      line-height: 1.33;
2403  }
2404  
2405  .nav-tab:hover,
2406  .nav-tab:focus {
2407      background-color: #fff;
2408      color: #3c434a;
2409  }
2410  
2411  .nav-tab-active,
2412  .nav-tab:focus:active {
2413      box-shadow: none;
2414  }
2415  
2416  .nav-tab-active {
2417      margin-bottom: -1px;
2418      color: #3c434a;
2419  }
2420  
2421  .nav-tab-active,
2422  .nav-tab-active:hover,
2423  .nav-tab-active:focus,
2424  .nav-tab-active:focus:active {
2425      border-bottom: 1px solid #f0f0f1;
2426      background: #f0f0f1;
2427      color: #000;
2428  }
2429  
2430  h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
2431  .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
2432  .nav-tab-wrapper {
2433      border-bottom: 1px solid #c3c4c7;
2434      margin: 0;
2435      padding-top: 9px;
2436      padding-bottom: 0;
2437      line-height: inherit;
2438  }
2439  
2440  /* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */
2441  .nav-tab-wrapper:not(.wp-clearfix):after {
2442      content: "";
2443      display: table;
2444      clear: both;
2445  }
2446  
2447  /*------------------------------------------------------------------------------
2448    26.0 - Misc
2449  ------------------------------------------------------------------------------*/
2450  
2451  .spinner {
2452      background: url(../images/spinner.gif) no-repeat;
2453      background-size: 20px 20px;
2454      display: inline-block;
2455      visibility: hidden;
2456      float: right;
2457      vertical-align: middle;
2458      opacity: 0.7;
2459      filter: alpha(opacity=70);
2460      width: 20px;
2461      height: 20px;
2462      margin: 10px 10px 0;
2463  }
2464  
2465  .spinner.is-active,
2466  .loading-content .spinner {
2467      visibility: visible;
2468  }
2469  
2470  #template > div {
2471      margin-right: 16em;
2472  }
2473  #template .notice {
2474      margin-top: 1em;
2475      margin-right: 3%;
2476  }
2477  #template .notice p {
2478      width: auto;
2479  }
2480  #template .submit .spinner {
2481      float: none;
2482      vertical-align: top;
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  }