[Enhancement] Prettier scrollbar

[IgnacioHeredia]

Which part of Cosma is your request about?

• [ ] command-line interface
• [X] cosmoscope (HTML file)
• [ ] documentation
• [ ] other

Describe your request:

Hi Cosma team,

I just wanted to ask if it would be possible to make the scrollbar prettier. I found this one that looks pretty good: minimal when not selected, expanded when hovered at.

If that's not on the roadmap, any tips on how to modify it with the custom CSS? Because I haven't had luck so far. I'm my case, it looks especially bad because I customized Cosma towards a Dark theme. So the white scrollbar really pops out.

Thanks!

[infologie]

@IgnacioHeredia Scrollbars are like buttons, they can look very different depending on which browser and operating system you use. This is something I'd rather not define on our end, I'd rather give users a convenient way to customize these things themselves. Hence the custom CSS feature. For JavaScript-based customization, what we would need to do is add a custom HTML template feature. We've talked about it before but never added it to the roadmap. I'll discuss this with @Myllaume.

In the meantime:

• I've never customized scrollbars in web projects so I can't help you directly with this. Perhaps @Myllaume can offer advice? Currently, the only type of customization we facilitate is CSS-based. If customizing scrollbars requires JavaScript, then what you could do is download the source code for Cosma (this repository) and try to modify the cosmoscope template to include custom JavaScript. And if it works, then install Cosma not from NPM but from the modified repository. From within the repo:

npm install .

instead of

npm install @graphlab-fr/cosma

• I'd rather close this issue and have a new one opened for a custom HTML template feature. Feel free to create it if you want!

[IgnacioHeredia]

Hi @infologie ,

I think customizing HTML would be an overkill. Not many people would use it, so I don't think it's worth adding it unless there's a real demand for it.

So I revisited again how to customize it via CSS and I think I found the issue.

I was using this to test the scrollbar customization. I was using only the ::-webkit-scrollbar-thumb element and I wasn't seeing changes. But when I added also the ::-webkit-scrollbar it magically started working!

So I guess the issue is resolved. Thanks @infologie!

[IgnacioHeredia]

For reference, in case someone looks for this in the future, I ended up using this to customize the scrollbar:

/** Customize scrollbar
- nice grey color that fits dark theme
- bigger size when hovering

ref: https://stackoverflow.com/a/70089996
------------------------------------------------------------*/

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: #ababab;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover{
  border: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}