Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-14 10:35:11 +00:00
Code Issues Releases Activity

move scrollbar styling to @pybricks/ide-docs

Browse Source 
This makes the scrollbar flashing less noticeable, but there is still
a bit of a flash in dark mode due to the fact that we are still
injecting the class in the load event in that case.
This commit is contained in:
David Lechner
2021-01-28 12:45:17 -06:00
parent 952416f36b
commit 066a6c7d3d
3 changed files with 5 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/App.tsx
-47
View File
@@ -145,53 +145,6 @@ function App(): JSX.Element {
}
});
const style = document.createElement('style');
// TODO: how to get these programmatically from values set in variables.scss?
const iconColor = '#5c7080';
const iconColorHover = '#182026';
const appBackgroundColor = '#e8e8e8';
const darkIconColor = '#a7b6c2';
const darkIconColorHover = '#f5f8fa';
const darkAppBackgroundColor = '#293742';
// This is scrollbar style coped from index.scss.
style.innerText = `
::-webkit-scrollbar {
width: 16px;
}
.${Classes.DARK} ::-webkit-scrollbar-track {
background: ${darkAppBackgroundColor};
}
::-webkit-scrollbar-track {
background: ${appBackgroundColor};
}
.${Classes.DARK} ::-webkit-scrollbar-thumb {
border-color: ${darkAppBackgroundColor};
background: ${darkIconColor};
}
::-webkit-scrollbar-thumb {
border-width: 3px;
border-style: solid;
border-radius: 8px;
border-color: ${appBackgroundColor};
background: ${iconColor};
}
.${Classes.DARK} ::-webkit-scrollbar-thumb:hover {
background: ${darkIconColorHover};
}
::-webkit-scrollbar-thumb:hover {
background: ${iconColorHover};
}
`;
contentWindow.document.head.appendChild(style);
if (document.body.classList.contains(Classes.DARK)) {
contentWindow.document.documentElement.classList.add(
Classes.DARK,