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

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

updating theme

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