_scrollbars.scss
ASCII text, with CRLF line terminators
1
::-webkit-scrollbar,
2
::-webkit-scrollbar-corner {
3
width: 17px;
4
height: 17px;
5
border: 0 solid divider($on-surface);
6
background-color: rgba($surface-z8, .9);
7
}
8
9
::-webkit-scrollbar:horizontal,
10
::-webkit-scrollbar-corner {
11
border-top-width: 1px;
12
}
13
14
::-webkit-scrollbar:vertical,
15
::-webkit-scrollbar-corner {
16
border-left-width: 1px;
17
}
18
19
::-webkit-scrollbar {
20
background-clip: padding-box;
21
}
22
23
::-webkit-scrollbar-thumb {
24
width: 32px;
25
height: 32px;
26
border: 4px solid transparent;
27
border-radius: 8px;
28
background-color: scrollbar-thumb($on-surface);
29
background-clip: padding-box;
30
31
&:horizontal {
32
border-top-width: 5px;
33
border-top-left-radius: 8px 9px;
34
border-top-right-radius: 8px 9px;
35
}
36
37
&:vertical {
38
border-left-width: 5px;
39
border-top-left-radius: 9px 8px;
40
border-bottom-left-radius: 9px 8px;
41
}
42
43
&:hover {
44
background-color: scrollbar-thumb($on-surface, "hover");
45
}
46
47
&:active {
48
background-color: scrollbar-thumb($on-surface, "pressed");
49
}
50
51
&:disabled {
52
background-color: scrollbar-thumb($on-surface, "disabled");
53
}
54
}
55
56
//
57
// Workaround: Chrome does not properly load selection style of GTK theme.
58
//
59
60
::selection {
61
background-color: rgba(primary($on-light), .24);
62
}
63