diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/common.css --- a/wp/wp-admin/css/common.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/common.css Mon Oct 14 17:39:30 2019 +0200 @@ -71,26 +71,22 @@ /* 2 columns main area */ -#col-container, -#col-left, -#col-right { - overflow: hidden; - padding: 0; - margin: 0; -} - #col-left { + float: left; width: 35%; } #col-right { float: right; - clear: right; width: 65%; } -.col-wrap { - padding: 0 7px; +#col-left .col-wrap { + padding: 0 6px 0 0; +} + +#col-right .col-wrap { + padding: 0 0 0 6px; } /* utility classes */ @@ -114,18 +110,28 @@ clear: both; } +/* modern clearfix */ +.wp-clearfix:after { + content: ""; + display: table; + clear: both; +} + /* Hide visually but not from screen readers */ .screen-reader-text, .screen-reader-text span, .ui-helper-hidden-accessible { - position: absolute; - margin: -1px; - padding: 0; + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); height: 1px; - width: 1px; + margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); - border: 0; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ } .screen-reader-shortcut { @@ -143,10 +149,9 @@ font-weight: 600; padding: 15px 23px 14px; background: #f1f1f1; - color: #21759b; + color: #0073aa; z-index: 100000; line-height: normal; - -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6); box-shadow: 0 0 2px 2px rgba(0,0,0,.6); text-decoration: none; outline: none; @@ -180,7 +185,6 @@ .imgedit-group, .comment-ays { border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04); } @@ -204,13 +208,10 @@ padding: 0; } -html { +body { background: #f1f1f1; -} - -body { color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; min-width: 600px; @@ -243,13 +244,11 @@ line-height: inherit; } +/* Any change to the default link style must be applied to button-link too. */ a { color: #0073aa; - -webkit-transition-property: border, background, color; transition-property: border, background, color; - -webkit-transition-duration: .05s; transition-duration: .05s; - -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } @@ -263,13 +262,12 @@ color: #00a0d2; } -a:focus { +a:focus, +a:focus .media-icon img, +.wp-person a:focus .gravatar { color: #124964; - -webkit-box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: - 0 0 0 1px #5b9dd9, + box-shadow: + 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); } @@ -279,7 +277,6 @@ #adminmenu a:focus, .screen-reader-text:focus { - -webkit-box-shadow: none; box-shadow: none; outline: none; } @@ -293,7 +290,7 @@ blockquote:after, q:before, q:after { - content: ''; + content: ""; content: none; } @@ -323,23 +320,24 @@ } h1 { + color: #23282d; font-size: 2em; margin: .67em 0; } -h2 { - color: #23282d; - font-size: 1.5em; - margin: .83em 0; - font-weight: 400; -} - +h2, h3 { color: #23282d; font-size: 1.3em; margin: 1em 0; } +.update-core-php h2 { + margin-top: 2em; +} + +.update-php h2, +.update-messages h2, h4 { font-size: 1em; margin: 1.33em 0; @@ -432,8 +430,8 @@ .subsubsub a .count, .subsubsub a.current .count { - color: #999; - font-weight: normal; + color: #555d66; /* #f1f1f1 background */ + font-weight: 400; } .subsubsub a.current { @@ -460,7 +458,8 @@ word-wrap: break-word; } -.widefat a { +.widefat a, +.widefat button.button-link { text-decoration: none; } @@ -469,11 +468,13 @@ padding: 8px 10px; } -.widefat thead th { +.widefat thead th, +.widefat thead td { border-bottom: 1px solid #e1e1e1; } -.widefat tfoot th { +.widefat tfoot th, +.widefat tfoot td { border-top: 1px solid #e1e1e1; border-bottom: none; } @@ -494,13 +495,18 @@ line-height: 1.5em; } -.widefat th { +.widefat th, +.widefat thead td, +.widefat tfoot td { text-align: left; line-height: 1.3em; font-size: 14px; } -.widefat th input { +.widefat th input, +.updates-table td input, +.widefat thead td input, +.widefat tfoot td input { margin: 0 0 0 8px; padding: 0; vertical-align: text-top; @@ -512,26 +518,21 @@ vertical-align: top; } -.widefat th input[type=checkbox] { - margin-top: -1px; -} - .widefat tbody th.check-column { padding: 9px 0 22px; } -.widefat.media .check-column { - padding-top: 8px; -} - -.widefat thead th.check-column, +.widefat thead td.check-column, .widefat tbody th.check-column, -.widefat tfoot th.check-column { +.updates-table tbody td.check-column, +.widefat tfoot td.check-column { padding: 11px 0 0 3px; } -.widefat thead th.check-column { - padding-top: 10px; +.widefat thead td.check-column, +.widefat tfoot td.check-column { + padding-top: 4px; + vertical-align: middle; } .update-php div.updated, @@ -559,51 +560,80 @@ margin: 10px 20px 0 2px; } -.attention { - color: #00a0d2; -} - -.wrap h2, -.subtitle { - font-weight: normal; - margin: 0; -} - -.wrap h2 { +.wrap > h2:first-child, /* Back-compat for pre-4.4 */ +.wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */ +.postbox .inside h2, /* Back-compat for pre-4.4 */ +.wrap h1 { font-size: 23px; font-weight: 400; - padding: 9px 15px 4px 0; + margin: 0; + padding: 9px 0 4px 0; line-height: 29px; } +.wrap h1.wp-heading-inline { + display: inline-block; + margin-right: 5px; +} + +.wp-header-end { + visibility: hidden; + margin: -2px 0 0; +} + .subtitle { - color: #777; - font-size: 14px; + margin: 0; padding-left: 25px; -} - -.wrap .add-new-h2, -.wrap .add-new-h2:active { + color: #555d66; + font-size: 14px; + font-weight: 400; + line-height: 1; +} + +.wrap .add-new-h2, /* deprecated */ +.wrap .add-new-h2:active, /* deprecated */ +.wrap .page-title-action, +.wrap .page-title-action:active { margin-left: 4px; padding: 4px 8px; position: relative; top: -3px; text-decoration: none; border: none; - -webkit-border-radius: 2px; + border: 1px solid #ccc; border-radius: 2px; - background: #e0e0e0; + background: #f7f7f7; text-shadow: none; font-weight: 600; font-size: 13px; -} - -.wrap .add-new-h2:hover { + line-height: normal; /* IE8-IE11 need this for buttons */ + color: #0073aa; /* some of these controls are button elements and don't inherit from links */ + cursor: pointer; + outline: 0; +} + +.wrap .wp-heading-inline + .page-title-action { + margin-left: 0; +} + +.wrap .add-new-h2:hover, /* deprecated */ +.wrap .page-title-action:hover { + border-color: #008EC2; background: #00a0d2; color: #fff; } -.wrap h2.long-header { +/* lower specificity: color needs to be overridden by :hover and :active */ +.page-title-action:focus { + color: #124964; +} + +.wrap .page-title-action:focus { + border-color: #5b9dd9; + box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); +} + +.wrap h1.long-header { padding-right: 0; } @@ -617,7 +647,6 @@ div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { border-color: #999; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } @@ -631,6 +660,7 @@ } .striped > tbody > :nth-child(odd), +ul.striped > :nth-child(odd), .alternate { background-color: #f9f9f9; } @@ -640,11 +670,6 @@ border-right-color: #99d; } -.media-upload-form label.form-help, -td.help { - color: #9a9a9a; -} - /* Helper classes for plugins to leverage the active WordPress color scheme */ .highlight { @@ -661,7 +686,7 @@ } .wp-ui-highlight { - color: white; + color: #fff; background-color: #1e8cbe; } .wp-ui-text-highlight { @@ -677,7 +702,7 @@ } .wp-ui-text-icon { - color: #999; + color: #82878c; /* same as new icons */ } /* For emoji replacement images */ @@ -690,7 +715,6 @@ vertical-align: -0.1em !important; background: none !important; padding: 0 !important; - -webkit-box-shadow: none !important; box-shadow: none !important; } @@ -710,7 +734,9 @@ .side-info, #your-profile #rich_editing, .widefat thead th, -.widefat tfoot th { +.widefat thead td, +.widefat tfoot th, +.widefat tfoot td { line-height: 1.4em; } @@ -737,37 +763,59 @@ } /* @todo can we combine these into a class or use an existing dashicon one? */ -#welcome-panel.welcome-panel .welcome-panel-close:before, -.tagchecklist span a:before, +.welcome-panel .welcome-panel-close:before, +.try-gutenberg-panel .try-gutenberg-panel-close:before, +.tagchecklist .ntdelbutton .remove-tag-icon:before, #bulk-titles div a:before, .notice-dismiss:before { background: none; - color: #b4b9be; - content: '\f153'; - display: block !important; - font: normal 16px/1 'dashicons'; + color: #72777c; + content: "\f153"; + display: block; + font: normal 16px/20px dashicons; speak: none; height: 20px; text-align: center; width: 20px; - -webkit-font-smoothing: antialiased !important; -} - -#welcome-panel.welcome-panel .welcome-panel-close:before { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.welcome-panel .welcome-panel-close:before { margin: 0; } -.tagchecklist span a:before, #bulk-titles div a:before { - margin: 2px 0; -} - -#welcome-panel.welcome-panel .welcome-panel-close:hover:before, -.tagchecklist span a:hover:before, -#bulk-titles div a:hover:before { + margin: 1px 0; +} + +.tagchecklist .ntdelbutton .remove-tag-icon:before { + margin-left: 2px; + border-radius: 50%; + color: #0073aa; + /* vertically center the icon cross browsers */ + line-height: 1.28; +} + +.tagchecklist .ntdelbutton:focus { + outline: 0; +} + +.welcome-panel .welcome-panel-close:hover:before, +.welcome-panel .welcome-panel-close:focus:before, +.tagchecklist .ntdelbutton:hover .remove-tag-icon:before, +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before, +#bulk-titles div a:hover:before, +#bulk-titles div a:focus:before { color: #c00; } +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + .key-labels label { line-height: 24px; } @@ -812,13 +860,14 @@ .submitbox .submitdelete, #media-items a.delete, #media-items a.delete-permanently, -#nav-menu-footer .menu-delete { +#nav-menu-footer .menu-delete, +#delete-link a.delete { color: #a00; } abbr.required, +span.required, .file-error, -.widget-control-remove:hover, .row-actions .delete a:hover, .row-actions .trash a:hover, .row-actions .spam a:hover, @@ -828,9 +877,9 @@ .submitbox .submitdelete:hover, #media-items a.delete:hover, #media-items a.delete-permanently:hover, -#nav-menu-footer .menu-delete:hover { - color: #f00; - text-decoration: none; +#nav-menu-footer .menu-delete:hover, +#delete-link a.delete:hover { + color: #dc3232; border: none; } @@ -846,10 +895,19 @@ } #delete-action { + float: left; + line-height: 28px; +} + +#delete-link { line-height: 28px; vertical-align: middle; text-align: left; - float: left; + margin-left: 8px; +} + +#delete-link a { + text-decoration: none; } #publishing-action { @@ -870,6 +928,10 @@ padding: 6px 10px 8px; } +.misc-pub-filename { + word-wrap: break-word; +} + #minor-publishing-actions { padding: 10px 10px 0 10px; text-align: right; @@ -887,26 +949,6 @@ margin-left: 18px; } -.side-info { - margin: 0; - padding: 4px; - font-size: 11px; -} - -.side-info h5 { - padding-bottom: 7px; - font-size: 14px; - margin: 12px 2px 5px; - border-bottom: 1px solid #dadada; -} - -.side-info ul { - margin: 0; - padding-left: 18px; - list-style: square; - color: #666; -} - .approve, .unapproved .unapprove { display: none; @@ -923,17 +965,19 @@ text-align: right; } +#misc-publishing-actions .notice { + margin-left: 10px; + margin-right: 10px; +} + /* Filter bar */ .wp-filter { display: inline-block; position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; margin: 12px 0 25px; - padding: 0 20px; + padding: 0 10px; width: 100%; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04); border: 1px solid #e5e5e5; background: #fff; @@ -957,9 +1001,8 @@ position: relative; top: -1px; padding: 4px 10px; - -webkit-border-radius: 30px; border-radius: 30px; - background: #777; + background: #72777c; color: #fff; font-size: 14px; font-weight: 600; @@ -997,7 +1040,6 @@ } .filter-links .current { - -webkit-box-shadow: none; box-shadow: none; border-bottom: 4px solid #666; color: #23282d; @@ -1035,55 +1077,77 @@ display: inline-block; } -.wp-filter .drawer-toggle { - display: inline-block; - margin: 0 10px; - padding: 4px 6px; +.wp-filter .button.drawer-toggle { + margin: 10px 9px 0; + padding: 0 10px 0 6px; + border-color: transparent; + background-color: transparent; color: #666; - cursor: pointer; + vertical-align: baseline; + box-shadow: none; } .wp-filter .drawer-toggle:before { - display: inline-block; - vertical-align: top; content: "\f111"; margin: 0 5px 0 0; - width: 16px; - height: 16px; - color: #777; - -webkit-transition: color .1s ease-in 0; - transition: color .1s ease-in 0; - font-family: "dashicons"; - font-size: 16px; - line-height: 1; - text-align: center; - text-decoration: inherit; - font-weight: normal; - font-style: normal; + color: #72777c; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; -webkit-font-smoothing: antialiased; -} - -.wp-filter .drawer-toggle:hover, -.wp-filter .drawer-toggle:hover:before { + -moz-osx-font-smoothing: grayscale; +} + +.wp-filter .button.drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before, +.wp-filter .button.drawer-toggle:focus, +.wp-filter .drawer-toggle:focus:before { + background-color: transparent; color: #00a0d2; } +.wp-filter .button.drawer-toggle:hover, +.wp-filter .button.drawer-toggle:focus:active { + border-color: transparent; +} + +.wp-filter .button.drawer-toggle:focus { + border-color: #5b9dd9; +} + +.wp-filter .button.drawer-toggle:active { + background: transparent; + box-shadow: none; + -webkit-transform: none; + transform: none; +} + .wp-filter .drawer-toggle.current:before { color: #fff; } -.filter-drawer { +.filter-drawer, +.wp-filter .favorites-form { display: none; - margin: 0 -20px; + margin: 0 -10px 0 -20px; padding: 20px; border-top: 1px solid #eee; background: #fafafa; -} - -.show-filters .filter-drawer { + overflow: hidden; +} + +.show-filters .filter-drawer, +.show-favorites-form .favorites-form { display: block; - overflow: hidden; - width: 100%; +} + +.show-filters .filter-links a.current { + border-bottom: none; +} + +.show-filters .wp-filter .button.drawer-toggle { + border-radius: 2px; + background: #72777c; + color: #fff; } .show-filters .wp-filter .drawer-toggle:hover, @@ -1091,60 +1155,63 @@ background: rgb(46, 162, 204); } -.show-filters .filter-links a.current { - border-bottom: none; -} - -.show-filters .wp-filter .drawer-toggle { - -webkit-border-radius: 2px; - border-radius: 2px; - border: none; - background: #777; - color: #fff; -} - .show-filters .wp-filter .drawer-toggle:before { color: #fff; } .filter-group { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + position: relative; float: left; margin: 0 1% 0 0; - padding: 10px; + padding: 20px 10px 10px; width: 24%; background: #fff; border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04); } -.filter-group h4 { - position: relative; +.filter-group legend { + position: absolute; + top: 10px; + display: block; margin: 0; -} - -.filter-drawer ol { - margin: 20px 0 0; + padding: 0; + font-size: 1em; + font-weight: 600; +} + +.filter-drawer .filter-group-feature { + margin: 28px 0 0; list-style-type: none; font-size: 12px; } -.filter-drawer li { - display: inline-block; - vertical-align: top; - margin: 5px 0; - padding-right: 25px; - width: 160px; - list-style-type: none; +.filter-drawer .filter-group-feature input, +.filter-drawer .filter-group-feature label { + line-height: 16px; +} + +.filter-drawer .filter-group-feature input { + position: absolute; + margin: 0; +} + +.filter-group .filter-group-feature label { + display: block; + margin: 14px 0px 14px 23px; } .filter-drawer .buttons { + clear: both; margin-bottom: 20px; } +.filter-drawer .filter-group + .buttons { + margin-bottom: 0; + padding-top: 20px; +} + .filter-drawer .buttons .button span { display: inline-block; opacity: 0.8; @@ -1157,6 +1224,11 @@ margin-left: 10px; } +.wp-filter .button-link.edit-filters { + padding: 0 5px; + line-height: 28px; +} + .filtered-by { display: none; margin: 0; @@ -1178,7 +1250,6 @@ margin: 0 5px; padding: 4px 8px; border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04); background: #fff; font-size: 11px; @@ -1198,6 +1269,7 @@ padding: 20px; } +.show-filters .favorites-form, .show-filters .content-filterable, .show-filters.filters-applied.loading-content .content-filterable, .loading-content .content-filterable, @@ -1276,13 +1348,17 @@ div.error { background: #fff; border-left: 4px solid #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); margin: 5px 15px 2px; padding: 1px 12px; } +div[class="update-message"] { /* back-compat for pre-4.6 */ + padding: 0.5em 12px 0.5em 0; +} + .notice p, +.notice-title, div.updated p, div.error p, .form-table td .notice p { @@ -1290,6 +1366,28 @@ padding: 2px; } +.error a { + text-decoration: underline; +} + +.updated a { + padding-bottom: 2px; +} + +.notice-alt { + box-shadow: none; +} + +.notice-large { + padding: 10px 20px; +} + +.notice-title { + display: inline-block; + color: #23282d; + font-size: 18px; +} + .wp-core-ui .notice.is-dismissible { padding-right: 38px; position: relative; @@ -1303,17 +1401,10 @@ margin: 0; padding: 9px; background: none; - color: #b4b9be; + color: #72777c; cursor: pointer; } -.notice-dismiss:before { - position: relative; - top: 0; - left: 0; - line-height: 20px; -} - .notice-dismiss:hover:before, .notice-dismiss:active:before, .notice-dismiss:focus:before { @@ -1322,9 +1413,7 @@ .notice-dismiss:focus { outline: none; - -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); - color: #c00; } .ie8 .notice-dismiss:focus { @@ -1333,20 +1422,51 @@ .notice-success, div.updated { - border-color: #7ad03a; + border-left-color: #46b450; +} + +.notice-success.notice-alt { + background-color: #ecf7ed; } .notice-warning { - border-color: #ffba00; + border-left-color: #ffb900; +} + +.notice-warning.notice-alt { + background-color: #fff8e5; } .notice-error, div.error { - border-color: #dd3d36; + border-left-color: #dc3232; +} + +.notice-error.notice-alt { + background-color: #fbeaea; } .notice-info { - border-color: #00a0d2; + border-left-color: #00a0d2; +} + +.notice-info.notice-alt { + background-color: #e5f5fa; +} + +.update-message p:before, +.updating-message p:before, +.updated-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; } .wrap .notice, @@ -1357,6 +1477,61 @@ margin: 5px 0 15px; } +.wrap #templateside .notice { + display: block; + margin: 0; + padding: 5px 8px; + font-weight: 600; + text-decoration: none; +} + +.wrap #templateside span.notice { + margin-left: -12px; +} + +#templateside li.notice a { + padding: 0; +} + +/* Update icon. */ +.update-message p:before, +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + color: #f56e28; + content: "\f463"; +} + +/* Spins the update icon. */ +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; +} + +/* Updated icon (check mark). */ +.updated-message p:before, +.installed p:before, +.button.updated-message:before { + color: #79ba49; + content: '\f147'; +} + +/* Error icon. */ +.update-message.notice-error p:before { + color: #dc3232; + content: "\f534"; +} + +.wrap .notice p:before, +.import-php .updating-message:before { + margin-right: 6px; + vertical-align: bottom; +} + #update-nag, .update-nag { display: inline-block; @@ -1367,14 +1542,9 @@ margin: 25px 20px 0 2px; background-color: #fff; border-left: 4px solid #ffba00; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); } -.update-message { - color: #000; -} - ul#dismissed-updates { display: none; } @@ -1406,6 +1576,37 @@ margin-left: 2em; } +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + margin: 3px 5px 0 -2px; +} + +.button-primary.updating-message:before { + color: #fff; +} + +.button-primary.updated-message:before { + color: #66c6e4; +} + +.button.updated-message { + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +@media aural { + .wrap .notice p:before, + .button.installing:before, + .button.installed:before, + .update-message p:before { + speak: none; + } +} + + /* @todo: this does not need its own section anymore */ /*------------------------------------------------------------------------------ 6.0 - Admin Header @@ -1432,22 +1633,10 @@ margin-left: 0 !important; } -#screen-meta .screen-reader-text { - visibility: hidden; -} - #screen-meta-links { margin: 0 20px 0 0; } -#screen-meta-links a { - padding: 3px 6px 3px 16px; -} - -#screen-meta-links a:focus { - outline: none; -} - /* screen options and help tabs revert */ #screen-meta { display: none; @@ -1456,7 +1645,6 @@ background-color: #fff; border: 1px solid #ddd; border-top: none; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.025); box-shadow: 0 1px 0 rgba(0,0,0,.025); } @@ -1468,7 +1656,6 @@ border: 1px solid #ddd; border-top: none; background: #fff; - -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); } @@ -1477,29 +1664,31 @@ top: 0; } -#screen-meta-links a { - color: #777; -} - -#screen-meta-links a:hover, -#screen-meta-links a:active, -#screen-meta-links a:focus { +#screen-meta-links .show-settings { + border: 0; + background: none; + border-radius: 0; + color: #72777c; + line-height: 1.7; + padding: 3px 6px 3px 16px; +} + +#screen-meta-links .show-settings:hover, +#screen-meta-links .show-settings:active, +#screen-meta-links .show-settings:focus { color: #32373c; } -#screen-meta-links a.show-settings { - display: block; - font-size: 13px; - height: 22px; - line-height: 22px; - text-decoration: none; - z-index: 1; -} - -#screen-meta-links a:after { +#screen-meta-links .show-settings:active { + box-shadow: none; + -webkit-transform: none; + transform: none; +} + +#screen-meta-links .show-settings:after { right: 0; - content: '\f140'; - font: normal 20px/1 'dashicons'; + content: "\f140"; + font: normal 20px/1 dashicons; speak: none; display: inline-block; padding: 0 5px 0 0; @@ -1509,16 +1698,13 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #b4b9be; -} - -#screen-meta-links a.screen-meta-active:after { - content: '\f142'; -} - -#screen-meta-links a.show-settings:hover { - text-decoration: none; -} + color: #72777c; +} + +#screen-meta-links .screen-meta-active:after { + content: "\f142"; +} + /* end screen options and help tabs */ .toggle-arrow { @@ -1534,10 +1720,17 @@ background-position: bottom left; } -#screen-options-wrap h5, +#screen-options-wrap h5, /* Back-compat for old plugins */ +#screen-options-wrap legend, #contextual-help-wrap h5 { - margin: 8px 0; - font-size: 13px; + margin: 0; + padding: 8px 0; + font-size: 13px; + font-weight: 600; +} + +.ie8 #screen-options-wrap legend { + color: inherit; } .metabox-prefs label { @@ -1546,27 +1739,30 @@ line-height: 30px; } -.metabox-prefs label input[type=checkbox] { - margin-top: -4px; +#number-of-columns { + display: inline-block; + vertical-align: middle; + line-height: 30px; +} + +.metabox-prefs input[type=checkbox] { + margin-top: 0; margin-right: 6px; } -.metabox-prefs label input { - margin: 0 5px 0 2px; +.metabox-prefs label input, +.metabox-prefs label input[type=checkbox] { + margin: -4px 5px 0 0; } .metabox-prefs .columns-prefs label input { - margin: 0 2px; + margin: -1px 2px 0 0; } .metabox-prefs label a { display: none; } -.metabox-prefs .screen-options { - padding-top: 10px; -} - .metabox-prefs .screen-options input, .metabox-prefs .screen-options label { margin-top: 0; @@ -1583,6 +1779,15 @@ padding-right: 0; } +.screen-options + .screen-options { + margin-top: 10px; +} + +.metabox-prefs .submit { + margin-top: 1em; + padding: 0; +} + /*------------------------------------------------------------------------------ 6.2 - Help Menu ------------------------------------------------------------------------------*/ @@ -1610,7 +1815,6 @@ #contextual-help-wrap.no-sidebar #contextual-help-back { right: 0; border-right-width: 0; - -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } @@ -1651,7 +1855,6 @@ margin: 0 -1px 0 0; border-left: 2px solid #00a0d2; background: #f6fbfd; - -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02); box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02); } @@ -1693,8 +1896,6 @@ html.wp-toolbar { padding-top: 32px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -1703,12 +1904,16 @@ color: #555; } -.widefat th { - font-weight: normal; +.widefat th, +.widefat thead td, +.widefat tfoot td { + font-weight: 400; } .widefat thead tr th, -.widefat tfoot tr th { +.widefat thead tr td, +.widefat tfoot tr th, +.widefat tfoot tr td { color: #32373c; } @@ -1726,14 +1931,17 @@ margin: 0.6em 0; } +.widefat .column-comment ul { + list-style: initial; + margin-left: 2em; +} + /* Screens with postboxes */ .postbox-container { float: left; } .postbox-container .meta-box-sortables { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -1744,6 +1952,23 @@ .metabox-holder .postbox-container .empty-container { border: 3px dashed #b4b9be; height: 250px; + position: relative; +} + +.metabox-holder .postbox-container .empty-container:after { + content: attr(data-emptystring); + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + height: 1em; + width: 200px; + text-align: center; + color: #ccc; + font-size:18px; + display: none; } .metabox-holder.columns-1 .postbox-container .empty-container, @@ -1787,17 +2012,23 @@ .hndle a { font-size: 11px; - font-weight: normal; + font-weight: 400; } .postbox .handlediv { + display: none; float: right; - width: 27px; - height: 30px; + width: 36px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; } .js .postbox .handlediv { - cursor: pointer; + display: block; } .sortable-placeholder { @@ -1840,7 +2071,6 @@ .postbox.closed h3 { border: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -1849,7 +2079,6 @@ } .postbox table.widefat { - -webkit-box-shadow: none; box-shadow: none; } @@ -1858,7 +2087,7 @@ } .columns-prefs label { - padding: 0 5px; + padding: 0 10px 0 0; } /* @todo: what is this doing here */ @@ -1888,7 +2117,7 @@ left: 0; right: 0; padding: 10px 20px; - color: #777; + color: #555d66; } #wpfooter p { @@ -1901,61 +2130,80 @@ font-style: italic; } -#wpfooter a { - text-decoration: none; -} - -#wpfooter a:hover { - text-decoration: underline; -} - /*------------------------------------------------------------------------------ 25.0 - Tabbed Admin Screen Interface (Experimental) ------------------------------------------------------------------------------*/ .nav-tab { + float: left; border: 1px solid #ccc; border-bottom: none; - background: #e4e4e4; + margin-left: 0.5em; /* half the font size so set the font size properly */ + padding: 5px 10px; + font-size: 14px; + line-height: 24px; + font-weight: 600; + background: #e5e5e5; color: #555; + text-decoration: none; + white-space: nowrap; +} + +h3 .nav-tab, /* Back-compat for pre-4.4 */ +.nav-tab-small .nav-tab { + padding: 5px 14px; font-size: 12px; line-height: 16px; - display: inline-block; - padding: 4px 14px 6px; - text-decoration: none; - margin: -4px 4px -1px 0; -} - -.nav-tab:hover { +} + +.nav-tab:hover, +.nav-tab:focus { background-color: #fff; - color: #464646; + color: #444; +} + +.nav-tab-active, +.nav-tab:focus:active { + box-shadow: none; } .nav-tab-active { - color: #464646; + margin-bottom: -1px; + color: #444; } .nav-tab-active, -.nav-tab-active:hover { +.nav-tab-active:hover, +.nav-tab-active:focus, +.nav-tab-active:focus:active { border-bottom: 1px solid #f1f1f1; background: #f1f1f1; color: #000; } -h2.nav-tab-wrapper, -h3.nav-tab-wrapper { +h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ +.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */ +.nav-tab-wrapper { border-bottom: 1px solid #ccc; + margin: 0; + padding-top: 9px; padding-bottom: 0; - padding-left: 10px; -} - -h2 .nav-tab { - padding: 6px 10px; - font-weight: bold; - font-size: 15px; - line-height: 24px; -} - + line-height: inherit; +} + +/* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */ +.nav-tab-wrapper:not(.wp-clearfix):after { + content: ""; + display: table; + clear: both; + } + +.ie8 .nav-tab-wrapper { + /* contain floats establishing a new block formatting context */ + display: inline-block; + width: 100%; + vertical-align: top; +} /*------------------------------------------------------------------------------ 26.0 - Misc @@ -1963,7 +2211,6 @@ .spinner { background: url(../images/spinner.gif) no-repeat; - -webkit-background-size: 20px 20px; background-size: 20px 20px; display: inline-block; visibility: hidden; @@ -1976,21 +2223,41 @@ margin: 4px 10px 0; } -.spinner.is-active { +.spinner.is-active, +.loading-content .spinner { visibility: visible; } -#template div { - margin-right: 190px; -} - -.metabox-holder h3 { +#template > div { + margin-right: 16em; +} +#template .notice { + margin-top: 1em; + margin-right: 3%; +} +#template .notice p { + width: auto; +} +#template .submit .spinner { + float: none; +} + +.metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ +.metabox-holder h2.hndle { font-size: 14px; padding: 8px 12px; margin: 0; line-height: 1.4; } +/* Back-compat for nav-menus screen */ +.nav-menus-php .metabox-holder h3 { + padding: 10px 10px 11px 14px; + line-height: 21px; +} + #templateside ul li a { text-decoration: none; } @@ -2006,8 +2273,9 @@ text-align: left; } +.attention, .error-message { - color: red; + color: #dc3232; font-weight: 600; } @@ -2027,21 +2295,13 @@ /* - Only used once or twice in all of WP - deprecate for global style ------------------------------------------------------------------------------*/ -td.media-icon { +.media-icon { + width: 62px; /* icon + border */ text-align: center; - width: 80px; - padding-top: 8px; - padding-bottom: 8px; -} - -td.media-icon img { - max-width: 80px; - max-height: 60px; - width: auto; - height: auto; -} - -td.image-icon img { +} + +.media-icon img { + border: 1px solid #e5e5e5; border: 1px solid rgba(0, 0, 0, 0.07); } @@ -2051,20 +2311,58 @@ display: block; } -.importers td { - padding-right: 14px; -} - .importers { font-size: 16px; width: auto; } -#post-body #post-body-content #namediv h3 { +.importers td { + padding-right: 14px; + line-height: 1.5em; +} + +.importers .import-system { + max-width: 250px; +} + +.importers td.desc { + max-width: 500px; +} + +.importer-title, +.importer-desc, +.importer-action { + display: block; +} + +.importer-title { + color: #000; + font-size: 14px; + font-weight: 400; + margin-bottom: .2em; +} + +.importer-action { + line-height: 20px; /* Same as with .updating-message */ + color: #555; + margin-bottom: 1em; +} + +#post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */ +#post-body #post-body-content #namediv h2 { margin-top: 0; } -#namediv h3 label { +.edit-comment-author { + font-size: 14px; + line-height: 1.4; + font-weight: 600; + color: #222; + margin: 2px 0 0 9px; +} + +#namediv h3 label, /* Back-compat for pre-4.4 */ +#namediv h2 label { vertical-align: baseline; } @@ -2153,37 +2451,35 @@ -webkit-font-smoothing: antialiased; font-size: 20px; line-height: 1; - font-family: 'dashicons'; + font-family: dashicons; text-decoration: inherit; - font-weight: normal; + font-weight: 400; font-style: normal; vertical-align: top; - -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; text-align: center; color: #ffb900; } .star-rating .star-full:before { - content:'\f155'; + content: "\f155"; } .star-rating .star-half:before { - content:'\f459'; + content: "\f459"; } .rtl .star-rating .star-half { -webkit-transform: rotateY(180deg); - -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .star-rating .star-empty:before { - content:'\f154'; + content: "\f154"; } div.action-links { - font-weight: normal; + font-weight: 400; margin: 6px 0 0; } @@ -2206,53 +2502,45 @@ } #plugin-information-title { - padding: 0 20px; + padding: 0 26px; background: #f5f5f5; font-size: 22px; font-weight: 600; line-height: 56px; position: relative; - top: 0; - right: 0; - left: 0; height: 56px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } #plugin-information-title.with-banner { margin-right: 0; height: 250px; - bottom: 250px; - -webkit-background-size: cover; background-size: cover; } #plugin-information-title h2 { font-size: 1em; - font-weight: bold; + font-weight: 600; padding: 0; margin: 0; - max-width: 680px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #plugin-information-title.with-banner h2 { + position: relative; font-family: "Helvetica Neue", sans-serif; display: inline-block; font-size: 30px; line-height: 50px; + box-sizing: border-box; + max-width: 100%; padding: 0 15px; - margin: 174px 0 0 10px; + margin-top: 174px; color: #fff; background: rgba( 30, 30, 30, 0.9 ); text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 ); - -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 ); box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 ); - -webkit-border-radius: 8px; border-radius: 8px; } @@ -2261,14 +2549,13 @@ } #plugin-information-title.with-banner div.vignette { + position: absolute; display: block; - float: right; top: 0; + left: 0; height: 250px; - width: 772px; - margin: 0 -20px; + width: 100%; background: transparent; - -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 ); box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 ); } @@ -2277,7 +2564,8 @@ position: relative; right: 0; left: 0; - height: 36px; + min-height: 36px; + font-size: 0; z-index: 1; border-bottom: 1px solid #ddd; background: #f3f3f3; @@ -2285,19 +2573,18 @@ #plugin-information-tabs a { position: relative; - float: left; + display: inline-block; padding: 9px 10px; margin: 0; height: 18px; line-height: 18px; font-size: 14px; text-decoration: none; - -webkit-transition: none; transition: none; } #plugin-information-tabs a.current { - margin: 0 -1px 0; + margin: 0 -1px -1px; background: #fff; border: 1px solid #ddd; border-bottom-color: #fff; @@ -2324,13 +2611,11 @@ left: 0; min-height: 100%; /* Height of title + tabs + install now */ - min-height: -webkit-calc( 100% - 152px ); min-height: calc( 100% - 152px ); } #plugin-information-content.with-banner { /* Height of banner + tabs + install now */ - min-height: -webkit-calc( 100% - 346px ); min-height: calc( 100% - 346px ); } @@ -2342,7 +2627,7 @@ left: 0; margin-right: 250px; /* FYI box */ padding: 10px 26px; - margin-bottom: -99930px; /* a bit less than the padding below to accommodate footer */ + margin-bottom: -99939px; /* 60px less than the padding below to accommodate footer */ padding-bottom: 99999px; /* equal height column trick */ } @@ -2351,13 +2636,12 @@ } #plugin-information .fyi { - display: block; float: right; position: relative; top: 0; right: 0; padding: 16px; - margin-bottom: -99930px; /* slightly less than the padding below to accommodate footer */ + margin-bottom: -99939px; /* 60px less than the padding below to accommodate footer */ padding-bottom: 99999px; /* equal height column trick */ width: 217px; border-left: 1px solid #ddd; @@ -2366,11 +2650,11 @@ } #plugin-information .fyi strong { - color: #464646; + color: #444; } #plugin-information .fyi h3 { - font-weight: bold; + font-weight: 600; text-transform: uppercase; font-size: 12px; color: #666; @@ -2393,6 +2677,10 @@ margin: 0 0 10px; } +#plugin-information .fyi-description { + margin-top: 0; +} + #plugin-information .counter-container { margin: 3px 0; } @@ -2406,7 +2694,7 @@ #plugin-information .counter-back { height: 17px; width: 92px; - background-color: #ececec; + background-color: #e5e5e5; float: left; } @@ -2442,12 +2730,12 @@ } #plugin-information-footer { - padding: 15px 16px; + padding: 13px 16px; position: absolute; right: 0; bottom: 0; left: 0; - height: 28px; + height: 33px; /* 33+13+13+1=60 */ border-top: 1px solid #ddd; background: #f3f3f3; } @@ -2481,7 +2769,6 @@ max-width: 100%; width: auto; height: auto; - -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); } @@ -2497,12 +2784,20 @@ border: 1px solid #ccc; } +#plugin-information blockquote { + border-left: 2px solid #ddd; + color: #666; + font-style: italic; + margin: 1em 0; + padding: 0 0 0 1em; +} + /* rtl:ignore */ #plugin-information .review { overflow: hidden; /* clearfix */ width: 100%; margin-bottom: 20px; - border-bottom: 1px solid #e6e6e6; + border-bottom: 1px solid #e5e5e5; } #plugin-information .review-title-section { @@ -2549,10 +2844,14 @@ font-size: 13px; } +/* For non-js plugin installation screen ticket #36430. */ +.update-php .button.button-primary { + margin-right: 1em; +} + @media screen and ( max-width: 771px ) { #plugin-information-title.with-banner { height: 100px; - bottom: 100px; } #plugin-information-title.with-banner h2 { @@ -2564,8 +2863,6 @@ #plugin-information-title.with-banner div.vignette { height: 100px; - bottom: 100px; - width: 800%; } #plugin-information-tabs { @@ -2591,7 +2888,7 @@ #section-holder { position: static; margin: 0; - padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */ + padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */ } #plugin-information .fyi h3, @@ -2605,101 +2902,73 @@ } } -/* Thickbox for Plugin Install screen */ -body.plugin-install-php #TB_window, -body.import-php #TB_window, -body.plugins-php #TB_window, -body.update-core-php #TB_window, -body.index-php #TB_window { - background: #fcfcfc url( ../images/spinner.gif ) no-repeat center; +/* Thickbox for the Plugin details modal. */ +#TB_window.plugin-details-modal { + background: #fcfcfc; +} + +#TB_window.plugin-details-modal.thickbox-loading:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + margin: -10px 0 0 -10px; + background: #fcfcfc url(../images/spinner.gif) no-repeat center; + background-size: 20px 20px; + -webkit-transform: translateZ(0); + transform: translateZ(0); } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - body.plugin-install-php #TB_window, - body.import-php #TB_window, - body.plugins-php #TB_window, - body.update-core-php #TB_window, - body.index-php #TB_window { - background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; + #TB_window.plugin-details-modal.thickbox-loading:before { + background-image: url(../images/spinner-2x.gif); } } -body.plugin-install-php #TB_title, -body.import-php #TB_title, -body.plugins-php #TB_title, -body.update-core-php #TB_title, -body.index-php #TB_title { +.plugin-details-modal #TB_title { float: left; height: 1px; } -body.plugin-install-php #TB_ajaxWindowTitle, -body.import-php #TB_ajaxWindowTitle, -body.plugins-php #TB_ajaxWindowTitle, -body.update-core-php #TB_ajaxWindowTitle, -body.index-php #TB_ajaxWindowTitle { +.plugin-details-modal #TB_ajaxWindowTitle { display: none; } -body.plugin-install-php .tb-close-icon, -body.import-php .tb-close-icon, -body.plugins-php .tb-close-icon, -body.update-core-php .tb-close-icon, -body.index-php .tb-close-icon { +.plugin-details-modal #TB_closeWindowButton { left: auto; right: -30px; color: #eee; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -body.plugin-install-php #TB_closeWindowButton:focus, -body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon, -body.plugin-install-php .tb-close-icon:focus, -body.plugin-install-php .tb-close-icon:hover, -body.import-php #TB_closeWindowButton:focus, -body.import-php #TB_closeWindowButton:focus .tb-close-icon, -body.import-php .tb-close-icon:focus, -body.import-php .tb-close-icon:hover, -body.plugins-php #TB_closeWindowButton:focus, -body.plugins-php #TB_closeWindowButton:focus .tb-close-icon, -body.plugins-php .tb-close-icon:focus, -body.plugins-php .tb-close-icon:hover, -body.update-core-php #TB_closeWindowButton:focus, -body.update-core-php #TB_closeWindowButton:focus .tb-close-icon, -body.update-core-php .tb-close-icon:focus, -body.update-core-php .tb-close-icon:hover, -body.index-php #TB_closeWindowButton:focus, -body.index-php #TB_closeWindowButton:focus .tb-close-icon, -body.index-php .tb-close-icon:focus, -body.index-php .tb-close-icon:hover { +} + +.plugin-details-modal #TB_closeWindowButton:hover, +.plugin-details-modal #TB_closeWindowButton:focus { color: #00a0d2; outline: none; - -webkit-box-shadow: none; box-shadow: none; } -body.plugin-install-php .tb-close-icon:before, -body.import-php .tb-close-icon:before, -body.plugins-php .tb-close-icon:before, -body.update-core-php .tb-close-icon:before, -body.index-php .tb-close-icon:before { +.plugin-details-modal .tb-close-icon { + display: none; +} + +.plugin-details-modal #TB_closeWindowButton:after { content: "\f335"; - font-size: 32px; + font: normal 32px/29px 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /* move plugin install close icon to top on narrow screens */ @media screen and ( max-width: 830px ) { - body.plugin-install-php .tb-close-icon, - body.import-php .tb-close-icon, - body.plugins-php .tb-close-icon, - body.update-core-php .tb-close-icon, - body.index-php .tb-close-icon { + .plugin-details-modal #TB_closeWindowButton { right: 0; top: -30px; } @@ -2710,63 +2979,53 @@ border: none; } -/* Header */ -/* @todo: are these also specific to Press This? */ -#wphead { - border-bottom: 1px solid #dfdfdf; -} - -#wphead h1 a { - color: #464646; -} - -/* @todo: these seem misplaced */ -.js .meta-box-sortables .postbox:hover .handlediv { - margin-right: 0 !important; -} - /* Metabox collapse arrow indicators */ -.js .sidebar-name .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox .handlediv:before { - right: 12px; - font: normal 20px/1 'dashicons'; +.sidebar-name .toggle-indicator:before, +.js .meta-box-sortables .postbox .toggle-indicator:before, +.bulk-action-notice .toggle-indicator:before, +.privacy-text-box .toggle-indicator:before { + content: "\f142"; + display: inline-block; + font: normal 20px/1 dashicons; speak: none; - display: inline-block; - padding: 8px 10px; - top: 0; - position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; } -.js #widgets-left .sidebar-name .sidebar-name-arrow { - display: none; -} - -.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow, -.js #widgets-left .sidebar-name:hover .sidebar-name-arrow { - display: block; -} - -/* Show the arrow only on hover */ -.js .sidebar-name .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox .handlediv:before { - content: '\f142'; -} - -.js .widgets-holder-wrap.closed .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox.closed .handlediv:before { - content: '\f140'; -} - -.error a { - text-decoration: underline; -} - -.updated a { - text-decoration: none; - padding-bottom: 2px; +.js .widgets-holder-wrap.closed .toggle-indicator:before, +.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before, +.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before, +.privacy-text-box.closed .toggle-indicator:before { + content: "\f140"; +} + +.js .postbox .handlediv .toggle-indicator:before { + margin-top: 4px; + width: 20px; + border-radius: 50%; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.rtl.js .postbox .handlediv .toggle-indicator:before { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.bulk-action-notice .toggle-indicator:before { + line-height: 16px; + vertical-align: top; + color: #72777c; +} + +.js .postbox .handlediv:focus { + box-shadow: none; + outline: none; +} + +.js .postbox .handlediv:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } /* @todo: appears to be Press This only and overridden */ @@ -2775,16 +3034,167 @@ } /* Theme/Plugin Editor */ -.alignleft h3 { +.alignleft h2 { margin: 0; } #template textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; - width: 97%; background: #f9f9f9; - outline: none; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +#template textarea, +#template .CodeMirror { + width: 100%; + min-height: 60vh; + height: calc( 100vh - 295px ); + border: 1px solid #ddd; + box-sizing: border-box; +} + +#templateside > h2 { + padding-top: 6px; + padding-bottom: 7px; + margin: 0; +} + +#templateside ol, +#templateside ul { + margin: 0; + padding: 0; +} +#templateside > ul { + box-sizing: border-box; + margin-top: 0; + overflow: auto; + padding: 0; + min-height: 60vh; + height: calc(100vh - 295px); + background-color: #f7f7f7; + border: 1px solid #ddd; + border-left: none; +} +#templateside ul ul { + padding-left: 12px; +} +#templateside > ul > li > ul[role=group] { + padding-left: 0; +} + +/* + * Styles for Theme and Plugin editors. + */ + +/* Hide collapsed items. */ +[role="treeitem"][aria-expanded="false"] > ul { + display: none; +} + +/* Use arrow dashicons for folder states, but hide from screen readers. */ +[role="treeitem"] span[aria-hidden] { + display: inline; + font-family: dashicons; + font-size: 20px; + position: absolute; + pointer-events: none; +} +[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after { + content: "\f139"; +} +[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after { + content: "\f140"; +} +[role="treeitem"] .folder-label { + display: block; + padding: 3px 3px 3px 12px; + cursor: pointer; +} + +/* Remove outline, and create our own focus and hover styles */ +[role="treeitem"] { + outline: 0; +} +[role="treeitem"] .folder-label.focus { + color: #124964; + box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); +} +[role="treeitem"].hover, +[role="treeitem"] .folder-label.hover { + background-color: #eaeaea; +} + +.tree-folder { + margin: 0; + position: relative; +} +[role="treeitem"] li { + position: relative; +} + +/* Styles for folder indicators/depth */ +.tree-folder .tree-folder::after { + content: ' '; + display: block; + position: absolute; + left: 2px; + border-left: 1px solid #ccc; + top: -13px; + bottom: 10px; +} +.tree-folder > li::before { + content: ' '; + position: absolute; + display: block; + border-left: 1px solid #ccc; + left: 2px; + top: -5px; + height: 18px; + width: 7px; + border-bottom: 1px solid #ccc; +} +.tree-folder > li::after { + content: ' '; + position: absolute; + display: block; + border-left: 1px solid #ccc; + left: 2px; + bottom: -7px; + top: 0; +} + +/* current-file needs to adjustment for .notice styles */ +#templateside .current-file { + margin: -4px 0 -2px; +} +.tree-folder > .current-file::before { + left: 4px; + height: 15px; + width: 0px; + border-left: none; + top: 3px; +} +.tree-folder > .current-file::after { + bottom: -4px; + height: 7px; + left: 2px; + top: auto; +} + +/* Lines shouldn't continue on last item */ +.tree-folder > li:last-child::after, +.tree-folder li:last-child > .tree-folder::after { + display: none; +} + + +#theme-plugin-editor-label { + display: inline-block; + margin-bottom: 1em; + font-weight: 600; } /* rtl:ignore */ @@ -2793,17 +3203,43 @@ direction: ltr; } +.fileedit-sub #theme, +.fileedit-sub #plugin { + max-width: 40%; +} +.fileedit-sub .alignright { + text-align: right; +} + #template p { width: 97%; } +#file-editor-linting-error { + margin-top: 1em; + margin-bottom: 1em; +} +#file-editor-linting-error > .notice { + margin: 0; + display: inline-block; +} +#file-editor-linting-error > .notice > p { + width: auto; +} +#template .submit { + margin-top: 1em; + padding: 0; +} + +#template .submit input[type=submit][disabled] { + cursor: not-allowed; +} #templateside { float: right; - width: 190px; + width: 16em; word-wrap: break-word; } -#templateside h3, #postcustomstuff p.submit { margin: 0; } @@ -2812,30 +3248,32 @@ margin: 1em 0 0; } -#templateside ol, -#templateside ul { - margin: .5em 0; - padding: 0; -} - #templateside li { margin: 4px 0; } -#templateside li a, +#templateside li:not(.howto) a, .theme-editor-php .highlight { display: block; - padding: 3px 3px 3px 12px; + padding: 3px 0 3px 12px; text-decoration: none; } +#templateside li:not(.howto) > a:first-of-type { + padding-top: 0; +} + +#templateside li.howto { + padding: 6px 12px 12px 12px; +} + .theme-editor-php .highlight { margin: -3px 3px -3px -12px; } #templateside .highlight { border: none; - font-weight: bold; + font-weight: 600; } .nonessential { @@ -2860,54 +3298,58 @@ line-height: 180%; } +#file-editor-warning .file-editor-warning-content { + margin: 25px; +} + /* @todo: can we use a common class for these? */ .nav-menus-php .item-edit:before, -.widget-top a.widget-action:after, +.widget-top .widget-action .toggle-indicator:before, .control-section .accordion-section-title:after, .accordion-section-title:after { - right: 0; - content: '\f140'; - border: none; - background: none; - font: normal 20px/1 'dashicons'; + content: "\f140"; + font: normal 20px/1 dashicons; speak: none; display: block; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; } -.widget-action, +.widget-top .widget-action .toggle-indicator:before { + padding: 1px 2px 1px 0px; + border-radius: 50%; +} + .handlediv, +.postbox .handlediv.button-link, .item-edit, -.sidebar-name-arrow, +.toggle-indicator, .accordion-section-title:after { - color: #a0a5aa; -} - -.widget-action:hover, + color: #72777c; +} + +.widget-action { + color: #555d66; /* #fafafa background in the Widgets screen */ +} + +.widget-top:hover .widget-action, +.widget-action:focus, .handlediv:hover, +.handlediv:focus, +.postbox .handlediv.button-link:hover, +.postbox .handlediv.button-link:focus, .item-edit:hover, -.sidebar-name:hover .sidebar-name-arrow, +.item-edit:focus, +.sidebar-name:hover .toggle-indicator, .accordion-section-title:hover:after { - color: #777; -} - -.widget-top a.widget-action:after { - padding: 12px 12px 11px; -} - -.widget-top a.widget-action:focus:after { - -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); -} - -.nav-menus-php .item-edit:before { - line-height: 2.1; + color: #23282d; +} + +.widget-top .widget-action:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30,140,190,.8); } .control-section .accordion-section-title:after, @@ -2920,8 +3362,8 @@ .control-section.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after, .nav-menus-php .menu-item-edit-active .item-edit:before, -.widget.open .widget-top a.widget-action:after { - content: '\f142'; +.widget.open .widget-top .widget-action .toggle-indicator:before { + content: "\f142"; } /*! @@ -2934,13 +3376,12 @@ */ .ui-draggable-handle, .ui-sortable-handle { - -ms-touch-action: none; touch-action: none; } /* Accordion */ .accordion-section { - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; margin: 0; } @@ -2950,7 +3391,7 @@ } .accordion-section.open:hover { - border-bottom-color: #dfdfdf; + border-bottom-color: #ddd; } .accordion-section-content { @@ -2964,8 +3405,8 @@ margin: 0; padding: 12px 15px 15px; position: relative; - border-left: 1px solid #dfdfdf; - border-right: 1px solid #dfdfdf; + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -3000,7 +3441,8 @@ display: none; } -.control-section .accordion-section-title { +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { border-left: none; border-right: none; padding: 10px 10px 11px 14px; @@ -3008,8 +3450,9 @@ background: #fff; } -.control-section .accordion-section-title:after { - top: 11px; +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { + top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */ } .js .control-section:hover .accordion-section-title, @@ -3022,59 +3465,160 @@ .control-section.open .accordion-section-title { /* When expanded */ - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; +} + +/* Edit Site */ +.network-admin .edit-site-actions { + margin-top: 0; +} + +/* My Sites */ +.my-sites { + display: block; + overflow: auto; + zoom: 1; +} + +.my-sites li { + display: block; + padding: 8px 3%; + min-height: 130px; + margin: 0; +} + +@media only screen and (max-width: 599px) { + .my-sites li { + min-height: 0; + } +} + +@media only screen and (min-width: 600px) { + .my-sites.striped li { + background-color: #fff; + position: relative; + } + .my-sites.striped li:after { + content: ""; + width: 1px; + height: 100%; + position: absolute; + top: 0; + right: 0; + background: #ccc; + } + +} +@media only screen and (min-width: 600px) and (max-width: 699px) { + .my-sites li{ + float: left; + width: 44%; + } + .my-sites.striped li { + background-color: #fff; + } + .my-sites.striped li:nth-of-type(2n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(2n+2):after { + content: none; + } + .my-sites li:nth-of-type(4n+1), + .my-sites li:nth-of-type(4n+2) { + background-color: #f9f9f9; + } + +} + +@media only screen and (min-width: 700px) and (max-width: 1199px) { + .my-sites li { + float: left; + width: 27.333333%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(3n+3):after { + content: none; + } + .my-sites li:nth-of-type(6n+1), + .my-sites li:nth-of-type(6n+2), + .my-sites li:nth-of-type(6n+3) { + background-color: #f9f9f9; + } +} + +@media only screen and (min-width: 1200px) and (max-width: 1399px) { + .my-sites li { + float: left; + width: 21%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(4n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(4n+4):after { + content: none; + } + .my-sites li:nth-of-type(8n+1), + .my-sites li:nth-of-type(8n+2), + .my-sites li:nth-of-type(8n+3), + .my-sites li:nth-of-type(8n+4) { + background-color: #f9f9f9; + } +} + +@media only screen and (min-width: 1400px) and (max-width: 1599px) { + .my-sites li { + float: left; + width: 16%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(5n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(5n+5):after { + content: none; + } + .my-sites li:nth-of-type(10n+1), + .my-sites li:nth-of-type(10n+2), + .my-sites li:nth-of-type(10n+3), + .my-sites li:nth-of-type(10n+4), + .my-sites li:nth-of-type(10n+5) { + background-color: #f9f9f9; + } +} + +@media only screen and (min-width: 1600px) { + .my-sites li { + float: left; + width: 12.666666%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(6n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(6n+6):after { + content: none; + } + .my-sites li:nth-of-type(12n+1), + .my-sites li:nth-of-type(12n+2), + .my-sites li:nth-of-type(12n+3), + .my-sites li:nth-of-type(12n+4), + .my-sites li:nth-of-type(12n+5), + .my-sites li:nth-of-type(12n+6) { + background-color: #f9f9f9; + } +} + +.my-sites li a { + text-decoration: none; } /* =Media Queries -------------------------------------------------------------- */ -/* @todo: de-duplication */ -@media only screen and (min-width: 769px) { - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 860px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (min-width: 980px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 768px) { - /* categories */ - #col-left { - width: 100%; - } - - #col-right { - width: 100%; - } -} - /** * HiDPI Displays */ @@ -3085,7 +3629,6 @@ div.star-holder, div.star-holder .star-rating { background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; - -webkit-background-size: 21px 37px; background-size: 21px 37px; } @@ -3096,14 +3639,12 @@ /* @todo: evaluate - most of these were likely replaced by dashicons */ .curtime #timestamp, #screen-meta-links a.show-settings, - .widget-top a.widget-action, - .widget-top a.widget-action:hover, - .sidebar-name-arrow, - .sidebar-name:hover .sidebar-name-arrow, + .widget-top .widget-action, + .widget-top .widget-action:hover, + .sidebar-name .toggle-indicator, + .sidebar-name:hover .toggle-indicator, .meta-box-sortables .postbox:hover .handlediv, - .tagchecklist span a, #bulk-titles div a, - .tagchecklist span a:hover, #bulk-titles div a:hover { background: none !important; } @@ -3143,7 +3684,15 @@ margin-left: 0; } - .col-wrap { + /* categories */ + #col-left, + #col-right { + float: none; + width: auto; + } + + #col-left .col-wrap, + #col-right .col-wrap { padding: 0; } @@ -3155,20 +3704,17 @@ display: none !important; } - .wrap .add-new-h2, .wrap .add-new-h2:active { + .wrap h1.wp-heading-inline { + margin-bottom: 0.5em; + } + + .wrap .add-new-h2, /* deprecated */ + .wrap .add-new-h2:active, /* deprecated */ + .wrap .page-title-action, + .wrap .page-title-action:active { padding: 10px 15px; font-size: 14px; - } - - .wp-color-result { - height: auto; - padding-left: 45px; - } - - .wp-color-result:after { - font-size: 14px; - height: auto; - padding: 6px 14px; + white-space: nowrap; } /* Feedback Messages */ @@ -3195,7 +3741,7 @@ } .wp-responsive-open #wpbody { - right: -190px; + right: -16em; } code { @@ -3207,7 +3753,10 @@ font-size: 14px; } - .metabox-holder h3 { + .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ + .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder h2 { padding: 12px; } @@ -3223,19 +3772,32 @@ } /* Theme/Plugin File Editor */ + + #template textarea, + #template .CodeMirror { + box-sizing: border-box; + } + #templateside { float: none; width: auto; } + #templateside > ul { + border-left: 1px solid #ddd; + } + #templateside li { margin: 0; } - #templateside li a { + #templateside li:not(.howto) a { display: block; padding: 5px; } + #templateside li.howto { + padding: 12px; + } #templateside .highlight { padding: 5px; @@ -3243,18 +3805,82 @@ margin-top: -5px; } - #template div { + #template > div, + #template .notice { float: none; - margin: 0; + margin: 1em 0; width: auto; } + #template .CodeMirror, #template textarea { width: 100%; } + #templateside ul ul { + padding-left: 1.5em; + } + [role="treeitem"] .folder-label { + display: block; + padding: 5px; + } + .tree-folder > li::before, + .tree-folder > li::after, + .tree-folder .tree-folder::after { + left: -8px; + } + .tree-folder > li::before { + top: 0px; + height: 13px; + } + .tree-folder > .current-file::before { + left: -5px; + top: 7px; + width: 4px; + } + .tree-folder > .current-file::after { + height: 9px; + left: -8px; + } + .wrap #templateside span.notice { + margin-left: -5px; + width: 100%; + } + .fileedit-sub .alignright { + float: left; margin-top: 15px; + width: 100%; + text-align: left; + } + + .fileedit-sub .alignright label { + display: block; + } + + .fileedit-sub #theme, + .fileedit-sub #plugin { + margin-left: 0; + max-width: 70%; + } + + .fileedit-sub input[type="submit"] { + margin-bottom: 0px; + padding: 8px 18px; + } + + #documentation label[for="docs-list"] { + display: block; + } + + #documentation select[name="docs-list"] { + margin-left: 0; + max-width: 60%; + } + + #documentation input[type="button"] { + margin-bottom: 0; + padding: 8px 18px; } #wpfooter { @@ -3264,6 +3890,25 @@ #comments-form .checkforspam { display: none; } + + .edit-comment-author { + margin: 2px 0 0; + } + + .filter-drawer .filter-group-feature input, + .filter-drawer .filter-group-feature label { + line-height: 25px; + } + + .filter-drawer .filter-group-feature label { + margin-left: 32px; + } + + .wp-filter .button.drawer-toggle { + font-size: 13px; + line-height: 26px; + height: 28px; + } } /* Smartphone */ @@ -3286,4 +3931,26 @@ div#post-body.metabox-holder.columns-1 { overflow-x: hidden; } -} + + h1.nav-tab-wrapper, + .wrap h2.nav-tab-wrapper, + .nav-tab-wrapper { + border-bottom: 0; + } + + h1 .nav-tab, + h2 .nav-tab, + h3 .nav-tab { + margin: 10px 10px 0 0; + border-bottom: 1px solid #ccc; + } +} + +@media screen and (max-width: 320px) { + /* Prevent default center alignment and larger font for the Right Now widget when + the network dashboard is viewed on a small mobile device. */ + #network_dashboard_right_now .subsubsub { + font-size: 14px; + text-align: left; + } +}