Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-3.0/_drawing.scss @ 0:a48477723cfe

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