gtk-4.0/widgets/_scrollbars.scss 3.7 K raw
1
/**************
2
 * Scrollbars *
3
 **************/
4
scrollbar {
5
  $_slider_min_length: 40px;
6
7
  background-color: $scrollbar_bg_color;
8
  transition: 300ms $ease-out-quad;
9
10
  // scrollbar border
11
  &.top { border-bottom: 1px solid $borders_color; }
12
  &.bottom { border-top: 1px solid $borders_color; }
13
  &.left { border-right: 1px solid $borders_color; }
14
  &.right { border-left: 1px solid $borders_color; }
15
16
  &:backdrop {
17
    background-color: $backdrop_scrollbar_bg_color;
18
    border-color: $backdrop_borders_color;
19
    transition: $backdrop_transition;
20
  }
21
22
  // slider
23
  slider {
24
    min-width: 6px;
25
    min-height: 6px;
26
    margin: -1px;
27
    border: 4px solid transparent;
28
    border-radius: 8px;
29
    background-clip: padding-box;
30
    background-color: $scrollbar_slider_color;
31
32
    &:hover { background-color: $scrollbar_slider_hover_color; }
33
34
    &:hover:active { background-color: $scrollbar_slider_active_color; }
35
36
    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
37
38
    &:disabled { background-color: transparent; }
39
  }
40
41
  &.fine-tune {
42
    slider {
43
      min-width: 4px;
44
      min-height: 4px;
45
    }
46
47
    &.horizontal slider { border-width: 5px 4px; }
48
    &.vertical slider { border-width: 4px 5px; }
49
  }
50
51
  &.overlay-indicator {
52
    &:not(.dragging):not(.hovering) {
53
      border-color: transparent;
54
      opacity: 0.4;
55
      background-color: transparent;
56
57
      slider {
58
        margin: 0;
59
        min-width: 3px;
60
        min-height: 3px;
61
        background-color: $fg_color;
62
        border: 1px solid if($variant == 'light', white, black);
63
      }
64
65
      button {
66
        min-width: 5px;
67
        min-height: 5px;
68
        background-color: $fg_color;
69
        background-clip: padding-box;
70
        border-radius: 100%;
71
        border: 1px solid if($variant == 'light', white, black);
72
        -gtk-icon-source: none;
73
      }
74
75
      &.horizontal {
76
        slider {
77
          margin: 0 2px;
78
          min-width: $_slider_min_length;
79
        }
80
81
        button {
82
          margin: 1px 2px;
83
          min-width: 5px;
84
        }
85
      }
86
87
      &.vertical {
88
        slider {
89
          margin: 2px 0;
90
          min-height: $_slider_min_length;
91
        }
92
93
        button {
94
          margin: 2px 1px;
95
          min-height: 5px;
96
        }
97
      }
98
    }
99
100
    &.dragging,
101
    &.hovering { opacity: 0.8; }
102
  }
103
104
  &.horizontal slider { min-width: $_slider_min_length; }
105
106
  &.vertical slider { min-height: $_slider_min_length; }
107
108
  // button styling
109
  button {
110
    padding: 0;
111
    min-width: 12px;
112
    min-height: 12px;
113
    border-style: none;
114
    border-radius: 0;
115
    transition-property: min-height, min-width, color;
116
117
    @include button(undecorated);
118
119
    color: $scrollbar_slider_color;
120
121
    &:hover {
122
      @include button(undecorated);
123
124
      color: $scrollbar_slider_hover_color;
125
    }
126
    &:active, &:checked {
127
      @include button(undecorated);
128
129
      color: $scrollbar_slider_active_color;
130
    }
131
    &:disabled {
132
      @include button(undecorated);
133
134
      color: transparentize($scrollbar_slider_color, 0.8);
135
    }
136
    &:backdrop {
137
      @include button(undecorated);
138
139
      color: $backdrop_scrollbar_slider_color;
140
141
      &:disabled {
142
        @include button(undecorated);
143
144
        color: transparentize($backdrop_scrollbar_slider_color, 0.8);
145
      }
146
    }
147
  }
148
149
  // button icons
150
  &.vertical {
151
    button {
152
      &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
153
154
      &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
155
    }
156
  }
157
158
  &.horizontal {
159
    button {
160
      &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
161
162
      &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
163
    }
164
  }
165
}
166
167
treeview ~ scrollbar.vertical {
168
  border-top: 1px solid $borders_color;
169
  margin-top: -1px;
170
}