themes/whitey/gtk-3.22/_common.scss (view raw)
1//
2// Suffix
3//
4
5$asset_suffix: if($variant == 'dark', '-dark', '');
6
7
8//
9// Background sizing
10//
11
12$text_button_large: rem(213px) * 1 / 0.8 rem(213px) * 1 / 0.8, auto;
13$text_button_small: rem(106px) * 1 / 0.8 rem(106px) * 1 / 0.8, auto;
14$image_button_large: rem(40px) * 1 / 0.8 rem(40px) * 1 / 0.8, auto;
15$image_button_small: rem(26px) * 1 / 0.8 rem(26px) * 1 / 0.8, auto;
16$attention: rem(5.3px) rem(5.3px);
17$scale: 80%;
18$separator_narrow: 1px 1px;
19$separator_wide: 1px 1px, 1px 1px;
20
21
22//
23// transitions
24//
25
26%transition {
27 // do not include sizing factors and text colors/shadows
28 transition-property: opacity,
29 border-color,
30 border-image,
31 background-color,
32 background-image,
33 box-shadow,
34 icon-shadow;
35 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
36 transition-duration: 0.2s;
37}
38
39
40/*****************
41 * Common States *
42 *****************/
43
44* {
45 @extend %transition; // global transition setting
46
47 padding: 0;
48 background-clip: padding-box;
49
50 -GtkToolButton-icon-spacing: 4;
51 -GtkTextView-error-underline-color: $error_color;
52
53 // The size for scrollbars. The slider is 2px smaller, but we keep it
54 // up so that the whole area is sensitive to button presses for the
55 // slider. The stepper button is larger in both directions, the slider
56 // only in the width
57
58 -GtkScrolledWindow-scrollbar-spacing: 0;
59
60 -GtkToolItemGroup-expander-size: 11;
61
62 -GtkWidget-text-handle-width: 16;
63 -GtkWidget-text-handle-height: 16;
64
65 -GtkDialog-button-spacing: 4;
66 -GtkDialog-action-area-border: 0;
67
68 // We use the outline properties to signal the focus properties
69 // to the adwaita engine: using real CSS properties is faster,
70 // and we don't use any outlines for now.
71
72 outline-style: solid;
73 outline-width: 2px;
74 outline-color: $track_color;
75 outline-offset: rem(-4px);
76 -gtk-outline-radius: 2px;
77
78 -gtk-secondary-caret-color: $selected_bg_color;
79
80 // disable drop-shadows as default
81 text-shadow: none;
82 -gtk-icon-shadow: none;
83}
84
85
86/***************
87 * Base States *
88 ***************/
89
90.background {
91 background-color: $bg_color;
92 color: $fg_color;
93}
94
95// These wildcard seems unavoidable, need to investigate.
96// Wildcards are bad and troublesome, use them with care,
97// or better, just don't.
98// Everytime a wildcard is used a kitten dies, painfully.
99
100*:disabled { -gtk-icon-effect: dim; }
101
102// for backdrop, tone down element surfaces with transparentize
103%fade_effect {
104 *:backdrop {
105 opacity: 0.75;
106 transition: 0.2s;
107 }
108}
109
110.gtkstyle-fallback {
111 background-color: $bg_color;
112 color: $fg_color;
113 &:hover {
114 background-color: darken($bg_color, 5%);
115 color: $fg_color;
116 }
117 &:active {
118 background-color: darken($bg_color, 10%);
119 color: $fg_color;
120 }
121 &:disabled {
122 background-color: $bg_color;
123 color: $insensitive_fg_color;
124 }
125 &:selected {
126 background-color: $selected_bg_color;
127 color: $selected_fg_color;
128 }
129}
130
131.view,
132%view {
133 @extend row.activatable;
134 background-color: $base_color;
135 color: $fg_color;
136 &:hover,
137 &:active,
138 &:selected {
139 border-radius: 2px;
140 -gtk-outline-radius: 2px;
141 }
142 &:disabled { color: $insensitive_fg_color; }
143 &:backdrop {
144 }
145 &:selected,
146 &:selected:focus { @extend %selected_items; }
147}
148
149.view,
150textview {
151 text {
152 @extend %view;
153
154 selection {
155 &, &:focus { @extend %selected_items; }
156 }
157 }
158}
159
160textview border {
161 background-color: $bg_color;
162}
163
164iconview { @extend .view; }
165
166rubberband {
167 border: 1px solid $secondary_selected_bg_color;
168 background-color: gtkopacity($secondary_selected_bg_color, 0.2);
169}
170
171flowbox {
172 rubberband { @extend rubberband; }
173
174 flowboxchild {
175 padding: rem(2px);
176 border-radius: 2px;
177 -gtk-outline-radius: 2px;
178 &:selected {
179 @extend %selected_items;
180 outline-offset: rem(-2px);
181 }
182 }
183}
184
185label {
186 caret-color: currentColor; // this shouldn't be needed.
187
188 &.separator {
189 @extend .dim-label;
190 color: transparent;
191 }
192
193 &:selected,
194 row:selected & { @extend %nobg_selected_items; }
195
196 selection,
197 selection:focus { @extend %selected_items; }
198
199 &:disabled {
200 color: $insensitive_fg_color;
201
202 selection { @extend %selected_items:disabled; }
203 }
204
205 // always use dark foreground in Gnome-Software
206 &.kudo-label {
207 color: $fixed_fg_color;
208 }
209}
210
211.dim-label {
212 opacity: 0.55;
213}
214
215assistant {
216 // sidebar styling
217 .sidebar {
218 padding: rem(6.7px) 0;
219 background-color: $secondary_dark_color;
220 &:dir(ltr) { border-right: 1px solid $borders_color; }
221 &:dir(rtl) { border-left: 1px solid $borders_color; }
222 }
223
224 &.csd .sidebar { border-top-style: none; }
225
226 .sidebar label {
227 padding: rem(5.3px) rem(8px) rem(6.7px);
228 color: $secondary_fg_color;
229 font-weight: 500;
230 &.highlight { color: $selected_bg_color; }
231 }
232
233 // header-bar styling
234 headerbar {
235 // apply suggested-action button for "Next" and "Back"
236 // last -> "cancel", nth -> "Next" and "Back", that's weird.
237 button.flat:not(:last-child) {
238 @include button(normal);
239 background-color: $suggested_color;
240 color: $secondary_selected_fg_color;
241 &:hover {
242 @include button(hover);
243 color: $selected_fg_color;
244 }
245 &:active {
246 @include button(active);
247 color: $selected_fg_color;
248 background-color: $selected_bg_color;
249 }
250 &:checked {
251 @include button(checked);
252 background-color: $suggested_color;
253 color: $inverted_fg_color;
254 }
255 &:disabled { @include button(insensitive); }
256 }
257 }
258}
259
260// button box is always shown with flat-buttons
261buttonbox {
262 &, &.dialog-action-area {
263 button {
264 @include button(flat-normal);
265 color: $secondary_accent_color;
266 font-weight: 700;
267 &:hover {
268 @include button(flat-hover);
269 color: $accent_color;
270 }
271 &:active {
272 @include button(flat-active);
273 color: $accent_color;
274 }
275 &:disabled { @include button(flat-insensitive); }
276 &:checked {
277 @include button(flat-checked);
278 color: $accent_color;
279 }
280 &:checked:disabled {
281 @include button(flat-checked-insensitive);
282 color: gtkopacity($accent_color, 0.4);
283 }
284 }
285 }
286}
287
288%osd, .osd { opacity: 0.9; }
289
290
291/*********************
292 * Spinner Animation *
293 *********************/
294
295@keyframes colorful_bar {
296 0% {
297 -gtk-icon-source: url("assets/bar-red.svg");
298 -gtk-icon-transform: scale(0, 1.0);
299 }
300 24.9% {
301 -gtk-icon-source: url("assets/bar-red.svg");
302 -gtk-icon-transform: scale(1.0, 1.0);
303 }
304 25% {
305 -gtk-icon-source: url("assets/bar-yellow.svg");
306 -gtk-icon-transform: scale(1.0, 1.0);
307 }
308 49.9% {
309 -gtk-icon-source: url("assets/bar-yellow.svg");
310 -gtk-icon-transform: scale(0, 1.0);
311 }
312 50% {
313 -gtk-icon-source: url("assets/bar-green.svg");
314 -gtk-icon-transform: scale(0, 1.0);
315 }
316 74.9% {
317 -gtk-icon-source: url("assets/bar-green.svg");
318 -gtk-icon-transform: scale(1.0, 1.0);
319 }
320 75% {
321 -gtk-icon-source: url("assets/bar-blue.svg");
322 -gtk-icon-transform: scale(1.0, 1.0);
323 }
324 99.9% {
325 -gtk-icon-source: url("assets/bar-blue.svg");
326 -gtk-icon-transform: scale(0, 1.0);
327 }
328 100% {
329 -gtk-icon-source: url("assets/bar-red.svg");
330 -gtk-icon-transform: scale(0, 1.0);
331 }
332}
333
334spinner {
335 min-height: rem(16px);
336 min-width: rem(16px);
337 // FIXME: workaround for 3.20.1. Needs vertical padding more than 4px?
338 padding: rem(5.3px) 0 rem(5.3px);
339 margin: 0;
340 background: none;
341 opacity: 0; // non spinning spinner makes no sense
342 -gtk-icon-source: url("assets/bar-red.svg");
343 &:checked {
344 opacity: 1.0;
345 animation: colorful_bar 2s linear infinite;
346 &:disabled { opacity: 0.4; }
347 &:backdrop { opacity: 1.0; }
348 }
349 &:backdrop { opacity: 0; }
350}
351
352
353/****************
354 * Text Entries *
355 ****************/
356
357entry {
358 min-height: rem(13.3px);
359 min-width: rem(33.3px);
360 padding: rem(9.3px) rem(8px) rem(10.7px);
361 @include entry(normal);
362
363 &:focus { @include entry(focus); }
364 &:disabled { @include entry(insensitive); }
365
366 &.flat {
367 border-radius: 0;
368 @include entry(flat-normal);
369 &:focus { @include entry(flat-focus); }
370 &:disabled { @include entry(flat-insensitive); }
371 }
372
373 selection {
374 &, &:focus { @extend %selected_items; }
375 }
376
377 image { // icons inside the entry
378 padding-left: rem(4px);
379 padding-right: rem(4px);
380 }
381
382 progress { @extend %entry_progressbar; }
383
384 .linked > &:not(.flat),
385 .linked.vertical > &:not(.flat) {
386 @extend entry.flat;
387 border-radius: 0;
388 -gtk-outline-radius: 0;
389 }
390
391 // entry error, warning and missing style
392 @each $e_type, $e_color in (error, $error_color),
393 (warning, $warning_color),
394 (search-missing, $error_color) {
395 &.#{$e_type} {
396 @include entry(normal, $e_color);
397 &:focus { @include entry(focus, $e_color); }
398 &:disabled { @include entry(insensitive, $e_color); }
399 &.flat {
400 @include entry(flat-normal, $e_color);
401 &:focus { @include entry(flat-focus, $e_color); }
402 &:disabled { @include entry(flat-insensitive, $e_color); }
403 }
404 }
405 }
406
407 & image { // entry icons colors
408 &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
409 &:active { color: $selected_bg_color; }
410 &:disabled { color: gtkalpha(currentColor, 0.55); }
411 }
412
413 &:drop(active) {
414 &, &:focus {
415 border-color: $drop_target_color;
416 box-shadow: inset 0 0 0 1px $drop_target_color;
417 }
418 }
419
420 treeview & { // reset styling inside tree-view
421 &, &.flat:focus {
422 padding: 1px;
423 border-radius: 0;
424 border-image: none;
425 background-color: $base_color;
426 color: $fg_color;
427 box-shadow: none;
428 transition-property: color,
429 background;
430
431 &:selected { @extend %selected_items; }
432 }
433 }
434
435 .osd & {
436 }
437}
438
439
440/***********
441 * Buttons *
442 ***********/
443
444// stuff for .needs-attention
445@keyframes needs_attention {
446 from {
447 background-image: -gtk-gradient(radial,
448 center center, 0,
449 center center, 0.001,
450 to($selected_bg_color),
451 to(transparent));
452 }
453 to {
454 background-image: -gtk-gradient(radial,
455 center center, 0,
456 center center, 0.5,
457 to($selected_bg_color),
458 to(transparent));
459 }
460}
461
462button {
463 min-height: rem(13.3px);
464 min-width: rem(33.3px);
465 padding: rem(9.3px) rem(13.3px) rem(10.7px);
466 border-radius: 2px;
467 -gtk-outline-radius: 2px;
468 background-repeat: no-repeat;
469 background-position: center, center;
470 background-size: $text_button_small;
471 font-weight: 500;
472 @include button(normal);
473 &:hover { @include button(hover); }
474 &:active { @include button(active); }
475 &:disabled { @include button(insensitive); }
476 &:checked { @include button(checked); }
477 &:checked:disabled { @include button(checked-insensitive); }
478 &.flat {
479 @include button(flat-normal);
480 &:hover { @include button(flat-hover); }
481 &:active { @include button(flat-active); }
482 &:disabled { @include button(flat-insensitive); }
483 &:checked { @include button(flat-checked); }
484 &:checked:disabled { @include button(flat-checked-insensitive); }
485 .linked > & {
486 border-radius: 2px;
487 -gtk-outline-radius: 2px;
488 &.image-button {
489 border-radius: 100px;
490 -gtk-outline-radius: 100px;
491 }
492 }
493 }
494
495 // big standalone buttons like in Documents pager
496 &.osd {
497 &.image-button {
498 @extend button.flat;
499 @extend %image_button;
500 padding: rem(17.3px);
501 background-color: $inverted_dark_color;
502 background-size: $image_button_large;
503 &:not(:active):not(:disabled):not(hover) {
504 color: $secondary_accent_color;
505 }
506 &:hover {
507 color: $accent_color;
508 background-color: gtkopacity($inverted_dark_color, 0.7);
509 background-image: linear-gradient(to bottom, $track_color, $track_color);
510 }
511 &:active {
512 color: $accent_color;
513 background-color: gtkopacity($inverted_dark_color, 0.7);
514 background-image: linear-gradient(to bottom, $accent_fill_color, $accent_fill_color);
515 }
516 }
517 &:disabled { opacity: 0; }
518 }
519
520 // overlay / OSD style
521 .osd & {
522 }
523
524 // Suggested and Destructive Action buttons
525 @each $b_type, $b_color in (suggested-action, $suggested_color),
526 (destructive-action, $destructive_color) {
527 &.#{$b_type} {
528 background-color: $b_color;
529 background-size: $text_button_small;
530 color: $selected_fg_color;
531 &:hover {
532 @include button(hover);
533 background-color: $b_color;
534 color: $selected_fg_color;
535 }
536 &:active {
537 @include button(active);
538 background-color: $selected_bg_color;
539 color: $selected_fg_color;
540 }
541 &:checked { background-color: mix($selected_fg_color, $b_color, 20%); }
542 &:disabled {
543 @include button(insensitive, $b_color,
544 $insensitive_selected_fg_color);
545 }
546 &.flat {
547 background-color: transparent;
548 color: $b_color;
549 &:hover { @include button(flat-hover, $track_color, $b_color); }
550 &:active {
551 @include button(flat-active);
552 background-color: gtkalpha($selected_bg_color, 0.2);
553 color: $selected_bg_color;
554 }
555 &:checked { @include button(flat-checked, $b_color, $selected_fg_color); }
556 &:disabled {
557 @include button(flat-insensitive, $b_color,
558 $insensitive_selected_fg_color);
559 }
560 }
561 }
562 }
563
564 &.image-button {
565 @extend %image_button;
566 min-width: rem(13.3px);
567 min-height: rem(13.3px);
568 }
569
570 &.text-button {
571 padding: rem(9.3px) rem(13.3px) rem(10.7px);
572 border-radius: 2px;
573 -gtk-outline-radius: 2px;
574 font-weight: 700;
575 }
576
577 &.text-button.image-button {
578 // those buttons needs uneven horizontal padding, we want the icon side
579 // to have the image-button padding, while the text side the text-button
580 // one, so we're adding the missing padding to the label depending on
581 // its position inside the button
582 padding-left: rem(13.3px);
583 padding-right: rem(13.3px);
584 border-radius: 2px;
585 -gtk-outline-radius: 2px;
586
587 label {
588 padding-left: rem(4px);
589 padding-right: rem(4px);
590 }
591
592 image {
593 padding-left: rem(4px);
594 padding-right: rem(4px);
595 }
596
597 &:drop(active) {
598 color: $drop_target_color;
599 background-color: $drop_target_fill_color;
600 }
601 }
602
603 separator { // remove vertical separator
604 @extend separator.wide;
605 min-height: 0;
606 min-width: 0;
607 border-color: transparent;
608 background-color: transparent;
609 color: transparent;
610 }
611
612 stackswitcher & { // do not shrink buton width
613 &.text-button {
614 min-height: rem(17.3px);
615 min-width: rem(112px);
616 }
617 }
618
619 .stack-switcher > & {
620 // to position the needs attention dot, padding is added to the button
621 // child, a label needs just lateral padding while an icon needs vertical
622 // padding added too.
623
624 outline-offset: rem(-2.6px); // needs to be set or it gets overriden
625 // by GtkRadioButton outline-offset
626
627 > label {
628 padding-left: rem(8px); // label padding
629 padding-right: rem(8px); //
630 }
631
632 > image {
633 padding-left: rem(8px); // image padding
634 padding-right: rem(8px); //
635 padding-top: rem(2.7px); //
636 padding-bottom: rem(2.7px); //
637 }
638
639 &.text-button {
640 // compensate text-button paddings
641 padding-left: rem(13.3px);
642 padding-right: rem(13.3px);
643 border-radius: 2px;
644 -gtk-outline-radius: 2px;
645 }
646
647 &.image-button {
648 // we want image buttons to have a 1:1 aspect ratio, so compensation
649 // of the padding added to the image is needed
650 padding-left: rem(8px);
651 padding-right: rem(8px);
652 }
653
654 &.needs-attention > label,
655 &.needs-attention > image { @extend %needs_attention; }
656 &.needs-attention:active > label,
657 &.needs-attention:active > image,
658 &.needs-attention:checked > label,
659 &.needs-attention:checked > image {
660 animation: none;
661 background-image: none;
662 }
663 }
664
665 // mimic tab-switcher-like button array
666 // horizontal array
667 .linked > &:not(.flat):not(:only-child) { @extend %linked_middle; }
668 .linked > &,
669 .linked > & .image-button,
670 .linked > & .text-button {
671 @extend %linked_middle;
672 @extend %button_array;
673 min-width: rem(13.3px);
674 padding: rem(9.3px) rem(5.3px) rem(10.7px);
675
676 label {
677 padding-left: rem(4px);
678 padding-right: rem(4px);
679 }
680
681 image {
682 padding-left: rem(4px);
683 padding-right: rem(4px);
684 }
685 }
686 // vertical array
687 .linked.vertical > &:not(:only-child) { @extend %linked_vertical_middle; }
688 .linked.vertical > &,
689 .linked.vertical > & .image-button,
690 .linked.vertical > & .text-button {
691 @extend %linked_vertical_middle;
692 @extend %button_vertical_array;
693 min-height: rem(13.3px);
694 min-width: rem(22.6px);
695 padding: rem(10px) rem(6.7px) rem(10px);
696 }
697
698 // generic switcher image buttons
699 .linked > &.image-button.radio,
700 .linked.vertical > &.image-button.radio {
701 min-width: rem(13.3px);
702 min-height: rem(13.3px);
703 padding: rem(8px);
704 }
705
706 // inline-toolbar and action-bar buttons
707 .inline-toolbar &,
708 actionbar {
709 &, &:not(.text-button).image-button {
710 @include button(flat-normal);
711 min-width: rem(13.3px);
712 min-height: rem(13.3px);
713 padding: rem(10px);
714 border-radius: 100px;
715 -gtk-outline-radius: 100px;
716 background-size: $image_button_small;
717 &:hover { @include button(flat-hover); }
718 &:active { @include button(flat-active); }
719 &:disabled { @include button(flat-insensitive); }
720 &:checked { @include button(flat-checked); }
721 &:checked:disabled { @include button(flat-checked-insensitive); }
722 }
723 &.text-button {
724 border-radius: 2px;
725 -gtk-outline-radius: 2px;
726 }
727 }
728 .inline-toolbar .linked > &,
729 actionbar .linked > & {
730 &, &:not(.text-button).image-button {
731 min-width: rem(13.3px);
732 min-height: rem(13.3px);
733 padding: rem(6.7px);
734 border-radius: 100px;
735 -gtk-outline-radius: 100px;
736 }
737 &.image-button.toggle {
738 min-width: rem(13.3px);
739 min-height: rem(13.3px);
740 padding: rem(8px) rem(4px) rem(8px);
741 border-radius: 100px;
742 -gtk-outline-radius: 100px;
743 }
744 &.text-button {
745 border-radius: 2px;
746 -gtk-outline-radius: 2px;
747 }
748 }
749
750 .primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
751}
752
753%button_array {
754 @include button(flat-normal);
755 border-radius: 0;
756 -gtk-outline-radius: 0;
757 color: $secondary_fg_color;
758 border-image: -gtk-gradient(radial,
759 center bottom, 0,
760 center bottom, 0.5,
761 to($track_color),
762 to(transparent))
763 0 0 1 / 0 0 1px;
764 &:hover {
765 @include button(flat-hover);
766 border-radius: 0;
767 border-image: -gtk-gradient(radial,
768 center bottom, 0,
769 center bottom, 0.5,
770 to($track_color),
771 to(transparent))
772 0 0 2 / 0 0 2px;
773 }
774 &:active,
775 &:checked {
776 color: $fg_color;
777 background-color: transparent;
778 border-image: -gtk-gradient(radial,
779 center bottom, 0,
780 center bottom, 0.5,
781 to($selected_bg_color),
782 to(transparent))
783 0 0 2 / 0 0 2px;
784 &:disabled {
785 color: $insensitive_fg_color;
786 background-color: transparent;
787 border-image: -gtk-gradient(radial,
788 center bottom, 0,
789 center bottom, 0.5,
790 to(gtkopacity($selected_bg_color, 0.2)),
791 to(transparent))
792 0 0 2 / 0 0 2px;
793 > label { color: inherit; }
794 }
795 }
796 &:disabled {
797 color: $insensitive_fg_color;
798 background-color: transparent;
799 border-image: -gtk-gradient(radial,
800 center bottom, 0,
801 center bottom, 0.5,
802 to($track_color),
803 to(transparent))
804 0 0 1 / 0 0 1px;
805 }
806}
807
808%button_vertical_array {
809 @include button(flat-normal);
810 border-image: none;
811 border-width: 0;
812 -gtk-outline-radius: 0;
813 color: $secondary_fg_color;
814 &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
815 &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
816 &:hover {
817 @include button(flat-hover);
818 &:dir(ltr) { box-shadow: inset 2px 0 $track_color; }
819 &:dir(rtl) { box-shadow: inset -2px 0 $track_color; }
820 }
821 &:active,
822 &:checked {
823 color: $fg_color;
824 background-color: transparent;
825 &:dir(ltr) { box-shadow: inset 2px 0 $selected_bg_color; }
826 &:dir(rtl) { box-shadow: inset -2px 0 $selected_bg_color; }
827 &:disabled {
828 color: $insensitive_fg_color;
829 background-color: $track_color;
830 &:dir(ltr) { box-shadow: inset 2px 0 gtkopacity($selected_bg_color, 0.2); }
831 &:dir(ltr) { box-shadow: inset -2px 0 gtkopacity($selected_bg_color, 0.2); }
832 > label { color: inherit; }
833 }
834 }
835 &:disabled {
836 color: $insensitive_fg_color;
837 background-color: $track_color;
838 &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
839 &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
840 }
841}
842
843%image_button {
844 padding: rem(10px);
845 border-radius: 100px;
846 -gtk-outline-radius: 100px;
847 background-size: $image_button_large;
848}
849
850%needs_attention {
851 transition: none;
852 animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
853 background-repeat: no-repeat;
854 background-position: right rem(3px);
855 background-size: $attention;
856 &:dir(rtl) { background-position: left rem(3px); }
857}
858
859// all the following is for the +|- buttons on inline toolbars, that way
860// should really be deprecated...
861toolbar.inline-toolbar toolbutton > button { // redefining the button look is
862 // needed since those are flat...
863}
864
865// More inline toolbar buttons
866toolbar.inline-toolbar toolbutton {
867 // & > button.flat { @extend %linked_middle; }
868 // &:first-child > button.flat { @extend %linked:first-child; }
869 // &:last-child > button.flat { @extend %linked:last-child; }
870 // &:only-child > button.flat { @extend %linked:only-child; }
871}
872
873%linked_middle { border-radius: 0; }
874
875%linked {
876 -gtk-outline-radius: 2px;
877 @extend %linked_middle;
878 &:first-child {
879 border-top-left-radius: 2px;
880 border-bottom-left-radius: 2px;
881 }
882 &:last-child {
883 border-top-right-radius: 2px;
884 border-bottom-right-radius: 2px;
885 }
886 &:only-child { border-radius: 2px; }
887}
888
889%linked_vertical_middle { border-radius: 0; }
890
891%linked_vertical{
892 -gtk-outline-radius: 2px;
893 @extend %linked_vertical_middle;
894 &:first-child {
895 border-top-left-radius: 2px;
896 border-top-right-radius: 2px;
897 }
898 &:last-child {
899 border-bottom-left-radius: 2px;
900 border-bottom-right-radius: 2px;
901 }
902 &:only-child { border-radius: 2px; }
903}
904
905// menu buttons on GtkPopover
906modelbutton.flat,
907menuitem button.flat {
908 @include button(flat-normal);
909 min-height: rem(26.6px);
910 margin-left: rem(10px);
911 margin-right: rem(10px);
912 outline-offset: rem(-1px);
913 background-size: $text_button_small;
914 transition: none;
915 &:hover { @include button(flat-hover); }
916 &:active { @include button(flat-active); }
917 &:disabled { @include button(flat-insensitive); }
918 &:checked { @include button(flat-checked); }
919 &:checked:disabled { @include button(flat-checked-insensitive); }
920
921 check,
922 radio {
923 &:first-child { margin-right: rem(13.3px); }
924 &:last-child { margin-left: rem(13.3px); }
925 }
926}
927
928modelbutton.flat arrow {
929 background: none;
930 &:hover { background: none; }
931 &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
932 &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
933}
934
935button.color {
936 min-width: rem(33.3px);
937 min-height: rem(20px);
938 padding: rem(6.7px) rem(8px) rem(6.7px); // Uniform padding on the GtkColorButton
939
940 > colorswatch:first-child:last-child { // :first-child:last-child for
941 // a specificity bump, it gets
942 // overridden by the colorpicker style
943 &, overlay {
944 border-radius: 2px;
945 -gtk-outline-radius: 2px;
946 }
947 box-shadow: $z-depth-1;
948 }
949
950 &,
951 GtkColorSwatch {
952 &:disabled {
953 box-shadow: none;
954 opacity: 0.4;
955 }
956 }
957}
958
959// toolpalette buttons
960toolpalette {
961 toolitemgroup {
962 > button {
963 border-top: 1px solid $borders_color;
964 border-radius: 0;
965 }
966 }
967
968 toolbutton {
969 > button.toggle { // use square buttons
970 border-radius: 2px;
971 -gtk-outline-radius: 2px;
972 }
973 }
974}
975
976
977/*********
978 * Links *
979 *********/
980
981*:link {
982 color: $link_color;
983 &:hover,
984 &:active { color: $link_color; }
985 &:visited {
986 color: $link_visited_color;
987 &:hover,
988 &:active { color: $link_visited_color; }
989 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
990 }
991 &:selected,
992 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
993 &:disabled { opacity: 0.4; }
994}
995
996button:link,
997button:visited {
998 // FIXME: aggregate with buttons
999 @extend *:link;
1000 & > label { text-decoration-line: underline; }
1001}
1002
1003
1004/*****************
1005 * GtkSpinButton *
1006 *****************/
1007
1008@keyframes spin_hover {
1009 from {
1010 background-image: -gtk-gradient(radial,
1011 center center, 0,
1012 center center, 0.01,
1013 to(gtkalpha(currentColor, 0)),
1014 to(transparent));
1015 }
1016 to {
1017 background-image: -gtk-gradient(radial,
1018 center center, 0,
1019 center center, 0.5,
1020 to(gtkalpha(currentColor, 0.1)),
1021 to(transparent));
1022 }
1023}
1024
1025@keyframes spin_active {
1026 from {
1027 background-image: -gtk-gradient(radial,
1028 center center, 0,
1029 center center, 0.5,
1030 to(gtkalpha(currentColor, 0.2)),
1031 to(transparent));
1032 }
1033 to {
1034 background-image: -gtk-gradient(radial,
1035 center center, 0,
1036 center center, 0.01,
1037 to(gtkalpha(currentColor, 0)),
1038 to(transparent));
1039 }
1040}
1041
1042spinbutton {
1043 &:not(.vertical) {
1044 // in this horizontal configuration, the whole spinbutton
1045 // behaves as the entry, so we extend the entry styling
1046 // and nuke the style on the internal entry
1047 @extend entry;
1048 padding: 0;
1049
1050 // FIXME: this should not be set at all, but otherwise it gets the wrong
1051 // color
1052 &:disabled { color: $insensitive_fg_color; }
1053
1054 entry {
1055 margin: 0;
1056 background: none;
1057 border: none;
1058 box-shadow: none;
1059 }
1060
1061 button {
1062 @include button(flat-normal);
1063 min-width: rem(13.3px);
1064 min-height: rem(13.3px);
1065 padding: 0 rem(7.3px) 0;
1066 border: solid rem(2.7px) transparent;
1067 border-radius: 100px;
1068 -gtk-outline-radius: 100px;
1069 background: none;
1070 background-size: contain;
1071 color: $secondary_fg_color;
1072 box-shadow: none;
1073 transition-property: opacity,
1074 color,
1075 background-color,
1076 background-image,
1077 box-shadow;
1078
1079 &:not(:last-child) { // '-' button
1080 &:hover {
1081 @include button(flat-hover);
1082 background: none;
1083 color: $error_color;
1084 animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1085 }
1086 &:active {
1087 @include button(flat-active);
1088 background: none;
1089 color: $error_color;
1090 animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1091 transition-duration: 0.15s;
1092 }
1093 &:disabled {
1094 @include button(flat-insensitive);
1095 background: none;
1096 color: $insensitive_fg_color;
1097 }
1098 }
1099 &:last-child { // '+' button
1100 &:hover {
1101 @include button(flat-hover);
1102 background: none;
1103 color: $success_color;
1104 animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1105 }
1106 &:active {
1107 @include button(flat-active);
1108 background: none;
1109 color: $success_color;
1110 animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1111 transition-duration: 0.15s;
1112 }
1113 &:disabled {
1114 @include button(flat-insensitive);
1115 background: none;
1116 color: $insensitive_fg_color;
1117 }
1118 }
1119 }
1120 }
1121
1122 .osd &,
1123 .osd &.vertical {
1124 &,
1125 button,
1126 entry {
1127 color: $inverted_secondary_fg_color;
1128 &:focus { color: $inverted_fg_color; }
1129 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1130 }
1131 }
1132
1133 &.vertical { // FIXME: try using linking templates for
1134 // vertically linked stuff
1135 entry {
1136 min-width: rem(33.3px);
1137 min-height: rem(33.3px);
1138 padding: 0;
1139 border-radius: 0;
1140 }
1141
1142 button {
1143 min-width: rem(26.7px);
1144 min-height: rem(26.7px);
1145 padding: rem(2.7px);
1146 border: rem(2.7px) solid transparent;
1147 border-radius: 200px;
1148 -gtk-outline-radius: 200px;
1149 background: none;
1150 background-size: contain;
1151 color: $secondary_fg_color;
1152 box-shadow: none;
1153 transition-property: opacity,
1154 color,
1155 background-color,
1156 background-image,
1157 box-shadow;
1158
1159 &.up { // '+' button
1160 &:hover {
1161 @include button(flat-hover);
1162 background: none;
1163 color: $success_color;
1164 animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1165 }
1166 &:active {
1167 @include button(flat-active);
1168 background: none;
1169 color: $success_color;
1170 animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1171 transition-duration: 0.15s;
1172 }
1173 &:disabled {
1174 @include button(flat-insensitive);
1175 background: none;
1176 color: $insensitive_fg_color;
1177 }
1178 }
1179 &.down { // '-' button
1180 &:hover {
1181 @include button(flat-hover);
1182 background: none;
1183 color: $error_color;
1184 animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1185 }
1186 &:active {
1187 @include button(flat-active);
1188 background: none;
1189 color: $error_color;
1190 animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1191 transition-duration: 0.15s;
1192 }
1193 &:disabled {
1194 @include button(flat-insensitive);
1195 background: none;
1196 color: $insensitive_fg_color;
1197 }
1198 }
1199 }
1200 }
1201
1202 // Misc
1203 treeview & {
1204 & entry:focus {
1205 padding: 1px;
1206 border-radius: 0;
1207 border-width: 0;
1208 background-color: $base_color;
1209 color: $fg_color;
1210 box-shadow: none;
1211 &:selected { @extend %selected_items; }
1212 }
1213 }
1214}
1215
1216
1217/**************
1218 * ComboBoxes *
1219 **************/
1220
1221combobox {
1222 arrow {
1223 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1224 min-height: rem(16px);
1225 min-width: rem(16px);
1226 }
1227
1228 &.linked {
1229 button:nth-child(2) {
1230 &:dir(ltr) { @extend %linked:last-child; }
1231 &:dir(rtl) { @extend %linked:first-child; }
1232 }
1233 }
1234
1235 &:drop(active) {
1236 button.combo { @extend button:drop(active); }
1237 }
1238
1239 & menu { padding: rem(3.3px) 0; }
1240 & menu > menuitem { padding: rem(4.7px) rem(5.3px) rem(6px); }
1241
1242 entry.combo {
1243 }
1244
1245 button.combo { // button spacing
1246 min-height: rem(13.3px);
1247 min-width: rem(17.3px);
1248 padding: rem(8px) rem(5.3px) rem(8.7px);
1249
1250 arrow { padding: 0 rem(4px) 0; }
1251
1252 label {
1253 padding-left: rem(4px);
1254 padding-right: rem(4px);
1255 }
1256
1257 image {
1258 min-height: rem(16px);
1259 min-width: rem(16px);
1260 padding-left: rem(4px);
1261 padding-right: rem(4px);
1262 }
1263 }
1264
1265 button.combo { // button styling
1266 @include button(flat-normal);
1267 color: $secondary_fg_color;
1268 background: transparent;
1269 border-image: -gtk-gradient(radial,
1270 center bottom, 0,
1271 center bottom, 0.5,
1272 to($track_color),
1273 to(transparent))
1274 0 0 1 / 0 0 1px;
1275 &:hover,
1276 &:active {
1277 @include button(flat-hover);
1278 border-radius: 0;
1279 color: $fg_color;
1280 background: transparent;
1281 border-image: -gtk-gradient(radial,
1282 center bottom, 0,
1283 center bottom, 0.5,
1284 to($selected_bg_color),
1285 to(transparent))
1286 0 0 2 / 0 0 2px;
1287 }
1288 &:disabled,
1289 &:checked:disabled {
1290 @include button(flat-insensitive);
1291 color: $insensitive_fg_color;
1292 background: transparent;
1293 border-image: -gtk-gradient(radial,
1294 center bottom, 0,
1295 center bottom, 0.5,
1296 to($track_color),
1297 to(transparent))
1298 0 0 1 / 0 0 1px;
1299
1300 }
1301 }
1302
1303 button.combo:not(:only-child) {
1304 }
1305 button.combo:only-child {
1306 }
1307}
1308
1309.linked > combobox > box > button.combo {
1310 // the combo is a composite widget so the way we do button linking doesn't
1311 // work, special case needed. See
1312 // https://bugzilla.gnome.org/show_bug.cgi?id=733979
1313 &:dir(ltr),
1314 &:dir(rtl) { @extend %linked_middle; } // specificity bump
1315}
1316
1317.linked > combobox:first-child > button.combo {
1318 @extend %linked:first-child;
1319}
1320.linked > combobox:last-child > button.combo {
1321 @extend %linked:last-child;
1322}
1323.linked > combobox:only-child > button.combo {
1324 @extend %linked:only-child;
1325}
1326
1327.linked.vertical > combobox > button.combo {
1328 @extend %linked_vertical_middle;
1329}
1330.linked.vertical > combobox:first-child > button.combo {
1331 @extend %linked_vertical:first-child;
1332}
1333.linked.vertical > combobox:last-child > button.combo {
1334 @extend %linked_vertical:last-child;
1335}
1336.linked.vertical > combobox:only-child > button.combo {
1337 @extend %linked_vertical:only-child;
1338}
1339
1340
1341/************
1342 * Toolbars *
1343 ************/
1344
1345toolbar {
1346 -GtkWidget-window-dragging: true;
1347
1348 padding: rem(5.3px);
1349 background-color: $bg_color;
1350 color: $secondary_fg_color;
1351 box-shadow: if($variant == 'light', $toolbar-shadow-light,
1352 $toolbar-shadow-dark);
1353
1354 &.vertical,
1355 .inline-toolbar &,
1356 paned &,
1357 paned &.primary-toolbar,
1358 grid &.primary-toolbar { // stop drawing fake-shadows
1359 box-shadow: none;
1360 }
1361
1362 // on OSD
1363 .osd & { background-color: transparent; }
1364
1365 .osd &,
1366 &.osd {
1367 padding: 3px;
1368 border-style: solid;
1369 border-width: 9px;
1370 border-radius: 2px;
1371 border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
1372 url("assets/osd-shadow#{$asset_suffix}@2.png"))
1373 10 / 10px stretch;
1374 box-shadow: none;
1375 color: $inverted_fg_color;
1376 background-color: $inverted_dark_color;
1377 &:backdrop {
1378 border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
1379 url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
1380 10 / 10px stretch;
1381 }
1382
1383 button {
1384 @extend button.flat;
1385 &:not(:active):not(:disabled):not(hover) {
1386 color: $secondary_accent_color;
1387 }
1388 &:hover,
1389 &:active { color: $accent_color; }
1390 &:active,
1391 &:checked {
1392 border-image: none;
1393 box-shadow: none;
1394 }
1395 &:disabled { color: gtkopacity($accent_color, 0.4); }
1396 }
1397
1398 .linked > button {
1399 &, &.image-button {
1400 border-image: none;
1401 box-shadow: none;
1402 &:hover { background-color: transparent; }
1403 &:not(:checked) {
1404 border-radius: 100px;
1405 -gtk-outline-radius: 100px;
1406 }
1407 }
1408
1409 &.image-button {
1410 min-width: rem(13.3px);
1411 min-height: rem(29.3px);
1412 padding: 0 rem(6.7px) 0;
1413 border-radius: 100px;
1414 -gtk-outline-radius: 100px;
1415 }
1416 }
1417
1418 label { padding: 0 1em; }
1419 }
1420
1421 button { // use flat-buttons
1422 @extend button.flat;
1423 background-size: $text_button_small;
1424 box-shadow: none;
1425 border-image: -gtk-gradient(radial,
1426 center bottom, 0,
1427 center bottom, 0.001,
1428 to($track_color),
1429 to(transparent))
1430 0 0 0 / 0 0 0px;
1431 color: $secondary_fg_color;
1432 &:hover {
1433 box-shadow: none;
1434 border-image: none;
1435 color: $fg_color;
1436 }
1437 &:checked {
1438 box-shadow: none;
1439 border-image: -gtk-gradient(radial,
1440 center bottom, 0,
1441 center bottom, 0.5,
1442 to($selected_bg_color),
1443 to(transparent))
1444 0 0 2 / 0 0 2px;
1445 background-color: transparent;
1446 color: $fg_color;
1447 &:disabled {
1448 box-shadow: none;
1449 background-color: transparent;
1450 color: $insensitive_fg_color;
1451 border-image: none;
1452 > label { color: inherit; }
1453 }
1454 }
1455 &:disabled {
1456 box-shadow: none;
1457 background-color: transparent;
1458 color: $insensitive_secondary_fg_color;
1459 border-image: none;
1460 }
1461
1462 button,
1463 button.flat { // set specific roundness
1464 &,
1465 &.text-button,
1466 &.text-button.image-button {
1467 border-radius: 2px;
1468 -gtk-outline-radius: 2px;
1469 }
1470 &.image-button {
1471 border-radius: 100px;
1472 -gtk-outline-radius: 100px;
1473 }
1474 }
1475
1476 .text-button,
1477 .image-button.text-button {
1478 min-width: rem(13.3px);
1479 min-height: rem(29.3px);
1480 padding: 0 rem(13.3px) 0;
1481 background-size: $text_button_small;
1482 }
1483
1484 .image-button {
1485 min-width: rem(13.3px);
1486 min-height: rem(29.3px);
1487 padding: 0 rem(6.7px) 0;
1488 background-size: $image_button_large;
1489 }
1490
1491 &.toggle { // remove double-background
1492 &:hover,
1493 &:active,
1494 &:checked {
1495 background-color: transparent;
1496 box-shadow: none;
1497 }
1498 }
1499 }
1500
1501 .linked > button { // remove double-background and underlines
1502 &, &.image-button {
1503 border-image: none;
1504 box-shadow: none;
1505 &:hover,
1506 &:active {
1507 border-image: none;
1508 background-color: transparent;
1509 box-shadow: none;
1510 }
1511 &:not(:disabled) { // revive roundness
1512 border-radius: 100px;
1513 -gtk-outline-radius: 100px;
1514 }
1515 }
1516
1517 .image-button {
1518 min-width: rem(13.3px);
1519 min-height: rem(29.3px);
1520 padding: 0 rem(6.7px) 0;
1521 border-radius: 100px;
1522 -gtk-outline-radius: 100px;
1523 }
1524 }
1525 .linked > button.text-button:not(.image-button) { // revive underlines
1526 @extend %button_array;
1527 }
1528
1529 // toolbar separators
1530 separator {
1531 color: transparent;
1532 background: none;
1533 }
1534 &.horizontal {
1535 separator { margin: 0 rem(6px); }
1536 }
1537 &.vertical {
1538 separator { margin: rem(6px) 0; }
1539 }
1540}
1541
1542// searchbar, location-bar & inline-toolbar
1543.inline-toolbar {
1544 padding: rem(5.3px);
1545 border-style: solid;
1546 border-width: 0 1px 1px;
1547 border-color: $borders_color;
1548 background-color: $secondary_dark_color;
1549 box-shadow: if($variant == 'light', $inline-shadow-light,
1550 $inline-shadow-dark);
1551}
1552
1553searchbar,
1554.location-bar {
1555 padding: rem(5.3px);
1556 border-style: solid;
1557 border-width: 0 0 1px;
1558 border-color: $borders_color;
1559 background-color: $secondary_dark_color;
1560
1561 .linked > button.image-button {
1562 padding-top: rem(9.3px);
1563 padding-bottom: rem(10.7px);
1564 }
1565
1566 button.flat.close.raised {
1567 min-width: rem(13.3px);
1568 min-height: rem(13.3px);
1569 padding: rem(10px);
1570 border-radius: 100px;
1571 -gtk-outline-radius: 100px;
1572 }
1573}
1574
1575
1576/***************
1577 * Header bars *
1578 ***************/
1579
1580.titlebar,
1581headerbar {
1582 @extend %fade_effect;
1583 background-color: $inverted_dark_color;
1584 background-clip: border-box;
1585
1586 // text colours
1587 color: $inverted_secondary_fg_color;
1588 label,
1589 image {
1590 // &:hover { color: $inverted_fg_color; }
1591 // &:focus,
1592 // &:active,
1593 &:checked {
1594 // color: $inverted_fg_color;
1595 &:disabled { color: $insensitive_inverted_fg_color; }
1596 }
1597 button:disabled > &,
1598 .linked > button:disabled > &,
1599 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1600 }
1601
1602 // titles
1603 .title {
1604 padding-left: rem(13.3px);
1605 padding-right: rem(13.3px);
1606 color: $inverted_fg_color;
1607 font-weight: 700;
1608 &:backdrop { @extend .dim-label; }
1609 }
1610
1611 .subtitle {
1612 @extend .dim-label;
1613 padding-left: rem(13.3px);
1614 padding-right: rem(13.3px);
1615 color: $inverted_secondary_fg_color;
1616 font-size: 90%;
1617 &:backdrop { @extend .dim-label; }
1618 }
1619
1620 // separators
1621 & separator.vertical,
1622 & > box > separator.vertical,
1623 & > box > box > separator.vertical {
1624 border: 0 none transparent;
1625 color: transparent;
1626 background-color: transparent;
1627 }
1628
1629 // button styling
1630 button:not(.suggested-action):not(.destructive-action) {
1631 @extend button.flat;
1632 border-image: -gtk-gradient(radial,
1633 center bottom, 0,
1634 center bottom, 0.001,
1635 to($selected_bg_color),
1636 to(transparent))
1637 0 0 0 / 0 0 0px;
1638 color: $inverted_secondary_fg_color;
1639 background-size: $text_button_small;
1640 &:hover { color: $inverted_fg_color; }
1641 &:checked {
1642 border-image: -gtk-gradient(radial,
1643 center bottom, 0,
1644 center bottom, 0.5,
1645 to($selected_bg_color),
1646 to(transparent))
1647 0 0 2 / 0 0 2px;
1648 // box-shadow: inset 0 -2px $selected_bg_color;
1649 background-color: transparent;
1650 color: $inverted_fg_color;
1651 // transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
1652 // box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
1653 // color 0;
1654 // &:active { transition: none; }
1655 &:disabled {
1656 background-color: transparent;
1657 color: $insensitive_inverted_fg_color;
1658 > label { color: inherit; }
1659 }
1660 }
1661 }
1662
1663 // force to draw circle flat buttons as default
1664 button:not(.suggested-action):not(.destructive-action) {
1665 border-radius: 100px;
1666 -gtk-outline-radius: 100px;
1667 &.text-button {
1668 border-radius: 2px;
1669 -gtk-outline-radius: 2px;
1670 &.image-button {
1671 border-radius: 2px;
1672 -gtk-outline-radius: 2px;
1673 background-size: $text_button_small;
1674 }
1675 }
1676 }
1677
1678 // adjust spacing for finer aspect-ratio
1679 .linked > button {
1680 &.image-button {
1681 min-width: rem(17.3px);
1682 min-height: rem(37.3px);
1683 padding: 0 rem(6.7px) 0;
1684 }
1685 }
1686 button.toggle {
1687 min-width: rem(17.3px);
1688 min-height: rem(37.3px);
1689 padding: 0 rem(10px) 0;
1690
1691 label { padding: rem(9.3px) rem(8px) rem(10.7px); }
1692 menu menuitem { // reset padding
1693 label { padding: 0; }
1694 }
1695 }
1696
1697 button,
1698 .linked > button,
1699 button.suggested-action,
1700 button.destructive-action {
1701 &, & label.text-button {
1702 color: $inverted_secondary_fg_color;
1703 &:hover { color: $inverted_fg_color; }
1704 &:checked {
1705 color: $inverted_fg_color;
1706 &:disabled { color: $insensitive_inverted_fg_color; }
1707 }
1708 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1709 }
1710 label.text-button { // workaround for Gnome-Software
1711 border-image: none;
1712 box-shadow: none;
1713 }
1714 }
1715
1716 // entry styling
1717 entry,
1718 .linked > entry {
1719 color: $inverted_secondary_fg_color;
1720 caret-color: $inverted_secondary_fg_color;
1721 &:focus {
1722 color: $inverted_fg_color;
1723 caret-color: $inverted_fg_color;
1724 }
1725 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1726 }
1727
1728 // combobox styling
1729 combobox,
1730 .linked > combobox {
1731 & > entry.combo {
1732 color: $inverted_secondary_fg_color;
1733 caret-color: $inverted_secondary_fg_color;
1734 &:focus {
1735 color: $inverted_fg_color;
1736 caret-color: $inverted_fg_color;
1737 }
1738 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1739 &:backdrop { opacity: 0.5; }
1740 }
1741 & > button.combo {
1742 color: $inverted_secondary_fg_color;
1743 &:hover { color: $inverted_fg_color; }
1744 &:checked {
1745 color: $inverted_fg_color;
1746 &:disabled { color: $insensitive_inverted_fg_color; }
1747 }
1748 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1749 &:backdrop { opacity: 0.5; }
1750 }
1751 }
1752
1753 // menu styling
1754 menu menuitem { // reset text colour
1755 color: $secondary_fg_color;
1756 &:hover { color: $fg_color; }
1757 label {
1758 &:disabled { color: $insensitive_fg_color; }
1759 }
1760 & accelerator { color: gtkalpha(currentColor, 0.55); }
1761 & separator { color: $borders_color; }
1762 }
1763
1764 // pop-over styling
1765 popover button.flat {
1766 color: $secondary_fg_color;
1767 &:hover { color: $fg_color; }
1768 label {
1769 &:hover { color: $fg_color; }
1770 &:disabled { color: $insensitive_fg_color; }
1771 }
1772 }
1773
1774 // switch styling
1775 switch {
1776 margin: rem(2.7px) 0;
1777 color: $inverted_secondary_fg_color;
1778 background-color: gtkopacity($inverted_secondary_fg_color, 0.1);
1779 &:checked {
1780 background-color: gtkopacity($selected_bg_color, 0.2);
1781 &:disabled { background-color: gtkopacity($selected_bg_color, 0.2); }
1782 }
1783 &:disabled {
1784 color: $insensitive_inverted_fg_color;
1785 background-color: $track_color;
1786 }
1787
1788 slider { background-color: $inverted_bg_color; }
1789 &:hover slider {
1790 background-image: linear-gradient(to bottom,
1791 gtkalpha($selected_fg_color, 0.2),
1792 gtkalpha($selected_fg_color, 0.2));
1793 }
1794 &:checked slider {
1795 background-color: $selected_bg_color;
1796 &:disabled { background-color: #3F4E56; }
1797 }
1798 &:disabled slider { background-color: #3F4E56; }
1799 }
1800
1801 // spinner spacing
1802 spinner {
1803 min-width: rem(13.3px);
1804 min-height: rem(13.3px);
1805 margin: rem(-5.3px);
1806 }
1807
1808 // selection-mode styling
1809 &.selection-mode {
1810 border-width: 1px 0 1px 0; // remove side borders
1811 border-top-color: $highlight_color;
1812 border-bottom-color: transparent;
1813 background-color: $selected_bg_color;
1814 color: $selected_fg_color;
1815
1816 .subtitle:link { @extend *:link:selected; }
1817
1818 button,
1819 button.image-button {
1820 border-image: -gtk-gradient(radial,
1821 center bottom, 0,
1822 center bottom, 0.001,
1823 to($selected_fg_color),
1824 to(transparent))
1825 0 0 0 / 0 0 0px;
1826 color: $secondary_selected_fg_color;
1827 &:hover,
1828 &:active,
1829 &:checked { color: $selected_fg_color; }
1830 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1831 &:checked {
1832 border-image: -gtk-gradient(radial,
1833 center bottom, 0,
1834 center bottom, 0.5,
1835 to($selected_fg_color),
1836 to(transparent))
1837 0 0 2 / 0 0 2px;
1838 color: $selected_fg_color;
1839 background-color: transparent;
1840 &:disabled {
1841 color: $insensitive_selected_fg_color;
1842 > label { color: inherit; }
1843 }
1844 }
1845 &.suggested-action {
1846 // NOTE: do not use @extend button;
1847 @include button(normal);
1848 &:hover { @include button(hover); }
1849 &:active { @include button(active); }
1850 &:disabled { @include button(insensitive); }
1851 }
1852
1853 // text-button foreground colors
1854 &.text-button,
1855 &.suggested-action {
1856 color: $secondary_selected_fg_color;
1857 &:hover,
1858 &:active,
1859 &:checked { color: $selected_fg_color; }
1860 &:disabled { color: $insensitive_selected_fg_color; }
1861 }
1862 }
1863
1864 button:not(.suggested-action):not(.destructive-action) {
1865 border-radius: 100px;
1866 -gtk-outline-radius: 100px;
1867 &.text-button,
1868 &.flat.selection-menu {
1869 border-radius: 2px;
1870 -gtk-outline-radius: 2px;
1871 &.image-button {
1872 border-radius: 100px;
1873 -gtk-outline-radius: 100px;
1874 }
1875 }
1876 }
1877
1878 entry {
1879 color: $inverted_secondary_fg_color;
1880 &:focus { color: $inverted_fg_color; }
1881 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1882 }
1883
1884 .selection-menu {
1885 padding-left: rem(16px);
1886 padding-right: rem(16px);
1887 &, &.popup {
1888 color: $secondary_selected_fg_color;
1889 &:hover,
1890 &:active,
1891 &:checked { color: $selected_fg_color; }
1892 &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1893 &:checked {
1894 border-image: -gtk-gradient(radial,
1895 center bottom, 0,
1896 center bottom, 0.5,
1897 to($selected_fg_color),
1898 to(transparent))
1899 0 0 2 / 0 0 2px;
1900 background-color: transparent;
1901 &:disabled {
1902 color: $insensitive_selected_fg_color;
1903 > label { color: inherit; }
1904 }
1905 }
1906 }
1907
1908 GtkArrow { -GtkArrow-arrow-scaling: 1.0; }
1909
1910 .arrow {
1911 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1912 color: $secondary_selected_fg_color;
1913 }
1914 }
1915 }
1916
1917 // misc
1918 .tiled & {
1919 @extend %tiled_integration;
1920 transition: none;
1921 }
1922 .maximized & {
1923 @extend %maxd_integration;
1924 transition: none;
1925 }
1926
1927 &.default-decoration {
1928 min-height: 26.7px;
1929 padding: 5.3px;
1930 border-width: 0;
1931
1932 .title { // fade_effect doesn't work
1933 color: $inverted_fg_color;
1934 &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1935 }
1936
1937 button.titlebutton {
1938 min-width: 26.7px;
1939 min-height: 26.7px;
1940 margin: 0;
1941 padding: 0;
1942 color: $inverted_secondary_fg_color;
1943 background-size: $image_button_small;
1944 &:hover,
1945 &:active { color: $inverted_fg_color; }
1946 &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1947 }
1948 }
1949}
1950
1951headerbar {
1952 // draw borders
1953 border-width: 1px 0 1px;
1954 border-style: solid;
1955 // do not use transparentize
1956 border-top-color: $top_edge_border_color;
1957 border-bottom-color: $solid_dark_borders_color;
1958
1959 // To avoid double-padding, set it only for titlebar in case it
1960 // is placed on the header-bar.
1961 &.titlebar,
1962 .csd &,
1963 box &:only-child {
1964 padding: rem(5.3px);
1965 // draw hilight and shadows
1966 box-shadow: if($variant == 'light', $header-shadow-light,
1967 $header-shadow-dark);
1968
1969 .tiled & { @extend %tiled_integration; }
1970 .maximized & { @extend %maxd_integration; }
1971 }
1972
1973 // override unwanted side-borders
1974 box &:not(:only-child):first-child,
1975 box &:not(:only-child):last-child {
1976 border-left-color: $inverted_dark_color;
1977 border-right-color: $inverted_dark_color;
1978
1979 .tiled &,
1980 .maximized & {
1981 border-left-color: $panel_bg_color;
1982 border-right-color: $panel_bg_color;
1983 }
1984 }
1985
1986 box & { // Remove unneeded side shadows with dirty hacks
1987 &:not(:only-child):last-child {
1988 &:dir(ltr) {
1989 box-shadow: if($variant == 'light', $sub-header-shadow-light-ltr,
1990 $sub-header-shadow-dark-ltr);
1991
1992 .tiled & { @extend %tiled_integration; }
1993 .maximized & { @extend %maxd_integration; }
1994 }
1995 &:dir(rtl) {
1996 box-shadow: if($variant == 'light', $sub-header-shadow-light-rtl,
1997 $sub-header-shadow-dark-rtl);
1998
1999 .tiled & { @extend %tiled_integration; }
2000 .maximized & { @extend %maxd_integration; }
2001 }
2002 }
2003 }
2004
2005 // paned-separator is actually drawn by paned itself
2006 paned &:not(:only-child):last-child {
2007 &:dir(ltr) {
2008 // border-left: 1px solid $solid_dark_borders_color;
2009
2010 .tiled & { @extend %tiled_integration; }
2011 .maximized & { @extend %maxd_integration; }
2012 }
2013 &:dir(rtl) {
2014 // border-right: 1px solid $solid_dark_borders_color;
2015
2016 .tiled & { @extend %tiled_integration; }
2017 .maximized & { @extend %maxd_integration; }
2018 }
2019 }
2020}
2021
2022headerbar.selection-mode { // selection-mode specific
2023 box & { // Remove unneeded side shadows with dirty hacks
2024 &:not(:only-child):last-child {
2025 &:dir(ltr) {
2026 box-shadow: if($variant == 'light', $selected-header-shadow-light-ltr,
2027 $selected-header-shadow-dark-ltr);
2028
2029 .tiled & { @extend %tiled_integration; }
2030 .maximized & { @extend %maxd_integration; }
2031 }
2032 &:dir(rtl) {
2033 box-shadow: if($variant == 'light', $selected-header-shadow-light-rtl,
2034 $selected-header-shadow-dark-rtl);
2035
2036 .tiled & { @extend %tiled_integration; }
2037 .maximized & { @extend %maxd_integration; }
2038 }
2039 }
2040 }
2041}
2042
2043headerbar,
2044.titlebar { // set rounded corners
2045 border-top-left-radius: 2px;
2046 border-top-right-radius: 2px;
2047
2048 box &:not(:last-child):not(.titlebar) {
2049 &:dir(ltr) {
2050 border-top-left-radius: 2px;
2051 border-top-right-radius: 0;
2052 }
2053 &:dir(rtl) {
2054 border-top-left-radius: 0;
2055 border-top-right-radius: 2px;
2056 }
2057 }
2058
2059 box &:last-child:not(.titlebar) {
2060 &:dir(ltr) { border-top-left-radius: 0; }
2061 &:dir(rtl) { border-top-right-radius: 0; }
2062 }
2063}
2064
2065// force using rounded corners in case of paned titlebars
2066window:not(.maximized):not(.tiled) {
2067 paned.titlebar {
2068 border-top-left-radius: 2px;
2069 border-top-right-radius: 2px;
2070
2071 > headerbar:not(:last-child) {
2072 &:dir(ltr) {
2073 border-top-left-radius: 2px;
2074 border-top-right-radius: 0;
2075 }
2076 &:dir(rtl) {
2077 border-top-left-radius: 0;
2078 border-top-right-radius: 2px;
2079 }
2080 }
2081 > headerbar:last-child {
2082 &:dir(ltr) {
2083 border-top-left-radius: 0;
2084 border-top-right-radius: 2px;
2085 }
2086 &:dir(rtl) {
2087 border-top-left-radius: 2px;
2088 border-top-right-radius: 0;
2089 }
2090 }
2091 }
2092}
2093
2094// revive top-edge highlight border for SSDs
2095.ssd decoration {
2096 .titlebar {
2097 border-top: 1px solid $highlight_color;
2098 box-shadow: none;
2099 }
2100}
2101
2102// squared corners when the window is max'd or tiled
2103%tiled_integration {
2104 border-radius: 0;
2105 border-color: $panel_bg_color;
2106 border-width: 2px 0 0 0;
2107 border-top-color: $secondary_selected_bg_color;
2108 background-color: $panel_bg_color;
2109 box-shadow: none;
2110 &:backdrop { border-top-color: $track_color; }
2111}
2112
2113%maxd_integration {
2114 border-radius: 0;
2115 border-color: $panel_bg_color;
2116 border-width: 1px 0 0 0;
2117 background-color: $panel_bg_color;
2118 box-shadow: none;
2119}
2120
2121
2122/************
2123 * Pathbars *
2124 ************/
2125
2126.linked.path-bar,
2127.path-bar {
2128 button {
2129 &, &.text-button {
2130 padding: 0 rem(1.3px) 0;
2131 -gtk-outline-radius: 2px;
2132 }
2133 &.image-button { padding: 0 rem(5.3px) 0; }
2134
2135 &.text-button.image-button {
2136 -gtk-outline-radius: 2px;
2137 label {
2138 padding-left: 0;
2139 padding-right: 0;
2140 }
2141 }
2142
2143 &.text-button.image-button {
2144 label { // FIXME: is it still needed?
2145 &:last-child { padding-right: rem(5.3px); }
2146 &:first-child { padding-left: rem(5.3px); }
2147 }
2148 }
2149
2150 image { padding: rem(1.3px) rem(5.3px) 0; }
2151
2152 &.slider-button, // FIXME: workaround for Nautilus 3.20.0
2153 &.image-button.text-button.toggle {
2154 min-height: rem(17.3px);
2155 padding: 0 rem(1.3px) 0;
2156 -gtk-outline-radius: 2px;
2157 }
2158 }
2159}
2160
2161
2162/**************
2163 * Tree Views *
2164 **************/
2165
2166treeview.view {
2167 @at-root * {
2168 -GtkTreeView-horizontal-separator: 4;
2169 -GtkTreeView-grid-line-width: 1;
2170 -GtkTreeView-grid-line-pattern: '';
2171 -GtkTreeView-tree-line-width: 1;
2172 -GtkTreeView-tree-line-pattern: '';
2173 -GtkTreeView-expander-size: 16;
2174 }
2175
2176 border-left-color: $track_color; // this is actually the tree lines color,
2177 border-top-color: $borders_color; // while this is the grid lines color,
2178 // better then nothing
2179
2180 rubberband { @extend rubberband; } // to avoid borders being overridden
2181 // by the previously set props
2182
2183 border-radius: 0; // rest border radius in lists
2184
2185 &:hover,
2186 &:active { border-radius: 0; }
2187 &:selected {
2188 border-radius: 0;
2189 @extend %selected_items;
2190 }
2191
2192 // override foreground colours
2193 &, entry,
2194 entry > label {
2195 color: $secondary_fg_color;
2196 &:hover,
2197 &:active,
2198 &:focus { color: $fg_color; }
2199 &:selected { color: $selected_fg_color; }
2200 &:disabled {
2201 color: $insensitive_fg_color;
2202 &:selected { color: $insensitive_selected_fg_color; }
2203 }
2204 }
2205
2206 .separator {
2207 &, &:hover {
2208 color: transparent;
2209 background-color: $borders_color;
2210 }
2211 }
2212
2213 // clear backgrounds
2214 background-color: transparent;
2215 background-image: none;
2216 box-shadow: none;
2217
2218 &.dnd {
2219 border-style: solid none;
2220 border-width: 1px;
2221 border-color: mix($fg_color, $selected_bg_color, 50%);
2222 }
2223
2224 expander {
2225 arrow {
2226 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2227 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2228 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2229 &:selected {
2230 color: gtkopacity($selected_fg_color, 0.75);
2231 &:hover,
2232 &:active { color: $selected_fg_color; }
2233 }
2234 }
2235 }
2236
2237 &.progressbar { // progressbar bit in treeviews
2238 box-shadow: inset 0 -4px $accent_color;
2239 &:selected { box-shadow: inset 0 -4px $selected_fg_color; }
2240 }
2241
2242 &.trough { // progressbar trough in treeviews
2243 box-shadow: inset 0 -4px gtkalpha($accent_color, 0.2);
2244 &:selected { box-shadow: inset 0 -4px gtkalpha($selected_fg_color, 0.2); }
2245 }
2246
2247 &, paned & { // redraw some stuff for RhythmBox
2248 background-color: $base_color;
2249 &:hover,
2250 row:hover { color: $fg_color; }
2251 &:selected,
2252 row:selected { @extend %selected_items; }
2253 }
2254
2255 // see tests/testaccel to test
2256 acceleditor > label { background-color: $selected_bg_color; }
2257
2258 header {
2259 button {
2260 @extend row.activatable;
2261 min-height: rem(20px);
2262 padding: 0 rem(6.7px) 0;
2263 border-style: none solid solid none;
2264 border-width: 1px;
2265 border-color: $borders_color;
2266 border-radius: 0;
2267 box-shadow: none;
2268 background-color: $base_color;
2269 // font-weight: 700;
2270 color: $tertiary_fg_color;
2271 }
2272 &:hover,
2273 &:active {
2274 color: $fg_color;
2275 box-shadow: none;
2276 }
2277 &:disabled { background-color: $base_color; }
2278 &.dnd { @extend column-header.button.dnd; }
2279 }
2280 & button:last-child,
2281 &:last-child button { // treeview-like derived widgets in Banshee
2282 // and Evolution
2283 border-right-style: none;
2284 }
2285
2286 &.separator {
2287 min-height: rem(2px);
2288 color: transparent;
2289 background-color: $borders_color;
2290 }
2291}
2292
2293column-header.button.dnd { // for treeview-like derive widgets
2294 transition: none;
2295 border-left-style: solid;
2296 color: $selected_bg_color;
2297}
2298
2299
2300/*********
2301 * Menus *
2302 *********/
2303
2304.menubar,
2305menubar {
2306 -GtkWidget-window-dragging: true;
2307 padding: 0;
2308 box-shadow: $menubar-shadow;
2309 background-color: $inverted_dark_color;
2310 color: $inverted_secondary_fg_color; // FIXME: Gtk+3 firefox needs this!
2311
2312 .tiled &,
2313 .maximized & {
2314 background-color: $panel_bg_color;
2315 box-shadow: none;
2316 transition: none;
2317 }
2318
2319 > menuitem {
2320 min-height: rem(20px);
2321 padding: rem(5.3px) rem(8px) rem(6.7px);
2322 color: $inverted_secondary_fg_color;
2323 background-color: transparent;
2324 &:hover { // Seems like it :hover even with keyboard focus
2325 color: $inverted_fg_color;
2326 box-shadow: inset 0 -2px $selected_bg_color;
2327 }
2328 &:disabled {
2329 color: $insensitive_inverted_fg_color;
2330 box-shadow: none;
2331 }
2332 }
2333}
2334
2335.menu,
2336.context-menu,
2337menu {
2338 margin: rem(4px) 0;
2339 padding: rem(4px) 0;
2340 border-width: 1px; // adds borders in a non composited env
2341 border-style: solid;
2342 border-color: $base_color transparent transparent;
2343 background-color: $secondary_base_color;
2344
2345 .csd & { // axes borders in a composited env
2346 border-width: 1px;
2347 border-radius: 2px;
2348 border-color: $base_color transparent transparent;
2349 }
2350
2351 .menuitem,
2352 menuitem {
2353 min-height: rem(20px);
2354 min-width: rem(40px);
2355 padding: rem(5.3px) rem(8px) rem(6.7px);
2356 color: $secondary_fg_color;
2357 font: initial;
2358 text-shadow: none;
2359 transition: none;
2360 &:hover {
2361 color: $fg_color;
2362 background-color: gtkalpha(currentColor, 0.1);
2363 transition: none;
2364 }
2365 &:disabled { color: $insensitive_fg_color; }
2366
2367 // submenu indicators
2368 arrow {
2369 min-height: rem(16px);
2370 min-width: rem(16px);
2371
2372 &:dir(ltr) {
2373 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2374 margin-left: rem(10.7px);
2375 }
2376 &:dir(rtl) {
2377 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
2378 margin-right: rem(10.7px);
2379 }
2380 }
2381
2382 // avoids labels color being overridden, see
2383 // https://bugzilla.gnome.org/show_bug.cgi?id=767058
2384 label {
2385 &:dir(rtl),
2386 &:dir(ltr) { color: inherit; }
2387 }
2388 }
2389
2390 > arrow { // overflow buttons
2391 @extend button.flat;
2392 min-height: rem(16px);
2393 min-width: rem(16px);
2394 padding: rem(4px);
2395 border-style: none;
2396 border-radius: 0;
2397 background-color: $secondary_base_color;
2398 &.top {
2399 margin-top: rem(-5.3px);
2400 -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2401 border-bottom: 1px solid $borders_color;
2402 }
2403 &.bottom {
2404 margin-bottom: rem(-5.3px);
2405 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2406 border-top: 1px solid $borders_color;
2407 }
2408 &:hover { background-color: $secondary_dark_color; }
2409 &:disabled {
2410 color: transparent;
2411 background-color: transparent;
2412 border-color: transparent ;
2413 }
2414 }
2415
2416 > separator {
2417 &:dir(ltr) { margin-left: rem(32px); }
2418 &:dir(rtl) { margin-right: rem(32px); }
2419 }
2420}
2421
2422menuitem {
2423 accelerator { color: gtkalpha(currentColor, 0.55); }
2424
2425 separator {
2426 color: transparent;
2427 background: none;
2428 border-top: 1px solid $borders_color;
2429 &:dir(ltr) { margin-left: rem(32px); }
2430 &:dir(rtl) { margin-right: rem(32px); }
2431 }
2432}
2433
2434// round corners for CSD menus
2435.csd.popup { border-radius: 2px; }
2436
2437
2438/************
2439 * Popovers *
2440 ************/
2441
2442popover.background {
2443 padding: 2px;
2444 background-color: $secondary_base_color;
2445 box-shadow: $z-depth-3;
2446
2447 .csd &,
2448 & {
2449 border: 1px solid;
2450 border-color: $base_color $secondary_base_color $secondary_base_color;
2451 border-radius: 2px + 1px;
2452 }
2453
2454 &:backdrop { box-shadow: $z-depth-1; }
2455
2456 > list,
2457 > .view,
2458 > toolbar,
2459 &.osd > toolbar {
2460 border-style: none;
2461 border-image: none;
2462 background-color: transparent;
2463 }
2464
2465 button menuitem.flat,
2466 button.flat {
2467 transition: none;
2468 padding: 0 rem(10px) 0;
2469 background-color: transparent;
2470 background-size: $text_button_small;
2471 color: $secondary_fg_color;
2472 font: initial;
2473 &:hover {
2474 background-color: transparent; // remove double-bg
2475 color: $fg_color;
2476 }
2477
2478 // FIXME: label padding is ugly
2479 // vertical padding of GtkMenuItem * 0.5
2480 label { padding: rem(2.7px) 0 rem(3.3px); }
2481 }
2482
2483 button.image-button { padding: rem(6.7px); }
2484
2485 button.model.image-button { min-height: rem(26.7px); }
2486
2487 .linked > button {
2488 @include button(flat-normal);
2489 @extend %button_array;
2490 color: $secondary_fg_color;
2491 &:hover { @include button(flat-hover); }
2492 &:active { @include button(flat-active); }
2493 &:disabled { @include button(flat-insensitive); }
2494 &:checked {
2495 @include button(flat-checked);
2496 color: $fg_color;
2497 background-color: transparent;
2498 }
2499 &:checked:disabled { @include button(flat-checked-insensitive); }
2500 }
2501
2502 .csd &,
2503 & {
2504 &.touch-selection,
2505 &.magnifier {
2506 @extend %osd;
2507 button { @include button(flat-normal); }
2508 }
2509 }
2510
2511 &.osd { @extend %osd; }
2512
2513 separator { margin: rem(3px) 0; }
2514}
2515
2516
2517/*************
2518 * Notebooks *
2519 *************/
2520
2521notebook {
2522 padding: 0;
2523
2524 &.frame {
2525 border: 1px solid $solid_light_borders_color;
2526 transition: none;
2527
2528 // remove madness borders around header
2529 > header {
2530 &, &.frame { border-style: none; }
2531 @each $_header, $_margin in (top, -1px -1px 0 -1px),
2532 (bottom, 0 -1px -1px -1px),
2533 (left, -1px 0 -1px -1px),
2534 (right, -1px -1px -1px 0) {
2535 &.#{$_header} { margin: #{$_margin}; }
2536 }
2537 }
2538 }
2539
2540 > stack {
2541 transition: none;
2542 &:only-child {
2543 border: none;
2544 background-color: transparent;
2545 box-shadow: none;
2546 }
2547
2548 // the :not(:only-child) is for "hidden" notebooks
2549 &:not(:only-child),
2550 &:not(:first-child),
2551 &:not(:last-child) {
2552 border: none;
2553 background-color: $base_color;
2554 box-shadow: inset 0 0 0 1px $base_color;
2555 }
2556 }
2557
2558 > header {
2559 $tab_indicator_size: 2px;
2560 // vertical tab sizing
2561 $vt_vpadding: rem(5.3px);
2562 $vt_hpadding: rem(16px);
2563 // horizontal tab sizing
2564 $ht_vpadding: rem(5.3px);
2565 $ht_hpadding: rem(10px);
2566
2567 background-color: $bg_color;
2568 tabs { background-color: transparent; }
2569
2570 @each $_header, $_border in (top, 0 1px),
2571 (bottom, 0 -1px),
2572 (left, 1px 0),
2573 (right, -1px 0) {
2574 &.#{$_header} {
2575 // FIXME: outset borders
2576 box-shadow: #{$_border} $borders_color;
2577 }
2578 }
2579
2580 &.top {
2581 > tabs {
2582 margin: 0 rem(6px) -1px rem(6px);
2583 > tab {
2584 margin: 0 -1px 0 -1px; // 1px horizontal overlap
2585 padding: $vt_vpadding $vt_hpadding;
2586 border-bottom-width: $tab_indicator_size;
2587 box-shadow: none;
2588 &.reorderable-page {
2589 padding-left: rem(10px); // for a nicer close button
2590 padding-right: rem(10px); // placement
2591 border-left-width: 1px;
2592 border-right-width: 1px;
2593 }
2594 }
2595 }
2596 }
2597 &.bottom {
2598 > tabs {
2599 margin: -1px rem(6px) 0 rem(6px);
2600 > tab {
2601 margin: 0 -1px 0 -1px;
2602 padding: $vt_vpadding $vt_hpadding;
2603 border-top-width: $tab_indicator_size;
2604 box-shadow: none;
2605 &.reorderable-page {
2606 padding-left: rem(16px);
2607 padding-right: rem(16px);
2608 border-left-width: 1px;
2609 border-right-width: 1px;
2610 }
2611 }
2612 }
2613 }
2614 &.left {
2615 > tabs {
2616 margin: rem(6px) -1px rem(6px) 0;
2617 > tab {
2618 margin: -1px 0 -1px 0; // 1px vertical overlap
2619 padding: $ht_vpadding $ht_hpadding;
2620 border-right-width: $tab_indicator_size;
2621 box-shadow: none;
2622 &.reorderable-page {
2623 border-bottom-width: 1px;
2624 border-top-width: 1px;
2625 }
2626 }
2627 }
2628 }
2629 &.right {
2630 > tabs {
2631 margin: rem(6px) 0 rem(6px) -1px;
2632 > tab {
2633 margin: -1px 0 -1px 0;
2634 padding: $ht_vpadding $ht_hpadding;
2635 border-left-width: $tab_indicator_size;
2636 box-shadow: none;
2637 &.reorderable-page {
2638 border-bottom-width: 1px;
2639 border-top-width: 1px;
2640 }
2641 }
2642 }
2643 }
2644
2645 // Reorderable-page
2646 @each $_tab, $_border in (top, bottom),
2647 (bottom, top),
2648 (left, right),
2649 (right, left) {
2650 &.#{$_tab} tab.reorderable-page {
2651 border-#{$_border}-width: 2px;
2652 border-#{$_border}-color: transparent;
2653 &:hover {
2654 border-color: $borders_color;
2655 border-#{$_border}-width: 2px;
2656 border-#{$_border}-color: $borders_color;
2657 background-color: $base_color;
2658 box-shadow: none;
2659 }
2660 &:checked {
2661 border-color: $borders_color;
2662 border-#{$_border}-width: 2px;
2663 border-#{$_border}-color: $selected_bg_color;
2664 background-color: $base_color;
2665 box-shadow: if($variant == 'light', $tab-shadow-light,
2666 $tab-shadow-dark);
2667 }
2668 }
2669 }
2670
2671 // Arrow buttons
2672 &.top, &.bottom {
2673 // & tabs arrow.up { -gtk-icon-source:
2674 // -gtk-icontheme('pan-end-symbolic');
2675 // }
2676 // & tabs arrow.down { -gtk-icon-source:
2677 // -gtk-icontheme('pan-start-symbolic');
2678 // }
2679 }
2680 &.left, &.right {
2681 // & tabs arrow.up { -gtk-icon-source:
2682 // -gtk-icontheme('pan-down-symbolic');
2683 // }
2684 // & tabs arrow.down { -gtk-icon-source:
2685 // -gtk-icontheme('pan-up-symbolic');
2686 // }
2687 }
2688 & > tabs > arrow {
2689 transition: none;
2690 min-height: rem(16px);
2691 min-width: rem(16px);
2692 margin: 0 rem(6.7px);
2693 border-radius: 0;
2694 color: $tertiary_fg_color;
2695 &:hover,
2696 &:active { color: $fg_color; }
2697 &:disabled { color: $insensitive_fg_color; }
2698 }
2699
2700 &.top, &.bottom,
2701 &.left, &.right { // button outside the tabs
2702 button {
2703 min-height: rem(16px);
2704 min-width: rem(16px);
2705 padding: 0;
2706 border-radius: 100px;
2707 -gtk-outline-radius: 100px;
2708 & > image { padding: rem(6.7px); }
2709 }
2710 }
2711 }
2712
2713 tab {
2714 border-width: 0;
2715 border-style: solid;
2716 border-color: transparent;
2717 background-color: transparent;
2718
2719 outline-offset: rem(-6px);
2720
2721 // here's the interesting stuff
2722 &:hover { border-color: $track_color; }
2723 &:checked { border-color: $selected_bg_color; }
2724
2725 label { // tab text
2726 padding: rem(1.3px);
2727 font-weight: 700;
2728 color: $tertiary_fg_color;
2729 }
2730 &.reorderable-page label { // reorderable-page tab text
2731 padding: rem(5.3px) 0 rem(5.3px);
2732 }
2733 &:hover label {
2734 // hover tab text
2735 color: $fg_color;
2736 }
2737 &:checked label {
2738 // active tab text
2739 color: $fg_color;
2740 }
2741
2742 button { // tab close button
2743 @include button(flat-normal);
2744 min-width: rem(16px);
2745 min-height: rem(16px);
2746 padding: 0;
2747 border-radius: 100px;
2748 -gtk-outline-radius: 100px;
2749 background-size: $image_button_small;
2750 color: $tertiary_fg_color;
2751 &:hover { @include button(flat-hover); }
2752 &:active { @include button(flat-active); }
2753 &:disabled { @include button(flat-insensitive); }
2754 & > image { // this is a hack which makes tabs grow
2755 padding: rem(6.7px);
2756 }
2757 }
2758 &:hover button,
2759 &:checked button { // close button colours
2760 color: $fg_color;
2761 image { color: $fg_color; }
2762 }
2763 &:disabled button {
2764 color: $insensitive_fg_color;
2765 image { color: $insensitive_fg_color; }
2766 }
2767
2768 // special case for Gedit's tab 'close' button
2769 button.flat.image-button.small-button {
2770 min-width: rem(16px);
2771 min-height: rem(16px);
2772 padding: 0;
2773 // weird wdiget gets in our way
2774 & > widget > box > image { padding: rem(6.7px); }
2775 }
2776 }
2777
2778 &:not(.reorderable-page) > entry { @extend entry.flat; }
2779}
2780
2781
2782/**************
2783 * Scrollbars *
2784 **************/
2785
2786$_slider_min_width: rem(12px);
2787$_slider_min_length: rem(32px);
2788
2789@keyframes slow_down_vert {
2790 from {min-width: $_slider_min_width - rem(6px); }
2791 to { min-width: $_slider_min_width; }
2792}
2793
2794@keyframes slow_down_horz {
2795 from {min-height: $_slider_min_width - rem(6px); }
2796 to { min-height: $_slider_min_width; }
2797}
2798
2799scrollbar,
2800.scrollbar {
2801 // disable steppers
2802 @at-root * {
2803 -GtkScrollbar-has-backward-stepper: false;
2804 -GtkScrollbar-has-forward-stepper: false;
2805 }
2806
2807 background-color: gtkopacity($base_color, 0.55);
2808 transition-duration: 0.2s;
2809
2810 // scrollbar border
2811 &.top,
2812 &.bottom,
2813 &.left,
2814 &.right {
2815 &, .trough { border: none; }
2816 }
2817
2818 // slider
2819 slider,
2820 .slider {
2821 margin: 0;
2822 border-radius: 0;
2823 border: 0 none transparent;
2824 background-color: gtkopacity($tertiary_fg_color, 0.55);
2825 &:hover { background-color: gtkopacity($secondary_fg_color, 0.55); }
2826 &:active { background-color: $fg_color; }
2827 &:disabled { opacity: 0.4; }
2828 }
2829
2830 &.fine-tune slider { margin: 0; }
2831
2832 &.vertical {
2833 slider,
2834 .slider {
2835 min-width: $_slider_min_width;
2836 min-height: $_slider_min_length;
2837 margin: 0;
2838 }
2839 &.fine-tune slider { margin: 0; }
2840 }
2841 &.horizontal {
2842 slider,
2843 .slider {
2844 min-width: $_slider_min_length;
2845 min-height: $_slider_min_width;
2846 margin: 0;
2847 }
2848 &.fine-tune slider { margin: 0; }
2849 }
2850
2851 &.overlay-indicator {
2852 &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
2853 border-color: transparent;
2854 background-color: transparent;
2855
2856 slider {
2857 margin: 0;
2858 border: 0 none transparent;
2859 }
2860
2861 button {
2862 min-width: $_slider_min_width;
2863 min-height: $_slider_min_width;
2864 background-color: gtkopacity($tertiary_fg_color, 0.55);
2865 border-radius: 0;
2866 border: none;
2867 -gtk-icon-source: none;
2868 }
2869
2870 // w/o the following margin tweaks the slider shrinks
2871 // when hovering/dragging
2872 &.vertical {
2873 slider {
2874 min-width: $_slider_min_width - rem(6px);
2875 min-height: $_slider_min_length;
2876 margin: 0;
2877 }
2878
2879 button {
2880 min-width: rem(6px);
2881 margin: 0;
2882 }
2883 }
2884
2885 &.horizontal {
2886 slider {
2887 min-width: $_slider_min_length;
2888 min-height: $_slider_min_width - rem(6px);
2889 margin: 0;
2890 }
2891
2892 button {
2893 min-height: rem(6px);
2894 margin: 0;
2895 }
2896 }
2897 }
2898
2899 &.dragging,
2900 &.hovering { opacity: 0.8; }
2901
2902 &.hovering { // slow-down when deforming
2903 &.vertical slider { animation: slow_down_vert 0.2s linear forwards; }
2904 &.horizontal slider { animation: slow_down_horz 0.2s linear forwards; }
2905 }
2906 }
2907}
2908
2909
2910/**********
2911 * Switch *
2912 **********/
2913
2914switch {
2915 outline-offset: rem(-4px);
2916 font-size: 0;
2917 // similar to the scale
2918 border: rem(10px) solid transparent;
2919 border-radius: 100px;
2920 -gtk-outline-radius: 100px;
2921 background-color: $track_color;
2922
2923 &:disabled { color: $insensitive_fg_color; }
2924 &:checked {
2925 background-color: gtkopacity($selected_bg_color, 0.2);
2926 &:disabled { background-color: gtkopacity($selected_bg_color, 0.2); }
2927 }
2928 &:disabled {
2929 color: $insensitive_fg_color;
2930 background-color: $track_color;
2931 }
2932
2933 // slider styling
2934 // switch slider doesn't respond to its own states
2935 // but relies on the switch ones
2936 slider {
2937 @include button(normal);
2938 min-width: rem(20px);
2939 min-height: rem(20px);
2940 margin: rem(-4px) rem(-1px);
2941 padding: 0;
2942 border-radius: 100px;
2943 -gtk-outline-radius: 100px;
2944 }
2945 &:hover slider {
2946 @include button(hover);
2947 background-image: linear-gradient(to bottom,
2948 gtkalpha($selected_fg_color, 0.2),
2949 gtkalpha($selected_fg_color, 0.2));
2950 }
2951 &:checked slider { @include button(checked); }
2952 &:checked:hover slider {
2953 @include button(checked);
2954 background-image: linear-gradient(to bottom,
2955 gtkalpha($selected_fg_color, 0.2),
2956 gtkalpha($selected_fg_color, 0.2));
2957 box-shadow: $z-depth-2,
2958 inset 0 1px $highlight_color;
2959 }
2960 &:checked:disabled slider {
2961 @include button(checked-insensitive);
2962 // do not use any transparentize
2963 background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2964 background-image: none;
2965 box-shadow: none;
2966 }
2967 &:disabled slider {
2968 background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2969 background-image: none;
2970 box-shadow: none;
2971 }
2972
2973 row:selected & { // return to monochrome
2974 background-color: $bg_color;
2975 &:checked {
2976 background-color: $secondary_dark_color;
2977 &:disabled { background-color: $secondary_dark_color; }
2978 }
2979
2980 slider { background-color: $bg_color; }
2981 &:hover slider {
2982 background-image: linear-gradient(to bottom,
2983 gtkalpha($selected_fg_color, 0.2),
2984 gtkalpha($selected_fg_color, 0.2));
2985 }
2986 &:checked slider { background-color: $base_color; }
2987 &:checked:disabled slider { background-color: $secondary_dark_color; }
2988 }
2989
2990 // special case inside the grid container,
2991 // need to protect geometry by using pixmaps images...
2992 grid & {
2993 margin: rem(6px) rem(5px);
2994 font-size: 0;
2995 outline-color: transparent;
2996
2997 slider {
2998 min-width: rem(40px);
2999 min-height: rem(20px);
3000 }
3001
3002 // reset all of default troughs
3003 &,
3004 &:hover,
3005 &:checked,
3006 &:checked:hover,
3007 &:checked:disabled,
3008 &:disabled {
3009 margin: rem(6px) rem(5px);
3010 border: none;
3011 color: transparent;
3012 background: none;
3013 background-image: none;
3014 background-size: 40px 20px;
3015 background-repeat: no-repeat;
3016 background-position: right center;
3017 box-shadow: none;
3018
3019 &:dir(rtl) { background-position: left center; }
3020 }
3021
3022 // reset all of default sliders
3023 slider,
3024 &:hover slider,
3025 &:checked slider,
3026 &:checked:hover slider,
3027 &:checked:disabled slider,
3028 &:disabled slider {
3029 margin: 0;
3030 border: none;
3031 border-radius: 0;
3032 color: transparent;
3033 background: none;
3034 background-image: none;
3035 background-size: 40px 20px;
3036 background-repeat: no-repeat;
3037 background-position: right center;
3038 box-shadow: none;
3039
3040 &:dir(rtl) { background-position: left center; }
3041 }
3042
3043 // use ugly pixmaps
3044 &:not(:hover):not(:checked):not(:disabled) {
3045 background-image: -gtk-scaled(
3046 url("assets/toggle-off#{$asset_suffix}.png"),
3047 url("assets/toggle-off#{$asset_suffix}@2.png"));
3048 }
3049 &:hover {
3050 background-image: -gtk-scaled(
3051 url("assets/toggle-off-hover#{$asset_suffix}.png"),
3052 url("assets/toggle-off-hover#{$asset_suffix}@2.png"));
3053 }
3054 &:checked {
3055 background-image: -gtk-scaled(url("assets/toggle-on.png"),
3056 url("assets/toggle-on@2.png"));
3057 &:hover {
3058 background-image: -gtk-scaled(url("assets/toggle-on-hover.png"),
3059 url("assets/toggle-on-hover@2.png"));
3060 }
3061 &:disabled {
3062 background-image: -gtk-scaled(
3063 url("assets/toggle-on-insensitive#{$asset_suffix}.png"),
3064 url("assets/toggle-on-insensitive#{$asset_suffix}@2.png"));
3065 }
3066 }
3067 &:disabled {
3068 background-image: -gtk-scaled(
3069 url("assets/toggle-off-insensitive#{$asset_suffix}.png"),
3070 url("assets/toggle-off-insensitive#{$asset_suffix}@2.png"));
3071 }
3072 }
3073}
3074
3075
3076/*************************
3077 * Check and Radio items *
3078 *************************/
3079
3080@keyframes check_radio_hover {
3081 from {
3082 background-image: -gtk-gradient(radial,
3083 center center, 0,
3084 center center, 0.001,
3085 to(gtkalpha($secondary_fg_color, 0.1)),
3086 to(transparent));
3087 }
3088 to {
3089 background-image: -gtk-gradient(radial,
3090 center center, 0,
3091 center center, 0.5,
3092 to(gtkalpha($secondary_fg_color, 0.1)),
3093 to(transparent));
3094 }
3095}
3096
3097@keyframes check_radio_active {
3098 from {
3099 background-image: -gtk-gradient(radial,
3100 center center, 0,
3101 center center, 0.001,
3102 to(gtkalpha($selected_bg_color, 0.1)),
3103 to(transparent));
3104 }
3105 to {
3106 background-image: -gtk-gradient(radial,
3107 center center, 0,
3108 center center, 0.5,
3109 to(gtkalpha($selected_bg_color, 0.1)),
3110 to(transparent));
3111 }
3112}
3113
3114@keyframes check_radio_active_reverse {
3115 from {
3116 background-image: -gtk-gradient(radial,
3117 center center, 0,
3118 center center, 0.5,
3119 to(gtkalpha($selected_bg_color, 0.2)),
3120 to(transparent));
3121 }
3122 to {
3123 background-image: -gtk-gradient(radial,
3124 center center, 0,
3125 center center, 0.001,
3126 to(gtkalpha($selected_bg_color, 0)),
3127 to(transparent));
3128 }
3129}
3130
3131// draw regular check and radio items using our PNG assets
3132// all assets are rendered from assets.svg. never add pngs directly
3133
3134@each $w,$a in ('check', 'checkbox'),
3135 ('radio','radio') {
3136
3137 // standard checks and radios
3138 @each $s,$as in ('','-unchecked'),
3139 (':hover', '-unchecked-active'),
3140 (':active', '-unchecked-active'),
3141 (':disabled','-unchecked-insensitive'),
3142 (':indeterminate', '-mixed'),
3143 (':indeterminate:hover', '-mixed-active'),
3144 (':indeterminate:active', '-mixed-active'),
3145 (':indeterminate:disabled', '-mixed-insensitive'),
3146 (':checked', '-checked'),
3147 (':checked:hover', '-checked-active'),
3148 (':checked:active', '-checked-active'),
3149 (':checked:disabled','-checked-insensitive') {
3150 #{$w}#{$s},
3151 .#{$w}#{$s} {
3152 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
3153 url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
3154 -gtk-icon-shadow: none;
3155 }
3156 }
3157
3158 // menu
3159 @each $s,$as in ('',''),
3160 // (':active', '-checked'),
3161 (':disabled','-insensitive'),
3162 (':indeterminate', '-mixed'),
3163 // (':indeterminate:active', '-mixed'),
3164 (':indeterminate:disabled', '-mixed-insensitive'),
3165 (':checked', '-checked'),
3166 // (':checked:active', '-checked'),
3167 (':checked:disabled','-checked-insensitive') {
3168 menu menuitem #{$w}#{$s},
3169 menu menuitem .#{$w}#{$s} {
3170 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
3171 url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
3172 -gtk-icon-shadow: none;
3173 &:hover {
3174 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
3175 url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
3176 animation: none;
3177 -gtk-icon-shadow: none;
3178 transition: none;
3179 }
3180 }
3181 }
3182}
3183
3184// check/radio inside treeview
3185treeview.view check,
3186treeview.view radio {
3187 &, &:only-child {
3188 // margin: rem(-6.7px);
3189 // padding: rem(6.7px);
3190 padding: 0; // FIXME: negative margin doesn't work.
3191 }
3192}
3193
3194// check/radio inside selected-rows
3195@each $w,$a in ('check', 'checkbox'),
3196 ('radio','radio') {
3197
3198 // standard checks and radios
3199 @each $s,$as in ('','-unchecked'),
3200 (':active', '-unchecked'),
3201 (':indeterminate', '-mixed'),
3202 (':indeterminate:active', '-mixed'),
3203 (':checked', '-checked'),
3204 (':checked:active', '-checked') {
3205 treeview.view,
3206 row,
3207 row.activatable {
3208 #{$w}:selected#{$s},
3209 #{$w}:selected:focus#{$s} {
3210 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"),
3211 url("assets/#{$a}#{$as}-selected@2.png"));
3212 -gtk-icon-shadow: none;
3213 }
3214 // use dark variant for insensitive states
3215 #{$w}:selected:disabled,
3216 #{$w}:selected:focus:disabled {
3217 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-unchecked-insensitive-dark.png"),
3218 url("assets/#{$a}-unchecked-insensitive-dark@2.png"));
3219 }
3220 #{$w}:selected:indeterminate:disabled,
3221 #{$w}:selected:focus:indeterminate:disabled {
3222 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-mixed-insensitive-dark.png"),
3223 url("assets/#{$a}-mixed-insensitive-dark@2.png"));
3224 }
3225 #{$w}:selected:checked:disabled,
3226 #{$w}:selected:focus:checked:disabled {
3227 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-checked-insensitive-dark.png"),
3228 url("assets/#{$a}-checked-insensitive-dark@2.png"));
3229 }
3230 }
3231 }
3232}
3233
3234// selection-mode
3235@each $s,$as in ('','-selectionmode'),
3236 (':hover', '-active-selectionmode'),
3237 (':active', '-active-selectionmode'),
3238 (':disabled', '-insensitive-selectionmode'),
3239 (':checked', '-checked-selectionmode'),
3240 (':checked:hover', '-checked-active-selectionmode'),
3241 (':checked:active', '-checked-active-selectionmode'),
3242 (':disabled:checked', '-checked-insensitive-selectionmode') {
3243 .view.content-view check#{$s}:not( list) {
3244 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
3245 url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
3246 background-color: transparent;
3247 }
3248}
3249
3250checkbutton.text-button,
3251radiobutton.text-button {
3252 // this is for a nice focus on check and radios text
3253 padding: rem(2.7px) rem(6.7px);
3254 outline-offset: 0;
3255 color: $secondary_fg_color;
3256 &:hover,
3257 &:active,
3258 &:checked { color: $fg_color; }
3259 &:disabled,
3260 &:disabled:active,
3261 &:disabled:indeterminate {
3262 // set insensitive color, which is overriden otherwise
3263 // color: $insensitive_fg_color;
3264 }
3265}
3266
3267radio,
3268.radio,
3269check,
3270.check {
3271 min-width: rem(16px);
3272 min-height: rem(16px);
3273 // margin: 0 rem(6.7px) 0 rem(6.7px);
3274 margin: rem(-10px) rem(-3.3px);
3275 padding: rem(10px);
3276
3277 &:hover {
3278 animation: check_radio_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3279 }
3280 &:active {
3281 animation: check_radio_active_reverse 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3282 transition-duration: 0.15s;
3283 }
3284 &:hover:checked,
3285 &:hover:indeterminate {
3286 animation: check_radio_active 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3287 }
3288
3289 menu menuitem & {
3290 min-width: rem(16px);
3291 min-height: rem(16px);
3292 margin: 0;
3293 padding: 0;
3294 &:dir(ltr) { margin-right: rem(8px); }
3295 &:dir(rtl) { margin-left: rem(8px); }
3296
3297 &, &:hover, &:disabled { //FIXME: use button reset mixin
3298 border-color: transparent;
3299 background-image: none;
3300 background-color: transparent;
3301 box-shadow: none;
3302 -gtk-icon-shadow: none;
3303 color: inherit;
3304 animation: none;
3305 }
3306 }
3307}
3308
3309
3310/************
3311 * GtkScale *
3312 ************/
3313
3314@keyframes scale_enlarge {
3315 from { background-size: $scale; }
3316 to { background-size: 100%; }
3317}
3318
3319%scale_trough {
3320 border: 1px solid transparent;
3321 border-radius: 0;
3322 background-color: $track_color;
3323 box-shadow: none;
3324 &:disabled {
3325 color: $insensitive_fg_color;
3326 background-color: $track_color;
3327 }
3328
3329 &:backdrop {
3330 }
3331
3332 // OSD
3333 .osd & {
3334 }
3335}
3336
3337%scale_highlight {
3338 border: 1px solid transparent;
3339 border-radius: 0;
3340 background-color: $accent_color;
3341 &:disabled {
3342 color: $insensitive_fg_color;
3343 background-color: $track_color;
3344 }
3345
3346 &:backdrop {
3347 }
3348
3349 // OSD
3350 .osd & {
3351 }
3352}
3353
3354$_marks_lenght: 6px;
3355$_marks_distance: 6px;
3356
3357scale {
3358 // remove ugly outlines
3359 // outline-offset: -4px;
3360 // -gtk-outline-radius: 100px;
3361 outline-offset: 0;
3362 outline-width: 0;
3363
3364 min-height: 10px;
3365 min-width: 10px;
3366 padding: 10px;
3367
3368 &.fine-tune {
3369 // remove ugly outlines
3370 // outline-offset: rem(-4px);
3371 outline-offset: 0;
3372 outline-width: 0;
3373 &.horizontal {
3374 padding-top: 9px;
3375 padding-bottom: 9px;
3376 min-height: 10px;
3377 }
3378
3379 &.vertical {
3380 padding-left: 9px;
3381 padding-right: 9px;
3382 min-width: 10px;
3383 }
3384
3385 // to make the trough grow in fine-tune mode
3386 slider { margin: -9px; }
3387
3388 highlight,
3389 fill,
3390 trough {
3391 }
3392 }
3393
3394 slider {
3395 min-height: 20px;
3396 min-width: 20px;
3397 margin: -9px;
3398
3399 &:not(:hover):not(:active) { background-size: $scale; }
3400 // @include entry(normal);
3401 // border-radius: 50%;
3402 // background-color: $success_color;
3403 @each $s,$as in ('',''),
3404 // (':hover','-hover'),
3405 (':active','-active'),
3406 (':disabled','-insensitive') {
3407 &#{$s} {
3408 $_url: 'assets/slider#{$as}#{$asset_suffix}';
3409 border-style: none;
3410 border-radius: 0;
3411 background-color: transparent;
3412 background-image: -gtk-scaled(url('#{$_url}.png'),
3413 url('#{$_url}@2.png'));
3414 background-repeat: no-repeat;
3415 background-position: center;
3416 box-shadow: none;
3417 }
3418 }
3419 &:hover {
3420 animation: scale_enlarge 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3421 }
3422 &:disabled {
3423 }
3424 // OSD sliders
3425 .osd & {
3426 }
3427 }
3428
3429 // the backing bit sizing
3430 trough,
3431 fill,
3432 highlight {
3433 min-height: 2px;
3434 min-width: 2px;
3435 border-radius: 0;
3436 border-width: 0;
3437 }
3438
3439 // the backing bit styling
3440 trough { @extend %scale_trough; }
3441
3442 // the colored part of the backing bit
3443 highlight { @extend %scale_highlight; }
3444
3445 // this is another differently styled part of the backing bit,
3446 // the most relevant use case is for example in media player
3447 // to indicate how much video stream as been cached
3448 fill {
3449 @extend %scale_trough;
3450
3451 background-color: $accent_fill_color;
3452
3453 &:disabled {
3454 border-color: transparent;
3455 background-color: transparent;
3456 }
3457 }
3458
3459 // same opacity value with dim-label
3460 value { color: gtkalpha(currentColor, 0.55); }
3461
3462 separator {
3463 color: transparent;
3464 background-color: $track_color;
3465 }
3466
3467 // scales on selected list rows
3468 row:selected & {
3469 }
3470}
3471
3472scale { // marks color
3473 marks {
3474 color: gtkalpha(currentColor, 0.55);
3475 @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
3476 (bottom, bottom, top),
3477 (top, left, right),
3478 (bottom, right, left) {
3479 &.#{$marks_class} {
3480 margin-#{$marks_margin}: $_marks_distance;
3481 margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
3482 }
3483 }
3484 }
3485
3486 &.fine-tune marks {
3487 @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
3488 (bottom, bottom, top),
3489 (top, left, right),
3490 (bottom, right, left) {
3491 &.#{$marks_class} {
3492 margin-#{$marks_margin}: $_marks_distance;
3493 margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
3494 }
3495 }
3496 }
3497
3498 &.horizontal {
3499 indicator {
3500 min-height: $_marks_lenght;
3501 min-width: 1px;
3502 }
3503
3504 &.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
3505 }
3506
3507 &.vertical {
3508 indicator {
3509 min-height: 1px;
3510 min-width: $_marks_lenght;
3511 }
3512
3513 &.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
3514 }
3515}
3516
3517// scale with marks
3518@each $d,$dn in ('horizontal', 'horz'),
3519 ('vertical', 'vert') {
3520 @each $ws,$w,$we in (':last-child:not(:only-child)',
3521 'scale-has-marks-above', 'scale_marks_above'),
3522 (':first-child:not(:only-child)',
3523 'scale-has-marks-below', 'scale_marks_below') {
3524 scale.#{$d} {
3525 %#{$w}-#{$dn},
3526 contents#{$ws} > trough > slider {
3527 @each $s,$as in ('',''),
3528 // (':hover','-hover'),
3529 (':active','-active'),
3530 (':disabled','-insensitive') {
3531 &#{$s} {
3532 @extend %#{$we}_#{$dn}; // negative margin makes trough shrinking
3533 $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
3534 border-style: none;
3535 border-radius: 0;
3536 background-color: transparent;
3537 background-image: -gtk-scaled(url('#{$_url}.png'),
3538 url('#{$_url}@2.png'));
3539 background-repeat: no-repeat;
3540 background-position: center;
3541 box-shadow: none;
3542 }
3543 }
3544 }
3545 &.fine-tune {
3546 %#{$w}-#{$dn}-fine-tune,
3547 contents#{$ws} > tough > slider {
3548 @each $s,$as in ('',''),
3549 // (':hover','-hover'),
3550 (':active','-active'),
3551 (':disabled','-insensitive') {
3552 &#{$s} { @extend %#{$we}_#{$dn}_ft; }
3553 }
3554 }
3555 }
3556 }
3557 }
3558}
3559
3560scale { // scales for colour
3561 &.color {
3562 min-height: 0;
3563 min-width: 0;
3564
3565 // not actual trough colour
3566 trough {
3567 min-width: 2px;
3568 min-height: 2px;
3569 border-radius: 0;
3570 background-color: transparent;
3571 }
3572
3573 &.horizontal {
3574 padding: 0 0 10px 0;
3575
3576 trough { padding-bottom: 5px; }
3577
3578 slider {
3579 &, &:hover, &:disabled {
3580 @extend %scale-has-marks-above-horz;
3581 margin-top: 5px;
3582 margin-bottom: -10px;
3583 }
3584 }
3585 }
3586
3587 &.vertical {
3588 &:dir(ltr) {
3589 padding: 0 0 0 10px;
3590
3591 trough { padding-left: 5px; }
3592
3593 slider {
3594 &, &:hover, &:disabled {
3595 @extend %scale-has-marks-below-vert;
3596 margin-left: -10px;
3597 margin-right: 5px;
3598 }
3599 }
3600 }
3601
3602 &:dir(rtl) {
3603 padding: 0 10px 0 0;
3604
3605 trough { padding-right: 5px; }
3606
3607 slider {
3608 &, &:hover, &:disabled {
3609 @extend %scale-has-marks-above-vert;
3610 margin-left: 5px;
3611 margin-right: -10px;
3612 }
3613 }
3614 }
3615 }
3616
3617 &.fine-tune {
3618 &.horizontal {
3619 padding: 0 0 10px 0;
3620
3621 trough { padding-bottom: 5px; }
3622
3623 slider {
3624 @extend %scale-has-marks-above-horz-fine-tune;
3625 margin-top: 5px;
3626 margin-bottom: -10px;
3627 }
3628 }
3629
3630 &.vertical {
3631 &:dir(ltr) {
3632 padding: 0 0 0 10px;
3633
3634 trough { padding-left: 5px; }
3635
3636 slider {
3637 @extend %scale-has-marks-below-vert-fine-tune;
3638 margin-left: -10px;
3639 margin-right: 5px;
3640 }
3641 }
3642
3643 &:dir(rtl) {
3644 padding: 0 10px 0 0;
3645
3646 trough { padding-right: 5px; }
3647
3648 slider {
3649 @extend %scale-has-marks-above-vert-fine-tune;
3650 margin-left: 5px;
3651 margin-right: -10px;
3652 }
3653 }
3654 }
3655 }
3656 }
3657}
3658
3659%scale_marks_above_horz { margin: -15px -10px -10px -10px; }
3660%scale_marks_below_horz { margin: -10px -10px -15px -10px; }
3661%scale_marks_above_vert { margin: -10px -10px -10px -15px; }
3662%scale_marks_below_vert { margin: -10px -15px -10px -10px; }
3663%scale_marks_above_horz_ft { margin: -15px -10px -10px -10px; }
3664%scale_marks_below_horz_ft { margin: -10px -10px -15px -10px; }
3665%scale_marks_above_vert_ft { margin: -10px -10px -10px -15px; }
3666%scale_marks_below_vert_ft { margin: -10px -15px -10px -10px; }
3667
3668
3669/*****************
3670 * Progress bars *
3671 *****************/
3672
3673progressbar {
3674 // sizing
3675 &.horizontal {
3676 trough,
3677 progress { min-height: 4px; }
3678 }
3679
3680 &.vertical {
3681 trough,
3682 progress { min-width: 4px; }
3683 }
3684
3685 // the progress node is positioned after the trough border
3686 // this moves it over it.
3687 &.horizontal progress { margin: 0 -1px; }
3688 &.vertical progress { margin: -1px 0; }
3689
3690
3691 // FIXME: insensitive state missing and some other state
3692 // should be set probably
3693 font-size: 90%;
3694 color: $tertiary_fg_color;
3695
3696 trough {
3697 box-shadow: none;
3698 border-radius: 0;
3699 background-color: gtkopacity($accent_color, 0.2);
3700 }
3701
3702 progress {
3703 box-shadow: none;
3704 border-radius: 0;
3705 background-color: $accent_color;
3706 &.left {
3707 border-top-left-radius: 0;
3708 border-bottom-left-radius: 0;
3709 }
3710 &.right {
3711 border-top-right-radius: 0;
3712 border-bottom-right-radius: 0;
3713 }
3714 &.top {
3715 border-top-left-radius: 0;
3716 border-top-right-radius: 0;
3717 }
3718 &.bottom {
3719 border-bottom-left-radius: 0;
3720 border-bottom-right-radius: 0;
3721 }
3722 }
3723
3724 &.osd {
3725 min-width: 4px;
3726 min-height: 4px;
3727 trough {
3728 border-style: none;
3729 box-shadow: none;
3730 background-color: gtkopacity($accent_color, 0.2);
3731 }
3732 progress {
3733 background-image: none;
3734 background-color: $accent_color;
3735 border-style: none;
3736 border-radius: 0;
3737 }
3738 }
3739}
3740
3741%entry_progressbar { // progress inside entry
3742 margin: -10px -6px;
3743 border-style: none none solid;
3744 border-width: 2px;
3745 border-image: -gtk-gradient(radial,
3746 center bottom, 0,
3747 center bottom, 0.5,
3748 to($accent_color),
3749 to(transparent))
3750 0 0 2 / 0 0 2px;
3751 border-radius: 0;
3752 box-shadow: none;
3753 background-color: transparent;
3754 background-image: none;
3755}
3756
3757
3758/*************
3759 * Level Bar *
3760 *************/
3761
3762levelbar {
3763 box-shadow: $z-depth-1; // needs to be set here to avoid clipping
3764
3765 block {
3766 min-width: rem(36px);
3767 min-height: rem(4px);
3768 }
3769
3770 &.vertical block {
3771 min-width: rem(4px);
3772 min-height: rem(36px);
3773 }
3774
3775 trough {
3776 padding: rem(2px);
3777 border-radius: 2px;
3778 box-shadow: $z-depth-1;
3779 &:disabled { box-shadow: none; }
3780 &.horizontal { padding: rem(2px) rem(1px); }
3781 &.vertical { padding: rem(1px) rem(2px); }
3782 }
3783
3784 &.horizontal.discrete block { margin: 0 rem(1px); }
3785 &.vertical.discrete block { margin: rem(1px) 0; }
3786
3787 block {
3788 border-radius: 0;
3789 border: none;
3790 box-shadow: none;
3791 }
3792
3793 block.low { background-color: $warning_color; }
3794
3795 block:not(.empty),
3796 block.high { background-color: $selected_bg_color; }
3797
3798 block.full { background-color: $success_color; }
3799
3800 block.empty { background-color: $track_color; }
3801}
3802
3803
3804/****************
3805 * Print dialog *
3806*****************/
3807
3808printdialog {
3809 paper {
3810 padding: 0;
3811 color: $fg_color;
3812 border: 1px solid $borders_color;
3813 background-color: white;
3814 }
3815
3816 .dialog-action-box { margin: rem(12px); }
3817}
3818
3819
3820/**********
3821 * Frames *
3822 **********/
3823
3824frame > border,
3825.frame {
3826 margin: 0;
3827 padding: 0;
3828 border-radius: 0;
3829 border: 1px solid $borders_color;
3830 box-shadow: none;
3831 &.flat { border-style: none; }
3832}
3833
3834actionbar > frame > border { border-width: 1px 0 0; }
3835
3836actionbar > revealer > box {
3837 padding: rem(5.3px);
3838 border-top: 1px solid $borders_color;
3839}
3840
3841placessidebar,
3842scrolledwindow {
3843 viewport.frame { // avoid double borders when viewport inside
3844 // scrolled window
3845 border-style: none;
3846 }
3847
3848 // This is used by GtkScrolledWindow,
3849 // when content is touch-dragged past boundaries.
3850 // This draws a box on top of the content, the size changes programmatically.
3851 overshoot {
3852 &.top {
3853 @include overshoot(top);
3854 }
3855 &.bottom {
3856 @include overshoot(bottom);
3857 }
3858 &.left {
3859 @include overshoot(left);
3860 }
3861 &.right {
3862 @include overshoot(right);
3863 }
3864 }
3865
3866 // Overflow indication, works similarly to the overshoot,
3867 // the size if fixed tho.
3868 undershoot {
3869 &.top {
3870 @include undershoot(top, $base_color);
3871 }
3872 &.bottom {
3873 @include undershoot(bottom, $base_color);
3874 }
3875 &.left {
3876 @include undershoot(left, $base_color);
3877 }
3878 &.right {
3879 @include undershoot(right, $base_color);
3880 }
3881 }
3882
3883 junction { // the small square between two scrollbars
3884 border-color: transparent;
3885 // the border image is used to add the missing dot
3886 // between the borders, details, details, details...
3887 border-image: linear-gradient(to bottom,
3888 $borders_color 1px,
3889 transparent 1px) 0 0 0 1 / 0 1px stretch;
3890 background-color: $base_color;
3891
3892 &:dir(rtl) { border-image-slice: 0 1 0 0; }
3893 }
3894}
3895
3896// vbox and hbox separators
3897separator {
3898 // always disable separators
3899 color: transparent;
3900 background-color: $borders_color;
3901 min-width: 1px;
3902 min-height: 1px;
3903}
3904
3905
3906/*********
3907 * Lists *
3908 *********/
3909
3910list {
3911 border-color: $borders_color;
3912 background-color: $base_color;
3913}
3914
3915row {
3916 padding: 2px;
3917}
3918
3919row.activatable {
3920 // let's take care of background colors
3921 background-image: -gtk-gradient(radial,
3922 center center, 0,
3923 center center, 0.5,
3924 to(gtkalpha(currentColor, 0)),
3925 to(transparent)),
3926 linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
3927 background-repeat: no-repeat;
3928 background-position: center, center;
3929 background-size: $text_button_large;
3930 &.has-open-popup, // this is for indicating which sidebar row
3931 // generated a popover
3932 &:hover { // see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3933 transition: none;
3934 background-image: -gtk-gradient(radial,
3935 center center, 0,
3936 center center, 0.5,
3937 to(gtkalpha(currentColor, 0)),
3938 to(transparent)),
3939 linear-gradient(to bottom, gtkalpha(currentColor, 0.05), gtkalpha(currentColor, 0.05));
3940 }
3941
3942 &:active {
3943 animation: list_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3944 }
3945}
3946
3947// button spacing
3948row {
3949 & button.image-button {
3950 padding: rem(8px);
3951 background-size: $image_button_small;
3952 }
3953
3954 & button.circular {
3955 min-width: rem(13.3px);
3956 min-height: rem(13.3px);
3957 padding: rem(8px);
3958 background-size: $image_button_small;
3959 }
3960}
3961
3962row:selected {
3963 @extend %selected_items;
3964 button {
3965 &:disabled { color: $insensitive_secondary_selected_fg_color; }
3966 &.flat {
3967 color: $secondary_selected_fg_color;
3968 &:hover, &:active { color: $selected_fg_color; }
3969 &:disabled { color: $insensitive_secondary_selected_fg_color; }
3970 }
3971 }
3972}
3973
3974// transition
3975row {
3976 &:hover { transition: none; }
3977}
3978
3979
3980/*********************
3981 * App Notifications *
3982 *********************/
3983
3984.app-notification,
3985.app-notification.frame {
3986 @extend %osd;
3987 @extend toolbar.osd;
3988 button {
3989 }
3990 border { border: none; }
3991}
3992
3993
3994/*************
3995 * Expanders *
3996 *************/
3997
3998expander {
3999 padding: rem(2.7px) rem(4px) rem(3.3px);
4000
4001 arrow {
4002 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
4003 min-width: rem(16px);
4004 min-height: rem(16px);
4005 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
4006 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
4007 &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
4008 &:selected { color: $selected_fg_color; }
4009 }
4010
4011 label {
4012 color: $secondary_fg_color;
4013 &:hover,
4014 &:active { color: $fg_color; }
4015 &:selected { color: $selected_fg_color; }
4016 }
4017}
4018
4019
4020/************
4021 * Calendar *
4022 ***********/
4023
4024calendar {
4025 margin: rem(8px) 0;
4026 padding: rem(5.3px) rem(1.3px) rem(2.7px);
4027 border: 1px solid $borders_color;
4028 color: $fg_color;
4029 &:selected {
4030 border: none;
4031 border-radius: 100px;
4032 color: $selected_bg_color;
4033 background-color: transparent;
4034 background-image: -gtk-scaled(url("assets/calendar-day-selected.png"),
4035 url("assets/calendar-day-selected@2.png"));
4036 background-size: rem(19.3px) rem(19.3px);
4037 background-position: center top;
4038 background-repeat: no-repeat;
4039 }
4040
4041 &.header {
4042 border: 1px solid transparent;
4043 border-bottom-color: $borders_color;
4044 border-radius: 0;
4045 }
4046
4047 &.button,
4048 &.header.button {
4049 @include button(flat-normal);
4050 color: gtkalpha(currentColor, 0.20);
4051 background-size: $image_button_small;
4052 &:hover { @include button(flat-hover); }
4053 &:active { @include button(flat-active); }
4054 &:disabled { @include button(flat-insensitive); }
4055 }
4056
4057 &:indeterminate { color: gtkalpha(currentColor, 0.20); }
4058 &.highlight {
4059 color: gtkalpha(currentColor, 0.55);
4060 font-size: 90%;
4061 font-weight: 500;
4062 }
4063}
4064
4065
4066/***********
4067 * Dialogs *
4068 ***********/
4069
4070messagedialog { // Message Dialog styling
4071 .titlebar {
4072 min-height: rem(20px);
4073 border-style: none;
4074 border-top-left-radius: 2px;
4075 border-top-right-radius: 2px;
4076 color: $inverted_secondary_fg_color;
4077 background-color: $inverted_dark_color;
4078 }
4079
4080 entry {
4081 &, &:focus {
4082 color: $inverted_fg_color;
4083 caret-color: $inverted_fg_color;
4084 }
4085 &:disabled { color: $insensitive_inverted_fg_color; }
4086 }
4087
4088 button { // set foregrounds for fallback-mode
4089 color: $secondary_accent_color;
4090 &:hover,
4091 &:active,
4092 &:checked { color: $accent_color; }
4093 &:disabled { color: $insensitive_inverted_fg_color; }
4094 }
4095 .linked > button {
4096 border: 2px solid transparent;
4097 border-radius: 2px;
4098 border-image: none;
4099 box-shadow: none;
4100 }
4101
4102 @each $s,$as in ('','-unchecked'),
4103 (':hover', '-unchecked-active'),
4104 (':active', '-unchecked-active'),
4105 (':disabled','-unchecked-insensitive'),
4106 (':indeterminate', '-mixed'),
4107 (':indeterminate:hover', '-mixed-active'),
4108 (':indeterminate:active', '-mixed-active'),
4109 (':indeterminate:disabled', '-mixed-insensitive'),
4110 (':checked', '-checked'),
4111 (':checked:hover', '-checked-active'),
4112 (':checked:active', '-checked-active'),
4113 (':checked:disabled','-checked-insensitive') {
4114 check#{$s} { // always use dark variant
4115 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}-dark.png"),
4116 url("assets/checkbox#{$as}-dark@2.png"));
4117 }
4118
4119 radio#{$s} {
4120 -gtk-icon-source: -gtk-scaled(url("assets/radio#{$as}-dark.png"),
4121 url("assets/radio#{$as}-dark@2.png"));
4122 }
4123 }
4124
4125 checkbutton.text-button,
4126 radiobutton.text-button {
4127 color: $inverted_secondary_fg_color;
4128 &:hover,
4129 &:active,
4130 &:checked { color: $inverted_fg_color; }
4131 &:disabled,
4132 &:disabled:active,
4133 &:disabled:indeterminate { color: $insensitive_inverted_fg_color; }
4134 }
4135
4136 &.csd { // rounded bottom border styling for csd version
4137 &.background {
4138 // bigger radius for better antialiasing
4139 border-bottom-left-radius: 2px;
4140 border-bottom-right-radius: 2px;
4141 }
4142 }
4143
4144 &.background,
4145 &.csd.background {
4146 color: $inverted_secondary_fg_color;
4147 background-color: $inverted_dark_color;
4148 opacity: 0.9;
4149
4150 .dialog-action-area {
4151 button,
4152 .linked > button {
4153 @include button(flat-normal);
4154 border: 2px solid transparent;
4155 border-radius: 0;
4156 color: $inverted_secondary_fg_color;
4157 font-size: initial;
4158 font-weight: 700;
4159 background-size: $text_button_small;
4160 box-shadow: none;
4161 // &:first-child { border-bottom-left-radius: 2px; }
4162 // &:last-child { border-bottom-right-radius: 2px; }
4163
4164 background-color: transparent;
4165 color: $secondary_accent_color;
4166 &:hover {
4167 @include button(flat-hover);
4168 color: $accent_color;
4169 }
4170 &:active {
4171 @include button(flat-active);
4172 color: $accent_color;
4173 }
4174 &:checked {
4175 @include button(flat-checked);
4176 color: $secondary_accent_color;
4177 }
4178 &:disabled { @include button(flat-insensitive); }
4179
4180 &:first-child {
4181 border-radius: 0 0 0 2px;
4182 border-right-width: 0;
4183 }
4184 &:last-child {
4185 border-radius: 0 0 2px 0;
4186 border-left-width: 0;
4187 }
4188 }
4189 }
4190 }
4191}
4192
4193filechooser {
4194 .dialog-action-box { border-top: 1px solid $borders_color; }
4195
4196 #pathbarbox { border-bottom: 1px solid $bg_color; }
4197}
4198
4199filechooserbutton:drop(active) {
4200 box-shadow: none;
4201 border-color: transparent;
4202}
4203
4204
4205/***********
4206 * Sidebar *
4207 ***********/
4208
4209.sidebar {
4210 border: none;
4211 color: $secondary_fg_color;
4212
4213 &, list { // draw shadows
4214 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
4215 $sidebar-dark-ltr);
4216 }
4217 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
4218 $sidebar-dark-rtl);
4219 }
4220 }
4221
4222 // remove background from child-elements
4223 treeview.view,
4224 .frame,
4225 list { background-color: transparent; }
4226
4227 treeview.view {
4228 box-shadow: none;
4229 &:selected,
4230 row:selected { @extend %selected_items; }
4231 }
4232
4233 // fill actual background
4234 background-color: $secondary_dark_color;
4235 .frame list { box-shadow: none; }
4236
4237 list,
4238 row,
4239 row.activatable {
4240 color: $secondary_fg_color;
4241 background-color: transparent;
4242 font-weight: 500;
4243 &:hover { color: $fg_color; }
4244 &:selected {
4245 color: $selected_bg_color;
4246 background-color: transparent;
4247
4248 label { color: $selected_bg_color; }
4249 }
4250 }
4251
4252 // disable shadows on overshoot/undershoot area
4253 // of gtk3-demo's sidebar
4254 overshoot,
4255 undershoot { box-shadow: none; }
4256}
4257
4258stacksidebar {
4259 row,
4260 row.activatable {
4261 padding: rem(5.3px) rem(8px) rem(6.7px);
4262
4263 > label {
4264 padding-left: rem(5.3px);
4265 padding-right: rem(5.3px);
4266 }
4267
4268 color: $secondary_fg_color;
4269 background-color: transparent;
4270 font-weight: 500;
4271 &:hover { color: $fg_color; }
4272 &:selected {
4273 color: $selected_bg_color;
4274 background-color: transparent;
4275
4276 label { color: $selected_bg_color; }
4277 }
4278 &:backdrop { opacity: 1.0; }
4279
4280 &.needs-attention > label { @extend %needs_attention; }
4281 }
4282
4283 .frame list { // draw shadows
4284 // dim background with alpha-blending
4285 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
4286 rgba(18, 22, 0, 0.04));
4287
4288 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
4289 $sidebar-dark-ltr);
4290 }
4291 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
4292 $sidebar-dark-rtl);
4293 }
4294 }
4295
4296 // remove unwanted separator
4297 separator,
4298 .separator {
4299 @extend separator.wide;
4300 min-height: 0;
4301 border-color: transparent;
4302 background-color: transparent;
4303 color: transparent;
4304 }
4305}
4306
4307
4308/****************
4309 * File chooser *
4310 ****************/
4311
4312placessidebar {
4313 @extend scrolledwindow; // needs for overshoot / undershoot
4314
4315 list,
4316 row {
4317 // Background color for Nautilus and FileChooser sidebar
4318 background-color: $secondary_dark_color;
4319 }
4320
4321 row {
4322 // Needs overriding of the GtkListBoxRow padding
4323 padding: rem(5.3px) 0 rem(6.7px);
4324
4325 // Using margins/padding directly in the row
4326 // will make the animation of the new bookmark row jump
4327 & > revealer {
4328 padding: rem(4px) rem(14px) rem(4px) rem(12px);
4329 }
4330
4331 & image.sidebar-icon {
4332 opacity: 0.75; // dim the device icons
4333 &:dir(ltr) { padding-right: rem(6.7px); }
4334 &:dir(rtl) { padding-left: rem(6.7px); }
4335 }
4336
4337 & label.sidebar-label {
4338 &:dir(ltr) { padding-right: rem(2px); }
4339 &:dir(rtl) { padding-left: rem(2px); }
4340 }
4341
4342 button {
4343 &.image-button { // Eject button for removable storages
4344 padding: rem(6.7px); // Same as of placessidebar row
4345 @extend button.flat;
4346 }
4347 }
4348
4349 &:selected {
4350 color: $selected_bg_color;
4351
4352 label { color: $selected_bg_color; }
4353
4354 button.image-button {
4355 color: $secondary_selected_bg_color;
4356 &:hover,
4357 &:active { color: $selected_bg_color; }
4358 }
4359 }
4360
4361 // in the sidebar case it makes no sense to click the selected row
4362 // &:selected:active { box-shadow: none; }
4363
4364 // looks like the label doesn't get all the states so work around
4365 &:selected:disabled label { @extend %selected_items:disabled; }
4366 // &:selected:backdrop:disabled label {
4367 // @extend %selected_items:backdrop:disabled;
4368 // }
4369
4370 &.sidebar-placeholder-row {
4371 border: solid 1px $selected_bg_color;
4372 }
4373
4374 &.sidebar-new-bookmark-row {
4375 color: $selected_bg_color;
4376 }
4377
4378 &:drop(active):not(:disabled) {
4379 color: $drop_target_color;
4380 box-shadow: inset 0 1px $drop_target_color,
4381 inset 0 -1px $drop_target_color;
4382
4383 &:selected {
4384 color: $selected_fg_color;
4385 background-color: $drop_target_color;
4386 }
4387 }
4388 }
4389}
4390
4391placesview {
4392 .server-list-button > image {
4393 }
4394
4395 .server-list-button:checked > image {
4396 }
4397
4398 row.activatable:hover { background-color: transparent; }
4399
4400 // this selects the "connect to server" label
4401 > actionbar > revealer > box > label {
4402 padding-left: rem(8px);
4403 padding-right: rem(8px);
4404 }
4405}
4406
4407
4408/*********
4409 * Paned *
4410 *********/
4411
4412paned {
4413 > separator {
4414 min-width: 1px;
4415 min-height: 1px;
4416 border-style: none;
4417 background-color: transparent;
4418 -gtk-icon-source: none; // defeats the ugly default handle decoration
4419 // using background instead of a border
4420 // since the border will get rendered twice (?)
4421 background-image: image($borders_color);
4422 background-size: $separator_narrow;
4423 transition: none;
4424
4425 &:backdrop,
4426 &:selected { // FIXME: is this needed?
4427 background-image: image($solid_light_borders_color);
4428 transition: none;
4429 }
4430
4431 window & {
4432 // do not across over GtkHeaderBar with solid border
4433 &,
4434 &:backdrop,
4435 &:selected {
4436 // FIXME: still happaned double-border though
4437 background-image: image($paned_borders_color);
4438 transition: none;
4439 }
4440 }
4441
4442 window > grid.vertical & { // do not use transparentize
4443 &,
4444 &:backdrop,
4445 &:selected {
4446 background-image: image($solid_light_borders_color);
4447 transition: none;
4448 }
4449 }
4450
4451 &.wide {
4452 min-width: rem(6px);
4453 min-height: rem(6px);
4454 margin: 0;
4455 padding: 0;
4456 // FIXME: use opaque borders to avoid double-border
4457 background-color: $bg_color;
4458 background-image: image($solid_light_borders_color),
4459 image($solid_light_borders_color);
4460 background-size: $separator_wide;
4461
4462 &:backdrop,
4463 &:selected { // FIXME: is this needed?
4464 // background-image: none;
4465 background-image: image($solid_light_borders_color),
4466 image($solid_light_borders_color);
4467 }
4468 }
4469 }
4470
4471 &.horizontal > separator {
4472 background-repeat: repeat-y;
4473
4474 &:dir(ltr) {
4475 margin: 0 rem(-8px) 0 0;
4476 padding: 0 rem(8px) 0 0;
4477 }
4478 &:dir(rtl) {
4479 margin: 0 0 0 rem(-8px);
4480 padding: 0 0 0 rem(8px);
4481 }
4482
4483 &.wide {
4484 background-repeat: repeat-y, repeat-y;
4485 background-position: left, right;
4486 }
4487 }
4488
4489 &.vertical > separator {
4490 margin: 0 0 rem(-8px) 0;
4491 padding: 0 0 rem(8px) 0;
4492 background-repeat: repeat-x;
4493 background-position: top;
4494
4495 &.wide {
4496 background-repeat: repeat-x, repeat-x;
4497 background-position: bottom, top;
4498 }
4499 }
4500}
4501
4502
4503/**************
4504 * GtkInfoBar *
4505 **************/
4506
4507infobar {
4508 padding: rem(5.3px);
4509 border-width: 0 0 1px;
4510 border-style: solid;
4511 // do not use transparentize
4512 border-color: $solid_light_borders_color;
4513 background-color: $secondary_dark_color;
4514}
4515
4516.info,
4517.question,
4518.warning,
4519.error {
4520 // always use dark forefground
4521 &:not(.error) {
4522 color: if($variant == 'light', $secondary_fg_color,
4523 $secondary_fixed_fg_color);
4524 }
4525
4526 button {
4527 @include button(flat-normal);
4528 color: $secondary_fixed_fg_color;
4529 &:hover {
4530 @include button(flat-hover);
4531 color: $fixed_fg_color;
4532 }
4533 &:active {
4534 @include button(flat-active);
4535 color: $fixed_fg_color;
4536 }
4537 &:checked {
4538 @include button(flat-checked);
4539 color: $fixed_fg_color;
4540 }
4541 &:disabled { color: $insensitive_fixed_fg_color; }
4542 &.flat {
4543 color: $secondary_fixed_fg_color;
4544 &:hover, &:active { color: $fixed_fg_color; }
4545 &:disabled { color: $insensitive_fixed_fg_color; }
4546 }
4547
4548 &.image-button {
4549 min-height: rem(13.3px);
4550 min-width: rem(13.3px);
4551 padding: rem(6.7px) rem(2.7px) rem(6.7px);
4552 border-radius: 100px;
4553 -gtk-outline-radius: 100px;
4554 }
4555 }
4556
4557 selection { background-color: darken($selected_bg_color, 10%); }
4558
4559 progressbar { // use 'white' bit and trough
4560 trough { background-color: gtkopacity($selected_fg_color, 0.2); }
4561 progress { background-color: $selected_fg_color; }
4562 }
4563}
4564
4565.info { background-color: $info_bg_color; }
4566
4567.question { background-color: $question_bg_color; }
4568
4569.warning { background-color: $warning_bg_color; }
4570
4571.error { // use white test for this
4572 color: $selected_fg_color;
4573 background-color: $error_bg_color;
4574}
4575
4576
4577/************
4578 * Tooltips *
4579 ************/
4580
4581tooltip {
4582 &.background {
4583 // background-color needs to be set this way otherwise it gets drawn twice
4584 // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
4585 border: 1px solid gtkopacity($inverted_dark_color, 0.9);
4586 background-color: gtkopacity($inverted_dark_color, 0.9);
4587 background-clip: padding-box;
4588 }
4589
4590 color: $inverted_fg_color;
4591 padding: rem(4px);
4592 border-radius: 2px;
4593 box-shadow: none; // otherwise it gets inherited by windowframe.csd
4594
4595 // FIXME: we need a border or tooltips vanish on black background.
4596 decoration { background-color: transparent; }
4597
4598 * { // Yeah this is ugly
4599 background-color: transparent;
4600 color: $inverted_fg_color;
4601 }
4602}
4603
4604
4605/*****************
4606 * Color Chooser *
4607 *****************/
4608
4609colorswatch {
4610 // This widget is made of two boxes one on top of the other,
4611 // the lower box is colorswatch {} the other one is
4612 // colorswatch > .overlay {}, colorswatch has the programmatically set
4613 // background, so most of the style is applied to the overlay box.
4614
4615 box-shadow: $z-depth-1;
4616
4617 // we need to re-set the shadow here since it get axed by the previous bit
4618 &:selected { }
4619
4620 // base color corners rounding
4621 // to avoid the artifacts caused by rounded corner anti-aliasing
4622 // the base color sports a bigger radius.
4623 // nth-child is needed by the custom color strip.
4624 // The :not() madness is needed since actually the overlay is
4625 // selectable by colorswatch > .overlay and colorswatch.overlay,
4626 // I know it's weird, but this is gtk+, not a browser.
4627 &.top {
4628 border-top-left-radius: 2px;
4629 border-top-right-radius: 2px;
4630 }
4631 &.bottom {
4632 border-bottom-left-radius: 2px;
4633 border-bottom-right-radius: 2px;
4634 }
4635 &.left, &:first-child:not(.overlay):not(.top) {
4636 border-top-left-radius: 2px;
4637 border-bottom-left-radius: 2px;
4638 }
4639 &.right, &:last-child:not(.overlay):not(.bottom) {
4640 border-top-right-radius: 2px;
4641 border-bottom-right-radius: 2px;
4642 }
4643 &:only-child:not(.overlay) { border-radius: 2px; }
4644
4645 // overlay corner rounding
4646 &.top > .overlay {
4647 border-top-left-radius: 2px;
4648 border-top-right-radius: 2px;
4649 }
4650 &.bottom > .overlay {
4651 border-bottom-left-radius: 2px;
4652 border-bottom-right-radius: 2px;
4653 }
4654 &:first-child:not(.top) > .overlay {
4655 border-top-left-radius: 2px;
4656 border-bottom-left-radius: 2px;
4657 }
4658 &:last-child:not(.bottom) > .overlay {
4659 border-top-right-radius: 2px;
4660 border-bottom-right-radius: 2px;
4661 }
4662 &:only-child > .overlay { border-radius: 2px; }
4663
4664 // hover effect
4665 &:hover { box-shadow: $z-depth-2; }
4666
4667 // no hover effect for the colorswatch in the color editor
4668 GtkColorEditor & {
4669 border-radius: 2px; // same radius as the entry
4670 &:hover { box-shadow: $z-depth-1; }
4671 }
4672
4673 // indicator and keynav outline colors
4674 &.color-dark {
4675 color: white;
4676 }
4677 &.color-light {
4678 color: gtkopacity(black, 0.8);
4679 }
4680
4681 // border color
4682 &.overlay,
4683 &.overlay:selected {
4684 }
4685
4686 // make the add color button looks like, well, a button
4687 &#add-color-button {
4688 background-image: linear-gradient(to right,
4689 $error_bg_color 25%,
4690 $warning_bg_color 25%, $warning_bg_color 50%,
4691 $info_bg_color 50%, $info_bg_color 75%,
4692 $question_bg_color 75%);
4693 color: white;
4694 }
4695}
4696
4697// colorscale popup
4698colorchooser .popover.osd {
4699 padding: 3px;
4700 border-style: solid;
4701 border-width: 9px;
4702 border-radius: 2px;
4703 border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
4704 url("assets/osd-shadow#{$asset_suffix}@2.png"))
4705 10 / 10px stretch;
4706 box-shadow: none;
4707 color: $inverted_fg_color;
4708 background-color: $inverted_dark_color;
4709 &:backdrop {
4710 border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
4711 url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
4712 10 / 10px stretch;
4713 }
4714
4715 label {
4716 color: $accent_color;
4717 font-weight: 700;
4718 }
4719}
4720
4721
4722/********
4723 * Misc *
4724 ********/
4725
4726// content view (grid/list)
4727.content-view {
4728 background-color: $bg_color;
4729 // &:hover { -gtk-icon-effect: highlight; }
4730 & rubberband { @extend rubberband; }
4731}
4732
4733@keyframes volume_hover {
4734 from {
4735 background-image: -gtk-gradient(radial,
4736 center center, 0,
4737 center center, 0.001,
4738 to(gtkalpha(currentColor, 0)),
4739 to(transparent));
4740 }
4741 to {
4742 background-image: -gtk-gradient(radial,
4743 center center, 0,
4744 center center, 0.5,
4745 to(gtkalpha(currentColor, 0.1)),
4746 to(transparent));
4747 }
4748}
4749
4750.scale-popup {
4751 .osd & { @extend %osd; }
4752
4753 .osd & button.flat { // FIXME: quick hack, redo properly
4754 }
4755
4756 .osd & .vertical button,
4757 & .vertical button { // +/- buttons on GtkVolumeButton popup
4758 // padding: rem(10.7px);
4759 border-radius: 100px;
4760 -gtk-outline-radius: 100px;
4761 background-color: transparent;
4762 color: $secondary_fg_color;
4763
4764 &:first-child { // '+' button
4765 &:hover {
4766 @include button(flat-hover);
4767 background: none;
4768 color: $success_color;
4769 animation: volume_hover 0.2s linear forwards;
4770 }
4771 &:disabled {
4772 @include button(flat-insensitive);
4773 background: none;
4774 color: gtkalpha($success_color, 0.4);
4775 }
4776 }
4777 &:last-child { // '-' button
4778 &:hover {
4779 @include button(flat-hover);
4780 background: none;
4781 color: $error_color;
4782 animation: volume_hover 0.2s linear forwards;
4783 }
4784 &:disabled {
4785 @include button(flat-insensitive);
4786 background: none;
4787 color: gtkalpha($error_color, 0.4);
4788 }
4789 }
4790 }
4791 .osd & button,
4792 button {
4793 border-radius: 100px;
4794 -gtk-outline-radius: 100px;
4795 background-color: transparent;
4796 color: $secondary_fg_color;
4797
4798 &:first-child { // '-' button
4799 &:hover {
4800 @include button(flat-hover);
4801 background: none;
4802 color: $error_color;
4803 animation: spin_hover 0.2s linear forwards;
4804 }
4805 &:disabled {
4806 @include button(flat-insensitive);
4807 background: none;
4808 color: gtkalpha($error_color, 0.4);
4809 }
4810 }
4811 &:last-child { // '+' button
4812 &:hover {
4813 @include button(flat-hover);
4814 background: none;
4815 color: $success_color;
4816 animation: spin_hover 0.2s linear forwards;
4817 }
4818 &:disabled {
4819 @include button(flat-insensitive);
4820 background: none;
4821 color: gtkalpha($success_color, 0.4);
4822 }
4823 }
4824 }
4825}
4826
4827button.flat.scale { // standalone Speaker/Mic buttons
4828 // I assume both are image-button *by default*
4829 // with the image-button/text-button classes automagically applied
4830 // depending on the button child these selectors can be deleted.
4831 // @extend %image_button;
4832 min-width: rem(17.3px);
4833 min-height: rem(17.3px);
4834 padding: rem(10px);
4835 border-radius: 100px;
4836 -gtk-outline-radius: 100px;
4837}
4838
4839.nautilus-window .floating-bar {
4840 @extend %osd;
4841 // @extend toolbar.osd;
4842 padding: rem(1.3px) 0 rem(2.7px);
4843 border: 1px solid transparent;
4844 border-radius: 0;
4845 color: $inverted_secondary_fg_color;
4846 background-color: $inverted_dark_color;
4847 transition: none;
4848
4849 button {
4850 min-height: rem(13.3px);
4851 min-width: rem(13.3px);
4852 padding: rem(4px);
4853 margin: 0 rem(4px);
4854 color: $secondary_accent_color;
4855 &:hover,
4856 &:active,
4857 &:checked { color: $accent_color; }
4858 &:disabled { color: gtkopacity($accent_color, 0.4); }
4859 }
4860
4861 spinner {
4862 min-height: rem(12px);
4863 min-width: rem(12px);
4864 padding: rem(6.7px) 0 rem(6.7px);
4865 margin: 0 rem(-1px);
4866 }
4867}
4868
4869// axes left border and border radius
4870.nautilus-window .floating-bar.bottom.left {
4871 border-width: 1px 1px 0 0;
4872 border-radius: 0 2px + 1px 0 0;
4873 // border-width: 8px 8px 0 0;
4874 // border-image-width: 10px 10px 0 0;
4875}
4876
4877// axes right border and border radius
4878.nautilus-window .floating-bar.bottom.right {
4879 border-width: 1px 0 0 1px;
4880 border-radius: 2px + 1px 0 0 0;
4881 // border-width: 8px 0 0 8px;
4882 // border-image-width: 10px 0 0 10px;
4883}
4884
4885
4886/**********************
4887 * Window Decorations *
4888 *********************/
4889
4890decoration {
4891 transition: none;
4892 border-radius: 2px 2px 0 0;
4893 // lamefun trick to get rounded borders regardless of CSD use
4894 border-width: 0;
4895 box-shadow: $z-depth-4;
4896
4897 // FIXME rationalize shadows
4898
4899 // this is used for the resize cursor area
4900 margin: 8px;
4901
4902 &:backdrop {
4903 // the transparent shadow here is to enforce that the shadow extents don't
4904 // change when we go to backdrop, to prevent jumping windows.
4905 // The biggest shadow should be in the same order then in the active state
4906 // or the jumping will happen during the transition.
4907 box-shadow: $z-depth-2-backdrop;
4908 transition: none;
4909 }
4910
4911 .fullscreen &,
4912 .maximized &,
4913 .tiled & {
4914 border-radius: 0;
4915 transition: none;
4916 }
4917
4918 .popup & { box-shadow: none; }
4919
4920 // server-side decorations as used by mutter
4921 .ssd & {
4922 button {
4923 @extend button.flat;
4924 border-radius: 100px;
4925 -gtk-outline-radius: 100px;
4926 }
4927
4928 // just doing borders, wm draws actual shadows
4929 // otherwise incorrect shadows are appeared
4930 box-shadow: $z-depth-1-backdrop;
4931
4932 .tiled & .titlebar {
4933 @extend %tiled_integration;
4934 transition: none;
4935 }
4936 .maximized & .titlebar {
4937 @extend %maxd_integration;
4938 transition: none;
4939 }
4940 }
4941
4942 .csd.popup & {
4943 border-radius: 2px;
4944 box-shadow: $z-depth-3;
4945 }
4946 tooltip.csd & {
4947 border-radius: 2px;
4948 box-shadow: $z-depth-2;
4949 }
4950 message-dialog.csd & {
4951 border-radius: 2px;
4952 box-shadow: $z-depth-4;
4953 &:backdrop {
4954 box-shadow: $z-depth-2-backdrop;
4955 transition: none;
4956 }
4957 }
4958
4959 .solid-csd & {
4960 border-radius: 2px 2px 0 0;
4961 margin: -1px;
4962 background-color: $bg_color;
4963 border: none;
4964 box-shadow: none;
4965 }
4966}
4967
4968// Window manager buttons
4969.csd headerbar,
4970.csd .titlebar {
4971 button.titlebutton,
4972 &.selection-mode button.titlebutton {
4973 @extend %fade_effect;
4974 @extend button.flat;
4975 min-width: rem(13.3px);
4976 min-height: rem(13.3px);
4977 padding: rem(10px);
4978 border-radius: 100px;
4979 -gtk-outline-radius: 100px;
4980
4981
4982 &.close,
4983 &.minimize,
4984 &.maximize {
4985 &:hover:backdrop,
4986 &:active:backdrop { opacity: 1.0; }
4987
4988 > image {
4989 min-height: 16px;
4990 min-width: 16px;
4991 color: transparent;
4992 background-size: 16px 16px;
4993 background-repeat: no-repeat;
4994 background-position: center;
4995 }
4996 }
4997
4998 // raised 'Close' button
4999 &.close {
5000 > image {
5001 background-image: -gtk-scaled(url("assets/window-close.png"),
5002 url("assets/window-close@2.png"));
5003 }
5004
5005 &:hover {
5006 @include button(hover);
5007 color: $selected_fg_color;
5008 background-color: $destructive_color;
5009
5010 > image {
5011 background-image: -gtk-scaled(url("assets/window-close-active.png"),
5012 url("assets/window-close-active@2.png"));
5013 }
5014 }
5015 &:active {
5016 @include button(active);
5017 color: $selected_fg_color;
5018 background-color: $selected_bg_color;
5019
5020 > image {
5021 background-image: -gtk-scaled(url("assets/window-close-active.png"),
5022 url("assets/window-close-active@2.png"));
5023 }
5024 }
5025 }
5026
5027 &.minimize {
5028 > image {
5029 background-image: -gtk-scaled(url("assets/window-minimize.png"),
5030 url("assets/window-minimize@2.png"));
5031 }
5032
5033 &:hover,
5034 &:active {
5035 > image {
5036 background-image: -gtk-scaled(url("assets/window-minimize-active.png"),
5037 url("assets/window-minimize-active@2.png"));
5038 }
5039 }
5040 }
5041
5042 &.maximize {
5043 > image {
5044 background-image: -gtk-scaled(url("assets/window-maximize.png"),
5045 url("assets/window-maximize@2.png"));
5046 }
5047
5048 &:hover,
5049 &:active {
5050 > image {
5051 background-image: -gtk-scaled(url("assets/window-maximize-active.png"),
5052 url("assets/window-maximize-active@2.png"));
5053 }
5054 }
5055 }
5056 }
5057}
5058
5059.csd.maximized headerbar,
5060.csd.maximized .titlebar {
5061 & button.titlebutton,
5062 &.selection-mode button.titlebutton {
5063 &.maximize {
5064 > image {
5065 background-image: -gtk-scaled(url("assets/window-unmaximize.png"),
5066 url("assets/window-unmaximize@2.png"));
5067 }
5068
5069 &:hover,
5070 &:active {
5071 > image {
5072 background-image: -gtk-scaled(url("assets/window-unmaximize-active.png"),
5073 url("assets/window-unmaximize-active@2.png"));
5074 }
5075 }
5076 }
5077 }
5078}
5079
5080// specific button styling for SSDs
5081.ssd .titlebar {
5082 button.titlebutton {
5083 &.close,
5084 &.minimize,
5085 &.maximize { // reset styling
5086 color: transparent;
5087 background-size: 28px 28px;
5088 background-repeat: no-repeat;
5089 background-position: center;
5090 background: none;
5091 box-shadow: none;
5092 &:backdrop,
5093 &:hover:backdrop,
5094 &:active:backdrop { color: transparent; }
5095 }
5096
5097 @each $_class,
5098 $_state,
5099 $_shadow in ('', '', none),
5100 (':hover', '-hover', $z-depth-2),
5101 (':active', '-active', $z-depth-2),
5102 (':backdrop', '-backdrop', none),
5103 (':backdrop:hover', '-backdrop-hover', $z-depth-2),
5104 (':backdrop:active', '-backdrop-active', $z-depth-2) {
5105 &.close#{$_class} {
5106 background-image: -gtk-scaled(
5107 url("assets/window-close-ssd#{$_state}.png"),
5108 url("assets/window-close-ssd#{$_state}@2.png"));
5109 box-shadow: #{$_shadow};
5110 }
5111 }
5112
5113 @each $_class, $_state in ('', ''),
5114 (':hover', '-hover'),
5115 (':active', '-active'),
5116 (':backdrop', '-backdrop'),
5117 (':backdrop:hover', '-backdrop-hover'),
5118 (':backdrop:active', '-backdrop-active') {
5119 &.minimize#{$_class} {
5120 background-image: -gtk-scaled(
5121 url("assets/window-minimize-ssd#{$_state}.png"),
5122 url("assets/window-minimize-ssd#{$_state}@2.png"));
5123 }
5124 }
5125
5126 @each $_class, $_state in ('', ''),
5127 (':hover', '-hover'),
5128 (':active', '-active'),
5129 (':backdrop', '-backdrop'),
5130 (':backdrop:hover', '-backdrop-hover'),
5131 (':backdrop:active', '-backdrop-active') {
5132 &.maximize#{$_class} {
5133 background-image: -gtk-scaled(
5134 url("assets/window-maximize-ssd#{$_state}.png"),
5135 url("assets/window-maximize-ssd#{$_state}@2.png"));
5136 }
5137 }
5138 }
5139}
5140
5141.maximized.ssd .titlebar {
5142 button.titlebutton {
5143 @each $_class, $_state in ('', ''),
5144 (':hover', '-hover'),
5145 (':active', '-active'),
5146 (':backdrop', '-backdrop'),
5147 (':backdrop:hover', '-backdrop-hover'),
5148 (':backdrop:active', '-backdrop-active') {
5149 &.maximize#{$_class} {
5150 background-image: -gtk-scaled(
5151 url("assets/window-unmaximize-ssd#{$_state}.png"),
5152 url("assets/window-unmaximize-ssd#{$_state}@2.png"));
5153 }
5154 }
5155 }
5156}
5157
5158.ssd decoration .titlebar {
5159 // shrink titlebar height for SSD
5160 button.titlebutton {
5161 min-width: 26.7px;
5162 min-height: 26.7px;
5163 padding: 0;
5164 }
5165}
5166
5167// catch all extend :)
5168%selected_items {
5169 background-color: $selected_bg_color;
5170
5171 @at-root %nobg_selected_items, & {
5172 color: $selected_fg_color;
5173 &:disabled { color: $insensitive_selected_fg_color; }
5174 &:backdrop {
5175 // color: $backdrop_selected_fg_color;
5176 &:disabled { color: $insensitive_selected_fg_color; }
5177 }
5178 }
5179}
5180
5181.monospace { font-family: Monospace; }
5182
5183
5184/**********************
5185 * Touch Copy & Paste *
5186 *********************/
5187
5188// touch selection handlebars for the Popover.osd above
5189cursor-handle {
5190 background-color: $success_color;
5191 background-image: none;
5192 box-shadow: none;
5193 border-style: none;
5194 @each $s,$as in ('',''),
5195 (':hover','-hover'),
5196 (':active','-active') { // no need for insensitive
5197 // and backdrop
5198 &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
5199 $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
5200 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5201 url('#{$_url}@2.png'));
5202 padding-left: 10px;
5203 }
5204 &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
5205 $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
5206 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5207 url('#{$_url}@2.png'));
5208 padding-right: 10px;
5209 }
5210 &.insertion-cursor#{$s}:dir(ltr),
5211 &.insertion-cursor#{$s}:dir(rtl) {
5212 $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
5213 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5214 url('#{$_url}@2.png'));
5215 }
5216 }
5217}
5218
5219// Decouple the font of context menus from their entry/textview
5220.context-menu {
5221 font: initial;
5222}
5223
5224popover.touch-selection {
5225 font: initial;
5226 color: $fg_color;
5227 background-color: $base_color;
5228 box-shadow: $z-depth-2;
5229 &:backdrop { box-shadow: $z-depth-1; }
5230 button {
5231 }
5232}
5233
5234button.circular {
5235 border-radius: 100px;
5236 -gtk-outline-radius: 100px;
5237
5238 label { padding: 0; }
5239}
5240
5241// shortcut window keys
5242.keycap {
5243 min-width: rem(20px);
5244 min-height: rem(26px);
5245 margin-top: rem(2.7px);
5246 margin-bottom: rem(3.3px);
5247 padding: 0 rem(6px);
5248 border: none;
5249 border-radius: 2px;
5250 color: $fg_color;
5251 background-color: $base_color;
5252 box-shadow: $z-depth-1;
5253 font-size: 90%;
5254 font-weight: 500;
5255}
5256
5257// FIXME: needs to be done widget by widget,
5258// this wildcard should really die
5259*:drop(active):focus,
5260*:drop(active) {
5261 border-color: $drop_target_color;
5262 box-shadow: inset 0 0 0 1px $drop_target_color;
5263 caret-color: $drop_target_color;
5264}
5265
5266// FIXME: aggregate with buttons
5267stackswitcher button.circular,
5268stackswitcher button.text-button.circular {
5269 min-width: rem(37.3px);
5270 min-height: rem(37.3px);
5271 padding: 0;
5272}
5273
5274// undershoot for speciic-cases
5275undershoot {
5276 box > scrolledwindow & {
5277 &.top { @include undershoot(top, $bg_color); }
5278 &.bottom { @include undershoot(bottom, $bg_color); }
5279 &.left { @include undershoot(left, $bg_color); }
5280 &.right { @include undershoot(right, $bg_color); }
5281 }
5282
5283 placessidebar &,
5284 .sidebar & {
5285 &.top { @include undershoot(top, $secondary_dark_color); }
5286 &.bottom { @include undershoot(bottom, $secondary_dark_color); }
5287 &.left { @include undershoot(left, $secondary_dark_color); }
5288 &.right { @include undershoot(right, $secondary_dark_color); }
5289 }
5290}
5291