diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/list-tables-rtl.css --- a/wp/wp-admin/css/list-tables-rtl.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/list-tables-rtl.css Mon Oct 14 17:39:30 2019 +0200 @@ -1,77 +1,121 @@ -/* List table styles */ -.post-com-count-wrapper { - min-width: 22px; +.response-links { + display: block; + margin-bottom: 1em; +} + +.response-links a { + display: block; +} + +.response-links a.comments-edit-item-link { + font-weight: 600; +} + +.response-links a.comments-view-item-link { + font-size: 12px; +} + +.post-com-count-wrapper strong { + font-weight: 400; +} + +.comments-view-item-link { + display: inline-block; + clear: both; +} + +.column-response .post-com-count-wrapper, +.column-comments .post-com-count-wrapper { + white-space: nowrap; + word-wrap: normal; +} + +/* comments bubble common */ +.column-response .post-com-count, +.column-comments .post-com-count { + display: inline-block; + vertical-align: top; } -.post-com-count { - background: none; - height: 1.3em; - line-height: 1.1em; - display: block; - text-decoration: none; - padding: 0 0 6px; - cursor: pointer; - background-position: center -80px; - background-repeat: no-repeat; - color: #fff; +/* comments bubble approved */ +.column-response .post-com-count-no-comments, +.column-response .post-com-count-approved, +.column-comments .post-com-count-no-comments, +.column-comments .post-com-count-approved { + margin-top: 5px; } -.post-com-count:after { /* draw bubble connector using CSS! */ +.column-response .comment-count-no-comments, +.column-response .comment-count-approved, +.column-comments .comment-count-no-comments, +.column-comments .comment-count-approved { + box-sizing: border-box; + display: block; + padding: 0 8px; + min-width: 24px; + height: 2em; + border-radius: 5px; + background-color: #72777c; + color: #fff; + font-size: 11px; + line-height: 21px; + text-align: center; +} + +.ie8 .column-response .comment-count-no-comments, +.ie8 .column-response .comment-count-approved, +.ie8 .column-comments .comment-count-no-comments, +.ie8 .column-comments .comment-count-approved { + min-width: 0; +} + +.column-response .post-com-count-no-comments:after, +.column-response .post-com-count-approved:after, +.column-comments .post-com-count-no-comments:after, +.column-comments .post-com-count-approved:after { content: ""; display: block; + margin-right: 8px; width: 0; height: 0; - margin-right: 8px; - border-top: 5px solid #b4b9be; + border-top: 5px solid #72777c; border-left: 5px solid transparent; } -.post-com-count span { - font-size: 11px; - font-weight: 600; - height: 1.4em; - line-height: 1.4em; - min-width: 0.7em; - padding: 0 6px; - display: inline-block; - -webkit-border-radius: 5px; - border-radius: 5px; - background-color: #b4b9be; - color: #fff; +.column-response .post-com-count-approved:hover .comment-count-approved, +.column-response .post-com-count-approved:focus .comment-count-approved, +.column-comments .post-com-count-approved:hover .comment-count-approved, +.column-comments .post-com-count-approved:focus .comment-count-approved { + background: #0073aa; } -.post-com-count:hover { - background-position: center -3px; +.column-response .post-com-count-approved:hover:after, +.column-response .post-com-count-approved:focus:after, +.column-comments .post-com-count-approved:hover:after, +.column-comments .post-com-count-approved:focus:after { + border-top-color: #0073aa; } -.post-com-count:hover span { - background-color: #00a0d2; -} - -.post-com-count:hover:after { - border-top: 5px solid #00a0d2; -} - -strong .post-com-count { - background-position: center -55px; -} - -strong .post-com-count span { - background-color: #0073aa; -} - -strong .post-com-count:after { - border-top: 5px solid #0073aa; -} - -.column-response .post-com-count { - float: right; - margin-left: 5px; +/* @todo: consider to use a single rule for these counters and the admin menu counters. */ +.column-response .post-com-count-pending, +.column-comments .post-com-count-pending { + position: relative; + right: -3px; + padding: 0 5px; + min-width: 7px; + height: 17px; + border: 2px solid #fff; + border-radius: 11px; + background: #ca4a1f; + color: #fff; + font-size: 9px; + line-height: 17px; text-align: center; } -.response-links { - float: right; +.column-response .post-com-count-no-pending, +.column-comments .post-com-count-no-pending { + display: none; } /* comments */ @@ -94,7 +138,7 @@ #submitted-on, .submitted-on { - color: #777; + color: #555d66; } /* reply to comments */ @@ -104,28 +148,35 @@ #replysubmit { margin: 0; - padding: 0 5px 3px; - text-align: center; + padding: 5px 7px 10px; + overflow: hidden; } #replysubmit .button { margin-left: 5px; } -#replysubmit .error { - color: red; - line-height: 21px; - text-align: center; +#replyrow.inline-edit-row fieldset.comment-reply { + font-size: inherit; + line-height: inherit; } -#replyrow h5 { - margin: .2em 0 0; - padding: 0 5px; - line-height: 1.4em; - font-size: 1em; +#replyrow legend { + margin: 0; + padding: .2em 5px 0; + font-size: 13px; + line-height: 1.4; + font-weight: 600; } -#edithead .inside { +#replyrow.inline-edit-row label { + display: inline; + vertical-align: baseline; + line-height: inherit; +} + +#edithead .inside, +#commentsdiv #edithead .inside { float: right; padding: 3px 5px 2px 0; margin: 0; @@ -146,7 +197,6 @@ #replycontent { height: 120px; - -webkit-box-shadow: none; box-shadow: none; } @@ -160,13 +210,9 @@ vertical-align: text-top; } -#the-comment-list .attachment-80x60 { - padding: 4px 8px; -} - #the-comment-list tr.undo, #the-comment-list div.undo { - background-color: #f4f4f4; + background-color: #f5f5f5; } #the-comment-list .unapproved th, @@ -192,13 +238,11 @@ #the-comment-list th, #the-comment-list td { - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } #the-comment-list tr:last-child th, #the-comment-list tr:last-child td { - -webkit-box-shadow: none; box-shadow: none; } @@ -220,8 +264,8 @@ } th .comment-grey-bubble:before { - content: '\f101'; - font: normal 20px/.5 'dashicons'; + content: "\f101"; + font: normal 20px/.5 dashicons; speak: none; display: inline-block; padding: 0; @@ -258,7 +302,7 @@ } .fixed .column-posts { - width: 74px; + width: 74px; } .fixed .column-comment .comment-author { @@ -282,7 +326,7 @@ } .fixed .column-comments { - width: 4em; + width: 5.5em; padding: 8px 0; text-align: right; } @@ -291,24 +335,47 @@ padding-right: 3px; } -.fixed .column-comments a { - float: right; +td.column-title strong, +td.plugin-title strong { + display: block; + margin-bottom: .2em; + font-size: 14px; +} + +td.column-title p, +td.plugin-title p { + margin: 6px 0; } -.fixed .column-icon { - width: 80px; +/* Media file column */ +table.media .column-title .media-icon { + float: right; + min-height: 60px; + margin: 0 0 0 9px; +} + +table.media .column-title .media-icon img { + max-width: 60px; + height: auto; + vertical-align: top; /* Remove descender white-space. */ +} + +table.media .column-title .has-media-icon ~ .row-actions { + margin-right: 70px; /* 60px image + margin */ +} + +table.media .column-title .filename { + margin-bottom: 0.2em; } /* @todo: pick a consistent list table selector */ .wp-list-table a { - -webkit-transition: none; transition: none; } #the-list tr:last-child td, #the-list tr:last-child th { border-bottom: none !important; - -webkit-box-shadow: none; box-shadow: none; } @@ -316,6 +383,10 @@ width: 20%; } +#comments-form .fixed .column-date { + width: 14%; +} + #commentsdiv.postbox .inside { margin: 0; padding: 0; @@ -347,7 +418,8 @@ border: 0 none; } -#commentsdiv .comments-box thead th { +#commentsdiv .comments-box thead th, +#commentsdiv .comments-box thead td { background: transparent; padding: 0 7px 4px; font-style: italic; @@ -357,8 +429,13 @@ border-bottom: 0 none; } +#commentsdiv #edithead .inside input { + width: 160px; +} + .sorting-indicator { - display: none; + display: block; + visibility: hidden; width: 10px; height: 4px; margin-top: 8px; @@ -366,9 +443,8 @@ } .sorting-indicator:before { - background: none; - content: '\f142'; - font: normal 20px/1 'dashicons'; + content: "\f142"; + font: normal 20px/1 dashicons; speak: none; display: inline-block; padding: 0; @@ -390,13 +466,66 @@ } th.sorted.asc .sorting-indicator:before, -th.desc:hover span.sorting-indicator:before { - content: '\f142'; +th.desc:hover span.sorting-indicator:before, +th.desc a:focus span.sorting-indicator:before { + content: "\f142"; } th.sorted.desc .sorting-indicator:before, -th.asc:hover span.sorting-indicator:before { - content: '\f140'; +th.asc:hover span.sorting-indicator:before, +th.asc a:focus span.sorting-indicator:before { + content: "\f140"; +} + +.wp-list-table .toggle-row { + position: absolute; + left: 8px; + top: 10px; + display: none; + padding: 0; + width: 40px; + height: 40px; + border: none; + outline: none; + background: transparent; +} + +.wp-list-table .toggle-row:hover { + cursor: pointer; +} + +.wp-list-table .toggle-row:focus:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + +.ie8 .wp-list-table .toggle-row:focus:before { + outline: #5b9dd9 solid 1px; +} + +.wp-list-table .toggle-row:active { + box-shadow: none; +} + +.wp-list-table .toggle-row:before { + position: absolute; + top: -5px; + right: 10px; + border-radius: 50%; + display: block; + padding: 1px 0 1px 2px; + color: #444; /* same as table headers sort arrows */ + content: "\f140"; + font: normal 20px/1 dashicons; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + speak: none; +} + +.wp-list-table .is-expanded .toggle-row:before { + content: "\f142"; } tr.wp-locked .locked-indicator { @@ -405,15 +534,13 @@ width: 16px; } -tr.wp-locked .locked-indicator:before { +tr.wp-locked .locked-indicator-icon:before { color: #82878c; - content: '\f160'; + content: "\f160"; display: inline-block; - float: right; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; speak: none; vertical-align: middle; - margin-right: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -431,7 +558,7 @@ } tr.wp-locked .locked-info { - margin-top: 8px; + margin-top: 4px; height: auto; opacity: 1; } @@ -441,7 +568,6 @@ } tr.locked-info, tr.wp-locked .locked-info { - -webkit-transition: height 1s, opacity 0.5s; transition: height 1s, opacity 0.5s; } @@ -462,7 +588,7 @@ th.sorted a { display: block; overflow: hidden; - padding: 7px 10px 8px 7px; + padding: 8px; } .fixed .column-comments.sortable a, @@ -476,32 +602,37 @@ cursor: pointer; } -th.sorted.asc .sorting-indicator, -th.desc:hover span.sorting-indicator { - display: block; - background-position: 100% 0; -} - -th.sorted.desc .sorting-indicator, -th.asc:hover span.sorting-indicator { - display: block; - background-position: -7px 0; +th.sorted .sorting-indicator, +th.desc:hover span.sorting-indicator, +th.desc a:focus span.sorting-indicator, +th.asc:hover span.sorting-indicator, +th.asc a:focus span.sorting-indicator { + visibility: visible; } /* Bulk Actions */ -.tablenav-pages a { +.tablenav-pages a, +.tablenav-pages-navspan { font-weight: 600; - margin-left: 1px; padding: 0 2px; } + .tablenav-pages .current-page { - padding-top: 0; + margin: 0 0 0 2px; + padding-bottom: 5px; + font-size: 13px; text-align: center; } -.tablenav-pages .next-page { + +.tablenav .total-pages { + margin-left: 2px; +} + +.tablenav #table-paging { margin-right: 2px; } +.tablenav a.button, .tablenav a.button-secondary { display: block; margin: 3px 0 0 8px; @@ -520,12 +651,10 @@ .tablenav .tablenav-pages { float: left; - display: block; + height: 28px; + margin-top: 3px; cursor: default; - height: 30px; color: #555; - line-height: 30px; - font-size: 12px; } .tablenav .no-pages, @@ -539,34 +668,43 @@ padding: 3px 6px; } -.tablenav .tablenav-pages a { - padding: 0 10px 3px; - background: #eee; - background: rgba( 0, 0, 0, 0.05 ); +.tablenav .tablenav-pages a, +.tablenav-pages-navspan { + display: inline-block; + min-width: 17px; + border: 1px solid #ccc; /* same color as buttons border */ + padding: 3px 5px 7px; + background: #e5e5e5; font-size: 16px; - font-weight: normal; + line-height: 1; + font-weight: 400; + text-align: center; +} + +.tablenav-pages-navspan { + height: 16px; + border-color: #ddd; /* same as disabled buttons */ + background: #f7f7f7; /* same as disabled buttons */ + color: #a0a5aa; /* same as disabled buttons */ } .tablenav .tablenav-pages a:hover, .tablenav .tablenav-pages a:focus { + border-color: #5b9dd9; color: #fff; background: #00a0d2; -} - -.tablenav .tablenav-pages a.disabled, -.tablenav .tablenav-pages a.disabled:hover, -.tablenav .tablenav-pages a.disabled:focus, -.tablenav .tablenav-pages a.disabled:active { - color: #a0a5aa; - background: #eee; - background: rgba( 0, 0, 0, 0.05 ); + box-shadow: none; + outline: none; /* IE8 */ } .tablenav .displaying-num { - margin-left: 2px; - color: #777; - font-size: 12px; - font-style: italic; + margin-left: 7px; +} + +.tablenav .one-page .displaying-num { + display: inline-block; + margin-top: 5px; + margin-left: 0; } .tablenav .actions { @@ -603,43 +741,42 @@ .tablenav .view-switch { float: left; - margin: 5px 8px 0 16px; + margin: 0 5px; + padding-top: 3px; } .wp-filter .view-switch { display: inline-block; vertical-align: middle; - padding: 15px 0; - margin: 0 0 0 20px; + padding: 12px 0; + margin: 0 2px 0 8px; +} + +.media-toolbar.wp-filter .view-switch { + margin: 0 2px 0 12px; } .view-switch a { + float: right; + width: 28px; + height: 28px; + text-align: center; + line-height: 24px; text-decoration: none; } -.view-switch > a { - display: inline-block; - width: 18px; - height: 18px; -} - -.view-switch > a:before { +.view-switch a:before { color: #b4b9be; display: inline-block; - float: right; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; speak: none; vertical-align: middle; - margin-right: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.view-switch > .view-list:before { - content: '\f163'; -} - -.view-switch a:hover:before { +.view-switch a:hover:before, +.view-switch a:focus:before { color: #727272; } @@ -647,16 +784,16 @@ color: #0073aa; } -.view-switch > a + a { - margin-right: 5px; +.view-switch .view-list:before { + content: "\f163"; } -.view-switch > .view-excerpt:before { - content: '\f164'; +.view-switch .view-excerpt:before { + content: "\f164"; } -.view-switch > .view-grid:before { - content: '\f509'; +.view-switch .view-grid:before { + content: "\f509"; } .filter { @@ -716,15 +853,27 @@ .row-actions { color: #ddd; font-size: 13px; - visibility: hidden; padding: 2px 0 0; + position: relative; + right: -9999em; } +/* ticket #34150 */ +.rtl .row-actions a { + display: inline-block; +} + +.row-actions .network_only, +.row-actions .network_active { + color: #000; +} + +.no-js .row-actions, tr:hover .row-actions, .mobile .row-actions, .row-actions.visible, -div.comment-item:hover .row-actions { - visibility: visible; +.comment-item:hover .row-actions { + position: static; } /* deprecated */ @@ -758,11 +907,6 @@ padding: 0 0.5em; } -#wpbody-content .quick-edit-row-page fieldset.inline-edit-col-right .inline-edit-col { - border-width: 0 1px 0 0; - border-style: none solid none none; -} - #wpbody-content .quick-edit-row-post .inline-edit-col-left { width: 40%; } @@ -806,32 +950,35 @@ line-height: 2.5; } -.inline-edit-row fieldset .inline-edit-group:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.inline-edit-row p.submit { +.inline-edit-row .submit { clear: both; padding: 0.5em; margin: 0.5em 0 0; } -.inline-edit-row span.error { - line-height: 22px; - margin: 0 15px; - padding: 3px 5px; +.inline-edit-row .notice-error { + margin-top: 1em; +} + +.inline-edit-row .notice-error .error { + margin: 0.5em 0; + padding: 2px; } /* Positioning */ -.inline-edit-row h4 { - margin: .2em 0; - padding: 0; + +/* Needs higher specificity for the padding */ +#the-list .inline-edit-row .inline-edit-legend { + margin: 0; + padding: 0.2em 0.5em 0; line-height: 2.5; + font-weight: 600; } + +#the-list #bulk-edit.inline-edit-row .inline-edit-legend { + padding: 0.2em 0.5em; +} + .inline-edit-row fieldset span.title, .inline-edit-row fieldset span.checkbox-title { margin: 0; @@ -845,6 +992,13 @@ line-height: 2.5; } +.inline-edit-row fieldset.inline-edit-date label { + display: inline-block; + margin: 0; + line-height: 1.5; + vertical-align: baseline; +} + .inline-edit-row fieldset label.inline-edit-tags { margin-top: 0; } @@ -854,16 +1008,27 @@ width: auto; } -.inline-edit-row fieldset label span.title { +.inline-edit-row fieldset label span.title, +.inline-edit-row fieldset.inline-edit-date legend { display: block; float: right; - width: 5em; + width: 6em; line-height: 2.5; } -.inline-edit-row fieldset label span.input-text-wrap { +#posts-filter fieldset.inline-edit-date legend { + padding: 0; +} + +.inline-edit-row fieldset.inline-edit-date select { + margin: 1px; + line-height: 28px; +} + +.inline-edit-row fieldset label span.input-text-wrap, +.inline-edit-row fieldset .timestamp-wrap { display: block; - margin-right: 5em; + margin-right: 6em; } .quick-edit-row-post fieldset.inline-edit-col-right label span.title { @@ -903,7 +1068,7 @@ } /* Styling */ -.inline-edit-row h4 { +.inline-edit-row .inline-edit-legend { text-transform: uppercase; } @@ -1021,25 +1186,16 @@ margin-top: 4px; } -#update-plugins-table tbody td p { +.updates-table .plugin-title p { margin-top: 0; } -#update-plugins-table tbody td p strong { - font-size: 14px; -} - -.plugins thead th.check-column, -.plugins tfoot th.check-column, +.plugins thead td.check-column, +.plugins tfoot td.check-column, .plugins .inactive th.check-column { padding-right: 6px; } -#update-plugins-table thead th.check-column, -#update-plugins-table tfoot th.check-column { - padding-top: 11px; -} - .plugins, .plugins th, .plugins td { @@ -1094,10 +1250,6 @@ border-bottom: 0; } -.plugin-update-tr td { - border-top: 0; -} - .plugins .inactive td, .plugins .inactive th, .plugins .active td, @@ -1105,7 +1257,6 @@ .plugin-install #the-list td, .upgrade .plugins td, .upgrade .plugins th { - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); } @@ -1114,7 +1265,6 @@ .plugins tr.active + tr.inactive th, .plugins tr.active + tr.inactive td { border-top: 1px solid rgba(0,0,0,0.03); - -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 #e1e1e1; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 #e1e1e1; } @@ -1128,30 +1278,39 @@ .plugins .updated th, .plugins tr.active + tr.inactive.updated th, .plugins tr.active + tr.inactive.updated td { - -webkit-box-shadow: none; box-shadow: none; } -.plugins .active.update td, -.plugins .active.update th, -tr.active.update + tr.plugin-update-tr .plugin-update { - background-color: #fef7f1; -} - .plugins .active th.check-column, .plugin-update-tr.active td { border-right: 4px solid #00a0d2; } -.plugins .active.update th.check-column, -.plugins .active.update + .plugin-update-tr .plugin-update { - border-right: 4px solid #d54e21; +.wp-list-table.plugins .plugin-title, +.wp-list-table.plugins .theme-title { + padding-left: 12px; + white-space: nowrap; } -#wpbody-content .plugins .plugin-title, -#wpbody-content .plugins .theme-title { - padding-left: 12px; - white-space:nowrap; +.plugins .plugin-title img, +.plugins .plugin-title .dashicons { + float: right; + padding: 0 0 0 10px; + width: 64px; + height: 64px; +} + +.plugins .plugin-title .dashicons:before { + padding: 2px; + background-color: #eee; + box-shadow: inset 0 0 10px rgba(160,165,170,.15); + font-size: 60px; + color: #B4B9BE; +} + +#update-themes-table .plugin-title img, +#update-themes-table .plugin-title .dashicons { + width: 85px; } .plugins .inactive .plugin-title strong { @@ -1176,45 +1335,35 @@ border-top-width: 1px; } -.plugin-update-tr .update-message { - font-size: 13px; - font-weight: normal; - margin: 6px 12px 12px; - padding: 6px 12px; - margin: 0 31px 8px 10px; - background-color: #f7f7f7; - background-color: rgba(0,0,0,0.03); +.plugins .plugin-update-tr .plugin-update { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + overflow: hidden; /* clearfix */ + padding: 0; +} + +.plugins .plugin-update-tr .notice, +.plugins .plugin-update-tr div[class="update-message"] { /* back-compat for pre-4.6 */ + margin: 5px 40px 15px 20px; } -.plugin-update-tr .update-message:before, -.plugin-card .update-now:before, -.plugin-card .install-now:before { - color: #d54e21; +.plugins .notice p { + margin: 0.5em 0; +} + +.plugin-card .update-now:before { + color: #f56e28; + content: "\f463"; display: inline-block; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; + margin: 3px -2px 0 5px; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; } -.plugin-update-tr .update-message:before, -.plugin-card .update-now:before { - content: '\f463'; -} - -.plugin-update-tr .update-message:before { - margin: 0 -2px 0 8px; -} - -.plugin-card .update-now:before, -.plugin-card .install-now:before { - margin: 3px -2px 0 5px; -} - -.plugin-update-tr .updating-message:before, .plugin-card .updating-message:before { - content: '\f463'; + content: "\f463"; -webkit-animation: rotation 2s infinite linear; animation: rotation 2s infinite linear; } @@ -1241,33 +1390,16 @@ } } -.plugin-update-tr .updated-message:before, .plugin-card .updated-message:before { color: #79ba49; - content: '\f147'; + content: "\f147"; } -.plugins .plugin-update-tr .plugin-update { - padding: 0; - border: none; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); -} - -/* update notices for active plugins */ -tr.active + tr.plugin-update-tr .plugin-update { - background-color: #f7fcfe; -} - -tr.active + tr.plugin-update-tr:not(.updated) .plugin-update .update-message { - background-color: #fcf3ef; +.plugin-install-php h2 { + clear: both; } .plugin-install-php h3 { - clear: both; -} - -.plugin-install-php h4 { margin: 2.5em 0 8px; } @@ -1289,12 +1421,9 @@ float: right; margin: 0 8px 16px; width: 48.5%; - width: -webkit-calc( 50% - 8px ); width: calc( 50% - 8px ); background-color: #fff; - border: 1px solid #dedede; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; + border: 1px solid #ddd; box-sizing: border-box; } @@ -1310,7 +1439,6 @@ @media screen and ( min-width: 1600px ) { .plugin-card { width: 30%; - width: -webkit-calc( 33.1% - 8px ); width: calc( 33.1% - 8px ); } @@ -1333,14 +1461,6 @@ } } -@media screen and ( max-width: 782px ) { - .plugin-card { - margin-right: 0; - margin-left: 0; - width: 100%; - } -} - .plugin-card-top { position: relative; padding: 20px 20px 10px; @@ -1352,7 +1472,7 @@ margin: 0; /* Override existing margins */ } -.plugin-card h4 { +.plugin-card h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; @@ -1387,7 +1507,7 @@ clear: both; padding: 12px 20px; background-color: #fafafa; - border-top: 1px solid #dedede; + border-top: 1px solid #ddd; overflow: hidden; } @@ -1395,6 +1515,20 @@ display: inline; } +.plugin-card-update-failed .update-now { + font-weight: 600; +} + +.plugin-card-update-failed .notice-error { + margin: 0; + padding-right: 16px; + box-shadow: 0 -1px 0 #ddd; +} + +.plugin-card-update-failed .plugin-card-bottom { + display: none; +} + .plugin-card .column-rating { line-height: 23px; } @@ -1417,12 +1551,11 @@ float: left; clear: left; width: 65%; - width: -webkit-calc( 100% - 180px ); width: calc( 100% - 180px ); } .plugin-card .column-compatibility span:before { - font: normal 20px/.5 'dashicons'; + font: normal 20px/.5 dashicons; speak: none; display: inline-block; padding: 0; @@ -1437,11 +1570,11 @@ } .plugin-card .compatibility-incompatible:before { - content: '\f158'; + content: "\f158"; } .plugin-card .compatibility-compatible:before { - content: '\f147'; + content: "\f147"; } .plugin-icon { @@ -1453,13 +1586,8 @@ margin: 0 0 20px 20px; } -.plugin-icon img { - width: 128px; - height: 128px; -} - .no-plugin-results { - color: #999; + color: #666; /* same as no themes and no media */ font-size: 18px; font-style: normal; margin: 0; @@ -1469,19 +1597,32 @@ /* ms */ /* Background Color for Site Status */ +.wp-list-table .site-deleted, .wp-list-table tr.site-deleted { background: #ff8573; } +.wp-list-table .site-spammed, .wp-list-table tr.site-spammed { background: #faafaa; } +.wp-list-table .site-archived, .wp-list-table tr.site-archived { background: #ffebe8; } +.wp-list-table .site-mature, .wp-list-table tr.site-mature { background: #fecac2; } +.sites.fixed .column-lastupdated, +.sites.fixed .column-registered { + width: 20%; +} + +.sites.fixed .column-users { + width: 80px; +} + /* =Media Queries -------------------------------------------------------------- */ @@ -1515,6 +1656,10 @@ .plugin-card .desc p:first-of-type { margin-top: 0; } + + .fixed .column-date { + width: 14%; + } } @media screen and ( max-width: 782px ) { @@ -1545,6 +1690,12 @@ display: none; } + .view-switch a { + width: 36px; + height: 36px; + line-height: 33px; + } + /* Pagination */ .tablenav.top .displaying-num { display: none; @@ -1553,12 +1704,14 @@ .tablenav.bottom .displaying-num { position: absolute; left: 0; - top: 10px; + top: 11px; + margin: 0; font-size: 14px; } - .tablenav-pages { + .tablenav .tablenav-pages { width: 100%; + height: auto; text-align: center; margin: 0 0 25px; } @@ -1576,19 +1729,23 @@ height: 0; } - .tablenav-pages .pagination-links .paging-input { + .tablenav-pages .pagination-links { + font-size: 16px; + } + + .tablenav-pages .pagination-links a, + .tablenav-pages-navspan { + padding: 9px 11px 12px; font-size: 18px; } - .tablenav-pages .pagination-links a { - padding: 8px 20px 11px; - font-size: 18px; - background: rgba(0, 0, 0, 0.05); + .tablenav-pages-navspan { + height: 18px; } .tablenav-pages .pagination-links .current-page { - padding: 10px; - font-size: 14px; + padding: 8px 9px 9px; + font-size: 16px; } /* WP List Table Adjustments: General */ @@ -1600,35 +1757,142 @@ font-size: 14px; } - /* Columns to hide */ - .fixed .column-date, - .fixed .column-author, - .column-categories, - .column-tags, - .tags .column-description, - .media .column-parent, - .users .column-email, - .users .column-name, - .sites .column-registered, - .sites .column-users { + .wp-list-table th.column-primary ~ th, + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { display: none; } + .wp-list-table thead th.column-primary { + width: 100%; + } + + /* Checkboxes need to show */ + .wp-list-table tr th.check-column { + display: table-cell; + width: 35px; + } + + .wp-list-table .column-primary .toggle-row { + display: block; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { + position: relative; + clear: both; + display: block; + width: auto !important; /* needs to override some columns that are more specifically targeted */ + } + + .wp-list-table td.column-primary { + padding-left: 50px; /* space for toggle button */ + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { + padding: 3px 35% 3px 8px; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before { + position: absolute; + right: 10px; /* match padding of regular table cell */ + display: block; + overflow: hidden; + width: 32%; /* leave a little space for a gutter */ + content: attr(data-colname); + white-space: nowrap; + text-overflow: ellipsis; + } + + .wp-list-table .is-expanded td:not(.hidden) { + display: block !important; + overflow: hidden; /* clearfix */ + } + + /* Special cases */ + .widefat .num, + .column-posts { + text-align: right; + } + + #comments-form .fixed .column-author, + #commentsdiv .fixed .column-author { + display: none !important; + } + .fixed .column-comment .comment-author { display: block; } - /* Posts */ - .column-title { - width: 85%; + #the-comment-list .is-expanded td { + box-shadow: none; + } + + #the-comment-list .is-expanded td:last-child { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + /* Show comment bubble as text instead */ + .post-com-count .screen-reader-text { + position: static; + -webkit-clip-path: none; + clip-path: none; + width: auto; + height: auto; + margin: 0; + } + + .column-response .post-com-count-no-comments:after, + .column-response .post-com-count-approved:after, + .column-comments .post-com-count-no-comments:after, + .column-comments .post-com-count-approved:after { + content: none; + } + + .column-response .post-com-count [aria-hidden="true"], + .column-comments .post-com-count [aria-hidden="true"] { + display: none; + } + + .column-response .post-com-count-wrapper, + .column-comments .post-com-count-wrapper { + white-space: normal; } - .fixed .column-comments, .widefat .check-column { - width: 35px + .column-response .post-com-count-wrapper > a, + .column-comments .post-com-count-wrapper > a { + display: block; + } + + .column-response .post-com-count-no-comments, + .column-response .post-com-count-approved, + .column-comments .post-com-count-no-comments, + .column-comments .post-com-count-approved { + margin-top: 0; + margin-left: 0.5em; } - .widefat thead .check-column, .widefat tfoot .check-column { - padding: 10px 0 10px; + .column-response .post-com-count-pending, + .column-comments .post-com-count-pending { + position: static; + height: auto; + min-width: 0; + padding: 0; + border: none; + border-radius: 0; + background: none; + color: #bb2a2a; + font-size: inherit; + line-height: inherit; + text-align: right; + } + + .column-response .post-com-count-pending:hover, + .column-comments .post-com-count-pending:hover { + color: #dc3232; + } + + .widefat thead td.check-column, + .widefat tfoot td.check-column { + padding-top: 10px; } .widefat * { @@ -1662,8 +1926,6 @@ display: block; width: 100%; max-width: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -1672,7 +1934,8 @@ font-size: 16px; } - .inline-edit-row fieldset label span.title { + .inline-edit-row fieldset label span.title, + .inline-edit-row fieldset.inline-edit-date legend { float: none; } @@ -1684,7 +1947,8 @@ padding: 0; } - .inline-edit-row fieldset label span.input-text-wrap { + .inline-edit-row fieldset label span.input-text-wrap, + .inline-edit-row fieldset .timestamp-wrap { margin-right: 0; } @@ -1702,6 +1966,22 @@ margin: 0 0 0 6px; } + #edithead .inside, + #commentsdiv #edithead .inside { + float: none; + text-align: right; + padding: 3px 5px; + } + + #commentsdiv #edithead .inside input, + #edithead .inside input { + width: 100%; + } + + #edithead label { + display: block; + } + #bulk-titles div { margin: 0.8em 0.3em; } @@ -1710,33 +1990,10 @@ height: 22px; } - /* Taxonomies */ - .tags .column-posts { - width: 74px; - } - - .tags .column-slug { - width: 30%; - } - - /* Comments */ - .comments .column-response { - width: 35%; - } - - /* Users */ - .users .column-role { - width: 35%; - } - - /* Network admin sites */ - .sites .column-blogname { - width: 55%; - } - /* Updates */ - #wpbody-content #update-themes-table .plugin-title { + #wpbody-content .updates-table .plugin-title { width: auto; + white-space: normal; } /* Links */ @@ -1748,49 +2005,27 @@ overflow: hidden; } - /* Plugin/Theme Management Page */ - .wp-list-table.plugins { - position: relative; - margin-top: 35px; - margin-bottom: 50px; - } - - .wp-list-table.plugins thead .column-description, - #wpbody-content .wp-list-table.plugins tfoot .column-description, - .wp-list-table.plugins th#description { + /* List tables that don't toggle rows */ + .comments-box .toggle-row, + .wp-list-table.plugins .toggle-row { display: none; } - #wpbody-content .wp-list-table.plugins, - #wpbody-content .wp-list-table.plugins thead, - #wpbody-content .wp-list-table.plugins tbody, - #wpbody-content .wp-list-table.plugins tr, - #wpbody-content .wp-list-table.plugins .column-description, - #wpbody-content .wp-list-table.plugins .plugin-title, - #wpbody-content .wp-list-table.plugins .theme-title, - #wpbody-content .wp-list-table.plugins .plugin-update, - #wpbody-content .wp-list-table.plugins .manage-column.column-name { + /* Plugin/Theme Management */ + #wpbody-content .wp-list-table.plugins td { display: block; width: auto; + padding: 10px 9px; /* reset from other list tables that have a label at this width */ } - .wp-list-table.plugins thead, - .wp-list-table.plugins tfoot { - position: absolute; - top: -35px; - right: 0; - left: 0; - width: auto; - height: 35px; + #wpbody-content .wp-list-table.plugins .column-description { + padding-top: 2px; } - .wp-list-table.plugins tfoot { - bottom: -35px; - top: auto; - } - - .active, .inactive { - padding-top: 0; + #wpbody-content .wp-list-table.plugins .plugin-title, + #wpbody-content .wp-list-table.plugins .theme-title { + padding-left: 12px; + white-space: normal; } .wp-list-table.plugins .plugin-title, @@ -1799,21 +2034,25 @@ padding-bottom: 4px; } - .plugins tr.active + tr.inactive th.check-column, - .plugins tr.active + tr.inactive td, - .wp-list-table.plugins .plugin-title, - .wp-list-table.plugins .theme-title, - .wp-list-table.plugins tbody th { - -webkit-box-shadow: none; + .plugins #the-list tr > td:not(:last-child), + .plugins #the-list .update th, + .plugins #the-list .update td, + .wp-list-table.plugins #the-list .theme-title { box-shadow: none; + border-top: none; + } + + .plugins #the-list tr td { + border-top: none; } .plugins tbody { padding: 1px 0 0; } - .plugins tr.active + tr.inactive td.column-description { - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td.column-description, + .plugins .plugin-update-tr:before { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } @@ -1822,63 +2061,38 @@ border-top: none; } - .wp-list-table.plugins .column-description { - padding-top: 0; + /* mimic the checkbox th */ + .plugins .plugin-update-tr:before { + content: ""; + display: table-cell; } - .wp-list-table.plugins .manage-column.column-name, - .wp-list-table.plugins .column-description, - .wp-list-table.plugins .plugin-title, - .wp-list-table.plugins .theme-title { - padding-left: 12px; - padding-right: 46px; - } - - .wp-list-table.plugins tr { - position: relative; + .plugins .active.update + .plugin-update-tr:before { + border-right: 4px solid #d54e21; + background-color: #fef7f1; } - .wp-list-table.plugins th.check-column, - .wp-list-table.plugins tr.update th.check-column { - position: absolute; - height: auto; - top: 0; - bottom: 0; - right: 0; - padding-right: 2px; - padding-top: 18px; + .plugins #the-list .plugin-update-tr .plugin-update { + border-right: none; } - .wp-list-table.plugins thead th.check-column, - .wp-list-table.plugins tfoot th.check-column { - padding-right: 3px; - padding-top: 11px; - background: none; + .plugin-update-tr .update-message { + margin-right: 0; } - .widefat tbody th.check-column input[type="checkbox"] { - margin-top: -3px; - margin-right: 8px; + .plugins .active.update + .plugin-update-tr:before { + background-color: #f7fcfe; + border-right: 4px solid #00a0d2; } - .wp-list-table.plugins .active .check-column input, - .wp-list-table.plugins .update .check-column input { - margin-right: 5px; - } - - .wp-list-table.plugins thead .check-column input, - .wp-list-table.plugins tfoot .check-column input { - margin-top: -6px; - } - - .wp-list-table.plugins .active th.check-column { - background: none; + .plugins .plugin-update-tr .update-message { + margin-right: 0; } .wp-list-table.plugins .plugin-title strong, .wp-list-table.plugins .theme-title strong { font-size: 1.4em; - line-height: 1.6em; + line-height: 1.5; } /* Add New plugins page */ @@ -1903,23 +2117,29 @@ } table.plugin-install #the-list td { - -webkit-box-shadow: none; box-shadow: none; } table.plugin-install #the-list tr { display: block; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); } + + .plugin-card { + margin-right: 0; + margin-left: 0; + width: 100%; + } } -/* Smartphone */ -@media screen and (max-width: 600px) { - /* Remove slug column from taxonomy list page - and role column from users list page */ - .tags .column-slug, - .users .column-role { - display: none; +@media screen and ( max-width: 480px ) { + .tablenav-pages .current-page { + margin: 0; + } + + .tablenav-pages .tablenav-paging-text { + float: right; + width: 100%; + padding-top: 0.5em; } }