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-checked;
35
}
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
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: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px $overlay-hover;
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px rgba($primary, 0.08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
}
112
border {
114
background-color: $base-alt;
115
color: $text2; // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: on(dark);
126
text-shadow: $text-shadow;
127
}
128
.rubberband,
130
rubberband {
131
border: 1px solid on(dark, primary);
132
background-color: rgba(on(dark, primary), 0.3);
133
}
134
flowbox {
136
rubberband {
137
@extend rubberband;
138
}
139
flowboxchild {
141
padding: 4px;
142
border-radius: $corner-radius;
143
&:selected {
145
@extend %selected_items;
146
}
147
}
148
}
149
.content-view .tile {
151
// margin: 2px;
152
// padding: 0;
153
// border-radius: 0;
154
// background-color: black;
155
&:selected {
157
background-color: transparent;
158
}
159
}
160
label {
162
caret-color: currentColor; // this shouldn't be needed.
163
&.separator {
165
color: $text2;
166
}
167
selection {
169
@extend %selected_items;
170
}
171
&:disabled {
173
color: $text-disabled;
174
selection {
176
// @extend %selected_items:disabled;
177
}
178
headerbar &,
180
menuitem &,
181
tab &,
182
button & {
183
color: inherit;
184
}
185
}
186
&.osd {
188
border-radius: $corner-radius;
189
background-color: $tooltip;
190
color: on($tooltip);
191
}
192
}
193
.dim-label {
195
color: $text2;
196
}
197
assistant {
199
.sidebar {
200
padding: 4px 0;
201
// background-color: $base;
202
}
203
.sidebar label {
205
min-height: $medium-size;
206
padding: 0 12px;
207
color: $text-disabled;
208
font-weight: 500;
209
&.highlight {
211
color: $text;
212
}
213
}
214
}
215
%osd,
217
.osd {
218
// opacity: .9;
219
}
220
/*********************
223
* Spinner Animation *
224
*********************/
225
@keyframes spin {
226
to {
227
-gtk-icon-transform: rotate(1turn);
228
}
229
}
230
spinner {
232
background: none;
233
opacity: 0; // non spinning spinner makes no sense
234
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
235
&:checked {
237
opacity: 1;
238
animation: spin 1s linear infinite;
239
&:disabled { opacity: 0.5; }
241
}
242
}
243
/****************
246
* Text Entries *
247
****************/
248
%entry,
249
entry {
250
min-height: $medium-size;
251
padding: 0 8px;
252
border-radius: $corner-radius $corner-radius 0 0;
253
caret-color: currentColor; // this shouldn't be needed.
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($text2);
283
color: $text2;
284
&:hover,
286
&:active {
287
color: $text;
288
}
289
&:disabled {
291
color: $text-disabled;
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
@extend %selected_items;
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: 2px -8px;
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: on($color, text2);
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: on($color, text-disabled);
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;
418
color: $text;
419
&:hover {
421
background-image: image($overlay-hover);
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: $text2;
445
}
446
}
447
/***********
450
* Buttons *
451
***********/
452
// 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: $text;
485
font-weight: 500;
486
@extend %ripple;
488
@include raised-ink-color($text);
489
&:disabled {
491
box-shadow: none;
492
background-color: $fill;
493
color: $text-disabled;
494
}
495
&:checked {
497
background-color: mix(rgba($text, 1), $surface, percentage($overlay-checked-opacity));
498
&:disabled {
500
box-shadow: inset 0 0 0 9999px $overlay-checked;
501
background-color: $fill;
502
color: $text-disabled;
503
}
504
}
505
&.text-button {
507
min-width: 64px - 16px * 2;
508
padding-left: 16px;
509
padding-right: 16px;
510
}
511
&.image-button {
513
min-width: 24px;
514
padding: ($medium-size - 24px) / 2;
515
border-radius: $circular-radius;
516
}
517
// NOTE: Some image-only buttons use this as well
519
&.text-button.image-button {
520
min-width: 24px;
521
padding: ($medium-size - 24px) / 2;
522
border-radius: $corner-radius;
523
label {
525
&:first-child {
526
margin-left: 16px - ($medium-size - 24px) / 2;
527
}
528
&:last-child {
530
margin-right: 16px - ($medium-size - 24px) / 2;
531
}
532
}
533
image:not(:only-child) {
535
margin: 0 (24px - 16px) / 2;
536
}
537
}
538
.linked:not(.vertical) > & {
540
@extend %linked;
541
&.image-button:not(.text-button) {
543
@extend %linked-image-button;
544
}
545
}
546
.linked.vertical > & {
548
@extend %linked-vertical;
549
&.image-button:not(.text-button) {
551
@extend %linked-vertical-image-button;
552
}
553
}
554
}
555
%button-flat-basic {
557
background-color: transparent;
558
@include ink-color($text2);
559
&:disabled {
561
background-color: transparent;
562
color: $text2-disabled;
563
}
564
}
565
%button-flat-activatable {
567
@extend %button-flat-basic;
568
&:checked {
570
background-color: $overlay-checked;
571
color: $text;
572
&:disabled {
574
color: $text-disabled;
575
}
576
}
577
}
578
%button-flat,
580
button.flat {
581
@extend %button-flat-activatable;
582
&.text-button {
584
min-width: 64px - 8px * 2;
585
padding-left: 8px;
586
padding-right: 8px;
587
}
588
&.text-button.image-button {
590
min-width: 24px;
591
padding: ($medium-size - 24px) / 2;
592
label {
594
&:first-child {
595
margin-left: 12px - ($medium-size - 24px) / 2;
596
}
597
&:last-child {
599
margin-right: 12px - ($medium-size - 24px) / 2;
600
}
601
}
602
}
603
.linked:not(.vertical) > &,
605
.linked.vertical > & {
606
&:not(:only-child) { // specificity bump
607
border-radius: $corner-radius;
608
&.image-button:not(.text-button) {
610
border-radius: $circular-radius;
611
}
612
}
613
}
614
}
615
button {
617
// big standalone buttons like in Documents pager
618
&.osd {
619
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
620
&.image-button {
622
padding: ($large-size - 24px) / 2;
623
}
624
&:disabled {
626
opacity: 0;
627
}
628
}
629
// overlay / OSD style
631
@at-root %osd_button,
632
.osd & {
633
}
634
// Suggested and Destructive Action buttons
636
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
637
&#{$class} {
638
background-color: $color;
639
color: on($color);
640
@include raised-ink-color(on($color));
641
&:disabled {
643
box-shadow: none;
644
background-color: $fill;
645
color: $text-disabled;
646
}
647
&:checked {
649
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
650
}
651
&.flat {
653
background-color: transparent;
654
@include ink-color($color);
655
&:disabled {
657
box-shadow: none;
658
background-color: transparent;
659
color: $text2-disabled;
660
}
661
&:checked {
663
background-color: rgba($color, $overlay-checked-opacity);
664
}
665
}
666
.osd & {
668
}
669
}
670
}
671
.stack-switcher > & {
673
// to position the needs attention dot, padding is added to the button
674
// child, a label needs just lateral padding while an icon needs vertical
675
// padding added too.
676
> label {
678
margin: 0 -6px;
679
padding: 0 6px;
680
}
681
> image {
683
margin: -3px -6px;
684
padding: 3px 6px;
685
}
686
&.needs-attention {
688
> label,
689
> image {
690
@extend %needs-attention;
691
}
692
&:checked {
694
> label,
695
> image {
696
animation: none;
697
background-image: none;
698
}
699
}
700
}
701
}
702
// hide separators
704
&.font,
705
&.file {
706
separator {
707
@extend %hide_separators;
708
}
709
}
710
&.font {
712
> box > box > label {
713
// font-weight: bold;
714
}
715
}
716
// inline-toolbar buttons
718
.inline-toolbar & {
719
// @extend %button-flat;
720
&:not(.text-button) {
722
border-radius: $circular-radius;
723
}
724
}
725
.primary-toolbar & {
727
-gtk-icon-shadow: none; // tango icons don't need shadows
728
}
729
&.close,
731
&.circular { // The Bloody Circul Button
732
border-radius: $circular-radius;
733
label {
735
// padding: 0;
736
}
737
}
738
}
739
%button-small {
741
min-height: $small-size;
742
min-width: $small-size;
743
padding: 0;
744
border-radius: $circular-radius;
745
}
746
%needs-attention {
748
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
749
background-repeat: no-repeat;
750
background-position: right 3px;
751
background-size: 6px 6px;
752
&:dir(rtl) {
754
background-position: left 3px;
755
}
756
}
757
// all the following is for the +|- buttons on inline toolbars, that way
759
// should really be deprecated...
760
.inline-toolbar toolbutton > button {
761
}
762
// More inline toolbar buttons
764
toolbar.inline-toolbar toolbutton {
765
&:not(:first-child) > button.flat {
766
// @extend %linked-not-first-child;
767
}
768
&:not(:last-child) > button.flat {
770
// @extend %linked-not-last-child;
771
}
772
}
773
%linked-not-first-child {
775
border-top-left-radius: 0;
776
border-bottom-left-radius: 0;
777
}
778
%linked-not-last-child {
780
border-top-right-radius: 0;
781
border-bottom-right-radius: 0;
782
}
783
%linked {
785
&:not(:first-child) {
786
@extend %linked-not-first-child;
787
}
788
&:not(:last-child) {
790
@extend %linked-not-last-child;
791
}
792
}
793
%linked-vertical-not-first-child {
795
border-top-left-radius: 0;
796
border-top-right-radius: 0;
797
}
798
%linked-vertical-not-last-child {
800
border-bottom-left-radius: 0;
801
border-bottom-right-radius: 0;
802
}
803
%linked-vertical {
805
&:not(:first-child) {
806
@extend %linked-vertical-not-first-child;
807
}
808
&:not(:last-child) {
810
@extend %linked-vertical-not-last-child;
811
}
812
}
813
%linked-image-button {
815
&:first-child {
816
border-top-left-radius: $corner-radius;
817
border-bottom-left-radius: $corner-radius;
818
}
819
&:last-child {
821
border-top-right-radius: $corner-radius;
822
border-bottom-right-radius: $corner-radius;
823
}
824
&:only-child {
826
border-radius: $circular-radius;
827
}
828
}
829
%linked-vertical-image-button {
831
&:first-child {
832
border-top-left-radius: $corner-radius;
833
border-top-right-radius: $corner-radius;
834
}
835
&:last-child {
837
border-bottom-left-radius: $corner-radius;
838
border-bottom-right-radius: $corner-radius;
839
}
840
&:only-child {
842
border-radius: $circular-radius;
843
}
844
}
845
/* menu buttons */
847
modelbutton.flat,
848
.menuitem.button.flat {
849
min-height: $menuitem-size;
850
padding: 0 8px;
851
border-radius: $corner-radius;
852
@extend %ripple;
854
@include ink-color($text, $fg: false);
855
&:selected {
857
@extend %selected_items;
858
}
859
}
860
modelbutton.flat arrow {
862
&.left {
863
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
864
}
865
&.right {
867
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
868
}
869
}
870
button.color {
872
min-height: $small-size;
873
min-width: $small-size;
874
padding: $container-padding;
875
colorswatch:only-child {
877
&,
878
overlay {
879
// border-radius: 0;
880
}
881
}
882
}
883
/*********
886
* Links *
887
*********/
888
*:link {
889
color: $primary;
890
}
891
*:visited {
893
color: $visited;
894
}
895
button.link {
897
&:link {
898
@include ink-color($primary);
899
}
900
&:visited {
902
@include ink-color($visited);
903
}
904
> label {
906
text-decoration-line: underline;
907
}
908
}
909
/*****************
911
* GtkSpinButton *
912
*****************/
913
spinbutton {
914
&:not(.vertical) {
915
// in this horizontal configuration, the whole spinbutton
916
// behaves as the entry, so we extend the entry styling
917
// and nuke the style on the internal entry
918
@extend %entry;
919
padding: 0;
921
entry {
923
min-width: $large-size - 8px * 2;
924
// reset all the other props since the spinbutton node is styled here
925
margin: 0;
926
border-image: none;
927
border-radius: 0;
928
box-shadow: none;
929
background-color: transparent;
930
}
931
button {
933
@extend %button-flat-basic;
934
@extend %button-small;
935
// margin: $container-padding;
937
border: solid $container-padding transparent;
938
// Remove unwanted focus indicator
940
&:focus:not(:hover):not(:active) {
941
box-shadow: inset 0 0 0 9999px transparent;
942
}
943
&.up:dir(ltr),
945
&.down:dir(rtl) {
946
margin-left: -$container-padding / 2;
947
}
948
&.up:dir(rtl),
950
&.down:dir(ltr) {
951
margin-right: -$container-padding / 2;
952
}
953
}
954
}
955
// OSD horizontal
957
.osd &:not(.vertical) {
958
}
959
// Vertical
961
&.vertical {
962
// in the vertical configuration, we treat the spinbutton
963
// as a box, and tweak the style of the entry in the middle
964
// so that it's linked
965
// FIXME: this should not be set at all, but otherwise it gets the wrong
967
// color
968
&:disabled {
969
color: $text-disabled;
970
}
971
entry {
973
@extend %entry_raised;
974
min-height: $medium-size;
976
min-width: $large-size;
977
padding: 0;
978
}
979
button {
981
min-height: $medium-size;
982
min-width: $large-size;
983
padding: 0;
984
@extend %button-flat-basic;
986
// Remove unwanted focus indicator
988
&:focus:not(:hover):not(:active) {
989
box-shadow: inset 0 0 0 9999px transparent;
990
}
991
&.up {
993
border-radius: $corner-radius $corner-radius 0 0;
994
}
995
&.down {
997
border-radius: 0 0 $corner-radius $corner-radius;
998
}
999
}
1000
}
1001
// OSD vertical
1003
.osd &.vertical {
1004
}
1005
// Misc
1007
treeview &:not(.vertical) {
1008
min-height: 0;
1009
border-style: none;
1010
border-radius: 0;
1011
entry {
1013
min-height: 0;
1014
padding: 1px 2px;
1015
}
1016
}
1017
}
1018
/**************
1021
* ComboBoxes *
1022
**************/
1023
combobox {
1024
arrow {
1025
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1026
min-height: 16px;
1027
min-width: 16px;
1028
}
1029
// workaround for menuitem selection
1031
decoration {
1032
transition: none;
1033
}
1034
button.combo cellview {
1036
&:dir(ltr) {
1037
margin-left: 8px - ($medium-size - 16px) / 2;
1038
}
1039
&:dir(rtl) {
1041
margin-right: 8px - ($medium-size - 16px) / 2;
1042
}
1043
}
1044
menu {
1046
padding: 2px 0;
1047
menuitem {
1049
min-height: $medium-size - 2px * 2;
1050
padding: 0 8px;
1051
}
1052
// overflow arrows
1054
> arrow {
1055
&.top {
1056
margin-top: -2px;
1057
}
1058
&.bottom {
1060
margin-top: 2px * 2;
1061
margin-bottom: -2px * 3;
1062
}
1063
}
1064
}
1065
&.linked {
1067
button:nth-child(2) {
1068
&:dir(ltr) {
1069
@extend %linked-not-first-child;
1070
}
1071
&:dir(rtl) {
1073
@extend %linked-not-last-child;
1074
}
1075
}
1076
}
1077
> .linked:not(.vertical) > entry:not(:only-child) {
1079
border-radius: $corner-radius $corner-radius 0 0;
1080
&:first-child {
1082
margin-right: -$medium-size;
1083
padding-right: $medium-size;
1084
}
1085
&:last-child {
1087
margin-left: -$medium-size;
1088
padding-left: $medium-size;
1089
}
1090
}
1091
> .linked:not(.vertical) > button:not(:only-child) {
1093
@extend %button-flat-activatable;
1094
// @extend %button-small;
1095
min-height: 16px;
1097
min-width: 16px;
1098
margin: ($medium-size - $small-size) / 2;
1099
padding: ($small-size - 16px) / 2;
1100
border-radius: $circular-radius;
1101
}
1102
}
1103
// the combo is a composite widget so the way we do button linking doesn't
1105
// work, special case needed. See
1106
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1107
.linked:not(.vertical) > combobox {
1109
&:not(:first-child) > box > button.combo {
1110
@extend %linked-not-first-child;
1111
}
1112
&:not(:last-child) > box > button.combo {
1114
@extend %linked-not-last-child;
1115
}
1116
}
1117
.linked.vertical > combobox {
1119
&:not(:first-child) > box > button.combo {
1120
@extend %linked-vertical-not-first-child;
1121
}
1122
&:not(:last-child) > box > button.combo {
1124
@extend %linked-vertical-not-last-child;
1125
}
1126
}
1127
button.combo:only-child {
1129
border-radius: $corner-radius $corner-radius 0 0;
1130
font-weight: normal;
1131
@include entry(normal);
1133
&:focus {
1135
@include entry(focus);
1136
}
1137
&:drop(active),
1139
&:hover {
1140
@include entry(hover);
1141
}
1142
&:checked {
1144
@include entry(checked);
1145
}
1146
&:disabled {
1148
@include entry(disabled);
1149
}
1150
}
1151
/************
1154
* Toolbars *
1155
************/
1156
toolbar {
1157
-GtkWidget-window-dragging: true;
1158
padding: 2px;
1159
background-color: $background;
1160
button {
1162
@extend %button-flat;
1163
}
1164
// on OSD
1166
.osd & {
1167
background-color: transparent;
1168
}
1169
// stand-alone OSD toolbars
1171
&.osd {
1172
@extend %toolbar-osd;
1173
// positional classes for `attached` osd toolbars
1175
&.left,
1176
&.right,
1177
&.top,
1178
&.bottom {
1179
border-radius: 0;
1180
}
1181
&.bottom {
1183
box-shadow: none;
1184
background-color: transparent;
1185
background-image:
1186
linear-gradient(
1187
to bottom,
1188
transparent,
1189
rgba(black, .1) 30%,
1190
rgba(black, .2) 50%,
1191
rgba(black, .4)
1192
);
1193
}
1194
}
1195
// toolbar separators
1197
&.horizontal > separator {
1198
margin: 2px;
1199
}
1200
&.vertical > separator {
1202
margin: 2px;
1203
}
1204
&:not(.inline-toolbar):not(.osd) {
1206
scale,
1207
entry,
1208
spinbutton,
1209
button {
1210
margin: 2px;
1211
}
1212
.linked entry,
1214
.linked spinbutton,
1215
.linked button {
1216
&:not(:first-child) {
1217
margin-left: 0;
1218
}
1219
&:not(:last-child) {
1221
margin-right: 0;
1222
}
1223
}
1224
spinbutton {
1226
entry,
1227
button {
1228
margin: 0;
1229
}
1230
}
1231
switch {
1233
margin: 2px + $container-padding 2px;
1234
}
1235
}
1236
}
1237
%toolbar-osd {
1239
transition: $transition-shadow;
1240
padding: $container-padding;
1241
border-radius: $corner-radius;
1242
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1243
background-color: $surface;
1244
&:backdrop {
1246
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1247
}
1248
}
1249
// searchbar, location-bar & inline-toolbar
1251
.inline-toolbar {
1252
padding: $container-padding;
1253
border-style: solid;
1254
border-width: 0 1px 1px;
1255
border-color: $divider;
1256
background-color: $base-alt;
1257
}
1258
searchbar > revealer > box,
1260
.location-bar {
1261
padding: $container-padding;
1262
border-style: solid;
1263
border-width: 0 0 1px;
1264
border-color: $divider;
1265
background-color: $background;
1266
background-clip: border-box;
1267
}
1268
searchbar > revealer > box {
1270
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1271
margin: -6px;
1272
padding: $container-padding;
1273
}
1274
/***************
1277
* Header bars *
1278
***************/
1279
.titlebar {
1280
transition: background-color $duration $ease-out, color $duration $ease-out;
1281
border-radius: $corner-radius $corner-radius 0 0;
1282
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1283
background-color: $titlebar;
1284
color: $titlebar-text;
1285
&:disabled {
1287
color: $titlebar-text-disabled;
1288
}
1289
&:backdrop {
1291
background-color: $titlebar-backdrop;
1292
color: $titlebar-text2;
1293
&:disabled {
1295
color: $titlebar-text2-disabled;
1296
}
1297
}
1298
.title {
1300
padding-left: 12px;
1301
padding-right: 12px;
1302
font-weight: bold;
1303
}
1304
.subtitle {
1306
padding-left: 12px;
1307
padding-right: 12px;
1308
font-size: smaller;
1309
}
1310
.subtitle,
1312
.dim-label {
1313
transition: color $duration $ease-out;
1314
color: $titlebar-text2;
1315
&:backdrop {
1317
color: $titlebar-text-disabled;
1318
}
1319
}
1320
// Don't draw titlebar above titlebar
1322
.titlebar {
1323
background-color: transparent;
1324
box-shadow: none;
1325
}
1326
// The separator for split headerbars
1328
headerbar + separator {
1329
background-color: $titlebar-divider;
1330
}
1331
entry {
1333
box-shadow: inset 0 -1px $titlebar-stroke;
1334
background-color: $titlebar-entry-fill;
1335
color: $titlebar-text;
1336
&:disabled {
1338
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1339
background-color: $titlebar-entry-fill;
1340
color: $titlebar-text-disabled;
1341
}
1342
image {
1344
color: $titlebar-text2;
1345
&:hover,
1347
&:active {
1348
color: $titlebar-text;
1349
}
1350
&:disabled {
1352
color: $titlebar-text-disabled;
1353
}
1354
}
1355
}
1356
.linked:not(.vertical) > entry:not(:only-child) {
1358
border-radius: $corner-radius $corner-radius 0 0;
1359
}
1360
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1362
@extend %button-flat;
1363
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1365
$titlebar-indicator 0%,
1366
transparent 0%)
1367
0 0 0 / 0 0 0px;
1368
@include ink-color($titlebar-text2);
1370
&:disabled {
1372
color: $titlebar-text2-disabled;
1373
}
1374
@at-root %titlebar-button-checked,
1376
&:checked {
1377
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1378
$titlebar-indicator 100%,
1379
transparent 0%)
1380
0 0 2 / 0 0 2px;
1381
background-color: transparent;
1382
color: $titlebar-text;
1383
&:disabled {
1385
background-color: transparent;
1386
color: $titlebar-text-disabled;
1387
}
1388
}
1389
&:backdrop {
1391
color: $titlebar-text-disabled;
1392
&:disabled {
1394
color: $titlebar-text2-disabled;
1395
}
1396
&:checked {
1398
color: $titlebar-text2;
1399
&:disabled {
1401
color: $titlebar-text2-disabled;
1402
}
1403
}
1404
}
1405
}
1406
button.suggested-action, button.destructive-action {
1408
&:disabled {
1409
background-color: $titlebar-fill;
1410
color: $titlebar-text-disabled;
1411
}
1412
}
1413
// FIXME: Ugly overriding
1415
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1416
min-width: 120px - 8px * 2;
1417
}
1418
// FIXME: Ugly overriding
1420
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1421
min-width: 0;
1422
padding-left: ($medium-size - 24px) / 2;
1423
padding-right: ($medium-size - 24px) / 2;
1424
}
1425
&.selection-mode {
1427
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1428
// but let's keep it for backwards compatibility.
1429
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1430
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1431
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1432
background-color: $primary;
1433
color: on($primary);
1434
&:backdrop {
1436
color: on($primary, text2);
1437
}
1438
.subtitle:link {
1440
color: on($primary);
1441
}
1442
button:not(.suggested-action):not(.destructive-action) {
1444
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1445
currentColor 0%,
1446
transparent 0%)
1447
0 0 0 / 0 0 0px;
1448
color: on($primary);
1449
&:disabled {
1451
color: on($primary, text-disabled);
1452
}
1453
&:checked {
1455
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1456
currentColor 100%,
1457
transparent 0%)
1458
0 0 2 / 0 0 2px;
1459
color: on($primary);
1460
&:disabled {
1462
color: on($primary, text-disabled);
1463
}
1464
}
1465
&:backdrop {
1467
color: on($primary, text2);
1468
&:disabled {
1470
color: on($primary, text2-disabled);
1471
}
1472
&:checked {
1474
color: on($primary, text2);
1475
&:disabled {
1477
color: on($primary, text2-disabled);
1478
}
1479
}
1480
}
1481
}
1482
.selection-menu {
1484
padding-left: 16px;
1485
padding-right: 16px;
1486
arrow {
1488
-GtkArrow-arrow-scaling: 1;
1489
}
1490
.arrow {
1492
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1493
}
1494
}
1495
}
1496
.selection-mode {
1498
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1499
background-color: $primary;
1500
}
1501
// squared corners when the window is maximized, tiled, or fullscreen
1503
.tiled &,
1504
.tiled-top &,
1505
.tiled-right &,
1506
.tiled-bottom &,
1507
.tiled-left &,
1508
.maximized &,
1509
.fullscreen & {
1510
border-radius: 0;
1511
box-shadow: $shadow-z1;
1512
}
1513
&.default-decoration {
1515
min-height: $small-size;
1516
padding: $container-padding;
1517
box-shadow: inset 0 1px highlight($titlebar);
1518
.tiled &,
1520
.maximized &,
1521
.fullscreen & {
1522
box-shadow: none;
1523
}
1524
button.titlebutton {
1526
min-height: $small-size;
1527
min-width: $small-size;
1528
margin: 0;
1529
padding: 0;
1530
}
1531
// workaround for non-animatable buttons
1533
.background:not(.csd) & button.titlebutton:active {
1534
background-size: 1000% 1000%;
1535
}
1536
}
1537
.solid-csd & {
1539
&:dir(rtl), &:dir(ltr) { // specificity bump
1540
border-radius: 0;
1541
box-shadow: $shadow-z1; // just remove the highlight
1542
}
1543
}
1544
}
1545
headerbar {
1547
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1548
min-height: $large-size;
1549
padding: 0 $container-padding;
1550
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1552
entry,
1553
spinbutton,
1554
button {
1555
margin-top: $container-padding;
1556
margin-bottom: $container-padding;
1557
}
1558
separator.titlebutton {
1560
margin-top: $large-size / 4;
1561
margin-bottom: $large-size / 4;
1562
background-color: $titlebar-divider;
1563
}
1564
switch {
1566
margin-top: ($large-size - 24px) / 2;
1567
margin-bottom: ($large-size - 24px) / 2;
1568
}
1569
// reset button margins of the spinbutton
1571
spinbutton button {
1572
margin-top: 0;
1573
margin-bottom: 0;
1574
}
1575
// FIXME: This is a hacky workaround.
1577
.entry-tag {
1578
margin-top: 5px;
1579
margin-bottom: 5px;
1580
}
1581
}
1582
// Development versions of apps to use a differently styled headerbar
1584
window.devel .titlebar:not(.selection-mode) {
1585
}
1586
/************
1589
* Pathbars *
1590
************/
1591
%pathbar_button,
1592
.path-bar.linked:not(.vertical) > button {
1593
@extend %button-flat-basic;
1594
padding-left: ($medium-size - 24px) / 2;
1596
padding-right: ($medium-size - 24px) / 2;
1597
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1598
$primary 0%,
1599
transparent 0%)
1600
0 0 0 / 0 0 0px;
1601
border-radius: $corner-radius;
1602
&:checked {
1604
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1605
$primary 100%,
1606
transparent 0%)
1607
0 0 2 / 0 0 2px;
1608
color: $text;
1609
&,
1611
&:disabled {
1612
background-color: transparent;
1613
}
1614
}
1615
label:not(:only-child) {
1617
&:first-child {
1618
margin-left: 0;
1619
}
1620
&:last-child {
1622
margin-right: 0;
1623
}
1624
}
1625
&.text-button {
1627
min-width: 0;
1628
}
1629
&.slider-button {
1631
padding-left: (24px - 16px) / 2;
1632
padding-right: (24px - 16px) / 2;
1633
}
1634
}
1635
/**************
1638
* Tree Views *
1639
**************/
1640
treeview.view {
1641
@at-root * {
1642
-GtkTreeView-horizontal-separator: 4;
1643
-GtkTreeView-grid-line-width: 1;
1644
-GtkTreeView-grid-line-pattern: '';
1645
-GtkTreeView-tree-line-width: 1;
1646
-GtkTreeView-tree-line-pattern: '';
1647
-GtkTreeView-expander-size: 16;
1648
}
1649
border-left-color: $stroke; // this is actually the tree lines color,
1651
border-top-color: $divider; // while this is the grid lines color, better then nothing
1652
// FIXME: Avoid transparency background-color being slightly darker
1654
&:selected {
1655
background-color: $base;
1656
background-image: image($overlay-selected);
1657
}
1658
// to avoid borders being overridden by the previously set props
1660
rubberband {
1661
@extend rubberband;
1662
}
1663
&:hover,
1665
&:selected {
1666
border-radius: 0;
1667
}
1668
&.separator {
1670
min-height: 1px + 2px * 2;
1671
color: $divider;
1672
}
1673
&:drop(active) {
1675
// FIXME: box-shadow, background-color and background-image are not available here.
1676
border-style: solid none;
1677
border-width: 9999px;
1678
border-color: $overlay-hover;
1679
&.after {
1681
border-top-style: none;
1682
}
1683
&.before {
1685
border-bottom-style: none;
1686
}
1687
}
1688
&.expander {
1690
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1691
-gtk-icon-transform: rotate(-90deg);
1692
&:dir(rtl) {
1694
-gtk-icon-transform: rotate(90deg);
1695
}
1696
&:checked {
1698
-gtk-icon-transform: unset;
1699
}
1700
color: $text2;
1702
&:hover,
1704
&:active {
1705
color: $text;
1706
}
1707
&:disabled {
1709
color: $text2-disabled;
1710
}
1711
}
1712
&.progressbar { // progress bar in treeviews
1714
border-bottom: $bar-size solid $primary;
1715
box-shadow: none;
1716
background-color: transparent;
1717
background-image: none;
1718
&:selected:hover {
1720
box-shadow: none;
1721
}
1722
}
1723
&.trough { // progress bar trough in treeviews
1725
border-bottom: $bar-size solid $stroke-disabled;
1726
box-shadow: none;
1727
background-color: transparent;
1728
background-image: none;
1729
&:selected:hover {
1731
box-shadow: none;
1732
}
1733
}
1734
header {
1736
button {
1737
padding: 2px 6px;
1738
border-style: none solid solid none;
1739
border-width: 1px;
1740
border-color: $divider;
1741
border-radius: 0;
1742
background-clip: border-box;
1743
color: $text2;
1744
@include ink-color($text2);
1745
@include list-item;
1746
&:disabled {
1748
color: $text2-disabled;
1749
}
1750
&,
1752
&:disabled {
1753
background-color: $base;
1754
}
1755
&:last-child {
1757
border-right-style: none;
1758
}
1759
}
1760
}
1761
button.dnd,
1763
header.button.dnd { // for treeview-like derive widgets
1764
padding: 2px 6px;
1765
border-style: none solid solid;
1766
border-width: 1px;
1767
border-color: $divider;
1768
border-radius: 0;
1769
box-shadow: none;
1770
background-color: $base;
1771
background-clip: border-box;
1772
color: $primary;
1773
}
1774
// see tests/testaccel to test
1776
acceleditor > label {
1777
background-color: $primary;
1778
}
1779
}
1780
/*********
1783
* Menus *
1784
*********/
1785
menubar,
1786
.menubar {
1787
-GtkWidget-window-dragging: true;
1788
padding: 0;
1789
// box-shadow: inset 0 -1px $divider;
1790
background-color: $titlebar;
1791
color: $titlebar-text;
1792
&:backdrop {
1794
background-color: $titlebar-backdrop;
1795
color: $titlebar-text2;
1796
}
1797
.csd & {
1799
transition: $transition;
1800
}
1801
> menuitem {
1803
transition: $transition;
1804
min-height: 20px;
1805
padding: 4px 8px;
1806
color: $titlebar-text2;
1807
&:hover { // Seems like it :hover even with keyboard focus
1809
transition: none;
1810
background-color: $overlay-checked;
1811
color: $titlebar-text;
1812
}
1813
&:disabled {
1815
color: $titlebar-text2-disabled;
1816
}
1817
}
1818
}
1819
// Needed to make the border-radius of menus work
1821
// otherwise the background bleeds out of the menu edges
1822
.background.popup {
1823
background-color: transparent;
1824
}
1825
menu,
1827
.menu,
1828
.context-menu {
1829
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1830
padding: 4px 0;
1831
box-shadow: inset 0 1px highlight($surface);
1832
background-color: $surface;
1833
background-clip: border-box;
1834
border: 1px solid $divider; // adds borders in a non composited env
1835
.csd & {
1837
border: none; // axes borders in a composited env
1838
border-radius: $corner-radius;
1839
}
1840
menuitem {
1842
transition: background-color $duration $ease-out;
1843
min-height: 20px;
1844
min-width: 40px;
1845
padding: 4px 8px;
1846
color: $text;
1847
font: initial;
1848
text-shadow: none;
1849
&:hover {
1851
transition: none;
1852
background-color: $overlay-hover;
1853
}
1854
&:disabled {
1856
color: $text-disabled;
1857
}
1858
// submenu indicators
1860
arrow {
1861
min-height: 16px;
1862
min-width: 16px;
1863
color: $text2;
1864
&:disabled {
1866
color: $text2-disabled;
1867
}
1868
&:dir(ltr) {
1870
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1871
margin-left: 8px;
1872
}
1873
&:dir(rtl) {
1875
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1876
margin-right: 8px;
1877
}
1878
}
1879
// avoids labels color being overridden, see
1881
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1882
label {
1883
&:dir(rtl),
1884
&:dir(ltr) {
1885
// color: inherit;
1886
}
1887
}
1888
}
1889
// overflow arrows
1891
> arrow {
1892
min-height: 16px;
1893
min-width: 16px;
1894
padding: 4px;
1895
background-color: $surface;
1896
color: $text2;
1897
&.top {
1899
margin-top: -4px;
1900
border-bottom: 1px solid $divider;
1901
border-radius: $corner-radius $corner-radius 0 0;
1902
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1903
}
1904
&.bottom {
1906
margin-top: 4px * 2;
1907
margin-bottom: -4px * 3;
1908
border-top: 1px solid $divider;
1909
border-radius: 0 0 $corner-radius $corner-radius;
1910
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1911
}
1912
&:hover {
1914
background-image: image($overlay-hover);
1915
}
1916
&:disabled {
1918
border-color: transparent;
1919
background-color: transparent;
1920
color: transparent;
1921
// color: $text2-disabled;
1922
}
1923
}
1924
separator {
1926
margin: 4px 0;
1927
}
1928
}
1929
menuitem {
1931
accelerator {
1932
color: $text2;
1933
}
1934
&:disabled accelerator {
1936
color: $text2-disabled;
1937
}
1938
}
1939
/************
1942
* Popovers *
1943
************/
1944
popover.background {
1945
transition: $transition-shadow;
1946
padding: 2px;
1947
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1948
background-color: $surface;
1949
&:backdrop {
1951
box-shadow: $shadow-z2;
1952
}
1953
&, .csd & {
1955
border-style: solid;
1956
border-width: 1px;
1957
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1958
border-radius: $corner-radius + 1px;
1959
}
1960
> stack {
1962
margin: -4px; // remove extra padding from menu style popovers
1963
}
1964
> toolbar {
1966
margin: -2px;
1967
}
1968
> list,
1970
> .view,
1971
> toolbar {
1972
border-style: none;
1973
box-shadow: none;
1974
background-color: transparent;
1975
}
1976
// FIXME: Use the popover color instead of transparent as a workaround for .view
1978
list,
1979
.view:not(:selected),
1980
toolbar {
1981
background-color: $surface;
1982
}
1983
&.touch-selection,
1985
&.magnifier,
1986
&.osd {
1987
// @extend %osd;
1988
}
1989
button:not(.suggested-action):not(.destructive-action) {
1991
// @extend %button-flat;
1992
}
1993
.linked:not(.vertical) > entry:not(:only-child) {
1995
// border-radius: $corner-radius $corner-radius 0 0;
1996
}
1997
&.menu button,
1999
button.model {
2000
@extend %button-flat;
2001
min-height: 32px;
2003
padding: 0 8px;
2004
border-radius: $corner-radius;
2005
&:checked {
2007
// color: $primary;
2008
}
2009
}
2010
separator {
2012
margin: 4px 0;
2013
}
2014
list separator {
2016
margin: 0;
2017
}
2018
}
2019
/*************
2021
* Notebooks *
2022
*************/
2023
notebook {
2024
frame > paned > & > header,
2025
&.frame > header {
2026
background-color: $base-alt;
2027
}
2028
&:focus tab:checked {
2030
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2031
}
2032
> header {
2034
border-width: 1px;
2035
border-color: $divider;
2036
background-color: $background;
2037
background-clip: border-box;
2038
&.top {
2040
border-bottom-style: solid;
2041
> tabs {
2043
margin-bottom: -1px;
2044
> tab {
2046
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2047
&:checked {
2049
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2050
}
2051
&.reorderable-page {
2053
border-image-width: 0 1px 2px;
2054
}
2055
}
2056
}
2057
}
2058
&.bottom {
2060
border-top-style: solid;
2061
> tabs {
2063
margin-top: -1px;
2064
> tab {
2066
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2067
&:checked {
2069
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2070
}
2071
&.reorderable-page {
2073
border-image-width: 2px 1px 0;
2074
}
2075
}
2076
}
2077
}
2078
&.left {
2080
border-right-style: solid;
2081
> tabs {
2083
margin-right: -1px;
2084
> tab {
2086
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2087
&:checked {
2089
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2090
}
2091
&.reorderable-page {
2093
border-image-width: 1px 2px 1px 0;
2094
}
2095
}
2096
}
2097
}
2098
&.right {
2100
border-left-style: solid;
2101
> tabs {
2103
margin-left: -1px;
2104
> tab {
2106
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2107
&:checked {
2109
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2110
}
2111
&.reorderable-page {
2113
border-image-width: 1px 0 1px 2px;
2114
}
2115
}
2116
}
2117
}
2118
&.top > tabs > arrow {
2120
@extend %notebook_vert_arrows;
2121
border-top-style: none;
2123
}
2124
&.bottom > tabs > arrow {
2126
@extend %notebook_vert_arrows;
2127
border-bottom-style: none;
2129
}
2130
@at-root %notebook_vert_arrows {
2132
padding-left: 4px;
2133
padding-right: 4px;
2134
&.down {
2136
margin-left: -8px;
2137
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2138
}
2139
&.up {
2141
margin-right: -8px;
2142
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2143
}
2144
}
2145
&.left > tabs > arrow {
2147
@extend %notebook_horz_arrows;
2148
border-left-style: none;
2150
}
2151
&.right > tabs > arrow {
2153
@extend %notebook_horz_arrows;
2154
border-right-style: none;
2156
}
2157
@at-root %notebook_horz_arrows {
2159
padding-top: 4px;
2160
padding-bottom: 4px;
2161
&.down {
2163
margin-top: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2165
}
2166
&.up {
2168
margin-bottom: -8px;
2169
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2170
}
2171
}
2172
> tabs > arrow {
2174
min-height: 16px;
2175
min-width: 16px;
2176
border-radius: 0;
2177
@extend %ripple;
2179
@include ink-color($text2);
2180
&:disabled {
2182
color: $text2-disabled;
2183
}
2184
}
2185
tab {
2187
transition: $transition,
2188
background-size 0ms,
2189
background-image 0ms;
2190
min-height: $small-size;
2191
min-width: $small-size;
2192
padding: $container-padding 12px;
2193
border-width: 1px; // for reorderable tabs
2195
border-color: transparent; //
2196
outline: none;
2198
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2199
background-repeat: no-repeat;
2200
background-position: center;
2201
background-size: 0% 0%;
2202
background-clip: border-box;
2203
color: $text2;
2205
font-weight: 500;
2206
&:hover {
2208
background-color: $overlay-hover;
2209
}
2210
&:disabled {
2212
color: $text2-disabled;
2213
}
2214
&:checked {
2216
transition: $transition,
2217
background-size $ripple-fade-in-duration $ease-out,
2218
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2219
background-color: transparent;
2220
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2221
background-size: 1000% 1000%;
2222
background-clip: padding-box;
2223
color: $text;
2224
&:disabled {
2226
color: $text-disabled;
2227
}
2228
&.reorderable-page {
2230
border-color: $divider;
2231
background-color: $base;
2232
}
2233
}
2234
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2236
> box {
2237
transition: background-color $duration $ease-out;
2238
margin: -$container-padding -12px;
2239
padding: $container-padding 12px;
2240
&:drop(active) {
2242
background-color: $overlay-hover;
2243
}
2244
}
2245
// colors the button like the label, overridden otherwise
2247
button.flat {
2248
@extend %button-small;
2249
&:last-child {
2251
margin-left: $container-padding;
2252
margin-right: $container-padding - 12px;
2253
}
2254
&:first-child {
2256
margin-left: $container-padding - 12px;
2257
margin-right: $container-padding;
2258
}
2259
}
2260
}
2261
&.top,
2263
&.bottom {
2264
tabs {
2265
padding-left: 8px;
2266
padding-right: 8px;
2267
&:not(:only-child) {
2269
&:first-child {
2270
margin-left: 0;
2271
}
2272
&:last-child {
2274
margin-right: 0;
2275
}
2276
}
2277
tab.reorderable-page {
2279
border-style: none solid;
2280
}
2281
}
2282
}
2283
&.left,
2285
&.right {
2286
tabs {
2287
padding-top: 8px;
2288
padding-bottom: 8px;
2289
&:not(:only-child) {
2291
&:first-child {
2292
margin-top: 0;
2293
}
2294
&:last-child {
2296
margin-bottom: 0;
2297
}
2298
}
2299
tab.reorderable-page {
2301
border-style: solid none;
2302
}
2303
}
2304
}
2305
}
2306
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2308
background-color: $base;
2309
}
2310
}
2311
/**************
2314
* Scrollbars *
2315
**************/
2316
scrollbar {
2317
$_slider_min_length: 24px;
2318
// disable steppers
2320
@at-root * {
2321
-GtkScrollbar-has-backward-stepper: false;
2322
-GtkScrollbar-has-forward-stepper: false;
2323
}
2324
transition: $transition;
2326
background-color: $base;
2327
// scrollbar border
2329
&.top { border-bottom: 1px solid $divider; }
2330
&.bottom { border-top: 1px solid $divider; }
2331
&.left { border-right: 1px solid $divider; }
2332
&.right { border-left: 1px solid $divider; }
2333
// slider
2335
slider {
2336
transition: background-color $duration $ease-out;
2337
min-width: 8px;
2338
min-height: 8px;
2339
border: 4px solid transparent;
2340
border-radius: $circular-radius;
2341
background-clip: padding-box;
2342
background-color: $text-disabled;
2343
&:hover {
2345
background-color: $text2;
2346
}
2347
&:active {
2349
background-color: $text;
2350
}
2351
&:disabled {
2353
background-color: $text2-disabled;
2354
}
2355
}
2356
&.fine-tune {
2358
slider {
2359
min-width: 4px;
2360
min-height: 4px;
2361
}
2362
&.horizontal slider {
2364
margin: 2px 0;
2365
}
2366
&.vertical slider {
2368
margin: 0 2px;
2369
}
2370
}
2371
&.overlay-indicator {
2373
&:not(.fine-tune) slider {
2374
transition-property: background-color, min-height, min-width;
2375
}
2376
&:not(.dragging):not(.hovering) {
2378
border-color: transparent;
2379
background-color: transparent;
2380
slider {
2382
min-width: 4px;
2383
min-height: 4px;
2384
margin: 4px - 1px;
2385
border: 1px solid rgba($base, 0.3);
2386
}
2387
button {
2389
min-width: 4px;
2390
min-height: 4px;
2391
margin: 4px - 1px;
2392
border: 1px solid rgba($base, 0.3);
2393
border-radius: $circular-radius;
2394
background-color: $text-disabled;
2395
background-clip: padding-box;
2396
-gtk-icon-source: none;
2397
&:disabled {
2399
background-color: $text2-disabled;
2400
}
2401
}
2402
&.horizontal {
2404
slider {
2405
min-width: $_slider_min_length;
2406
}
2407
button {
2409
min-width: 8px;
2410
}
2411
}
2412
&.vertical {
2414
slider {
2415
min-height: $_slider_min_length;
2416
}
2417
button {
2419
min-height: 8px;
2420
}
2421
}
2422
}
2423
&.dragging,
2425
&.hovering {
2426
background-color: rgba($surface, 0.9);
2427
}
2428
}
2429
&.horizontal slider {
2431
min-width: $_slider_min_length;
2432
}
2433
&.vertical slider {
2435
min-height: $_slider_min_length;
2436
}
2437
// button styling
2439
button {
2440
@extend %button-flat-basic;
2441
min-width: 16px;
2443
min-height: 16px;
2444
padding: 0;
2445
border-radius: 0;
2446
}
2447
// button icons
2449
&.vertical {
2450
button {
2451
&.down {
2452
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2453
}
2454
&.up {
2456
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2457
}
2458
}
2459
}
2460
&.horizontal {
2462
button {
2463
&.down {
2464
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2465
}
2466
&.up {
2468
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2469
}
2470
}
2471
}
2472
}
2473
/**********
2476
* Switch *
2477
**********/
2478
switch {
2479
transition: all $duration $ease-out;
2480
margin: $container-padding 0;
2481
padding: 0 2px;
2482
border: 5px solid transparent;
2483
border-radius: $circular-radius;
2484
background-color: $stroke;
2485
background-clip: padding-box;
2486
font-size: 0;
2487
&:checked {
2489
background-color: rgba($primary, 0.5);
2490
}
2491
&:disabled {
2493
opacity: 0.5;
2494
}
2495
// hide on/off icons for >=3.24.5
2497
image {
2498
margin: -8px;
2499
-gtk-icon-transform: scale(0);
2500
}
2501
slider {
2503
transition: all $duration $ease-out;
2504
min-width: 20px;
2505
min-height: 20px;
2506
margin: -3px -2px;
2507
border-radius: $circular-radius;
2508
outline: none;
2509
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2510
background-color: $switch-surface;
2511
}
2512
&:hover slider {
2514
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2515
}
2516
&:focus slider {
2518
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2519
}
2520
&:checked slider {
2522
background-color: $primary;
2523
color: $primary;
2524
}
2525
row:selected & {
2527
}
2528
}
2529
/*************************
2532
* Check and Radio items *
2533
*************************/
2534
// draw regular check and radio items using our PNG assets
2535
// all assets are rendered from assets.svg. never add pngs directly
2536
// selection-mode
2538
.view.content-view.check:not(list),
2539
.content-view:not(list) .tile check {
2540
min-height: 40px;
2541
min-width: 40px;
2542
margin: 0;
2543
padding: 0;
2544
box-shadow: none;
2545
background-color: transparent;
2546
background-image: none;
2547
-gtk-icon-shadow: $icon-shadow-z2;
2548
&:hover,
2550
&:active {
2551
-gtk-icon-shadow: $icon-shadow-z4;
2552
}
2553
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2555
&#{$class} {
2556
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2557
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2559
}
2560
}
2561
}
2562
checkbutton,
2564
radiobutton {
2565
outline: none;
2566
}
2567
checkbutton.text-button,
2569
radiobutton.text-button {
2570
// this is for a nice focus on check and radios text
2571
padding: 2px;
2572
label:not(:only-child) {
2574
margin: 0 4px;
2575
}
2576
}
2577
$check-radio-size: 40px;
2579
check,
2581
radio {
2582
min-height: 24px;
2583
min-width: 24px;
2584
margin: -($check-radio-size - 24px) / 2;
2585
padding: ($check-radio-size - 24px) / 2;
2586
border-radius: $circular-radius;
2587
@extend %ripple;
2589
@include ink-color($text2);
2590
&:checked,
2592
&:indeterminate {
2593
@include ink-color($primary);
2594
}
2595
&:disabled {
2597
color: $text2-disabled;
2598
}
2599
&:only-child {
2601
// margin: -12px;
2602
}
2603
popover modelbutton.flat & {
2605
&,
2606
&:focus,
2607
&:hover,
2608
&:focus:hover,
2609
&:active,
2610
&:disabled {
2611
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2612
box-shadow: none;
2613
background-image: none;
2614
}
2615
&.left:dir(rtl) {
2617
margin-left: -12px;
2618
margin-right: -4px;
2619
}
2620
&.right:dir(ltr) {
2622
margin-left: -4px;
2623
margin-right: -12px;
2624
}
2625
}
2626
menu menuitem & {
2628
transition: none;
2629
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2630
padding: 0;
2631
&:dir(ltr) {
2633
margin-right: 8px;
2634
}
2635
&:dir(rtl) {
2637
margin-left: 8px;
2638
}
2639
&,
2641
&:hover,
2642
&:disabled {
2643
box-shadow: none;
2644
}
2645
}
2646
}
2647
%check,
2649
check {
2650
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2651
&:checked {
2653
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2654
}
2655
&:indeterminate {
2657
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2658
}
2659
}
2660
%radio,
2662
radio {
2663
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2664
&:checked {
2666
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2667
}
2668
&:indeterminate {
2670
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2671
}
2672
border-image-slice: $check-radio-size / 2px;
2674
border-image-width: $check-radio-size / 2;
2675
$radio-indicator-size: 10px / $check-radio-size / 2;
2677
border-image-source:
2679
-gtk-gradient(
2680
radial,
2681
center center, 0,
2682
center center, .001,
2683
to($primary),
2684
to(transparent)
2685
);
2686
&:checked:not(:indeterminate) {
2688
border-image-source:
2689
-gtk-gradient(
2690
radial,
2691
center center, 0,
2692
center center, $radio-indicator-size,
2693
to($primary),
2694
to(transparent)
2695
);
2696
&:disabled {
2698
border-image-source:
2699
-gtk-gradient(
2700
radial,
2701
center center, 0,
2702
center center, $radio-indicator-size,
2703
to($text2-disabled),
2704
to(transparent)
2705
);
2706
}
2707
}
2708
}
2709
%small_check,
2711
menu menuitem check {
2712
min-height: 16px;
2713
min-width: 16px;
2714
border-radius: $corner-radius;
2715
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2716
&:checked {
2718
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2719
}
2720
&:indeterminate {
2722
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2723
}
2724
}
2725
%small_radio,
2727
menu menuitem radio {
2728
min-height: 16px;
2729
min-width: 16px;
2730
border-image: none;
2731
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2732
&:checked {
2734
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2735
}
2736
&:indeterminate {
2738
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2739
}
2740
}
2741
// ANIMATION:
2743
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2744
// the transformation is set on the active state and it get reset on the checked state.
2745
radio:not(:checked):active {
2746
// -gtk-icon-transform: scale(0);
2747
}
2748
// Otherwise, treeview.view styling will be applied...
2750
treeview.view check,
2751
treeview.view radio {
2752
padding: 0;
2753
color: $text2;
2754
&:checked,
2756
&:indeterminate {
2757
color: $primary;
2758
}
2759
&:disabled {
2761
color: $text2-disabled;
2762
}
2763
&,
2765
&:hover,
2766
&:selected,
2767
&:selected:hover {
2768
box-shadow: none;
2769
background-color: transparent;
2770
}
2771
}
2772
treeview.view radio:checked {
2774
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2775
border-image: none;
2776
}
2777
/************
2780
* GtkScale *
2781
************/
2782
scale {
2783
// sizing
2784
$_marks_length: 8px;
2785
$_marks_distance: 7px;
2786
$trough_size: 2px;
2788
$finetune_trough_size: 4px;
2789
$slider_size: 32px;
2791
$slider_margin: -($slider_size - $trough_size) / 2;
2793
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2794
$color_slider_margin: -($slider_size) * 3 / 4;
2796
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2797
min-height: $trough_size;
2799
min-width: $trough_size;
2800
&.horizontal {
2802
padding: ($medium-size - $trough_size) / 2 12px;
2803
}
2804
&.vertical {
2806
padding: 12px ($medium-size - $trough_size) / 2;
2807
}
2808
// the slider is inside the trough, so to have make it bigger there's a negative margin
2810
slider {
2811
min-height: $slider_size;
2812
min-width: $slider_size;
2813
margin: $slider_margin;
2814
}
2815
// click-and-hold the slider to activate
2817
&.fine-tune {
2818
&.horizontal {
2819
min-height: $finetune_trough_size;
2820
padding-top: ($medium-size - $finetune_trough_size) / 2;
2821
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2822
}
2823
&.vertical {
2825
min-width: $finetune_trough_size;
2826
padding-left: ($medium-size - $finetune_trough_size) / 2;
2827
padding-right: ($medium-size - $finetune_trough_size) / 2;
2828
}
2829
// to make the trough grow in fine-tune mode
2831
slider {
2832
margin: $finetune_slider_margin;
2833
}
2834
}
2835
// the backing bit
2837
trough {
2838
transition: background-color $duration $ease-out;
2839
outline: none;
2840
background-color: $stroke;
2841
&:disabled {
2843
background-color: $stroke-disabled;
2844
}
2845
}
2846
// the colored part of the backing bit
2848
highlight {
2849
transition: background-image $duration $ease-out;
2850
background-image: image($primary);
2851
&:disabled {
2853
background-color: $background;
2854
background-image: image($text2-disabled);
2855
}
2856
}
2857
// this is another differently styled part of the backing bit, the most relevant use case is for example
2859
// in media player to indicate how much video stream as been cached
2860
fill {
2861
transition: background-color $duration $ease-out;
2862
background-color: $stroke;
2863
&:disabled {
2865
background-color: transparent;
2866
}
2867
}
2868
slider {
2870
transition: background-color $duration $ease-out,
2871
background-size $ripple-fade-out-duration $ease-out,
2872
background-image $ripple-fade-out-opacity-duration $ease-out;
2873
background-repeat: no-repeat;
2874
background-position: center;
2875
background-size: auto, 1000% 1000%;
2876
border-radius: 50%;
2877
color: $primary;
2878
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2880
&#{$class} {
2881
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2882
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2884
radial-gradient(circle, transparent 10%, transparent 0%);
2885
}
2886
}
2887
&:hover {
2889
background-color: $overlay-hover;
2890
}
2891
&:focus {
2893
background-color: $overlay-focus;
2894
}
2895
&:active {
2897
$_url: 'assets/scale-slider#{$asset-suffix}';
2898
transition: background-color $duration $ease-out,
2900
background-size 0ms,
2901
background-image 0ms;
2902
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2903
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2904
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2905
background-size: auto, 0% 0%;
2906
}
2907
}
2908
marks,
2910
value {
2911
color: $text2;
2912
}
2913
indicator {
2915
background-color: $stroke;
2916
color: transparent;
2917
}
2918
//marks margins
2920
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2921
(horizontal, bottom, bottom, top),
2922
(vertical, top, left, right),
2923
(vertical, bottom, right, left) {
2924
&.#{$scale_orient} marks {
2925
&.#{$marks_class} {
2926
margin-#{$marks_margin}: $_marks_distance;
2927
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2928
}
2929
}
2930
&.#{$scale_orient}.fine-tune marks {
2932
&.#{$marks_class} {
2933
margin-#{$marks_margin}: $_marks_distance - 1px;
2934
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2935
}
2936
}
2937
}
2938
&.horizontal {
2940
indicator {
2941
min-height: $_marks_length;
2942
min-width: 1px;
2943
}
2944
}
2945
&.vertical {
2947
indicator {
2948
min-height: 1px;
2949
min-width: $_marks_length;
2950
}
2951
}
2952
// *WARNING* scale with marks madness following
2954
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2956
@each $marks_class, $marks_infix in (
2957
".marks-before:not(.marks-after)": "-marks-before",
2958
".marks-after:not(.marks-before)": "-marks-after"
2959
) {
2960
&#{$dir_class}#{$marks_class} {
2961
slider {
2962
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2963
&#{$state_class} {
2964
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2965
background-image:
2967
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2968
radial-gradient(circle, transparent 10%, transparent 0%);
2969
}
2970
}
2971
&:active {
2973
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2974
background-image:
2976
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2977
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2978
}
2979
}
2980
}
2981
}
2982
}
2983
&.color {
2985
min-height: 0;
2986
min-width: 0;
2987
&.horizontal {
2989
padding: 0 0 12px 0;
2990
slider {
2992
&:dir(ltr), &:dir(rtl) { // specificity bump
2993
margin-bottom: $color_slider_margin;
2994
margin-top: $color_marks_slider_margin;
2995
}
2996
}
2997
}
2998
&.vertical {
3000
&:dir(ltr) {
3001
padding: 0 0 0 12px;
3002
slider {
3004
margin-left: $color_slider_margin;
3005
margin-right: $color_marks_slider_margin;
3006
}
3007
}
3008
&:dir(rtl) {
3010
padding: 0 12px 0 0;
3011
slider {
3013
margin-right: $color_slider_margin;
3014
margin-left: $color_marks_slider_margin;
3015
}
3016
}
3017
}
3018
}
3019
}
3020
/*****************
3023
* Progress bars *
3024
*****************/
3025
progressbar {
3026
// sizing
3027
&.horizontal {
3028
trough,
3029
progress {
3030
min-height: $bar-size;
3031
}
3032
}
3033
&.vertical {
3035
trough,
3036
progress {
3037
min-width: $bar-size;
3038
}
3039
}
3040
// FIXME: insensitive state missing and some other state should be set probably
3042
color: $text2;
3043
font-size: smaller;
3044
trough {
3046
background-color: $stroke-disabled;
3047
}
3048
progress {
3050
background-color: $primary;
3051
}
3052
&.osd { // progressbar.osd used for epiphany page loading progress
3054
// min-width: $bar-size;
3055
// min-height: $bar-size;
3056
// background-color: transparent;
3057
trough {
3059
// background-color: transparent;
3060
}
3061
progress {
3063
// background-color: $primary;
3064
}
3065
}
3066
// makes the progress indicator disappear, when the fraction is 0
3068
trough.empty progress {
3069
all: unset;
3070
}
3071
}
3072
/*************
3075
* Level Bar *
3076
*************/
3077
levelbar {
3078
&.horizontal {
3079
block {
3080
min-height: $bar-size;
3081
}
3082
&.discrete block {
3084
min-width: $medium-size;
3085
&:not(:last-child) {
3087
margin-right: 2px;
3088
}
3089
}
3090
}
3091
&.vertical {
3093
block {
3094
min-width: $bar-size;
3095
}
3096
&.discrete block {
3098
min-height: $medium-size;
3099
&:not(:last-child) {
3101
margin-bottom: 2px;
3102
}
3103
}
3104
}
3105
// imitate the entry style
3107
trough {
3108
// padding: 2px;
3109
// border-radius: $corner-radius;
3110
// box-shadow: $shadow-z1;
3111
// background-color: $base;
3112
&:disabled {
3114
// background-color: $base-alt;
3115
}
3116
}
3117
block {
3119
&.low {
3120
background-color: $warning;
3121
}
3122
&.high,
3124
&:not(.empty) {
3125
background-color: $primary;
3126
}
3127
&.full {
3129
background-color: $success;
3130
}
3131
&.empty {
3133
background-color: $stroke-disabled;
3134
}
3135
}
3136
}
3137
/****************
3140
* Print dialog *
3141
*****************/
3142
printdialog {
3143
paper {
3144
padding: 0;
3145
border: 1px solid $divider;
3146
background-color: $base;
3147
color: $text;
3148
}
3149
.dialog-action-box {
3151
margin: 12px;
3152
}
3153
}
3154
/**********
3157
* Frames *
3158
**********/
3159
frame > border,
3160
.frame {
3161
margin: 0;
3162
padding: 0;
3163
border: 1px solid $divider;
3164
border-radius: 0;
3165
box-shadow: none;
3166
&.flat {
3168
border-style: none;
3169
}
3170
}
3171
// for backward compatibility
3173
frame.flat > border {
3174
border-style: none;
3175
}
3176
actionbar > revealer > box {
3178
padding: $container-padding;
3179
border-top: 1px solid $divider;
3180
background-color: $base;
3181
background-clip: border-box;
3182
button:not(.suggested-action):not(.destructive-action) {
3184
@extend %button-flat;
3185
}
3186
.linked:not(.vertical) > entry:not(:only-child) {
3188
border-radius: $corner-radius $corner-radius 0 0;
3189
}
3190
}
3191
scrolledwindow {
3193
viewport.frame { // avoid double borders when viewport inside scrolled window
3194
border-style: none;
3195
}
3196
// This is used when content is touch-dragged past boundaries.
3198
// draws a box on top of the content, the size changes programmatically.
3199
@at-root overshoot {
3200
&.top { @include overshoot(top); }
3201
&.bottom { @include overshoot(bottom); }
3203
&.left { @include overshoot(left); }
3205
&.right { @include overshoot(right); }
3207
}
3208
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3210
@at-root undershoot {
3211
&.top { @include undershoot(top); }
3212
&.bottom { @include undershoot(bottom); }
3214
&.left { @include undershoot(left); }
3216
&.right { @include undershoot(right); }
3218
}
3219
@at-root junction { // the small square between two scrollbars
3221
border-style: solid none none solid;
3222
border-width: 1px;
3223
border-color: $divider;
3224
background-color: $base;
3225
&:dir(rtl) {
3227
border-style: solid solid none none;
3228
}
3229
}
3230
}
3231
// vbox and hbox separators
3233
separator {
3234
min-width: 1px;
3235
min-height: 1px;
3236
background-color: $divider;
3237
}
3238
%hide_separators {
3240
min-width: 0;
3241
min-height: 0;
3242
background-color: transparent;
3243
}
3244
/*********
3247
* Lists *
3248
*********/
3249
list {
3250
border-color: $divider;
3251
background-color: $base;
3252
row {
3254
padding: 2px;
3255
}
3256
}
3257
row {
3259
&.activatable {
3260
@extend %ripple;
3261
@include ink-color($text, $fg: false);
3262
@include list-item;
3263
// this is for indicathing which row generated a popover
3265
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3266
&.has-open-popup {
3267
background-color: $overlay-checked;
3268
}
3269
}
3270
&:selected {
3272
@extend %selected_items;
3273
@include ink-color($primary, $fg: false);
3275
}
3276
}
3277
/*********************
3280
* App Notifications *
3281
*********************/
3282
.app-notification {
3283
// @extend %osd;
3284
@extend %toolbar-osd;
3286
margin: 8px;
3288
button {
3290
@extend %button-flat;
3291
&.text-button:not(:disabled) {
3293
@include ink-color($primary);
3294
}
3295
}
3296
&.frame,
3298
border {
3299
border-style: none;
3300
}
3301
}
3302
/*************
3305
* Expanders *
3306
*************/
3307
expander {
3308
title > arrow {
3309
transition: all $duration $ease-out;
3310
min-width: 16px;
3311
min-height: 16px;
3312
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3313
-gtk-icon-transform: rotate(-90deg);
3314
&:dir(rtl) {
3316
-gtk-icon-transform: rotate(90deg);
3317
}
3318
&:checked {
3320
-gtk-icon-transform: unset;
3321
}
3322
color: $text2;
3324
&:hover,
3326
&:active {
3327
color: $text;
3328
}
3329
&:disabled {
3331
color: $text2-disabled;
3332
}
3333
}
3334
}
3335
/************
3338
* Calendar *
3339
************/
3340
calendar {
3341
padding: 1px;
3342
border: 1px solid $divider;
3343
color: $text;
3344
&:disabled {
3346
color: $text-disabled;
3347
}
3348
&:selected {
3350
@extend %selected_items;
3351
border-radius: $corner-radius + 1px;
3353
}
3354
&.header {
3356
border-style: none none solid;
3357
border-color: $divider;
3358
border-radius: 0;
3359
}
3360
&.button {
3362
border-radius: $corner-radius + 1px;
3363
color: $text2;
3364
&:hover {
3366
background-image: image($overlay-hover);
3367
}
3368
&:disabled {
3370
color: $text2-disabled;
3371
}
3372
}
3373
&.highlight {
3375
color: $text2;
3376
font-weight: 500;
3377
}
3378
&:indeterminate {
3380
color: $text2-disabled;
3381
}
3382
}
3383
/***********
3386
* Dialogs *
3387
***********/
3388
messagedialog { // Message Dialog styling
3389
&.background {
3390
background-color: $surface;
3391
}
3392
.titlebar {
3394
min-height: $small-size;
3395
border-style: none;
3396
box-shadow: inset 0 1px highlight($surface);
3397
background-color: $surface;
3398
color: $text;
3399
&:backdrop {
3401
background-color: $surface;
3402
color: $text2;
3403
}
3404
}
3405
&.csd { // rounded bottom border styling for csd version
3407
&.background {
3408
// bigger radius for better antialiasing
3409
border-bottom-left-radius: $corner-radius;
3410
border-bottom-right-radius: $corner-radius;
3411
}
3412
}
3413
// Hint text
3415
box.vertical > label + label {
3416
color: $text2;
3417
}
3418
.dialog-action-box {
3420
margin-top: -$container-padding;
3421
// padding: $container-padding;
3422
button:not(:last-child) {
3424
margin-right: $container-padding;
3425
}
3426
}
3427
}
3428
.dialog-action-box button {
3430
@extend %button-flat;
3431
&:not(:disabled) {
3433
@include ink-color($primary);
3434
}
3435
&.suggested-action:not(:disabled) {
3437
background-color: transparent;
3438
// @include ink-color($primary);
3439
}
3440
&.destructive-action:not(:disabled) {
3442
background-color: transparent;
3443
@include ink-color($error);
3444
}
3445
}
3446
filechooser {
3448
.dialog-action-box {
3449
border-top: 1px solid $divider;
3450
}
3451
#pathbarbox {
3453
border-bottom: 1px solid $divider;
3454
background-color: $background;
3455
> stack > box > button { // The new folder button
3457
@extend %button-flat;
3458
border-radius: $circular-radius;
3460
}
3461
}
3462
}
3463
filechooserbutton:drop(active) {
3465
// box-shadow: none;
3466
}
3467
/***********
3470
* Sidebar *
3471
***********/
3472
.sidebar {
3473
border-style: none;
3474
background-color: $base-alt;
3475
&:not(separator) {
3477
@at-root %sidebar_left,
3478
&:dir(ltr),
3479
&.left,
3480
&.left:dir(rtl) {
3481
border-right: 1px solid $divider;
3482
border-left-style: none;
3483
}
3484
@at-root %sidebar_right,
3486
&:dir(rtl),
3487
&.right {
3488
border-left: 1px solid $divider;
3489
border-right-style: none;
3490
}
3491
}
3492
list {
3494
background-color: transparent;
3495
}
3496
paned & {
3498
&,
3499
&.left,
3500
&.right,
3501
&.left:dir(rtl),
3502
&:dir(rtl),
3503
&:dir(ltr) {
3504
border-style: none;
3505
}
3506
}
3507
}
3508
stacksidebar.sidebar {
3510
& {
3511
&:dir(ltr),
3512
&.left,
3513
&.left:dir(rtl) {
3514
list {
3515
@extend %sidebar_left;
3516
}
3517
}
3518
&:dir(rtl),
3520
&.right {
3521
list {
3522
@extend %sidebar_right;
3523
}
3524
}
3525
}
3526
+ separator.vertical,
3528
separator.horizontal {
3529
@extend %hide_separators;
3530
}
3531
list {
3533
padding: 4px;
3534
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3535
}
3536
row {
3538
min-height: 32px;
3539
padding: 0 8px - 6px;
3540
border-radius: $corner-radius;
3541
&:selected {
3543
font-weight: 500;
3544
@include ink-color($primary, $activated: true);
3545
}
3546
+ row {
3548
margin-top: 4px;
3549
}
3550
> label {
3552
padding-left: 6px;
3553
padding-right: 6px;
3554
}
3555
&.needs-attention > label {
3557
@extend %needs-attention;
3558
}
3559
}
3560
}
3561
separator.sidebar {
3563
background-color: $divider;
3564
&.selection-mode,
3566
.selection-mode & {
3567
// background-color: $divider;
3568
}
3569
}
3570
/****************
3573
* File chooser *
3574
****************/
3575
// dim the sidebar icons, see bug #786613 for details on this oddity
3576
row image.sidebar-icon {
3577
transition: color $duration $ease-out;
3578
color: $text2;
3579
&:disabled {
3581
color: $text2-disabled;
3582
}
3583
}
3584
placessidebar.sidebar {
3586
> viewport.frame {
3587
border-style: none;
3588
}
3589
list {
3591
padding: (4px - 3px) 0 4px;
3592
}
3593
row {
3595
// Needs overriding of the GtkListBoxRow padding
3596
min-height: 32px;
3597
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3598
padding: 0;
3599
border-radius: $corner-radius;
3600
// Using margins/padding directly in the SidebarRow
3602
// will make the animation of the new bookmark row jump
3603
> revealer {
3604
padding: 0 8px;
3605
}
3606
&:selected {
3608
font-weight: 500;
3609
@include ink-color($primary, $activated: true);
3610
image.sidebar-icon {
3612
color: $primary;
3613
}
3614
}
3615
&:disabled {
3617
color: $text-disabled;
3618
}
3619
image.sidebar-icon {
3621
&:dir(ltr) {
3622
padding-right: 8px;
3623
}
3624
&:dir(rtl) {
3626
padding-left: 8px;
3627
}
3628
}
3629
label.sidebar-label {
3631
&:dir(ltr) {
3632
padding-right: 2px;
3633
}
3634
&:dir(rtl) {
3636
padding-left: 2px;
3637
}
3638
}
3639
@at-root button.sidebar-button {
3641
@extend %button-flat-basic;
3642
@extend %button-small;
3643
}
3644
&.sidebar-placeholder-row {
3646
background-color: $overlay-hover;
3647
}
3648
&.sidebar-new-bookmark-row {
3650
color: $primary;
3651
image.sidebar-icon {
3653
color: $primary;
3654
}
3655
}
3656
}
3657
}
3658
placesview {
3660
.server-list-button {
3661
> image {
3662
-gtk-icon-transform: rotate(0turn);
3663
}
3664
&:checked > image {
3666
-gtk-icon-transform: rotate(-0.5turn);
3667
}
3668
}
3669
// this selects the "connect to server" label
3671
> actionbar > revealer > box > label {
3672
padding-left: 8px;
3673
padding-right: 8px;
3674
}
3675
}
3676
/*********
3679
* Paned *
3680
*********/
3681
paned {
3682
> separator {
3683
min-width: 1px;
3684
min-height: 1px;
3685
-gtk-icon-source: none; // defeats the ugly default handle decoration
3686
border-style: none; // just to be sure
3687
background-color: transparent;
3688
// workaround, using background istead of a border since the border will get rendered twice (?)
3689
background-image: image($divider);
3690
background-size: 1px 1px;
3691
background-clip: content-box; // avoids borders image being rendered twice (?)
3692
&.wide {
3694
min-width: 6px;
3695
min-height: 6px;
3696
background-color: $background;
3697
background-image: image($divider), image($divider);
3698
background-size: 1px 1px, 1px 1px;
3699
}
3700
}
3701
&.horizontal > separator {
3703
background-repeat: repeat-y;
3704
&:dir(ltr) {
3706
margin: 0 -8px 0 0;
3707
padding: 0 8px 0 0;
3708
background-position: left;
3709
}
3710
&:dir(rtl) {
3712
margin: 0 0 0 -8px;
3713
padding: 0 0 0 8px;
3714
background-position: right;
3715
}
3716
&.wide {
3718
margin: 0;
3719
padding: 0;
3720
background-repeat: repeat-y, repeat-y;
3721
background-position: left, right;
3722
}
3723
}
3724
&.vertical > separator {
3726
margin: 0 0 -8px 0;
3727
padding: 0 0 8px 0;
3728
background-repeat: repeat-x;
3729
background-position: top;
3730
&.wide {
3732
margin: 0;
3733
padding: 0;
3734
background-repeat: repeat-x, repeat-x;
3735
background-position: bottom, top;
3736
}
3737
}
3738
}
3739
/**************
3742
* GtkInfoBar *
3743
**************/
3744
infobar {
3745
border-style: none;
3746
&.info,
3748
&.question {
3749
border-bottom: 1px solid $divider;
3750
background-color: $base;
3751
button {
3753
@extend %button-flat;
3754
&.text-button:not(:disabled) {
3756
@include ink-color($primary);
3757
}
3758
}
3759
}
3760
&.warning {
3762
background-color: $warning;
3763
color: on($warning);
3764
button.flat {
3766
@include ink-color(on($warning));
3767
}
3768
selection {}
3770
*:link {
3772
color: on($warning);
3773
}
3774
}
3775
&.error {
3777
background-color: $error;
3778
color: on($error);
3779
button.flat {
3781
@include ink-color(on($error));
3782
}
3783
selection {}
3785
*:link {
3787
color: on($error);
3788
}
3789
}
3790
// Remove ugly hard-coded padding
3792
button label {
3793
margin: 0 -4px;
3794
}
3795
}
3796
/************
3799
* Tooltips *
3800
************/
3801
tooltip {
3802
&.background {
3803
// background-color needs to be set this way otherwise it gets drawn twice
3804
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3805
background-color: $tooltip;
3806
color: on($tooltip);
3807
}
3808
// padding: 4px; /* not working */
3810
border-radius: $corner-radius;
3811
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3812
&:not(.csd):not(.unity-csd) {
3814
// border: 1px solid $divider;
3815
// border-radius: $corner-radius + 1px;
3816
// background-clip: $background-clip-extra;
3817
}
3818
// FIXME: we need a border or tooltips vanish on black background.
3820
decoration {
3821
background-color: transparent;
3822
}
3823
> box {
3825
margin: -6px; // Remove hard-coded 6px margin
3826
min-height: 32px - 4px * 2;
3827
padding: 4px 8px;
3828
}
3829
.dim-label {
3831
color: on($tooltip, text2);
3832
}
3833
* {
3835
// workaround for Eclipse.
3836
// do not include any declaration here.
3837
}
3838
}
3839
/*****************
3842
* Color Chooser *
3843
*****************/
3844
colorswatch {
3845
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3846
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3847
// applied to the overlay box.
3848
// base color corners rounding
3850
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3851
// sports a bigger radius.
3852
// nth-child is needed by the custom color strip.
3853
&.top {
3855
border-top-left-radius: $corner-radius + 0.5px;
3856
border-top-right-radius: $corner-radius + 0.5px;
3857
overlay {
3859
border-top-left-radius: $corner-radius;
3860
border-top-right-radius: $corner-radius;
3861
}
3862
}
3863
&.bottom {
3865
border-bottom-left-radius: $corner-radius + 0.5px;
3866
border-bottom-right-radius: $corner-radius + 0.5px;
3867
overlay {
3869
border-bottom-left-radius: $corner-radius;
3870
border-bottom-right-radius: $corner-radius;
3871
}
3872
}
3873
&.left,
3875
&:first-child:not(.top) {
3876
border-top-left-radius: $corner-radius + 0.5px;
3877
border-bottom-left-radius: $corner-radius + 0.5px;
3878
overlay {
3880
border-top-left-radius: $corner-radius;
3881
border-bottom-left-radius: $corner-radius;
3882
}
3883
}
3884
&.right,
3886
&:last-child:not(.bottom) {
3887
border-top-right-radius: $corner-radius + 0.5px;
3888
border-bottom-right-radius: $corner-radius + 0.5px;
3889
overlay {
3891
border-top-right-radius: $corner-radius;
3892
border-bottom-right-radius: $corner-radius;
3893
}
3894
}
3895
&.dark {
3897
color: on(dark);
3898
}
3899
&.light {
3901
color: on(light);
3902
}
3903
overlay {
3905
transition: $transition-shadow;
3906
box-shadow: $shadow-z1;
3907
&:drop(active),
3909
&:hover {
3910
box-shadow: $shadow-z3;
3911
}
3912
}
3913
&#add-color-button {
3915
border-radius: $corner-radius $corner-radius 0 0;
3916
color: $text;
3917
&:only-child {
3919
border-radius: $corner-radius;
3920
}
3921
overlay {
3923
background-color: $surface;
3924
}
3925
}
3926
&:disabled {
3928
opacity: 0.5;
3929
overlay {
3931
box-shadow: none;
3932
}
3933
}
3934
row:selected & {
3936
}
3937
&#editor-color-sample {
3939
border-radius: $corner-radius + 0.5px;
3940
overlay {
3942
border-radius: $corner-radius;
3943
&:hover {
3945
// box-shadow: $shadow-z1;
3946
}
3947
}
3948
}
3949
}
3950
// colorscale popup
3952
colorchooser .popover.osd {
3953
transition: $transition-shadow;
3954
border-radius: $corner-radius;
3955
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3956
background-color: $surface;
3957
&:backdrop {
3959
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3960
}
3961
}
3962
/********
3965
* Misc *
3966
********/
3967
// content view (grid/list)
3968
.content-view {
3969
background-color: $background;
3970
&:hover {
3972
// -gtk-icon-effect: highlight;
3973
}
3974
rubberband,
3976
.rubberband {
3977
@extend rubberband;
3978
}
3979
}
3980
.scale-popup {
3982
.osd & {
3983
// @extend %osd;
3984
button.flat { // FIXME: quick hack, redo properly
3986
}
3987
}
3988
button { // +/- buttons on GtkVolumeButton popup
3990
}
3991
}
3992
/**********************
3995
* Window Decorations *
3996
**********************/
3997
decoration {
3998
transition: $transition-shadow;
3999
border-radius: $corner-radius $corner-radius 0 0;
4000
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4001
// FIXME rationalize shadows
4003
// this is used for the resize cursor area
4005
margin: 8px;
4006
&:backdrop {
4008
// the transparent shadow here is to enforce that the shadow extents don't
4009
// change when we go to backdrop, to prevent jumping windows.
4010
// The biggest shadow should be in the same order then in the active state
4011
// or the jumping will happen during the transition.
4012
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4013
}
4014
.maximized &,
4016
.fullscreen &,
4017
.tiled &,
4018
.tiled-top &,
4019
.tiled-right &,
4020
.tiled-bottom &,
4021
.tiled-left & {
4022
border-radius: 0;
4023
}
4024
.popup & {
4026
box-shadow: none;
4027
}
4028
// server-side decorations as used by mutter
4030
.ssd & {
4031
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4032
}
4033
.csd.popup & {
4035
border-radius: $corner-radius;
4036
box-shadow: $shadow-z4;
4037
}
4038
tooltip.csd & {
4040
border-radius: $corner-radius;
4041
box-shadow: none;
4042
}
4043
messagedialog.csd & {
4045
border-radius: $corner-radius;
4046
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4047
&:backdrop {
4049
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4050
}
4051
}
4052
.solid-csd & {
4054
margin: 0;
4055
padding: 2px;
4056
border-radius: 0;
4057
box-shadow: none;
4058
box-shadow: inset 0 1px highlight($titlebar);
4059
background-color: $titlebar;
4060
&:backdrop {
4062
background-color: $titlebar-backdrop;
4063
}
4064
}
4065
}
4066
// Window Close button
4068
button.titlebutton {
4069
border-radius: $circular-radius;
4070
.selection-mode & {
4072
}
4073
}
4074
// catch all extend :)
4077
%selected_items {
4079
background-color: $overlay-selected;
4080
}
4081
.monospace {
4083
font-family: monospace;
4084
}
4085
/**********************
4088
* Touch Copy & Paste *
4089
**********************/
4090
// touch selection handlebars for the Popover.osd above
4091
cursor-handle {
4092
color: $primary;
4093
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4094
&.top:dir(ltr),
4096
&.bottom:dir(rtl) {
4097
-gtk-icon-transform: rotate(90deg);
4098
}
4099
&.bottom:dir(ltr),
4101
&.top:dir(rtl) {
4102
-gtk-icon-transform: unset;
4103
}
4104
&.insertion-cursor:dir(ltr),
4106
&.insertion-cursor:dir(rtl) {
4107
padding-top: 6px;
4108
-gtk-icon-transform: rotate(45deg);
4109
}
4110
}
4111
// Decouple the font of context menus from their entry/textview
4113
.context-menu {
4114
font: initial;
4115
}
4116
// shortcut window keys
4118
.keycap {
4119
min-width: 28px - 8px * 2;
4120
min-height: 28px - 2px;
4121
margin-top: 2px;
4122
padding-bottom: 2px;
4123
padding-left: 8px;
4124
padding-right: 8px;
4125
border: solid 1px $divider;
4127
border-radius: $corner-radius + 1px;
4128
box-shadow: inset 0 -2px $divider;
4129
background-color: $surface;
4130
color: $text;
4131
font-size: smaller;
4132
}
4133
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4135
caret-color: $primary;
4136
}
4137
stackswitcher button.text-button { // FIXME aggregate with buttons
4139
min-width: 100px;
4140
}
4141
stackswitcher button.circular,
4143
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4144
min-width: $medium-size;
4145
min-height: $medium-size;
4146
padding: 0;
4147
}
4148
/*************
4151
* App Icons *
4152
*************/
4153
// Outline for low res icons
4154
.lowres-icon {
4155
// -gtk-icon-shadow: none;
4156
}
4157
// Drapshadow for large icons
4159
.icon-dropshadow {
4160
// -gtk-icon-shadow: none;
4161
}
4162
/*********
4165
* Emoji *
4166
*********/
4167
popover.emoji-picker {
4168
padding: 0;
4169
entry {
4171
border-bottom: 1px solid $divider;
4172
border-image: none;
4173
border-radius: 0;
4174
box-shadow: none;
4175
background-color: transparent;
4176
}
4177
scrolledwindow {
4179
border-bottom: 1px solid $divider;
4180
}
4181
}
4182
button.emoji-section {
4184
margin: 4px;
4185
&:checked {
4187
// background-color: transparent;
4188
@include ink-color($primary, $activated: true);
4189
}
4190
&:not(:last-child) {
4192
margin-right: 0;
4193
}
4194
}
4195
popover.emoji-picker .emoji {
4197
min-width: 3em;
4198
min-height: 3em;
4199
padding: 0 8px;
4200
// font-size: larger;
4201
widget {
4203
transition: $transition;
4204
border-radius: $corner-radius;
4205
&:hover {
4207
background-color: $overlay-hover;
4208
}
4209
}
4210
}
4211
popover.emoji-completion {
4213
padding: 8px 0;
4214
arrow {
4216
border: none;
4217
background: none;
4218
}
4219
.emoji-completion-row {
4221
min-height: $menuitem-size;
4222
padding: 0 12px;
4223
}
4224
.emoji:hover {
4226
background-color: $overlay-hover;
4227
}
4228
}
4229