/** * Colors */ /** * Breakpoints & Media Queries */ /** * 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 UI. */ /** * Border radii. */ /** * Block paddings. */ /** * 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; } .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; overflow: visible; } @media (min-width: 600px) { .interface-complementary-area { z-index: auto; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } } @media (min-width: 782px) { .interface-complementary-area { width: 280px; } } .interface-complementary-area > .components-panel { border-right: none; border-left: none; overflow: auto; -webkit-overflow-scrolling: touch; height: auto; max-height: calc(100vh - 142px); margin-top: -1px; margin-bottom: -1px; position: relative; } @media (min-width: 600px) { .interface-complementary-area > .components-panel { overflow: visible; height: auto; max-height: none; } } .interface-complementary-area > .components-panel .components-panel__header { position: fixed; z-index: 1; top: 0; right: 0; left: 0; height: 48px; } @media (min-width: 600px) { .interface-complementary-area > .components-panel .components-panel__header { position: inherit; top: auto; right: auto; left: auto; } } .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-grow: 1; } .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; } } /* Mobile menu opened. */ @media (max-width: 783px) { .auto-fold .wp-responsive-open .interface-interface-skeleton { right: 190px; } } /* In small screens with responsive menu expanded there is small white space. */ @media (max-width: 600px) { .auto-fold .wp-responsive-open .interface-interface-skeleton { margin-right: -18px; } } 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; } .interface-interface-skeleton__content { flex-grow: 1; display: flex; flex-direction: column; overflow: auto; } .interface-interface-skeleton__left-sidebar, .interface-interface-skeleton__sidebar { display: block; width: auto; 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__left-sidebar, .interface-interface-skeleton__sidebar { position: relative !important; z-index: 90; } } @media (min-width: 782px) { .interface-interface-skeleton__sidebar { overflow: auto; border-right: 1px solid #e0e0e0; } } @media (min-width: 782px) { .interface-interface-skeleton__left-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; position: -webkit-sticky; position: sticky; top: 0; } @media (min-width: 600px) { .interface-interface-skeleton__header { position: initial; top: 0; } } .interface-interface-skeleton__footer { height: auto; flex-shrink: 0; border-top: 1px solid #e0e0e0; color: #1e1e1e; position: fixed; bottom: 0; width: 100%; background-color: #fff; z-index: 90; display: none; } .is-focusing-regions .interface-interface-skeleton__footer[role="region"] { position: fixed; } @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 { margin-right: 4px; } .interface-pinned-items .components-button svg { max-width: 24px; max-height: 24px; } .edit-post-header { height: 60px; background: #fff; display: flex; flex-wrap: wrap; align-items: center; max-width: 100vw; } @media (min-width: 280px) { .edit-post-header { flex-wrap: nowrap; } } .edit-post-header > .edit-post-header__settings { order: 1; } @supports ((position: -webkit-sticky) or (position: sticky)) { .edit-post-header > .edit-post-header__settings { order: initial; } } .edit-post-header__toolbar { display: flex; flex-grow: 1; } .edit-post-header__toolbar .table-of-contents { display: none; } @media (min-width: 600px) { .edit-post-header__toolbar .table-of-contents { display: block; } } .edit-post-header__settings { display: inline-flex; align-items: center; flex-wrap: wrap; padding-left: 4px; /** * Buttons in the Toolbar */ } @media (min-width: 600px) { .edit-post-header__settings { padding-left: 16px; } } .edit-post-header__settings .editor-post-saved-state, .edit-post-header__settings .components-button.components-button { margin-left: 4px; } @media (min-width: 600px) { .edit-post-header__settings .editor-post-saved-state, .edit-post-header__settings .components-button.components-button { margin-left: 12px; } } .edit-post-header__settings .editor-post-saved-state, .edit-post-header__settings .components-button.is-tertiary { padding: 0 6px; } .edit-post-header__settings .edit-post-more-menu .components-button, .edit-post-header__settings .interface-pinned-items .components-button { margin-left: 0; } .edit-post-header-preview__grouping-external { display: flex; position: relative; padding-bottom: 0; } .edit-post-header-preview__button-external { padding-right: 8px; margin-left: auto; width: 100%; display: flex; justify-content: flex-start; } .edit-post-header-preview__button-external svg { margin-right: auto; } .edit-post-post-preview-dropdown .components-popover__content > div { padding-bottom: 0; } .show-icon-labels.interface-pinned-items .components-button.has-icon, .show-icon-labels .edit-post-header .components-button.has-icon, .edit-post-header__dropdown .components-button.has-icon { width: auto; } .show-icon-labels.interface-pinned-items .components-button.has-icon svg, .show-icon-labels .edit-post-header .components-button.has-icon svg, .edit-post-header__dropdown .components-button.has-icon svg { display: none; } .show-icon-labels.interface-pinned-items .components-button.has-icon::after, .show-icon-labels .edit-post-header .components-button.has-icon::after, .edit-post-header__dropdown .components-button.has-icon::after { content: attr(aria-label); } .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled="true"], .show-icon-labels .edit-post-header .components-button.has-icon[aria-disabled="true"], .edit-post-header__dropdown .components-button.has-icon[aria-disabled="true"] { background-color: transparent; } .show-icon-labels.interface-pinned-items .is-tertiary:active, .show-icon-labels .edit-post-header .is-tertiary:active, .edit-post-header__dropdown .is-tertiary:active { box-shadow: 0 0 0 1.5px #007cba; box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); background-color: transparent; } .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__block-toolbar .components-button.has-icon svg, .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon svg, .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg, .show-icon-labels .edit-post-header .edit-post-header-toolbar__block-toolbar .components-button.has-icon svg, .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon svg, .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle svg, .edit-post-header__dropdown .edit-post-header-toolbar__block-toolbar .components-button.has-icon svg, .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon svg, .edit-post-header__dropdown .components-button.has-icon.button-toggle svg { display: block; } .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__block-toolbar .components-button.has-icon::after, .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon::after, .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after, .show-icon-labels .edit-post-header .edit-post-header-toolbar__block-toolbar .components-button.has-icon::after, .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon::after, .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle::after, .edit-post-header__dropdown .edit-post-header-toolbar__block-toolbar .components-button.has-icon::after, .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon::after, .edit-post-header__dropdown .components-button.has-icon.button-toggle::after { content: none; } .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon, .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon, .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon { width: 60px; } .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon, .show-icon-labels .edit-post-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon, .edit-post-header__dropdown .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { display: block; } .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button, .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .show-icon-labels .edit-post-header .interface-pinned-items .components-button, .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .edit-post-header__dropdown .interface-pinned-items .components-button { padding-right: 8px; padding-left: 8px; } @media (min-width: 600px) { .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button, .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .show-icon-labels .edit-post-header .interface-pinned-items .components-button, .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle, .edit-post-header__dropdown .interface-pinned-items .components-button { padding-right: 12px; padding-left: 12px; } } .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle, .show-icon-labels .edit-post-header .components-dropdown-menu__toggle, .edit-post-header__dropdown .components-dropdown-menu__toggle { margin-right: 8px; padding-right: 8px; padding-left: 8px; } @media (min-width: 600px) { .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle, .show-icon-labels .edit-post-header .components-dropdown-menu__toggle, .edit-post-header__dropdown .components-dropdown-menu__toggle { margin-right: 12px; padding-right: 12px; padding-left: 12px; } } .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after, .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after, .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after { content: none; } .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after, .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after, .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after { content: none; } @media (min-width: 600px) { .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after, .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after, .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after { content: attr(aria-label); } } .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button, .edit-post-header__dropdown .components-button.editor-history__undo, .edit-post-header__dropdown .components-button.editor-history__redo, .edit-post-header__dropdown .table-of-contents .components-button, .edit-post-header__dropdown .components-button.block-editor-block-navigation { margin: 0; padding: 6px 40px 6px 6px; width: 14.625rem; text-align: right; justify-content: flex-start; } .show-icon-labels.interface-pinned-items { padding: 6px 12px 12px; margin-top: 0; margin-bottom: 0; margin-right: -12px; margin-left: -12px; border-bottom: 1px solid #ccc; display: block; } .show-icon-labels.interface-pinned-items > .components-button.has-icon { margin: 0; padding: 6px 8px 6px 6px; width: 14.625rem; justify-content: flex-start; } .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded="true"] svg { display: block; max-width: 24px; } .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded="false"] { padding-right: 40px; } .show-icon-labels.interface-pinned-items > .components-button.has-icon svg { margin-left: 8px; } .edit-post-fullscreen-mode-close.has-icon { display: none; } @media (min-width: 782px) { .edit-post-fullscreen-mode-close.has-icon { display: flex; align-items: center; -ms-grid-row-align: stretch; align-self: stretch; border: none; background: #23282e; color: #fff; border-radius: 0; height: auto; width: 60px; } .edit-post-fullscreen-mode-close.has-icon:hover { background: #32373d; } .edit-post-fullscreen-mode-close.has-icon:active { color: #fff; } .edit-post-fullscreen-mode-close.has-icon:focus { box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 2.5px #fff; box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 2.5px #fff; } } .edit-post-fullscreen-mode-close_site-icon { width: 36px; } .edit-post-header-toolbar { display: inline-flex; align-items: center; border: none; } .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button { display: none; } @media (min-width: 600px) { .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button { display: inline-flex; } } .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle { display: inline-flex; } .edit-post-header-toolbar .block-editor-block-navigation { display: none; } @media (min-width: 600px) { .edit-post-header-toolbar .block-editor-block-navigation { display: flex; } } .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon, .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon { height: 36px; min-width: 36px; padding: 6px; } .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon.is-pressed, .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon.is-pressed { background: #1e1e1e; } .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon:focus:not(:disabled), .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) { box-shadow: 0 0 0 1.5px #007cba, inset 0 0 0 1px #fff; box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 1px #fff; outline: 1px solid transparent; } .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon::before, .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon::before { display: none; } .edit-post-header-toolbar__left { display: inline-flex; align-items: center; padding-right: 8px; } @media (min-width: 600px) { .edit-post-header-toolbar__left { padding-right: 24px; } } @media (min-width: 1280px) { .edit-post-header-toolbar__left { padding-left: 8px; } } .edit-post-header-toolbar__block-toolbar { position: absolute; top: 61px; right: 0; left: 0; background: #fff; border-bottom: 1px solid #ddd; } .edit-post-header-toolbar__block-toolbar:empty { display: none; } .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar-group, .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar { border-top: none; border-bottom: none; } .is-sidebar-opened .edit-post-header-toolbar__block-toolbar { display: none; } .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar__block-parent-selector-wrapper { display: none; } @media (min-width: 782px) { .is-sidebar-opened .edit-post-header-toolbar__block-toolbar { display: block; left: 280px; } } @media (min-width: 1280px) { .edit-post-header-toolbar__block-toolbar { position: static; right: auto; left: auto; background: none; border-bottom: none; } .is-sidebar-opened .edit-post-header-toolbar__block-toolbar { left: auto; } .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar { border-right: 1px solid #ddd; } .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar-group, .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar { height: 60px; padding: 6px 0; } } .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon { margin-left: 8px; min-width: 32px; width: 32px; height: 32px; padding: 0; } .show-icon-labels .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon { height: 36px; } @media (min-width: 1280px) { .show-icon-labels .edit-post-header-toolbar__block-toolbar { position: absolute; top: 61px; right: 0; left: 0; border-bottom: 1px solid #ddd; padding: 0; background-color: #fff; } .show-icon-labels .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar-group, .show-icon-labels .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar { height: auto; padding: 0; } } .edit-post-more-menu { margin-right: -4px; } .edit-post-more-menu .components-button { width: auto; padding: 0 2px; } @media (min-width: 600px) { .edit-post-more-menu { margin-right: 0; } .edit-post-more-menu .components-button { padding: 0 4px; } } .edit-post-more-menu__content .components-popover__content { min-width: 280px; } @media (min-width: 480px) { .edit-post-more-menu__content .components-popover__content { width: auto; max-width: 480px; } } .edit-post-more-menu__content .components-popover__content .components-dropdown-menu__menu { padding: 0; } .components-popover.edit-post-more-menu__content { z-index: 99998; } .edit-post-keyboard-shortcut-help-modal__section { margin: 0 0 2rem 0; } .edit-post-keyboard-shortcut-help-modal__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list { margin-top: -25px; } .edit-post-keyboard-shortcut-help-modal__section-title { font-size: 0.9rem; font-weight: 600; } .edit-post-keyboard-shortcut-help-modal__shortcut { display: flex; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid #ddd; margin-bottom: 0; } .edit-post-keyboard-shortcut-help-modal__shortcut:last-child { border-bottom: 1px solid #ddd; } .edit-post-keyboard-shortcut-help-modal__shortcut:empty { display: none; } .edit-post-keyboard-shortcut-help-modal__shortcut-term { font-weight: 600; margin: 0 1rem 0 0; text-align: left; } .edit-post-keyboard-shortcut-help-modal__shortcut-description { flex: 1; margin: 0; flex-basis: auto; } .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination { display: block; background: none; margin: 0; padding: 0; } .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination { margin-top: 10px; } .edit-post-keyboard-shortcut-help-modal__shortcut-key { padding: 0.25rem 0.5rem; border-radius: 8%; margin: 0 0.2rem 0 0.2rem; } .edit-post-keyboard-shortcut-help-modal__shortcut-key:last-child { margin: 0 0.2rem 0 0; } .edit-post-layout__metaboxes { flex-shrink: 0; } .edit-post-layout__metaboxes:not(:empty) { border-top: 1px solid #ddd; padding: 10px 0 10px; clear: both; } .edit-post-layout__metaboxes:not(:empty) .edit-post-meta-boxes-area { margin: auto 20px; } .edit-post-layout .components-editor-notices__snackbar { position: fixed; left: 0; bottom: 40px; padding-right: 16px; padding-left: 16px; } .edit-post-layout .components-editor-notices__snackbar { /* Set left position when auto-fold is not on the body element. */ right: 0; } @media (min-width: 783px) { .edit-post-layout .components-editor-notices__snackbar { right: 160px; } } .auto-fold .edit-post-layout .components-editor-notices__snackbar { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ } @media (min-width: 783px) { .auto-fold .edit-post-layout .components-editor-notices__snackbar { right: 36px; } } @media (min-width: 961px) { .auto-fold .edit-post-layout .components-editor-notices__snackbar { right: 160px; } } /* Sidebar manually collapsed. */ .folded .edit-post-layout .components-editor-notices__snackbar { right: 0; } @media (min-width: 783px) { .folded .edit-post-layout .components-editor-notices__snackbar { right: 36px; } } /* Mobile menu opened. */ @media (max-width: 783px) { .auto-fold .wp-responsive-open .edit-post-layout .components-editor-notices__snackbar { right: 190px; } } /* In small screens with responsive menu expanded there is small white space. */ @media (max-width: 600px) { .auto-fold .wp-responsive-open .edit-post-layout .components-editor-notices__snackbar { margin-right: -18px; } } body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar { right: 0 !important; } .edit-post-layout .editor-post-publish-panel { position: fixed; z-index: 100001; top: 46px; bottom: 0; left: 0; right: 0; overflow: auto; } @media (min-width: 782px) { .edit-post-layout .editor-post-publish-panel { z-index: 99998; top: 32px; right: auto; width: 281px; border-right: 1px solid #ddd; transform: translateX(-100%); animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards; } } @media (min-width: 782px) and (prefers-reduced-motion: reduce) { .edit-post-layout .editor-post-publish-panel { animation-duration: 1ms; } } @media (min-width: 782px) { body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel { top: 0; } .is-focusing-regions .edit-post-layout .editor-post-publish-panel { transform: translateX(0%); } } @keyframes edit-post-post-publish-panel__slide-in-animation { 100% { transform: translateX(0%); } } .interface-interface-skeleton__sidebar > div { height: 100%; padding-bottom: 48px; } .edit-post-layout .editor-post-publish-panel__header-publish-button { justify-content: center; } .edit-post-layout__toggle-publish-panel, .edit-post-layout__toogle-sidebar-panel, .edit-post-layout__toggle-entities-saved-states-panel { z-index: 100000; position: fixed !important; top: -9999em; bottom: auto; right: auto; left: 0; width: 280px; background-color: #fff; border: 1px dotted #ddd; height: auto !important; padding: 24px; display: flex; justify-content: center; } .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus .edit-post-layout__toogle-sidebar-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toogle-sidebar-panel, .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel { top: auto; bottom: 0; } .edit-post-layout .interface-interface-skeleton__content { background-color: #ccc; } .edit-post-layout__inserter-panel-popover-wrapper, .edit-post-layout__inserter-panel-popover-wrapper > div, .edit-post-layout__inserter-panel-popover-wrapper > div > div, .edit-post-layout__inserter-panel-popover-wrapper > div > div > div { height: 100%; } .edit-post-layout__inserter-panel { height: 100%; display: flex; flex-direction: column; } .edit-post-layout__inserter-panel-header { padding-top: 8px; padding-left: 8px; display: flex; justify-content: flex-end; } @media (min-width: 782px) { .edit-post-layout__inserter-panel-header { display: none; } } .edit-post-layout__inserter-panel-content { height: calc(100% - 36px - 8px); } @media (min-width: 782px) { .edit-post-layout__inserter-panel-content { height: 100%; } } @media (min-width: 600px) { .edit-post-manage-blocks-modal { height: calc(100% - 60px - 60px); } } .edit-post-manage-blocks-modal .components-modal__content { padding-bottom: 0; display: flex; flex-direction: column; } .edit-post-manage-blocks-modal .components-modal__header { flex-shrink: 0; margin-bottom: 0; } .edit-post-manage-blocks-modal__content { display: flex; flex-direction: column; flex: 0 1 100%; min-height: 0; } .edit-post-manage-blocks-modal__no-results { font-style: italic; padding: 24px 0; text-align: center; } .edit-post-manage-blocks-modal__search { margin: 16px 0; } .edit-post-manage-blocks-modal__search .components-base-control__field { margin-bottom: 0; } .edit-post-manage-blocks-modal__search .components-base-control__label { margin-top: -4px; } .edit-post-manage-blocks-modal__search input[type="search"].components-text-control__input { padding: 8px; border-radius: 2px; } .edit-post-manage-blocks-modal__disabled-blocks-count { border-top: 1px solid #ddd; margin-right: -24px; margin-left: -24px; padding-top: 0.6rem; padding-bottom: 0.6rem; padding-right: 24px; padding-left: 24px; background-color: #f0f0f0; } .edit-post-manage-blocks-modal__category { margin: 0 0 2rem 0; } .edit-post-manage-blocks-modal__category-title { position: -webkit-sticky; position: sticky; top: 0; padding: 16px 0; background-color: #fff; z-index: 1; } .edit-post-manage-blocks-modal__category-title .components-base-control__field { margin-bottom: 0; } .edit-post-manage-blocks-modal__category-title .components-checkbox-control__label { font-size: 0.9rem; font-weight: 600; } .edit-post-manage-blocks-modal__show-all { margin-left: 8px; } .edit-post-manage-blocks-modal__checklist { margin-top: 0; } .edit-post-manage-blocks-modal__checklist-item { margin-bottom: 0; padding-right: 16px; border-top: 1px solid #ddd; } .edit-post-manage-blocks-modal__checklist-item:last-child { border-bottom: 1px solid #ddd; } .edit-post-manage-blocks-modal__checklist-item .components-base-control__field { align-items: center; display: flex; margin: 0; } .components-modal__content .edit-post-manage-blocks-modal__checklist-item.components-checkbox-control__input-container { margin: 0 8px; } .edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label { display: flex; align-items: center; justify-content: space-between; flex-grow: 1; padding: 0.6rem 10px 0.6rem 0; } .edit-post-manage-blocks-modal__checklist-item .block-editor-block-icon { margin-left: 10px; fill: #1e1e1e; } .edit-post-manage-blocks-modal__results { height: 100%; overflow: auto; margin-right: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; border-top: 1px solid #ddd; } .edit-post-meta-boxes-area { position: relative; /** * The wordpress default for most meta-box elements is content-box. Some * elements such as textarea and input are set to border-box in forms.css. * These elements therefore specifically set back to border-box here, while * other elements (such as .button) are unaffected by Gutenberg's style * because of their higher specificity. */ /* Match width and positioning of the meta boxes. Override default styles. */ /* Override Default meta box stylings */ } .edit-post-meta-boxes-area__container, .edit-post-meta-boxes-area .inside { box-sizing: content-box; } .edit-post-meta-boxes-area textarea, .edit-post-meta-boxes-area input { box-sizing: border-box; } .edit-post-meta-boxes-area #poststuff { margin: 0 auto; padding-top: 0; min-width: auto; } .edit-post-meta-boxes-area #poststuff h3.hndle, .edit-post-meta-boxes-area #poststuff .stuffbox > h3, .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */ box-sizing: border-box; color: inherit; font-weight: 600; outline: none; padding: 15px; position: relative; width: 100%; } .edit-post-meta-boxes-area .postbox { border: 0; color: inherit; margin-bottom: 0; } .edit-post-meta-boxes-area .postbox > .inside { border-bottom: 1px solid #ddd; color: inherit; padding: 0 14px 14px; margin: 0; } .edit-post-meta-boxes-area .postbox .handlediv { height: 44px; width: 44px; } .edit-post-meta-boxes-area.is-loading::before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; content: ""; background: transparent; z-index: 1; } .edit-post-meta-boxes-area .components-spinner { position: absolute; top: 10px; left: 20px; z-index: 5; } .edit-post-meta-boxes-area .is-hidden { display: none; } .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"] { border: 1px solid #757575; } .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]:checked { background: #fff; border-color: #757575; } .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]::before { margin: -3px -4px; } .edit-post-meta-boxes-area__clear { clear: both; } .edit-post-preferences-modal__section { margin: 0 0 2.5rem 0; } .edit-post-preferences-modal__section-title { font-size: 0.9rem; font-weight: 600; } .edit-post-preferences-modal__option .components-base-control__field { align-items: center; display: flex; margin: 0; } .edit-post-preferences-modal__option .components-checkbox-control__label { flex-grow: 1; padding: 0.6rem 10px 0.6rem 0; } .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button { margin: 0 48px 0.6rem 0; } @media (min-width: 782px) { .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button { margin-right: 38px; } } @media (min-width: 600px) { .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button { max-width: 300px; } } .edit-post-preferences-modal .components-base-control__help { margin: -8px 42px 8px 0; font-size: 12px; font-style: normal; color: #757575; } .edit-post-preferences-modal .edit-post-preferences-modal__section-description { margin: -8px 0 8px 0; font-size: 12px; font-style: normal; color: #757575; } .components-panel__header.edit-post-sidebar__panel-tabs { justify-content: flex-start; padding-right: 0; padding-left: 16px; border-top: 0; margin-top: 0; } .components-panel__header.edit-post-sidebar__panel-tabs ul { display: flex; } .components-panel__header.edit-post-sidebar__panel-tabs li { margin: 0; } .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon { display: none; margin: 0 auto 0 0; padding: 0; min-width: 24px; height: 24px; } @media (min-width: 782px) { .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon { display: flex; } } .components-panel__body.is-opened.edit-post-last-revision__panel { padding: 0; height: 48px; } .editor-post-last-revision__title.components-button { padding: 16px; } .editor-post-author__select { margin: -5px 0; width: 100%; } @supports ((position: -webkit-sticky) or (position: sticky)) { .editor-post-author__select { width: auto; } } .edit-post-post-link__link-post-name { font-weight: 600; } .edit-post-post-link__preview-label { font-weight: 400; margin: 0; } .edit-post-post-link__link { text-align: right; word-wrap: break-word; display: block; } .edit-post-post-link__preview-link-container { direction: ltr; } .edit-post-post-schedule { width: 100%; position: relative; justify-content: left; } .edit-post-post-schedule span { display: block; width: 45%; } .components-button.edit-post-post-schedule__toggle { text-align: left; } .editor-post-slug__input { margin: -5px 0; padding: 2px; } .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft { margin-top: 15px; width: 100%; text-align: center; } .edit-post-post-visibility { width: 100%; justify-content: left; } .edit-post-post-visibility span { display: block; width: 45%; } @media (min-width: 782px) { .edit-post-post-visibility__dialog .components-popover__content { width: 257px; } } .edit-post-post-visibility__dialog-legend { font-weight: 600; } .edit-post-post-visibility__choice { margin: 10px 0; } .edit-post-post-visibility__dialog-radio, .edit-post-post-visibility__dialog-label { vertical-align: top; } .edit-post-post-visibility__dialog-password-input { width: calc(100% - 20px); margin-right: 20px; } .edit-post-post-visibility__dialog-info { color: #757575; padding-right: 20px; font-style: italic; margin: 4px 0 0; line-height: 1.4; } .components-button.edit-post-sidebar__panel-tab { border-radius: 0; height: 48px; background: transparent; border: none; box-shadow: none; cursor: pointer; display: inline-block; padding: 3px 15px; margin-right: 0; font-weight: 500; } .components-button.edit-post-sidebar__panel-tab::after { content: attr(data-label); display: block; font-weight: 600; height: 0; overflow: hidden; speak: none; visibility: hidden; } .components-button.edit-post-sidebar__panel-tab.is-active { box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 #007cba; box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); position: relative; z-index: 1; } .components-button.edit-post-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-post-sidebar__panel-tab:focus { box-shadow: inset 0 0 0 1.5px #007cba; box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); position: relative; z-index: 1; } .components-button.edit-post-sidebar__panel-tab.is-active:focus { box-shadow: inset 0 0 0 1.5px #007cba, inset 0 -4px 0 0 #007cba; box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); } .edit-post-text-editor { position: relative; width: 100%; background-color: #fff; flex-grow: 1; } .edit-post-text-editor .wp-block.editor-post-title { max-width: none; line-height: 1.4; } .edit-post-text-editor .wp-block.editor-post-title .editor-post-title__input.editor-post-title__input.editor-post-title__input { font-family: Menlo, Consolas, monaco, monospace; font-size: 2.5em; font-weight: normal; } .edit-post-text-editor .wp-block.editor-post-title .editor-post-title__input { border: 1px solid #949494; margin-bottom: -1px; padding: 16px; } @media (min-width: 600px) { .edit-post-text-editor .wp-block.editor-post-title .editor-post-title__input { padding: 24px; } } .edit-post-text-editor .wp-block.editor-post-title .editor-post-title__input:focus { border-color: #007cba; border-color: var(--wp-admin-theme-color); box-shadow: 0 0 0 1.5px #007cba; box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); } @media (min-width: 600px) { .edit-post-text-editor .wp-block.editor-post-title { padding: 0; } } .edit-post-text-editor__body { width: 100%; padding: 0 12px 12px 12px; max-width: 1080px; margin-right: auto; margin-left: auto; } @media (min-width: 960px) { .edit-post-text-editor__body { padding: 16px 24px 96px 24px; padding: 0 24px 24px 24px; } } .edit-post-text-editor__toolbar { position: -webkit-sticky; position: sticky; z-index: 1; top: 0; right: 0; left: 0; display: flex; background: rgba(255, 255, 255, 0.8); padding: 4px 12px; } @media (min-width: 600px) { .edit-post-text-editor__toolbar { padding: 12px; } } @media (min-width: 960px) { .edit-post-text-editor__toolbar { padding: 12px 24px; } } .edit-post-text-editor__toolbar h2 { line-height: 36px; margin: 0 0 0 auto; font-size: 13px; color: #1e1e1e; } .edit-post-text-editor__toolbar .components-button svg { order: 1; } .edit-post-visual-editor { position: relative; padding-top: 50px; background-color: #fff; flex: 1 1 auto; } .edit-post-visual-editor .components-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; padding: 6px 12px; } .edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon { padding: 6px; } @supports ((position: -webkit-sticky) or (position: sticky)) { .edit-post-visual-editor { flex-basis: 100%; } } .edit-post-visual-editor > .block-editor__typewriter, .edit-post-visual-editor > .block-editor__typewriter > div, .edit-post-visual-editor > .block-editor__typewriter > div > .block-editor-writing-flow, .edit-post-visual-editor > .block-editor__typewriter > div > .block-editor-writing-flow > .block-editor-writing-flow__click-redirect { height: 100%; } .edit-post-visual-editor .block-editor-writing-flow__click-redirect { min-height: 40vh; width: 100%; } .has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect { height: 0; } .edit-post-visual-editor__post-title-wrapper .editor-post-title { margin-top: 2em; margin-right: auto; margin-left: auto; margin-bottom: 32px; } .edit-post-welcome-guide { width: 312px; } .edit-post-welcome-guide__image { background: #00a0d2; height: 240px; } .edit-post-welcome-guide__image__prm-r { display: none; } @media (prefers-reduced-motion: reduce) { .edit-post-welcome-guide__image__prm-r { display: block; } .edit-post-welcome-guide__image__prm-np { display: none; } } .edit-post-welcome-guide__heading { font-family: "Noto Serif", serif; font-size: 24px; line-height: 1.4; margin: 0 0 16px 0; padding: 0 32px; } .edit-post-welcome-guide__text { font-size: 13px; line-height: 1.4; margin: 0 0 24px 0; padding: 0 32px; } .edit-post-welcome-guide__inserter-icon { margin: 0 4px; vertical-align: text-top; } /** * Animations */ @keyframes edit-post__fade-in-animation { from { opacity: 0; } to { opacity: 1; } } html.wp-toolbar { background: #fff; } body.block-editor-page { 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.block-editor-page #wpcontent { padding-right: 0; } body.block-editor-page #wpbody-content { padding-bottom: 0; } body.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) { display: none; } body.block-editor-page #wpfooter { display: none; } body.block-editor-page .a11y-speak-region { right: -1px; top: -1px; } body.block-editor-page ul#adminmenu a.wp-has-current-submenu::after, body.block-editor-page ul#adminmenu > li.current > a.current::after { border-left-color: #fff; } body.block-editor-page .media-frame select.attachment-filters:last-of-type { width: auto; max-width: 100%; } .edit-post-header, .edit-post-visual-editor, .edit-post-text-editor, .edit-post-sidebar, .editor-post-publish-panel, .components-popover, .components-modal__frame, .edit-post-layout__inserter-panel { box-sizing: border-box; } .edit-post-header *, .edit-post-header *::before, .edit-post-header *::after, .edit-post-visual-editor *, .edit-post-visual-editor *::before, .edit-post-visual-editor *::after, .edit-post-text-editor *, .edit-post-text-editor *::before, .edit-post-text-editor *::after, .edit-post-sidebar *, .edit-post-sidebar *::before, .edit-post-sidebar *::after, .editor-post-publish-panel *, .editor-post-publish-panel *::before, .editor-post-publish-panel *::after, .components-popover *, .components-popover *::before, .components-popover *::after, .components-modal__frame *, .components-modal__frame *::before, .components-modal__frame *::after, .edit-post-layout__inserter-panel *, .edit-post-layout__inserter-panel *::before, .edit-post-layout__inserter-panel *::after { box-sizing: inherit; } @media (min-width: 600px) { .block-editor__container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height: calc(100vh - 46px); } } @media (min-width: 782px) { .block-editor__container { min-height: calc(100vh - 32px); } body.is-fullscreen-mode .block-editor__container { min-height: 100vh; } } .block-editor__container img { max-width: 100%; height: auto; } .block-editor__container iframe { width: 100%; } .block-editor__container .components-navigate-regions { height: 100%; } .wp-block { max-width: 580px; } .wp-block[data-align="wide"] { max-width: 1100px; } .wp-block[data-align="full"] { max-width: none; } body.admin-color-light { --wp-admin-theme-color: #0085ba; --wp-admin-theme-color-darker-10: #0073a1; --wp-admin-theme-color-darker-20: #006187; } body.admin-color-modern { --wp-admin-theme-color: #3858e9; --wp-admin-theme-color-darker-10: #2145e6; --wp-admin-theme-color-darker-20: #183ad6; } body.admin-color-blue { --wp-admin-theme-color: #096484; --wp-admin-theme-color-darker-10: #07526c; --wp-admin-theme-color-darker-20: #064054; } body.admin-color-coffee { --wp-admin-theme-color: #46403c; --wp-admin-theme-color-darker-10: #383330; --wp-admin-theme-color-darker-20: #2b2724; } body.admin-color-ectoplasm { --wp-admin-theme-color: #523f6d; --wp-admin-theme-color-darker-10: #46365d; --wp-admin-theme-color-darker-20: #3a2c4d; } body.admin-color-midnight { --wp-admin-theme-color: #e14d43; --wp-admin-theme-color-darker-10: #dd382d; --wp-admin-theme-color-darker-20: #d02c21; } body.admin-color-ocean { --wp-admin-theme-color: #627c83; --wp-admin-theme-color-darker-10: #576e74; --wp-admin-theme-color-darker-20: #4c6066; } body.admin-color-sunrise { --wp-admin-theme-color: #dd823b; --wp-admin-theme-color-darker-10: #d97426; --wp-admin-theme-color-darker-20: #c36922; }