kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-12 09:11:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve scrollbar on windows

Browse Source
This commit is contained in:
unix
2020-03-22 07:20:49 +08:00
parent a45c6fff12
commit 7d975783ce
2 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
lib/components/sidebar/index.tsx
View File

@@ -51,6 +51,16 @@ export const Sidebar: React.FC<SideGroupProps> = React.memo(({ sides }) => {
overflow-x: hidden;
height: calc(100vh - 140px);
}
.box::-webkit-scrollbar {
width: 5px;
background-color: ${theme.palette.accents_1};
}
.box::-webkit-scrollbar-thumb {
background-color: ${theme.palette.accents_2};
border-radius: ${theme.layout.radius};
}
.box>:global(.item) {
margin-bottom: 10px;

88
pages/_app.tsx
View File

@@ -36,45 +36,55 @@ const Application: NextPage<AppProps> = ({ Component, pageProps }) => {
<Component {...pageProps} />
</ConfigContext>
<style global jsx>{`
.tag {
color: ${theme.palette.accents_5};
}
.punctuation {
color: ${theme.palette.accents_5};
}
.attr-name {
color: ${theme.palette.accents_6};
}
.attr-value {
color: ${theme.palette.accents_4};
}
.language-javascript {
color: ${theme.palette.accents_4};
}
span.class-name {
color: ${theme.palette.warning};
}
span.maybe-class-name {
color: ${theme.palette.purple};
}
span.token.string {
color: ${theme.palette.accents_5};
}
span.keyword {
color: ${theme.palette.success}
}
span.plain-text {
color: ${theme.palette.accents_3};
}
.tag {
color: ${theme.palette.accents_5};
}
.punctuation {
color: ${theme.palette.accents_5};
}
.attr-name {
color: ${theme.palette.accents_6};
}
.attr-value {
color: ${theme.palette.accents_4};
}
.language-javascript {
color: ${theme.palette.accents_4};
}
span.class-name {
color: ${theme.palette.warning};
}
span.maybe-class-name {
color: ${theme.palette.purple};
}
span.token.string {
color: ${theme.palette.accents_5};
}
span.keyword {
color: ${theme.palette.success}
}
span.plain-text {
color: ${theme.palette.accents_3};
}
body::-webkit-scrollbar {
width: 5px;
background-color: ${theme.palette.accents_1};
}
body::-webkit-scrollbar-thumb {
background-color: ${theme.palette.accents_2};
border-radius: ${theme.layout.radius};
}
`}</style>
</ZEITUIProvider>
</>