Fix opacity of ScrollContainer buttons on bold themes (#3764)

Author: zenoachtig

.changeset/two-rocks-cry.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix opacity of ScrollContainer buttons on bold themes

packages/gitbook/src/components/primitives/ScrollContainer.tsx

@@ -165,7 +165,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
                     orientation === 'horizontal'
                         ? '-translate-y-1/2! top-1/2 left-0 ml-2'
                         : '-translate-x-1/2! top-0 left-1/2 mt-2',
-                    'absolute not-pointer-none:block hidden scale-0 opacity-0 transition-[scale,opacity]',
+                    'absolute not-pointer-none:block hidden scale-0 opacity-0 backdrop-blur-xl transition-[scale,opacity]',
                     scrollPosition > 0
                         ? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
                         : 'pointer-events-none'
@@ -183,7 +183,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
                     orientation === 'horizontal'
                         ? '-translate-y-1/2! top-1/2 right-0 mr-2'
                         : '-translate-x-1/2! bottom-0 left-1/2 mb-2',
-                    'absolute not-pointer-none:block hidden scale-0 transition-[scale,opacity]',
+                    'absolute not-pointer-none:block hidden scale-0 backdrop-blur-xl transition-[scale,opacity]',
                     scrollPosition < scrollSize
                         ? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
                         : 'pointer-events-none'