[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  .response-links {
   3      display: block;
   4      margin-bottom: 1em;
   5  }
   6  
   7  .response-links a {
   8      display: block;
   9  }
  10  
  11  .response-links a.comments-edit-item-link {
  12      font-weight: 600;
  13  }
  14  
  15  .response-links a.comments-view-item-link {
  16      font-size: 12px;
  17  }
  18  
  19  .post-com-count-wrapper strong {
  20      font-weight: 400;
  21  }
  22  
  23  .comments-view-item-link {
  24      display: inline-block;
  25      clear: both;
  26  }
  27  
  28  .column-response .post-com-count-wrapper,
  29  .column-comments .post-com-count-wrapper {
  30      white-space: nowrap;
  31      word-wrap: normal;
  32  }
  33  
  34  /* comments bubble common */
  35  .column-response .post-com-count,
  36  .column-comments .post-com-count {
  37      display: inline-block;
  38      vertical-align: top;
  39  }
  40  
  41  /* comments bubble approved */
  42  .column-response .post-com-count-no-comments,
  43  .column-response .post-com-count-approved,
  44  .column-comments .post-com-count-no-comments,
  45  .column-comments .post-com-count-approved {
  46      margin-top: 5px;
  47  }
  48  
  49  .column-response .comment-count-no-comments,
  50  .column-response .comment-count-approved,
  51  .column-comments .comment-count-no-comments,
  52  .column-comments .comment-count-approved {
  53      box-sizing: border-box;
  54      display: block;
  55      padding: 0 8px;
  56      min-width: 24px;
  57      height: 2em;
  58      border-radius: 5px;
  59      background-color: #646970;
  60      color: #fff;
  61      font-size: 11px;
  62      line-height: 1.9090909;
  63      text-align: center;
  64  }
  65  
  66  .column-response .post-com-count-no-comments::after,
  67  .column-response .post-com-count-approved::after,
  68  .column-comments .post-com-count-no-comments::after,
  69  .column-comments .post-com-count-approved::after {
  70      content: "";
  71      display: block;
  72      margin-right: 8px;
  73      width: 0;
  74      height: 0;
  75      border-top: 5px solid #646970;
  76      border-left: 5px solid transparent;
  77  }
  78  
  79  .column-response a.post-com-count-approved:hover .comment-count-approved,
  80  .column-response a.post-com-count-approved:focus .comment-count-approved,
  81  .column-comments a.post-com-count-approved:hover .comment-count-approved,
  82  .column-comments a.post-com-count-approved:focus .comment-count-approved {
  83      background: #3858e9;
  84  }
  85  
  86  .column-response a.post-com-count-approved:hover::after,
  87  .column-response a.post-com-count-approved:focus::after,
  88  .column-comments a.post-com-count-approved:hover::after,
  89  .column-comments a.post-com-count-approved:focus::after {
  90      border-top-color: #3858e9;
  91  }
  92  
  93  /* @todo: consider to use a single rule for these counters and the admin menu counters. */
  94  .column-response .post-com-count-pending,
  95  .column-comments .post-com-count-pending {
  96      position: relative;
  97      right: -3px;
  98      padding: 0 5px;
  99      min-width: 7px;
 100      height: 17px;
 101      border: 2px solid #fff;
 102      border-radius: 11px;
 103      background: #d63638;
 104      color: #fff;
 105      font-size: 9px;
 106      line-height: 1.88888888;
 107      text-align: center;
 108  }
 109  
 110  .column-response .post-com-count-no-pending,
 111  .column-comments .post-com-count-no-pending {
 112      display: none;
 113  }
 114  
 115  /* comments */
 116  
 117  .commentlist li {
 118      padding: 1em 1em 0.2em;
 119      margin: 0;
 120      border-bottom: 1px solid #c3c4c7;
 121  }
 122  
 123  .commentlist li li {
 124      border-bottom: 0;
 125      padding: 0;
 126  }
 127  
 128  .commentlist p {
 129      padding: 0;
 130      margin: 0 0 0.8em;
 131  }
 132  
 133  #submitted-on,
 134  .submitted-on {
 135      color: #50575e;
 136  }
 137  
 138  /* reply to comments */
 139  #replyrow td {
 140      padding: 2px;
 141  }
 142  
 143  #replysubmit {
 144      margin: 0;
 145      padding: 5px 7px 10px;
 146      overflow: hidden;
 147  }
 148  
 149  #replysubmit .reply-submit-buttons {
 150      margin-bottom: 0;
 151  }
 152  
 153  #replysubmit .button {
 154      margin-left: 5px;
 155  }
 156  
 157  #replysubmit .spinner {
 158      float: none;
 159      margin: -4px 0 0;
 160  }
 161  
 162  #replyrow.inline-edit-row fieldset.comment-reply {
 163      font-size: inherit;
 164      line-height: inherit;
 165  }
 166  
 167  #replyrow legend {
 168      margin: 0;
 169      padding: 0.2em 5px 0;
 170      font-size: 13px;
 171      line-height: 1.4;
 172      font-weight: 600;
 173  }
 174  
 175  #replyrow.inline-edit-row label {
 176      display: inline;
 177      vertical-align: baseline;
 178      line-height: inherit;
 179  }
 180  
 181  #edithead .inside,
 182  #commentsdiv #edithead .inside {
 183      float: right;
 184      padding: 3px 5px 2px 0;
 185      margin: 0;
 186      text-align: center;
 187  }
 188  
 189  #edithead .inside input {
 190      width: 180px;
 191  }
 192  
 193  #edithead label {
 194      padding: 2px 0;
 195  }
 196  
 197  #replycontainer {
 198      padding: 5px;
 199  }
 200  
 201  #replycontent {
 202      height: 120px;
 203      box-shadow: none;
 204  }
 205  
 206  #replyerror {
 207      border-color: #dcdcde;
 208      background-color: #f6f7f7;
 209  }
 210  
 211  /* @todo: is this used? */
 212  .commentlist .avatar {
 213      vertical-align: text-top;
 214  }
 215  
 216  #the-comment-list tr.undo,
 217  #the-comment-list div.undo {
 218      background-color: #f6f7f7;
 219  }
 220  
 221  #the-comment-list .unapproved th,
 222  #the-comment-list .unapproved td {
 223      background-color: #fcf9e8;
 224  }
 225  
 226  #the-comment-list .unapproved th.check-column,
 227  #the-comment-list .unapproved td.check-column {
 228      border-right: 4px solid #d63638;
 229  }
 230  
 231  #the-comment-list .unapproved th.check-column input,
 232  #the-comment-list .unapproved td.check-column input {
 233      margin-right: 4px;
 234  }
 235  
 236  #the-comment-list .approve a {
 237      color: #007017;
 238  }
 239  
 240  #the-comment-list .unapprove a {
 241      color: #996800;
 242  }
 243  
 244  #the-comment-list th,
 245  #the-comment-list td {
 246      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 247  }
 248  
 249  #the-comment-list tr:last-child th,
 250  #the-comment-list tr:last-child td {
 251      box-shadow: none;
 252  }
 253  
 254  #the-comment-list tr.unapproved + tr.approved th,
 255  #the-comment-list tr.unapproved + tr.approved td {
 256      border-top: 1px solid rgba(0, 0, 0, 0.03);
 257  }
 258  
 259  /* table vim shortcuts */
 260  .vim-current,
 261  .vim-current th,
 262  .vim-current td {
 263      background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08) !important;
 264  }
 265  
 266  th .comment-grey-bubble {
 267      width: 16px;
 268      /* Make sure the link clickable area fills the entire table header. */
 269      position: relative;
 270      top: 2px;
 271  }
 272  
 273  th .comment-grey-bubble::before {
 274      content: "\f101";
 275      content: "\f101" / "";
 276      font: 400 20px/0.5 dashicons;
 277      display: inline-block;
 278      padding: 0;
 279      top: 4px;
 280      right: -4px;
 281      position: relative;
 282      vertical-align: top;
 283      -webkit-font-smoothing: antialiased;
 284      -moz-osx-font-smoothing: grayscale;
 285      text-decoration: none !important;
 286      color: #3c434a;
 287  }
 288  
 289  /*------------------------------------------------------------------------------
 290    10.0 - List Posts (/Pages/etc)
 291  ------------------------------------------------------------------------------*/
 292  
 293  table.fixed {
 294      table-layout: fixed;
 295  }
 296  
 297  .fixed .column-rating,
 298  .fixed .column-visible {
 299      width: 8%;
 300  }
 301  
 302  .fixed .column-posts,
 303  .fixed .column-parent,
 304  .fixed .column-links,
 305  .fixed .column-author,
 306  .fixed .column-format {
 307      width: 10%;
 308  }
 309  
 310  .fixed .column-date {
 311      width: 14%;
 312  }
 313  
 314  .column-date span[title] {
 315      -webkit-text-decoration: dotted underline;
 316      text-decoration: dotted underline;
 317  }
 318  
 319  .fixed .column-posts {
 320      width: 74px;
 321  }
 322  
 323  .fixed .column-role,
 324  .fixed .column-posts {
 325      hyphens: auto;
 326  }
 327  
 328  .fixed .column-comment .comment-author {
 329      display: none;
 330  }
 331  
 332  .fixed .column-response,
 333  .fixed .column-categories,
 334  .fixed .column-tags,
 335  .fixed .column-rel,
 336  .fixed .column-role {
 337      width: 15%;
 338  }
 339  
 340  .fixed .column-slug {
 341      width: 25%;
 342  }
 343  
 344  .fixed .column-locations {
 345      width: 35%;
 346  }
 347  
 348  .fixed .column-comments {
 349      width: 5.5em;
 350      text-align: right;
 351  }
 352  
 353  .fixed .column-comments .vers {
 354      padding-right: 3px;
 355  }
 356  
 357  th.column-title strong,
 358  th.plugin-title strong,
 359  td.column-title strong,
 360  td.plugin-title strong {
 361      display: block;
 362      margin-bottom: 0.2em;
 363      font-size: 14px;
 364  }
 365  
 366  th.column-title p,
 367  th.plugin-title p,
 368  td.column-title p,
 369  td.plugin-title p {
 370      margin: 6px 0;
 371  }
 372  
 373  .trimmed-post-excerpt {
 374      font-weight: 400;
 375  }
 376  
 377  /* Media file column */
 378  table.media .column-title .media-icon {
 379      float: right;
 380      min-height: 60px;
 381      margin: 0 0 0 9px;
 382  }
 383  
 384  table.media .column-title .media-icon img {
 385      max-width: 60px;
 386      height: auto;
 387      vertical-align: top; /* Remove descender white-space. */
 388  }
 389  
 390  table.media .column-title .has-media-icon ~ .row-actions {
 391      margin-right: 70px; /* 60px image + margin */
 392  }
 393  
 394  table.media .column-title .filename {
 395      margin-bottom: 0.2em;
 396  }
 397  
 398  /* Media Copy to clipboard row action */
 399  .media .row-actions .copy-to-clipboard-container {
 400      display: inline;
 401      position: relative;
 402  }
 403  
 404  .media .row-actions .copy-to-clipboard-container .success {
 405      position: absolute;
 406      right: 50%;
 407      transform: translate(50%, -100%);
 408      background: #000;
 409      color: #fff;
 410      border-radius: 5px;
 411      margin: 0;
 412      padding: 2px 5px;
 413  }
 414  
 415  /* @todo: pick a consistent list table selector */
 416  .wp-list-table a {
 417      transition: none;
 418  }
 419  
 420  #the-list tr:last-child td,
 421  #the-list tr:last-child th {
 422      border-bottom: none !important;
 423      box-shadow: none;
 424  }
 425  
 426  #comments-form .fixed .column-author {
 427      width: 20%;
 428  }
 429  
 430  #commentsdiv.postbox .inside {
 431      margin: 0;
 432      padding: 0;
 433  }
 434  
 435  #commentsdiv .inside .row-actions {
 436      line-height: 1.38461538;
 437  }
 438  
 439  #commentsdiv .inside .column-author {
 440      width: 25%;
 441  }
 442  
 443  #commentsdiv .column-comment p {
 444      margin: 0.6em 0;
 445      padding: 0;
 446  }
 447  
 448  #commentsdiv #replyrow td {
 449      padding: 0;
 450  }
 451  
 452  #commentsdiv p {
 453      padding: 8px 10px;
 454      margin: 0;
 455  }
 456  
 457  #commentsdiv .comments-box {
 458      border: 0 none;
 459  }
 460  
 461  #commentsdiv .comments-box thead th,
 462  #commentsdiv .comments-box thead td {
 463      background: transparent;
 464      padding: 0 7px 4px;
 465  }
 466  
 467  #commentsdiv .comments-box tr:last-child td {
 468      border-bottom: 0 none;
 469  }
 470  
 471  #commentsdiv #edithead .inside input {
 472      width: 160px;
 473  }
 474  
 475  .sorting-indicators {
 476      display: grid;
 477  }
 478  
 479  .sorting-indicator {
 480      display: block;
 481      width: 10px;
 482      height: 4px;
 483      margin-top: 4px;
 484      margin-right: 7px;
 485  }
 486  
 487  .sorting-indicator::before {
 488      font: 400 20px/1 dashicons;
 489      display: inline-block;
 490      padding: 0;
 491      top: -4px;
 492      right: -8px;
 493      line-height: 0.5;
 494      position: relative;
 495      vertical-align: top;
 496      -webkit-font-smoothing: antialiased;
 497      -moz-osx-font-smoothing: grayscale;
 498      text-decoration: none !important;
 499      color: #a7aaad;
 500  }
 501  
 502  .sorting-indicator.asc::before {
 503      content: "\f142";
 504      content: "\f142" / "";
 505  }
 506  
 507  .sorting-indicator.desc::before {
 508      content: "\f140";
 509      content: "\f140" / "";
 510  }
 511  
 512  th.sorted.desc .sorting-indicator.desc::before {
 513      color: #1d2327;
 514  }
 515  
 516  th.sorted.asc .sorting-indicator.asc::before {
 517      color: #1d2327;
 518  }
 519  
 520  th.sorted.asc a:focus .sorting-indicator.asc::before,
 521  th.sorted.asc:hover .sorting-indicator.asc::before,
 522  th.sorted.desc a:focus .sorting-indicator.desc::before,
 523  th.sorted.desc:hover .sorting-indicator.desc::before {
 524      color: #a7aaad;
 525  }
 526  
 527  th.sorted.asc a:focus .sorting-indicator.desc::before,
 528  th.sorted.asc:hover .sorting-indicator.desc::before,
 529  th.sorted.desc a:focus .sorting-indicator.asc::before,
 530  th.sorted.desc:hover .sorting-indicator.asc::before {
 531      color: #1d2327;
 532  }
 533  
 534  .wp-list-table .toggle-row {
 535      position: absolute;
 536      left: 8px;
 537      top: 10px;
 538      display: none;
 539      padding: 0;
 540      width: 40px;
 541      height: 40px;
 542      border: none;
 543      outline: none;
 544      background: transparent;
 545  }
 546  
 547  .wp-list-table .toggle-row:hover {
 548      cursor: pointer;
 549  }
 550  
 551  .wp-list-table .toggle-row:focus::before {
 552      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 553      /* Only visible in Windows High Contrast mode */
 554      outline: 2px solid transparent;
 555  }
 556  
 557  .wp-list-table .toggle-row:active {
 558      box-shadow: none;
 559  }
 560  
 561  .wp-list-table .toggle-row::before {
 562      position: absolute;
 563      top: -5px;
 564      right: 10px;
 565      border-radius: 50%;
 566      display: block;
 567      padding: 1px 0 1px 2px;
 568      color: #3c434a; /* same as table headers sort arrows */
 569      content: "\f140";
 570      content: "\f140" / "";
 571      font: 400 20px/1 dashicons;
 572      line-height: 1;
 573      -webkit-font-smoothing: antialiased;
 574      -moz-osx-font-smoothing: grayscale;
 575  }
 576  
 577  .wp-list-table .is-expanded .toggle-row::before {
 578      content: "\f142";
 579      content: "\f142" / "";
 580  }
 581  
 582  .check-column {
 583      position: relative;
 584  }
 585  
 586  .check-column label {
 587      box-sizing: border-box;
 588      width: 100%;
 589      height: 100%;
 590      display: block;
 591      position: absolute;
 592      top: 0;
 593      right: 0;
 594  }
 595  
 596  .check-column input {
 597      position: relative;
 598      z-index: 1;
 599  }
 600  
 601  .check-column .label-covers-full-cell:hover + input:not(:disabled) {
 602      box-shadow: 0 0 0 1px #2271b1;
 603  }
 604  
 605  .check-column label:hover,
 606  .check-column input:hover + label {
 607      background: rgba(0, 0, 0, 0.05);
 608  }
 609  
 610  .locked-indicator {
 611      display: none;
 612      margin-right: 6px;
 613      height: 20px;
 614      width: 16px;
 615  }
 616  
 617  .locked-indicator-icon::before {
 618      color: #8c8f94;
 619      content: "\f160";
 620      content: "\f160" / "";
 621      display: inline-block;
 622      font: 400 20px/1 dashicons;
 623      vertical-align: middle;
 624      -webkit-font-smoothing: antialiased;
 625      -moz-osx-font-smoothing: grayscale;
 626  }
 627  
 628  .locked-info {
 629      display: none;
 630      margin-top: 4px;
 631  }
 632  
 633  .locked-text {
 634      vertical-align: top;
 635  }
 636  
 637  .wp-locked .locked-indicator,
 638  .wp-locked .locked-info {
 639      display: block;
 640  }
 641  
 642  tr.wp-locked .check-column label,
 643  tr.wp-locked .check-column input[type="checkbox"],
 644  tr.wp-locked .row-actions .inline,
 645  tr.wp-locked .row-actions .trash {
 646      display: none;
 647  }
 648  
 649  #menu-locations-wrap .widefat {
 650      width: 60%;
 651  }
 652  
 653  .widefat th.sortable,
 654  .widefat th.sorted {
 655      padding: 0;
 656  }
 657  
 658  th.sortable a,
 659  th.sorted a {
 660      display: block;
 661      overflow: hidden;
 662      padding: 8px;
 663  }
 664  
 665  th.sortable a:focus,
 666  th.sorted a:focus {
 667      border-radius: 2px;
 668      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 669      /* Only visible in Windows High Contrast mode */
 670      outline: 2px solid transparent;
 671  }
 672  
 673  th.sortable a span,
 674  th.sorted a span {
 675      float: right;
 676      cursor: pointer;
 677  }
 678  
 679  .tablenav-pages .current-page {
 680      vertical-align: top;
 681      margin: 0 0 0 2px;
 682      font-size: 13px;
 683      text-align: center;
 684      min-height: 32px;
 685      padding: 0 8px;
 686  }
 687  
 688  .tablenav .total-pages {
 689      margin-left: 2px;
 690  }
 691  
 692  .tablenav #table-paging {
 693      margin-right: 2px;
 694  }
 695  
 696  .tablenav {
 697      clear: both;
 698      height: 32px;
 699      margin: 6px 0 4px;
 700      vertical-align: middle;
 701  }
 702  
 703  .tablenav.themes {
 704      max-width: 98%;
 705  }
 706  
 707  .tablenav .tablenav-pages {
 708      float: left;
 709      margin: 0 0 9px;
 710  }
 711  
 712  .tablenav .no-pages,
 713  .tablenav .one-page .pagination-links {
 714      display: none;
 715  }
 716  
 717  .tablenav .tablenav-pages .button,
 718  .tablenav .tablenav-pages .tablenav-pages-navspan {
 719      display: inline-block;
 720      vertical-align: baseline;
 721      min-width: 32px;
 722      min-height: 32px;
 723      margin: 0;
 724      padding: 0 4px;
 725      font-size: 16px;
 726      line-height: 1.875; /* 30px for 32px height */
 727      text-align: center;
 728  }
 729  
 730  .tablenav .displaying-num {
 731      margin-left: 7px;
 732  }
 733  
 734  .tablenav .one-page .displaying-num {
 735      display: inline-block;
 736      margin: 5px 0;
 737  }
 738  
 739  .tablenav .actions {
 740      padding: 0 0 0 8px;
 741  }
 742  
 743  .wp-filter .actions {
 744      display: inline-block;
 745      vertical-align: middle;
 746  }
 747  
 748  .tablenav .delete {
 749      margin-left: 20px;
 750  }
 751  
 752  /* This view-switcher is still used on multisite. */
 753  .tablenav .view-switch {
 754      float: left;
 755      margin: 0 5px;
 756      padding-top: 3px;
 757  }
 758  
 759  .wp-filter .view-switch {
 760      display: inline-block;
 761      vertical-align: middle;
 762      padding: 12px 0;
 763      margin: 0 2px 0 8px;
 764  }
 765  
 766  .media-toolbar.wp-filter .view-switch {
 767      margin: 0 2px 0 12px;
 768  }
 769  
 770  .view-switch a {
 771      float: right;
 772      width: 28px;
 773      height: 28px;
 774      text-align: center;
 775      line-height: 1.84615384;
 776      text-decoration: none;
 777      /* This border is needed for the focus style, which will change the border color. */
 778      border: 1px solid transparent;
 779  }
 780  
 781  .view-switch a::before {
 782      color: #757575;
 783      display: inline-block;
 784      font: 400 20px/1 dashicons;
 785      vertical-align: middle;
 786      -webkit-font-smoothing: antialiased;
 787      -moz-osx-font-smoothing: grayscale;
 788  }
 789  
 790  .view-switch a:focus {
 791      /* This focus style already inherits box-shadow and outline from the regular links focus style. */
 792      border-color: var(--wp-admin-theme-color, #3858e9);
 793  }
 794  
 795  .view-switch a:hover::before,
 796  .view-switch a:focus::before {
 797      color: #1e1e1e;
 798  }
 799  
 800  .view-switch a.current::before {
 801      color: #2271b1;
 802  }
 803  
 804  .view-switch .view-list::before {
 805      content: "\f163";
 806      content: "\f163" / "";
 807  }
 808  
 809  .view-switch .view-excerpt::before {
 810      content: "\f164";
 811      content: "\f164" / "";
 812  }
 813  
 814  .view-switch .view-grid::before {
 815      content: "\f509";
 816      content: "\f509" / "";
 817  }
 818  
 819  .filter {
 820      float: right;
 821      margin: -5px 10px 0 0;
 822  }
 823  
 824  .filter .subsubsub {
 825      margin-right: -10px;
 826      margin-top: 13px;
 827  }
 828  
 829  .screen-per-page {
 830      width: 4em;
 831  }
 832  
 833  #posts-filter .wp-filter {
 834      margin-bottom: 0;
 835  }
 836  
 837  #posts-filter fieldset {
 838      float: right;
 839      margin: 0 0 1em 1.5ex;
 840      padding: 0;
 841  }
 842  
 843  #posts-filter fieldset legend {
 844      padding: 0 1px 0.2em 0;
 845  }
 846  
 847  p.pagenav {
 848      margin: 0;
 849      display: inline;
 850  }
 851  
 852  .pagenav span {
 853      font-weight: 600;
 854      margin: 0 6px;
 855  }
 856  
 857  .row-title {
 858      font-size: 14px !important;
 859      font-weight: 600;
 860  }
 861  
 862  .column-comment .comment-author {
 863      margin-bottom: 0.6em;
 864  }
 865  
 866  .column-author img,
 867  .column-username img,
 868  .column-comment .comment-author img {
 869      float: right;
 870      margin-left: 10px;
 871      margin-top: 1px;
 872  }
 873  
 874  .row-actions {
 875      color: #646970;
 876      font-size: 13px;
 877      padding: 2px 0 0;
 878      position: relative;
 879      right: -9999em;
 880  }
 881  
 882  /* ticket #34150 */
 883  .rtl .row-actions a {
 884      display: inline-block;
 885  }
 886  
 887  /* stylelint-disable selector-class-pattern -- These class selectors use a single underscore but cannot be changed because of backward compatibility reasons. */
 888  .row-actions .network_only,
 889  .row-actions .network_active {
 890      color: #000;
 891  }
 892  /* stylelint-enable */
 893  
 894  .no-js .row-actions,
 895  tr:hover .row-actions,
 896  .mobile .row-actions,
 897  .row-actions.visible,
 898  .comment-item:hover .row-actions {
 899      position: static;
 900  }
 901  
 902  /* deprecated */
 903  .row-actions-visible {
 904      padding: 2px 0 0;
 905  }
 906  
 907  /*------------------------------------------------------------------------------
 908    10.1 - Inline Editing
 909  ------------------------------------------------------------------------------*/
 910  
 911  /*
 912  .quick-edit* is for Quick Edit
 913  .bulk-edit* is for Bulk Edit
 914  .inline-edit* is for everything
 915  */
 916  
 917  /*    Layout */
 918  
 919  #wpbody-content .inline-edit-row fieldset {
 920      float: right;
 921      margin: 0;
 922      padding: 0 0 0 12px;
 923      width: 100%;
 924      box-sizing: border-box;
 925  }
 926  
 927  #wpbody-content .inline-edit-row td fieldset:last-of-type {
 928      padding-left: 0;
 929  }
 930  
 931  tr.inline-edit-row td {
 932      padding: 0;
 933      /* Prevents the focus style on .inline-edit-wrapper from being cut-off */
 934      position: relative;
 935  }
 936  
 937  .inline-edit-wrapper {
 938      display: flow-root;
 939      padding: 0 12px;
 940      border: 1px solid transparent;
 941      border-radius: 4px;
 942  }
 943  
 944  .inline-edit-wrapper:focus {
 945      border-color: var(--wp-admin-theme-color, #3858e9);
 946      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 947      /* Only visible in Windows High Contrast mode */
 948      outline: 2px solid transparent;
 949  }
 950  
 951  #wpbody-content .quick-edit-row-post .inline-edit-col-left {
 952      width: 40%;
 953  }
 954  
 955  #wpbody-content .quick-edit-row-post .inline-edit-col-right {
 956      width: 39%;
 957  }
 958  
 959  #wpbody-content .inline-edit-row-post .inline-edit-col-center {
 960      width: 20%;
 961  }
 962  
 963  #wpbody-content .quick-edit-row-page .inline-edit-col-left {
 964      width: 50%;
 965  }
 966  
 967  #wpbody-content .quick-edit-row-page .inline-edit-col-right,
 968  #wpbody-content .bulk-edit-row-post .inline-edit-col-right {
 969      width: 50%;
 970  }
 971  
 972  #wpbody-content .bulk-edit-row .inline-edit-col-left {
 973      width: 30%;
 974  }
 975  
 976  #wpbody-content .bulk-edit-row-page .inline-edit-col-right {
 977      width: 69%;
 978  }
 979  
 980  #wpbody-content .bulk-edit-row .inline-edit-col-bottom {
 981      float: left;
 982      width: 69%;
 983  }
 984  
 985  #wpbody-content .inline-edit-row-page .inline-edit-col-right {
 986      margin-top: 27px;
 987  }
 988  
 989  .inline-edit-row fieldset .inline-edit-group {
 990      clear: both;
 991      line-height: 2.5;
 992  }
 993  
 994  .inline-edit-row .submit {
 995      display: flex;
 996      flex-wrap: wrap;
 997      align-items: center;
 998      clear: both;
 999      margin: 0;
1000      padding: 0.5em 0 1em;
1001  }
1002  
1003  .inline-edit-save.submit .button {
1004      margin-left: 8px;
1005  }
1006  
1007  .inline-edit-save .spinner {
1008      float: none;
1009      margin: 0;
1010  }
1011  
1012  .inline-edit-row .notice-error {
1013      box-sizing: border-box;
1014      min-width: 100%;
1015      margin-top: 1em;
1016  }
1017  
1018  .inline-edit-row .notice-error .error {
1019      margin: 0.5em 0;
1020      padding: 2px;
1021  }
1022  
1023  /*    Positioning */
1024  
1025  /* Needs higher specificity for the padding */
1026  #the-list .inline-edit-row .inline-edit-legend {
1027      margin: 0;
1028      padding: 0.2em 0;
1029      line-height: 2.5;
1030      font-weight: 600;
1031  }
1032  
1033  .inline-edit-row fieldset span.title,
1034  .inline-edit-row fieldset span.checkbox-title {
1035      margin: 0;
1036      padding: 0;
1037  }
1038  
1039  .inline-edit-row fieldset label,
1040  .inline-edit-row fieldset span.inline-edit-categories-label {
1041      display: block;
1042      margin: 0.2em 0;
1043      line-height: 2.5;
1044  }
1045  
1046  .inline-edit-row fieldset.inline-edit-date label {
1047      display: inline-block;
1048      margin: 0;
1049      vertical-align: baseline;
1050      line-height: 2;
1051  }
1052  
1053  .inline-edit-row fieldset label.inline-edit-tags {
1054      margin-top: 0;
1055  }
1056  
1057  .inline-edit-row fieldset label.inline-edit-tags span.title {
1058      margin: 0.2em 0;
1059      width: auto;
1060  }
1061  
1062  .inline-edit-row fieldset label span.title,
1063  .inline-edit-row fieldset.inline-edit-date legend {
1064      display: block;
1065      float: right;
1066      width: 6em;
1067      line-height: 2.5;
1068  }
1069  
1070  #posts-filter fieldset.inline-edit-date legend {
1071      padding: 0;
1072  }
1073  
1074  .inline-edit-row fieldset label span.input-text-wrap,
1075  .inline-edit-row fieldset .timestamp-wrap {
1076      display: block;
1077      margin-right: 6em;
1078  }
1079  
1080  .quick-edit-row-post fieldset.inline-edit-col-right label span.title {
1081      width: auto;
1082      padding-left: 0.5em;
1083  }
1084  
1085  .inline-edit-row .inline-edit-or {
1086      margin: 0.2em 0 0.2em 6px;
1087      line-height: 2.5;
1088  }
1089  
1090  .inline-edit-row .input-text-wrap input[type="text"] {
1091      width: 100%;
1092  }
1093  
1094  .inline-edit-row fieldset label input[type="checkbox"] {
1095      vertical-align: middle;
1096  }
1097  
1098  .inline-edit-row fieldset label textarea {
1099      width: 100%;
1100      height: 4em;
1101      vertical-align: top;
1102  }
1103  
1104  .inline-edit-row select,
1105  .inline-edit-row input:where(:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"])) {
1106      min-height: 32px;
1107      padding: 0 8px 0 8px;
1108  }
1109  
1110  .inline-edit-row select {
1111      line-height: 2.14285714; /* 30px for 32px height with 14px font */
1112      padding-left: 24px;
1113  }
1114  
1115  #wpbody-content .bulk-edit-row fieldset .inline-edit-group label {
1116      max-width: 50%;
1117  }
1118  
1119  #wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child {
1120      margin-left: 0.5em;
1121  }
1122  
1123  .inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input {
1124      width: 6em;
1125  }
1126  
1127  /*    Styling */
1128  .inline-edit-row .inline-edit-legend {
1129      text-transform: uppercase;
1130  }
1131  
1132  /*    Specific Elements */
1133  .inline-edit-row fieldset .inline-edit-date {
1134      float: right;
1135  }
1136  
1137  .inline-edit-row fieldset input[name="jj"],
1138  .inline-edit-row fieldset input[name="hh"],
1139  .inline-edit-row fieldset input[name="mn"],
1140  .inline-edit-row fieldset input[name="aa"] {
1141      vertical-align: middle;
1142      text-align: center;
1143      padding: 0 4px;
1144  }
1145  
1146  .inline-edit-row fieldset label input.inline-edit-password-input {
1147      width: 8em;
1148  }
1149  
1150  #bulk-titles-list,
1151  #bulk-titles-list li,
1152  .inline-edit-row fieldset ul.cat-checklist li,
1153  .inline-edit-row fieldset ul.cat-checklist input {
1154      margin: 0;
1155      position: relative; /* RTL fix, #WP27629 */
1156  }
1157  
1158  .inline-edit-row fieldset ul.cat-checklist input {
1159      margin-top: -1px;
1160      margin-right: 3px;
1161  }
1162  
1163  .inline-edit-row fieldset label input.inline-edit-menu-order-input {
1164      width: 3em;
1165  }
1166  
1167  .inline-edit-row fieldset label input.inline-edit-slug-input {
1168      width: 75%;
1169  }
1170  
1171  .inline-edit-row select[name="post_parent"],
1172  .inline-edit-row select[name="page_template"] {
1173      max-width: 80%;
1174  }
1175  
1176  .quick-edit-row-post fieldset label.inline-edit-status {
1177      float: right;
1178  }
1179  
1180  #bulk-titles,
1181  ul.cat-checklist {
1182      height: 14em;
1183      border: 1px solid #ddd;
1184      margin: 0 0 5px;
1185      padding: 0.2em 5px;
1186      overflow-y: scroll;
1187  }
1188  
1189  ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
1190      content: "";
1191      border-top: 2px solid #808080;
1192      width: 65%;
1193      height: 2px;
1194      position: absolute;
1195      top: calc(50% + 1px);
1196      right: 50%;
1197      transform: translate(50%, -50%);
1198  }
1199  
1200  #bulk-titles .ntdelbutton,
1201  #bulk-titles .ntdeltitle,
1202  .inline-edit-row fieldset ul.cat-checklist label {
1203      display: inline-block;
1204      margin: 0;
1205      padding: 3px 0;
1206      line-height: 1.5384;
1207      vertical-align: top;
1208  }
1209  
1210  #bulk-titles .ntdelitem {
1211      padding-right: 23px;
1212  }
1213  
1214  #bulk-titles .ntdelbutton {
1215      width: 26px;
1216      height: 26px;
1217      margin: 0 -26px 0 0;
1218      text-align: center;
1219      border-radius: 3px;
1220  }
1221  
1222  #bulk-titles .ntdelbutton::before {
1223      display: inline-block;
1224      vertical-align: top;
1225  }
1226  
1227  #bulk-titles .ntdelbutton:focus {
1228      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1229      /* Only visible in Windows High Contrast mode */
1230      outline: 2px solid transparent;
1231      /* Reset inherited offset from Gutenberg */
1232      outline-offset: 0;
1233  }
1234  
1235  /*------------------------------------------------------------------------------
1236    17.0 - Plugins
1237  ------------------------------------------------------------------------------*/
1238  
1239  .plugins tbody th.check-column,
1240  .plugins tbody td.check-column,
1241  .plugins tbody {
1242      padding: 8px 2px 0 0;
1243  }
1244  
1245  .plugins tbody th.check-column input[type="checkbox"],
1246  .plugins tbody td.check-column input[type="checkbox"] {
1247      margin-top: 4px;
1248  }
1249  
1250  .updates-table .plugin-title p {
1251      margin-top: 0;
1252  }
1253  
1254  .plugins thead td.check-column,
1255  .plugins tfoot td.check-column,
1256  .plugins .inactive th.check-column,
1257  .plugins .inactive td.check-column {
1258      padding-right: 6px;
1259  }
1260  
1261  .plugins,
1262  .plugins th,
1263  .plugins td {
1264      color: #000;
1265  }
1266  
1267  .plugins tr {
1268      background: #fff;
1269  }
1270  
1271  .plugins p {
1272      margin: 0 4px;
1273      padding: 0;
1274  }
1275  
1276  .plugins .desc p {
1277      margin: 0 0 8px;
1278  }
1279  
1280  .plugins td.desc {
1281      line-height: 1.5;
1282  }
1283  
1284  .plugins .desc ul,
1285  .plugins .desc ol {
1286      margin: 0 2em 0 0;
1287  }
1288  
1289  .plugins .desc ul {
1290      list-style-type: disc;
1291  }
1292  
1293  .plugins .inactive td,
1294  .plugins .inactive th,
1295  .plugins .active td,
1296  .plugins .active th {
1297      padding: 10px 9px;
1298  }
1299  
1300  .plugins .active td,
1301  .plugins .active th {
1302      background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1303  }
1304  
1305  .plugins .update th,
1306  .plugins .update td {
1307      border-bottom: 0;
1308  }
1309  
1310  .plugins .inactive td,
1311  .plugins .inactive th,
1312  .plugins .active td,
1313  .plugins .active th,
1314  .plugin-install #the-list td,
1315  .upgrade .plugins td,
1316  .upgrade .plugins th {
1317      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1318  }
1319  
1320  .plugins tr.active.plugin-update-tr + tr.inactive th,
1321  .plugins tr.active.plugin-update-tr + tr.inactive td,
1322  .plugins tr.active + tr.inactive th,
1323  .plugins tr.active + tr.inactive td {
1324      border-top: 1px solid rgba(0, 0, 0, 0.03);
1325      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde;
1326  }
1327  
1328  .plugins .update td,
1329  .plugins .update th,
1330  .upgrade .plugins tr:last-of-type td,
1331  .upgrade .plugins tr:last-of-type th,
1332  .plugins tr.active + tr.inactive.update th,
1333  .plugins tr.active + tr.inactive.update td,
1334  .plugins .updated td,
1335  .plugins .updated th,
1336  .plugins tr.active + tr.inactive.updated th,
1337  .plugins tr.active + tr.inactive.updated td {
1338      box-shadow: none;
1339  }
1340  
1341  .plugins .active th.check-column,
1342  .plugins .active td.check-column,
1343  .plugin-update-tr.active td {
1344      border-right: 4px solid var(--wp-admin-theme-color);
1345  }
1346  
1347  .wp-list-table.plugins .plugin-title,
1348  .wp-list-table.plugins .theme-title {
1349      padding-left: 12px;
1350      white-space: nowrap;
1351  }
1352  
1353  .plugins .plugin-title .dashicons,
1354  .plugins .plugin-title img.plugin-icon,
1355  .plugins .plugin-title img.updates-table-screenshot {
1356      float: right;
1357      padding: 0 0 0 10px;
1358      width: 64px;
1359      height: 64px;
1360  }
1361  
1362  .plugins .plugin-title .dashicons::before {
1363      padding: 2px;
1364      background-color: #f0f0f1;
1365      box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15);
1366      font-size: 60px;
1367      color: #c3c4c7;
1368  }
1369  
1370  #update-themes-table .plugin-title img.updates-table-screenshot,
1371  #update-themes-table .plugin-title .dashicons {
1372      width: 85px;
1373  }
1374  
1375  .plugins .column-auto-updates {
1376      width: 14.2em;
1377  }
1378  
1379  .plugins .inactive .plugin-title strong {
1380      font-weight: 400;
1381  }
1382  
1383  .plugins .second,
1384  .plugins .row-actions {
1385      padding: 0 0 5px;
1386  }
1387  
1388  .plugins .row-actions {
1389      white-space: normal;
1390      min-width: 12em;
1391      font-size: 13px;
1392  }
1393  
1394  .plugins .update .second,
1395  .plugins .update .row-actions,
1396  .plugins .updated .second,
1397  .plugins .updated .row-actions {
1398      padding-bottom: 0;
1399  }
1400  
1401  .plugins-php .widefat tfoot th,
1402  .plugins-php .widefat tfoot td {
1403      border-top-style: solid;
1404      border-top-width: 1px;
1405  }
1406  
1407  .plugins .plugin-update-tr .plugin-update {
1408      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1409      overflow: hidden; /* clearfix */
1410      padding: 0;
1411  }
1412  
1413  .plugins .plugin-update-tr .notice,
1414  .plugins .plugin-update-tr div[class="update-message"] { /* back-compat for pre-4.6 */
1415      margin: 5px 40px 15px 20px;
1416  }
1417  
1418  .plugins .notice p {
1419      margin: 0.5em 0;
1420  }
1421  
1422  .plugins .plugin-description a,
1423  .plugins .plugin-update a,
1424  .updates-table .plugin-title a {
1425      text-decoration: underline;
1426  }
1427  
1428  .plugins tr.paused th.check-column,
1429  .plugins tr.paused td.check-column {
1430      border-right: 4px solid #b32d2e;
1431  }
1432  
1433  .plugins tr.paused th,
1434  .plugins tr.paused td {
1435      background-color: #f6f7f7;
1436  }
1437  
1438  .plugins tr.paused .plugin-title,
1439  .plugins .paused .dashicons-warning {
1440      color: #b32d2e;
1441  }
1442  
1443  .plugins .paused .error-display p,
1444  .plugins .paused .error-display code {
1445      font-size: 90%;
1446      color: rgba(0, 0, 0, 0.7);
1447  }
1448  
1449  .plugins .resume-link {
1450      color: #b32d2e;
1451  }
1452  
1453  .plugin-card .update-now::before {
1454      color: #d63638;
1455      content: "\f463";
1456      content: "\f463" / "";
1457      display: inline-block;
1458      font: 400 16px/1.875 dashicons; /* line-height 1.875 = 30px to match button */
1459      margin: 0 -2px 0 5px;
1460      -webkit-font-smoothing: antialiased;
1461      -moz-osx-font-smoothing: grayscale;
1462      vertical-align: top;
1463  }
1464  
1465  .plugin-card .updating-message::before {
1466      content: "\f463";
1467      content: "\f463" / "";
1468      animation: rotation 2s infinite linear;
1469  }
1470  
1471  @keyframes rotation {
1472      0% {
1473          transform: rotate(0deg);
1474      }
1475  
1476      100% {
1477          transform: rotate(-359deg);
1478      }
1479  }
1480  
1481  .plugin-card .updated-message::before {
1482      color: #68de7c;
1483      content: "\f147";
1484      content: "\f147" / "";
1485  }
1486  
1487  .plugin-card .updated-message::before,
1488  .plugin-card .updating-message::before {
1489      line-height: 1;
1490      position: relative;
1491      top: -2px;
1492      vertical-align: middle;
1493  }
1494  
1495  .plugin-install-php #the-list {
1496      display: flex;
1497      flex-wrap: wrap;
1498      gap: 16px;
1499  }
1500  
1501  .plugin-install-php .plugin-card {
1502      display: flex;
1503      flex-direction: column;
1504      justify-content: space-between;
1505  }
1506  
1507  .plugin-install-php h2 {
1508      clear: both;
1509  }
1510  
1511  .plugin-install-php h3 {
1512      margin: 2.5em 0 8px;
1513  }
1514  
1515  .plugin-install-php .wp-filter {
1516      margin-bottom: 0;
1517  }
1518  
1519  /* Plugin card table view */
1520  .plugin-group {
1521      overflow: hidden; /* clearfix */
1522      margin-top: 1.5em;
1523  }
1524  
1525  .plugin-group h3 {
1526      margin-top: 0;
1527  }
1528  
1529  .plugin-card {
1530      width: calc(50% - 8px);
1531      background-color: #fff;
1532      border: 1px solid rgba(0, 0, 0, 0.1);
1533      border-radius: 8px;
1534      box-sizing: border-box;
1535      overflow: hidden;
1536  }
1537  
1538  @media screen and (min-width: 1600px) {
1539      .plugin-card {
1540          width: calc((100% - 32px) / 3);
1541      }
1542  }
1543  
1544  @media screen and (min-width: 2300px) {
1545      .plugin-card {
1546          width: calc((100% - 48px) / 4);
1547      }
1548  }
1549  
1550  .plugin-card-top {
1551      position: relative;
1552      padding: 16px;
1553      min-height: 135px;
1554  }
1555  
1556  div.action-links,
1557  .plugin-action-buttons {
1558      margin: 0; /* Override existing margins */
1559  }
1560  
1561  .plugin-card h3 {
1562      margin: 0 0 16px 12px;
1563      font-size: 18px;
1564      line-height: 1.3;
1565  }
1566  
1567  .plugin-card .desc {
1568      margin-inline: 0;
1569  }
1570  
1571  .plugin-card .name,
1572  .plugin-card .desc > p {
1573      margin-right: 148px;
1574  }
1575  
1576  @media (min-width: 1101px) {
1577      .plugin-card .name,
1578      .plugin-card .desc > p {
1579          margin-left: 128px;
1580      }
1581  }
1582  
1583  @media (min-width: 481px) and (max-width: 781px) {
1584      .plugin-card .name,
1585      .plugin-card .desc > p {
1586          margin-left: 128px;
1587      }
1588  }
1589  
1590  .plugin-card .column-description {
1591      display: flex;
1592      flex-direction: column;
1593      justify-content: flex-start;
1594  }
1595  
1596  .plugin-card .column-description > p {
1597      margin-top: 0;
1598  }
1599  
1600  .plugin-card .column-description p:empty {
1601      display: none;
1602  }
1603  
1604  .plugin-card .notice.plugin-dependencies {
1605      margin: auto 20px 20px;
1606      padding: 15px;
1607  }
1608  
1609  .plugin-card .plugin-dependencies-explainer-text {
1610      margin-block: 0;
1611  }
1612  
1613  .plugin-card .plugin-dependency {
1614      align-items: center;
1615      display: flex;
1616      flex-wrap: wrap;
1617      margin-top: 0.5em;
1618      column-gap: 1%;
1619      row-gap: 0.5em;
1620  }
1621  
1622  .plugin-card .plugin-dependency:nth-child(2),
1623  .plugin-card .plugin-dependency:last-child {
1624      margin-top: 1em;
1625  }
1626  
1627  .plugin-card .plugin-dependency-name {
1628      flex-basis: 74%;
1629  }
1630  
1631  .plugin-card .plugin-dependency .more-details-link {
1632      margin-right: auto;
1633  }
1634  
1635  .rtl .plugin-card .plugin-dependency .more-details-link {
1636      margin-left: auto;
1637  }
1638  
1639  @media (max-width: 939px) {
1640      .plugin-card .plugin-dependency-name {
1641          flex-basis: 69%;
1642      }
1643  }
1644  
1645  .plugins #the-list .required-by,
1646  .plugins #the-list .requires {
1647      margin-top: 1em;
1648  }
1649  
1650  .plugin-card .action-links {
1651      position: absolute;
1652      top: 20px;
1653      left: 20px;
1654      width: 120px;
1655  }
1656  
1657  .plugin-action-buttons {
1658      clear: left;
1659      float: left;
1660      margin-bottom: 1em;
1661      text-align: left;
1662  }
1663  
1664  .plugin-action-buttons li {
1665      margin-bottom: 10px;
1666  }
1667  
1668  .plugin-card-bottom {
1669      clear: both;
1670      padding: 16px;
1671      background-color: #f6f7f7;
1672      border-top: 1px solid rgba(0, 0, 0, 0.1);
1673      overflow: hidden;
1674  }
1675  
1676  .plugin-card-bottom .star-rating {
1677      display: inline;
1678  }
1679  
1680  .plugin-card-update-failed .update-now {
1681      font-weight: 600;
1682  }
1683  
1684  .plugin-card-update-failed .notice-error {
1685      margin: 0;
1686      padding-right: 16px;
1687      box-shadow: 0 -1px 0 #dcdcde;
1688  }
1689  
1690  .plugin-card-update-failed .plugin-card-bottom {
1691      display: none;
1692  }
1693  
1694  .plugin-card .column-rating {
1695      line-height: 1.76923076;
1696  }
1697  
1698  .plugin-card .column-rating,
1699  .plugin-card .column-updated {
1700      margin-bottom: 4px;
1701  }
1702  
1703  .plugin-card .column-rating,
1704  .plugin-card .column-downloaded {
1705      float: right;
1706      clear: right;
1707      max-width: 180px;
1708  }
1709  
1710  .plugin-card .column-updated,
1711  .plugin-card .column-compatibility {
1712      text-align: left;
1713      float: left;
1714      clear: left;
1715      width: 65%;
1716      width: calc(100% - 180px);
1717  }
1718  
1719  .plugin-card .column-compatibility span::before {
1720      font: 400 20px/0.5 dashicons;
1721      display: inline-block;
1722      padding: 0;
1723      top: 4px;
1724      right: -2px;
1725      position: relative;
1726      vertical-align: top;
1727      -webkit-font-smoothing: antialiased;
1728      -moz-osx-font-smoothing: grayscale;
1729      text-decoration: none !important;
1730      color: #3c434a;
1731  }
1732  
1733  .plugin-card .column-compatibility .compatibility-incompatible::before {
1734      content: "\f158";
1735      content: "\f158" / "";
1736      color: #d63638;
1737  }
1738  
1739  .plugin-card .column-compatibility .compatibility-compatible::before {
1740      content: "\f147";
1741      content: "\f147" / "";
1742      color: #007017;
1743  }
1744  
1745  .plugin-card .notice {
1746      margin: 20px 20px 0;
1747  }
1748  
1749  .plugin-card .plugin-icon {
1750      position: absolute;
1751      top: 20px;
1752      right: 20px;
1753      width: 128px;
1754      height: 128px;
1755      margin: 0 0 20px 20px;
1756  }
1757  
1758  .no-plugin-results {
1759      color: #646970; /* same as no themes and no media */
1760      font-size: 18px;
1761      font-style: normal;
1762      margin: 0;
1763      padding: 100px 0 0;
1764      width: 100%;
1765      text-align: center;
1766  }
1767  
1768  /* ms */
1769  /* Background Color for Site Status */
1770  .wp-list-table .site-deleted,
1771  .wp-list-table tr.site-deleted,
1772  .wp-list-table .site-archived,
1773  .wp-list-table tr.site-archived {
1774      background: #fcf0f1;
1775  }
1776  
1777  .wp-list-table .site-spammed,
1778  .wp-list-table tr.site-spammed,
1779  .wp-list-table .site-mature,
1780  .wp-list-table tr.site-mature {
1781      background: #fcf9e8;
1782  }
1783  
1784  .sites.fixed .column-lastupdated,
1785  .sites.fixed .column-registered {
1786      width: 20%;
1787  }
1788  
1789  .sites.fixed .column-users {
1790      width: 80px;
1791  }
1792  
1793  /* =Media Queries
1794  -------------------------------------------------------------- */
1795  
1796  @media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
1797      .plugin-card .action-links {
1798          position: static;
1799          margin-right: 148px;
1800          width: auto;
1801      }
1802  
1803      .plugin-action-buttons {
1804          float: none;
1805          margin: 1em 0 0;
1806          text-align: right;
1807      }
1808  
1809      .plugin-action-buttons li {
1810          display: inline-block;
1811          vertical-align: middle;
1812      }
1813  
1814      .plugin-action-buttons li .button {
1815          margin-left: 20px;
1816      }
1817  
1818      .plugin-card h3 {
1819          margin-left: 24px;
1820      }
1821  
1822      .plugin-card .name,
1823      .plugin-card .desc {
1824          margin-left: 0;
1825      }
1826  
1827      .plugin-card .desc p:first-of-type {
1828          margin-top: 0;
1829      }
1830  }
1831  
1832  @media screen and (max-width: 782px) {
1833      /* WP List Table Options & Filters */
1834      .tablenav {
1835          height: auto;
1836      }
1837  
1838      .tablenav.top {
1839          margin: 20px 0 5px;
1840      }
1841  
1842      .tablenav.bottom {
1843          position: relative;
1844          margin-top: 15px;
1845      }
1846  
1847      .tablenav br {
1848          display: none;
1849      }
1850  
1851      .tablenav br.clear {
1852          display: block;
1853      }
1854  
1855      .tablenav.top .actions,
1856      .tablenav .view-switch {
1857          display: none;
1858      }
1859  
1860      .view-switch a {
1861          width: 36px;
1862          height: 36px;
1863          line-height: 2.53846153;
1864      }
1865  
1866      /* Pagination */
1867      .tablenav.top .displaying-num {
1868          display: none;
1869      }
1870  
1871      .tablenav.bottom .displaying-num {
1872          position: absolute;
1873          left: 0;
1874          top: 11px;
1875          margin: 0;
1876          font-size: 14px;
1877      }
1878  
1879      .tablenav .tablenav-pages {
1880          width: 100%;
1881          text-align: center;
1882          margin: 0 0 25px;
1883      }
1884  
1885      .tablenav.bottom .tablenav-pages {
1886          margin-top: 25px;
1887      }
1888  
1889      .tablenav.top .tablenav-pages.one-page {
1890          display: none;
1891      }
1892  
1893      .tablenav.bottom .actions select {
1894          margin-bottom: 5px;
1895      }
1896  
1897      .tablenav.bottom .actions.alignleft + .actions.alignleft {
1898          clear: right;
1899          margin-top: 10px;
1900      }
1901  
1902      .tablenav.bottom .tablenav-pages.one-page {
1903          margin-top: 15px;
1904          height: 0;
1905      }
1906  
1907      .tablenav-pages .pagination-links {
1908          font-size: 16px;
1909      }
1910  
1911      .tablenav .tablenav-pages .button,
1912      .tablenav .tablenav-pages .tablenav-pages-navspan {
1913          min-width: 40px;
1914          min-height: 40px;
1915          padding: 10px 8px;
1916          font-size: 18px;
1917          line-height: 1;
1918      }
1919  
1920      .tablenav-pages .pagination-links .current-page {
1921          min-width: 40px;
1922          padding: 10px 6px;
1923          font-size: 16px;
1924          line-height: 1.125;
1925      }
1926  
1927      /* WP List Table Adjustments: General */
1928      .form-wrap > p {
1929          display: none;
1930      }
1931  
1932      .wp-list-table th.column-primary ~ th,
1933      .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column),
1934      .wp-list-table tr:not(.inline-edit-row):not(.no-items) th.column-primary ~ td:not(.check-column) {
1935          display: none;
1936      }
1937  
1938      .wp-list-table tr {
1939          display: flex;
1940          flex-wrap: wrap;
1941      }
1942  
1943      .wp-list-table thead th {
1944          align-content: center;
1945      }
1946  
1947      .wp-list-table td.check-column,
1948      .wp-list-table th.check-column {
1949          flex: 0 0 2.5em;
1950          width: 2.5em;
1951      }
1952  
1953      .wp-list-table .column-primary a {
1954          text-wrap: wrap;
1955      }
1956  
1957      .wp-list-table td.column-primary,
1958      .wp-list-table th.column-primary {
1959          flex: 1 1 0;
1960      }
1961  
1962      .wp-list-table tr td:nth-child(n+3) {
1963          flex: 0 1 100%;
1964      }
1965  
1966      .plugins tr.active.plugin-update-tr + tr.inactive th,
1967      .plugins tr.active.plugin-update-tr + tr.inactive td,
1968      .plugins tr.active + tr.inactive th,
1969      .plugins tr.active + tr.inactive td,
1970      .plugins .inactive td,
1971      .plugins .inactive th,
1972      .plugins .active td,
1973      .plugins .active th,
1974      .plugin-install #the-list td,
1975      .upgrade .plugins td,
1976      .upgrade .plugins th {
1977          box-shadow: none;
1978      }
1979  
1980      .plugins tr {
1981          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1982      }
1983  
1984      .plugins .active th.check-column,
1985      .plugins .active td.check-column,
1986      .plugin-update-tr.active td,
1987      .plugins tr.paused td.check-column {
1988          border-right: 4px solid transparent;
1989      }
1990  
1991      .plugins .active th.check-column input,
1992      .plugins .active td.check-column input {
1993          margin-right: 0;
1994      }
1995  
1996      .plugins tr.active,
1997      .plugin-update-tr.active {
1998          border-right: 4px solid var(--wp-admin-theme-color);
1999      }
2000  
2001      .plugins tr.active.paused {
2002          border-right: 4px solid #b32d2e;
2003      }
2004  
2005      .wp-list-table .column-primary .toggle-row {
2006          display: block;
2007      }
2008  
2009      .wp-list-table tbody th,
2010      .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
2011          position: relative;
2012      }
2013  
2014      .wp-list-table td.column-primary,
2015      .wp-list-table tbody th.column-primary {
2016          padding-left: 50px; /* space for toggle button */
2017      }
2018  
2019      .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column),
2020      .wp-list-table tr:not(.inline-edit-row):not(.no-items) th.column-primary ~ td:not(.check-column) {
2021          padding: 3px 35% 3px 8px;
2022      }
2023  
2024      .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before {
2025          position: absolute;
2026          right: 10px; /* match padding of regular table cell */
2027          display: block;
2028          overflow: hidden;
2029          width: 32%; /* leave a little space for a gutter */
2030          content: attr(data-colname);
2031          white-space: nowrap;
2032          text-overflow: ellipsis;
2033      }
2034  
2035      .wp-list-table .is-expanded th:not(.hidden),
2036      .wp-list-table .is-expanded td:not(.hidden) {
2037          display: block !important;
2038          overflow: hidden; /* clearfix */
2039      }
2040  
2041      /* Special cases */
2042      .widefat .num,
2043      .column-posts {
2044          text-align: right;
2045      }
2046  
2047      #comments-form .fixed .column-author,
2048      #commentsdiv .fixed .column-author {
2049          display: none !important;
2050      }
2051  
2052      .fixed .column-comment .comment-author {
2053          display: block;
2054      }
2055  
2056      /* Comment author hidden via Screen Options */
2057      .fixed .column-author.hidden ~ .column-comment .comment-author {
2058          display: none;
2059      }
2060  
2061      #the-comment-list .is-expanded td {
2062          box-shadow: none;
2063      }
2064  
2065      #the-comment-list .is-expanded td:last-child {
2066          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2067      }
2068  
2069      /* Show comment bubble as text instead */
2070      .post-com-count .screen-reader-text {
2071          position: static;
2072          clip-path: none;
2073          width: auto;
2074          height: auto;
2075          margin: 0;
2076      }
2077  
2078      .column-response .post-com-count-no-comments::after,
2079      .column-response .post-com-count-approved::after,
2080      .column-comments .post-com-count-no-comments::after,
2081      .column-comments .post-com-count-approved::after {
2082          content: none;
2083      }
2084  
2085      .column-response .post-com-count [aria-hidden="true"],
2086      .column-comments .post-com-count [aria-hidden="true"] {
2087          display: none;
2088      }
2089  
2090      .column-response .post-com-count-wrapper,
2091      .column-comments .post-com-count-wrapper {
2092          white-space: normal;
2093      }
2094  
2095      .column-response .post-com-count-wrapper > a,
2096      .column-comments .post-com-count-wrapper > a {
2097          display: block;
2098      }
2099  
2100      .column-response .post-com-count-no-comments,
2101      .column-response .post-com-count-approved,
2102      .column-comments .post-com-count-no-comments,
2103      .column-comments .post-com-count-approved {
2104          margin-top: 0;
2105          margin-left: 0.5em;
2106      }
2107  
2108      .column-response .post-com-count-pending,
2109      .column-comments .post-com-count-pending {
2110          position: static;
2111          height: auto;
2112          min-width: 0;
2113          padding: 0;
2114          border: none;
2115          border-radius: 0;
2116          background: none;
2117          color: #b32d2e;
2118          font-size: inherit;
2119          line-height: inherit;
2120          text-align: right;
2121      }
2122  
2123      .column-response .post-com-count-pending:hover,
2124      .column-comments .post-com-count-pending:hover {
2125          color: #d63638;
2126      }
2127  
2128      .widefat thead td.check-column,
2129      .widefat tfoot td.check-column {
2130          padding-top: 10px;
2131      }
2132  
2133      .row-actions {
2134          margin-left: -8px;
2135          padding-top: 4px;
2136      }
2137  
2138      /* Make row actions more easy to select on mobile */
2139      body:not(.plugins-php) .row-actions {
2140          display: flex;
2141          flex-wrap: wrap;
2142          gap: 8px;
2143          color: transparent;
2144      }
2145  
2146      .row-actions span {
2147          font-size: 0;
2148      }
2149  
2150      .row-actions span a,
2151      .row-actions span .button-link {
2152          display: inline-block;
2153          padding: 4px 0 4px 16px;
2154          font-size: 13px;
2155          line-height: 1.5;
2156      }
2157  
2158      .row-actions span.approve::before,
2159      .row-actions span.unapprove::before {
2160          content: "| ";
2161      }
2162  
2163      /* Quick Edit and Bulk Edit */
2164      #wpbody-content .quick-edit-row-post .inline-edit-col-left,
2165      #wpbody-content .quick-edit-row-post .inline-edit-col-right,
2166      #wpbody-content .inline-edit-row-post .inline-edit-col-center,
2167      #wpbody-content .quick-edit-row-page .inline-edit-col-left,
2168      #wpbody-content .quick-edit-row-page .inline-edit-col-right,
2169      #wpbody-content .bulk-edit-row-post .inline-edit-col-right,
2170      #wpbody-content .bulk-edit-row .inline-edit-col-left,
2171      #wpbody-content .bulk-edit-row-page .inline-edit-col-right,
2172      #wpbody-content .bulk-edit-row .inline-edit-col-bottom {
2173          float: none;
2174          width: 100%;
2175          padding: 0;
2176      }
2177  
2178      #the-list .inline-edit-row .inline-edit-legend,
2179      .inline-edit-row span.title {
2180          font-size: 16px;
2181      }
2182  
2183      .inline-edit-row p.howto {
2184          font-size: 14px;
2185      }
2186  
2187      #wpbody-content .inline-edit-row-page .inline-edit-col-right {
2188          margin-top: 0;
2189      }
2190  
2191      #wpbody-content .quick-edit-row fieldset .inline-edit-col label,
2192      #wpbody-content .quick-edit-row fieldset .inline-edit-group label,
2193      #wpbody-content .bulk-edit-row fieldset .inline-edit-col label,
2194      #wpbody-content .bulk-edit-row fieldset .inline-edit-group label {
2195          max-width: none;
2196          float: none;
2197          margin-bottom: 5px;
2198      }
2199  
2200      #wpbody .bulk-edit-row fieldset select {
2201          display: block;
2202          width: 100%;
2203          max-width: none;
2204          box-sizing: border-box;
2205      }
2206  
2207      .inline-edit-row select,
2208      .inline-edit-row input:where(:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"])) {
2209          min-height: 40px;
2210      }
2211  
2212      .inline-edit-row fieldset input[name="jj"],
2213      .inline-edit-row fieldset input[name="hh"],
2214      .inline-edit-row fieldset input[name="mn"],
2215      .inline-edit-row fieldset input[name="aa"] {
2216          font-size: 16px;
2217          line-height: 2;
2218          padding: 3px 4px;
2219      }
2220  
2221      #bulk-titles .ntdelbutton,
2222      #bulk-titles .ntdeltitle,
2223      .inline-edit-row fieldset ul.cat-checklist label {
2224          padding: 6px 0;
2225          font-size: 16px;
2226          line-height: 1.75;
2227      }
2228  
2229      #bulk-titles .ntdelitem {
2230          padding-right: 37px;
2231      }
2232  
2233      #bulk-titles .ntdelbutton {
2234          width: 40px;
2235          height: 40px;
2236          margin: 0 -40px 0 0;
2237          overflow: hidden;
2238      }
2239  
2240      #bulk-titles .ntdelbutton::before {
2241          font-size: 20px;
2242          line-height: 1.4;
2243      }
2244  
2245      .inline-edit-row fieldset label span.title,
2246      .inline-edit-row fieldset.inline-edit-date legend {
2247          float: none;
2248      }
2249  
2250      .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags {
2251          padding: 0;
2252      }
2253  
2254      .inline-edit-row fieldset label span.input-text-wrap,
2255      .inline-edit-row fieldset .timestamp-wrap {
2256          margin-right: 0;
2257      }
2258  
2259      .inline-edit-row .inline-edit-or {
2260          margin: 0 0 0 6px;
2261      }
2262  
2263      #edithead .inside,
2264      #commentsdiv #edithead .inside {
2265          float: none;
2266          text-align: right;
2267          padding: 3px 5px;
2268      }
2269  
2270      #commentsdiv #edithead .inside input,
2271      #edithead .inside input {
2272          width: 100%;
2273      }
2274  
2275      #edithead label {
2276          display: block;
2277      }
2278  
2279      /* Updates */
2280      #wpbody-content .updates-table .plugin-title {
2281          width: auto;
2282          white-space: normal;
2283      }
2284  
2285      /* Links */
2286      .link-manager-php #posts-filter {
2287          margin-top: 25px;
2288      }
2289  
2290      .link-manager-php .tablenav.bottom {
2291          overflow: hidden;
2292      }
2293  
2294      /* List tables that don't toggle rows */
2295      .comments-box .toggle-row,
2296      .wp-list-table.plugins .toggle-row {
2297          display: none;
2298      }
2299  
2300      /* Plugin/Theme Management */
2301      #wpbody-content .wp-list-table.plugins tbody td {
2302          display: block;
2303          width: auto;
2304          padding: 10px 9px; /* reset from other list tables that have a label at this width */
2305      }
2306  
2307      #wpbody-content .wp-list-table.plugins .plugin-deleted-tr td,
2308      #wpbody-content .wp-list-table.plugins .no-items td {
2309          display: table-cell;
2310      }
2311  
2312      /* Plugin description hidden via Screen Options */
2313      #wpbody-content .wp-list-table.plugins .desc.hidden {
2314          display: none;
2315      }
2316  
2317      #wpbody-content .wp-list-table.plugins .column-description {
2318          padding-top: 2px;
2319      }
2320  
2321      #wpbody-content .wp-list-table.plugins .plugin-title,
2322      #wpbody-content .wp-list-table.plugins .theme-title {
2323          padding-left: 12px;
2324          white-space: normal;
2325      }
2326  
2327      .wp-list-table.plugins .plugin-title,
2328      .wp-list-table.plugins .theme-title {
2329          padding-top: 13px;
2330          padding-bottom: 4px;
2331      }
2332  
2333      .plugins #the-list tr > td:not(:last-child),
2334      .plugins #the-list .update th,
2335      .plugins #the-list .update td,
2336      .wp-list-table.plugins #the-list .theme-title {
2337          box-shadow: none;
2338          border-top: none;
2339      }
2340  
2341      .plugins #the-list tr td {
2342          border-top: none;
2343      }
2344  
2345      .plugins tbody {
2346          padding: 1px 0 0;
2347      }
2348  
2349      .plugins tr.active + tr.inactive th.check-column,
2350      .plugins tr.active + tr.inactive td.check-column,
2351      .plugins tr.active + tr.inactive td.column-description {
2352          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2353      }
2354  
2355      .plugins tr.active + tr.inactive th.check-column,
2356      .plugins tr.active + tr.inactive td.check-column,
2357      .plugins tr.active + tr.inactive td {
2358          border-top: none;
2359      }
2360  
2361      .plugins #the-list .plugin-update-tr .plugin-update {
2362          flex: 0 1 100%;
2363          border-right: none;
2364      }
2365  
2366      .plugin-update-tr .update-message {
2367          margin-right: 0;
2368      }
2369  
2370      .plugins .plugin-update-tr .update-message {
2371          margin-right: 0;
2372      }
2373  
2374      .wp-list-table.plugins .plugin-title strong,
2375      .wp-list-table.plugins .theme-title strong {
2376          font-size: 1.4em;
2377          line-height: 1.5;
2378      }
2379  
2380      .plugins tbody th.check-column,
2381      .plugins tbody td.check-column {
2382          padding: 8px 5px 0 0;
2383      }
2384  
2385      .plugins thead td.check-column,
2386      .plugins tfoot td.check-column,
2387      .plugins .inactive th.check-column,
2388      .plugins .inactive td.check-column {
2389          padding-right: 9px;
2390      }
2391  
2392      /* Add New plugins page */
2393      table.plugin-install .column-name,
2394      table.plugin-install .column-version,
2395      table.plugin-install .column-rating,
2396      table.plugin-install .column-description {
2397          display: block;
2398          width: auto;
2399      }
2400  
2401      table.plugin-install th.column-name,
2402      table.plugin-install th.column-version,
2403      table.plugin-install th.column-rating,
2404      table.plugin-install th.column-description {
2405          display: none;
2406      }
2407  
2408      table.plugin-install td.column-name strong {
2409          font-size: 1.4em;
2410          line-height: 1.6;
2411      }
2412  
2413      table.plugin-install #the-list td {
2414          box-shadow: none;
2415      }
2416  
2417      table.plugin-install #the-list tr {
2418          display: block;
2419          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2420      }
2421  
2422      .plugin-card {
2423          margin-right: 0;
2424          margin-left: 0;
2425          width: 100%;
2426      }
2427  
2428      table.media .column-title .has-media-icon ~ .row-actions {
2429          margin-right: 0;
2430          clear: both;
2431      }
2432  }
2433  
2434  @media screen and (max-width: 480px) {
2435      .tablenav-pages .current-page {
2436          margin: 0;
2437      }
2438  
2439      .tablenav.bottom .displaying-num {
2440          position: relative;
2441          top: 0;
2442          display: block;
2443          text-align: left;
2444          padding-bottom: 0.5em;
2445      }
2446  
2447      .tablenav.bottom .tablenav-pages.one-page {
2448          height: auto;
2449      }
2450  
2451      .tablenav-pages .tablenav-paging-text {
2452          float: right;
2453          width: 100%;
2454          padding-top: 0.5em;
2455      }
2456  }