From 0f6f0dd3acaf72ba787210976490a70606a8bb00 Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Mon, 21 Aug 2017 11:39:23 -0700 Subject: [PATCH 1/4] Show errors on small screens. Removes two styles from `wp-admin/css/common.css` to no longer hide parts of the gutter on small screens. --- codemirror-wp.php | 6 + wp-admin/css/common.css | 3737 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 3743 insertions(+) create mode 100644 wp-admin/css/common.css diff --git a/codemirror-wp.php b/codemirror-wp.php index bebe7f2..ec7a39c 100644 --- a/codemirror-wp.php +++ b/codemirror-wp.php @@ -124,6 +124,12 @@ public static function register_scripts( WP_Scripts $scripts ) { * @param WP_Styles $styles Styles. */ public static function register_styles( WP_Styles $styles ) { + /* + * Removes `#template div` and `#template textarea` styles from common.css. + */ + $styles->remove( 'common' ); + $styles->add( 'common', plugins_url( 'wp-admin/css/common.css', __FILE__ ), array(), self::CODEMIRROR_VERSION ); + $styles->add( 'codemirror', plugins_url( 'wp-includes/js/codemirror/lib/codemirror.css', __FILE__ ), array(), self::CODEMIRROR_VERSION ); $styles->add( 'codemirror-addon-show-hint', plugins_url( 'wp-includes/js/codemirror/addon/hint/show-hint.css', __FILE__ ), array( 'codemirror' ), self::CODEMIRROR_VERSION ); $styles->add( 'codemirror-addon-lint', plugins_url( 'wp-includes/js/codemirror/addon/lint/lint.css', __FILE__ ), array( 'codemirror' ), self::CODEMIRROR_VERSION ); diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css new file mode 100644 index 0000000..bc7447e --- /dev/null +++ b/wp-admin/css/common.css @@ -0,0 +1,3737 @@ +/* 2 column liquid layout */ +#wpwrap { + height: auto; + min-height: 100%; + width: 100%; + position: relative; + -webkit-font-smoothing: subpixel-antialiased; +} + +#wpcontent { + height: 100%; + padding-left: 20px; +} + +#wpcontent, +#wpfooter { + margin-left: 160px; +} + +.folded #wpcontent, +.folded #wpfooter { + margin-left: 36px; +} + +#wpbody-content { + padding-bottom: 65px; + float: left; + width: 100%; + overflow: visible !important; +} + +/* inner 2 column liquid layout */ + +.inner-sidebar { + float: right; + clear: right; + display: none; + width: 281px; + position: relative; +} + +.columns-2 .inner-sidebar { + margin-right: auto; + width: 286px; + display: block; +} + +.inner-sidebar #side-sortables, +.columns-2 .inner-sidebar #side-sortables { + min-height: 300px; + width: 280px; + padding: 0; +} + +.has-right-sidebar .inner-sidebar { + display: block; +} + +.has-right-sidebar #post-body { + float: left; + clear: left; + width: 100%; + margin-right: -2000px; +} + +.has-right-sidebar #post-body-content { + margin-right: 300px; + float: none; + width: auto; +} + +/* 2 columns main area */ + +#col-left { + float: left; + width: 35%; +} + +#col-right { + float: right; + width: 65%; +} + +#col-left .col-wrap { + padding: 0 6px 0 0; +} + +#col-right .col-wrap { + padding: 0 0 0 6px; +} + +/* utility classes */ +.alignleft { + float: left; +} + +.alignright { + float: right; +} + +.textleft { + text-align: left; +} + +.textright { + text-align: right; +} + +.clear { + 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; + height: 1px; + width: 1px; + 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 { + position: absolute; + top: -1000em; +} + +.screen-reader-shortcut:focus { + left: 6px; + top: -25px; + height: auto; + width: auto; + display: block; + font-size: 14px; + font-weight: 600; + padding: 15px 23px 14px; + background: #f1f1f1; + color: #0073aa; + z-index: 100000; + line-height: normal; + box-shadow: 0 0 2px 2px rgba(0,0,0,.6); + text-decoration: none; + outline: none; +} + +.hidden, +.js .closed .inside, +.js .hide-if-js, +.no-js .hide-if-no-js, +.js.wp-core-ui .hide-if-js, +.js .wp-core-ui .hide-if-js, +.no-js.wp-core-ui .hide-if-no-js, +.no-js .wp-core-ui .hide-if-no-js { + display: none; +} + +/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */ +.widget-top, +.menu-item-handle, +.widget-inside, +#menu-settings-column .accordion-container, +#menu-management .menu-edit, +.manage-menus, +table.widefat, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.wp-editor-container, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + border: 1px solid #e5e5e5; + box-shadow: 0 1px 1px rgba(0,0,0,0.04); +} + +table.widefat, +.wp-editor-container, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + background: #fff; +} + +/* general */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + background: #f1f1f1; + color: #444; + 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; +} + +body.iframe { + min-width: 0; + padding-top: 1px; +} + +body.modal-open { + overflow: hidden; +} + +body.mobile.modal-open #wpwrap { + overflow: hidden; + position: fixed; + height: 100%; +} + +iframe, +img { + border: 0; +} + +td { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +/* Any change to the default link style must be applied to button-link too. */ +a { + color: #0073aa; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +a, +div { + outline: 0; +} + +a:hover, +a:active { + color: #00a0d2; +} + +a:focus, +a:focus .media-icon img, +.wp-person a:focus .gravatar { + color: #124964; + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + +.ie8 a:focus { + outline: #5b9dd9 solid 1px; +} + +#adminmenu a:focus, +.screen-reader-text:focus { + box-shadow: none; + outline: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +p { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +blockquote { + margin: 1em; +} + +li, +dd { + margin-bottom: 6px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + display: block; + font-weight: 600; +} + +h1 { + color: #23282d; + font-size: 2em; + margin: .67em 0; +} + +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; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +ul, +ol { + padding: 0; +} + +ul { + list-style: none; +} + +ol { + list-style-type: decimal; + margin-left: 2em; +} + +ul.ul-disc { + list-style: disc outside; +} + +ul.ul-square { + list-style: square outside; +} + +ol.ol-decimal { + list-style: decimal outside; +} + +ul.ul-disc, +ul.ul-square, +ol.ol-decimal { + margin-left: 1.8em; +} + +ul.ul-disc > li, +ul.ul-square > li, +ol.ol-decimal > li { + margin: 0 0 0.5em; +} + +/* rtl:ignore */ +.ltr { + direction: ltr; +} + +/* rtl:ignore */ +.code, +code { + font-family: Consolas, Monaco, monospace; + direction: ltr; + unicode-bidi: embed; +} + +kbd, +code { + padding: 3px 5px 2px 5px; + margin: 0 1px; + background: #eaeaea; + background: rgba(0,0,0,0.07); + font-size: 13px; +} + +.subsubsub { + list-style: none; + margin: 8px 0 0; + padding: 0; + font-size: 13px; + float: left; + color: #666; +} + +.subsubsub a { + line-height: 2; + padding: .2em; + text-decoration: none; +} + +.subsubsub a .count, +.subsubsub a.current .count { + color: #555d66; /* #f1f1f1 background */ + font-weight: 400; +} + +.subsubsub a.current { + font-weight: 600; + border: none; +} + +.subsubsub li { + display: inline-block; + margin: 0; + padding: 0; + white-space: nowrap; +} + +/* .widefat - main style for tables */ +.widefat { + border-spacing: 0; + width: 100%; + clear: both; + margin: 0; +} + +.widefat * { + word-wrap: break-word; +} + +.widefat a, +.widefat button.button-link { + text-decoration: none; +} + +.widefat td, +.widefat th { + padding: 8px 10px; +} + +.widefat thead th, +.widefat thead td { + border-bottom: 1px solid #e1e1e1; +} + +.widefat tfoot th, +.widefat tfoot td { + border-top: 1px solid #e1e1e1; + border-bottom: none; +} + +.widefat .no-items td { + border-bottom-width: 0; +} + +.widefat td { + vertical-align: top; +} + +.widefat td, +.widefat td p, +.widefat td ol, +.widefat td ul { + font-size: 13px; + line-height: 1.5em; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + text-align: left; + line-height: 1.3em; + font-size: 14px; +} + +.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; +} + +.widefat .check-column { + width: 2.2em; + padding: 6px 0 25px; + vertical-align: top; +} + +.widefat tbody th.check-column { + padding: 9px 0 22px; +} + +.widefat thead td.check-column, +.widefat tbody th.check-column, +.updates-table tbody td.check-column, +.widefat tfoot td.check-column { + padding: 11px 0 0 3px; +} + +.widefat thead td.check-column, +.widefat tfoot td.check-column { + padding-top: 4px; + vertical-align: middle; +} + +.update-php div.updated, +.update-php div.error { + margin-left: 0; +} + +.no-js .widefat thead .check-column input, +.no-js .widefat tfoot .check-column input { + display: none; +} + +.widefat .num, +.column-comments, +.column-links, +.column-posts { + text-align: center; +} + +.widefat th#comments { + vertical-align: middle; +} + +.wrap { + margin: 10px 20px 0 2px; +} + +.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; + 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 { + margin: 0; + padding-left: 25px; + 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; + border: 1px solid #ccc; + border-radius: 2px; + background: #f7f7f7; + text-shadow: none; + font-weight: 600; + font-size: 13px; + 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; +} + +/* 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; +} + +.wp-dialog { + background-color: #fff; +} + +.widgets-chooser ul, +#widgets-left .widget-in-question .widget-top, +#available-widgets .widget-top:hover, +div#widgets-right .widget-top:hover, +#widgets-left .widget-top:hover { + border-color: #999; + box-shadow: 0 1px 2px rgba(0,0,0,0.1); +} + +.sorthelper { + background-color: #ccf3fa; +} + +.ac_match, +.subsubsub a.current { + color: #000; +} + +.striped > tbody > :nth-child(odd), +ul.striped > :nth-child(odd), +.alternate { + background-color: #f9f9f9; +} + +.bar { + background-color: #e8e8e8; + border-right-color: #99d; +} + +/* Helper classes for plugins to leverage the active WordPress color scheme */ + +.highlight { + background-color: #e4f2fd; + color: #000; +} + +.wp-ui-primary { + color: #fff; + background-color: #32373c; +} +.wp-ui-text-primary { + color: #32373c; +} + +.wp-ui-highlight { + color: #fff; + background-color: #1e8cbe; +} +.wp-ui-text-highlight { + color: #1e8cbe; +} + +.wp-ui-notification { + color: #fff; + background-color: #d54e21; +} +.wp-ui-text-notification { + color: #d54e21; +} + +.wp-ui-text-icon { + color: #82878c; /* same as new icons */ +} + +/* 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; + box-shadow: none !important; +} + +/*------------------------------------------------------------------------------ + 1.0 - Text Styles +------------------------------------------------------------------------------*/ + +.widget .widget-top, +.postbox .hndle, +.stuffbox .hndle, +.control-section .accordion-section-title, +.sidebar-name, +#nav-menu-header, +#nav-menu-footer, +.menu-item-handle, +.checkbox, +.side-info, +#your-profile #rich_editing, +.widefat thead th, +.widefat thead td, +.widefat tfoot th, +.widefat tfoot td { + line-height: 1.4em; +} + +.widget .widget-top, +.menu-item-handle { + background: #fafafa; + color: #23282d; +} + +.postbox .hndle, +.stuffbox .hndle { + border-bottom: 1px solid #eee; +} + +.quicktags, +.search { + background-color: #ccc; + color: #000; + font-size: 12px; +} + +.icon32 { + display: none; +} + +/* @todo can we combine these into a class or use an existing dashicon one? */ +.welcome-panel .welcome-panel-close:before, +.tagchecklist .ntdelbutton .remove-tag-icon:before, +#bulk-titles div a:before, +.notice-dismiss:before { + background: none; + color: #72777c; + content: "\f153"; + display: block; + font: normal 16px/20px dashicons; + speak: none; + height: 20px; + text-align: center; + width: 20px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.welcome-panel .welcome-panel-close:before { + margin: 0; +} + +#bulk-titles div a: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; +} + +strong, b { + font-weight: 600; +} + +.pre { + /* https://developer.mozilla.org/en-US/docs/CSS/white-space */ + white-space: pre-wrap; /* css-3 */ + word-wrap: break-word; /* IE 5.5 - 7 */ +} + +.howto { + color: #666; + font-style: italic; + display: block; +} + +p.install-help { + margin: 8px 0; + font-style: italic; +} + +.no-break { + white-space: nowrap; +} + +hr { + border: 0; + border-top: 1px solid #ddd; + border-bottom: 1px solid #fafafa; +} + +.row-actions span.delete a, +.row-actions span.trash a, +.row-actions span.spam a, +.plugins a.delete, +#all-plugins-table .plugins a.delete, +#search-plugins-table .plugins a.delete, +.submitbox .submitdelete, +#media-items a.delete, +#media-items a.delete-permanently, +#nav-menu-footer .menu-delete, +#delete-link a.delete { + color: #a00; +} + +abbr.required, +span.required, +.file-error, +.row-actions .delete a:hover, +.row-actions .trash a:hover, +.row-actions .spam a:hover, +.plugins a.delete:hover, +#all-plugins-table .plugins a.delete:hover, +#search-plugins-table .plugins a.delete:hover, +.submitbox .submitdelete:hover, +#media-items a.delete:hover, +#media-items a.delete-permanently:hover, +#nav-menu-footer .menu-delete:hover, +#delete-link a.delete:hover { + color: #dc3232; + border: none; +} + +/*------------------------------------------------------------------------------ + 3.0 - Actions +------------------------------------------------------------------------------*/ + +#major-publishing-actions { + padding: 10px; + clear: both; + border-top: 1px solid #ddd; + background: #f5f5f5; +} + +#delete-action { + float: left; + line-height: 28px; +} + +#delete-link { + line-height: 28px; + vertical-align: middle; + text-align: left; + margin-left: 8px; +} + +#delete-link a { + text-decoration: none; +} + +#publishing-action { + text-align: right; + float: right; + line-height: 23px; +} + +#publishing-action .spinner { + float: left; +} + +#misc-publishing-actions { + padding: 6px 0 0; +} + +.misc-pub-section { + padding: 6px 10px 8px; +} + +.misc-pub-filename { + word-wrap: break-word; +} + +#minor-publishing-actions { + padding: 10px 10px 0 10px; + text-align: right; +} + +#save-post { + float: left; +} + +.preview { + float: right; +} + +#sticky-span { + margin-left: 18px; +} + +.approve, +.unapproved .unapprove { + display: none; +} + +.unapproved .approve, +.spam .approve, +.trash .approve { + display: inline; +} + +td.action-links, +th.action-links { + text-align: right; +} + +/* Filter bar */ +.wp-filter { + display: inline-block; + position: relative; + box-sizing: border-box; + margin: 12px 0 25px; + padding: 0 10px; + width: 100%; + 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; + border-radius: 30px; + background: #72777c; + 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 { + 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 .button.drawer-toggle { + margin: 10px 9px 0; + padding: 0 10px 0 6px; + border-color: transparent; + background-color: transparent; + color: #666; + vertical-align: baseline; + box-shadow: none; +} + +.wp-filter .drawer-toggle:before { + content: "\f111"; + margin: 0 5px 0 0; + color: #72777c; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; + -webkit-font-smoothing: antialiased; + -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, +.wp-filter .favorites-form { + display: none; + margin: 0 -10px 0 -20px; + padding: 20px; + border-top: 1px solid #eee; + background: #fafafa; + overflow: hidden; +} + +.show-filters .filter-drawer, +.show-favorites-form .favorites-form { + display: block; +} + +.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, +.show-filters .wp-filter .drawer-toggle:focus { + background: rgb(46, 162, 204); +} + +.show-filters .wp-filter .drawer-toggle:before { + color: #fff; +} + +.filter-group { + box-sizing: border-box; + position: relative; + float: left; + margin: 0 1% 0 0; + padding: 20px 10px 10px; + width: 24%; + background: #fff; + border: 1px solid #e5e5e5; + box-shadow: 0 1px 1px rgba(0,0,0,0.04); +} + +.filter-group legend { + position: absolute; + top: 10px; + display: block; + margin: 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 .filter-group-feature input, +.filter-drawer .filter-group-feature label { + display: inline-block; + margin: 7px 4px 7px 0; + line-height: 16px; +} + +.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; + font-size: 12px; + text-indent: 10px; +} + +.wp-filter .button.clear-filters { + display: none; + margin-left: 10px; +} + +.wp-filter .button-link.edit-filters { + padding: 0 5px; + line-height: 28px; +} + +.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; + 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 .favorites-form, +.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; + 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 { + margin: 0.5em 0; + 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; +} + +.notice-dismiss { + position: absolute; + top: 0; + right: 1px; + border: none; + margin: 0; + padding: 9px; + background: none; + color: #72777c; + cursor: pointer; +} + +.notice-dismiss:hover:before, +.notice-dismiss:active:before, +.notice-dismiss:focus:before { + color: #c00; +} + +.notice-dismiss:focus { + outline: none; + 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-left-color: #46b450; +} + +.notice-success.notice-alt { + background-color: #ecf7ed; +} + +.notice-warning { + border-left-color: #ffb900; +} + +.notice-warning.notice-alt { + background-color: #fff8e5; +} + +.notice-error, +div.error { + border-left-color: #dc3232; +} + +.notice-error.notice-alt { + background-color: #fbeaea; +} + +.notice-info { + 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, +.wrap div.updated, +.wrap div.error, +.media-upload-form .notice, +.media-upload-form div.error { + margin: 5px 0 15px; +} + +/* 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; + line-height: 19px; + padding: 11px 15px; + font-size: 14px; + text-align: left; + margin: 25px 20px 0 2px; + background-color: #fff; + border-left: 4px solid #ffba00; + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); +} + +ul#dismissed-updates { + display: none; +} + +form.upgrade { + margin-top: 8px; +} + +form.upgrade .hint { + font-style: italic; + font-size: 85%; + margin: -0.5em 0 2em 0; +} + +.update-php .spinner { + float: none; + margin: -4px 0; +} + +#ajax-loading, +.ajax-loading, +.ajax-feedback, +.imgedit-wait-spin, +.list-ajax-loading { /* deprecated */ + visibility: hidden; +} + +#ajax-response.alignleft { + 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 +------------------------------------------------------------------------------*/ +#adminmenu a, +#taglist a, +#catlist a { + text-decoration: none; +} + +/*------------------------------------------------------------------------------ + 6.1 - Screen Options Tabs +------------------------------------------------------------------------------*/ + +#screen-options-wrap, +#contextual-help-wrap { + margin: 0; + padding: 8px 20px 12px; + position: relative; +} + +#contextual-help-wrap { + overflow: auto; + margin-left: 0 !important; +} + +#screen-meta .screen-reader-text { + visibility: hidden; +} + +#screen-meta-links { + margin: 0 20px 0 0; +} + +/* screen options and help tabs revert */ +#screen-meta { + display: none; + margin: 0 20px -1px 0px; + position: relative; + background-color: #fff; + border: 1px solid #ddd; + border-top: none; + box-shadow: 0 1px 0 rgba(0,0,0,.025); +} + +#screen-options-link-wrap, +#contextual-help-link-wrap { + float: right; + height: 28px; + margin: 0 0 0 6px; + border: 1px solid #ddd; + border-top: none; + background: #fff; + box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); +} + +#screen-meta-links .screen-meta-toggle { + position: relative; + top: 0; +} + +#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 .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; + speak: none; + display: inline-block; + padding: 0 5px 0 0; + bottom: 2px; + position: relative; + vertical-align: bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #72777c; +} + +#screen-meta-links .screen-meta-active:after { + content: "\f142"; +} + +/* end screen options and help tabs */ + +.toggle-arrow { + background-repeat: no-repeat; + background-position: top left; + background-color: transparent; + height: 22px; + line-height: 22px; + display: block; +} + +.toggle-arrow-active { + background-position: bottom left; +} + +#screen-options-wrap h5, /* Back-compat for old plugins */ +#screen-options-wrap legend, +#contextual-help-wrap h5 { + margin: 0; + padding: 8px 0; + font-size: 13px; + font-weight: 600; +} + +.ie8 #screen-options-wrap legend { + color: inherit; +} + +.metabox-prefs label { + display: inline-block; + padding-right: 15px; + line-height: 30px; +} + +#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, +.metabox-prefs label input[type=checkbox] { + margin: -4px 5px 0 0; +} + +.metabox-prefs .columns-prefs label input { + margin: -1px 2px 0 0; +} + +.metabox-prefs label a { + display: none; +} + +.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; +} + +.screen-options + .screen-options { + margin-top: 10px; +} + +.metabox-prefs .submit { + margin-top: 1em; + padding: 0; +} + +/*------------------------------------------------------------------------------ + 6.2 - Help Menu +------------------------------------------------------------------------------*/ + +#contextual-help-wrap { + padding: 0; +} + +#contextual-help-columns { + position: relative; +} + +#contextual-help-back { + position: absolute; + top: 0; + bottom: 0; + left: 150px; + right: 170px; + border: 1px solid #e1e1e1; + border-top: none; + border-bottom: none; + background: #f6fbfd; +} + +#contextual-help-wrap.no-sidebar #contextual-help-back { + right: 0; + border-right-width: 0; + border-bottom-right-radius: 2px; +} + +.contextual-help-tabs { + float: left; + width: 150px; + margin: 0; +} + +.contextual-help-tabs ul { + margin: 1em 0; +} + +.contextual-help-tabs li { + margin-bottom: 0; + list-style-type: none; + border-style: solid; + border-width: 0 0 0 2px; + border-color: transparent; +} + +.contextual-help-tabs a { + display: block; + padding: 5px 5px 5px 12px; + line-height: 18px; + text-decoration: none; + border: 1px solid transparent; + border-right: none; + border-left: none; +} + +.contextual-help-tabs a:hover { + color: #32373c; +} + +.contextual-help-tabs .active { + padding: 0; + margin: 0 -1px 0 0; + border-left: 2px solid #00a0d2; + background: #f6fbfd; + box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02); +} + +.contextual-help-tabs .active a { + border-color: #e1e1e1; + color: #32373c; +} + +.contextual-help-tabs-wrap { + padding: 0 20px; + overflow: auto; +} + +.help-tab-content { + display: none; + margin: 0 22px 12px 0; + line-height: 1.6em; +} + +.help-tab-content.active { + display: block; +} + +.help-tab-content ul li { + list-style-type: disc; + margin-left: 18px; +} + +.contextual-help-sidebar { + width: 150px; + float: right; + padding: 0 8px 0 12px; + overflow: auto; +} + +/*------------------------------------------------------------------------------ + 8.0 - Layout Blocks +------------------------------------------------------------------------------*/ + +html.wp-toolbar { + padding-top: 32px; + box-sizing: border-box; +} + +.widefat th, +.widefat td { + color: #555; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + font-weight: 400; +} + +.widefat thead tr th, +.widefat thead tr td, +.widefat tfoot tr th, +.widefat tfoot tr td { + color: #32373c; +} + +.widefat td p { + margin: 2px 0 0.8em; +} + +.widefat p, +.widefat ol, +.widefat ul { + color: #32373c; +} + +.widefat .column-comment p { + 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 { + box-sizing: border-box; +} + +#wpbody-content .metabox-holder { + padding-top: 10px; +} + +.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, +.columns-2 #postbox-container-3 .empty-container, +.columns-2 #postbox-container-4 .empty-container, +.columns-3 #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; +} + +#post-body-content { + width: 100%; + min-width: 463px; + float: left; +} + +#post-body.columns-2 #postbox-container-1 { + float: right; + margin-right: -300px; + width: 280px; +} + +#post-body.columns-2 #side-sortables { + min-height: 250px; +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content .metabox-holder .postbox-container .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +.js .widget .widget-top, +.js .postbox .hndle { + cursor: move; +} + +.hndle a { + font-size: 11px; + font-weight: 400; +} + +.postbox .handlediv { + display: none; + float: right; + width: 36px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; +} + +.js .postbox .handlediv { + display: block; +} + +.sortable-placeholder { + border: 1px dashed #b4b9be; + margin-bottom: 20px; +} + +.postbox, +.stuffbox { + margin-bottom: 20px; + padding: 0; + line-height: 1; +} + +/* 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; +} + +.postbox .inside, +.stuffbox .inside { + padding: 0 12px 12px; + line-height: 1.4em; + font-size: 13px; +} + +.postbox .inside { + margin: 11px 0; + position: relative; +} + +.postbox .inside > p:last-child, +.rss-widget ul li:last-child { + margin-bottom: 1px !important; +} + +.postbox.closed h3 { + border: none; + box-shadow: none; +} + +.postbox table.form-table { + margin-bottom: 0; +} + +.postbox table.widefat { + box-shadow: none; +} + +.temp-border { + border: 1px dotted #ccc; +} + +.columns-prefs label { + padding: 0 10px 0 0; +} + +/* @todo: what is this doing here */ +#dashboard_right_now .versions .b, +#post-status-display, +#post-visibility-display, +#adminmenu .wp-submenu li.current, +#adminmenu .wp-submenu li.current a, +#adminmenu .wp-submenu li.current a:hover, +.media-item .percent, +.plugins .name, +#pass-strength-result.strong, +#pass-strength-result.short, +#ed_reply_toolbar #ed_reply_strong, +.item-controls .item-order a, +.feature-filter .feature-name { + font-weight: 600; +} + +/*------------------------------------------------------------------------------ + 21.0 - Admin Footer +------------------------------------------------------------------------------*/ + +#wpfooter { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px 20px; + color: #555d66; +} + +#wpfooter p { + font-size: 13px; + margin: 0; + line-height: 20px; +} + +#footer-thankyou { + font-style: italic; +} + +/*------------------------------------------------------------------------------ + 25.0 - Tabbed Admin Screen Interface (Experimental) +------------------------------------------------------------------------------*/ + +.nav-tab { + float: left; + border: 1px solid #ccc; + border-bottom: none; + 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; +} + +.nav-tab:hover, +.nav-tab:focus { + background-color: #fff; + color: #444; +} + +.nav-tab-active, +.nav-tab:focus:active { + box-shadow: none; +} + +.nav-tab-active { + margin-bottom: -1px; + color: #444; +} + +.nav-tab-active, +.nav-tab-active:hover, +.nav-tab-active:focus, +.nav-tab-active:focus:active { + border-bottom: 1px solid #f1f1f1; + background: #f1f1f1; + color: #000; +} + +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; + 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 +------------------------------------------------------------------------------*/ + +.spinner { + background: url(../images/spinner.gif) no-repeat; + background-size: 20px 20px; + display: inline-block; + visibility: hidden; + float: right; + vertical-align: middle; + opacity: 0.7; + filter: alpha(opacity=70); + width: 20px; + height: 20px; + margin: 4px 10px 0; +} + +.spinner.is-active, +.loading-content .spinner { + visibility: visible; +} + +#template div { + margin-right: 190px; +} + +.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; +} + +.plugin-install #description, +.plugin-install-network #description { + width: 60%; +} + +table .vers, +table .column-visible, +table .column-rating { + text-align: left; +} + +.attention, +.error-message { + color: red; + font-weight: 600; +} + +/* Scrollbar fix for bulk upgrade iframe */ +body.iframe { + height: 98%; +} + +/* Upgrader styles, Specific to Language Packs */ +.lp-show-latest p { + display: none; +} +.lp-show-latest p:last-child, +.lp-show-latest .lp-error p { + display: block; +} + +/* - Only used once or twice in all of WP - deprecate for global style +------------------------------------------------------------------------------*/ +.media-icon { + width: 62px; /* icon + border */ + text-align: center; +} + +.media-icon img { + border: 1px solid #e5e5e5; + border: 1px solid rgba(0, 0, 0, 0.07); +} + +#howto { + font-size: 11px; + margin: 0 5px; + display: block; +} + +.importers { + font-size: 16px; + width: auto; +} + +.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; +} + +.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; +} + +#namediv table { + width: 100%; +} + +#namediv td.first { + width: 10px; + white-space: nowrap; +} + +#namediv input { + width: 98%; +} + +#namediv p { + margin: 10px 0; +} + +#submitdiv h3 { + margin-bottom: 0 !important; +} + +/* - Used - but could/should be deprecated with a CSS reset +------------------------------------------------------------------------------*/ +.zerosize { + height: 0; + width: 0; + margin: 0; + border: 0; + padding: 0; + overflow: hidden; + position: absolute; +} + +br.clear { + height: 2px; + line-height: 2px; +} + +.checkbox { + border: none; + margin: 0; + padding: 0; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +.post-categories { + display: inline; + margin: 0; + padding: 0; +} + +.post-categories li { + display: inline; +} + +/* Star Ratings - Back-compat for pre-3.8 */ +div.star-holder { + position: relative; + height: 17px; + width: 100px; + background: url(../images/stars.png?ver=20121108) repeat-x bottom left; +} + +div.star-holder .star-rating { + background: url(../images/stars.png?ver=20121108) repeat-x top left; + height: 17px; + float: left; +} + +/* Star Ratings */ +.star-rating { + white-space: nowrap; +} +.star-rating .star { + display: inline-block; + width: 20px; + height: 20px; + -webkit-font-smoothing: antialiased; + font-size: 20px; + line-height: 1; + font-family: dashicons; + text-decoration: inherit; + font-weight: 400; + font-style: normal; + vertical-align: top; + transition: color .1s ease-in 0; + text-align: center; + color: #ffb900; +} + +.star-rating .star-full:before { + content: "\f155"; +} + +.star-rating .star-half:before { + content: "\f459"; +} + +.rtl .star-rating .star-half { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.star-rating .star-empty:before { + content: "\f154"; +} + +div.action-links { + font-weight: 400; + margin: 6px 0 0; +} + +/* Plugin install thickbox */ +#plugin-information { + background: #fff; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + padding: 0; +} + +#plugin-information-scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; +} + +#plugin-information-title { + padding: 0 26px; + background: #f5f5f5; + font-size: 22px; + font-weight: 600; + line-height: 56px; + position: relative; + height: 56px; +} + +#plugin-information-title.with-banner { + margin-right: 0; + height: 250px; + background-size: cover; +} + +#plugin-information-title h2 { + font-size: 1em; + font-weight: 600; + padding: 0; + margin: 0; + 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-top: 174px; + color: #fff; + background: rgba( 30, 30, 30, 0.9 ); + text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 ); + box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 ); + border-radius: 8px; +} + +#plugin-information-title div.vignette { + display: none; +} + +#plugin-information-title.with-banner div.vignette { + position: absolute; + display: block; + top: 0; + left: 0; + height: 250px; + width: 100%; + background: transparent; + 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: relative; + right: 0; + left: 0; + min-height: 36px; + font-size: 0; + z-index: 1; + border-bottom: 1px solid #ddd; + background: #f3f3f3; +} + +#plugin-information-tabs a { + position: relative; + display: inline-block; + padding: 9px 10px; + margin: 0; + height: 18px; + line-height: 18px; + font-size: 14px; + text-decoration: none; + transition: none; +} + +#plugin-information-tabs a.current { + margin: 0 -1px -1px; + background: #fff; + border: 1px solid #ddd; + 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, +#plugin-information-tabs a:focus { + outline: none; +} + +#plugin-information-content { + overflow: hidden; /* equal height column trick */ + background: #fff; + position: relative; + top: 0; + right: 0; + left: 0; + min-height: 100%; + /* Height of title + tabs + install now */ + min-height: calc( 100% - 152px ); +} + +#plugin-information-content.with-banner { + /* Height of banner + tabs + install now */ + min-height: calc( 100% - 346px ); +} + +#section-holder { + position: relative; + top: 0; + right: 250px; + bottom: 0; + left: 0; + margin-right: 250px; /* FYI box */ + padding: 10px 26px; + margin-bottom: -99939px; /* 60px less than the padding below to accommodate footer */ + padding-bottom: 99999px; /* equal height column trick */ +} + +#section-holder .updated { + margin: 16px 0; +} + +#plugin-information .fyi { + float: right; + position: relative; + top: 0; + right: 0; + padding: 16px; + 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; + background: #f3f3f3; + color: #666; +} + +#plugin-information .fyi strong { + color: #444; +} + +#plugin-information .fyi h3 { + font-weight: 600; + text-transform: uppercase; + font-size: 12px; + color: #666; + margin: 24px 0 8px; +} + +#plugin-information .fyi h2 { + font-size: 0.9em; + margin-bottom: 0; + margin-right: 0; +} + +#plugin-information .fyi ul { + padding: 0; + margin: 0; + list-style: none; +} + +#plugin-information .fyi li { + margin: 0 0 10px; +} + +#plugin-information .fyi-description { + margin-top: 0; +} + +#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: #e5e5e5; + 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: 13px 16px; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 33px; /* 33+13+13+1=60 */ + 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; + margin-left: 24px; +} + +#plugin-information .section, +#plugin-information .section p { + font-size: 14px; + line-height: 1.7; +} + +#plugin-information #section-screenshots ol { + list-style: none; + margin: 0; +} + +#plugin-information #section-screenshots li img { + vertical-align: text-top; + margin-top: 16px; + max-width: 100%; + width: auto; + height: auto; + 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; +} + +#plugin-information pre { + padding: 7px; + overflow: auto; + 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 #e5e5e5; +} + +#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; +} + +/* 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; + } + + #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; + } + + #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 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 accommodate footer */ + } + + #plugin-information .fyi h3, + #plugin-information .fyi small { + display: none; + } + + #plugin-information-footer { + padding: 12px 16px 0; + height: 46px; + } +} + +/* Thickbox for Plugin Install screen */ +body.about-php #TB_window, +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; +} + +/* IE 8 needs a change in the pseudo element content */ +.ie8 body.about-php #TB_window:before, +.ie8 body.plugin-install-php #TB_window:before, +.ie8 body.import-php #TB_window:before, +.ie8 body.plugins-php #TB_window:before, +.ie8 body.update-core-php #TB_window:before, +.ie8 body.index-php #TB_window:before { + content: " "; + background: none; +} + +body.about-php #TB_window.thickbox-loading:before, +body.plugin-install-php #TB_window.thickbox-loading:before, +body.import-php #TB_window.thickbox-loading:before, +body.plugins-php #TB_window.thickbox-loading:before, +body.update-core-php #TB_window.thickbox-loading:before, +body.index-php #TB_window.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.about-php #TB_window.thickbox-loading:before, + body.plugin-install-php #TB_window.thickbox-loading:before, + body.import-php #TB_window.thickbox-loading:before, + body.plugins-php #TB_window.thickbox-loading:before, + body.update-core-php #TB_window.thickbox-loading:before, + body.index-php #TB_window.thickbox-loading:before { + background-image: url(../images/spinner-2x.gif); + } +} + +body.about-php #TB_title, +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 { + float: left; + height: 1px; +} + +body.about-php #TB_ajaxWindowTitle, +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 { + display: none; +} + +/* only on these screens */ +.about-php #TB_closeWindowButton, +.plugin-install-php #TB_closeWindowButton, +.import-php #TB_closeWindowButton, +.plugins-php #TB_closeWindowButton, +.update-core-php #TB_closeWindowButton, +.index-php #TB_closeWindowButton { + left: auto; + right: -30px; + color: #eee; +} + + +body.about-php #TB_closeWindowButton:hover, +body.about-php #TB_closeWindowButton:focus, +body.plugin-install-php #TB_closeWindowButton:hover, +body.plugin-install-php #TB_closeWindowButton:focus, +body.import-php #TB_closeWindowButton:hover, +body.import-php #TB_closeWindowButton:focus, +body.plugins-php #TB_closeWindowButton:hover, +body.plugins-php #TB_closeWindowButton:focus, +body.update-core-php #TB_closeWindowButton:hover, +body.update-core-php #TB_closeWindowButton:focus, +body.index-php #TB_closeWindowButton:hover, +body.index-php #TB_closeWindowButton:focus { + color: #00a0d2; + outline: none; + box-shadow: none; +} + +body.about-php .tb-close-icon, +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 { + display: none; +} + +body.about-php #TB_closeWindowButton:after, +body.plugin-install-php #TB_closeWindowButton:after, +body.import-php #TB_closeWindowButton:after, +body.plugins-php #TB_closeWindowButton:after, +body.update-core-php #TB_closeWindowButton:after, +body.index-php #TB_closeWindowButton:after { + content: "\f335"; + 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.about-php #TB_closeWindowButton, + body.plugin-install-php #TB_closeWindowButton, + body.import-php #TB_closeWindowButton, + body.plugins-php #TB_closeWindowButton, + body.update-core-php #TB_closeWindowButton, + body.index-php #TB_closeWindowButton { + right: 0; + top: -30px; + } +} + +/* @todo: move this. */ +img { + border: none; +} + +/* Metabox collapse arrow indicators */ +.js .sidebar-name .sidebar-name-arrow:before, +.js .meta-box-sortables .postbox .toggle-indicator:before, +.bulk-action-notice .toggle-indicator:before { + content: "\f142"; + display: inline-block; + font: normal 20px/1 dashicons; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.js .widgets-holder-wrap.closed .sidebar-name-arrow:before, +.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before, +.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before { + content: "\f140"; +} + +.js .sidebar-name .sidebar-name-arrow:before { + padding: 10px; + left: 0; +} + +.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; +} + +.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 */ +#photo-add-url-div input[type="text"] { + width: 300px; +} + +/* Theme/Plugin Editor */ +.alignleft h2 { + margin: 0; +} + +#template textarea { + font-family: Consolas, Monaco, monospace; + font-size: 13px; + width: 97%; + background: #f9f9f9; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +/* rtl:ignore */ +#template textarea, +#docs-list { + direction: ltr; +} + +#template p { + width: 97%; +} + +#templateside { + float: right; + width: 190px; + word-wrap: break-word; +} + +#templateside h2, +#postcustomstuff p.submit { + margin: 0; +} + +#templateside h4 { + margin: 1em 0 0; +} + +#templateside ol, +#templateside ul { + margin: .5em 0; + padding: 0; +} + +#templateside li { + margin: 4px 0; +} + +#templateside li a, +.theme-editor-php .highlight { + display: block; + padding: 3px 3px 3px 12px; + text-decoration: none; +} + +.theme-editor-php .highlight { + margin: -3px 3px -3px -12px; +} + +#templateside .highlight { + border: none; + font-weight: 600; +} + +.nonessential { + color: #666; + font-size: 11px; + font-style: italic; + padding-left: 12px; +} + +#documentation { + margin-top: 10px; +} + +#documentation label { + line-height: 22px; + vertical-align: baseline; + font-weight: 600; +} + +.fileedit-sub { + padding: 10px 0 8px; + line-height: 180%; +} + +/* @todo: can we use a common class for these? */ +.nav-menus-php .item-edit:before, +.widget-top .widget-action .toggle-indicator:before, +.control-section .accordion-section-title:after, +.accordion-section-title:after { + content: "\f140"; + font: normal 20px/1 dashicons; + speak: none; + display: block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.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, +.accordion-section-title:after { + 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, +.item-edit:focus, +.sidebar-name:hover .sidebar-name-arrow, +.accordion-section-title:hover:after { + 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, +.accordion-section-title:after { + float: right; + right: 20px; + top: -2px; +} + +.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 .widget-action .toggle-indicator:before { + content: "\f142"; +} + +/*! + * 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 { + touch-action: none; +} + +/* Accordion */ +.accordion-section { + border-bottom: 1px solid #ddd; + margin: 0; +} + +.accordion-section.open .accordion-section-content, +.no-js .accordion-section .accordion-section-content { + display: block; +} + +.accordion-section.open:hover { + border-bottom-color: #ddd; +} + +.accordion-section-content { + display: none; + padding: 10px 20px 15px; + overflow: hidden; + background: #fff; +} + +.accordion-section-title { + margin: 0; + padding: 12px 15px 15px; + position: relative; + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.js .accordion-section-title { + cursor: pointer; +} + +.js .accordion-section-title:after { + position: absolute; + top: 12px; + right: 10px; + z-index: 1; +} + +.accordion-section-title:focus { + outline: none; +} + +.accordion-section-title:hover:after, +.accordion-section-title:focus:after { + border-color: #a0a5aa transparent; +} + +.cannot-expand .accordion-section-title { + cursor: auto; +} + +.cannot-expand .accordion-section-title:after { + display: none; +} + +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { + border-left: none; + border-right: none; + padding: 10px 10px 11px 14px; + line-height: 21px; + background: #fff; +} + +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { + top: 11px; +} + +.js .control-section:hover .accordion-section-title, +.js .control-section .accordion-section-title:hover, +.js .control-section.open .accordion-section-title, +.js .control-section .accordion-section-title:focus { + color: #23282d; + background: #f5f5f5; +} + +.control-section.open .accordion-section-title { + /* When expanded */ + 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 +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, +(-webkit-min-device-pixel-ratio: 1.25), +(min-resolution: 120dpi) { + /* Back-compat for pre-3.8 */ + div.star-holder, + div.star-holder .star-rating { + background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; + background-size: 21px 37px; + } + + .spinner { + background-image: url(../images/spinner-2x.gif); + } + + /* @todo: evaluate - most of these were likely replaced by dashicons */ + .curtime #timestamp, + #screen-meta-links a.show-settings, + .widget-top .widget-action, + .widget-top .widget-action:hover, + .sidebar-name-arrow, + .sidebar-name:hover .sidebar-name-arrow, + .meta-box-sortables .postbox:hover .handlediv, + #bulk-titles div a, + #bulk-titles div a:hover { + background: none !important; + } + +} + +@-ms-viewport { + width: device-width; +} + +@media screen and ( max-width: 782px ) { + html.wp-toolbar { + padding-top: 46px; + } + + body { + min-width: 240px; + overflow-x: hidden; + } + + body * { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + } + + #wpcontent { + position: relative; + margin-left: 0; + padding-left: 10px; + } + + #wpbody-content { + padding-bottom: 100px; + } + + .wrap { + margin-right: 12px; + margin-left: 0; + } + + /* categories */ + #col-left, + #col-right { + float: none; + width: auto; + } + + #col-left .col-wrap, + #col-right .col-wrap { + padding: 0; + } + + /* Hidden Elements */ + #screen-meta, + #screen-meta-links, + #collapse-menu, + .post-format-select { + display: none !important; + } + + .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; + white-space: nowrap; + } + + .wp-color-result { + height: auto; + padding-left: 45px; + } + + .wp-color-result:after { + font-size: 14px; + height: auto; + padding: 6px 14px; + } + + /* Feedback Messages */ + .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; + } + + .wp-responsive-open #wpbody { + right: -190px; + } + + code { + word-wrap: break-word; + } + + /* General Metabox */ + .postbox { + font-size: 14px; + } + + .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; + } + + .postbox .handlediv { + margin-top: 3px; + } + + /* Subsubsub Nav */ + .subsubsub { + font-size: 16px; + text-align: center; + margin-bottom: 15px; + } + + /* Theme/Plugin File Editor */ + #templateside { + float: none; + width: auto; + } + + #templateside li { + margin: 0; + } + + #templateside li a { + display: block; + padding: 5px; + } + + #templateside .highlight { + padding: 5px; + margin-left: -5px; + margin-top: -5px; + } + + .fileedit-sub .alignright { + margin-top: 15px; + } + + #wpfooter { + display: none; + } + + #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; + } + + .wp-filter .button.drawer-toggle { + font-size: 13px; + line-height: 26px; + height: 28px; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Disable horizontal scroll when responsive menu is open + since we push the main content off to the right. */ + #wpwrap.wp-responsive-open { + overflow-x: hidden; + } + + html.wp-toolbar { + padding-top: 0; + } + + #wpbody { + padding-top: 46px; + } + + /* Keep full-width boxes on Edit Post page from causing horizontal scroll */ + 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; + } +} From 2fea48b749af24b216738398bf6b15c821b34c44 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 21 Aug 2017 21:52:38 -0700 Subject: [PATCH 2/4] Use plugin version for common.css override --- codemirror-wp.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/codemirror-wp.php b/codemirror-wp.php index ec7a39c..83cd6ef 100644 --- a/codemirror-wp.php +++ b/codemirror-wp.php @@ -126,9 +126,10 @@ public static function register_scripts( WP_Scripts $scripts ) { public static function register_styles( WP_Styles $styles ) { /* * Removes `#template div` and `#template textarea` styles from common.css. + * See diff to file in core via https://github.com/WordPress/codemirror-wp/pull/39 */ - $styles->remove( 'common' ); - $styles->add( 'common', plugins_url( 'wp-admin/css/common.css', __FILE__ ), array(), self::CODEMIRROR_VERSION ); + $styles->registered['common']->src = plugins_url( 'wp-admin/css/common.css', __FILE__ ); + $styles->registered['common']->ver = self::VERSION; $styles->add( 'codemirror', plugins_url( 'wp-includes/js/codemirror/lib/codemirror.css', __FILE__ ), array(), self::CODEMIRROR_VERSION ); $styles->add( 'codemirror-addon-show-hint', plugins_url( 'wp-includes/js/codemirror/addon/hint/show-hint.css', __FILE__ ), array( 'codemirror' ), self::CODEMIRROR_VERSION ); From 6a12a4ed4c114e0e8fb25616cb0eae5d19edfa67 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 21 Aug 2017 22:17:19 -0700 Subject: [PATCH 3/4] Improve parity between CodeMirror and textarea styling --- codemirror-wp.php | 22 ++-------------------- wp-admin/css/common.css | 20 ++++++++++++++++++-- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/codemirror-wp.php b/codemirror-wp.php index 83cd6ef..b215c5b 100644 --- a/codemirror-wp.php +++ b/codemirror-wp.php @@ -125,8 +125,7 @@ public static function register_scripts( WP_Scripts $scripts ) { */ public static function register_styles( WP_Styles $styles ) { /* - * Removes `#template div` and `#template textarea` styles from common.css. - * See diff to file in core via https://github.com/WordPress/codemirror-wp/pull/39 + * Override common.css with patched version that has proper styling for CodeMirror and textarea. */ $styles->registered['common']->src = plugins_url( 'wp-admin/css/common.css', __FILE__ ); $styles->registered['common']->ver = self::VERSION; @@ -291,25 +290,8 @@ public static function load_plugin_editor_php() { */ public static function do_codemirror_admin_editor() { ?> - diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css index bc7447e..58fc8ce 100644 --- a/wp-admin/css/common.css +++ b/wp-admin/css/common.css @@ -2200,7 +2200,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ visibility: visible; } -#template div { +#template > div { margin-right: 190px; } @@ -3083,13 +3083,18 @@ img { #template textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; - width: 97%; background: #f9f9f9; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } +#template textarea, +#template .CodeMirror { + width: 97%; + height: calc( 100vh - 220px ); +} + /* rtl:ignore */ #template textarea, #docs-list { @@ -3664,6 +3669,17 @@ img { margin-top: -5px; } + #template > div { + float: none; + margin: 0; + width: auto; + } + + #template .CodeMirror, + #template textarea { + width: 100%; + } + .fileedit-sub .alignright { margin-top: 15px; } From a2c6282a00fb66080be374bd9726c36bfaac3909 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 21 Aug 2017 22:23:25 -0700 Subject: [PATCH 4/4] Update common.css to core eb78c8e09 --- codemirror-wp.php | 2 +- wp-admin/css/common.css | 38 +++++++++++++++++++------------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/codemirror-wp.php b/codemirror-wp.php index b215c5b..ac9c61f 100644 --- a/codemirror-wp.php +++ b/codemirror-wp.php @@ -291,7 +291,7 @@ public static function load_plugin_editor_php() { public static function do_codemirror_admin_editor() { ?> diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css index 58fc8ce..d74181a 100644 --- a/wp-admin/css/common.css +++ b/wp-admin/css/common.css @@ -265,8 +265,8 @@ a:focus .media-icon img, .wp-person a:focus .gravatar { color: #124964; box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } .ie8 a:focus { @@ -809,8 +809,8 @@ img.emoji { .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } .key-labels label { @@ -1490,8 +1490,8 @@ div.error { /* Error icon. */ .update-message.notice-error p:before { - color: #dc3232; - content: "\f534"; + color: #dc3232; + content: "\f534"; } .wrap .notice p:before, @@ -1697,7 +1697,7 @@ form.upgrade .hint { #contextual-help-wrap h5 { margin: 0; padding: 8px 0; - font-size: 13px; + font-size: 13px; font-weight: 600; } @@ -2165,10 +2165,10 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ /* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */ .nav-tab-wrapper:not(.wp-clearfix):after { - content: ""; - display: table; - clear: both; -} + content: ""; + display: table; + clear: both; + } .ie8 .nav-tab-wrapper { /* contain floats establishing a new block formatting context */ @@ -2907,8 +2907,8 @@ body.index-php #TB_window.thickbox-loading:before { } @media print, -(-webkit-min-device-pixel-ratio: 1.25), -(min-resolution: 120dpi) { + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { body.about-php #TB_window.thickbox-loading:before, body.plugin-install-php #TB_window.thickbox-loading:before, @@ -3066,8 +3066,8 @@ img { .js .postbox .handlediv:focus .toggle-indicator:before { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } /* @todo: appears to be Press This only and overridden */ @@ -3214,8 +3214,8 @@ img { .widget-top .widget-action:focus .toggle-indicator:before { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30,140,190,.8); + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30,140,190,.8); } .control-section .accordion-section-title:after, @@ -3489,8 +3489,8 @@ img { * HiDPI Displays */ @media print, -(-webkit-min-device-pixel-ratio: 1.25), -(min-resolution: 120dpi) { + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { /* Back-compat for pre-3.8 */ div.star-holder, div.star-holder .star-rating {