Just annotations of little "how to's", so I know I can find how to do something I've already done when I need to do it again, in case I don't remember anymore, which is not unlikely. Hopefully they can be useful to others, but I can't guarantee that it will work, or that it won't even make things worse.
Chrome/ium userstyle that creates larger buttons for scrolling up and down.
Tags bug/feature, chrome/chromium
I mostly use the scrollbar as "buttons," clicking below or above the handler, rather than grabbing the handler itself. So when I've scrolled down quite a bit, I'll often mistakenly click above the handler when I really wanted to scroll down. That's kind of possibly solved if those barely useful up and down buttons were large enough to be more useful than pressing page up, down, or arrow keys instead. So this usercss does that:
Somewhat of a frankenstein monster of a couple of things I've found around stack-exchange-like sites or SE itself.
The scrollbar itself is made narrower, colors are changed a bit from the defaults. Up and down buttons have 123 pixels of height which is quite more area than whatever is the default.
Applied with the "stylus" extension, not to be confused with "stylish," even though both do the same thing. Stylish is supposedly bloated or whatever, whereas Stylus is open-source.
Now I noticed it also affects scroll bars within pages, so it's better to have it somewhat wider than just 8 meager pixels. On maximized windows it works okay for the main scrollbar on the right, the screen edge kind of makes it easier to hit it, but otherwise it requires quite a good aim. Changed to 12 now. I guess the default is a bit larger, though.
Having the button's height in percent also seems to be better. 18% seems roughly the same size I had them with 123 pixels.
Just noticed I've been "blogging" here for a little bit more than 10 years already. Time flies.
Code:
::-webkit-scrollbar {
width: 12px;
/*border: 5px solid white; */
}
::-webkit-scrollbar-thumb {
background-color: #626262;
background-clip: padding-box;
border: 0.05em solid #626262;
}
::-webkit-scrollbar-track {
background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #e3e3e3;
display: block;
border-style: solid;
height: 18%;
width: 12px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 4px 4px 4px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 4px 4px 0 4px;
border-color: #555555 transparent transparent transparent;
}
The scrollbar itself is made narrower, colors are changed a bit from the defaults. Up and down buttons have 123 pixels of height which is quite more area than whatever is the default.
Applied with the "stylus" extension, not to be confused with "stylish," even though both do the same thing. Stylish is supposedly bloated or whatever, whereas Stylus is open-source.
Now I noticed it also affects scroll bars within pages, so it's better to have it somewhat wider than just 8 meager pixels. On maximized windows it works okay for the main scrollbar on the right, the screen edge kind of makes it easier to hit it, but otherwise it requires quite a good aim. Changed to 12 now. I guess the default is a bit larger, though.
Having the button's height in percent also seems to be better. 18% seems roughly the same size I had them with 123 pixels.
Just noticed I've been "blogging" here for a little bit more than 10 years already. Time flies.
Total Comments 0
