/** * 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. */ /** * Converts a hex value into the rgb equivalent. * * @param {string} hex - the hexadecimal value to convert * @return {string} comma separated rgb values */ /** * 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--rgb: 0, 124, 186; --wp-admin-theme-color-darker-10: #006ba1; --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; --wp-admin-theme-color-darker-20: #005a87; --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; --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; } } @media (min-width: 782px) { .components-panel__header + .interface-complementary-area-header { margin-top: 0; } } .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:not(.components-base-control__help) { margin-top: 0; } .interface-complementary-area h2 { font-size: 13px; color: #1e1e1e; margin-bottom: 1.5em; } .interface-complementary-area h3 { font-size: 11px; text-transform: uppercase; font-weight: 500; 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; z-index: 20; } .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-more-menu-dropdown { margin-right: -4px; } .interface-more-menu-dropdown .components-button { width: auto; padding: 0 2px; } @media (min-width: 600px) { .interface-more-menu-dropdown { margin-right: 0; } .interface-more-menu-dropdown .components-button { padding: 0 4px; } } .interface-more-menu-dropdown__content .components-popover__content { min-width: 280px; } @media (min-width: 480px) { .interface-more-menu-dropdown__content .components-popover__content { max-width: 480px; } } .interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu { padding: 0; } .components-popover.interface-more-menu-dropdown__content { z-index: 99998; } .interface-pinned-items { display: flex; gap: 4px; margin-left: -4px; } .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: 0; } .interface-pinned-items .components-button svg { max-width: 24px; max-height: 24px; } @media (min-width: 600px) { .interface-preferences-modal { width: calc(100% - 32px); height: calc(100% - 120px); } } @media (min-width: 782px) { .interface-preferences-modal { width: 750px; } } @media (min-width: 960px) { .interface-preferences-modal { height: 70%; } } @media (max-width: 781px) { .interface-preferences-modal .components-modal__content { padding: 0; } } .interface-preferences__tabs .components-tab-panel__tabs { position: absolute; top: 84px; right: 16px; width: 160px; } .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item { border-radius: 2px; font-weight: 400; } .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active { background: #f0f0f0; box-shadow: none; font-weight: 500; } .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } .interface-preferences__tabs .components-tab-panel__tab-content { padding-right: 24px; margin-right: 160px; } @media (max-width: 781px) { .interface-preferences__provider { height: 100%; } } .interface-preferences-modal__section { margin: 0 0 2.5rem 0; } .interface-preferences-modal__section:last-child { margin: 0; } .interface-preferences-modal__section-legend { margin-bottom: 8px; } .interface-preferences-modal__section-title { font-size: 0.9rem; font-weight: 600; margin-top: 0; } .interface-preferences-modal__section-description { margin: -8px 0 8px 0; font-size: 12px; font-style: normal; color: #757575; } .interface-preferences-modal__option + .interface-preferences-modal__option { margin-top: 16px; } .interface-preferences-modal__option .components-base-control__help { margin-top: 0; margin-right: 48px; } .edit-site-block-editor__editor-styles-wrapper .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-site-block-editor__editor-styles-wrapper .components-button.is-tertiary, .edit-site-block-editor__editor-styles-wrapper .components-button.has-icon { padding: 6px; } .edit-site-visual-editor { position: relative; background-color: #2f2f2f; align-items: center; } .edit-site-visual-editor.is-focus-mode { padding: 48px; } .edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas { border-radius: 2px; max-height: 100%; } .edit-site-visual-editor.is-focus-mode .components-resizable-box__container { overflow: visible; } .edit-site-visual-editor .components-resizable-box__container { margin: 0 auto; overflow: auto; } .edit-site-visual-editor__back-button { position: absolute; top: 8px; right: 8px; color: #fff; } .edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover { color: #f0f0f0; } .resizable-editor__drag-handle { position: absolute; top: 0; bottom: 0; padding: 0; margin: auto 0; width: 4px; height: 100px; -webkit-appearance: none; appearance: none; cursor: ew-resize; outline: none; background: #949494; border-radius: 2px; border: 0; } .resizable-editor__drag-handle.is-left { right: -16px; } .resizable-editor__drag-handle.is-right { left: -16px; } .resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active { background: #ccc; } .resizable-editor__drag-handle:focus { box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color); } .edit-site-code-editor { position: relative; width: 100%; background-color: #fff; flex-grow: 1; } .edit-site-code-editor__body { width: 100%; padding: 12px; max-width: 1080px; margin-right: auto; margin-left: auto; } @media (min-width: 960px) { .edit-site-code-editor__body { padding: 24px; } } .edit-site-code-editor__toolbar { 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-site-code-editor__toolbar { padding: 12px; } } @media (min-width: 960px) { .edit-site-code-editor__toolbar { padding: 12px 24px; } } .edit-site-code-editor__toolbar h2 { line-height: 36px; margin: 0 0 0 auto; font-size: 13px; color: #1e1e1e; } .edit-site-code-editor__toolbar .components-button svg { order: 1; } textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { border: 1px solid #949494; border-radius: 0; display: block; margin: 0; width: 100%; box-shadow: none; resize: none; overflow: hidden; font-family: Menlo, Consolas, monaco, monospace; line-height: 2.4; min-height: 200px; transition: border 0.1s ease-out, box-shadow 0.1s linear; padding: 16px; /* Fonts smaller than 16px causes mobile safari to zoom. */ font-size: 16px !important; } @media (prefers-reduced-motion: reduce) { textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { transition-duration: 0s; transition-delay: 0s; } } @media (min-width: 600px) { textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { padding: 24px; } } @media (min-width: 600px) { textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { font-size: 15px !important; } } textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus { border-color: var(--wp-admin-theme-color); box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); position: relative; } textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder { color: rgba(30, 30, 30, 0.62); } textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder { color: rgba(30, 30, 30, 0.62); opacity: 1; } textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder { color: rgba(30, 30, 30, 0.62); } .edit-site-global-styles-preview { display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; } .edit-site-global-styles-preview__iframe { max-width: 100%; display: block; } .edit-site-typography-panel__preview { display: flex; align-items: center; justify-content: center; min-height: 100px; margin-bottom: 16px; background: #f0f0f0; border-radius: 2px; } .edit-site-typography-panel__full-width-control { grid-column: 1/-1; max-width: 100%; } .edit-site-global-styles-screen-heading-color, .edit-site-global-styles-screen-typography { margin: 16px; } .edit-site-global-styles-screen-typography__indicator { height: 24px; width: 24px; font-size: 14px; display: flex !important; align-items: center; justify-content: center; border-radius: 2px; } .edit-site-global-styles-screen-colors { margin: 16px; } .edit-site-global-styles-screen-colors .component-color-indicator { background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); flex-shrink: 0; } .edit-site-global-styles-header__description, .edit-site-block-types-search { padding: 0 16px; } .edit-site-global-styles-subtitle { margin-bottom: 0 !important; text-transform: uppercase; font-weight: 500 !important; font-size: 11px !important; } .edit-site-global-styles-section-title { color: #2f2f2f; font-weight: 600; line-height: 1.2; padding: 16px; padding-bottom: 0; margin: 0; } .edit-site-screen-text-color__control, .edit-site-screen-link-color__control, .edit-site-screen-button-color__control { padding: 16px; } .edit-site-global-styles-variations_item { box-sizing: border-box; } .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview { padding: 2px; border-radius: 2px; border: #e0e0e0 1px solid; } .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview { border: #1e1e1e 1px solid; } .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview { border: var(--wp-admin-theme-color) 1px solid; } .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview { border: var(--wp-admin-theme-color) 1px solid; } .edit-site-global-styles-icon-with-current-color { fill: currentColor; } .edit-site-global-styles__color-indicator-wrapper { height: 24px; flex-shrink: 0; } .edit-site-global-styles__color-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .edit-site-header { align-items: center; background-color: #fff; display: flex; height: 60px; box-sizing: border-box; width: 100%; justify-content: space-between; } body.is-fullscreen-mode .edit-site-header { padding-right: 60px; transition: padding-right 20ms linear; transition-delay: 80ms; } @media (prefers-reduced-motion: reduce) { body.is-fullscreen-mode .edit-site-header { transition-duration: 0s; transition-delay: 0s; } } .edit-site-header .edit-site-header_start { display: flex; border: none; } .edit-site-header .edit-site-header_end { display: flex; justify-content: flex-end; } .edit-site-header .edit-site-header_center { display: flex; align-items: center; height: 100%; flex-grow: 1; justify-content: center; min-width: 0; } body.is-navigation-sidebar-open .edit-site-header { padding-right: 0; transition: padding-right 20ms linear; transition-delay: 0ms; } @media (prefers-reduced-motion: reduce) { body.is-navigation-sidebar-open .edit-site-header { transition-duration: 0s; transition-delay: 0s; } } @media (max-width: 959px) { body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button, body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) { display: none; } body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button { margin-left: 0; } } .edit-site-header__toolbar { display: flex; align-items: center; padding-right: 8px; } @media (min-width: 600px) { .edit-site-header__toolbar { padding-right: 24px; } } @media (min-width: 1280px) { .edit-site-header__toolbar { padding-left: 8px; } } .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle { margin-left: 8px; min-width: 32px; width: 32px; height: 32px; padding: 0; } .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; } @media (prefers-reduced-motion: reduce) { .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { transition-duration: 0s; transition-delay: 0s; } } .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg { transform: rotate(-45deg); } .edit-site-header__toolbar-switchers { align-items: center; display: flex; } .edit-site-header__toolbar-switchers-separator { margin: 0 -6px 0; } /** * Buttons on the right side */ .edit-site-header__actions { display: inline-flex; align-items: center; padding-left: 4px; gap: 4px; } @media (min-width: 600px) { .edit-site-header__actions { padding-left: 10px; } } @media (min-width: 600px) { .edit-site-header__actions { gap: 8px; } } .edit-site-header__actions .interface-pinned-items { display: none; } @media (min-width: 782px) { .edit-site-header__actions .interface-pinned-items { display: inline-flex; } } .edit-site-header__actions__preview-options { opacity: 1; transition: opacity 0.3s; } .edit-site-header__actions__preview-options.is-zoomed-out { opacity: 0; } .edit-site-header__actions-more-menu { margin-right: -4px; } .edit-site-header__actions-more-menu .components-icon-button { padding: 8px 2px; width: auto; } @media (min-width: 600px) { .edit-site-header__actions-more-menu { margin-right: 4px; } .edit-site-header__actions-more-menu .components-icon-button { padding: 8px 4px; } } .edit-site-header_start { display: flex; border: none; } .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon, .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon { height: 36px; min-width: 36px; padding: 6px; } .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed, .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed { background: #1e1e1e; } .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled), .edit-site-header_start .edit-site-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-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before, .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before { display: none; } .edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon { margin-left: 8px; min-width: 32px; width: 32px; height: 32px; padding: 0; } .edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon { width: auto; padding: 0 8px; } .show-icon-labels .edit-site-header .components-button.has-icon { width: auto; } .show-icon-labels .edit-site-header .components-button.has-icon svg { display: none; } .show-icon-labels .edit-site-header .components-button.has-icon::after { content: attr(aria-label); } .show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] { background-color: transparent; } .show-icon-labels .edit-site-header .is-tertiary:active { box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); background-color: transparent; } .show-icon-labels .edit-site-header .edit-site-save-button__button { padding-right: 6px; padding-left: 6px; } .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after { content: none; } .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle, .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { height: 36px; padding: 0 8px; } .show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * { margin-right: 8px; } .edit-site-document-actions { display: flex; flex-direction: column; justify-content: center; padding: 0 8px; height: 100%; min-width: 0; } .edit-site-document-actions .edit-site-document-actions__title-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 0; } .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown { display: inline-flex; margin-right: 4px; } .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button { min-width: 0; padding: 0; } .edit-site-document-actions .edit-site-document-actions__title-wrapper > h1 { margin: 0; min-width: 0; } .edit-site-document-actions .edit-site-document-actions__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .edit-site-document-actions .edit-site-document-actions__secondary-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; opacity: 0; padding: 0; transition: all ease 0.2s; background: #e0e0e0; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .edit-site-document-actions .edit-site-document-actions__secondary-item { transition-duration: 0s; transition-delay: 0s; } } .edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item { opacity: 1; padding: 0 4px; max-width: 180px; margin-right: 6px; } .edit-site-document-actions__info-dropdown > .components-popover__content { padding: 0; min-width: 240px; } .edit-site-navigation-toggle { align-items: center; background: #1e1e1e; border-radius: 0; display: flex; position: absolute; z-index: 31; height: 60px; width: 60px; } .edit-site-navigation-toggle__button.components-button { align-items: center; background: #1e1e1e; border-radius: 0; color: #fff; height: 61px; width: 60px; z-index: 1; margin-bottom: -1px; min-width: 60px; } .edit-site-navigation-toggle__button.components-button:hover, .edit-site-navigation-toggle__button.components-button:active { color: #fff; } .edit-site-navigation-toggle__button.components-button:focus { box-shadow: none; } .edit-site-navigation-toggle__button.components-button::before { transition: box-shadow 0.1s ease; content: ""; display: block; position: absolute; top: 9px; left: 9px; bottom: 9px; right: 9px; border-radius: 4px; box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e; } @media (prefers-reduced-motion: reduce) { .edit-site-navigation-toggle__button.components-button::before { transition-duration: 0s; transition-delay: 0s; } } .edit-site-navigation-toggle__button.components-button:hover::before { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575; } .edit-site-navigation-toggle__button.components-button.has-icon:hover::before { box-shadow: none; } .edit-site-navigation-toggle__button.components-button:focus::before { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } .edit-site-navigation-toggle__button.components-button .edit-site-navigation-toggle__site-icon { width: 36px; height: 36px; border-radius: 2px; object-fit: cover; margin-top: -1px; } .edit-site-navigation-panel { height: 100%; position: relative; width: 0; overflow: hidden; background: #1e1e1e; color: #fff; transition: width 100ms linear; } @media (prefers-reduced-motion: reduce) { .edit-site-navigation-panel { transition-duration: 0s; transition-delay: 0s; } } @media (min-width: 782px) { .interface-interface-skeleton.has-footer .edit-site-navigation-panel { height: calc(100% - 25px); } } .edit-site-navigation-panel__inner { position: relative; width: 300px; height: 100%; overflow: hidden; visibility: hidden; transition: visibility 100ms linear; } @media (prefers-reduced-motion: reduce) { .edit-site-navigation-panel__inner { transition-duration: 0s; transition-delay: 0s; } } .edit-site-navigation-panel.is-open { width: 300px; } .edit-site-navigation-panel.is-open .edit-site-navigation-panel__inner { visibility: visible; } .edit-site-navigation-panel__site-title-container { height: 60px; padding-right: 60px; margin: 0 8px 0 16px; display: flex; align-items: center; } .edit-site-navigation-panel__site-title { font-style: normal; font-weight: 600; font-size: 14px; /* Matches menu items */ line-height: 20px; color: #ddd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .edit-site-navigation-panel__scroll-container { overflow-x: hidden; overflow-y: auto; height: calc(100% - 60px); } .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { height: 36px; margin-top: 24px; padding: 8px 8px 8px 16px; } .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary:focus:not(:disabled) { border-bottom-color: transparent; } .edit-site-navigation-panel__preview { display: none; border: 1px solid #ccc; width: 300px; padding: 16px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border-radius: 2px; position: absolute; top: 73px; right: 312px; color: #1e1e1e; z-index: 32; } @media (min-width: 782px) { .edit-site-navigation-panel__preview { display: block; } } .edit-site-navigation-panel__template-item { display: block; } .edit-site-navigation-panel__template-item .components-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 36px; text-align: right; padding-right: 16px; padding-left: 16px; color: inherit; } .edit-site-navigation-panel__template-item-title { font-size: 14px; line-height: 20px; } .edit-site-navigation-panel__template-item-title em { margin-left: 1ch; } .edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading { text-transform: capitalize; } .edit-site-navigation-panel__template-part-item .components-navigation__item-title { text-transform: capitalize; } .components-navigation__item + .edit-site-navigation-panel__template-item { margin-top: 16px; } .edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item { margin-top: 8px; } .edit-site-navigation-panel__info-wrapper { padding: 4px 0; } .edit-site-navigation-panel__template-item-description { padding-top: 8px; font-size: 12px; line-height: 16px; } .edit-site-navigation-panel__new-template-dropdown { margin: 0 12px 0 0; } .edit-site-navigation-panel__new-template-dropdown button { margin: 0; } @media (min-width: 600px) { .edit-site-navigation-panel__new-template-popover { min-width: 300px; } } .edit-site-list-header { position: relative; align-items: center; background-color: #fff; display: flex; height: 60px; box-sizing: border-box; width: 100%; justify-content: flex-end; padding-left: 16px; } body.is-fullscreen-mode .edit-site-list-header { padding-right: 60px; transition: padding-right 20ms linear; transition-delay: 80ms; } @media (prefers-reduced-motion: reduce) { body.is-fullscreen-mode .edit-site-list-header { transition-duration: 0s; transition-delay: 0s; } } .edit-site-list-header .edit-site-list-header__title { position: absolute; right: 0; width: 100%; text-align: center; font-size: 20px; padding: 0; margin: 0; } .edit-site-list-header__right { position: relative; } .edit-site .edit-site-list .interface-interface-skeleton__editor { min-width: 100%; } @media (min-width: 782px) { .edit-site .edit-site-list .interface-interface-skeleton__editor { min-width: 0; } } .edit-site .edit-site-list .interface-interface-skeleton__content { background: #fff; align-items: center; padding: 16px; } @media (min-width: 782px) { .edit-site .edit-site-list .interface-interface-skeleton__content { padding: 72px; } } .edit-site-list-table { width: 100%; border: 1px solid #ddd; border-radius: 2px; margin: 0; overflow: hidden; border-spacing: 0; max-width: 960px; } .edit-site-list-table tr { display: flex; align-items: center; padding: 16px; box-sizing: border-box; border-top: 1px solid #f0f0f0; margin: 0; } .edit-site-list-table tr:first-child { border-top: 0; } @media (min-width: 782px) { .edit-site-list-table tr { padding: 24px 32px; } } .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) { width: calc(60% - 18px); padding-left: 24px; } .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a { display: inline-block; text-decoration: none; font-weight: 500; margin-bottom: 4px; } .edit-site-list-table tr .edit-site-list-table-column:nth-child(2) { width: calc(40% - 18px); word-break: break-word; } .edit-site-list-table tr .edit-site-list-table-column:nth-child(3) { min-width: 36px; flex-shrink: 0; } .edit-site-list-table tr.edit-site-list-table-head { font-size: 16px; font-weight: 600; text-align: right; color: #1e1e1e; border-top: none; border-bottom: 1px solid #ddd; } .edit-site-list-table tr.edit-site-list-table-head th { font-weight: inherit; } @media (min-width: 782px) { .edit-site-list.is-navigation-open .components-snackbar-list { margin-right: 300px; } } @media (min-width: 782px) { .edit-site-list__rename-modal .components-base-control { width: 320px; } } .edit-site-list__rename-modal-actions { margin-top: 12px; } .edit-site-template__actions button:not(:last-child) { margin-left: 8px; } .edit-site-list-added-by__icon { display: flex; flex-shrink: 0; position: relative; align-items: center; justify-content: center; width: 32px; height: 32px; background: #2f2f2f; border-radius: 100%; } .edit-site-list-added-by__icon svg { fill: #fff; } .edit-site-list-added-by__icon.is-customized::after { position: absolute; content: ""; background: var(--wp-admin-theme-color); height: 8px; width: 8px; outline: 2px solid #fff; border-radius: 100%; top: -1px; left: -1px; } .edit-site-list-added-by__avatar { flex-shrink: 0; overflow: hidden; border-radius: 100%; background: #2f2f2f; width: 32px; height: 32px; } .edit-site-list-added-by__avatar img { width: 32px; height: 32px; object-fit: cover; opacity: 0; transition: opacity 0.1s linear; } @media (prefers-reduced-motion: reduce) { .edit-site-list-added-by__avatar img { transition-duration: 0s; transition-delay: 0s; } } .edit-site-list-added-by__avatar.is-loaded img { opacity: 1; } .edit-site-new-template-dropdown .components-dropdown-menu__toggle { padding: 6px 12px; } @media (min-width: 600px) { .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover { min-width: 300px; } } .edit-site-custom-template-modal__contents > .components-button { padding: 24px; box-shadow: inset 0 0 0 1px #949494; border-radius: 2px; width: 256px; height: auto; display: flex; flex-direction: column; gap: 8px; outline: 1px solid transparent; } .edit-site-custom-template-modal__contents > .components-button span:first-child { color: #1e1e1e; } .edit-site-custom-template-modal__contents > .components-button span { color: #757575; } .edit-site-custom-template-modal__contents > .components-button:hover { color: var(--wp-admin-theme-color-darker-10); box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10); } .edit-site-custom-template-modal__contents > .components-button:hover span:first-child { color: var(--wp-admin-theme-color); } .edit-site-custom-template-modal__contents > .components-button:focus { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: 3px solid transparent; } .edit-site-custom-template-modal__contents > .components-button:focus span:first-child { color: var(--wp-admin-theme-color); } .edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input { background: #fff; border: 1px solid #ddd; } .edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus { border-color: var(--wp-admin-theme-color); box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } @media (min-width: 782px) { .edit-site-custom-template-modal { width: 456px; } } .edit-site-custom-template-modal__suggestions_list { margin-top: 16px; } @media (min-width: 600px) { .edit-site-custom-template-modal__suggestions_list { height: 232px; overflow: scroll; } } .edit-site-custom-template-modal__suggestions_list__list-item { display: block; width: 100%; text-align: right; white-space: pre-wrap; overflow-wrap: break-word; height: auto; } .edit-site-custom-template-modal__suggestions_list__list-item mark { font-weight: 700; background: none; } .edit-site-custom-template-modal__suggestions_list__list-item:hover { background-color: #f0f0f0; } .edit-site-custom-template-modal__suggestions_list__list-item:hover mark { color: var(--wp-admin-theme-color); } .edit-site-custom-template-modal__suggestions_list__list-item:focus { background-color: #f0f0f0; } .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset; } .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info { overflow: hidden; text-overflow: ellipsis; display: block; } .edit-site-custom-template-modal__suggestions_list__list-item__title { font-weight: 500; margin-bottom: 0.2em; } .edit-site-custom-template-modal__suggestions_list__list-item__info { color: #757575; font-size: 0.9em; line-height: 1.3; word-break: break-all; } .edit-site-custom-template-modal__no-results { border: 1px solid #ccc; border-radius: 2px; padding: 16px; margin-bottom: 0; margin-top: 16px; } @media (min-width: 782px) { .edit-site-custom-generic-template__modal .components-base-control { width: 320px; } } .edit-site-custom-generic-template__modal .components-modal__header { border-bottom: none; } .edit-site-custom-generic-template__modal .components-modal__content::before { margin-bottom: 4px; } .edit-site-custom-generic-template__modal-actions { margin-top: 12px; } .edit-site-sidebar { width: 280px; } .edit-site-sidebar > .components-panel { border-right: 0; border-left: 0; margin-bottom: -1px; margin-top: -1px; } .edit-site-sidebar > .components-panel > .components-panel__header { background: #f0f0f0; } .edit-site-sidebar .block-editor-block-inspector__card { margin: 0; } .edit-site-global-styles-sidebar { display: flex; flex-direction: column; min-height: 100%; } .edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider { display: flex; flex-direction: column; flex: 1; } .edit-site-global-styles-sidebar__navigator-screen { flex: 1; } .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { margin-right: 0; } .edit-site-global-styles-sidebar__reset-button.components-button { margin-right: auto; } .edit-site-global-styles-sidebar .components-navigation__menu-title-heading { font-size: 15.6px; font-weight: 500; } .edit-site-global-styles-sidebar .components-navigation__item > button span { font-weight: 500; } .edit-site-typography-panel, .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { border: 0; } .edit-site-global-styles-sidebar .components-tools-panel-item.single-column { grid-column: span 1; } .edit-site-global-styles-sidebar .components-tools-panel .span-columns { grid-column: 1/-1; } .edit-site-global-styles-sidebar__blocks-group { padding-top: 24px; border-top: 1px solid #e0e0e0; } .edit-site-global-styles-sidebar__blocks-group-help { padding: 0 16px; } .edit-site-global-styles-color-palette-panel, .edit-site-global-styles-gradient-palette-panel { padding: 16px; } .edit-site-navigation-sidebar__beta { display: inline-flex; margin-right: 8px; padding: 0 8px; height: 24px; border-radius: 2px; background-color: #1e1e1e; color: #fff; align-items: center; font-size: 12px; line-height: 1; } .edit-site-global-styles-sidebar hr { margin: 0; } .components-panel__header.edit-site-sidebar__panel-tabs { justify-content: flex-start; padding-right: 0; padding-left: 16px; border-top: 0; margin-top: 0; } .components-panel__header.edit-site-sidebar__panel-tabs ul { display: flex; } .components-panel__header.edit-site-sidebar__panel-tabs li { margin: 0; } .components-panel__header.edit-site-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-site-sidebar__panel-tabs .components-button.has-icon { display: flex; } } .components-button.edit-site-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-site-sidebar__panel-tab::after { content: attr(data-label); display: block; font-weight: 600; height: 0; overflow: hidden; speak: none; visibility: hidden; } .components-button.edit-site-sidebar__panel-tab.is-active { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color); position: relative; z-index: 1; } .components-button.edit-site-sidebar__panel-tab.is-active::before { content: ""; position: absolute; top: 0; bottom: 1px; left: 0; right: 0; border-bottom: 1.5px solid transparent; } .components-button.edit-site-sidebar__panel-tab:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); position: relative; z-index: 1; } .components-button.edit-site-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 -1.5px 0 0 var(--wp-admin-theme-color); } @keyframes loadingpulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .edit-site-navigation-inspector { padding: 16px; } .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents { white-space: normal; } .edit-site-navigation-inspector .block-editor-list-view-block__title { margin-top: 3px; } .edit-site-navigation-inspector .block-editor-list-view-block__menu-cell { padding-left: 0; } .edit-site-navigation-inspector__placeholder { padding: 8px; margin: 8px; background-color: #f0f0f0; animation: loadingpulse 1s linear infinite; animation-delay: 0.5s; } .edit-site-navigation-inspector__placeholder.is-child { margin-right: 24px; width: 50%; } .edit-site-template-card { display: flex; align-items: flex-start; } .edit-site-template-card__content { flex-grow: 1; margin-bottom: 4px; } .edit-site-template-card__title { font-weight: 500; line-height: 24px; } .edit-site-template-card__title.edit-site-template-card__title { margin: 0; } .edit-site-template-card__description { font-size: 13px; margin: 0 0 16px; } .edit-site-template-card__icon { flex: 0 0 24px; margin-left: 12px; width: 24px; height: 24px; } .edit-site-template-card__template-areas-list { margin: 0; } .edit-site-template-card__template-areas-list > li { margin: 0; } .edit-site-template-card__template-areas-item { width: 100%; } .edit-site-template-card__template-areas-item.components-button.has-icon { padding: 0; } .edit-site-template-card__header { display: flex; justify-content: space-between; margin: 0 0 4px; } .edit-site-template-card__actions { line-height: 0; } .edit-site-template-card__actions > .components-button.is-small.has-icon { padding: 0; min-width: auto; } h3.edit-site-template-card__template-areas-title { font-weight: 500; margin: 0 0 8px; } html #wpadminbar { display: none; } html.wp-toolbar { padding-top: 0; } .edit-site-editor__toggle-save-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-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel { top: auto; bottom: 0; } .edit-site-visual-editor { position: relative; height: 100%; display: block; overflow: hidden; } .edit-site-visual-editor iframe { display: block; width: 100%; height: 100%; background-color: #fff; } .edit-site .components-editor-notices__snackbar { position: fixed; left: 0; bottom: 40px; padding-right: 16px; padding-left: 16px; } .edit-site .components-editor-notices__snackbar { /* Set left position when auto-fold is not on the body element. */ right: 0; } @media (min-width: 783px) { .edit-site .components-editor-notices__snackbar { right: 160px; } } .auto-fold .edit-site .components-editor-notices__snackbar { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ } @media (min-width: 783px) { .auto-fold .edit-site .components-editor-notices__snackbar { right: 36px; } } @media (min-width: 961px) { .auto-fold .edit-site .components-editor-notices__snackbar { right: 160px; } } /* Sidebar manually collapsed. */ .folded .edit-site .components-editor-notices__snackbar { right: 0; } @media (min-width: 783px) { .folded .edit-site .components-editor-notices__snackbar { right: 36px; } } body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar { right: 0 !important; } .edit-site-template-details .edit-site-template-details__group { margin: 0; padding: 16px; } .edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group { border-top: 1px solid #ccc; } .edit-site-template-details .edit-site-template-details__description { color: #757575; } .edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas { padding: 8px; } .edit-site-template-details .edit-site-template-details__template-areas-item { position: relative; } .edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more { position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; } .edit-site-template-details .edit-site-template-details__revert { padding: 12px 8px; } .edit-site-template-details .edit-site-template-details__revert-button { height: auto; padding: 4px 8px; text-align: right; } .edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; } .edit-site-template-details .edit-site-template-details__show-all-button.components-button { display: flex; justify-content: center; background: #1e1e1e; color: #fff; width: 100%; height: 44px; border-radius: 0; } .edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover { color: #fff; } .edit-site-template-details .edit-site-template-details__show-all-button.components-button:active { color: #ccc; } .edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; } .edit-site-create-template-part-modal { z-index: 1000001; } @media (min-width: 600px) { .edit-site-create-template-part-modal .components-modal__frame { max-width: 500px; } } .edit-site-create-template-part-modal__modal-actions { padding-top: 12px; } .edit-site-create-template-part-modal__area-base-control .components-base-control__label { margin: 16px 0 8px; cursor: auto; } .edit-site-create-template-part-modal__area-radio-group { width: 100%; border: 1px solid #757575; border-radius: 2px; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio { display: block; width: 100%; height: 100%; text-align: right; padding: 12px; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover { margin: 0; background-color: inherit; border-bottom: 1px solid #757575; border-radius: 0; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:not(:focus) { box-shadow: none; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:focus { border-bottom: 1px solid #fff; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:last-of-type { border-bottom: none; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] { color: #1e1e1e; cursor: auto; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover) .edit-site-create-template-part-modal__option-label div, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] .edit-site-create-template-part-modal__option-label div { color: #949494; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label { padding-top: 4px; white-space: normal; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label div { padding-top: 4px; font-size: 12px; } .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__checkbox { margin-right: auto; min-width: 24px; } .edit-site-editor__inserter-panel, .edit-site-editor__list-view-panel { height: 100%; display: flex; flex-direction: column; } .edit-site-editor__list-view-panel { min-width: 350px; } .edit-site-editor__inserter-panel-header { padding-top: 8px; padding-left: 8px; display: flex; justify-content: flex-end; } .edit-site-editor__inserter-panel-content, .edit-site-editor__list-view-panel-content { height: calc(100% - 36px - 8px); } @media (min-width: 782px) { .edit-site-editor__inserter-panel-content { height: 100%; } } .edit-site-editor__list-view-panel-header { align-items: center; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; height: 48px; padding-right: 16px; padding-left: 4px; } .edit-site-editor__list-view-panel-content { overflow-y: auto; padding: 8px; } .edit-site-welcome-guide { width: 312px; } .edit-site-welcome-guide__image { background: #00a0d2; margin: 0 0 16px; } .edit-site-welcome-guide__image > img { display: block; max-width: 100%; object-fit: cover; } .edit-site-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-site-welcome-guide__text { font-size: 13px; line-height: 1.4; margin: 0 0 16px 0; padding: 0 32px; } .edit-site-welcome-guide__text img { vertical-align: bottom; } .edit-site-welcome-guide__inserter-icon { margin: 0 4px; vertical-align: text-top; } .edit-site-keyboard-shortcut-help-modal__section { margin: 0 0 2rem 0; } .edit-site-keyboard-shortcut-help-modal__section-title { font-size: 0.9rem; font-weight: 600; } .edit-site-keyboard-shortcut-help-modal__shortcut { display: flex; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid #ddd; margin-bottom: 0; } .edit-site-keyboard-shortcut-help-modal__shortcut:last-child { border-bottom: 1px solid #ddd; } .edit-site-keyboard-shortcut-help-modal__shortcut:empty { display: none; } .edit-site-keyboard-shortcut-help-modal__shortcut-term { font-weight: 600; margin: 0 1rem 0 0; text-align: left; } .edit-site-keyboard-shortcut-help-modal__shortcut-description { flex: 1; margin: 0; flex-basis: auto; } .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination { display: block; background: none; margin: 0; padding: 0; } .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination { margin-top: 10px; } .edit-site-keyboard-shortcut-help-modal__shortcut-key { padding: 0.25rem 0.5rem; border-radius: 8%; margin: 0 0.2rem 0 0.2rem; } .edit-site-keyboard-shortcut-help-modal__shortcut-key:last-child { margin: 0 0.2rem 0 0; } html.wp-toolbar { background: #fff; } body.appearance_page_gutenberg-template-parts, body.site-editor-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-template-parts #wpcontent, body.site-editor-php #wpcontent { padding-right: 0; } body.appearance_page_gutenberg-template-parts #wpbody-content, body.site-editor-php #wpbody-content { padding-bottom: 0; } body.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta), body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) { display: none; } body.appearance_page_gutenberg-template-parts #wpfooter, body.site-editor-php #wpfooter { display: none; } body.appearance_page_gutenberg-template-parts .a11y-speak-region, body.site-editor-php .a11y-speak-region { right: -1px; top: -1px; } body.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after, body.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after, body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after, body.site-editor-php ul#adminmenu > li.current > a.current::after { border-left-color: #fff; } body.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type, body.site-editor-php .media-frame select.attachment-filters:last-of-type { width: auto; max-width: 100%; } .edit-site, .components-modal__frame { box-sizing: border-box; } .edit-site *, .edit-site *::before, .edit-site *::after, .components-modal__frame *, .components-modal__frame *::before, .components-modal__frame *::after { box-sizing: inherit; } @media (min-width: 600px) { .edit-site { bottom: 0; right: 0; min-height: 100vh; position: absolute; left: 0; top: 0; } } .edit-site .interface-interface-skeleton { top: 0; } .edit-site .interface-complementary-area__pin-unpin-item.components-button { display: none; } .edit-site .interface-interface-skeleton__content { background-color: #2f2f2f; } /** * Animations */ @keyframes edit-post__fade-in-animation { from { opacity: 0; } to { opacity: 1; } } body.admin-color-light { --wp-admin-theme-color: #0085ba; --wp-admin-theme-color--rgb: 0, 133, 186; --wp-admin-theme-color-darker-10: #0073a1; --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; --wp-admin-theme-color-darker-20: #006187; --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; --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--rgb: 56, 88, 233; --wp-admin-theme-color-darker-10: #2145e6; --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; --wp-admin-theme-color-darker-20: #183ad6; --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; --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--rgb: 9, 100, 132; --wp-admin-theme-color-darker-10: #07526c; --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; --wp-admin-theme-color-darker-20: #064054; --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; --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--rgb: 70, 64, 60; --wp-admin-theme-color-darker-10: #383330; --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; --wp-admin-theme-color-darker-20: #2b2724; --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; --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--rgb: 82, 63, 109; --wp-admin-theme-color-darker-10: #46365d; --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; --wp-admin-theme-color-darker-20: #3a2c4d; --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; --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--rgb: 225, 77, 67; --wp-admin-theme-color-darker-10: #dd382d; --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; --wp-admin-theme-color-darker-20: #d02c21; --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; --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--rgb: 98, 124, 131; --wp-admin-theme-color-darker-10: #576e74; --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; --wp-admin-theme-color-darker-20: #4c6066; --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; --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--rgb: 221, 130, 59; --wp-admin-theme-color-darker-10: #d97426; --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; --wp-admin-theme-color-darker-20: #c36922; --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; --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; } }