From c9cb0b84ae432fbf44b8a17bb75874be81a71622 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 17 Nov 2023 21:55:54 +0900 Subject: [PATCH 1/3] Gallery Block: Use styled scrollbars for image captions --- packages/block-library/src/gallery/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 3f5a462e3206c..61754311245e3 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -57,6 +57,7 @@ figure.wp-block-gallery.has-nested-images { text-align: center; width: 100%; box-sizing: border-box; + @include custom-scrollbars-on-hover(transparent, $gray-600); img { display: inline; From 548c0d6d7045b0b607b430ca1958ab941da0e3cf Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 22 Nov 2023 23:56:58 +0900 Subject: [PATCH 2/3] Add 1px border --- packages/block-library/src/gallery/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 61754311245e3..d98e911a3bb16 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -59,6 +59,10 @@ figure.wp-block-gallery.has-nested-images { box-sizing: border-box; @include custom-scrollbars-on-hover(transparent, $gray-600); + &:hover::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 1px $gray-300; + } + img { display: inline; } From 49eb2f29169f3663ffb2b1d79c07a15de2fc4181 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 26 Nov 2023 19:06:23 +0900 Subject: [PATCH 3/3] Apply transparent white color to scrollbar --- packages/block-library/src/gallery/style.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index d98e911a3bb16..afbc308804985 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -57,11 +57,7 @@ figure.wp-block-gallery.has-nested-images { text-align: center; width: 100%; box-sizing: border-box; - @include custom-scrollbars-on-hover(transparent, $gray-600); - - &:hover::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 1px $gray-300; - } + @include custom-scrollbars-on-hover(transparent, rgba($white, 0.8)); img { display: inline;