cordis/client/webapp/styles/scrollbars.scss

47 lines
1.3 KiB
SCSS
Raw Normal View History

2021-10-31 19:02:26 +00:00
@import "theme.scss";
/* channel feed custom scrollbar */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */
#channel-feed-content-wrapper::-webkit-scrollbar {
width: 16px;
}
#channel-feed-content-wrapper::-webkit-scrollbar-track {
visibility: visible; /* always visible, does not disappear when not hovered over */
box-shadow: 0 0 12px 12px $background-secondary inset;
border: 4px solid transparent;
border-radius: 12px;
}
#channel-feed-content-wrapper::-webkit-scrollbar-thumb {
visibility: visible; /* always visible, does not disappear when not hovered over */
box-shadow: 0 0 12px 12px $background-tertiary inset;
border: 4px solid transparent;
border-radius: 12px;
}
#channel-feed-content-wrapper::-webkit-scrollbar-button {
display: none;
}
/* General custom scrollbar (much thinner than channel feed) */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */
:not(:hover)::-webkit-scrollbar-thumb {
visibility: hidden;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
box-shadow: 0 0 2px 2px $background-tertiary inset;
border: 2px solid transparent;
border-radius: 4px;
}
::-webkit-scrollbar-button {
display: none;
}