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