source: arc-theme/trunk/fuentes/arc-theme/common/gtk-3.0/3.14/sass/_common.scss @ 2104

Last change on this file since 2104 was 2104, checked in by hectorgh, 3 years ago

updating theme

File size: 74.1 KB
Line 
1@function gtkalpha($c,$a) {
2  @return unquote("alpha(#{$c},#{$a})");
3}
4
5$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
6$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant
7$darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
8
9* {
10  background-clip: padding-box;
11  -GtkToolButton-icon-spacing: 4;
12  -GtkTextView-error-underline-color: $error_color;
13  -GtkPaned-handle-size: 1;
14
15  -GtkCheckButton-indicator-size: 16;
16  -GtkCheckMenuItem-indicator-size: 16;
17
18  -GtkScrolledWindow-scrollbar-spacing: 0;
19  -GtkScrolledWindow-scrollbars-within-bevel: 1;
20
21  -GtkToolItemGroup-expander-size: 11;
22  -GtkExpander-expander-size: 16;
23  -GtkTreeView-expander-size: 11;
24
25  -GtkTreeView-horizontal-separator: 4;
26
27  -GtkMenu-horizontal-padding: 0;
28  -GtkMenu-vertical-padding: 0;
29
30  -GtkWidget-link-color: $link_color;
31  -GtkWidget-visited-link-color: $link_visited_color;
32
33  -GtkWidget-focus-padding: 2;    // FIXME: do we still need these?
34  -GtkWidget-focus-line-width: 1; //
35
36  -GtkWidget-text-handle-width: 20;
37  -GtkWidget-text-handle-height: 20;
38
39  -GtkDialog-button-spacing: 4;
40  -GtkDialog-action-area-border: 0;
41
42  -GtkStatusbar-shadow-type: none;
43
44  // We use the outline properties to signal the focus properties
45  outline-color: transparentize($fg_color, 0.7);
46  outline-style: dashed;
47  outline-offset: -3px;
48  outline-width: 1px;
49  outline-radius: 2px;
50}
51
52
53//
54// Base States
55//
56.background {
57  color: $fg_color;
58  background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work
59}
60
61*:insensitive {
62  -gtk-image-effect: dim;
63}
64
65.gtkstyle-fallback {
66  background-color: $bg_color;
67  color: $fg_color;
68  &:prelight {
69    background-color: lighten($bg_color, 10%);
70    color: $fg_color;
71  }
72  &:active {
73    background-color: darken($bg_color, 10%);
74    color: $fg_color;
75  }
76  &:insensitive {
77    background-color: $insensitive_bg_color;
78    color: $insensitive_fg_color;
79  }
80  &:selected {
81    background-color: $selected_bg_color;
82    color: $selected_fg_color;
83  }
84}
85
86.view {
87  color: $text_color;
88  background-color: $base_color;
89
90  &:selected,
91  &:selected:focus,
92  &:selected:hover {
93    @extend %selected_items;
94  }
95  &.dim-label { 
96    color: transparentize($text_color, 0.45);
97
98    &:selected, &:selected:focus {
99      color: transparentize($selected_fg_color, 0.35);
100      text-shadow: none;
101    }
102  }
103}
104
105.rubberband {
106  border: 1px solid $selected_bg_color;
107  background-color: transparentize($selected_bg_color,0.8);
108}
109
110GtkLabel {
111  &.separator {
112    color: $fg_color;
113    @extend .dim-label;
114  }
115  &:selected,
116  &:selected:focus,
117  &:selected:hover {
118    @extend %selected_items;
119  }
120  &:insensitive {
121    color: $insensitive_fg_color;
122  }
123}
124
125.dim-label {
126  opacity: 0.55;
127}
128
129GtkAssistant {
130  .sidebar {
131    background-color: $base_color;
132    border-top: 1px solid $borders_color;
133    &:dir(ltr) { border-right: 1px solid $borders_color; }
134    &:dir(rtl) { border-left: 1px solid $borders_color; }
135  }
136  &.csd .sidebar { border-top-style: none; }
137  .sidebar GtkLabel {
138    padding: 6px 12px;
139  }
140  .sidebar GtkLabel.highlight {
141    background-color: $selected_bg_color;
142    color: $selected_fg_color;
143  }
144}
145
146GtkTextView { // This will get overridden by .view, needed by gedit line numbers
147  background-color: mix($bg_color, $base_color, 50%);
148}
149
150GtkFlowBox .grid-child {
151  padding: 3px;
152  border-radius: 3px;
153  &:selected {
154    @extend %selected_items;
155    outline-offset: -2px;
156  }
157}
158
159%osd, .osd {
160  color: $osd_fg_color;
161  border: none;
162  background-color: $osd_bg_color;
163  background-clip: padding-box;
164  outline-color: transparentize($osd_fg_color, 0.7);
165  box-shadow: none;
166}
167
168//
169// Spinner Animations
170//
171@keyframes spin {
172  to { -gtk-icon-transform: rotate(1turn); }
173}
174
175.spinner {
176  background-image: none;
177  background-color: blue;
178  opacity: 0; // non spinning spinner makes no sense
179  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
180
181  &:active {
182    opacity: 1;
183    animation: spin 1s linear infinite;
184
185    &:insensitive {
186      opacity: 0.5;
187    }
188  }
189}
190
191$vert_padding: 5px;
192//
193// Text Entries
194//
195.entry {
196  border: 1px solid;
197  padding: $vert_padding 8px;
198
199  border-radius: 3px;
200  transition: all 200ms $ease-out-quad;
201  @include entry(normal);
202
203  &.image { // icons inside the entry
204    &.left { padding-left: 0; }
205    &.right { padding-right: 0; }
206  }
207
208  &.flat, &.flat:focus {
209    padding: 2px;
210    @include entry(normal);
211    border: none;
212    border-radius: 0;
213  }
214
215  &:focus {
216    background-clip: border-box;
217    @include entry(focus);
218  }
219
220  &:insensitive { @include entry(insensitive); }
221
222  &:selected,
223  &:selected:focus {
224    background-color: $selected_bg_color;
225    color: $selected_fg_color;
226  }
227
228  &.progressbar {
229    margin: 2px 12px;
230    border-radius: 0;
231    border-width: 0 0 2px;
232    border-color: $selected_bg_color;
233    border-style: solid;
234    background-image: none;
235    background-color: transparent;
236    box-shadow: none;
237  }
238
239  .linked > & { //FIXME: use same buttons linking logic and template
240    &:first-child {
241      border-top-right-radius: 0;
242      border-bottom-right-radius: 0;
243      &:dir(rtl) { border-right-style: none;}
244    }
245    &:last-child {
246      border-top-left-radius: 0;
247      border-bottom-left-radius: 0;
248      border-left-style: none;
249      &:dir(rtl) { border-left-style: solid; }
250    }
251  }
252
253  @each $e_type, $e_color in (warning, $warning_color),
254                             (error, $error_color) {
255    &.#{$e_type} {
256      color: $selected_fg_color;
257      border-color: if($variant=='light', $e_color, $entry_border);
258      background-image: linear-gradient(to bottom, mix($e_color, $base_color, 60%));
259
260      &:focus {
261        color: $selected_fg_color;
262        background-image: linear-gradient(to bottom, $e_color);
263        box-shadow: none;
264      }
265      &:selected, &:selected:focus {
266        background-color: $selected_fg_color;
267        color: $e_color;
268      }
269    }
270  }
271
272  &.image { // entry icons colors
273    color: mix($fg_color,$base_color,80%);
274  }
275
276  .linked.vertical > & { //FIXME comment stuff and make the whole thing smarter.
277    border-bottom-color: mix($borders_color, $base_color, 30%);
278    box-shadow: none;
279    @extend %linked_vertical;
280
281    &:focus {
282      border-color: $selected_bg_color;
283      box-shadow: 0 -1px 0 0 $selected_bg_color;
284      @extend %linked_vertical;
285    }
286
287    &:insensitive {
288      border-bottom-color: mix($borders_color, $base_color, 30%);
289      @extend %linked_vertical;
290    }
291
292    &:first-child {
293      border-bottom-color: mix($borders_color, $base_color, 30%);
294
295      &:focus {
296        border-bottom-color: $selected_bg_color;
297        box-shadow: none;
298      }
299
300      &:insensitive {
301        border-bottom-color: mix($borders_color, $base_color, 30%);
302        @extend %linked_vertical:first-child;
303      }
304    }
305
306    &:last-child {
307      border-bottom-color: rgba(0,0,0,0.14);
308      &:focus {
309        border-bottom-color: $selected_bg_color;
310        box-shadow: 0 -1px 0 0 $selected_bg_color;
311        @extend %linked_vertical:last-child;
312      }
313
314      &:insensitive {
315        border-bottom-color: rgba(0,0,0,0.14);
316        @extend %linked_vertical:last-child;
317
318      }
319    }
320  }
321
322  .osd & {
323    @include entry(osd);
324    &:focus { @include entry(osd-focus); }
325    &:insensitive { @include entry(osd-insensitive); }
326  }
327}
328
329GtkSearchEntry.entry { border-radius: 20px; }
330
331//
332// Buttons
333//
334// stuff for .needs-attention
335$_dot_color: $selected_bg_color;
336
337@keyframes needs_attention {
338  from {
339    background-image: -gtk-gradient(radial,
340                                    center center, 0,
341                                    center center, 0.01,
342                                    to($_dot_color),
343                                    to(transparent));
344  }
345  to {
346    background-image: -gtk-gradient(radial,
347                                    center center, 0,
348                                    center center, 0.5,
349                                    to($selected_bg_color),
350                                    to(transparent));
351  }
352}
353
354.button {
355  $_button_transition: all 200ms $ease-out-quad;
356
357  transition: $_button_transition;
358  border: 1px solid;
359  border-radius: 3px;
360  padding: $vert_padding 8px;
361
362  @include button(normal);
363
364  &.flat {
365    @include button(undecorated);
366    background-color: transparentize($button_bg, 1);
367    border-color: transparentize($button_border, 1);
368    // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
369    // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
370    // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
371    // in this case the duration is increased.
372    transition: none;
373    &:hover {
374      transition: $_button_transition;
375      transition-duration: 350ms;
376      &:active { transition: $_button_transition; }
377    }
378  }
379  &:hover {
380    @include button(hover);
381    -gtk-image-effect: highlight;
382  }
383  &:active, &:checked {
384    background-clip: if($variant=='light', border-box, padding-box);
385    @include button(active);
386    transition-duration: 50ms;
387  }
388
389  //Webkitgtk workaround start
390  &:active { color: $fg_color; }
391  &:active:hover, &:checked { color: $selected_fg_color; }
392  //Webkitgtk workaround end
393
394  &.flat:insensitive {
395    @include button(undecorated);
396  }
397  &:insensitive {
398    @include button(insensitive);
399    &:active, &:checked {
400      @include button(insensitive-active);
401    }
402  }
403  // big standalone buttons like in Documents pager
404  &.osd {
405    color: $osd_fg_color;
406    outline-color: transparentize($osd_fg_color, 0.7);
407    background-color: $osd_bg_color;
408    border-color: darken($osd_bg_color, 8%);
409
410    &.image-button { padding: 10px; }
411
412    &:hover { color: $selected_bg_color; }
413    &:active, &:checked { @include button(osd-active); }
414    &:insensitive { @include button(osd-insensitive); }
415  }
416
417  //overlay / OSD style
418  .osd & {
419    @include button(osd);
420    // there's a problem with sass which prevents it to extend the linked
421    // placeholder as expected, it should just be "@extend %linked;", the
422    // placeholder is basically replicated here
423    //
424    // Workaround START
425    border-radius: 0;
426    border-left-style: none;
427    border-right-style: none;
428
429    &:dir(rtl) {
430      border-radius: 0;
431      border-right-style: none;
432      border-left-style: none
433    }
434    &:first-child {
435      border-radius: 3px 0 0 3px;
436      border-left-style: solid;
437    }
438    &:last-child {
439      border-radius: 0 3px 3px 0;
440      border-right-style: solid;
441
442      &:dir(rtl) { border-left-style: solid; }
443    }
444    &:only-child {
445      border-radius: 3px;
446      border-style: solid;
447    }
448    // Workaround END
449    &:hover {
450      @include button(osd-hover);
451      @extend %linked;
452      &, &:first-child, &:last-child { box-shadow: none; }
453    }
454    &:active, &:checked {
455      background-clip: padding-box;
456      @include button(osd-active);
457      @extend %linked;
458    }
459    &:insensitive {
460      @include button(osd-insensitive);
461      @extend %linked;
462    }
463
464    &.flat {
465      @include button(undecorated);
466      box-shadow: none;
467      &:hover {
468        @include button(osd-hover);
469        &, &:first-child, &:last-child { box-shadow: none; }
470      }
471      &:insensitive {
472        @include button(osd-insensitive);
473        background-image: none;
474      }
475      &:active, &:checked {
476        @include button(osd-active);
477      }
478    }
479  }
480  // Suggested and Destructive Action buttons
481  @each $b_type, $b_color in (suggested-action, $suggested_color),
482                             (destructive-action, $destructive_color) {
483    &.#{$b_type} {
484      @include button(suggested_destructive, $b_color);
485
486      &.flat {
487        @include button(undecorated);
488        color: $b_color;
489        outline-color: transparentize($b_color, 0.7);
490      }
491      &:hover {
492        @include button(suggested_destructive, lighten($b_color, 10%));
493      }
494      &:active, &:checked {
495        @include button(suggested_destructive, darken($b_color, 10%));
496      }
497      &.flat:insensitive {
498        @include button(undecorated);
499        color: $insensitive_fg_color;
500      }
501      &:insensitive { @include button(insensitive); }
502    }
503  }
504
505  &.image-button { padding: 2px + $vert_padding; }
506  .header-bar &.image-button { padding: 2px + $vert_padding 10px; }
507
508  &.text-button {
509    padding-left: 16px;
510    padding-right: 16px;
511  }
512
513  &.text-button.image-button {
514    // those buttons needs uneven horizontal padding, we want the icon side
515    // to have the image-button padding, while the text side the text-button
516    // one, so we're adding the missing padding to the label depending on
517    // its position inside the button
518    padding: $vert_padding 8px; // same as .button
519    GtkLabel:first-child { padding-left: 8px; }
520    GtkLabel:last-child { padding-right: 8px; }
521  }
522
523  .stack-switcher > & {
524    // to position the needs attention dot, padding is added to the button
525    // child, a label needs just lateral padding while an icon needs vertical
526    // padding added too.
527
528    outline-offset: -3px; // needs to be set or it gets overridden by GtkRadioButton outline-offset
529
530    > GtkLabel {
531      padding-left: 6px;  // label padding
532      padding-right: 6px; //
533    }
534    > GtkImage {
535      padding-left: 6px;
536      padding-right: 6px;
537      padding-top: $vert_padding - 2px;
538      padding-bottom: $vert_padding - 2px;
539    }
540
541    &.text-button { padding: $vert_padding 10px; }  // needed or it will get overridden
542
543    &.image-button { padding: $vert_padding - 3px 4px; }
544
545    &.needs-attention > GtkLabel,
546    &.needs-attention > GtkImage { @extend %needs_attention; }
547    &.needs-attention:active > .label,
548    &.needs-attention:active > GtkImage,
549    &.needs-attention:checked > GtkLabel,
550    &.needs-attention:checked > GtkImage {
551      animation: none;
552      background-image: none;
553    }
554  }
555
556  %needs_attention {
557    animation: needs_attention 150ms ease-in;
558    background-image: -gtk-gradient(radial,
559                                    center center, 0,
560                                    center center, 0.5,
561                                    to($_dot_color),
562                                    to(transparent));
563    background-size: 6px 6px, 6px 6px;
564    background-repeat: no-repeat;
565    @if $variant == 'light' { background-position: right 3px, right 4px; }
566    @else { background-position: right 3px, right 2px; }
567    &:dir(rtl) {
568      @if $variant == 'light' { background-position: left 3px, left 4px; }
569      @else { background-position: left 3px, left 2px; }
570    }
571  }
572
573  //inline-toolbar buttons
574  .inline-toolbar &, .inline-toolbar &:backdrop {
575    border-radius: 2px;
576    border-width: 1px;
577    @extend %linked;
578  }
579
580  .linked > &,
581  .linked > &:hover,
582  .linked > &:active,
583  .linked > &:checked { @extend %linked; }
584
585  .linked.vertical > &,
586  .linked.vertical > &:hover,
587  .linked.vertical > &:active,
588  .linked.vertical > &:checked { @extend %linked_vertical; }
589}
590
591// all the following is for the +|- buttons on inline toolbars, that way
592// should really be deprecated...
593.inline-toolbar GtkToolButton > .button { // redefining the button look is
594                                          // needed since those are flat...
595  @include button(normal);
596  &:hover { @include button(hover); }
597  &:active,
598  &:checked{ @include button(active); }
599  &:insensitive { @include button(insensitive); }
600  &:insensitive:active,
601  &:insensitive:checked { @include button(insensitive-active); }
602}
603
604// More inline toolbar buttons
605.inline-toolbar.toolbar GtkToolButton {
606  & > .button.flat { @extend %linked_middle; }
607  &:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
608  &:first-child > .button.flat { @extend %linked:first-child; }
609  &:last-child > .button.flat { @extend %linked:last-child; }
610  &:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
611  &:only-child > .button.flat { @extend %linked:only-child; }
612}
613
614$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5));
615
616%linked_middle {
617  border-radius: 0;
618  border-left-style: none;
619  border-right-style: none;
620
621  &:hover {
622    box-shadow: inset  1px 0 $_linked_separator_color,
623                inset -1px 0 $_linked_separator_color;
624  }
625  &:active, &:checked { box-shadow: none; }
626
627  &:dir(rtl) {
628    border-radius: 0; // needed when including %linked_middle:dir(rtl)
629  }
630}
631
632%linked {
633  @extend %linked_middle;
634
635  &:first-child {
636    border-radius: 3px 0 0 3px;
637    border-left-style: solid;
638
639    &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
640    &:active, &:checked { box-shadow: none; }
641  }
642  &:last-child {
643    border-radius: 0 3px 3px 0;
644    border-right-style: solid;
645
646    &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
647    &:active, &:checked { box-shadow: none; }
648
649    &:dir(rtl) { border-bottom-left-radius: 0; }
650
651  }
652  &:only-child {
653    border-radius: 3px;
654    border-style: solid;
655
656    &:hover { box-shadow: none; }
657    &:active, &:checked { box-shadow: none; }
658  }
659}
660
661%linked_vertical_middle {
662  border-style: solid;
663  border-bottom-style: none;
664  border-top-style: none;
665  border-radius: 0;
666
667  &:hover {
668    box-shadow: inset 0 -1px $_linked_separator_color,
669                inset 0  1px $_linked_separator_color;
670  }
671  &:active, &:checked { box-shadow: none; }
672}
673
674%linked_vertical{
675  @extend %linked_vertical_middle;
676
677  &:first-child {
678    border-radius: 3px 3px 0 0;
679    border-top-style: solid;
680
681    &:hover { box-shadow: inset 0 -1px $_linked_separator_color; }
682    &:active, &:checked { box-shadow: none; }
683  }
684  &:last-child {
685    border-radius: 0 0 3px 3px;
686    border-bottom-style: solid;
687
688    &:hover { box-shadow: inset 0 1px $_linked_separator_color; }
689    &:active, &:checked { box-shadow: none; }
690  }
691  &:only-child {
692    border-radius: 3px;
693    border-style: solid;
694
695    &:hover { box-shadow: none; }
696    &:active, &:checked { box-shadow: none; }
697  }
698}
699
700%undecorated_button {
701  border-color: transparent;
702  background-color: transparent;
703  background-image: none;
704  box-shadow: none;
705}
706
707/* menu buttons */
708.menuitem.button.flat {
709  transition: none;
710  @extend %undecorated_button;
711  outline-offset: -1px;
712  border-radius: 2px;
713
714  &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); }
715  &:active, &:selected {
716    @extend %selected_items;
717  }
718  &:checked { color: $fg_color; }
719}
720
721//
722// Links
723//
724*:link {
725  color: $link_color;
726  &:visited {
727    color: $link_visited_color;
728    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
729  }
730  &:hover {
731    color: lighten($link_color,10%);
732    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
733  }
734  &:active {
735    color: $link_color;
736    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
737  }
738  &:selected, *:selected & {
739    color: mix($selected_fg_color, $selected_bg_color, 80%);
740  }
741}
742
743.button:link, .button:visited {
744  @extend %undecorated_button;
745  @extend *:link;
746  &:hover, &:active, &:checked {
747    @extend %undecorated_button;
748  }
749}
750
751//
752// Spinbuttons
753//
754.spinbutton {
755  border-radius: 3px;
756
757  .button {
758    background-image: none;
759    border: 1px solid transparentize($borders_color,0.4);
760    border-style: none none none solid;
761    color: mix($fg_color,$base_color,95%);
762    border-radius: 0;
763    box-shadow: none;
764
765    &:dir(rtl) { border-style: none solid none none; }
766    &:first-child { color: red; }
767
768    &:insensitive {
769      color: $insensitive_fg_color;
770    }
771    &:active {
772      background-color: $selected_bg_color;
773      color: $selected_fg_color;
774    }
775  }
776
777//  .osd & {
778//    .button {
779//      @include button(undecorated);
780//      color: $osd_fg_color;
781//      border-style: none none none solid;
782//      border-color: transparentize($osd_borders_color, 0.3);
783//      border-radius: 0;
784//      box-shadow: none;
785//      &:dir(rtl) { border-style: none solid none none; }
786//      &:hover {
787//        @include button(undecorated);
788//        color: $osd_fg_color;
789//        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
790//        background-color: transparentize($osd_fg_color, 0.9);
791//        box-shadow: none;
792//      }
793//      &:insensitive {
794//        @include button(undecorated);
795//        color: $osd_insensitive_fg_color;
796//        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
797//        box-shadow: none;
798//      }
799//      &:last-child { border-radius: 0 2px 2px 0; }
800//      &:dir(rtl):first-child { border-radius: 2px 0 0 2px; }
801//    }
802//  }
803
804  &.vertical, &.vertical:dir(rtl) {
805    .button {
806      &:first-child {
807        @extend %top_button;
808        @include button(normal);
809        &:active {
810          @extend %top_button;
811          @include button(active);
812        }
813        &:hover {
814          @extend %top_button;
815          @include button(hover);
816        }
817        &:insensitive {
818          @extend %top_button;
819          @include button(insensitive);
820        }
821      }
822      &:last-child {
823        @extend %bottom_button;
824        @include button(normal);
825        &:active {
826          @extend %bottom_button;
827          @include button(active);
828        }
829        &:hover {
830          @extend %bottom_button;
831          @include button(hover);
832        }
833        &:insensitive {
834          @extend %bottom_button;
835          @include button(insensitive);
836        }
837      }
838    }
839    &.entry {
840      border-radius: 0;
841      padding-left: 5px;
842      padding-right: 5px;
843    }
844    %top_button {
845      border-radius: 2px 2px 0 0;
846      border-style: solid solid none solid;
847    }
848    %bottom_button {
849      border-radius: 0 0 2px 2px;
850      border-style: none solid solid solid;
851    }
852  }
853  GtkTreeView & {
854    &.entry, &.entry:focus {
855      padding: 1px;
856      border-width: 1px 0;
857      border-color: $selected_bg_color;
858      border-radius: 0;
859      box-shadow: none;
860    }
861  }
862}
863
864//
865// Comboboxes
866//
867GtkComboBox {
868  -GtkComboBox-arrow-scaling: 0.5;
869  -GtkComboBox-shadow-type: none;
870
871  > .button {                             // Otherwise combos
872    padding-top: $vert_padding - 2px;     // are bigger than
873    padding-bottom: $vert_padding - 2px;  // buttons
874  }
875
876  &:insensitive {
877    color: $insensitive_fg_color;
878  }
879
880  .separator.vertical {
881    // always disable separators
882    -GtkWidget-wide-separators: true;
883  }
884
885  &.combobox-entry .entry {
886    @extend %linked;
887
888    &:dir(ltr) {
889      border-right-style: none;
890
891      @if $variant=='light' { &:focus { box-shadow: 1px 0 $selected_bg_color; } }
892    }
893    &:dir(rtl) {
894      border-left-style: none;
895
896      @if $variant=='light' { &:focus { box-shadow: -1px 0 $selected_bg_color; } }
897    }
898  }
899
900  &.combobox-entry .button {
901    @extend %linked;
902
903    &:dir(ltr) {
904      box-shadow: inset  1px 0 $button_border;
905
906      &:insensitive { box-shadow: inset 1px 0 transparentize($button_border, 0.45); }
907    }
908    &:dir(rtl) {
909      box-shadow: inset -1px 0 $button_border;
910
911      &:insensitive { box-shadow: inset -1px 0 transparentize($button_border, 0.45); }
912    }
913  }
914}
915
916.linked > GtkComboBox > .button {
917  // the combo is a composite widget so the way we do button linking doesn't
918  // work, special case needed. See
919  // https://bugzilla.gnome.org/show_bug.cgi?id=733979
920  &:dir(ltr) { @extend %linked_middle; } // specificity bump
921  &:dir(rtl) { @extend %linked_middle:dir(rtl); }
922}
923.linked > GtkComboBox:first-child > .button {
924  @extend %linked:first-child;
925}
926.linked > GtkComboBox:last-child > .button {
927  @extend %linked:last-child;
928}
929.linked > GtkComboBox:only-child > .button {
930  @extend %linked:only-child;
931}
932.linked.vertical > GtkComboBoxText > .button,
933.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
934.linked.vertical > GtkComboBoxText:first-child > .button,
935.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
936.linked.vertical > GtkComboBoxText:last-child > .button,
937.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
938.linked.vertical > GtkComboBoxText:only-child > .button,
939.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
940
941//
942// Toolbars
943//
944.toolbar {
945  -GtkWidget-window-dragging: true;
946  padding: 4px;
947  background-color: $bg_color;
948  .osd &, &.osd {
949    padding: 7px;
950    border: 1px solid transparentize(black, 0.5);
951    border-radius: 3px;
952    background-color: transparentize($osd_bg_color, 0.1);
953  }
954}
955
956.primary-toolbar {
957  color: $header_fg;
958  background-color: opacify($header_bg, 1);
959  box-shadow: none;
960  border-width: 0 0 1px 0;
961  border-style: solid;
962  border-image: linear-gradient(to bottom, opacify($header_bg, 1),
963                                           darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1
964
965  //&:backdrop { background-color: opacify($header_bg_backdrop, 1); }
966
967  .separator { @extend %header_separator; }
968
969  @extend %header_widgets;
970}
971
972.inline-toolbar {
973  @extend .toolbar;
974  background-color: darken($bg_color, 3%);
975  border-style: solid;
976  border-color: $borders_color;
977  border-width: 0 1px 1px;
978  padding: 3px;
979  border-radius: 0  0 3px 3px;
980}
981
982.search-bar {
983  background-color: $bg_color;
984  border-style: solid;
985  border-color: $borders_color;
986  border-width: 0 0 1px;
987  padding: 3px;
988  //box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
989}
990
991.action-bar { background-color: darken($bg_color, 3%) }
992
993//
994// Headerbars
995//
996.header-bar {
997  padding: 5px 5px 4px 5px;
998
999  border-width: 0 0 1px;
1000  border-style: solid;
1001  border-radius: 0;
1002  border-color: opacify($header_border, 1);
1003
1004  color: $header_fg;
1005  background-color: opacify($header_bg, 1);
1006
1007  .csd & {  // Transparent header-bars only in csd windows
1008    background-color: $header_bg;
1009    border-color: $header_border;
1010  }
1011
1012  &:backdrop { color: transparentize($header_fg, 0.3); }
1013
1014  .title {
1015    padding-left: 12px;
1016    padding-right: 12px;
1017  }
1018
1019  .subtitle {
1020    font-size: smaller;
1021    padding-left: 12px;
1022    padding-right: 12px;
1023    @extend .dim-label;
1024  }
1025
1026  // Selectionmode
1027  &.selection-mode,
1028  &.titlebar.selection-mode {
1029    color: $selected_fg_color;
1030    background-color: $selection_mode_bg;
1031    border-color: darken($selection_mode_bg, 4%);
1032    box-shadow: none;
1033
1034    &:backdrop {
1035      background-color: $selection_mode_bg;
1036      color: transparentize($selected_fg_color, 0.4);
1037    }
1038
1039    .subtitle:link { @extend *:link:selected;  }
1040
1041    .button {
1042      color: $selected_fg_color;
1043      outline-color: transparentize($selected_fg_color, 0.7);
1044      background-color: transparentize($selected_fg_color, 1);
1045      border-color: transparentize($selected_fg_color, 1);
1046
1047      &.flat {
1048        @include button(undecorated);
1049        color: $selected_fg_color;
1050        background-color: transparentize($selected_fg_color, 1);
1051      }
1052      &:hover {
1053        color: $selected_fg_color;
1054        outline-color: transparentize($selected_fg_color, 0.7);
1055        background-color: transparentize($selected_fg_color, 0.95);
1056        border-color: transparentize($selected_fg_color, 0.5);
1057      }
1058      &:active, &:checked {
1059        color: $selection_mode_bg;
1060        outline-color: transparentize($selection_mode_bg, 0.7);
1061        background-color: $selected_fg_color;
1062        border-color: $selected_fg_color;
1063      }
1064      &:insensitive {
1065        color: transparentize($selected_fg_color, 0.6);
1066        background-color: transparentize($selected_fg_color, 1);
1067        border-color: transparentize($selected_fg_color, 1);
1068
1069        &:active, &:checked {
1070          color: transparentize($selection_mode_bg, 0.6);
1071          background-color: transparentize($selected_fg_color, 0.85);
1072          border-color: transparentize($selected_fg_color, 0.85);
1073        }
1074      }
1075    }
1076
1077    .selection-menu {
1078      box-shadow: none;
1079      padding-left: 10px;
1080      padding-right: 10px;
1081      GtkArrow { -GtkArrow-arrow-scaling: 1; }
1082      .arrow {
1083        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1084      }
1085    }
1086    .maximized & { background-color: opacify($selection_mode_bg, 1); }
1087  }
1088
1089  .tiled &, .tiled &:backdrop,
1090  .maximized &, .maximized &:backdrop {
1091    border-radius: 0; // squared corners when the window is max'd or tiled
1092  }
1093
1094  .maximized & {
1095    background-color: opacify($header_bg, 1);
1096    border-color: opacify($header_border, 1);
1097  }
1098
1099  &.default-decoration,
1100  .csd &.default-decoration,             // needed under wayland, since all gtk3 windows are csd windows
1101  &.default-decoration:backdrop,
1102  .csd &.default-decoration:backdrop {
1103    padding-top: 5px;
1104    padding-bottom: 5px;
1105    background-color: opacify($header_bg, 1);
1106    border-bottom-width: 0;
1107
1108    .maximized & { background-color: opacify($header_bg, 1); }
1109  }
1110}
1111
1112.titlebar {
1113  padding-left: 7px;
1114  padding-right: 7px;
1115  border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0);
1116  color: $header_fg;
1117  background-color: opacify($header_bg, 1);
1118  box-shadow: inset 0  1px lighten($header_bg, 3%);
1119
1120  .csd & { background-color: $header_bg; }
1121
1122  &:backdrop {
1123    color: transparentize($header_fg, 0.3);
1124    background-color: opacify($header_bg_backdrop, 1);
1125
1126    .csd & { background-color: $header_bg_backdrop; }
1127  }
1128
1129  .maximized & {
1130    background-color: opacify($header_bg, 1);
1131
1132    &:backdrop, .csd &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
1133  }
1134}
1135
1136.titlebar .titlebar,
1137.titlebar .titlebar:backdrop { background-color: transparent; }
1138
1139// Only extending .header-bar avoids some problems (Gnome Documents searchbar)
1140.header-bar {
1141  .header-bar-separator,
1142  & > GtkBox > .separator.vertical { @extend %header_separator; }
1143
1144  @extend %header_widgets;
1145}
1146
1147%header_separator {
1148  -GtkWidget-wide-separators: true;
1149  -GtkWidget-separator-width: 1px;
1150  border-width: 0 1px;
1151  border-image: linear-gradient(to bottom,
1152                                transparentize($header_fg, 1) 25%,
1153                                transparentize($header_fg, 0.65) 25%,
1154                                transparentize($header_fg, 0.65) 75%,
1155                                transparentize($header_fg, 1) 75%) 0 1/0 1px stretch;
1156
1157  &:backdrop { opacity: 0.6; }
1158}
1159
1160%header_widgets {
1161  // Headerbar Entries
1162  .entry {
1163    @include entry(header-normal);
1164
1165    &:backdrop { opacity: 0.85; }
1166
1167    &:focus {
1168      @include entry(header-focus);
1169      background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
1170
1171      &.image { color: $selected_fg_color; }
1172    }
1173    &:insensitive { @include entry(header-insensitive); }
1174
1175    &:selected:focus {
1176      background-color: $selected_fg_color;
1177      color: $selected_bg_color;
1178    }
1179
1180    &.progressbar {
1181      border-color: $selected_bg_color;
1182      background-image: none;
1183      background-color: transparent;
1184    }
1185
1186    @each $e_type, $e_color in (warning, $warning_color),
1187                               (error, $error_color) {
1188      &.#{$e_type} {
1189        color: $selected_fg_color;
1190        border-color: if($darker=='false' and $variant=='light', $e_color, $header_entry_border);
1191        background-image: linear-gradient(to bottom, mix($e_color, $header_bg, 60%));
1192
1193        &:focus {
1194          color: $selected_fg_color;
1195          background-image: linear-gradient(to bottom, $e_color);
1196        }
1197        &:selected, &:selected:focus {
1198          background-color: $selected_fg_color;
1199          color: $e_color;
1200        }
1201      }
1202    }
1203  }
1204
1205  // Headerbar Buttons
1206  .button {
1207
1208    @include button(header-normal);
1209
1210    &:backdrop { opacity: 0.7; }
1211
1212    &:hover { @include button(header-hover); }
1213    &:active, &:checked {
1214      @include button(header-active);
1215      background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
1216    }
1217    &:insensitive { @include button(header-insensitive); }
1218    &:insensitive:active, &:insensitive:checked { @include button(header-insensitive-active); }
1219  }
1220
1221    .linked > .button { border-radius: 3px; border-style: solid}
1222
1223    .linked > .button:hover { box-shadow: none; }
1224
1225    .linked.stack-switcher > .button,
1226    .linked.path-bar > .button {
1227
1228      $_linked_separator_color: $header_button_border;
1229
1230      @include button(header-hover);
1231
1232      &:hover { background-color: lighten($header_button_bg, 15%); }
1233      &:active, &:checked { @include button(header-active); }
1234      &:insensitive { color: transparentize($header_fg, 0.4); }
1235
1236      @extend %linked;
1237
1238      &:hover {
1239        box-shadow: inset  1px 0 $_linked_separator_color,
1240                    inset -1px 0 $_linked_separator_color;
1241      }
1242      &:active, &:checked { box-shadow: none; }
1243
1244      &:first-child {
1245        &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
1246        &:active, &:checked { box-shadow: none; }
1247      }
1248      &:last-child {
1249        &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
1250        &:active, &:checked { box-shadow: none; }
1251      }
1252      &:only-child {
1253        &:hover { box-shadow: none; }
1254        &:active, &:checked { box-shadow: none; }
1255      }
1256    }
1257
1258  // Headerbar Suggested and Destructive Action buttons
1259  @each $b_type, $b_color in (suggested-action, $suggested_color),
1260                             (destructive-action, $destructive_color) {
1261    .button.#{$b_type} {
1262      @include button(suggested_destructive, $b_color);
1263
1264      &.flat {
1265        @include button(undecorated);
1266        color: $b_color;
1267        outline-color: transparentize($b_color, 0.7);
1268      }
1269      &:hover {
1270        @include button(suggested_destructive, lighten($b_color, 10%));
1271      }
1272      &:active, &:checked {
1273        @include button(suggested_destructive, darken($b_color, 10%));
1274      }
1275      &.flat:insensitive,
1276      &:insensitive { @include button(header-insensitive); }
1277    }
1278    .button.#{$b_type}:backdrop,
1279    .button.#{$b_type}:backdrop {
1280      opacity: 0.8;
1281    }
1282  }
1283
1284  // Headerbar Spinbuttons
1285  & .spinbutton {
1286
1287    &:focus .button {
1288      color: $selected_fg_color;
1289
1290      &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; }
1291      &:insensitive { color: transparentize($selected_fg_color, 0.6); }
1292    }
1293    .button {
1294      color: $header_fg;
1295
1296      &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; }
1297      &:insensitive { color: transparentize($header_fg, 0.3); }
1298      &:active { background-color: rgba(0,0,0,0.1); }
1299    }
1300  }
1301
1302  // Headerbar ComboBoxes
1303  & GtkComboBox{
1304    &:insensitive { color: transparentize($header_fg, 0.6); }
1305
1306    &.combobox-entry .button {
1307      @include entry(header-normal);
1308
1309      &:hover { @include entry(header-focus); box-shadow: none; }
1310      &:insensitive { @include entry(header-insensitive); }
1311    }
1312    &.combobox-entry .entry {
1313      &:dir(ltr) {
1314        &:focus { box-shadow: none; }
1315      }
1316      &:dir(rtl) {
1317        &:focus { box-shadow: none; }
1318      }
1319    }
1320    &.combobox-entry .button {
1321
1322      &:dir(ltr) {
1323        box-shadow: inset  1px 0 $header_button_border;
1324
1325        &:insensitive { box-shadow: inset 1px 0 transparentize($header_button_border, 0.45); }
1326      }
1327      &:dir(rtl) {
1328        box-shadow: inset -1px 0 $header_button_border;
1329
1330        &:insensitive { box-shadow: inset -1px 0 transparentize($header_button_border, 0.45); }
1331      }
1332    }
1333  }
1334
1335  // Headerbar Switches
1336  GtkSwitch {
1337    &:backdrop { opacity: 0.75; }
1338  }
1339
1340  GtkProgressBar {
1341
1342    &.trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); }
1343
1344    &:backdrop { opacity: 0.75; }
1345  }
1346
1347  // Headerbar Scale
1348  .scale {
1349
1350    &:backdrop { opacity: 0.75; }
1351
1352    &.trough {
1353      $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border);
1354      background-image: linear-gradient(to bottom, $_trough_bg);
1355
1356      &:insensitive { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); }
1357    }
1358    &.slider {
1359      $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3));
1360      $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%));
1361
1362      background-image: linear-gradient(to bottom, $_slider_bg);
1363      border-color: $_slider_border;
1364
1365      &:hover {
1366        background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%));
1367        border-color: $_slider_border;
1368      }
1369      &:active {
1370        background-image: linear-gradient(to bottom, $selected_bg_color);
1371        border-color: $selected_bg_color;
1372      }
1373      &:insensitive {
1374        background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%));
1375        border-color: $_slider_border;
1376      }
1377    }
1378  }
1379}
1380
1381//
1382// Pathbars
1383//
1384.path-bar .button {
1385  padding: 5px 10px;
1386
1387  &:first-child { padding-left: 10px; }
1388  &:last-child { padding-right: 10px; }
1389  &:only-child {
1390    padding-left: 14px;
1391    padding-right: 14px;
1392  }
1393
1394  // the following is for spacing the icon and the label inside the home button
1395  GtkLabel:last-child { padding-left: 4px; }
1396  GtkLabel:first-child { padding-right: 4px; }
1397  GtkLabel:only-child, GtkLabel { padding-right: 0; padding-left: 0; }
1398  GtkImage { padding-top: 2px; padding-bottom: 1px; }
1399}
1400
1401//
1402// Tree Views
1403//
1404GtkTreeView.view {                                      // treeview grid lines and expanders, unfortunatelly
1405                                                        // the tree lines color can't be set
1406  -GtkTreeView-grid-line-width: 1;
1407  -GtkTreeView-grid-line-pattern: '';
1408  -GtkTreeView-tree-line-width: 1;
1409  -GtkTreeView-tree-line-pattern: '';
1410  -GtkTreeView-expander-size: 16;
1411  border-color: transparentize($fg_color, 0.8); // this is actually the line color
1412  // :selected is ignored hence no style for it
1413
1414  &.dnd {
1415    border-style: solid none;
1416    border-width: 1px;
1417    border-color: mix($fg_color, $selected_bg_color, 50%);
1418  }
1419
1420  &.expander {
1421    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1422    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1423
1424    color: mix($fg_color, $base_color, 50%);
1425
1426    &:hover { color: $fg_color; }
1427
1428    &:selected {
1429      color: mix($selected_fg_color, $selected_bg_color, 70%);
1430      &:hover { color: $selected_fg_color; }
1431    }
1432
1433    &:checked {
1434      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1435    }
1436  }
1437
1438  &.progressbar { // progress bar in treeviews
1439    color: $selected_fg_color;
1440    border-radius: 3px;
1441    background-image: linear-gradient(to bottom, $selected_bg_color);
1442
1443    &:selected {
1444      color: $selected_bg_color;
1445      box-shadow: none;
1446      background-image: linear-gradient(to bottom, $selected_fg_color);
1447    }
1448  }
1449  &.trough, &.trough:selected { // progress bar trough in treeviews
1450    color: $fg_color;
1451    background-image: linear-gradient(to bottom, $button_border);
1452    border-radius: 3px;
1453    border-width: 0;
1454  }
1455}
1456
1457column-header {
1458  .button {
1459    @extend %column_header_button;
1460    $_column_header_color: mix($fg_color,$base_color,80%);
1461    color: $_column_header_color;
1462    background-color: $base_color;
1463    &:hover {
1464      @extend %column_header_button;
1465      color: $selected_bg_color;
1466      box-shadow: none;
1467      transition: none; //I shouldn't need this
1468    }
1469    &:active {
1470      @extend %column_header_button;
1471      color: $fg_color;
1472      transition: none; //I shouldn't need this
1473    }
1474    &.dnd {
1475      @extend column-header.button.dnd;
1476    }
1477  }
1478  &:last-child .button,
1479  &:last-child.button { //treeview-like derived widgets in Banshee and Evolution
1480    border-right-style: none;
1481    border-image: none;
1482  }
1483}
1484
1485column-header.button.dnd { // for treeview-like derive widgets
1486  transition: none;
1487  color: $selected_bg_color;
1488  box-shadow: inset 1px 1px 0 1px $selected_bg_color,
1489              inset -1px 0 0 1px $selected_bg_color,
1490              inset 1px 1px $base_color, inset -1px 0 $base_color;;
1491  &:active { @extend column-header.button.dnd; }
1492  &:selected { @extend column-header.button.dnd; }
1493  &:hover { @extend column-header.button.dnd; }
1494}
1495
1496%column_header_button {
1497  padding: 3px 6px;
1498  background-image: none;
1499  border-style: none solid none none;
1500  border-radius: 0;
1501  border-image: linear-gradient(to bottom,
1502                                transparentize(if($variant == 'light', black, white), 1) 20%,
1503                                transparentize(if($variant == 'light', black, white), 0.89) 20%,
1504                                transparentize(if($variant == 'light', black, white), 0.89) 80%,
1505                                transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch;
1506
1507  &:active, &:hover { background-color: $base_color; }
1508  &:active:hover { color: $fg_color; }
1509  &:insensitive {
1510    border-color: $bg_color;
1511    background-image: none;
1512  }
1513}
1514
1515//
1516// Menus
1517//
1518.menubar {
1519  -GtkWidget-window-dragging: true;
1520  padding: 0px;
1521  background-color: opacify($header_bg, 1);
1522  color: $header_fg;
1523
1524  &:backdrop {
1525    color: transparentize($header_fg, 0.3);
1526    //background-color: opacify($header_bg_backdrop, 1);
1527  }
1528
1529  & > .menuitem {
1530    padding: 4px 8px;
1531    border: solid transparent;
1532    border-width: 0;
1533
1534    &:hover { //Seems like it :hover even with keyboard focus
1535      background-color: $selected_bg_color;
1536      color: $selected_fg_color;
1537    }
1538    &:insensitive {
1539      color: transparentize($header_fg, 0.6);
1540      border-color: transparent;
1541    }
1542  }
1543}
1544
1545.menu {
1546  margin: 4px;
1547  padding: 0;
1548  border-radius: 0;
1549  background-color: if($variant=='light', $base_color, $bg_color);
1550  border: 1px solid $borders_color;
1551
1552  .csd & {
1553    padding: 4px 0px;
1554    border-radius: 2px;
1555    border: none;
1556  }
1557
1558  .menuitem {
1559    padding: 5px;
1560    &:hover {
1561      color: $selected_fg_color;
1562      background-color: $selected_bg_color;
1563    }
1564    &:insensitive {
1565      color: $insensitive_fg_color;
1566    }
1567
1568    &.separator { color: transparentize($base_color, 1); }
1569
1570    //submenu indicators
1571    &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1572    &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
1573  }
1574  &.button { // overlow buttons
1575    @extend %undecorated_button;
1576    border-style: none;
1577    border-radius: 0;
1578    &.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); }
1579    &.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); }
1580    &:hover { background-color: mix($fg_color, $base_color, 10%); }
1581    &:insensitive {
1582      color: transparent;
1583      background-color: transparent;
1584      border-color: transparent ;
1585    }
1586  }
1587}
1588
1589.csd .popup { border-radius: 2px; }
1590
1591.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
1592
1593//
1594// Popovers
1595//
1596.popover {
1597  margin: 10px;
1598  padding: 2px;
1599  border: 1px solid darken($borders_color, 5%);
1600  border-radius: 3px;
1601  background-clip: border-box;
1602  background-color: if($variant=='light', $base_color, $bg_color);
1603
1604  box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65));
1605
1606  & .separator { color: transparentize($base_color, 1); }
1607  GtkLabel.separator { @extend GtkLabel.separator; } // Noice
1608
1609  > .list,
1610  > .view,
1611  > .toolbar,
1612  &.osd > .toolbar {
1613    border-style: none;
1614    background-color: transparent;
1615  }
1616  &.osd { @extend %osd; }
1617}
1618
1619//touch selection handlebars for the Popover.osd above
1620.entry.cursor-handle,
1621.cursor-handle {
1622  background-color: transparent;
1623  background-image: none;
1624  box-shadow: none;
1625  border-style: none;
1626  &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
1627  &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
1628}
1629
1630//
1631// Notebooks and Tabs
1632//
1633.notebook {
1634  padding: 0;
1635  background-color: $base_color;
1636  -GtkNotebook-initial-gap: 4;
1637  -GtkNotebook-arrow-spacing: 5;
1638  -GtkNotebook-tab-curvature: 0;
1639  -GtkNotebook-tab-overlap: 1;
1640  -GtkNotebook-has-tab-gap: false;
1641  -GtkWidget-focus-padding: 0;
1642  -GtkWidget-focus-line-width: 0;
1643  transition: all 200ms $ease-out-quad;
1644
1645  &.frame {
1646    border: 1px solid $borders_color;
1647
1648    &.top { border-top-width: 0; }
1649    &.bottom { border-bottom-width: 0; }
1650    &.right { border-right-width: 0; }
1651    &.left { border-left-width: 0; }
1652  }
1653  &.header {
1654    background-color: $bg_color;
1655
1656    // this is the shading of the header behind the tabs
1657    &.frame {
1658      border: 0px solid $borders_color;
1659      &.top { border-bottom-width: 0; }
1660      &.bottom { border-top-width: 0; }
1661      &.right { border-left-width: 0; }
1662      &.left { border-right-width: 0; }
1663    }
1664
1665    $_header_border: $borders_color;
1666    &.top {    box-shadow: inset  0   -1px $_header_border; }
1667    &.bottom { box-shadow: inset  0    1px $_header_border; }
1668    &.right {  box-shadow: inset  1px  0   $_header_border; }
1669    &.left {   box-shadow: inset -1px  0   $_header_border; }
1670  }
1671  tab {
1672    border-width: 0;
1673    border-style: solid;
1674    border-color: transparent;
1675    background-color: transparent;
1676    outline-color: transparent;
1677
1678    outline-offset: 0;
1679
1680    // tab sizing
1681    $vpadding: 4px;
1682    $hpadding: 15px;
1683
1684    //FIXME: we get double border in some cases, not considering the broken
1685    //notebook content frame...
1686    &.top, &.bottom { padding: $vpadding $hpadding; }
1687    &.left, &.right { padding: $vpadding $hpadding; }
1688
1689    &.reorderable-page {
1690      &.top, &.bottom {
1691        padding-left: 12px;  // for a nicer close button
1692        padding-right: 12px; // placement
1693      }
1694    }
1695    @each $_tab in (top, bottom, right, left) {
1696      &.reorderable-page.#{$_tab}, &.#{$_tab} {
1697
1698        @if $_tab==top or $_tab==bottom {
1699          padding-#{$_tab}: $vpadding + 2;
1700        }
1701        @else if $_tab==left or $_tab==right {
1702          padding-#{$_tab}: $hpadding + 2;
1703        }
1704
1705        @if $_tab==top { border-radius: 3.5px 2px 0 0; }
1706        @else if $_tab==bottom { border-radius: 0 0 2px 3.5px; }
1707        @else if $_tab==left { border-radius: 3.5px 0 0 3.5px; }
1708        @else if $_tab==right { border-radius: 0 3.5px 3.5px 0; }
1709
1710        border-width: 0;
1711        border-#{$_tab}-width: 2px;
1712        border-color: transparent;
1713        background-color: transparentize($base_color, 1);
1714
1715        &:hover, &.prelight-page {
1716          background-color: transparentize($base_color, 0.5);
1717          box-shadow: inset 0 1px $borders_color,
1718                      inset 0 -1px $borders_color,
1719                      inset 1px 0 $borders_color,
1720                      inset -1px 0 $borders_color;
1721        }
1722        &:active, &.active-page, &.active-page:hover {
1723          background-color: $base_color;
1724
1725          @if $_tab==top {
1726            box-shadow: inset 0 1px $borders_color,
1727                        inset 0 -1px $base_color,
1728                        inset 1px 0 $borders_color,
1729                        inset -1px 0 $borders_color;
1730          }
1731          @else if $_tab==bottom {
1732            box-shadow: inset 0 -1px $base_color,
1733                        inset 0 -1px $borders_color,
1734                        inset 1px 0 $borders_color,
1735                        inset -1px 0 $borders_color;
1736          }
1737          @else if $_tab==left {
1738            box-shadow: inset 0 1px $borders_color,
1739                        inset 0 -1px $borders_color,
1740                        inset 1px 0 $borders_color,
1741                        inset -1px 0 $base_color;
1742          }
1743          @else if $_tab==right {
1744            box-shadow: inset 0 1px $borders_color,
1745                        inset 0 -1px $borders_color,
1746                        inset 1px 0 $base_color,
1747                        inset -1px 0 $borders_color;
1748          }
1749        }
1750      }
1751    }
1752    GtkLabel { //tab text
1753      padding: 0 2px; // needed for a nicer focus ring
1754      color: $insensitive_fg_color;
1755    }
1756    .prelight-page GtkLabel, GtkLabel.prelight-page {
1757      // prelight tab text
1758      color: mix($fg_color, $insensitive_fg_color, 50%);
1759    }
1760    .active-page GtkLabel, GtkLabel.active-page {
1761      // active tab text
1762      color: $fg_color;
1763    }
1764    .button { //tab close button
1765      padding: 0;
1766      @extend %undecorated_button;
1767      color: mix($bg_color, $fg_color, 35%);
1768
1769      &:hover {
1770        color: lighten(red, 15%);
1771      }
1772      &:active {
1773        color: $selected_bg_color;
1774      }
1775      & > GtkImage { // this is a hack which makes tabs grow
1776        padding: 2px;
1777      }
1778    }
1779  }
1780  &.arrow {
1781    color: $insensitive_fg_color;
1782    &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
1783    &:active { color: $fg_color; }
1784    &:insensitive {
1785      color: transparentize($insensitive_fg_color,0.3);
1786    }
1787  }
1788}
1789
1790//
1791// Scrollbars
1792//
1793$_scrollbar_bg_color: darken($base_color, 1%);
1794
1795.scrollbar {
1796  background-clip: padding-box;
1797  background-image: none;
1798  border-style: solid;
1799  -GtkRange-trough-border: 0;
1800  -GtkScrollbar-has-backward-stepper: false;
1801  -GtkScrollbar-has-forward-stepper: false;
1802  -GtkRange-slider-width: 13;
1803  -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
1804                                       // sadly can't be in '.slider'
1805                                       // where it belongs
1806
1807  -GtkRange-stepper-spacing: 0;
1808  -GtkRange-trough-under-steppers: 1;
1809  .button {
1810    border: none;
1811  }
1812  &.trough {
1813    background-color: $_scrollbar_bg_color;
1814    border-left: 1px solid $borders_color;
1815
1816    &.horizontal {
1817      border-left: none;
1818      border-top: 1px solid $borders_color;
1819    }
1820  }
1821  &.slider {
1822    border-radius: 21px 20px 20px 21px;
1823    border: 3px solid transparent; //margin :/
1824    border-left-width: 4px;
1825    background-color: mix($fg_color, $bg_color, 40%);
1826
1827    &.horizontal {
1828      border-radius: 21px 21px 20px 20px;
1829      border-left-width: 3px;
1830      border-top-width: 4px;
1831    }
1832    &:hover {
1833      background-color: mix($fg_color, $bg_color, 25%);
1834    }
1835    &:prelight:active,
1836    &:active {
1837      background-color: $selected_bg_color;
1838    }
1839    &.fine-tune {
1840      border-width: 4px;
1841      &:prelight:active {
1842        background-color: $selected_bg_color;
1843      }
1844    }
1845    &:insensitive {
1846      background-color: transparent;
1847    }
1848  }
1849}
1850
1851.scrollbars-junction,
1852.scrollbars-junction.frame { // the small square between two scrollbars
1853  border-color: transparent;
1854  background-color: $_scrollbar_bg_color;
1855}
1856
1857
1858//
1859// Switches
1860//
1861GtkSwitch {
1862  font: 1;
1863  -GtkSwitch-slider-width: 41;
1864  outline-color: transparent;
1865
1866  &.trough, &.slider {
1867    background-size: 52px 24px;
1868    background-repeat: no-repeat;
1869    background-position: right center;
1870    color: transparent;
1871    border-color: transparent;
1872    border-image: none;
1873    border-style: none;
1874    box-shadow: none;
1875
1876    &:dir(rtl) { background-position: left center; }
1877  }
1878}
1879
1880@each $k,$l in ('',''),
1881               (':active','-active'),
1882               (':insensitive','-insensitive'),
1883               (':active:insensitive','-active-insensitive') {
1884
1885  // load switch troughs from .png files in assets directory
1886
1887  GtkSwitch.trough#{$k} {
1888    background-image: -gtk-scaled(url("assets/switch#{$l}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$asset_suffix}@2.png"));
1889  }
1890
1891  .menu .menuitem:hover GtkSwitch.trough#{$k},
1892  .list-row:selected GtkSwitch.trough#{$k},
1893  GtkInfoBar GtkSwitch.trough#{$k} {
1894    background-image: -gtk-scaled(url("assets/switch#{$l}-selected.png"),url("assets/switch#{$l}-selected@2.png"));
1895  }
1896
1897  .header-bar GtkSwitch.trough#{$k},
1898  .primary-toolbar GtkSwitch.trough#{$k} {
1899    background-image: -gtk-scaled(url("assets/switch#{$l}-header#{$darker_asset_suffix}.png"),url("assets/switch#{$l}-header#{$darker_asset_suffix}@2.png"));
1900  }
1901}
1902
1903//
1904// Check and Radio items *
1905//
1906@each $w,$a in ('check', 'checkbox'),
1907               ('radio','radio') {
1908
1909  //standard checks and radios
1910  @each $s,$as in ('','-unchecked'),
1911                  (':insensitive','-unchecked-insensitive'),
1912                  (':inconsistent', '-mixed'),
1913                  (':inconsistent:insensitive', '-mixed-insensitive'),
1914                  (':checked', '-checked'),
1915                  (':checked:insensitive','-checked-insensitive') {
1916    .#{$w}#{$s} {
1917      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1918                                    url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1919    }
1920
1921    %osd_check_radio {
1922      .#{$w}#{$s} {
1923        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"),
1924                                      url("assets/#{$a}#{$as}-dark@2.png"));
1925      }
1926    }
1927    // the borders of checks and radios are
1928    // too similar in luminosity to the selected background color, hence
1929    // we need special casing.
1930    .menu .menuitem.#{$w}#{$s}:hover,
1931    GtkTreeView.view.#{$w}#{$s}:selected,
1932    .list-row:selected .#{$w}#{$s},
1933    GtkInfoBar .#{$w}#{$s} {
1934      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"),
1935                                    url("assets/#{$a}#{$as}-selected@2.png"));
1936    }
1937  }
1938}
1939
1940// Selectionmode
1941@each $s,$as in ('','-selectionmode'),
1942                  (':checked', '-checked-selectionmode') {
1943  GtkIconView.view.check#{$s},
1944  GtkFlowBox.view.check#{$s} {
1945    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1946                                    url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1947    background-color: transparent;
1948  }
1949}
1950
1951GtkCheckButton.text-button, GtkRadioButton.text-button {
1952  // this is for a nice focus on check and radios text
1953  padding: 1px 2px 4px;
1954  outline-offset: 0;
1955  &:insensitive,
1956  &:insensitive:active,
1957  &:insensitive:inconsistent {
1958    // set insensitive color, which is overriden otherwise
1959    color: $insensitive_fg_color;
1960  }
1961}
1962
1963//
1964// GtkScale
1965//
1966.scale {
1967  -GtkScale-slider-length: 15;
1968  -GtkRange-slider-width: 15;
1969  -GtkRange-trough-border: 0;
1970  outline-offset: -1px;
1971  outline-radius: 2px;
1972
1973  &.trough { margin: 5px; }
1974  &.fine-tune {
1975    &.trough { border-radius: 5px; margin: 3px; }
1976  }
1977  &.slider {
1978    $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
1979
1980    background-clip: border-box;
1981    background-image: linear-gradient(to bottom, $button_bg);
1982    border: 1px solid $_slider_border;
1983    border-radius: 50%;
1984    box-shadow: none;
1985
1986    &:hover {
1987    background-image: linear-gradient(to bottom, lighten($button_bg, 5%));
1988    border-color: $_slider_border;
1989    }
1990    &:insensitive {
1991      background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
1992      border-color: transparentize($_slider_border, 0.2);
1993    }
1994    &:active {
1995      background-image: linear-gradient(to bottom, $selected_bg_color);
1996      border-color: $selected_bg_color;
1997    }
1998    //OSD sliders
1999    .osd & {
2000      background-image: linear-gradient(to bottom, $osd_bg_color);
2001      border-color: $selected_bg_color;
2002
2003      &:hover { background-image: linear-gradient(to bottom, $selected_bg_color); }
2004      &:active {
2005        background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
2006        border-color: darken($selected_bg_color, 10%);
2007      }
2008    }
2009    //selected list-row and infobar sliders
2010    .menu .menuitem:hover &,
2011    .list-row:selected &,
2012    GtkInfoBar & {
2013      background-image: linear-gradient(to bottom, $selected_fg_color);
2014      border-color: $selected_fg_color;
2015
2016      &:hover {
2017        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%));
2018        border-color: mix($selected_fg_color, $selected_bg_color, 85%);
2019      }
2020      &:active {
2021        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%));
2022        border-color: mix($selected_fg_color, $selected_bg_color, 50%);
2023      }
2024      &:insensitive{
2025        background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%));
2026        border-color: mix($selected_fg_color, $selected_bg_color, 55%);
2027      }
2028    }
2029  }
2030  &.trough {
2031
2032    $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
2033
2034    border: none;
2035    border-radius: 2.5px;
2036    background-image: linear-gradient(to bottom, $_scale_trough_bg);
2037    &.highlight {
2038      background-image: linear-gradient(to bottom, $selected_bg_color);
2039
2040      &:insensitive {
2041        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45));
2042      }
2043    }
2044    &:insensitive {
2045      background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45));
2046    }
2047
2048    //OSD troughs
2049    .osd & {
2050      background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%));
2051      outline-color: transparentize($osd_fg_color, 0.8);
2052      &.highlight {
2053        background-image: none;
2054        background-image: linear-gradient(to bottom, $selected_bg_color);
2055      }
2056      &:insensitive {  }
2057    }
2058    // troughs in selected list-rows and infobars
2059    .menu .menuitem:hover &,
2060    .list-row:selected &,
2061    GtkInfoBar & {
2062      background-image: linear-gradient(to bottom, transparentize(black, 0.8));
2063
2064      &.highlight {
2065        background-image: linear-gradient(to bottom, $selected_fg_color);
2066
2067        &:insensitive { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); }
2068      }
2069      &:insensitive { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); }
2070    }
2071  }
2072}
2073
2074//
2075// Progress bars
2076//
2077GtkProgressBar {
2078  padding: 0;
2079  font-size: smaller;
2080  color: transparentize($fg_color, 0.3);
2081
2082  &.osd {
2083    -GtkProgressBar-xspacing: 0;
2084    -GtkProgressBar-yspacing: 0;
2085    -GtkProgressBar-min-horizontal-bar-height: 3;
2086  }
2087}
2088
2089// moving bit
2090.progressbar {
2091  background-color: $selected_bg_color;
2092  border: none;
2093  border-radius: 3px;
2094  box-shadow: none; //needed for clipping
2095  &.left.right {
2096
2097  }
2098  &.osd {
2099    background-color: $selected_bg_color;
2100  }
2101  .list-row:selected &,
2102  GtkInfoBar & { background-color: $selected_fg_color; }
2103}
2104
2105.osd .scale.progressbar {
2106  background-color: $selected_bg_color;
2107}
2108
2109// background
2110GtkProgressBar.trough {
2111  border: none;
2112  border-radius: 3px;
2113  background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
2114
2115  &.osd {
2116    border-style: none;
2117    background-color: transparent;
2118    box-shadow: none;
2119  }
2120  .list-row:selected &,
2121  GtkInfoBar & { background-color: transparentize(black, 0.8); }
2122}
2123
2124//
2125// Level Bar
2126//
2127GtkLevelBar {
2128  -GtkLevelBar-min-block-width: 34;
2129  -GtkLevelBar-min-block-height: 3;
2130
2131  &.vertical {
2132    -GtkLevelBar-min-block-width: 3;
2133    -GtkLevelBar-min-block-height: 34;
2134  }
2135}
2136
2137.level-bar {
2138  &.trough {
2139    @extend GtkProgressBar.trough;
2140    padding: 3px;
2141    border-radius: 4px;
2142  }
2143  &.fill-block {
2144    // FIXME: it would be nice to set make fill blocks bigger, but we'd need
2145    // :nth-child working on discrete indicators
2146    border: 1px solid $selected_bg_color;
2147    background-color: $selected_bg_color;
2148    border-radius: 2px;
2149
2150    &.indicator-discrete {
2151      &.horizontal { margin: 0 1px; }
2152      &.vertical { margin: 1px 0; }
2153    }
2154    &.level-high {
2155      border-color: $success_color;
2156      background-color: $success_color;
2157    }
2158    &.level-low {
2159      border-color: $warning_color;
2160      background-color: $warning_color;
2161    }
2162    &.empty-fill-block {
2163      background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
2164      border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
2165    }
2166  }
2167}
2168
2169
2170//
2171// Frames
2172//
2173.frame {
2174  border: 1px solid $borders_color;
2175  &.flat { border-style: none; }
2176  padding: 0;
2177  &.action-bar {
2178    padding: 6px;
2179    border-width: 1px 0 0;
2180  }
2181}
2182
2183GtkScrolledWindow {
2184  GtkViewport.frame { // avoid double borders when viewport inside
2185                      // scrolled window
2186    border-style: none;
2187  }
2188}
2189
2190//vbox and hbox separators
2191.separator {
2192  // always disable separators
2193  // -GtkWidget-wide-separators: true;
2194  color: transparentize(black, 0.9);
2195
2196  // Font and File button separators
2197  GtkFileChooserButton &,
2198  GtkFontButton &,
2199  GtkFileChooserButton &.vertical,
2200  GtkFontButton &.vertical {
2201    // always disable separators
2202    -GtkWidget-wide-separators: true;
2203  }
2204}
2205
2206//
2207// Lists
2208//
2209.list, .list-row {
2210  background-color: $base_color;
2211  border-color: $borders_color;
2212}
2213
2214.list-row,
2215.grid-child {
2216  padding: 2px;
2217}
2218
2219.list-row.button {
2220  @extend %undecorated_button;
2221  background-color: transparentize(black, 1); // for the transition
2222  border-style: none; // I need no borders here
2223  border-radius: 0;   // and no rounded corners
2224  box-shadow: none;   // and no box-shadow
2225  &:hover {
2226    background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97));
2227  }
2228  &:active {
2229    color: $fg_color;
2230  }
2231  &:selected {
2232    &:active { color: $selected_fg_color; }
2233    &:hover { background-color: mix(black, $selected_bg_color, 10%); }
2234    &:insensitive {
2235      color: transparentize($selected_fg_color, 0.3);
2236      background-color: transparentize($selected_bg_color, 0.3);
2237      GtkLabel { color: inherit; }
2238    }
2239  }
2240}
2241
2242.list-row:selected {
2243  @extend %selected_items;
2244  .button { @extend %selected-button }
2245}
2246
2247// transition
2248.list-row, list-row.button {
2249  transition: all 300ms $ease-out-quad;
2250  &:hover { transition: none; }
2251}
2252
2253//
2254// App Notifications
2255//
2256.app-notification,
2257.app-notification.frame {
2258  padding: 10px;
2259  color: $dark_sidebar_fg;
2260  background-color: $dark_sidebar_bg;
2261  background-clip: border-box;
2262  border-radius: 0 0 2px 2px;
2263  border-width: 0 1px 1px 1px;
2264  border-style: solid;
2265  border-color: darken($dark_sidebar_bg, 10%);
2266
2267  .button {
2268    @include button(osd);
2269    &.flat {
2270      @extend %undecorated_button;
2271      border-color: transparentize($selected_bg_color, 1);
2272      &:insensitive { @extend %undecorated_button; }
2273    }
2274    &:hover { @include button(osd-hover); }
2275    &:active, &:checked { @include button(osd-active); background-clip: padding-box; }
2276    &:insensitive { @include button(osd-insensitive);
2277    }
2278  }
2279}
2280
2281//
2282// Expanders
2283//
2284.expander {
2285  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2286  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2287  &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
2288  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2289}
2290
2291//
2292// Calendar
2293//
2294GtkCalendar {
2295  color: $fg_color;
2296  border: 1px solid $borders_color;
2297  border-radius: 3px;
2298  padding: 2px;
2299
2300  &:selected {
2301    background-color: $selected_bg_color;
2302    color: $selected_fg_color;
2303    border-radius: 1.5px;
2304  }
2305  &.header {
2306    color: $fg_color;
2307    border: none;
2308    border-radius: 0;
2309  }
2310  &.button, &.button:focus {
2311    color: transparentize($fg_color,0.55);
2312    @include button(undecorated);
2313
2314    &:hover {
2315      color: $fg_color;
2316    }
2317    &:insensitive {
2318      color: $insensitive_fg_color;
2319      background-color: transparent;
2320      background-image: none;
2321    }
2322  }
2323  &.highlight { color: gtkalpha(currentColor,0.55); }
2324}
2325
2326//
2327// Dialogs
2328//
2329.message-dialog .dialog-action-area .button {
2330  padding: 8px;
2331}
2332
2333.message-dialog { // Message Dialog styling
2334  -GtkDialog-button-spacing: 0;
2335
2336  .titlebar { background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%) }
2337
2338  &.csd { // rounded bottom border styling for csd version
2339    &.background {
2340      border-bottom-left-radius: 3px;
2341      border-bottom-right-radius: 3px;
2342      border: none;
2343    }
2344    .dialog-action-area .button {
2345      padding: 8px;
2346      border-radius: 0;
2347
2348      @extend %middle_button;
2349
2350      &:hover, &:active, &:insensitive {
2351        @extend %middle_button;
2352      }
2353
2354      &:first-child{ @extend %first_button; }
2355      &:last-child { @extend %last_button; }
2356    }
2357    %middle_button {
2358      border-right-style: none;
2359      border-bottom-style: none;
2360    }
2361    %last_button {
2362      border-bottom-right-radius: 3px;
2363    }
2364    %first_button {
2365      border-left-style: none;
2366      border-bottom-left-radius: 3px;
2367    }
2368  }
2369}
2370
2371GtkFileChooserDialog {
2372  .search-bar {
2373    background-color: $bg_color;
2374    border-color: $borders_color;
2375    box-shadow: none;
2376  }
2377  .dialog-action-box {
2378    border-top: 1px solid $borders_color;
2379  }
2380}
2381
2382//
2383// Sidebar
2384//
2385.sidebar {
2386  border: none;
2387  background-color: lighten($bg_color, 2%);
2388
2389  .scrollbar {
2390    &.trough {
2391      background-color: transparent;
2392      border-width: 2px;
2393      border-color: transparent;
2394    }
2395  }
2396  &:selected {
2397    background-color: $selected_bg_color;
2398  }
2399}
2400
2401// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
2402GtkPlacesSidebar.sidebar .view {
2403
2404  color: $fg_color;
2405  background-color: transparent;
2406
2407  &:selected {
2408    color: $selected_fg_color;
2409    background-color: $selected_bg_color;
2410  }
2411
2412  &.separator { @extend .separator; }
2413}
2414
2415.sidebar-item {
2416  padding: 10px 4px;
2417  > GtkLabel {
2418    padding-left: 6px;
2419    padding-right: 6px;
2420  }
2421  &.needs-attention > GtkLabel {
2422    @extend %needs_attention;
2423    background-size: 6px 6px, 0 0;
2424  }
2425}
2426
2427//
2428// Paned
2429//
2430GtkPaned {
2431  // This is actually the invisible area of the paned separator, not a margin...
2432  margin: 0 8px 8px 0; //drag area of the separator
2433  &:dir(rtl) {
2434    margin-right: 0;
2435    margin-left: 8px;
2436  }
2437}
2438
2439.pane-separator {
2440  //FIXME abusing a background-image to get rid of the handle decoration
2441  //I'd like something better...
2442  background-image: linear-gradient(to bottom, $borders_color);
2443}
2444
2445//
2446// GtkInfoBar
2447//
2448GtkInfoBar {
2449  border-style: none;
2450
2451  .button { @extend %selected-button }
2452}
2453
2454.info,
2455.question,
2456.warning,
2457.error,
2458GtkInfoBar {
2459  background-color: $selected_bg_color;
2460  color: $selected_fg_color;
2461}
2462
2463
2464//
2465// Buttons on selected backgrounds
2466//
2467%selected-button {
2468  color: $selected_fg_color;
2469  outline-color: transparentize($selected_fg_color, 0.7);
2470  background-color: transparentize($selected_fg_color, 1);
2471  border-color: transparentize($selected_fg_color, 0.5);
2472
2473  &.flat {
2474    @include button(undecorated);
2475    color: $selected_fg_color;
2476    background-color: transparentize($selected_fg_color, 1);
2477  }
2478  &:hover {
2479    color: $selected_fg_color;
2480    outline-color: transparentize($selected_fg_color, 0.7);
2481    background-color: transparentize($selected_fg_color, 0.8);
2482    border-color: transparentize($selected_fg_color, 0.2);
2483  }
2484  &:active, &:active:hover, &:checked {
2485    color: $selected_bg_color;
2486    outline-color: transparentize($selected_bg_color, 0.7);
2487    background-color: $selected_fg_color;
2488    border-color: $selected_fg_color;
2489  }
2490  &:insensitive {
2491    color: transparentize($selected_fg_color, 0.6);
2492    background-color: transparentize($selected_fg_color, 1);
2493    border-color: transparentize($selected_fg_color, 0.8);
2494
2495    &:active, &:checked {
2496      color: transparentize($selected_bg_color, 0.6);
2497      background-color: transparentize($selected_fg_color, 0.8);
2498      border-color: transparentize($selected_fg_color, 0.8);
2499    }
2500  }
2501}
2502
2503//
2504// Tooltips
2505//
2506.tooltip {
2507  &.background {
2508    // background-color needs to be set this way otherwise it gets drawn twice
2509    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2510    background-color: lighten($osd_bg_color, 10%);
2511    background-clip: padding-box;
2512  }
2513
2514  color: $osd_fg_color;
2515  border-radius: 2px;
2516
2517  &.window-frame.csd {
2518    background-color: transparent;
2519  }
2520}
2521
2522.tooltip * { //Yeah this is ugly
2523  padding: 4px;
2524  background-color: transparent;
2525  color: inherit; // just to be sure
2526}
2527
2528//
2529// Color Chooser
2530//
2531
2532GtkColorSwatch {
2533  border: none;
2534  box-shadow: inset 0 1px 1px transparentize(black, 0.6);
2535
2536  &.color-light {
2537    &:hover {
2538      background-image: linear-gradient(to bottom,
2539                                        transparentize(white, 0.6));
2540    }
2541  }
2542  &.color-dark {
2543    &:hover {
2544       background-image: linear-gradient(to bottom,
2545                                        transparentize(white, 0.8));
2546    }
2547  }
2548
2549  &:hover {
2550   border-color: transparentize(black, 0.5);
2551  }
2552
2553  &.top {
2554    border-top-left-radius: 3px;
2555    border-top-right-radius: 3px;
2556  }
2557  &.bottom {
2558    border-bottom-left-radius: 3px;
2559    border-bottom-right-radius: 3px;
2560  }
2561  &.left, &:first-child {
2562    border-top-left-radius: 3px;
2563    border-bottom-left-radius: 3px;
2564  }
2565  &.right, &:last-child {
2566    border-top-right-radius: 3px;
2567    border-bottom-right-radius: 3px;
2568  }
2569  &:only-child {
2570    border-radius: 3px;
2571  }
2572  &.color-active-badge {
2573    border-width: 2px;
2574    &:hover { background-image: none; }
2575    &.color-light, &.color-light:hover {
2576      color: transparentize(black,0.7);
2577      border-color: transparentize(black,0.7);
2578    }
2579    &.color-dark, &.color-dark:hover {
2580      color: transparentize(white,0.5);
2581      border-color: transparentize(white,0.5);
2582    }
2583  }
2584}
2585GtkColorChooserWidget #add-color-button {
2586  border-color: mix($borders_color,$bg_color,50%);
2587  background-color: mix($borders_color,$bg_color,50%);
2588  color: $bg_color;
2589  box-shadow: none;
2590  &:hover {
2591    border-color: $borders_color;
2592    background-color: $borders_color;
2593  }
2594}
2595
2596GtkColorButton.button {
2597  padding: 5px; // Uniform padding on the GtkColorButton
2598
2599  GtkColorSwatch { border-radius: 0; }
2600}
2601
2602//
2603// Misc
2604//
2605.scale-popup .button { // +/- buttons on GtkVolumeButton popup
2606  padding: 6px;
2607  &:hover {
2608    @include button(hover);
2609  }
2610}
2611
2612GtkVolumeButton.button { padding: 8px; }
2613
2614// Decouple the font of context menus from their entry/textview
2615.touch-selection,
2616.context-menu { font: initial;}
2617
2618.monospace { font: Monospace; }
2619
2620//
2621// Overshoot
2622//
2623// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2624// This draws a box on top of the content, the size changes programmatically.
2625.overshoot {
2626  &.top { @include overshoot(top); }
2627  &.bottom { @include overshoot(bottom); }
2628  &.left { @include overshoot(left); }
2629  &.right { @include overshoot(right); }
2630}
2631
2632//
2633// Undershoot
2634//
2635// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2636.undershoot {
2637  &.top { @include undershoot(top); }
2638  &.bottom { @include undershoot(bottom); }
2639  &.left { @include undershoot(left); }
2640  &.right { @include undershoot(right); }
2641}
2642
2643//
2644// Window Decorations
2645//
2646
2647.window-frame {
2648  border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0);
2649  border-width: 0px;
2650
2651  $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45));
2652
2653  box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
2654              0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
2655
2656  // this is used for the resize cursor area
2657  margin: 10px;
2658
2659  &:backdrop {
2660    box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border),
2661                0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
2662  }
2663  &.tiled {
2664    border-radius: 0;
2665  }
2666  &.popup {
2667    box-shadow: none;
2668    border-radius: 0;
2669  }
2670  &.csd {
2671    &.popup, &.menu {
2672      border-radius: 2px;
2673      box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)),
2674                  0 0 0 1px if($variant == 'light', $_wm_border, darken($bg_color, 10%));
2675    }
2676    &.tooltip {
2677      border-radius: 2px;
2678      box-shadow: 0 1px 3px 1px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.3));
2679    }
2680    &.message-dialog { border-radius: 3px; }
2681  }
2682}
2683
2684//
2685// Titlebuttons
2686//
2687
2688.header-bar, .titlebar,
2689.header-bar.selection-mode, .titlebar.selection-mode {
2690
2691  &.default-decoration .button.titlebutton { // no vertical padding for ssd buttons
2692    padding-top: 0px;                        // already handled by the titlebar-padding
2693    padding-bottom: 0px;
2694  }
2695
2696  .button.titlebutton {
2697    @extend .image-button;
2698    padding: 8px 4px;
2699
2700    @include button(undecorated);
2701    background-color: transparentize($header_bg, 1);
2702    border-color: transparentize($header_bg, 1);
2703
2704    color: transparent;
2705    background-position: center;
2706    background-repeat: no-repeat;
2707
2708    &:backdrop { opacity: 1; }
2709  }
2710
2711  // Minimize
2712
2713  .right .button.titlebutton:nth-last-child(3),
2714  .right:dir(rtl) .button.titlebutton:nth-child(3),
2715  .left .button.titlebutton:nth-child(3),
2716  .left:dir(rtl) .button.titlebutton:nth-last-child(3) {
2717    background-image: -gtk-scaled(url('assets/titlebutton-minimize#{$darker_asset_suffix}.png'),url('assets/titlebutton-minimize#{$darker_asset_suffix}@2.png'));
2718
2719    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-minimize-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-minimize-hover#{$darker_asset_suffix}@2.png')); }
2720    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-minimize-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-minimize-active#{$darker_asset_suffix}@2.png')); }
2721    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-minimize-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-minimize-backdrop#{$darker_asset_suffix}@2.png')); }
2722}
2723
2724  // Maximize
2725
2726  .right .button.titlebutton:nth-last-child(2),
2727  .right:dir(rtl) .button.titlebutton:nth-child(2),
2728  .left .button.titlebutton:nth-child(2),
2729  .left:dir(rtl) .button.titlebutton:nth-last-child(2) {
2730    background-image: -gtk-scaled(url('assets/titlebutton-maximize#{$darker_asset_suffix}.png'),url('assets/titlebutton-maximize#{$darker_asset_suffix}@2.png'));
2731
2732    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-maximize-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-maximize-hover#{$darker_asset_suffix}@2.png')); }
2733    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-maximize-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-maximize-active#{$darker_asset_suffix}@2.png')); }
2734    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-maximize-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-maximize-backdrop#{$darker_asset_suffix}@2.png')); }
2735}
2736
2737  // Close
2738
2739  .right .button.titlebutton:last-child,
2740  .right:dir(rtl) .button.titlebutton:first-child,
2741  .left .button.titlebutton:first-child,
2742  .left:dir(rtl) .button.titlebutton:last-child {
2743    background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png'));
2744
2745    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); }
2746    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); }
2747    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); }
2748  }
2749}
2750
2751// Fallback menubutton
2752.header-bar, .titlebar {
2753  .left GtkMenuButton.button.titlebutton:first-child,
2754  .left:dir(rtl) GtkMenuButton.button.titlebutton:last-child,
2755  &.selection-mode .left GtkMenuButton.button.titlebutton:first-child,
2756  &.selection-mode .left:dir(rtl) GtkMenuButton.button.titlebutton:last-child {
2757
2758    padding: 4px 6px 4px 6px;
2759    color: $header_fg;
2760
2761    &, &:hover, &:active:hover,
2762    &:backdrop, &:backdrop:hover {
2763      background-image: none;
2764      background-color: transparentize($header_bg, 1);
2765      border-color: transparentize($header_bg, 1);
2766    }
2767
2768    &:hover, &:backdrop:hover { @include button(header-hover); }
2769    &:active:hover, &:checked { @include button(header-active); }
2770  }
2771}
2772
2773// catch all extend
2774%selected_items {
2775  background-image: none;
2776  background-color: $selected_bg_color;
2777  color: $selected_fg_color;
2778  outline-color: transparentize($selected_fg_color, 0.7);
2779}
Note: See TracBrowser for help on using the repository browser.