From ba05b7b0070f04ffbcb60a787d58691fe325a813 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Wed, 13 Jan 2021 09:18:45 +0100 Subject: [PATCH] fix waterfall scroll color for dark theme (#87833) --- .../synthetics/waterfall/components/styles.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts index 61a8104eddd3..9032e9a4ccd2 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts @@ -5,6 +5,7 @@ */ import { EuiPanel, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { rgba } from 'polished'; import { euiStyled } from '../../../../../../../observability/public'; import { FIXED_AXIS_HEIGHT } from './constants'; @@ -16,6 +17,19 @@ export const WaterfallChartOuterContainer = euiStyled.div (props.height ? `${props.height}` : 'auto')}; overflow-y: ${(props) => (props.height ? 'scroll' : 'visible')}; overflow-x: hidden; + &::-webkit-scrollbar { + height: ${({ theme }) => theme.eui.euiScrollBar}; + width: ${({ theme }) => theme.eui.euiScrollBar}; + } + &::-webkit-scrollbar-thumb { + background-clip: content-box; + background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)}; + border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent; + } + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: transparent; + } `; export const WaterfallChartFixedTopContainer = euiStyled.div`