-/* List table styles */
-.post-com-count-wrapper {
- min-width: 22px;
-}
-
-.post-com-count {
- background: none;
- height: 1.3em;
- line-height: 1.1em;
+.response-links {
display: block;
- text-decoration: none;
- padding: 0 0 6px;
- cursor: pointer;
- background-position: center -80px;
- background-repeat: no-repeat;
- color: #fff;
+ margin-bottom: 1em;
}
-.post-com-count:after { /* draw bubble connector using CSS! */
- content: "";
+.response-links a {
display: block;
- width: 0;
- height: 0;
- margin-left: 8px;
- border-top: 5px solid #bbb;
- border-right: 5px solid transparent;
}
-.post-com-count span {
- font-size: 11px;
+.response-links a.comments-edit-item-link {
font-weight: 600;
- height: 1.4em;
- line-height: 1.4em;
- min-width: 0.7em;
- padding: 0 6px;
+}
+
+.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;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- background-color: #bbb;
- color: #fff;
+ clear: both;
}
-.post-com-count:hover {
- background-position: center -3px;
+.column-response .post-com-count-wrapper,
+.column-comments .post-com-count-wrapper {
+ white-space: nowrap;
+ word-wrap: normal;
}
-.post-com-count:hover span {
- background-color: #2ea2cc;
+/* comments bubble common */
+.column-response .post-com-count,
+.column-comments .post-com-count {
+ display: inline-block;
+ vertical-align: top;
}
-.post-com-count:hover:after {
- border-top: 5px solid #2ea2cc;
+/* 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;
}
-strong .post-com-count {
- background-position: center -55px;
+.column-response .comment-count-no-comments,
+.column-response .comment-count-approved,
+.column-comments .comment-count-no-comments,
+.column-comments .comment-count-approved {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: block;
+ padding: 0 8px;
+ min-width: 24px;
+ height: 2em;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ background-color: #72777c;
+ color: #fff;
+ font-size: 11px;
+ line-height: 21px;
+ text-align: center;
}
-strong .post-com-count span {
- background-color: #0074a2;
+.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;
}
-strong .post-com-count:after {
- border-top: 5px solid #0074a2;
+.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-left: 8px;
+ width: 0;
+ height: 0;
+ border-top: 5px solid #72777c;
+ border-right: 5px solid transparent;
}
-.column-response .post-com-count {
- float: left;
- margin-right: 5px;
+.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;
+}
+
+.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;
+}
+
+/* comments bubble pending */
+.column-response .post-com-count-pending,
+.column-comments .post-com-count-pending {
+ position: relative;
+ left: -3px;
+ padding: 0 5px;
+ min-width: 7px;
+ height: 17px;
+ border: 2px solid #fff;
+ -webkit-border-radius: 11px;
+ border-radius: 11px;
+ background: #ca4a1f;
+ color: #fff;
+ font-size: 9px;
+ line-height: 17px;
text-align: center;
}
-.response-links {
- float: left;
+.column-response .post-com-count-no-pending,
+.column-comments .post-com-count-no-pending {
+ display: none;
}
/* comments */
#submitted-on,
.submitted-on {
- color: #777;
+ color: #555d66;
}
/* reply to comments */
#replysubmit {
margin: 0;
- padding: 0 5px 3px;
+ padding: 5px 7px 10px;
+ overflow: hidden;
text-align: center;
}
-#replysubmit .spinner {
- padding: 2px 0 0;
- vertical-align: top;
- float: right;
-}
-
#replysubmit .button {
margin-right: 5px;
}
text-align: center;
}
-#replyrow h5 {
- margin: .2em 0 0;
- padding: 0 5px;
- line-height: 1.4em;
- font-size: 1em;
+#replyrow.inline-edit-row fieldset.comment-reply {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+#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: left;
padding: 3px 0 2px 5px;
margin: 0;
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,
}
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;
width: 10%;
}
+.fixed .column-posts {
+ width: 74px;
+}
+
.fixed .column-comment .comment-author {
display: none;
}
}
.fixed .column-comments {
- width: 4em;
+ width: 5.5em;
padding: 8px 0;
text-align: left;
}
padding-left: 3px;
}
-.fixed .column-comments a {
+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;
+}
+
+/* Media file column */
+table.media .column-title .media-icon {
float: left;
+ min-height: 60px;
+ margin: 0 9px 0 0;
}
-.fixed .column-icon {
- width: 80px;
+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-left: 70px; /* 60px image + margin */
+}
+
+table.media .column-title .filename {
+ margin-bottom: 0.2em;
}
/* @todo: pick a consistent list table selector */
width: 20%;
}
+#comments-form .fixed .column-date {
+ width: 14%;
+}
+
#commentsdiv.postbox .inside {
margin: 0;
padding: 0;
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;
border-bottom: 0 none;
}
-#commentsdiv .spinner {
- padding-left: 5px;
+#commentsdiv #edithead .inside input {
+ width: 160px;
}
.sorting-indicator {
- display: none;
+ display: block;
+ visibility: hidden;
width: 10px;
height: 4px;
margin-top: 8px;
}
.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;
}
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;
+ right: 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 {
+ -webkit-box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+ 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 {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.wp-list-table .toggle-row:before {
+ position: absolute;
+ top: -5px;
+ left: 10px;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ display: block;
+ padding: 1px 2px 1px 0;
+ 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 {
}
tr.wp-locked .locked-indicator:before {
- color: #888;
- content: '\f160';
+ color: #82878c;
+ content: "\f160";
display: inline-block;
float: left;
- font: normal 20px/1 'dashicons';
+ font: normal 20px/1 dashicons;
speak: none;
vertical-align: middle;
margin-left: 0;
th.sorted a {
display: block;
overflow: hidden;
- padding: 7px 7px 8px 10px;
-}
-
-th.manage-column a,
-th.sortable a:hover,
-th.sortable a:active,
-th.sortable a:focus {
- color: #333;
-}
-
-th.sortable a:focus {
- background: #e1e1e1;
+ padding: 8px;
}
.fixed .column-comments.sortable a,
cursor: pointer;
}
-th.sorted.asc .sorting-indicator,
-th.desc:hover span.sorting-indicator {
- display: block;
- background-position: 0 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-right: 1px;
padding: 0 2px;
}
+
.tablenav-pages .current-page {
- padding-top: 0;
+ margin: 0 2px 0 0;
+ padding-bottom: 5px;
+ font-size: 13px;
text-align: center;
}
-.tablenav-pages .next-page {
+
+.tablenav .total-pages {
+ margin-right: 2px;
+}
+
+.tablenav #table-paging {
margin-left: 2px;
}
.tablenav .tablenav-pages {
float: right;
- display: block;
+ height: 28px;
+ margin-top: 3px;
cursor: default;
- height: 30px;
color: #555;
- line-height: 30px;
- font-size: 12px;
}
.tablenav .no-pages,
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: #2ea2cc;
+ background: #00a0d2;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none; /* IE8 */
}
-.tablenav .tablenav-pages a.disabled,
-.tablenav .tablenav-pages a.disabled:hover,
-.tablenav .tablenav-pages a.disabled:focus,
-.tablenav .tablenav-pages a.disabled:active {
- color: #aaa;
- background: #eee;
- background: rgba( 0, 0, 0, 0.05 );
+.tablenav .displaying-num {
+ margin-right: 7px;
}
-.tablenav .displaying-num {
- margin-right: 2px;
- color: #777;
- font-size: 12px;
- font-style: italic;
+.tablenav .one-page .displaying-num {
+ display: inline-block;
+ margin-top: 5px;
+ margin-right: 0;
}
.tablenav .actions {
padding: 2px 8px 0 0;
}
+.wp-filter .actions {
+ display: inline-block;
+ vertical-align: middle;
+}
+
.tablenav .delete {
margin-right: 20px;
}
.tablenav .next,
.tablenav .prev {
border-color: transparent;
- color: #0074a2;
+ color: #0073aa;
}
.tablenav .next:hover,
.tablenav .prev:hover {
border-color: transparent;
- color: #2ea2cc;
+ color: #00a0d2;
}
-.view-switch {
+.tablenav .view-switch {
float: right;
- margin: 5px 16px 0 8px;
+ margin: 0 5px;
+ padding-top: 3px;
}
-.view-switch img {
- display: none;
+.wp-filter .view-switch {
+ display: inline-block;
+ vertical-align: middle;
+ padding: 12px 0;
+ margin: 0 8px 0 2px;
}
-.view-switch a {
- text-decoration: none;
+.media-toolbar.wp-filter .view-switch {
+ margin: 0 12px 0 2px;
}
-.view-switch > a {
- display: inline-block;
- width: 18px;
- height: 18px;
+.view-switch a {
+ float: left;
+ width: 28px;
+ height: 28px;
+ text-align: center;
+ line-height: 24px;
+ text-decoration: none;
}
-.view-switch > a:before {
- color: #bbb;
- content: '\f163';
+.view-switch a:before {
+ color: #b4b9be;
display: inline-block;
- float: left;
- font: normal 20px/1 'dashicons';
+ font: normal 20px/1 dashicons;
speak: none;
vertical-align: middle;
- margin-left: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-.view-switch a:hover:before {
+.view-switch a:hover:before,
+.view-switch a:focus:before {
color: #727272;
}
.view-switch a.current:before {
- color: #0074a2;
+ color: #0073aa;
+}
+
+.view-switch .view-list:before {
+ content: "\f163";
+}
+
+.view-switch .view-excerpt:before {
+ content: "\f164";
}
-.view-switch > a + a:before {
- margin-left: 5px;
- content: '\f164';
+.view-switch .view-grid:before {
+ content: "\f509";
}
.filter {
width: 4em;
}
+#posts-filter .wp-filter {
+ margin-bottom: 0;
+}
+
#posts-filter fieldset {
float: left;
margin: 0 1.5ex 1em 0;
.row-actions {
color: #ddd;
font-size: 13px;
- visibility: hidden;
padding: 2px 0 0;
+ position: relative;
+ left: -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 */
padding: 0 0.5em;
}
-#wpbody-content .quick-edit-row-page fieldset.inline-edit-col-right .inline-edit-col {
- border-width: 0 0 0 1px;
- border-style: none none none solid;
-}
-
#wpbody-content .quick-edit-row-post .inline-edit-col-left {
width: 40%;
}
.inline-edit-row fieldset .inline-edit-group {
clear: both;
-}
-
-.inline-edit-row fieldset .inline-edit-group:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
+ line-height: 2.5;
}
.inline-edit-row p.submit {
}
/* Positioning */
-.inline-edit-row h4 {
- margin: .2em 0;
- padding: 0;
- line-height: 23px;
+
+/* 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;
padding: 0;
- line-height: 27px;
}
.inline-edit-row fieldset label,
.inline-edit-row fieldset span.inline-edit-categories-label {
display: block;
margin: .2em 0;
+ 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 {
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: left;
- width: 5em;
+ width: 6em;
+ line-height: 2.5;
+}
+
+#posts-filter fieldset.inline-edit-date legend {
+ padding: 0;
}
-.inline-edit-row fieldset label span.input-text-wrap {
+.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-left: 5em;
+ margin-left: 6em;
}
.quick-edit-row-post fieldset.inline-edit-col-right label span.title {
padding-right: 0.5em;
}
+.inline-edit-row .inline-edit-or {
+ margin: .2em 6px .2em 0;
+ line-height: 2.5;
+}
+
.inline-edit-row .input-text-wrap input[type=text] {
width: 100%;
}
.inline-edit-row fieldset label input[type=checkbox] {
- vertical-align: text-bottom;
+ vertical-align: middle;
}
.inline-edit-row fieldset label textarea {
width: 100%;
height: 4em;
+ vertical-align: top;
}
#wpbody-content .bulk-edit-row fieldset .inline-edit-group label {
width: 6em;
}
-.inline-edit-save .spinner {
- padding: 4px 10px 0;
- vertical-align: top;
- float: right;
-}
-
/* Styling */
-.inline-edit-row h4 {
+.inline-edit-row .inline-edit-legend {
text-transform: uppercase;
}
.inline-edit-row fieldset span.title,
.inline-edit-row fieldset span.checkbox-title {
font-style: italic;
- line-height: 1.8em;
}
/* Specific Elements */
.inline-edit-row fieldset input[name=hh],
.inline-edit-row fieldset input[name=mn] {
font-size: 12px;
- width: 2.1em;
+ width: 2.3em;
}
.inline-edit-row fieldset input[name=aa] {
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-left: 6px;
}
-#update-plugins-table thead th.check-column,
-#update-plugins-table tfoot th.check-column {
- padding-top: 11px;
-}
-
.plugins,
.plugins th,
.plugins td {
border-bottom: 0;
}
-.plugin-update-tr td {
- border-top: 0;
-}
-
.plugins .inactive td,
.plugins .inactive th,
.plugins .active td,
.upgrade .plugins tr:last-of-type td,
.upgrade .plugins tr:last-of-type th,
.plugins tr.active + tr.inactive.update th,
-.plugins tr.active + tr.inactive.update td {
+.plugins tr.active + tr.inactive.update td,
+.plugins .updated td,
+.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 {
- border-left: 4px solid #2ea2cc;
-}
-
-.plugins .active.update th.check-column,
-.plugins .active.update + .plugin-update-tr .plugin-update {
- border-left: 4px solid #d54e21;
+.plugins .active th.check-column,
+.plugin-update-tr.active td {
+ border-left: 4px solid #00a0d2;
}
#wpbody-content .plugins .plugin-title,
white-space:nowrap;
}
+.updates-table-screenshot {
+ float:left;
+ padding: 0 10px 5px 0;
+}
+
.plugins .inactive .plugin-title strong {
font-weight: 400;
}
}
.plugins .update .second,
-.plugins .update .row-actions {
+.plugins .update .row-actions,
+.plugins .updated .second,
+.plugins .updated .row-actions {
padding-bottom: 0;
}
border-top-width: 1px;
}
-.plugin-update-tr .update-message {
- font-size: 13px;
- font-weight: normal;
- margin: 6px 12px 12px;
- padding: 6px 12px;
- margin: 0 10px 8px 31px;
- background-color: #f7f7f7;
- background-color: rgba(0,0,0,0.03);
+.plugins .plugin-update-tr .plugin-update {
+ -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);
+ 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 20px 15px 40px;
}
-.plugin-update-tr .update-message:before {
- color: #d54e21;
- content: '\f463';
+.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 5px 0 -2px;
speak: none;
- margin: 0 8px 0 -2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}
-.plugins .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);
+.plugin-card .updating-message:before {
+ content: "\f463";
+ -webkit-animation: rotation 2s infinite linear;
+ animation: rotation 2s infinite linear;
}
-/* update notices for active plugins */
-tr.active + tr.plugin-update-tr .plugin-update {
- background-color: #f7fcfe;
+@-webkit-keyframes rotation {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
}
-tr.active + tr.plugin-update-tr .plugin-update .update-message {
- background-color: #fcf3ef;
+@keyframes rotation {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
}
-.plugin-install-php h4 {
+.plugin-card .updated-message:before {
+ color: #79ba49;
+ content: "\f147";
+}
+
+.plugin-install-php h2 {
+ clear: both;
+}
+
+.plugin-install-php h3 {
margin: 2.5em 0 8px;
}
+.plugin-install-php .wp-filter {
+ margin-bottom: 0;
+}
+
+/* Plugin card table view */
+.plugin-group {
+ overflow: hidden; /* clearfix */
+ margin-top: 1.5em;
+}
+
+.plugin-group h3 {
+ margin-top: 0;
+}
+
+.plugin-card {
+ float: left;
+ margin: 0 8px 16px;
+ width: 48.5%;
+ width: -webkit-calc( 50% - 8px );
+ width: calc( 50% - 8px );
+ background-color: #fff;
+ border: 1px solid #ddd;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.plugin-card:nth-child(odd) {
+ clear: both;
+ margin-left: 0;
+}
+
+.plugin-card:nth-child(even) {
+ margin-right: 0;
+}
+
+@media screen and ( min-width: 1600px ) {
+ .plugin-card {
+ width: 30%;
+ width: -webkit-calc( 33.1% - 8px );
+ width: calc( 33.1% - 8px );
+ }
+
+ .plugin-card:nth-child(odd) {
+ clear: none;
+ margin-left: 8px;
+ }
+
+ .plugin-card:nth-child(even) {
+ margin-right: 8px;
+ }
+
+ .plugin-card:nth-child(3n+1) {
+ clear: both;
+ margin-left: 0;
+ }
+
+ .plugin-card:nth-child(3n) {
+ margin-right: 0;
+ }
+}
+
+.plugin-card-top {
+ position: relative;
+ padding: 20px 20px 10px;
+ min-height: 135px;
+}
+
+div.action-links,
+.plugin-action-buttons {
+ margin: 0; /* Override existing margins */
+}
+
+.plugin-card h3 {
+ margin: 0 0 12px;
+ font-size: 18px;
+ line-height: 1.3;
+}
+
+.plugin-card .name,
+.plugin-card .desc {
+ margin-left: 148px; /* icon + margin */
+ margin-right: 120px; /* action links */
+}
+
+.plugin-card .action-links {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 120px;
+}
+
+.plugin-action-buttons {
+ clear: right;
+ float: right;
+ margin-left: 2em;
+ margin-bottom: 1em;
+ text-align: right;
+}
+
+.plugin-action-buttons li {
+ margin-bottom: 10px;
+}
+
+.plugin-card-bottom {
+ clear: both;
+ padding: 12px 20px;
+ background-color: #fafafa;
+ border-top: 1px solid #ddd;
+ overflow: hidden;
+}
+
+.plugin-card-bottom .star-rating {
+ display: inline;
+}
+
+.plugin-card-update-failed .update-now {
+ font-weight: 600;
+}
+
+.plugin-card-update-failed .notice-error {
+ margin: 0;
+ padding-left: 16px;
+ -webkit-box-shadow: 0 -1px 0 #ddd;
+ box-shadow: 0 -1px 0 #ddd;
+}
+
+.plugin-card-update-failed .plugin-card-bottom {
+ display: none;
+}
+
+.plugin-card .column-rating {
+ line-height: 23px;
+}
+
+.plugin-card .column-rating,
+.plugin-card .column-updated {
+ margin-bottom: 4px;
+}
+
+.plugin-card .column-rating,
+.plugin-card .column-downloaded {
+ float: left;
+ clear: left;
+ max-width: 180px;
+}
+
+.plugin-card .column-updated,
+.plugin-card .column-compatibility {
+ text-align: right;
+ float: right;
+ clear: right;
+ width: 65%;
+ width: -webkit-calc( 100% - 180px );
+ width: calc( 100% - 180px );
+}
+
+.plugin-card .column-compatibility span:before {
+ font: normal 20px/.5 dashicons;
+ speak: none;
+ display: inline-block;
+ padding: 0;
+ top: 4px;
+ left: -2px;
+ position: relative;
+ vertical-align: top;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-decoration: none !important;
+ color: #444;
+}
+
+.plugin-card .compatibility-incompatible:before {
+ content: "\f158";
+}
+
+.plugin-card .compatibility-compatible:before {
+ content: "\f147";
+}
+
+.plugin-icon {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 128px;
+ height: 128px;
+ margin: 0 20px 20px 0;
+}
+
+.no-plugin-results {
+ color: #666; /* same as no themes and no media */
+ font-size: 18px;
+ font-style: normal;
+ margin: 0;
+ padding: 100px 0 0;
+ text-align: center;
+}
+
/* ms */
/* Background Color for Site Status */
-.wp-list-table .site-deleted {
+.wp-list-table .site-deleted,
+.wp-list-table tr.site-deleted {
background: #ff8573;
}
-.wp-list-table .site-spammed {
+.wp-list-table .site-spammed,
+.wp-list-table tr.site-spammed {
background: #faafaa;
}
-.wp-list-table .site-archived {
+.wp-list-table .site-archived,
+.wp-list-table tr.site-archived {
background: #ffebe8;
}
-.wp-list-table .site-mature {
+.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
-------------------------------------------------------------- */
-/**
- * HiDPI Displays
- */
+@media screen and ( max-width: 1100px ) and ( min-width: 782px ), ( max-width: 480px ) {
+ .plugin-card .action-links {
+ position: static;
+ margin-left: 148px;
+ width: auto;
+ }
+
+ .plugin-action-buttons {
+ float: none;
+ margin: 1em 0 0;
+ text-align: left;
+ }
+
+ .plugin-action-buttons li {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ .plugin-action-buttons li .button {
+ margin-right: 20px;
+ }
+
+ .plugin-card .name,
+ .plugin-card .desc {
+ margin-right: 0;
+ }
+
+ .plugin-card .desc p:first-of-type {
+ margin-top: 0;
+ }
+
+ .fixed .column-date {
+ width: 14%;
+ }
+}
+
@media screen and ( max-width: 782px ) {
/* WP List Table Options & Filters */
.tablenav {
}
.tablenav.top {
- margin: 0;
+ margin: 20px 0 5px 0;
}
.tablenav.bottom {
display: block;
}
- .tablenav.top .actions, .view-switch {
+ .tablenav.top .actions,
+ .tablenav .view-switch {
display: none;
}
+ .view-switch a {
+ width: 36px;
+ height: 36px;
+ line-height: 33px;
+ }
+
/* Pagination */
.tablenav.top .displaying-num {
display: none;
.tablenav.bottom .displaying-num {
position: absolute;
right: 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;
}
height: 0;
}
- .tablenav-pages .pagination-links .paging-input {
- font-size: 18px;
+ .tablenav-pages .pagination-links {
+ font-size: 16px;
}
- .tablenav-pages .pagination-links a {
- padding: 8px 20px 11px;
+ .tablenav-pages .pagination-links a,
+ .tablenav-pages-navspan {
+ padding: 9px 11px 12px;
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 */
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-right: 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 8px 3px 35%;
+ }
+
+ .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before {
+ position: absolute;
+ left: 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: left;
+ }
+
+ #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 {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ #the-comment-list .is-expanded td:last-child {
+ -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);
+ }
+
+ /* Show comment bubble as text instead */
+ .post-com-count .screen-reader-text {
+ position: static;
+ 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;
+ }
+
+ .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-right: 0.5em;
+ }
+
+ .column-response .post-com-count-pending,
+ .column-comments .post-com-count-pending {
+ position: static;
+ height: auto;
+ min-width: 0;
+ padding: 0;
+ border: none;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ background: none;
+ color: #bb2a2a;
+ font-size: inherit;
+ line-height: inherit;
+ text-align: left;
}
- .fixed .column-comments, .widefat .check-column {
- width: 35px
+ .column-response .post-com-count-pending:hover,
+ .column-comments .post-com-count-pending:hover {
+ color: #dc3232;
}
- .widefat thead .check-column, .widefat tfoot .check-column {
- padding: 10px 0 10px;
+ .widefat thead td.check-column,
+ .widefat tfoot td.check-column {
+ padding-top: 10px;
}
.widefat * {
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;
}
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-left: 0;
}
width: 4.5em;
}
- #bulk-titles div {
- margin: 0.8em 0.3em;
- }
-
- #bulk-titles div a {
- height: 22px;
+ .inline-edit-row .inline-edit-or {
+ margin: 0 6px 0 0;
}
- /* Taxonomies */
- .tags .column-posts {
- width: 50px;
+ #edithead .inside,
+ #commentsdiv #edithead .inside {
+ float: none;
+ text-align: left;
+ padding: 3px 5px;
}
- .tags .column-slug {
- width: 30%;
+ #commentsdiv #edithead .inside input,
+ #edithead .inside input {
+ width: 100%;
}
- /* Comments */
- .comments .column-response {
- width: 35%;
+ #edithead label {
+ display: block;
}
- /* Users */
- .users .column-role {
- width: 35%;
+ #bulk-titles div {
+ margin: 0.8em 0.3em;
}
- /* Network admin sites */
- .sites .column-blogname {
- width: 55%;
+ #bulk-titles div a {
+ height: 22px;
}
/* Updates */
- #wpbody-content #update-themes-table .plugin-title {
+ #wpbody-content .updates-table .plugin-title {
width: auto;
+ white-space: normal;
}
/* Links */
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;
- left: 0;
- right: 0;
- width: auto;
- height: 35px;
- }
-
- .wp-list-table.plugins tfoot {
- bottom: -35px;
- top: auto;
+ #wpbody-content .wp-list-table.plugins .column-description {
+ padding-top: 2px;
}
- .active, .inactive {
- padding-top: 0;
+ #wpbody-content .wp-list-table.plugins .plugin-title,
+ #wpbody-content .wp-list-table.plugins .theme-title {
+ padding-right: 12px;
+ white-space: normal;
}
.wp-list-table.plugins .plugin-title,
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 {
+ .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 {
-webkit-box-shadow: none;
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 {
+ .plugins tr.active + tr.inactive th.check-column,
+ .plugins tr.active + tr.inactive td.column-description,
+ .plugins .plugin-update-tr:before {
-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);
}
border-top: none;
}
- .wp-list-table.plugins .column-description {
- padding-top: 0;
- }
-
- .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-right: 12px;
- padding-left: 46px;
- }
-
- .wp-list-table.plugins tr {
- position: relative;
- }
-
- .wp-list-table.plugins th.check-column,
- .wp-list-table.plugins tr.update th.check-column {
- position: absolute;
- height: auto;
- top: 0;
- bottom: 0;
- left: 0;
- padding-left: 2px;
- padding-top: 18px;
+ /* mimic the checkbox th */
+ .plugins .plugin-update-tr:before {
+ content: "";
+ display: table-cell;
}
- .wp-list-table.plugins thead th.check-column,
- .wp-list-table.plugins tfoot th.check-column {
- padding-left: 3px;
- padding-top: 11px;
- background: none;
+ .plugins .active.update + .plugin-update-tr:before {
+ border-left: 4px solid #d54e21;
+ background-color: #fef7f1;
}
- .widefat tbody th.check-column input[type="checkbox"] {
- margin-top: -3px;
- margin-left: 8px;
+ .plugins #the-list .plugin-update-tr .plugin-update {
+ border-left: none;
}
- .wp-list-table.plugins .active .check-column input,
- .wp-list-table.plugins .update .check-column input {
- margin-left: 5px;
+ .plugin-update-tr .update-message {
+ margin-left: 0;
}
- .wp-list-table.plugins thead .check-column input,
- .wp-list-table.plugins tfoot .check-column input {
- margin-top: -6px;
+ .plugins .active.update + .plugin-update-tr:before {
+ background-color: #f7fcfe;
+ border-left: 4px solid #00a0d2;
}
- .wp-list-table.plugins .active th.check-column {
- background: none;
+ .plugins .plugin-update-tr .update-message {
+ margin-left: 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 */
-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-left: 0;
+ margin-right: 0;
+ width: 100%;
+ }
+}
+
+@media screen and ( max-width: 480px ) {
+ .tablenav-pages .current-page {
+ margin: 0;
+ }
+
+ .tablenav-pages .tablenav-paging-text {
+ float: left;
+ width: 100%;
+ padding-top: 0.5em;
+ }
}