diff options
Diffstat (limited to 'wp-includes/css/dist/block-editor/content.css')
| -rw-r--r-- | wp-includes/css/dist/block-editor/content.css | 272 |
1 files changed, 131 insertions, 141 deletions
diff --git a/wp-includes/css/dist/block-editor/content.css b/wp-includes/css/dist/block-editor/content.css index 2d23ec1..4f18061 100644 --- a/wp-includes/css/dist/block-editor/content.css +++ b/wp-includes/css/dist/block-editor/content.css @@ -8,7 +8,7 @@ --wp-admin-border-width-focus:2px; --wp-block-synced-color:#7a00df; --wp-block-synced-color--rgb:122, 0, 223; - --wp-bound-block-color:#9747ff; + --wp-bound-block-color:var(--wp-block-synced-color); } @media (min-resolution:192dpi){ :root{ @@ -55,9 +55,6 @@ .block-editor-block-list__layout{ position:relative; } -.block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)){ - border-radius:2px; -} .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection{ background:#0000; } @@ -65,7 +62,6 @@ animation:selection-overlay__fade-in-animation .1s ease-out; animation-fill-mode:forwards; background:var(--wp-admin-theme-color); - border-radius:2px; bottom:0; content:""; left:0; @@ -84,26 +80,27 @@ } } .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted:after{ - box-shadow:none; + outline-color:#0000; } .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted~.is-multi-selected,.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus,.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected{ outline:none; } .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted:after,.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted~.is-multi-selected:after,.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus:after,.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected:after{ - border-radius:1px; - bottom:1px; - box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + bottom:0; content:""; - left:1px; - outline:2px solid #0000; + left:0; + outline-color:var(--wp-admin-theme-color); + outline-offset:calc((-1*var(--wp-admin-border-width-focus))/var(--wp-block-editor-iframe-zoom-out-scale, 1)); + outline-style:solid; + outline-width:calc(var(--wp-admin-border-width-focus)/var(--wp-block-editor-iframe-zoom-out-scale, 1)); pointer-events:none; position:absolute; - right:1px; - top:1px; + right:0; + top:0; z-index:1; } .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted:after,.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted~.is-multi-selected:after,.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus:after,.is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected:after{ - box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff; + outline-color:#fff; } .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected:after{ border-radius:2px; @@ -150,6 +147,9 @@ -webkit-user-select:none; user-select:none; } +.block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected,.block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected{ + z-index:20; +} .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel *{ z-index:1; } @@ -200,52 +200,57 @@ float:none; } -.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered{ - cursor:default; -} -.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:after{ - border-radius:1px; - bottom:1px; - box-shadow:0 0 0 1px var(--wp-admin-theme-color); - content:""; - left:1px; - pointer-events:none; - position:absolute; - right:1px; - top:1px; -} .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected{ cursor:default; } .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text{ cursor:unset; } -.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:after{ - border-radius:2px; - bottom:1px; - box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected):after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected:after{ + bottom:0; content:""; - left:1px; + left:0; + outline-color:var(--wp-admin-theme-color); + outline-offset:calc((-1*var(--wp-admin-border-width-focus))/var(--wp-block-editor-iframe-zoom-out-scale, 1)); + outline-style:solid; + outline-width:calc(var(--wp-admin-border-width-focus)/var(--wp-block-editor-iframe-zoom-out-scale, 1)); pointer-events:none; position:absolute; - right:1px; - top:1px; + right:0; + top:0; +} +.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered:after,.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected:after{ + outline-color:var(--wp-block-synced-color); +} +.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus:after,.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus:after{ + outline-color:#fff; } -@keyframes block-editor-has-editable-outline__fade-out-animation{ +@keyframes block-editor-is-editable__animation{ 0%{ - border-color:rgba(var(--wp-admin-theme-color--rgb), 1); + background-color:rgba(var(--wp-admin-theme-color--rgb), .1); } to{ - border-color:rgba(var(--wp-admin-theme-color--rgb), 0); + background-color:rgba(var(--wp-admin-theme-color--rgb), 0); } } -.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline:after{ - animation:block-editor-has-editable-outline__fade-out-animation .3s ease-out; - animation-delay:1s; - animation-fill-mode:forwards; - border:1px dotted rgba(var(--wp-admin-theme-color--rgb), 1); - border-radius:2px; +@keyframes block-editor-is-editable__animation_reduce-motion{ + 0%{ + background-color:rgba(var(--wp-admin-theme-color--rgb), .1); + } + 99%{ + background-color:rgba(var(--wp-admin-theme-color--rgb), .1); + } + to{ + background-color:rgba(var(--wp-admin-theme-color--rgb), 0); + } +} +.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline:after{ + animation-delay:.1s; + animation-duration:.8s; + animation-fill-mode:backwards; + animation-name:block-editor-is-editable__animation; + animation-timing-function:ease-out; bottom:0; content:""; left:0; @@ -255,9 +260,9 @@ top:0; } @media (prefers-reduced-motion:reduce){ - .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline:after{ + .is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline:after{ animation-delay:0s; - animation-duration:1ms; + animation-name:block-editor-is-editable__animation_reduce-motion; } } @@ -361,11 +366,6 @@ margin-bottom:auto; } -.block-editor-iframe__body{ - transform-origin:top center; - transition:all .3s; -} - .is-vertical .block-list-appender{ margin-left:12px; margin-right:auto; @@ -385,38 +385,13 @@ .block-editor-block-list__block.has-block-overlay{ cursor:default; } -.block-editor-block-list__block.has-block-overlay:before{ - background:#0000; - border:none; - border-radius:2px; - content:""; - height:100%; - left:0; - position:absolute; - top:0; - width:100%; - z-index:10; -} -.block-editor-block-list__block.has-block-overlay:not(.is-multi-selected):after{ - content:none !important; -} -.block-editor-block-list__block.has-block-overlay:hover:not(.is-dragging-blocks):not(.is-multi-selected):before{ - background:rgba(var(--wp-admin-theme-color--rgb), .04); - box-shadow:0 0 0 1px var(--wp-admin-theme-color) inset; -} -.block-editor-block-list__block.has-block-overlay.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected):before,.block-editor-block-list__block.has-block-overlay.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected):before{ - background:rgba(var(--wp-block-synced-color--rgb), .04); - box-shadow:0 0 0 1px var(--wp-block-synced-color) inset; -} -.block-editor-block-list__block.has-block-overlay.is-selected:not(.is-dragging-blocks):before{ - box-shadow:0 0 0 1px var(--wp-admin-theme-color) inset; -} .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block{ pointer-events:none; } -.block-editor-iframe__body.is-zoomed-out .block-editor-block-list__block.has-block-overlay:before{ - left:calc(50% - 50vw); - width:100vw; +.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay:before{ + left:0; + right:0; + width:auto; } .block-editor-block-list__layout .is-dragging{ @@ -449,71 +424,37 @@ display:none; } -.block-editor-block-variation-picker .components-placeholder__instructions{ - margin-bottom:0; -} -.block-editor-block-variation-picker .components-placeholder__fieldset{ - flex-direction:column; -} -.block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset{ - max-width:90%; -} - -.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations{ +.block-editor-block-variation-picker__skip,.block-editor-block-variation-picker__variations,.wp-block-group-placeholder__variations{ display:flex; flex-direction:row; flex-wrap:wrap; + font-size:12px; + gap:8px; justify-content:flex-start; list-style:none; - margin:16px 0; + margin:0; padding:0; width:100%; } -.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations>li{ - flex-shrink:1; - list-style:none; - margin:8px 20px 0 0; - text-align:center; - width:75px; +.block-editor-block-variation-picker__skip svg,.block-editor-block-variation-picker__variations svg,.wp-block-group-placeholder__variations svg{ + fill:#949494 !important; } -.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations>li button{ - display:inline-flex; - margin-right:0; +.block-editor-block-variation-picker__skip .components-button,.block-editor-block-variation-picker__variations .components-button,.wp-block-group-placeholder__variations .components-button{ + padding:4px; } -.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation{ - padding:8px; -} -.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label{ - display:block; - font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; - font-size:12px; - line-height:1.4; +.block-editor-block-variation-picker__skip .components-button:hover,.block-editor-block-variation-picker__variations .components-button:hover,.wp-block-group-placeholder__variations .components-button:hover{ + background:none !important; } - -.block-editor-block-variation-picker__variation{ - width:100%; +.block-editor-block-variation-picker__skip .components-button:hover svg,.block-editor-block-variation-picker__variations .components-button:hover svg,.wp-block-group-placeholder__variations .components-button:hover svg{ + fill:var(--wp-admin-theme-color) !important; } -.block-editor-block-variation-picker__variation.components-button.has-icon{ - justify-content:center; +.block-editor-block-variation-picker__skip>li,.block-editor-block-variation-picker__variations>li,.wp-block-group-placeholder__variations>li{ + align-items:center; + display:flex; + flex-direction:column; + gap:4px; width:auto; } -.block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary{ - background-color:#fff; -} -.block-editor-block-variation-picker__variation.components-button{ - height:auto; - padding:0; -} -.block-editor-block-variation-picker__variation:before{ - content:""; - padding-bottom:100%; -} -.block-editor-block-variation-picker__variation:first-child{ - margin-left:0; -} -.block-editor-block-variation-picker__variation:last-child{ - margin-right:0; -} .block-editor-button-block-appender{ align-items:center; @@ -569,7 +510,10 @@ top:0; } .block-editor-block-list__block:not(.is-selected)>.is-layout-constrained.wp-block-group__inner-container>.block-list-appender:only-child .block-editor-inserter,.block-editor-block-list__block:not(.is-selected)>.is-layout-flow.wp-block-group__inner-container>.block-list-appender:only-child .block-editor-inserter,.is-layout-constrained.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child .block-editor-inserter,.is-layout-flow.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child .block-editor-inserter{ - visibility:hidden; + opacity:0; +} +.block-editor-block-list__block:not(.is-selected)>.is-layout-constrained.wp-block-group__inner-container>.block-list-appender:only-child .block-editor-inserter:focus-within,.block-editor-block-list__block:not(.is-selected)>.is-layout-flow.wp-block-group__inner-container>.block-list-appender:only-child .block-editor-inserter:focus-within,.is-layout-constrained.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child .block-editor-inserter:focus-within,.is-layout-flow.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child .block-editor-inserter:focus-within{ + opacity:1; } .block-editor-block-list__block:not(.is-selected)>.is-layout-constrained.wp-block-group__inner-container>.block-list-appender:only-child.is-drag-over:after,.block-editor-block-list__block:not(.is-selected)>.is-layout-flow.wp-block-group__inner-container>.block-list-appender:only-child.is-drag-over:after,.is-layout-constrained.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child.is-drag-over:after,.is-layout-flow.block-editor-block-list__block:not(.is-selected)>.block-list-appender:only-child.is-drag-over:after{ border:none; @@ -603,7 +547,8 @@ .block-editor-default-block-appender .block-editor-default-block-appender__content{ opacity:.62; } -:where(body .is-layout-constrained) .block-editor-default-block-appender>:first-child:first-child{ +:where(.wp-site-blocks) .block-editor-default-block-appender>:first-child,:where(body .is-layout-constrained) .block-editor-default-block-appender>:first-child{ + margin-block-end:0; margin-block-start:0; } .block-editor-default-block-appender .components-drop-zone__content-icon{ @@ -683,6 +628,59 @@ cursor:text; } +.block-editor-iframe__body{ + position:relative; +} + +.block-editor-iframe__container{ + height:100%; + overflow-x:hidden; + width:100%; +} + +.block-editor-iframe__scale-container{ + display:flex; + height:100%; + width:100%; +} + +.block-editor-iframe__scale-container.is-zoomed-out{ + margin-left:calc((var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw))*-1/2); + width:var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw); +} + +.block-editor-iframe__html{ + transform-origin:top center; + transition:transform .3s; +} +@media (prefers-reduced-motion:reduce){ + .block-editor-iframe__html{ + transition-delay:0s; + transition-duration:0s; + } +} + +.block-editor-iframe__html.is-zoomed-out{ + background-color:#ddd; + border:calc(var(--wp-block-editor-iframe-zoom-out-frame-size)/var(--wp-block-editor-iframe-zoom-out-scale)) solid #ddd; + margin-bottom:calc(var(--wp-block-editor-iframe-zoom-out-content-height)*(1 - var(--wp-block-editor-iframe-zoom-out-scale))*-1 + var(--wp-block-editor-iframe-zoom-out-frame-size)*2*-1 + -2px); + transform:scale(var(--wp-block-editor-iframe-zoom-out-scale)); +} +.block-editor-iframe__html.is-zoomed-out body{ + display:flex; + flex-direction:column; + min-height:calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - 2*var(--wp-block-editor-iframe-zoom-out-frame-size))/var(--wp-block-editor-iframe-zoom-out-scale)); +} +.block-editor-iframe__html.is-zoomed-out body>.is-root-container{ + display:flex; + flex:1; + flex-direction:column; + height:100%; +} +.block-editor-iframe__html.is-zoomed-out body>.is-root-container>main{ + flex:1; +} + .block-editor-block-list__layout.has-overlay:after{ bottom:0; content:""; @@ -693,10 +691,6 @@ z-index:60; } -.block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button{ - margin-bottom:0; -} - .block-editor-media-placeholder__url-input-form{ display:flex; } @@ -718,10 +712,6 @@ flex-shrink:1; } -.block-editor-media-placeholder__button{ - margin-bottom:.5rem; -} - .block-editor-media-placeholder__cancel-button.is-link{ display:block; margin:1em; |