diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/navigation/editor-rtl.css --- a/wp/wp-includes/blocks/navigation/editor-rtl.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/navigation/editor-rtl.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,536 +1,472 @@ -/** - * 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. - */ -/** -* Editor only CSS. -*/ -.editor-styles-wrapper .wp-block-navigation ul { - margin-top: 0; - margin-bottom: 0; - margin-right: 0; - padding-right: 0; +.editor-styles-wrapper .wp-block-navigation ul{ + margin-bottom:0; + margin-right:0; + margin-top:0; + padding-right:0; +} +.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block{ + margin:revert; +} + +.wp-block-navigation-item__label{ + display:inline; +} +.wp-block-navigation-item,.wp-block-navigation__container{ + background-color:inherit; +} + +.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover>.wp-block-navigation__submenu-container{ + opacity:0; + visibility:hidden; } -.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block { - margin: revert; + +.has-child.has-child-selected>.wp-block-navigation__submenu-container,.has-child.is-selected>.wp-block-navigation__submenu-container{ + display:flex; + opacity:1; + visibility:visible; +} + +.is-dragging-components-draggable .has-child.is-dragging-within>.wp-block-navigation__submenu-container{ + opacity:1; + visibility:visible; +} + +.is-editing>.wp-block-navigation__container{ + display:flex; + flex-direction:column; + opacity:1; + visibility:visible; +} + +.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container{ + opacity:1; + visibility:hidden; +} +.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container .block-editor-block-draggable-chip-wrapper{ + visibility:visible; } -.wp-block-navigation-item__label { - display: inline; -} - -/** - * Submenus. - */ -.wp-block-navigation__container.is-parent-of-selected-block { - visibility: visible; - opacity: 1; - overflow: visible; +.is-editing>.wp-block-navigation__submenu-container>.block-list-appender{ + display:block; + position:static; + width:100%; } - -.wp-block-navigation__container, -.wp-block-navigation-item { - background-color: inherit; -} - -.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container { - opacity: 0; - visibility: hidden; -} - -.has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container { - display: flex; - opacity: 1; - visibility: visible; +.is-editing>.wp-block-navigation__submenu-container>.block-list-appender .block-editor-button-block-appender{ + background:#1e1e1e; + border-radius:2px; + color:#fff; + margin-left:0; + margin-right:auto; + padding:0; + width:24px; } -.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container { - opacity: 1; - visibility: visible; +.wp-block-navigation__submenu-container .block-list-appender{ + display:none; +} +.block-library-colors-selector{ + width:auto; +} +.block-library-colors-selector .block-library-colors-selector__toggle{ + display:block; + margin:0 auto; + padding:3px; + width:auto; } - -.is-editing > .wp-block-navigation__container { - visibility: visible; - opacity: 1; - display: flex; - flex-direction: column; +.block-library-colors-selector .block-library-colors-selector__icon-container{ + align-items:center; + border-radius:4px; + display:flex; + height:30px; + margin:0 auto; + padding:3px; + position:relative; +} +.block-library-colors-selector .block-library-colors-selector__state-selection{ + border-radius:11px; + box-shadow:inset 0 0 0 1px #0003; + height:22px; + line-height:20px; + margin-left:auto; + margin-right:auto; + min-height:22px; + min-width:22px; + padding:2px; + width:22px; +} +.block-library-colors-selector .block-library-colors-selector__state-selection>svg{ + min-width:auto !important; +} +.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg,.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg path{ + color:inherit; } -.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container { - opacity: 1; - visibility: hidden; +.block-library-colors-selector__popover .color-palette-controller-container{ + padding:16px; +} +.block-library-colors-selector__popover .components-base-control__label{ + height:20px; + line-height:20px; } -.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper { - visibility: visible; +.block-library-colors-selector__popover .component-color-indicator{ + float:left; + margin-top:2px; +} +.block-library-colors-selector__popover .components-panel__body-title{ + display:none; } -.is-editing > .wp-block-navigation__submenu-container > .block-list-appender { - display: block; - position: static; - width: 100%; +.wp-block-navigation .wp-block+.block-list-appender .block-editor-button-block-appender{ + background-color:#1e1e1e; + color:#fff; } -.is-editing > .wp-block-navigation__submenu-container > .block-list-appender .block-editor-button-block-appender { - color: #fff; - background: #1e1e1e; - padding: 0; - width: 24px; - border-radius: 2px; - margin-left: 0; - margin-right: auto; -} - -.wp-block-navigation__submenu-container .block-list-appender { - display: none; +.wp-block-navigation .wp-block+.block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender{ + padding:0; } -/** - * Colors Selector component - */ -.block-library-colors-selector { - width: auto; +.wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender{ + background-color:initial; + color:#1e1e1e; } -.block-library-colors-selector .block-library-colors-selector__toggle { - display: block; - margin: 0 auto; - padding: 3px; - width: auto; +@keyframes loadingpulse{ + 0%{ + opacity:1; + } + 50%{ + opacity:.5; + } + to{ + opacity:1; + } } -.block-library-colors-selector .block-library-colors-selector__icon-container { - height: 30px; - position: relative; - margin: 0 auto; - padding: 3px; - display: flex; - align-items: center; - border-radius: 4px; +.components-placeholder.wp-block-navigation-placeholder{ + background:none; + box-shadow:none; + color:inherit; + min-height:0; + outline:none; + padding:0; } -.block-library-colors-selector .block-library-colors-selector__state-selection { - margin-right: auto; - margin-left: auto; - border-radius: 11px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - width: 22px; - min-width: 22px; - height: 22px; - min-height: 22px; - line-height: 20px; - padding: 2px; +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset{ + font-size:inherit; } -.block-library-colors-selector .block-library-colors-selector__state-selection > svg { - min-width: auto !important; +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button{ + margin-bottom:0; } -.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg, -.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path { - color: inherit; +.wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder{ + color:#1e1e1e; } -.block-library-colors-selector__popover .color-palette-controller-container { - padding: 16px; +.wp-block-navigation-placeholder__preview{ + align-items:center; + background:#0000; + color:currentColor; + display:flex; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; + font-size:13px; + min-width:96px; } -.block-library-colors-selector__popover .components-base-control__label { - height: 20px; - line-height: 20px; -} -.block-library-colors-selector__popover .component-color-indicator { - float: left; - margin-top: 2px; +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview{ + display:none; } -.block-library-colors-selector__popover .components-panel__body-title { - display: none; -} - -.wp-block-navigation .block-editor-button-block-appender { - background-color: #1e1e1e; - color: #fff; +.wp-block-navigation-placeholder__preview:before{ + border:1px dashed; + border-radius:2px; + border-radius:inherit; + bottom:0; + content:""; + display:block; + left:0; + pointer-events:none; + position:absolute; + right:0; + top:0; } -.wp-block-navigation .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender { - padding: 0; +.wp-block-navigation-placeholder__preview:before:before{ + background:currentColor; + bottom:0; + content:""; + left:0; + opacity:.1; + pointer-events:none; + position:absolute; + right:0; + top:0; } - -.wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender { - background-color: transparent; - color: #1e1e1e; +.wp-block-navigation-placeholder__preview>svg{ + fill:currentColor; } -/** - * Setup state - */ -@keyframes loadingpulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.5; - } - 100% { - opacity: 1; - } -} -.components-placeholder.wp-block-navigation-placeholder { - outline: none; - padding: 0; - box-shadow: none; - background: none; - min-height: 0; - color: inherit; -} -.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset { - font-size: inherit; -} -.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button { - margin-bottom: 0; -} -.wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder { - color: #1e1e1e; -} - -.wp-block-navigation-placeholder .components-spinner { - margin-top: 0; +.wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset,.wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset{ + min-height:90px; } -.wp-block-navigation-placeholder__preview { - display: flex; - align-items: center; - min-width: 96px; - font-size: 13px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - color: currentColor; - background: transparent; -} -.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview { - display: none; +.wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset{ + min-height:132px; } -.wp-block-navigation-placeholder__preview::before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border: 1px dashed currentColor; - opacity: 0.4; - pointer-events: none; - border-radius: inherit; -} -.wp-block-navigation-placeholder__preview > svg { - fill: currentColor; - opacity: 0.4; + +.wp-block-navigation-placeholder__controls,.wp-block-navigation-placeholder__preview{ + align-items:flex-start; + flex-direction:row; + padding:6px 8px; } -.wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset, -.wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset { - min-height: 90px; +.wp-block-navigation-placeholder__controls{ + background-color:#fff; + border-radius:2px; + box-shadow:inset 0 0 0 1px #1e1e1e; + display:none; + float:right; + position:relative; + width:100%; + z-index:1; +} +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls{ + display:flex; } - -.wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset { - min-height: 132px; +.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator+hr,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator+hr{ + display:none; +} +.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions{ + align-items:flex-start; + flex-direction:column; } - -.wp-block-navigation-placeholder__preview, -.wp-block-navigation-placeholder__controls { - padding: 6px 8px; - flex-direction: row; - align-items: flex-start; +.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr,.wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr{ + display:none; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon{ + height:36px; + margin-left:12px; } -.wp-block-navigation-placeholder__controls { - border-radius: 2px; - background-color: #fff; - box-shadow: inset 0 0 0 1px #1e1e1e; - display: none; - position: relative; - z-index: 1; - float: right; - width: 100%; -} -.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls { - display: flex; +.wp-block-navigation-placeholder__actions__indicator{ + align-items:center; + display:flex; + height:36px; + justify-content:flex-start; + line-height:0; + margin-right:4px; + padding:0 0 0 6px; } -.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator, -.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator, -.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr { - display: none; +.wp-block-navigation-placeholder__actions__indicator svg{ + margin-left:4px; + fill:currentColor; } -.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions { - flex-direction: column; - align-items: flex-start; -} -.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr { - display: none; -} -.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon { - margin-left: 12px; - height: 36px; + +.wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset{ + flex-direction:row !important; } -.wp-block-navigation-placeholder__actions__indicator { - display: flex; - padding: 0 0 0 6px; - align-items: center; - justify-content: flex-start; - line-height: 0; - height: 36px; - margin-right: 4px; +.wp-block-navigation-placeholder__actions{ + align-items:center; + display:flex; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; + font-size:13px; + gap:6px; + height:100%; } -.wp-block-navigation-placeholder__actions__indicator svg { - margin-left: 4px; - fill: currentColor; -} - -.wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset { - flex-direction: row !important; +.wp-block-navigation-placeholder__actions .components-dropdown,.wp-block-navigation-placeholder__actions>.components-button{ + margin-left:0; } - -.wp-block-navigation-placeholder__actions { - display: flex; - font-size: 13px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - gap: 6px; - align-items: center; - height: 100%; -} -.wp-block-navigation-placeholder__actions .components-dropdown, -.wp-block-navigation-placeholder__actions > .components-button { - margin-left: 0; +.wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr{ + background-color:#1e1e1e; + border:0; + height:100%; + margin:auto 0; + max-height:16px; + min-height:1px; + min-width:1px; } -.wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr { - border: 0; - min-height: 1px; - min-width: 1px; - background-color: #1e1e1e; - margin: auto 0; - height: 100%; - max-height: 16px; -} - -/** - * Mobile menu. - */ -@media (min-width: 600px) { - .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close { - display: none; +@media (min-width:600px){ + .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close{ + display:none; } } -.wp-block-navigation__responsive-container.is-menu-open { - position: fixed; - top: 155px; +.wp-block-navigation__responsive-container.is-menu-open{ + position:fixed; + top:155px; } -@media (min-width: 782px) { - .wp-block-navigation__responsive-container.is-menu-open { - top: 93px; +@media (min-width:782px){ + .wp-block-navigation__responsive-container.is-menu-open{ + right:36px; + top:93px; } } -@media (min-width: 782px) { - .wp-block-navigation__responsive-container.is-menu-open { - right: 36px; - } -} -@media (min-width: 960px) { - .wp-block-navigation__responsive-container.is-menu-open { - right: 160px; +@media (min-width:960px){ + .wp-block-navigation__responsive-container.is-menu-open{ + right:160px; } } -@media (min-width: 782px) { - .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { - top: 141px; +@media (min-width:782px){ + .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{ + top:141px; } } -.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, -.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { - top: 141px; -} - -.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open { - left: 280px; +.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{ + top:141px; } -.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { - right: 0; - top: 155px; +.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{ + right:0; + top:155px; } -@media (min-width: 782px) { - .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { - top: 61px; +@media (min-width:782px){ + .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{ + top:61px; + } + .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{ + top:109px; } } -@media (min-width: 782px) { - .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { - top: 109px; - } +.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{ + top:109px; +} + +body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open{ + bottom:0; + left:0; + right:0; + top:0; } -.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, -.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { - top: 109px; + +.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{ + color:inherit; + height:auto; + padding:0; +} + +.components-heading.wp-block-navigation-off-canvas-editor__title{ + margin:0; } -body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open { - top: 0; - left: 0; - bottom: 0; - right: 0; +.wp-block-navigation-off-canvas-editor__header{ + margin-bottom:8px; +} + +.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender{ + margin-top:16px; +} + +@keyframes fadein{ + 0%{ + opacity:0; + } + to{ + opacity:1; + } +} +.wp-block-navigation__loading-indicator-container{ + padding:8px 12px; } -@media (min-width: 600px) { - .wp-block-navigation__responsive-close { - pointer-events: none; +.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator{ + margin-top:0; +} + +@keyframes fadeouthalf{ + 0%{ + opacity:1; } - .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close, -.wp-block-navigation__responsive-close .block-editor-block-list__layout * { - pointer-events: all; + to{ + opacity:.5; } } -.wp-block-navigation__responsive-close .wp-block-pages-list__item__link { - pointer-events: none; +.wp-block-navigation-delete-menu-button{ + justify-content:center; + margin-bottom:16px; + width:100%; } -.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, -.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { - padding: 0; - height: auto; - color: inherit; -} - -.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender { - margin-top: 16px; +.components-button.is-link.wp-block-navigation-manage-menus-button{ + margin-bottom:16px; } -@keyframes fadein { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } +.wp-block-navigation__overlay-menu-preview{ + align-items:center; + background-color:#f0f0f0; + display:flex; + height:64px; + justify-content:space-between; + margin-bottom:12px; + padding:0 24px; + width:100%; +} +.wp-block-navigation__overlay-menu-preview.open{ + background-color:#fff; + box-shadow:inset 0 0 0 1px #e0e0e0; + outline:1px solid #0000; } -.wp-block-navigation .components-spinner { - padding: 8px 12px; + +.wp-block-navigation-placeholder__actions hr+hr,.wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty{ + display:none; +} +.wp-block-navigation__navigation-selector{ + margin-bottom:16px; + width:100%; +} + +.wp-block-navigation__navigation-selector-button{ + border:1px solid; + justify-content:space-between; + width:100%; +} + +.wp-block-navigation__navigation-selector-button__icon{ + flex:0 0 auto; } -.wp-block-navigation__unsaved-changes { - position: relative; +.wp-block-navigation__navigation-selector-button__label{ + flex:0 1 auto; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; } -.wp-block-navigation__unsaved-changes .components-spinner { - position: absolute; - top: calc(50% - 16px / 2); - right: calc(50% - 16px / 2); - opacity: 0; - animation: 0.5s linear 2s normal forwards fadein; + +.wp-block-navigation__navigation-selector-button--createnew{ + border:1px solid; + margin-bottom:16px; + width:100%; +} + +.wp-block-navigation__responsive-container-open.components-button{ + opacity:1; } -@keyframes fadeouthalf { - 0% { - opacity: 1; - } - 100% { - opacity: 0.5; +.wp-block-navigation__menu-inspector-controls{ + overflow-x:auto; + scrollbar-color:#0000 #0000; + scrollbar-gutter:stable both-edges; + scrollbar-width:thin; + will-change:transform; +} +.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar{ + height:12px; + width:12px; +} +.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track{ + background-color:initial; +} +.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb{ + background-clip:padding-box; + background-color:initial; + border:3px solid #0000; + border-radius:8px; +} +.wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb,.wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb,.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb{ + background-color:#949494; +} +.wp-block-navigation__menu-inspector-controls:focus,.wp-block-navigation__menu-inspector-controls:focus-within,.wp-block-navigation__menu-inspector-controls:hover{ + scrollbar-color:#949494 #0000; +} +@media (hover:none){ + .wp-block-navigation__menu-inspector-controls{ + scrollbar-color:#949494 #0000; } } -.wp-block-navigation__unsaved-changes-overlay.is-saving { - opacity: 1; - animation: 0.5s linear 2s normal forwards fadeouthalf; -} -.wp-block-navigation-delete-menu-button { - width: 100%; - justify-content: center; - margin-bottom: 16px; -} - -.wp-block-navigation__overlay-menu-preview { - display: flex; - align-items: center; - width: 100%; - background-color: #f0f0f0; - padding: 0 24px; - height: 64px; - margin-bottom: 12px; -} -.wp-block-navigation__overlay-menu-preview.open { - box-shadow: inset 0 0 0 1px #e0e0e0; - outline: 1px solid transparent; - background-color: #fff; -} - -.wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty { - display: none; -} - -.wp-block-navigation-placeholder__actions hr + hr { - display: none; +.wp-block-navigation__menu-inspector-controls__empty-message{ + margin-right:24px; } \ No newline at end of file