Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_base.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | @function gtkalpha($c,$a) { | | |||
4 | @return unquote("alpha(#{$c},#{$a})"); | | |||
5 | } | | |||
6 | | ||||
7 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | 3 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | ||
8 | 4 | | |||
9 | * { | 5 | * { | ||
10 | padding: 0; | 6 | padding: 0; | ||
11 | -GtkToolButton-icon-spacing: 4; | 7 | -GtkToolButton-icon-spacing: 4; | ||
12 | -GtkTextView-error-underline-color: $error_color; | 8 | -GtkTextView-error-underline-color: gtk("@error_color"); | ||
13 | 9 | | |||
14 | // The size for scrollbars. The slider is 2px smaller, but we keep it | 10 | // The size for scrollbars. The slider is 2px smaller, but we keep it | ||
15 | // up so that the whole area is sensitive to button presses for the | 11 | // up so that the whole area is sensitive to button presses for the | ||
16 | // slider. The stepper button is larger in both directions, the slider | 12 | // slider. The stepper button is larger in both directions, the slider | ||
17 | // only in the width | 13 | // only in the width | ||
18 | 14 | | |||
19 | -GtkScrolledWindow-scrollbar-spacing: 0; | 15 | -GtkScrolledWindow-scrollbar-spacing: 0; | ||
20 | 16 | | |||
Show All 14 Lines | |||||
35 | } | 31 | } | ||
36 | 32 | | |||
37 | 33 | | |||
38 | /*************** | 34 | /*************** | ||
39 | * Base States * | 35 | * Base States * | ||
40 | ***************/ | 36 | ***************/ | ||
41 | 37 | | |||
42 | .background { | 38 | .background { | ||
43 | color: w_color(text); | 39 | color: gtk("@theme_fg_color"); | ||
44 | background-color: w_color(normal); | 40 | background-color: gtk("@theme_bg_color"); | ||
45 | 41 | | |||
46 | &:backdrop { | 42 | &:backdrop { | ||
47 | text-shadow: none; | 43 | text-shadow: none; | ||
48 | -gtk-icon-shadow: none; | 44 | -gtk-icon-shadow: none; | ||
49 | color: backdrop(w_color(text)); | 45 | color: gtk("@theme_unfocused_fg_color"); | ||
50 | background-color: backdrop(w_color(normal)); | 46 | background-color: gtk("@theme_unfocused_bg_color"); | ||
51 | } | 47 | } | ||
52 | } | 48 | } | ||
53 | 49 | | |||
54 | /* | 50 | /* | ||
55 | These wildcard seems unavoidable, need to investigate. | 51 | These wildcard seems unavoidable, need to investigate. | ||
56 | Wildcards are bad and troublesome, use them with care, | 52 | Wildcards are bad and troublesome, use them with care, | ||
57 | or better, just don't. | 53 | or better, just don't. | ||
58 | Everytime a wildcard is used a kitten dies, painfully. | 54 | Everytime a wildcard is used a kitten dies, painfully. | ||
59 | */ | 55 | */ | ||
60 | 56 | | |||
61 | *:disabled { | 57 | *:disabled { | ||
62 | -gtk-icon-effect: dim; | 58 | -gtk-icon-effect: dim; | ||
63 | } | 59 | } | ||
64 | 60 | | |||
65 | .gtkstyle-fallback { | 61 | .gtkstyle-fallback { | ||
66 | background-color: w_color(normal); | 62 | background-color: gtk("@theme_bg_color"); | ||
67 | color: w_color(text); | 63 | color: gtk("@theme_fg_color"); | ||
68 | &:hover { | 64 | &:hover { | ||
69 | background-color: lighten(w_color(normal), 10%); | 65 | background-color: gtkshade("@theme_bg_color", 1.1); | ||
70 | color: w_color(text); | 66 | color: gtk("@theme_fg_color"); | ||
71 | } | 67 | } | ||
72 | &:active { | 68 | &:active { | ||
73 | background-color: darken(w_color(normal), 10%); | 69 | background-color: gtkshade("@theme_bg_color", 0.9); | ||
74 | color: w_color(text); | 70 | color: gtk("@theme_fg_color"); | ||
75 | } | 71 | } | ||
76 | &:disabled { | 72 | &:disabled { | ||
77 | background-color: insensitive(w_color(normal)); | 73 | background-color: gtk("@insensitive_fg_color"); | ||
78 | color: insensitive(w_color(text)); | 74 | color: gtk("@insensitive_fg_color"); | ||
79 | } | 75 | } | ||
80 | &:selected { | 76 | &:selected { | ||
81 | background-color: s_color(normal); | 77 | background-color: gtk("@theme_selected_bg_color"); | ||
82 | color: s_color(text); | 78 | color: gtk("@theme_selected_fg_color"); | ||
83 | } | 79 | } | ||
84 | } | 80 | } | ||
85 | 81 | | |||
86 | %view, | 82 | %view, | ||
87 | .view { | 83 | .view { | ||
88 | color: v_color(text); | 84 | color: gtk("@theme_text_color"); | ||
89 | background-color: v_color(normal); | 85 | background-color: gtk("@theme_base_color"); | ||
90 | 86 | | |||
91 | &:backdrop { | 87 | &:backdrop { | ||
92 | color: backdrop(v_color(text)); | 88 | color: gtk("@theme_unfocused_text_color"); | ||
93 | background-color: backdrop(v_color(normal)); | 89 | background-color: gtk("@theme_unfocused_base_color"); | ||
94 | } | 90 | } | ||
95 | 91 | | |||
96 | &:disabled { | 92 | &:disabled { | ||
97 | color: insensitive(v_color(text)); | 93 | color: gtk("@insensitive_base_fg_color"); | ||
98 | } | 94 | } | ||
99 | 95 | | |||
100 | &:selected { | 96 | &:selected { | ||
101 | &:focus, & { | 97 | &:focus, & { | ||
102 | border-radius: $r; | 98 | border-radius: $r; | ||
103 | @extend %selected_items; | 99 | @extend %selected_items; | ||
104 | } | 100 | } | ||
105 | } | 101 | } | ||
106 | } | 102 | } | ||
107 | 103 | | |||
108 | .view, | 104 | .view, | ||
109 | textview { | 105 | textview { | ||
110 | text { | 106 | text { | ||
111 | @extend %view; | 107 | @extend %view; | ||
112 | 108 | | |||
113 | selection { &:focus, & { @extend %selected_items; }} | 109 | selection { &:focus, & { @extend %selected_items; }} | ||
114 | } | 110 | } | ||
115 | } | 111 | } | ||
116 | 112 | | |||
117 | textview border { | 113 | textview border { | ||
118 | background-color: v_color(normal); | 114 | background-color: gtk("@theme_base_color"); | ||
119 | background-image: image($border_color); // HACK: the border node just draws background so, | 115 | background-image: image(gtk("@borders")); // HACK: the border node just draws background so, | ||
120 | background-repeat: no-repeat; // using a background-image to draw the border | 116 | background-repeat: no-repeat; // using a background-image to draw the border | ||
121 | 117 | | |||
122 | &:backdrop { background-color: backdrop(v_color(normal)); } | 118 | &:backdrop { | ||
119 | background-color: gtk("@theme_unfocused_base_color"); | ||||
120 | } | ||||
123 | 121 | | |||
124 | &.bottom { | 122 | &.bottom { | ||
125 | background-size: 100% 1px; | 123 | background-size: 100% 1px; | ||
126 | background-position: top; | 124 | background-position: top; | ||
127 | } | 125 | } | ||
128 | 126 | | |||
129 | &.top { | 127 | &.top { | ||
130 | background-size: 100% 1px; | 128 | background-size: 100% 1px; | ||
131 | background-position: bottom; | 129 | background-position: bottom; | ||
132 | } | 130 | } | ||
133 | 131 | | |||
134 | &.left { | 132 | &.left { | ||
135 | background-size: 1px 100%; | 133 | background-size: 1px 100%; | ||
136 | background-position: right; | 134 | background-position: right; | ||
137 | } | 135 | } | ||
138 | 136 | | |||
139 | &.right { | 137 | &.right { | ||
140 | background-size: 1px 100%; | 138 | background-size: 1px 100%; | ||
141 | background-position: left; | 139 | background-position: left; | ||
142 | } | 140 | } | ||
143 | } | 141 | } | ||
144 | 142 | | |||
145 | .rubberband, | 143 | .rubberband, | ||
146 | rubberband { | 144 | rubberband { | ||
147 | border: 1px solid s_color(normal); | 145 | border: 1px solid gtk("@theme_selected_bg_color"); | ||
148 | background-color: transparentize(s_color(normal),0.8); | 146 | background-color: gtkalpha("@theme_selected_bg_color", 0.8); | ||
149 | &:backdrop { | 147 | &:backdrop { | ||
150 | border-color: backdrop(s_color(normal)); | 148 | border-color: gtk("@theme_unfocused_selected_bg_color"); | ||
151 | background-color: backdrop(transparentize(s_color(normal),0.8)); | 149 | background-color: gtkalpha("@theme_unfocused_selected_bg_color", 0.8); | ||
152 | } | 150 | } | ||
153 | } | 151 | } | ||
154 | 152 | | |||
155 | flowbox { | 153 | flowbox { | ||
156 | rubberband { @extend rubberband; } | 154 | rubberband { @extend rubberband; } | ||
157 | 155 | | |||
158 | flowboxchild { | 156 | flowboxchild { | ||
159 | padding: 3px; | 157 | padding: 3px; | ||
160 | border-radius: $r; | 158 | border-radius: $r; | ||
161 | 159 | | |||
162 | &:selected { | 160 | &:selected { | ||
163 | @extend %selected_items; | 161 | @extend %selected_items; | ||
164 | 162 | | |||
165 | outline-offset: 0px; | 163 | outline-offset: 0px; | ||
166 | } | 164 | } | ||
167 | } | 165 | } | ||
168 | } | 166 | } | ||
169 | 167 | | |||
170 | label { | 168 | label { | ||
171 | &.separator { | 169 | &.separator { | ||
172 | color: w_color(text); | 170 | color: gtk("@theme_fg_color"); | ||
173 | @extend .dim-label; | 171 | @extend .dim-label; | ||
174 | &:backdrop { color: backdrop(w_color(text)); } | 172 | &:backdrop { | ||
173 | color: gtk("@theme_unfocused_fg_color"); | ||||
174 | } | ||||
175 | } | 175 | } | ||
176 | 176 | | |||
177 | selection { | 177 | selection { | ||
178 | background-color: s_color(normal); | 178 | background-color: gtk("@theme_selected_bg_color"); | ||
179 | color: s_color(text) | 179 | color: gtk("@theme_selected_fg_color"); | ||
180 | } | 180 | } | ||
181 | &:disabled { | 181 | &:disabled { | ||
182 | color: insensitive(w_color(text)); | 182 | color: gtk("@insensitive_fg_color"); | ||
183 | selection { @extend %selected_items:disabled; } | 183 | selection { @extend %selected_items:disabled; } | ||
184 | 184 | | |||
185 | &:backdrop { color: backdrop(insensitive(w_color(text))); } | 185 | &:backdrop { | ||
186 | color: gtk("@insensitive_unfocused_fg_color") | ||||
187 | } | ||||
186 | } | 188 | } | ||
187 | &:backdrop { | 189 | &:backdrop { | ||
188 | color:backdrop(w_color(text)); | 190 | color: gtk("@theme_unfocused_text_color"); | ||
189 | 191 | | |||
190 | selction {@extend %selected_items:backdrop;} | 192 | selction {@extend %selected_items:backdrop;} | ||
191 | } | 193 | } | ||
192 | } | 194 | } | ||
193 | 195 | | |||
194 | .dim-label { | 196 | .dim-label { | ||
195 | opacity: 0.5; | 197 | opacity: 0.5; | ||
196 | text-shadow: none; | 198 | text-shadow: none; | ||
197 | } | 199 | } | ||
198 | 200 | | |||
199 | assistant { | 201 | assistant { | ||
200 | .sidebar { | 202 | .sidebar { | ||
201 | background-color: v_color(text); | 203 | background-color: gtk("@theme_text_color"); | ||
202 | border-top: 1px solid $border_color; | 204 | border-top: 1px solid gtk("@borders"); | ||
203 | 205 | | |||
204 | &:backdrop { | 206 | &:backdrop { | ||
205 | background-color: backdrop(v_color(text)); | 207 | background-color: gtk("@theme_unfocused_text_color"); | ||
206 | border-color: backdrop($border_color); | 208 | border-color: gtk("@unfocused_borders"); | ||
207 | } | 209 | } | ||
208 | } | 210 | } | ||
209 | &.csd .sidebar { border-top-style: none; } | 211 | &.csd .sidebar { border-top-style: none; } | ||
210 | .sidebar label { | 212 | .sidebar label { | ||
211 | padding: 6px 12px; | 213 | padding: 6px 12px; | ||
212 | } | 214 | } | ||
213 | .sidebar label.highlight { | 215 | .sidebar label.highlight { | ||
214 | background-color: mix(v_color(normal), v_color(text), 80%); | 216 | background-color: gtkmix("@theme_base_color", "@theme_text_color", 0.8); | ||
215 | } | 217 | } | ||
216 | } | 218 | } | ||
217 | 219 | | |||
218 | %osd, | 220 | %osd, | ||
219 | .osd { | 221 | .osd { | ||
220 | color: w_color(text); | 222 | color: gtk("@theme_fg_color"); | ||
221 | border: 1px solid $border_color; | 223 | border: 1px solid gtk("@borders"); | ||
222 | background-color: transparentize(w_color(normal),0.2); | 224 | background-color: gtkalpha("@theme_bg_color",0.8); | ||
223 | background-clip: padding-box; | 225 | background-clip: padding-box; | ||
224 | box-shadow: none; | 226 | box-shadow: none; | ||
225 | text-shadow: none; | 227 | text-shadow: none; | ||
226 | -gtk-icon-shadow: none; | 228 | -gtk-icon-shadow: none; | ||
227 | &:backdrop { | 229 | &:backdrop { | ||
228 | color: backdrop(w_color(text)); | 230 | color: gtk("@theme_unfocused_text_color"); | ||
229 | background-color: backdrop(transparentize(w_color(normal),0.2)); | 231 | background-color: gtkalpha("@theme_unfocused_bg_color", 0.8); | ||
230 | -gtk-icon-shadow: none; | 232 | -gtk-icon-shadow: none; | ||
231 | } | 233 | } | ||
232 | } | 234 | } | ||
233 | 235 | | |||
234 | %selected_items { | 236 | %selected_items { | ||
235 | background-color: s_color(normal); | 237 | background-color: gtk("@theme_selected_bg_color"); | ||
236 | color: s_color(text); | 238 | color: gtk("@theme_selected_fg_color"); | ||
237 | &:hover { | 239 | &:hover { | ||
238 | background-color: s_color(hover); | 240 | background-color: gtk("@theme_hovering_selected_bg_color"); | ||
239 | color: w_color(text); | 241 | color: gtk("@theme_fg_color"); | ||
240 | } | 242 | } | ||
241 | &:backdrop { | 243 | &:backdrop { | ||
242 | background-color: backdrop(s_color(backdrop)); | 244 | background-color: gtk("@theme_unfocused_selected_bg_color"); | ||
243 | color: backdrop(v_color(normal)); | 245 | color: gtk("@theme_unfocused_base_color"); | ||
244 | } | 246 | } | ||
245 | } | 247 | } | ||
246 | 248 | | |||
247 | %selected_items { | 249 | %selected_items { | ||
248 | background-color: s_color(normal); | 250 | background-color: gtk("@theme_selected_bg_color"); | ||
249 | border-radius: 0px; | 251 | border-radius: 0px; | ||
250 | 252 | | |||
251 | @at-root %nobg_selected_items, & { | 253 | @at-root %nobg_selected_items, & { | ||
252 | color: s_color(text); | 254 | color: gtk("@theme_selected_fg_color"); | ||
253 | 255 | | |||
254 | &:disabled { color: insensitive(s_color(text)); } | 256 | &:disabled { | ||
257 | color: gtk("@insensitive_selected_fg_color"); | ||||
258 | } | ||||
255 | 259 | | |||
256 | &:backdrop { | 260 | &:backdrop { | ||
257 | color: backdrop(s_color(text)); | 261 | color: gtk("@theme_unfocused_selected_fg_color"); | ||
258 | 262 | | |||
259 | &:disabled { color: backdrop(insensitive(s_color(text))); } | 263 | &:disabled { | ||
264 | color: gtk("@insensitive_unfocused_selected_fg_color"); | ||||
265 | } | ||||
260 | } | 266 | } | ||
261 | } | 267 | } | ||
262 | } | 268 | } |