diff -r 34716fd837a4 -r be944660c56a wp/wp-includes/css/dist/edit-post/style-rtl.css --- a/wp/wp-includes/css/dist/edit-post/style-rtl.css Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-includes/css/dist/edit-post/style-rtl.css Wed Sep 21 18:19:35 2022 +0200 @@ -2,18 +2,17 @@ * Colors */ /** - * Deprecated colors. - * Please avoid using these. - */ -/** * Breakpoints & Media Queries */ /** - * Colors + * 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. */ /** - * Deprecated colors. - * Please avoid using these. + * Colors */ /** * Fonts & basic variables. @@ -32,10 +31,14 @@ * Editor widths. */ /** - * Block UI. + * Block & Editor UI. */ /** - * Border radii. + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. */ /** * Breakpoint mixins @@ -68,184 +71,224 @@ :root { --wp-admin-theme-color: #007cba; --wp-admin-theme-color-darker-10: #006ba1; - --wp-admin-theme-color-darker-20: #005a87; } + --wp-admin-theme-color-darker-20: #005a87; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + :root { + --wp-admin-border-width-focus: 1.5px; + } +} .components-panel__header.interface-complementary-area-header__small { background: #fff; - padding-left: 4px; } - .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; } - @media (min-width: 782px) { - .components-panel__header.interface-complementary-area-header__small { - display: none; } } + 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; } + 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: 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; } } + 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; +} +@media (min-width: 600px) { + .interface-complementary-area { -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; + } +} +@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; - 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; } + } +} +.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; } } + 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; } } + width: 100%; +} +@media (min-width: 782px) { + html.interface-interface-skeleton__html-container { + position: initial; + width: initial; + } +} .interface-interface-skeleton { display: flex; - flex-direction: column; + 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; } } + 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; } } + 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; } } + /* 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; } } + right: 0; +} +@media (min-width: 783px) { + .folded .interface-interface-skeleton { + right: 36px; + } +} body.is-fullscreen-mode .interface-interface-skeleton { - right: 0 !important; } + right: 0 !important; +} .interface-interface-skeleton__body { flex-grow: 1; display: flex; overflow: auto; - overscroll-behavior-y: none; } + 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; } + overflow: auto; + z-index: 20; +} -.interface-interface-skeleton__left-sidebar, +.interface-interface-skeleton__secondary-sidebar, .interface-interface-skeleton__sidebar { display: block; - width: auto; flex-shrink: 0; position: absolute; z-index: 100000; @@ -254,45 +297,67 @@ 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; } } + 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__sidebar { - overflow: auto; - border-right: 1px solid #f0f0f0; } } - -@media (min-width: 782px) { - .interface-interface-skeleton__left-sidebar { - border-left: 1px solid #f0f0f0; } } + .interface-interface-skeleton__secondary-sidebar { + border-left: 1px solid #e0e0e0; + } +} .interface-interface-skeleton__header { flex-shrink: 0; height: auto; - border-bottom: 1px solid #f0f0f0; + 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 #f0f0f0; + border-top: 1px solid #e0e0e0; color: #1e1e1e; - display: none; } - @media (min-width: 782px) { - .interface-interface-skeleton__footer { - display: block; } } + 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; @@ -302,18 +367,31 @@ right: auto; left: 0; width: 280px; - color: #1e1e1e; } - .interface-interface-skeleton__actions:focus { - top: auto; - bottom: 0; } + 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; } + display: flex; +} +.interface-pinned-items .components-button:not(:first-child) { + display: none; +} +@media (min-width: 600px) { + .interface-pinned-items .components-button:not(:first-child) { + display: flex; + } +} +.interface-pinned-items .components-button { + margin-right: 4px; +} +.interface-pinned-items .components-button svg { + max-width: 24px; + max-height: 24px; +} .edit-post-header { height: 60px; @@ -321,303 +399,607 @@ display: flex; flex-wrap: wrap; align-items: center; - max-width: 100vw; } - @media (min-width: 280px) { - .edit-post-header { - flex-wrap: nowrap; } } + max-width: 100vw; +} +@media (min-width: 280px) { + .edit-post-header { + flex-wrap: nowrap; + } +} +.edit-post-header > .edit-post-header__settings { + order: 1; +} +@supports (position: sticky) { .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; } } + order: initial; + } +} .edit-post-header__toolbar { display: flex; flex-grow: 1; - padding-right: 8px; } - @media (min-width: 600px) { - .edit-post-header__toolbar { - padding-right: 24px; } } +} +.edit-post-header__toolbar .table-of-contents { + display: none; +} +@media (min-width: 600px) { .edit-post-header__toolbar .table-of-contents { - display: none; } - @media (min-width: 600px) { - .edit-post-header__toolbar .table-of-contents { - display: block; } } + display: block; + } +} .edit-post-header__settings { display: inline-flex; align-items: center; flex-wrap: wrap; - padding-left: 4px; } - @media (min-width: 600px) { - .edit-post-header__settings { - padding-left: 16px; } } - -/** - * Buttons in the Toolbar - */ -.edit-post-header__settings .components-button.editor-post-save-draft, + 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.editor-post-switch-to-draft, -.edit-post-header__settings .components-button.editor-post-preview, -.edit-post-header__settings .components-button.block-editor-post-preview__dropdown { +.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; - margin-left: 4px; } - @media (min-width: 600px) { - .edit-post-header__settings .components-button.editor-post-save-draft, - .edit-post-header__settings .editor-post-saved-state, - .edit-post-header__settings .components-button.editor-post-switch-to-draft, - .edit-post-header__settings .components-button.editor-post-preview, - .edit-post-header__settings .components-button.block-editor-post-preview__dropdown { - margin-left: 12px; } } - -.edit-post-header__settings .components-button.block-editor-post-preview__dropdown, -.edit-post-header__settings .components-button.editor-post-publish-button, -.edit-post-header__settings .components-button.editor-post-publish-panel__toggle { - padding: 0 6px; - margin-left: 4px; } - @media (min-width: 600px) { - .edit-post-header__settings .components-button.block-editor-post-preview__dropdown, - .edit-post-header__settings .components-button.editor-post-publish-button, - .edit-post-header__settings .components-button.editor-post-publish-panel__toggle { - padding: 0 12px; - margin-left: 12px; } } +} +.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; } + 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-left: 8px; } + 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; } + 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 var(--wp-admin-theme-color); + background-color: transparent; +} +.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-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-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-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-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-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; - 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; } } + display: none; +} +@media (min-width: 782px) { + .edit-post-fullscreen-mode-close.has-icon { + display: flex; + align-items: center; + align-self: stretch; + border: none; + background: #23282e; + color: #fff; + border-radius: 0; + height: 61px; + width: 60px; + position: relative; + margin-bottom: -1px; + } + .edit-post-fullscreen-mode-close.has-icon:active { + color: #fff; + } + .edit-post-fullscreen-mode-close.has-icon:focus { + box-shadow: none; + } + .edit-post-fullscreen-mode-close.has-icon::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) #23282e; + } +} +@media (min-width: 782px) and (prefers-reduced-motion: reduce) { + .edit-post-fullscreen-mode-close.has-icon::before { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 782px) { + .edit-post-fullscreen-mode-close.has-icon:hover::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575; + } +} +@media (min-width: 782px) { + .edit-post-fullscreen-mode-close.has-icon: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-post-fullscreen-mode-close_site-icon { + width: 36px; + border-radius: 2px; +} .edit-post-header-toolbar { display: inline-flex; + flex-grow: 1; align-items: center; - border: none; } - .edit-post-header-toolbar > .components-button { - display: none; } - @media (min-width: 600px) { - .edit-post-header-toolbar > .components-button { - display: inline-flex; } } - .edit-post-header-toolbar > .edit-post-header-toolbar__inserter-toggle { - display: inline-flex; } + 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 .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; +} +@media (prefers-reduced-motion: reduce) { + .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.is-pressed svg { + transform: rotate(-45deg); +} +.edit-post-header-toolbar .block-editor-block-navigation { + display: none; +} +@media (min-width: 600px) { .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 > .components-button.has-icon, - .edit-post-header-toolbar > .components-dropdown > .components-button.has-icon { - height: 36px; - min-width: 36px; - padding: 6px; } - .edit-post-header-toolbar > .components-button.has-icon.is-pressed, - .edit-post-header-toolbar > .components-dropdown > .components-button.has-icon.is-pressed { - background: #1e1e1e; } - .edit-post-header-toolbar > .components-button.has-icon:focus:not(:disabled), - .edit-post-header-toolbar > .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 > .components-button.has-icon::before, - .edit-post-header-toolbar > .components-dropdown > .components-button.has-icon::before { - display: none; } + 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 var(--wp-admin-border-width-focus) 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__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; } - @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 { - padding-right: 8px; - 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; } } +@media (min-width: 600px) { + .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button, +.edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] { + transition: opacity 0.1s linear; + } +} +@media (min-width: 600px) and (prefers-reduced-motion: reduce) { + .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button, +.edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-button, .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] { + opacity: 0; + } +} -.edit-post-header-toolbar .edit-post-header-toolbar__inserter-toggle.has-icon { +.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 .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; } + padding: 0; +} +.show-icon-labels .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon { + height: 36px; +} + +.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-text.has-icon { + width: auto; + padding: 0 8px; +} + +.show-icon-labels .edit-post-header-toolbar__left > * + * { + margin-right: 8px; +} .edit-post-more-menu { - margin-right: -4px; } + 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 { - 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; } } + padding: 0 4px; + } +} .edit-post-more-menu__content .components-popover__content { - min-width: 260px; } - @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; } + 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; } + z-index: 99998; +} + +.edit-post-template-top-area { + display: flex; + flex-direction: column; + align-content: space-between; + width: 100%; + align-items: center; +} +.edit-post-template-top-area .edit-post-template-title, +.edit-post-template-top-area .edit-post-template-post-title { + padding: 0; + text-decoration: none; + height: auto; +} +.edit-post-template-top-area .edit-post-template-title::before, +.edit-post-template-top-area .edit-post-template-post-title::before { + height: 100%; +} +.edit-post-template-top-area .edit-post-template-title.has-icon svg, +.edit-post-template-top-area .edit-post-template-post-title.has-icon svg { + order: 1; + margin-left: 0; +} +.edit-post-template-top-area .edit-post-template-title { + color: #1e1e1e; +} +.edit-post-template-top-area .edit-post-template-post-title { + margin-top: 4px; + max-width: 160px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} +.edit-post-template-top-area .edit-post-template-post-title::before { + right: 0; + left: 0; +} +@media (min-width: 1080px) { + .edit-post-template-top-area .edit-post-template-post-title { + max-width: none; + } +} + +.edit-post-template-top-area__popover .components-popover__content { + min-width: 280px; +} + +.edit-post-template-top-area__second-menu-group { + margin-right: -12px; + margin-left: -12px; + padding: 12px; + padding-bottom: 0; + border-top: 1px solid #ddd; +} +.edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button { + display: flex; + justify-content: center; +} +.edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button .components-menu-item__item { + margin-left: 0; +} .edit-post-keyboard-shortcut-help-modal__section { - margin: 0 0 2rem 0; } - + margin: 0 0 2rem 0; +} .edit-post-keyboard-shortcut-help-modal__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list { - margin-top: -25px; } - + margin-top: -25px; +} .edit-post-keyboard-shortcut-help-modal__section-title { font-size: 0.9rem; - font-weight: 600; } - + 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; } - + 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; } - + text-align: left; +} .edit-post-keyboard-shortcut-help-modal__shortcut-description { flex: 1; margin: 0; - flex-basis: auto; } - + 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; } - + 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; } + 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; } + 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; } + 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; } + 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; } } + 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; } } + /* 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; } } + right: 0; +} +@media (min-width: 783px) { + .folded .edit-post-layout .components-editor-notices__snackbar { + right: 36px; + } +} body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar { - right: 0 !important; } + right: 0 !important; +} .edit-post-layout .editor-post-publish-panel { position: fixed; @@ -626,37 +1008,47 @@ 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%); } } + 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; + animation-delay: 0s; + } +} +@media (min-width: 782px) { + body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel { + top: 0; + } +} +@media (min-width: 782px) { + [role=region]:focus .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%; } - + transform: translateX(0%); + } +} .edit-post-layout .editor-post-publish-panel__header-publish-button { - justify-content: center; } + justify-content: center; +} .edit-post-layout__toggle-publish-panel, -.edit-post-layout__toogle-sidebar-panel, +.edit-post-layout__toggle-sidebar-panel, .edit-post-layout__toggle-entities-saved-states-panel { z-index: 100000; position: fixed !important; @@ -670,102 +1062,60 @@ 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__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__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, - .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__footer { - display: none; - z-index: 30; } - @media (min-width: 782px) { - .edit-post-layout__footer { - display: flex; - background: #fff; - height: 24px; - align-items: center; - font-size: 13px; - padding: 0 18px; } } - -.edit-post-layout .interface-interface-skeleton__content { - background-color: #ccd0d4; } - -.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%; } } + 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__toggle-sidebar-panel, +.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-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; +} @media (min-width: 600px) { .edit-post-manage-blocks-modal { - height: calc(100% - 60px - 60px); } } + height: calc(100% - 60px - 60px); + } +} .edit-post-manage-blocks-modal .components-modal__content { padding-bottom: 0; display: flex; - flex-direction: column; } + flex-direction: column; +} .edit-post-manage-blocks-modal .components-modal__header { flex-shrink: 0; - margin-bottom: 0; } + margin-bottom: 0; +} .edit-post-manage-blocks-modal__content { display: flex; flex-direction: column; flex: 0 1 100%; - min-height: 0; } + min-height: 0; +} .edit-post-manage-blocks-modal__no-results { font-style: italic; padding: 24px 0; - text-align: center; } + 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; } + 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; @@ -775,231 +1125,462 @@ padding-bottom: 0.6rem; padding-right: 24px; padding-left: 24px; - background-color: #f0f0f0; } + background-color: #f0f0f0; +} .edit-post-manage-blocks-modal__category { - margin: 0 0 2rem 0; } + 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; } + 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; } + margin-left: 8px; +} .edit-post-manage-blocks-modal__checklist { - margin-top: 0; } + 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: #555d66; } + 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; } + margin-right: -32px; + margin-left: -32px; + padding-right: 32px; + padding-left: 32px; + 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. - */ + * 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 */ - border-bottom: 1px solid #ddd; - 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 #6c7781; } - .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]:checked { - background: #fff; - border-color: #6c7781; } - .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]::before { - margin: -3px -4px; } + /* 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; } + clear: both; +} + +.edit-post-preferences-modal { + min-width: 360px; + width: 100%; +} +@media (min-width: 782px) { + .edit-post-preferences-modal { + width: auto; + } +} +@media (min-width: 600px) { + .edit-post-preferences-modal { + height: calc(100% - 60px - 60px); + } +} +.edit-post-preferences-modal .components-navigation { + background-color: #fff; + margin: -8px; + padding: 8px; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu { + margin: 0; + color: #1e1e1e; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item { + color: #1e1e1e; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button { + color: inherit; + padding: 3px 16px; + height: 48px; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:focus { + background: #f0f0f0; + font-weight: 500; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:hover { + color: var(--wp-admin-theme-color); +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item .components-toggle-control__label { + color: inherit; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__menu-title-heading { + color: inherit; + border-bottom: 1px solid #ddd; + padding-right: 0; + padding-left: 0; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button { + color: inherit; + padding-right: 0; +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button:hover { + color: var(--wp-admin-theme-color); +} +.edit-post-preferences-modal .components-navigation .components-navigation__menu .edit-post-preferences-modal__custom-fields-confirmation-button { + width: auto; +} +.edit-post-preferences-modal .edit-post-preferences__tabs { + display: flex; + flex-direction: row; +} +.edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs { + width: 160px; +} +.edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item { + border-radius: 2px; + font-weight: 400; +} +.edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active { + background: #f0f0f0; + box-shadow: none; + font-weight: 500; +} +.edit-post-preferences-modal .edit-post-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); +} +.edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tab-content { + width: 500px; + padding-right: 24px; +} +.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 .components-base-control__field { + align-items: center; + display: flex; + margin-bottom: 0; +} +.edit-post-preferences-modal__option .components-base-control .components-base-control__field > 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 58px 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; +} + +.edit-post-editor__inserter-panel, +.edit-post-editor__list-view-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-post-editor__list-view-panel { + min-width: 350px; +} + +.edit-post-editor__inserter-panel-header { + padding-top: 8px; + padding-left: 8px; + display: flex; + justify-content: flex-end; +} +@media (min-width: 782px) { + .edit-post-editor__inserter-panel-header { + display: none; + } +} + +.edit-post-editor__inserter-panel-content, +.edit-post-editor__list-view-panel-content { + height: calc(100% - 36px - 8px); +} + +@media (min-width: 782px) { + .edit-post-editor__inserter-panel-content { + height: 100%; + } +} + +.edit-post-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-post-editor__list-view-panel-content { + overflow-y: auto; + padding: 8px; +} .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; } + 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: 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; } } + display: flex; + } +} .components-panel__body.is-opened.edit-post-last-revision__panel { padding: 0; - height: 48px; } + height: 48px; +} .editor-post-last-revision__title.components-button { - padding: 16px; } + padding: 16px; +} .editor-post-author__select { margin: -5px 0; - width: 100%; } - @supports ((position: -webkit-sticky) or (position: sticky)) { - .editor-post-author__select { - width: auto; } } + width: 100%; +} +@supports (position: sticky) { + .editor-post-author__select { + width: auto; + } +} .edit-post-post-link__link-post-name { - font-weight: 600; } + font-weight: 600; +} .edit-post-post-link__preview-label { font-weight: 400; - margin: 0; } + margin: 0; +} .edit-post-post-link__link { text-align: right; word-wrap: break-word; - display: block; } + display: block; +} .edit-post-post-link__preview-link-container { - direction: ltr; } + direction: ltr; +} .edit-post-post-schedule { width: 100%; position: relative; - justify-content: left; } - .edit-post-post-schedule span { - display: block; - width: 45%; } + justify-content: left; +} +.edit-post-post-schedule span { + display: block; + width: 45%; +} .components-button.edit-post-post-schedule__toggle { - text-align: left; } + text-align: left; +} + +.edit-post-post-schedule__dialog .components-popover__content > div { + padding: 0; +} .editor-post-slug__input { margin: -5px 0; - padding: 2px; } + padding: 2px; +} .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft { margin-top: 15px; width: 100%; - text-align: center; } + text-align: center; +} .edit-post-post-visibility { width: 100%; - justify-content: left; } - .edit-post-post-visibility span { - display: block; - width: 45%; } + 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; } } + width: 257px; + } +} .edit-post-post-visibility__dialog-legend { - font-weight: 600; } + font-weight: 600; +} .edit-post-post-visibility__choice { - margin: 10px 0; } + margin: 10px 0; +} .edit-post-post-visibility__dialog-radio, .edit-post-post-visibility__dialog-label { - vertical-align: top; } + vertical-align: top; +} .edit-post-post-visibility__dialog-password-input { width: calc(100% - 20px); - margin-right: 20px; } + margin-right: 20px; +} .edit-post-post-visibility__dialog-info { - color: #7e8993; + color: #757575; padding-right: 20px; font-style: italic; margin: 4px 0 0; - line-height: 1.4; } + line-height: 1.4; +} .components-button.edit-post-sidebar__panel-tab { border-radius: 0; @@ -1011,75 +1592,126 @@ 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); } + 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 var(--wp-admin-border-width-focus) 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 var(--wp-admin-border-width-focus) 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 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); +} + +@media (min-width: 782px) { + .edit-post-template__modal .components-base-control { + width: 320px; + } +} +.edit-post-template__modal .components-modal__header { + border-bottom: none; +} +.edit-post-template__modal .components-modal__content::before { + margin-bottom: 4px; +} + +.edit-post-template__modal-actions { + margin-top: 12px; +} + +.edit-post-template-modal__tip { + padding: 16px 24px; + background: #f0f0f0; + border-radius: 2px; +} +@media (min-width: 782px) { + .edit-post-template-modal__tip { + width: 240px; + } +} + +.edit-post-template__actions button:not(:last-child) { + margin-left: 8px; +} + +h2.edit-post-template-summary__title { + margin: 0; + line-height: 24px; +} .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 #ccc; - 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: 1px solid #1e1e1e; } - @media (min-width: 600px) { - .edit-post-text-editor .wp-block.editor-post-title { - padding: 0; } } + flex-grow: 1; +} +.edit-post-text-editor .editor-post-title.editor-post-title__block { + max-width: none; + line-height: 1.4; +} +.edit-post-text-editor .editor-post-title.editor-post-title__block .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 .editor-post-title.editor-post-title__block .editor-post-title__input { + border: 1px solid #949494; + margin-bottom: -1px; + padding: 16px; +} +@media (min-width: 600px) { + .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input { + padding: 24px; + } +} +.edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +@media (min-width: 600px) { + .edit-post-text-editor .editor-post-title.editor-post-title__block { + 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; } } + 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; @@ -1087,143 +1719,151 @@ 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; } + 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; } + display: flex; + flex-flow: column; + background-color: #2f2f2f; + 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: sticky) { + .edit-post-visual-editor { + flex-basis: 100%; + } +} .edit-post-visual-editor__post-title-wrapper .editor-post-title { margin-top: 2em; margin-right: auto; margin-left: auto; - margin-bottom: 32px; } - -.edit-post-options-modal__section { - margin: 0 0 2rem 0; } - -.edit-post-options-modal__section-title { - font-size: 0.9rem; - font-weight: 600; } + margin-bottom: 0; +} -.edit-post-options-modal__option { - border-top: 1px solid #ddd; } - .edit-post-options-modal__option:last-child { - border-bottom: 1px solid #ddd; } - .edit-post-options-modal__option .components-base-control__field { - align-items: center; - display: flex; - margin: 0; } - .edit-post-options-modal__option .components-checkbox-control__label { - flex-grow: 1; - padding: 0.6rem 10px 0.6rem 0; } +.edit-post-visual-editor__exit-template-mode { + position: absolute; + top: 8px; + right: 8px; + color: #fff; +} +.edit-post-visual-editor__exit-template-mode:active:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:focus:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:hover { + color: #f0f0f0; +} -.edit-post-options-modal__custom-fields-confirmation-message, .edit-post-options-modal__custom-fields-confirmation-button { - margin: 0 48px 0.6rem 0; } - @media (min-width: 782px) { - .edit-post-options-modal__custom-fields-confirmation-message, .edit-post-options-modal__custom-fields-confirmation-button { - margin-right: 38px; } } - @media (min-width: 600px) { - .edit-post-options-modal__custom-fields-confirmation-message, .edit-post-options-modal__custom-fields-confirmation-button { - max-width: 300px; } } +.edit-post-visual-editor__content-area { + width: 100%; + height: 100%; + position: relative; + display: flex; +} .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; } + width: 312px; +} +.edit-post-welcome-guide__image { + background: #00a0d2; + margin: 0 0 16px; +} +.edit-post-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-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; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} html.wp-toolbar { - background: #fff; } + 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%; } + 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%; +} + +.block-editor-page #wpwrap { + overflow-y: auto; +} +@media (min-width: 782px) { + .block-editor-page #wpwrap { + overflow-y: initial; + } +} .edit-post-header, .edit-post-visual-editor, @@ -1232,33 +1872,35 @@ .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; } +.edit-post-editor__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-editor__inserter-panel *, +.edit-post-editor__inserter-panel *::before, +.edit-post-editor__inserter-panel *::after { + box-sizing: inherit; +} @media (min-width: 600px) { .block-editor__container { @@ -1267,67 +1909,117 @@ left: 0; bottom: 0; right: 0; - min-height: calc(100vh - 46px); } } - + 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; } } - + min-height: calc(100vh - 32px); + } + body.is-fullscreen-mode .block-editor__container { + min-height: 100vh; + } +} .block-editor__container img { max-width: 100%; - height: auto; } - + 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; } + width: 100%; +} body.admin-color-light { --wp-admin-theme-color: #0085ba; --wp-admin-theme-color-darker-10: #0073a1; - --wp-admin-theme-color-darker-20: #006187; } + --wp-admin-theme-color-darker-20: #006187; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-light { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-modern { --wp-admin-theme-color: #3858e9; --wp-admin-theme-color-darker-10: #2145e6; - --wp-admin-theme-color-darker-20: #183ad6; } + --wp-admin-theme-color-darker-20: #183ad6; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-modern { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-blue { --wp-admin-theme-color: #096484; --wp-admin-theme-color-darker-10: #07526c; - --wp-admin-theme-color-darker-20: #064054; } + --wp-admin-theme-color-darker-20: #064054; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-blue { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-coffee { --wp-admin-theme-color: #46403c; --wp-admin-theme-color-darker-10: #383330; - --wp-admin-theme-color-darker-20: #2b2724; } + --wp-admin-theme-color-darker-20: #2b2724; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-coffee { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-ectoplasm { --wp-admin-theme-color: #523f6d; --wp-admin-theme-color-darker-10: #46365d; - --wp-admin-theme-color-darker-20: #3a2c4d; } + --wp-admin-theme-color-darker-20: #3a2c4d; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ectoplasm { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-midnight { --wp-admin-theme-color: #e14d43; --wp-admin-theme-color-darker-10: #dd382d; - --wp-admin-theme-color-darker-20: #d02c21; } + --wp-admin-theme-color-darker-20: #d02c21; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-midnight { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-ocean { --wp-admin-theme-color: #627c83; --wp-admin-theme-color-darker-10: #576e74; - --wp-admin-theme-color-darker-20: #4c6066; } + --wp-admin-theme-color-darker-20: #4c6066; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ocean { + --wp-admin-border-width-focus: 1.5px; + } +} body.admin-color-sunrise { --wp-admin-theme-color: #dd823b; --wp-admin-theme-color-darker-10: #d97426; - --wp-admin-theme-color-darker-20: #c36922; } + --wp-admin-theme-color-darker-20: #c36922; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-sunrise { + --wp-admin-border-width-focus: 1.5px; + } +} \ No newline at end of file