X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/41578db67d72562346e4dbb2a14889b23d522813..53f4633144ed68c8b8fb5861f992b5489894a940:/wp-admin/css/common.css diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css index fbd77c29..d3765d9d 100644 --- a/wp-admin/css/common.css +++ b/wp-admin/css/common.css @@ -9,16 +9,17 @@ #wpcontent { height: 100%; + padding-left: 20px; } #wpcontent, #wpfooter { - margin-left: 180px; + margin-left: 160px; } .folded #wpcontent, .folded #wpfooter { - margin-left: 56px; + margin-left: 36px; } #wpbody-content { @@ -125,6 +126,7 @@ overflow: hidden; clip: rect(0 0 0 0); border: 0; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ } .screen-reader-shortcut { @@ -176,7 +178,8 @@ p.popular-tags, .wp-editor-container, .popular-tags, .feature-filter, -.imgedit-group { +.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); @@ -189,7 +192,8 @@ p.popular-tags, .widgets-holder-wrap, .popular-tags, .feature-filter, -.imgedit-group { +.imgedit-group, +.comment-ays { background: #fff; } @@ -218,6 +222,16 @@ body.iframe { padding-top: 1px; } +body.modal-open { + overflow: hidden; +} + +body.mobile.modal-open #wpwrap { + overflow: hidden; + position: fixed; + height: 100%; +} + iframe, img { border: 0; @@ -231,7 +245,7 @@ td { } a { - color: #0074a2; + color: #0073aa; -webkit-transition-property: border, background, color; transition-property: border, background, color; -webkit-transition-duration: .05s; @@ -247,21 +261,28 @@ div { a:hover, a:active { - color: #2ea2cc; + color: #00a0d2; } -a:focus { +a:focus, +a:focus .media-icon img { 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, + 0 0 2px 1px rgba(30, 140, 190, .8); } -a:focus, -a:active { - outline: thin dotted; +.ie8 a:focus { + outline: #5b9dd9 solid 1px; } #adminmenu a:focus, -#adminmenu a:active, .screen-reader-text:focus { + -webkit-box-shadow: none; + box-shadow: none; outline: none; } @@ -308,15 +329,16 @@ h1 { margin: .67em 0; } +.wrap > h1, h2 { - color: #222; + color: #23282d; font-size: 1.5em; margin: .83em 0; font-weight: 400; } h3 { - color: #222; + color: #23282d; font-size: 1.3em; margin: 1em 0; } @@ -374,16 +396,17 @@ ol.ol-decimal > li { margin: 0 0 0.5em; } -/* @noflip */ +/* rtl:ignore */ .ltr { direction: ltr; } -/* @noflip */ +/* rtl:ignore */ .code, code { font-family: Consolas, Monaco, monospace; direction: ltr; + unicode-bidi: embed; } kbd, @@ -449,11 +472,13 @@ code { 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; } @@ -474,13 +499,17 @@ code { 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, +.widefat thead td input, +.widefat tfoot td input { margin: 0 0 0 8px; padding: 0; vertical-align: text-top; @@ -492,7 +521,9 @@ code { vertical-align: top; } -.widefat th input[type=checkbox] { +.widefat th input[type=checkbox], +.widefat thead td input[type=checkbox], +.widefat tfoot td input[type=checkbox] { margin-top: -1px; } @@ -500,17 +531,14 @@ code { 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 { +.widefat tfoot td.check-column { padding: 11px 0 0 3px; } -.widefat thead th.check-column { +.widefat thead td.check-column, +.widefat tfoot td.check-column { padding-top: 10px; } @@ -539,50 +567,14 @@ code { margin: 10px 20px 0 2px; } -div.updated, -div.error { - padding: 0 0.6em; - margin: 5px 15px 2px; -} - -div.updated p, -div.error p { - margin: 0.5em 0; - padding: 2px; -} - -.wrap div.updated, -.wrap div.error, -.media-upload-form div.error { - margin: 5px 0 15px; -} - -div.updated { - border-left: 4px solid #7ad03a; - padding: 1px 12px; - background-color: #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); -} - -div.error { - border-left: 4px solid #dd3d36; - background: #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); - padding: 1px 12px; -} - -.attention { - color: #2ea2cc; -} - +.wrap h1, .wrap h2, .subtitle { font-weight: normal; margin: 0; } +.wrap h1, .wrap h2 { font-size: 23px; font-weight: 400; @@ -596,8 +588,10 @@ div.error { padding-left: 25px; } -.wrap .add-new-h2, -.wrap .add-new-h2:active { +.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; @@ -612,12 +606,13 @@ div.error { font-size: 13px; } -.wrap .add-new-h2:hover { - background: #2ea2cc; +.wrap .add-new-h2:hover, /* deprecated */ +.wrap .page-title-action:hover { + background: #00a0d2; color: #fff; } -.wrap h2.long-header { +.wrap h1.long-header { padding-right: 0; } @@ -644,8 +639,9 @@ div#widgets-right .widget-top:hover, color: #000; } -.alternate, -.alt { +.striped > tbody > :nth-child(odd), +ul.striped > :nth-child(odd), +.alternate { background-color: #f9f9f9; } @@ -668,10 +664,10 @@ td.help { .wp-ui-primary { color: #fff; - background-color: #333; + background-color: #32373c; } .wp-ui-text-primary { - color: #333; + color: #32373c; } .wp-ui-highlight { @@ -694,17 +690,28 @@ td.help { color: #999; } +/* For emoji replacement images */ +img.emoji { + display: inline !important; + border: none !important; + height: 1em !important; + width: 1em !important; + margin: 0 .07em !important; + vertical-align: -0.1em !important; + background: none !important; + padding: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + /*------------------------------------------------------------------------------ 1.0 - Text Styles ------------------------------------------------------------------------------*/ .widget .widget-top, -.postbox h3, -.stuffbox h3, +.postbox .hndle, +.stuffbox .hndle, .control-section .accordion-section-title, -h3.dashboard-widget-title, -h3.dashboard-widget-title span, -h3.dashboard-widget-title small, .sidebar-name, #nav-menu-header, #nav-menu-footer, @@ -713,19 +720,20 @@ h3.dashboard-widget-title small, .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; } .widget .widget-top, .menu-item-handle { background: #fafafa; - color: #222; + color: #23282d; } -.postbox h3, -#namediv h3, -#submitdiv h3 { +.postbox .hndle, +.stuffbox .hndle { border-bottom: 1px solid #eee; } @@ -741,23 +749,34 @@ h3.dashboard-widget-title small, } /* @todo can we combine these into a class or use an existing dashicon one? */ -#welcome-panel.welcome-panel .welcome-panel-close::before, +.welcome-panel .welcome-panel-close:before, .tagchecklist span a:before, -#bulk-titles div a:before { +#bulk-titles div a:before, +.notice-dismiss:before { background: none; - color: #bbb; + color: #b4b9be; content: '\f153'; - display: block !important; - font: normal 16px/1 'dashicons'; + display: block; + font: normal 16px/20px 'dashicons'; speak: none; height: 20px; - margin: 2px 0; text-align: center; width: 20px; - -webkit-font-smoothing: antialiased !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -#welcome-panel.welcome-panel .welcome-panel-close:hover:before, +.welcome-panel .welcome-panel-close:before { + margin: 0; +} + +.tagchecklist span a:before, +#bulk-titles div a:before { + margin: 1px 0; +} + +.welcome-panel .welcome-panel-close:hover:before, +.welcome-panel .welcome-panel-close:focus:before, .tagchecklist span a:hover:before, #bulk-titles div a:hover:before { color: #c00; @@ -918,11 +937,432 @@ th.action-links { text-align: right; } +/* 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 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; + color: #555; + font-size: 13px; +} + +.wp-filter a { + text-decoration: none; +} + +.filter-count { + display: inline-block; + vertical-align: middle; + min-width: 4em; +} + +.title-count, +.filter-count .count { + display: inline-block; + position: relative; + top: -1px; + padding: 4px 10px; + -webkit-border-radius: 30px; + border-radius: 30px; + background: #777; + color: #fff; + font-size: 14px; + font-weight: 600; +} + +/* not a part of filter bar, but derived from it, so here for now */ +.title-count { + display: inline; + top: -3px; + margin-left: 5px; + margin-right: 20px; +} + +.filter-items { + float: left; +} + +.filter-links { + display: inline-block; + margin: 0; +} + +.filter-links li { + display: inline-block; + margin: 0; +} + +.filter-links li > a { + display: inline-block; + margin: 0 10px; + padding: 15px 0; + border-bottom: 4px solid #fff; + color: #666; + cursor: pointer; +} + +.filter-links .current { + -webkit-box-shadow: none; + box-shadow: none; + border-bottom: 4px solid #666; + color: #23282d; +} + +.filter-links li > a:hover, +.filter-links li > a:focus, +.show-filters .filter-links a.current:hover, +.show-filters .filter-links a.current:focus { + color: #00a0d2; +} + +.wp-filter .search-form { + float: right; + margin: 10px 0; +} + +.wp-filter .search-form input[type="search"] { + margin: 0; + padding: 3px 5px; + width: 280px; + max-width: 100%; + font-size: 16px; + font-weight: 300; + line-height: 1.5; +} + +.wp-filter .search-form select { + margin: 0; + height: 32px; + vertical-align: top; +} + +.wp-filter .search-form.search-plugins { + display: inline-block; +} + +.wp-filter .drawer-toggle { + display: inline-block; + margin: 0 10px; + padding: 4px 6px; + color: #666; + cursor: pointer; +} + +.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; + -webkit-font-smoothing: antialiased; +} + +.wp-filter .drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before { + color: #00a0d2; +} + +.wp-filter .drawer-toggle.current:before { + color: #fff; +} + +.filter-drawer { + display: none; + margin: 0 -20px; + padding: 20px; + border-top: 1px solid #eee; + background: #fafafa; +} + +.show-filters .filter-drawer { + display: block; + overflow: hidden; + width: 100%; +} + +.show-filters .wp-filter .drawer-toggle:hover, +.show-filters .wp-filter .drawer-toggle:focus { + 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; + float: left; + margin: 0 1% 0 0; + padding: 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; + margin: 0; +} + +.filter-drawer ol { + margin: 20px 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 .buttons { + margin-bottom: 20px; +} + +.filter-drawer .buttons .button span { + display: inline-block; + opacity: 0.8; + font-size: 12px; + text-indent: 10px; +} + +.wp-filter .button.clear-filters { + display: none; + margin-left: 10px; +} + +.filtered-by { + display: none; + margin: 0; +} + +.filtered-by > span { + font-weight: 600; +} + +.filtered-by a { + margin-left: 10px; +} + +.filtered-by .tags { + display: inline; +} + +.filtered-by .tag { + 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; +} + +.filters-applied .filter-group, +.filters-applied .filter-drawer .buttons, +.filters-applied .filter-drawer br { + display: none !important; +} + +.filters-applied .filtered-by { + display: block; +} + +.filters-applied .filter-drawer { + padding: 20px; +} + +.show-filters .content-filterable, +.show-filters.filters-applied.loading-content .content-filterable, +.loading-content .content-filterable, +.error .content-filterable { + display: none; +} + +.show-filters.filters-applied .content-filterable { + display: block; +} + +.loading-content .spinner { + display: block; + margin: 40px auto 0; + float: none; +} + +@media only screen and (max-width: 1120px) { + .filter-drawer { + border-bottom: 1px solid #eee; + } + + .filter-group { + margin-bottom: 0; + margin-top: 5px; + width: 100%; + } + + .filter-group li { + margin: 10px 0; + } +} + +@media only screen and (max-width: 1000px) { + .filter-items { + float: none; + } + + .wp-filter .media-toolbar-primary, + .wp-filter .media-toolbar-secondary, + .wp-filter .search-form { + float: none; /* Remove float from media-views.css */ + position: relative; + max-width: 100%; + } +} + +@media only screen and (max-width: 782px) { + .filter-group li { + padding: 0; + width: 50%; + } +} + +@media only screen and (max-width: 320px) { + .filter-count { + display: none; + } + + .wp-filter .drawer-toggle { + margin: 10px 0; + } + + .filter-group li, + .wp-filter .search-form input[type="search"] { + width: 100%; + } +} /*------------------------------------------------------------------------------ 4.0 - Notifications ------------------------------------------------------------------------------*/ +.notice, +div.updated, +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; +} + +.notice p, +div.updated p, +div.error p, +.form-table td .notice p { + margin: 0.5em 0; + padding: 2px; +} + +.wp-core-ui .notice.is-dismissible { + padding-right: 38px; + position: relative; +} + +.notice-dismiss { + position: absolute; + top: 0; + right: 1px; + border: none; + margin: 0; + padding: 9px; + background: none; + color: #b4b9be; + cursor: pointer; +} + +.notice-dismiss:hover:before, +.notice-dismiss:active:before, +.notice-dismiss:focus:before { + color: #c00; +} + +.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); +} + +.ie8 .notice-dismiss:focus { + outline: 1px solid #5b9dd9; +} + +.notice-success, +div.updated { + border-color: #7ad03a; +} + +.notice-warning { + border-color: #ffba00; +} + +.notice-error, +div.error { + border-color: #dd3d36; +} + +.notice-info { + border-color: #00a0d2; +} + +.wrap .notice, +.wrap div.updated, +.wrap div.error, +.media-upload-form .notice, +.media-upload-form div.error { + margin: 5px 0 15px; +} + #update-nag, .update-nag { display: inline-block; @@ -977,7 +1417,6 @@ form.upgrade .hint { 6.0 - Admin Header ------------------------------------------------------------------------------*/ #adminmenu a, -#sidemenu a, #taglist a, #catlist a { text-decoration: none; @@ -1007,14 +1446,6 @@ form.upgrade .hint { 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; @@ -1044,32 +1475,23 @@ form.upgrade .hint { top: 0; } -#screen-meta-links a { +#screen-meta-links .show-settings { + border: 0; + background: none; + -webkit-border-radius: 0; + border-radius: 0; color: #777; + line-height: 1.7; + padding: 3px 6px 3px 16px; } -#screen-meta-links a:hover, -#screen-meta-links a:active, -#screen-meta-links a:focus { - color: #333; -} - -#screen-meta-links a:focus { - border-color: #aaa; - -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15); - box-shadow: 0 2px 3px rgba(0,0,0,0.15); +#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:after { right: 0; content: '\f140'; font: normal 20px/1 'dashicons'; @@ -1082,16 +1504,13 @@ form.upgrade .hint { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #bbb; + color: #b4b9be; } -#screen-meta-links a.screen-meta-active:after { +#screen-meta-links .screen-meta-active:after { content: '\f142'; } -#screen-meta-links a.show-settings:hover { - text-decoration: none; -} /* end screen options and help tabs */ .toggle-arrow { @@ -1136,6 +1555,26 @@ form.upgrade .hint { display: none; } +.metabox-prefs .screen-options { + padding-top: 10px; +} + +.metabox-prefs .screen-options input, +.metabox-prefs .screen-options label { + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.metabox-prefs .screen-options .screen-per-page { + margin-right: 15px; +} + +.metabox-prefs .screen-options label { + line-height: 28px; + padding-right: 0; +} + /*------------------------------------------------------------------------------ 6.2 - Help Menu ------------------------------------------------------------------------------*/ @@ -1196,13 +1635,13 @@ form.upgrade .hint { } .contextual-help-tabs a:hover { - color: #333; + color: #32373c; } .contextual-help-tabs .active { padding: 0; margin: 0 -1px 0 0; - border-left: 2px solid #2ea2cc; + 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); @@ -1210,7 +1649,7 @@ form.upgrade .hint { .contextual-help-tabs .active a { border-color: #e1e1e1; - color: #333; + color: #32373c; } .contextual-help-tabs-wrap { @@ -1251,28 +1690,22 @@ html.wp-toolbar { box-sizing: border-box; } -.narrow { - width: 70%; - margin-bottom: 40px; -} - -.narrow p { - line-height: 150%; -} - .widefat th, .widefat td { - overflow: hidden; color: #555; } -.widefat th { +.widefat th, +.widefat thead td, +.widefat tfoot td { font-weight: normal; } .widefat thead tr th, -.widefat tfoot tr th { - color: #333; +.widefat thead tr td, +.widefat tfoot tr th, +.widefat tfoot tr td { + color: #32373c; } .widefat td p { @@ -1282,7 +1715,7 @@ html.wp-toolbar { .widefat p, .widefat ol, .widefat ul { - color: #333; + color: #32373c; } .widefat .column-comment p { @@ -1305,7 +1738,7 @@ html.wp-toolbar { } .metabox-holder .postbox-container .empty-container { - border: 3px dashed #bbb; + border: 3px dashed #b4b9be; height: 250px; } @@ -1343,6 +1776,7 @@ html.wp-toolbar { } } +.js .widget .widget-top, .js .postbox .hndle { cursor: move; } @@ -1363,7 +1797,7 @@ html.wp-toolbar { } .sortable-placeholder { - border: 1px dashed #bbb; + border: 1px dashed #b4b9be; margin-bottom: 20px; } @@ -1374,20 +1808,15 @@ html.wp-toolbar { line-height: 1; } -.postbox h3, -.stuffbox h3 { - margin-top: 1px; +/* user-select is not a part of the CSS standard - may change behavior in the future */ +.postbox .hndle, +.stuffbox .hndle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.js .widget .widget-top, -.js .postbox h3 { - cursor: move; -} - .postbox .inside, .stuffbox .inside { padding: 0 12px 12px; @@ -1454,8 +1883,7 @@ html.wp-toolbar { bottom: 0; left: 0; right: 0; - padding: 10px 0; - margin-right: 20px; + padding: 10px 20px; color: #777; } @@ -1510,6 +1938,7 @@ html.wp-toolbar { color: #000; } +h1.nav-tab-wrapper, h2.nav-tab-wrapper, h3.nav-tab-wrapper { border-bottom: 1px solid #ccc; @@ -1517,6 +1946,7 @@ h3.nav-tab-wrapper { padding-left: 10px; } +h1 .nav-tab, h2 .nav-tab { padding: 6px 10px; font-weight: bold; @@ -1533,78 +1963,34 @@ h2 .nav-tab { background: url(../images/spinner.gif) no-repeat; -webkit-background-size: 20px 20px; background-size: 20px 20px; - display: none; + display: inline-block; + visibility: hidden; float: right; + vertical-align: middle; opacity: 0.7; filter: alpha(opacity=70); width: 20px; - height: 20px; - margin: 2px 5px 0; -} - -#template div { - margin-right: 190px; -} - -.metabox-holder h3 { - font-size: 14px; - padding: 8px 12px; - margin: 0; - line-height: 1.4; -} - -#templateside ul li a { - text-decoration: none; -} - -#sidemenu { - margin: -30px 15px 0 315px; - list-style: none; - position: relative; - float: right; - padding-left: 10px; - font-size: 12px; -} - -#sidemenu a { - padding: 0 7px; - display: block; - float: left; - line-height: 28px; - border-top: 1px solid #f9f9f9; - border-bottom: 1px solid #dfdfdf; - background-color: #f9f9f9; - -webkit-transition: none; - transition: none; + height: 20px; + margin: 4px 10px 0; } -#sidemenu li { - display: inline; - line-height: 200%; - list-style: none; - text-align: center; - white-space: nowrap; - margin: 0; - padding: 0; +.spinner.is-active { + visibility: visible; } -/* @todo: remove border radius */ -#sidemenu a.current { - font-weight: normal; - padding-left: 6px; - padding-right: 6px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - border: 1px solid #dfdfdf; - border-bottom-color: #f1f1f1; - background-color: #f1f1f1; - color: #000; +#template div { + margin-right: 190px; } -#sidemenu li a .count-0 { - display: none; +.metabox-holder h3 { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +#templateside ul li a { + text-decoration: none; } .plugin-install #description, @@ -1618,6 +2004,7 @@ table .column-rating { text-align: left; } +.attention, .error-message { color: red; font-weight: 600; @@ -1639,16 +2026,14 @@ body.iframe { /* - 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; +.media-icon img { + border: 1px solid #e7e7e7; + border: 1px solid rgba(0, 0, 0, 0.07); } #howto { @@ -1670,6 +2055,14 @@ td.media-icon img { margin-top: 0; } +.edit-comment-author { + font-size: 14px; + line-height: 1.4; + font-weight: 600; + color: #222; + margin: 2px 0 0 9px; +} + #namediv h3 label { vertical-align: baseline; } @@ -1767,7 +2160,7 @@ div.star-holder .star-rating { -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; text-align: center; - color: #0074a2; + color: #ffb900; } .star-rating .star-full:before { @@ -1795,21 +2188,29 @@ div.action-links { /* Plugin install thickbox */ #plugin-information { - background: #fcfcfc; + background: #fff; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - height: auto; + height: 100%; padding: 0; } +#plugin-information-scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; +} + #plugin-information-title { - padding: 0 76px 0 20px; + padding: 0 20px; + background: #f5f5f5; font-size: 22px; font-weight: 600; line-height: 56px; + position: relative; top: 0; right: 0; left: 0; @@ -1819,20 +2220,72 @@ div.action-links { 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; + padding: 0; + margin: 0; + max-width: 680px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#plugin-information-title.with-banner h2 { + font-family: "Helvetica Neue", sans-serif; + display: inline-block; + font-size: 30px; + line-height: 50px; + padding: 0 15px; + margin: 174px 0 0 10px; + 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; +} + +#plugin-information-title div.vignette { + display: none; +} + +#plugin-information-title.with-banner div.vignette { + display: block; + float: right; + top: 0; + height: 250px; + width: 772px; + margin: 0 -20px; + 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 ); +} + #plugin-information-tabs { padding: 0 16px; - position: absolute; - top: 56px; + position: relative; right: 0; left: 0; height: 36px; z-index: 1; + border-bottom: 1px solid #ddd; + background: #f3f3f3; } #plugin-information-tabs a { position: relative; float: left; - padding: 8px 10px 9px; + padding: 9px 10px; margin: 0; height: 18px; line-height: 18px; @@ -1843,11 +2296,17 @@ div.action-links { } #plugin-information-tabs a.current { - margin: -1px -1px 0; + margin: 0 -1px 0; background: #fff; border: 1px solid #ddd; - border-bottom: none; - color: #333; + border-bottom-color: #fff; + padding-top: 8px; + color: #32373c; +} + +#plugin-information-tabs.with-banner a.current { + border-top: none; + padding-top: 9px; } #plugin-information-tabs a:active, @@ -1856,25 +2315,34 @@ div.action-links { } #plugin-information-content { + overflow: hidden; /* equal height column trick */ background: #fff; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - position: absolute; - top: 90px; + position: relative; + top: 0; right: 0; - bottom: 58px; 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 ); } #section-holder { - margin: 0; - padding: 10px 26px; - position: absolute; + position: relative; top: 0; right: 250px; bottom: 0; left: 0; - overflow: auto; + margin-right: 250px; /* FYI box */ + padding: 10px 26px; + margin-bottom: -99930px; /* a bit less than the padding below to accommodate footer */ + padding-bottom: 99999px; /* equal height column trick */ } #section-holder .updated { @@ -1882,16 +2350,18 @@ div.action-links { } #plugin-information .fyi { - background: #f3f3f3; - border-left: 1px solid #ddd; - color: #666; - padding: 16px; - position: absolute; + display: block; + float: right; + position: relative; top: 0; right: 0; - bottom: 0; + padding: 16px; + margin-bottom: -99930px; /* slightly less than the padding below to accommodate footer */ + padding-bottom: 99999px; /* equal height column trick */ width: 217px; - overflow: auto; + border-left: 1px solid #ddd; + background: #f3f3f3; + color: #666; } #plugin-information .fyi strong { @@ -1922,6 +2392,54 @@ div.action-links { margin: 0 0 10px; } +#plugin-information .counter-container { + margin: 3px 0; +} + +#plugin-information .counter-label { + float: left; + margin-right: 5px; + min-width: 55px; +} + +#plugin-information .counter-back { + height: 17px; + width: 92px; + background-color: #ececec; + float: left; +} + +#plugin-information .counter-bar { + height: 17px; + background-color: #ffc733; /* slightly lighter than stars due to larger expanse */ + float: left; +} + +#plugin-information .counter-count { + margin-left: 5px; +} + +#plugin-information .fyi ul.contributors { + margin-top: 10px; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li img { + vertical-align: middle; + margin-right: 4px; +} + #plugin-information-footer { padding: 15px 16px; position: absolute; @@ -1929,8 +2447,16 @@ div.action-links { bottom: 0; left: 0; height: 28px; + border-top: 1px solid #ddd; + background: #f3f3f3; } +/* rtl:ignore */ +#plugin-information .section { + direction: ltr; +} + +/* rtl:ignore */ #plugin-information .section ul, #plugin-information .section ol { list-style-type: disc; @@ -1958,6 +2484,7 @@ div.action-links { box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); } +/* rtl:ignore */ #plugin-information #section-screenshots li p { font-style: italic; padding-left: 20px; @@ -1969,25 +2496,101 @@ div.action-links { border: 1px solid #ccc; } +/* rtl:ignore */ +#plugin-information .review { + overflow: hidden; /* clearfix */ + width: 100%; + margin-bottom: 20px; + border-bottom: 1px solid #e6e6e6; +} + +#plugin-information .review-title-section { + overflow: hidden; /* clearfix */ +} + +/* rtl:ignore */ +#plugin-information .review-title-section h4 { + display: inline-block; + float: left; + margin: 0 6px 0 0; +} + +#plugin-information .reviewer-info p { + clear: both; + margin: 0; + padding-top: 2px; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .avatar { + float: left; + margin: 4px 6px 0 0; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .star-rating { + float: left; +} + +/* rtl:ignore */ +#plugin-information .review-meta { + float: left; + margin-left: 0.75em; +} + +/* rtl:ignore */ +#plugin-information .review-body { + float: left; + width: 100%; +} + .plugin-version-author-uri { font-size: 13px; } -@media screen and ( max-width: 782px ) { - #plugin-information-content { - overflow: auto; - bottom: 58px; +@media screen and ( max-width: 771px ) { + #plugin-information-title.with-banner { + height: 100px; + bottom: 100px; + } + + #plugin-information-title.with-banner h2 { + margin-top: 30px; + font-size: 20px; + line-height: 40px; + max-width: 85%; + } + + #plugin-information-title.with-banner div.vignette { + height: 100px; + bottom: 100px; + width: 800%; + } + + #plugin-information-tabs { + overflow: hidden; /* clearfix */ + padding: 0; + height: auto; /* let tabs wrap */ + } + + #plugin-information-tabs a.current { + margin-bottom: 0; + border-bottom: none; } #plugin-information .fyi { + float: none; border: 1px solid #ddd; position: static; width: auto; - margin: 26px 26px 16px; + margin: 26px 26px 0; + padding-bottom: 0; /* reset from the two column height fix */ } #section-holder { position: static; + margin: 0; + padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */ } #plugin-information .fyi h3, @@ -2011,7 +2614,6 @@ body.index-php #TB_window { } @media print, - (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { @@ -2048,9 +2650,37 @@ 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 { - line-height: 48px; - width: 48px; - height: 48px; + 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 { + color: #00a0d2; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; } body.plugin-install-php .tb-close-icon:before, @@ -2058,7 +2688,20 @@ 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 { - line-height: 48px; + content: "\f335"; + font-size: 32px; +} + +/* 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 { + right: 0; + top: -30px; + } } /* @todo: move this. */ @@ -2143,7 +2786,7 @@ img { outline: none; } -/* @noflip */ +/* rtl:ignore */ #template textarea, #docs-list { direction: ltr; @@ -2178,7 +2821,7 @@ img { margin: 4px 0; } -#templateside a, +#templateside li a, .theme-editor-php .highlight { display: block; padding: 3px 3px 3px 12px; @@ -2242,7 +2885,7 @@ img { .item-edit, .sidebar-name-arrow, .accordion-section-title:after { - color: #aaa; + color: #a0a5aa; } .widget-action:hover, @@ -2254,7 +2897,12 @@ img { } .widget-top a.widget-action:after { - padding: 12px 12px 0; + 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 { @@ -2270,33 +2918,26 @@ img { .control-section.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after, -.nav-menus-php .menu-item-edit-active .item-edit:before { +.nav-menus-php .menu-item-edit-active .item-edit:before, +.widget.open .widget-top a.widget-action:after { content: '\f142'; } -/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ -.ui-sortable, -.ui-draggable { - -ms-touch-action: none; - touch-action: none; -} - -.meta-box-sortables.ui-sortable, -.widgets-holder-wrap .ui-draggable, -.widgets-holder-wrap .ui-sortable, -.menu.ui-sortable { - -ms-touch-action: auto; - touch-action: auto; -} - -.meta-box-sortables.ui-sortable .hndle, -.menu.ui-sortable .menu-item-handle { +/*! + * jQuery UI Draggable/Sortable 1.11.4 + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-draggable-handle, +.ui-sortable-handle { -ms-touch-action: none; - touch-action: none; + touch-action: none; } /* Accordion */ - .accordion-section { border-bottom: 1px solid #dfdfdf; margin: 0; @@ -2347,7 +2988,7 @@ img { .accordion-section-title:hover:after, .accordion-section-title:focus:after { - border-color: #aaa transparent; + border-color: #a0a5aa transparent; } .cannot-expand .accordion-section-title { @@ -2374,7 +3015,7 @@ img { .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { - color: #222; + color: #23282d; background: #f5f5f5; } @@ -2383,6 +3024,154 @@ img { border-bottom: 1px solid #dfdfdf; } +/* 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 -------------------------------------------------------------- */ @@ -2437,7 +3226,6 @@ img { * HiDPI Displays */ @media print, - (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Back-compat for pre-3.8 */ @@ -2487,10 +3275,6 @@ img { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } - #wpwrap { - background: #f0f0f0; - } - #wpcontent { position: relative; margin-left: 0; @@ -2518,9 +3302,13 @@ img { display: none !important; } - .wrap .add-new-h2, .wrap .add-new-h2:active { + .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; + white-space: nowrap; } .wp-color-result { @@ -2535,13 +3323,24 @@ img { } /* Feedback Messages */ - .wrap div.updated, .wrap div.error, .media-upload-form div.error { + .notice, + .wrap div.updated, + .wrap div.error, + .media-upload-form div.error { margin: 20px 0 10px 0; padding: 5px 10px; font-size: 14px; line-height: 175%; } + .wp-core-ui .notice.is-dismissible { + padding-right: 46px; + } + + .notice-dismiss { + padding: 13px; + } + .wrap .icon32 + h2 { margin-top: -2px; } @@ -2550,6 +3349,10 @@ img { right: -190px; } + code { + word-wrap: break-word; + } + /* General Metabox */ .postbox { font-size: 14px; @@ -2612,6 +3415,10 @@ img { #comments-form .checkforspam { display: none; } + + .edit-comment-author { + margin: 2px 0 0; + } } /* Smartphone */ @@ -2635,3 +3442,12 @@ img { overflow-x: hidden; } } + +@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; + } +}