diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 910bed783e67f..9452f917298f6 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -19,11 +19,11 @@ ul.wp-block-gallery { outline: none; } - .is-selected { + figure.is-selected { outline: 4px solid theme(primary); } - .is-transient img { + figure.is-transient img { opacity: 0.3; } @@ -60,12 +60,30 @@ ul.wp-block-gallery { .components-button { color: $white; + padding: 2px; + width: $icon-button-size-small; + height: $icon-button-size-small; + + // Remove hover/focus box shadows, since they clash with the blue background. + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, + &:focus:not(:disabled) { + box-shadow: none; + } + + @include break-small() { + // Use smaller buttons to fit when there are many columns. + .columns-7 &, + .columns-8 & { + padding: 0; + width: inherit; + height: inherit; + } + } } .components-button:focus { color: inherit; } - } .block-editor-rich-text figcaption { @@ -80,13 +98,21 @@ ul.wp-block-gallery { .block-library-gallery-item__move-menu, .block-library-gallery-item__inline-menu { - padding: 2px; + padding: $grid-size-small; display: inline-flex; z-index: z-index(".block-library-gallery-item__inline-menu"); .components-button { color: transparent; } + + @include break-small() { + // Use smaller buttons to fit when there are many columns. + .columns-7 &, + .columns-8 & { + padding: $grid-size-small / 2; + } + } } .block-library-gallery-item__inline-menu {