doc: increase webkit scrollbar width and fix colors

[ChALkeR]

Checklist

• the commit message follows commit guidelines

Affected core subsystem(s)

doc

Description of change

Only -webkit-scrollbar-* properties are affected.

There are two changes here:

1. The background color of the left (navigation) scrollbar is fixed to match the background color of the navigation.
2. The width of the scrollbars has been increased to 16px, but their visible width is 10px until the users hovers them. This way, they don't bother people who don't want to see gigantic scrollbars, but they are actually big enough for people who want to use them.

Unfortunately, the second change forced me to remove border-radius on unhovered scrollbars, but it still looks nice to me this way.

This is alternate to #6445 and should fix#6443.

[ChALkeR]

Screenshots:

/cc @nodejs/documentation, @nodejs/website, @claudiorodriguez, @mathiask88, @silverwind.

[mathiask88]

I would prefer default ones but I'm also happy with this, because now I am able to hit them without clicking around them :)

[Fishrock123]

Needs media queries to avoid eating extra space on small devices imo.

[silverwind]

TBH, I don't really like the light-on-dark on the left side, it just looks not as clean as before.

Needs media queries to avoid eating extra space on small devices imo.

Doing media-queries for scrollbars seems just wrong to me. Can't we rely more on native browser behaviour to get these right? Imho, we should reduce scrollbar styling to the bare minimum so it looks visually pleasing. Ideally, that means only changing background properties.

Don't forget to test on Windows too, Chrome has static scrollbars there (no floating ones like on OS X).

[eljefedelrodeodeljefe]

+1 on moving back to native browser scrollbar. This thing has been broken several times now.

[claudiorodriguez]

Ok, so I made #6479 which, following suggestions from some, just removes all scrollbar styling altogether.

[ChALkeR]

Closing this in favor of #6479. Feel free to reopen if #6479 gets rejected or stalled.