Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_scrollbar.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | /************** | 3 | /************** | ||
4 | * Scrollbars * | 4 | * Scrollbars * | ||
5 | **************/ | 5 | **************/ | ||
6 | 6 | | |||
7 | scrollbar { | 7 | scrollbar { | ||
8 | 8 | | |||
9 | -GtkScrollbar-has-backward-stepper: false; | 9 | -GtkScrollbar-has-backward-stepper: false; | ||
10 | -GtkScrollbar-has-forward-stepper: false; | 10 | -GtkScrollbar-has-forward-stepper: false; | ||
11 | 11 | | |||
12 | background-color: w_color(normal); | 12 | background-color: gtk("@theme_bg_color"); | ||
13 | border-width: 0px 0px; | 13 | border-width: 0px 0px; | ||
14 | border-color: w_color(normal); | 14 | border-color: gtk("@theme_bg_color"); | ||
15 | margin: 5px; | 15 | margin: 5px; | ||
16 | 16 | | |||
17 | button { | 17 | button { | ||
18 | min-width: 14px; | 18 | min-width: 14px; | ||
19 | min-height: 14px; | 19 | min-height: 14px; | ||
20 | margin: 0px; | 20 | margin: 0px; | ||
21 | padding: 0px 0px; | 21 | padding: 0px 0px; | ||
22 | border: none; | 22 | border: none; | ||
23 | border-radius: 0px; | 23 | border-radius: 0px; | ||
24 | background-image: none; | 24 | background-image: none; | ||
25 | background-color: transparent; | 25 | background-color: transparent; | ||
26 | color: transparent; | 26 | color: transparent; | ||
27 | box-shadow: none; | 27 | box-shadow: none; | ||
28 | &:hover { | 28 | &:hover { | ||
29 | border: none; | 29 | border: none; | ||
30 | background-image: none; | 30 | background-image: none; | ||
31 | background-color: w_color(normal); | 31 | background-color: gtk("@theme_bg_color"); | ||
32 | color: transparent; | 32 | color: transparent; | ||
33 | } | 33 | } | ||
34 | &:active, | 34 | &:active, | ||
35 | &:active:hover { | 35 | &:active:hover { | ||
36 | border: none; | 36 | border: none; | ||
37 | background-image: none; | 37 | background-image: none; | ||
38 | background-color: w_color(normal); | 38 | background-color: gtk("@theme_bg_color"); | ||
39 | color: transparent; | 39 | color: transparent; | ||
40 | } | 40 | } | ||
41 | &:disabled { | 41 | &:disabled { | ||
42 | border: none; | 42 | border: none; | ||
43 | background-color: w_color(normal); | 43 | background-color: gtk("@theme_bg_color"); | ||
44 | background-image: none; | 44 | background-image: none; | ||
45 | color: transparent; | 45 | color: transparent; | ||
46 | } | 46 | } | ||
47 | &:backdrop { | 47 | &:backdrop { | ||
48 | @extend %undecorated_button; | 48 | @extend %undecorated_button; | ||
49 | color: backdrop(b_color(text)); | 49 | color: gtk("@theme_button_foreground_backdrop"); | ||
50 | &:disabled {color: backdrop(insensitive(b_color(text)));} | 50 | &:disabled { | ||
51 | color: gtk("@theme_button_foreground_backdrop_insensitive"); | ||||
52 | } | ||||
51 | @extend %undecorated_button; | 53 | @extend %undecorated_button; | ||
52 | } | 54 | } | ||
53 | } | 55 | } | ||
54 | 56 | | |||
55 | // Overlay Scrollbars | 57 | // Overlay Scrollbars | ||
56 | &.dragging, // if this isn't set, the scrollbars don't update their size correctly | 58 | &.dragging, // if this isn't set, the scrollbars don't update their size correctly | ||
57 | &.hovering { opacity: 0.9910; } // probably a gtk bug | 59 | &.hovering { opacity: 0.9910; } // probably a gtk bug | ||
58 | &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // | 60 | &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // | ||
Show All 16 Lines | 74 | trough { | |||
75 | min-width: 3px; | 77 | min-width: 3px; | ||
76 | min-height: 14px; | 78 | min-height: 14px; | ||
77 | border-radius: 8px; | 79 | border-radius: 8px; | ||
78 | background-color: transparent; | 80 | background-color: transparent; | ||
79 | } | 81 | } | ||
80 | 82 | | |||
81 | &:hover { | 83 | &:hover { | ||
82 | trough { | 84 | trough { | ||
83 | background-color: backdrop($trough_color); | 85 | background-color: $trough_color_backdrop; | ||
84 | min-width: 6px; | 86 | min-width: 6px; | ||
85 | } | 87 | } | ||
86 | slider { | 88 | slider { | ||
87 | min-width: 6px; | 89 | min-width: 6px; | ||
88 | background-color: b_color(hover); | 90 | background-color: gtk("@theme_button_decoration_hover"); | ||
89 | } | 91 | } | ||
90 | } | 92 | } | ||
91 | 93 | | |||
92 | &.horizontal trough { | 94 | &.horizontal trough { | ||
93 | //margin: 0px; | 95 | //margin: 0px; | ||
94 | transition-duration: 0.1s; | 96 | transition-duration: 0.1s; | ||
95 | min-width: 14px; | 97 | min-width: 14px; | ||
96 | min-height: 3px; | 98 | min-height: 3px; | ||
97 | border-radius: 8px; | 99 | border-radius: 8px; | ||
98 | background-color: transparent; | 100 | background-color: transparent; | ||
99 | } | 101 | } | ||
100 | 102 | | |||
101 | &.horizontal:hover { | 103 | &.horizontal:hover { | ||
102 | &.horizontal trough { | 104 | &.horizontal trough { | ||
103 | background-color: backdrop($trough_color); | 105 | background-color: $trough_color_backdrop; | ||
104 | min-height: 6px; | 106 | min-height: 6px; | ||
105 | } | 107 | } | ||
106 | &.horizontal slider { | 108 | &.horizontal slider { | ||
107 | min-height: 6px; | 109 | min-height: 6px; | ||
108 | background-color: b_color(hover); | 110 | background-color: gtk("@theme_button_decoration_hover"); | ||
109 | } | 111 | } | ||
110 | } | 112 | } | ||
111 | 113 | | |||
112 | slider { | 114 | slider { | ||
113 | //margin: 0px; | 115 | //margin: 0px; | ||
114 | transition-duration: 0.1s; | 116 | transition-duration: 0.1s; | ||
115 | min-width: 3px; | 117 | min-width: 3px; | ||
116 | min-height: 30px; | 118 | min-height: 30px; | ||
117 | border-radius: 8px; | 119 | border-radius: 8px; | ||
118 | background-clip: padding-box; | 120 | background-clip: padding-box; | ||
119 | background-color: transparentize($scrollbar_color, 0.2); | 121 | background-color: gtkalpha($scrollbar_color_backdrop, 0.2); | ||
120 | &:backdrop { | 122 | &:backdrop { | ||
121 | background-color: backdrop($scrollbar_color); | 123 | background-color: $scrollbar_color_backdrop; | ||
122 | } | 124 | } | ||
123 | &:hover { | 125 | &:hover { | ||
124 | min-width: 6px; | 126 | min-width: 6px; | ||
125 | background-color: b_color(hover); | 127 | background-color: gtk("@theme_button_decoration_hover"); | ||
126 | 128 | | |||
127 | } | 129 | } | ||
128 | } | 130 | } | ||
129 | &.horizontal slider { | 131 | &.horizontal slider { | ||
130 | transition-duration: 0.1s; | 132 | transition-duration: 0.1s; | ||
131 | min-width: 30px; | 133 | min-width: 30px; | ||
132 | min-height: 3px; | 134 | min-height: 3px; | ||
133 | border-radius: 8px; | 135 | border-radius: 8px; | ||
134 | background-clip: padding-box; | 136 | background-clip: padding-box; | ||
135 | background-color: transparentize($scrollbar_color, 0.2); | 137 | background-color: gtkalpha($scrollbar_color_backdrop, 0.2); | ||
136 | &:backdrop { | 138 | &:backdrop { | ||
137 | background-color: backdrop($scrollbar_color); | 139 | background-color: $scrollbar_color_backdrop; | ||
138 | } | 140 | } | ||
139 | &:hover { | 141 | &:hover { | ||
140 | min-height: 6px; | 142 | min-height: 6px; | ||
141 | background-color: b_color(hover); | 143 | background-color: gtk("@theme_button_decoration_hover"); | ||
142 | 144 | | |||
143 | } | 145 | } | ||
144 | 146 | | |||
145 | } | 147 | } | ||
146 | } | 148 | } |