Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-3.18/_drawing.scss @ 22:cb3e1a45b770

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
author IBBoard <dev@ibboard.co.uk>
date Sun, 02 Oct 2016 20:29:24 +0100
parents
children
comparison
equal deleted inserted replaced
21:66fe978c102e 22:cb3e1a45b770
1 // Drawing mixins
2
3 // generic drawing of more complex things
4
5 @function _widget_edge($c:$borders_edge) {
6 // outer highlight "used" on most widgets
7 @return 0 1px $c;
8 }
9
10 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
11 //
12 // Helper function to stack up to 4 box-shadows;
13 //
14 @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
15 @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
16 @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
17 @else { box-shadow: $shadow1; }
18 }
19
20 // entries
21
22 @function entry_focus_border($fc:$selected_bg_color) {
23 @if $variant == 'light' { @return $fc; }
24 @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); }
25 }
26
27 @function entry_focus_shadow($fc:$selected_bg_color) {
28 @return inset 0 0 0 1px $fc;
29 }
30
31 @function entry_gradient($c) {
32 @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 35%),
33 mix($borders_color, $c, 7%) 3px,
34 $c 90%); }
35 @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%),
36 mix($borders_color, $c, 40%) 3px,
37 $c 90%); }
38 }
39
40 @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
41 //
42 // Entries drawing function
43 //
44 // $t: entry type
45 // $fc: focus color
46 // $edge: set to none to not draw the bottom edge or specify a color to not
47 // use the default one
48 //
49 // possible $t values:
50 // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
51 //
52
53 background-color: transparent;
54 background-image: entry_gradient($base_color);
55 $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1));
56 $_entry_edge: if($edge == none, none, _widget_edge($edge));
57
58 @if $t==normal {
59 color: $text_color;
60 border-color: $borders_color;
61 @include _shadows(entry_focus_shadow(transparentize($fc,1)), $_entry_edge);
62 // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
63 }
64 @if $t==focus {
65 @include _shadows(entry_focus_shadow($fc), $_entry_edge);
66 border-color: entry_focus_border($fc);
67 }
68 @if $t==insensitive {
69 color: $insensitive_fg_color;
70 border-color: $borders_color;
71 background-image: linear-gradient(to bottom, $insensitive_bg_color);
72 box-shadow: $_entry_edge;
73
74 }
75 @if $t==backdrop {
76 color: $backdrop_text_color;
77 border-color: $backdrop_borders_color;
78 background-image: linear-gradient(to bottom, $backdrop_base_color);
79 box-shadow: $_blank_edge;
80 }
81 @if $t==backdrop-insensitive {
82 color: $backdrop_insensitive_color;
83 border-color: $backdrop_borders_color;
84 background-image: linear-gradient(to bottom, $insensitive_bg_color);
85 box-shadow: $_blank_edge;
86 }
87 @if $t==osd {
88 color: $osd_text_color;
89 border-color: $osd_borders_color;
90 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
91 background-clip: padding-box;
92 box-shadow: none;
93 text-shadow: 0 1px black;
94 icon-shadow: 0 1px black;
95 }
96 @if $t==osd-focus {
97 color: $osd_text_color;
98 border-color: $selected_bg_color;
99 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
100 background-clip: padding-box;
101 box-shadow: entry_focus_shadow($fc);
102 text-shadow: 0 1px black;
103 icon-shadow: 0 1px black;
104 }
105 @if $t==osd-insensitive {
106 color: $osd_insensitive_fg_color;
107 border-color: $osd_borders_color;
108 background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
109 background-clip: padding-box;
110 box-shadow: none;
111 text-shadow: none;
112 icon-shadow: none;
113 }
114 @if $t==osd-backdrop {
115 color: $osd_text_color;
116 border-color: $osd_borders_color;
117 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
118 background-clip: padding-box;
119 box-shadow: none;
120 text-shadow: none;
121 icon-shadow: none;
122 }
123 }
124
125 // buttons
126
127 @function _border_color ($c) { @return darken($c,25%); } // colored buttons want
128 // the border form the
129 // base color
130
131 @function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
132 //
133 // calculate the color of text shadows
134 //
135 // $tc is the text color
136 // $bg is the background color
137 //
138 $_lbg: lightness($bg)/100%;
139 @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
140 @else { @return transparentize(black,$_lbg*0.8); }
141 }
142
143 @function _button_hilight_color($c) {
144 //
145 // calculate the right top hilight color for buttons
146 //
147 // $c: base color;
148 //
149 @if lightness($c)>90% { @return white; }
150 @else if lightness($c)>80% { @return transparentize(white, 0.3); }
151 @else if lightness($c)>50% { @return transparentize(white, 0.5); }
152 @else if lightness($c)>40% { @return transparentize(white, 0.7); }
153 @else { @return transparentize(white, 0.9); }
154 }
155
156 @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
157 //
158 // helper function for the text emboss effect
159 //
160 // $tc is the optional text color, not the shadow color
161 //
162 // TODO: this functions needs a way to deal with special cases
163 //
164
165 $_shadow: _text_shadow_color($tc, $bg);
166
167 @if lightness($tc)<50% {
168 text-shadow: 0 1px $_shadow;
169 icon-shadow: 0 1px $_shadow;
170 }
171 @else {
172 text-shadow: 0 -1px $_shadow;
173 icon-shadow: 0 -1px $_shadow;
174 }
175 }
176
177 @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
178 //
179 // Button drawing function
180 //
181 // $t: button type,
182 // $c: base button color for colored* types
183 // $tc: optional text color for colored* types
184 // $edge: set to none to not draw the bottom edge or specify a color to not
185 // use the default one
186 //
187 // possible $t values:
188 // normal, hover, active, insensitive, insensitive-active,
189 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
190 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
191 //
192
193 $_hilight_color: _button_hilight_color($c);
194 $_button_edge: if($edge == none, none, _widget_edge($edge));
195 $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
196
197 @if $t==normal {
198 //
199 // normal button
200 //
201 color: $tc;
202 outline-color: transparentize($tc, 0.7);
203 border-color: if($c!=$bg_color, _border_color($c), $borders_color);
204 background-image: linear-gradient(to bottom,
205 lighten($c,5%),
206 $c 40%,
207 darken($c,5%)
208 );
209 @include _button_text_shadow($tc,$c);
210 @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
211 }
212
213 @else if $t==hover {
214 //
215 // hovered button
216 //
217 color: $tc;
218 outline-color: transparentize($tc, 0.7);
219 border-color: if($c!=$bg_color, _border_color($c), $borders_color);
220 background-image: linear-gradient(to bottom,
221 lighten($c,14%),
222 lighten($c,4%) 40%,
223 $c);
224
225 @include _button_text_shadow($tc,lighten($c,4%));
226 @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
227 }
228
229 @else if $t==active {
230 //
231 // pushed button
232 //
233 color: $tc;
234 outline-color: transparentize($tc, 0.7);
235 border-color: if($c!=$bg_color, _border_color($c), $borders_color);
236 background-image: linear-gradient(to bottom,
237 darken($c,9%),
238 darken($c,6.6%) 40%,
239 darken($c,5%));
240 @include _button_text_shadow($tc,darken($c,10%));
241 @include _shadows(inset 0 1px transparentize(black, 0.93),
242 inset 0 2px 1px -2px transparentize(black,0.4),
243 $_button_edge);
244 }
245 @else if $t==insensitive {
246 //
247 // insensitive button
248 //
249 $_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color);
250
251 color: if($tc!=$fg_color, mix($tc,$_bg,50%), $insensitive_fg_color);
252 border-color: if($c!=$bg_color, _border_color($c),
253 $insensitive_borders_color);
254 background-image: linear-gradient(to bottom, $_bg);
255 text-shadow: none;
256 icon-shadow: none;
257 // white with 0 alpha to avoid an ugly transition, since no color means
258 // black with 0 alpha
259 @include _shadows(inset 0 1px transparentize(white,1), $_button_edge);
260 > .label { color: inherit; }
261 }
262 @else if $t==insensitive-active {
263 //
264 // insensitive pushed button
265 //
266 $_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%),
267 $insensitive_bg_color);
268 $_bc: if($c!=$bg_color, _border_color($c), $insensitive_borders_color);
269
270 color: if($c!=$bg_color, mix($tc,$_bg,60%), $insensitive_fg_color);
271 border-color: $_bc;
272 background-image: linear-gradient(to bottom, mix($_bc, $_bg, 10%), $_bg);
273 // white with 0 alpha to avoid an ugly transition, since no color means
274 // black with 0 alpha
275 @include _shadows(inset 0 1px transparentize(white,1), $_button_edge);
276 > .label { color: inherit; }
277 }
278
279 @else if $t==backdrop {
280 //
281 // backdrop button
282 //
283 $_bg: if($c!=$bg_color,$c,$backdrop_bg_color);
284 $_bc: if($variant=='light',$c,_border_color($c));
285
286 color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color);
287 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
288 background-image: linear-gradient(to bottom, $_bg);
289 text-shadow: none;
290 icon-shadow: none;
291 @include _shadows(inset 0 1px transparentize(white,1),
292 $_blank_edge);
293 }
294
295 @else if $t==backdrop-active {
296 //
297 // backdrop pushed button FIXME no colors here!
298 //
299 $_bg: if($c!=$bg_color, darken($c,10%), $backdrop_dark_fill);
300 $_bc: if($variant=='light',$_bg,_border_color($c));
301
302 color: if($tc!=$fg_color, mix($tc,$_bg,80%), $backdrop_fg_color);
303 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
304 background-image: linear-gradient(to bottom, $_bg);
305 @include _shadows(inset 0 1px transparentize(white,1),
306 $_blank_edge);
307 }
308
309 @else if $t==backdrop-insensitive {
310 //
311 // backdrop insensitive button
312 //
313
314 $_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color);
315 $_bc: if($variant=='light',$_bg,_border_color($c));
316
317 color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color);
318 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
319 background-image: linear-gradient(to bottom, $_bg);
320 text-shadow: none;
321 icon-shadow: none;
322 // white with 0 alpha to avoid an ugly transition, since no color means
323 // black with 0 alpha
324 @include _shadows(inset 0 1px transparentize(white,1),
325 $_blank_edge);
326 > .label { color: inherit; }
327 }
328
329 @else if $t==backdrop-insensitive-active {
330 //
331 // backdrop insensitive pushed button
332 //
333
334 $_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%),
335 darken($insensitive_bg_color,5%));
336 $_bc: if($variant=='light',$_bg,_border_color($c));
337
338 color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color);
339 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
340 background-image: linear-gradient(to bottom, $_bg);
341 @include _shadows(inset 0 1px transparentize(white,1),
342 $_blank_edge);
343 > .label { color: inherit; }
344 }
345
346 @else if $t==osd {
347 //
348 // normal osd button
349 //
350 $_bg: if($c!=$bg_color, transparentize($c, 0.5),
351 $osd_bg_color);
352
353 color: $osd_fg_color;
354 border-color: $osd_borders_color;
355 background-image: linear-gradient(to bottom, $_bg);
356 background-clip: padding-box;
357 box-shadow: inset 0 1px transparentize(white, 0.9);
358 text-shadow: 0 1px black;
359 icon-shadow: 0 1px black;
360 outline-color: transparentize($osd_fg_color, 0.7);
361 }
362 @else if $t==osd-hover {
363 //
364 // active osd button
365 //
366 $_bg: if($c!=$bg_color, transparentize($c, 0.3),
367 lighten($osd_bg_color, 12%));
368
369 color: white;
370 border-color: $osd_borders_color;
371 background-image: linear-gradient(to bottom, $_bg);
372 background-clip: padding-box;
373 box-shadow: inset 0 1px transparentize(white, 0.9);
374 text-shadow: 0 1px black;
375 icon-shadow: 0 1px black;
376 outline-color: transparentize($osd_fg_color, 0.7);
377 }
378 @else if $t==osd-active {
379 //
380 // active osd button
381 //
382 $_bg: if($c!=$bg_color, $c, $osd_borders_color);
383
384 color: white;
385 border-color: $osd_borders_color;
386 background-image: linear-gradient(to bottom, $_bg);
387 background-clip: padding-box;
388 box-shadow: none;
389 text-shadow: none;
390 icon-shadow: none;
391 outline-color: transparentize($osd_fg_color, 0.7);
392 }
393 @else if $t==osd-insensitive {
394 //
395 // insensitive osd button
396 //
397 color: $osd_insensitive_fg_color;
398 border-color: $osd_borders_color;
399 background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
400 background-clip: padding-box;
401 box-shadow: none;
402 text-shadow: none;
403 icon-shadow: none;
404 }
405 @else if $t==osd-backdrop {
406 //
407 // backdrop osd button
408 //
409 $_bg: if($c!=$bg_color, transparentize($c, 0.5),
410 $osd_bg_color);
411
412 color: $osd_fg_color;
413 border-color: $osd_borders_color;
414 background-image: linear-gradient(to bottom, $_bg);
415 background-clip: padding-box;
416 box-shadow: none;
417 text-shadow: none;
418 icon-shadow: none;
419 }
420 @else if $t==undecorated {
421 //
422 // reset
423 //
424 border-color: transparent;
425 background-color: transparent;
426 background-image: none;
427
428 @include _shadows(inset 0 1px transparentize(white, 1),
429 $_blank_edge);
430
431 text-shadow: none;
432 icon-shadow: none;
433 }
434 }
435
436 @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
437 color: mix($tc,$bg_color,80%);
438 @if $flat { background-image: linear-gradient(to bottom,$c); }
439 @else {
440 background-image: linear-gradient(to bottom,
441 mix(black,$c,15%) 5%,
442 mix(black,$c,10%) 20%,
443 mix(black,$c,10%) 90%,
444 $c);
445 }
446
447 border-color: if($c!=$bg_color, _border_color($c), $border_color);
448
449 @if not($noedge) {
450 @if lightness($c) > 60% {
451 box-shadow: inset 0 -1px $borders_edge,
452 0 1px $borders_edge;
453 }
454 @else {
455 box-shadow: inset 0 -1px transparentize($borders_edge,0.5),
456 0 1px transparentize($borders_edge,0.5);
457 }
458 }
459 @else { box-shadow: none; }
460 }
461
462 @mixin progressbar_fill($d:horizontal) {
463 $dir: if($d==vertical,right,bottom);
464 background-image: linear-gradient(to $dir, $selected_bg_color 2px,
465 lighten($selected_bg_color,6%));
466 }
467
468 @function headerbar_gradient($c, $tc:lighten($c,4%)) {
469 //
470 // headerbar gradient helper function
471 //
472 // $c: base color
473 // $tc: top color
474 //
475 @return linear-gradient(to bottom, $tc, $c);
476 }
477
478 @mixin headerbar_fill($c:$bg_color, $tc:lighten($c,4%), $hc:$top_hilight) {
479 //
480 // headerbar fill
481 //
482 // $c: base color
483 // $tc: top color
484 // $hc: top highlight color
485 //
486 $_bottom_shade_color: if($variant == 'light', mix(_border_color($c), $c, 30%),
487 mix(_border_color($c), $c, 20%));
488
489 background-image: headerbar_gradient($c, $tc);
490 box-shadow: inset 0 -1px $_bottom_shade_color, // bottom shade
491 inset 0 1px $hc; // top highlight
492
493 }
494
495 @mixin overshoot($p, $t:normal, $c:$fg_color) {
496 //
497 // overshoot
498 //
499 // $p: position
500 // $t: type
501 // $c: base color
502 //
503 // possible $p values:
504 // top, bottom, right, left
505 //
506 // possible $t values:
507 // normal, backdrop
508 //
509
510 $_small_gradient_length: 5%;
511 $_big_gradient_length: 100%;
512
513 $_position: center top;
514 $_small_gradient_size: 100% $_small_gradient_length;
515 $_big_gradient_size: 100% $_big_gradient_length;
516
517 @if $p==bottom {
518 $_position: center bottom;
519 $_linear_gradient_direction: to top;
520 }
521
522 @else if $p==right {
523 $_position: right center;
524 $_small_gradient_size: $_small_gradient_length 100%;
525 $_big_gradient_size: $_big_gradient_length 100%;
526 }
527
528 @else if $p==left {
529 $_position: left center;
530 $_small_gradient_size: $_small_gradient_length 100%;
531 $_big_gradient_size: $_big_gradient_length 100%;
532 }
533
534 $_small_gradient_color: $c;
535 $_big_gradient_color: $c;
536
537 @if $c==$fg_color {
538 $_small_gradient_color: darken($borders_color, 10%);
539 $_big_gradient_color: $fg_color;
540
541 @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
542 }
543
544 $_small_gradient: -gtk-gradient(radial,
545 $_position, 0,
546 $_position, 0.5,
547 to($_small_gradient_color),
548 to(transparentize($_small_gradient_color, 1)));
549
550 $_big_gradient: -gtk-gradient(radial,
551 $_position, 0,
552 $_position, 0.6,
553 from(transparentize($_big_gradient_color, 0.93)),
554 to(transparentize($_big_gradient_color, 1)));
555
556 @if $t==normal {
557 background-image: $_small_gradient, $_big_gradient;
558 background-size: $_small_gradient_size, $_big_gradient_size;
559 }
560
561 @else if $t==backdrop {
562 background-image: $_small_gradient;
563 background-size: $_small_gradient_size;
564 }
565
566 background-repeat: no-repeat;
567 background-position: $_position;
568
569 background-color: transparent; // reset some properties to be sure to not inherit them somehow
570 border: none; //
571 box-shadow: none; //
572 }
573
574 @mixin undershoot($p) {
575 //
576 // undershoot
577 //
578 // $p: position
579 //
580 // possible $p values:
581 // top, bottom, right, left
582 //
583
584 $_undershoot_color_dark: transparentize(black, 0.8);
585 $_undershoot_color_light: transparentize(white, 0.8);
586
587 $_gradient_dir: left;
588 $_dash_bg_size: 10px 1px;
589 $_gradient_repeat: repeat-x;
590 $_bg_pos: center $p;
591
592 background-color: transparent; // shouldn't be needed, but better to be sure;
593
594 @if ($p == left) or ($p == right) {
595 $_gradient_dir: top;
596 $_dash_bg_size: 1px 10px;
597 $_gradient_repeat: repeat-y;
598 $_bg_pos: $p center;
599 }
600
601 background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
602 $_undershoot_color_light 50%,
603 $_undershoot_color_dark 50%);
604
605 padding-#{$p}: 1px;
606 background-size: $_dash_bg_size;
607 background-repeat: $_gradient_repeat;
608 background-origin: content-box;
609 background-position: $_bg_pos;
610 }