[Summary view] [Print] [Text view]

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