/*! * WP AdminCSS v0.1.0 * https://wp-admincss.com * Tokens overlay © Artificial Poets, Inc. — Apache-2.0 * WordPress core admin CSS © WordPress contributors — GPLv2-or-later * See https://wp-admincss.com/NOTICE for full third-party attributions. */ /* * WP AdminCSS — Token Foundation * CSS custom properties that extend WordPress Admin's design system. * * Color schemes respond to WP's native body classes (.admin-color-*) * so your plugin inherits the user's chosen scheme automatically. * * Usage in your plugin CSS: * color: var(--wpadmin-primary); * background: var(--wpadmin-menu-bg); */ /* ─── Default (matches WP 6.x default color scheme) ─────────────────────── */ :root { /* Primary accent */ --wpadmin-primary: #2271b1; --wpadmin-primary-dark: #135e96; --wpadmin-primary-darker: #0a4b78; --wpadmin-focus-ring: #4f94d4; /* Sidebar / menu */ --wpadmin-menu-bg: #1d2327; --wpadmin-menu-sub-bg: #2c3338; --wpadmin-menu-text: #a7aaad; --wpadmin-menu-icon: #a7aaad; --wpadmin-menu-active-bg: #2271b1; --wpadmin-menu-hover-bg: #2c3338; /* Surface & layout */ --wpadmin-body-bg: #f0f0f1; --wpadmin-surface: #fff; --wpadmin-surface-alt: #f6f7f7; --wpadmin-border: #c3c4c7; --wpadmin-radius: 4px; /* Typography */ --wpadmin-text: #3c434a; --wpadmin-text-subtle: #646970; --wpadmin-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --wpadmin-font-mono: Consolas, Monaco, monospace; --wpadmin-font-size: 14px; --wpadmin-line-height: 1.4; /* Spacing scale */ --wpadmin-space-1: 4px; --wpadmin-space-2: 8px; --wpadmin-space-3: 12px; --wpadmin-space-4: 16px; --wpadmin-space-5: 20px; --wpadmin-space-6: 24px; --wpadmin-space-8: 32px; --wpadmin-space-10: 40px; --wpadmin-space-12: 48px; /* Status colors — consistent across all schemes */ --wpadmin-success: #46b450; --wpadmin-success-bg: #edfaef; --wpadmin-error: #d63638; --wpadmin-error-bg: #fcf0f1; --wpadmin-warning: #dba617; --wpadmin-warning-bg: #fcf9e8; --wpadmin-info: #72aee6; --wpadmin-info-bg: #e5f5fa; } /* ─── WP Admin color schemes ─────────────────────────────────────────────── */ /* Applied automatically when WP adds these classes to . */ /* You can also add them to any ancestor element for isolated theming. */ .admin-color-default { --wpadmin-primary: #2271b1; --wpadmin-primary-dark: #135e96; --wpadmin-primary-darker: #0a4b78; --wpadmin-focus-ring: #4f94d4; --wpadmin-menu-bg: #1d2327; --wpadmin-menu-sub-bg: #2c3338; --wpadmin-menu-text: #a7aaad; --wpadmin-menu-icon: #a7aaad; --wpadmin-menu-active-bg: #2271b1; --wpadmin-menu-hover-bg: #2c3338; } .admin-color-blue { --wpadmin-primary: #096484; --wpadmin-primary-dark: #07526c; --wpadmin-primary-darker: #053f54; --wpadmin-focus-ring: #4796ac; --wpadmin-menu-bg: #1e3a4a; --wpadmin-menu-sub-bg: #1a3344; --wpadmin-menu-text: #e2ecf1; --wpadmin-menu-icon: #e2ecf1; --wpadmin-menu-active-bg: #096484; --wpadmin-menu-hover-bg: #1a3344; } .admin-color-coffee { --wpadmin-primary: #c7a589; --wpadmin-primary-dark: #a6856d; --wpadmin-primary-darker: #876854; --wpadmin-focus-ring: #c7a589; --wpadmin-menu-bg: #1a1a1a; --wpadmin-menu-sub-bg: #2b2b2b; --wpadmin-menu-text: #c6b9aa; --wpadmin-menu-icon: #c6b9aa; --wpadmin-menu-active-bg: #c7a589; --wpadmin-menu-hover-bg: #2b2b2b; } .admin-color-ectoplasm { --wpadmin-primary: #a3b745; --wpadmin-primary-dark: #8a9c38; --wpadmin-primary-darker: #71802d; --wpadmin-focus-ring: #a3b745; --wpadmin-menu-bg: #413256; --wpadmin-menu-sub-bg: #3b2d50; --wpadmin-menu-text: #cbc5d2; --wpadmin-menu-icon: #cbc5d2; --wpadmin-menu-active-bg: #a3b745; --wpadmin-menu-hover-bg: #3b2d50; } .admin-color-midnight { --wpadmin-primary: #e14d43; --wpadmin-primary-dark: #c9413a; --wpadmin-primary-darker: #b03730; --wpadmin-focus-ring: #e14d43; --wpadmin-menu-bg: #25282b; --wpadmin-menu-sub-bg: #363b3f; --wpadmin-menu-text: #e4e6e8; --wpadmin-menu-icon: #e4e6e8; --wpadmin-menu-active-bg: #e14d43; --wpadmin-menu-hover-bg: #363b3f; } .admin-color-ocean { --wpadmin-primary: #9ebaa0; --wpadmin-primary-dark: #83a285; --wpadmin-primary-darker: #6a8a6c; --wpadmin-focus-ring: #9ebaa0; --wpadmin-menu-bg: #738e96; --wpadmin-menu-sub-bg: #5d7983; --wpadmin-menu-text: #f0f6f7; --wpadmin-menu-icon: #f0f6f7; --wpadmin-menu-active-bg: #9ebaa0; --wpadmin-menu-hover-bg: #5d7983; } .admin-color-sunrise { --wpadmin-primary: #dd823b; --wpadmin-primary-dark: #c9732e; --wpadmin-primary-darker: #b56425; --wpadmin-focus-ring: #dd823b; --wpadmin-menu-bg: #3e3e3e; --wpadmin-menu-sub-bg: #4d4d4d; --wpadmin-menu-text: #f3e9d8; --wpadmin-menu-icon: #f3e9d8; --wpadmin-menu-active-bg: #dd823b; --wpadmin-menu-hover-bg: #4d4d4d; } .admin-color-light { --wpadmin-primary: #2271b1; --wpadmin-primary-dark: #135e96; --wpadmin-primary-darker: #0a4b78; --wpadmin-focus-ring: #4f94d4; --wpadmin-menu-bg: #e5e5e5; --wpadmin-menu-sub-bg: #d5d5d5; --wpadmin-menu-text: #333; --wpadmin-menu-icon: #555; --wpadmin-menu-active-bg: #2271b1; --wpadmin-menu-hover-bg: #d5d5d5; } .admin-color-modern { --wpadmin-primary: #3858e9; --wpadmin-primary-dark: #2d48d5; --wpadmin-primary-darker: #2238c1; --wpadmin-focus-ring: #7b93f0; --wpadmin-menu-bg: #1e1e1e; --wpadmin-menu-sub-bg: #2a2a2a; --wpadmin-menu-text: #e8eaf6; --wpadmin-menu-icon: #e8eaf6; --wpadmin-menu-active-bg: #3858e9; --wpadmin-menu-hover-bg: #2a2a2a; } /* * @wp-admincss/core-css — WordPress Admin CSS * Bundle of WordPress core admin stylesheets. * * Import @wp-admincss/tokens before this file for CSS custom properties * and color-scheme support. */ /* @import dashicons.css */ /* * Dashicons — WordPress's built-in icon font. * * Imported by wp-admin.css ("optional, enabled by default"). To opt out, * import individual component CSS files from @wp-admincss/core-css/src/ * instead of the bundled wp-admin.css. * * The icon catalog (~300 icons) is pulled from WordPress's official CDN * so it stays in sync with WP core and adds no maintenance burden here. * * Inside a WordPress plugin, prefer wp_enqueue_style('dashicons') to avoid * the external request — the rules are identical and WP serves them locally. * The PHP package exposes Assets::enqueue_dashicons() for this. * * Browse the catalog: https://developer.wordpress.org/resource/dashicons/ */ @import url("https://s.w.org/wp-includes/css/dashicons.min.css"); /* Helpful sizing classes that aren't in WP core. */ .dashicons.is-large { font-size: 28px; width: 28px; height: 28px; } .dashicons.is-small { font-size: 16px; width: 16px; height: 16px; } /* @import common.css */ /* 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; } /* 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 { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ } .button .screen-reader-text { height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */ } .screen-reader-text + .dashicons-external { margin-top: -1px; margin-left: 2px; } .screen-reader-shortcut { position: absolute; top: -1000em; left: 6px; height: auto; width: auto; display: block; font-size: 14px; font-weight: 600; padding: 15px 23px 14px; /* Background and color set to prevent false positives in automated accessibility tests. */ background: #f0f0f1; color: #2271b1; z-index: 100000; line-height: normal; } .screen-reader-shortcut:focus { top: -25px; /* Overrides a:focus in the admin. See ticket #56789. */ color: #2271b1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); text-decoration: none; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } .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, .comment-ays { border: 1px solid #c3c4c7; 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, .comment-ays { background: #fff; } /* general */ html, body { height: 100%; margin: 0; padding: 0; } body { background: #f0f0f1; color: #3c434a; 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: #2271b1; transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; } a, div { outline: 0; } a:hover, a:active { color: #135e96; } a:focus, a:focus .media-icon img, a:focus .plugin-icon, .wp-person a:focus .gravatar { color: #043959; box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } #adminmenu a:focus { box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; } .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, .wp-die-message { 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: #1d2327; font-size: 2em; margin: .67em 0; } h2, h3 { color: #1d2327; font-size: 1.3em; margin: 1em 0; } .update-core-php h2 { margin-top: 4em; } .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; margin: 0 1px; background: #f0f0f1; 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: #646970; } .subsubsub a { line-height: 2; padding: .2em; text-decoration: none; } .subsubsub a .count, .subsubsub a.current .count { color: #50575e; /* #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 #c3c4c7; } .widefat tfoot th, .widefat tfoot td { border-top: 1px solid #c3c4c7; 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; } .js-update-details-toggle .dashicons { text-decoration: none; } .js-update-details-toggle[aria-expanded="true"] .dashicons::before { content: "\f142"; } .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; line-height: 1.3; } .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: #50575e; font-size: 14px; font-weight: 400; line-height: 1; } .subtitle strong { word-break: break-all; } .wrap .add-new-h2, /* deprecated */ .wrap .add-new-h2:active, /* deprecated */ .wrap .page-title-action, .wrap .page-title-action:active { display: inline-block; position: relative; box-sizing: border-box; cursor: pointer; white-space: nowrap; text-decoration: none; text-shadow: none; top: -3px; margin-left: 4px; border: 1px solid #2271b1; border-radius: 3px; background: #f6f7f7; font-size: 13px; font-weight: 400; line-height: 2.15384615; color: #2271b1; /* use the standard color used for buttons */ padding: 0 10px; min-height: 30px; -webkit-appearance: none; } .wrap .wp-heading-inline + .page-title-action { margin-left: 0; } .wrap .add-new-h2:hover, /* deprecated */ .wrap .page-title-action:hover { background: #f0f0f1; border-color: #0a4b78; color: #0a4b78; } /* lower specificity: color needs to be overridden by :hover and :active */ .page-title-action:focus { color: #0a4b78; } /* Dashicon for language options on General Settings and Profile screens */ .form-table th label[for="locale"] .dashicons, .form-table th label[for="WPLANG"] .dashicons { margin-left: 5px; } .wrap .page-title-action:focus { border-color: #3582c4; box-shadow: 0 0 0 1px #3582c4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .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: #8c8f94; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .sorthelper { background-color: #c5d9ed; } .ac_match, .subsubsub a.current { color: #000; } .striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate { background-color: #f6f7f7; } .bar { background-color: #f0f0f1; border-right-color: #4f94d4; } /* Helper classes for plugins to leverage the active WordPress color scheme */ .highlight { background-color: #f0f6fc; color: #3c434a; } .wp-ui-primary { color: #fff; background-color: #2c3338; } .wp-ui-text-primary { color: #2c3338; } .wp-ui-highlight { color: #fff; background-color: #2271b1; } .wp-ui-text-highlight { color: #2271b1; } .wp-ui-notification { color: #fff; background-color: #d63638; } .wp-ui-text-notification { color: #d63638; } .wp-ui-text-icon { color: #8c8f94; /* 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: #f6f7f7; color: #1d2327; } .stuffbox .hndle { border-bottom: 1px solid #c3c4c7; } .quicktags { background-color: #c3c4c7; 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 .ntdelbutton:before, .notice-dismiss:before { background: none; color: #787c82; content: "\f153"; display: block; font: normal 16px/20px dashicons; speak: never; height: 20px; text-align: center; width: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .welcome-panel .welcome-panel-close:before { margin: 0; } .tagchecklist .ntdelbutton .remove-tag-icon:before { margin-left: 2px; border-radius: 50%; color: #2271b1; /* vertically center the icon cross browsers */ line-height: 1.28; } .tagchecklist .ntdelbutton:focus { outline: 0; } .tagchecklist .ntdelbutton:hover .remove-tag-icon:before, .tagchecklist .ntdelbutton:focus .remove-tag-icon:before, #bulk-titles .ntdelbutton:hover:before, #bulk-titles .ntdelbutton:focus:before { color: #d63638; } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .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: #646970; display: block; } p.install-help { margin: 8px 0; font-style: italic; } .no-break { white-space: nowrap; } hr { border: 0; border-top: 1px solid #dcdcde; border-bottom: 1px solid #f6f7f7; } .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, a#remove-post-thumbnail, .privacy_requests .remove-personal-data .remove-personal-data-handle { color: #b32d2e; } 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, a#remove-post-thumbnail:hover, .privacy_requests .remove-personal-data .remove-personal-data-handle:hover { color: #b32d2e; border: none; } .application-password-display .success { color: #007017; margin-left: 0.5rem; } /*------------------------------------------------------------------------------ 3.0 - Actions ------------------------------------------------------------------------------*/ #major-publishing-actions { padding: 10px; clear: both; border-top: 1px solid #dcdcde; background: #f6f7f7; } #delete-action { float: left; line-height: 2.30769231; /* 30px */ } #delete-link { line-height: 2.30769231; /* 30px */ vertical-align: middle; text-align: left; margin-left: 8px; } #delete-link a { text-decoration: none; } #publishing-action { text-align: right; float: right; line-height: 1.9; } #publishing-action .spinner { float: none; margin-top: 5px; } #misc-publishing-actions { padding: 6px 0 0; } .misc-pub-section { padding: 6px 10px 8px; } .word-wrap-break-word, .misc-pub-filename { word-wrap: break-word; } #minor-publishing-actions { padding: 10px 10px 0; 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; } #misc-publishing-actions .notice { margin-left: 10px; margin-right: 10px; } /* 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 #c3c4c7; background: #fff; color: #50575e; 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: #646970; 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: #646970; cursor: pointer; } .filter-links .current { box-shadow: none; border-bottom: 4px solid #646970; color: #1d2327; } .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: #135e96; } .wp-filter .search-form { float: right; display: flex; align-items: center; column-gap: .5rem; } .wp-filter .search-form input[type="search"] { width: 280px; max-width: 100%; } .wp-filter .search-form select { margin: 0; } /* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */ .plugin-install-php .wp-filter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .wp-filter .search-form.search-plugins select, .wp-filter .search-form.search-plugins .wp-filter-search, .no-js .wp-filter .search-form.search-plugins .button { display: inline-block; vertical-align: top; } .wp-filter .button.drawer-toggle { margin: 10px 9px 0; padding: 0 10px 0 6px; border-color: transparent; background-color: transparent; color: #646970; vertical-align: baseline; box-shadow: none; } .wp-filter .drawer-toggle:before { content: "\f111"; margin: 0 5px 0 0; color: #646970; 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: #135e96; } .wp-filter .button.drawer-toggle:hover, .wp-filter .button.drawer-toggle:focus:active { border-color: transparent; } .wp-filter .button.drawer-toggle:focus { border-color: #4f94d4; } .wp-filter .button.drawer-toggle:active { background: transparent; box-shadow: 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 #f0f0f1; background: #f6f7f7; overflow: hidden; } .wp-filter .favorites-form .favorites-username { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .wp-filter .favorites-form .favorites-username input { margin: 0; } .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: #646970; color: #fff; } .show-filters .wp-filter .drawer-toggle:hover, .show-filters .wp-filter .drawer-toggle:focus { background: #2271b1; } .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 #dcdcde; 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 { line-height: 1.4; } .filter-drawer .filter-group-feature input { position: absolute; margin: 0; } .filter-group .filter-group-feature label { display: block; margin: 14px 0 14px 23px; } .filter-drawer .buttons { clear: both; margin-bottom: 20px; } .filter-drawer .filter-group + .buttons { margin-bottom: 0; padding-top: 20px; } .filter-drawer .buttons .button span { display: inline-block; opacity: 0.8; 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: 2.2; } .filtered-by { display: none; margin: 0; } .filtered-by > span { font-weight: 600; } .filtered-by a { margin-left: 10px; } .filtered-by .tags { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; } .filtered-by .tag { padding: 4px 8px; border: 1px solid #dcdcde; 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; } .filters-applied .filtered-by { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .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: 1138px) { .wp-filter .search-form { margin: 11px 0; } } @media only screen and (max-width: 1120px) { .filter-drawer { border-bottom: 1px solid #f0f0f1; } .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%; } .wp-filter .search-form { margin: 11px 0; flex-wrap: wrap; row-gap: 10px; } } @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: 1px solid #c3c4c7; border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); 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: #1d2327; 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: #787c82; cursor: pointer; } .notice-dismiss:hover:before, .notice-dismiss:active:before, .notice-dismiss:focus:before { color: #d63638; } .notice-dismiss:focus { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .notice-success, div.updated { border-left-color: #00a32a; } .notice-success.notice-alt { background-color: #edfaef; } .notice-warning { border-left-color: #dba617; } .notice-warning.notice-alt { background-color: #fcf9e8; } .notice-error, div.error { border-left-color: #d63638; } .notice-error.notice-alt { background-color: #fcf0f1; } .notice-info { border-left-color: #72aee6; } .notice-info.notice-alt { background-color: #f0f6fc; } #plugin-information-footer .update-now:not(.button-disabled):before { color: #d63638; content: "\f463"; display: inline-block; font: normal 20px/1 dashicons; margin: -3px 5px 0 -2px; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; } #plugin-information-footer .notice { margin-top: -5px; } .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, .button.activating-message:before, .button.activated-message: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; } .wrap #templateside .notice { display: block; margin: 0; padding: 5px 8px; font-weight: 600; text-decoration: none; } .wrap #templateside span.notice { margin-left: -12px; } #templateside li.notice a { padding: 0; } /* Update icon. */ .update-message p:before, .updating-message p:before, .import-php .updating-message:before, .button.updating-message:before, .button.installing:before, .button.activating-message:before { color: #d63638; content: "\f463"; } /* Spins the update icon. */ .updating-message p:before, .import-php .updating-message:before, .button.updating-message:before, .button.installing:before, .button.activating-message:before, .plugins .column-auto-updates .dashicons-update.spin, .theme-overlay .theme-autoupdate .dashicons-update.spin { animation: rotation 2s infinite linear; } @media (prefers-reduced-motion: reduce) { .updating-message p:before, .import-php .updating-message:before, .button.updating-message:before, .button.installing:before, .button.activating-message:before, .plugins .column-auto-updates .dashicons-update.spin, .theme-overlay .theme-autoupdate .dashicons-update.spin { animation: none; } } .theme-overlay .theme-autoupdate .dashicons-update.spin { margin-right: 3px; } /* Updated icon (check mark). */ .updated-message p:before, .installed p:before, .button.updated-message:before, .button.activated-message:before { color: #68de7c; content: "\f147"; } /* Error icon. */ .update-message.notice-error p:before { color: #d63638; content: "\f534"; } .wrap .notice p:before, .import-php .updating-message:before { margin-right: 6px; } .import-php .updating-message:before { vertical-align: bottom; } #update-nag, .update-nag { display: inline-block; line-height: 1.4; padding: 11px 15px; font-size: 14px; margin: 25px 20px 0 2px; } ul#dismissed-updates { display: none; } #dismissed-updates li > p { margin-top: 0; } #dismiss, #undismiss { margin-left: 0.5em; } form.upgrade { margin-top: 8px; } form.upgrade .hint { font-style: italic; font-size: 85%; margin: -0.5em 0 2em; } .update-php .spinner { float: none; margin: -4px 0; } h2.wp-current-version { margin-bottom: .3em; } p.update-last-checked { margin-top: 0; } p.auto-update-status { margin-top: 2em; line-height: 1.8; } #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, .button.activated-message:before, .button.activating-message:before { margin: 3px 5px 0 -2px; } #plugin-information-footer .button { padding: 0 14px; line-height: 2.71428571; /* 38px */ font-size: 14px; vertical-align: middle; min-height: 40px; margin-bottom: 4px; } #plugin-information-footer .button.installed:before, #plugin-information-footer .button.installing:before, #plugin-information-footer .button.updating-message:before, #plugin-information-footer .button.updated-message:before, #plugin-information-footer .button.activated-message:before, #plugin-information-footer .button.activating-message:before { margin: 9px 5px 0 -2px; } #plugin-information-footer .button.update-now.updating-message:before { margin: -3px 5px 0 -2px; } .button-primary.updating-message:before, .button-primary.activating-message:before { color: #fff; } .button-primary.updated-message:before, .button-primary.activated-message:before { color: #9ec2e6; } .button.updated-message, .button.activated-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: never; } } /* @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; } #screen-meta-links { float: right; margin: 0 20px 0 0; } /* screen options and help tabs revert */ #screen-meta { display: none; margin: 0 20px -1px 0; position: relative; background-color: #fff; border: 1px solid #c3c4c7; border-top: none; box-shadow: 0 0 0 transparent; } #screen-options-link-wrap, #contextual-help-link-wrap { float: left; margin: 0 0 0 6px; } #screen-meta-links .screen-meta-toggle { position: relative; top: 0; } #screen-meta-links .show-settings { border: 1px solid #c3c4c7; border-top: none; height: auto; margin-bottom: 0; padding: 3px 6px 3px 16px; background: #fff; border-radius: 0 0 4px 4px; color: #646970; line-height: 1.7; box-shadow: 0 0 0 transparent; transition: box-shadow 0.1s linear; } #screen-meta-links .show-settings:hover, #screen-meta-links .show-settings:active, #screen-meta-links .show-settings:focus { color: #2c3338; } #screen-meta-links .show-settings:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } #screen-meta-links .show-settings:active { transform: none; } #screen-meta-links .show-settings:after { right: 0; content: "\f140"; font: normal 20px/1 dashicons; speak: never; 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; } #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; } .metabox-prefs label { display: inline-block; padding-right: 15px; line-height: 2.35; } #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; padding-right: 0; } .metabox-prefs .screen-options label { line-height: 2.2; 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 #c3c4c7; border-top: none; border-bottom: none; background: #f0f6fc; } #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: 1.4; text-decoration: none; border: 1px solid transparent; border-right: none; border-left: none; } .contextual-help-tabs a:hover { color: #2c3338; } .contextual-help-tabs .active { padding: 0; margin: 0 -1px 0 0; border-left: 2px solid #72aee6; background: #f0f6fc; 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: #c3c4c7; color: #2c3338; } .contextual-help-tabs-wrap { padding: 0 20px; overflow: auto; } .help-tab-content { display: none; margin: 0 22px 12px 0; line-height: 1.6; } .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: var(--wp-admin--admin-bar--height); box-sizing: border-box; -ms-overflow-style: scrollbar; /* See ticket #48545 */ } .widefat th, .widefat td { color: #50575e; } .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: #2c3338; } .widefat td p { margin: 2px 0 0.8em; } .widefat p, .widefat ol, .widefat ul { color: #2c3338; } .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 .meta-box-sortables { /* The jQuery UI Sortables need some initial height to work properly. */ min-height: 1px; position: relative; } #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 { outline: none; height: 0; min-height: 0; } } .js .widget .widget-top, .js .postbox .hndle { cursor: move; } .js .widget .widget-top.is-non-sortable, .js .postbox .hndle.is-non-sortable { cursor: auto; } /* Configurable dashboard widgets "Configure" edit-box link. */ .hndle a { font-size: 12px; font-weight: 400; } .postbox-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c3c4c7; } .postbox-header .hndle { flex-grow: 1; /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */ display: flex; justify-content: space-between; align-items: center; } .postbox-header .handle-actions { flex-shrink: 0; } /* Post box order and toggle buttons. */ .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .handlediv { width: 1.62rem; height: 1.62rem; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } .postbox .handle-order-higher, .postbox .handle-order-lower { color: #787c82; width: 1.62rem; } /* Post box order buttons in the block editor meta boxes area. */ .edit-post-meta-boxes-area .postbox .handle-order-higher, .edit-post-meta-boxes-area .postbox .handle-order-lower { width: 44px; height: 44px; color: #1d2327 } .postbox .handle-order-higher[aria-disabled="true"], .postbox .handle-order-lower[aria-disabled="true"] { cursor: default; color: #a7aaad; } .sortable-placeholder { border: 1px dashed #c3c4c7; margin-bottom: 20px; } .postbox, .stuffbox { margin-bottom: 20px; padding: 0; line-height: 1; } .postbox.closed { border-bottom: 0; } /* user-select is not a part of the CSS standard - may change behavior in the future */ .postbox .hndle, .stuffbox .hndle { -webkit-user-select: none; user-select: none; } .postbox .inside { padding: 0 12px 12px; line-height: 1.4; font-size: 13px; } .stuffbox .inside { padding: 0; line-height: 1.4; font-size: 13px; margin-top: 0; } .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 #c3c4c7; } .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, #comment-status-display { font-weight: 600; } /*------------------------------------------------------------------------------ 21.0 - Admin Footer ------------------------------------------------------------------------------*/ #wpfooter { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 20px; color: #50575e; } #wpfooter p { font-size: 13px; margin: 0; line-height: 1.55; } #footer-thankyou { font-style: italic; } /*------------------------------------------------------------------------------ 25.0 - Tabbed Admin Screen Interface (Experimental) ------------------------------------------------------------------------------*/ .nav-tab { float: left; border: 1px solid #c3c4c7; 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: 1.71428571; font-weight: 600; background: #dcdcde; color: #50575e; 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: 1.33; } .nav-tab:hover, .nav-tab:focus { background-color: #fff; color: #3c434a; } .nav-tab-active, .nav-tab:focus:active { box-shadow: none; } .nav-tab-active { margin-bottom: -1px; color: #3c434a; } .nav-tab-active, .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { border-bottom: 1px solid #f0f0f1; background: #f0f0f1; 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 #c3c4c7; 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; } /*------------------------------------------------------------------------------ 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: 16em; } #template .notice { margin-top: 1em; margin-right: 3%; } #template .notice p { width: auto; } #template .submit .spinner { float: none; } .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ .metabox-holder h2.hndle { font-size: 14px; padding: 8px 12px; margin: 0; line-height: 1.4; } /* Back-compat for nav-menus screen */ .nav-menus-php .metabox-holder h3 { padding: 0; } .accordion-container h3.accordion-section-title { padding: 0 !important; } .accordion-section-title button.accordion-trigger, .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger { background: inherit; color: #1d2327; display: block; position: relative; text-align: left; width: 100%; outline: none; border: 0; padding: 10px 10px 11px 14px; line-height: 1.5; cursor: pointer; } .accordion-section-title button.accordion-trigger:focus, .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus { box-shadow: 0 0 0 2px #2271b1; outline: 2px solid transparent; } .accordion-section-title span.dashicons.dashicons-arrow-down, .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down { position: absolute; right: 10px; left: auto; color: #787c82; border-radius: 50px; top: 50%; transform: translateY(-50%); } .accordion-section-title:hover span.dashicons.dashicons-arrow-down, .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down { color: #1d2327; } .accordion-section-title span.dashicons.dashicons-arrow-down::before, .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before { position: relative; left: -1px; } .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down, .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down { transform: rotate(180deg) translate(0, 50%); } #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: #d63638; 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 #dcdcde; 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.4; } .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: 1.55; /* Same as with .updating-message */ color: #50575e; 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 { color: #1d2327; border-bottom: 1px solid #f0f0f1; } #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: 100%; } #namediv p { margin: 10px 0; } /* - 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: 0.15; } .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; text-align: center; color: #dba617; } .star-rating .star-full:before { content: "\f155"; } .star-rating .star-half:before { content: "\f459"; } .rtl .star-rating .star-half { 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: #f6f7f7; font-size: 22px; font-weight: 600; line-height: 2.4; 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: 1.68; box-sizing: border-box; max-width: 100%; padding: 0 15px; margin-top: 174px; color: #fff; background: rgba(29, 35, 39, 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 #dcdcde; background: #f6f7f7; } #plugin-information-tabs a { position: relative; display: inline-block; padding: 9px 10px; margin: 0; height: 18px; line-height: 1.3; font-size: 14px; text-decoration: none; transition: none; } #plugin-information-tabs a.current { margin: 0 -1px -1px; background: #fff; border: 1px solid #dcdcde; border-bottom-color: #fff; padding-top: 8px; color: #2c3338; } #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-top: 10px; margin-right: 250px; /* FYI box */ padding: 10px 26px 99999px; /* equal height column trick */ margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ } #section-holder .notice { margin: 5px 0 15px; } #section-holder .updated { margin: 16px 0; } #plugin-information .fyi { float: right; position: relative; top: 0; right: 0; padding: 16px 16px 99999px; /* equal height column trick */ margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ width: 217px; border-left: 1px solid #dcdcde; background: #f6f7f7; color: #646970; } #plugin-information .fyi strong { color: #3c434a; } #plugin-information .fyi h3 { font-weight: 600; text-transform: uppercase; font-size: 12px; color: #646970; 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: #dcdcde; float: left; } #plugin-information .counter-bar { height: 17px; background-color: #f0c33c; /* 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: 40px; /* actual height: 40+13+13+1=67 */ border-top: 1px solid #dcdcde; background: #f6f7f7; } /* 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 #c3c4c7; } #plugin-information blockquote { border-left: 2px solid #dcdcde; color: #646970; 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 #dcdcde; } #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: 2; 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 #dcdcde; 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 the Plugin details modal. */ #TB_window.plugin-details-modal { background: #fff; } #TB_window.plugin-details-modal.thickbox-loading:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; z-index: -1; margin: -10px 0 0 -10px; background: #fff url(../images/spinner.gif) no-repeat center; background-size: 20px 20px; transform: translateZ(0); } @media print, (min-resolution: 120dpi) { #TB_window.plugin-details-modal.thickbox-loading:before { background-image: url(../images/spinner-2x.gif); } } .plugin-details-modal #TB_title { float: left; height: 1px; } .plugin-details-modal #TB_ajaxWindowTitle { display: none; } .plugin-details-modal #TB_closeWindowButton { left: auto; right: -30px; color: #f0f0f1; } .plugin-details-modal #TB_closeWindowButton:hover, .plugin-details-modal #TB_closeWindowButton:focus { outline: none; box-shadow: none; } .plugin-details-modal #TB_closeWindowButton:hover::after, .plugin-details-modal #TB_closeWindowButton:focus::after { outline: 2px solid; outline-offset: -4px; border-radius: 4px; } .plugin-details-modal .tb-close-icon { display: none; } .plugin-details-modal #TB_closeWindowButton:after { content: "\f335"; font: normal 32px/29px 'dashicons'; speak: never; -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) { .plugin-details-modal #TB_closeWindowButton { right: 0; top: -30px; } } /* @todo: move this. */ img { border: none; } /* Metabox collapse arrow indicators */ .sidebar-name .toggle-indicator::before, .meta-box-sortables .postbox .toggle-indicator::before, .meta-box-sortables .postbox .order-higher-indicator::before, .meta-box-sortables .postbox .order-lower-indicator::before, .bulk-action-notice .toggle-indicator::before, .privacy-text-box .toggle-indicator::before { content: "\f142"; display: inline-block; font: normal 20px/1 dashicons; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; } .js .widgets-holder-wrap.closed .toggle-indicator::before, .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before, .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before, .privacy-text-box.closed .toggle-indicator::before { content: "\f140"; } .postbox .handle-order-higher .order-higher-indicator::before { content: "\f343"; color: inherit; } .postbox .handle-order-lower .order-lower-indicator::before { content: "\f347"; color: inherit; } .postbox .handle-order-higher .order-higher-indicator::before, .postbox .handle-order-lower .order-lower-indicator::before { position: relative; top: 0.11rem; width: 20px; height: 20px; } .postbox .handlediv .toggle-indicator::before { width: 20px; border-radius: 50%; } .postbox .handlediv .toggle-indicator::before { position: relative; top: 0.05rem; text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */ } .rtl .postbox .handlediv .toggle-indicator::before { text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */ } .bulk-action-notice .toggle-indicator::before { line-height: 16px; vertical-align: top; color: #787c82; } .postbox .handle-order-higher:focus, .postbox .handle-order-lower:focus, .postbox .handlediv:focus { box-shadow: inset 0 0 0 2px #2271b1; border-radius: 50%; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .postbox .handle-order-higher:focus .order-higher-indicator::before, .postbox .handle-order-lower:focus .order-lower-indicator::before, .postbox .handlediv:focus .toggle-indicator::before { box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } /* @todo: appears to be Press This only and overridden */ #photo-add-url-div input[type="text"] { width: 300px; } /* Theme/Plugin file editor */ .alignleft h2 { margin: 0; } #template textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; background: #f6f7f7; tab-size: 4; } #template textarea, #template .CodeMirror { width: 100%; min-height: 60vh; height: calc( 100vh - 295px ); border: 1px solid #dcdcde; box-sizing: border-box; } #templateside > h2 { padding-top: 6px; padding-bottom: 7px; margin: 0; } #templateside ol, #templateside ul { margin: 0; padding: 0; } #templateside > ul { box-sizing: border-box; margin-top: 0; overflow: auto; padding: 0; min-height: 60vh; height: calc(100vh - 295px); background-color: #f6f7f7; border: 1px solid #dcdcde; border-left: none; } #templateside ul ul { padding-left: 12px; } #templateside > ul > li > ul[role=group] { padding-left: 0; } /* * Styles for Theme and Plugin file editors. */ /* Hide collapsed items. */ [role="treeitem"][aria-expanded="false"] > ul { display: none; } /* Use arrow dashicons for folder states, but hide from screen readers. */ [role="treeitem"] span[aria-hidden] { display: inline; font-family: dashicons; font-size: 20px; position: absolute; pointer-events: none; } [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after { content: "\f139"; } [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after { content: "\f140"; } [role="treeitem"] .folder-label { display: block; padding: 3px 3px 3px 12px; cursor: pointer; } /* Remove outline, and create our own focus and hover styles */ [role="treeitem"] { outline: 0; } [role="treeitem"] a:focus, [role="treeitem"] .folder-label.focus { color: #043959; /* Reset default focus style. */ box-shadow: none; /* Use an inset outline instead, so it's visible also over the current file item. */ outline: 2px solid #2271b1; outline-offset: -2px; } [role="treeitem"].hover, [role="treeitem"] .folder-label.hover { background-color: #f0f0f1; } .tree-folder { margin: 0; position: relative; } [role="treeitem"] li { position: relative; } /* Styles for folder indicators/depth */ .tree-folder .tree-folder::after { content: ""; display: block; position: absolute; left: 2px; border-left: 1px solid #c3c4c7; top: -13px; bottom: 10px; } .tree-folder > li::before { content: ""; position: absolute; display: block; border-left: 1px solid #c3c4c7; left: 2px; top: -5px; height: 18px; width: 7px; border-bottom: 1px solid #c3c4c7; } .tree-folder > li::after { content: ""; position: absolute; display: block; border-left: 1px solid #c3c4c7; left: 2px; bottom: -7px; top: 0; } /* current-file needs to adjustment for .notice styles */ #templateside .current-file { margin: -4px 0 -2px; } .tree-folder > .current-file::before { left: 4px; height: 15px; width: 0; border-left: none; top: 3px; } .tree-folder > .current-file::after { bottom: -4px; height: 7px; left: 2px; top: auto; } /* Lines shouldn't continue on last item */ .tree-folder > li:last-child::after, .tree-folder li:last-child > .tree-folder::after { display: none; } #theme-plugin-editor-selector, #theme-plugin-editor-label, #documentation label { font-weight: 600; } #theme-plugin-editor-label { display: inline-block; margin-bottom: 1em; } /* rtl:ignore */ #template textarea, #docs-list { direction: ltr; } .fileedit-sub #theme, .fileedit-sub #plugin { max-width: 40%; } .fileedit-sub .alignright { text-align: right; } #template p { width: 97%; } #file-editor-linting-error { margin-top: 1em; margin-bottom: 1em; } #file-editor-linting-error > .notice { margin: 0; display: inline-block; } #file-editor-linting-error > .notice > p { width: auto; } #template .submit { margin-top: 1em; padding: 0; } #template .submit input[type=submit][disabled] { cursor: not-allowed; } #templateside { float: right; width: 16em; word-wrap: break-word; } #postcustomstuff p.submit { margin: 0; } #templateside h4 { margin: 1em 0 0; } #templateside li { margin: 4px 0; } #templateside li:not(.howto) a, .theme-editor-php .highlight { display: block; padding: 3px 0 3px 12px; text-decoration: none; } #templateside li.current-file > a { padding-bottom: 0; } #templateside li:not(.howto) > a:first-of-type { padding-top: 0; } #templateside li.howto { padding: 6px 12px 12px; } .theme-editor-php .highlight { margin: -3px 3px -3px -12px; } #templateside .highlight { border: none; font-weight: 600; } .nonessential { color: #646970; font-size: 11px; font-style: italic; padding-left: 12px; } #documentation { margin-top: 10px; } #documentation label { line-height: 1.8; vertical-align: baseline; } .fileedit-sub { padding: 10px 0 8px; line-height: 180%; } #file-editor-warning .file-editor-warning-content { margin: 25px; } /* @todo: can we use a common class for these? */ .nav-menus-php .item-edit:before, .wp-customizer .control-section .accordion-section-title:after, .wp-customizer .accordion-section-title:after, .widget-top .widget-action .toggle-indicator:before { content: "\f140"; font: normal 20px/1 dashicons; speak: never; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; } .widget-top .widget-action .toggle-indicator:before { padding: 1px 2px 1px 0; border-radius: 50%; } .handlediv, .postbox .handlediv.button-link, .item-edit, .toggle-indicator { color: #787c82; } .widget-action { color: #50575e; /* #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 .toggle-indicator { color: #1d2327; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .widget-top .widget-action:focus .toggle-indicator:before { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } #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, .widget.widget-in-question .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 #dcdcde; margin: 0; } .accordion-section.open .accordion-section-content, .no-js .accordion-section .accordion-section-content { display: block; } .accordion-section.open:hover { border-bottom-color: #dcdcde; } .accordion-section-content { display: none; padding: 10px 20px 15px; overflow: hidden; background: #fff; } .accordion-section-title { margin: 0; position: relative; border-left: 1px solid #dcdcde; border-right: 1px solid #dcdcde; -webkit-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 { /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } .accordion-section-title:hover:after, .accordion-section-title:focus:after { border-color: #a7aaad transparent; /* Only visible in Windows High Contrast mode */ outline: 1px solid 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: 1.55; background: #fff; } .control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after { top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */ } .js .control-section:hover .accordion-section-title, .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { color: #1d2327; background: #f6f7f7; } .control-section.open .accordion-section-title { /* When expanded */ border-bottom: 1px solid #dcdcde; } /* 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: #c3c4c7; } } @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: #f6f7f7; } } @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: #f6f7f7; } } @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: #f6f7f7; } } @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: #f6f7f7; } } @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: #f6f7f7; } } .my-sites li a { text-decoration: none; } /* =Media Queries -------------------------------------------------------------- */ /** * HiDPI Displays */ @media print, (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); } } @media screen and (max-width: 782px) { html.wp-toolbar { padding-top: var(--wp-admin--admin-bar--height); } .screen-reader-shortcut:focus { top: -39px; } .block-editor-page .screen-reader-shortcut:focus { top: 7px; } .screen-reader-shortcut[href="#wp-toolbar"] { display: none; } 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 { clear: both; 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 */ #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; } /* Feedback Messages */ .notice, .wrap div.updated, .wrap div.error, .media-upload-form div.error { margin: 20px 0 10px; 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: -16em; } code { word-wrap: break-word; word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */ word-break: break-word; /* Webkit: Treated similarly to 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; } .nav-menus-php .metabox-holder h3 { padding: 0; } .postbox .handlediv { margin-top: 3px; } /* Subsubsub Nav */ .subsubsub { font-size: 16px; text-align: center; margin-bottom: 15px; } /* Theme/Plugin File Editor */ #template textarea, #template .CodeMirror { box-sizing: border-box; } #templateside { float: none; width: auto; } #templateside > ul { border-left: 1px solid #dcdcde; } #templateside li { margin: 0; } #templateside li:not(.howto) a { display: block; padding: 5px; } #templateside li.howto { padding: 12px; } #templateside .highlight { padding: 5px; margin-left: -5px; margin-top: -5px; } #template > div, #template .notice { float: none; margin: 1em 0; width: auto; } #template .CodeMirror, #template textarea { width: 100%; } #templateside ul ul { padding-left: 1.5em; } [role="treeitem"] .folder-label { display: block; padding: 5px; } .tree-folder > li::before, .tree-folder > li::after, .tree-folder .tree-folder::after { left: -8px; } .tree-folder > li::before { top: 0; height: 13px; } .tree-folder > .current-file::before { left: -5px; top: 7px; width: 4px; } .tree-folder > .current-file::after { height: 9px; left: -8px; } .wrap #templateside span.notice { margin-left: -5px; width: 100%; } .fileedit-sub .alignright { float: left; margin-top: 15px; width: 100%; text-align: left; } .fileedit-sub .alignright label { display: block; } .fileedit-sub #theme, .fileedit-sub #plugin { margin-left: 0; max-width: 70%; } .fileedit-sub input[type="submit"] { margin-bottom: 0; } #documentation label[for="docs-list"] { display: block; } #documentation select[name="docs-list"] { margin-left: 0; max-width: 60%; } #documentation input[type="button"] { margin-bottom: 0; } #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: 2.1; } .filter-drawer .filter-group-feature label { margin-left: 32px; } .wp-filter .button.drawer-toggle { font-size: 13px; line-height: 2; height: 28px; } /* Fix help tab columns for smaller screens */ #screen-meta #contextual-help-wrap { overflow: visible; } #screen-meta #contextual-help-back, #screen-meta .contextual-help-sidebar { display: none; } #screen-meta .contextual-help-tabs { clear: both; width: 100%; float: none; } #screen-meta .contextual-help-tabs ul { margin: 0 0 1em; padding: 1em 0 0; } #screen-meta .contextual-help-tabs .active { margin: 0; } #screen-meta .contextual-help-tabs-wrap { clear: both; max-width: 100%; float: none; } #screen-meta, #screen-meta-links { margin-right: 10px; } #screen-meta-links { margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */ } .wp-filter .search-form input[type="search"] { font-size: 1rem; } .wp-filter .search-form.search-plugins { /* This element is a flex item. */ min-width: 100%; } } /* 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; } .screen-reader-shortcut:focus { top: 7px; } #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, nav .nav-tab { margin: 10px 10px 0 0; border-bottom: 1px solid #c3c4c7; } .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { border-bottom: 1px solid #c3c4c7; } .wp-filter .search-form.search-plugins label { width: 100%; } } @media screen and (max-width: 480px) { .metabox-prefs-container { display: grid; } .metabox-prefs-container > * { display: inline-block; padding: 2px; } } @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; } } /* @import buttons.css */ /* * WordPress admin buttons. * * In WP core these live in wp-includes/css/buttons.css and are scoped under * .wp-core-ui. We unscope them so .button / .button-primary work standalone * in any plugin admin page — and we route colors through our tokens so they * inherit the active WP color scheme. */ .button, .button-primary, .button-secondary, .button-link, button.button, input[type="submit"].button, input[type="reset"].button, input[type="button"].button, a.button { display: inline-block; text-decoration: none; font-size: 13px; line-height: 2.15384615; /* 28px */ min-height: 30px; margin: 0; padding: 0 10px; cursor: pointer; border-width: 1px; border-style: solid; -webkit-appearance: none; appearance: none; border-radius: 3px; white-space: nowrap; box-sizing: border-box; font-family: inherit; } /* Secondary / default (outline) — uses theme primary as accent */ .button, .button-secondary { color: var(--wpadmin-primary); border-color: var(--wpadmin-primary); background: #f6f7f7; vertical-align: top; } .button:hover, .button-secondary:hover, .button:focus, .button-secondary:focus { background: #f0f0f1; border-color: var(--wpadmin-primary-dark); color: var(--wpadmin-primary-dark); } .button:focus, .button-secondary:focus { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wpadmin-focus-ring); outline: 2px solid transparent; outline-offset: 0; } .button:active, .button-secondary:active { background: #f6f7f7; border-color: #8c8f94; box-shadow: none; } .button[disabled], .button:disabled, .button-disabled, .button.disabled { color: #a7aaad !important; border-color: #dcdcde !important; background: #f6f7f7 !important; box-shadow: none !important; text-shadow: 0 1px 0 #fff !important; cursor: default; transform: none !important; } /* Primary (filled) */ .button-primary { background: var(--wpadmin-primary); border-color: var(--wpadmin-primary); color: #fff; text-decoration: none; text-shadow: none; } .button-primary:hover, .button-primary:focus { background: var(--wpadmin-primary-dark); border-color: var(--wpadmin-primary-dark); color: #fff; } .button-primary:focus { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wpadmin-focus-ring); outline: 2px solid transparent; } .button-primary:active { background: var(--wpadmin-primary-darker); border-color: var(--wpadmin-primary-darker); color: #fff; } .button-primary[disabled], .button-primary:disabled, .button-primary-disabled, .button-primary.disabled { color: #a0c8e7 !important; background: #4f94d4 !important; border-color: #4f94d4 !important; text-shadow: none !important; opacity: .7; } /* Sizes */ .button.button-small { min-height: 26px; line-height: 2.18181818; padding: 0 8px; font-size: 11px; } .button.button-large { min-height: 32px; line-height: 2.30769231; padding: 0 12px; } .button.button-hero { font-size: 14px; line-height: 3.14285714; min-height: 46px; padding: 0 36px; } /* Link-style button */ .button-link { margin: 0; padding: 0; box-shadow: none; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left; color: var(--wpadmin-primary); text-decoration: underline; transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; height: auto; min-height: 0; line-height: inherit; white-space: normal; } .button-link:hover, .button-link:active { color: var(--wpadmin-primary-dark); } .button-link:focus { color: var(--wpadmin-primary-dark); outline: 2px solid var(--wpadmin-focus-ring); outline-offset: 1px; box-shadow: none; } .button-link.button-link-delete { color: var(--wpadmin-error); } .button-link.button-link-delete:hover, .button-link.button-link-delete:focus { color: var(--wpadmin-error); background: transparent; border-color: transparent; } /* Spinner icon inside loading buttons */ .button .dashicons, .button .icon { vertical-align: middle; } /* @import forms.css */ /* Include margin and padding in the width calculation of input and textarea. */ input, select, textarea, button { box-sizing: border-box; font-family: inherit; font-size: inherit; font-weight: inherit; } textarea, input { font-size: 14px; } textarea { overflow: auto; padding: 2px 6px; /* inherits font size 14px */ line-height: 1.42857143; /* 20px */ resize: vertical; } input, select { margin: 0 1px; } textarea.code { padding: 4px 6px 1px; } input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], select, textarea { box-shadow: 0 0 0 transparent; border-radius: 4px; border: 1px solid #8c8f94; background-color: #fff; color: #2c3338; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] { padding: 0 8px; /* inherits font size 14px */ line-height: 2; /* 28px */ /* Only necessary for IE11 */ min-height: 30px; } ::-webkit-datetime-edit { /* inherits font size 14px */ line-height: 1.85714286; /* 26px */ } input[type="text"]:focus, input[type="password"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, select:focus, textarea:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } /* rtl:ignore */ input[type="email"], input[type="url"] { direction: ltr; } input[type="checkbox"], input[type="radio"] { border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: #50575e; clear: none; cursor: pointer; display: inline-block; line-height: 0; height: 1rem; margin: -0.25rem 0.25rem 0 0; outline: 0; padding: 0 !important; text-align: center; vertical-align: middle; width: 1rem; min-width: 1rem; -webkit-appearance: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); transition: .05s border-color ease-in-out; } input[type="radio"]:checked + label:before { color: #8c8f94; } .wp-core-ui input[type="reset"]:hover, .wp-core-ui input[type="reset"]:active { color: #135e96; } td > input[type="checkbox"], .wp-admin p input[type="checkbox"], .wp-admin p input[type="radio"] { margin-top: 0; } .wp-admin p label input[type="checkbox"] { margin-top: -4px; } .wp-admin p label input[type="radio"] { margin-top: -2px; } input[type="radio"] { border-radius: 50%; margin-right: 0.25rem; /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */ line-height: 0.71428571; } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { float: left; display: inline-block; vertical-align: middle; width: 1rem; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input[type="checkbox"]:checked::before { /* Use the "Yes" SVG Dashicon */ content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E"); margin: -0.1875rem 0 0 -0.25rem; height: 1.3125rem; width: 1.3125rem; } input[type="radio"]:checked::before { content: ""; border-radius: 50%; width: 0.5rem; /* 8px */ height: 0.5rem; /* 8px */ margin: 0.1875rem; /* 3px */ background-color: #3582c4; /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ line-height: 1.14285714; } @-moz-document url-prefix() { input[type="checkbox"], input[type="radio"], .form-table input.tog { margin-bottom: -1px; } } /* Search */ input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration { display: none; } .wp-admin input[type="file"] { padding: 3px 0; cursor: pointer; } input.readonly, input[readonly], textarea.readonly, textarea[readonly] { background-color: #f0f0f1; } ::-webkit-input-placeholder { color: #646970; } ::-moz-placeholder { color: #646970; opacity: 1; } :-ms-input-placeholder { color: #646970; } .form-invalid .form-required, .form-invalid .form-required:focus, .form-invalid.form-required input, .form-invalid.form-required input:focus, .form-invalid.form-required select, .form-invalid.form-required select:focus { border-color: #d63638 !important; box-shadow: 0 0 2px rgba(214, 54, 56, 0.8); } .form-table .form-required.form-invalid td:after { content: "\f534"; font: normal 20px/1 dashicons; color: #d63638; margin-left: -25px; vertical-align: middle; } /* Adjust error indicator for password layout */ .form-table .form-required.user-pass1-wrap.form-invalid td:after { content: ""; } .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after { content: "\f534"; font: normal 20px/1 dashicons; color: #d63638; margin: 0 6px 0 -29px; vertical-align: middle; } .form-input-tip { color: #646970; } input:disabled, input.disabled, select:disabled, select.disabled, textarea:disabled, textarea.disabled { background: rgba(255, 255, 255, 0.5); border-color: rgba(220, 220, 222, 0.75); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); color: rgba(44, 51, 56, 0.5); } input[type="file"]:disabled, input[type="file"].disabled, input[type="file"][aria-disabled="true"], input[type="range"]:disabled, input[type="range"].disabled, input[type="range"][aria-disabled="true"] { background: none; box-shadow: none; cursor: default; } input[type="checkbox"]:disabled, input[type="checkbox"].disabled, input[type="checkbox"][aria-disabled="true"], input[type="radio"]:disabled, input[type="radio"].disabled, input[type="radio"][aria-disabled="true"], input[type="checkbox"]:disabled:checked:before, input[type="checkbox"].disabled:checked:before, input[type="radio"]:disabled:checked:before, input[type="radio"].disabled:checked:before { opacity: 0.7; cursor: default; } /*------------------------------------------------------------------------------ 2.0 - Forms ------------------------------------------------------------------------------*/ /* Select styles are based on the default button in buttons.css */ .wp-core-ui select { font-size: 14px; line-height: 2; /* 28px */ color: #2c3338; border-color: #8c8f94; box-shadow: none; border-radius: 3px; padding: 0 24px 0 8px; min-height: 30px; max-width: 25rem; -webkit-appearance: none; /* The SVG is arrow-down-alt2 from Dashicons. */ background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%; background-size: 16px 16px; cursor: pointer; vertical-align: middle; } .wp-core-ui select:hover { color: #2271b1; } .wp-core-ui select:focus { border-color: #2271b1; color: #0a4b78; box-shadow: 0 0 0 1px #2271b1; } .wp-core-ui select:active { border-color: #8c8f94; box-shadow: none; } .wp-core-ui select.disabled, .wp-core-ui select:disabled { color: #a7aaad; border-color: #dcdcde; background-color: #f6f7f7; /* The SVG is arrow-down-alt2 from Dashicons. */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E'); box-shadow: none; text-shadow: 0 1px 0 #fff; cursor: default; transform: none; } .wp-core-ui select[aria-disabled="true"] { cursor: default; } /* Reset Firefox inner outline that appears on :focus. */ /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */ .wp-core-ui select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #0a4b78; } /* Remove background focus style from IE11 while keeping focus style available on option elements. */ .wp-core-ui select::-ms-value { background: transparent; color: #50575e; } .wp-core-ui select:hover::-ms-value { color: #2271b1; } .wp-core-ui select:focus::-ms-value { color: #0a4b78; } .wp-core-ui select.disabled::-ms-value, .wp-core-ui select:disabled::-ms-value { color: #a7aaad; } /* Hide the native down arrow for select element on IE. */ .wp-core-ui select::-ms-expand { display: none; } .wp-admin .button-cancel { display: inline-block; min-height: 28px; padding: 0 5px; line-height: 2; } .meta-box-sortables select { max-width: 100%; } .meta-box-sortables input { vertical-align: middle; } .misc-pub-post-status select { margin-top: 0; } .wp-core-ui select[multiple] { height: auto; padding-right: 8px; background: #fff; } .submit { padding: 1.5em 0; margin: 5px 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: none; } form p.submit a.cancel:hover { text-decoration: none; } p.submit { text-align: left; max-width: 100%; margin-top: 20px; padding-top: 10px; } .textright p.submit { border: none; text-align: right; } table.form-table + p.submit, table.form-table + input + p.submit, table.form-table + input + input + p.submit { border-top: none; padding-top: 0; } #minor-publishing-actions input, #major-publishing-actions input, #minor-publishing-actions .preview { text-align: center; } textarea.all-options, input.all-options { width: 250px; } input.large-text, textarea.large-text { width: 99%; } .regular-text { width: 25em; } input.small-text { width: 50px; padding: 0 6px; } label input.small-text { margin-top: -4px; } input[type="number"].small-text { width: 65px; padding-right: 0; } input.tiny-text { width: 35px; } input[type="number"].tiny-text { width: 45px; padding-right: 0; } #doaction, #doaction2, #post-query-submit { margin: 0 8px 0 0; } /* @since 5.7.0 secondary bulk action controls require JS. */ .no-js label[for="bulk-action-selector-bottom"], .no-js select#bulk-action-selector-bottom, .no-js input#doaction2, .no-js label[for="new_role2"], .no-js select#new_role2, .no-js input#changeit2 { display: none; } .tablenav .actions select { float: left; margin-right: 6px; max-width: 12.5rem; } #timezone_string option { margin-left: 1em; } .wp-hide-pw > .dashicons, .wp-cancel-pw > .dashicons { position: relative; top: 3px; width: 1.25rem; height: 1.25rem; top: 0.25rem; font-size: 20px; } .wp-cancel-pw .dashicons-no { display: none; } label, #your-profile label + a { vertical-align: middle; } fieldset label, #your-profile label + a { vertical-align: middle; } .options-media-php [for*="_size_"] { min-width: 10em; vertical-align: baseline; } .options-media-php .small-text[name*="_size_"] { margin: 0 0 1em; } .wp-generate-pw { margin-top: 1em; position: relative; } .wp-pwd button { height: min-content; } .wp-pwd button.pwd-toggle .dashicons { position: relative; top: 0.25rem; } .wp-pwd { margin-top: 1em; position: relative; } .mailserver-pass-wrap .wp-pwd { display: inline-block; margin-top: 0; } /* rtl:ignore */ #mailserver_pass { padding-right: 2.5rem; } /* rtl:ignore */ .mailserver-pass-wrap .button.wp-hide-pw { background: transparent; border: 1px solid transparent; box-shadow: none; font-size: 14px; line-height: 2; width: 2.5rem; min-width: 40px; margin: 0; padding: 0 9px; position: absolute; right: 0; top: 0; } .mailserver-pass-wrap .button.wp-hide-pw:hover { background: transparent; border-color: transparent; } .mailserver-pass-wrap .button.wp-hide-pw:focus { background: transparent; border-color: #3582c4; border-radius: 4px; box-shadow: 0 0 0 1px #3582c4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .mailserver-pass-wrap .button.wp-hide-pw:active { background: transparent; box-shadow: none; transform: none; } #misc-publishing-actions label { vertical-align: baseline; } #pass-strength-result { background-color: #f0f0f1; border: 1px solid #dcdcde; color: #1d2327; margin: -1px 1px 5px; padding: 3px 5px; text-align: center; width: 25em; box-sizing: border-box; opacity: 0; } #pass-strength-result.short { background-color: #ffabaf; border-color: #e65054; opacity: 1; } #pass-strength-result.bad { background-color: #facfd2; border-color: #f86368; opacity: 1; } #pass-strength-result.good { background-color: #f5e6ab; border-color: #f0c33c; opacity: 1; } #pass-strength-result.strong { background-color: #b8e6bf; border-color: #68de7c; opacity: 1; } .password-input-wrapper { display: inline-block; } .password-input-wrapper input { font-family: Consolas, Monaco, monospace; } #pass1.short, #pass1-text.short { border-color: #e65054; } #pass1.bad, #pass1-text.bad { border-color: #f86368; } #pass1.good, #pass1-text.good { border-color: #f0c33c; } #pass1.strong, #pass1-text.strong { border-color: #68de7c; } #pass1:focus, #pass1-text:focus { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .pw-weak { display: none; } .indicator-hint { padding-top: 8px; } .wp-pwd [type="text"], .wp-pwd [type="password"] { margin-bottom: 0; /* Same height as the buttons */ min-height: 30px; } /* Hide the Edge "reveal password" native button */ .wp-pwd input::-ms-reveal { display: none; } #pass1-text, .show-password #pass1 { display: none; } #pass1-text::-ms-clear { display: none; } .show-password #pass1-text { display: inline-block; } p.search-box { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; position: relative; float: right; margin: 11px 0; } .network-admin.themes-php p.search-box { clear: left; } .search-box input[name="s"], .tablenav .search-plugins input[name="s"], .tagsdiv .newtag { float: left; margin: 0 4px 0 0; } .js.plugins-php .search-box .wp-filter-search { margin: 0; width: 280px; } input[type="text"].ui-autocomplete-loading, input[type="email"].ui-autocomplete-loading { background-image: url(../images/loading.gif); background-repeat: no-repeat; background-position: right 5px center; visibility: visible; } input.ui-autocomplete-input.open { border-bottom-color: transparent; } ul#add-to-blog-users { margin: 0 0 0 14px; } .ui-autocomplete { padding: 0; margin: 0; list-style: none; position: absolute; z-index: 10000; border: 1px solid #4f94d4; box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8); background-color: #fff; } .ui-autocomplete li { margin-bottom: 0; padding: 4px 10px; white-space: nowrap; text-align: left; cursor: pointer; } /* Colors for the wplink toolbar autocomplete. */ .ui-autocomplete .ui-state-focus { background-color: #dcdcde; } /* Colors for the tags autocomplete. */ .wp-tags-autocomplete .ui-state-focus, .wp-tags-autocomplete [aria-selected="true"] { background-color: #2271b1; color: #fff; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .button-add-site-icon { width: 100%; cursor: pointer; text-align: center; border: 1px dashed #c3c4c7; box-sizing: border-box; padding: 9px 0; line-height: 1.6; max-width: 270px; border-radius: 4px; background: #f0f0f1; } .button-add-site-icon:focus, .button-add-site-icon:hover { background: #fff; } .button-add-site-icon:focus { background-color: #fff; border-color: #3582c4; border-style: solid; box-shadow: 0 0 0 1px #3582c4; outline: 2px solid transparent; } /*------------------------------------------------------------------------------ 15.0 - Comments Screen ------------------------------------------------------------------------------*/ .form-table { border-collapse: collapse; margin-top: 0.5em; width: 100%; clear: both; } .form-table, .form-table td, .form-table th, .form-table td p { font-size: 14px; } .form-table td { margin-bottom: 9px; padding: 15px 10px; line-height: 1.3; vertical-align: middle; } .form-table th, .form-wrap label { color: #1d2327; font-weight: 400; text-shadow: none; vertical-align: baseline; } .form-table th { vertical-align: top; text-align: left; padding: 20px 10px 20px 0; width: 200px; line-height: 1.3; font-weight: 600; } .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */ .form-table .td-full { width: auto; padding: 20px 10px 20px 0; font-weight: 400; } .form-table td p { margin-top: 4px; margin-bottom: 0; } .form-table .date-time-doc { margin-top: 1em; } .form-table p.timezone-info { margin: 1em 0; display: flex; flex-direction: column; } #local-time { margin-top: 0.5em; } .form-table td fieldset label { margin: 0.35em 0 0.5em !important; display: inline-block; } .form-table td fieldset p label { margin-top: 0 !important; } .form-table td fieldset label, .form-table td fieldset p, .form-table td fieldset li { line-height: 1.4; } .form-table input.tog, .form-table input[type="radio"] { margin-top: -4px; margin-right: 4px; float: none; } .form-table .pre { padding: 8px; margin: 0; } table.form-table td .updated { font-size: 13px; } table.form-table td .updated p { font-size: 13px; margin: 0.3em 0; } /*------------------------------------------------------------------------------ 18.0 - Users ------------------------------------------------------------------------------*/ #profile-page .form-table textarea { width: 500px; margin-bottom: 6px; } #profile-page .form-table #rich_editing { margin-right: 5px } #your-profile legend { font-size: 22px; } #display_name { width: 15em; } #adduser .form-field input, #createuser .form-field input { width: 25em; } .color-option { display: inline-block; width: 24%; padding: 5px 15px 15px; box-sizing: border-box; margin-bottom: 3px; } .color-option:hover, .color-option.selected { background: #dcdcde; } .color-palette { display: table; width: 100%; border-spacing: 0; border-collapse: collapse; } .color-palette .color-palette-shade, .color-palette td { display: table-cell; height: 20px; padding: 0; border: none; } .color-option { cursor: pointer; } .create-application-password .form-field { max-width: 25em; } .create-application-password label { font-weight: 600; } .create-application-password p.submit { margin-bottom: 0; padding-bottom: 0; display: block; } #application-passwords-section .notice { margin-top: 20px; margin-bottom: 0; word-wrap: break-word; } .application-password-display input.code { margin-bottom: 6px; width: 19em; } .auth-app-card.card { max-width: 768px; } .authorize-application-php .form-wrap p { display: block; } /*------------------------------------------------------------------------------ 19.0 - Tools ------------------------------------------------------------------------------*/ .tool-box .title { margin: 8px 0; font-size: 18px; font-weight: 400; line-height: 24px; } .label-responsive { vertical-align: middle; } #export-filters p { margin: 0 0 1em; } #export-filters p.submit { margin: 7px 0 5px; } /* Card styles */ .card { position: relative; margin-top: 20px; padding: 0.7em 2em 1em; min-width: 255px; max-width: 520px; border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); background: #fff; box-sizing: border-box; } /* Press this styles */ .pressthis h4 { margin: 2em 0 1em; } .pressthis textarea { width: 100%; font-size: 1em; } #pressthis-code-wrap { overflow: auto; } .pressthis-bookmarklet-wrapper { margin: 20px 0 8px; vertical-align: top; position: relative; z-index: 1; } .pressthis-bookmarklet, .pressthis-bookmarklet:hover, .pressthis-bookmarklet:focus, .pressthis-bookmarklet:active { display: inline-block; position: relative; cursor: move; color: #2c3338; background: #dcdcde; border-radius: 5px; border: 1px solid #c3c4c7; font-style: normal; line-height: 16px; font-size: 14px; text-decoration: none; } .pressthis-bookmarklet:active { outline: none; } .pressthis-bookmarklet:after { content: ""; width: 70%; height: 55%; z-index: -1; position: absolute; right: 10px; bottom: 9px; background: transparent; transform: skew(20deg) rotate(6deg); box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); } .pressthis-bookmarklet:hover:after { transform: skew(20deg) rotate(9deg); box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); } .pressthis-bookmarklet span { display: inline-block; margin: 0; padding: 0 12px 8px 9px; } .pressthis-bookmarklet span:before { color: #787c82; font: normal 20px/1 dashicons; content: "\f157"; position: relative; display: inline-block; top: 4px; margin-right: 4px; } .pressthis-js-toggle { margin-left: 10px; padding: 0; height: auto; vertical-align: top; } /* to override the button class being applied */ .pressthis-js-toggle.button.button { margin-left: 10px; padding: 0; height: auto; vertical-align: top; } .pressthis-js-toggle .dashicons { margin: 5px 8px 6px 7px; color: #50575e; } /*------------------------------------------------------------------------------ 20.0 - Settings ------------------------------------------------------------------------------*/ .timezone-info code { white-space: nowrap; } .defaultavatarpicker .avatar { margin: 2px 0; vertical-align: middle; } .options-general-php .date-time-text { display: inline-block; min-width: 10em; } .options-general-php input.small-text { width: 56px; margin: -2px 0; } .options-general-php .spinner { float: none; margin: -3px 3px 0; } .settings-php .language-install-spinner, .options-general-php .language-install-spinner, .user-edit-php .language-install-spinner, .profile-php .language-install-spinner { display: inline-block; float: none; margin: -3px 5px 0; vertical-align: middle; } .form-table.permalink-structure .available-structure-tags { margin-top: 8px; } .form-table.permalink-structure .available-structure-tags ul { display: flex; flex-wrap: wrap; margin: 8px 0 0; } .form-table.permalink-structure .available-structure-tags li { margin: 6px 5px 0 0; } .form-table.permalink-structure .available-structure-tags li:last-child { margin-right: 0; } .form-table.permalink-structure .structure-selection .row { margin-bottom: 16px; } .form-table.permalink-structure .structure-selection .row > div { max-width: calc(100% - 24px); display: inline-flex; flex-direction: column; } .form-table.permalink-structure .structure-selection .row label { font-weight: 600; } .form-table.permalink-structure .structure-selection .row p { margin-top: 0; } /*------------------------------------------------------------------------------ 21.0 - Network Admin ------------------------------------------------------------------------------*/ .setup-php textarea { max-width: 100%; } .form-field #site-address { max-width: 25em; } .form-field #domain { max-width: 22em; } .form-field #site-title, .form-field #admin-email, .form-field #path, .form-field #blog_registered, .form-field #blog_last_updated { max-width: 25em; } .form-field #path { margin-bottom: 5px; } #search-users, #search-sites { max-width: 60%; } .configuration-rules-label { font-weight: 600; margin-bottom: 4px; } /*------------------------------------------------------------------------------ Credentials check dialog for Install and Updates ------------------------------------------------------------------------------*/ .request-filesystem-credentials-dialog { display: none; /* The customizer uses visibility: hidden on the body for full-overlays. */ visibility: visible; } .request-filesystem-credentials-dialog .notification-dialog { top: 10%; max-height: 85%; } .request-filesystem-credentials-dialog-content { margin: 25px; } #request-filesystem-credentials-title { font-size: 1.3em; margin: 1em 0; } .request-filesystem-credentials-form legend { font-size: 1em; padding: 1.33em 0; font-weight: 600; } .request-filesystem-credentials-form input[type="text"], .request-filesystem-credentials-form input[type="password"] { display: block; } .request-filesystem-credentials-dialog input[type="text"], .request-filesystem-credentials-dialog input[type="password"] { width: 100%; } .request-filesystem-credentials-form .field-title { font-weight: 600; } .request-filesystem-credentials-dialog label[for="hostname"], .request-filesystem-credentials-dialog label[for="public_key"], .request-filesystem-credentials-dialog label[for="private_key"] { display: block; margin-bottom: 1em; } .request-filesystem-credentials-dialog .ftp-username, .request-filesystem-credentials-dialog .ftp-password { float: left; width: 48%; } .request-filesystem-credentials-dialog .ftp-password { margin-left: 4%; } .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons { text-align: right; } .request-filesystem-credentials-dialog label[for="ftp"] { margin-right: 10px; } .request-filesystem-credentials-dialog #auth-keys-desc { margin-bottom: 0; } #request-filesystem-credentials-dialog .button:not(:last-child) { margin-right: 10px; } #request-filesystem-credentials-form .cancel-button { display: none; } #request-filesystem-credentials-dialog .cancel-button { display: inline; } .request-filesystem-credentials-dialog .ftp-username, .request-filesystem-credentials-dialog .ftp-password { float: none; width: auto; } .request-filesystem-credentials-dialog .ftp-username { margin-bottom: 1em; } .request-filesystem-credentials-dialog .ftp-password { margin: 0; } .request-filesystem-credentials-dialog .ftp-password em { color: #8c8f94; } .request-filesystem-credentials-dialog label { display: block; line-height: 1.5; margin-bottom: 1em; } .request-filesystem-credentials-form legend { padding-bottom: 0; } .request-filesystem-credentials-form #ssh-keys legend { font-size: 1.3em; } .request-filesystem-credentials-form .notice { margin: 0 0 20px; clear: both; } /*------------------------------------------------------------------------------ Privacy Policy settings screen ------------------------------------------------------------------------------*/ .tools-privacy-policy-page form { margin-bottom: 1.3em; } .tools-privacy-policy-page input.button { margin: 0 1px 0 6px; } .tools-privacy-policy-page select { margin: 0 1px 0.5em 6px; } .tools-privacy-edit { margin: 1.5em 0; } .tools-privacy-policy-page span { line-height: 2; } .privacy_requests .column-email { width: 40%; } .privacy_requests .column-type { text-align: center; } .privacy_requests thead td:first-child, .privacy_requests tfoot td:first-child { border-left: 4px solid #fff; } .privacy_requests tbody th { border-left: 4px solid #fff; background: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .privacy_requests .row-actions { color: #787c82; } .privacy_requests .row-actions.processing { position: static; } .privacy_requests tbody .has-request-results th { box-shadow: none; } .privacy_requests tbody .request-results th .notice { margin: 0 0 5px; } .privacy_requests tbody td { background: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .privacy_requests tbody .has-request-results td { box-shadow: none; } .privacy_requests .next_steps .button { word-wrap: break-word; white-space: normal; } .privacy_requests .status-request-confirmed th, .privacy_requests .status-request-confirmed td { background-color: #fff; border-left-color: #72aee6; } .privacy_requests .status-request-failed th, .privacy_requests .status-request-failed td { background-color: #f6f7f7; border-left-color: #d63638; } .privacy_requests .export_personal_data_failed a { vertical-align: baseline; } .status-label { font-weight: 600; } .status-label.status-request-pending { font-weight: 400; font-style: italic; color: #646970; } .status-label.status-request-failed { color: #d63638; font-weight: 600; } .wp-privacy-request-form { clear: both; } .wp-privacy-request-form-field { margin: 1.5em 0; } .wp-privacy-request-form input { margin: 0; } .email-personal-data::before { display: inline-block; font: normal 20px/1 dashicons; margin: 3px 5px 0 -2px; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; } .email-personal-data--sending::before { color: #d63638; content: "\f463"; animation: rotation 2s infinite linear; } .email-personal-data--sent::before { color: #68de7c; content: "\f147"; } /* =Media Queries -------------------------------------------------------------- */ @media screen and (max-width: 782px) { /* Input Elements */ textarea { -webkit-appearance: none; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] { -webkit-appearance: none; padding: 3px 10px; /* Only necessary for IE11 */ min-height: 40px; } ::-webkit-datetime-edit { line-height: 1.875; /* 30px */ } input[type="checkbox"], .widefat th input[type="checkbox"], .widefat thead td input[type="checkbox"], .widefat tfoot td input[type="checkbox"] { -webkit-appearance: none; } .widefat th input[type="checkbox"], .widefat thead td input[type="checkbox"], .widefat tfoot td input[type="checkbox"] { margin-bottom: 8px; } input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before, .widefat thead td input[type="checkbox"]:before, .widefat tfoot td input[type="checkbox"]:before { width: 1.875rem; height: 1.875rem; margin: -0.1875rem -0.3125rem; } input[type="radio"], input[type="checkbox"] { height: 1.5625rem; width: 1.5625rem; } .wp-admin p input[type="checkbox"], .wp-admin p input[type="radio"] { margin-top: -0.1875rem; } input[type="radio"]:checked:before { vertical-align: middle; width: 0.5625rem; height: 0.5625rem; margin: 0.4375rem; line-height: 0.76190476; } .wp-core-ui select, .wp-admin .form-table select { min-height: 40px; font-size: 16px; line-height: 1.625; /* 26px */ padding: 5px 24px 5px 8px; } .wp-admin .button-cancel { margin-bottom: 0; padding: 2px 0; font-size: 14px; vertical-align: middle; } #adduser .form-field input, #createuser .form-field input { width: 100%; } .form-table { box-sizing: border-box; } .form-table th, .form-table td, .label-responsive { display: block; width: auto; vertical-align: middle; } .label-responsive { margin: 0.5em 0; } .export-filters li { margin-bottom: 0; } .form-table .color-palette .color-palette-shade, .form-table .color-palette td { display: table-cell; width: 15px; height: 30px; padding: 0; } .form-table .color-palette { margin-right: 10px; } textarea, input { font-size: 16px; } .form-table td input[type="text"], .form-table td input[type="email"], .form-table td input[type="password"], .form-table td select, .form-table td textarea, .form-table span.description, #profile-page .form-table textarea { width: 100%; display: block; max-width: none; box-sizing: border-box; } .form-table .form-required.form-invalid td:after { float: right; margin: -30px 3px 0 0; } input[type="text"].small-text, input[type="search"].small-text, input[type="password"].small-text, input[type="number"].small-text, input[type="number"].small-text, .form-table input[type="text"].small-text { width: auto; max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */ display: inline; padding: 3px 6px; margin: 0 3px; } .form-table .regular-text ~ input[type="text"].small-text { margin-top: 5px; } #pass-strength-result { width: 100%; box-sizing: border-box; padding: 8px; } .password-input-wrapper { display: block; } p.search-box { float: none; width: 100%; margin-bottom: 20px; display: flex; } p.search-box input[name="s"] { float: none; width: 100%; margin-bottom: 10px; vertical-align: middle; } p.search-box input[type="submit"] { margin-bottom: 10px; } .form-table span.description { display: inline; padding: 4px 0 0; line-height: 1.4; font-size: 14px; } .form-table th { padding: 10px 0 0; border-bottom: 0; } .form-table td { margin-bottom: 0; padding: 4px 0 6px; } .form-table.permalink-structure td code { display: inline-block; } .form-table.permalink-structure .structure-selection { margin-top: 8px; } .form-table.permalink-structure .structure-selection .row > div { max-width: calc(100% - 36px); width: 100%; } .form-table.permalink-structure td input[type="text"] { margin-top: 4px; } .form-table input.regular-text { width: 100%; } .form-table label { font-size: 14px; } .form-table td > label:first-child { display: inline-block; margin-top: 0.35em; } .background-position-control .button-group > label { font-size: 0; } .form-table fieldset label { display: block; } .form-field #domain { max-width: none; } /* New Password */ .wp-pwd { position: relative; } /* Needs higher specificity than normal input type text and password. */ #profile-page .form-table #pass1 { padding-right: 90px; } .wp-pwd button.button { background: transparent; border: 1px solid transparent; box-shadow: none; line-height: 2; margin: 0; padding: 5px 9px; position: absolute; right: 0; top: 0; width: 2.375rem; height: 2.375rem; min-width: 40px; min-height: 40px; } .wp-pwd button.wp-hide-pw { right: 2.5rem; } body.user-new-php .wp-pwd button.wp-hide-pw { right: 0; } .wp-pwd button.button:hover, .wp-pwd button.button:focus { background: transparent; } .wp-pwd button.button:active { background: transparent; box-shadow: none; transform: none; } .wp-pwd .button .text { display: none; } .wp-pwd [type="text"], .wp-pwd [type="password"] { line-height: 2; padding-right: 5rem; } body.user-new-php .wp-pwd [type="text"], body.user-new-php .wp-pwd [type="password"] { padding-right: 2.5rem; } .wp-cancel-pw .dashicons-no { display: inline-block; } .mailserver-pass-wrap .wp-pwd { display: block; } /* rtl:ignore */ #mailserver_pass { padding-left: 10px; } .options-general-php input[type="text"].small-text { max-width: 6.25em; margin: 0; } /* Privacy Policy settings screen */ .tools-privacy-policy-page form.wp-create-privacy-page { margin-bottom: 1em; } .tools-privacy-policy-page input#set-page, .tools-privacy-policy-page select { margin: 10px 0 0; } .tools-privacy-policy-page .wp-create-privacy-page span { display: block; margin-bottom: 1em; } .tools-privacy-policy-page .wp-create-privacy-page .button { margin-left: 0; } .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) { display: table-cell; } .wp-list-table.privacy_requests.widefat th input, .wp-list-table.privacy_requests.widefat thead td input { margin-left: 5px; } .wp-privacy-request-form-field input[type="text"] { width: 100%; margin-bottom: 10px; vertical-align: middle; } .regular-text { max-width: 100%; } } @media only screen and (max-width: 768px) { .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"], .form-field select, .form-field textarea { width: 99%; } .form-wrap .form-field { padding: 0; } } @media only screen and (max-height: 480px), screen and (max-width: 450px) { /* Request Credentials / File Editor Warning */ .request-filesystem-credentials-dialog .notification-dialog, .file-editor-warning .notification-dialog { width: 100%; height: 100%; max-height: 100%; position: fixed; top: 0; margin: 0; left: 0; } } /* Smartphone */ @media screen and (max-width: 600px) { /* Color Picker Options */ .color-option { width: 49%; } } @media only screen and (max-width: 320px) { .options-general-php .date-time-text.date-time-custom-text { min-width: 0; margin-right: 0.5em; } } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* @import admin-menu.css */ #adminmenuback, #adminmenuwrap, #adminmenu, #adminmenu .wp-submenu { width: 160px; background-color: #1d2327; } #adminmenuback { position: fixed; top: 0; bottom: -120px; z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */ /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } .php-error #adminmenuback { position: absolute; } .php-error #adminmenuback, .php-error #adminmenuwrap { margin-top: 2em; } #adminmenu { clear: left; margin: 12px 0; padding: 0; list-style: none; } .folded #adminmenuback, .folded #adminmenuwrap, .folded #adminmenu, .folded #adminmenu li.menu-top { width: 36px; } /* New Menu icons */ /* hide background-image for icons above */ .menu-icon-dashboard div.wp-menu-image, .menu-icon-post div.wp-menu-image, .menu-icon-media div.wp-menu-image, .menu-icon-links div.wp-menu-image, .menu-icon-page div.wp-menu-image, .menu-icon-comments div.wp-menu-image, .menu-icon-appearance div.wp-menu-image, .menu-icon-plugins div.wp-menu-image, .menu-icon-users div.wp-menu-image, .menu-icon-tools div.wp-menu-image, .menu-icon-settings div.wp-menu-image, .menu-icon-site div.wp-menu-image, .menu-icon-generic div.wp-menu-image { background-image: none !important; } /*------------------------------------------------------------------------------ 7.0 - Main Navigation (Left Menu) ------------------------------------------------------------------------------*/ #adminmenuwrap { position: relative; float: left; z-index: 9990; } /* side admin menu */ #adminmenu * { -webkit-user-select: none; user-select: none; } #adminmenu li { margin: 0; padding: 0; } #adminmenu a { display: block; line-height: 1.3; padding: 2px 5px; color: #f0f0f1; } #adminmenu .wp-submenu a { color: #c3c4c7; color: rgba(240, 246, 252, 0.7); font-size: 13px; line-height: 1.4; margin: 0; padding: 5px 0; } #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { background: none; } #adminmenu a:hover, #adminmenu li.menu-top > a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { color: #72aee6; } #adminmenu a:hover, #adminmenu a:focus, .folded #adminmenu .wp-submenu-head:hover { box-shadow: inset 4px 0 0 0 currentColor; transition: box-shadow .1s linear; } #adminmenu li.menu-top { border: none; min-height: 34px; position: relative; } #adminmenu .wp-submenu { list-style: none; position: absolute; top: -1000em; left: 160px; overflow: visible; word-wrap: break-word; padding: 6px 0; z-index: 9999; background-color: #2c3338; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } .js #adminmenu .sub-open, .js #adminmenu .opensub .wp-submenu, #adminmenu a.menu-top:focus + .wp-submenu, .no-js li.wp-has-submenu:hover .wp-submenu { top: -1px; } #adminmenu a.wp-has-current-submenu:focus + .wp-submenu { top: 0; } #adminmenu .wp-has-current-submenu .wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, #adminmenu .wp-has-current-submenu.opensub .wp-submenu { position: relative; z-index: 3; top: auto; left: auto; right: auto; bottom: auto; border: 0 none; margin-top: 0; box-shadow: none; } .folded #adminmenu .wp-has-current-submenu .wp-submenu { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ #adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { position: relative; background-color: #1d2327; color: #72aee6; } .folded #adminmenu li.menu-top:hover, .folded #adminmenu li.opensub > a.menu-top, .folded #adminmenu li > a.menu-top:focus { z-index: 10000; } #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { background: #2271b1; color: #fff; } .folded #adminmenu .wp-submenu.sub-open, .folded #adminmenu .opensub .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, .folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, .folded #adminmenu a.menu-top:focus + .wp-submenu, .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { top: 0; left: 36px; } .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu { position: absolute; top: -1000em; } #adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu { min-width: 160px; width: auto; border: 1px solid transparent; border-left-width: 5px; } #adminmenu .wp-submenu li.current, #adminmenu .wp-submenu li.current a, #adminmenu .opensub .wp-submenu li.current a, #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, #adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus { color: #fff; } #adminmenu .wp-not-current-submenu li > a, .folded #adminmenu .wp-has-current-submenu li > a { padding-right: 16px; padding-left: 14px; /* Exclude from the transition the outline for Windows High Contrast mode */ transition: all .1s ease-in-out, outline 0s; } #adminmenu .wp-has-current-submenu ul > li > a, .folded #adminmenu li.menu-top .wp-submenu > li > a { padding: 5px 12px; } #adminmenu a.menu-top, #adminmenu .wp-submenu-head { font-size: 14px; font-weight: 400; line-height: 1.3; padding: 0; } #adminmenu .wp-submenu-head { display: none; } .folded #adminmenu .wp-menu-name { position: absolute; left: -999px; } .folded #adminmenu .wp-submenu-head { display: block; } #adminmenu .wp-submenu li { padding: 0; margin: 0; } #adminmenu .wp-menu-image img { padding: 9px 0 0; opacity: 0.6; filter: alpha(opacity=60); } #adminmenu div.wp-menu-name { padding: 8px 8px 8px 36px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; hyphens: auto; } #adminmenu div.wp-menu-image { float: left; width: 36px; height: 34px; margin: 0; text-align: center; } #adminmenu div.wp-menu-image.svg { background-repeat: no-repeat; background-position: center; background-size: 20px auto; } div.wp-menu-image:before { color: #a7aaad; color: rgba(240, 246, 252, 0.6); padding: 7px 0; transition: all .1s ease-in-out; } #adminmenu div.wp-menu-image:before { color: #a7aaad; color: rgba(240, 246, 252, 0.6); } #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, #adminmenu .wp-has-current-submenu div.wp-menu-image:before, #adminmenu .current div.wp-menu-image:before, #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, #adminmenu a.current:hover div.wp-menu-image:before, #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before { color: #fff; } #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before { color: #72aee6; } .folded #adminmenu div.wp-menu-image { width: 35px; height: 30px; position: absolute; z-index: 25; } .folded #adminmenu a.menu-top { height: 34px; } /* Sticky admin menu */ .sticky-menu #adminmenuwrap { position: fixed; } ul#adminmenu a.wp-has-current-submenu { position: relative; } ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.current:after { right: 0; border: solid 8px transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #f0f0f1; top: 50%; margin-top: -8px; } .folded ul#adminmenu li:hover a.wp-has-current-submenu:after, .folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after { display: none; } .folded ul#adminmenu a.wp-has-current-submenu:after, .folded ul#adminmenu > li a.current:after { border-width: 4px; margin-top: -4px; } /* flyout menu arrow */ #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { right: 0; border: 8px solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; top: 10px; z-index: 10000; } .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 18px; } #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-right-color: #2c3338; } #adminmenu li.menu-top:hover .wp-menu-image img, #adminmenu li.wp-has-current-submenu .wp-menu-image img { opacity: 1; filter: alpha(opacity=100); } #adminmenu li.wp-menu-separator { height: 5px; padding: 0; margin: 0 0 6px; cursor: inherit; } /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */ #adminmenu div.separator { height: 2px; padding: 0; } #adminmenu .wp-submenu .wp-submenu-head { color: #fff; font-weight: 400; font-size: 14px; padding: 5px 4px 5px 11px; margin: -8px -1px 4px -5px; border-width: 3px 1px 3px 5px; border-style: solid; border-color: transparent; } #adminmenu li.current, .folded #adminmenu li.wp-menu-open { border: 0 none; } /* @todo: consider to use a single rule for these counters and the list table comments counters. */ #adminmenu .menu-counter, #adminmenu .awaiting-mod, #adminmenu .update-plugins { display: inline-block; vertical-align: top; box-sizing: border-box; margin: 1px 0 -1px 2px; padding: 0 5px; min-width: 18px; height: 18px; border-radius: 9px; background-color: #d63638; color: #fff; font-size: 11px; line-height: 1.6; text-align: center; z-index: 26; } #adminmenu li.current a .awaiting-mod, #adminmenu li a.wp-has-current-submenu .update-plugins { background-color: #d63638; color: #fff; } #adminmenu li span.count-0 { display: none; } #collapse-button { display: block; width: 100%; height: 34px; margin: 0; border: none; padding: 0; position: relative; overflow: visible; background: none; color: #a7aaad; cursor: pointer; } #collapse-button:hover { color: #72aee6; } #collapse-button:focus { color: #72aee6; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; } #collapse-button .collapse-button-icon, #collapse-button .collapse-button-label { /* absolutely positioned to avoid 1px shift in IE when button is pressed */ display: block; position: absolute; top: 0; left: 0; } #collapse-button .collapse-button-label { top: 8px; } #collapse-button .collapse-button-icon { width: 36px; height: 34px; } #collapse-button .collapse-button-label { padding: 0 0 0 36px; } .folded #collapse-button .collapse-button-label { display: none; } #collapse-button .collapse-button-icon:after { content: "\f148"; display: block; position: relative; top: 7px; text-align: center; font: normal 20px/1 dashicons !important; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* rtl:ignore */ .folded #collapse-button .collapse-button-icon:after, .rtl #collapse-button .collapse-button-icon:after { transform: rotate(180deg); } .rtl.folded #collapse-button .collapse-button-icon:after { transform: none; } #collapse-button .collapse-button-icon:after, #collapse-button .collapse-button-label { transition: all .1s ease-in-out; } /** * Toolbar menu toggle */ li#wp-admin-bar-menu-toggle { display: none; } /* Hide-if-customize for items we can't add classes to */ .customize-support #menu-appearance a[href="themes.php?page=custom-header"], .customize-support #menu-appearance a[href="themes.php?page=custom-background"] { display: none; } /* Auto-folding of the admin menu */ @media only screen and (max-width: 960px) { .auto-fold #wpcontent, .auto-fold #wpfooter { margin-left: 36px; } .auto-fold #adminmenuback, .auto-fold #adminmenuwrap, .auto-fold #adminmenu, .auto-fold #adminmenu li.menu-top { width: 36px; } .auto-fold #adminmenu .wp-submenu.sub-open, .auto-fold #adminmenu .opensub .wp-submenu, .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { top: 0; left: 36px; } .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { position: absolute; top: -1000em; margin-right: -1px; padding: 6px 0; z-index: 9999; } .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { min-width: 160px; width: auto; border: 1px solid transparent; border-left-width: 5px; } .auto-fold #adminmenu .wp-has-current-submenu li > a { padding-right: 16px; padding-left: 14px; } .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { padding-left: 12px; } .auto-fold #adminmenu .wp-menu-name { position: absolute; left: -999px; } .auto-fold #adminmenu .wp-submenu-head { display: block; } .auto-fold #adminmenu div.wp-menu-image { height: 30px; width: 34px; position: absolute; z-index: 25; } .auto-fold #adminmenu a.menu-top { min-height: 34px; } .auto-fold #adminmenu li.wp-menu-open { border: 0 none; } .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last { margin-bottom: 0; } .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: none; } .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 16px; } .auto-fold ul#adminmenu a.wp-has-current-submenu:after, .auto-fold ul#adminmenu > li a.current:after { border-width: 4px; margin-top: -4px; } .auto-fold #adminmenu li.menu-top:hover, .auto-fold #adminmenu li.opensub > a.menu-top, .auto-fold #adminmenu li > a.menu-top:focus { z-index: 10000; } .auto-fold #collapse-menu .collapse-button-label { display: none; } /* rtl:ignore */ .auto-fold #collapse-button .collapse-button-icon:after { transform: rotate(180deg); } .rtl.auto-fold #collapse-button .collapse-button-icon:after { transform: none; } } @media screen and (max-width: 782px) { .auto-fold #wpcontent { position: relative; margin-left: 0; padding-left: 10px; } .sticky-menu #adminmenuwrap { position: relative; z-index: auto; top: 0; } /* Sidebar Adjustments */ .auto-fold #adminmenu, .auto-fold #adminmenuback, .auto-fold #adminmenuwrap { position: absolute; width: 190px; z-index: 100; } .auto-fold #adminmenuback { position: fixed; } .auto-fold #adminmenuback, .auto-fold #adminmenuwrap { display: none; } .auto-fold .wp-responsive-open #adminmenuback, .auto-fold .wp-responsive-open #adminmenuwrap { display: block; } .auto-fold #adminmenu li.menu-top { width: 100%; } /* Resize the admin menu items to a comfortable touch size */ .auto-fold #adminmenu li a { font-size: 16px; padding: 5px; } .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { padding: 10px 10px 10px 20px; } /* Restore the menu names */ .auto-fold #adminmenu .wp-menu-name { position: static; } /* Switch the arrow side */ .auto-fold ul#adminmenu a.wp-has-current-submenu:after, .auto-fold ul#adminmenu > li.current > a.current:after { border-width: 8px; margin-top: -8px; } .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { display: none; } /* Make the submenus appear correctly when tapped. */ #adminmenu .wp-submenu { position: relative; display: none; } .auto-fold #adminmenu .selected .wp-submenu, .auto-fold #adminmenu .wp-menu-open .wp-submenu { position: relative; display: block; top: 0; left: -1px; box-shadow: none; } .auto-fold #adminmenu .selected .wp-submenu:after, .auto-fold #adminmenu .wp-menu-open .wp-submenu:after { display: none; } .auto-fold #adminmenu .opensub .wp-submenu { display: none; } .auto-fold #adminmenu .selected .wp-submenu { display: block; } .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: block; } .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { position: relative; left: -1px; right: 0; top: 0; } #adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu, .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { border: none; } /* Remove submenu headers and adjust sub meu*/ #adminmenu .wp-submenu .wp-submenu-head { display: none; } /* Toolbar menu toggle */ #wp-responsive-toggle { position: fixed; top: 5px; left: 4px; padding-right: 10px; z-index: 99999; border: none; box-sizing: border-box; } #wpadminbar #wp-admin-bar-menu-toggle a { display: block; padding: 0; overflow: hidden; outline: none; text-decoration: none; border: 1px solid transparent; background: none; height: 44px; margin-left: -1px; } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { background: #2c3338; } li#wp-admin-bar-menu-toggle { display: block; } #wpadminbar #wp-admin-bar-menu-toggle a:hover { border: 1px solid transparent; } #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { content: "\f228"; display: inline-block; float: left; font: normal 40px/45px dashicons; vertical-align: middle; outline: none; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 44px; width: 50px; padding: 0; border: none; text-align: center; text-decoration: none; box-sizing: border-box; } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { color: #72aee6; } } /* Smartphone */ @media screen and (max-width: 600px) { #adminmenuwrap, #adminmenuback { display: none; } .wp-responsive-open #adminmenuwrap, .wp-responsive-open #adminmenuback { display: block; } .auto-fold #adminmenu { top: 46px; } } /* @import dashboard.css */ #wpbody-content #dashboard-widgets.columns-1 .postbox-container { width: 100%; } #wpbody-content #dashboard-widgets.columns-2 .postbox-container { width: 49.5%; } #wpbody-content #dashboard-widgets.columns-2 #postbox-container-2, #wpbody-content #dashboard-widgets.columns-2 #postbox-container-3, #wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 { float: right; width: 50.5%; } #wpbody-content #dashboard-widgets.columns-3 .postbox-container { width: 33.5%; } #wpbody-content #dashboard-widgets.columns-3 #postbox-container-1 { width: 33%; } #wpbody-content #dashboard-widgets.columns-3 #postbox-container-3, #wpbody-content #dashboard-widgets.columns-3 #postbox-container-4 { float: right; } #wpbody-content #dashboard-widgets.columns-4 .postbox-container { width: 25%; } #dashboard-widgets .postbox-container { width: 25%; } #dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container { border: none !important; } #dashboard-widgets-wrap { overflow: hidden; margin: 0 -8px; } #dashboard-widgets .postbox .inside { margin-bottom: 0; } #dashboard-widgets .meta-box-sortables { display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ /* Required min-height to make the jQuery UI Sortable drop zone work. */ min-height: 100px; margin: 0 8px 20px; } #dashboard-widgets .postbox-container .empty-container { outline: 3px dashed #c3c4c7; height: 250px; } /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { outline: 3px dashed #646970; /* Prevent margin on the child from collapsing with margin on the parent. */ display: flow-root; } #dashboard-widgets .postbox-container .empty-container:after { content: attr(data-emptystring); margin: auto; position: absolute; top: 50%; left: 0; right: 0; transform: translateY( -50% ); padding: 0 2em; text-align: center; color: #646970; font-size: 16px; line-height: 1.5; display: none; } /* @todo: this was originally in this section, but likely belongs elsewhere */ #the-comment-list td.comment p.comment-author { margin-top: 0; margin-left: 0; } #the-comment-list p.comment-author img { float: left; margin-right: 8px; } #the-comment-list p.comment-author strong a { border: none; } #the-comment-list td { vertical-align: top; } #the-comment-list td.comment { word-wrap: break-word; } #the-comment-list td.comment img { max-width: 100%; } /* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */ .index-php #screen-meta-links { margin: 0 20px 8px 0; } /* Welcome Panel */ .welcome-panel { position: relative; overflow: auto; margin: 16px 0; background-color: #151515; font-size: 14px; line-height: 1.3; clear: both; } .welcome-panel h2 { margin: 0; font-size: 48px; font-weight: 600; line-height: 1.25; } .welcome-panel h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.4; } .welcome-panel p { font-size: inherit; line-height: inherit; } .welcome-panel-header { position: relative; color: #fff; } .welcome-panel-header-image { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 0 !important; overflow: hidden; } .welcome-panel-header-image svg { display: block; margin: auto; width: 100%; height: 100%; } .rtl .welcome-panel-header-image svg { transform: scaleX(-1); } .welcome-panel-header * { color: inherit; position: relative; z-index: 1; } .welcome-panel-header a:focus, .welcome-panel-header a:hover { color: inherit; text-decoration: none; } .welcome-panel-header a:focus, .welcome-panel .welcome-panel-close:focus { outline-color: currentColor; outline-offset: 1px; box-shadow: none; } .welcome-panel-header p { margin: 0.5em 0 0; font-size: 20px; line-height: 1.4; } .welcome-panel .welcome-panel-close { position: absolute; top: 10px; right: 10px; padding: 10px 15px 10px 24px; font-size: 13px; line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ text-decoration: none; z-index: 1; /* Raise above the version image. */ } .welcome-panel .welcome-panel-close:before { position: absolute; top: 8px; left: 0; transition: all .1s ease-in-out; content: '\f335'; font-size: 24px; color: #fff; } .welcome-panel .welcome-panel-close { color: #fff; } .welcome-panel .welcome-panel-close:hover, .welcome-panel .welcome-panel-close:focus, .welcome-panel .welcome-panel-close:hover::before, .welcome-panel .welcome-panel-close:focus::before { color: #fff972; } /* @deprecated 5.9.0 -- Button removed from panel. */ .wp-core-ui .welcome-panel .button.button-hero { margin: 15px 13px 3px 0; padding: 12px 36px; height: auto; line-height: 1.4285714; white-space: normal; } .welcome-panel-content { min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; } .welcome-panel-header { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1500px; width: 100%; padding: 48px 0 80px 48px; } .welcome-panel .welcome-panel-column-container { box-sizing: border-box; width: 100%; clear: both; display: grid; z-index: 1; padding: 48px; grid-template-columns: repeat(3, 1fr); gap: 32px; align-self: flex-end; background: #fff; } [class*="welcome-panel-icon"] { height: 60px; width: 60px; background-position: center; background-size: 24px 24px; background-repeat: no-repeat; border-radius: 100%; } .welcome-panel-column > svg { margin-top: 4px; } .welcome-panel-column { display: grid; grid-template-columns: min-content 1fr; gap: 24px; } .welcome-panel-icon-pages { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E"); } .welcome-panel-icon-layout { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E"); } .welcome-panel-icon-styles { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E"); } /* @deprecated 5.9.0 -- Section removed from welcome panel. */ .welcome-panel .welcome-widgets-menus { line-height: 1.14285714; } /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel .welcome-panel-column ul { margin: 0.8em 1em 1em 0; } /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel li { font-size: 14px; } /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel li a { text-decoration: none; } /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel .welcome-panel-column li { line-height: 1.14285714; list-style-type: none; padding: 0 0 8px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-icon { background: transparent !important; } /* Welcome Panel and Right Now common Icons style */ /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-icon:before, #dashboard_right_now li a:before, #dashboard_right_now li span:before, #dashboard_right_now .search-engines-info:before { color: #646970; font: normal 20px/1 dashicons; speak: never; display: inline-block; padding: 0 10px 0 0; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; vertical-align: top; } /* Welcome Panel specific Icons styles */ /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-write-blog:before, .welcome-panel .welcome-edit-page:before { content: "\f119"; top: -3px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-add-page:before { content: "\f132"; top: -1px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-setup-home:before { content: "\f102"; top: -1px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-view-site:before { content: "\f115"; top: -2px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-widgets-menus:before { content: "\f116"; top: -2px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-widgets:before { content: "\f538"; top: -2px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-menus:before { content: "\f163"; top: -2px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-comments:before { content: "\f117"; top: -1px; } /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ .welcome-panel .welcome-learn-more:before { content: "\f118"; top: -1px; } /* Right Now specific Icons styles */ #dashboard_right_now .search-engines-info:before, #dashboard_right_now li a:before, #dashboard_right_now li > span:before { /* get only the first level span to exclude screen-reader-text in mu-storage */ content: "\f159"; /* generic icon for items added by CPTs ? */ padding: 0 5px 0 0; } #dashboard_right_now .page-count a:before, #dashboard_right_now .page-count span:before { content: "\f105"; } #dashboard_right_now .post-count a:before, #dashboard_right_now .post-count span:before { content: "\f109"; } #dashboard_right_now .comment-count a:before { content: "\f101"; } #dashboard_right_now .comment-mod-count a:before { content: "\f125"; } #dashboard_right_now .storage-count a:before { content: "\f104"; } #dashboard_right_now .storage-count.warning a:before { content: "\f153"; } #dashboard_right_now .search-engines-info:before { content: "\f348"; color: #d63638; } /* Dashboard WordPress events */ .community-events-errors { margin: 0; } .community-events-loading { padding: 10px 12px 8px; } .community-events { margin-bottom: 6px; padding: 0 12px; } .community-events .spinner { float: none; margin: 5px 2px 0; vertical-align: top; } .community-events-errors[aria-hidden="true"], .community-events-errors [aria-hidden="true"], .community-events-loading[aria-hidden="true"], .community-events[aria-hidden="true"], .community-events form[aria-hidden="true"] { display: none; } .community-events .activity-block:first-child, .community-events h2 { padding-top: 12px; padding-bottom: 10px; } .community-events-form { margin: 15px 0 5px; } .community-events-form .regular-text { width: 40%; height: 29px; margin: 0; vertical-align: top; } .community-events li.event-none { border-left: 4px solid #72aee6; } #dashboard-widgets .community-events li.event-none a { text-decoration: underline; } .community-events-form label { display: inline-block; vertical-align: top; line-height: 2.15384615; height: 28px; } .community-events .activity-block > p { margin-bottom: 0; display: inline; } .community-events-toggle-location { vertical-align: middle; } #community-events-submit { margin-left: 3px; margin-right: 3px; } /* Needs higher specificity than #dashboard-widgets .button-link */ #dashboard-widgets .community-events-cancel.button-link { vertical-align: top; /* Same properties as the submit button for cross-browsers alignment. */ line-height: 2; height: 28px; text-decoration: underline; } .community-events ul { background-color: #f6f7f7; padding-left: 0; padding-right: 0; padding-bottom: 0; } .community-events li { margin: 0; padding: 8px 12px; color: #2c3338; } .community-events li:first-child { border-top: 1px solid #f0f0f1; } .community-events li ~ li { border-top: 1px solid #f0f0f1; } .community-events .activity-block.last { border-bottom: 1px solid #f0f0f1; padding-top: 0; margin-top: -1px; } .community-events .event-info { display: block; } .community-events .ce-separator::before { content: "\2022"; } .event-icon { height: 18px; padding-right: 10px; width: 18px; display: none; /* Hide on smaller screens */ } .event-icon:before { color: #646970; font-size: 18px; } .event-meetup .event-icon:before { content: "\f484"; } .event-wordcamp .event-icon:before { content: "\f486"; } .community-events .event-title { font-weight: 600; display: block; } .community-events .event-date, .community-events .event-time { display: block; } .community-events-footer { margin-top: 0; margin-bottom: 0; padding: 12px; border-top: 1px solid #f0f0f1; color: #dcdcde; } /* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */ .community-events-footer .screen-reader-text { height: inherit; white-space: nowrap; } /* Dashboard WordPress news */ #dashboard_primary .inside { margin: 0; padding: 0; } #dashboard_primary .widget-loading { padding: 12px 12px 0; margin-bottom: 1em !important; /* Needs to override `.postbox .inside > p:last-child` in common.css */ } /* Notice when JS is off. */ #dashboard_primary .inside .notice { margin: 0; } body #dashboard-widgets .postbox form .submit { margin: 0; } /* Used only for configurable widgets. */ .dashboard-widget-control-form p { margin-top: 0; } .rssSummary { color: #646970; margin-top: 4px; } #dashboard_primary .rss-widget { font-size: 13px; padding: 0 12px; } #dashboard_primary .rss-widget:last-child { border-bottom: none; padding-bottom: 8px; } #dashboard_primary .rss-widget a { font-weight: 400; } #dashboard_primary .rss-widget span, #dashboard_primary .rss-widget span.rss-date { color: #646970; } #dashboard_primary .rss-widget span.rss-date { margin-left: 12px; } #dashboard_primary .rss-widget ul li { padding: 4px 0; margin: 0; } /* Dashboard right now */ #dashboard_right_now ul { margin: 0; /* contain floats but don't use overflow: hidden */ display: inline-block; width: 100%; } #dashboard_right_now li { width: 50%; float: left; margin-bottom: 10px; } #dashboard_right_now .inside { padding: 0; } #dashboard_right_now .main { padding: 0 12px 11px; } #dashboard_right_now .main p { margin: 0; } #dashboard_right_now #wp-version-message .button { float: right; position: relative; top: -5px; margin-left: 5px; } #dashboard_right_now p.search-engines-info { margin: 1em 0; } .mu-storage { overflow: hidden; } #dashboard-widgets h3.mu-storage { margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 400; } #network_dashboard_right_now p input { margin: 2px 1px; vertical-align: middle; } /* Dashboard right now - Colors */ #dashboard_right_now .sub { color: #50575e; background: #f6f7f7; border-top: 1px solid #f0f0f1; padding: 10px 12px 6px; } #dashboard_right_now .sub h3 { color: #50575e; } #dashboard_right_now .sub p { margin: 0 0 1em; } #dashboard_right_now .warning a:before, #dashboard_right_now .warning span:before { color: #d63638; } /* Dashboard Quick Draft */ #dashboard_quick_press .inside { margin: 0; padding: 0; } #dashboard_quick_press div.updated { margin-bottom: 10px; border: 1px solid #f0f0f1; border-width: 1px 1px 1px 0; } #dashboard_quick_press form { margin: 12px; } #dashboard_quick_press .drafts { padding: 10px 0 0; } /* Dashboard Quick Draft - Form styling */ #dashboard_quick_press label { display: inline-block; margin-bottom: 4px; } #dashboard_quick_press input, #dashboard_quick_press textarea { box-sizing: border-box; margin: 0; } #dashboard-widgets .postbox form .submit { margin: -39px 0; float: right; } #description-wrap { margin-top: 12px; } #quick-press textarea#content { min-height: 90px; max-height: 1300px; margin: 0 0 8px; padding: 6px 7px; resize: none; } /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { border-top: 1px solid #f0f0f1; } #dashboard_quick_press .drafts abbr { border: none; } #dashboard_quick_press .drafts .view-all { float: right; margin: 0 12px 0 0; } #dashboard_primary a.rsswidget { font-weight: 400; } #dashboard_quick_press .drafts ul { margin: 0 12px; } #dashboard_quick_press .drafts li { margin-bottom: 1em; } #dashboard_quick_press .drafts li time { color: #646970; } #dashboard_quick_press .drafts p { margin: 0; word-wrap: break-word; } #dashboard_quick_press .draft-title { word-wrap: break-word; } #dashboard_quick_press .draft-title a, #dashboard_quick_press .draft-title time { margin: 0 5px 0 0; } /* Dashboard common styles */ #dashboard-widgets h4, /* Back-compat for pre-4.4 */ #dashboard-widgets h3, #dashboard_quick_press .drafts h2 { margin: 0 12px 8px; padding: 0; font-size: 14px; font-weight: 400; color: #1d2327; } #dashboard_quick_press .drafts h2 { line-height: inherit; } #dashboard-widgets .inside h4, /* Back-compat for pre-4.4 */ #dashboard-widgets .inside h3 { margin-left: 0; margin-right: 0; } /* Dashboard activity widget */ #dashboard_activity .comment-meta span.approve:before { content: "\f227"; font: 20px/.5 dashicons; margin-left: 5px; vertical-align: middle; position: relative; top: -1px; margin-right: 2px; } #dashboard_activity .inside { margin: 0; padding-bottom: 0; } #dashboard_activity .no-activity { overflow: hidden; padding: 12px 0; text-align: center; } #dashboard_activity .no-activity p { color: #646970; font-size: 16px; } #dashboard_activity .subsubsub { float: none; border-top: 1px solid #f0f0f1; margin: 0 -12px; padding: 8px 12px 4px; } #dashboard_activity .subsubsub a .count, #dashboard_activity .subsubsub a.current .count { color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */ } #future-posts ul, #published-posts ul { margin: 8px -12px 0 -12px; } #future-posts li, #published-posts li { display: grid; grid-template-columns: clamp(160px, calc(2vw + 140px), 200px) auto; column-gap: 10px; color: #646970; padding: 4px 12px; } #future-posts li:nth-child(odd), #published-posts li:nth-child(odd) { background-color: #f6f7f7; } .activity-block { border-bottom: 1px solid #f0f0f1; margin: 0 -12px 6px -12px; padding: 8px 12px 4px; } .activity-block:last-child { border-bottom: none; margin-bottom: 0; } .activity-block .subsubsub li { color: #dcdcde; } /* Dashboard activity widget - Comments */ /* @todo: needs serious de-duplication */ #activity-widget #the-comment-list tr.undo, #activity-widget #the-comment-list div.undo { background: none; padding: 6px 0; margin-left: 12px; } #activity-widget #the-comment-list .comment-item { background: #f6f7f7; padding: 12px; position: relative; } #activity-widget #the-comment-list .avatar { position: absolute; top: 12px; } #activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar { padding-left: 63px; } #activity-widget #the-comment-list .dashboard-comment-wrap blockquote { margin: 1em 0; } #activity-widget #the-comment-list .comment-item p.row-actions { margin: 4px 0 0; } #activity-widget #the-comment-list .comment-item:first-child { border-top: 1px solid #f0f0f1; } #activity-widget #the-comment-list .unapproved { background-color: #fcf9e8; } #activity-widget #the-comment-list .unapproved:before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; background: #d63638; width: 4px; } #activity-widget #the-comment-list .spam-undo-inside .avatar, #activity-widget #the-comment-list .trash-undo-inside .avatar { position: relative; top: 0; } /* Browse happy box */ #dashboard-widgets #dashboard_browser_nag.postbox .inside { margin: 10px; } .postbox .button-link .edit-box { display: none; } .edit-box { opacity: 0; } .hndle:hover .edit-box, .edit-box:focus { opacity: 1; } #dashboard-widgets form .input-text-wrap input { width: 100%; } #dashboard-widgets form .textarea-wrap textarea { width: 100%; } #dashboard-widgets .postbox form .submit { float: none; margin: .5em 0 0; padding: 0; border: none; } #dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish { min-width: 0; } #dashboard-widgets li a, #dashboard-widgets .button-link, .community-events-footer a { text-decoration: none; } #dashboard-widgets h2 a { text-decoration: underline; } #dashboard-widgets .hndle .postbox-title-action { float: right; line-height: 1.2; } #dashboard_plugins h5 { font-size: 14px; } /* Recent Comments */ #latest-comments #the-comment-list { position: relative; margin: 0 -12px; } #activity-widget #the-comment-list .comment, #activity-widget #the-comment-list .pingback { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); } #activity-widget .comments #the-comment-list .alt { background-color: transparent; } #activity-widget #latest-comments #the-comment-list .comment-item { /* the row-actions paragraph is output only for users with 'edit_comment' capabilities, for other users this needs a min height equal to the gravatar image */ min-height: 50px; margin: 0; padding: 12px; } #latest-comments #the-comment-list .pingback { padding-left: 12px !important; } #latest-comments #the-comment-list .comment-item:first-child { border-top: none; } #latest-comments #the-comment-list .comment-meta { line-height: 1.5; margin: 0; color: #646970; } #latest-comments #the-comment-list .comment-meta cite { font-style: normal; font-weight: 400; } #latest-comments #the-comment-list .comment-item blockquote, #latest-comments #the-comment-list .comment-item blockquote p { margin: 0; padding: 0; display: inline; } #latest-comments #the-comment-list .comment-item p.row-actions { margin: 3px 0 0; padding: 0; font-size: 13px; } /* Feeds */ .rss-widget ul { margin: 0; padding: 0; list-style: none; } a.rsswidget { font-size: 13px; font-weight: 600; line-height: 1.4; } .rss-widget ul li { line-height: 1.5; margin-bottom: 12px; } .rss-widget span.rss-date { color: #646970; font-size: 13px; margin-left: 3px; } .rss-widget cite { display: block; text-align: right; margin: 0 0 1em; padding: 0; } .rss-widget cite:before { content: "\2014"; } .dashboard-comment-wrap { word-wrap: break-word; } /* Browser Nag */ #dashboard_browser_nag a.update-browser-link { font-size: 1.2em; font-weight: 600; } #dashboard_browser_nag a { text-decoration: underline; } #dashboard_browser_nag p.browser-update-nag.has-browser-icon { padding-right: 128px; } #dashboard_browser_nag .browser-icon { margin-top: -32px; } #dashboard_browser_nag.postbox { background-color: #b32d2e; background-image: none; border-color: #b32d2e; color: #fff; box-shadow: none; } #dashboard_browser_nag.postbox h2 { border-bottom-color: transparent; background: transparent none; color: #fff; box-shadow: none; } #dashboard_browser_nag a { color: #fff; } #dashboard_browser_nag.postbox .postbox-header { border-color: transparent; } #dashboard_browser_nag h2.hndle { border: none; font-weight: 600; font-size: 20px; padding-top: 10px; } .postbox#dashboard_browser_nag p a.dismiss { font-size: 14px; } .postbox#dashboard_browser_nag p, .postbox#dashboard_browser_nag a, .postbox#dashboard_browser_nag p.browser-update-nag { font-size: 16px; } /* PHP Nag */ #dashboard_php_nag .dashicons-warning { color: #dba617; padding-right: 6px; } #dashboard_php_nag.php-no-security-updates .dashicons-warning, #dashboard_php_nag.php-version-lower-than-future-minimum .dashicons-warning { color: #d63638; } #dashboard_php_nag h2 { display: inline-block; } #dashboard_php_nag p { margin: 12px 0; } #dashboard_php_nag .button .dashicons-external { line-height: 25px; } .bigger-bolder-text { font-weight: 600; font-size: 14px; } /* =Media Queries -------------------------------------------------------------- */ @media only screen and (min-width: 1600px) { .welcome-panel .welcome-panel-column-container { display: flex; justify-content: center; } .welcome-panel-column { width: 100%; max-width: 460px; } } /* one column on the dash */ @media only screen and (max-width: 799px) { #wpbody-content #dashboard-widgets .postbox-container { width: 100%; } #dashboard-widgets .meta-box-sortables { min-height: 0; } .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { min-height: 100px; } #dashboard-widgets .meta-box-sortables.empty-container { margin-bottom: 0; } } /* two columns on the dash, but keep the setting if one is selected */ @media only screen and (min-width: 800px) and (max-width: 1499px) { #wpbody-content #dashboard-widgets .postbox-container { width: 49.5%; } #wpbody-content #dashboard-widgets #postbox-container-2, #wpbody-content #dashboard-widgets #postbox-container-3, #wpbody-content #dashboard-widgets #postbox-container-4 { float: right; width: 50.5%; } #dashboard-widgets #postbox-container-3 .empty-container, #dashboard-widgets #postbox-container-4 .empty-container { outline: none; height: 0; min-height: 0; margin-bottom: 0; } #dashboard-widgets #postbox-container-3 .empty-container:after, #dashboard-widgets #postbox-container-4 .empty-container:after { display: none; } #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { width: 100%; } #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { outline: none; height: 0; min-height: 0; margin-bottom: 0; } /* show the radio buttons for column prefs only for one or two columns */ .index-php .screen-layout, .index-php .columns-prefs { display: block; } .columns-prefs .columns-prefs-3, .columns-prefs .columns-prefs-4 { display: none; } #dashboard-widgets .postbox-container .empty-container:after { display: block; } } /* three columns on the dash */ @media only screen and (min-width: 1500px) and (max-width: 1800px) { #wpbody-content #dashboard-widgets .postbox-container { width: 33.5%; } #wpbody-content #dashboard-widgets #postbox-container-1 { width: 33%; } #wpbody-content #dashboard-widgets #postbox-container-3, #wpbody-content #dashboard-widgets #postbox-container-4 { float: right; } #dashboard-widgets #postbox-container-4 .empty-container { outline: none; height: 0; min-height: 0; margin-bottom: 0; } #dashboard-widgets #postbox-container-4 .empty-container:after { display: none; } #dashboard-widgets .postbox-container .empty-container:after { display: block; } } /* Always show the "Drag boxes here" CSS generated content on large screens. */ @media only screen and (min-width: 1801px) { #dashboard-widgets .postbox-container .empty-container:after { display: block; } } @media screen and (max-width: 870px) { /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel .welcome-panel-column li { display: inline-block; margin-right: 13px; } /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ .welcome-panel .welcome-panel-column ul { margin: 0.4em 0 0; } } @media screen and (max-width: 1180px) and (min-width: 783px) { .welcome-panel-column { grid-template-columns: 1fr; } [class*="welcome-panel-icon"], .welcome-panel-column > svg { display: none; } } @media screen and (max-width: 782px) { .welcome-panel .welcome-panel-column-container { grid-template-columns: 1fr; box-sizing: border-box; padding: 32px; width: 100%; } .welcome-panel .welcome-panel-column-content { max-width: 520px; } /* Keep the close icon from overlapping the Welcome text. */ .welcome-panel .welcome-panel-close { overflow: hidden; text-indent: 40px; white-space: nowrap; width: 20px; height: 20px; padding: 5px; top: 5px; right: 5px; } .welcome-panel .welcome-panel-close::before { top: 5px; left: -35px; } #dashboard-widgets h2 { padding: 12px; } #dashboard_recent_comments #the-comment-list .comment-item .avatar { height: 30px; width: 30px; margin: 4px 10px 5px 0; } .community-events-toggle-location { height: 38px; vertical-align: baseline; } .community-events-form .regular-text { height: 32px; } #community-events-submit { margin-bottom: 0; /* Override .wp-core-ui .button */ vertical-align: top; } .community-events-form label, #dashboard-widgets .community-events-cancel.button-link { /* Same properties as the submit button for cross-browsers alignment. */ font-size: 14px; line-height: normal; height: auto; padding: 6px 0; border: 1px solid transparent; } .community-events .spinner { margin-top: 7px; } } /* Smartphone */ @media screen and (max-width: 600px) { .welcome-panel-header { padding: 32px 32px 64px; } .welcome-panel-header-image { display: none; } } @media screen and (max-width: 480px) { .welcome-panel-column { gap: 16px; } } @media screen and (max-width: 360px) { .welcome-panel-column { grid-template-columns: 1fr; } [class*="welcome-panel-icon"], .welcome-panel-column > svg { display: none; } } @media screen and (min-width: 355px) { .community-events .event-info { display: table-row; float: left; max-width: 59%; } .event-icon, .event-icon[aria-hidden="true"] { display: table-cell; } .event-info-inner { display: table-cell; } .community-events .event-date-time { float: right; max-width: 39%; } .community-events .event-date, .community-events .event-time { text-align: right; } } /* @import list-tables.css */ .response-links { display: block; margin-bottom: 1em; } .response-links a { display: block; } .response-links a.comments-edit-item-link { font-weight: 600; } .response-links a.comments-view-item-link { font-size: 12px; } .post-com-count-wrapper strong { font-weight: 400; } .comments-view-item-link { display: inline-block; clear: both; } .column-response .post-com-count-wrapper, .column-comments .post-com-count-wrapper { white-space: nowrap; word-wrap: normal; } /* comments bubble common */ .column-response .post-com-count, .column-comments .post-com-count { display: inline-block; vertical-align: top; } /* comments bubble approved */ .column-response .post-com-count-no-comments, .column-response .post-com-count-approved, .column-comments .post-com-count-no-comments, .column-comments .post-com-count-approved { margin-top: 5px; } .column-response .comment-count-no-comments, .column-response .comment-count-approved, .column-comments .comment-count-no-comments, .column-comments .comment-count-approved { box-sizing: border-box; display: block; padding: 0 8px; min-width: 24px; height: 2em; border-radius: 5px; background-color: #646970; color: #fff; font-size: 11px; line-height: 1.90909090; text-align: center; } .column-response .post-com-count-no-comments:after, .column-response .post-com-count-approved:after, .column-comments .post-com-count-no-comments:after, .column-comments .post-com-count-approved:after { content: ""; display: block; margin-left: 8px; width: 0; height: 0; border-top: 5px solid #646970; border-right: 5px solid transparent; } .column-response a.post-com-count-approved:hover .comment-count-approved, .column-response a.post-com-count-approved:focus .comment-count-approved, .column-comments a.post-com-count-approved:hover .comment-count-approved, .column-comments a.post-com-count-approved:focus .comment-count-approved { background: #2271b1; } .column-response a.post-com-count-approved:hover:after, .column-response a.post-com-count-approved:focus:after, .column-comments a.post-com-count-approved:hover:after, .column-comments a.post-com-count-approved:focus:after { border-top-color: #2271b1; } /* @todo: consider to use a single rule for these counters and the admin menu counters. */ .column-response .post-com-count-pending, .column-comments .post-com-count-pending { position: relative; left: -3px; padding: 0 5px; min-width: 7px; height: 17px; border: 2px solid #fff; border-radius: 11px; background: #d63638; color: #fff; font-size: 9px; line-height: 1.88888888; text-align: center; } .column-response .post-com-count-no-pending, .column-comments .post-com-count-no-pending { display: none; } /* comments */ .commentlist li { padding: 1em 1em .2em; margin: 0; border-bottom: 1px solid #c3c4c7; } .commentlist li li { border-bottom: 0; padding: 0; } .commentlist p { padding: 0; margin: 0 0 .8em; } #submitted-on, .submitted-on { color: #50575e; } /* reply to comments */ #replyrow td { padding: 2px; } #replysubmit { margin: 0; padding: 5px 7px 10px; overflow: hidden; } #replysubmit .reply-submit-buttons { margin-bottom: 0; } #replysubmit .button { margin-right: 5px; } #replysubmit .spinner { float: none; margin: -4px 0 0; } #replyrow.inline-edit-row fieldset.comment-reply { font-size: inherit; line-height: inherit; } #replyrow legend { margin: 0; padding: .2em 5px 0; font-size: 13px; line-height: 1.4; font-weight: 600; } #replyrow.inline-edit-row label { display: inline; vertical-align: baseline; line-height: inherit; } #edithead .inside, #commentsdiv #edithead .inside { float: left; padding: 3px 0 2px 5px; margin: 0; text-align: center; } #edithead .inside input { width: 180px; } #edithead label { padding: 2px 0; } #replycontainer { padding: 5px; } #replycontent { height: 120px; box-shadow: none; } #replyerror { border-color: #dcdcde; background-color: #f6f7f7; } /* @todo: is this used? */ .commentlist .avatar { vertical-align: text-top; } #the-comment-list tr.undo, #the-comment-list div.undo { background-color: #f6f7f7; } #the-comment-list .unapproved th, #the-comment-list .unapproved td { background-color: #fcf9e8; } #the-comment-list .unapproved th.check-column { border-left: 4px solid #d63638; } #the-comment-list .unapproved th.check-column input { margin-left: 4px; } #the-comment-list .approve a { color: #007017; } #the-comment-list .unapprove a { color: #996800; } #the-comment-list th, #the-comment-list td { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } #the-comment-list tr:last-child th, #the-comment-list tr:last-child td { box-shadow: none; } #the-comment-list tr.unapproved + tr.approved th, #the-comment-list tr.unapproved + tr.approved td { border-top: 1px solid rgba(0, 0, 0, 0.03); } /* table vim shortcuts */ .vim-current, .vim-current th, .vim-current td { background-color: #f0f6fc !important; } th .comment-grey-bubble { width: 16px; /* Make sure the link clickable area fills the entire table header. */ position: relative; top: 2px; } th .comment-grey-bubble:before { content: "\f101"; font: normal 20px/.5 dashicons; speak: never; display: inline-block; padding: 0; top: 4px; left: -4px; position: relative; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; color: #3c434a; } /*------------------------------------------------------------------------------ 10.0 - List Posts (/Pages/etc) ------------------------------------------------------------------------------*/ table.fixed { table-layout: fixed; } .fixed .column-rating, .fixed .column-visible { width: 8%; } .fixed .column-posts, .fixed .column-parent, .fixed .column-links, .fixed .column-author, .fixed .column-format { width: 10%; } .fixed .column-date { width: 14%; } .column-date span[title] { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; } .fixed .column-posts { width: 74px; } .fixed .column-role, .fixed .column-posts { hyphens: auto; } .fixed .column-comment .comment-author { display: none; } .fixed .column-response, .fixed .column-categories, .fixed .column-tags, .fixed .column-rel, .fixed .column-role { width: 15%; } .fixed .column-slug { width: 25%; } .fixed .column-locations { width: 35%; } .fixed .column-comments { width: 5.5em; text-align: left; } .fixed .column-comments .vers { padding-left: 3px; } td.column-title strong, td.plugin-title strong { display: block; margin-bottom: .2em; font-size: 14px; } td.column-title p, td.plugin-title p { margin: 6px 0; } /* Media file column */ table.media .column-title .media-icon { float: left; min-height: 60px; margin: 0 9px 0 0; } table.media .column-title .media-icon img { max-width: 60px; height: auto; vertical-align: top; /* Remove descender white-space. */ } table.media .column-title .has-media-icon ~ .row-actions { margin-left: 70px; /* 60px image + margin */ } table.media .column-title .filename { margin-bottom: 0.2em; } /* Media Copy to clipboard row action */ .media .row-actions .copy-to-clipboard-container { display: inline; position: relative; } .media .row-actions .copy-to-clipboard-container .success { position: absolute; left: 50%; transform: translate(-50%, -100%); background: #000; color: #fff; border-radius: 5px; margin: 0; padding: 2px 5px; } /* @todo: pick a consistent list table selector */ .wp-list-table a { transition: none; } #the-list tr:last-child td, #the-list tr:last-child th { border-bottom: none !important; box-shadow: none; } #comments-form .fixed .column-author { width: 20%; } #commentsdiv.postbox .inside { margin: 0; padding: 0; } #commentsdiv .inside .row-actions { line-height: 1.38461538; } #commentsdiv .inside .column-author { width: 25%; } #commentsdiv .column-comment p { margin: 0.6em 0; padding: 0; } #commentsdiv #replyrow td { padding: 0; } #commentsdiv p { padding: 8px 10px; margin: 0; } #commentsdiv .comments-box { border: 0 none; } #commentsdiv .comments-box thead th, #commentsdiv .comments-box thead td { background: transparent; padding: 0 7px 4px; } #commentsdiv .comments-box tr:last-child td { border-bottom: 0 none; } #commentsdiv #edithead .inside input { width: 160px; } .sorting-indicators { display: grid; } .sorting-indicator { display: block; width: 10px; height: 4px; margin-top: 4px; margin-left: 7px; } .sorting-indicator:before { font: normal 20px/1 dashicons; speak: never; display: inline-block; padding: 0; top: -4px; left: -8px; line-height: 0.5; position: relative; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; color: #a7aaad; } .sorting-indicator.asc:before { content: "\f142"; } .sorting-indicator.desc:before { content: "\f140"; } th.sorted.desc .sorting-indicator.desc:before { color: #1d2327; } th.sorted.asc .sorting-indicator.asc:before { color: #1d2327; } th.sorted.asc a:focus .sorting-indicator.asc:before, th.sorted.asc:hover .sorting-indicator.asc:before, th.sorted.desc a:focus .sorting-indicator.desc:before, th.sorted.desc:hover .sorting-indicator.desc:before { color: #a7aaad; } th.sorted.asc a:focus .sorting-indicator.desc:before, th.sorted.asc:hover .sorting-indicator.desc:before, th.sorted.desc a:focus .sorting-indicator.asc:before, th.sorted.desc:hover .sorting-indicator.asc:before { color: #1d2327; } .wp-list-table .toggle-row { position: absolute; right: 8px; top: 10px; display: none; padding: 0; width: 40px; height: 40px; border: none; outline: none; background: transparent; } .wp-list-table .toggle-row:hover { cursor: pointer; } .wp-list-table .toggle-row:focus:before { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .wp-list-table .toggle-row:active { box-shadow: none; } .wp-list-table .toggle-row:before { position: absolute; top: -5px; left: 10px; border-radius: 50%; display: block; padding: 1px 2px 1px 0; color: #3c434a; /* same as table headers sort arrows */ content: "\f140"; font: normal 20px/1 dashicons; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: never; } .wp-list-table .is-expanded .toggle-row:before { content: "\f142"; } .check-column { position: relative; } .check-column label { box-sizing: border-box; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } .check-column input { position: relative; z-index: 1; } .check-column .label-covers-full-cell:hover + input:not(:disabled) { box-shadow: 0 0 0 1px #2271b1; } .check-column label:hover, .check-column input:hover + label { background: rgba(0, 0, 0, 0.05); } .locked-indicator { display: none; margin-left: 6px; height: 20px; width: 16px; } .locked-indicator-icon:before { color: #8c8f94; content: "\f160"; display: inline-block; font: normal 20px/1 dashicons; speak: never; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .locked-info { display: none; margin-top: 4px; } .locked-text { vertical-align: top; } .wp-locked .locked-indicator, .wp-locked .locked-info { display: block; } tr.wp-locked .check-column label, tr.wp-locked .check-column input[type="checkbox"], tr.wp-locked .row-actions .inline, tr.wp-locked .row-actions .trash { display: none; } #menu-locations-wrap .widefat { width: 60%; } .widefat th.sortable, .widefat th.sorted { padding: 0; } th.sortable a, th.sorted a { display: block; overflow: hidden; padding: 8px; } th.sortable a:focus, th.sorted a:focus { box-shadow: inset 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } th.sortable a span, th.sorted a span { float: left; cursor: pointer; } .tablenav-pages .current-page { margin: 0 2px 0 0; font-size: 13px; text-align: center; } .tablenav .total-pages { margin-right: 2px; } .tablenav #table-paging { margin-left: 2px; } .tablenav { clear: both; height: 30px; margin: 6px 0 4px; padding-top: 5px; vertical-align: middle; } .tablenav.themes { max-width: 98%; } .tablenav .tablenav-pages { float: right; margin: 0 0 9px; } .tablenav .no-pages, .tablenav .one-page .pagination-links { display: none; } .tablenav .tablenav-pages .button, .tablenav .tablenav-pages .tablenav-pages-navspan { display: inline-block; vertical-align: baseline; min-width: 30px; min-height: 30px; margin: 0; padding: 0 4px; font-size: 16px; line-height: 1.625; /* 26px */ text-align: center; } .tablenav .displaying-num { margin-right: 7px; } .tablenav .one-page .displaying-num { display: inline-block; margin: 5px 0; } .tablenav .actions { padding: 0 8px 0 0; } .wp-filter .actions { display: inline-block; vertical-align: middle; } .tablenav .delete { margin-right: 20px; } /* This view-switcher is still used on multisite. */ .tablenav .view-switch { float: right; margin: 0 5px; padding-top: 3px; } .wp-filter .view-switch { display: inline-block; vertical-align: middle; padding: 12px 0; margin: 0 8px 0 2px; } .media-toolbar.wp-filter .view-switch { margin: 0 12px 0 2px; } .view-switch a { float: left; width: 28px; height: 28px; text-align: center; line-height: 1.84615384; text-decoration: none; } .view-switch a:before { color: #c3c4c7; display: inline-block; font: normal 20px/1 dashicons; speak: never; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .view-switch a:hover:before, .view-switch a:focus:before { color: #787c82; } .view-switch a.current:before { color: #2271b1; } .view-switch .view-list:before { content: "\f163"; } .view-switch .view-excerpt:before { content: "\f164"; } .view-switch .view-grid:before { content: "\f509"; } .filter { float: left; margin: -5px 0 0 10px; } .filter .subsubsub { margin-left: -10px; margin-top: 13px; } .screen-per-page { width: 4em; } #posts-filter .wp-filter { margin-bottom: 0; } #posts-filter fieldset { float: left; margin: 0 1.5ex 1em 0; padding: 0; } #posts-filter fieldset legend { padding: 0 0 .2em 1px; } p.pagenav { margin: 0; display: inline; } .pagenav span { font-weight: 600; margin: 0 6px; } .row-title { font-size: 14px !important; font-weight: 600; } .column-comment .comment-author { margin-bottom: 0.6em; } .column-author img, .column-username img, .column-comment .comment-author img { float: left; margin-right: 10px; margin-top: 1px; } .row-actions { color: #a7aaad; font-size: 13px; padding: 2px 0 0; position: relative; left: -9999em; } /* ticket #34150 */ .rtl .row-actions a { display: inline-block; } .row-actions .network_only, .row-actions .network_active { color: #000; } .no-js .row-actions, tr:hover .row-actions, .mobile .row-actions, .row-actions.visible, .comment-item:hover .row-actions { position: static; } /* deprecated */ .row-actions-visible { padding: 2px 0 0; } /*------------------------------------------------------------------------------ 10.1 - Inline Editing ------------------------------------------------------------------------------*/ /* .quick-edit* is for Quick Edit .bulk-edit* is for Bulk Edit .inline-edit* is for everything */ /* Layout */ #wpbody-content .inline-edit-row fieldset { float: left; margin: 0; padding: 0 12px 0 0; width: 100%; box-sizing: border-box; } #wpbody-content .inline-edit-row td fieldset:last-of-type { padding-right: 0; } tr.inline-edit-row td { padding: 0; /* Prevents the focus style on .inline-edit-wrapper from being cut-off */ position: relative; } .inline-edit-wrapper { display: flow-root; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; } .inline-edit-wrapper:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } #wpbody-content .quick-edit-row-post .inline-edit-col-left { width: 40%; } #wpbody-content .quick-edit-row-post .inline-edit-col-right { width: 39%; } #wpbody-content .inline-edit-row-post .inline-edit-col-center { width: 20%; } #wpbody-content .quick-edit-row-page .inline-edit-col-left { width: 50%; } #wpbody-content .quick-edit-row-page .inline-edit-col-right, #wpbody-content .bulk-edit-row-post .inline-edit-col-right { width: 50%; } #wpbody-content .bulk-edit-row .inline-edit-col-left { width: 30%; } #wpbody-content .bulk-edit-row-page .inline-edit-col-right { width: 69%; } #wpbody-content .bulk-edit-row .inline-edit-col-bottom { float: right; width: 69%; } #wpbody-content .inline-edit-row-page .inline-edit-col-right { margin-top: 27px; } .inline-edit-row fieldset .inline-edit-group { clear: both; line-height: 2.5; } .inline-edit-row .submit { display: flex; flex-wrap: wrap; align-items: center; clear: both; margin: 0; padding: 0.5em 0 1em; } .inline-edit-save.submit .button { margin-right: 8px; } .inline-edit-save .spinner { float: none; margin: 0; } .inline-edit-row .notice-error { box-sizing: border-box; min-width: 100%; margin-top: 1em; } .inline-edit-row .notice-error .error { margin: 0.5em 0; padding: 2px; } /* Positioning */ /* Needs higher specificity for the padding */ #the-list .inline-edit-row .inline-edit-legend { margin: 0; padding: 0.2em 0; line-height: 2.5; font-weight: 600; } .inline-edit-row fieldset span.title, .inline-edit-row fieldset span.checkbox-title { margin: 0; padding: 0; } .inline-edit-row fieldset label, .inline-edit-row fieldset span.inline-edit-categories-label { display: block; margin: .2em 0; line-height: 2.5; } .inline-edit-row fieldset.inline-edit-date label { display: inline-block; margin: 0; vertical-align: baseline; line-height: 2; } .inline-edit-row fieldset label.inline-edit-tags { margin-top: 0; } .inline-edit-row fieldset label.inline-edit-tags span.title { margin: .2em 0; width: auto; } .inline-edit-row fieldset label span.title, .inline-edit-row fieldset.inline-edit-date legend { display: block; float: left; width: 6em; line-height: 2.5; } #posts-filter fieldset.inline-edit-date legend { padding: 0; } .inline-edit-row fieldset label span.input-text-wrap, .inline-edit-row fieldset .timestamp-wrap { display: block; margin-left: 6em; } .quick-edit-row-post fieldset.inline-edit-col-right label span.title { width: auto; padding-right: 0.5em; } .inline-edit-row .inline-edit-or { margin: .2em 6px .2em 0; line-height: 2.5; } .inline-edit-row .input-text-wrap input[type=text] { width: 100%; } .inline-edit-row fieldset label input[type=checkbox] { vertical-align: middle; } .inline-edit-row fieldset label textarea { width: 100%; height: 4em; vertical-align: top; } #wpbody-content .bulk-edit-row fieldset .inline-edit-group label { max-width: 50%; } #wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child { margin-right: 0.5em } .inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input { width: 6em; } /* Styling */ .inline-edit-row .inline-edit-legend { text-transform: uppercase; } /* Specific Elements */ .inline-edit-row fieldset .inline-edit-date { float: left; } .inline-edit-row fieldset input[name=jj], .inline-edit-row fieldset input[name=hh], .inline-edit-row fieldset input[name=mn], .inline-edit-row fieldset input[name=aa] { vertical-align: middle; text-align: center; padding: 0 4px; } .inline-edit-row fieldset label input.inline-edit-password-input { width: 8em; } #bulk-titles-list, #bulk-titles-list li, .inline-edit-row fieldset ul.cat-checklist li, .inline-edit-row fieldset ul.cat-checklist input { margin: 0; position: relative; /* RTL fix, #WP27629 */ } .inline-edit-row fieldset ul.cat-checklist input { margin-top: -1px; margin-left: 3px; } .inline-edit-row fieldset label input.inline-edit-menu-order-input { width: 3em; } .inline-edit-row fieldset label input.inline-edit-slug-input { width: 75%; } .inline-edit-row select[name="post_parent"], .inline-edit-row select[name="page_template"] { max-width: 80%; } .quick-edit-row-post fieldset label.inline-edit-status { float: left; } #bulk-titles, ul.cat-checklist { height: 14em; border: 1px solid #ddd; margin: 0 0 5px; padding: 0.2em 5px; overflow-y: scroll; } ul.cat-checklist input[name="post_category[]"]:indeterminate::before { content: ''; border-top: 2px solid grey; width: 65%; height: 2px; position: absolute; top: calc( 50% + 1px ); left: 50%; transform: translate( -50%, -50% ); } #bulk-titles .ntdelbutton, #bulk-titles .ntdeltitle, .inline-edit-row fieldset ul.cat-checklist label { display: inline-block; margin: 0; padding: 3px 0; line-height: 20px; vertical-align: top; } #bulk-titles .ntdelitem { padding-left: 23px; } #bulk-titles .ntdelbutton { width: 26px; height: 26px; margin: 0 0 0 -26px; text-align: center; border-radius: 3px; } #bulk-titles .ntdelbutton:before { display: inline-block; vertical-align: top; } #bulk-titles .ntdelbutton:focus { box-shadow: 0 0 0 2px #3582c4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; /* Reset inherited offset from Gutenberg */ outline-offset: 0; } /*------------------------------------------------------------------------------ 17.0 - Plugins ------------------------------------------------------------------------------*/ .plugins tbody th.check-column, .plugins tbody { padding: 8px 0 0 2px; } .plugins tbody th.check-column input[type=checkbox] { margin-top: 4px; } .updates-table .plugin-title p { margin-top: 0; } .plugins thead td.check-column, .plugins tfoot td.check-column, .plugins .inactive th.check-column { padding-left: 6px; } .plugins, .plugins th, .plugins td { color: #000; } .plugins tr { background: #fff; } .plugins p { margin: 0 4px; padding: 0; } .plugins .desc p { margin: 0 0 8px; } .plugins td.desc { line-height: 1.5; } .plugins .desc ul, .plugins .desc ol { margin: 0 0 0 2em; } .plugins .desc ul { list-style-type: disc; } .plugins .row-actions { font-size: 13px; padding: 0; } .plugins .inactive td, .plugins .inactive th, .plugins .active td, .plugins .active th { padding: 10px 9px; } .plugins .active td, .plugins .active th { background-color: #f0f6fc; } .plugins .update th, .plugins .update td { border-bottom: 0; } .plugins .inactive td, .plugins .inactive th, .plugins .active td, .plugins .active th, .plugin-install #the-list td, .upgrade .plugins td, .upgrade .plugins th { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .plugins tr.active.plugin-update-tr + tr.inactive th, .plugins tr.active.plugin-update-tr + tr.inactive td, .plugins tr.active + tr.inactive th, .plugins tr.active + tr.inactive td { border-top: 1px solid rgba(0, 0, 0, 0.03); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde; } .plugins .update td, .plugins .update th, .upgrade .plugins tr:last-of-type td, .upgrade .plugins tr:last-of-type th, .plugins tr.active + tr.inactive.update th, .plugins tr.active + tr.inactive.update td, .plugins .updated td, .plugins .updated th, .plugins tr.active + tr.inactive.updated th, .plugins tr.active + tr.inactive.updated td { box-shadow: none; } .plugins .active th.check-column, .plugin-update-tr.active td { border-left: 4px solid #72aee6; } .wp-list-table.plugins .plugin-title, .wp-list-table.plugins .theme-title { padding-right: 12px; white-space: nowrap; } .plugins .plugin-title img, .plugins .plugin-title .dashicons { float: left; padding: 0 10px 0 0; width: 64px; height: 64px; } .plugins .plugin-title .dashicons:before { padding: 2px; background-color: #f0f0f1; box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15); font-size: 60px; color: #c3c4c7; } #update-themes-table .plugin-title img, #update-themes-table .plugin-title .dashicons { width: 85px; } .plugins .column-auto-updates { width: 14.2em; } .plugins .inactive .plugin-title strong { font-weight: 400; } .plugins .second, .plugins .row-actions { padding: 0 0 5px; } .plugins .row-actions { white-space: normal; min-width: 12em; } .plugins .update .second, .plugins .update .row-actions, .plugins .updated .second, .plugins .updated .row-actions { padding-bottom: 0; } .plugins-php .widefat tfoot th, .plugins-php .widefat tfoot td { border-top-style: solid; border-top-width: 1px; } .plugins .plugin-update-tr .plugin-update { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); overflow: hidden; /* clearfix */ padding: 0; } .plugins .plugin-update-tr .notice, .plugins .plugin-update-tr div[class="update-message"] { /* back-compat for pre-4.6 */ margin: 5px 20px 15px 40px; } .plugins .notice p { margin: 0.5em 0; } .plugins .plugin-description a, .plugins .plugin-update a, .updates-table .plugin-title a { text-decoration: underline; } .plugins tr.paused th.check-column { border-left: 4px solid #b32d2e; } .plugins tr.paused th, .plugins tr.paused td { background-color: #f6f7f7; } .plugins tr.paused .plugin-title, .plugins .paused .dashicons-warning { color: #b32d2e; } .plugins .paused .error-display p, .plugins .paused .error-display code { font-size: 90%; color: rgba(0, 0, 0, 0.7); } .plugins .resume-link { color: #b32d2e; } .plugin-card .update-now:before { color: #d63638; content: "\f463"; display: inline-block; font: normal 20px/1 dashicons; margin: -3px 5px 0 -2px; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; } .plugin-card .updating-message:before { content: "\f463"; animation: rotation 2s infinite linear; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .plugin-card .updated-message:before { color: #68de7c; content: "\f147"; } .plugin-install-php #the-list { display: flex; flex-wrap: wrap; } .plugin-install-php .plugin-card { display: flex; flex-direction: column; justify-content: space-between; } .plugin-install-php h2 { clear: both; } .plugin-install-php h3 { margin: 2.5em 0 8px; } .plugin-install-php .wp-filter { margin-bottom: 0; } /* Plugin card table view */ .plugin-group { overflow: hidden; /* clearfix */ margin-top: 1.5em; } .plugin-group h3 { margin-top: 0; } .plugin-card { float: left; margin: 0 8px 16px; width: 48.5%; width: calc( 50% - 8px ); background-color: #fff; border: 1px solid #dcdcde; box-sizing: border-box; } .plugin-card:nth-child(odd) { clear: both; margin-left: 0; } .plugin-card:nth-child(even) { margin-right: 0; } @media screen and (min-width: 1600px) and ( max-width: 2299px ) { .plugin-card { width: 30%; width: calc( 33.1% - 8px ); } .plugin-card:nth-child(odd) { clear: none; margin-left: 8px; } .plugin-card:nth-child(even) { margin-right: 8px; } .plugin-card:nth-child(3n+1) { clear: both; margin-left: 0; } .plugin-card:nth-child(3n) { margin-right: 0; } } @media screen and (min-width: 2300px) { .plugin-card { width: 25%; width: calc( 25% - 12px ); } .plugin-card:nth-child(odd) { clear: none; margin-left: 8px; } .plugin-card:nth-child(even) { margin-right: 8px; } .plugin-card:nth-child(4n+1) { clear: both; margin-left: 0; } .plugin-card:nth-child(4n) { margin-right: 0; } } .plugin-card-top { position: relative; padding: 20px 20px 10px; min-height: 135px; } div.action-links, .plugin-action-buttons { margin: 0; /* Override existing margins */ } .plugin-card h3 { margin: 0 12px 12px 0; font-size: 18px; line-height: 1.3; } .plugin-card .desc { margin-inline: 0; } .plugin-card .name, .plugin-card .desc > p { margin-left: 148px; } @media (min-width: 1101px) { .plugin-card .name, .plugin-card .desc > p { margin-right: 128px; } } @media (min-width: 481px) and (max-width: 781px) { .plugin-card .name, .plugin-card .desc > p { margin-right: 128px; } } .plugin-card .column-description { display: flex; flex-direction: column; justify-content: flex-start; } .plugin-card .column-description > p { margin-top: 0; } .plugin-card .column-description p:empty { display: none; } .plugin-card .notice.plugin-dependencies { margin: auto 20px 20px; padding: 15px; } .plugin-card .plugin-dependencies-explainer-text { margin-block: 0; } .plugin-card .plugin-dependency { align-items: center; display: flex; flex-wrap: wrap; margin-top: .5em; column-gap: 1%; row-gap: .5em; } .plugin-card .plugin-dependency:nth-child(2), .plugin-card .plugin-dependency:last-child { margin-top: 1em; } .plugin-card .plugin-dependency-name { flex-basis: 74%; } .plugin-card .plugin-dependency .more-details-link { margin-left: auto; } .rtl .plugin-card .plugin-dependency .more-details-link { margin-right: auto; } @media (max-width: 939px) { .plugin-card .plugin-dependency-name { flex-basis: 69%; } } .plugins #the-list .required-by, .plugins #the-list .requires { margin-top: 1em; } .plugin-card .action-links { position: absolute; top: 20px; right: 20px; width: 120px; } .plugin-action-buttons { clear: right; float: right; margin-bottom: 1em; text-align: right; } .plugin-action-buttons li { margin-bottom: 10px; } .plugin-card-bottom { clear: both; padding: 12px 20px; background-color: #f6f7f7; border-top: 1px solid #dcdcde; overflow: hidden; } .plugin-card-bottom .star-rating { display: inline; } .plugin-card-update-failed .update-now { font-weight: 600; } .plugin-card-update-failed .notice-error { margin: 0; padding-left: 16px; box-shadow: 0 -1px 0 #dcdcde; } .plugin-card-update-failed .plugin-card-bottom { display: none; } .plugin-card .column-rating { line-height: 1.76923076; } .plugin-card .column-rating, .plugin-card .column-updated { margin-bottom: 4px; } .plugin-card .column-rating, .plugin-card .column-downloaded { float: left; clear: left; max-width: 180px; } .plugin-card .column-updated, .plugin-card .column-compatibility { text-align: right; float: right; clear: right; width: 65%; width: calc( 100% - 180px ); } .plugin-card .column-compatibility span:before { font: normal 20px/.5 dashicons; speak: never; display: inline-block; padding: 0; top: 4px; left: -2px; position: relative; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; color: #3c434a; } .plugin-card .column-compatibility .compatibility-incompatible:before { content: "\f158"; color: #d63638; } .plugin-card .column-compatibility .compatibility-compatible:before { content: "\f147"; color: #007017; } .plugin-card .notice { margin: 20px 20px 0; } .plugin-icon { position: absolute; top: 20px; left: 20px; width: 128px; height: 128px; margin: 0 20px 20px 0; } .no-plugin-results { color: #646970; /* same as no themes and no media */ font-size: 18px; font-style: normal; margin: 0; padding: 100px 0 0; width: 100%; text-align: center; } /* ms */ /* Background Color for Site Status */ .wp-list-table .site-deleted, .wp-list-table tr.site-deleted, .wp-list-table .site-archived, .wp-list-table tr.site-archived { background: #fcf0f1; } .wp-list-table .site-spammed, .wp-list-table tr.site-spammed, .wp-list-table .site-mature, .wp-list-table tr.site-mature { background: #fcf9e8; } .sites.fixed .column-lastupdated, .sites.fixed .column-registered { width: 20%; } .sites.fixed .column-users { width: 80px; } /* =Media Queries -------------------------------------------------------------- */ @media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) { .plugin-card .action-links { position: static; margin-left: 148px; width: auto; } .plugin-action-buttons { float: none; margin: 1em 0 0; text-align: left; } .plugin-action-buttons li { display: inline-block; vertical-align: middle; } .plugin-action-buttons li .button { margin-right: 20px; } .plugin-card h3 { margin-right: 24px; } .plugin-card .name, .plugin-card .desc { margin-right: 0; } .plugin-card .desc p:first-of-type { margin-top: 0; } } @media screen and (max-width: 782px) { /* WP List Table Options & Filters */ .tablenav { height: auto; } .tablenav.top { margin: 20px 0 5px; } .tablenav.bottom { position: relative; margin-top: 15px; } .tablenav br { display: none; } .tablenav br.clear { display: block; } .tablenav.top .actions, .tablenav .view-switch { display: none; } .view-switch a { width: 36px; height: 36px; line-height: 2.53846153; } /* Pagination */ .tablenav.top .displaying-num { display: none; } .tablenav.bottom .displaying-num { position: absolute; right: 0; top: 11px; margin: 0; font-size: 14px; } .tablenav .tablenav-pages { width: 100%; text-align: center; margin: 0 0 25px; } .tablenav.bottom .tablenav-pages { margin-top: 25px; } .tablenav.top .tablenav-pages.one-page { display: none; } .tablenav.bottom .actions select { margin-bottom: 5px; } .tablenav.bottom .actions.alignleft + .actions.alignleft { clear: left; margin-top: 10px; } .tablenav.bottom .tablenav-pages.one-page { margin-top: 15px; height: 0; } .tablenav-pages .pagination-links { font-size: 16px; } .tablenav .tablenav-pages .button, .tablenav .tablenav-pages .tablenav-pages-navspan { min-width: 44px; padding: 12px 8px; font-size: 18px; line-height: 1; } .tablenav-pages .pagination-links .current-page { min-width: 44px; padding: 12px 6px; font-size: 16px; line-height: 1.125; } /* WP List Table Adjustments: General */ .form-wrap > p { display: none; } .wp-list-table th.column-primary ~ th, .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { display: none; } .wp-list-table thead th.column-primary { width: 100%; } /* Checkboxes need to show */ .wp-list-table tr th.check-column { display: table-cell; } .wp-list-table .check-column { width: 2.5em; } .wp-list-table .column-primary .toggle-row { display: block; } .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { position: relative; clear: both; width: auto !important; /* needs to override some columns that are more specifically targeted */ } .wp-list-table td.column-primary { padding-right: 50px; /* space for toggle button */ } .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { padding: 3px 8px 3px 35%; } .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before { position: absolute; left: 10px; /* match padding of regular table cell */ display: block; overflow: hidden; width: 32%; /* leave a little space for a gutter */ content: attr(data-colname); white-space: nowrap; text-overflow: ellipsis; } .wp-list-table .is-expanded td:not(.hidden) { display: block !important; overflow: hidden; /* clearfix */ } /* Special cases */ .widefat .num, .column-posts { text-align: left; } #comments-form .fixed .column-author, #commentsdiv .fixed .column-author { display: none !important; } .fixed .column-comment .comment-author { display: block; } /* Comment author hidden via Screen Options */ .fixed .column-author.hidden ~ .column-comment .comment-author { display: none; } #the-comment-list .is-expanded td { box-shadow: none; } #the-comment-list .is-expanded td:last-child { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } /* Show comment bubble as text instead */ .post-com-count .screen-reader-text { position: static; clip-path: none; width: auto; height: auto; margin: 0; } .column-response .post-com-count-no-comments:after, .column-response .post-com-count-approved:after, .column-comments .post-com-count-no-comments:after, .column-comments .post-com-count-approved:after { content: none; } .column-response .post-com-count [aria-hidden="true"], .column-comments .post-com-count [aria-hidden="true"] { display: none; } .column-response .post-com-count-wrapper, .column-comments .post-com-count-wrapper { white-space: normal; } .column-response .post-com-count-wrapper > a, .column-comments .post-com-count-wrapper > a { display: block; } .column-response .post-com-count-no-comments, .column-response .post-com-count-approved, .column-comments .post-com-count-no-comments, .column-comments .post-com-count-approved { margin-top: 0; margin-right: 0.5em; } .column-response .post-com-count-pending, .column-comments .post-com-count-pending { position: static; height: auto; min-width: 0; padding: 0; border: none; border-radius: 0; background: none; color: #b32d2e; font-size: inherit; line-height: inherit; text-align: left; } .column-response .post-com-count-pending:hover, .column-comments .post-com-count-pending:hover { color: #d63638; } .widefat thead td.check-column, .widefat tfoot td.check-column { padding-top: 10px; } .row-actions { margin-right: -8px; padding-top: 4px; } /* Make row actions more easy to select on mobile */ body:not(.plugins-php) .row-actions { display: flex; flex-wrap: wrap; gap: 8px; color: transparent; } .row-actions span { font-size: 0; } .row-actions span a, .row-actions span .button-link { display: inline-block; padding: 4px 16px 4px 0; font-size: 13px; line-height: 1.5; } .row-actions span.approve:before, .row-actions span.unapprove:before { content: "| "; } /* Quick Edit and Bulk Edit */ #wpbody-content .quick-edit-row-post .inline-edit-col-left, #wpbody-content .quick-edit-row-post .inline-edit-col-right, #wpbody-content .inline-edit-row-post .inline-edit-col-center, #wpbody-content .quick-edit-row-page .inline-edit-col-left, #wpbody-content .quick-edit-row-page .inline-edit-col-right, #wpbody-content .bulk-edit-row-post .inline-edit-col-right, #wpbody-content .bulk-edit-row .inline-edit-col-left, #wpbody-content .bulk-edit-row-page .inline-edit-col-right, #wpbody-content .bulk-edit-row .inline-edit-col-bottom { float: none; width: 100%; padding: 0; } #the-list .inline-edit-row .inline-edit-legend, .inline-edit-row span.title { font-size: 16px; } .inline-edit-row p.howto { font-size: 14px; } #wpbody-content .inline-edit-row-page .inline-edit-col-right { margin-top: 0; } #wpbody-content .quick-edit-row fieldset .inline-edit-col label, #wpbody-content .quick-edit-row fieldset .inline-edit-group label, #wpbody-content .bulk-edit-row fieldset .inline-edit-col label, #wpbody-content .bulk-edit-row fieldset .inline-edit-group label { max-width: none; float: none; margin-bottom: 5px; } #wpbody .bulk-edit-row fieldset select { display: block; width: 100%; max-width: none; box-sizing: border-box; } .inline-edit-row fieldset input[name=jj], .inline-edit-row fieldset input[name=hh], .inline-edit-row fieldset input[name=mn], .inline-edit-row fieldset input[name=aa] { font-size: 16px; line-height: 2; padding: 3px 4px; } #bulk-titles .ntdelbutton, #bulk-titles .ntdeltitle, .inline-edit-row fieldset ul.cat-checklist label { padding: 6px 0; font-size: 16px; line-height: 28px; } #bulk-titles .ntdelitem { padding-left: 37px; } #bulk-titles .ntdelbutton { width: 40px; height: 40px; margin: 0 0 0 -40px; overflow: hidden; } #bulk-titles .ntdelbutton:before { font-size: 20px; line-height: 28px; } .inline-edit-row fieldset label span.title, .inline-edit-row fieldset.inline-edit-date legend { float: none; } .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { padding: 0; } .inline-edit-row fieldset label span.input-text-wrap, .inline-edit-row fieldset .timestamp-wrap { margin-left: 0; } .inline-edit-row .inline-edit-or { margin: 0 6px 0 0; } #edithead .inside, #commentsdiv #edithead .inside { float: none; text-align: left; padding: 3px 5px; } #commentsdiv #edithead .inside input, #edithead .inside input { width: 100%; } #edithead label { display: block; } /* Updates */ #wpbody-content .updates-table .plugin-title { width: auto; white-space: normal; } /* Links */ .link-manager-php #posts-filter { margin-top: 25px; } .link-manager-php .tablenav.bottom { overflow: hidden; } /* List tables that don't toggle rows */ .comments-box .toggle-row, .wp-list-table.plugins .toggle-row { display: none; } /* Plugin/Theme Management */ #wpbody-content .wp-list-table.plugins td { display: block; width: auto; padding: 10px 9px; /* reset from other list tables that have a label at this width */ } #wpbody-content .wp-list-table.plugins .plugin-deleted-tr td, #wpbody-content .wp-list-table.plugins .no-items td { display: table-cell; } /* Plugin description hidden via Screen Options */ #wpbody-content .wp-list-table.plugins .desc.hidden { display: none; } #wpbody-content .wp-list-table.plugins .column-description { padding-top: 2px; } #wpbody-content .wp-list-table.plugins .plugin-title, #wpbody-content .wp-list-table.plugins .theme-title { padding-right: 12px; white-space: normal; } .wp-list-table.plugins .plugin-title, .wp-list-table.plugins .theme-title { padding-top: 13px; padding-bottom: 4px; } .plugins #the-list tr > td:not(:last-child), .plugins #the-list .update th, .plugins #the-list .update td, .wp-list-table.plugins #the-list .theme-title { box-shadow: none; border-top: none; } .plugins #the-list tr td { border-top: none; } .plugins tbody { padding: 1px 0 0; } .plugins tr.active + tr.inactive th.check-column, .plugins tr.active + tr.inactive td.column-description, .plugins .plugin-update-tr:before { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .plugins tr.active + tr.inactive th.check-column, .plugins tr.active + tr.inactive td { border-top: none; } /* mimic the checkbox th */ .plugins .plugin-update-tr:before { content: ""; display: table-cell; } .plugins #the-list .plugin-update-tr .plugin-update { border-left: none; } .plugin-update-tr .update-message { margin-left: 0; } .plugins .active.update + .plugin-update-tr:before, .plugins .active.updated + .plugin-update-tr:before { background-color: #f0f6fc; border-left: 4px solid #72aee6; } .plugins .plugin-update-tr .update-message { margin-left: 0; } .wp-list-table.plugins .plugin-title strong, .wp-list-table.plugins .theme-title strong { font-size: 1.4em; line-height: 1.5; } .plugins tbody th.check-column { padding: 8px 0 0 5px; } .plugins thead td.check-column, .plugins tfoot td.check-column, .plugins .inactive th.check-column { padding-left: 9px; } /* Add New plugins page */ table.plugin-install .column-name, table.plugin-install .column-version, table.plugin-install .column-rating, table.plugin-install .column-description { display: block; width: auto; } table.plugin-install th.column-name, table.plugin-install th.column-version, table.plugin-install th.column-rating, table.plugin-install th.column-description { display: none; } table.plugin-install td.column-name strong { font-size: 1.4em; line-height: 1.6em; } table.plugin-install #the-list td { box-shadow: none; } table.plugin-install #the-list tr { display: block; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .plugin-card { margin-left: 0; margin-right: 0; width: 100%; } table.media .column-title .has-media-icon ~ .row-actions { margin-left: 0; clear: both; } } @media screen and (max-width: 480px) { .tablenav-pages .current-page { margin: 0; } .tablenav.bottom .displaying-num { position: relative; top: 0; display: block; text-align: right; padding-bottom: 0.5em; } .tablenav.bottom .tablenav-pages.one-page { height: auto; } .tablenav-pages .tablenav-paging-text { float: left; width: 100%; padding-top: 0.5em; } } /* @import edit.css */ #poststuff { padding-top: 10px; min-width: 763px; } #poststuff #post-body { padding: 0; } #poststuff .postbox-container { width: 100%; } #poststuff #post-body.columns-2 { margin-right: 300px; } /*------------------------------------------------------------------------------ 11.0 - Write/Edit Post Screen ------------------------------------------------------------------------------*/ #show-comments { overflow: hidden; } #save-action .spinner, #show-comments a { float: left; } #show-comments .spinner { float: none; margin-top: 0; } #lost-connection-notice .spinner { visibility: visible; float: left; margin: 0 5px 0 0; } #titlediv { position: relative; } #titlediv label { cursor: text; } #titlediv div.inside { margin: 0; } #poststuff #titlewrap { border: 0; padding: 0; } #titlediv #title { padding: 3px 8px; font-size: 1.7em; line-height: 100%; height: 1.7em; width: 100%; outline: none; margin: 0 0 3px; background-color: #fff; } #titlediv #title-prompt-text { color: #646970; position: absolute; font-size: 1.7em; padding: 10px; pointer-events: none; } #titlewrap .skiplink:focus { clip: inherit; clip-path: inherit; right: 4px; top: 4px; width: auto; } input#link_description, input#link_url { width: 100%; } #pending { background: 0 none; border: 0 none; padding: 0; font-size: 11px; margin-top: -1px; } #edit-slug-box, #comment-link-box { line-height: 1.84615384; min-height: 25px; margin-top: 5px; padding: 0 10px; color: #646970; } #sample-permalink { display: inline-block; max-width: 100%; word-wrap: break-word; } #edit-slug-box .cancel { margin-right: 10px; padding: 0; font-size: 11px; } #comment-link-box { margin: 5px 0; padding: 0 5px; } #editable-post-name-full { display: none; } #editable-post-name { font-weight: 600; } #editable-post-name input { font-size: 13px; font-weight: 400; height: 24px; margin: 0; width: 16em; } .postarea h3 label { float: left; } body.post-new-php .submitbox .submitdelete { display: none; } .submitbox .submit a:hover { text-decoration: underline; } .submitbox .submit input { margin-bottom: 8px; margin-right: 4px; padding: 6px; } #post-status-select { margin-top: 3px; } body.post-type-wp_navigation div#minor-publishing, body.post-type-wp_navigation .inline-edit-status { display: none; } /* Post Screen */ /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { outline: 3px dashed #646970; /* Prevent margin on the child from collapsing with margin on the parent. */ display: flow-root; /* * This min-height is meant to limit jumpiness while dragging. It's equivalent * to the minimum height of the sortable-placeholder which is given by the height * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder * bottom margin (20px) + 2 additional pixels to compensate browsers rounding. */ min-height: 60px; margin-bottom: 20px; } .postbox { position: relative; min-width: 255px; border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); background: #fff; } #trackback_url { width: 99%; } #normal-sortables .postbox .submit { background: transparent none; border: 0 none; float: right; padding: 0 12px; margin: 0; } .category-add input[type="text"], .category-add select { width: 100%; max-width: 260px; vertical-align: baseline; } #side-sortables .category-add input[type="text"], #side-sortables .category-add select { margin: 0 0 1em; } ul.category-tabs li, #side-sortables .add-menu-item-tabs li, .wp-tab-bar li { display: inline; line-height: 1.35; } .no-js .category-tabs li.hide-if-no-js { display: none; } .category-tabs a, #side-sortables .add-menu-item-tabs a, .wp-tab-bar a { text-decoration: none; } /* @todo: do these really need to be so specific? */ #side-sortables .category-tabs .tabs a, #side-sortables .add-menu-item-tabs .tabs a, .wp-tab-bar .wp-tab-active a, #post-body ul.category-tabs li.tabs a, #post-body ul.add-menu-item-tabs li.tabs a { color: #2c3338; } .category-tabs { margin: 8px 0 5px; } /* Back-compat for pre-4.4 */ #category-adder h4 { margin: 0; } .taxonomy-add-new { display: inline-block; margin: 10px 0; font-weight: 600; } #side-sortables .add-menu-item-tabs, .wp-tab-bar { margin-bottom: 3px; } #normal-sortables .postbox #replyrow .submit { float: none; margin: 0; padding: 5px 7px 10px; overflow: hidden; } #side-sortables .submitbox .submit input, #side-sortables .submitbox .submit .preview, #side-sortables .submitbox .submit a.preview:hover { border: 0 none; } /* @todo: make this a more generic class */ ul.category-tabs, ul.add-menu-item-tabs, ul.wp-tab-bar { margin-top: 12px; } ul.category-tabs li, ul.add-menu-item-tabs li { border: solid 1px transparent; position: relative; } ul.category-tabs li.tabs, ul.add-menu-item-tabs li.tabs, .wp-tab-active { border: 1px solid #dcdcde; border-bottom-color: #fff; background-color: #fff; } ul.category-tabs li, ul.add-menu-item-tabs li, ul.wp-tab-bar li { padding: 3px 5px 6px; } #set-post-thumbnail { display: inline-block; max-width: 100%; } #postimagediv .inside img { max-width: 100%; height: auto; vertical-align: top; background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; } form#tags-filter { position: relative; } /* Global classes */ .wp-hidden-children .wp-hidden-child, .ui-tabs-hide { display: none; } #post-body .tagsdiv #newtag { margin-right: 5px; width: 16em; } #side-sortables input#post_password { width: 94% } #side-sortables .tagsdiv #newtag { width: 68%; } #post-status-info { width: 100%; border-spacing: 0; border: 1px solid #c3c4c7; border-top: none; background-color: #f6f7f7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); z-index: 999; } #post-status-info td { font-size: 12px; } .autosave-info { padding: 2px 10px; text-align: right; } #editorcontent #post-status-info { border: none; } #content-resize-handle { background: transparent url(../images/resize.gif) no-repeat scroll right bottom; width: 12px; cursor: row-resize; } /*rtl:ignore*/ .rtl #content-resize-handle { background-image: url(../images/resize-rtl.gif); background-position: left bottom; } .wp-editor-expand #content-resize-handle { display: none; } #postdivrich #content { resize: none; } #wp-word-count { padding: 2px 10px; } #wp-content-editor-container { position: relative; } .wp-editor-expand #wp-content-editor-tools { z-index: 1000; border-bottom: 1px solid #c3c4c7; } .wp-editor-expand #wp-content-editor-container { box-shadow: none; margin-top: -1px; } .wp-editor-expand #wp-content-editor-container { border-bottom: 0 none; } .wp-editor-expand div.mce-statusbar { z-index: 1; } .wp-editor-expand #post-status-info { border-top: 1px solid #c3c4c7; } .wp-editor-expand div.mce-toolbar-grp { z-index: 999; } /* TinyMCE native fullscreen mode override */ .mce-fullscreen #wp-content-wrap .mce-menubar, .mce-fullscreen #wp-content-wrap .mce-toolbar-grp, .mce-fullscreen #wp-content-wrap .mce-edit-area, .mce-fullscreen #wp-content-wrap .mce-statusbar { position: static !important; width: auto !important; padding: 0 !important; } .mce-fullscreen #wp-content-wrap .mce-statusbar { visibility: visible !important; } .mce-fullscreen #wp-content-wrap .mce-tinymce .mce-wp-dfw { display: none; } .post-php.mce-fullscreen #wpadminbar, .mce-fullscreen #wp-content-wrap .mce-wp-dfw { display: none; } /* End TinyMCE native fullscreen mode override */ #wp-content-editor-tools { background-color: #f0f0f1; padding-top: 20px; } #poststuff #post-body.columns-2 #side-sortables { width: 280px; } #timestampdiv select { vertical-align: top; font-size: 12px; line-height: 2.33333333; /* 28px */ } #aa, #jj, #hh, #mn { padding: 6px 1px; font-size: 12px; line-height: 1.16666666; /* 14px */ } #jj, #hh, #mn { width: 2em; } #aa { width: 3.4em; } .curtime #timestamp { padding: 2px 0 1px; display: inline !important; height: auto !important; } #post-body .misc-pub-post-status:before, #post-body #visibility:before, .curtime #timestamp:before, #post-body .misc-pub-uploadedby:before, #post-body .misc-pub-uploadedto:before, #post-body .misc-pub-revisions:before, #post-body .misc-pub-response-to:before, #post-body .misc-pub-comment-status:before { color: #8c8f94; } #post-body .misc-pub-post-status:before, #post-body #visibility:before, .curtime #timestamp:before, #post-body .misc-pub-uploadedby:before, #post-body .misc-pub-uploadedto:before, #post-body .misc-pub-revisions:before, #post-body .misc-pub-response-to:before, #post-body .misc-pub-comment-status:before { font: normal 20px/1 dashicons; speak: never; display: inline-block; margin-left: -1px; padding-right: 3px; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #post-body .misc-pub-post-status:before, #post-body .misc-pub-comment-status:before { content: "\f173"; } #post-body #visibility:before { content: "\f177"; } .curtime #timestamp:before { content: "\f145"; position: relative; top: -1px; } #post-body .misc-pub-uploadedby:before { content: "\f110"; position: relative; top: -1px; } #post-body .misc-pub-uploadedto:before { content: "\f318"; position: relative; top: -1px; } #post-body .misc-pub-revisions:before { content: "\f321"; } #post-body .misc-pub-response-to:before { content: "\f101"; } #timestampdiv { padding-top: 5px; line-height: 1.76923076; } #timestampdiv p { margin: 8px 0 6px; } #timestampdiv input { text-align: center; } .notification-dialog { position: fixed; top: 30%; max-height: 70%; left: 50%; width: 450px; margin-left: -225px; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); line-height: 1.5; z-index: 1000005; overflow-y: auto; } .notification-dialog-background { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.7; filter: alpha(opacity=70); z-index: 1000000; } #post-lock-dialog .post-locked-message, #post-lock-dialog .post-taken-over { margin: 25px; } #post-lock-dialog .post-locked-message a.button, #file-editor-warning .button { margin-right: 10px; } #post-lock-dialog .post-locked-avatar { float: left; margin: 0 20px 20px 0; } #post-lock-dialog .wp-tab-first { outline: 0; } #post-lock-dialog .locked-saving img { float: left; margin-right: 3px; } #post-lock-dialog.saving .locked-saving, #post-lock-dialog.saved .locked-saved { display: inline; } #excerpt { display: block; margin: 12px 0 0; height: 4em; width: 100%; } .tagchecklist { margin-left: 14px; font-size: 12px; overflow: auto; } .tagchecklist br { display: none; } .tagchecklist strong { margin-left: -8px; position: absolute; } .tagchecklist > li { float: left; margin-right: 25px; font-size: 13px; line-height: 1.8; cursor: default; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tagchecklist .ntdelbutton { position: absolute; width: 24px; height: 24px; border: none; margin: 0 0 0 -19px; padding: 0; background: none; cursor: pointer; text-indent: 0; } #poststuff h3.hndle, /* Back-compat for pre-4.4 */ #poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ #poststuff h2 { font-size: 14px; padding: 8px 12px; margin: 0; line-height: 1.4; } #poststuff .stuffbox h2 { padding: 8px 10px; } #poststuff .stuffbox > h2 { border-bottom: 1px solid #f0f0f1; } #poststuff .inside { margin: 6px 0 0; } .link-php #poststuff .inside, .link-add-php #poststuff .inside { margin-top: 12px; } #poststuff .stuffbox .inside { margin: 0; } #poststuff .inside #parent_id, #poststuff .inside #page_template { max-width: 100%; } .post-attributes-label-wrapper { margin-bottom: 0.5em; } .post-attributes-label { vertical-align: baseline; font-weight: 600; } #post-visibility-select, #comment-status-radio { line-height: 1.5; margin-top: 3px; } #linksubmitdiv .inside, /* Old Link Manager back-compat. */ #poststuff #submitdiv .inside { margin: 0; padding: 0; } #post-body-content, .edit-form-section { margin-bottom: 20px; } .wp_attachment_details .attachment-content-description { margin-top: 0.5385em; display: inline-block; min-height: 1.6923em; } /** * Privacy Settings section * * Note: This section includes selectors from * Site Health where duplicate styling is used. */ /* General */ .privacy-settings #wpcontent, .privacy-settings.auto-fold #wpcontent, .site-health #wpcontent, .site-health.auto-fold #wpcontent { padding-left: 0; } /* Better position for the WordPress admin notices. */ .privacy-settings .notice, .site-health .notice { margin: 25px 20px 15px 22px; } .privacy-settings .notice ~ .notice, .site-health .notice ~ .notice { margin-top: 5px; } /* Emulates .wrap h1 styling */ .privacy-settings-header h1, .health-check-header h1 { display: inline-block; font-weight: 600; margin: 0 0.8rem 1rem; font-size: 23px; padding: 9px 0 4px; line-height: 1.3; } /* Header */ .privacy-settings-header, .health-check-header { text-align: center; margin: 0 0 1rem; background: #fff; border-bottom: 1px solid #dcdcde; } .privacy-settings-title-section, .health-check-title-section { display: flex; align-items: center; justify-content: center; clear: both; padding-top: 8px; } .privacy-settings-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; -ms-grid-columns: 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; grid-template-columns: 1fr 1fr; } .privacy-settings-tab { display: block; /* IE 11 */ text-decoration: none; color: inherit; padding: 0.5rem 1rem 1rem; margin: 0 1rem; transition: box-shadow 0.5s ease-in-out; } .privacy-settings-tab:nth-child(1), .health-check-tab:nth-child(1) { -ms-grid-column: 1; /* IE 11 */ } .privacy-settings-tab:nth-child(2), .health-check-tab:nth-child(2) { -ms-grid-column: 2; /* IE 11 */ } .privacy-settings-tab:focus, .health-check-tab:focus { color: #1d2327; outline: 1px solid #787c82; box-shadow: none; } .privacy-settings-tab.active, .health-check-tab.active { box-shadow: inset 0 -3px #3582c4; font-weight: 600; } /* Body */ .privacy-settings-body, .health-check-body { max-width: 800px; margin: 0 auto; } .tools-privacy-policy-page th { min-width: 230px; } .hr-separator { margin-top: 20px; margin-bottom: 15px; } /* Accordions */ .privacy-settings-accordion, .health-check-accordion { border: 1px solid #c3c4c7; } .privacy-settings-accordion-heading, .health-check-accordion-heading { margin: 0; border-top: 1px solid #c3c4c7; font-size: inherit; line-height: inherit; font-weight: 600; color: inherit; } .privacy-settings-accordion-heading:first-child, .health-check-accordion-heading:first-child { border-top: none; } .privacy-settings-accordion-trigger, .health-check-accordion-trigger { background: #fff; border: 0; color: #2c3338; cursor: pointer; display: flex; font-weight: 400; margin: 0; padding: 1em 3.5em 1em 1.5em; min-height: 46px; position: relative; text-align: left; width: 100%; align-items: center; justify-content: space-between; -webkit-user-select: auto; user-select: auto; } .privacy-settings-accordion-trigger:hover, .privacy-settings-accordion-trigger:active, .health-check-accordion-trigger:hover, .health-check-accordion-trigger:active { background: #f6f7f7; } .privacy-settings-accordion-trigger:focus, .health-check-accordion-trigger:focus { color: #1d2327; border: none; box-shadow: none; outline-offset: -1px; outline: 2px solid #2271b1; background-color: #f6f7f7; } .privacy-settings-accordion-trigger .title, .health-check-accordion-trigger .title { pointer-events: none; font-weight: 600; flex-grow: 1; } .privacy-settings-accordion-trigger .icon, .privacy-settings-view-read .icon, .health-check-accordion-trigger .icon, .site-health-view-passed .icon { border: solid #50575e; border-width: 0 2px 2px 0; height: 0.5rem; pointer-events: none; position: absolute; right: 1.5em; top: 50%; transform: translateY(-70%) rotate(45deg); width: 0.5rem; } .privacy-settings-accordion-trigger .badge, .health-check-accordion-trigger .badge { padding: 0.1rem 0.5rem 0.15rem; color: #2c3338; font-weight: 600; } .privacy-settings-accordion-trigger .badge { margin-left: 0.5rem; } .privacy-settings-accordion-trigger .badge.blue, .health-check-accordion-trigger .badge.blue { border: 1px solid #72aee6; } .privacy-settings-accordion-trigger .badge.orange, .health-check-accordion-trigger .badge.orange { border: 1px solid #dba617; } .privacy-settings-accordion-trigger .badge.red, .health-check-accordion-trigger .badge.red { border: 1px solid #e65054; } .privacy-settings-accordion-trigger .badge.green, .health-check-accordion-trigger .badge.green { border: 1px solid #00ba37; } .privacy-settings-accordion-trigger .badge.purple, .health-check-accordion-trigger .badge.purple { border: 1px solid #2271b1; } .privacy-settings-accordion-trigger .badge.gray, .health-check-accordion-trigger .badge.gray { border: 1px solid #c3c4c7; } .privacy-settings-accordion-trigger[aria-expanded="true"] .icon, .privacy-settings-view-passed[aria-expanded="true"] .icon, .health-check-accordion-trigger[aria-expanded="true"] .icon, .site-health-view-passed[aria-expanded="true"] .icon { transform: translateY(-30%) rotate(-135deg) } .privacy-settings-accordion-panel, .health-check-accordion-panel { margin: 0; padding: 1em 1.5em; background: #fff; } .privacy-settings-accordion-panel[hidden], .health-check-accordion-panel[hidden] { display: none; } .privacy-settings-accordion-panel a .dashicons, .health-check-accordion-panel a .dashicons { text-decoration: none; } .privacy-settings-accordion-actions { text-align: right; display: block; } .privacy-settings-accordion-actions .success { display: none; color: #007017; padding-right: 1em; padding-top: 6px; } .privacy-settings-accordion-actions .success.visible { display: inline-block; } /* Suggested text for privacy policy */ .privacy-settings-accordion-panel.hide-privacy-policy-tutorial .wp-policy-help, /* For back-compat, see #49282 */ .privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-policy-tutorial, .privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-text-copy { display: none; } .privacy-settings-accordion-panel strong.wp-policy-help, /* For back-compat, see #49282 */ .privacy-settings-accordion-panel strong.privacy-policy-tutorial { display: block; margin: 0 0 1em; } .privacy-text-copy span { pointer-events: none; } .privacy-settings-accordion-panel .wp-suggested-text > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), .privacy-settings-accordion-panel .wp-suggested-text div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), .privacy-settings-accordion-panel > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), .privacy-settings-accordion-panel div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p) { margin: 0; padding: 1em; border-left: 2px solid #787c82; } /* Media queries */ @media screen and (max-width: 782px) { .privacy-settings-body, .health-check-body { margin: 0 12px; width: auto; } .privacy-settings .notice, .site-health .notice { margin: 5px 10px 15px; } .privacy-settings .update-nag, .site-health .update-nag { margin-right: 10px; margin-left: 10px; } input#create-page { margin-top: 10px; } .wp-core-ui button.privacy-text-copy { white-space: normal; line-height: 1.8; } #edit-slug-box { padding: 0; } #titlewrap .skiplink:focus { top: 5px; } } @media only screen and (max-width: 1004px) { .privacy-settings-body, .health-check-body { margin: 0 22px; width: auto; } } /** * End Privacy Settings section */ /*------------------------------------------------------------------------------ 11.1 - Custom Fields ------------------------------------------------------------------------------*/ #postcustomstuff thead th { padding: 5px 8px 8px; background-color: #f0f0f1; } #postcustom #postcustomstuff .submit { border: 0 none; float: none; padding: 0 8px 8px; } #postcustom #postcustomstuff .add-custom-field { padding: 12px 8px 8px; } #side-sortables #postcustom #postcustomstuff .submit { margin: 0; padding: 0; } #side-sortables #postcustom #postcustomstuff #the-list textarea { height: 85px; } #side-sortables #postcustom #postcustomstuff td.left input, #side-sortables #postcustom #postcustomstuff td.left select, #side-sortables #postcustomstuff #newmetaleft a { margin: 3px 3px 0; } #postcustomstuff table { margin: 0; width: 100%; border: 1px solid #dcdcde; border-spacing: 0; background-color: #f6f7f7; } #postcustomstuff tr { vertical-align: top; } #postcustomstuff table input, #postcustomstuff table select, #postcustomstuff table textarea { width: 96%; margin: 8px; } #side-sortables #postcustomstuff table input, #side-sortables #postcustomstuff table select, #side-sortables #postcustomstuff table textarea { margin: 3px; } #postcustomstuff th.left, #postcustomstuff td.left { width: 38%; } #postcustomstuff .submit input { margin: 0; width: auto; } #postcustomstuff #newmetaleft a, #postcustomstuff #newmeta-button { display: inline-block; margin: 0 8px 8px; text-decoration: none; } .no-js #postcustomstuff #enternew { display: none; } #post-body-content .compat-attachment-fields { margin-bottom: 20px; } .compat-attachment-fields th { padding-top: 5px; padding-right: 10px; } /*------------------------------------------------------------------------------ 11.3 - Featured Images ------------------------------------------------------------------------------*/ #select-featured-image { padding: 4px 0; overflow: hidden; } #select-featured-image img { max-width: 100%; height: auto; margin-bottom: 10px; } #select-featured-image a { float: left; clear: both; } #select-featured-image .remove { display: none; margin-top: 10px; } .js #select-featured-image.has-featured-image .remove { display: inline-block; } .no-js #select-featured-image .choose { display: none; } /*------------------------------------------------------------------------------ 11.4 - Post formats ------------------------------------------------------------------------------*/ .post-format-icon::before { display: inline-block; vertical-align: middle; height: 20px; width: 20px; margin-top: -4px; margin-right: 7px; color: #dcdcde; font: normal 20px/1 dashicons; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a.post-format-icon:hover:before { color: #135e96; } #post-formats-select { line-height: 2; } #post-formats-select .post-format-icon::before { top: 5px; } input.post-format { margin-top: 1px; } label.post-format-icon { margin-left: 0; padding: 2px 0; } .post-format-icon.post-format-standard::before { content: "\f109"; } .post-format-icon.post-format-image::before { content: "\f128"; } .post-format-icon.post-format-gallery::before { content: "\f161"; } .post-format-icon.post-format-audio::before { content: "\f127"; } .post-format-icon.post-format-video::before { content: "\f126"; } .post-format-icon.post-format-chat::before { content: "\f125"; } .post-format-icon.post-format-status::before { content: "\f130"; } .post-format-icon.post-format-aside::before { content: "\f123"; } .post-format-icon.post-format-quote::before { content: "\f122"; } .post-format-icon.post-format-link::before { content: "\f103"; } /*------------------------------------------------------------------------------ 12.0 - Categories ------------------------------------------------------------------------------*/ .category-adder { margin-left: 120px; padding: 4px 0; } .category-adder h4 { margin: 0 0 8px; } #side-sortables .category-adder { margin: 0; } .wp-tab-panel, .categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel { min-height: 42px; max-height: 200px; overflow: auto; padding: 0 0.9em; border: solid 1px #dcdcde; background-color: #fff; } div.tabs-panel-active { display: block; } div.tabs-panel-inactive { display: none; } div.tabs-panel-active:focus { box-shadow: inset 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .options-discussion-php .indent-children ul, #front-page-warning, #front-static-pages ul, ul.export-filters, .inline-editor ul.cat-checklist ul, .categorydiv ul.categorychecklist ul, .customlinkdiv ul.categorychecklist ul, .posttypediv ul.categorychecklist ul, .taxonomydiv ul.categorychecklist ul { margin-left: 18px; } ul.categorychecklist li { margin: 0; padding: 0; line-height: 1.69230769; word-wrap: break-word; } .categorydiv .tabs-panel, .customlinkdiv .tabs-panel, .posttypediv .tabs-panel, .taxonomydiv .tabs-panel { border-width: 3px; border-style: solid; } .form-wrap label { display: block; padding: 2px 0; } .form-field input[type="text"], .form-field input[type="password"], .form-field input[type="email"], .form-field input[type="number"], .form-field input[type="search"], .form-field input[type="tel"], .form-field input[type="url"], .form-field textarea { border-style: solid; border-width: 1px; width: 95%; } .form-field select, .form-field p { max-width: 95%; } p.description, .form-wrap p { margin: 2px 0 5px; color: #646970; } p.help, p.description, span.description, .form-wrap p { font-size: 13px; } p.description code { font-style: normal; } p.description code, .form-wrap p code { color: #50575e; } .form-wrap .form-field { margin: 1em 0; padding: 0; } .col-wrap h2 { margin: 12px 0; font-size: 1.1em; } .col-wrap p.submit { margin-top: -10px; } .edit-term-notes { margin-top: 2em; } /*------------------------------------------------------------------------------ 13.0 - Tags ------------------------------------------------------------------------------*/ #poststuff .tagsdiv .ajaxtag { margin-top: 1em; } #poststuff .tagsdiv .howto { margin: 1em 0 6px; } .ajaxtag .newtag { position: relative; } .tagsdiv .newtag { width: 180px; } .tagsdiv .the-tags { display: block; height: 60px; margin: 0 auto; overflow: auto; width: 260px; } #post-body-content .tagsdiv .the-tags { margin: 0 5px; } p.popular-tags { border: none; line-height: 2em; padding: 8px 12px 12px; text-align: justify; } p.popular-tags a { padding: 0 3px; } .tagcloud { width: 97%; margin: 0 0 40px; text-align: justify; } .tagcloud h2 { margin: 2px 0 12px; } #poststuff .inside .the-tagcloud { margin: 5px 0 10px; padding: 8px; border: 1px solid #dcdcde; line-height: 1.2; word-spacing: 3px; } .the-tagcloud ul { margin: 0; } .the-tagcloud ul li { display: inline-block; } /* Back-compat styles from deprecated jQuery.suggest, see ticket #40260. */ .ac_results { display: none; margin: -1px 0 0; padding: 0; list-style: none; position: absolute; z-index: 10000; border: 1px solid #4f94d4; background-color: #fff; } .wp-customizer .ac_results { z-index: 500000; } .ac_results li { margin: 0; padding: 5px 10px; white-space: nowrap; text-align: left; } .ac_results .ac_over, .ac_over .ac_match { background-color: #2271b1; color: #fff; cursor: pointer; } .ac_match { text-decoration: underline; } #addtag .spinner { float: none; vertical-align: top; } #edittag { max-width: 800px; } .edit-tag-actions { margin-top: 20px; } /* Comments */ .comment-php .wp-editor-area { height: 200px; } .comment-ays th, .comment-ays td { padding: 10px 15px; } .comment-ays .comment-content ul { list-style: initial; margin-left: 2em; } .comment-ays .comment-content a[href]:after { content: "(" attr( href ) ")"; display: inline-block; padding: 0 4px; color: #646970; font-size: 13px; word-break: break-all; } .comment-ays .comment-content p.edit-comment { margin-top: 10px; } .comment-ays .comment-content p.edit-comment a[href]:after { content: ""; padding: 0; } .comment-ays-submit .button-cancel { margin-left: 1em; } .trash-undo-inside, .spam-undo-inside { margin: 1px 8px 1px 0; line-height: 1.23076923; } .spam-undo-inside .avatar, .trash-undo-inside .avatar { height: 20px; width: 20px; margin-right: 8px; vertical-align: middle; } .stuffbox .editcomment { clear: none; margin-top: 0; } #namediv.stuffbox .editcomment input { width: 100%; } #namediv.stuffbox .editcomment.form-table td { padding: 10px; } #comment-status-radio p { margin: 3px 0 5px; } #comment-status-radio input { margin: 2px 3px 5px 0; vertical-align: middle; } #comment-status-radio label { padding: 5px 0; } /* links tables */ table.links-table { width: 100%; border-spacing: 0; } .links-table th { font-weight: 400; text-align: left; vertical-align: top; min-width: 80px; width: 20%; word-wrap: break-word; } .links-table th, .links-table td { padding: 5px 0; } .links-table td label { margin-right: 8px; } .links-table td input[type="text"], .links-table td textarea { width: 100%; } .links-table #link_rel { max-width: 280px; } /* DFW 2 -------------------------------------------------------------- */ #qt_content_dfw { display: none; } .wp-editor-expand #qt_content_dfw { display: inline-block; } .focus-on .wrap > h1, .focus-on .page-title-action, .focus-on #wpfooter, .focus-on .postbox-container > *, .focus-on div.updated, .focus-on div.error, .focus-on div.notice, .focus-on .update-nag, .focus-on #wp-toolbar, .focus-on #screen-meta-links, .focus-on #screen-meta { opacity: 0; transition-duration: 0.6s; transition-property: opacity; transition-timing-function: ease-in-out; } .focus-on #wp-toolbar { opacity: 0.3; } .focus-off .wrap > h1, .focus-off .page-title-action, .focus-off #wpfooter, .focus-off .postbox-container > *, .focus-off div.updated, .focus-off div.error, .focus-off div.notice, .focus-off .update-nag, .focus-off #wp-toolbar, .focus-off #screen-meta-links, .focus-off #screen-meta { opacity: 1; transition-duration: 0.2s; transition-property: opacity; transition-timing-function: ease-in-out; } .focus-off #wp-toolbar { -webkit-transform: translate(0, 0); } .focus-on #adminmenuback, .focus-on #adminmenuwrap { transition-duration: 0.6s; transition-property: transform; transition-timing-function: ease-in-out; } .focus-on #adminmenuback, .focus-on #adminmenuwrap { transform: translateX( -100% ); } .focus-off #adminmenuback, .focus-off #adminmenuwrap { transform: translateX( 0 ); transition-duration: 0.2s; transition-property: transform; transition-timing-function: ease-in-out; } /* =Media Queries -------------------------------------------------------------- */ /** * HiDPI Displays */ @media print, (min-resolution: 120dpi) { #content-resize-handle, #post-body .wp_themeSkin .mceStatusbar a.mceResize { background: transparent url(../images/resize-2x.gif) no-repeat scroll right bottom; background-size: 11px 11px; } /*rtl:ignore*/ .rtl #content-resize-handle, .rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize { background-image: url(../images/resize-rtl-2x.gif); background-position: left bottom; } } /* * The edit attachment screen auto-switches to one column layout when the * viewport is smaller than 1200 pixels. */ @media only screen and (max-width: 1200px) { .post-type-attachment #poststuff { min-width: 0; } .post-type-attachment #wpbody-content #poststuff #post-body { margin: 0; } .post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 { margin-right: 0; width: 100%; } .post-type-attachment #poststuff #postbox-container-1 .empty-container, .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty { outline: none; height: 0; min-height: 0; } .post-type-attachment #poststuff #post-body.columns-2 #side-sortables { min-height: 0; width: auto; } .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { outline: none; min-height: 0; margin-bottom: 0; } /* hide the radio buttons for column prefs */ .post-type-attachment .screen-layout, .post-type-attachment .columns-prefs { display: none; } } /* one column on the post write/edit screen */ @media only screen and (max-width: 850px) { #poststuff { min-width: 0; } #wpbody-content #poststuff #post-body { margin: 0; } #wpbody-content #post-body.columns-2 #postbox-container-1 { margin-right: 0; width: 100%; } #poststuff #postbox-container-1 .empty-container, #poststuff #postbox-container-1 #side-sortables:empty { height: 0; min-height: 0; } #poststuff #post-body.columns-2 #side-sortables { min-height: 0; width: auto; } /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */ .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container, .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty, .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables, .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables { height: auto; min-height: 60px; } /* hide the radio buttons for column prefs */ .screen-layout, .columns-prefs { display: none; } } @media screen and (max-width: 782px) { .wp-core-ui .edit-tag-actions .button-primary { margin-bottom: 0; } #post-body-content { min-width: 0; } #titlediv #title-prompt-text { padding: 10px; } #poststuff .stuffbox .inside { padding: 0 2px 4px 0; } #poststuff h3.hndle, /* Back-compat for pre-4.4 */ #poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ #poststuff h2 { padding: 12px; } #namediv.stuffbox .editcomment.form-table td { padding: 5px 10px; } .post-format-options { padding-right: 0; } .post-format-options a { margin-right: 5px; margin-bottom: 5px; min-width: 52px; } .post-format-options .post-format-title { font-size: 11px; } .post-format-options a div { height: 28px; width: 28px; } .post-format-options a div:before { font-size: 26px !important; } /* Publish Metabox Options */ #post-visibility-select { line-height: 280%; } .wp-core-ui .save-post-visibility, .wp-core-ui .save-timestamp { vertical-align: middle; margin-right: 15px; } .timestamp-wrap select#mm { display: block; width: 100%; margin-bottom: 10px; } .timestamp-wrap #jj, .timestamp-wrap #aa, .timestamp-wrap #hh, .timestamp-wrap #mn { padding: 12px 3px; font-size: 14px; margin-bottom: 5px; width: auto; text-align: center; } /* Categories Metabox */ ul.category-tabs { margin: 30px 0 15px; } ul.category-tabs li.tabs { padding: 15px; } ul.categorychecklist li { margin-bottom: 15px; } ul.categorychecklist ul { margin-top: 15px; } .category-add input[type=text], .category-add select { max-width: none; margin-bottom: 15px; } /* Tags Metabox */ .tagsdiv .newtag { width: 100%; height: auto; margin-bottom: 15px; } .tagchecklist { margin: 25px 10px; } .tagchecklist > li { font-size: 16px; line-height: 1.4; } /* Discussion */ #commentstatusdiv p { line-height: 2.8; } /* TinyMCE Adjustments */ .mceToolbar * { white-space: normal !important; } .mceToolbar tr, .mceToolbar td { float: left !important; } .wp_themeSkin a.mceButton { width: 30px; height: 30px; } .wp_themeSkin .mceButton .mceIcon { margin-top: 5px; margin-left: 5px; } .wp_themeSkin .mceSplitButton { margin-top: 1px; } .wp_themeSkin .mceSplitButton td a.mceAction { padding: 6px 3px 6px 6px; } .wp_themeSkin .mceSplitButton td a.mceOpen, .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen { padding-top: 6px; padding-bottom: 6px; background-position: 1px 6px; } .wp_themeSkin table.mceListBox { margin: 5px; } div.quicktags-toolbar input { padding: 10px 20px; } button.wp-switch-editor { font-size: 16px; line-height: 1; margin: 7px 0 0 7px; padding: 8px 12px; } #wp-content-media-buttons a { font-size: 14px; padding: 6px 10px; } .wp-media-buttons span.wp-media-buttons-icon, .wp-media-buttons span.jetpack-contact-form-icon { width: 22px !important; margin-left: -2px !important; } .wp-media-buttons .add_media span.wp-media-buttons-icon:before, .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { font-size: 20px !important; } #content_wp_fullscreen { display: none; } .misc-pub-section { padding: 20px 10px; } #delete-action, #publishing-action { line-height: 3.61538461; } #publishing-action .spinner { float: none; margin-top: -2px; /* Half of the Publish button's bottom margin. */ } /* Moderate Comment */ .comment-ays th, .comment-ays td { padding-bottom: 0; } .comment-ays td { padding-top: 6px; } /* Links */ .links-table #link_rel { max-width: none; } .links-table th, .links-table td { padding: 10px 0; } .edit-term-notes { display: none; } .privacy-text-box { width: auto; } .privacy-text-box-toc { float: none; width: auto; height: 100%; display: flex; flex-direction: column; } .privacy-text-section .return-to-top { margin: 2em 0 0; } } /* @import revisions.css */ /*------------------------------------------------------------------------------ 11.2 - Post Revisions ------------------------------------------------------------------------------*/ .revisions-control-frame, .revisions-diff-frame { position: relative; } .revisions-diff-frame { top: 10px; } .revisions-controls { padding-top: 40px; z-index: 1; } .revisions-controls input[type="checkbox"] { position: relative; top: -1px; vertical-align: text-bottom; } .revisions.pinned .revisions-controls { position: fixed; top: 0; height: 82px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .revisions-tickmarks { position: relative; margin: 0 auto; height: 0.7em; top: 7px; max-width: 70%; box-sizing: border-box; background-color: #fff; } .revisions-tickmarks > div { position: absolute; height: 100%; border-left: 1px solid #a7aaad; box-sizing: border-box; } .revisions-tickmarks > div:first-child { border-width: 0; } .comparing-two-revisions .revisions-controls { height: 140px; } .comparing-two-revisions.pinned .revisions-controls { height: 124px; } .revisions .diff-error { position: absolute; text-align: center; margin: 0 auto; width: 100%; display: none; } .revisions.diff-error .diff-error { display: block; } .revisions .loading-indicator { position: absolute; vertical-align: middle; opacity: 0; width: 100%; width: calc( 100% - 30px ); top: 50%; top: calc( 50% - 10px ); transition: opacity 0.5s; } body.folded .revisions .loading-indicator { margin-left: -32px; } .revisions .loading-indicator span.spinner { display: block; margin: 0 auto; float: none; } .revisions.loading .loading-indicator { opacity: 1; } .revisions .diff { transition: opacity 0.5s; } .revisions.loading .diff { opacity: 0.5; } .revisions.diff-error .diff { visibility: hidden; } .revisions-meta { margin-top: 20px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; } .revisions.pinned .revisions-meta { box-shadow: none; } .revision-toggle-compare-mode { position: absolute; top: 0; right: 0; } .comparing-two-revisions .revisions-previous, .comparing-two-revisions .revisions-next, .revisions-meta .diff-meta-to strong { display: none; } .revisions-controls .author-card .date { color: #646970; } .revisions-controls .author-card.autosave { color: #d63638; } .revisions-controls .author-card .author-name { font-weight: 600; } .comparing-two-revisions .diff-meta-to strong { display: block; } .revisions.pinned .revisions-buttons { padding: 0 11px; } .revisions-previous, .revisions-next { position: relative; z-index: 1; } .revisions-previous { float: left; } .revisions-next { float: right; } .revisions-controls .wp-slider { max-width: 70%; margin: 0 auto; top: -3px; } .revisions-diff { padding: 15px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .revisions-diff h3:first-child { margin-top: 0; } /* Revision meta box */ .post-revisions li img, #revisions-meta-restored img { vertical-align: middle; } table.diff { table-layout: fixed; width: 100%; white-space: pre-wrap; } table.diff col.content { width: auto; } table.diff col.content.diffsplit { width: 48%; } table.diff col.diffsplit.middle { width: auto; } table.diff col.ltype { width: 30px; } table.diff tr { background-color: transparent; } table.diff td, table.diff th { font-family: Consolas, Monaco, monospace; font-size: 14px; line-height: 1.57142857; padding: 0.5em 0.5em 0.5em 2em; vertical-align: top; word-wrap: break-word; } table.diff td h1, table.diff td h2, table.diff td h3, table.diff td h4, table.diff td h5, table.diff td h6 { margin: 0; } table.diff .diff-deletedline del, table.diff .diff-addedline ins { text-decoration: none; } table.diff .diff-deletedline { position: relative; background-color: #fcf0f1; } table.diff .diff-deletedline del { background-color: #ffabaf; } table.diff .diff-addedline { position: relative; background-color: #edfaef; } table.diff .diff-deletedline .dashicons, table.diff .diff-addedline .dashicons { position: absolute; top: 0.85714286em; left: 0.5em; width: 1em; height: 1em; font-size: 1em; line-height: 1; } table.diff .diff-addedline .dashicons { /* Compensate the vertically non-centered plus glyph. */ top: 0.92857143em; } table.diff .diff-addedline ins { background-color: #68de7c; } .diff-meta { padding: 5px; clear: both; min-height: 32px; } .diff-title strong { line-height: 2.46153846; min-width: 60px; text-align: right; float: left; margin-right: 5px; } .revisions-controls .author-card .author-info { font-size: 12px; line-height: 1.33333333; } .revisions-controls .author-card .avatar, .revisions-controls .author-card .author-info { float: left; margin-left: 6px; margin-right: 6px; } .revisions-controls .author-card .byline { display: block; font-size: 12px; } .revisions-controls .author-card .avatar { vertical-align: middle; } .diff-meta input.restore-revision { float: right; margin-left: 6px; margin-right: 6px; margin-top: 2px; } .diff-meta-from { display: none; } .comparing-two-revisions .diff-meta-from { display: block; } .revisions-tooltip { position: absolute; bottom: 105px; margin-right: 0; margin-left: -69px; z-index: 0; max-width: 350px; min-width: 130px; padding: 8px 4px; display: none; opacity: 0; } .revisions-tooltip.flipped { margin-left: 0; margin-right: -70px; } .revisions.pinned .revisions-tooltip { display: none !important; } .comparing-two-revisions .revisions-tooltip { bottom: 145px; } .revisions-tooltip-arrow { width: 70px; height: 15px; overflow: hidden; position: absolute; left: 0; margin-left: 35px; bottom: -15px; } .revisions-tooltip.flipped .revisions-tooltip-arrow { margin-left: 0; margin-right: 35px; left: auto; right: 0; } .revisions-tooltip-arrow > span { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; transform: rotate(45deg); } .revisions-tooltip.flipped .revisions-tooltip-arrow > span { left: auto; right: 20px; } .revisions-tooltip, .revisions-tooltip-arrow > span { border: 1px solid #dcdcde; background-color: #fff; } .revisions-tooltip { display: none; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 0; margin-left: -35px; bottom: 90px; z-index: 10000; } .arrow:after { z-index: 9999; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; transform: rotate(45deg); } .revisions-tooltip, .revisions-tooltip-arrow:after { border-width: 1px; border-style: solid; } div.revisions-controls > .wp-slider > .ui-slider-handle { margin-left: -10px; } .rtl div.revisions-controls > .wp-slider > .ui-slider-handle { margin-right: -10px; } /* jQuery UI Slider */ .wp-slider.ui-slider { position: relative; border: 1px solid #dcdcde; text-align: left; cursor: pointer; } .wp-slider .ui-slider-handle { border-radius: 50%; height: 18px; margin-top: -5px; outline: none; padding: 2px; position: absolute; width: 18px; z-index: 2; touch-action: none; } .wp-slider .ui-slider-handle { background: #f6f7f7; border: 1px solid #c3c4c7; box-shadow: 0 1px 0 #c3c4c7; } .wp-slider .ui-slider-handle:hover, .wp-slider .ui-slider-handle.ui-state-hover { background: #f6f7f7; border-color: #8c8f94; } .wp-slider .ui-slider-handle:active, .wp-slider .ui-slider-handle.ui-state-active { background: #f0f0f1; border-color: #8c8f94; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); transform: translateY(1px); } .wp-slider .ui-slider-handle:focus, .wp-slider .ui-slider-handle.ui-state-focus { background: #f0f0f1; border-color: #8c8f94; box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .wp-slider .ui-slider-handle:before { background: none; position: absolute; top: 2px; left: 2px; color: #50575e; content: "\f229"; font: normal 18px/1 dashicons; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wp-slider .ui-slider-handle:hover:before, .wp-slider .ui-slider-handle.ui-state-hover:before { color: #1d2327; } .wp-slider .ui-slider-handle.from-handle:before, .wp-slider .ui-slider-handle.to-handle:before { font-size: 20px !important; margin: -1px 0 0 -1px; } .wp-slider .ui-slider-handle.from-handle:before { content: "\f139"; } .wp-slider .ui-slider-handle.to-handle:before { content: "\f141"; } .rtl .wp-slider .ui-slider-handle.from-handle:before { content: "\f141"; } .rtl .wp-slider .ui-slider-handle.to-handle:before { content: "\f139"; right: -1px; } .wp-slider .ui-slider-range { position: absolute; font-size: 0.7em; display: block; border: 0; background-color: transparent; background-image: none; } .wp-slider.ui-slider-horizontal { height: 0.7em; } .wp-slider.ui-slider-horizontal .ui-slider-handle { top: -.25em; margin-left: -.6em; } .wp-slider.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .wp-slider.ui-slider-horizontal .ui-slider-range-min { left: 0; } .wp-slider.ui-slider-horizontal .ui-slider-range-max { right: 0; } /* =Media Queries -------------------------------------------------------------- */ /** * HiDPI Displays */ @media print, (min-resolution: 120dpi) { .revision-tick.completed-false { background-image: url(../images/spinner-2x.gif); } } @media screen and (max-width: 600px) { .revisions-meta .author-card:not(.comparing-two-revisions .author-card) { display: flex; flex-direction: column; width: fit-content; gap: 16px; } .comparing-two-revisions .revisions-meta .restore-revision { margin-top: 16px; } .revisions-controls { padding-top: 0; } .revision-toggle-compare-mode { position: relative; padding: 1rem 0; } } @media screen and (max-width: 782px) { #diff-next-revision, #diff-previous-revision { margin-top: -1em; } .revisions-buttons { overflow: hidden; margin-bottom: 15px; } .revisions-controls, .comparing-two-revisions .revisions-controls { height: fit-content; } .revisions-tooltip { bottom: 155px; z-index: 2; } .comparing-two-revisions .revisions-tooltip { bottom: 200px; } .diff-meta { overflow: hidden; } table.diff { -ms-word-break: break-all; word-break: break-all; word-wrap: break-word; } .diff-meta input.restore-revision { margin-top: 0; } } /* @import media.css */ /*------------------------------------------------------------------------------ 14.0 - Media Screen ------------------------------------------------------------------------------*/ .media-item .describe { border-collapse: collapse; width: 100%; border-top: 1px solid #dcdcde; clear: both; cursor: default; } .media-item.media-blank .describe { border: 0; } .media-item .describe th { vertical-align: top; text-align: left; padding: 5px 10px 10px; width: 140px; } .media-item .describe .align th { padding-top: 0; } .media-item .media-item-info tr { background-color: transparent; } .media-item .describe td { padding: 0 8px 8px 0; vertical-align: top; } .media-item thead.media-item-info td { padding: 4px 10px 0; } .media-item .media-item-info .A1B1 { padding: 0 0 0 10px; } .media-item td.savesend { padding-bottom: 15px; } .media-item .thumbnail { max-height: 128px; max-width: 128px; } .media-list-subtitle { display: block; } .media-list-title { display: block; } #wpbody-content #async-upload-wrap a { display: none; } .media-upload-form { margin-top: 20px; } .media-upload-form td label { margin-right: 6px; margin-left: 2px; } .media-upload-form .align .field label { display: inline; padding: 0 0 0 23px; margin: 0 1em 0 3px; font-weight: 600; } .media-upload-form tr.image-size label { margin: 0 0 0 5px; font-weight: 600; } .media-upload-form th.label label { font-weight: 600; margin: 0.5em; font-size: 13px; } .media-upload-form th.label label span { padding: 0 5px; } .media-item .describe input[type="text"], .media-item .describe textarea { width: 460px; } .media-item .describe p.help { margin: 0; padding: 0 0 0 5px; } .describe-toggle-on, .describe-toggle-off { display: block; line-height: 2.76923076; float: right; margin-right: 10px; } .media-item .attachment-tools { display: flex; align-items: center; } .media-item .edit-attachment { padding: 14px 0; display: block; margin-right: 10px; } .media-item .edit-attachment.copy-to-clipboard-container { display: flex; margin-top: 0; } .media-item-copy-container .success { line-height: 0; } .media-item button .copy-attachment-url { margin-top: 14px; } .media-item .copy-to-clipboard-container { margin-top: 7px; } .media-item .describe-toggle-off, .media-item.open .describe-toggle-on { display: none; } .media-item.open .describe-toggle-off { display: block; } .media-upload-form .media-item { min-height: 70px; margin-bottom: 1px; position: relative; width: 100%; background: #fff; } .media-upload-form .media-item, .media-upload-form .media-item .error { box-shadow: 0 1px 0 #dcdcde; } #media-items:empty { border: 0 none; } .media-item .filename { padding: 14px 0; overflow: hidden; margin-left: 6px; } .media-item .pinkynail { float: left; margin: 14px; max-height: 70px; max-width: 70px; } .media-item .startopen, .media-item .startclosed { display: none; } .media-item .progress { display: inline-block; height: 22px; margin: 0 6px 7px; width: 200px; line-height: 2em; padding: 0; overflow: hidden; border-radius: 22px; background: #dcdcde; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .media-item .bar { z-index: 9; width: 0; height: 100%; margin-top: -22px; border-radius: 22px; background-color: #2271b1; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); } .media-item .progress .percent { z-index: 10; position: relative; width: 200px; padding: 0; color: #fff; text-align: center; line-height: 22px; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .upload-php .fixed .column-parent { width: 15%; } .js .html-uploader #plupload-upload-ui { display: none; } .js .html-uploader #html-upload-ui { display: block; } #html-upload-ui #async-upload { font-size: 1em; } .media-upload-form .media-item.error, .media-upload-form .media-item .error { width: auto; margin: 0 0 1px; } .media-upload-form .media-item .error { padding: 10px 0 10px 14px; min-height: 50px; } .media-item .error-div button.dismiss { float: right; margin: 0 10px 0 15px; } /*------------------------------------------------------------------------------ 14.1 - Media Library ------------------------------------------------------------------------------*/ .find-box { background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); width: 600px; overflow: hidden; margin-left: -300px; position: fixed; top: 30px; bottom: 30px; left: 50%; z-index: 100105; } .find-box-head { background: #fff; border-bottom: 1px solid #dcdcde; height: 36px; font-size: 18px; font-weight: 600; line-height: 2; padding: 0 36px 0 16px; position: absolute; top: 0; left: 0; right: 0; } .find-box-inside { overflow: auto; padding: 16px; background-color: #fff; position: absolute; top: 37px; bottom: 45px; overflow-y: scroll; width: 100%; box-sizing: border-box; } .find-box-search { padding-bottom: 16px; } .find-box-search .spinner { float: none; left: 105px; position: absolute; } .find-box-search, #find-posts-response { position: relative; /* RTL fix, #WP28010 */ } #find-posts-input, #find-posts-search { float: left; } #find-posts-input { width: 140px; height: 28px; margin: 0 4px 0 0; } .widefat .found-radio { padding-right: 0; width: 16px; } #find-posts-close { width: 36px; height: 36px; border: none; padding: 0; position: absolute; top: 0; right: 0; cursor: pointer; text-align: center; background: none; color: #646970; } #find-posts-close:hover, #find-posts-close:focus { color: #135e96; } #find-posts-close:focus { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } #find-posts-close:before { font: normal 20px/36px dashicons; vertical-align: top; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f158"; } .find-box-buttons { padding: 8px 16px; background: #fff; border-top: 1px solid #dcdcde; position: absolute; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 782px) { .find-box-inside { bottom: 57px; } } @media screen and (max-width: 660px) { .find-box { top: 0; bottom: 0; left: 0; right: 0; margin: 0; width: 100%; } } .ui-find-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.7; filter: alpha(opacity=70); z-index: 100100; } .drag-drop #drag-drop-area { border: 4px dashed #c3c4c7; height: 200px; } .drag-drop .drag-drop-inside { margin: 60px auto 0; width: 250px; } .drag-drop-inside p { font-size: 14px; margin: 5px 0; display: none; } .drag-drop .drag-drop-inside p { text-align: center; } .drag-drop-inside p.drag-drop-info { font-size: 20px; } .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons { display: block; } /* #drag-drop-area:-moz-drag-over { border-color: #83b4d8; } border color while dragging a file over the uploader drop area */ .drag-drop.drag-over #drag-drop-area { border-color: #9ec2e6; } #plupload-upload-ui { position: relative; } .post-type-attachment .wp-filter select { margin: 0 6px 0 0; } /** * Media Library grid view */ .media-frame.mode-grid, .media-frame.mode-grid .media-frame-content, .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments, .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper, .media-frame.mode-grid .uploader-inline-content { position: static; } /* Regions we don't use at all */ .media-frame.mode-grid .media-frame-title, .media-frame.mode-grid .media-frame-router, .media-frame.mode-grid .media-frame-menu { display: none; } .media-frame.mode-grid .media-frame-content { background-color: transparent; border: none; } .upload-php .mode-grid .media-sidebar { position: relative; width: auto; margin-top: 12px; padding: 0 16px; border-left: 4px solid #d63638; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: #fff; } .upload-php .mode-grid .hide-sidebar .media-sidebar { display: none; } .upload-php .mode-grid .media-sidebar .media-uploader-status { border-bottom: none; padding-bottom: 0; max-width: 100%; } .upload-php .mode-grid .media-sidebar .upload-error { margin: 12px 0; padding: 4px 0 0; border: none; box-shadow: none; background: none; } .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 { display: none; } .media-frame.mode-grid .uploader-inline { position: relative; top: auto; right: auto; left: auto; bottom: auto; padding-top: 0; margin-top: 20px; border: 4px dashed #c3c4c7; } .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper { position: relative; top: 94px; /* prevent jumping up when the toolbar becomes fixed */ padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ } .media-frame.mode-grid .attachment:focus, .media-frame.mode-grid .selected.attachment:focus, .media-frame.mode-grid .attachment.details:focus { box-shadow: inset 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -6px; } .media-frame.mode-grid .selected.attachment { box-shadow: inset 0 0 0 5px #f0f0f1, inset 0 0 0 7px #c3c4c7; } .media-frame.mode-grid .attachment.details { box-shadow: inset 0 0 0 3px #f0f0f1, inset 0 0 0 7px #4f94d4; } .media-frame.mode-grid.mode-select .attachment .thumbnail { opacity: 0.65; } .media-frame.mode-select .attachment.selected .thumbnail { opacity: 1; } .media-frame.mode-grid .media-toolbar { margin-bottom: 15px; height: auto; } .media-frame.mode-grid .media-toolbar select { margin: 0 10px 0 0; } .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { margin: 0 8px 0 0; vertical-align: middle; } .media-frame.mode-grid .attachments-browser .bulk-select { display: inline-block; margin: 0 10px 0 0; } .media-frame.mode-grid .search { margin-top: 0; } .media-frame-content .media-search-input-label { vertical-align: baseline; } .attachments-browser .media-toolbar-secondary > .media-button { margin-right: 10px; } .media-frame.mode-select .attachments-browser.fixed .media-toolbar { position: fixed; top: 32px; left: auto; right: 20px; margin-top: 0; } .media-frame.mode-grid .attachments-browser { padding: 0; } .media-frame.mode-grid .attachments-browser .attachments { padding: 2px; } .media-frame.mode-grid .attachments-browser .no-media { color: #646970; /* same as no plugins and no themes */ font-size: 18px; font-style: normal; margin: 0; padding: 100px 0 0; text-align: center; } /** * Attachment details modal */ .edit-attachment-frame { display: block; height: 100%; width: 100%; } .edit-attachment-frame .edit-media-header { overflow: hidden; } .upload-php .media-modal-close .media-modal-icon:before { content: "\f335"; font-size: 22px; } .upload-php .media-modal-close, .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { cursor: pointer; color: #787c82; background-color: transparent; height: 50px; width: 50px; padding: 0; position: absolute; text-align: center; border: 0; border-left: 1px solid #dcdcde; transition: color .1s ease-in-out, background .1s ease-in-out; } .upload-php .media-modal-close { top: 0; right: 0; } .edit-attachment-frame .edit-media-header .left { right: 102px; } .edit-attachment-frame .edit-media-header .right { right: 51px; } .edit-attachment-frame .media-frame-title { left: 0; right: 150px; /* leave space for prev/next/close */ } .edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .left:before { font: normal 20px/50px dashicons !important; display: inline; font-weight: 300; } .upload-php .media-modal-close:hover, .upload-php .media-modal-close:focus, .edit-attachment-frame .edit-media-header .left:hover, .edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .left:focus, .edit-attachment-frame .edit-media-header .right:focus { background: #dcdcde; border-color: #c3c4c7; color: #000; outline: none; box-shadow: none; } .upload-php .media-modal-close:focus, .edit-attachment-frame .edit-media-header .left:focus, .edit-attachment-frame .edit-media-header .right:focus { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } .upload-php .media-modal-close:focus .media-modal-icon:before, .upload-php .media-modal-close:hover .media-modal-icon:before { color: #000; } .edit-attachment-frame .edit-media-header .left:before { content: "\f341"; } .edit-attachment-frame .edit-media-header .right:before { content: "\f345"; } .edit-attachment-frame .edit-media-header [disabled], .edit-attachment-frame .edit-media-header [disabled]:hover { color: #c3c4c7; background: inherit; cursor: default; } .edit-attachment-frame .media-frame-content, .edit-attachment-frame .media-frame-router { left: 0; } .edit-attachment-frame .media-frame-content { border-bottom: none; bottom: 0; top: 50px; } .edit-attachment-frame .attachment-details { position: absolute; overflow: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); } .edit-attachment-frame .attachment-media-view { float: left; width: 65%; height: 100%; } .edit-attachment-frame .attachment-media-view .thumbnail { box-sizing: border-box; padding: 16px; height: 100%; } .edit-attachment-frame .attachment-media-view .details-image { display: block; margin: 0 auto 16px; max-width: 100%; max-height: 90%; max-height: calc( 100% - 42px ); /* leave space for actions underneath */ background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .edit-attachment-frame .attachment-media-view .details-image.icon { background: none; } .edit-attachment-frame .attachment-media-view .attachment-actions { text-align: center; } .edit-attachment-frame .wp-media-wrapper { margin-bottom: 12px; } .edit-attachment-frame input, .edit-attachment-frame textarea { padding: 4px 8px; line-height: 1.42857143; } .edit-attachment-frame .attachment-info { overflow: auto; box-sizing: border-box; margin-bottom: 0; padding: 12px 16px 0; width: 35%; height: 100%; box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); border-bottom: 0; border-left: 1px solid #dcdcde; background: #f6f7f7; } .edit-attachment-frame .attachment-info .details, .edit-attachment-frame .attachment-info .settings { position: relative; /* RTL fix, #WP29352 */ overflow: hidden; float: none; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #dcdcde; } .edit-attachment-frame .attachment-info .filename { font-weight: 400; color: #646970; } .edit-attachment-frame .attachment-info .thumbnail { margin-bottom: 12px; } .attachment-info .actions { margin-bottom: 16px; } .attachment-info .actions a { display: inline; text-decoration: none; } .copy-to-clipboard-container { display: flex; align-items: center; margin-top: 8px; clear: both; } .copy-to-clipboard-container .copy-attachment-url { white-space: normal; } .copy-to-clipboard-container .success { color: #007017; margin-left: 8px; } /*------------------------------------------------------------------------------ 14.2 - Image Editor ------------------------------------------------------------------------------*/ .wp_attachment_details .attachment-alt-text { margin-bottom: 5px; } .wp_attachment_details #attachment_alt { max-width: 500px; height: 3.28571428em; } .wp_attachment_details .attachment-alt-text-description { margin-top: 5px; } .wp_attachment_details label[for="content"] { font-size: 13px; line-height: 1.5; margin: 1em 0; } .wp_attachment_details #attachment_caption { height: 4em; } .describe .image-editor { vertical-align: top; } .imgedit-wrap { position: relative; padding-top: 10px; } .image-editor p, .image-editor fieldset { margin: 8px 0; } .image-editor legend { margin-bottom: 5px; } .describe .imgedit-wrap .image-editor { padding: 0 5px; } .wp_attachment_holder div.updated { margin-top: 0; } .wp_attachment_holder .imgedit-wrap > div { height: auto; } .imgedit-panel-content { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .imgedit-settings { max-width: 240px; /* Prevent reflow when help info is expanded. */ } .imgedit-group-controls > * { display: none; } .imgedit-panel-active .imgedit-group-controls > * { display: block; } .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply { display: flex; } .imgedit-crop-apply { gap: 4px; flex-wrap: wrap; } .wp_attachment_holder .imgedit-wrap .image-editor { float: right; width: 250px; } .image-editor input { margin-top: 0; vertical-align: middle; } .imgedit-wait { position: absolute; top: 0; bottom: 0; width: 100%; background: #fff; opacity: 0.7; filter: alpha(opacity=70); display: none; } .imgedit-wait:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; background: transparent url(../images/spinner.gif) no-repeat center; background-size: 20px 20px; transform: translateZ(0); } .no-float { float: none; } .media-disabled, .image-editor .disabled { /* WCAG 1.4.3 Text or images of text that are part of an inactive user interface component ... have no contrast requirement. */ color: #a7aaad; } .A1B1 { overflow: hidden; } .wp_attachment_image .button, .A1B1 .button { float: left; } .no-js .wp_attachment_image .button { display: none; } .wp_attachment_image .spinner, .A1B1 .spinner { float: left; } .imgedit-menu .note-no-rotate { clear: both; margin: 0; padding: 1em 0 0; } .image-editor .imgedit-menu .button { display: inline-block; width: auto; min-height: 28px; font-size: 13px; line-height: 2; padding: 0 10px; } .imgedit-menu .button:after, .imgedit-menu .button:before { font: normal 16px/1 dashicons; margin-right: 8px; speak: never; vertical-align: middle; position: relative; top: -2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .imgedit-menu .imgedit-rotate.button:after { content: '\f140'; margin-left: 2px; margin-right: 0; } .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after { content: '\f142'; } .imgedit-menu .button.disabled { color: #a7aaad; border-color: #dcdcde; background: #f6f7f7; box-shadow: none; text-shadow: 0 1px 0 #fff; cursor: default; transform: none; } .imgedit-crop:before { content: "\f165"; } .imgedit-scale:before { content: "\f211"; } .imgedit-rotate:before { content: "\f167"; } .imgedit-undo:before { content: "\f171"; } .imgedit-redo:before { content: "\f172"; } .imgedit-crop-wrap { position: relative; } .imgedit-crop-wrap img { background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .imgedit-crop-wrap { padding: 20px; background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .imgedit-crop { margin: 0 8px 0 0; } .imgedit-rotate { margin: 0 8px 0 3px; } .imgedit-undo { margin: 0 3px; } .imgedit-redo { margin: 0 8px 0 3px; } .imgedit-thumbnail-preview-group { display: flex; flex-wrap: wrap; column-gap: 10px; } .imgedit-thumbnail-preview { margin: 10px 8px 0 0; } .imgedit-thumbnail-preview-caption { display: block; } #poststuff .imgedit-group-top h2 { display: inline-block; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; } #poststuff .imgedit-group-top .button-link { text-decoration: none; color: #1d2327; } .imgedit-applyto .imgedit-label { display: block; padding: .5em 0 0; } .imgedit-popup-menu, .imgedit-help { display: none; padding-bottom: 8px; } .imgedit-panel-tools > .imgedit-menu { display: flex; column-gap: 4px; align-items: flex-start; flex-wrap: wrap; } .imgedit-popup-menu { width: calc( 100% - 20px ); position: absolute; background: #fff; padding: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } .image-editor .imgedit-menu .imgedit-popup-menu button { display: block; margin: 2px 0; width: 100%; white-space: break-spaces; line-height: 1.5; padding-top: 3px; padding-bottom: 2px; } .imgedit-rotate-menu-container { position: relative; } .imgedit-help.imgedit-restore { padding-bottom: 0; } /* higher specificity than buttons */ .image-editor .imgedit-settings .imgedit-help-toggle, .image-editor .imgedit-settings .imgedit-help-toggle:hover, .image-editor .imgedit-settings .imgedit-help-toggle:active { border: 1px solid transparent; margin: -1px 0 0 -1px; padding: 0; background: transparent; color: #2271b1; font-size: 20px; line-height: 1; cursor: pointer; box-sizing: content-box; box-shadow: none; } .image-editor .imgedit-settings .imgedit-help-toggle:focus { color: #2271b1; border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .form-table td.imgedit-response { padding: 0; } .imgedit-submit-btn { margin-left: 20px; } .imgedit-wrap .nowrap { white-space: nowrap; font-size: 12px; line-height: inherit; } span.imgedit-scale-warn { display: flex; align-items: center; margin: 4px; gap: 4px; color: #b32d2e; font-style: normal; visibility: hidden; vertical-align: middle; } .imgedit-save-target { margin: 8px 0; } .imgedit-save-target legend { font-weight: 600; } .imgedit-group { margin-bottom: 20px; } .image-editor .imgedit-original-dimensions { display: inline-block; } .image-editor .imgedit-scale-controls input[type="text"], .image-editor .imgedit-crop-ratio input[type="text"], .image-editor .imgedit-crop-sel input[type="text"], .image-editor .imgedit-scale-controls input[type="number"], .image-editor .imgedit-crop-ratio input[type="number"], .image-editor .imgedit-crop-sel input[type="number"] { width: 80px; font-size: 14px; padding: 0 8px; } .imgedit-separator { display: inline-block; width: 7px; text-align: center; font-size: 13px; color: #3c434a; } .image-editor .imgedit-scale-button-wrapper { margin-top: 0.3077em; display: block; } .image-editor .imgedit-scale-controls .button { margin-bottom: 0; } audio, video { display: inline-block; max-width: 100%; } .wp-core-ui .mejs-container { width: 100%; max-width: 100%; } .wp-core-ui .mejs-container * { box-sizing: border-box; } .wp-core-ui .mejs-time { box-sizing: content-box; } /* =Media Queries -------------------------------------------------------------- */ /** * HiDPI Displays */ @media print, (min-resolution: 120dpi) { .imgedit-wait:before { background-image: url(../images/spinner-2x.gif); } } @media screen and (max-width: 782px) { .edit-attachment-frame input, .edit-attachment-frame textarea { line-height: 1.5; } .wp_attachment_details label[for="content"] { font-size: 14px; line-height: 1.5; } .wp_attachment_details textarea { line-height: 1.5; } .wp_attachment_details #attachment_alt { height: 3.375em; } .media-upload-form .media-item.error, .media-upload-form .media-item .error { font-size: 13px; line-height: 1.5; } .media-upload-form .media-item.error { padding: 1px 10px; } .media-upload-form .media-item .error { padding: 10px 0 10px 12px; } .image-editor .imgedit-scale input[type="text"], .image-editor .imgedit-crop-ratio input[type="text"], .image-editor .imgedit-crop-sel input[type="text"] { font-size: 16px; padding: 6px 10px; } .wp_attachment_holder .imgedit-wrap .imgedit-panel-content, .wp_attachment_holder .imgedit-wrap .image-editor { float: none; width: auto; max-width: none; padding-bottom: 16px; } .copy-to-clipboard-container .success { font-size: 14px; } /* Restructure image editor on narrow viewports. */ .imgedit-crop-wrap img{ width: 100%; } .media-modal .imgedit-wrap .imgedit-panel-content, .media-modal .imgedit-wrap .image-editor { position: initial !important; } .media-modal .imgedit-wrap .image-editor { box-sizing: border-box; width: 100% !important; } .image-editor .imgedit-scale-button-wrapper { display: inline-block; } } @media only screen and (max-width: 600px) { .media-item-wrapper { grid-template-columns: 1fr; } } /** * Media queries for media grid. */ @media only screen and (max-width: 1120px) { /* override for media-views.css */ #wp-media-grid .wp-filter .attachment-filters { max-width: 100%; } } @media only screen and (max-width: 1000px) { /* override for forms.css */ .wp-filter p.search-box { float: none; width: 100%; margin-bottom: 20px; display: flex; flex-wrap: nowrap; column-gap: 0; } .wp-filter p.search-box #media-search-input { width: 100%; } } @media only screen and (max-width: 782px) { .media-frame.mode-select .attachments-browser.fixed .media-toolbar { top: 46px; right: 10px; } } @media only screen and (max-width: 600px) { .media-frame.mode-select .attachments-browser.fixed .media-toolbar { top: 0; } } @media only screen and (max-width: 480px) { .edit-attachment-frame .media-frame-title { right: 110px; } .upload-php .media-modal-close, .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { width: 40px; height: 40px; } .edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .left:before { line-height: 40px !important; } .edit-attachment-frame .edit-media-header .left { right: 82px; } .edit-attachment-frame .edit-media-header .right { right: 41px; } .edit-attachment-frame .media-frame-content { top: 40px; } .edit-attachment-frame .attachment-media-view { float: none; height: auto; width: 100%; } .edit-attachment-frame .attachment-info { height: auto; width: 100%; } } @media only screen and (max-width: 640px), screen and (max-height: 400px) { .upload-php .mode-grid .media-sidebar{ max-width: 100%; } } @media only screen and (max-width: 375px) { .media-item .attachment-tools { align-items: baseline; } .media-item .edit-attachment.copy-to-clipboard-container { flex-direction: column; } .copy-to-clipboard-container .success { line-height: normal; margin-top: 10px; } } /* @import themes.css */ /*------------------------------------------------------------------------------ 16.0 - Themes ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ 16.1 - Manage Themes ------------------------------------------------------------------------------*/ .themes-php { overflow-y: scroll; } .themes-php #adminmenuwrap { z-index: 10001; /* above Theme Overlay */ } body.js .theme-browser.search-loading { display: none; } .theme-browser .themes { clear: both; } .themes-php .wrap h1 .button { margin-left: 20px; } /* Search form */ .themes-php .search-form { display: inline-flex; align-items: center; position: relative; top: 0; gap: .5rem; width: 100%; justify-content: end; } .themes-php .wp-filter-search { position: relative; margin: 0; width: 280px; } /* Position admin messages */ .theme .notice, .theme .notice.is-dismissible { left: 0; margin: 0; position: absolute; right: 0; top: 0; } /** * Main theme element * (has flexible margins) */ .theme-browser .theme { cursor: pointer; float: left; margin: 0 4% 4% 0; position: relative; width: 30.6%; border: 1px solid #dcdcde; box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-sizing: border-box; } .theme-browser .theme:nth-child(3n) { margin-right: 0; } .theme-browser .theme:hover, .theme-browser .theme.focus { cursor: pointer; } .theme-browser .theme .theme-name { font-size: 15px; font-weight: 600; height: 18px; margin: 0; padding: 15px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #fff; background: rgba(255, 255, 255, 0.65); } /* Activate and Customize buttons, shown on hover and focus */ .theme-browser .theme .theme-actions { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: opacity 0.1s ease-in-out; height: auto; background: rgba(246, 247, 247, 0.7); border-left: 1px solid rgba(0, 0, 0, 0.05); } .theme-browser .theme:hover .theme-actions, .theme-browser .theme.focus .theme-actions { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .theme-browser .theme .theme-actions .button-primary { margin-right: 3px; } .theme-browser .theme .theme-actions .button { float: none; margin-left: 3px; } /** * Theme Screenshot * * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size * It is also responsive. */ .theme-browser .theme .theme-screenshot { display: block; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ transition: opacity 0.2s ease-in-out; } .theme-browser .theme .theme-screenshot:after { content: ""; display: block; padding-top: 66.66666%; /* using a 3/2 aspect ratio */ } .theme-browser .theme .theme-screenshot img { height: auto; position: absolute; left: 0; top: 0; width: 100%; transition: opacity 0.2s ease-in-out; } .theme-browser .theme:hover .theme-screenshot, .theme-browser .theme.focus .theme-screenshot { background: #fff; } .theme-browser.rendered .theme:hover .theme-screenshot img, .theme-browser.rendered .theme.focus .theme-screenshot img { opacity: 0.4; } .theme-browser .theme .more-details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 35%; right: 20%; left: 20%; width: 60%; background: #1d2327; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); -webkit-font-smoothing: antialiased; font-weight: 600; padding: 15px 12px; text-align: center; border-radius: 3px; border: none; transition: opacity 0.1s ease-in-out; cursor: pointer; } .theme-browser .theme .more-details:focus { box-shadow: 0 0 0 2px #2271b1; } .theme-browser .theme.focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .theme-browser .theme.focus .more-details { opacity: 1; } /* Current theme needs to have its action always on view */ .theme-browser .theme.active.focus .theme-actions { display: block; } .theme-browser.rendered .theme:hover .more-details, .theme-browser.rendered .theme.focus .more-details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } /** * The currently active theme */ .theme-browser .theme.active .theme-name { background: #1d2327; color: #fff; padding-right: 110px; font-weight: 300; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); } .theme-browser .customize-control .theme.active .theme-name { padding-right: 15px; } .theme-browser .theme.active .theme-name span { font-weight: 600; } .theme-browser .theme.active .theme-actions { background: rgba(44, 51, 56, 0.7); border-left: none; opacity: 1; } .theme-id-container { position: relative; } .theme-browser .theme.active .theme-actions, .theme-browser .theme .theme-actions { position: absolute; top: 50%; transform: translateY(-50%); right: 0; padding: 9px 15px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); } .theme-browser .theme.active .theme-actions .button-primary { margin-right: 0; } .theme-browser .theme .theme-author { background: #1d2327; color: #f0f0f1; display: none; font-size: 14px; margin: 0 10px; padding: 5px 10px; position: absolute; bottom: 56px; } .theme-browser .theme.display-author .theme-author { display: block; } .theme-browser .theme.display-author .theme-author a { color: inherit; } /** * Add new theme */ .theme-browser .theme.add-new-theme { border: none; box-shadow: none; } .theme-browser .theme.add-new-theme a { text-decoration: none; display: block; position: relative; z-index: 1; } .theme-browser .theme.add-new-theme a:after { display: block; content: ""; background: transparent; background: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; text-shadow: none; border: 5px dashed #dcdcde; border: 5px dashed rgba(0, 0, 0, 0.1); box-sizing: border-box; } .theme-browser .theme.add-new-theme span:after { background: #dcdcde; background: rgba(140, 143, 148, 0.1); border-radius: 50%; display: inline-block; content: "\f132"; -webkit-font-smoothing: antialiased; font: normal 74px/115px dashicons; width: 100px; height: 100px; vertical-align: middle; text-align: center; color: #8c8f94; position: absolute; top: 30%; left: 50%; margin-left: -50px; text-indent: -4px; padding: 0; text-shadow: none; z-index: 4; } .rtl .theme-browser .theme.add-new-theme span:after { text-indent: 4px; } .theme-browser .theme.add-new-theme a:hover .theme-screenshot, .theme-browser .theme.add-new-theme a:focus .theme-screenshot { background: none; } .theme-browser .theme.add-new-theme a:hover span:after, .theme-browser .theme.add-new-theme a:focus span:after { background: #fff; color: #2271b1; } .theme-browser .theme.add-new-theme a:hover:after, .theme-browser .theme.add-new-theme a:focus:after { border-color: transparent; color: #fff; background: #2271b1; content: ""; } .theme-browser .theme.add-new-theme .theme-name { background: none; text-align: center; box-shadow: none; font-weight: 400; position: relative; top: 0; margin-top: -18px; padding-top: 0; padding-bottom: 48px; } .theme-browser .theme.add-new-theme a:hover .theme-name, .theme-browser .theme.add-new-theme a:focus .theme-name { color: #fff; z-index: 2; } /** * Theme Overlay * Shown when clicking a theme */ .theme-overlay .theme-backdrop { position: absolute; left: -20px; right: 0; top: 0; bottom: 0; background: #f0f0f1; background: rgba(240, 240, 241, 0.9); z-index: 10000; /* Over WP Pointers. */ min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); } .theme-overlay .theme-header { position: absolute; top: 0; left: 0; right: 0; height: 48px; border-bottom: 1px solid #dcdcde; } .theme-overlay .theme-header button { padding: 0; } .theme-overlay .theme-header .close { cursor: pointer; height: 48px; width: 50px; text-align: center; float: right; border: 0; border-left: 1px solid #dcdcde; background-color: transparent; transition: color .1s ease-in-out, background .1s ease-in-out; } .theme-overlay .theme-header .close:before { font: normal 22px/50px dashicons !important; color: #787c82; display: inline-block; content: "\f335"; font-weight: 300; } /* Left and right navigation */ .theme-overlay .theme-header .right, .theme-overlay .theme-header .left { cursor: pointer; color: #787c82; background-color: transparent; height: 48px; width: 54px; float: left; text-align: center; border: 0; border-right: 1px solid #dcdcde; transition: color .1s ease-in-out, background .1s ease-in-out; } .theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .left:focus, .theme-overlay .theme-header .left:hover { background: #dcdcde; border-color: #c3c4c7; color: #000; } .theme-overlay .theme-header .close:focus:before, .theme-overlay .theme-header .close:hover:before { color: #000; } .theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .left:focus { box-shadow: none; outline: none; } .theme-overlay .theme-header .left.disabled, .theme-overlay .theme-header .right.disabled, .theme-overlay .theme-header .left.disabled:hover, .theme-overlay .theme-header .right.disabled:hover { color: #c3c4c7; background: inherit; cursor: inherit; } .theme-overlay .theme-header .right:before, .theme-overlay .theme-header .left:before { font: normal 20px/50px dashicons !important; display: inline; font-weight: 300; } .theme-overlay .theme-header .left:before { content: "\f341"; } .theme-overlay .theme-header .right:before { content: "\f345"; } .theme-overlay .theme-wrap { clear: both; position: fixed; top: 9%; left: 190px; right: 30px; bottom: 3%; background: #fff; box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); z-index: 10000; /* Over WP Pointers. */ box-sizing: border-box; -webkit-overflow-scrolling: touch; } body.folded .theme-browser ~ .theme-overlay .theme-wrap { left: 70px; } .theme-overlay .theme-about { position: absolute; top: 49px; bottom: 57px; left: 0; right: 0; overflow: auto; padding: 2% 4%; } .theme-overlay .theme-actions { position: absolute; text-align: center; bottom: 0; left: 0; right: 0; padding: 10px 25px 5px; background: #f6f7f7; z-index: 30; box-sizing: border-box; border-top: 1px solid #f0f0f1; display: flex; justify-content: center; gap: 5px; } .theme-overlay .theme-actions .button { margin-bottom: 5px; } /* Hide-if-customize for items we can't add classes to */ .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { display: none; } .broken-themes a.delete-theme, .theme-overlay .theme-actions .delete-theme { color: #b32d2e; text-decoration: none; border-color: transparent; box-shadow: none; background: transparent; } .broken-themes a.delete-theme:hover, .broken-themes a.delete-theme:focus, .theme-overlay .theme-actions .delete-theme:hover, .theme-overlay .theme-actions .delete-theme:focus { background: #b32d2e; color: #fff; border-color: #b32d2e; box-shadow: 0 0 0 1px #b32d2e; } .theme-overlay .theme-actions .active-theme, .theme-overlay.active .theme-actions .inactive-theme { display: none; } .theme-overlay .theme-actions .inactive-theme, .theme-overlay.active .theme-actions .active-theme { display: block; } /** * Theme Screenshots gallery */ .theme-overlay .theme-screenshots { float: left; margin: 0 30px 0 0; width: 55%; max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */ text-align: center; } /* First screenshot, shown big */ .theme-overlay .screenshot { border: 1px solid #fff; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } .theme-overlay .screenshot:after { content: ""; display: block; padding-top: 75%; /* using a 4/3 aspect ratio */ } .theme-overlay .screenshot img { height: auto; position: absolute; left: 0; top: 0; width: 100%; } /* Handles old 300px screenshots */ .theme-overlay.small-screenshot .theme-screenshots { position: absolute; width: 302px; } .theme-overlay.small-screenshot .theme-info { margin-left: 350px; width: auto; } /* Other screenshots, shown small and square */ .theme-overlay .screenshot.thumb { background: #c3c4c7; border: 1px solid #f0f0f1; float: none; display: inline-block; margin: 10px 5px 0; width: 140px; height: 80px; cursor: pointer; } .theme-overlay .screenshot.thumb:after { content: ""; display: block; padding-top: 100%; /* using a 1/1 aspect ratio */ } .theme-overlay .screenshot.thumb img { cursor: pointer; height: auto; position: absolute; left: 0; top: 0; width: 100%; height: auto; } .theme-overlay .screenshot.selected { background: transparent; border: 2px solid #72aee6; } .theme-overlay .screenshot.selected img { opacity: 0.8; } /* No screenshot placeholder */ .theme-browser .theme .theme-screenshot.blank, .theme-overlay .screenshot.blank { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); } /** * Theme heading information */ .theme-overlay .theme-info { width: 40%; float: left; } .theme-overlay .current-label { background: #2c3338; color: #fff; font-size: 11px; display: inline-block; padding: 2px 8px; border-radius: 2px; margin: 0 0 -10px; -webkit-user-select: none; user-select: none; } .theme-overlay .theme-name { color: #1d2327; font-size: 32px; font-weight: 100; margin: 10px 0 0; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; } .theme-overlay .theme-version { color: #646970; font-size: 13px; font-weight: 400; float: none; display: inline-block; margin-left: 10px; } .theme-overlay .theme-author { margin: 15px 0 25px; color: #646970; font-size: 16px; font-weight: 400; line-height: inherit; } .theme-overlay .toggle-auto-update { /* Better align spin icon and text. */ display: inline-flex; align-items: center; /* Prevents content after the auto-update toggler from jumping down and up. */ min-height: 20px; /* Same height as the spinning dashicon. */ vertical-align: top; } .theme-overlay .theme-autoupdate .toggle-auto-update { text-decoration: none; } .theme-overlay .theme-autoupdate .toggle-auto-update .label { text-decoration: underline; } .theme-overlay .theme-description { color: #50575e; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 30px 0 0; } .theme-overlay .theme-tags { border-top: 3px solid #f0f0f1; color: #646970; font-size: 13px; font-weight: 400; margin: 30px 0 0; padding-top: 20px; } .theme-overlay .theme-tags span { color: #3c434a; font-weight: 600; margin-right: 5px; } .theme-overlay .parent-theme { background: #fff; border: 1px solid #f0f0f1; border-left: 4px solid #72aee6; font-size: 14px; font-weight: 400; margin-top: 30px; padding: 10px 10px 10px 20px; } .theme-overlay .parent-theme strong { font-weight: 600; } /** * Single Theme Mode * Displays detailed view inline when a user has no switch capabilities */ .single-theme .theme-overlay .theme-backdrop, .single-theme .theme-overlay .theme-header, .single-theme .theme { display: none; } .single-theme .theme-overlay .theme-wrap { clear: both; min-height: 330px; position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 10; } .single-theme .theme-overlay .theme-about { padding: 30px 30px 70px; position: static; } .single-theme .theme-overlay .theme-actions { position: absolute; } /** * Basic Responsive structure... * * Shuffles theme columns around based on screen width */ @media only screen and (min-width: 2000px) { #wpwrap .theme-browser .theme { width: 17.6%; margin: 0 3% 3% 0; } #wpwrap .theme-browser .theme:nth-child(3n), #wpwrap .theme-browser .theme:nth-child(4n) { margin-right: 3%; } #wpwrap .theme-browser .theme:nth-child(5n) { margin-right: 0; } } @media only screen and (min-width: 1680px) { .theme-overlay .theme-wrap { width: 1450px; margin: 0 auto; } } /* Maximum screenshot width reaches 440px */ @media only screen and (min-width: 1640px) { .theme-browser .theme { width: 22.7%; margin: 0 3% 3% 0; } .theme-browser .theme .theme-screenshot:after { padding-top: 75%; /* using a 4/3 aspect ratio */ } .theme-browser .theme:nth-child(3n) { margin-right: 3%; } .theme-browser .theme:nth-child(4n) { margin-right: 0; } } /* Maximum screenshot width reaches 440px */ @media only screen and (max-width: 1120px) { .theme-browser .theme { width: 47.5%; margin-right: 0; } .theme-browser .theme:nth-child(even) { margin-right: 0; } .theme-browser .theme:nth-child(odd) { margin-right: 5%; } } /* Admin menu is folded */ @media only screen and (max-width: 960px) { .theme-overlay .theme-wrap { left: 65px; } } @media only screen and (max-width: 782px) { body.folded .theme-overlay .theme-wrap, .theme-overlay .theme-wrap { top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ right: 0; bottom: 0; left: 0; padding: 70px 20px 20px; border: none; z-index: 100000; /* should overlap #wpadminbar. */ position: fixed; } .theme-browser .theme.active .theme-name span { /* Hide the "Active: " label on smaller screens. */ display: none; } .theme-overlay .theme-screenshots { width: 40%; } .theme-overlay .theme-info { width: 50%; } .single-theme .theme-wrap { padding: 10px; } .theme-browser .theme .theme-actions { padding: 5px 10px 4px; } .theme-overlay.small-screenshot .theme-screenshots { position: static; float: none; max-width: 302px; } .theme-overlay.small-screenshot .theme-info { margin-left: 0; width: auto; } .theme:not(.active):hover .theme-actions, .theme:not(.active):focus .theme-actions, .theme:hover .more-details, .theme.focus .more-details { display: none; } .theme-browser.rendered .theme:hover .theme-screenshot img, .theme-browser.rendered .theme.focus .theme-screenshot img { opacity: 1.0; } } @media only screen and (max-width: 480px) { .theme-browser .theme { width: 100%; margin-right: 0; } .theme-browser .theme:nth-child(2n), .theme-browser .theme:nth-child(3n) { margin-right: 0; } .theme-overlay .theme-about { bottom: 105px; } .theme-overlay .theme-actions { padding-left: 4%; padding-right: 4%; } .theme-install-php .wp-filter .filter-count { margin-top: 10px; } } @media only screen and (max-width: 650px) { .theme-overlay .theme-description { margin-left: 0; } .theme-overlay .theme-actions .delete-theme { position: relative; right: auto; bottom: auto; } .theme-overlay .theme-actions .inactive-theme { display: inline; } .theme-overlay .theme-screenshots { width: 100%; float: none; margin: 0; } .theme-overlay .theme-info { width: 100%; } .theme-overlay .theme-author { margin: 5px 0 15px; } .theme-overlay .current-label { margin-top: 10px; font-size: 13px; } .themes-php .wp-filter-search { float: none; clear: both; left: 0; right: 0; width: 100%; max-width: 280px; } .theme-install-php .wp-filter p.search-box { display: grid; row-gap: .5rem; } .theme-browser .theme.add-new-theme span:after { font: normal 60px/90px dashicons; width: 80px; height: 80px; top: 30%; left: 50%; text-indent: 0; margin-left: -40px; } .single-theme .theme-wrap { margin: 0 -12px 0 -10px; padding: 10px; } .single-theme .theme-overlay .theme-about { padding: 10px; overflow: visible; } .single-theme .current-label { display: none; } .single-theme .theme-overlay .theme-actions { position: static; } } .broken-themes { clear: both; } .broken-themes table { text-align: left; width: 50%; border-spacing: 3px; padding: 3px; } /*------------------------------------------------------------------------------ 16.2 - Install Themes ------------------------------------------------------------------------------*/ .update-php .wrap { max-width: 40rem; } /* Already installed theme */ .theme-browser .theme .theme-installed { background: #2271b1; } .theme-browser .theme .notice-success p:before { color: #68de7c; content: "\f147"; display: inline-block; font: normal 20px/1 'dashicons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; } .theme-install.updated-message:before { content: ""; } .theme-install-php .wp-filter { padding-left: 20px; } /* Override column gap adjustment in media library. */ @media only screen and (max-width: 1000px) { .theme-install-php .wp-filter p.search-box { column-gap: .5rem; } } .theme-install-php a.upload, .theme-install-php a.browse-themes { cursor: pointer; } .upload-view-toggle .browse, .plugin-install-tab-upload .upload-view-toggle .upload { display: none; } .plugin-install-tab-upload .upload-view-toggle .browse { display: inline; } .upload-theme, .upload-plugin { box-sizing: border-box; display: none; margin: 0; padding: 50px 0; width: 100%; overflow: hidden; position: relative; top: 10px; text-align: center; } .show-upload-view .upload-theme, .show-upload-view .upload-plugin, .show-upload-view .upload-plugin-wrap, .plugin-install-tab-upload .upload-plugin { display: block; } .upload-theme .wp-upload-form, .upload-plugin .wp-upload-form { background: #f6f7f7; border: 1px solid #c3c4c7; padding: 30px; margin: 30px auto; display: inline-flex; justify-content: space-between; align-items: center; } .upload-theme .wp-upload-form input[type="file"], .upload-plugin .wp-upload-form input[type="file"] { margin-right: 10px; } .upload-theme .install-help, .upload-plugin .install-help { color: #50575e; /* #f1f1f1 background */ font-size: 18px; font-style: normal; margin: 0; padding: 0; text-align: center; } p.no-themes, p.no-themes-local { clear: both; color: #646970; font-size: 18px; font-style: normal; margin: 0; padding: 100px 0; text-align: center; display: none; } .no-results p.no-themes { display: block; } .theme-install-php .add-new-theme { display: none !important; } @media only screen and (max-width: 1120px) { .upload-theme .wp-upload-form { margin: 20px 0; max-width: 100%; } .upload-theme .install-help { font-size: 15px; padding: 20px 0 0; } } .theme-details .theme-rating { line-height: 1.9; } .theme-details .star-rating { display: inline; } .theme-details .num-ratings, .theme-details .no-rating { font-size: 11px; color: #646970; } .theme-details .no-rating { display: block; line-height: 1.9; } .update-from-upload-comparison { border-top: 1px solid #dcdcde; border-bottom: 1px solid #dcdcde; text-align: left; margin: 1rem 0 1.4rem; border-collapse: collapse; width: 100%; } .update-from-upload-comparison tr:last-child td { height: 1.4rem; vertical-align: top; } .update-from-upload-comparison tr:first-child th { font-weight: bold; height: 1.4rem; vertical-align: bottom; } .update-from-upload-comparison td.name-label { text-align: right; } .update-from-upload-comparison td, .update-from-upload-comparison th { padding: 0.4rem 1.4rem; } .update-from-upload-comparison td.warning { color: #d63638; } .update-from-upload-actions { margin-top: 1.4rem; } /*------------------------------------------------------------------------------ 16.3 - Custom Header Screen ------------------------------------------------------------------------------*/ .appearance_page_custom-header #headimg { border: 1px solid #dcdcde; overflow: hidden; width: 100%; } .appearance_page_custom-header #upload-form p label { font-size: 12px; } .appearance_page_custom-header .available-headers .default-header { float: left; margin: 0 20px 20px 0; } .appearance_page_custom-header .random-header { clear: both; margin: 0 20px 20px 0; vertical-align: middle; } .appearance_page_custom-header .available-headers label input, .appearance_page_custom-header .random-header label input { margin-right: 10px; } .appearance_page_custom-header .available-headers label img { vertical-align: middle; } /*------------------------------------------------------------------------------ 16.4 - Custom Background Screen ------------------------------------------------------------------------------*/ div#custom-background-image { min-height: 100px; border: 1px solid #dcdcde; } div#custom-background-image img { max-width: 400px; max-height: 300px; } .background-position-control input[type="radio"]:checked ~ .button { background: #f0f0f1; border-color: #8c8f94; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); z-index: 1; } .background-position-control input[type="radio"]:focus ~ .button { border-color: #4f94d4; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8); color: #1d2327; } .background-position-control .background-position-center-icon, .background-position-control .background-position-center-icon:before { display: inline-block; line-height: 1; text-align: center; transition: background-color .1s ease-in; } .background-position-control .background-position-center-icon { height: 20px; margin-top: 13px; vertical-align: top; width: 20px; } .background-position-control .background-position-center-icon:before { background-color: #50575e; border-radius: 50%; content: ""; height: 12px; width: 12px; } .background-position-control .button:hover .background-position-center-icon:before, .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { background-color: #1d2327; } .background-position-control .button-group { display: block; } .background-position-control .button-group .button { border-radius: 0; box-shadow: none; /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ height: 40px !important; line-height: 2.9 !important; margin: 0 -1px 0 0 !important; padding: 0 10px 1px !important; position: relative; } .background-position-control .button-group .button:active, .background-position-control .button-group .button:hover, .background-position-control .button-group .button:focus { z-index: 1; } .background-position-control .button-group:last-child .button { box-shadow: 0 1px 0 #c3c4c7; } .background-position-control .button-group > label { margin: 0 !important; } .background-position-control .button-group:first-child > label:first-child .button { border-radius: 3px 0 0; } .background-position-control .button-group:first-child > label:first-child .dashicons { transform: rotate( 45deg ); } .background-position-control .button-group:first-child > label:last-child .button { border-radius: 0 3px 0 0; } .background-position-control .button-group:first-child > label:last-child .dashicons { transform: rotate( -45deg ); } .background-position-control .button-group:last-child > label:first-child .button { border-radius: 0 0 0 3px; } .background-position-control .button-group:last-child > label:first-child .dashicons { transform: rotate( -45deg ); } .background-position-control .button-group:last-child > label:last-child .button { border-radius: 0 0 3px; } .background-position-control .button-group:last-child > label:last-child .dashicons { transform: rotate( 45deg ); } .background-position-control .button-group .dashicons { margin-top: 9px; } .background-position-control .button-group + .button-group { margin-top: -1px; } /*------------------------------------------------------------------------------ 23.0 - Full Overlay w/ Sidebar ------------------------------------------------------------------------------*/ body.full-overlay-active { overflow: hidden; /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */ visibility: hidden; } .wp-full-overlay { background: transparent; z-index: 500000; position: fixed; overflow: visible; top: 0; bottom: 0; left: 0; right: 0; height: 100%; min-width: 0; } .wp-full-overlay-sidebar { box-sizing: border-box; position: fixed; min-width: 300px; max-width: 600px; width: 18%; height: 100%; top: 0; bottom: 0; left: 0; padding: 0; margin: 0; z-index: 10; background: #f0f0f1; border-right: none; } .wp-full-overlay.collapsed .wp-full-overlay-sidebar { overflow: visible; } .wp-full-overlay.collapsed, .wp-full-overlay.expanded .wp-full-overlay-sidebar { margin-left: 0 !important; } .wp-full-overlay.expanded { margin-left: 300px; } .wp-full-overlay.collapsed .wp-full-overlay-sidebar { margin-left: -300px; } @media screen and (min-width: 1667px) { .wp-full-overlay.expanded { margin-left: 18%; } .wp-full-overlay.collapsed .wp-full-overlay-sidebar { margin-left: -18%; } } @media screen and (min-width: 3333px) { .wp-full-overlay.expanded { margin-left: 600px; } .wp-full-overlay.collapsed .wp-full-overlay-sidebar { margin-left: -600px; } } .wp-full-overlay-sidebar:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; z-index: 1000; } .wp-full-overlay-main { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 100%; } .wp-full-overlay-sidebar .wp-full-overlay-header { position: absolute; left: 0; right: 0; height: 45px; padding: 0 15px; line-height: 3.2; z-index: 10; margin: 0; border-top: none; box-shadow: none; } .wp-full-overlay-sidebar .wp-full-overlay-header a.back { margin-top: 9px; } .wp-full-overlay-sidebar .wp-full-overlay-footer { bottom: 0; border-bottom: none; border-top: none; box-shadow: none; } .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { position: absolute; top: 45px; bottom: 45px; left: 0; right: 0; overflow: auto; } /* Close & Navigation Links */ .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { padding: 0; } .theme-install-overlay .close-full-overlay, .theme-install-overlay .previous-theme, .theme-install-overlay .next-theme { display: block; position: relative; float: left; width: 45px; height: 45px; background: #f0f0f1; border-right: 1px solid #dcdcde; color: #3c434a; cursor: pointer; text-decoration: none; transition: color .1s ease-in-out, background .1s ease-in-out; } .theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus { background: #dcdcde; border-color: #c3c4c7; color: #000; outline: none; box-shadow: none; } .theme-install-overlay .close-full-overlay:before { font: normal 22px/1 dashicons; content: "\f335"; position: relative; top: 7px; left: 13px; } .theme-install-overlay .previous-theme:before { font: normal 20px/1 dashicons; content: "\f341"; position: relative; top: 6px; left: 14px; } .theme-install-overlay .next-theme:before { font: normal 20px/1 dashicons; content: "\f345"; position: relative; top: 6px; left: 13px; } .theme-install-overlay .previous-theme.disabled, .theme-install-overlay .next-theme.disabled, .theme-install-overlay .previous-theme.disabled:hover, .theme-install-overlay .previous-theme.disabled:focus, .theme-install-overlay .next-theme.disabled:hover, .theme-install-overlay .next-theme.disabled:focus { color: #c3c4c7; background: #f0f0f1; cursor: default; pointer-events: none; } .theme-install-overlay .close-full-overlay, .theme-install-overlay .previous-theme, .theme-install-overlay .next-theme { border-left: 0; border-top: 0; border-bottom: 0; } .theme-install-overlay .close-full-overlay:before, .theme-install-overlay .previous-theme:before, .theme-install-overlay .next-theme:before { top: 2px; left: 0; } /* Collapse Button */ .wp-core-ui .wp-full-overlay .collapse-sidebar { position: fixed; bottom: 0; left: 0; padding: 9px 0 9px 10px; height: 45px; color: #646970; outline: 0; line-height: 1; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { color: #2271b1; } .wp-full-overlay .collapse-sidebar-arrow, .wp-full-overlay .collapse-sidebar-label { display: inline-block; vertical-align: middle; line-height: 1.6; } .wp-full-overlay .collapse-sidebar-arrow { width: 20px; height: 20px; margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ border-radius: 50%; overflow: hidden; } .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .wp-full-overlay .collapse-sidebar-label { margin-left: 3px; } .wp-full-overlay.collapsed .collapse-sidebar-label { display: none; } .wp-full-overlay .collapse-sidebar-arrow:before { display: block; content: "\f148"; background: #f0f0f1; font: normal 20px/1 dashicons; speak: never; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar { padding: 9px 10px; } /* rtl:ignore */ .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, .rtl .wp-full-overlay .collapse-sidebar-arrow:before { transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ } .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { transform: none; } /* Animations */ @media (prefers-reduced-motion: no-preference) { .wp-full-overlay, .wp-full-overlay-sidebar, .wp-full-overlay .collapse-sidebar, .wp-full-overlay-main { transition-property: left, right, top, bottom, width, margin; transition-duration: 0.2s; } } /* Device/preview size toggles */ .wp-full-overlay { background: #1d2327; } .wp-full-overlay-main { background-color: #f0f0f1; } .expanded .wp-full-overlay-footer { position: fixed; bottom: 0; left: 0; min-width: 299px; max-width: 599px; width: 18%; width: calc( 18% - 1px ); height: 45px; border-top: 1px solid #dcdcde; background: #f0f0f1; } .wp-full-overlay-footer .devices-wrapper { float: right; } .wp-full-overlay-footer .devices { position: relative; background: #f0f0f1; box-shadow: -20px 0 10px -5px #f0f0f1; } .wp-full-overlay-footer .devices button { cursor: pointer; background: transparent; border: none; height: 45px; padding: 0 3px; margin: 0 0 0 -4px; box-shadow: none; border-top: 1px solid transparent; border-bottom: 4px solid transparent; transition: .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out; } .wp-full-overlay-footer .devices button:focus { box-shadow: none; outline: none; } .wp-full-overlay-footer .devices button:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/30px "dashicons"; vertical-align: top; margin: 3px 0; padding: 4px 8px; color: #646970; } .wp-full-overlay-footer .devices button.active { border-bottom-color: #1d2327; } .wp-full-overlay-footer .devices button:hover, .wp-full-overlay-footer .devices button:focus { background-color: #fff; } .wp-full-overlay-footer .devices button:focus, .wp-full-overlay-footer .devices button.active:hover { border-bottom-color: #2271b1; } .wp-full-overlay-footer .devices button.active:before { color: #1d2327; } .wp-full-overlay-footer .devices button:hover:before, .wp-full-overlay-footer .devices button:focus:before { color: #2271b1; } .wp-full-overlay-footer .devices .preview-desktop:before { content: "\f472"; } .wp-full-overlay-footer .devices .preview-tablet:before { content: "\f471"; } .wp-full-overlay-footer .devices .preview-mobile:before { content: "\f470"; } @media screen and (max-width: 1024px) { .wp-full-overlay-footer .devices { display: none; } } .collapsed .wp-full-overlay-footer .devices button:before { display: none; } .preview-mobile .wp-full-overlay-main { margin: auto 0 auto -160px; width: 320px; height: 480px; max-height: 100%; max-width: 100%; left: 50%; } .preview-tablet .wp-full-overlay-main { margin: auto 0 auto -360px; width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */ height: 1080px; max-height: 100%; max-width: 100%; left: 50%; } /*------------------------------------------------------------------------------ 24.0 - Customize Loader ------------------------------------------------------------------------------*/ .no-customize-support .hide-if-no-customize, .customize-support .hide-if-customize, .no-customize-support.wp-core-ui .hide-if-no-customize, .no-customize-support .wp-core-ui .hide-if-no-customize, .customize-support.wp-core-ui .hide-if-customize, .customize-support .wp-core-ui .hide-if-customize { display: none; } #customize-container, #customize-controls .notice.notification-overlay { background: #f0f0f1; z-index: 500000; position: fixed; overflow: visible; top: 0; bottom: 0; left: 0; right: 0; height: 100%; } #customize-container { display: none; } /* Make the Customizer and Theme installer overlays the only available content. */ #customize-container, .theme-install-overlay { visibility: visible; } .customize-loading #customize-container iframe { opacity: 0; } #customize-container iframe, .theme-install-overlay iframe { height: 100%; width: 100%; z-index: 20; transition: opacity 0.3s; } #customize-controls { margin-top: 0; } .theme-install-overlay { display: none; } .theme-install-overlay.single-theme { display: block; } .install-theme-info { display: none; padding: 10px 20px 60px; } .single-theme .install-theme-info { padding-top: 15px; } .theme-install-overlay .install-theme-info { display: block; } .install-theme-info .theme-install { float: right; margin-top: 18px; } .install-theme-info .theme-name { font-size: 16px; line-height: 1.5; margin-bottom: 0; margin-top: 0; } .install-theme-info .theme-screenshot { margin: 15px 0; width: 258px; border: 1px solid #c3c4c7; position: relative; overflow: hidden; } .install-theme-info .theme-screenshot > img { width: 100%; height: auto; position: absolute; left: 0; top: 0; } .install-theme-info .theme-screenshot:after { content: ""; display: block; padding-top: 66.66666666%; } .install-theme-info .theme-details { overflow: hidden; } .theme-details .theme-version { margin: 15px 0; } .theme-details .theme-description { float: left; color: #646970; line-height: 1.6; max-width: 100%; } .theme-install-overlay .wp-full-overlay-header .button { float: right; margin: 8px 10px 0 0; } .theme-install-overlay .wp-full-overlay-sidebar { background: #f0f0f1; border-right: 1px solid #dcdcde; } .theme-install-overlay .wp-full-overlay-sidebar-content { background: #fff; border-top: 1px solid #dcdcde; border-bottom: 1px solid #dcdcde; } .theme-install-overlay .wp-full-overlay-main { position: absolute; z-index: 0; background-color: #f0f0f1; } .customize-loading #customize-container { background-color: #f0f0f1; } #customize-preview.wp-full-overlay-main:before, .customize-loading #customize-container:before, #customize-controls .notice.notification-overlay.notification-loading:before, .theme-install-overlay .wp-full-overlay-main:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; z-index: -1; margin: -10px 0 0 -10px; transform: translateZ(0); background: transparent url(../images/spinner.gif) no-repeat center center; background-size: 20px 20px; } #customize-preview.wp-full-overlay-main.iframe-ready:before, .theme-install-overlay.iframe-ready .wp-full-overlay-main:before { background-image: none; } /* =Media Queries -------------------------------------------------------------- */ /** * HiDPI Displays */ @media print, (min-resolution: 120dpi) { .wp-full-overlay .collapse-sidebar-arrow { background-image: url(../images/arrows-2x.png); background-size: 15px 123px; } #customize-preview.wp-full-overlay-main:before, .customize-loading #customize-container:before, #customize-controls .notice.notification-overlay.notification-loading:before, .theme-install-overlay .wp-full-overlay-main:before { background-image: url(../images/spinner-2x.gif); } } @media screen and (max-width: 782px) { .available-theme .action-links .delete-theme { float: none; margin: 0; padding: 0; clear: both; } .available-theme .action-links .delete-theme a { padding: 0; } .broken-themes table { width: 100%; } .theme-install-overlay .wp-full-overlay-header .button { font-size: 13px; line-height: 2.15384615; min-height: 30px; } .theme-browser .theme .theme-actions .button { margin-bottom: 0; } .theme-browser .theme.active .theme-actions, .theme-browser .theme .theme-actions { padding-top: 4px; padding-bottom: 4px; } .upload-theme .wp-upload-form, .upload-plugin .wp-upload-form { display: block; } :is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"] { margin-top: 10px; } } @media aural { .theme .notice:before, .theme-info .updating-message:before, .theme-info .updated-message:before, .theme-install.updating-message:before { speak: never; } } /* @import about.css */ /*------------------------------------------------------------------------------ 22.0 - About Pages 1.0 Global: About, Credits, Freedoms, Privacy, Get Involved 1.1 Layout 1.2 Typography & Elements 1.3 Header 2.0 Credits Page 3.0 Freedoms Page 4.0 Privacy Page x.2.0 Legacy About Styles: Global x.2.1 Typography x.2.2 Structure x.2.3 Point Releases x.3.0 Legacy About Styles: About Page x.3.1 Typography x.3.2 Structure x.4.0 Legacy About Styles: Credits & Freedoms Pages x.5.0 Legacy About Styles: Media Queries ------------------------------------------------------------------------------*/ .about__container { /* Section backgrounds */ --background: #f6f5f2; --subtle-background: #eef0fd; /* Main text color */ --text: #1e1e1e; --text-light: #fff; /* Accent colors: used in header, on special classes. */ --accent-1: #3858e9; /* Link color */ --accent-2: #3858e9; /* Accent background */ --accent-3: #ededed; /* hr background */ /* Navigation colors. */ --nav-background: #fff; --nav-border: transparent; --nav-color: var(--text); --nav-current: var(--accent-1); --border-radius: 0; --gap: 2rem; } /*------------------------------------------------------------------------------ 1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved ------------------------------------------------------------------------------*/ .about-php, .credits-php, .freedoms-php, .privacy-php, .contribute-php { background: #fff; } .about-php #wpcontent, .credits-php #wpcontent, .freedoms-php #wpcontent, .privacy-php #wpcontent, .contribute-php #wpcontent { background: #fff; padding: 0 24px; } @media screen and (max-width: 782px) { .about-php.auto-fold #wpcontent, .credits-php.auto-fold #wpcontent, .freedoms-php.auto-fold #wpcontent, .privacy-php.auto-fold #wpcontent, .contribute-php.auto-fold #wpcontent { padding-left: 24px; } } .about__container { max-width: 1000px; margin: 24px auto; clear: both; } .about__container .alignleft { float: left; } .about__container .alignright { float: right; } .about__container .aligncenter { text-align: center; } .about__container .is-vertically-aligned-top { align-self: start; } .about__container .is-vertically-aligned-center { align-self: center; } .about__container .is-vertically-aligned-bottom { align-self: end; } .about__section { background: transparent; clear: both; } .about__container .has-accent-background-color { color: var(--text-light); background-color: var(--accent-2); } .about__container .has-transparent-background-color { background-color: transparent; } .about__container .has-accent-color { color: var(--accent-2); } .about__container .has-border { border: 3px solid currentColor; } .about__container .has-subtle-background-color { background-color: var(--subtle-background); } .about__container .has-background-image { background-size: contain; background-repeat: no-repeat; background-position: center; } /* 1.1 - Layout */ .about__section { margin: 0; } .about__section .column:not(.is-edge-to-edge) { padding: var(--gap); } .about__section + .about__section .is-section-header { padding-bottom: var(--gap); } .about__section .column[class*="background-color"]:not(.is-edge-to-edge), .about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge), .about__section .column.has-border:not(.is-edge-to-edge) { padding-top: var(--gap); padding-bottom: var(--gap); } .about__section .column p:first-of-type { margin-top: 0; } .about__section .column p:last-of-type { margin-bottom: 0; } .about__section .has-text-columns { columns: 2; column-gap: calc(var(--gap) * 2); } .about__section .is-section-header { margin-bottom: 0; padding: var(--gap) var(--gap) 0; } .about__section .is-section-header p:last-child { margin-bottom: 0; } /* Section header is alone in a container. */ .about__section .is-section-header:first-child:last-child { padding: 0; } .about__section.is-feature { padding: var(--gap); } .about__section.is-feature p { margin: 0; } .about__section.is-feature p + p { margin-top: calc(var(--gap) / 2); } .about__section.has-1-column { margin-left: auto; margin-right: auto; max-width: 36em; } .about__section.has-2-columns, .about__section.has-3-columns, .about__section.has-4-columns, .about__section.has-overlap-style { display: grid; } .about__section.has-gutters { gap: var(--gap); margin-bottom: var(--gap); } .about__section.has-2-columns { grid-template-columns: 1fr 1fr; } .about__section.has-2-columns.is-wider-right { grid-template-columns: 2fr 3fr; } .about__section.has-2-columns.is-wider-left { grid-template-columns: 3fr 2fr; } .about__section .is-section-header { grid-column-start: 1; grid-column-end: -1; } .about__section.has-3-columns { grid-template-columns: repeat(3, 1fr); } .about__section.has-4-columns { grid-template-columns: repeat(4, 1fr); } .about__section.has-overlap-style { grid-template-columns: repeat(7, 1fr); } .about__section.has-overlap-style .column { grid-row-start: 1; } .about__section.has-overlap-style .column:nth-of-type(2n+1) { grid-column-start: 2; grid-column-end: span 3; } .about__section.has-overlap-style .column:nth-of-type(2n) { grid-column-start: 4; grid-column-end: span 3; } .about__section.has-overlap-style .column.is-top-layer { z-index: 1; } @media screen and (max-width: 782px) { .about__section.has-2-columns.is-wider-right, .about__section.has-2-columns.is-wider-left, .about__section.has-3-columns { display: block; margin-bottom: calc(var(--gap) / 2); } .about__section .column:not(.is-edge-to-edge) { padding-top: var(--gap); padding-bottom: var(--gap); } .about__section.has-2-columns.has-gutters.is-wider-right, .about__section.has-2-columns.has-gutters.is-wider-left, .about__section.has-3-columns.has-gutters { margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns.has-gutters .column, .about__section.has-2-columns.has-gutters .column, .about__section.has-3-columns.has-gutters .column { margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child, .about__section.has-2-columns.has-gutters .column:last-child, .about__section.has-3-columns.has-gutters .column:last-child { margin-bottom: 0; } .about__section.has-3-columns .column:nth-of-type(n) { padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns { grid-template-columns: repeat(2, 1fr); } .about__section.has-overlap-style { grid-template-columns: 1fr; } /* At this size, the two columns fully overlap */ .about__section.has-overlap-style .column.column { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } } @media screen and (max-width: 600px) { .about__section.has-2-columns { display: block; margin-bottom: var(--gap); } .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); } .about__section.has-2-columns.has-gutters { margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns.has-gutters .column { margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child { margin-bottom: 0; } } @media screen and (max-width: 480px) { .about__section.is-feature .column, .about__section .is-section-header { padding: 0; } .about__section.has-4-columns { display: block; padding-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns.has-gutters .column { margin-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns.has-gutters .column:last-child { margin-bottom: 0; } .about__section.has-4-columns .column:nth-of-type(n) { padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); } } /* 1.2 - Typography & Elements */ .about__container { line-height: 1.4; color: var(--text); } .about__container h1 { padding: 0; } .about__container h1, .about__container h2, .about__container h3.is-larger-heading { margin-top: 0; margin-bottom: calc(0.5 * var(--gap)); font-size: 2rem; font-weight: 700; line-height: 1.16; } .about__container h3, .about__container h1.is-smaller-heading, .about__container h2.is-smaller-heading { margin-top: 0; margin-bottom: calc(0.5 * var(--gap)); font-size: 1.625rem; font-weight: 700; line-height: 1.4; } .about__container h4, .about__container h3.is-smaller-heading { margin-top: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.6; } .about__container h1, .about__container h2, .about__container h3, .about__container h4 { text-wrap: pretty; color: inherit; } .about__container :is(h1, h2, h3, h4, .about__header-text):lang(en) { text-wrap: balance; } .about__container p { text-wrap: pretty; } .about__container p { font-size: inherit; line-height: inherit; } .about__container p.is-subheading { margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 300; line-height: 160%; } .about__section a { color: var(--accent-1); text-decoration: underline; } .about__section a:hover, .about__section a:active, .about__section a:focus { color: var(--accent-1); text-decoration: none; } .wp-credits-list a { text-decoration: none; } .wp-credits-list a:hover, .wp-credits-list a:active, .wp-credits-list a:focus { text-decoration: underline; } .about__section a.button.button-hero { padding-top: 1.1875rem; padding-bottom: 1.1875rem; font-size: 1.5rem; line-height: 1.4; white-space: normal; text-wrap: pretty; } .about__container ul { list-style: disc; margin-left: calc(var(--gap) / 2); } .about__container li { margin-bottom: 0.5rem; } .about__container img { margin: 0; max-width: 100%; vertical-align: middle; } .about__container .about__image { margin: 0; } .about__container .about__image img { max-width: 100%; width: 100%; height: auto; border-radius: var(--border-radius); } .about__container .about__image figcaption { margin-top: 0.5em; text-align: center; } .about__container .about__image .wp-video { margin-left: auto; margin-right: auto; } .about__container .about__image svg { vertical-align: middle; } .about__container .about__image + h3 { margin-top: calc(0.75 * var(--gap)); } .about__container hr { margin: calc(var(--gap) / 2) var(--gap); height: 0; border: none; border-top: 4px solid var(--accent-3); } .about__container hr.is-small { margin-top: 0; margin-bottom: 0; } .about__container hr.is-large { margin: var(--gap) auto; } .about__container hr.is-invisible { border: none; } .about__container div.updated, .about__container div.error, .about__container .notice { display: none !important; } .about__container code { font-size: inherit; } .about__section { font-size: 1.125rem; line-height: 1.55; } .about__section.is-feature { font-size: 1.6em; } .about__section.has-3-columns, .about__section.has-4-columns { font-size: 1rem; } @media screen and (max-width: 480px) { .about__section.is-feature { font-size: 1.4em; } .about__container h1, .about__container h2, .about__container h3.is-larger-heading { font-size: 2em; } } /* 1.3 - Header */ .about__header { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; box-sizing: border-box; padding: calc(var(--gap) * 1.5); padding-right: 26rem; /* Space for the background image. */ min-height: clamp(10rem, 25vw, 18.75rem); border-radius: var(--border-radius); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right center; background-size: auto 65%; background-color: var(--background); } [dir="rtl"] .about__header { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cg transform='scale(-1,1)' transform-origin='50%25 50%25'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/g%3E%3C/svg%3E%0A"); } .about__header-image { margin: 0 var(--gap) 3em; } .about__header-title { box-sizing: border-box; margin: 0; padding: 0; } .about__header-title h1 { margin: 0; padding: 0; /* Fluid font size scales on browser size 960px - 1200px. */ font-size: clamp(2rem, 20vw - 9rem, 4rem); line-height: 1; font-weight: 600; } .about-php .about__header-title h1, .credits-php .about__header-title h1, .freedoms-php .about__header-title h1, .privacy-php .about__header-title h1, .contribute-php .about__header-title h1 { /* Fluid font size scales on browser size 960px - 1200px. */ font-size: clamp(2rem, 20vw - 9rem, 4rem); } .about__header-text { box-sizing: border-box; max-width: 26em; margin: 1rem 0 0; padding: 0; font-size: 1.6rem; line-height: 1.15; } .about__header-navigation { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 0; margin-bottom: var(--gap); background: var(--nav-background); color: var(--nav-color); border-bottom: 3px solid var(--nav-border); } .about__header-navigation::after { display: none; } .about__header-navigation .nav-tab { margin-left: 0; padding: calc(var(--gap) * 0.75) var(--gap); float: none; font-size: 1.4em; line-height: 1; border-width: 0 0 3px; border-style: solid; border-color: transparent; background: transparent; color: inherit; } .about__header-navigation .nav-tab:hover, .about__header-navigation .nav-tab:active { background-color: var(--nav-current); color: var(--text-light); } .about__header-navigation .nav-tab-active { margin-bottom: -3px; color: var(--nav-current); border-width: 0 0 6px; border-color: var(--nav-current); } .about__header-navigation .nav-tab-active:hover, .about__header-navigation .nav-tab-active:active { background-color: var(--nav-current); color: var(--text-light); border-color: var(--nav-current); } @media screen and (max-width: 960px) { .about__header { padding-right: 21rem; } .about-php .about__header-title h1, .credits-php .about__header-title h1, .freedoms-php .about__header-title h1, .privacy-php .about__header-title h1, .contribute-php .about__header-title h1 { /* Fluid font size scales on browser size 600px - 960px. */ font-size: clamp(2rem, 20vw - 9rem, 4rem); } .about__header-navigation .nav-tab { padding: calc(var(--gap) * 0.75) calc(var(--gap) * 0.5); } } @media screen and (max-width: 782px) { .about__container .about__header-text { font-size: 1.4em; } .about__header-container { display: block; } .about__header { padding: var(--gap); padding-right: 17rem; } .about__header-text { margin-top: 0.5rem; } .about__header-navigation .nav-tab { margin-top: 0; margin-right: 0; font-size: 1.2em; } } @media screen and (max-width: 600px) { .about__header { min-height: auto; padding-right: var(--gap); } .about__header, .credits-php .about__header, .freedoms-php .about__header, .privacy-php .about__header, .contribute-php .about__header { background-image: none; } .about__header-navigation { display: block; } .about__header-navigation .nav-tab { display: block; margin-bottom: 0; padding: calc(var(--gap) / 2); border-left-width: 6px; border-bottom: none; } .about__header-navigation .nav-tab-active { border-bottom: none; border-left-width: 6px; } } /*------------------------------------------------------------------------------ 2.0 - Credits Page ------------------------------------------------------------------------------*/ .about__section .wp-people-group-title { margin-bottom: calc(var(--gap) * 2 - 10px); text-align: center; } .about__section .wp-people-group { margin: 0; display: flex; flex-wrap: wrap; } .about__section .wp-person { display: inline-block; vertical-align: top; box-sizing: border-box; margin-bottom: calc(var(--gap) - 10px); width: 25%; text-align: center; } .about__section .compact .wp-person { height: auto; width: 20%; } .about__section .wp-person-avatar { display: block; margin: 0 auto calc(var(--gap) / 2); width: 140px; height: 140px; border-radius: 100%; overflow: hidden; } .about__section .wp-person .gravatar { width: 140px; height: 140px; filter: grayscale(100%); } .about__section .compact .wp-person-avatar, .about__section .compact .wp-person .gravatar { width: 80px; height: 80px; } .about__section .wp-person .web { display: block; font-size: 1.4em; font-weight: 600; padding: 10px 10px 0; text-decoration: none; } .about__section .wp-person .web:hover { text-decoration: underline; } .about__section .compact .wp-person .web { font-size: 1.2em; } .about__section .wp-person .title { display: block; margin-top: 0.5em; } @media screen and (max-width: 782px) { .about__section .wp-person { width: 33%; } .about__section .compact .wp-person { width: 25%; } .about__section .wp-person-avatar, .about__section .wp-person .gravatar { width: 120px; height: 120px; } } @media screen and (max-width: 600px) { .about__section .wp-person { width: 50%; } .about__section .compact .wp-person { width: 33%; } .about__section .wp-person .web { font-size: 1.2em; } } @media screen and (max-width: 480px) { .about__section .wp-person { min-width: 100%; } .about__section .wp-person .web { font-size: 1em; } .about__section .compact .wp-person .web { font-size: 1em; } } /*------------------------------------------------------------------------------ 3.0 - Freedoms Page ------------------------------------------------------------------------------*/ .about__section .column .freedom-image { margin-bottom: var(--gap); max-height: 180px; } /*------------------------------------------------------------------------------ 4.0 - Privacy Page ------------------------------------------------------------------------------*/ .about__section .column .privacy-image { display: block; margin-left: auto; margin-right: auto; max-width: 25rem; } /*------------------------------------------------------------------------------ x.2.0 - Legacy About Styles: Global ------------------------------------------------------------------------------*/ .about-wrap { position: relative; margin: 25px 40px 0 20px; max-width: 1050px; /* readability */ font-size: 15px; } .about-wrap.full-width-layout { max-width: 1200px; } .about-wrap-content { max-width: 1050px; } .about-wrap div.updated, .about-wrap div.error, .about-wrap .notice { display: none !important; } .about-wrap hr { border: 0; height: 0; margin: 3em 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .about-wrap img { margin: 0; width: 100%; height: auto; vertical-align: middle; } .about-wrap .inline-svg img { max-width: 100%; width: auto; height: auto; } .about-wrap video { margin: 1.5em auto; } /* WordPress Version Badge */ .wp-badge { background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; background-position: center 25px; background-size: 80px 80px; color: #fff; font-size: 14px; text-align: center; font-weight: 600; margin: 5px 0 0; padding-top: 120px; height: 40px; display: inline-block; width: 140px; text-rendering: optimizeLegibility; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .svg .wp-badge { background-image: url(../images/wordpress-logo-white.svg?ver=20160308); } .about-wrap .wp-badge { position: absolute; top: 0; right: 0; } /* Tabs */ .about-wrap .nav-tab { padding-right: 15px; padding-left: 15px; font-size: 18px; line-height: 1.33333333; } /* x.2.1 - Typography */ .about-wrap h1 { margin: 0.2em 200px 0 0; padding: 0; color: #32373c; line-height: 1.2; font-size: 2.8em; font-weight: 400; } .about-wrap h2 { margin: 40px 0 0.6em; font-size: 2.7em; line-height: 1.3; font-weight: 300; text-align: center; } .about-wrap h3 { margin: 1.25em 0 0.6em; font-size: 1.4em; line-height: 1.5; } .about-wrap h4 { font-size: 16px; color: #23282d; } .about-wrap p { line-height: 1.5; font-size: 16px; } .about-wrap code, .about-wrap ol li p { font-size: 14px; font-weight: 400; } .about-wrap figcaption { font-size: 13px; text-align: center; color: white; text-overflow: ellipsis; } .about-wrap .about-description, .about-wrap .about-text { margin-top: 1.4em; font-weight: 400; line-height: 1.6; font-size: 19px; } .about-wrap .about-text { margin: 1em 200px 1em 0; color: #555d66; } /* x.2.2 - Structure */ .about-wrap .has-1-columns, .about-wrap .has-2-columns, .about-wrap .has-3-columns, .about-wrap .has-4-columns { display: grid; max-width: 800px; margin-top: 40px; margin-left: auto; margin-right: auto; } .about-wrap .column { margin-right: 20px; margin-left: 20px; } .about-wrap .is-wide { max-width: 760px; } .about-wrap .is-fullwidth { max-width: 100%; } .about-wrap .has-1-columns { display: block; max-width: 680px; margin: 0 auto 40px; } .about-wrap .has-2-columns { grid-template-columns: 1fr 1fr; } .about-wrap .has-2-columns .column:nth-of-type(2n+1) { grid-column-start: 1; } .about-wrap .has-2-columns .column:nth-of-type(2n) { grid-column-start: 2; } .about-wrap .has-2-columns.is-wider-right { grid-template-columns: 1fr 2fr; } .about-wrap .has-2-columns.is-wider-left { grid-template-columns: 2fr 1fr; } .about-wrap .has-3-columns { grid-template-columns: repeat(3, 1fr); } .about-wrap .has-3-columns .column:nth-of-type(3n+1) { grid-column-start: 1; } .about-wrap .has-3-columns .column:nth-of-type(3n+2) { grid-column-start: 2; } .about-wrap .has-3-columns .column:nth-of-type(3n) { grid-column-start: 3; } .about-wrap .has-4-columns { grid-template-columns: repeat(4, 1fr); } .about-wrap .has-4-columns .column:nth-of-type(4n+1) { grid-column-start: 1; } .about-wrap .has-4-columns .column:nth-of-type(4n+2) { grid-column-start: 2; } .about-wrap .has-4-columns .column:nth-of-type(4n+3) { grid-column-start: 3; } .about-wrap .has-4-columns .column:nth-of-type(4n) { grid-column-start: 4; } .about-wrap .column :first-child { margin-top: 0; } .about-wrap .aligncenter { text-align: center; } .about-wrap .alignleft { float: left; margin-right: 40px; } .about-wrap .alignright { float: right; margin-left: 40px; } .about-wrap .is-vertically-aligned-top { align-self: flex-start; } .about-wrap .is-vertically-aligned-center { align-self: center; } .about-wrap .is-vertically-aligned-bottom { align-self: end; } /* x.2.3 - Point Releases */ .about-wrap .point-releases { margin-top: 5px; border-bottom: 1px solid #ddd; } .about-wrap .changelog { margin-bottom: 40px; } .about-wrap .changelog.point-releases h3 { padding-top: 35px; } .about-wrap .changelog.point-releases h3:first-child { padding-top: 7px; } .about-wrap .changelog.feature-section .col { margin-top: 40px; } /*------------------------------------------------------------------------------ x.3.0 - Legacy About Styles: About Page ------------------------------------------------------------------------------*/ /* x.3.1 - Typography */ .about-wrap .lead-description { font-size: 1.5em; text-align: center; } .about-wrap .feature-section p { margin-top: 0.6em; } /* x.3.2 - Structure */ .about-wrap .headline-feature { margin: 0 auto 40px; max-width: 680px; } .about-wrap .headline-feature h2 { margin: 50px 0 0; } .about-wrap .headline-feature img { max-width: 600px; width: 100%; } /* Go to Dashboard Home link */ .about-wrap .return-to-dashboard { margin: 30px 0 0 -5px; font-size: 14px; font-weight: 600; } .about-wrap .return-to-dashboard a { text-decoration: none; padding: 0 5px; } /*------------------------------------------------------------------------------ x.4.0 - Legacy About Styles: Credits & Freedoms Pages ------------------------------------------------------------------------------*/ /* Credits */ .about-wrap h2.wp-people-group { margin: 2.6em 0 1.33em; padding: 0; font-size: 16px; line-height: inherit; font-weight: 600; text-align: left; } .about-wrap .wp-people-group { padding: 0 5px; margin: 0 -15px 0 -5px; } .about-wrap .compact { margin-bottom: 0; } .about-wrap .wp-person { display: inline-block; vertical-align: top; margin-right: 10px; padding-bottom: 15px; height: 70px; width: 280px; } .about-wrap .compact .wp-person { height: auto; width: 180px; padding-bottom: 0; margin-bottom: 0; } .about-wrap .wp-person .gravatar { float: left; margin: 0 10px 10px 0; padding: 1px; width: 60px; height: 60px; } .about-wrap .compact .wp-person .gravatar { width: 30px; height: 30px; } .about-wrap .wp-person .web { margin: 6px 0 2px; font-size: 16px; font-weight: 400; line-height: 2; text-decoration: none; } .about-wrap .wp-person .title { display: block; } .about-wrap #wp-people-group-validators + p.wp-credits-list { margin-top: 0; } .about-wrap p.wp-credits-list a { white-space: nowrap; } /* Freedoms */ .freedoms-php .about-wrap ol { margin: 40px 60px; } .freedoms-php .about-wrap ol li { list-style-type: decimal; font-weight: 600; } .freedoms-php .about-wrap ol p { font-weight: 400; margin: 0.6em 0; } /*------------------------------------------------------------------------------ x.5.0 - Legacy About Styles: Media Queries ------------------------------------------------------------------------------*/ @media screen and (max-width: 782px) { .about-wrap .has-3-columns, .about-wrap .has-4-columns { grid-template-columns: 1fr 1fr; } .about-wrap .has-3-columns .column:nth-of-type(3n+1), .about-wrap .has-4-columns .column:nth-of-type(4n+1) { grid-column-start: 1; grid-row-start: 1; } .about-wrap .has-3-columns .column:nth-of-type(3n+2), .about-wrap .has-4-columns .column:nth-of-type(4n+2) { grid-column-start: 2; grid-row-start: 1; } .about-wrap .has-3-columns .column:nth-of-type(3n), .about-wrap .has-4-columns .column:nth-of-type(4n+3) { grid-column-start: 1; grid-row-start: 2; } .about-wrap .has-4-columns .column:nth-of-type(4n) { grid-column-start: 2; grid-row-start: 2; } } @media screen and (max-width: 600px) { .about-wrap .has-2-columns, .about-wrap .has-3-columns, .about-wrap .has-4-columns { display: block; } .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { margin-right: 0; margin-left: 0; } .about-wrap .has-2-columns.is-wider-right, .about-wrap .has-2-columns.is-wider-left { display: grid; } } @media only screen and (max-width: 500px) { .about-wrap { margin-right: 20px; margin-left: 10px; } .about-wrap h1, .about-wrap .about-text { margin-right: 0; } .about-wrap .about-text { margin-bottom: 0.25em; } .about-wrap .wp-badge { position: relative; margin-bottom: 1.5em; width: 100%; } } @media only screen and (max-width: 480px) { .about-wrap .has-2-columns.is-wider-right, .about-wrap .has-2-columns.is-wider-left { display: block; } .about-wrap .column { margin-right: 0; margin-left: 0; } .about-wrap .has-2-columns.is-wider-right img, .about-wrap .has-2-columns.is-wider-left img { max-width: 160px; } } /* @import nav-menus.css */ /* nav-menu */ /* @todo: determine if this is truly for nav menus only */ .no-js #message { display: block; } ul.add-menu-item-tabs li { padding: 3px 5px 4px 8px; } .accordion-section ul.category-tabs, .accordion-section ul.add-menu-item-tabs, .accordion-section ul.wp-tab-bar { margin: 0; } .accordion-section .categorychecklist { margin: 13px 0; } #nav-menu-meta .accordion-section-content { padding: 18px 13px; resize: vertical; } #nav-menu-meta .button-controls { margin-bottom: 0; } .has-no-menu-item .button-controls { display: none; } #nav-menus-frame { margin-left: 300px; margin-top: 23px; } #wpbody-content #menu-settings-column { display: inline; width: 281px; margin-left: -300px; clear: both; float: left; padding-top: 0; } #menu-settings-column .inside { clear: both; margin: 10px 0 0; height: 100%; max-height: inherit; } #menu-settings-column .categorydiv, #menu-settings-column .customlinkdiv, #menu-settings-column .posttypediv, #menu-settings-column .taxonomydiv { max-height: inherit; height: 100%; } #menu-settings-column .wp-tab-panel, #menu-settings-column .categorydiv div.tabs-panel, #menu-settings-column .customlinkdiv div.tabs-panel, #menu-settings-column .posttypediv div.tabs-panel, #menu-settings-column .taxonomydiv div.tabs-panel { /* Allow space for content after tab panels in nav menu editor. */ max-height: calc( 100% - 75px ); height: 100%; } .metabox-holder-disabled .postbox, .metabox-holder-disabled .accordion-section-content, .metabox-holder-disabled .accordion-section-title { opacity: 0.5; filter: alpha(opacity=50); } .metabox-holder-disabled .button-controls .select-all { display: none; } #wpbody { position: relative; } .is-submenu { color: #50575e; /* #fafafa background */ font-style: italic; font-weight: 400; margin-left: 4px; } .manage-menus { margin-top: 23px; padding: 10px; overflow: hidden; background: #fff; } .manage-menus .selected-menu, .manage-menus select, .manage-menus .submit-btn, .nav-menus-php .add-new-menu-action { display: inline-block; margin-right: 3px; vertical-align: middle; } .manage-menus select, .menu-location-menus select { max-width: 100%; } .menu-edit #post-body-content h3 { margin: 1em 0 10px; } #nav-menu-bulk-actions-top { margin: 1em 0; } #nav-menu-bulk-actions-bottom { margin: 1em 0; margin: calc( 1em + 9px ) 0; } .bulk-actions input.button { margin-right: 12px; } .bulk-select-button { position: relative; display: inline-block; padding: 0 10px; font-size: 13px; line-height: 2.15384615; height: auto; min-height: 30px; background: #f6f7f7; vertical-align: top; border: 1px solid #dcdcde; margin: 0; cursor: pointer; border-radius: 3px; white-space: nowrap; box-sizing: border-box; } .bulk-selection .bulk-select-button { color: #2271b1; border-color: #2271b1; background: #f6f7f7; vertical-align: top; } #pending-menu-items-to-delete { display: none; } .bulk-selection #pending-menu-items-to-delete { display: block; margin-top: 1em; } #pending-menu-items-to-delete p { margin-bottom: 0; } #pending-menu-items-to-delete ul { margin-top: 0; list-style: none; } #pending-menu-items-to-delete ul li { display: inline; } input.bulk-select-switcher + .bulk-select-button-label { vertical-align: inherit; } label.bulk-select-button:hover, label.bulk-select-button:active, label.bulk-select-button:focus-within { background: #f0f0f1; border-color: #0a4b78; color: #0a4b78; } input.bulk-select-switcher:focus + .bulk-select-button-label { color: #0a4b78; } .bulk-actions input.menu-items-delete { appearance: none; font-size: inherit; border: 0; line-height: 2.1em; background: none; cursor: pointer; text-decoration: underline; color: #b32d2e; } .bulk-actions input.menu-items-delete:hover { color: #b32d2e; border: none; } .bulk-actions input.menu-items-delete.disabled { display: none; } .menu-settings { border-top: 1px solid #f0f0f1; margin-top: 2em; } .menu-settings-group { margin: 0 0 10px; overflow: hidden; padding-left: 20%; } .menu-settings-group:last-of-type { margin-bottom: 0; } .menu-settings-input { float: left; margin: 0; width: 100%; } .menu-settings-group-name { float: left; clear: both; width: 25%; padding: 3px 0 0; margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */ } .menu-settings label { vertical-align: baseline; } .menu-edit .checkbox-input { margin-top: 4px; } .theme-location-set { color: #646970; font-size: 11px; } /* Menu Container */ /* @todo: responsive view. */ #menu-management-liquid { float: left; min-width: 100%; margin-top: 3px; } /* @todo: responsive view. */ #menu-management { position: relative; margin-right: 20px; margin-top: -3px; width: 100%; } #menu-management .menu-edit { margin-bottom: 20px; } .nav-menus-php #post-body { padding: 0 10px; border-top: 1px solid #fff; border-bottom: 1px solid #dcdcde; background: #fff; } #nav-menu-header, #nav-menu-footer { padding: 0 10px; background: #f6f7f7; } #nav-menu-header { border-bottom: 1px solid #dcdcde; margin-bottom: 0; } #nav-menu-header .menu-name-label { display: inline-block; vertical-align: middle; margin-right: 7px; } .nav-menus-php #post-body div.updated, .nav-menus-php #post-body div.error { margin: 0; } .nav-menus-php #post-body-content { position: relative; float: none; } .nav-menus-php #post-body-content .post-body-plain { margin-bottom: 0; } #menu-management .menu-add-new abbr { font-weight: 600; } #select-nav-menu-container { text-align: right; padding: 0 10px 3px; margin-bottom: 5px; } #select-nav-menu { width: 100px; display: inline; } #menu-name-label { margin-top: -2px; } .widefat .menu-locations .menu-location-title { padding: 13px 10px 0; } .menu-location-title label { font-weight: 600; } .menu-location-menus select { float: left; } #locations-nav-menu-wrapper { padding: 5px 0; } .locations-nav-menu-select select { float: left; width: 160px; margin-right: 5px; } .locations-row-links { float: left; margin: 6px 0 0 6px; } .locations-edit-menu-link, .locations-add-menu-link { margin: 0 3px; } .locations-edit-menu-link { padding-right: 3px; border-right: 1px solid #c3c4c7; } #menu-management .inside { padding: 0 10px; } /* Add Menu Item Boxes */ .postbox .howto input, .customlinkdiv .menu-item-textbox, .customlinkdiv .error-message { width: 180px; float: right; } .customlinkdiv .error-message { clear: right; } .accordion-container .outer-border { margin: 0; } .customlinkdiv p { margin-top: 0 } #nav-menu-theme-locations .howto select { width: 100%; } #nav-menu-theme-locations .button-controls { text-align: right; } .add-menu-item-view-all { height: 400px; } /* Button Primary Actions */ #menu-container .submit { margin: 0 0 10px; padding: 0; } /* @todo: is this actually used? */ #cancel-save { text-decoration: underline; font-size: 12px; margin-left: 20px; margin-top: 5px; } .button.right, .button-secondary.right, .button-primary.right { float: right; } /* Button Secondary Actions */ .list-controls { float: left; margin-top: 5px; } .add-to-menu { float: right; } .button-controls { clear: both; margin: 10px 0; } .show-all, .hide-all { cursor: pointer; } .hide-all { display: none; } /* Create Menu */ #menu-name { width: 270px; vertical-align: middle; } #manage-menu .inside { padding: 0; } /* Custom Links */ #available-links dt { display: block; } #add-custom-link .howto { font-size: 12px; } #add-custom-link label span { display: block; float: left; margin-top: 5px; padding-right: 5px; } .menu-item-textbox { width: 180px; } .customlinkdiv label, .nav-menus-php .howto span { float: left; margin-top: 6px; } /* Menu item types */ .quick-search { width: 190px; } .quick-search-wrap .spinner { float: none; margin: -3px -10px 0 0; } .nav-menus-php .list-wrap { display: none; clear: both; margin-bottom: 10px; } .nav-menus-php .postbox p.submit { margin-bottom: 0; } /* Listings */ .nav-menus-php .list li { display: none; margin: 0 0 5px; } .nav-menus-php .list li .menu-item-title { cursor: pointer; display: block; } .nav-menus-php .list li .menu-item-title input { margin-right: 3px; margin-top: -3px; } .menu-item-title input[type=checkbox] { display: inline-block; margin-top: -4px; } .menu-item-title .post-state { font-weight: 600; } /* Nav Menu */ #menu-container .inside { padding-bottom: 10px; } .menu { padding-top: 1em; } #menu-to-edit { margin: 0; padding: 0.1em 0; } .menu ul { width: 100%; } .menu li { margin-bottom: 0; position: relative; } .menu-item-bar { clear: both; line-height: 1.5; position: relative; margin: 9px 0 0; } .menu-item-bar .menu-item-handle { border: 1px solid #dcdcde; position: relative; padding: 10px 15px; height: auto; min-height: 20px; max-width: 382px; line-height: 2.30769230; overflow: hidden; word-wrap: break-word; } .menu-item-bar .menu-item-handle:hover { border-color: #8c8f94; } #menu-to-edit .menu-item-invalid .menu-item-handle { background: #fcf0f1; border-color: #d63638; } .no-js .menu-item-edit-active .item-edit { display: none; } .js .menu-item-handle { cursor: move; } .menu li.deleting .menu-item-handle { background-image: none; background-color: #f86368; } .menu-item-handle .item-title { font-size: 13px; font-weight: 600; line-height: 1.53846153; display: block; /* @todo: responsive view. */ margin-right: 13em; } .menu-item-handle .menu-item-checkbox { display: none; } .bulk-selection .menu-item-handle .menu-item-checkbox { display: inline-block; margin-right: 6px; } .menu-item-handle .menu-item-title.no-title { color: #646970; } /* Sortables */ li.menu-item.ui-sortable-helper .menu-item-bar { margin-top: 0; } li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar { margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ } .menu .sortable-placeholder { height: 35px; width: 410px; margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ } /* Hide the transport list when it's empty */ .menu-item .menu-item-transport:empty { display: none; } /* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */ .menu-item-depth-0 { margin-left: 0; } .menu-item-depth-1 { margin-left: 30px; } .menu-item-depth-2 { margin-left: 60px; } .menu-item-depth-3 { margin-left: 90px; } .menu-item-depth-4 { margin-left: 120px; } .menu-item-depth-5 { margin-left: 150px; } .menu-item-depth-6 { margin-left: 180px; } .menu-item-depth-7 { margin-left: 210px; } .menu-item-depth-8 { margin-left: 240px; } .menu-item-depth-9 { margin-left: 270px; } .menu-item-depth-10 { margin-left: 300px; } .menu-item-depth-11 { margin-left: 330px; } .menu-item-depth-0 .menu-item-transport { margin-left: 0; } .menu-item-depth-1 .menu-item-transport { margin-left: -30px; } .menu-item-depth-2 .menu-item-transport { margin-left: -60px; } .menu-item-depth-3 .menu-item-transport { margin-left: -90px; } .menu-item-depth-4 .menu-item-transport { margin-left: -120px; } .menu-item-depth-5 .menu-item-transport { margin-left: -150px; } .menu-item-depth-6 .menu-item-transport { margin-left: -180px; } .menu-item-depth-7 .menu-item-transport { margin-left: -210px; } .menu-item-depth-8 .menu-item-transport { margin-left: -240px; } .menu-item-depth-9 .menu-item-transport { margin-left: -270px; } .menu-item-depth-10 .menu-item-transport { margin-left: -300px; } .menu-item-depth-11 .menu-item-transport { margin-left: -330px; } body.menu-max-depth-0 { min-width: 950px !important; } body.menu-max-depth-1 { min-width: 980px !important; } body.menu-max-depth-2 { min-width: 1010px !important; } body.menu-max-depth-3 { min-width: 1040px !important; } body.menu-max-depth-4 { min-width: 1070px !important; } body.menu-max-depth-5 { min-width: 1100px !important; } body.menu-max-depth-6 { min-width: 1130px !important; } body.menu-max-depth-7 { min-width: 1160px !important; } body.menu-max-depth-8 { min-width: 1190px !important; } body.menu-max-depth-9 { min-width: 1220px !important; } body.menu-max-depth-10 { min-width: 1250px !important; } body.menu-max-depth-11 { min-width: 1280px !important; } /* Menu item controls */ .item-type { display: inline-block; padding: 12px 16px; color: #646970; font-size: 12px; line-height: 1.5; } .item-controls { font-size: 12px; position: absolute; right: 20px; top: -1px; } .item-controls a { text-decoration: none; } .item-controls a:hover { cursor: pointer; } .item-controls .item-order { padding-right: 10px; } .nav-menus-php .item-edit { position: absolute; right: -20px; top: 0; display: block; width: 30px; height: 40px; outline: none; } .no-js.nav-menus-php .item-edit { position: static; float: right; width: auto; height: auto; margin: 12px -10px 12px 0; padding: 0; color: #2271b1; text-decoration: underline; font-size: 12px; line-height: 1.5; } .no-js.nav-menus-php .item-edit .screen-reader-text { position: static; clip-path: none; width: auto; height: auto; margin: 0; } .nav-menus-php .item-edit:before { margin-top: 10px; margin-left: 4px; width: 20px; border-radius: 50%; text-indent: -1px; /* account for the dashicon alignment */ } .no-js.nav-menus-php .item-edit:before { display: none; } .rtl .nav-menus-php .item-edit:before { text-indent: 1px; /* account for the dashicon alignment */ } .js.nav-menus-php .item-edit:focus { box-shadow: none; } .nav-menus-php .item-edit:focus:before { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } /* Menu editing */ .menu-instructions-inactive { display: none; } .menu-item-settings { display: block; max-width: 392px; padding: 10px; position: relative; z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ border: 1px solid #c3c4c7; border-top: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .menu-item-settings .field-move { margin: 3px 0 5px; line-height: 1.5; } .field-move-visual-label { float: left; margin-right: 4px; } .menu-item-settings .field-move .button-link { display: none; margin: 0 2px; } .menu-item-edit-active .menu-item-settings { display: block; } .menu-item-edit-inactive .menu-item-settings { display: none; } .add-menu-item-pagelinks { margin: .5em -10px; text-align: center; } .add-menu-item-pagelinks .page-numbers { display: inline-block; min-width: 20px; } .add-menu-item-pagelinks .page-numbers.dots { min-width: 0; } .link-to-original { display: block; margin: 0 0 15px; padding: 3px 5px 5px; border: 1px solid #dcdcde; color: #646970; font-size: 12px; } .link-to-original a { padding-left: 4px; font-style: normal; } .hidden-field { display: none; } .description-group { display: flex; column-gap: 10px; } .description-group > * { flex-grow: 1; } .menu-item-actions { padding-top: 15px; padding-bottom: 7px; } #cancel-save { cursor: pointer; } /* Major/minor publishing actions (classes) */ .nav-menus-php .major-publishing-actions { padding: 10px 0; display: flex; align-items: center; } .nav-menus-php .major-publishing-actions > * { margin-right: 10px; } .nav-menus-php .major-publishing-actions .form-invalid { padding-left: 4px; margin-left: -4px; } #nav-menus-frame, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; } /* =Media Queries -------------------------------------------------------------- */ @media only screen and (min-width: 769px) and (max-width: 1000px) { body.menu-max-depth-0 { min-width: 0 !important; } #menu-management-liquid { width: 100%; } .nav-menus-php #post-body-content { min-width: 0; } } @media screen and (max-width: 782px) { body.nav-menus-php, body.wp-customizer { min-width: 0 !important; } #nav-menus-frame { margin-left: 0; float: none; width: 100%; } #wpbody-content #menu-settings-column { display: block; width: 100%; float: none; margin-left: 0; } #side-sortables .add-menu-item-tabs { margin: 15px 0 14px; } ul.add-menu-item-tabs li.tabs { padding: 13px 15px 14px; } .nav-menus-php .customlinkdiv .howto input { width: 65%; } .nav-menus-php .quick-search { width: 85%; } #menu-management-liquid { margin-top: 25px; } .nav-menus-php .menu-name-label.howto span { margin-top: 13px } #menu-name { width: 100%; } .nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action { padding-top: 1em; } .nav-menus-php .delete-action { font-size: 14px; line-height: 2.14285714; } .menu-item-bar .menu-item-handle, .menu-item-settings { width: auto; } .menu-item-settings { padding: 10px; } .menu-item-settings .description-group { display: block; } .menu-item-settings input { width: 100%; } .menu-item-settings input[type="checkbox"], .menu-item-settings input[type="radio"] { width: 25px; } .menu-settings-group { padding-left: 0; overflow: visible; } .menu-settings-group-name { float: none; width: auto; margin-left: 0; margin-bottom: 15px; } .menu-settings-input { float: none; margin-bottom: 15px; } .menu-edit .checkbox-input { margin-top: 0; } .manage-menus select { margin: 0.5em 0; } .wp-core-ui .manage-menus .button { margin-bottom: 0; } .widefat .menu-locations .menu-location-title { padding-top: 16px; } } @media only screen and (min-width: 783px) { @supports (position: sticky) and (scroll-margin-bottom: 130px) { #nav-menu-footer { position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -1px 0 0 #ddd; } #save_menu_header { display: none; } } } @media only screen and (max-width: 768px) { /* menu locations */ #menu-locations-wrap .widefat { width: 100%; } .bulk-select-button { padding: 5px 10px; } } /* @import widgets.css */ /* General Widgets Styles */ .widget { margin: 0 auto 10px; position: relative; box-sizing: border-box; } .widget.open { z-index: 99; } .widget.open:focus-within { z-index: 100; } .widget-top { font-size: 13px; font-weight: 600; background: #f6f7f7; } .widget-top .widget-action { border: 0; margin: 0; padding: 10px; background: none; cursor: pointer; } .widget-title h3, .widget-title h4 { margin: 0; padding: 15px; font-size: 1em; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; user-select: none; } .widgets-holder-wrap .widget-inside { border-top: none; padding: 1px 15px 15px; line-height: 1.23076923; } .widget.widget-dirty .widget-control-close-wrapper { display: none; } .in-widget-title, #widgets-right a.widget-control-edit, #available-widgets .widget-description { color: #646970; } .deleting .widget-title, .deleting .widget-top .widget-action .toggle-indicator:before { color: #a7aaad; } /* Media Widgets */ .wp-core-ui .media-widget-control.selected .placeholder, .wp-core-ui .media-widget-control.selected .not-selected, .wp-core-ui .media-widget-control .selected { display: none; } .media-widget-control.selected .selected { display: inline-block; } .media-widget-buttons { text-align: left; margin-top: 0; } .media-widget-control .media-widget-buttons .button { width: auto; height: auto; margin-top: 12px; white-space: normal; } .media-widget-buttons .button:first-child { margin-right: 8px; } .media-widget-control .attachment-media-view .button-add-media, .media-widget-control .placeholder { border: 1px dashed #c3c4c7; box-sizing: border-box; cursor: pointer; line-height: 1.6; padding: 9px 0; position: relative; text-align: center; width: 100%; } .media-widget-control .attachment-media-view .button-add-media { cursor: pointer; background-color: #f0f0f1; color: #2c3338; } .media-widget-control .attachment-media-view .button-add-media:hover { background-color: #fff; } .media-widget-control .attachment-media-view .button-add-media:focus { background-color: #fff; border-style: solid; border-color: #4f94d4; box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } .media-widget-control .media-widget-preview { background: transparent; text-align: center; } .media-widget-control .media-widget-preview .notice { text-align: initial; } .media-frame .media-widget-embed-notice p code, .media-widget-control .notice p code { padding: 0 3px 0 0; } .media-frame .media-widget-embed-notice { margin-top: 16px; } .media-widget-control .media-widget-preview img { max-width: 100%; vertical-align: middle; background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .media-widget-control .media-widget-preview .wp-video-shortcode { background: #000; } .media-frame.media-widget .media-toolbar-secondary { min-width: 300px; } .media-frame.media-widget .image-details .embed-media-settings .setting.align, .media-frame.media-widget .attachment-display-settings .setting.align, .media-frame.media-widget .embed-media-settings .setting.align, .media-frame.media-widget .embed-media-settings .legend-inline, .media-frame.media-widget .embed-link-settings .setting.link-text, .media-frame.media-widget .replace-attachment, .media-frame.media-widget .checkbox-setting.autoplay { display: none; } .media-widget-video-preview { width: 100%; } .media-widget-video-link { display: inline-block; min-height: 132px; width: 100%; background: #000; } .media-widget-video-link .dashicons { font: normal 60px/1 'dashicons'; position: relative; width: 100%; top: -90px; color: #fff; text-decoration: none; } .media-widget-video-link.no-poster .dashicons { top: 30px; } .media-frame #embed-url-field.invalid, .media-widget-image-link > .link:invalid { border: 1px solid #d63638; } .media-widget-image-link { margin: 1em 0; } .media-widget-gallery-preview { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: -1.79104477%; } .media-widget-preview.media_gallery, .media-widget-preview.media_image { cursor: pointer; } .media-widget-preview .placeholder { background: #f0f0f1; } .media-widget-gallery-preview .gallery-item { box-sizing: border-box; width: 50%; margin: 0; background: transparent; } .media-widget-gallery-preview .gallery-item .gallery-icon { margin: 4.5%; } /* * Use targeted nth-last-child selectors to control the size of each image * based on how many gallery items are present in the grid. * See: https://alistapart.com/article/quantity-queries-for-css */ .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child, .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item, .media-widget-gallery-preview .gallery-item:nth-last-child(n+5), .media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item, .media-widget-gallery-preview .gallery-item:nth-last-child(n+6), .media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item { max-width: 33.33%; } .media-widget-gallery-preview .gallery-item img { height: auto; vertical-align: bottom; } .media-widget-gallery-preview .gallery-icon { position: relative; } .media-widget-gallery-preview .gallery-icon-placeholder { position: absolute; top: 0; bottom: 0; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); } .media-widget-gallery-preview .gallery-icon-placeholder-text { font-weight: 600; font-size: 2em; color: #fff; } /* Widget Dragging Helpers */ .widget.ui-draggable-dragging { min-width: 100%; } .widget.ui-sortable-helper { opacity: 0.8; } .widget-placeholder { border: 1px dashed #c3c4c7; margin: 0 auto 10px; height: 45px; width: 100%; box-sizing: border-box; } #widgets-right .widget-placeholder { margin-top: 0; } #widgets-right .closed .widget-placeholder { height: 0; border: 0; margin-top: -10px; } /* Widget Sidebars */ .sidebar-name { position: relative; box-sizing: border-box; } .js .sidebar-name { cursor: pointer; } .sidebar-name .handlediv { float: right; width: 38px; height: 38px; border: 0; margin: 0; padding: 8px; background: none; cursor: pointer; outline: none; } #widgets-right .sidebar-name .handlediv { margin: 5px 3px 0 0; } .sidebar-name .handlediv:focus { box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } #widgets-left .sidebar-name .toggle-indicator { display: none; } #widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, #widgets-left .sidebar-name:hover .toggle-indicator, #widgets-left .sidebar-name .handlediv:focus .toggle-indicator { display: block; } .sidebar-name .toggle-indicator:before { padding: 1px 2px 1px 0; border-radius: 50%; } .sidebar-name .handlediv:focus .toggle-indicator:before { box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } .sidebar-name h2, .sidebar-name h3 { margin: 0; padding: 8px 10px; overflow: hidden; white-space: normal; line-height: 1.5; } .widgets-holder-wrap .description { padding: 0 0 15px; margin: 0; font-style: normal; color: #646970; } .widget-holder .description, .inactive-sidebar .description { color: #50575e; } #widgets-right .widgets-holder-wrap .description { padding-left: 7px; padding-right: 7px; } /* Widgets 2-col Layout */ div.widget-liquid-left { margin: 0; width: 38%; float: left; } div.widget-liquid-right { float: right; width: 58%; } /* Widgets Left - Available Widgets */ div#widgets-left { padding-top: 12px; } div#widgets-left .closed .sidebar-name, div#widgets-left .inactive-sidebar.closed .sidebar-name { margin-bottom: 10px; } div#widgets-left .sidebar-name h2, div#widgets-left .sidebar-name h3 { padding: 10px 0; margin: 0 10px 0 0; } #widgets-left .widgets-holder-wrap, div#widgets-left .widget-holder { background: transparent; border: none; } #widgets-left .widgets-holder-wrap { border: none; box-shadow: none; } #available-widgets .widget { margin: 0; } #available-widgets .widget:nth-child(odd) { clear: both; } #available-widgets .widget .widget-description { display: block; padding: 10px 15px; font-size: 12px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; hyphens: auto; } #available-widgets #widget-list { position: relative; } /* Inactive Sidebars */ #widgets-left .inactive-sidebar { clear: both; width: 100%; background: transparent; padding: 0; margin: 0 0 20px; border: none; box-shadow: none; } #widgets-left .inactive-sidebar.first { margin-top: 40px; } /* Not sure what this is for... */ div#widgets-left .inactive-sidebar .widget.expanded { left: auto; } .widget-title-action { float: right; position: relative; } div#widgets-left .inactive-sidebar .widgets-sortables { min-height: 42px; padding: 0; background: transparent; margin: 0; position: relative; } /* Widgets Right */ div#widgets-right .sidebars-column-1, div#widgets-right .sidebars-column-2 { max-width: 450px; } div#widgets-right .widgets-holder-wrap { margin: 10px 0 0; } div#widgets-right .sidebar-description { min-height: 20px; margin-top: -5px; } div#widgets-right .sidebar-name h2, div#widgets-right .sidebar-name h3 { padding: 15px 15px 15px 7px; } div#widgets-right .widget-top { padding: 0; } div#widgets-right .widgets-sortables { padding: 0 8px; margin-bottom: 9px; position: relative; min-height: 123px; } div#widgets-right .closed .widgets-sortables { min-height: 0; margin-bottom: 0; } .sidebar-name .spinner, .remove-inactive-widgets .spinner { float: none; position: relative; top: -2px; margin: -5px 5px; } .sidebar-name .spinner { position: absolute; top: 18px; right: 30px; } /* Dragging a widget over a closed sidebar */ #widgets-right .widgets-holder-wrap.widget-hover { border-color: #787c82; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Accessibility Mode */ .widget-access-link { float: right; margin: -5px 0 10px 10px; } .widgets_access #widgets-left .widget .widget-top { cursor: auto; } .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description, .widgets_access #wpwrap .widgets-holder-wrap.closed .widget, .widgets_access #wpwrap .widget-control-edit { display: block; } .widgets_access #widgets-left .widget .widget-top:hover, .widgets_access #widgets-right .widget .widget-top:hover { border-color: #dcdcde; } #available-widgets .widget-control-edit .edit, #available-widgets .widget-action .edit, #widgets-left .inactive-sidebar .widget-control-edit .add, #widgets-left .inactive-sidebar .widget-action .add, #widgets-right .widget-control-edit .add, #widgets-right .widget-action .add { display: none; } .widget-control-edit { display: block; color: #646970; background: #f0f0f1; padding: 0 15px; line-height: 3.30769230; border-left: 1px solid #dcdcde; } #widgets-left .widget-control-edit:hover, #widgets-right .widget-control-edit:hover { color: #fff; background: #3c434a; border-left: 0; outline: 1px solid #3c434a; } .widgets-holder-wrap .sidebar-name, .widgets-holder-wrap .sidebar-description { -webkit-user-select: none; user-select: none; } .editwidget { margin: 0 auto; } .editwidget .widget-inside { display: block; padding: 0 15px; } .editwidget .widget-control-actions { margin-top: 20px; } .js .widgets-holder-wrap.closed .widget, .js .widgets-holder-wrap.closed .sidebar-description, .js .widgets-holder-wrap.closed .remove-inactive-widgets, .js .widgets-holder-wrap.closed .description, .js .closed br.clear { display: none; } .js .widgets-holder-wrap.closed .widget.ui-sortable-helper { display: block; } /* Hide Widget Settings by Default */ .widget-inside, .widget-description { display: none; } .widget-inside { background: #fff; } .widget-inside select { max-width: 100%; } /* Dragging widgets over the available widget area show's a "Deactivate" message */ #removing-widget { display: none; font-weight: 400; padding-left: 15px; font-size: 12px; line-height: 1; color: #000; } .js #removing-widget { color: #72aee6; } .widget-control-noform, #access-off, .widgets_access .widget-action, .widgets_access .handlediv, .widgets_access #access-on, .widgets_access .widget-holder .description, .no-js .widget-holder .description { display: none; } .widgets_access .widget-holder, .widgets_access #widget-list { padding-top: 10px; } .widgets_access #access-off { display: inline; } .widgets_access .sidebar-name, .widgets_access .widget .widget-top { cursor: default; } /* Widgets Area Chooser */ .widget-liquid-left #widgets-left.chooser #available-widgets .widget, .widget-liquid-left #widgets-left.chooser .inactive-sidebar { transition: opacity 0.1s linear; } .widget-liquid-left #widgets-left.chooser #available-widgets .widget, .widget-liquid-left #widgets-left.chooser .inactive-sidebar { /* -webkit-filter: blur(1px); */ opacity: 0.2; pointer-events: none; } .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question { /* -webkit-filter: none; */ opacity: 1; pointer-events: auto; } .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: #8c8f94; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .widgets-chooser ul.widgets-chooser-sidebars { margin: 0; list-style-type: none; max-height: 300px; overflow: auto; } .widgets-chooser { display: none; } .widgets-chooser ul { border: 1px solid #c3c4c7; } .widgets-chooser li { border-bottom: 1px solid #c3c4c7; background: #fff; margin: 0; position: relative; } .widgets-chooser .widgets-chooser-button { width: 100%; padding: 10px 15px 10px 35px; background: transparent; border: 0; box-sizing: border-box; text-align: left; cursor: pointer; transition: background 0.2s ease-in-out; } /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ .widgets-chooser .widgets-chooser-button:hover, .widgets-chooser .widgets-chooser-button:focus { outline: none; text-decoration: underline; } .widgets-chooser li:last-child { border: none; } .widgets-chooser .widgets-chooser-selected .widgets-chooser-button { background: #2271b1; color: #fff; } .widgets-chooser .widgets-chooser-selected:before { content: "\f147"; display: block; -webkit-font-smoothing: antialiased; font: normal 26px/1 dashicons; color: #fff; position: absolute; top: 7px; left: 5px; } .widgets-chooser .widgets-chooser-actions { padding: 10px 0 12px; text-align: center; } #available-widgets .widget .widget-top { cursor: pointer; } #available-widgets .widget.ui-draggable-dragging .widget-top { cursor: move; } /* =Specific widget styling -------------------------------------------------------------- */ .text-widget-fields { position: relative; } .text-widget-fields [hidden] { display: none; } .text-widget-fields .wp-pointer.wp-pointer-top { position: absolute; z-index: 3; top: 100px; right: 10px; left: 10px; } .text-widget-fields .wp-pointer .wp-pointer-arrow { left: auto; right: 15px; } .text-widget-fields .wp-pointer .wp-pointer-buttons { line-height: 1.4; } .custom-html-widget-fields > p > .CodeMirror { border: 1px solid #dcdcde; } .custom-html-widget-fields code { padding-top: 1px; padding-bottom: 1px; } ul.CodeMirror-hints { z-index: 101; /* Due to z-index 100 set on .widget.open */ } .widget-control-actions .custom-html-widget-save-button.button.validation-blocked { cursor: not-allowed; } /* =Media Queries -------------------------------------------------------------- */ @media screen and (max-width: 782px) { .widgets-holder-wrap .widget-inside input[type="checkbox"], .widgets-holder-wrap .widget-inside input[type="radio"], .editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */ .editwidget .widget-inside input[type="radio"] { margin: 0.25rem 0.25rem 0.25rem 0; } } @media screen and (max-width: 480px) { div.widget-liquid-left { width: 100%; float: none; border-right: none; padding-right: 0; } #widgets-left .sidebar-name { margin-right: 0; } #widgets-left #available-widgets .widget-top { margin-right: 0; } #widgets-left .inactive-sidebar .widgets-sortables { margin-right: 0; } div.widget-liquid-right { width: 100%; float: none; } div.widget { max-width: 480px; } .widget-access-link { float: none; margin: 15px 0 0; } } @media screen and (max-width: 320px) { div.widget { max-width: 320px; } } @media only screen and (min-width: 1250px) { #widgets-left #available-widgets .widget { width: 49%; float: left; } .widget.ui-draggable-dragging { min-width: 49%; } #widgets-left #available-widgets .widget:nth-child(even) { float: right; } #widgets-right .sidebars-column-1, #widgets-right .sidebars-column-2 { float: left; width: 49%; } #widgets-right .sidebars-column-1 { margin-right: 2%; } #widgets-right.single-sidebar .sidebars-column-1, #widgets-right.single-sidebar .sidebars-column-2 { float: none; width: 100%; margin: 0; } } /* @import site-icon.css */ /*------------------------------------------------------------------------------ 28.0 - Site Icon ------------------------------------------------------------------------------*/ .site-icon-section { --site-icon-removal: #b32d2e; } .site-icon-preview { --site-icon-input-border: #8c8f94; --site-icon-preview-background: #fff; --site-icon-preview-browser-top: #dcdcde; --site-icon-preview-browser-bottom: #a7aaad; --site-icon-preview-browser-border: rgba(255, 255, 255, 0.2); --site-icon-address-bar-background: #f0f0f1; --site-icon-address-bar-close: #646970; --site-icon-address-bar-text: #3c434a; --site-icon-shadow-1: rgba(0, 0, 0, 0.1); --site-icon-shadow-2: rgba(0, 0, 0, 0.2); --site-icon-shadow-3: rgba(0, 0, 0, 0.5); direction: initial; display: flex; height: 60px; padding: 8px 0 0 8px; align-items: flex-start; position: relative; overflow: hidden; box-sizing: border-box; border: 1px solid var(--site-icon-input-border); border-radius: 4px; background-color: var(--site-icon-preview-background); width: 275px; } @media (prefers-color-scheme: dark) { .site-icon-preview { --site-icon-preview-browser-top: #2c3338; --site-icon-preview-browser-bottom: #111; --site-icon-address-bar-background: #3c434a; --site-icon-address-bar-close: #f0f0f1; --site-icon-address-bar-text: #f0f0f1; } } .site-icon-preview.settings { height: 88px; padding: 16px 0 0 16px; width: 350px; margin: 0 0 16px 0; } .site-icon-preview.crop { width: 258px; height: 100%; display: grid; grid-template-columns: 8px 1fr; grid-template-rows: 64px 1fr; padding-left: 0; row-gap: 16px; direction: inherit; } .site-icon-preview.hidden { display: none; } .site-icon-preview .direction-wrap { grid-template-columns: 44px 1fr; gap: 8px; display: grid; direction: ltr; height: 100%; width: 100%; } .site-icon-preview.settings .direction-wrap { grid-template-columns: 58px 1fr; gap: 16px; } .site-icon-preview:after { --after-size: 150%; aspect-ratio: 1/1; content: ""; display: block; position: absolute; top: 0; left: 0; width: var(--after-size);; transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125)); filter: blur(5px); opacity: 0.5; background: var(--site-icon-url); } .site-icon-preview .app-icon-preview { aspect-ratio: 1/1; border-radius: 10px; box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3); flex-shrink: 0; width: 100%; z-index: 1; } .site-icon-preview-browser { display: flex; padding: 4px 4px 0 12px; align-items: flex-start; gap: 16px; flex: 1 0 0; z-index: 1; border-top-left-radius: 10px; border-top: 1px solid var(--site-icon-preview-browser-border); border-left: 1px solid var(--site-icon-preview-browser-border); background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%); box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2); } .site-icon-preview .browser-buttons { width: 48px; height: 40px; fill: var(--site-icon-input-border); } .site-icon-preview-tab { padding: 8px; align-items: center; gap: 8px; flex: 1 0 0; border-radius: 4px; background-color: var(--site-icon-address-bar-background); box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1); display: grid; grid-template-columns: 24px auto 24px; } .site-icon-preview-browser .browser-icon-preview { box-shadow: 0 0 20px 0 var(--site-icon-shadow-1); } .site-icon-preview-tab > img, .site-icon-preview-tab > svg { width: 24px; height: 24px; } .site-icon-preview-tab > svg { fill: var(--site-icon-address-bar-close); } .site-icon-preview-site-title { color: var(--site-icon-address-bar-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 500; } .site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview { width: 64px; height: 64px; margin: 0; grid-column: 2; } .site-icon-preview-crop-modal .site-icon-preview-browser { grid-column: 2; } .site-icon-preview-crop-modal .image-preview-wrap { overflow: hidden; aspect-ratio: 1/1; } .site-icon-preview-crop-modal .image-preview-wrap.browser { width: 24px; height: 24px; } button.reset.remove-site-icon { color: var(--site-icon-removal); text-decoration: none; border-color: transparent; box-shadow: none; background: transparent; } button.reset.remove-site-icon:focus, button.reset.remove-site-icon:hover { background: var(--site-icon-removal); color: #fff; border-color: var(--site-icon-removal); box-shadow: 0 0 0 1px var(--site-icon-removal); } .site-icon-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; } /* @import l10n.css */ /*------------------------------------------------------------------------------ 27.0 - Localization ------------------------------------------------------------------------------*/ /* RTL except Hebrew (see below): Tahoma as the first font; */ body.rtl, body.rtl .press-this a.wp-switch-editor { font-family: Tahoma, Arial, sans-serif; } /* Arial is best for RTL headings. */ .rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 { font-family: Arial, sans-serif; font-weight: 600; } /* he_IL: Remove Tahoma from the font stack. Arial is best for Hebrew. */ body.locale-he-il, body.locale-he-il .press-this a.wp-switch-editor { font-family: Arial, sans-serif; } /* he_IL: Have be bold rather than italic. */ .locale-he-il em { font-style: normal; font-weight: 600; } /* zh_CN: Remove italic properties. */ .locale-zh-cn .howto, .locale-zh-cn .tablenav .displaying-num, .locale-zh-cn .js .input-with-default-title, .locale-zh-cn .link-to-original, .locale-zh-cn .inline-edit-row fieldset span.title, .locale-zh-cn .inline-edit-row fieldset span.checkbox-title, .locale-zh-cn #utc-time, .locale-zh-cn #local-time, .locale-zh-cn p.install-help, .locale-zh-cn p.help, .locale-zh-cn p.description, .locale-zh-cn span.description, .locale-zh-cn .form-wrap p { font-style: normal; } /* zh_CN: Enlarge dashboard widget 'Configure' link */ .locale-zh-cn .hdnle a { font-size: 12px; } /* zn_CH: Enlarge font size, set font-size: normal */ .locale-zh-cn form.upgrade .hint { font-style: normal; font-size: 100%; } /* zh_CN: Enlarge font-size. */ .locale-zh-cn #sort-buttons { font-size: 1em !important; } /* de_DE: Text needs more space for translation */ .locale-de-de #customize-header-actions .button, .locale-de-de-formal #customize-header-actions .button { padding: 0 5px 1px; /* default 0 10px 1px */ } .locale-de-de #customize-header-actions .spinner, .locale-de-de-formal #customize-header-actions .spinner { margin: 16px 3px 0; /* default 16px 4px 0 5px */ } body[class*="locale-de-"] .inline-edit-row fieldset label span.title, body[class*="locale-de-"] .inline-edit-row fieldset.inline-edit-date legend { width: 7em; /* default 6em */ } body[class*="locale-de-"] .inline-edit-row fieldset label span.input-text-wrap, body[class*="locale-de-"] .inline-edit-row fieldset .timestamp-wrap { margin-left: 7em; /* default 6em */ } /* ru_RU: Text needs more room to breathe. */ .locale-ru-ru #adminmenu { width: inherit; /* back-compat for pre-3.2 */ } .locale-ru-ru #adminmenu, .locale-ru-ru #wpbody { margin-left: 0; /* back-compat for pre-3.2 */ } .locale-ru-ru .inline-edit-row fieldset label span.title, .locale-ru-ru .inline-edit-row fieldset.inline-edit-date legend { width: 8em; /* default 6em */ } .locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, .locale-ru-ru .inline-edit-row fieldset .timestamp-wrap { margin-left: 8em; /* default 6em */ } .locale-ru-ru.post-php .tagsdiv .newtag, .locale-ru-ru.post-new-php .tagsdiv .newtag { width: 165px; /* default 180px - 15px */ } .locale-ru-ru.press-this .posting { margin-right: 277px; /* default 252px + 25px */ } .locale-ru-ru .press-this-sidebar { width: 265px; /* default 240px + 25px */ } .locale-ru-ru #customize-header-actions .button { padding: 0 5px 1px; /* default 0 10px 1px */ } .locale-ru-ru #customize-header-actions .spinner { margin: 16px 3px 0; /* default 16px 4px 0 5px */ } /* lt_LT: QuickEdit */ .locale-lt-lt .inline-edit-row fieldset label span.title, .locale-lt-lt .inline-edit-row fieldset.inline-edit-date legend { width: 8em; /* default 6em */ } .locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, .locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { margin-left: 8em; /* default 6em */ } /* Fix overridden width for adjusted locales */ body[class*="locale-de-"] .quick-edit-row-post fieldset.inline-edit-col-right label span.title, .locale-ru-ru .quick-edit-row-post fieldset.inline-edit-col-right label span.title, .locale-lt-lt .quick-edit-row-post fieldset.inline-edit-col-right label span.title { width: auto; } @media screen and (max-width: 782px) { body[class*="locale-de-"] .inline-edit-row fieldset label span.input-text-wrap, body[class*="locale-de-"] .inline-edit-row fieldset .timestamp-wrap, .locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, .locale-ru-ru .inline-edit-row fieldset .timestamp-wrap, .locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, .locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { margin-left: 0; } } /* @import site-health.css */ /* Note: Any Site Health selectors that use duplicate styling from the Privacy settings screen are styled in the Privacy section of edit.css */ .health-check-body h2 { line-height: 1.4; } .health-check-body h3 { padding: 0; font-weight: 400; } .site-health-progress-wrapper { margin-bottom: 1rem; } .site-health-progress { display: inline-block; height: 20px; width: 20px; margin: 0; border-radius: 100%; position: relative; font-weight: 600; font-size: 0.4rem; } .site-health-progress-count { position: absolute; display: block; height: 80px; width: 80px; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; border-radius: 100%; line-height: 6.3; font-size: 2em; } .loading .site-health-progress svg #bar { stroke-dashoffset: 0; stroke: #c3c4c7; animation: loadingPulse 3s infinite ease-in-out; } .site-health-progress svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke: #c3c4c7; stroke-width: 2em; } .site-health-progress svg #bar { stroke-dashoffset: 565; stroke: #d63638; } .green .site-health-progress #bar { stroke: #00a32a; } .green .site-health-progress .site-health-progress-label { color: #00a32a; } .orange .site-health-progress #bar { stroke: #dba617; } .orange .site-health-progress .site-health-progress-label { color: #dba617; } .site-health-progress-label { font-weight: 600; line-height: 20px; margin-left: 0.3rem; } @keyframes loadingPulse { 0% { stroke: #c3c4c7; } 50% { stroke: #72aee6; } 100% { stroke: #c3c4c7; } } .health-check-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .health-check-tabs-wrapper.tab-count-1 { grid-template-columns: 1fr; } .health-check-tabs-wrapper.tab-count-2 { grid-template-columns: 1fr 1fr; } .health-check-tabs-wrapper.tab-count-3 { grid-template-columns: 1fr 1fr 1fr; } .health-check-tab { display: block; /* IE 11 */ text-decoration: none; color: inherit; padding: 0.5rem 1rem 1rem; margin: 0 1rem; transition: box-shadow 0.5s ease-in-out; } .health-check-offscreen-nav-wrapper { position: relative; background: transparent; border: none; } .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { left: initial; } .health-check-offscreen-nav { display: none; position: absolute; padding-top: 10px; right: 0; top: 100%; width: 13rem; } .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { display: inline-block; } .health-check-offscreen-nav:before { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 5px; border-color: transparent transparent #ffffff; right: 20px; top: 5px; } .health-check-offscreen-nav .health-check-tab { background: #fff; box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); } .health-check-offscreen-nav .health-check-tab.active { box-shadow: inset 3px 0 #3582c4; font-weight: 600; } .health-check-body { max-width: 800px; margin: 0 auto; } .widefat.health-check-table th { font-size: 13px; } .health-check-table td:first-child { width: 30%; } .health-check-table td { width: 70%; } .health-check-table ul, .health-check-table ol { margin: 0; } .health-check-body li { line-height: 1.5; } .health-check-body .pass::before, .health-check-body .good::before { content: "\f147"; color: #00a32a; } .health-check-body .warning::before { content: "\f460"; color: #dba617; } .health-check-body .info::before { content: "\f348"; color: #72aee6; } .health-check-body .fail::before, .health-check-body .error::before { content: "\f335"; color: #d63638; } .site-health-copy-buttons { margin: 1rem 0; } .site-health-copy-buttons .copy-button-wrapper { display: inline-flex; align-items: center; margin: 0.5rem 0 1rem; } .site-health-copy-buttons .success { color: #007017; margin-left: 0.5rem; } .site-status-has-issues.hide { display: none; } .site-health-view-more { text-align: center; } .site-health-issues-wrapper:first-of-type { margin-top: 3rem; } .site-health-issues-wrapper { margin-bottom: 3rem; margin-top: 2rem; } .site-status-all-clear { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; width: 100%; margin: 0 0 3rem; } @media all and (min-width: 784px) { .site-status-all-clear { margin: 2rem 0 5rem; } } .site-status-all-clear.hide { display: none; } .site-status-all-clear .dashicons { font-size: 150px; height: 150px; margin-bottom: 2rem; width: 150px; } .site-status-all-clear .encouragement { font-size: 1.5rem; font-weight: 600; } .site-status-all-clear p { margin: 0; } .wp-core-ui .button.site-health-view-passed { position: relative; padding-right: 40px; padding-left: 20px; } .health-check-wp-paths-sizes.spinner { visibility: visible; float: none; margin: 0 4px; flex-shrink: 0; } /* Styling unique to the dashboard widget. */ #dashboard_site_health .site-health-details { padding-left: 16px; } #dashboard_site_health .site-health-details p:first-child { margin-top: 0; } #dashboard_site_health .site-health-details p:last-child { margin-bottom: 0; } #dashboard_site_health .health-check-widget { display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: minmax(64px, auto); column-gap: 16px; align-items: center; } #dashboard_site_health .site-health-progress-label { margin-left: 0; } .health-check-widget-title-section { margin-bottom: 0; text-align: center; } @media screen and (max-width: 480px) { #dashboard_site_health .health-check-widget { grid-template-columns: 100%; } } @media screen and (max-width: 782px) { .site-health-issues-wrapper .health-check-accordion-trigger { flex-direction: column; align-items: flex-start; } .health-check-accordion-trigger .badge { margin: 1em 0 0; } .health-check-table { table-layout: fixed; } .health-check-table th, .health-check-table td { box-sizing: border-box; display: block; width: 100%; word-wrap: break-word; } .widefat.health-check-table th, .health-check-table td:first-child { width: 100%; padding-bottom: 0; font-weight: 600; } .wp-core-ui .site-health-copy-buttons .copy-button { margin-bottom: 0; } } /* @import extensions.css */ /* * extensions.css — Modern WP admin patterns that aren't in WP core CSS. * * Naming: .wp-admin-* prefix to stay consistent with the WP class system * (we don't invent a separate "wpac-" or "wpa-" namespace). * * All values use --wpadmin-* tokens, so these patterns inherit color schemes. */ /* ─── SVG Icon ──────────────────────────────────────────────────────────── */ /* Base style for the .wp-admin-icon class emitted by (React) and * Components::icon() (PHP). Icons inherit text color via currentColor. */ .wp-admin-icon { fill: currentColor; vertical-align: middle; display: inline-block; flex-shrink: 0; } /* ─── Destructive filled button (companion to .button-link-delete) ────── */ .button.is-destructive, .wp-admin-button-danger.button { background: var(--wpadmin-error); border-color: var(--wpadmin-error); color: #fff; } .button.is-destructive:hover, .button.is-destructive:focus, .wp-admin-button-danger.button:hover, .wp-admin-button-danger.button:focus { background: #b62a2c; border-color: #b62a2c; color: #fff; } /* ─── Modal ─────────────────────────────────────────────────────────────── */ .wp-admin-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 100000; /* above WP admin bar (99999) */ padding: 20px; } .wp-admin-modal { background: var(--wpadmin-surface); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22), 0 4px 8px rgba(0, 0, 0, .08); width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .wp-admin-modal.is-small { max-width: 420px; } .wp-admin-modal.is-medium { max-width: 640px; } .wp-admin-modal.is-large { max-width: 880px; } .wp-admin-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--wpadmin-border); } .wp-admin-modal__title { font-size: 15px; font-weight: 600; color: var(--wpadmin-text); margin: 0; } .wp-admin-modal__close { background: transparent; border: 0; cursor: pointer; padding: 4px; border-radius: 3px; color: var(--wpadmin-text-subtle); display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .wp-admin-modal__close:hover { background: var(--wpadmin-surface-alt); color: var(--wpadmin-text); } .wp-admin-modal__body { padding: 20px; overflow-y: auto; color: var(--wpadmin-text); font-size: 14px; line-height: 1.55; } .wp-admin-modal__footer { padding: 14px 20px; border-top: 1px solid var(--wpadmin-border); background: var(--wpadmin-surface-alt); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* ─── DropdownMenu ──────────────────────────────────────────────────────── */ .wp-admin-dropdown { position: relative; display: inline-block; } .wp-admin-dropdown__menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: var(--wpadmin-surface); border: 1px solid var(--wpadmin-border); border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .04); padding: 4px; z-index: 90; list-style: none; margin: 0; } .wp-admin-dropdown__menu[hidden] { display: none; } .wp-admin-dropdown__menu.is-right { left: auto; right: 0; } .wp-admin-dropdown__item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; color: var(--wpadmin-text); text-decoration: none; border-radius: 3px; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; } .wp-admin-dropdown__item:hover, .wp-admin-dropdown__item:focus { background: var(--wpadmin-surface-alt); color: var(--wpadmin-text); outline: none; } .wp-admin-dropdown__item.is-destructive { color: var(--wpadmin-error); } .wp-admin-dropdown__item.is-destructive:hover { background: var(--wpadmin-error-bg); } .wp-admin-dropdown__separator { height: 1px; background: var(--wpadmin-border); margin: 4px 0; border: 0; list-style: none; } /* ─── Tooltip ───────────────────────────────────────────────────────────── */ .wp-admin-tooltip { position: relative; display: inline-block; } .wp-admin-tooltip__content { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--wpadmin-menu-bg); color: #fff; padding: 5px 9px; border-radius: 3px; font-size: 12px; font-weight: 400; white-space: nowrap; pointer-events: none; z-index: 91; opacity: 0; transition: opacity .12s; } .wp-admin-tooltip__content::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--wpadmin-menu-bg); } .wp-admin-tooltip:hover .wp-admin-tooltip__content, .wp-admin-tooltip:focus-within .wp-admin-tooltip__content { opacity: 1; } /* ─── Tab panels (pair with .nav-tab-wrapper) ──────────────────────────── */ .wp-admin-tab-panel { display: none; } .wp-admin-tab-panel.is-active { display: block; } /* ─── Media button preview ─────────────────────────────────────────────── */ .wp-admin-media { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wp-admin-media__preview { width: 48px; height: 48px; border: 1px solid var(--wpadmin-border); border-radius: 3px; background: var(--wpadmin-surface-alt) center/cover no-repeat; display: inline-block; flex-shrink: 0; } /* Dropzone variant — dashed border, drag-drop friendly, click anywhere */ .wp-admin-media-dropzone { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--wpadmin-border); border-radius: 6px; padding: 14px 16px; background: var(--wpadmin-surface); cursor: pointer; transition: border-color .15s, background .15s; position: relative; font-size: 13px; color: var(--wpadmin-text-subtle); } .wp-admin-media-dropzone:hover { border-color: #a7aaad; } .wp-admin-media-dropzone.is-dragover { border-color: var(--wpadmin-primary); background: rgba(34, 113, 177, .06); color: var(--wpadmin-primary); } .wp-admin-media-dropzone__label { flex: 1; } /* ─── Welcome Panel — simple/legacy form ──────────────────────────────── */ /* * WP 6.x redesigned .welcome-panel as a dark hero + white 3-column grid, * expecting .welcome-panel-header + .welcome-panel-column-container as * children. The simpler pattern most plugin tutorials use — a single * .welcome-panel-content with title + description + CTA — inherits the * dark hero styling and looks broken. * * We detect the simple form via :has() and restore sensible card styling. * The full WP 6 dashboard structure (header + columns) is untouched. */ .welcome-panel:has(> .welcome-panel-content:only-child) { background: var(--wpadmin-surface); border: 1px solid var(--wpadmin-border); border-radius: var(--wpadmin-radius); padding: 0; color: var(--wpadmin-text); overflow: visible; position: relative; } .welcome-panel > .welcome-panel-content:only-child { min-height: 0; display: block; padding: 28px 32px; } .welcome-panel > .welcome-panel-content:only-child h2 { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--wpadmin-text); margin: 0 0 8px; } .welcome-panel > .welcome-panel-content:only-child .about-description { font-size: 14px; line-height: 1.55; color: var(--wpadmin-text-subtle); margin: 0 0 18px; max-width: 640px; } .welcome-panel > .welcome-panel-content:only-child p { margin: 0 0 12px; } /* ─── Status badge ──────────────────────────────────────────────────────── */ .wp-admin-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--wpadmin-surface-alt); color: var(--wpadmin-text-subtle); line-height: 1.6; } .wp-admin-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .wp-admin-status.is-active { background: var(--wpadmin-success-bg); color: var(--wpadmin-success); } .wp-admin-status.is-error { background: var(--wpadmin-error-bg); color: var(--wpadmin-error); } .wp-admin-status.is-warning { background: var(--wpadmin-warning-bg); color: #8a6914; } .wp-admin-status.is-info { background: var(--wpadmin-info-bg); color: #1d6c92; } /* ─── Stat card (dashboard widget) ─────────────────────────────────────── */ .wp-admin-statcard { background: var(--wpadmin-surface); border: 1px solid var(--wpadmin-border); border-radius: var(--wpadmin-radius); padding: var(--wpadmin-space-5); } .wp-admin-statcard__label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--wpadmin-text-subtle); margin-bottom: 4px; } .wp-admin-statcard__value { font-size: 28px; font-weight: 600; color: var(--wpadmin-text); line-height: 1.1; margin-bottom: 4px; } .wp-admin-statcard__delta { font-size: 12px; color: var(--wpadmin-text-subtle); } .wp-admin-statcard__delta.is-up { color: var(--wpadmin-success); } .wp-admin-statcard__delta.is-down { color: var(--wpadmin-error); } /* ─── Activity feed item ───────────────────────────────────────────────── */ .wp-admin-activity { display: flex; gap: var(--wpadmin-space-3); padding: var(--wpadmin-space-3) 0; border-bottom: 1px solid var(--wpadmin-border); } .wp-admin-activity:last-child { border-bottom: 0; } .wp-admin-activity__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wpadmin-surface-alt); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--wpadmin-text-subtle); font-size: 13px; font-weight: 600; } .wp-admin-activity__body { flex: 1; min-width: 0; } .wp-admin-activity__text { font-size: 13px; color: var(--wpadmin-text); line-height: 1.5; } .wp-admin-activity__text strong { font-weight: 600; } .wp-admin-activity__time { font-size: 12px; color: var(--wpadmin-text-subtle); margin-top: 2px; } /* ─── Empty state ──────────────────────────────────────────────────────── */ .wp-admin-empty { text-align: center; padding: var(--wpadmin-space-10) var(--wpadmin-space-5); color: var(--wpadmin-text-subtle); } .wp-admin-empty__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--wpadmin-surface-alt); margin: 0 auto var(--wpadmin-space-4); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--wpadmin-text-subtle); } .wp-admin-empty__title { font-size: 16px; font-weight: 600; color: var(--wpadmin-text); margin-bottom: var(--wpadmin-space-2); } .wp-admin-empty__description { font-size: 13px; margin-bottom: var(--wpadmin-space-5); max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* ─── Toggle switch (matches Gutenberg .components-form-toggle) ────────── */ .wp-admin-toggle { display: inline-flex; align-items: center; gap: var(--wpadmin-space-3); cursor: pointer; } .wp-admin-toggle__input { position: absolute; opacity: 0; pointer-events: none; } .wp-admin-toggle__track { position: relative; width: 36px; height: 18px; background: #c3c4c7; border-radius: 9px; transition: background .15s; flex-shrink: 0; } .wp-admin-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .wp-admin-toggle__input:checked + .wp-admin-toggle__track { background: var(--wpadmin-primary); } .wp-admin-toggle__input:checked + .wp-admin-toggle__track::after { transform: translateX(18px); } .wp-admin-toggle__input:focus-visible + .wp-admin-toggle__track { box-shadow: 0 0 0 2px var(--wpadmin-focus-ring); } .wp-admin-toggle__label { font-size: 13px; color: var(--wpadmin-text); } /* ─── Help tip (small "?" with hover) ──────────────────────────────────── */ .wp-admin-helptip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--wpadmin-text-subtle); color: #fff; font-size: 11px; font-weight: 600; cursor: help; vertical-align: middle; position: relative; } .wp-admin-helptip::before { content: "?"; } .wp-admin-helptip:hover::after { content: attr(data-tip); position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--wpadmin-menu-bg); color: #fff; padding: 6px 10px; border-radius: var(--wpadmin-radius); font-size: 12px; font-weight: 400; white-space: nowrap; z-index: 10; pointer-events: none; } /* ─── WP Pointer (callout for new features) ────────────────────────────── */ .wp-admin-pointer { position: relative; background: var(--wpadmin-surface); border: 1px solid var(--wpadmin-border); border-radius: var(--wpadmin-radius); padding: var(--wpadmin-space-5); max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .wp-admin-pointer::before { content: ""; position: absolute; left: -8px; top: 16px; width: 14px; height: 14px; background: var(--wpadmin-surface); border-left: 1px solid var(--wpadmin-border); border-bottom: 1px solid var(--wpadmin-border); transform: rotate(45deg); } .wp-admin-pointer__title { font-size: 15px; font-weight: 600; color: var(--wpadmin-text); margin-bottom: var(--wpadmin-space-2); } .wp-admin-pointer__body { font-size: 13px; color: var(--wpadmin-text-subtle); line-height: 1.5; margin-bottom: var(--wpadmin-space-4); } .wp-admin-pointer__actions { display: flex; gap: var(--wpadmin-space-2); } /* ─── Skeleton loader (placeholder while content loads) ────────────────── */ .wp-admin-skeleton { display: block; background-color: var(--wpadmin-border); background-image: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100% ); background-repeat: no-repeat; background-size: 50% 100%; background-position: -50% 0; border-radius: var(--wpadmin-radius); height: 12px; animation: wp-admin-skeleton-shimmer 1.4s linear infinite; } .wp-admin-skeleton + .wp-admin-skeleton { margin-top: 8px; } .wp-admin-skeleton.is-title { height: 18px; width: 50%; } .wp-admin-skeleton.is-text { width: 100%; } .wp-admin-skeleton.is-short { width: 60%; } @keyframes wp-admin-skeleton-shimmer { to { background-position: 150% 0; } } /* ─── Spinner override (CSS-only, no image asset) ───────────────────────── */ /* * WP core's .spinner uses url(../images/spinner.gif) which doesn't ship * with this package. Override with a CSS-only rotating spinner so the * component works standalone. The selector matches WP's specificity. */ .spinner.is-active, span.spinner.is-active { background: none; border: 2px solid var(--wpadmin-border); border-top-color: var(--wpadmin-primary); border-radius: 50%; width: 16px; height: 16px; margin: 4px 10px 0; animation: wp-admin-spinner-rotate .8s linear infinite; opacity: 1; } @keyframes wp-admin-spinner-rotate { to { transform: rotate(360deg); } }