1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: "How NOT to mess with the scroll bar"
date: 2021-10-08
lang: en
categories: [ blog, rant ]
tags: [ ux, usability, scrollbar ]
translationKey: "sane-scrollbar"
---
Be prepared to use your scrollbar a lot, since it's topical 😉[^0].
## GTK custom styling
Recently, I've tried [BadWolf][badwolf], a browser written by someone I found
on the Fedi. It's quite amazing if you are interested minimalism---the memory
footprint is very small, even smaller than qutebrowser, a quite well-known
minimal web browser. I've packaged it on [openSUSE][os-wolf] thanks to
<abbr title="Open Build Service">OBS</abbr>. That being said, its feature is
quite limited---bookmarks and history, for examples, are not quite
well-supported.
[badwolf]: https://hacktivis.me/projects/badwolf
[os-wolf]: https://software.opensuse.org/package/badwolf
But I digressed. I brought up BadWolf not because it is great (should I rather
say, small), but because by using it, I now know how to configure GTK window
styling with <abbr title="Cascade StyleSheet">CSS</abbr>. On a Unix-like
system, this <abbr>CSS</abbr> file would be located at
`$HOME/.config/gtk-3.0/gtk.css`. I configure my scrollbar like this:
```css
scrollbar, scrollbar slider {
min-width: 10px;
min-height: 20px;
}
scrollbar {
background: #111;
}
scrollbar slider {
background: lightblue;
}
scrollbar slider:hover {
background: lightgreen;
}
```
The default GTK scrollbar is way too small, so I enlarge it to at least 10
pixels to make it more clickable. The default scrollbar is like grey on...
darker grey? That's not very contrast, so I make it light blue on dark grey
background to be more visible. Additionally, it turns green to let me know my
mouse is at the right place when I need to scroll.
Additionally, I also set `GTK_OVERLAY_SCROLLING=0` so that it doesn't disappear
when I don't hover on it. (Yes, I have a very peculiar expectation.)
## The troublemakers
And then here comes the developers who decided to mess with the scrollbar: it
now looks ugly at best and unusable at worst. GTK unfortunately doesn't have
`!important` in its CSS to disallow these overriding.
### Firefox
So when I go back to Firefox, I'm slightly disapointed to see that it does not
follow my <abbr>CSS</abbr>: the scrollbar is smaller than 10 pixels:
Well, at least it's still clickable somewhat, I guess. I've seen smaller bars.
### LibreOffice
On the opposite side, LibreOffice's scrollbar is just way too large:
I haven't looked at the source for LibreOffice, but it seems they even increase
the scrollbar size to be way too large. This doesn't make it less usable by
any mean, but it's an eyesore for me.
### Mastodon
Who knows that it's not only the apps, but also the websites who are not
supposed to modify *our* software, can style the scrollbar to our dismay? As
much as I like Fediverse, this scrollbar is the thing I like the least:
Just by looking at this, do you know which part is the slider (the thing you
hold on to scroll)? That's why we have margin and border. Please don't change
this!
But well, what's worse is that...
I just hover the slider and it's **GONE**.
Note that this is done on BadWolf. On Firefox, thanks to them messing with the
scrollbar, the problem just stops at the contrast.
## Stylus to the rescue
Earlier, I have given a [shoutout][post-stylus] to [Stylus][stylus]. I'd like
to give a shoutout again: Thanks Stylus for protecting me from these websites
who like to mess with my scrollbar! I have a custom style named "No one dares
override my GTK config" which is like this:
```css
html {
scrollbar-color: inherit !important;
scrollbar-width: inherit !important;
}
```
Of course, this can't change Firefox's or LibreOffice's modification, but now
I'm at peace knowing that websites can no longer tamper with my scrollbar. 🙂
[post-stylus]: /posts/2021-05-30-css-stylus/
[stylus]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
[^0]: I know you can use the mouse scroller, but if you're like me and have a
mouse that sucks, using the scroller is quite painful by itself.
On related note, I've finalized a [JavaScript script][gen-index] that helps
generating index from heading, thanks to a [discussion on Fosstodon][dis].
You may find scrolling with headings easier using this script.
[gen-index]: https://github.com/Huy-Ngo/generate-index
[dis]: https://fosstodon.org/@huy_ngo/106930129214709390
|
