ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: overlay("focus", $on-surface);
35
}
36
}
37
/**
39
* Base States
40
*/
41
.background {
43
background-color: $background;
44
color: $on-surface;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $on-surface;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: disabled($on-surface);
72
}
73
&:selected {
75
background-color: $primary;
76
color: $on-primary;
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $on-surface;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
90
}
91
&:disabled {
93
color: disabled($on-surface);
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
background-color: $overlay-selected;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: hint($on-surface); // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: $on-dark;
127
text-shadow: $text-shadow;
128
}
129
.rubberband,
131
rubberband {
132
border: 1px solid $primary;
133
background-color: rgba($primary, .24);
134
}
135
flowbox {
137
rubberband {
138
@extend rubberband;
139
}
140
flowboxchild {
142
padding: 4px;
143
border-radius: $corner-radius;
144
&:selected {
146
background-color: $overlay-selected;
147
}
148
}
149
}
150
.content-view .tile {
152
// margin: 2px;
153
// padding: 0;
154
// border-radius: 0;
155
// background-color: black;
156
&:selected {
158
background-color: transparent;
159
}
160
}
161
label {
163
caret-color: $primary; // this shouldn't be needed.
164
&.separator {
166
color: hint($on-surface);
167
}
168
selection {
170
background-color: $overlay-selected;
171
}
172
&:disabled {
174
color: disabled($on-surface);
175
headerbar &,
177
menuitem &,
178
tab &,
179
button & {
180
color: inherit;
181
}
182
}
183
&.osd {
185
border-radius: $corner-radius;
186
background-color: $tooltip;
187
color: $on-tooltip;
188
}
189
}
190
.dim-label {
192
color: hint($on-surface);
193
}
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base;
199
}
200
.sidebar label {
202
min-height: $medium-size;
203
padding: 0 12px;
204
color: disabled($on-surface);
205
font-weight: 500;
206
&.highlight {
208
color: $on-surface;
209
}
210
}
211
}
212
%osd,
214
.osd {
215
// opacity: .9;
216
}
217
/**
219
* Spinner Animation
220
*/
221
@keyframes spin {
223
to {
224
-gtk-icon-transform: rotate(1turn);
225
}
226
}
227
spinner {
229
background: none;
230
opacity: 0; // non spinning spinner makes no sense
231
color: $primary;
232
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
233
transition: opacity $duration * 4 $ease-out;
234
animation: spin 1s linear infinite;
235
&:checked {
237
opacity: 1;
238
}
239
&:disabled {
241
color: disabled-hint($on-surface);
242
}
243
}
244
/**
246
* Text Entries
247
*/
248
%entry,
250
entry {
251
min-height: $medium-size;
252
padding: 0 8px;
253
border-radius: $corner-radius $corner-radius 0 0;
254
@include entry(normal);
256
&:focus {
258
@include entry(checked);
259
}
260
&:drop(active) {
262
@include entry(hover);
263
}
264
&:disabled {
266
@include entry(disabled);
267
}
268
&.flat {
270
min-height: 0;
271
padding: 2px;
272
border-radius: 0;
273
background-color: transparent;
274
}
275
// icons inside the entry
277
image {
278
// min-height: $small-size;
279
// min-width: $small-size;
280
// border-radius: $circular-radius;
281
// @extend %ripple;
282
// @include ink-color($on-surface);
283
color: hint($on-surface);
284
&:hover,
286
&:active {
287
color: $on-surface;
288
}
289
&:disabled {
291
color: disabled($on-surface);
292
}
293
&.left {
295
margin-left: ($medium-size - 16px) / 2 - 8px;
296
margin-right: 6px;
297
}
298
&.right {
300
margin-left: 6px;
301
margin-right: ($medium-size - 16px) / 2 - 8px;
302
}
303
}
304
undershoot {
306
&.left {
307
@include undershoot(left);
308
}
309
&.right {
311
@include undershoot(right);
312
}
313
}
314
selection {
316
background-color: $overlay-selected;
317
}
318
// entry error and warning style
320
@each $class, $color in (".error": $error, ".warning": $warning) {
321
&#{$class} {
322
@include entry(normal, $color);
323
&:focus {
325
@include entry(checked, $color);
326
}
327
&:disabled {
329
@include entry(disabled, $color);
330
}
331
}
332
}
333
.osd & {
335
}
336
progress {
338
margin: 0 -8px -4px;
339
border-bottom: 2px solid $primary;
340
background-color: transparent;
341
}
342
// linked entries
344
.linked:not(.vertical) > & {
345
@extend %linked;
346
}
347
// Vertically linked entries
349
.linked.vertical > & {
350
@extend %linked-vertical;
351
}
352
}
353
%entry_raised {
355
border-radius: $corner-radius;
356
@include entry(raised-normal);
358
&:focus {
360
@include entry(raised-focus);
361
}
362
&:drop(active) {
364
@include entry(raised-hover);
365
}
366
&:disabled {
368
@include entry(raised-disabled);
369
}
370
// entry error and warning style
372
@each $class, $color in (".error": $error, ".warning": $warning) {
373
&#{$class} {
374
@include entry(raised-normal, $color);
375
&:focus {
377
@include entry(raised-focus, $color);
378
}
379
&:disabled {
381
@include entry(raised-disabled, $color);
382
}
383
image {
385
color: hint(on($color));
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: disabled(on($color));
394
}
395
}
396
}
397
}
398
}
399
treeview entry {
401
&,
402
&.flat {
403
background-color: $base;
404
&,
406
&:focus {
407
border-image: none;
408
box-shadow: none;
409
}
410
}
411
}
412
.entry-tag {
414
margin: 2px;
415
border-radius: $circular-radius;
416
box-shadow: none;
417
background-color: fill($on-surface);
418
color: $on-surface;
419
&:hover {
421
background-image: image(overlay("hover", $on-surface));
422
}
423
// side margins: compensate the entry padding with a negative margin
425
// then the negative margin itself
426
:dir(ltr) & {
427
margin-left: 4px;
428
margin-right: 0;
429
padding-left: 12px;
430
padding-right: 8px;
431
}
432
:dir(rtl) & {
434
margin-left: 0;
435
margin-right: 4px;
436
padding-left: 8px;
437
padding-right: 12px;
438
}
439
// seems any sizing doesn't work
441
&.button {
442
box-shadow: none;
443
background-color: transparent;
444
color: hint($on-surface);
445
}
446
}
447
/**
449
* Buttons
450
*/
451
// stuff for .needs-attention
453
@keyframes needs-attention {
454
from {
455
background-image:
456
-gtk-gradient(
457
radial,
458
center center, 0,
459
center center, .001,
460
to($primary),
461
to(transparent)
462
);
463
}
464
to {
466
background-image:
467
-gtk-gradient(
468
radial,
469
center center, 0,
470
center center, .5,
471
to($primary),
472
to(transparent)
473
);
474
}
475
}
476
%button,
478
button {
479
min-height: 24px;
480
min-width: 16px;
481
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
482
border-radius: $corner-radius;
483
background-color: $surface;
484
color: $on-surface;
485
font-weight: 500;
486
@extend %ripple;
488
@include ink-color($on-surface, $elevation: true);
489
&:disabled {
491
box-shadow: none;
492
background-color: fill($on-surface);
493
color: disabled($on-surface);
494
}
495
&:checked {
497
background-color: overlay("activated", $primary, $background: $surface);
498
color: $primary;
499
@include ink-color($primary, $elevation: true);
500
&:disabled {
502
box-shadow: none;
503
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
504
color: disabled($on-surface);
505
}
506
}
507
&.text-button {
509
min-width: 64px - 16px * 2;
510
padding-left: 16px;
511
padding-right: 16px;
512
}
513
&.image-button {
515
min-width: 24px;
516
padding: ($medium-size - 24px) / 2;
517
border-radius: $circular-radius;
518
}
519
// NOTE: Some image-only buttons use this as well
521
&.text-button.image-button {
522
min-width: 24px;
523
padding: ($medium-size - 24px) / 2;
524
border-radius: $corner-radius;
525
label {
527
&:first-child {
528
margin-left: 16px - ($medium-size - 24px) / 2;
529
}
530
&:last-child {
532
margin-right: 16px - ($medium-size - 24px) / 2;
533
}
534
}
535
image:not(:only-child) {
537
margin: 0 (24px - 16px) / 2;
538
}
539
}
540
.linked:not(.vertical) > & {
542
@extend %linked;
543
&.image-button:not(.text-button) {
545
@extend %linked-image-button;
546
}
547
}
548
.linked.vertical > & {
550
@extend %linked-vertical;
551
&.image-button:not(.text-button) {
553
@extend %linked-vertical-image-button;
554
}
555
}
556
}
557
%button-flat-basic {
559
background-color: transparent;
560
color: hint($on-surface);
561
@include ink-color($on-surface);
562
&:disabled {
564
background-color: transparent;
565
color: disabled-hint($on-surface);
566
}
567
}
568
%button-flat-activatable {
570
@extend %button-flat-basic;
571
&:checked {
573
background-color: overlay("activated", $on-surface);
574
color: $on-surface;
575
@include ink-color($on-surface);
576
&:disabled {
578
color: disabled($on-surface);
579
}
580
}
581
}
582
%button-flat,
584
button.flat {
585
@extend %button-flat-activatable;
586
&.text-button {
588
min-width: 64px - 8px * 2;
589
padding-left: 8px;
590
padding-right: 8px;
591
}
592
&.text-button.image-button {
594
min-width: 24px;
595
padding: ($medium-size - 24px) / 2;
596
label {
598
&:first-child {
599
margin-left: 12px - ($medium-size - 24px) / 2;
600
}
601
&:last-child {
603
margin-right: 12px - ($medium-size - 24px) / 2;
604
}
605
}
606
}
607
.linked:not(.vertical) > &,
609
.linked.vertical > & {
610
&:not(:only-child) { // specificity bump
611
border-radius: $corner-radius;
612
&.image-button:not(.text-button) {
614
border-radius: $circular-radius;
615
}
616
}
617
}
618
}
619
button {
621
// big standalone buttons like in Documents pager
622
&.osd {
623
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
624
&.image-button {
626
padding: ($large-size - 24px) / 2;
627
}
628
&:disabled {
630
opacity: 0;
631
}
632
}
633
// overlay / OSD style
635
@at-root %osd_button,
636
.osd & {
637
}
638
// Suggested and Destructive Action buttons
640
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
641
&#{$class} {
642
background-color: $color;
643
color: on($color);
644
@include ink-color(on($color), $elevation: true);
645
&:disabled {
647
box-shadow: none;
648
background-color: fill($on-surface);
649
color: disabled($on-surface);
650
}
651
&:checked {
653
background-color: overlay("activated", on($color), $background: $color);
654
}
655
&.flat {
657
background-color: transparent;
658
color: $color;
659
@include ink-color($color);
660
&:disabled {
662
box-shadow: none;
663
background-color: transparent;
664
color: disabled-hint($on-surface);
665
}
666
&:checked {
668
background-color: overlay("activated", $color);
669
}
670
}
671
.osd & {
673
}
674
}
675
}
676
.stack-switcher > & {
678
// to position the needs attention dot, padding is added to the button
679
// child, a label needs just lateral padding while an icon needs vertical
680
// padding added too.
681
> label {
683
margin: 0 -6px;
684
padding: 0 6px;
685
}
686
> image {
688
margin: -3px -6px;
689
padding: 3px 6px;
690
}
691
&.needs-attention {
693
> label,
694
> image {
695
@extend %needs-attention;
696
}
697
&:checked {
699
> label,
700
> image {
701
animation: none;
702
background-image: none;
703
}
704
}
705
}
706
}
707
// hide separators
709
&.font,
710
&.file {
711
separator {
712
@extend %hide_separators;
713
}
714
}
715
&.font {
717
> box > box > label {
718
// font-weight: bold;
719
}
720
}
721
// inline-toolbar buttons
723
.inline-toolbar & {
724
// @extend %button-flat;
725
&:not(.text-button) {
727
border-radius: $circular-radius;
728
}
729
}
730
.primary-toolbar & {
732
-gtk-icon-shadow: none; // tango icons don't need shadows
733
}
734
&.close,
736
&.circular { // The Bloody Circul Button
737
border-radius: $circular-radius;
738
label {
740
// padding: 0;
741
}
742
}
743
}
744
%button-small {
746
min-height: $small-size;
747
min-width: $small-size;
748
padding: 0;
749
border-radius: $circular-radius;
750
}
751
%needs-attention {
753
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
754
background-repeat: no-repeat;
755
background-position: right 3px;
756
background-size: 6px 6px;
757
&:dir(rtl) {
759
background-position: left 3px;
760
}
761
}
762
// all the following is for the +|- buttons on inline toolbars, that way
764
// should really be deprecated...
765
.inline-toolbar toolbutton > button {
766
}
767
// More inline toolbar buttons
769
toolbar.inline-toolbar toolbutton {
770
&:not(:first-child) > button.flat {
771
// @extend %linked-not-first-child;
772
}
773
&:not(:last-child) > button.flat {
775
// @extend %linked-not-last-child;
776
}
777
}
778
%linked-not-first-child {
780
border-top-left-radius: 0;
781
border-bottom-left-radius: 0;
782
}
783
%linked-not-last-child {
785
border-top-right-radius: 0;
786
border-bottom-right-radius: 0;
787
}
788
%linked {
790
&:not(:first-child) {
791
@extend %linked-not-first-child;
792
}
793
&:not(:last-child) {
795
@extend %linked-not-last-child;
796
}
797
}
798
%linked-vertical-not-first-child {
800
border-top-left-radius: 0;
801
border-top-right-radius: 0;
802
}
803
%linked-vertical-not-last-child {
805
border-bottom-left-radius: 0;
806
border-bottom-right-radius: 0;
807
}
808
%linked-vertical {
810
&:not(:first-child) {
811
@extend %linked-vertical-not-first-child;
812
}
813
&:not(:last-child) {
815
@extend %linked-vertical-not-last-child;
816
}
817
}
818
%linked-image-button {
820
&:first-child {
821
border-top-left-radius: $corner-radius;
822
border-bottom-left-radius: $corner-radius;
823
}
824
&:last-child {
826
border-top-right-radius: $corner-radius;
827
border-bottom-right-radius: $corner-radius;
828
}
829
&:only-child {
831
border-radius: $circular-radius;
832
}
833
}
834
%linked-vertical-image-button {
836
&:first-child {
837
border-top-left-radius: $corner-radius;
838
border-top-right-radius: $corner-radius;
839
}
840
&:last-child {
842
border-bottom-left-radius: $corner-radius;
843
border-bottom-right-radius: $corner-radius;
844
}
845
&:only-child {
847
border-radius: $circular-radius;
848
}
849
}
850
/* menu buttons */
852
modelbutton.flat,
853
.menuitem.button.flat {
854
min-height: $menuitem-size;
855
padding: 0 8px;
856
border-radius: $corner-radius;
857
@extend %ripple;
859
@include ink-color($on-surface);
860
&:selected {
862
background-color: $overlay-selected;
863
}
864
}
865
modelbutton.flat arrow {
867
transition: color $duration $ease-out;
868
color: hint($on-surface);
869
&:disabled {
871
color: disabled-hint($on-surface);
872
}
873
&.left {
875
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
876
}
877
&.right {
879
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
880
}
881
}
882
button.color {
884
min-height: $small-size;
885
min-width: $small-size;
886
padding: $container-padding;
887
colorswatch:only-child {
889
&,
890
overlay {
891
// border-radius: 0;
892
}
893
}
894
}
895
/**
897
* Links
898
*/
899
*:link {
901
color: $primary;
902
}
903
*:visited {
905
color: $visited;
906
}
907
button.link {
909
&:link {
910
color: $primary;
911
@include ink-color($primary);
912
}
913
&:visited {
915
color: $visited;
916
@include ink-color($visited);
917
}
918
> label {
920
text-decoration-line: underline;
921
}
922
}
923
/**
925
* GtkSpinButton
926
*/
927
spinbutton {
929
&:not(.vertical) {
930
// in this horizontal configuration, the whole spinbutton
931
// behaves as the entry, so we extend the entry styling
932
// and nuke the style on the internal entry
933
@extend %entry;
934
padding: 0;
936
entry {
938
min-width: $large-size - 8px * 2;
939
// reset all the other props since the spinbutton node is styled here
940
margin: 0;
941
border-image: none;
942
border-radius: 0;
943
box-shadow: none;
944
background-color: transparent;
945
}
946
button {
948
@extend %button-flat-basic;
949
@extend %button-small;
950
// margin: $container-padding;
952
border: solid $container-padding transparent;
953
// Remove unwanted focus indicator
955
&:focus:not(:hover):not(:active) {
956
box-shadow: inset 0 0 0 9999px transparent;
957
}
958
&.up:dir(ltr),
960
&.down:dir(rtl) {
961
margin-left: -$container-padding / 2;
962
}
963
&.up:dir(rtl),
965
&.down:dir(ltr) {
966
margin-right: -$container-padding / 2;
967
}
968
}
969
}
970
// OSD horizontal
972
.osd &:not(.vertical) {
973
}
974
// Vertical
976
&.vertical {
977
// in the vertical configuration, we treat the spinbutton
978
// as a box, and tweak the style of the entry in the middle
979
// so that it's linked
980
// FIXME: this should not be set at all, but otherwise it gets the wrong
982
// color
983
caret-color: $primary;
984
// FIXME: this should not be set at all, but otherwise it gets the wrong
986
// color
987
&:disabled {
988
color: disabled($on-surface);
989
}
990
entry {
992
@extend %entry_raised;
993
min-height: $medium-size;
995
min-width: $large-size;
996
padding: 0;
997
}
998
button {
1000
min-height: $medium-size;
1001
min-width: $large-size;
1002
padding: 0;
1003
@extend %button-flat-basic;
1005
// Remove unwanted focus indicator
1007
&:focus:not(:hover):not(:active) {
1008
box-shadow: inset 0 0 0 9999px transparent;
1009
}
1010
&.up {
1012
border-radius: $corner-radius $corner-radius 0 0;
1013
}
1014
&.down {
1016
border-radius: 0 0 $corner-radius $corner-radius;
1017
}
1018
}
1019
}
1020
// OSD vertical
1022
.osd &.vertical {
1023
}
1024
// Misc
1026
treeview &:not(.vertical) {
1027
min-height: 0;
1028
border-style: none;
1029
border-radius: 0;
1030
entry {
1032
min-height: 0;
1033
padding: 1px 2px;
1034
}
1035
}
1036
}
1037
/**
1039
* ComboBoxes
1040
*/
1041
combobox {
1043
arrow {
1044
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1045
min-height: 16px;
1046
min-width: 16px;
1047
}
1048
// workaround for menuitem selection
1050
decoration {
1051
transition: none;
1052
}
1053
button.combo cellview {
1055
&:dir(ltr) {
1056
margin-left: 8px - ($medium-size - 16px) / 2;
1057
}
1058
&:dir(rtl) {
1060
margin-right: 8px - ($medium-size - 16px) / 2;
1061
}
1062
}
1063
menu {
1065
padding: 2px 0;
1066
menuitem {
1068
min-height: $medium-size - 2px * 2;
1069
padding: 0 8px;
1070
}
1071
// overflow arrows
1073
> arrow {
1074
&.top {
1075
margin-top: -2px;
1076
}
1077
&.bottom {
1079
margin-top: 2px * 2;
1080
margin-bottom: -2px * 3;
1081
}
1082
}
1083
}
1084
&.linked {
1086
button:nth-child(2) {
1087
&:dir(ltr) {
1088
@extend %linked-not-first-child;
1089
}
1090
&:dir(rtl) {
1092
@extend %linked-not-last-child;
1093
}
1094
}
1095
}
1096
> .linked:not(.vertical) > entry:not(:only-child) {
1098
border-radius: $corner-radius $corner-radius 0 0;
1099
&:first-child {
1101
margin-right: -$medium-size;
1102
padding-right: $medium-size;
1103
}
1104
&:last-child {
1106
margin-left: -$medium-size;
1107
padding-left: $medium-size;
1108
}
1109
}
1110
> .linked:not(.vertical) > button:not(:only-child) {
1112
@extend %button-flat-activatable;
1113
// @extend %button-small;
1114
min-height: 16px;
1116
min-width: 16px;
1117
margin: ($medium-size - $small-size) / 2;
1118
padding: ($small-size - 16px) / 2;
1119
border-radius: $circular-radius;
1120
}
1121
}
1122
// the combo is a composite widget so the way we do button linking doesn't
1124
// work, special case needed. See
1125
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1126
.linked:not(.vertical) > combobox {
1128
&:not(:first-child) > box > button.combo {
1129
@extend %linked-not-first-child;
1130
}
1131
&:not(:last-child) > box > button.combo {
1133
@extend %linked-not-last-child;
1134
}
1135
}
1136
.linked.vertical > combobox {
1138
&:not(:first-child) > box > button.combo {
1139
@extend %linked-vertical-not-first-child;
1140
}
1141
&:not(:last-child) > box > button.combo {
1143
@extend %linked-vertical-not-last-child;
1144
}
1145
}
1146
button.combo:only-child {
1148
border-radius: $corner-radius $corner-radius 0 0;
1149
font-weight: normal;
1150
@include entry(normal);
1152
&:focus {
1154
@include entry(focus);
1155
}
1156
&:drop(active),
1158
&:hover {
1159
@include entry(hover);
1160
}
1161
&:checked {
1163
@include entry(checked);
1164
}
1165
&:disabled {
1167
@include entry(disabled);
1168
}
1169
}
1170
/**
1172
* Toolbars
1173
*/
1174
toolbar {
1176
-GtkWidget-window-dragging: true;
1177
padding: 2px;
1178
background-color: $background;
1179
button {
1181
@extend %button-flat;
1182
}
1183
// on OSD
1185
.osd & {
1186
background-color: transparent;
1187
}
1188
// stand-alone OSD toolbars
1190
&.osd {
1191
@extend %toolbar-osd;
1192
// positional classes for `attached` osd toolbars
1194
&.left,
1195
&.right,
1196
&.top,
1197
&.bottom {
1198
border-radius: 0;
1199
}
1200
&.bottom {
1202
box-shadow: none;
1203
background-color: transparent;
1204
background-image:
1205
linear-gradient(
1206
to bottom,
1207
transparent,
1208
rgba(black, .1) 30%,
1209
rgba(black, .2) 50%,
1210
rgba(black, .4)
1211
);
1212
}
1213
}
1214
// toolbar separators
1216
&.horizontal > separator {
1217
margin: 2px;
1218
}
1219
&.vertical > separator {
1221
margin: 2px;
1222
}
1223
&:not(.inline-toolbar):not(.osd) {
1225
scale,
1226
entry,
1227
spinbutton,
1228
button {
1229
margin: 2px;
1230
}
1231
.linked entry,
1233
.linked spinbutton,
1234
.linked button {
1235
&:not(:first-child) {
1236
margin-left: 0;
1237
}
1238
&:not(:last-child) {
1240
margin-right: 0;
1241
}
1242
}
1243
spinbutton {
1245
entry,
1246
button {
1247
margin: 0;
1248
}
1249
}
1250
switch {
1252
margin: 2px + $container-padding 2px;
1253
}
1254
}
1255
}
1256
%toolbar-osd {
1258
transition: $transition-shadow;
1259
padding: $container-padding;
1260
border-radius: $corner-radius;
1261
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1262
background-color: $surface;
1263
&:backdrop {
1265
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1266
}
1267
}
1268
// searchbar, location-bar & inline-toolbar
1270
.inline-toolbar {
1271
padding: $container-padding;
1272
border-style: solid;
1273
border-width: 0 1px 1px;
1274
border-color: divider($on-surface);
1275
background-color: $base-alt;
1276
}
1277
searchbar > revealer > box,
1279
.location-bar {
1280
padding: $container-padding;
1281
border-style: solid;
1282
border-width: 0 0 1px;
1283
border-color: divider($on-surface);
1284
background-color: $background;
1285
background-clip: border-box;
1286
}
1287
searchbar > revealer > box {
1289
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1290
margin: -6px;
1291
padding: $container-padding;
1292
}
1293
/**
1295
* Header bars
1296
*/
1297
.titlebar {
1299
transition: background-color $duration $ease-out, color $duration $ease-out;
1300
border-radius: $corner-radius $corner-radius 0 0;
1301
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1302
background-color: $titlebar;
1303
color: $on-titlebar;
1304
&:disabled {
1306
color: disabled($on-titlebar);
1307
}
1308
&:backdrop {
1310
background-color: $titlebar-backdrop;
1311
color: hint($on-titlebar);
1312
&:disabled {
1314
color: disabled-hint($on-titlebar);
1315
}
1316
}
1317
.title {
1319
padding-left: 12px;
1320
padding-right: 12px;
1321
font-weight: bold;
1322
}
1323
.subtitle {
1325
padding-left: 12px;
1326
padding-right: 12px;
1327
font-size: smaller;
1328
}
1329
.subtitle,
1331
.dim-label {
1332
transition: color $duration $ease-out;
1333
color: hint($on-titlebar);
1334
&:backdrop {
1336
color: disabled($on-titlebar);
1337
}
1338
}
1339
// Don't draw titlebar above titlebar
1341
.titlebar {
1342
background-color: transparent;
1343
box-shadow: none;
1344
}
1345
// The separator for split headerbars
1347
headerbar + separator {
1348
background-color: divider($on-titlebar);
1349
}
1350
entry {
1352
box-shadow: inset 0 -1px stroke($on-titlebar);
1353
background-color: entry-fill($on-titlebar);
1354
color: $on-titlebar;
1355
&:disabled {
1357
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1358
background-color: entry-fill($on-titlebar);
1359
color: disabled($on-titlebar);
1360
}
1361
image {
1363
color: hint($on-titlebar);
1364
&:hover,
1366
&:active {
1367
color: $on-titlebar;
1368
}
1369
&:disabled {
1371
color: disabled($on-titlebar);
1372
}
1373
}
1374
}
1375
.linked:not(.vertical) > entry:not(:only-child) {
1377
border-radius: $corner-radius $corner-radius 0 0;
1378
}
1379
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1381
@extend %button-flat;
1382
border-image:
1384
radial-gradient(
1385
circle closest-corner at center calc(100% - 1px),
1386
$titlebar-indicator 0%,
1387
transparent 0%
1388
) 0 0 0 / 0 0 0;
1389
background-color: transparent;
1390
color: hint($on-titlebar);
1391
@include ink-color($on-titlebar);
1392
&:disabled {
1394
color: disabled-hint($on-titlebar);
1395
}
1396
@at-root %titlebar-button-checked,
1398
&:checked {
1399
border-image:
1400
radial-gradient(
1401
circle closest-corner at center calc(100% - 1px),
1402
$titlebar-indicator 100%,
1403
transparent 0%
1404
) 0 0 2 / 0 0 2px;
1405
background-color: transparent;
1406
color: $on-titlebar;
1407
@include ink-color($on-titlebar);
1408
&:disabled {
1410
background-color: transparent;
1411
color: disabled($on-titlebar);
1412
}
1413
}
1414
&:backdrop {
1416
color: disabled($on-titlebar);
1417
&:disabled {
1419
color: disabled-hint($on-titlebar);
1420
}
1421
&:checked {
1423
color: hint($on-titlebar);
1424
&:disabled {
1426
color: disabled-hint($on-titlebar);
1427
}
1428
}
1429
}
1430
}
1431
button.suggested-action, button.destructive-action {
1433
&:disabled {
1434
background-color: fill($on-titlebar);
1435
color: disabled($on-titlebar);
1436
}
1437
}
1438
// FIXME: Ugly overriding
1440
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1441
min-width: 120px - 8px * 2;
1442
}
1443
// FIXME: Ugly overriding
1445
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1446
min-width: 0;
1447
padding-left: ($medium-size - 24px) / 2;
1448
padding-right: ($medium-size - 24px) / 2;
1449
}
1450
&.selection-mode {
1452
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1453
// but let's keep it for backwards compatibility.
1454
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1455
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1456
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1457
background-color: $primary;
1458
color: $on-primary;
1459
&:backdrop {
1461
color: hint($on-primary);
1462
}
1463
.subtitle:link {
1465
color: $on-primary;
1466
}
1467
button:not(.suggested-action):not(.destructive-action) {
1469
border-image:
1470
radial-gradient(
1471
circle closest-corner at center calc(100% - 1px),
1472
currentcolor 0%,
1473
transparent 0%
1474
) 0 0 0 / 0 0 0;
1475
color: $on-primary;
1476
&:disabled {
1478
color: disabled($on-primary);
1479
}
1480
&:checked {
1482
border-image:
1483
radial-gradient(
1484
circle closest-corner at center calc(100% - 1px),
1485
currentcolor 100%,
1486
transparent 0%
1487
) 0 0 2 / 0 0 2px;
1488
color: $on-primary;
1489
&:disabled {
1491
color: disabled($on-primary);
1492
}
1493
}
1494
&:backdrop {
1496
color: hint($on-primary);
1497
&:disabled {
1499
color: disabled-hint($on-primary);
1500
}
1501
&:checked {
1503
color: hint($on-primary);
1504
&:disabled {
1506
color: disabled-hint($on-primary);
1507
}
1508
}
1509
}
1510
}
1511
.selection-menu {
1513
padding-left: 16px;
1514
padding-right: 16px;
1515
arrow {
1517
-GtkArrow-arrow-scaling: 1;
1518
}
1519
.arrow {
1521
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1522
}
1523
}
1524
}
1525
.selection-mode {
1527
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1528
background-color: $primary;
1529
}
1530
// squared corners when the window is maximized, tiled, or fullscreen
1532
.tiled &,
1533
.tiled-top &,
1534
.tiled-right &,
1535
.tiled-bottom &,
1536
.tiled-left &,
1537
.maximized &,
1538
.fullscreen & {
1539
border-radius: 0;
1540
box-shadow: $shadow-z1;
1541
}
1542
&.default-decoration {
1544
min-height: $small-size;
1545
padding: $container-padding;
1546
box-shadow: inset 0 1px highlight($titlebar);
1547
.tiled &,
1549
.maximized &,
1550
.fullscreen & {
1551
box-shadow: none;
1552
}
1553
button.titlebutton {
1555
min-height: $small-size;
1556
min-width: $small-size;
1557
margin: 0;
1558
padding: 0;
1559
}
1560
// workaround for non-animatable buttons
1562
.background:not(.csd) & button.titlebutton:active {
1563
background-size: 1000% 1000%;
1564
}
1565
}
1566
.solid-csd & {
1568
&:dir(rtl), &:dir(ltr) { // specificity bump
1569
border-radius: 0;
1570
box-shadow: $shadow-z1; // just remove the highlight
1571
}
1572
}
1573
}
1574
headerbar {
1576
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1577
min-height: $large-size;
1578
padding: 0 $container-padding;
1579
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1581
entry,
1582
spinbutton,
1583
button {
1584
margin-top: $container-padding;
1585
margin-bottom: $container-padding;
1586
}
1587
separator.titlebutton {
1589
margin-top: $large-size / 4;
1590
margin-bottom: $large-size / 4;
1591
background-color: divider($on-titlebar);
1592
}
1593
switch {
1595
margin-top: ($large-size - 24px) / 2;
1596
margin-bottom: ($large-size - 24px) / 2;
1597
}
1598
// reset button margins of the spinbutton
1600
spinbutton button {
1601
margin-top: 0;
1602
margin-bottom: 0;
1603
}
1604
// FIXME: This is a hacky workaround.
1606
.entry-tag {
1607
margin-top: 5px;
1608
margin-bottom: 5px;
1609
}
1610
}
1611
// Development versions of apps to use a differently styled headerbar
1613
window.devel .titlebar:not(.selection-mode) {
1614
}
1615
/**
1617
* Pathbars
1618
*/
1619
%pathbar_button,
1621
.path-bar.linked:not(.vertical) > button {
1622
@extend %button-flat-basic;
1623
padding-left: ($medium-size - 24px) / 2;
1625
padding-right: ($medium-size - 24px) / 2;
1626
border-image:
1627
radial-gradient(
1628
circle closest-corner at center calc(100% - 1px),
1629
$primary 0%,
1630
transparent 0%
1631
) 0 0 0 / 0 0 0;
1632
border-radius: $corner-radius;
1633
&:checked {
1635
border-image:
1636
radial-gradient(
1637
circle closest-corner at center calc(100% - 1px),
1638
$primary 100%,
1639
transparent 0%
1640
) 0 0 2 / 0 0 2px;
1641
color: $on-surface;
1642
&,
1644
&:disabled {
1645
background-color: transparent;
1646
}
1647
}
1648
label:not(:only-child) {
1650
&:first-child {
1651
margin-left: 0;
1652
}
1653
&:last-child {
1655
margin-right: 0;
1656
}
1657
}
1658
&.text-button {
1660
min-width: 0;
1661
}
1662
&.slider-button {
1664
padding-left: (24px - 16px) / 2;
1665
padding-right: (24px - 16px) / 2;
1666
}
1667
}
1668
/**
1670
* Tree Views
1671
*/
1672
treeview.view {
1674
@at-root * {
1675
-GtkTreeView-horizontal-separator: 4;
1676
-GtkTreeView-grid-line-width: 1;
1677
-GtkTreeView-grid-line-pattern: '';
1678
-GtkTreeView-tree-line-width: 1;
1679
-GtkTreeView-tree-line-pattern: '';
1680
-GtkTreeView-expander-size: 16;
1681
}
1682
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1684
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1685
// FIXME: Avoid transparency background-color being slightly darker
1687
&:selected {
1688
background-color: $base;
1689
background-image: image($overlay-selected);
1690
}
1691
// to avoid borders being overridden by the previously set props
1693
rubberband {
1694
@extend rubberband;
1695
}
1696
&:hover,
1698
&:selected {
1699
border-radius: 0;
1700
}
1701
&.separator {
1703
min-height: 1px + 2px * 2;
1704
color: divider($on-surface);
1705
}
1706
&:drop(active) {
1708
// FIXME: box-shadow, background-color and background-image are not available here.
1709
border-style: solid none;
1710
border-width: 9999px;
1711
border-color: overlay("hover", $on-surface);
1712
&.after {
1714
border-top-style: none;
1715
}
1716
&.before {
1718
border-bottom-style: none;
1719
}
1720
}
1721
&.expander {
1723
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1724
-gtk-icon-transform: rotate(-90deg);
1725
&:dir(rtl) {
1727
-gtk-icon-transform: rotate(90deg);
1728
}
1729
&:checked {
1731
-gtk-icon-transform: unset;
1732
}
1733
color: hint($on-surface);
1735
&:hover,
1737
&:active {
1738
color: $on-surface;
1739
}
1740
&:disabled {
1742
color: disabled-hint($on-surface);
1743
}
1744
}
1745
&.progressbar { // progress bar in treeviews
1747
border-bottom: $bar-size solid $primary;
1748
box-shadow: none;
1749
background-color: transparent;
1750
background-image: none;
1751
&:selected:hover {
1753
box-shadow: none;
1754
}
1755
}
1756
&.trough { // progress bar trough in treeviews
1758
border-bottom: $bar-size solid disabled-stroke($on-surface);
1759
box-shadow: none;
1760
background-color: transparent;
1761
background-image: none;
1762
&:selected:hover {
1764
box-shadow: none;
1765
}
1766
}
1767
header {
1769
button {
1770
padding: 2px 6px;
1771
border-style: none solid solid none;
1772
border-width: 1px;
1773
border-color: divider($on-surface);
1774
border-radius: 0;
1775
background-clip: border-box;
1776
color: hint($on-surface);
1777
@include ink-color($on-surface);
1778
@include list-item;
1779
&:disabled {
1781
color: disabled-hint($on-surface);
1782
}
1783
&,
1785
&:disabled {
1786
background-color: $base;
1787
}
1788
&:last-child {
1790
border-right-style: none;
1791
}
1792
}
1793
}
1794
button.dnd,
1796
header.button.dnd { // for treeview-like derive widgets
1797
padding: 2px 6px;
1798
border-style: none solid solid;
1799
border-width: 1px;
1800
border-color: divider($on-surface);
1801
border-radius: 0;
1802
box-shadow: none;
1803
background-color: $base;
1804
background-clip: border-box;
1805
color: $primary;
1806
}
1807
// see tests/testaccel to test
1809
acceleditor > label {
1810
background-color: $primary;
1811
}
1812
}
1813
/**
1815
* Menus
1816
*/
1817
menubar,
1819
.menubar {
1820
-GtkWidget-window-dragging: true;
1821
padding: 0;
1822
// box-shadow: inset 0 -1px divider($on-surface);
1823
background-color: $titlebar;
1824
color: $on-titlebar;
1825
&:backdrop {
1827
background-color: $titlebar-backdrop;
1828
color: hint($on-titlebar);
1829
}
1830
.csd & {
1832
transition: $transition;
1833
}
1834
> menuitem {
1836
transition: $transition;
1837
min-height: 20px;
1838
padding: 4px 8px;
1839
color: hint($on-titlebar);
1840
&:hover { // Seems like it :hover even with keyboard focus
1842
transition: none;
1843
background-color: overlay("activated", $on-titlebar);
1844
color: $on-titlebar;
1845
}
1846
&:disabled {
1848
color: disabled-hint($on-titlebar);
1849
}
1850
}
1851
}
1852
// Needed to make the border-radius of menus work
1854
// otherwise the background bleeds out of the menu edges
1855
.background.popup {
1856
background-color: transparent;
1857
}
1858
menu,
1860
.menu,
1861
.context-menu {
1862
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1863
padding: 4px 0;
1864
box-shadow: inset 0 1px highlight($surface);
1865
background-color: $surface;
1866
background-clip: border-box;
1867
border: 1px solid divider($on-surface); // adds borders in a non composited env
1868
.csd & {
1870
border: none; // axes borders in a composited env
1871
border-radius: $corner-radius;
1872
}
1873
menuitem {
1875
transition: background-color $duration $ease-out;
1876
min-height: 20px;
1877
min-width: 40px;
1878
padding: 4px 8px;
1879
color: $on-surface;
1880
font: initial;
1881
text-shadow: none;
1882
&:hover {
1884
transition: none;
1885
background-color: overlay("hover", $on-surface);
1886
}
1887
&:disabled {
1889
color: disabled($on-surface);
1890
}
1891
// submenu indicators
1893
arrow {
1894
min-height: 16px;
1895
min-width: 16px;
1896
color: hint($on-surface);
1897
&:disabled {
1899
color: disabled-hint($on-surface);
1900
}
1901
&:dir(ltr) {
1903
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1904
margin-left: 8px;
1905
}
1906
&:dir(rtl) {
1908
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1909
margin-right: 8px;
1910
}
1911
}
1912
// avoids labels color being overridden, see
1914
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1915
label {
1916
&:dir(rtl),
1917
&:dir(ltr) {
1918
// color: inherit;
1919
}
1920
}
1921
}
1922
// overflow arrows
1924
> arrow {
1925
min-height: 16px;
1926
min-width: 16px;
1927
padding: 4px;
1928
background-color: $surface;
1929
color: hint($on-surface);
1930
&.top {
1932
margin-top: -4px;
1933
border-bottom: 1px solid divider($on-surface);
1934
border-radius: $corner-radius $corner-radius 0 0;
1935
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1936
}
1937
&.bottom {
1939
margin-top: 4px * 2;
1940
margin-bottom: -4px * 3;
1941
border-top: 1px solid divider($on-surface);
1942
border-radius: 0 0 $corner-radius $corner-radius;
1943
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1944
}
1945
&:hover {
1947
background-image: image(overlay("hover", $on-surface));
1948
}
1949
&:disabled {
1951
border-color: transparent;
1952
background-color: transparent;
1953
color: transparent;
1954
// color: disabled-hint($on-surface);
1955
}
1956
}
1957
separator {
1959
margin: 4px 0;
1960
}
1961
}
1962
menuitem {
1964
accelerator {
1965
color: hint($on-surface);
1966
}
1967
&:disabled accelerator {
1969
color: disabled-hint($on-surface);
1970
}
1971
}
1972
/**
1974
* Popovers
1975
*/
1976
popover.background {
1978
transition: $transition-shadow;
1979
padding: 2px;
1980
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1981
background-color: $surface;
1982
&:backdrop {
1984
box-shadow: $shadow-z2;
1985
}
1986
&, .csd & {
1988
border-style: solid;
1989
border-width: 1px;
1990
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
1991
border-radius: $corner-radius + 1px;
1992
}
1993
> stack {
1995
margin: -4px; // remove extra padding from menu style popovers
1996
}
1997
> toolbar {
1999
margin: -2px;
2000
}
2001
> list,
2003
> .view,
2004
> toolbar {
2005
border-style: none;
2006
box-shadow: none;
2007
background-color: transparent;
2008
}
2009
// FIXME: Use the popover color instead of transparent as a workaround for .view
2011
list,
2012
.view:not(:selected),
2013
toolbar {
2014
background-color: $surface;
2015
}
2016
&.touch-selection,
2018
&.magnifier,
2019
&.osd {
2020
// @extend %osd;
2021
}
2022
button:not(.suggested-action):not(.destructive-action) {
2024
// @extend %button-flat;
2025
}
2026
.linked:not(.vertical) > entry:not(:only-child) {
2028
// border-radius: $corner-radius $corner-radius 0 0;
2029
}
2030
&.menu button,
2032
button.model {
2033
@extend %button-flat;
2034
min-height: 32px;
2036
padding: 0 8px;
2037
border-radius: $corner-radius;
2038
&:checked {
2040
// color: $primary;
2041
}
2042
}
2043
separator {
2045
margin: 4px 0;
2046
}
2047
list separator {
2049
margin: 0;
2050
}
2051
}
2052
/**
2054
* Notebooks
2055
*/
2056
notebook {
2058
frame > paned > & > header,
2059
&.frame > header {
2060
background-color: $base-alt;
2061
}
2062
&:focus tab:checked {
2064
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2065
}
2066
> header {
2068
border-width: 1px;
2069
border-color: divider($on-surface);
2070
background-color: $background;
2071
background-clip: border-box;
2072
&.top {
2074
border-bottom-style: solid;
2075
> tabs {
2077
margin-bottom: -1px;
2078
> tab {
2080
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2081
&:checked {
2083
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2084
}
2085
&.reorderable-page {
2087
border-image-width: 0 1px 2px;
2088
}
2089
}
2090
}
2091
}
2092
&.bottom {
2094
border-top-style: solid;
2095
> tabs {
2097
margin-top: -1px;
2098
> tab {
2100
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2101
&:checked {
2103
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2104
}
2105
&.reorderable-page {
2107
border-image-width: 2px 1px 0;
2108
}
2109
}
2110
}
2111
}
2112
&.left {
2114
border-right-style: solid;
2115
> tabs {
2117
margin-right: -1px;
2118
> tab {
2120
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2121
&:checked {
2123
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2124
}
2125
&.reorderable-page {
2127
border-image-width: 1px 2px 1px 0;
2128
}
2129
}
2130
}
2131
}
2132
&.right {
2134
border-left-style: solid;
2135
> tabs {
2137
margin-left: -1px;
2138
> tab {
2140
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2141
&:checked {
2143
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2144
}
2145
&.reorderable-page {
2147
border-image-width: 1px 0 1px 2px;
2148
}
2149
}
2150
}
2151
}
2152
&.top > tabs > arrow {
2154
@extend %notebook_vert_arrows;
2155
border-top-style: none;
2157
}
2158
&.bottom > tabs > arrow {
2160
@extend %notebook_vert_arrows;
2161
border-bottom-style: none;
2163
}
2164
@at-root %notebook_vert_arrows {
2166
padding-left: 4px;
2167
padding-right: 4px;
2168
&.down {
2170
margin-left: -8px;
2171
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2172
}
2173
&.up {
2175
margin-right: -8px;
2176
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2177
}
2178
}
2179
&.left > tabs > arrow {
2181
@extend %notebook_horz_arrows;
2182
border-left-style: none;
2184
}
2185
&.right > tabs > arrow {
2187
@extend %notebook_horz_arrows;
2188
border-right-style: none;
2190
}
2191
@at-root %notebook_horz_arrows {
2193
padding-top: 4px;
2194
padding-bottom: 4px;
2195
&.down {
2197
margin-top: -8px;
2198
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2199
}
2200
&.up {
2202
margin-bottom: -8px;
2203
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2204
}
2205
}
2206
> tabs > arrow {
2208
min-height: 16px;
2209
min-width: 16px;
2210
border-radius: 0;
2211
color: hint($on-surface);
2212
@extend %ripple;
2213
@include ink-color($on-surface);
2214
&:disabled {
2216
color: disabled-hint($on-surface);
2217
}
2218
}
2219
tab {
2221
transition: $transition,
2222
background-size 0ms,
2223
background-image 0ms;
2224
min-height: $small-size;
2225
min-width: $small-size;
2226
padding: $container-padding 12px;
2227
border-width: 1px; // for reorderable tabs
2229
border-color: transparent; //
2230
outline: none;
2232
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2233
background-repeat: no-repeat;
2234
background-position: center;
2235
background-size: 0% 0%;
2236
background-clip: border-box;
2237
color: hint($on-surface);
2239
font-weight: 500;
2240
&:hover {
2242
background-color: overlay("hover-alt", $on-surface);
2243
}
2244
&:disabled {
2246
color: disabled-hint($on-surface);
2247
}
2248
&:checked {
2250
transition: $transition,
2251
background-size $ripple-fade-in-duration $ease-out,
2252
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2253
background-color: transparent;
2254
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2255
background-size: 1000% 1000%;
2256
background-clip: padding-box;
2257
color: $on-surface;
2258
&:disabled {
2260
color: disabled($on-surface);
2261
}
2262
&.reorderable-page {
2264
border-color: divider($on-surface);
2265
background-color: $base;
2266
}
2267
}
2268
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2270
> box {
2271
transition: background-color $duration $ease-out;
2272
margin: -$container-padding -12px;
2273
padding: $container-padding 12px;
2274
&:drop(active) {
2276
background-color: overlay("hover", $on-surface);
2277
}
2278
}
2279
// colors the button like the label, overridden otherwise
2281
button.flat {
2282
@extend %button-small;
2283
&:last-child {
2285
margin-left: $container-padding;
2286
margin-right: $container-padding - 12px;
2287
}
2288
&:first-child {
2290
margin-left: $container-padding - 12px;
2291
margin-right: $container-padding;
2292
}
2293
}
2294
}
2295
&.top,
2297
&.bottom {
2298
tabs {
2299
padding-left: 8px;
2300
padding-right: 8px;
2301
&:not(:only-child) {
2303
&:first-child {
2304
margin-left: 0;
2305
}
2306
&:last-child {
2308
margin-right: 0;
2309
}
2310
}
2311
tab.reorderable-page {
2313
border-style: none solid;
2314
}
2315
}
2316
}
2317
&.left,
2319
&.right {
2320
tabs {
2321
padding-top: 8px;
2322
padding-bottom: 8px;
2323
&:not(:only-child) {
2325
&:first-child {
2326
margin-top: 0;
2327
}
2328
&:last-child {
2330
margin-bottom: 0;
2331
}
2332
}
2333
tab.reorderable-page {
2335
border-style: solid none;
2336
}
2337
}
2338
}
2339
}
2340
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2342
background-color: $base;
2343
}
2344
}
2345
/**
2347
* Scrollbars
2348
*/
2349
scrollbar {
2351
$_slider_min_length: 24px;
2352
// disable steppers
2354
@at-root * {
2355
-GtkScrollbar-has-backward-stepper: false;
2356
-GtkScrollbar-has-forward-stepper: false;
2357
}
2358
transition: $transition;
2360
background-color: $base;
2361
// scrollbar border
2363
&.top { border-bottom: 1px solid divider($on-surface); }
2364
&.bottom { border-top: 1px solid divider($on-surface); }
2365
&.left { border-right: 1px solid divider($on-surface); }
2366
&.right { border-left: 1px solid divider($on-surface); }
2367
// slider
2369
slider {
2370
transition: background-color $duration $ease-out;
2371
min-width: 8px;
2372
min-height: 8px;
2373
border: 4px solid transparent;
2374
border-radius: $circular-radius;
2375
background-clip: padding-box;
2376
background-color: disabled($on-surface);
2377
&:hover {
2379
background-color: hint($on-surface);
2380
}
2381
&:active {
2383
background-color: $on-surface;
2384
}
2385
&:disabled {
2387
background-color: disabled-hint($on-surface);
2388
}
2389
}
2390
&.fine-tune {
2392
slider {
2393
min-width: 4px;
2394
min-height: 4px;
2395
}
2396
&.horizontal slider {
2398
margin: 2px 0;
2399
}
2400
&.vertical slider {
2402
margin: 0 2px;
2403
}
2404
}
2405
&.overlay-indicator {
2407
&:not(.fine-tune) slider {
2408
transition-property: background-color, min-height, min-width;
2409
}
2410
&:not(.dragging):not(.hovering) {
2412
border-color: transparent;
2413
background-color: transparent;
2414
slider {
2416
min-width: 4px;
2417
min-height: 4px;
2418
margin: 4px - 1px;
2419
border: 1px solid rgba($base, .3);
2420
}
2421
button {
2423
min-width: 4px;
2424
min-height: 4px;
2425
margin: 4px - 1px;
2426
border: 1px solid rgba($base, .3);
2427
border-radius: $circular-radius;
2428
background-color: disabled($on-surface);
2429
background-clip: padding-box;
2430
-gtk-icon-source: none;
2431
&:disabled {
2433
background-color: disabled-hint($on-surface);
2434
}
2435
}
2436
&.horizontal {
2438
slider {
2439
min-width: $_slider_min_length;
2440
}
2441
button {
2443
min-width: 8px;
2444
}
2445
}
2446
&.vertical {
2448
slider {
2449
min-height: $_slider_min_length;
2450
}
2451
button {
2453
min-height: 8px;
2454
}
2455
}
2456
}
2457
&.dragging,
2459
&.hovering {
2460
background-color: rgba($surface, .9);
2461
}
2462
}
2463
&.horizontal slider {
2465
min-width: $_slider_min_length;
2466
}
2467
&.vertical slider {
2469
min-height: $_slider_min_length;
2470
}
2471
// button styling
2473
button {
2474
@extend %button-flat-basic;
2475
min-width: 16px;
2477
min-height: 16px;
2478
padding: 0;
2479
border-radius: 0;
2480
}
2481
// button icons
2483
&.vertical {
2484
button {
2485
&.down {
2486
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2487
}
2488
&.up {
2490
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2491
}
2492
}
2493
}
2494
&.horizontal {
2496
button {
2497
&.down {
2498
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2499
}
2500
&.up {
2502
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2503
}
2504
}
2505
}
2506
}
2507
/**
2510
* Switch
2511
*/
2512
switch {
2514
transition: all $duration $ease-out;
2515
margin: $container-padding 0;
2516
padding: 0 2px;
2517
border: 5px solid transparent;
2518
border-radius: $circular-radius;
2519
background-color: stroke($on-surface);
2520
background-clip: padding-box;
2521
font-size: 0;
2522
&:checked {
2524
background-color: rgba($primary, .5);
2525
}
2526
&:disabled {
2528
opacity: .5;
2529
}
2530
// hide on/off icons for >=3.24.5
2532
image {
2533
margin: -8px;
2534
-gtk-icon-transform: scale(0);
2535
}
2536
slider {
2538
transition: all $duration $ease-out;
2539
min-width: 20px;
2540
min-height: 20px;
2541
margin: -3px -2px;
2542
border-radius: $circular-radius;
2543
outline: none;
2544
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2545
background-color: $switch-surface;
2546
}
2547
&:hover slider {
2549
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2550
}
2551
&:focus slider {
2553
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2554
}
2555
&:checked slider {
2557
background-color: $primary;
2558
}
2559
&:checked:hover slider {
2561
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2562
}
2563
&:checked:focus slider {
2565
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2566
}
2567
row:selected & {
2569
}
2570
}
2571
/**
2573
* Check and Radio items
2574
*/
2575
// draw regular check and radio items using our PNG assets
2577
// all assets are rendered from assets.svg. never add pngs directly
2578
// selection-mode
2580
.view.content-view.check:not(list),
2581
.content-view:not(list) .tile check {
2582
min-height: 40px;
2583
min-width: 40px;
2584
margin: 0;
2585
padding: 0;
2586
box-shadow: none;
2587
background-color: transparent;
2588
background-image: none;
2589
-gtk-icon-shadow: $icon-shadow-z2;
2590
&:hover,
2592
&:active {
2593
-gtk-icon-shadow: $icon-shadow-z4;
2594
}
2595
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2597
&#{$class} {
2598
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2599
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2601
}
2602
}
2603
}
2604
checkbutton,
2606
radiobutton {
2607
outline: none;
2608
}
2609
checkbutton.text-button,
2611
radiobutton.text-button {
2612
// this is for a nice focus on check and radios text
2613
padding: 2px;
2614
label:not(:only-child) {
2616
margin: 0 4px;
2617
}
2618
}
2619
$check-radio-size: 40px;
2621
check,
2623
radio {
2624
min-height: 24px;
2625
min-width: 24px;
2626
margin: -($check-radio-size - 24px) / 2;
2627
padding: ($check-radio-size - 24px) / 2;
2628
border-radius: $circular-radius;
2629
color: hint($on-surface);
2630
@extend %ripple;
2631
@include ink-color($on-surface);
2632
&:checked,
2634
&:indeterminate {
2635
color: $primary;
2636
@include ink-color($primary);
2637
}
2638
&:disabled {
2640
color: disabled-hint($on-surface);
2641
}
2642
&:only-child {
2644
// margin: -12px;
2645
}
2646
popover modelbutton.flat & {
2648
&,
2649
&:focus,
2650
&:hover,
2651
&:focus:hover,
2652
&:active,
2653
&:disabled {
2654
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2655
box-shadow: none;
2656
background-image: none;
2657
}
2658
&.left:dir(rtl) {
2660
margin-left: -12px;
2661
margin-right: -4px;
2662
}
2663
&.right:dir(ltr) {
2665
margin-left: -4px;
2666
margin-right: -12px;
2667
}
2668
}
2669
menu menuitem & {
2671
transition: none;
2672
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2673
padding: 0;
2674
&:dir(ltr) {
2676
margin-right: 8px;
2677
}
2678
&:dir(rtl) {
2680
margin-left: 8px;
2681
}
2682
&,
2684
&:hover,
2685
&:disabled {
2686
box-shadow: none;
2687
}
2688
}
2689
}
2690
%check,
2692
check {
2693
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2694
&:checked {
2696
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2697
}
2698
&:indeterminate {
2700
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2701
}
2702
}
2703
%radio,
2705
radio {
2706
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2707
&:checked {
2709
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2710
}
2711
&:indeterminate {
2713
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2714
}
2715
border-image-slice: $check-radio-size / 2px;
2717
border-image-width: $check-radio-size / 2;
2718
$radio-indicator-size: 10px / $check-radio-size / 2;
2720
border-image-source:
2722
-gtk-gradient(
2723
radial,
2724
center center, 0,
2725
center center, .001,
2726
to($primary),
2727
to(transparent)
2728
);
2729
&:checked:not(:indeterminate) {
2731
border-image-source:
2732
-gtk-gradient(
2733
radial,
2734
center center, 0,
2735
center center, $radio-indicator-size,
2736
to($primary),
2737
to(transparent)
2738
);
2739
&:disabled {
2741
border-image-source:
2742
-gtk-gradient(
2743
radial,
2744
center center, 0,
2745
center center, $radio-indicator-size,
2746
to(disabled-hint($on-surface)),
2747
to(transparent)
2748
);
2749
}
2750
}
2751
}
2752
%small_check,
2754
menu menuitem check {
2755
min-height: 16px;
2756
min-width: 16px;
2757
border-radius: $corner-radius;
2758
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2759
&:checked {
2761
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2762
}
2763
&:indeterminate {
2765
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2766
}
2767
}
2768
%small_radio,
2770
menu menuitem radio {
2771
min-height: 16px;
2772
min-width: 16px;
2773
border-image: none;
2774
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2775
&:checked {
2777
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2778
}
2779
&:indeterminate {
2781
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2782
}
2783
}
2784
// ANIMATION:
2786
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2787
// the transformation is set on the active state and it get reset on the checked state.
2788
radio:not(:checked):active {
2789
// -gtk-icon-transform: scale(0);
2790
}
2791
// Otherwise, treeview.view styling will be applied...
2793
treeview.view check,
2794
treeview.view radio {
2795
padding: 0;
2796
color: hint($on-surface);
2797
&:checked,
2799
&:indeterminate {
2800
color: $primary;
2801
}
2802
&:disabled {
2804
color: disabled-hint($on-surface);
2805
}
2806
&,
2808
&:hover,
2809
&:selected,
2810
&:selected:hover {
2811
box-shadow: none;
2812
background-color: transparent;
2813
}
2814
}
2815
treeview.view radio:checked {
2817
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2818
border-image: none;
2819
}
2820
/**
2822
* GtkScale
2823
*/
2824
scale {
2826
// sizing
2827
$_marks_length: 8px;
2828
$_marks_distance: 7px;
2829
$trough_size: 2px;
2831
$finetune_trough_size: 4px;
2832
$slider_size: 32px;
2834
$slider_margin: -($slider_size - $trough_size) / 2;
2836
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2837
$color_slider_margin: -($slider_size) * 3 / 4;
2839
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2840
min-height: $trough_size;
2842
min-width: $trough_size;
2843
&.horizontal {
2845
padding: ($medium-size - $trough_size) / 2 12px;
2846
}
2847
&.vertical {
2849
padding: 12px ($medium-size - $trough_size) / 2;
2850
}
2851
// the slider is inside the trough, so to have make it bigger there's a negative margin
2853
slider {
2854
min-height: $slider_size;
2855
min-width: $slider_size;
2856
margin: $slider_margin;
2857
}
2858
// click-and-hold the slider to activate
2860
&.fine-tune {
2861
&.horizontal {
2862
min-height: $finetune_trough_size;
2863
padding-top: ($medium-size - $finetune_trough_size) / 2;
2864
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2865
}
2866
&.vertical {
2868
min-width: $finetune_trough_size;
2869
padding-left: ($medium-size - $finetune_trough_size) / 2;
2870
padding-right: ($medium-size - $finetune_trough_size) / 2;
2871
}
2872
// to make the trough grow in fine-tune mode
2874
slider {
2875
margin: $finetune_slider_margin;
2876
}
2877
}
2878
// the backing bit
2880
trough {
2881
transition: background-color $duration $ease-out;
2882
outline: none;
2883
background-color: stroke($on-surface);
2884
&:disabled {
2886
background-color: disabled-stroke($on-surface);
2887
}
2888
}
2889
// the colored part of the backing bit
2891
highlight {
2892
transition: background-image $duration $ease-out;
2893
background-image: image($primary);
2894
&:disabled {
2896
background-color: $background;
2897
background-image: image(disabled-hint($on-surface));
2898
}
2899
}
2900
// this is another differently styled part of the backing bit, the most relevant use case is for example
2902
// in media player to indicate how much video stream as been cached
2903
fill {
2904
transition: background-color $duration $ease-out;
2905
background-color: stroke($on-surface);
2906
&:disabled {
2908
background-color: transparent;
2909
}
2910
}
2911
slider {
2913
transition: background-color $duration $ease-out,
2914
background-size $ripple-fade-out-duration $ease-out,
2915
background-image $ripple-fade-out-opacity-duration $ease-out;
2916
background-repeat: no-repeat;
2917
background-position: center;
2918
background-size: auto, 1000% 1000%;
2919
border-radius: 50%;
2920
color: $primary;
2921
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2923
&#{$class} {
2924
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2925
background-image:
2927
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2928
radial-gradient(circle, transparent 10%, transparent 0%);
2929
}
2930
}
2931
&:hover {
2933
background-color: overlay("hover", $primary);
2934
}
2935
&:focus {
2937
background-color: overlay("focus", $primary);
2938
}
2939
&:active {
2941
$_url: 'assets/scale-slider#{$asset-suffix}';
2942
transition: background-color $duration $ease-out,
2944
background-size 0ms,
2945
background-image 0ms;
2946
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2947
background-image:
2948
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2949
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2950
background-size: auto, 0% 0%;
2951
}
2952
}
2953
marks,
2955
value {
2956
color: hint($on-surface);
2957
}
2958
indicator {
2960
background-color: stroke($on-surface);
2961
color: transparent;
2962
}
2963
//marks margins
2965
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2966
(horizontal, bottom, bottom, top),
2967
(vertical, top, left, right),
2968
(vertical, bottom, right, left) {
2969
&.#{$scale_orient} marks {
2970
&.#{$marks_class} {
2971
margin-#{$marks_margin}: $_marks_distance;
2972
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2973
}
2974
}
2975
&.#{$scale_orient}.fine-tune marks {
2977
&.#{$marks_class} {
2978
margin-#{$marks_margin}: $_marks_distance - 1px;
2979
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2980
}
2981
}
2982
}
2983
&.horizontal {
2985
indicator {
2986
min-height: $_marks_length;
2987
min-width: 1px;
2988
}
2989
}
2990
&.vertical {
2992
indicator {
2993
min-height: 1px;
2994
min-width: $_marks_length;
2995
}
2996
}
2997
// *WARNING* scale with marks madness following
2999
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3001
@each $marks_class, $marks_infix in (
3002
".marks-before:not(.marks-after)": "-marks-before",
3003
".marks-after:not(.marks-before)": "-marks-after"
3004
) {
3005
&#{$dir_class}#{$marks_class} {
3006
slider {
3007
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3008
&#{$state_class} {
3009
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3010
background-image:
3012
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3013
radial-gradient(circle, transparent 10%, transparent 0%);
3014
}
3015
}
3016
&:active {
3018
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3019
background-image:
3021
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3022
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3023
}
3024
}
3025
}
3026
}
3027
}
3028
&.color {
3030
min-height: 0;
3031
min-width: 0;
3032
&.horizontal {
3034
padding: 0 0 12px 0;
3035
slider {
3037
&:dir(ltr), &:dir(rtl) { // specificity bump
3038
margin-bottom: $color_slider_margin;
3039
margin-top: $color_marks_slider_margin;
3040
}
3041
}
3042
}
3043
&.vertical {
3045
&:dir(ltr) {
3046
padding: 0 0 0 12px;
3047
slider {
3049
margin-left: $color_slider_margin;
3050
margin-right: $color_marks_slider_margin;
3051
}
3052
}
3053
&:dir(rtl) {
3055
padding: 0 12px 0 0;
3056
slider {
3058
margin-right: $color_slider_margin;
3059
margin-left: $color_marks_slider_margin;
3060
}
3061
}
3062
}
3063
}
3064
}
3065
/**
3067
* Progress bars
3068
*/
3069
progressbar {
3071
// sizing
3072
&.horizontal {
3073
trough,
3074
progress {
3075
min-height: $bar-size;
3076
}
3077
}
3078
&.vertical {
3080
trough,
3081
progress {
3082
min-width: $bar-size;
3083
}
3084
}
3085
// FIXME: insensitive state missing and some other state should be set probably
3087
color: hint($on-surface);
3088
font-size: smaller;
3089
trough {
3091
background-color: disabled-stroke($on-surface);
3092
}
3093
progress {
3095
background-color: $primary;
3096
}
3097
&.osd { // progressbar.osd used for epiphany page loading progress
3099
// min-width: $bar-size;
3100
// min-height: $bar-size;
3101
// background-color: transparent;
3102
trough {
3104
// background-color: transparent;
3105
}
3106
progress {
3108
// background-color: $primary;
3109
}
3110
}
3111
// makes the progress indicator disappear, when the fraction is 0
3113
trough.empty progress {
3114
all: unset;
3115
}
3116
}
3117
/**
3119
* Level Bar
3120
*/
3121
levelbar {
3123
&.horizontal {
3124
block {
3125
min-height: $bar-size;
3126
}
3127
&.discrete block {
3129
min-width: $medium-size;
3130
&:not(:last-child) {
3132
margin-right: 2px;
3133
}
3134
}
3135
}
3136
&.vertical {
3138
block {
3139
min-width: $bar-size;
3140
}
3141
&.discrete block {
3143
min-height: $medium-size;
3144
&:not(:last-child) {
3146
margin-bottom: 2px;
3147
}
3148
}
3149
}
3150
// imitate the entry style
3152
trough {
3153
// padding: 2px;
3154
// border-radius: $corner-radius;
3155
// box-shadow: $shadow-z1;
3156
// background-color: $base;
3157
&:disabled {
3159
// background-color: $base-alt;
3160
}
3161
}
3162
block {
3164
&.low {
3165
background-color: $warning;
3166
}
3167
&.high,
3169
&:not(.empty) {
3170
background-color: $primary;
3171
}
3172
&.full {
3174
background-color: $success;
3175
}
3176
&.empty {
3178
background-color: disabled-stroke($on-surface);
3179
}
3180
}
3181
}
3182
/**
3184
* Print dialog
3185
*/
3186
printdialog {
3188
paper {
3189
padding: 0;
3190
border: 1px solid divider($on-surface);
3191
background-color: $base;
3192
color: $on-surface;
3193
}
3194
.dialog-action-box {
3196
margin: 12px;
3197
}
3198
}
3199
/**
3201
* Frames
3202
*/
3203
frame > border,
3205
.frame {
3206
margin: 0;
3207
padding: 0;
3208
border: 1px solid divider($on-surface);
3209
border-radius: 0;
3210
box-shadow: none;
3211
&.flat {
3213
border-style: none;
3214
}
3215
}
3216
// for backward compatibility
3218
frame.flat > border {
3219
border-style: none;
3220
}
3221
actionbar > revealer > box {
3223
padding: $container-padding;
3224
border-top: 1px solid divider($on-surface);
3225
background-color: $base;
3226
background-clip: border-box;
3227
button:not(.suggested-action):not(.destructive-action) {
3229
@extend %button-flat;
3230
}
3231
.linked:not(.vertical) > entry:not(:only-child) {
3233
border-radius: $corner-radius $corner-radius 0 0;
3234
}
3235
}
3236
scrolledwindow {
3238
viewport.frame { // avoid double borders when viewport inside scrolled window
3239
border-style: none;
3240
}
3241
// This is used when content is touch-dragged past boundaries.
3243
// draws a box on top of the content, the size changes programmatically.
3244
@at-root overshoot {
3245
&.top { @include overshoot(top); }
3246
&.bottom { @include overshoot(bottom); }
3248
&.left { @include overshoot(left); }
3250
&.right { @include overshoot(right); }
3252
}
3253
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3255
@at-root undershoot {
3256
&.top { @include undershoot(top); }
3257
&.bottom { @include undershoot(bottom); }
3259
&.left { @include undershoot(left); }
3261
&.right { @include undershoot(right); }
3263
}
3264
@at-root junction { // the small square between two scrollbars
3266
border-style: solid none none solid;
3267
border-width: 1px;
3268
border-color: divider($on-surface);
3269
background-color: $base;
3270
&:dir(rtl) {
3272
border-style: solid solid none none;
3273
}
3274
}
3275
}
3276
// vbox and hbox separators
3278
separator {
3279
min-width: 1px;
3280
min-height: 1px;
3281
background-color: divider($on-surface);
3282
}
3283
%hide_separators {
3285
min-width: 0;
3286
min-height: 0;
3287
background-color: transparent;
3288
}
3289
/**
3291
* Lists
3292
*/
3293
list {
3295
border-color: divider($on-surface);
3296
background-color: $base;
3297
row {
3299
padding: 2px;
3300
}
3301
}
3302
row {
3304
&.activatable {
3305
@extend %ripple;
3306
@include ink-color($on-surface);
3307
@include list-item;
3308
// this is for indicathing which row generated a popover
3310
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3311
&.has-open-popup {
3312
background-color: overlay("activated", $on-surface);
3313
}
3314
}
3315
&:selected {
3317
background-color: $overlay-selected;
3318
@include ink-color($primary);
3320
&.has-open-popup {
3322
background-color: overlay("activated", $primary, $background: $overlay-selected);
3323
}
3324
}
3325
}
3326
/**
3328
* App Notifications
3329
*/
3330
.app-notification {
3332
// @extend %osd;
3333
@extend %toolbar-osd;
3335
margin: 8px;
3337
button {
3339
@extend %button-flat;
3340
&.text-button:not(:disabled) {
3342
color: $primary;
3343
@include ink-color($primary);
3344
}
3345
}
3346
&.frame,
3348
border {
3349
border-style: none;
3350
}
3351
}
3352
/**
3354
* Expanders
3355
*/
3356
expander {
3358
title > arrow {
3359
transition: all $duration $ease-out;
3360
min-width: 16px;
3361
min-height: 16px;
3362
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3363
-gtk-icon-transform: rotate(-90deg);
3364
&:dir(rtl) {
3366
-gtk-icon-transform: rotate(90deg);
3367
}
3368
&:checked {
3370
-gtk-icon-transform: unset;
3371
}
3372
color: hint($on-surface);
3374
&:hover,
3376
&:active {
3377
color: $on-surface;
3378
}
3379
&:disabled {
3381
color: disabled-hint($on-surface);
3382
}
3383
}
3384
}
3385
/**
3387
* Calendar
3388
*/
3389
calendar {
3391
padding: 1px;
3392
border: 1px solid divider($on-surface);
3393
color: $on-surface;
3394
&:disabled {
3396
color: disabled($on-surface);
3397
}
3398
&:selected {
3400
border-radius: $corner-radius + 1px;
3401
background-color: $overlay-selected;
3402
}
3403
&.header {
3405
border-style: none none solid;
3406
border-color: divider($on-surface);
3407
border-radius: 0;
3408
}
3409
&.button {
3411
border-radius: $corner-radius + 1px;
3412
color: hint($on-surface);
3413
&:hover {
3415
background-image: image(overlay("hover", $on-surface));
3416
}
3417
&:disabled {
3419
color: disabled-hint($on-surface);
3420
}
3421
}
3422
&.highlight {
3424
color: hint($on-surface);
3425
font-weight: 500;
3426
}
3427
&:indeterminate {
3429
color: disabled-hint($on-surface);
3430
}
3431
}
3432
/**
3434
* Dialogs
3435
*/
3436
// Message Dialog styling
3438
messagedialog {
3439
&.background {
3440
background-color: $surface;
3441
}
3442
.titlebar {
3444
min-height: $small-size;
3445
border-style: none;
3446
box-shadow: inset 0 1px highlight($surface);
3447
background-color: $surface;
3448
color: $on-surface;
3449
&:backdrop {
3451
background-color: $surface;
3452
color: hint($on-surface);
3453
}
3454
}
3455
&.csd { // rounded bottom border styling for csd version
3457
&.background {
3458
// bigger radius for better antialiasing
3459
border-bottom-left-radius: $corner-radius;
3460
border-bottom-right-radius: $corner-radius;
3461
}
3462
}
3463
// Hint text
3465
box.vertical > label + label {
3466
color: hint($on-surface);
3467
}
3468
.dialog-action-box {
3470
margin-top: -$container-padding;
3471
// padding: $container-padding;
3472
button {
3474
@extend %button-flat;
3475
&:not(:last-child) {
3477
margin-right: $container-padding;
3478
}
3479
&:not(:disabled) {
3481
color: $primary;
3482
@include ink-color($primary);
3483
}
3484
&.suggested-action:not(:disabled) {
3486
background-color: transparent;
3487
// color: $primary;
3488
// @include ink-color($primary);
3489
}
3490
&.destructive-action:not(:disabled) {
3492
background-color: transparent;
3493
color: $error;
3494
@include ink-color($error);
3495
}
3496
}
3497
}
3498
}
3499
filechooser {
3501
.dialog-action-box {
3502
border-top: 1px solid divider($on-surface);
3503
}
3504
#pathbarbox {
3506
border-bottom: 1px solid divider($on-surface);
3507
background-color: $background;
3508
> stack > box > button { // The new folder button
3510
@extend %button-flat;
3511
border-radius: $circular-radius;
3513
}
3514
}
3515
}
3516
filechooserbutton:drop(active) {
3518
// box-shadow: none;
3519
}
3520
/**
3522
* Sidebar
3523
*/
3524
.sidebar {
3526
border-style: none;
3527
background-color: $base-alt;
3528
&:not(separator) {
3530
@at-root %sidebar_left,
3531
&:dir(ltr),
3532
&.left,
3533
&.left:dir(rtl) {
3534
border-right: 1px solid divider($on-surface);
3535
border-left-style: none;
3536
}
3537
@at-root %sidebar_right,
3539
&:dir(rtl),
3540
&.right {
3541
border-left: 1px solid divider($on-surface);
3542
border-right-style: none;
3543
}
3544
}
3545
list {
3547
background-color: transparent;
3548
}
3549
paned & {
3551
&,
3552
&.left,
3553
&.right,
3554
&.left:dir(rtl),
3555
&:dir(rtl),
3556
&:dir(ltr) {
3557
border-style: none;
3558
}
3559
}
3560
}
3561
stacksidebar.sidebar {
3563
& {
3564
&:dir(ltr),
3565
&.left,
3566
&.left:dir(rtl) {
3567
list {
3568
@extend %sidebar_left;
3569
}
3570
}
3571
&:dir(rtl),
3573
&.right {
3574
list {
3575
@extend %sidebar_right;
3576
}
3577
}
3578
}
3579
+ separator.vertical,
3581
separator.horizontal {
3582
@extend %hide_separators;
3583
}
3584
list {
3586
padding: 4px;
3587
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3588
}
3589
row {
3591
min-height: 32px;
3592
padding: 0 8px - 6px;
3593
border-radius: $corner-radius;
3594
&:selected {
3596
background-color: overlay("activated", $primary);
3597
color: $primary;
3598
font-weight: 500;
3599
@include ink-color($primary);
3600
}
3601
+ row {
3603
margin-top: 4px;
3604
}
3605
> label {
3607
padding-left: 6px;
3608
padding-right: 6px;
3609
}
3610
&.needs-attention > label {
3612
@extend %needs-attention;
3613
}
3614
}
3615
}
3616
separator.sidebar {
3618
background-color: divider($on-surface);
3619
&.selection-mode,
3621
.selection-mode & {
3622
// background-color: divider($on-primary);
3623
}
3624
}
3625
/**
3627
* File chooser
3628
*/
3629
// dim the sidebar icons, see bug #786613 for details on this oddity
3631
row image.sidebar-icon {
3632
transition: color $duration $ease-out;
3633
color: hint($on-surface);
3634
&:disabled {
3636
color: disabled-hint($on-surface);
3637
}
3638
}
3639
placessidebar.sidebar {
3641
> viewport.frame {
3642
border-style: none;
3643
}
3644
list {
3646
padding: (4px - 3px) 0 4px;
3647
}
3648
row {
3650
// Needs overriding of the GtkListBoxRow padding
3651
min-height: 32px;
3652
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3653
padding: 0;
3654
border-radius: $corner-radius;
3655
// Using margins/padding directly in the SidebarRow
3657
// will make the animation of the new bookmark row jump
3658
> revealer {
3659
padding: 0 8px;
3660
}
3661
&:selected {
3663
background-color: overlay("activated", $primary);
3664
color: $primary;
3665
font-weight: 500;
3666
@include ink-color($primary);
3667
image.sidebar-icon {
3669
color: $primary;
3670
}
3671
}
3672
&:disabled {
3674
color: disabled($on-surface);
3675
}
3676
image.sidebar-icon {
3678
&:dir(ltr) {
3679
padding-right: 8px;
3680
}
3681
&:dir(rtl) {
3683
padding-left: 8px;
3684
}
3685
}
3686
label.sidebar-label {
3688
&:dir(ltr) {
3689
padding-right: 2px;
3690
}
3691
&:dir(rtl) {
3693
padding-left: 2px;
3694
}
3695
}
3696
@at-root button.sidebar-button {
3698
@extend %button-flat-basic;
3699
@extend %button-small;
3700
}
3701
&.sidebar-placeholder-row {
3703
background-color: overlay("hover", $on-surface);
3704
}
3705
&.sidebar-new-bookmark-row {
3707
color: $primary;
3708
image.sidebar-icon {
3710
color: $primary;
3711
}
3712
}
3713
}
3714
}
3715
placesview {
3717
.server-list-button {
3718
> image {
3719
-gtk-icon-transform: rotate(0turn);
3720
}
3721
&:checked > image {
3723
-gtk-icon-transform: rotate(-.5turn);
3724
}
3725
}
3726
// this selects the "connect to server" label
3728
> actionbar > revealer > box > label {
3729
padding-left: 8px;
3730
padding-right: 8px;
3731
}
3732
}
3733
/**
3735
* Paned
3736
*/
3737
paned {
3739
> separator {
3740
min-width: 1px;
3741
min-height: 1px;
3742
-gtk-icon-source: none; // defeats the ugly default handle decoration
3743
border-style: none; // just to be sure
3744
background-color: transparent;
3745
// workaround, using background istead of a border since the border will get rendered twice (?)
3746
background-image: image(divider($on-surface));
3747
background-size: 1px 1px;
3748
background-clip: content-box; // avoids borders image being rendered twice (?)
3749
&.wide {
3751
min-width: 6px;
3752
min-height: 6px;
3753
background-color: $background;
3754
background-image: image(divider($on-surface)), image(divider($on-surface));
3755
background-size: 1px 1px, 1px 1px;
3756
}
3757
}
3758
&.horizontal > separator {
3760
background-repeat: repeat-y;
3761
&:dir(ltr) {
3763
margin: 0 -8px 0 0;
3764
padding: 0 8px 0 0;
3765
background-position: left;
3766
}
3767
&:dir(rtl) {
3769
margin: 0 0 0 -8px;
3770
padding: 0 0 0 8px;
3771
background-position: right;
3772
}
3773
&.wide {
3775
margin: 0;
3776
padding: 0;
3777
background-repeat: repeat-y, repeat-y;
3778
background-position: left, right;
3779
}
3780
}
3781
&.vertical > separator {
3783
margin: 0 0 -8px 0;
3784
padding: 0 0 8px 0;
3785
background-repeat: repeat-x;
3786
background-position: top;
3787
&.wide {
3789
margin: 0;
3790
padding: 0;
3791
background-repeat: repeat-x, repeat-x;
3792
background-position: bottom, top;
3793
}
3794
}
3795
}
3796
/**
3798
* GtkInfoBar
3799
*/
3800
infobar {
3802
border-style: none;
3803
&.info,
3805
&.question {
3806
border-bottom: 1px solid divider($on-surface);
3807
background-color: $base;
3808
button {
3810
@extend %button-flat;
3811
&.text-button:not(:disabled) {
3813
color: $primary;
3814
@include ink-color($primary);
3815
}
3816
}
3817
}
3818
&.warning {
3820
background-color: $warning;
3821
color: $on-warning;
3822
button.flat {
3824
color: $on-warning;
3825
@include ink-color($on-warning);
3826
}
3827
selection {
3829
}
3830
*:link {
3832
color: $on-warning;
3833
}
3834
}
3835
&.error {
3837
background-color: $error;
3838
color: $on-error;
3839
button.flat {
3841
color: $on-error;
3842
@include ink-color($on-error);
3843
}
3844
selection {
3846
}
3847
*:link {
3849
color: $on-error;
3850
}
3851
}
3852
// Remove ugly hard-coded padding
3854
button label {
3855
margin: 0 -4px;
3856
}
3857
}
3858
/**
3860
* Tooltips
3861
*/
3862
tooltip {
3864
&.background {
3865
// background-color needs to be set this way otherwise it gets drawn twice
3866
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3867
background-color: $tooltip;
3868
color: $on-tooltip;
3869
}
3870
// padding: 4px; /* not working */
3872
border-radius: $corner-radius;
3873
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3874
&:not(.csd):not(.unity-csd) {
3876
// border: 1px solid divider($on-surface);
3877
// border-radius: $corner-radius + 1px;
3878
// background-clip: $background-clip-extra;
3879
}
3880
// FIXME: we need a border or tooltips vanish on black background.
3882
decoration {
3883
background-color: transparent;
3884
}
3885
> box {
3887
margin: -6px; // Remove hard-coded 6px margin
3888
min-height: 32px - 4px * 2;
3889
padding: 4px 8px;
3890
}
3891
.dim-label {
3893
color: hint($on-tooltip);
3894
}
3895
* {
3897
// workaround for Eclipse.
3898
// do not include any declaration here.
3899
}
3900
}
3901
/**
3903
* Color Chooser
3904
*/
3905
colorswatch {
3907
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3908
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3909
// applied to the overlay box.
3910
// base color corners rounding
3912
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3913
// sports a bigger radius.
3914
// nth-child is needed by the custom color strip.
3915
&.top {
3917
border-top-left-radius: $corner-radius + .5px;
3918
border-top-right-radius: $corner-radius + .5px;
3919
overlay {
3921
border-top-left-radius: $corner-radius;
3922
border-top-right-radius: $corner-radius;
3923
}
3924
}
3925
&.bottom {
3927
border-bottom-left-radius: $corner-radius + .5px;
3928
border-bottom-right-radius: $corner-radius + .5px;
3929
overlay {
3931
border-bottom-left-radius: $corner-radius;
3932
border-bottom-right-radius: $corner-radius;
3933
}
3934
}
3935
&.left,
3937
&:first-child:not(.top) {
3938
border-top-left-radius: $corner-radius + .5px;
3939
border-bottom-left-radius: $corner-radius + .5px;
3940
overlay {
3942
border-top-left-radius: $corner-radius;
3943
border-bottom-left-radius: $corner-radius;
3944
}
3945
}
3946
&.right,
3948
&:last-child:not(.bottom) {
3949
border-top-right-radius: $corner-radius + .5px;
3950
border-bottom-right-radius: $corner-radius + .5px;
3951
overlay {
3953
border-top-right-radius: $corner-radius;
3954
border-bottom-right-radius: $corner-radius;
3955
}
3956
}
3957
&.dark {
3959
color: $on-dark;
3960
}
3961
&.light {
3963
color: $on-light;
3964
}
3965
overlay {
3967
transition: $transition-shadow;
3968
box-shadow: $shadow-z1;
3969
&:drop(active),
3971
&:hover {
3972
box-shadow: $shadow-z3;
3973
}
3974
}
3975
&#add-color-button {
3977
border-radius: $corner-radius $corner-radius 0 0;
3978
color: $on-surface;
3979
&:only-child {
3981
border-radius: $corner-radius;
3982
}
3983
overlay {
3985
background-color: $surface;
3986
}
3987
}
3988
&:disabled {
3990
opacity: .5;
3991
overlay {
3993
box-shadow: none;
3994
}
3995
}
3996
row:selected & {
3998
}
3999
&#editor-color-sample {
4001
border-radius: $corner-radius + .5px;
4002
overlay {
4004
border-radius: $corner-radius;
4005
&:hover {
4007
// box-shadow: $shadow-z1;
4008
}
4009
}
4010
}
4011
}
4012
// colorscale popup
4014
colorchooser .popover.osd {
4015
transition: $transition-shadow;
4016
border-radius: $corner-radius;
4017
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4018
background-color: $surface;
4019
&:backdrop {
4021
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4022
}
4023
}
4024
/**
4026
* Misc
4027
*/
4028
// content view (grid/list)
4030
.content-view {
4031
background-color: $background;
4032
&:hover {
4034
// -gtk-icon-effect: highlight;
4035
}
4036
rubberband,
4038
.rubberband {
4039
@extend rubberband;
4040
}
4041
}
4042
.scale-popup {
4044
.osd & {
4045
// @extend %osd;
4046
button.flat { // FIXME: quick hack, redo properly
4048
}
4049
}
4050
button { // +/- buttons on GtkVolumeButton popup
4052
}
4053
}
4054
/**
4056
* Window Decorations
4057
*/
4058
decoration {
4060
transition: $transition-shadow;
4061
border-radius: $corner-radius $corner-radius 0 0;
4062
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4063
// FIXME rationalize shadows
4065
// this is used for the resize cursor area
4067
margin: 8px;
4068
&:backdrop {
4070
// the transparent shadow here is to enforce that the shadow extents don't
4071
// change when we go to backdrop, to prevent jumping windows.
4072
// The biggest shadow should be in the same order then in the active state
4073
// or the jumping will happen during the transition.
4074
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4075
}
4076
.maximized &,
4078
.fullscreen &,
4079
.tiled &,
4080
.tiled-top &,
4081
.tiled-right &,
4082
.tiled-bottom &,
4083
.tiled-left & {
4084
border-radius: 0;
4085
}
4086
.popup & {
4088
box-shadow: none;
4089
}
4090
// server-side decorations as used by mutter
4092
.ssd & {
4093
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4094
}
4095
.csd.popup & {
4097
border-radius: $corner-radius;
4098
box-shadow: $shadow-z4;
4099
}
4100
tooltip.csd & {
4102
border-radius: $corner-radius;
4103
box-shadow: none;
4104
}
4105
messagedialog.csd & {
4107
border-radius: $corner-radius;
4108
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4109
&:backdrop {
4111
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4112
}
4113
}
4114
.solid-csd & {
4116
margin: 0;
4117
padding: 2px;
4118
border-radius: 0;
4119
box-shadow: none;
4120
box-shadow: inset 0 1px highlight($titlebar);
4121
background-color: $titlebar;
4122
&:backdrop {
4124
background-color: $titlebar-backdrop;
4125
}
4126
}
4127
}
4128
// Window Close button
4130
button.titlebutton {
4131
border-radius: $circular-radius;
4132
.selection-mode & {
4134
}
4135
}
4136
// catch all extend :)
4139
.monospace {
4141
font-family: monospace;
4142
}
4143
/**
4145
* Touch Copy & Paste
4146
*/
4147
// touch selection handlebars for the Popover.osd above
4149
cursor-handle {
4150
color: $primary;
4151
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4152
&.top:dir(ltr),
4154
&.bottom:dir(rtl) {
4155
-gtk-icon-transform: rotate(90deg);
4156
}
4157
&.bottom:dir(ltr),
4159
&.top:dir(rtl) {
4160
-gtk-icon-transform: unset;
4161
}
4162
&.insertion-cursor:dir(ltr),
4164
&.insertion-cursor:dir(rtl) {
4165
padding-top: 6px;
4166
-gtk-icon-transform: rotate(45deg);
4167
}
4168
}
4169
// Decouple the font of context menus from their entry/textview
4171
.context-menu {
4172
font: initial;
4173
}
4174
// shortcut window keys
4176
.keycap {
4177
min-width: 28px - 8px * 2;
4178
min-height: 28px - 2px;
4179
margin-top: 2px;
4180
padding-bottom: 2px;
4181
padding-left: 8px;
4182
padding-right: 8px;
4183
border: solid 1px divider($on-surface);
4185
border-radius: $corner-radius + 1px;
4186
box-shadow: inset 0 -2px divider($on-surface);
4187
background-color: $surface;
4188
color: $on-surface;
4189
font-size: smaller;
4190
}
4191
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4193
// caret-color: $primary;
4194
}
4195
stackswitcher button.text-button { // FIXME aggregate with buttons
4197
min-width: 100px;
4198
}
4199
stackswitcher button.circular,
4201
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4202
min-width: $medium-size;
4203
min-height: $medium-size;
4204
padding: 0;
4205
}
4206
/**
4208
* App Icons
4209
*/
4210
// Outline for low res icons
4212
.lowres-icon {
4213
// -gtk-icon-shadow: none;
4214
}
4215
// Drapshadow for large icons
4217
.icon-dropshadow {
4218
// -gtk-icon-shadow: none;
4219
}
4220
/**
4222
* Emoji
4223
*/
4224
popover.emoji-picker {
4226
padding: 0;
4227
entry {
4229
border-bottom: 1px solid divider($on-surface);
4230
border-image: none;
4231
border-radius: 0;
4232
box-shadow: none;
4233
background-color: transparent;
4234
}
4235
scrolledwindow {
4237
border-bottom: 1px solid divider($on-surface);
4238
}
4239
}
4240
button.emoji-section {
4242
margin: 4px;
4243
&:checked {
4245
background-color: overlay("activated", $primary);
4246
color: $primary;
4247
@include ink-color($primary);
4248
}
4249
&:not(:last-child) {
4251
margin-right: 0;
4252
}
4253
}
4254
popover.emoji-picker .emoji {
4256
min-width: 3em;
4257
min-height: 3em;
4258
padding: 0 8px;
4259
// font-size: larger;
4260
widget {
4262
transition: $transition;
4263
border-radius: $corner-radius;
4264
&:hover {
4266
background-color: overlay("hover", $on-surface);
4267
}
4268
}
4269
}
4270
popover.emoji-completion {
4272
padding: 8px 0;
4273
arrow {
4275
border: none;
4276
background: none;
4277
}
4278
.emoji-completion-row {
4280
min-height: $menuitem-size;
4281
padding: 0 12px;
4282
}
4283
.emoji:hover {
4285
background-color: overlay("hover", $on-surface);
4286
}
4287
}
4288