hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update scroll bars styles

Browse Source
This commit is contained in:
Hazem Krimi
2021-01-15 18:59:05 +01:00
parent 37953d4ea6
commit 1bc4f44128
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/GlobalStyles.tsx
+17 -2
View File
@@ -17,6 +17,20 @@ const Global = createGlobalStyle<Props>`
user-select: text; user-select: text;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
@media(max-width: 768px) {
overflow-x: scroll;
}
&::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
}
&::selection { &::selection {
background: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; background: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
color: ${({ dark, theme }) => color: ${({ dark, theme }) =>
@@ -37,11 +51,12 @@ const Global = createGlobalStyle<Props>`
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: 0.5rem; width: 0.5rem !important;
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; background-color: ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
} }
`; `;