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