Commit b995f4d6 authored by Jack Short's avatar Jack Short Committed by GitHub

fix: fixing ugly scrollbar (#7535)

parent 3f62bcf2
...@@ -57,7 +57,7 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>` ...@@ -57,7 +57,7 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>`
background-color: ${({ theme }) => theme.surface1}; background-color: ${({ theme }) => theme.surface1};
box-shadow: ${({ theme }) => theme.deprecated_deepShadow}; box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
border: 0.5px solid ${({ theme }) => theme.surface3}; border: 0.5px solid ${({ theme }) => theme.surface3};
border-radius: 12px; border-radius: 12px 0px 0px 12px;
padding: 8px; padding: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -66,6 +66,20 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>` ...@@ -66,6 +66,20 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>`
top: 48px; top: 48px;
z-index: 100; z-index: 100;
scrollbar-width: thin;
scrollbar-color: ${({ theme }) => `${theme.surface3} transparent`};
// safari and chrome scrollbar styling
::-webkit-scrollbar {
background: transparent;
width: 8px;
}
::-webkit-scrollbar-thumb {
background: ${({ theme }) => theme.surface3};
border-radius: 8px;
}
${({ isInfoExplorePageEnabled }) => ${({ isInfoExplorePageEnabled }) =>
isInfoExplorePageEnabled isInfoExplorePageEnabled
? css` ? css`
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment