ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: 24px;
5
$medium_size: 36px;
6
$large_size: 48px;
7
$bar_size: 4px;
8
$menuitem_size: 28px;
9
$container_padding: 6px;
11
$material_radius: 2px;
12
$material_faster: 0.2s;
13
$material_slower: 0.3s;
14
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
15
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
16
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
17
// FIXME: color's transition is too slow
18
$material_transition: all $material_slower $material_ease_out, color 0;
19
$shadow_transition: box-shadow $material_faster $material_ease_out;
20
* {
22
padding: 0;
23
background-clip: padding-box;
24
-GtkToolButton-icon-spacing: 4;
26
-GtkTextView-error-underline-color: $error_color;
27
// The size for scrollbars. The slider is 2px smaller, but we keep it
29
// up so that the whole area is sensitive to button presses for the
30
// slider. The stepper button is larger in both directions, the slider
31
// only in the width
32
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
36
-GtkWidget-text-handle-width: 24;
38
-GtkWidget-text-handle-height: 24;
39
-GtkDialog-button-spacing: 4;
41
-GtkDialog-action-area-border: 0;
42
// We use the outline properties to signal the focus properties
44
// to the adwaita engine: using real CSS properties is faster,
45
// and we don't use any outlines for now.
46
outline-style: solid;
48
outline-width: 2px;
49
outline-color: $track_color;
50
outline-offset: -4px;
51
-gtk-outline-radius: 2px;
52
-gtk-secondary-caret-color: $selected_bg_color;
54
}
55
/***************
58
* Base States *
59
***************/
60
.background {
61
background-color: $bg_color;
62
color: $fg_color;
63
}
64
/*
66
These wildcard seems unavoidable, need to investigate.
67
Wildcards are bad and troublesome, use them with care,
68
or better, just don't.
69
Everytime a wildcard is used a kitten dies, painfully.
70
*/
71
*:disabled { -gtk-icon-effect: dim; }
73
.gtkstyle-fallback {
75
background-color: $bg_color;
76
color: $fg_color;
77
&:hover {
79
background-color: darken($bg_color, 5%);
80
color: $fg_color;
81
}
82
&:active {
84
background-color: darken($bg_color, 10%);
85
color: $fg_color;
86
}
87
&:disabled {
89
background-color: $bg_color;
90
color: $insensitive_fg_color;
91
}
92
&:selected {
94
background-color: $selected_bg_color;
95
color: $selected_fg_color;
96
}
97
}
98
.view,
100
%view {
101
@extend row.activatable;
102
background-color: $base_color;
104
color: $fg_color;
105
&:hover, &:active, &:selected { border-radius: 2px; }
107
&:disabled {
109
// background-color: $secondary_base_color;
110
color: $insensitive_fg_color;
111
}
112
&:selected { @extend %selected_items; }
114
}
115
.view,
117
textview {
118
text {
119
// @extend %view;
120
background-color: $base_color;
122
color: $fg_color;
123
&:disabled {
125
// background-color: $secondary_base_color;
126
color: $insensitive_fg_color;
127
}
128
selection { @extend %selected_items; }
130
}
131
}
132
textview border {
134
background-color: $secondary_base_color;
135
color: $tertiary_fg_color;
136
}
137
iconview { @extend .view; }
139
.rubberband,
141
rubberband {
142
border: 1px solid $secondary_selected_bg_color;
143
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
144
}
145
flowbox {
147
rubberband { @extend rubberband; }
148
flowboxchild {
150
outline-offset: -2px;
151
padding: 4px;
152
border-radius: 2px;
153
&:selected { @extend %selected_items; }
155
}
156
}
157
label {
159
&.separator {
160
@extend .dim-label;
161
color: $fg_color;
163
}
164
row:selected &,
166
&:selected { @extend %nobg_selected_items; }
167
selection {
169
background-color: $selected_bg_color;
170
color: $selected_fg_color;
171
}
172
&:disabled {
174
color: $insensitive_fg_color;
175
selection { @extend %selected_items:disabled; }
177
}
178
}
179
.dim-label { opacity: $hint_opacity; }
181
assistant {
183
.sidebar {
184
padding: 4px 0;
185
// background-color: $base_color;
186
// border-top: 1px solid $borders_color;
187
}
188
// &.csd .sidebar { border-top-style: none; }
190
.sidebar label {
192
min-height: $medium_size;
193
padding: 0 12px;
194
color: $tertiary_fg_color;
195
font-weight: 500;
196
&.highlight { color: $fg_color; }
198
}
199
}
200
%osd, .osd { opacity: $higher_opacity; }
202
/*********************
205
* Spinner Animation *
206
*********************/
207
@keyframes spin {
208
to { -gtk-icon-transform: rotate(1turn); }
209
}
210
@keyframes spin_colors {
212
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
213
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
214
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
215
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
216
}
217
spinner {
219
background: none;
220
opacity: 0; // non spinning spinner makes no sense
221
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
222
&:checked {
224
opacity: 1;
225
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
226
&:disabled { opacity: $disabled_opacity; }
228
}
229
}
230
/****************
233
* Text Entries *
234
****************/
235
%entry,
236
entry {
237
%entry_basic, & {
238
min-height: $medium_size;
239
padding: 0 8px;
240
border-radius: 2px;
241
@include entry(normal);
243
&:focus { @include entry(focus); }
245
&:disabled { @include entry(insensitive); }
247
&.flat {
249
border-radius: 0;
250
@include entry(flat-normal);
252
&:focus { @include entry(flat-focus); }
254
&:disabled { @include entry(flat-insensitive); }
256
}
257
image { // icons inside the entry
259
color: gtkalpha(currentColor, $enabled_opacity);
260
&:hover, &:active { color: currentColor; }
262
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
264
&.left { padding-left: 2px; padding-right: 6px; }
266
&.right { padding-left: 6px; padding-right: 2px; }
268
}
269
undershoot {
271
&.left { @include undershoot(left); }
272
&.right { @include undershoot(right); }
274
}
275
selection { @extend %selected_items; }
277
// entry error and warning style
279
@each $e_type, $e_color in (error, $error_color),
280
(warning, $warning_color) {
281
&.#{$e_type} {
282
@include entry(normal, $e_color);
283
&:focus { @include entry(focus, $e_color); }
285
&:disabled { @include entry(insensitive, $e_color); }
287
&.flat {
289
@include entry(flat-normal, $e_color);
290
&:focus { @include entry(flat-focus, $e_color); }
292
&:disabled { @include entry(flat-insensitive, $e_color); }
294
}
295
}
296
}
297
&:drop(active) {
299
// box-shadow: inset 0 0 0 2px $accent_bg_color;
300
}
301
.osd & {
303
}
304
}
305
progress {
307
margin: 2px -6px;
308
border-style: none none solid;
309
border-width: 2px;
310
border-color: $selected_bg_color;
311
// border-radius: 0;
312
// box-shadow: none;
313
background-color: transparent;
314
// background-image: none;
315
}
316
// linked entries
318
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
319
// Vertically linked entries
321
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
322
}
323
treeview entry {
325
&.flat, & {
326
min-height: 0;
327
padding: 2px;
328
border-radius: 0;
329
background-color: $base_color;
330
&, &:focus {
332
border-image: none;
333
box-shadow: none;
334
}
335
}
336
}
337
/***********
340
* Buttons *
341
***********/
342
// stuff for .needs-attention
343
@keyframes needs_attention {
344
from {
345
background-image: -gtk-gradient(radial,
346
center center, 0,
347
center center, 0.001,
348
to($accent_bg_color),
349
to(transparent));
350
}
351
to {
353
background-image: -gtk-gradient(radial,
354
center center, 0,
355
center center, 0.5,
356
to($accent_bg_color),
357
to(transparent));
358
}
359
}
360
%button,
362
button {
363
@at-root %button_basic, & {
364
min-height: 24px;
365
min-width: 16px;
366
padding: 6px 10px;
367
border-radius: 2px;
368
font-weight: 500;
369
@include button(normal);
371
&:hover { @include button(hover); }
373
&:active { @include button(active); }
375
&:disabled { @include button(insensitive); }
377
&:checked { @include button(checked); }
379
&:checked:disabled { @include button(checked-insensitive); }
381
&.flat {
383
@include button(flat-normal);
384
&:hover { @include button(flat-hover); }
386
&:active { @include button(flat-active); }
388
&:disabled { @include button(flat-insensitive); }
390
&:checked { @include button(flat-checked); }
392
&:checked:disabled { @include button(flat-checked-insensitive); }
394
}
395
&.image-button {
397
min-width: 24px;
398
padding: 6px;
399
-gtk-outline-radius: 100px;
400
border-radius: 100px;
401
}
402
&.text-button {
404
padding-left: 16px;
405
padding-right: 16px;
406
}
407
&.text-button.image-button {
409
padding-left: 10px;
410
padding-right: 10px;
411
-gtk-outline-radius: 2px;
412
border-radius: 2px;
413
label {
415
&:last-child { padding-left: 2px; padding-right: 6px; }
416
&:first-child { padding-left: 6px; padding-right: 2px; }
417
}
418
}
419
.linked > & { @extend %linked; }
421
.linked.vertical > & { @extend %linked_vertical; }
423
.linked > &.flat,
425
.linked.vertical > &.flat {
426
border-radius: 2px;
427
&.image-button {
429
-gtk-outline-radius: 100px;
430
border-radius: 100px;
431
}
432
&.text-button.image-button {
434
-gtk-outline-radius: 2px;
435
border-radius: 2px;
436
}
437
}
438
&:drop(active) {
440
// box-shadow: inset 0 0 0 2px $accent_bg_color;
441
}
442
}
443
@at-root %button_selected, row:selected & {
445
&:disabled { color: $insensitive_secondary_selected_fg_color; }
446
&.flat {
448
color: $secondary_selected_fg_color;
449
&:hover, &:active { color: $selected_fg_color; }
451
&:disabled { color: $insensitive_secondary_selected_fg_color; }
453
}
454
}
455
// big standalone buttons like in Documents pager
457
&.osd {
458
padding: 12px 16px;
459
&.image-button { padding: 12px; }
461
&:disabled { opacity: 0; }
463
}
464
//overlay / OSD style
466
@at-root %osd_button,
467
.osd & {
468
}
469
// Suggested and Destructive Action buttons
471
@each $b_type, $b_color in (suggested-action, $suggested_color),
472
(destructive-action, $destructive_color) {
473
&.#{$b_type} {
474
background-color: $b_color;
475
color: $selected_fg_color;
476
// @include button(normal, $b_color, white);
478
// &:hover { @include button(hover, $b_color, white); }
480
// &:active, &:checked { @include button(active, $b_color, white); }
482
&:disabled { @include button(insensitive, $b_color, white); }
484
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
486
&.flat {
488
background-color: transparent;
489
color: $b_color;
490
// @include button(flat-normal, $b_color, white);
492
// &:hover { @include button(flat-hover, $b_color, white); }
494
// &:active, &:checked { @include button(flat-active, $b_color, white); }
496
&:disabled { @include button(flat-insensitive, $b_color, white); }
498
}
499
.osd & {
501
}
502
}
503
}
504
.stack-switcher > & {
506
// to position the needs attention dot, padding is added to the button
507
// child, a label needs just lateral padding while an icon needs vertical
508
// padding added too.
509
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
511
> label {
513
padding-left: 6px; // label padding
514
padding-right: 6px; //
515
}
516
> image {
518
padding-left: 6px; // image padding
519
padding-right: 6px; //
520
padding-top: 3px; //
521
padding-bottom: 3px; //
522
}
523
&.text-button {
525
// compensate text-button paddings
526
padding-left: 10px;
527
padding-right: 10px;
528
}
529
&.image-button {
531
// we want image buttons to have a 1:1 aspect ratio, so compensation
532
// of the padding added to the GtkImage is needed
533
padding-left: 4px;
534
padding-right: 4px;
535
}
536
&.needs-attention {
538
> label,
539
> image { @extend %needs_attention; }
540
&:checked {
542
> label,
543
> image {
544
animation: none;
545
background-image: none;
546
}
547
}
548
}
549
}
550
// hide separators
552
separator {
553
min-width: 0;
554
min-height: 0;
555
background: transparent;
556
}
557
// &.font,
559
// &.file { separator { background-color: transparent; }}
560
// &.font { > box > box > label { font-weight: bold; }}
562
// inline-toolbar buttons
564
.inline-toolbar & {
565
@extend %button_basic.flat;
566
&:not(.text-button) { @extend %button_basic.image-button; }
568
}
569
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
571
}
572
%needs_attention {
574
animation: needs_attention $material_slower $material_ease_out forwards;
575
background-repeat: no-repeat;
576
background-position: right 3px;
577
background-size: 6px 6px;
578
&:dir(rtl) { background-position: left 3px; }
580
}
581
// all the following is for the +|- buttons on inline toolbars, that way
583
// should really be deprecated...
584
.inline-toolbar toolbutton > button { // redefining the button look is
585
// needed since those are flat...
586
}
587
// More inline toolbar buttons
589
toolbar.inline-toolbar toolbutton {
590
// > button.flat { @extend %linked_middle; }
591
// &:first-child > button.flat { @extend %linked:first-child; }
593
// &:last-child > button.flat { @extend %linked:last-child; }
595
// &:only-child > button.flat { @extend %linked:only-child; }
597
}
598
%linked_middle {
600
border-radius: 0;
601
}
602
%linked {
604
-gtk-outline-radius: 2px;
605
@extend %linked_middle;
607
&:first-child {
609
border-top-left-radius: 2px;
610
border-bottom-left-radius: 2px;
611
}
612
&:last-child {
614
border-top-right-radius: 2px;
615
border-bottom-right-radius: 2px;
616
}
617
&:only-child {
619
border-radius: 2px;
620
}
621
}
622
%linked_vertical_middle {
624
border-radius: 0;
625
}
626
%linked_vertical{
628
-gtk-outline-radius: 2px;
629
@extend %linked_vertical_middle;
631
&:first-child {
633
border-top-left-radius: 2px;
634
border-top-right-radius: 2px;
635
}
636
&:last-child {
638
border-bottom-left-radius: 2px;
639
border-bottom-right-radius: 2px;
640
}
641
&:only-child {
643
border-radius: 2px;
644
}
645
}
646
/* menu buttons */
648
modelbutton.flat,
649
.menuitem.button.flat {
650
min-height: $menuitem_size;
651
padding-left: 8px;
652
padding-right: 8px;
653
border-radius: 2px;
654
color: inherit;
655
@extend %button_basic.flat;
657
&:selected { @extend %selected_items; }
659
check,
661
radio {
662
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
663
&, &:hover { background-image: none; }
665
&:active { animation: none; }
667
&:last-child { margin-left: -8px; margin-right: -16px; }
669
&:first-child { margin-left: -16px; margin-right: -8px; }
671
}
672
check:not(:indeterminate):checked { @extend %check_checked; }
674
// radio:not(:indeterminate):checked { @extend %radio_checked; }
676
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
678
}
679
modelbutton.flat arrow {
681
background: none;
682
&:hover { background: none; }
684
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
686
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
688
}
689
button.color {
691
min-height: $small_size;
692
min-width: $small_size;
693
padding: $container_padding;
694
colorswatch:only-child {
696
// &, overlay { border-radius: 0; }
697
}
698
}
699
/*********
702
* Links *
703
*********/
704
*:link {
705
&, &:hover, &:active { color: $link_color; }
706
&:visited {
708
&, &:hover, &:active { color: $link_visited_color; }
709
}
710
@at-root %link_selected,
712
&:selected,
713
*:selected & { color: $selected_fg_color; }
714
}
715
button:link,
717
button:visited {
718
@extend *:link;
719
> label { text-decoration-line: underline; }
721
}
722
/*****************
724
* GtkSpinButton *
725
*****************/
726
spinbutton {
727
&:not(.vertical) {
728
// in this horizontal configuration, the whole spinbutton
729
// behaves as the entry, so we extend the entry styling
730
// and nuke the style on the internal entry
731
@extend %entry;
732
padding: 0;
734
%spinbutton_entry,
736
entry {
737
min-width: $large_size - 16px;
738
// reset all the other props since the spinbutton node is styled here
739
margin: 0;
740
border-image: none;
741
border-radius: 0;
742
box-shadow: none;
743
background-color: transparent;
744
}
745
button {
747
min-height: $small_size;
748
min-width: $small_size;
749
// margin: $container_padding;
750
padding: 0;
751
border: solid $container_padding transparent;
752
@extend %button_basic.flat;
754
@extend %button_basic.image-button;
756
&.up { margin-left: -$container_padding / 2; }
758
&.down { margin-right: -$container_padding / 2; }
760
}
761
}
762
// OSD horizontal
764
.osd &:not(.vertical) {
765
button {
766
}
767
}
768
// Vertical
770
&.vertical {
771
// in the vertical configuration, we treat the spinbutton
772
// as a box, and tweak the style of the entry in the middle
773
// so that it's linked
774
// FIXME: this should not be set at all, but otherwise it gets the wrong
776
// color
777
&:disabled { color: $insensitive_fg_color; }
778
&:drop(active) {
780
box-shadow: none;
781
}
782
entry {
784
min-height: $medium_size;
785
min-width: $large_size;
786
padding: 0;
787
}
788
button {
790
min-height: $medium_size;
791
min-width: $large_size;
792
padding: 0;
793
@extend %button_basic.flat;
795
&.up { border-radius: 2px 2px 0 0; }
797
&.down { border-radius: 0 0 2px 2px; }
799
}
800
}
801
// OSD vertical
803
.osd &.vertical button:first-child {
804
}
805
// Misc
807
treeview &:not(.vertical) {
808
min-height: 0;
809
border-style: none;
810
border-radius: 0;
811
entry {
813
min-height: 0;
814
padding: 1px 2px;
815
}
816
}
817
}
818
/**************
821
* ComboBoxes *
822
**************/
823
combobox {
824
arrow {
825
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
826
min-height: 16px;
827
min-width: 16px;
828
}
829
menu,
831
.menu {
832
padding: 2px 0;
833
menuitem {
835
min-height: $medium_size;
836
padding: 0 10px;
837
}
838
}
839
&.linked {
841
button:nth-child(2) {
842
&:dir(ltr) { @extend %linked:last-child; }
843
&:dir(rtl) { @extend %linked:first-child; }
844
}
845
}
846
&:drop(active) { // FIXME: untested
848
box-shadow: none;
849
// button.combo { @extend %button_basic:drop(active); }
851
}
852
}
853
.linked > combobox > box > button.combo {
855
// the combo is a composite widget so the way we do button linking doesn't
856
// work, special case needed. See
857
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
858
&:dir(ltr),
860
&:dir(rtl) { @extend %linked_middle; } // specificity bump
861
}
862
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
864
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
865
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
866
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
868
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
869
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
870
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
871
/************
874
* Toolbars *
875
************/
876
toolbar {
877
-GtkWidget-window-dragging: true;
878
padding: $container_padding / 2;
879
background-color: $bg_color;
880
// on OSD
882
.osd & { background-color: transparent; }
883
// stand-alone OSD toolbars
885
&.osd {
886
transition: $shadow_transition;
887
padding: $container_padding;
888
border-radius: 2px;
889
box-shadow: $z-depth-2;
890
background-color: $base_color;
891
&:backdrop { box-shadow: $z-depth-1; }
893
&.left,
895
&.right,
896
&.top,
897
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
898
button { @extend %button_basic.flat; }
900
}
901
// toolbar separators
903
&.horizontal separator { margin: $container_padding / 2; }
904
&.vertical separator { margin: $container_padding / 2; }
905
&:not(.inline-toolbar):not(.osd) {
907
scale,
908
entry,
909
spinbutton,
910
button { margin: $container_padding / 2; }
911
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
913
}
914
}
915
//searchbar, location-bar & inline-toolbar
917
.inline-toolbar {
918
padding: $container_padding;
919
border-style: solid;
920
border-width: 0 1px 1px;
921
border-color: $borders_color;
922
background-color: $secondary_base_color;
923
}
924
searchbar,
926
.location-bar {
927
padding: $container_padding;
928
border-style: solid;
929
border-width: 0 0 1px;
930
border-color: $borders_color;
931
background-color: $bg_color;
932
background-clip: border-box;
933
}
934
/***************
937
* Header bars *
938
***************/
939
%titlebar,
940
headerbar {
941
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
942
min-height: $large_size;
943
padding: 0 $container_padding;
944
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
945
background-color: $headerbar_color;
946
color: $selected_fg_color;
947
&:backdrop {
949
color: $secondary_selected_fg_color;
950
}
951
.title {
953
padding-left: 12px;
954
padding-right: 12px;
955
font-weight: bold;
956
}
957
.subtitle {
959
padding-left: 12px;
960
padding-right: 12px;
961
font-size: smaller;
962
@extend .dim-label;
964
}
965
button:not(.suggested-action):not(.destructive-action) {
967
@extend %button_basic.flat;
968
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
970
currentColor 0%,
971
transparent 0%)
972
0 0 0 / 0 0 0px;
973
color: gtkalpha(currentColor, $enabled_opacity);
974
&:hover, &:active { color: currentColor; }
976
&:disabled {
978
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
979
> label { color: inherit; }
981
}
982
&:checked {
984
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
985
currentColor 100%,
986
transparent 0%)
987
0 0 2 / 0 0 2px;
988
background-color: transparent;
989
color: currentColor;
990
&:disabled {
992
background-color: transparent;
993
color: gtkalpha(currentColor, $disabled_opacity);
994
> label { color: inherit; }
996
}
997
}
998
}
999
button.suggested-action, button.destructive-action {
1001
&:disabled {
1002
color: gtkalpha(currentColor, $disabled_opacity);
1003
> label { color: inherit; }
1005
}
1006
}
1007
&.selection-mode {
1009
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1010
animation: header_ripple_effect $material_slower $material_ease_out;
1011
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1012
background-color: $selected_bg_color;
1013
color: $selected_fg_color;
1014
&:backdrop {
1016
color: $secondary_selected_fg_color;
1017
}
1018
.subtitle:link { @extend *:link:selected; }
1020
button:not(.suggested-action):not(.destructive-action) {
1022
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1023
currentColor 0%,
1024
transparent 0%)
1025
0 0 0 / 0 0 0px;
1026
// color: gtkalpha(currentColor, $enabled_opacity);
1027
&, &:hover, &:active { color: currentColor; }
1029
&:disabled {
1031
color: gtkalpha(currentColor, $disabled_opacity);
1032
> label { color: inherit; }
1034
}
1035
&:checked {
1037
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1038
currentColor 100%,
1039
transparent 0%)
1040
0 0 2 / 0 0 2px;
1041
color: currentColor;
1042
&:disabled {
1044
color: gtkalpha(currentColor, $disabled_opacity);
1045
> label { color: inherit; }
1047
}
1048
}
1049
}
1050
.selection-menu {
1052
padding-left: 16px;
1053
padding-right: 16px;
1054
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1056
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1058
}
1059
}
1060
.fullscreen &,
1062
.tiled &,
1063
.maximized & {
1064
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1065
box-shadow: $z-depth-1;
1066
}
1067
&.default-decoration {
1069
min-height: $small_size;
1070
padding: $container_padding;
1071
border-width: 0;
1072
button.titlebutton {
1074
min-height: $small_size;
1075
min-width: $small_size;
1076
margin: 0;
1077
padding: 0;
1078
&:active { // add fallback
1080
background-image: radial-gradient(circle farthest-corner at center,
1081
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1082
transparent 0%),
1083
image(gtkalpha(currentColor, $lower_opacity / 2));
1084
}
1085
}
1086
}
1087
.solid-csd & {
1089
&:dir(rtl), &:dir(ltr) { // specificity bump
1090
margin-left: -1px;
1091
margin-right: -1px;
1092
margin-top: -1px;
1093
border-radius: 0;
1094
box-shadow: none;
1095
}
1096
}
1097
}
1098
headerbar {
1100
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1101
entry,
1102
spinbutton,
1103
// separator,
1104
button {
1105
margin-top: $container_padding;
1106
margin-bottom: $container_padding;
1107
}
1108
switch {
1110
margin-top: $container_padding * 2;
1111
margin-bottom: $container_padding * 2;
1112
}
1113
}
1114
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1116
border-top-left-radius: 2px;
1117
border-top-right-radius: 2px;
1118
}
1119
headerbar {
1121
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1122
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1123
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1125
}
1126
.titlebar:not(headerbar) {
1128
window.csd > & {
1129
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1130
padding: 0;
1131
background-color: transparent;
1132
background-image: none;
1133
border-style: none;
1134
box-shadow: none;
1135
}
1136
> separator {
1138
background-color: $headerbar_color;
1139
background-image: image($borders_color);
1140
}
1141
@extend %titlebar;
1143
}
1144
/************
1147
* Pathbars *
1148
************/
1149
.path-bar button {
1150
&.text-button, &.image-button, & {
1151
padding-left: 6px;
1152
padding-right: 6px;
1153
}
1154
&.text-button.image-button, & {
1156
// label:last-child { padding-left: 2px; padding-right: 8px; }
1157
// label:first-child { padding-left: 8px; padding-right: 2px; }
1158
}
1159
image {
1161
padding-left: 4px;
1162
padding-right: 4px;
1163
}
1164
&.slider-button {
1166
padding-left: 0;
1167
padding-right: 0;
1168
}
1169
}
1170
/**************
1173
* Tree Views *
1174
**************/
1175
treeview.view {
1176
@at-root * {
1177
-GtkTreeView-horizontal-separator: 4;
1178
-GtkTreeView-grid-line-width: 1;
1179
-GtkTreeView-grid-line-pattern: '';
1180
-GtkTreeView-tree-line-width: 1;
1181
-GtkTreeView-tree-line-pattern: '';
1182
-GtkTreeView-expander-size: 16;
1183
}
1184
border-left-color: $track_color; // this is actually the tree lines color,
1186
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1187
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1189
&:hover, &:active, &:selected { border-radius: 0; }
1191
&.separator {
1193
min-height: 1px + 2px * 2;
1194
color: $borders_color;
1195
}
1196
&:drop(active) {
1198
border-style: solid none;
1199
border-width: 1px;
1200
border-color: $accent_bg_color;
1201
&.after { border-top-style: none; }
1203
&.before { border-bottom-style: none; }
1205
}
1206
&.expander {
1208
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1209
-gtk-icon-transform: rotate(-90deg);
1210
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1212
&:checked { -gtk-icon-transform: unset; }
1214
color: $secondary_fg_color;
1216
&:hover, &:active { color: $fg_color; }
1218
&:disabled { color: $insensitive_secondary_fg_color; }
1220
&:selected {
1222
color: $secondary_selected_fg_color;
1223
&:hover, &:active { color: $selected_fg_color; }
1225
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1227
}
1228
}
1229
&.progressbar { // progress bar in treeviews
1231
border-style: none none solid;
1232
border-width: $bar_size;
1233
border-color: $selected_bg_color;
1234
background-color: transparent;
1235
background-image: none;
1236
&:selected { border-color: currentColor; }
1238
}
1239
&.trough { // progress bar trough in treeviews
1241
border-style: none none solid;
1242
border-width: $bar_size;
1243
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1244
background-color: transparent;
1245
background-image: none;
1246
&:selected { border-color: $track_color; }
1248
}
1249
header {
1251
button {
1252
@extend row.activatable;
1253
padding: 2px 6px;
1255
border-style: none solid solid none;
1256
border-width: 1px;
1257
border-color: $borders_color;
1258
border-radius: 0;
1259
background-clip: border-box;
1260
&, &:hover, &:active { box-shadow: none; }
1262
&, &:disabled { background-color: $base_color; }
1264
&:last-child { border-right-style: none; }
1266
}
1267
}
1268
button.dnd,
1270
header.button.dnd { // for treeview-like derive widgets
1271
padding: 2px 6px;
1272
border-style: none solid solid;
1273
border-width: 1px;
1274
border-color: $borders_color;
1275
border-radius: 0;
1276
box-shadow: none;
1277
background-color: $base_color;
1278
background-clip: border-box;
1279
color: $selected_bg_color;
1280
}
1281
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1283
}
1284
/*********
1287
* Menus *
1288
*********/
1289
menubar,
1290
.menubar {
1291
-GtkWidget-window-dragging: true;
1292
padding: 0;
1293
// box-shadow: inset 0 -1px $borders_color;
1294
background-color: $headerbar_color;
1295
> menuitem {
1297
transition: background-color $material_faster $material_ease_out;
1298
min-height: 20px;
1299
padding: 4px 8px;
1300
color: $secondary_selected_fg_color;
1301
&:hover { //Seems like it :hover even with keyboard focus
1303
transition: none;
1304
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1305
color: $selected_fg_color;
1306
}
1307
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1309
}
1310
}
1311
menu,
1313
.menu {
1314
margin: 4px 0;
1315
padding: 4px 0;
1316
background-color: $base_color;
1317
border: 1px solid $borders_color; // adds borders in a non composited env
1318
.csd & {
1320
border: none; // axes borders in a composited env
1321
border-radius: 2px;
1322
}
1323
menuitem {
1325
transition: background-color $material_faster $material_ease_out;
1326
min-height: 20px;
1327
min-width: 40px;
1328
padding: 4px 8px;
1329
font: initial;
1330
text-shadow: none;
1331
&:hover {
1333
transition: none;
1334
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1335
}
1336
&:disabled { color: $insensitive_fg_color; }
1338
// submenu indicators
1340
arrow {
1341
min-height: 16px;
1342
min-width: 16px;
1343
&:dir(ltr) {
1345
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1346
margin-left: 8px;
1347
}
1348
&:dir(rtl) {
1350
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1351
margin-right: 8px;
1352
}
1353
}
1354
}
1355
// overflow arrows
1357
> arrow {
1358
min-height: 16px;
1359
min-width: 16px;
1360
padding: 4px;
1361
border-radius: 0;
1362
background-color: $base_color;
1363
color: $secondary_fg_color;
1364
&.top {
1366
margin-top: -4px;
1367
border-bottom: 1px solid $borders_color;
1368
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1369
}
1370
&.bottom {
1372
margin-bottom: -4px;
1373
border-top: 1px solid $borders_color;
1374
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1375
}
1376
&:hover {
1378
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1379
color: $fg_color;
1380
}
1381
&:disabled {
1383
border-color: transparent;
1384
background-color: transparent;
1385
color: transparent;
1386
// color: $insensitive_secondary_fg_color;
1387
}
1388
}
1389
separator { margin: 4px 0; }
1391
}
1392
menuitem {
1394
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1395
check,
1397
radio {
1398
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1399
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1400
}
1401
}
1402
.csd.popup { border-radius: 2px; }
1404
/***************
1407
* Popovers *
1408
***************/
1409
popover.background {
1410
transition: $shadow_transition;
1411
padding: 0;
1412
box-shadow: $z-depth-2;
1413
background-color: $light_color;
1414
&:backdrop { box-shadow: $z-depth-1; }
1416
&, .csd & {
1418
border-style: solid;
1419
border-width: 1px;
1420
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1421
border-radius: 2px + 1px;
1422
}
1423
> list,
1425
> .view,
1426
> toolbar {
1427
border-style: none;
1428
box-shadow: none;
1429
background-color: transparent;
1430
}
1431
&, .csd & {
1433
&.touch-selection,
1434
&.magnifier,
1435
&.osd { @extend %osd; }
1436
}
1437
separator { margin: 4px 0; }
1439
list separator { margin: 0; }
1441
}
1442
/*************
1444
* Notebooks *
1445
*************/
1446
notebook {
1447
> header {
1448
border-width: 1px;
1449
border-color: $borders_color;
1450
background-color: $bg_color;
1451
background-clip: border-box;
1452
&.top {
1454
border-bottom-style: solid;
1455
> tabs {
1456
margin-bottom: -1px;
1457
> tab {
1458
&:hover { box-shadow: inset 0 -2px $track_color; }
1460
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1462
}
1463
}
1464
}
1465
&.bottom {
1467
border-top-style: solid;
1468
> tabs {
1469
margin-top: -1px;
1470
> tab {
1471
&:hover { box-shadow: inset 0 2px $track_color; }
1473
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1475
}
1476
}
1477
}
1478
&.left {
1480
border-right-style: solid;
1481
> tabs {
1482
margin-right: -1px;
1483
> tab {
1484
&:hover { box-shadow: inset -2px 0 $track_color; }
1486
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1488
}
1489
}
1490
}
1491
&.right {
1493
border-left-style: solid;
1494
> tabs {
1495
margin-left: -1px;
1496
> tab {
1497
&:hover { box-shadow: inset 2px 0 $track_color; }
1499
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1501
}
1502
}
1503
}
1504
&.top > tabs > arrow {
1506
@extend %notebook_vert_arrows;
1507
border-top-style: none;
1509
}
1510
&.bottom > tabs > arrow {
1512
@extend %notebook_vert_arrows;
1513
border-bottom-style: none;
1515
}
1516
@at-root %notebook_vert_arrows {
1518
padding-left: 4px;
1519
padding-right: 4px;
1520
&.down {
1522
margin-left: -8px;
1523
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1524
}
1525
&.up {
1527
margin-right: -8px;
1528
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1529
}
1530
}
1531
&.left > tabs > arrow {
1533
@extend %notebook_horz_arrows;
1534
border-left-style: none;
1536
}
1537
&.right > tabs > arrow {
1539
@extend %notebook_horz_arrows;
1540
border-right-style: none;
1542
}
1543
@at-root %notebook_horz_arrows {
1545
padding-top: 4px;
1546
padding-bottom: 4px;
1547
&.down {
1549
margin-top: -8px;
1550
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1551
}
1552
&.up {
1554
margin-bottom: -8px;
1555
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1556
}
1557
}
1558
> tabs > arrow {
1560
@extend %button_basic.flat;
1561
min-height: 16px;
1563
min-width: 16px;
1564
border-radius: 0;
1565
}
1566
tab {
1568
transition: $material_transition;
1569
min-height: 24px;
1570
min-width: 24px;
1571
padding: 6px 12px;
1572
outline-offset: -6px;
1574
border-width: 1px; // for reorderable tabs
1576
border-color: transparent; //
1577
color: $secondary_fg_color;
1579
font-weight: 500;
1580
&:hover {
1582
color: $fg_color;
1583
&.reorderable-page {
1585
border-color: $borders_color;
1586
background-color: $secondary_base_color;
1587
}
1588
}
1589
&:disabled { color: $insensitive_secondary_fg_color; }
1591
&:checked {
1593
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1594
color: $fg_color;
1595
&:disabled { color: $insensitive_fg_color; }
1597
&.reorderable-page {
1599
border-color: $borders_color;
1600
background-color: $base_color;
1601
}
1602
}
1603
// colors the button like the label, overridden otherwise
1605
button.flat {
1606
// FIXME: generalize .small-button?
1607
min-width: $small_size;
1608
min-height: $small_size;
1609
padding: 0;
1610
@extend %button_basic.image-button;
1612
&:last-child {
1614
margin-left: 6px;
1615
margin-right: -6px;
1616
}
1617
&:first-child {
1619
margin-left: -6px;
1620
margin-right: 6px;
1621
}
1622
}
1623
}
1624
&.top,
1626
&.bottom {
1627
tabs {
1628
padding-left: 8px;
1629
padding-right: 8px;
1630
&:not(:only-child) {
1632
&:first-child { margin-left: 0; }
1633
&:last-child { margin-right: 0; }
1634
}
1635
tab {
1637
&.reorderable-page {
1638
margin: 0 -1px;
1639
border-style: none solid;
1640
}
1641
}
1642
}
1643
}
1644
&.left,
1646
&.right {
1647
tabs {
1648
padding-top: 8px;
1649
padding-bottom: 8px;
1650
&:not(:only-child) {
1652
&:first-child { margin-top: 0; }
1653
&:last-child { margin-bottom: 0; }
1654
}
1655
tab {
1657
&.reorderable-page {
1658
margin: -1px 0;
1659
border-style: solid none;
1660
}
1661
}
1662
}
1663
}
1664
}
1665
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1667
background-color: $base_color;
1668
entry,
1670
spinbutton:not(.vertical) { @extend %entry.flat; }
1671
revealer entry,
1673
revealer spinbutton:not(.vertical) { @extend %entry; }
1674
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1676
}
1677
}
1678
/**************
1681
* Scrollbars *
1682
**************/
1683
scrollbar {
1684
$_slider_min_length: 24px;
1685
// disable steppers
1687
@at-root * {
1688
-GtkScrollbar-has-backward-stepper: false;
1689
-GtkScrollbar-has-forward-stepper: false;
1690
}
1691
transition: $material_transition;
1693
background-color: $base_color;
1694
background-clip: $extra_background_clip;
1695
// scrollbar border
1697
&.top { border-bottom: 1px solid $borders_color; }
1698
&.bottom { border-top: 1px solid $borders_color; }
1699
&.left { border-right: 1px solid $borders_color; }
1700
&.right { border-left: 1px solid $borders_color; }
1701
// slider
1703
slider {
1704
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1705
min-width: 8px;
1706
min-height: 8px;
1707
border: 4px solid transparent;
1708
border-radius: 100px;
1709
background-clip: padding-box;
1710
background-color: $tertiary_fg_color;
1711
&:hover { background-color: $secondary_fg_color; }
1713
&:active { background-color: $fg_color; }
1715
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1717
}
1718
&.fine-tune {
1720
slider {
1721
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1722
min-width: 4px;
1723
min-height: 4px;
1724
}
1725
&.horizontal slider { margin: 2px 0; }
1727
&.vertical slider { margin: 0 2px; }
1729
}
1730
&.overlay-indicator {
1732
&:not(.dragging):not(.hovering) {
1733
border-color: transparent;
1734
background-color: transparent;
1735
slider {
1737
min-width: 4px;
1738
min-height: 4px;
1739
margin: 2px;
1740
border: 2px solid scale-alpha($base_color, $lower_opacity);
1741
}
1742
button {
1744
min-width: 4px;
1745
min-height: 4px;
1746
margin: 2px;
1747
border: 2px solid scale-alpha($base_color, $lower_opacity);
1748
border-radius: 100px;
1749
background-color: $tertiary_fg_color;
1750
background-clip: padding-box;
1751
-gtk-icon-source: none;
1752
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1754
}
1755
&.horizontal {
1757
slider { min-width: $_slider_min_length; }
1758
button { min-width: 8px; }
1760
}
1761
&.vertical {
1763
slider { min-height: $_slider_min_length; }
1764
button { min-height: 8px; }
1766
}
1767
}
1768
&.dragging,
1770
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1771
}
1772
&.horizontal slider { min-width: $_slider_min_length; }
1774
&.vertical slider { min-height: $_slider_min_length; }
1776
// button styling
1778
button {
1779
@extend %button_basic.flat;
1780
min-width: 16px;
1781
min-height: 16px;
1782
padding: 0;
1783
border-radius: 0;
1784
}
1785
// button icons
1787
&.vertical {
1788
button {
1789
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1790
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1792
}
1793
}
1794
&.horizontal {
1796
button {
1797
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1798
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1800
}
1801
}
1802
}
1803
/**********
1806
* Switch *
1807
**********/
1808
switch {
1809
transition: $material_transition;
1810
margin: $container_padding 0;
1811
border: 4px solid transparent;
1812
border-radius: 100px;
1813
background-color: $track_color;
1814
background-clip: padding-box;
1815
font-size: 0;
1816
&:disabled { color: $insensitive_fg_color; }
1818
&:checked {
1820
background-color: scale-alpha($accent_bg_color, 0.5);
1821
&:disabled {
1823
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1824
color: $insensitive_fg_color;
1825
}
1826
}
1827
slider {
1829
@include entry(normal);
1830
transition: $material_transition, margin 0;
1832
min-width: $small_size;
1833
min-height: $small_size;
1834
margin: -4px 0 -4px -4px;
1835
-gtk-outline-radius: 100px;
1836
border-radius: 100px;
1837
}
1838
&:hover slider { @include entry(focus); }
1840
&:disabled slider { @include entry(insensitive); }
1842
&:checked slider {
1844
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1845
animation: needs_attention $material_slower $material_ease_out;
1846
margin: -4px -4px -4px 0;
1847
background-color: $accent_bg_color;
1848
color: $selected_fg_color;
1849
}
1850
&:checked:disabled slider { animation: none; }
1852
row:selected & {
1854
}
1855
}
1856
/*************************
1859
* Check and Radio items *
1860
*************************/
1861
// draw regular check and radio items using our PNG assets
1862
// all assets are rendered from assets.svg. never add pngs directly
1863
//selection-mode
1865
@each $s,$as in ('','-selectionmode'),
1866
(':hover', '-hover-selectionmode'),
1867
(':checked', '-checked-selectionmode'),
1868
(':checked:hover', '-checked-hover-selectionmode') {
1869
.view.content-view.check#{$s}:not(list) {
1870
-gtk-icon-shadow: $z-depth-1;
1871
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1872
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1873
margin: 8px;
1874
background-color: transparent;
1875
}
1876
}
1877
checkbutton.text-button,
1879
radiobutton.text-button {
1880
// this is for a nice focus on check and radios text
1881
padding: 2px;
1882
outline-offset: 0;
1883
label:not(:only-child) { margin: 0 4px; }
1885
}
1886
check,
1888
radio {
1889
min-height: 24px;
1890
min-width: 24px;
1891
margin: -12px;
1892
padding: 12px;
1893
@extend %button_basic.flat;
1895
@extend %button_basic.image-button;
1897
&:checked, &:checked:disabled { background-color: transparent; }
1899
&:checked, &:indeterminate { color: $accent_bg_color; }
1901
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1903
// &:only-child { margin: -12px; }
1905
row &:not(:checked):not(:indeterminate) {
1907
color: gtkalpha(currentColor, $enabled_opacity);
1908
&:hover, &:active { color: currentColor; }
1910
}
1911
menu menuitem & {
1913
transition: none;
1914
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1915
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1917
&, &:hover, &:disabled {
1919
background-image: none;
1920
// color: inherit;
1921
// animation: none;
1922
}
1923
}
1924
}
1925
%check,
1927
check {
1928
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1929
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1930
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1932
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1933
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1935
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1936
}
1937
%radio,
1939
radio {
1940
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1941
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1942
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1944
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1945
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1947
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1948
border-image: -gtk-gradient(radial,
1950
center center, 0,
1951
center center, 0.001,
1952
to($accent_bg_color),
1953
to(transparent))
1954
24 / 24px;
1955
&:checked {
1957
border-image: -gtk-gradient(radial,
1958
center center, 0,
1959
center center, (10 / 48 / 2),
1960
to($accent_bg_color),
1961
to(transparent))
1962
24 / 24px;
1963
}
1964
&:checked:disabled {
1966
border-image: -gtk-gradient(radial,
1967
center center, 0,
1968
center center, (10 / 48 / 2),
1969
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1970
to(transparent))
1971
24 / 24px;
1972
}
1973
&:indeterminate:checked {
1975
border-image: -gtk-gradient(radial,
1976
center center, 0,
1977
center center, 0.001,
1978
to($accent_bg_color),
1979
to(transparent))
1980
24 / 24px;
1981
}
1982
}
1983
// let's animate things
1985
@keyframes check_check {
1986
from { -gtk-icon-transform: rotate(90deg); }
1987
to { -gtk-icon-transform: unset; }
1988
}
1989
@keyframes check_radio { // FIXME: cannot animate border-image
1991
from {
1992
border-image: -gtk-gradient(radial,
1993
center center, 0,
1994
center center, 0.001,
1995
to($accent_bg_color),
1996
to(transparent))
1997
24 / 24px;
1998
}
1999
to {
2001
border-image: -gtk-gradient(radial,
2002
center center, 0,
2003
center center, (10 / 48 / 2),
2004
to($accent_bg_color),
2005
to(transparent))
2006
24 / 24px;
2007
}
2008
}
2009
@keyframes check_indeterminate {
2011
from { -gtk-icon-transform: unset; }
2012
50% { -gtk-icon-transform: scale(0, 1); }
2013
to { -gtk-icon-transform: unset; }
2014
}
2015
%check_checked,
2017
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2018
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2020
// %radio_checked,
2022
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2023
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2025
%indeterminate_checked,
2027
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2028
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2030
// no animations in menus
2032
menu menuitem {
2033
check:not(:indeterminate):checked,
2034
radio:not(:indeterminate):checked,
2035
check:indeterminate:checked,
2036
radio:indeterminate:checked { animation: none; }
2037
}
2038
treeview.view check,
2040
treeview.view radio {
2041
padding: 0;
2042
&:checked:hover, &:selected:checked:hover { background-image: none; }
2044
& {
2046
color: $secondary_fg_color;
2047
&:hover, &:active { color: $fg_color; }
2049
&:disabled { color: $insensitive_secondary_fg_color; }
2051
&:checked, &:indeterminate { color: $accent_bg_color; }
2053
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2055
}
2056
&:selected {
2058
color: $secondary_selected_fg_color;
2059
&:hover, &:active { color: $selected_fg_color; }
2061
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2063
&:checked, &:indeterminate { color: $accent_bg_color; }
2065
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2067
}
2068
}
2069
treeview.view radio:checked {
2071
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2072
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2073
border-image: none;
2074
}
2075
/************
2078
* GtkScale *
2079
************/
2080
scale {
2081
// sizing
2082
$_marks_lenght: 8px;
2083
$_marks_distance: 8px;
2084
min-height: 12px;
2086
min-width: 12px;
2087
padding: 12px;
2088
* { transition: $material_transition; }
2090
// the slider is inside the trough, so to have make it bigger there's a negative margin
2092
slider {
2093
min-height: $small_size;
2094
min-width: $small_size;
2095
margin: -10px;
2096
}
2097
// the backing bit
2099
trough {
2100
outline-offset: 2px;
2101
background-color: $track_color;
2102
&:disabled { color: $insensitive_fg_color; }
2104
}
2105
// the colored part of the backing bit
2107
highlight {
2108
background-color: $accent_bg_color;
2109
&:disabled { background-color: transparent; }
2111
}
2112
// this is another differently styled part of the backing bit, the most relevant use case is for example
2114
// in media player to indicate how much video stream as been cached
2115
fill {
2116
background-color: $track_color;
2117
&:disabled { background-color: transparent; }
2119
}
2120
slider {
2122
transition: all $material_faster $material_ease;
2123
// border-radius: 100%;
2124
// background-color: $accent_bg_color;
2125
background-repeat: no-repeat;
2126
background-position: center;
2127
@each $s,$as in ('',''),
2129
(':disabled','-insensitive') {
2130
&#{$s} {
2131
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2132
background-image: -gtk-scaled(url('#{$_url}.png'),
2133
url('#{$_url}@2.png'));
2134
}
2135
}
2136
background-size: calc(100% - 8px);
2138
&:hover { background-size: calc(100% - 4px); }
2140
&:active { background-size: calc(100% - 0px); }
2142
}
2143
// click-and-hold the slider to activate
2145
&.fine-tune {
2146
// to make the slider shrink in fine-tune mode
2147
slider { background-size: calc(100% - 12px); }
2148
}
2149
value { color: gtkalpha(currentColor, $hint_opacity); }
2151
marks {
2153
color: $track_color;
2154
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2156
(bottom, bottom, top),
2157
(top, left, right),
2158
(bottom, right, left) {
2159
&.#{$marks_class} {
2160
margin-#{$marks_margin}: $_marks_distance;
2161
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2162
}
2163
}
2164
}
2165
&.horizontal {
2167
indicator {
2168
min-height: $_marks_lenght;
2169
min-width: 1px;
2170
}
2171
}
2172
&.vertical {
2174
indicator {
2175
min-height: 1px;
2176
min-width: $_marks_lenght;
2177
}
2178
}
2179
// *WARNING* scale with marks madness following
2181
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2183
$suffix: if($variant == 'light', '', '-dark');
2184
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2186
('vertical', 'vert') {
2187
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2188
('scale-has-marks-below', ':first-child:not(:only-child)') {
2189
@each $state, $state_infix in ('', ''),
2190
(':disabled', '-insensitive') {
2191
&.#{$dir_class} {
2192
%#{$marks_infix}-#{$dir_infix},
2193
contents#{$nth_child} > trough > slider {
2194
&#{$state} {
2195
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2196
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2198
}
2199
@if $dir_class == 'horizontal' {
2201
min-height: 30px;
2202
min-width: $small_size;
2203
@if $marks_infix == 'scale-has-marks-above' {
2205
margin-top: -16px;
2206
background-position: center calc(100% - 4px);
2208
&:hover { background-position: center calc(100% - 2px); }
2210
&:active { background-position: center calc(100% - 0px); }
2212
}
2213
@if $marks_infix == 'scale-has-marks-below' {
2215
margin-bottom: -16px;
2216
background-position: center calc(4px);
2218
&:hover { background-position: center calc(2px); }
2220
&:active { background-position: center calc(0px); }
2222
}
2223
}
2224
@if $dir_class == 'vertical' {
2226
min-height: $small_size;
2227
min-width: 30px;
2228
@if $marks_infix == 'scale-has-marks-above' {
2230
margin-left: -16px;
2231
background-position: calc(4px) center;
2233
&:hover { background-position: calc(2px) center; }
2235
&:active { background-position: calc(0px) center; }
2237
}
2238
@if $marks_infix == 'scale-has-marks-below' {
2240
margin-right: -16px;
2241
background-position: calc(100% - 4px) center;
2243
&:hover { background-position: calc(100% - 2px) center; }
2245
&:active { background-position: calc(100% - 0px) center; }
2247
}
2248
}
2249
}
2250
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2252
&.fine-tune contents#{$nth_child} > trough > slider {
2253
// bigger negative margins to make the trough grow here as well
2254
@if $dir_class == 'horizontal' {
2256
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2257
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2259
}
2260
@if $dir_class == 'vertical' {
2262
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2263
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2265
}
2266
}
2267
}
2268
}
2269
}
2270
}
2271
&.color {
2273
min-height: 0;
2274
min-width: 0;
2275
&.horizontal {
2277
padding: 0 0 12px 0;
2278
trough {
2280
padding-bottom: $bar_size;
2281
}
2282
slider {
2284
@extend %scale-has-marks-above-horz;
2285
margin-bottom: -10px - $bar_size;
2287
margin-top: 0;
2288
}
2289
}
2290
&.vertical {
2292
&:dir(ltr) {
2293
padding: 0 0 0 12px;
2294
trough {
2296
padding-left: $bar_size;
2297
}
2298
slider {
2300
@extend %scale-has-marks-below-vert;
2301
margin-left: -10px - $bar_size;
2303
margin-right: 0;
2304
}
2305
}
2306
&:dir(rtl) {
2308
padding: 0 12px 0 0;
2309
trough {
2311
padding-right: $bar_size;
2312
}
2313
slider {
2315
@extend %scale-has-marks-above-vert;
2316
margin-right: -10px - $bar_size;
2318
margin-left: 0;
2319
}
2320
}
2321
}
2322
&.fine-tune {
2324
&.horizontal {
2325
slider {
2326
@extend %scale-has-marks-above-horz-fine-tune;
2327
}
2328
}
2329
&.vertical {
2331
&:dir(ltr) {
2332
slider {
2333
@extend %scale-has-marks-below-vert-fine-tune;
2334
}
2335
}
2336
&:dir(rtl) {
2338
slider {
2339
@extend %scale-has-marks-above-vert-fine-tune;
2340
}
2341
}
2342
}
2343
}
2344
}
2345
}
2346
/*****************
2349
* Progress bars *
2350
*****************/
2351
progressbar {
2352
// sizing
2353
&.horizontal {
2354
trough,
2355
progress { min-height: $bar_size; }
2356
}
2357
&.vertical {
2359
trough,
2360
progress { min-width: $bar_size; }
2361
}
2362
// FIXME: insensitive state missing and some other state should be set probably
2364
color: $tertiary_fg_color;
2365
font-size: smaller;
2366
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2368
progress { background-color: $selected_bg_color; }
2370
&.osd { // progressbar.osd used for epiphany page loading progress
2372
// min-width: $bar_size;
2373
// min-height: $bar_size;
2374
// background-color: transparent;
2375
// trough { background-color: transparent; }
2377
progress {
2379
}
2380
}
2381
}
2382
/*************
2385
* Level Bar *
2386
*************/
2387
levelbar {
2388
block {
2389
min-width: $medium_size;
2390
min-height: $bar_size;
2391
}
2392
&.vertical block {
2394
min-width: $bar_size;
2395
min-height: $medium_size;
2396
}
2397
trough {
2399
padding: 2px;
2400
border-radius: 2px;
2401
@include entry(normal);
2403
&:disabled { @include entry(insensitive); }
2405
}
2406
&.horizontal.discrete block { margin: 0 1px; }
2408
&.vertical.discrete block { margin: 1px 0; }
2410
&.horizontal.discrete trough { padding: 2px 1px; }
2412
&.vertical.discrete trough { padding: 1px 2px; }
2414
block {
2416
&.low {
2417
background-color: $warning_color;
2418
}
2419
&.high,
2421
&:not(.empty) {
2422
background-color: $selected_bg_color;
2423
}
2424
&.full {
2426
background-color: $success_color;
2427
}
2428
&.empty {
2430
background-color: $track_color;
2431
color: $insensitive_fg_color;
2432
}
2433
}
2434
}
2435
/****************
2438
* Print dialog *
2439
*****************/
2440
printdialog {
2441
paper {
2442
padding: 0;
2443
border: 1px solid $borders_color;
2444
background: $base_color;
2445
color: $fg_color;
2446
}
2447
.dialog-action-box { margin: 12px; }
2449
}
2450
/**********
2453
* Frames *
2454
**********/
2455
frame > border,
2456
.frame {
2457
margin: 0;
2458
padding: 0;
2459
border: 1px solid $borders_color;
2460
border-radius: 0;
2461
box-shadow: none;
2462
&.flat { border-style: none; }
2464
}
2465
actionbar > revealer > box {
2467
padding: $container_padding;
2468
border-top: 1px solid $borders_color;
2469
}
2470
scrolledwindow {
2472
viewport.frame { // avoid double borders when viewport inside scrolled window
2473
border-style: none;
2474
}
2475
// This is used when content is touch-dragged past boundaries.
2477
// draws a box on top of the content, the size changes programmatically.
2478
overshoot {
2479
&.top { @include overshoot(top); }
2480
&.bottom { @include overshoot(bottom); }
2482
&.left { @include overshoot(left); }
2484
&.right { @include overshoot(right); }
2486
}
2487
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2489
undershoot {
2490
&.top { @include undershoot(top); }
2491
&.bottom { @include undershoot(bottom); }
2493
&.left { @include undershoot(left); }
2495
&.right { @include undershoot(right); }
2497
}
2498
junction { // the small square between two scrollbars
2500
border-style: solid none none solid;
2501
border-width: 1px;
2502
border-color: $borders_color;
2503
background-color: $base_color;
2504
&:dir(rtl) { border-style: solid solid none none; }
2506
}
2507
}
2508
//vbox and hbox separators
2510
separator {
2511
min-width: 1px;
2512
min-height: 1px;
2513
background: $borders_color;
2514
}
2515
/*********
2518
* Lists *
2519
*********/
2520
list {
2521
border-color: $borders_color;
2522
background-color: $base_color;
2523
row { padding: 2px; }
2525
}
2526
row {
2528
transition: $material_transition;
2529
&:hover { transition: none; }
2531
&.activatable {
2533
background-image: radial-gradient(circle farthest-corner at center,
2534
gtkalpha(currentColor, 0) 100%,
2535
transparent 0%),
2536
image(gtkalpha(currentColor, 0));
2537
&:hover {
2539
background-image: radial-gradient(circle farthest-corner at center,
2540
gtkalpha(currentColor, 0) 100%,
2541
transparent 0%),
2542
image(gtkalpha(currentColor, 0.05));
2543
}
2544
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2546
&:active {
2547
transition: $material_transition, background-image 0;
2548
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2549
}
2550
}
2551
&:selected { @extend %selected_items; }
2553
}
2554
/*********************
2557
* App Notifications *
2558
*********************/
2559
.app-notification,
2560
.app-notification.frame {
2561
@extend %osd;
2562
@extend toolbar.osd;
2564
margin: 8px;
2566
border { border: none; }
2568
}
2569
/*************
2572
* Expanders *
2573
*************/
2574
expander {
2575
arrow {
2576
transition: all $material_faster $material_ease;
2577
min-width: 16px;
2578
min-height: 16px;
2579
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2580
-gtk-icon-transform: rotate(-90deg);
2581
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2583
&:checked { -gtk-icon-transform: unset; }
2585
color: $secondary_fg_color;
2587
&:hover, &:active { color: $fg_color; }
2589
&:disabled { color: $insensitive_secondary_fg_color; }
2591
&:selected {
2593
color: $secondary_selected_fg_color;
2594
&:hover, &:active { color: $selected_fg_color; }
2596
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2598
}
2599
}
2600
}
2601
/************
2604
* Calendar *
2605
***********/
2606
calendar {
2607
padding: 1px;
2608
border: 1px solid $borders_color;
2609
color: $fg_color;
2610
&:disabled { color: $insensitive_fg_color; }
2612
&:selected {
2614
@extend %selected_items;
2615
border-radius: 2px + 1px;
2617
}
2618
&.header {
2620
border-style: none none solid;
2621
border-radius: 0;
2622
}
2623
&.button { @extend %button_basic.flat; }
2625
&.highlight {
2627
color: gtkalpha(currentColor, $hint_opacity);
2628
font-weight: 500;
2629
}
2630
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2632
}
2633
/***********
2636
* Dialogs *
2637
***********/
2638
messagedialog { // Message Dialog styling
2639
&.background { background-color: $light_color; }
2640
.titlebar {
2642
min-height: $small_size;
2643
border-style: none;
2644
box-shadow: inset 0 1px $highlight_color;
2645
background-color: $light_color;
2646
}
2647
&.csd { // rounded bottom border styling for csd version
2649
&.background {
2650
// bigger radius for better antialiasing
2651
border-bottom-left-radius: 2px;
2652
border-bottom-right-radius: 2px;
2653
}
2654
.dialog-action-area button {
2656
padding: 8px 16px;
2657
border-top: 1px solid $borders_color;
2658
border-radius: 0;
2659
@extend %button_basic.flat;
2661
&:first-child{ border-bottom-left-radius: 2px; }
2663
&:last-child { border-bottom-right-radius: 2px; }
2665
}
2666
}
2667
}
2668
filechooser {
2670
.dialog-action-box { border-top: 1px solid $borders_color; }
2671
#pathbarbox { border-bottom: 1px solid $borders_color; }
2673
}
2674
filechooserbutton:drop(active) {
2676
box-shadow: none;
2677
}
2678
/***********
2681
* Sidebar *
2682
***********/
2683
.sidebar {
2684
border-style: none;
2685
background-color: $light_color;
2686
@at-root %sidebar_left,
2688
&:dir(ltr),
2689
&.left,
2690
&.left:dir(rtl) {
2691
border-right: 1px solid $borders_color;
2692
border-left-style: none;
2693
}
2694
@at-root %sidebar_right
2696
&:dir(rtl),
2697
&.right {
2698
border-left: 1px solid $borders_color;
2699
border-right-style: none;
2700
}
2701
list { background-color: transparent; }
2703
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2705
}
2706
stacksidebar {
2708
&.sidebar {
2709
&:dir(ltr),
2710
&.left,
2711
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2712
&:dir(rtl),
2714
&.right { list { @extend %sidebar_right; }}
2715
}
2716
row {
2718
padding: 10px 4px;
2719
> label {
2721
padding-left: 6px;
2722
padding-right: 6px;
2723
}
2724
&.needs-attention > label { @extend %needs_attention; }
2726
}
2727
}
2728
/****************
2731
* File chooser *
2732
****************/
2733
placessidebar {
2734
> viewport.frame { border-style: none; }
2735
row {
2737
// Needs overriding of the GtkListBoxRow padding
2738
min-height: 32px;
2739
padding: 0;
2740
// Using margins/padding directly in the SidebarRow
2742
// will make the animation of the new bookmark row jump
2743
> revealer { padding: 0 12px; }
2744
&:selected { color: $selected_fg_color; }
2746
&:disabled { color: $insensitive_fg_color; }
2748
image.sidebar-icon {
2750
opacity: $hint_opacity; // dim the device icons
2751
&:dir(ltr) { padding-right: 8px; }
2753
&:dir(rtl) { padding-left: 8px; }
2754
}
2755
label.sidebar-label {
2757
&:dir(ltr) { padding-right: 2px; }
2758
&:dir(rtl) { padding-left: 2px; }
2759
}
2760
@at-root button.sidebar-button {
2762
@extend %button_basic.flat;
2763
min-height: $small_size;
2765
min-width: $small_size;
2766
margin-top: 0;
2767
margin-bottom: 0;
2768
padding: 0;
2769
border-radius: 100%;
2770
-gtk-outline-radius: 100%;
2771
row:selected & { @extend %button_selected.flat; }
2773
}
2774
&.sidebar-placeholder-row {
2776
min-height: 2px;
2777
padding: 0 8px;
2778
background-image: image($accent_bg_color);
2779
background-clip: content-box;
2780
}
2781
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2783
&:drop(active):not(:disabled) {
2785
box-shadow: inset 0 0 0 2px $accent_bg_color;
2786
&:selected {
2788
// background-color: $accent_bg_color;
2789
// color: $selected_fg_color;
2790
}
2791
}
2792
}
2793
}
2794
placesview {
2796
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2797
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2799
// this selects the "connect to server" label
2801
> actionbar > revealer > box > label {
2802
padding-left: 8px;
2803
padding-right: 8px;
2804
}
2805
}
2806
/*********
2809
* Paned *
2810
*********/
2811
paned {
2812
> separator {
2813
min-width: 1px;
2814
min-height: 1px;
2815
-gtk-icon-source: none; // defeats the ugly default handle decoration
2816
border-style: none; // just to be sure
2817
background-color: transparent;
2818
// workaround, using background istead of a border since the border will get rendered twice (?)
2819
background-image: image($borders_color);
2820
background-size: 1px 1px;
2821
&.wide {
2823
min-width: 6px;
2824
min-height: 6px;
2825
background-color: $bg_color;
2826
background-image: image($borders_color), image($borders_color);
2827
background-size: 1px 1px, 1px 1px;
2828
}
2829
}
2830
&.horizontal > separator {
2832
background-repeat: repeat-y;
2833
&:dir(ltr) {
2835
margin: 0 -8px 0 0;
2836
padding: 0 8px 0 0;
2837
background-position: left;
2838
}
2839
&:dir(rtl) {
2841
margin: 0 0 0 -8px;
2842
padding: 0 0 0 8px;
2843
background-position: right;
2844
}
2845
&.wide {
2847
margin: 0;
2848
padding: 0;
2849
background-repeat: repeat-y, repeat-y;
2850
background-position: left, right;
2851
}
2852
}
2853
&.vertical > separator {
2855
margin: 0 0 -8px 0;
2856
padding: 0 0 8px 0;
2857
background-repeat: repeat-x;
2858
background-position: top;
2859
&.wide {
2861
margin: 0;
2862
padding: 0;
2863
background-repeat: repeat-x, repeat-x;
2864
background-position: bottom, top;
2865
}
2866
}
2867
}
2868
/**************
2871
* GtkInfoBar *
2872
**************/
2873
infobar { border-style: none; }
2874
.info { background-color: $info_bg_color; }
2876
.question { background-color: $question_bg_color; }
2878
.warning { background-color: $warning_bg_color; }
2880
.error { background-color: $error_bg_color; }
2882
.info,
2884
.question,
2885
.warning,
2886
.error {
2887
color: $selected_fg_color;
2888
button { @extend %button_selected; }
2890
label:selected {
2892
}
2893
*:link { @extend %link_selected; }
2895
}
2896
/************
2899
* Tooltips *
2900
************/
2901
tooltip {
2902
&.background {
2903
// background-color needs to be set this way otherwise it gets drawn twice
2904
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2905
background-color: scale-alpha($base_color, $higher_opacity);
2906
}
2907
// @extend %osd;
2909
// padding: 4px; /* not working */
2911
border-radius: 2px;
2912
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2913
// FIXME: we need a border or tooltips vanish on black background.
2915
decoration { background-color: transparent; }
2916
label {
2918
min-height: 32px - 6px * 2;
2919
padding: 2px 8px - 6px;
2920
}
2921
* { // Yeah this is ugly
2923
padding: 0;
2924
background-color: transparent;
2925
color: inherit;
2926
}
2927
}
2928
/*****************
2931
* Color Chooser *
2932
*****************/
2933
colorswatch {
2934
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2935
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2936
// applied to the overlay box.
2937
// base color corners rounding
2939
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2940
// sports a bigger radius.
2941
// nth-child is needed by the custom color strip.
2942
&.top {
2944
border-top-left-radius: $material_radius + 0.5px;
2945
border-top-right-radius: $material_radius + 0.5px;
2946
overlay {
2948
border-top-left-radius: $material_radius;
2949
border-top-right-radius: $material_radius;
2950
}
2951
}
2952
&.bottom {
2954
border-bottom-left-radius: $material_radius + 0.5px;
2955
border-bottom-right-radius: $material_radius + 0.5px;
2956
overlay {
2958
border-bottom-left-radius: $material_radius;
2959
border-bottom-right-radius: $material_radius;
2960
}
2961
}
2962
&.left,
2964
&:first-child:not(.top) {
2965
border-top-left-radius: $material_radius + 0.5px;
2966
border-bottom-left-radius: $material_radius + 0.5px;
2967
overlay {
2969
border-top-left-radius: $material_radius;
2970
border-bottom-left-radius: $material_radius;
2971
}
2972
}
2973
&.right,
2975
&:last-child:not(.bottom) {
2976
border-top-right-radius: $material_radius + 0.5px;
2977
border-bottom-right-radius: $material_radius + 0.5px;
2978
overlay {
2980
border-top-right-radius: $material_radius;
2981
border-bottom-right-radius: $material_radius;
2982
}
2983
}
2984
&.dark overlay { color: white; }
2986
&.light overlay { color: scale-alpha(black, 0.8); }
2988
&.dark { color: white; } // for focus ring
2990
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2992
&:drop(active) {
2994
box-shadow: none;
2995
&.light overlay {
2997
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2998
}
2999
&.dark overlay {
3001
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3002
}
3003
}
3004
overlay {
3006
transition: $shadow_transition;
3007
box-shadow: $z-depth-1;
3008
&:hover { box-shadow: $z-depth-2; }
3010
}
3011
&#add-color-button {
3013
border-radius: $material_radius $material_radius 0 0;
3014
color: white; // for focus ring
3015
&:only-child { border-radius: $material_radius; }
3017
overlay {
3019
background-image: linear-gradient(to right,
3020
$error_bg_color 25%,
3021
$warning_bg_color 25%, $warning_bg_color 50%,
3022
$info_bg_color 50%, $info_bg_color 75%,
3023
$question_bg_color 75%);
3024
color: white;
3025
}
3026
}
3027
&:disabled {
3029
opacity: $disabled_opacity;
3030
overlay { box-shadow: none; }
3032
}
3033
row:selected & {
3035
}
3036
&#editor-color-sample {
3038
border-radius: $material_radius + 0.5px;
3039
overlay { border-radius: $material_radius; }
3041
// overlay:hover { box-shadow: $z-depth-1; }
3043
}
3044
}
3045
// colorscale popup
3047
colorchooser .popover.osd {
3048
transition: $shadow_transition;
3049
border-radius: 2px;
3050
box-shadow: $z-depth-2;
3051
background-color: $base_color;
3052
&:backdrop { box-shadow: $z-depth-1; }
3054
spinbutton:not(.vertical) { @extend %entry.flat; }
3056
}
3057
/********
3060
* Misc *
3061
********/
3062
//content view (grid/list)
3063
.content-view {
3064
background-color: $bg_color;
3065
// &:hover { -gtk-icon-effect: highlight; }
3067
rubberband { @extend rubberband; }
3069
}
3070
.scale-popup {
3072
.osd & { @extend %osd; }
3073
.osd & button.flat { //FIXME: quick hack, redo properly
3075
}
3076
button { // +/- buttons on GtkVolumeButton popup
3078
}
3079
}
3080
/**********************
3083
* Window Decorations *
3084
*********************/
3085
decoration {
3086
transition: $shadow_transition;
3087
border-radius: 2px 2px 0 0;
3088
box-shadow: $z-depth-4, 0 16px 16px transparent;
3089
// FIXME rationalize shadows
3091
// this is used for the resize cursor area
3093
margin: 8px;
3094
&:backdrop {
3096
// the transparent shadow here is to enforce that the shadow extents don't
3097
// change when we go to backdrop, to prevent jumping windows.
3098
// The biggest shadow should be in the same order then in the active state
3099
// or the jumping will happen during the transition.
3100
box-shadow: $z-depth-2, 0 16px 16px transparent;
3101
}
3102
.maximized &,
3104
.fullscreen &,
3105
.tiled & { border-radius: 0; }
3106
.popup & { box-shadow: none; }
3108
// server-side decorations as used by mutter
3110
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3111
.csd.popup & {
3113
border-radius: 2px;
3114
box-shadow: $z-depth-2;
3115
}
3116
tooltip.csd & {
3118
border-radius: 2px;
3119
box-shadow: $z-depth-2;
3120
}
3121
messagedialog.csd & {
3123
border-radius: 2px;
3124
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3125
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3127
}
3128
.solid-csd & {
3130
margin: 0;
3131
padding: 4px;
3132
// border: solid 1px $borders_color;
3133
border-radius: 0;
3134
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3135
background-color: $borders_color;
3136
}
3137
}
3138
// Window Close button
3140
button.titlebutton {
3141
// @extend %button_basic.flat;
3142
@extend %button_basic.image-button;
3144
.selection-mode & {
3146
}
3147
}
3148
// catch all extend :)
3151
%selected_items {
3153
background-color: $selected_bg_color;
3154
@at-root %nobg_selected_items, & {
3156
color: $selected_fg_color;
3157
&:disabled { color: $insensitive_selected_fg_color; }
3159
}
3160
}
3161
.monospace { font-family: monospace; }
3163
/**********************
3166
* Touch Copy & Paste *
3167
*********************/
3168
//touch selection handlebars for the Popover.osd above
3169
cursor-handle {
3170
border-radius: 100px;
3171
background-color: $accent_bg_color;
3172
background-image: none;
3173
&.top:dir(ltr), &.bottom:dir(rtl) {
3175
padding-left: 6px;
3176
border-top-right-radius: 0;
3177
}
3178
&.bottom:dir(ltr), &.top:dir(rtl) {
3180
padding-right: 6px;
3181
border-top-left-radius: 0;
3182
}
3183
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3185
-GtkWidget-text-handle-width: 24;
3186
-GtkWidget-text-handle-height: 30;
3187
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3189
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3190
url('#{$_url}@2.png'));
3191
}
3192
}
3193
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3195
button.circular { // FIXME: aggregate to buttons
3197
border-radius: 100px;
3198
-gtk-outline-radius: 100px;
3199
label { padding: 0; }
3201
}
3202
// shortcut window keys
3204
.keycap {
3205
min-width: 28px - 8px * 2;
3206
min-height: 28px - 2px;
3207
margin-top: 2px;
3208
padding-bottom: 2px;
3209
padding-left: 8px;
3210
padding-right: 8px;
3211
border: solid 1px $borders_color;
3213
border-radius: 2px + 1px;
3214
box-shadow: inset 0 -2px $borders_color;
3215
background-color: $base_color;
3216
color: $fg_color;
3217
font-size: smaller;
3218
}
3219
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3221
transition: $material_transition;
3222
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3223
caret-color: $accent_bg_color;
3224
}
3225
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3227
stackswitcher button.circular,
3229
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3230
min-width: $medium_size;
3231
min-height: $medium_size;
3232
padding: 0;
3233
}
3234