/** * Colors */ /** * Breakpoints & Media Queries */ /** * SCSS Variables. * * Please use variables from this sheet to ensure consistency across the UI. * Don't add to this sheet unless you're pretty sure the value will be reused in many places. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. */ /** * Colors */ /** * Fonts & basic variables. */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Dimensions. */ /** * Shadows. */ /** * Editor widths. */ /** * Block & Editor UI. */ /** * Block paddings. */ /** * React Native specific. * These variables do not appear to be used anywhere else. */ /** * Breakpoint mixins */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * Focus styles. */ /** * Applies editor left position to the selector passed as argument */ /** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ /** * Reset default styles for JavaScript UI based pages. * This is a WP-admin agnostic reset */ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ :root { --wp-admin-theme-color: #007cba; --wp-admin-theme-color-darker-10: #006ba1; --wp-admin-theme-color-darker-20: #005a87; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { :root { --wp-admin-border-width-focus: 1.5px; } } .components-panel__header.interface-complementary-area-header__small { background: #fff; padding-left: 4px; } .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } @media (min-width: 782px) { .components-panel__header.interface-complementary-area-header__small { display: none; } } .interface-complementary-area-header { background: #fff; padding-left: 4px; } .interface-complementary-area-header .components-button.has-icon { display: none; margin-right: auto; } .interface-complementary-area-header .components-button.has-icon ~ .components-button { margin-right: 0; } @media (min-width: 782px) { .interface-complementary-area-header .components-button.has-icon { display: flex; } } .interface-complementary-area { background: #fff; color: #1e1e1e; } @media (min-width: 600px) { .interface-complementary-area { -webkit-overflow-scrolling: touch; } } @media (min-width: 782px) { .interface-complementary-area { width: 280px; } } .interface-complementary-area .components-panel { border: none; position: relative; z-index: 0; } .interface-complementary-area .components-panel__header { position: sticky; top: 0; z-index: 1; } .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { top: 48px; } @media (min-width: 782px) { .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { top: 0; } } .interface-complementary-area p { margin-top: 0; } .interface-complementary-area h2, .interface-complementary-area h3 { font-size: 13px; color: #1e1e1e; margin-bottom: 1.5em; } .interface-complementary-area hr { border-top: none; border-bottom: 1px solid #f0f0f0; margin: 1.5em 0; } .interface-complementary-area div.components-toolbar-group, .interface-complementary-area div.components-toolbar { box-shadow: none; margin-bottom: 1.5em; } .interface-complementary-area div.components-toolbar-group:last-child, .interface-complementary-area div.components-toolbar:last-child { margin-bottom: 0; } .interface-complementary-area .block-editor-skip-to-selected-block:focus { top: auto; left: 10px; bottom: 10px; right: auto; } @media (min-width: 782px) { body.js.is-fullscreen-mode { margin-top: -32px; height: calc(100% + 32px); } body.js.is-fullscreen-mode #adminmenumain, body.js.is-fullscreen-mode #wpadminbar { display: none; } body.js.is-fullscreen-mode #wpcontent, body.js.is-fullscreen-mode #wpfooter { margin-right: 0; } } html.interface-interface-skeleton__html-container { position: fixed; width: 100%; } @media (min-width: 782px) { html.interface-interface-skeleton__html-container { position: initial; width: initial; } } .interface-interface-skeleton { display: flex; flex-direction: row; height: auto; max-height: 100%; position: fixed; top: 46px; right: 0; left: 0; bottom: 0; } @media (min-width: 783px) { .interface-interface-skeleton { top: 32px; } .is-fullscreen-mode .interface-interface-skeleton { top: 0; } } .interface-interface-skeleton__editor { display: flex; flex-direction: column; flex: 0 1 100%; overflow: hidden; } .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */ right: 0; } @media (min-width: 783px) { .interface-interface-skeleton { right: 160px; } } .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ } @media (min-width: 783px) { .auto-fold .interface-interface-skeleton { right: 36px; } } @media (min-width: 961px) { .auto-fold .interface-interface-skeleton { right: 160px; } } /* Sidebar manually collapsed. */ .folded .interface-interface-skeleton { right: 0; } @media (min-width: 783px) { .folded .interface-interface-skeleton { right: 36px; } } body.is-fullscreen-mode .interface-interface-skeleton { right: 0 !important; } .interface-interface-skeleton__body { flex-grow: 1; display: flex; overflow: auto; overscroll-behavior-y: none; } @media (min-width: 782px) { .has-footer .interface-interface-skeleton__body { padding-bottom: 25px; } } .interface-interface-skeleton__content { flex-grow: 1; display: flex; flex-direction: column; overflow: auto; } .interface-interface-skeleton__secondary-sidebar, .interface-interface-skeleton__sidebar { display: block; flex-shrink: 0; position: absolute; z-index: 100000; top: 0; left: 0; bottom: 0; right: 0; background: #fff; color: #1e1e1e; } @media (min-width: 782px) { .interface-interface-skeleton__secondary-sidebar, .interface-interface-skeleton__sidebar { position: relative !important; z-index: 90; width: auto; } } .interface-interface-skeleton__sidebar { overflow: auto; } @media (min-width: 782px) { .interface-interface-skeleton__sidebar { border-right: 1px solid #e0e0e0; } } @media (min-width: 782px) { .interface-interface-skeleton__secondary-sidebar { border-left: 1px solid #e0e0e0; } } .interface-interface-skeleton__header { flex-shrink: 0; height: auto; border-bottom: 1px solid #e0e0e0; z-index: 30; color: #1e1e1e; } .interface-interface-skeleton__footer { height: auto; flex-shrink: 0; border-top: 1px solid #e0e0e0; color: #1e1e1e; position: absolute; bottom: 0; right: 0; width: 100%; background-color: #fff; z-index: 90; display: none; } @media (min-width: 782px) { .interface-interface-skeleton__footer { display: flex; } } .interface-interface-skeleton__footer .block-editor-block-breadcrumb { z-index: 30; display: flex; background: #fff; height: 24px; align-items: center; font-size: 13px; padding: 0 18px; } .interface-interface-skeleton__actions { z-index: 100000; position: fixed !important; top: -9999em; bottom: auto; right: auto; left: 0; width: 280px; color: #1e1e1e; } .interface-interface-skeleton__actions:focus { top: auto; bottom: 0; } .interface-pinned-items { display: flex; } .interface-pinned-items .components-button:not(:first-child) { display: none; } @media (min-width: 600px) { .interface-pinned-items .components-button:not(:first-child) { display: flex; } } .interface-pinned-items .components-button { margin-right: 4px; } .interface-pinned-items .components-button svg { max-width: 24px; max-height: 24px; } .wp-block[data-type="core/widget-area"] { max-width: 700px; margin-right: auto; margin-left: auto; } .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title:hover { background: inherit; } .wp-block-widget-area > .components-panel__body > div > .block-editor-inner-blocks { padding-top: 24px; } .wp-block-widget-area > .components-panel__body > div > .block-editor-inner-blocks > .block-editor-block-list__layout { min-height: 32px; } .edit-widgets-header { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; overflow: auto; } @media (min-width: 600px) { .edit-widgets-header { overflow: visible; } } .edit-widgets-header__navigable-toolbar-wrapper { display: flex; align-items: center; justify-content: center; } .edit-widgets-header__title { font-size: 20px; padding: 0; margin: 0 0 0 20px; } .edit-widgets-header__actions { display: flex; } .edit-widgets-header-toolbar { border: none; } .edit-widgets-header-toolbar > .components-button.has-icon, .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon { height: 36px; min-width: 36px; padding: 6px; } .edit-widgets-header-toolbar > .components-button.has-icon.is-pressed, .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.is-pressed { background: #1e1e1e; } .edit-widgets-header-toolbar > .components-button.has-icon:focus:not(:disabled), .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff; outline: 1px solid transparent; } .edit-widgets-header-toolbar > .components-button.has-icon::before, .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon::before { display: none; } .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle { padding-right: 8px; padding-left: 8px; } @media (min-width: 600px) { .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle { padding-right: 12px; padding-left: 12px; } } .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle::after { content: none; } .edit-widgets-keyboard-shortcut-help-modal__section { margin: 0 0 2rem 0; } .edit-widgets-keyboard-shortcut-help-modal__main-shortcuts .edit-widgets-keyboard-shortcut-help-modal__shortcut-list { margin-top: -25px; } .edit-widgets-keyboard-shortcut-help-modal__section-title { font-size: 0.9rem; font-weight: 600; } .edit-widgets-keyboard-shortcut-help-modal__shortcut { display: flex; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid #ddd; margin-bottom: 0; } .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child { border-bottom: 1px solid #ddd; } .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty { display: none; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-term { font-weight: 600; margin: 0 1rem 0 0; text-align: left; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-description { flex: 1; margin: 0; flex-basis: auto; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { display: block; background: none; margin: 0; padding: 0; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { margin-top: 10px; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-key { padding: 0.25rem 0.5rem; border-radius: 8%; margin: 0 0.2rem 0 0.2rem; } .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child { margin: 0 0.2rem 0 0; } .edit-widgets-more-menu { margin-right: -4px; } .edit-widgets-more-menu .components-button { width: auto; padding: 0 2px; } @media (min-width: 600px) { .edit-widgets-more-menu { margin-right: 0; } .edit-widgets-more-menu .components-button { padding: 0 4px; } } .edit-widgets-more-menu__content .components-popover__content { min-width: 280px; } @media (min-width: 480px) { .edit-widgets-more-menu__content .components-popover__content { width: auto; max-width: 480px; } } .edit-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu { padding: 0; } .components-popover.edit-widgets-more-menu__content { z-index: 99998; } .components-panel__header.edit-widgets-sidebar__panel-tabs { justify-content: flex-start; padding-right: 0; padding-left: 4px; border-top: 0; margin-top: 0; } .components-panel__header.edit-widgets-sidebar__panel-tabs ul { display: flex; } .components-panel__header.edit-widgets-sidebar__panel-tabs li { margin: 0; } .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon { display: none; margin-right: auto; } @media (min-width: 782px) { .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon { display: flex; } } .components-button.edit-widgets-sidebar__panel-tab { border-radius: 0; height: 49px; background: transparent; border: none; box-shadow: none; cursor: pointer; display: inline-block; padding: 3px 15px; margin-right: 0; font-weight: 400; color: #1e1e1e; } .components-button.edit-widgets-sidebar__panel-tab::after { content: attr(data-label); display: block; font-weight: 600; height: 0; overflow: hidden; speak: none; visibility: hidden; } .components-button.edit-widgets-sidebar__panel-tab.is-active { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); font-weight: 600; position: relative; } .components-button.edit-widgets-sidebar__panel-tab.is-active::before { content: ""; position: absolute; top: 0; bottom: 1px; left: 0; right: 0; border-bottom: 4px solid transparent; } .components-button.edit-widgets-sidebar__panel-tab:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } .components-button.edit-widgets-sidebar__panel-tab.is-active:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); } .edit-widgets-widget-areas__top-container { display: flex; padding: 16px; } .edit-widgets-widget-areas__top-container .block-editor-block-icon { margin-left: 16px; } .edit-widgets-notices__snackbar { position: fixed; left: 0; bottom: 20px; padding-right: 16px; padding-left: 16px; } .edit-widgets-notices__snackbar { /* Set left position when auto-fold is not on the body element. */ right: 0; } @media (min-width: 783px) { .edit-widgets-notices__snackbar { right: 160px; } } .auto-fold .edit-widgets-notices__snackbar { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ } @media (min-width: 783px) { .auto-fold .edit-widgets-notices__snackbar { right: 36px; } } @media (min-width: 961px) { .auto-fold .edit-widgets-notices__snackbar { right: 160px; } } /* Sidebar manually collapsed. */ .folded .edit-widgets-notices__snackbar { right: 0; } @media (min-width: 783px) { .folded .edit-widgets-notices__snackbar { right: 36px; } } body.is-fullscreen-mode .edit-widgets-notices__snackbar { right: 0 !important; } .edit-widgets-notices__dismissible .components-notice, .edit-widgets-notices__pinned .components-notice { box-sizing: border-box; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 0 12px; min-height: 60px; } .edit-widgets-notices__dismissible .components-notice .components-notice__dismiss, .edit-widgets-notices__pinned .components-notice .components-notice__dismiss { margin-top: 12px; } .edit-widgets-layout__inserter-panel { height: 100%; display: flex; flex-direction: column; } .edit-widgets-layout__inserter-panel .block-editor-inserter__menu { overflow: hidden; } .edit-widgets-layout__inserter-panel-header { padding-top: 8px; padding-left: 8px; display: flex; justify-content: flex-end; } @media (min-width: 782px) { .edit-widgets-layout__inserter-panel-header { display: none; } } .edit-widgets-layout__inserter-panel-content { height: calc(100% - 36px - 8px); } @media (min-width: 782px) { .edit-widgets-layout__inserter-panel-content { height: 100%; } } .edit-widgets-welcome-guide { width: 312px; } .edit-widgets-welcome-guide__image { background: #00a0d2; margin: 0 0 16px; } .edit-widgets-welcome-guide__heading { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 24px; line-height: 1.4; margin: 16px 0 16px 0; padding: 0 32px; } .edit-widgets-welcome-guide__text { font-size: 13px; line-height: 1.4; margin: 0 0 24px 0; padding: 0 32px; } .edit-widgets-welcome-guide__inserter-icon { margin: 0 4px; vertical-align: text-top; } .edit-widgets-block-editor { position: relative; background: #f0f0f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .edit-widgets-block-editor .components-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon { padding: 6px; } html.wp-toolbar { background: #fff; } body.appearance_page_gutenberg-widgets, body.widgets-php { background: #fff; /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ } body.appearance_page_gutenberg-widgets #wpcontent, body.widgets-php #wpcontent { padding-right: 0; } body.appearance_page_gutenberg-widgets #wpbody-content, body.widgets-php #wpbody-content { padding-bottom: 0; } body.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta), body.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) { display: none; } body.appearance_page_gutenberg-widgets #wpfooter, body.widgets-php #wpfooter { display: none; } body.appearance_page_gutenberg-widgets .a11y-speak-region, body.widgets-php .a11y-speak-region { right: -1px; top: -1px; } body.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu::after, body.appearance_page_gutenberg-widgets ul#adminmenu > li.current > a.current::after, body.widgets-php ul#adminmenu a.wp-has-current-submenu::after, body.widgets-php ul#adminmenu > li.current > a.current::after { border-left-color: #fff; } body.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type, body.widgets-php .media-frame select.attachment-filters:last-of-type { width: auto; max-width: 100%; } .blocks-widgets-container, .components-modal__frame { box-sizing: border-box; } .blocks-widgets-container *, .blocks-widgets-container *::before, .blocks-widgets-container *::after, .components-modal__frame *, .components-modal__frame *::before, .components-modal__frame *::after { box-sizing: inherit; } @media (min-width: 600px) { .blocks-widgets-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height: calc(100vh - 46px); } } @media (min-width: 782px) { .blocks-widgets-container { min-height: calc(100vh - 32px); } } .blocks-widgets-container .interface-interface-skeleton__content { background-color: #f0f0f0; } .blocks-widgets-container .editor-style-wrapper { max-width: 700px; margin: auto; } .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item { display: none; } body.admin-color-light { --wp-admin-theme-color: #0085ba; --wp-admin-theme-color-darker-10: #0073a1; --wp-admin-theme-color-darker-20: #006187; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-light { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-modern { --wp-admin-theme-color: #3858e9; --wp-admin-theme-color-darker-10: #2145e6; --wp-admin-theme-color-darker-20: #183ad6; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-modern { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-blue { --wp-admin-theme-color: #096484; --wp-admin-theme-color-darker-10: #07526c; --wp-admin-theme-color-darker-20: #064054; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-blue { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-coffee { --wp-admin-theme-color: #46403c; --wp-admin-theme-color-darker-10: #383330; --wp-admin-theme-color-darker-20: #2b2724; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-coffee { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-ectoplasm { --wp-admin-theme-color: #523f6d; --wp-admin-theme-color-darker-10: #46365d; --wp-admin-theme-color-darker-20: #3a2c4d; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-ectoplasm { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-midnight { --wp-admin-theme-color: #e14d43; --wp-admin-theme-color-darker-10: #dd382d; --wp-admin-theme-color-darker-20: #d02c21; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-midnight { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-ocean { --wp-admin-theme-color: #627c83; --wp-admin-theme-color-darker-10: #576e74; --wp-admin-theme-color-darker-20: #4c6066; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-ocean { --wp-admin-border-width-focus: 1.5px; } } body.admin-color-sunrise { --wp-admin-theme-color: #dd823b; --wp-admin-theme-color-darker-10: #d97426; --wp-admin-theme-color-darker-20: #c36922; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.admin-color-sunrise { --wp-admin-border-width-focus: 1.5px; } }