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
arrow {
1171
transition: color $duration $ease-out;
1172
color: hint($on-surface);
1173
&:disabled {
1175
color: disabled-hint($on-surface);
1176
}
1177
}
1178
}
1179
/**
1181
* Toolbars
1182
*/
1183
toolbar {
1185
-GtkWidget-window-dragging: true;
1186
padding: 2px;
1187
background-color: $background;
1188
button {
1190
@extend %button-flat;
1191
}
1192
// on OSD
1194
.osd & {
1195
background-color: transparent;
1196
}
1197
// stand-alone OSD toolbars
1199
&.osd {
1200
@extend %toolbar-osd;
1201
// positional classes for `attached` osd toolbars
1203
&.left,
1204
&.right,
1205
&.top,
1206
&.bottom {
1207
border-radius: 0;
1208
}
1209
&.bottom {
1211
box-shadow: none;
1212
background-color: transparent;
1213
background-image:
1214
linear-gradient(
1215
to bottom,
1216
transparent,
1217
rgba(black, .1) 30%,
1218
rgba(black, .2) 50%,
1219
rgba(black, .4)
1220
);
1221
}
1222
}
1223
// toolbar separators
1225
&.horizontal > separator {
1226
margin: 2px;
1227
}
1228
&.vertical > separator {
1230
margin: 2px;
1231
}
1232
&:not(.inline-toolbar):not(.osd) {
1234
scale,
1235
entry,
1236
spinbutton,
1237
button {
1238
margin: 2px;
1239
}
1240
.linked entry,
1242
.linked spinbutton,
1243
.linked button {
1244
&:not(:first-child) {
1245
margin-left: 0;
1246
}
1247
&:not(:last-child) {
1249
margin-right: 0;
1250
}
1251
}
1252
spinbutton {
1254
entry,
1255
button {
1256
margin: 0;
1257
}
1258
}
1259
switch {
1261
margin: 2px + $container-padding 2px;
1262
}
1263
}
1264
}
1265
%toolbar-osd {
1267
transition: $transition-shadow;
1268
padding: $container-padding;
1269
border-radius: $corner-radius;
1270
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1271
background-color: $surface;
1272
&:backdrop {
1274
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1275
}
1276
}
1277
// searchbar, location-bar & inline-toolbar
1279
.inline-toolbar {
1280
padding: $container-padding;
1281
border-style: solid;
1282
border-width: 0 1px 1px;
1283
border-color: divider($on-surface);
1284
background-color: $base-alt;
1285
}
1286
searchbar > revealer > box,
1288
.location-bar {
1289
padding: $container-padding;
1290
border-style: solid;
1291
border-width: 0 0 1px;
1292
border-color: divider($on-surface);
1293
background-color: $background;
1294
background-clip: border-box;
1295
}
1296
searchbar > revealer > box {
1298
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1299
margin: -6px;
1300
padding: $container-padding;
1301
}
1302
/**
1304
* Header bars
1305
*/
1306
.titlebar {
1308
transition: background-color $duration $ease-out, color $duration $ease-out;
1309
border-radius: $corner-radius $corner-radius 0 0;
1310
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1311
background-color: $titlebar;
1312
color: $on-titlebar;
1313
&:disabled {
1315
color: disabled($on-titlebar);
1316
}
1317
&:backdrop {
1319
background-color: $titlebar-backdrop;
1320
color: hint($on-titlebar);
1321
&:disabled {
1323
color: disabled-hint($on-titlebar);
1324
}
1325
}
1326
.title {
1328
padding-left: 12px;
1329
padding-right: 12px;
1330
font-weight: bold;
1331
}
1332
.subtitle {
1334
padding-left: 12px;
1335
padding-right: 12px;
1336
font-size: smaller;
1337
}
1338
.subtitle,
1340
.dim-label {
1341
transition: color $duration $ease-out;
1342
color: hint($on-titlebar);
1343
&:backdrop {
1345
color: disabled($on-titlebar);
1346
}
1347
}
1348
// Don't draw titlebar above titlebar
1350
.titlebar {
1351
background-color: transparent;
1352
box-shadow: none;
1353
}
1354
// The separator for split headerbars
1356
headerbar + separator {
1357
background-color: divider($on-titlebar);
1358
}
1359
entry {
1361
box-shadow: inset 0 -1px stroke($on-titlebar);
1362
background-color: entry-fill($on-titlebar);
1363
color: $on-titlebar;
1364
&:disabled {
1366
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1367
background-color: entry-fill($on-titlebar);
1368
color: disabled($on-titlebar);
1369
}
1370
image {
1372
color: hint($on-titlebar);
1373
&:hover,
1375
&:active {
1376
color: $on-titlebar;
1377
}
1378
&:disabled {
1380
color: disabled($on-titlebar);
1381
}
1382
}
1383
}
1384
.linked:not(.vertical) > entry:not(:only-child) {
1386
border-radius: $corner-radius $corner-radius 0 0;
1387
}
1388
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1390
@extend %button-flat;
1391
border-image:
1393
radial-gradient(
1394
circle closest-corner at center calc(100% - 1px),
1395
$titlebar-indicator 0%,
1396
transparent 0%
1397
) 0 0 0 / 0 0 0;
1398
background-color: transparent;
1399
color: hint($on-titlebar);
1400
@include ink-color($on-titlebar);
1401
&:disabled {
1403
color: disabled-hint($on-titlebar);
1404
}
1405
@at-root %titlebar-button-checked,
1407
&:checked {
1408
border-image:
1409
radial-gradient(
1410
circle closest-corner at center calc(100% - 1px),
1411
$titlebar-indicator 100%,
1412
transparent 0%
1413
) 0 0 2 / 0 0 2px;
1414
background-color: transparent;
1415
color: $on-titlebar;
1416
@include ink-color($on-titlebar);
1417
&:disabled {
1419
background-color: transparent;
1420
color: disabled($on-titlebar);
1421
}
1422
}
1423
&:backdrop {
1425
color: disabled($on-titlebar);
1426
&:disabled {
1428
color: disabled-hint($on-titlebar);
1429
}
1430
&:checked {
1432
color: hint($on-titlebar);
1433
&:disabled {
1435
color: disabled-hint($on-titlebar);
1436
}
1437
}
1438
}
1439
}
1440
button.suggested-action, button.destructive-action {
1442
&:disabled {
1443
background-color: fill($on-titlebar);
1444
color: disabled($on-titlebar);
1445
}
1446
}
1447
// FIXME: Ugly overriding
1449
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1450
min-width: 120px - 8px * 2;
1451
}
1452
// FIXME: Ugly overriding
1454
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1455
min-width: 0;
1456
padding-left: ($medium-size - 24px) / 2;
1457
padding-right: ($medium-size - 24px) / 2;
1458
}
1459
&.selection-mode {
1461
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1462
// but let's keep it for backwards compatibility.
1463
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1464
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1465
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1466
background-color: $primary;
1467
color: $on-primary;
1468
&:backdrop {
1470
color: hint($on-primary);
1471
}
1472
.subtitle:link {
1474
color: $on-primary;
1475
}
1476
button:not(.suggested-action):not(.destructive-action) {
1478
border-image:
1479
radial-gradient(
1480
circle closest-corner at center calc(100% - 1px),
1481
currentcolor 0%,
1482
transparent 0%
1483
) 0 0 0 / 0 0 0;
1484
color: $on-primary;
1485
&:disabled {
1487
color: disabled($on-primary);
1488
}
1489
&:checked {
1491
border-image:
1492
radial-gradient(
1493
circle closest-corner at center calc(100% - 1px),
1494
currentcolor 100%,
1495
transparent 0%
1496
) 0 0 2 / 0 0 2px;
1497
color: $on-primary;
1498
&:disabled {
1500
color: disabled($on-primary);
1501
}
1502
}
1503
&:backdrop {
1505
color: hint($on-primary);
1506
&:disabled {
1508
color: disabled-hint($on-primary);
1509
}
1510
&:checked {
1512
color: hint($on-primary);
1513
&:disabled {
1515
color: disabled-hint($on-primary);
1516
}
1517
}
1518
}
1519
}
1520
.selection-menu {
1522
padding-left: 16px;
1523
padding-right: 16px;
1524
arrow {
1526
-GtkArrow-arrow-scaling: 1;
1527
}
1528
.arrow {
1530
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1531
}
1532
}
1533
}
1534
.selection-mode {
1536
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1537
background-color: $primary;
1538
}
1539
// squared corners when the window is maximized, tiled, or fullscreen
1541
.tiled &,
1542
.tiled-top &,
1543
.tiled-right &,
1544
.tiled-bottom &,
1545
.tiled-left &,
1546
.maximized &,
1547
.fullscreen & {
1548
border-radius: 0;
1549
box-shadow: $shadow-z1;
1550
}
1551
&.default-decoration {
1553
min-height: $small-size;
1554
padding: $container-padding;
1555
box-shadow: inset 0 1px highlight($titlebar);
1556
.tiled &,
1558
.maximized &,
1559
.fullscreen & {
1560
box-shadow: none;
1561
}
1562
button.titlebutton {
1564
min-height: $small-size;
1565
min-width: $small-size;
1566
margin: 0;
1567
padding: 0;
1568
}
1569
// workaround for non-animatable buttons
1571
.background:not(.csd) & button.titlebutton:active {
1572
background-size: 1000% 1000%;
1573
}
1574
}
1575
.solid-csd & {
1577
&:dir(rtl), &:dir(ltr) { // specificity bump
1578
border-radius: 0;
1579
box-shadow: $shadow-z1; // just remove the highlight
1580
}
1581
}
1582
}
1583
headerbar {
1585
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1586
min-height: $large-size;
1587
padding: 0 $container-padding;
1588
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1590
entry,
1591
spinbutton,
1592
button {
1593
margin-top: $container-padding;
1594
margin-bottom: $container-padding;
1595
}
1596
separator.titlebutton {
1598
margin-top: $large-size / 4;
1599
margin-bottom: $large-size / 4;
1600
background-color: divider($on-titlebar);
1601
}
1602
switch {
1604
margin-top: ($large-size - 24px) / 2;
1605
margin-bottom: ($large-size - 24px) / 2;
1606
}
1607
// reset button margins of the spinbutton
1609
spinbutton button {
1610
margin-top: 0;
1611
margin-bottom: 0;
1612
}
1613
// FIXME: This is a hacky workaround.
1615
.entry-tag {
1616
margin-top: 5px;
1617
margin-bottom: 5px;
1618
}
1619
}
1620
// Development versions of apps to use a differently styled headerbar
1622
window.devel .titlebar:not(.selection-mode) {
1623
}
1624
/**
1626
* Pathbars
1627
*/
1628
%pathbar_button,
1630
.path-bar.linked:not(.vertical) > button {
1631
@extend %button-flat-basic;
1632
padding-left: ($medium-size - 24px) / 2;
1634
padding-right: ($medium-size - 24px) / 2;
1635
border-image:
1636
radial-gradient(
1637
circle closest-corner at center calc(100% - 1px),
1638
$primary 0%,
1639
transparent 0%
1640
) 0 0 0 / 0 0 0;
1641
border-radius: $corner-radius;
1642
&:checked {
1644
border-image:
1645
radial-gradient(
1646
circle closest-corner at center calc(100% - 1px),
1647
$primary 100%,
1648
transparent 0%
1649
) 0 0 2 / 0 0 2px;
1650
color: $on-surface;
1651
&,
1653
&:disabled {
1654
background-color: transparent;
1655
}
1656
}
1657
label:not(:only-child) {
1659
&:first-child {
1660
margin-left: 0;
1661
}
1662
&:last-child {
1664
margin-right: 0;
1665
}
1666
}
1667
&.text-button {
1669
min-width: 0;
1670
}
1671
&.slider-button {
1673
padding-left: (24px - 16px) / 2;
1674
padding-right: (24px - 16px) / 2;
1675
}
1676
}
1677
/**
1679
* Tree Views
1680
*/
1681
treeview.view {
1683
@at-root * {
1684
-GtkTreeView-horizontal-separator: 4;
1685
-GtkTreeView-grid-line-width: 1;
1686
-GtkTreeView-grid-line-pattern: '';
1687
-GtkTreeView-tree-line-width: 1;
1688
-GtkTreeView-tree-line-pattern: '';
1689
-GtkTreeView-expander-size: 16;
1690
}
1691
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1693
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1694
// FIXME: Avoid transparency background-color being slightly darker
1696
&:selected {
1697
background-color: $base;
1698
background-image: image($overlay-selected);
1699
}
1700
// to avoid borders being overridden by the previously set props
1702
rubberband {
1703
@extend rubberband;
1704
}
1705
&:hover,
1707
&:selected {
1708
border-radius: 0;
1709
}
1710
&.separator {
1712
min-height: 1px + 2px * 2;
1713
color: divider($on-surface);
1714
}
1715
&:drop(active) {
1717
// FIXME: box-shadow, background-color and background-image are not available here.
1718
border-style: solid none;
1719
border-width: 9999px;
1720
border-color: overlay("hover", $on-surface);
1721
&.after {
1723
border-top-style: none;
1724
}
1725
&.before {
1727
border-bottom-style: none;
1728
}
1729
}
1730
&.expander {
1732
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1733
-gtk-icon-transform: rotate(-90deg);
1734
&:dir(rtl) {
1736
-gtk-icon-transform: rotate(90deg);
1737
}
1738
&:checked {
1740
-gtk-icon-transform: unset;
1741
}
1742
color: hint($on-surface);
1744
&:hover,
1746
&:active {
1747
color: $on-surface;
1748
}
1749
&:disabled {
1751
color: disabled-hint($on-surface);
1752
}
1753
}
1754
&.progressbar { // progress bar in treeviews
1756
border-bottom: $bar-size solid $primary;
1757
box-shadow: none;
1758
background-color: transparent;
1759
background-image: none;
1760
&:selected:hover {
1762
box-shadow: none;
1763
}
1764
}
1765
&.trough { // progress bar trough in treeviews
1767
border-bottom: $bar-size solid disabled-stroke($on-surface);
1768
box-shadow: none;
1769
background-color: transparent;
1770
background-image: none;
1771
&:selected:hover {
1773
box-shadow: none;
1774
}
1775
}
1776
header {
1778
button {
1779
padding: 2px 6px;
1780
border-style: none solid solid none;
1781
border-width: 1px;
1782
border-color: divider($on-surface);
1783
border-radius: 0;
1784
background-clip: border-box;
1785
color: hint($on-surface);
1786
@include ink-color($on-surface);
1787
@include list-item;
1788
&:disabled {
1790
color: disabled-hint($on-surface);
1791
}
1792
&,
1794
&:disabled {
1795
background-color: $base;
1796
}
1797
&:last-child {
1799
border-right-style: none;
1800
}
1801
}
1802
}
1803
button.dnd,
1805
header.button.dnd { // for treeview-like derive widgets
1806
padding: 2px 6px;
1807
border-style: none solid solid;
1808
border-width: 1px;
1809
border-color: divider($on-surface);
1810
border-radius: 0;
1811
box-shadow: none;
1812
background-color: $base;
1813
background-clip: border-box;
1814
color: $primary;
1815
}
1816
// see tests/testaccel to test
1818
acceleditor > label {
1819
background-color: $primary;
1820
}
1821
}
1822
/**
1824
* Menus
1825
*/
1826
menubar,
1828
.menubar {
1829
-GtkWidget-window-dragging: true;
1830
padding: 0;
1831
// box-shadow: inset 0 -1px divider($on-surface);
1832
background-color: $titlebar;
1833
color: $on-titlebar;
1834
&:backdrop {
1836
background-color: $titlebar-backdrop;
1837
color: hint($on-titlebar);
1838
}
1839
.csd & {
1841
transition: $transition;
1842
}
1843
> menuitem {
1845
transition: $transition;
1846
min-height: 20px;
1847
padding: 4px 8px;
1848
color: hint($on-titlebar);
1849
&:hover { // Seems like it :hover even with keyboard focus
1851
transition: none;
1852
background-color: overlay("activated", $on-titlebar);
1853
color: $on-titlebar;
1854
}
1855
&:disabled {
1857
color: disabled-hint($on-titlebar);
1858
}
1859
}
1860
}
1861
// Needed to make the border-radius of menus work
1863
// otherwise the background bleeds out of the menu edges
1864
.background.popup {
1865
background-color: transparent;
1866
}
1867
menu,
1869
.menu,
1870
.context-menu {
1871
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1872
padding: 4px 0;
1873
box-shadow: inset 0 1px highlight($surface);
1874
background-color: $surface;
1875
background-clip: border-box;
1876
border: 1px solid divider($on-surface); // adds borders in a non composited env
1877
.csd & {
1879
border: none; // axes borders in a composited env
1880
border-radius: $corner-radius;
1881
}
1882
menuitem {
1884
transition: background-color $duration $ease-out;
1885
min-height: 20px;
1886
min-width: 40px;
1887
padding: 4px 8px;
1888
color: $on-surface;
1889
font: initial;
1890
text-shadow: none;
1891
&:hover {
1893
transition: none;
1894
background-color: overlay("hover", $on-surface);
1895
}
1896
&:disabled {
1898
color: disabled($on-surface);
1899
}
1900
// submenu indicators
1902
arrow {
1903
min-height: 16px;
1904
min-width: 16px;
1905
color: hint($on-surface);
1906
&:disabled {
1908
color: disabled-hint($on-surface);
1909
}
1910
&:dir(ltr) {
1912
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1913
margin-left: 8px;
1914
}
1915
&:dir(rtl) {
1917
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1918
margin-right: 8px;
1919
}
1920
}
1921
// avoids labels color being overridden, see
1923
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1924
label {
1925
&:dir(rtl),
1926
&:dir(ltr) {
1927
// color: inherit;
1928
}
1929
}
1930
}
1931
// overflow arrows
1933
> arrow {
1934
min-height: 16px;
1935
min-width: 16px;
1936
padding: 4px;
1937
background-color: $surface;
1938
color: hint($on-surface);
1939
&.top {
1941
margin-top: -4px;
1942
border-bottom: 1px solid divider($on-surface);
1943
border-radius: $corner-radius $corner-radius 0 0;
1944
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1945
}
1946
&.bottom {
1948
margin-top: 4px * 2;
1949
margin-bottom: -4px * 3;
1950
border-top: 1px solid divider($on-surface);
1951
border-radius: 0 0 $corner-radius $corner-radius;
1952
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1953
}
1954
&:hover {
1956
background-image: image(overlay("hover", $on-surface));
1957
}
1958
&:disabled {
1960
border-color: transparent;
1961
background-color: transparent;
1962
color: transparent;
1963
// color: disabled-hint($on-surface);
1964
}
1965
}
1966
separator {
1968
margin: 4px 0;
1969
}
1970
}
1971
menuitem {
1973
accelerator {
1974
color: hint($on-surface);
1975
}
1976
&:disabled accelerator {
1978
color: disabled-hint($on-surface);
1979
}
1980
}
1981
/**
1983
* Popovers
1984
*/
1985
popover.background {
1987
transition: $transition-shadow;
1988
padding: 2px;
1989
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1990
background-color: $surface;
1991
&:backdrop {
1993
box-shadow: $shadow-z2;
1994
}
1995
&, .csd & {
1997
border-style: solid;
1998
border-width: 1px;
1999
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2000
border-radius: $corner-radius + 1px;
2001
}
2002
> stack {
2004
margin: -4px; // remove extra padding from menu style popovers
2005
}
2006
> toolbar {
2008
margin: -2px;
2009
}
2010
> list,
2012
> .view,
2013
> toolbar {
2014
border-style: none;
2015
box-shadow: none;
2016
background-color: transparent;
2017
}
2018
// FIXME: Use the popover color instead of transparent as a workaround for .view
2020
list,
2021
.view:not(:selected),
2022
toolbar {
2023
background-color: $surface;
2024
}
2025
&.touch-selection,
2027
&.magnifier,
2028
&.osd {
2029
// @extend %osd;
2030
}
2031
button:not(.suggested-action):not(.destructive-action) {
2033
// @extend %button-flat;
2034
}
2035
.linked:not(.vertical) > entry:not(:only-child) {
2037
// border-radius: $corner-radius $corner-radius 0 0;
2038
}
2039
&.menu button,
2041
button.model {
2042
@extend %button-flat;
2043
min-height: 32px;
2045
padding: 0 8px;
2046
border-radius: $corner-radius;
2047
&:checked {
2049
// color: $primary;
2050
}
2051
}
2052
separator {
2054
margin: 4px 0;
2055
}
2056
list separator {
2058
margin: 0;
2059
}
2060
}
2061
/**
2063
* Notebooks
2064
*/
2065
notebook {
2067
frame > paned > & > header,
2068
&.frame > header {
2069
background-color: $base-alt;
2070
}
2071
&:focus tab:checked {
2073
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2074
}
2075
> header {
2077
border-width: 1px;
2078
border-color: divider($on-surface);
2079
background-color: $background;
2080
background-clip: border-box;
2081
&.top {
2083
border-bottom-style: solid;
2084
> tabs {
2086
margin-bottom: -1px;
2087
> tab {
2089
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2090
&:checked {
2092
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2093
}
2094
&.reorderable-page {
2096
border-image-width: 0 1px 2px;
2097
}
2098
}
2099
}
2100
}
2101
&.bottom {
2103
border-top-style: solid;
2104
> tabs {
2106
margin-top: -1px;
2107
> tab {
2109
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2110
&:checked {
2112
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2113
}
2114
&.reorderable-page {
2116
border-image-width: 2px 1px 0;
2117
}
2118
}
2119
}
2120
}
2121
&.left {
2123
border-right-style: solid;
2124
> tabs {
2126
margin-right: -1px;
2127
> tab {
2129
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2130
&:checked {
2132
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2133
}
2134
&.reorderable-page {
2136
border-image-width: 1px 2px 1px 0;
2137
}
2138
}
2139
}
2140
}
2141
&.right {
2143
border-left-style: solid;
2144
> tabs {
2146
margin-left: -1px;
2147
> tab {
2149
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2150
&:checked {
2152
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2153
}
2154
&.reorderable-page {
2156
border-image-width: 1px 0 1px 2px;
2157
}
2158
}
2159
}
2160
}
2161
&.top > tabs > arrow {
2163
@extend %notebook_vert_arrows;
2164
border-top-style: none;
2166
}
2167
&.bottom > tabs > arrow {
2169
@extend %notebook_vert_arrows;
2170
border-bottom-style: none;
2172
}
2173
@at-root %notebook_vert_arrows {
2175
padding-left: 4px;
2176
padding-right: 4px;
2177
&.down {
2179
margin-left: -8px;
2180
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2181
}
2182
&.up {
2184
margin-right: -8px;
2185
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2186
}
2187
}
2188
&.left > tabs > arrow {
2190
@extend %notebook_horz_arrows;
2191
border-left-style: none;
2193
}
2194
&.right > tabs > arrow {
2196
@extend %notebook_horz_arrows;
2197
border-right-style: none;
2199
}
2200
@at-root %notebook_horz_arrows {
2202
padding-top: 4px;
2203
padding-bottom: 4px;
2204
&.down {
2206
margin-top: -8px;
2207
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2208
}
2209
&.up {
2211
margin-bottom: -8px;
2212
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2213
}
2214
}
2215
> tabs > arrow {
2217
min-height: 16px;
2218
min-width: 16px;
2219
border-radius: 0;
2220
color: hint($on-surface);
2221
@extend %ripple;
2222
@include ink-color($on-surface);
2223
&:disabled {
2225
color: disabled-hint($on-surface);
2226
}
2227
}
2228
tab {
2230
transition: $transition,
2231
background-size 0ms,
2232
background-image 0ms;
2233
min-height: $small-size;
2234
min-width: $small-size;
2235
padding: $container-padding 12px;
2236
border-width: 1px; // for reorderable tabs
2238
border-color: transparent; //
2239
outline: none;
2241
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2242
background-repeat: no-repeat;
2243
background-position: center;
2244
background-size: 0% 0%;
2245
background-clip: border-box;
2246
color: hint($on-surface);
2248
font-weight: 500;
2249
&:hover {
2251
background-color: overlay("hover-alt", $on-surface);
2252
}
2253
&:disabled {
2255
color: disabled-hint($on-surface);
2256
}
2257
&:checked {
2259
transition: $transition,
2260
background-size $ripple-fade-in-duration $ease-out,
2261
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2262
background-color: transparent;
2263
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2264
background-size: 1000% 1000%;
2265
background-clip: padding-box;
2266
color: $on-surface;
2267
&:disabled {
2269
color: disabled($on-surface);
2270
}
2271
&.reorderable-page {
2273
border-color: divider($on-surface);
2274
background-color: $base;
2275
}
2276
}
2277
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2279
> box {
2280
transition: background-color $duration $ease-out;
2281
margin: -$container-padding -12px;
2282
padding: $container-padding 12px;
2283
&:drop(active) {
2285
background-color: overlay("hover", $on-surface);
2286
}
2287
}
2288
// colors the button like the label, overridden otherwise
2290
button.flat {
2291
@extend %button-small;
2292
&:last-child {
2294
margin-left: $container-padding;
2295
margin-right: $container-padding - 12px;
2296
}
2297
&:first-child {
2299
margin-left: $container-padding - 12px;
2300
margin-right: $container-padding;
2301
}
2302
}
2303
}
2304
&.top,
2306
&.bottom {
2307
tabs {
2308
padding-left: 8px;
2309
padding-right: 8px;
2310
&:not(:only-child) {
2312
&:first-child {
2313
margin-left: 0;
2314
}
2315
&:last-child {
2317
margin-right: 0;
2318
}
2319
}
2320
tab.reorderable-page {
2322
border-style: none solid;
2323
}
2324
}
2325
}
2326
&.left,
2328
&.right {
2329
tabs {
2330
padding-top: 8px;
2331
padding-bottom: 8px;
2332
&:not(:only-child) {
2334
&:first-child {
2335
margin-top: 0;
2336
}
2337
&:last-child {
2339
margin-bottom: 0;
2340
}
2341
}
2342
tab.reorderable-page {
2344
border-style: solid none;
2345
}
2346
}
2347
}
2348
}
2349
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2351
background-color: $base;
2352
}
2353
}
2354
/**
2356
* Scrollbars
2357
*/
2358
scrollbar {
2360
$_slider_min_length: 24px;
2361
// disable steppers
2363
@at-root * {
2364
-GtkScrollbar-has-backward-stepper: false;
2365
-GtkScrollbar-has-forward-stepper: false;
2366
}
2367
transition: $transition;
2369
background-color: $base;
2370
// scrollbar border
2372
&.top { border-bottom: 1px solid divider($on-surface); }
2373
&.bottom { border-top: 1px solid divider($on-surface); }
2374
&.left { border-right: 1px solid divider($on-surface); }
2375
&.right { border-left: 1px solid divider($on-surface); }
2376
// slider
2378
slider {
2379
transition: background-color $duration $ease-out;
2380
min-width: 8px;
2381
min-height: 8px;
2382
border: 4px solid transparent;
2383
border-radius: $circular-radius;
2384
background-clip: padding-box;
2385
background-color: disabled($on-surface);
2386
&:hover {
2388
background-color: hint($on-surface);
2389
}
2390
&:active {
2392
background-color: $on-surface;
2393
}
2394
&:disabled {
2396
background-color: disabled-hint($on-surface);
2397
}
2398
}
2399
&.fine-tune {
2401
slider {
2402
min-width: 4px;
2403
min-height: 4px;
2404
}
2405
&.horizontal slider {
2407
margin: 2px 0;
2408
}
2409
&.vertical slider {
2411
margin: 0 2px;
2412
}
2413
}
2414
&.overlay-indicator {
2416
&:not(.fine-tune) slider {
2417
transition-property: background-color, min-height, min-width;
2418
}
2419
&:not(.dragging):not(.hovering) {
2421
border-color: transparent;
2422
background-color: transparent;
2423
slider {
2425
min-width: 4px;
2426
min-height: 4px;
2427
margin: 4px - 1px;
2428
border: 1px solid rgba($base, .3);
2429
}
2430
button {
2432
min-width: 4px;
2433
min-height: 4px;
2434
margin: 4px - 1px;
2435
border: 1px solid rgba($base, .3);
2436
border-radius: $circular-radius;
2437
background-color: disabled($on-surface);
2438
background-clip: padding-box;
2439
-gtk-icon-source: none;
2440
&:disabled {
2442
background-color: disabled-hint($on-surface);
2443
}
2444
}
2445
&.horizontal {
2447
slider {
2448
min-width: $_slider_min_length;
2449
}
2450
button {
2452
min-width: 8px;
2453
}
2454
}
2455
&.vertical {
2457
slider {
2458
min-height: $_slider_min_length;
2459
}
2460
button {
2462
min-height: 8px;
2463
}
2464
}
2465
}
2466
&.dragging,
2468
&.hovering {
2469
background-color: rgba($surface, .9);
2470
}
2471
}
2472
&.horizontal slider {
2474
min-width: $_slider_min_length;
2475
}
2476
&.vertical slider {
2478
min-height: $_slider_min_length;
2479
}
2480
// button styling
2482
button {
2483
@extend %button-flat-basic;
2484
min-width: 16px;
2486
min-height: 16px;
2487
padding: 0;
2488
border-radius: 0;
2489
}
2490
// button icons
2492
&.vertical {
2493
button {
2494
&.down {
2495
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2496
}
2497
&.up {
2499
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2500
}
2501
}
2502
}
2503
&.horizontal {
2505
button {
2506
&.down {
2507
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2508
}
2509
&.up {
2511
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2512
}
2513
}
2514
}
2515
}
2516
/**
2519
* Switch
2520
*/
2521
switch {
2523
transition: all $duration $ease-out;
2524
margin: $container-padding 0;
2525
padding: 0 2px;
2526
border: 5px solid transparent;
2527
border-radius: $circular-radius;
2528
background-color: stroke($on-surface);
2529
background-clip: padding-box;
2530
font-size: 0;
2531
&:checked {
2533
background-color: rgba($primary, .5);
2534
}
2535
&:disabled {
2537
opacity: .5;
2538
}
2539
// hide on/off icons for >=3.24.5
2541
image {
2542
margin: -8px;
2543
-gtk-icon-transform: scale(0);
2544
}
2545
slider {
2547
transition: all $duration $ease-out;
2548
min-width: 20px;
2549
min-height: 20px;
2550
margin: -3px -2px;
2551
border-radius: $circular-radius;
2552
outline: none;
2553
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2554
background-color: $switch-surface;
2555
}
2556
&:hover slider {
2558
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2559
}
2560
&:focus slider {
2562
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2563
}
2564
&:checked slider {
2566
background-color: $primary;
2567
}
2568
&:checked:hover slider {
2570
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2571
}
2572
&:checked:focus slider {
2574
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2575
}
2576
row:selected & {
2578
}
2579
}
2580
/**
2582
* Check and Radio items
2583
*/
2584
// draw regular check and radio items using our PNG assets
2586
// all assets are rendered from assets.svg. never add pngs directly
2587
// selection-mode
2589
.view.content-view.check:not(list),
2590
.content-view:not(list) .tile check {
2591
min-height: 40px;
2592
min-width: 40px;
2593
margin: 0;
2594
padding: 0;
2595
box-shadow: none;
2596
background-color: transparent;
2597
background-image: none;
2598
-gtk-icon-shadow: $icon-shadow-z2;
2599
&:hover,
2601
&:active {
2602
-gtk-icon-shadow: $icon-shadow-z4;
2603
}
2604
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2606
&#{$class} {
2607
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2608
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2610
}
2611
}
2612
}
2613
checkbutton,
2615
radiobutton {
2616
outline: none;
2617
}
2618
checkbutton.text-button,
2620
radiobutton.text-button {
2621
// this is for a nice focus on check and radios text
2622
padding: 2px;
2623
label:not(:only-child) {
2625
margin: 0 4px;
2626
}
2627
}
2628
$check-radio-size: 40px;
2630
check,
2632
radio {
2633
min-height: 24px;
2634
min-width: 24px;
2635
margin: -($check-radio-size - 24px) / 2;
2636
padding: ($check-radio-size - 24px) / 2;
2637
border-radius: $circular-radius;
2638
color: hint($on-surface);
2639
@extend %ripple;
2640
@include ink-color($on-surface);
2641
&:checked,
2643
&:indeterminate {
2644
color: $primary;
2645
@include ink-color($primary);
2646
}
2647
&:disabled {
2649
color: disabled-hint($on-surface);
2650
}
2651
&:only-child {
2653
// margin: -12px;
2654
}
2655
popover modelbutton.flat & {
2657
&,
2658
&:focus,
2659
&:hover,
2660
&:focus:hover,
2661
&:active,
2662
&:disabled {
2663
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2664
box-shadow: none;
2665
background-image: none;
2666
}
2667
&.left:dir(rtl) {
2669
margin-left: -12px;
2670
margin-right: -4px;
2671
}
2672
&.right:dir(ltr) {
2674
margin-left: -4px;
2675
margin-right: -12px;
2676
}
2677
}
2678
menu menuitem & {
2680
transition: none;
2681
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2682
padding: 0;
2683
&:dir(ltr) {
2685
margin-right: 8px;
2686
}
2687
&:dir(rtl) {
2689
margin-left: 8px;
2690
}
2691
&,
2693
&:hover,
2694
&:disabled {
2695
box-shadow: none;
2696
}
2697
}
2698
}
2699
%check,
2701
check {
2702
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2703
&:checked {
2705
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2706
}
2707
&:indeterminate {
2709
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2710
}
2711
}
2712
%radio,
2714
radio {
2715
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2716
&:checked {
2718
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2719
}
2720
&:indeterminate {
2722
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2723
}
2724
border-image-slice: $check-radio-size / 2px;
2726
border-image-width: $check-radio-size / 2;
2727
$radio-indicator-size: 10px / $check-radio-size / 2;
2729
border-image-source:
2731
-gtk-gradient(
2732
radial,
2733
center center, 0,
2734
center center, .001,
2735
to($primary),
2736
to(transparent)
2737
);
2738
&:checked:not(:indeterminate) {
2740
border-image-source:
2741
-gtk-gradient(
2742
radial,
2743
center center, 0,
2744
center center, $radio-indicator-size,
2745
to($primary),
2746
to(transparent)
2747
);
2748
&:disabled {
2750
border-image-source:
2751
-gtk-gradient(
2752
radial,
2753
center center, 0,
2754
center center, $radio-indicator-size,
2755
to(disabled-hint($on-surface)),
2756
to(transparent)
2757
);
2758
}
2759
}
2760
}
2761
%small_check,
2763
menu menuitem check {
2764
min-height: 16px;
2765
min-width: 16px;
2766
border-radius: $corner-radius;
2767
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2768
&:checked {
2770
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2771
}
2772
&:indeterminate {
2774
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2775
}
2776
}
2777
%small_radio,
2779
menu menuitem radio {
2780
min-height: 16px;
2781
min-width: 16px;
2782
border-image: none;
2783
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2784
&:checked {
2786
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2787
}
2788
&:indeterminate {
2790
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2791
}
2792
}
2793
// ANIMATION:
2795
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2796
// the transformation is set on the active state and it get reset on the checked state.
2797
radio:not(:checked):active {
2798
// -gtk-icon-transform: scale(0);
2799
}
2800
// Otherwise, treeview.view styling will be applied...
2802
treeview.view check,
2803
treeview.view radio {
2804
padding: 0;
2805
color: hint($on-surface);
2806
&:checked,
2808
&:indeterminate {
2809
color: $primary;
2810
}
2811
&:disabled {
2813
color: disabled-hint($on-surface);
2814
}
2815
&,
2817
&:hover,
2818
&:selected,
2819
&:selected:hover {
2820
box-shadow: none;
2821
background-color: transparent;
2822
}
2823
}
2824
treeview.view radio:checked {
2826
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2827
border-image: none;
2828
}
2829
/**
2831
* GtkScale
2832
*/
2833
scale {
2835
// sizing
2836
$_marks_length: 8px;
2837
$_marks_distance: 7px;
2838
$trough_size: 2px;
2840
$finetune_trough_size: 4px;
2841
$slider_size: 32px;
2843
$slider_margin: -($slider_size - $trough_size) / 2;
2845
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2846
$color_slider_margin: -($slider_size) * 3 / 4;
2848
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2849
min-height: $trough_size;
2851
min-width: $trough_size;
2852
&.horizontal {
2854
padding: ($medium-size - $trough_size) / 2 12px;
2855
}
2856
&.vertical {
2858
padding: 12px ($medium-size - $trough_size) / 2;
2859
}
2860
// the slider is inside the trough, so to have make it bigger there's a negative margin
2862
slider {
2863
min-height: $slider_size;
2864
min-width: $slider_size;
2865
margin: $slider_margin;
2866
}
2867
// click-and-hold the slider to activate
2869
&.fine-tune {
2870
&.horizontal {
2871
min-height: $finetune_trough_size;
2872
padding-top: ($medium-size - $finetune_trough_size) / 2;
2873
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2874
}
2875
&.vertical {
2877
min-width: $finetune_trough_size;
2878
padding-left: ($medium-size - $finetune_trough_size) / 2;
2879
padding-right: ($medium-size - $finetune_trough_size) / 2;
2880
}
2881
// to make the trough grow in fine-tune mode
2883
slider {
2884
margin: $finetune_slider_margin;
2885
}
2886
}
2887
// the backing bit
2889
trough {
2890
transition: background-color $duration $ease-out;
2891
outline: none;
2892
background-color: stroke($on-surface);
2893
&:disabled {
2895
background-color: disabled-stroke($on-surface);
2896
}
2897
}
2898
// the colored part of the backing bit
2900
highlight {
2901
transition: background-image $duration $ease-out;
2902
background-image: image($primary);
2903
&:disabled {
2905
background-color: $background;
2906
background-image: image(disabled-hint($on-surface));
2907
}
2908
}
2909
// this is another differently styled part of the backing bit, the most relevant use case is for example
2911
// in media player to indicate how much video stream as been cached
2912
fill {
2913
transition: background-color $duration $ease-out;
2914
background-color: stroke($on-surface);
2915
&:disabled {
2917
background-color: transparent;
2918
}
2919
}
2920
slider {
2922
transition: background-color $duration $ease-out,
2923
background-size $ripple-fade-out-duration $ease-out,
2924
background-image $ripple-fade-out-opacity-duration $ease-out;
2925
background-repeat: no-repeat;
2926
background-position: center;
2927
background-size: auto, 1000% 1000%;
2928
border-radius: 50%;
2929
color: $primary;
2930
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2932
&#{$class} {
2933
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2934
background-image:
2936
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2937
radial-gradient(circle, transparent 10%, transparent 0%);
2938
}
2939
}
2940
&:hover {
2942
background-color: overlay("hover", $primary);
2943
}
2944
&:focus {
2946
background-color: overlay("focus", $primary);
2947
}
2948
&:active {
2950
$_url: 'assets/scale-slider#{$asset-suffix}';
2951
transition: background-color $duration $ease-out,
2953
background-size 0ms,
2954
background-image 0ms;
2955
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2956
background-image:
2957
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2958
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2959
background-size: auto, 0% 0%;
2960
}
2961
}
2962
marks,
2964
value {
2965
color: hint($on-surface);
2966
}
2967
indicator {
2969
background-color: stroke($on-surface);
2970
color: transparent;
2971
}
2972
//marks margins
2974
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2975
(horizontal, bottom, bottom, top),
2976
(vertical, top, left, right),
2977
(vertical, bottom, right, left) {
2978
&.#{$scale_orient} marks {
2979
&.#{$marks_class} {
2980
margin-#{$marks_margin}: $_marks_distance;
2981
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2982
}
2983
}
2984
&.#{$scale_orient}.fine-tune marks {
2986
&.#{$marks_class} {
2987
margin-#{$marks_margin}: $_marks_distance - 1px;
2988
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2989
}
2990
}
2991
}
2992
&.horizontal {
2994
indicator {
2995
min-height: $_marks_length;
2996
min-width: 1px;
2997
}
2998
}
2999
&.vertical {
3001
indicator {
3002
min-height: 1px;
3003
min-width: $_marks_length;
3004
}
3005
}
3006
// *WARNING* scale with marks madness following
3008
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3010
@each $marks_class, $marks_infix in (
3011
".marks-before:not(.marks-after)": "-marks-before",
3012
".marks-after:not(.marks-before)": "-marks-after"
3013
) {
3014
&#{$dir_class}#{$marks_class} {
3015
slider {
3016
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3017
&#{$state_class} {
3018
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3019
background-image:
3021
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3022
radial-gradient(circle, transparent 10%, transparent 0%);
3023
}
3024
}
3025
&:active {
3027
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3028
background-image:
3030
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3031
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3032
}
3033
}
3034
}
3035
}
3036
}
3037
&.color {
3039
min-height: 0;
3040
min-width: 0;
3041
&.horizontal {
3043
padding: 0 0 12px 0;
3044
slider {
3046
&:dir(ltr), &:dir(rtl) { // specificity bump
3047
margin-bottom: $color_slider_margin;
3048
margin-top: $color_marks_slider_margin;
3049
}
3050
}
3051
}
3052
&.vertical {
3054
&:dir(ltr) {
3055
padding: 0 0 0 12px;
3056
slider {
3058
margin-left: $color_slider_margin;
3059
margin-right: $color_marks_slider_margin;
3060
}
3061
}
3062
&:dir(rtl) {
3064
padding: 0 12px 0 0;
3065
slider {
3067
margin-right: $color_slider_margin;
3068
margin-left: $color_marks_slider_margin;
3069
}
3070
}
3071
}
3072
}
3073
}
3074
/**
3076
* Progress bars
3077
*/
3078
progressbar {
3080
// sizing
3081
&.horizontal {
3082
trough,
3083
progress {
3084
min-height: $bar-size;
3085
}
3086
}
3087
&.vertical {
3089
trough,
3090
progress {
3091
min-width: $bar-size;
3092
}
3093
}
3094
// FIXME: insensitive state missing and some other state should be set probably
3096
color: hint($on-surface);
3097
font-size: smaller;
3098
trough {
3100
background-color: disabled-stroke($on-surface);
3101
}
3102
progress {
3104
background-color: $primary;
3105
}
3106
&.osd { // progressbar.osd used for epiphany page loading progress
3108
// min-width: $bar-size;
3109
// min-height: $bar-size;
3110
// background-color: transparent;
3111
trough {
3113
// background-color: transparent;
3114
}
3115
progress {
3117
// background-color: $primary;
3118
}
3119
}
3120
// makes the progress indicator disappear, when the fraction is 0
3122
trough.empty progress {
3123
all: unset;
3124
}
3125
}
3126
/**
3128
* Level Bar
3129
*/
3130
levelbar {
3132
&.horizontal {
3133
block {
3134
min-height: $bar-size;
3135
}
3136
&.discrete block {
3138
min-width: $medium-size;
3139
&:not(:last-child) {
3141
margin-right: 2px;
3142
}
3143
}
3144
}
3145
&.vertical {
3147
block {
3148
min-width: $bar-size;
3149
}
3150
&.discrete block {
3152
min-height: $medium-size;
3153
&:not(:last-child) {
3155
margin-bottom: 2px;
3156
}
3157
}
3158
}
3159
// imitate the entry style
3161
trough {
3162
// padding: 2px;
3163
// border-radius: $corner-radius;
3164
// box-shadow: $shadow-z1;
3165
// background-color: $base;
3166
&:disabled {
3168
// background-color: $base-alt;
3169
}
3170
}
3171
block {
3173
&.low {
3174
background-color: $warning;
3175
}
3176
&.high,
3178
&:not(.empty) {
3179
background-color: $primary;
3180
}
3181
&.full {
3183
background-color: $success;
3184
}
3185
&.empty {
3187
background-color: disabled-stroke($on-surface);
3188
}
3189
}
3190
}
3191
/**
3193
* Print dialog
3194
*/
3195
printdialog {
3197
paper {
3198
padding: 0;
3199
border: 1px solid divider($on-surface);
3200
background-color: $base;
3201
color: $on-surface;
3202
}
3203
.dialog-action-box {
3205
margin: 12px;
3206
}
3207
}
3208
/**
3210
* Frames
3211
*/
3212
frame > border,
3214
.frame {
3215
margin: 0;
3216
padding: 0;
3217
border: 1px solid divider($on-surface);
3218
border-radius: 0;
3219
box-shadow: none;
3220
&.flat {
3222
border-style: none;
3223
}
3224
}
3225
// for backward compatibility
3227
frame.flat > border {
3228
border-style: none;
3229
}
3230
actionbar > revealer > box {
3232
padding: $container-padding;
3233
border-top: 1px solid divider($on-surface);
3234
background-color: $base;
3235
background-clip: border-box;
3236
button:not(.suggested-action):not(.destructive-action) {
3238
@extend %button-flat;
3239
}
3240
.linked:not(.vertical) > entry:not(:only-child) {
3242
border-radius: $corner-radius $corner-radius 0 0;
3243
}
3244
}
3245
scrolledwindow {
3247
viewport.frame { // avoid double borders when viewport inside scrolled window
3248
border-style: none;
3249
}
3250
// This is used when content is touch-dragged past boundaries.
3252
// draws a box on top of the content, the size changes programmatically.
3253
@at-root overshoot {
3254
&.top { @include overshoot(top); }
3255
&.bottom { @include overshoot(bottom); }
3257
&.left { @include overshoot(left); }
3259
&.right { @include overshoot(right); }
3261
}
3262
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3264
@at-root undershoot {
3265
&.top { @include undershoot(top); }
3266
&.bottom { @include undershoot(bottom); }
3268
&.left { @include undershoot(left); }
3270
&.right { @include undershoot(right); }
3272
}
3273
@at-root junction { // the small square between two scrollbars
3275
border-style: solid none none solid;
3276
border-width: 1px;
3277
border-color: divider($on-surface);
3278
background-color: $base;
3279
&:dir(rtl) {
3281
border-style: solid solid none none;
3282
}
3283
}
3284
}
3285
// vbox and hbox separators
3287
separator {
3288
min-width: 1px;
3289
min-height: 1px;
3290
background-color: divider($on-surface);
3291
}
3292
%hide_separators {
3294
min-width: 0;
3295
min-height: 0;
3296
background-color: transparent;
3297
}
3298
/**
3300
* Lists
3301
*/
3302
list {
3304
border-color: divider($on-surface);
3305
background-color: $base;
3306
row {
3308
padding: 2px;
3309
}
3310
}
3311
row {
3313
&.activatable {
3314
@extend %ripple;
3315
@include ink-color($on-surface);
3316
@include list-item;
3317
// this is for indicathing which row generated a popover
3319
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3320
&.has-open-popup {
3321
background-color: overlay("activated", $on-surface);
3322
}
3323
}
3324
&:selected {
3326
background-color: $overlay-selected;
3327
@include ink-color($primary);
3329
&.has-open-popup {
3331
background-color: overlay("activated", $primary, $background: $overlay-selected);
3332
}
3333
}
3334
}
3335
/**
3337
* App Notifications
3338
*/
3339
.app-notification {
3341
// @extend %osd;
3342
@extend %toolbar-osd;
3344
margin: 8px;
3346
button {
3348
@extend %button-flat;
3349
&.text-button:not(:disabled) {
3351
color: $primary;
3352
@include ink-color($primary);
3353
}
3354
}
3355
&.frame,
3357
border {
3358
border-style: none;
3359
}
3360
}
3361
/**
3363
* Expanders
3364
*/
3365
expander {
3367
title > arrow {
3368
transition: all $duration $ease-out;
3369
min-width: 16px;
3370
min-height: 16px;
3371
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3372
-gtk-icon-transform: rotate(-90deg);
3373
&:dir(rtl) {
3375
-gtk-icon-transform: rotate(90deg);
3376
}
3377
&:checked {
3379
-gtk-icon-transform: unset;
3380
}
3381
color: hint($on-surface);
3383
&:hover,
3385
&:active {
3386
color: $on-surface;
3387
}
3388
&:disabled {
3390
color: disabled-hint($on-surface);
3391
}
3392
}
3393
}
3394
/**
3396
* Calendar
3397
*/
3398
calendar {
3400
padding: 1px;
3401
border: 1px solid divider($on-surface);
3402
color: $on-surface;
3403
&:disabled {
3405
color: disabled($on-surface);
3406
}
3407
&:selected {
3409
border-radius: $corner-radius + 1px;
3410
background-color: $overlay-selected;
3411
}
3412
&.header {
3414
border-style: none none solid;
3415
border-color: divider($on-surface);
3416
border-radius: 0;
3417
}
3418
&.button {
3420
border-radius: $corner-radius + 1px;
3421
color: hint($on-surface);
3422
&:hover {
3424
background-image: image(overlay("hover", $on-surface));
3425
}
3426
&:disabled {
3428
color: disabled-hint($on-surface);
3429
}
3430
}
3431
&.highlight {
3433
color: hint($on-surface);
3434
font-weight: 500;
3435
}
3436
&:indeterminate {
3438
color: disabled-hint($on-surface);
3439
}
3440
}
3441
/**
3443
* Dialogs
3444
*/
3445
// Message Dialog styling
3447
messagedialog {
3448
&.background {
3449
background-color: $surface;
3450
}
3451
.titlebar {
3453
min-height: $small-size;
3454
border-style: none;
3455
box-shadow: inset 0 1px highlight($surface);
3456
background-color: $surface;
3457
color: $on-surface;
3458
&:backdrop {
3460
background-color: $surface;
3461
color: hint($on-surface);
3462
}
3463
}
3464
&.csd { // rounded bottom border styling for csd version
3466
&.background {
3467
// bigger radius for better antialiasing
3468
border-bottom-left-radius: $corner-radius;
3469
border-bottom-right-radius: $corner-radius;
3470
}
3471
}
3472
// Hint text
3474
box.vertical > label + label {
3475
color: hint($on-surface);
3476
}
3477
.dialog-action-box {
3479
margin-top: -$container-padding;
3480
// padding: $container-padding;
3481
button {
3483
@extend %button-flat;
3484
&:not(:last-child) {
3486
margin-right: $container-padding;
3487
}
3488
&:not(:disabled) {
3490
color: $primary;
3491
@include ink-color($primary);
3492
}
3493
&.suggested-action:not(:disabled) {
3495
background-color: transparent;
3496
// color: $primary;
3497
// @include ink-color($primary);
3498
}
3499
&.destructive-action:not(:disabled) {
3501
background-color: transparent;
3502
color: $error;
3503
@include ink-color($error);
3504
}
3505
}
3506
}
3507
}
3508
filechooser {
3510
.dialog-action-box {
3511
border-top: 1px solid divider($on-surface);
3512
}
3513
#pathbarbox {
3515
border-bottom: 1px solid divider($on-surface);
3516
background-color: $background;
3517
> stack > box > button { // The new folder button
3519
@extend %button-flat;
3520
border-radius: $circular-radius;
3522
}
3523
}
3524
}
3525
filechooserbutton:drop(active) {
3527
// box-shadow: none;
3528
}
3529
/**
3531
* Sidebar
3532
*/
3533
.sidebar {
3535
border-style: none;
3536
background-color: $base-alt;
3537
&:not(separator) {
3539
@at-root %sidebar_left,
3540
&:dir(ltr),
3541
&.left,
3542
&.left:dir(rtl) {
3543
border-right: 1px solid divider($on-surface);
3544
border-left-style: none;
3545
}
3546
@at-root %sidebar_right,
3548
&:dir(rtl),
3549
&.right {
3550
border-left: 1px solid divider($on-surface);
3551
border-right-style: none;
3552
}
3553
}
3554
list {
3556
background-color: transparent;
3557
}
3558
paned & {
3560
&,
3561
&.left,
3562
&.right,
3563
&.left:dir(rtl),
3564
&:dir(rtl),
3565
&:dir(ltr) {
3566
border-style: none;
3567
}
3568
}
3569
}
3570
stacksidebar.sidebar {
3572
& {
3573
&:dir(ltr),
3574
&.left,
3575
&.left:dir(rtl) {
3576
list {
3577
@extend %sidebar_left;
3578
}
3579
}
3580
&:dir(rtl),
3582
&.right {
3583
list {
3584
@extend %sidebar_right;
3585
}
3586
}
3587
}
3588
+ separator.vertical,
3590
separator.horizontal {
3591
@extend %hide_separators;
3592
}
3593
list {
3595
padding: 4px;
3596
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3597
}
3598
row {
3600
min-height: 32px;
3601
padding: 0 8px - 6px;
3602
border-radius: $corner-radius;
3603
&:selected {
3605
background-color: overlay("activated", $primary);
3606
color: $primary;
3607
font-weight: 500;
3608
@include ink-color($primary);
3609
}
3610
+ row {
3612
margin-top: 4px;
3613
}
3614
> label {
3616
padding-left: 6px;
3617
padding-right: 6px;
3618
}
3619
&.needs-attention > label {
3621
@extend %needs-attention;
3622
}
3623
}
3624
}
3625
separator.sidebar {
3627
background-color: divider($on-surface);
3628
&.selection-mode,
3630
.selection-mode & {
3631
// background-color: divider($on-primary);
3632
}
3633
}
3634
/**
3636
* File chooser
3637
*/
3638
// dim the sidebar icons, see bug #786613 for details on this oddity
3640
row image.sidebar-icon {
3641
transition: color $duration $ease-out;
3642
color: hint($on-surface);
3643
&:disabled {
3645
color: disabled-hint($on-surface);
3646
}
3647
}
3648
placessidebar.sidebar {
3650
> viewport.frame {
3651
border-style: none;
3652
}
3653
list {
3655
padding: (4px - 3px) 0 4px;
3656
}
3657
row {
3659
// Needs overriding of the GtkListBoxRow padding
3660
min-height: 32px;
3661
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3662
padding: 0;
3663
border-radius: $corner-radius;
3664
// Using margins/padding directly in the SidebarRow
3666
// will make the animation of the new bookmark row jump
3667
> revealer {
3668
padding: 0 8px;
3669
}
3670
&:selected {
3672
background-color: overlay("activated", $primary);
3673
color: $primary;
3674
font-weight: 500;
3675
@include ink-color($primary);
3676
image.sidebar-icon {
3678
color: $primary;
3679
}
3680
}
3681
&:disabled {
3683
color: disabled($on-surface);
3684
}
3685
image.sidebar-icon {
3687
&:dir(ltr) {
3688
padding-right: 8px;
3689
}
3690
&:dir(rtl) {
3692
padding-left: 8px;
3693
}
3694
}
3695
label.sidebar-label {
3697
&:dir(ltr) {
3698
padding-right: 2px;
3699
}
3700
&:dir(rtl) {
3702
padding-left: 2px;
3703
}
3704
}
3705
@at-root button.sidebar-button {
3707
@extend %button-flat-basic;
3708
@extend %button-small;
3709
}
3710
&.sidebar-placeholder-row {
3712
background-color: overlay("hover", $on-surface);
3713
}
3714
&.sidebar-new-bookmark-row {
3716
color: $primary;
3717
image.sidebar-icon {
3719
color: $primary;
3720
}
3721
}
3722
}
3723
}
3724
placesview {
3726
.server-list-button {
3727
> image {
3728
-gtk-icon-transform: rotate(0turn);
3729
}
3730
&:checked > image {
3732
-gtk-icon-transform: rotate(-.5turn);
3733
}
3734
}
3735
// this selects the "connect to server" label
3737
> actionbar > revealer > box > label {
3738
padding-left: 8px;
3739
padding-right: 8px;
3740
}
3741
}
3742
/**
3744
* Paned
3745
*/
3746
paned {
3748
> separator {
3749
min-width: 1px;
3750
min-height: 1px;
3751
-gtk-icon-source: none; // defeats the ugly default handle decoration
3752
border-style: none; // just to be sure
3753
background-color: transparent;
3754
// workaround, using background istead of a border since the border will get rendered twice (?)
3755
background-image: image(divider($on-surface));
3756
background-size: 1px 1px;
3757
background-clip: content-box; // avoids borders image being rendered twice (?)
3758
&.wide {
3760
min-width: 6px;
3761
min-height: 6px;
3762
background-color: $background;
3763
background-image: image(divider($on-surface)), image(divider($on-surface));
3764
background-size: 1px 1px, 1px 1px;
3765
}
3766
}
3767
&.horizontal > separator {
3769
background-repeat: repeat-y;
3770
&:dir(ltr) {
3772
margin: 0 -8px 0 0;
3773
padding: 0 8px 0 0;
3774
background-position: left;
3775
}
3776
&:dir(rtl) {
3778
margin: 0 0 0 -8px;
3779
padding: 0 0 0 8px;
3780
background-position: right;
3781
}
3782
&.wide {
3784
margin: 0;
3785
padding: 0;
3786
background-repeat: repeat-y, repeat-y;
3787
background-position: left, right;
3788
}
3789
}
3790
&.vertical > separator {
3792
margin: 0 0 -8px 0;
3793
padding: 0 0 8px 0;
3794
background-repeat: repeat-x;
3795
background-position: top;
3796
&.wide {
3798
margin: 0;
3799
padding: 0;
3800
background-repeat: repeat-x, repeat-x;
3801
background-position: bottom, top;
3802
}
3803
}
3804
}
3805
/**
3807
* GtkInfoBar
3808
*/
3809
infobar {
3811
border-style: none;
3812
&.info,
3814
&.question {
3815
border-bottom: 1px solid divider($on-surface);
3816
background-color: $base;
3817
button {
3819
@extend %button-flat;
3820
&.text-button:not(:disabled) {
3822
color: $primary;
3823
@include ink-color($primary);
3824
}
3825
}
3826
}
3827
&.warning {
3829
background-color: $warning;
3830
color: $on-warning;
3831
button.flat {
3833
color: $on-warning;
3834
@include ink-color($on-warning);
3835
}
3836
selection {
3838
}
3839
*:link {
3841
color: $on-warning;
3842
}
3843
}
3844
&.error {
3846
background-color: $error;
3847
color: $on-error;
3848
button.flat {
3850
color: $on-error;
3851
@include ink-color($on-error);
3852
}
3853
selection {
3855
}
3856
*:link {
3858
color: $on-error;
3859
}
3860
}
3861
// Remove ugly hard-coded padding
3863
button label {
3864
margin: 0 -4px;
3865
}
3866
}
3867
/**
3869
* Tooltips
3870
*/
3871
tooltip {
3873
&.background {
3874
// background-color needs to be set this way otherwise it gets drawn twice
3875
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3876
background-color: $tooltip;
3877
color: $on-tooltip;
3878
}
3879
// padding: 4px; /* not working */
3881
border-radius: $corner-radius;
3882
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3883
&:not(.csd):not(.unity-csd) {
3885
// border: 1px solid divider($on-surface);
3886
// border-radius: $corner-radius + 1px;
3887
// background-clip: $background-clip-extra;
3888
}
3889
// FIXME: we need a border or tooltips vanish on black background.
3891
decoration {
3892
background-color: transparent;
3893
}
3894
> box {
3896
margin: -6px; // Remove hard-coded 6px margin
3897
min-height: 32px - 4px * 2;
3898
padding: 4px 8px;
3899
}
3900
.dim-label {
3902
color: hint($on-tooltip);
3903
}
3904
* {
3906
// workaround for Eclipse.
3907
// do not include any declaration here.
3908
}
3909
}
3910
/**
3912
* Color Chooser
3913
*/
3914
colorswatch {
3916
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3917
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3918
// applied to the overlay box.
3919
// base color corners rounding
3921
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3922
// sports a bigger radius.
3923
// nth-child is needed by the custom color strip.
3924
&.top {
3926
border-top-left-radius: $corner-radius + .5px;
3927
border-top-right-radius: $corner-radius + .5px;
3928
overlay {
3930
border-top-left-radius: $corner-radius;
3931
border-top-right-radius: $corner-radius;
3932
}
3933
}
3934
&.bottom {
3936
border-bottom-left-radius: $corner-radius + .5px;
3937
border-bottom-right-radius: $corner-radius + .5px;
3938
overlay {
3940
border-bottom-left-radius: $corner-radius;
3941
border-bottom-right-radius: $corner-radius;
3942
}
3943
}
3944
&.left,
3946
&:first-child:not(.top) {
3947
border-top-left-radius: $corner-radius + .5px;
3948
border-bottom-left-radius: $corner-radius + .5px;
3949
overlay {
3951
border-top-left-radius: $corner-radius;
3952
border-bottom-left-radius: $corner-radius;
3953
}
3954
}
3955
&.right,
3957
&:last-child:not(.bottom) {
3958
border-top-right-radius: $corner-radius + .5px;
3959
border-bottom-right-radius: $corner-radius + .5px;
3960
overlay {
3962
border-top-right-radius: $corner-radius;
3963
border-bottom-right-radius: $corner-radius;
3964
}
3965
}
3966
&.dark {
3968
color: $on-dark;
3969
}
3970
&.light {
3972
color: $on-light;
3973
}
3974
overlay {
3976
transition: $transition-shadow;
3977
box-shadow: $shadow-z1;
3978
&:drop(active),
3980
&:hover {
3981
box-shadow: $shadow-z3;
3982
}
3983
}
3984
&#add-color-button {
3986
border-radius: $corner-radius $corner-radius 0 0;
3987
color: $on-surface;
3988
&:only-child {
3990
border-radius: $corner-radius;
3991
}
3992
overlay {
3994
background-color: $surface;
3995
}
3996
}
3997
&:disabled {
3999
opacity: .5;
4000
overlay {
4002
box-shadow: none;
4003
}
4004
}
4005
row:selected & {
4007
}
4008
&#editor-color-sample {
4010
border-radius: $corner-radius + .5px;
4011
overlay {
4013
border-radius: $corner-radius;
4014
&:hover {
4016
// box-shadow: $shadow-z1;
4017
}
4018
}
4019
}
4020
}
4021
// colorscale popup
4023
colorchooser .popover.osd {
4024
transition: $transition-shadow;
4025
border-radius: $corner-radius;
4026
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4027
background-color: $surface;
4028
&:backdrop {
4030
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4031
}
4032
}
4033
/**
4035
* Misc
4036
*/
4037
// content view (grid/list)
4039
.content-view {
4040
background-color: $background;
4041
&:hover {
4043
// -gtk-icon-effect: highlight;
4044
}
4045
rubberband,
4047
.rubberband {
4048
@extend rubberband;
4049
}
4050
}
4051
.scale-popup {
4053
.osd & {
4054
// @extend %osd;
4055
button.flat { // FIXME: quick hack, redo properly
4057
}
4058
}
4059
button { // +/- buttons on GtkVolumeButton popup
4061
}
4062
}
4063
/**
4065
* Window Decorations
4066
*/
4067
decoration {
4069
transition: $transition-shadow;
4070
border-radius: $corner-radius $corner-radius 0 0;
4071
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4072
// FIXME rationalize shadows
4074
// this is used for the resize cursor area
4076
margin: 8px;
4077
&:backdrop {
4079
// the transparent shadow here is to enforce that the shadow extents don't
4080
// change when we go to backdrop, to prevent jumping windows.
4081
// The biggest shadow should be in the same order then in the active state
4082
// or the jumping will happen during the transition.
4083
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4084
}
4085
.maximized &,
4087
.fullscreen &,
4088
.tiled &,
4089
.tiled-top &,
4090
.tiled-right &,
4091
.tiled-bottom &,
4092
.tiled-left & {
4093
border-radius: 0;
4094
}
4095
.popup & {
4097
box-shadow: none;
4098
}
4099
// server-side decorations as used by mutter
4101
.ssd & {
4102
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4103
}
4104
.csd.popup & {
4106
border-radius: $corner-radius;
4107
box-shadow: $shadow-z4;
4108
}
4109
tooltip.csd & {
4111
border-radius: $corner-radius;
4112
box-shadow: none;
4113
}
4114
messagedialog.csd & {
4116
border-radius: $corner-radius;
4117
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4118
&:backdrop {
4120
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4121
}
4122
}
4123
.solid-csd & {
4125
margin: 0;
4126
padding: 2px;
4127
border-radius: 0;
4128
box-shadow: none;
4129
box-shadow: inset 0 1px highlight($titlebar);
4130
background-color: $titlebar;
4131
&:backdrop {
4133
background-color: $titlebar-backdrop;
4134
}
4135
}
4136
}
4137
// Window Close button
4139
button.titlebutton {
4140
border-radius: $circular-radius;
4141
.selection-mode & {
4143
}
4144
}
4145
// catch all extend :)
4148
.monospace {
4150
font-family: monospace;
4151
}
4152
/**
4154
* Touch Copy & Paste
4155
*/
4156
// touch selection handlebars for the Popover.osd above
4158
cursor-handle {
4159
color: $primary;
4160
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4161
&.top:dir(ltr),
4163
&.bottom:dir(rtl) {
4164
-gtk-icon-transform: rotate(90deg);
4165
}
4166
&.bottom:dir(ltr),
4168
&.top:dir(rtl) {
4169
-gtk-icon-transform: unset;
4170
}
4171
&.insertion-cursor:dir(ltr),
4173
&.insertion-cursor:dir(rtl) {
4174
padding-top: 6px;
4175
-gtk-icon-transform: rotate(45deg);
4176
}
4177
}
4178
// Decouple the font of context menus from their entry/textview
4180
.context-menu {
4181
font: initial;
4182
}
4183
// shortcut window keys
4185
.keycap {
4186
min-width: 28px - 8px * 2;
4187
min-height: 28px - 2px;
4188
margin-top: 2px;
4189
padding-bottom: 2px;
4190
padding-left: 8px;
4191
padding-right: 8px;
4192
border: solid 1px divider($on-surface);
4194
border-radius: $corner-radius + 1px;
4195
box-shadow: inset 0 -2px divider($on-surface);
4196
background-color: $surface;
4197
color: $on-surface;
4198
font-size: smaller;
4199
}
4200
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4202
// caret-color: $primary;
4203
}
4204
stackswitcher button.text-button { // FIXME aggregate with buttons
4206
min-width: 100px;
4207
}
4208
stackswitcher button.circular,
4210
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4211
min-width: $medium-size;
4212
min-height: $medium-size;
4213
padding: 0;
4214
}
4215
/**
4217
* App Icons
4218
*/
4219
// Outline for low res icons
4221
.lowres-icon {
4222
// -gtk-icon-shadow: none;
4223
}
4224
// Drapshadow for large icons
4226
.icon-dropshadow {
4227
// -gtk-icon-shadow: none;
4228
}
4229
/**
4231
* Emoji
4232
*/
4233
popover.emoji-picker {
4235
padding: 0;
4236
entry {
4238
border-bottom: 1px solid divider($on-surface);
4239
border-image: none;
4240
border-radius: 0;
4241
box-shadow: none;
4242
background-color: transparent;
4243
}
4244
scrolledwindow {
4246
border-bottom: 1px solid divider($on-surface);
4247
}
4248
}
4249
button.emoji-section {
4251
margin: 4px;
4252
&:checked {
4254
background-color: overlay("activated", $primary);
4255
color: $primary;
4256
@include ink-color($primary);
4257
}
4258
&:not(:last-child) {
4260
margin-right: 0;
4261
}
4262
}
4263
popover.emoji-picker .emoji {
4265
min-width: 3em;
4266
min-height: 3em;
4267
padding: 0 8px;
4268
// font-size: larger;
4269
widget {
4271
transition: $transition;
4272
border-radius: $corner-radius;
4273
&:hover {
4275
background-color: overlay("hover", $on-surface);
4276
}
4277
}
4278
}
4279
popover.emoji-completion {
4281
padding: 8px 0;
4282
arrow {
4284
border: none;
4285
background: none;
4286
}
4287
.emoji-completion-row {
4289
min-height: $menuitem-size;
4290
padding: 0 12px;
4291
}
4292
.emoji:hover {
4294
background-color: overlay("hover", $on-surface);
4295
}
4296
}
4297