Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-4.4/_drawing.scss @ 98:9da64f7bb19c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add support for GTK4 Includes `gtk-minimal.css`, which can be used to override Adwaita colours by running `ln -s ~/.themes/Adwaita-Dark-Green/gtk-4.4/gtk-minimal.css ~/.config/gtk-4.0/gtk.css`
author IBBoard <dev@ibboard.co.uk>
date Sat, 26 Mar 2022 20:03:44 +0000
parents
children
comparison
equal deleted inserted replaced
97:d721ae7a505b 98:9da64f7bb19c
1 // Drawing mixins
2
3 // generic drawing of more complex things
4
5 //
6 // Helper mixin for drawing visible focus rings
7 //
8 // If $target is specified, the focus ring is applied to the specified child element.
9 // If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
10 // If $within is true, use focus-within instead of focus:focus-visible
11 //
12 @mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) {
13 transition-property: outline, outline-width, outline-offset, outline-color;
14 transition-duration: 300ms;
15 animation-timing-function: ease-in-out;
16 & #{$target} {
17 outline: 0 solid transparent;
18 outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
19 }
20
21 &:#{$focus-state} #{$target} {
22 outline-color: $fc;
23 outline-width: $width;
24 outline-offset: $offset;
25 }
26 }
27
28 @mixin _shadows($list...) {
29 //
30 // Helper mixin to stack up to box-shadows;
31 //
32 $shadows: null;
33
34 @each $shadow in $list {
35 @if $shadow!=none { $shadows: $shadows, $shadow; }
36 }
37
38 box-shadow: $shadows;
39 }
40
41 // entries
42
43 @mixin entry($t, $fc:$focus_border_color) {
44 //
45 // Entries drawing function
46 //
47 // $t: entry type
48 // $fc: focus color
49 //
50 // possible $t values:
51 // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop, block_cursor;
52 //
53
54 @if $t==normal {
55 color: $text_color;
56 border-color: $borders_color;
57 background-color: $base_color;
58 // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
59 }
60 @if $t==insensitive {
61 color: $insensitive_fg_color;
62 border-color: $borders_color;
63 background-color: $insensitive_bg_color;
64 }
65 @if $t==backdrop {
66 color: $backdrop_text_color;
67 border-color: $backdrop_borders_color;
68 background-color: $backdrop_base_color;
69 }
70 @if $t==backdrop-insensitive {
71 color: $backdrop_insensitive_color;
72 border-color: $backdrop_borders_color;
73 background-color: $insensitive_bg_color;
74 }
75 @if $t==osd {
76 color: $osd_text_color;
77 border-color: $osd_borders_color;
78 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
79 background-clip: padding-box;
80 box-shadow: none;
81 -gtk-icon-shadow: 0 1px black;
82 }
83 @if $t==osd-focus {
84 color: $osd_text_color;
85 border-color: $selected_bg_color;
86 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
87 background-clip: padding-box;
88 }
89 @if $t==osd-insensitive {
90 color: $osd_insensitive_fg_color;
91 border-color: $osd_borders_color;
92 background-color: $osd_insensitive_bg_color;
93 background-clip: padding-box;
94 }
95 @if $t==osd-backdrop {
96 color: $osd_text_color;
97 border-color: $osd_borders_color;
98 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
99 background-clip: padding-box;
100 }
101 @if $t==block_cursor {
102 color: $base_color;
103 background-color: $text_color;
104 }
105 }
106
107 // buttons
108
109 @function _border_color($c, $darker: false) {
110 @if $darker == true { @return darken($c, 20%); }
111 @else { @return darken($c, 15%); }
112 }
113
114 $_default_button_c: lighten($bg_color,2%);
115 @mixin button($t, $c:$_default_button_c, $tc:$fg_color) {
116 //
117 // Button drawing function
118 //
119 // $t: button type,
120 // $c: base button color for colored* types
121 // $tc: optional text color for colored* types
122 //
123 // possible $t values:
124 // normal, hover, active, checked-hover, checked-active, insensitive, insensitive-active,
125 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
126 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
127 //
128 $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
129
130 @if $t==normal {
131 //
132 // normal button
133 //
134 color: $tc;
135 outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
136 border-color: if($c!=$_default_button_c, _border_color($c, true), $borders_color); //tint if not default button color
137 background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c),
138 linear-gradient(to top, darken($c,1%) 2px, $c));
139 @include _shadows($_button_shadow);
140 }
141
142 @else if $t==hover {
143 //
144 // hovered button
145 //
146 color: $tc;
147 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
148 @if $variant == 'light' {
149 background-image: linear-gradient(to top, darken($c,16%), darken($c,8%) 1px);
150 @include _shadows($_button_shadow);
151 }
152 @else {
153 background-image: linear-gradient(to top, darken($c,4%) 20%, darken($c, 3%) 90%);
154 @include _shadows($_button_shadow);
155 }
156 }
157
158 @else if $t==active {
159 //
160 // pushed button
161 //
162 color: $tc;
163 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
164 background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
165 box-shadow: none;
166 }
167
168 @else if $t==checked-hover {
169 //
170 // pushed togglebutton hover
171 //
172 color: $tc;
173 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
174 background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%)));
175 box-shadow: none;
176 }
177
178 @else if $t==checked-active {
179 //
180 // pushed togglebutton pushed further :)
181 //
182 color: $tc;
183 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
184 background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%)));
185 box-shadow: none;
186 }
187
188 @else if $t==insensitive {
189 //
190 // insensitive button
191 //
192 $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color);
193
194 color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
195 border-color: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
196 background-image: image($_bg);
197 }
198
199 @else if $t==insensitive-active {
200 //
201 // insensitive pushed button
202 //
203 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
204 $_bc: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
205
206 color: if($c != $_default_button_c, mix($tc, $_bg, 60%), $insensitive_fg_color);
207 border-color: $_bc;
208 background-image: image($_bg);
209 box-shadow: none;
210 }
211
212 @else if $t==backdrop {
213 //
214 // backdrop button
215 //
216 $_bg: if($c != $_default_button_c, $c, $backdrop_bg_color);
217 $_bc: if($variant == 'light', $c, _border_color($c));
218
219 color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
220 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
221 background-image: image($_bg);
222 box-shadow: none;
223 }
224
225 @else if $t==backdrop-active {
226 //
227 // backdrop pushed button
228 //
229 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
230 $_bc: if($variant == 'light', $_bg ,_border_color($c));
231
232 color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
233 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
234 background-image: image($_bg);
235 box-shadow: none;
236 }
237
238 @else if $t==backdrop-insensitive {
239 //
240 // backdrop insensitive button
241 //
242
243 $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color);
244 $_bc: if($variant == 'light', $_bg,_border_color($c));
245
246 color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
247 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
248 background-image: image($_bg);
249 box-shadow: none;
250 }
251
252 @else if $t==backdrop-insensitive-active {
253 //
254 // backdrop insensitive pushed button
255 //
256
257 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
258 $_bc: if($variant == 'light', $_bg, _border_color($c));
259
260 color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
261 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
262 background-image: image($_bg);
263 box-shadow: none;
264 }
265
266 @else if $t==osd {
267 //
268 // normal osd button
269 //
270 $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
271
272 color: $osd_fg_color;
273 outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
274 border-color: $osd_borders_color;
275 background-color: transparent;
276 background-image: image($_bg);
277 background-clip: padding-box;
278 }
279
280 @else if $t==osd-hover {
281 //
282 // active osd button
283 //
284 $_bg: if($c != $_default_button_c, transparentize($c, 0.3), darken($osd_bg_color, 10%));
285
286 color: white;
287 border-color: $osd_borders_color;
288 background-color: transparent;
289 background-image: image($_bg);
290 background-clip: padding-box;
291 }
292
293 @else if $t==osd-active {
294 //
295 // active osd button
296 //
297 $_bg: if($c != $_default_button_c, $c, darken($osd_bg_color, 20%));
298
299 color: white;
300 border-color: $osd_borders_color;
301 background-color: transparent;
302 background-image: image($_bg);
303 background-clip: padding-box;
304 box-shadow: none;
305 }
306
307 @else if $t==osd-insensitive {
308 //
309 // insensitive osd button
310 //
311 color: $osd_insensitive_fg_color;
312 border-color: $osd_borders_color;
313 background-color: transparent;
314 background-image: image($osd_insensitive_bg_color);
315 background-clip: padding-box;
316 }
317
318 @else if $t==osd-backdrop {
319 //
320 // backdrop osd button
321 //
322 $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
323
324 color: $osd_fg_color;
325 border-color: $osd_borders_color;
326 background-color: transparent;
327 background-image: image($_bg);
328 background-clip: padding-box;
329 }
330
331 @else if $t==undecorated {
332 //
333 // reset
334 //
335 border-color: transparent;
336 background-color: transparent;
337 background-image: none;
338 box-shadow: none;
339 }
340 @else if $t==undecorated-hover {
341 border-color: transparent;
342 background-image: none;
343 box-shadow: none;
344 @if $variant == 'light' {
345 background-color: darken($c,14%);
346 } @else {
347 background-color: darken($c,1%);
348 }
349 }
350 @else if $t==undecorated-active {
351 border-color: transparent;
352 background-image: none;
353 box-shadow: none;
354 @if $variant == 'light' {
355 background-color: darken($c,20%);
356 }
357 @else {
358 background-color: darken($c,5%);
359 }
360 }
361 }
362
363 @mixin headerbar_fill($c:$headerbar_bg_color, $ov: none) {
364 //
365 // headerbar fill
366 //
367 // $c: base color
368 // $ov: a background layer for background shorthand (hence no commas!)
369 //
370 $gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%));
371
372 @if $variant == 'dark' { $gradient: linear-gradient(to top, lighten($c, 4%), lighten($c, 6%)); }
373
374 @if $ov != none { background: $c $ov, $gradient; }
375 @else { background: $c $gradient; }
376
377 }
378
379 @mixin overshoot($p, $t:normal, $c:$fg_color) {
380 //
381 // overshoot
382 //
383 // $p: position
384 // $t: type
385 // $c: base color
386 //
387 // possible $p values:
388 // top, bottom, right, left
389 //
390 // possible $t values:
391 // normal, backdrop
392 //
393
394 $_small_gradient_length: 3%;
395 $_big_gradient_length: 50%;
396
397 $_small_gradient_size: 100% $_small_gradient_length;
398 $_big_gradient_size: 100% $_big_gradient_length;
399
400 @if $p==right or $p==left {
401 $_small_gradient_size: $_small_gradient_length 100%;
402 $_big_gradient_size: $_big_gradient_length 100%;
403 }
404
405 $_small_gradient_color: $c;
406 $_big_gradient_color: transparentize($c, 0.93);
407
408 @if $c==$fg_color {
409 $_small_gradient_color: darken($borders_color, 10%);
410 $_big_gradient_color: transparentize($fg_color, 0.93);
411
412 @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
413 }
414
415 $_small_gradient: radial-gradient(farthest-side at $p,
416 $_small_gradient_color 85%,
417 transparentize($_small_gradient_color, 1));
418
419 $_big_gradient: radial-gradient(farthest-side at $p,
420 $_big_gradient_color,
421 transparentize($_big_gradient_color, 1));
422
423 @if $t==normal {
424 background-image: $_small_gradient, $_big_gradient;
425 background-size: $_small_gradient_size, $_big_gradient_size;
426 }
427
428 @else if $t==backdrop {
429 background-image: $_small_gradient;
430 background-size: $_small_gradient_size;
431 }
432
433 background-repeat: no-repeat;
434 background-position: $p;
435
436 background-color: transparent; // reset some properties to be sure to not inherit them somehow
437 border: none; //
438 box-shadow: none; //
439 }
440
441 /***************************
442 * Check and Radio buttons *
443 ***************************/
444
445 @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) {
446 // Check/Radio drawing function
447 //
448 // $t: check/radio type,
449 // $c: base button color for colored* types
450 // $tc: optional text color for colored* types
451 // $checked: bool to chose between checked/unchecked
452 //
453 // possible $t values:
454 // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu
455
456 $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color);
457 $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
458
459 @if $t==normal {
460 background-clip: if($checked, border-box, padding-box);
461 background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
462 border-color: $_border_color;
463 box-shadow: 0 1px transparentize(black, 0.95);
464 color: $tc;
465 }
466
467 @if $t==hover {
468 background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
469 }
470
471 @if $t==active {
472 box-shadow: inset 0 1px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
473 background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%)));
474 }
475
476 @if $t==insensitive {
477 box-shadow: none;
478 color: transparentize($tc, 0.3);
479 }
480
481 @if $t==backdrop {
482 background-image: image($c);
483 box-shadow: none;
484 color: $tc;
485 }
486
487 @if $t==backdrop-insensitive {
488 box-shadow: none;
489 color: transparentize($tc, 0.3);
490 }
491
492 @if $t==menu {
493 transform: scale(0.8);
494 border-width: 1.2px;
495 border-color: transparent;
496 box-shadow: none;
497 background-image: image(transparent);
498 color: $tc;
499 }
500
501 @if $t==menu-active {
502 transform: scale(0.8);
503 border-width: 1.2px;
504 color: $tc;
505 box-shadow: none;
506 background-image: image(transparent);
507 }
508 }