diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e1e5ee3181330..980702d31fb80 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -501,7 +501,7 @@ code { border-bottom-width: 0; } -.widefat th, +.widefat tbody th, .widefat td { vertical-align: top; } @@ -520,6 +520,12 @@ code { .widefat tfoot td { text-align: left; line-height: 1.3em; +} + +.widefat th:not(tbody th), +.widefat tbody td.check-column, +.widefat thead td, +.widefat tfoot td { font-size: 14px; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 46c2002e3e3a1..3d6f455f04b88 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -353,6 +353,8 @@ table.fixed { padding-left: 3px; } +th.column-title strong, +th.plugin-title strong, td.column-title strong, td.plugin-title strong { display: block; @@ -360,6 +362,8 @@ td.plugin-title strong { font-size: 14px; } +th.column-title p, +th.plugin-title p, td.column-title p, td.plugin-title p { margin: 6px 0; @@ -1921,32 +1925,79 @@ div.action-links, display: none; } - .wp-list-table thead th.column-primary { - width: 100%; + .wp-list-table tr { + display: flex; + flex-wrap: wrap; } - /* Checkboxes need to show */ - .wp-list-table tr th.check-column, - .wp-list-table tr td.check-column { - display: table-cell; + .wp-list-table thead th { + align-content: center; } - .wp-list-table .check-column { + .wp-list-table td.check-column, + .wp-list-table th.check-column { + flex: 0 0 2.5em; width: 2.5em; } + .wp-list-table .column-primary a { + text-wrap: wrap; + } + + .wp-list-table td.column-primary, + .wp-list-table th.column-primary { + flex: 1 1 0; + } + + .wp-list-table tr td:nth-child(n+3) { + flex: 0 1 100%; + } + + .plugins tr.active.plugin-update-tr + tr.inactive th, + .plugins tr.active.plugin-update-tr + tr.inactive td, + .plugins tr.active + tr.inactive th, + .plugins tr.active + tr.inactive td, + .plugins .inactive td, + .plugins .inactive th, + .plugins .active td, + .plugins .active th, + .plugin-install #the-list td, + .upgrade .plugins td, + .upgrade .plugins th { + box-shadow: none; + } + + .plugins tr { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugins .active th.check-column, + .plugins .active td.check-column, + .plugin-update-tr.active td { + border-left: 4px solid transparent; + } + + .plugins .active th.check-column input, + .plugins .active td.check-column input { + margin-left: 0px; + } + + .plugins tr.active, + .plugin-update-tr.active { + border-left: 4px solid var(--wp-admin-theme-color); + } + .wp-list-table .column-primary .toggle-row { display: block; } + .wp-list-table tbody th, .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { position: relative; - clear: both; - width: auto !important; /* needs to override some columns that are more specifically targeted */ } .wp-list-table td.column-primary, - .wp-list-table th.column-primary { + .wp-list-table tbody th.column-primary { padding-right: 50px; /* space for toggle button */ } @@ -1955,7 +2006,7 @@ div.action-links, padding: 3px 8px 3px 35%; } - .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before { + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before { position: absolute; left: 10px; /* match padding of regular table cell */ display: block; @@ -1966,6 +2017,7 @@ div.action-links, text-overflow: ellipsis; } + .wp-list-table .is-expanded th:not(.hidden), .wp-list-table .is-expanded td:not(.hidden) { display: block !important; overflow: hidden; /* clearfix */ @@ -2231,7 +2283,7 @@ div.action-links, } /* Plugin/Theme Management */ - #wpbody-content .wp-list-table.plugins td { + #wpbody-content .wp-list-table.plugins tbody td { display: block; width: auto; padding: 10px 9px; /* reset from other list tables that have a label at this width */