mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-08 04:35:58 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

scrollbar styling

Browse Source
This commit is contained in:
Jan Prochazka 2020-11-12 11:35:39 +01:00
parent 7658a2838a
commit aa0501a729
5 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/Screen.js
View File

@ -67,20 +67,6 @@ const TabsPanelContainer = styled.div`
::-webkit-scrollbar {
height: 7px;
}
::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 1px;
background-color: #ddd;
}
::-webkit-scrollbar-thumb {
border-radius: 1px;
// -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
background-color: #aaa;
&:hover {
background-color: #99c;
}
}
}
`;

1
packages/web/src/theme/dark.js
View File

@ -17,6 +17,7 @@ const theme = {
tabs_background: '#444',
gridheader_background: '#222',
gridbody_background: '#000',
scrollbar_background: '#444',
statusBarBackground: '#00c',
};

1
packages/web/src/theme/fillTheme.js
View File

@ -16,6 +16,7 @@ function fillOne(theme, name, type, add, background, fontName, invFontName, chan
add[`${name}_background1`] = background;
add[`${name}_background2`] = changeLightFunc(add[`${name}_background1`]);
add[`${name}_background3`] = changeLightFunc(add[`${name}_background2`]);
add[`${name}_background4`] = changeLightFunc(add[`${name}_background3`]);
}
for (const colorName in presetPrimaryColors) {

1
packages/web/src/theme/light.js
View File

@ -18,6 +18,7 @@ const theme = {
gridheader_background: '#f6f7f9',
gridheader_type: 'light',
gridbody_background: '#fff',
scrollbar_background: '#ddd',
statusBarBackground: '#00c',
};

22
packages/web/src/themes/ThemeHelmet.js
View File

@ -20,6 +20,28 @@ export default function ThemeHelmet() {
body {
color: ${theme.main_font1};
}
body *::-webkit-scrollbar {
height: 0.8em;
width: 0.8em;
}
body *::-webkit-scrollbar-track {
border-radius: 1px;
background-color: ${theme.scrollbar_background};
}
body *::-webkit-scrollbar-corner {
border-radius: 1px;
background-color: ${theme.scrollbar_background2};
}
body *::-webkit-scrollbar-thumb {
border-radius: 1px;
background-color: ${theme.scrollbar_background3};
}
body *::-webkit-scrollbar-thumb:hover {
background-color: ${theme.scrollbar_background4};
}
`}</style>
</Helmet>
);