1// Shadows
2$shadow_0: 0px 1px 2px 0px rgba(16, 16, 16, 0.1), 0px 2px 2px 0px rgba(16, 16, 16, 0.05); // Slider hover shadow
3$shadow_1: 0px 1px 1px 0px rgba(16, 16, 16, 0.12), 0px 1px 2px 0px rgba(16, 16, 16, 0.06); // Header-button shadow
4$shadow_2: 0px 1px 1px 0px rgba(16, 16, 16, 0.1), 0px 1px 2px 0px rgba(16, 16, 16, 0.05); // Slider normal shadow
5$shadow_3: 0px 1px 1px 0px rgba(16, 16, 16, 0.04), 0px 1px 2px 0px rgba(16, 16, 16, 0.01); // Normal button shadow
6$shadow_4: 0px 2px 3px 0px rgba(16, 16, 16, 0.2), 0px 3px 5px 0px rgba(16, 16, 16, 0.15); // Switch-slider hover shadow
7$shadow_5: 0px 1px 2px 0px rgba(16, 16, 16, 0.15), 0px 2px 3px 0px rgba(16, 16, 16, 0.1); // Switch-slider normal shadow
8$text_shadow: 0 -1px rgba(#ffffff, 0.04), -1px  0px rgba(#202020, 0.05), 1px  0px rgba(#202020, 0.05),
9              0px  1px rgba(#202020, 0.3), 0px  2px rgba(#202020, 0.05); // text and icon shadow
10
11// Transitions
12$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
13$transition_1: all 0.2s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
14$transition_2: all 0.1s cubic-bezier(0, 0, 0.2, 1);
15$shadow_transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
16$button_transition: all 100ms $ease-out-quad;
17$backdrop_transition: 200ms ease-out;
18
19// Animations
20$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
21
22@keyframes switch_ripple_effect {
23  from {
24    background-image: radial-gradient(circle farthest-corner at center,
25                                      $success_color 0%,
26                                      transparent 0%);
27  }
28
29  to {
30    background-image: radial-gradient(circle farthest-corner at center,
31                                      $success_color 100%,
32                                      transparent 0%);
33  }
34}
35
36@keyframes header_ripple_effect {
37  from {
38    background-image: radial-gradient(circle farthest-corner at center,
39                                      $header_bg 0%,
40                                      transparent 0%);
41  }
42
43  to {
44    background-image: radial-gradient(circle farthest-corner at center,
45                                      $header_bg 100%,
46                                      transparent 0%);
47  }
48}
49
50// Drawing mixins
51
52// Solid color image
53@function _solid($c) {
54  @return linear-gradient(to bottom, $c, $c);
55}
56
57// Entries
58
59@mixin entry($t) {
60//
61// Entries drawing function
62//
63// $t: entry type
64//
65
66  @if $t==normal {
67  //
68  // normal entry
69  //
70    color: $text_color;
71    border-color: $entry_border;
72    background-color: $entry_bg;
73    @if $variant == 'light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }
74  }
75
76  @if $t==focus {
77  //
78  // focused entry
79  //
80    color: $text_color;
81    border-color: $entry_highlight;
82    background-color: $entry_bg;
83    @if $variant == 'dark' {box-shadow: inset 0 0 0 2px $entry_highlight; }
84    @if $variant == 'light' { box-shadow: 0px 1px 1px 0px transparent,
85                                          0px 1px 2px 0px transparent, // set the same size transparent shadow for entry transition
86                                          inset 0 0 0 2px $entry_highlight; }
87  }
88
89  @if $t==insensitive {
90  //
91  // insensitive entry
92  //
93    color: $insensitive_fg_color;
94    border-color: $entry_border;
95    background-color: transparentize($entry_bg, 0.45);
96  }
97
98  @if $t==header-normal {
99  //
100  // normal header-bar entry
101  //
102    @if $variant == 'dark' { border: none; }
103    color: $header_fg;
104    background-color: $header_button_bg;
105    background-image: if($variant=='light', linear-gradient( 0deg, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%), none);
106
107    image, image:hover { color: inherit; }
108  }
109
110  @if $t==header-focus {
111  //
112  // focused header-bar entry
113  //
114    @if $variant == 'dark' { border: none; box-shadow: 0 0 0 2px $entry_highlight, inset 0 0 0 1px $entry_highlight; }
115    @if $variant == 'light' and $compact == 'false' { box-shadow: 0 0 0 2px $entry_highlight; border-color: $entry_highlight; }
116    @if $variant == 'light' and $compact == 'true' { box-shadow: 0 0 0 2px $entry_highlight; }
117    background-image: none;
118  }
119
120  @if $t==header-insensitive {
121  //
122  // insensitive header-bar entry
123  //
124
125    color: transparentize($header_fg, 0.45);
126    background-color: transparentize($header_entry_bg, 0.15);
127  }
128
129  @else if $t==osd {
130  //
131  // normal osd entry
132  //
133    color: $osd_fg_color;
134    border-color: $osd_entry_border;
135    background-color: $osd_entry_bg;
136
137    image, image:hover { color: inherit; }
138  }
139
140  @else if $t==osd-focus {
141  //
142  // active osd entry
143  //
144    color: $selected_fg_color;
145    border-color: $osd_entry_border;
146    background-color: $selected_bg_color;
147  }
148
149  @else if $t==osd-insensitive {
150  //
151  // insensitive osd entry
152  //
153    color: $osd_fg_color;
154    background-color: transparentize($osd_entry_bg, 0.15);
155  }
156}
157
158// Buttons
159
160@mixin button($t, $actionb_bg:red, $actionb_fg: green) {
161//
162// Button drawing function
163//
164// $t:    button type,
165// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons
166
167  @if $t==normal {
168  //
169  // normal button
170  //
171    color: $fg_color;
172    border-color: $button_border;
173    background-color: $button_bg;
174    @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }
175  }
176
177  @else if $t==hover {
178  //
179  // hovered button
180  //
181    color: darken($fg_color, 10%);
182    border-color: $borders_color;
183    background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 8%));
184    box-shadow: none;
185  }
186
187  @else if $t==active {
188  //
189  // pushed button
190  //
191    color: $selected_fg_color;
192    background-color: $selection_mode_bg;
193    border-color: $selection_mode_bg;
194    background-image: linear-gradient( 180deg, #4c97fe 0%, #0564e3 100%);
195    box-shadow: none;
196  }
197
198  @else if $t==insensitive {
199  //
200  // insensitive button
201  //
202    label, & { color: $insensitive_fg_color; }
203
204    border-color: $button_border;
205    background-color: transparentize($button_bg, 0.45);
206    box-shadow: $shadow_3;
207  }
208
209  @else if $t==insensitive-active {
210  //
211  // insensitive pushed button
212  //
213    label, & { color: transparentize($selected_fg_color, 0.2); }
214
215    border-color: transparentize($selected_bg_color, 0.25);
216    background-color: transparentize($selected_bg_color, 0.25);
217    box-shadow: none;
218
219    opacity: 0.6;
220  }
221
222  @if $t==flat-normal {
223  //
224  // normal button
225  //
226    border: none;
227    background-color: transparent;
228    box-shadow: none;
229  }
230
231  @else if $t==flat-hover {
232  //
233  // hovered button
234  //
235    color: darken($fg_color, 10%);
236    background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
237    border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
238  }
239
240  @else if $t==flat-active {
241  //
242  // pushed button
243  //
244    background-image: none;
245    color: $selected_fg_color;
246    background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
247    text-shadow: if($variant=='light', $text_shadow, none);
248    -gtk-icon-shadow: if($variant=='light', $text_shadow, none);
249  }
250
251  @else if $t==flat-checked {
252  //
253  // pushed button
254  //
255    background-image: none;
256    color: $selected_fg_color;
257    background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
258    text-shadow: if($variant=='light', $text_shadow, none);
259    -gtk-icon-shadow: if($variant=='light', $text_shadow, none);
260  }
261
262  @else if $t==flat-insensitive {
263  //
264  // insensitive button
265  //
266    label, & { color: $insensitive_fg_color; }
267
268    background-color: transparent;
269//    border: none;
270  }
271
272  @else if $t==flat-insensitive-active {
273  //
274  // insensitive pushed button
275  //
276    label, & { color: transparentize($selected_fg_color, 0.2); }
277
278    background-color: lighten($fg_color, 20%);
279    border-color: lighten($fg_color, 20%);
280    opacity: 0.6;
281  }
282
283  @if $t==header-normal {
284  //
285  // normal header-bar button
286  //
287    border-color: $borders_color;
288    color: $header_fg;
289    background-color: $header_button_bg;
290    background-image: if($variant == 'light', linear-gradient( 0deg, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%), none);
291    box-shadow: $shadow_3;
292
293    @if $variant == 'dark' { border: none; }
294
295  }
296
297  @else if $t==header-hover {
298  //
299  // hovered header-bar button
300  //
301    border-color: $borders_color;
302    color: darken($header_fg, 2%);
303    background-color: $header_button_hover_bg;
304    background-image: if($variant == 'light', linear-gradient( 0deg, #f8f8f8 0%, #ffffff 100%), none);
305    box-shadow: none;
306  }
307
308  @else if $t==header-active {
309  //
310  // pushed header-bar button
311  //
312    color: $selected_fg_color;
313    background-color: $header_button_active_bg;
314    background-image: none;
315    border-color: $borders_color;
316    text-shadow: if($variant == 'light', $text_shadow, none);
317    -gtk-icon-shadow: if($variant == 'light', $text_shadow, none);
318    box-shadow: none;
319  }
320
321  @else if $t==header-checked {
322  //
323  // pushed header-bar button
324  //
325    color: $selected_fg_color;
326    background-color: $header_button_checked_bg;
327    background-image: if($variant == 'light', linear-gradient( 0deg, #656565 0%, #707070 100%), none);
328    border-color: $borders_color;
329    border-top-color: if($variant == 'light', lighten($borders_color, 0%), $borders_color);
330    border-bottom-color: if($variant == 'light', lighten($borders_color, 0%), $borders_color);
331    text-shadow: if($variant == 'light', $text_shadow, none);
332    -gtk-icon-shadow: if($variant == 'light', $text_shadow, none);
333    box-shadow: none;
334  }
335
336  @else if $t==header-insensitive {
337  //
338  // insensitive header-bar button
339  //
340    label, & { color: transparentize($header_fg, 0.45); }
341
342    background-color: $header_button_bg;
343    box-shadow: $shadow_3;
344  }
345
346  @else if $t==header-insensitive-active {
347  //
348  // header-bar insensitive pushed button
349  //
350    color: transparentize($selected_fg_color, 0.25);
351    background-color: transparentize($header_button_active_bg, 0.35);
352    box-shadow: $shadow_3;
353  }
354
355  @else if $t==osd {
356  //
357  // normal osd button
358  //
359    color: $osd_fg_color;
360    border-color: $osd_button_border;
361    background-color: $osd_button_bg;
362  }
363
364  @else if $t==osd-hover {
365  //
366  // active osd button
367  //
368    color: $osd_fg_color;
369    border-color: $osd_button_border;
370    background-color: opacify(lighten($osd_button_bg, 7%), 0.1);
371  }
372
373  @else if $t==osd-active {
374  //
375  // active osd button
376  //
377    color: $selected_fg_color;
378    border-color: $osd_button_border;
379    background-color: $selected_bg_color;
380  }
381
382  @else if $t==osd-insensitive {
383  //
384  // insensitive osd button
385  //
386    color: $osd_insensitive_fg_color;
387    border-color: $osd_button_border;
388    background-color: transparentize($osd_button_bg, 0.15);
389  }
390
391  @else if $t==suggested_destructive {
392  //
393  // suggested or destructive action buttons
394  //
395    background-clip: border-box;
396
397    color: $actionb_fg;
398    background-color: $actionb_bg;
399    border-color: darken($actionb_bg, 10%);
400    background-image: none;
401//    box-shadow: none;
402  }
403
404  @else if $t==undecorated {
405  //
406  // reset
407  //
408    border-color: transparent;
409    background-color: transparent;
410    background-image: none;
411    box-shadow: none;
412  }
413}
414
415//
416// Overshoot
417//
418@mixin overshoot($p, $c:$selected_bg_color) {
419// $p: position
420// $c: base color
421//
422// possible $p values:
423// top, bottom, right, left
424//
425
426  $_big_gradient_length: 60%;
427
428  $_position: center top;
429  $_big_gradient_size: 100% $_big_gradient_length;
430
431  @if $p==bottom {
432    $_position: center bottom;
433  }
434
435  @else if $p==right {
436    $_position: right center;
437    $_big_gradient_size: $_big_gradient_length 100%;
438  }
439
440  @else if $p==left {
441    $_position: left center;
442    $_big_gradient_size: $_big_gradient_length 100%;
443  }
444
445  background-image: -gtk-gradient(radial,
446                                $_position, 0,
447                                $_position, 0.6,
448                                from(transparentize($c, 0.8)),
449                                to(transparentize($c, 1)));
450
451  background-size: $_big_gradient_size;
452  background-repeat: no-repeat;
453  background-position: $_position;
454
455  background-color: transparent; // reset some properties to be sure to not inherit them somehow
456  border: none;                  //
457  box-shadow: none;              //
458}
459
460//
461// Undershoot
462//
463@mixin undershoot($p) {
464// $p: position
465//
466// possible $p values:
467// top, bottom, right, left
468//
469
470  $_undershoot_color_dark: transparentize(black, 0.8);
471  $_undershoot_color_light: transparentize(white, 0.8);
472
473  $_gradient_dir: left;
474  $_dash_bg_size: 10px 1px;
475  $_gradient_repeat: repeat-x;
476  $_bg_pos: center $p;
477
478  background-color: transparent; // shouldn't be needed, but better to be sure;
479
480  @if ($p == left) or ($p == right) {
481    $_gradient_dir: top;
482    $_dash_bg_size: 1px 10px;
483    $_gradient_repeat: repeat-y;
484    $_bg_pos: $p center;
485  }
486
487  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
488                                    $_undershoot_color_light 50%,
489                                    $_undershoot_color_dark 50%);
490
491  padding-#{$p}: 1px;
492  background-size: $_dash_bg_size;
493  background-repeat: $_gradient_repeat;
494  background-origin: content-box;
495  background-position: $_bg_pos;
496  border: none;
497}
498