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

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

updating theme

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