ASCII text
1
* {
2
// padding: 0;
3
-GtkToolButton-icon-spacing: 0;
5
-GtkTextView-error-underline-color: $error;
6
// The size for scrollbars. The slider is 2px smaller, but we keep it
8
// up so that the whole area is sensitive to button presses for the
9
// slider. The stepper button is larger in both directions, the slider
10
// only in the width
11
-GtkScrolledWindow-scrollbar-spacing: 0;
13
-GtkToolItemGroup-expander-size: 11;
15
-GtkWidget-text-handle-width: 24;
17
-GtkWidget-text-handle-height: 24;
18
-GtkDialog-button-spacing: $container-padding / 1px;
20
-GtkDialog-action-area-border: $container-padding / 1px;
21
-gtk-secondary-caret-color: $primary;
23
// We use the outline properties to signal the focus properties
25
// to the adwaita engine: using real CSS properties is faster,
26
// and we don't use any outlines for now.
27
outline: 2px solid transparent;
29
outline-offset: -4px;
30
-gtk-outline-radius: $corner-radius;
31
&:focus {
33
outline-color: overlay("focus", $on-surface);
34
}
35
}
36
/**
38
* Base States
39
*/
40
.background {
42
background-color: $background;
43
color: $on-surface;
44
}
45
/*
47
These wildcard seems unavoidable, need to investigate.
48
Wildcards are bad and troublesome, use them with care,
49
or better, just don't.
50
Everytime a wildcard is used a kitten dies, painfully.
51
*/
52
*:disabled {
54
-gtk-icon-effect: dim;
55
}
56
.gtkstyle-fallback {
58
background-color: $background;
59
color: $on-surface;
60
&:hover {
62
background-color: darken($background, 5%);
63
}
64
&:active {
66
background-color: darken($background, 10%);
67
}
68
&:disabled {
70
color: disabled($on-surface);
71
}
72
&:selected {
74
background-color: $primary;
75
color: $on-primary;
76
}
77
}
78
.view {
80
// background-color: $background;
81
// color: $on-surface;
82
&:hover {
84
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
85
}
86
&:selected:hover {
88
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
89
}
90
&:disabled {
92
color: disabled($on-surface);
93
}
94
&:hover,
96
&:selected {
97
border-radius: $corner-radius;
98
}
99
selection,
101
&:selected {
102
background-color: $overlay-selected;
103
}
104
}
105
textview {
107
// FIXME: we need to override background-color to ensure text rendering
108
text {
109
background-color: $background;
110
caret-color: $primary;
111
}
112
border {
114
// background-color: $background;
115
color: hint($on-surface); // 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
.rubberband,
129
rubberband {
130
border: 1px solid primary($on-dark);
131
background-color: rgba(primary($on-dark), .3);
132
}
133
}
134
%rubberband,
136
.rubberband,
137
rubberband {
138
border: 1px solid $primary;
139
background-color: rgba($primary, .24);
140
}
141
flowbox {
143
rubberband {
144
@extend %rubberband;
145
}
146
flowboxchild {
148
padding: 4px;
149
border-radius: $corner-radius;
150
&:selected {
152
background-color: $overlay-selected;
153
}
154
}
155
}
156
.content-view .tile {
158
// margin: 2px;
159
// padding: 0;
160
// border-radius: 0;
161
// background-color: black;
162
&:selected {
164
background-color: transparent;
165
}
166
}
167
label {
169
caret-color: $primary; // this shouldn't be needed.
170
&.separator {
172
color: hint($on-surface);
173
}
174
&.error {
176
color: $error;
177
}
178
selection {
180
background-color: $overlay-selected;
181
}
182
&:disabled {
184
color: disabled($on-surface);
185
headerbar &,
187
menuitem &,
188
tab &,
189
button & {
190
color: inherit;
191
}
192
}
193
&.osd {
195
border-radius: $corner-radius;
196
background-color: $tooltip;
197
color: $on-tooltip;
198
}
199
}
200
.dim-label {
202
color: hint($on-surface);
203
}
204
assistant {
206
.sidebar {
207
padding: 4px 0;
208
}
209
.sidebar label {
211
min-height: $medium-size;
212
padding: 0 12px;
213
color: disabled($on-surface);
214
font-weight: 500;
215
&.highlight {
217
color: $on-surface;
218
}
219
}
220
}
221
%osd,
223
.osd {
224
// opacity: .9;
225
}
226
/**
228
* Spinner Animation
229
*/
230
@keyframes spin {
232
to {
233
-gtk-icon-transform: rotate(1turn);
234
}
235
}
236
spinner {
238
background: none;
239
opacity: 0; // non spinning spinner makes no sense
240
color: $primary;
241
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
242
transition: opacity $duration * 4 $ease-out;
243
animation: spin 1s linear infinite;
244
&:checked {
246
opacity: 1;
247
}
248
&:disabled {
250
color: disabled-hint($on-surface);
251
}
252
}
253
/**
255
* General Typography
256
*/
257
@function pt($size: $font-size) {
259
@return ($size * .75 / 1px) * 1pt;
260
}
261
.large-title {
263
font-weight: 400;
264
font-size: pt(48px);
265
}
266
.title-1 {
268
font-weight: 400;
269
font-size: pt(34px);
270
letter-spacing: pt(.25px);
271
}
272
.title-2 {
274
font-weight: 400;
275
font-size: pt(24px);
276
}
277
.title-3 {
279
font-weight: 500;
280
font-size: pt(20px);
281
letter-spacing: pt(.15px);
282
}
283
.title-4 {
285
font-weight: 400;
286
font-size: pt(16px);
287
letter-spacing: pt(.5px);
288
}
289
.heading {
291
font-weight: 500;
292
font-size: 1em;
293
}
294
.body {
296
font-weight: 400;
297
font-size: 1em;
298
}
299
.caption-heading {
301
font-weight: 500;
302
font-size: pt(12px);
303
letter-spacing: pt(1.5px);
304
}
305
.caption {
307
font-weight: 400;
308
font-size: pt(12px);
309
letter-spacing: pt(.4px);
310
}
311
/**
313
* Text Entries
314
*/
315
%entry,
317
entry {
318
min-height: $medium-size;
319
padding: 0 8px;
320
border-radius: $corner-radius $corner-radius 0 0;
321
@include entry(normal);
323
&:focus {
325
@include entry(checked);
326
}
327
&:drop(active) {
329
@include entry(hover);
330
}
331
&:disabled {
333
@include entry(disabled);
334
}
335
&.flat {
337
min-height: 0;
338
padding: 2px;
339
border-radius: 0;
340
background-color: transparent;
341
}
342
// icons inside the entry
344
image {
345
// min-height: $small-size;
346
// min-width: $small-size;
347
// border-radius: $circular-radius;
348
// @extend %ripple;
349
// @include ink-color($on-surface);
350
color: hint($on-surface);
351
&:hover,
353
&:active {
354
color: $on-surface;
355
}
356
&:disabled {
358
color: disabled($on-surface);
359
}
360
&.left {
362
margin-left: ($medium-size - 16px) / 2 - 8px;
363
margin-right: 6px;
364
}
365
&.right {
367
margin-left: 6px;
368
margin-right: ($medium-size - 16px) / 2 - 8px;
369
}
370
}
371
undershoot {
373
&.left {
374
@include undershoot(left);
375
}
376
&.right {
378
@include undershoot(right);
379
}
380
}
381
selection {
383
background-color: $overlay-selected;
384
}
385
// entry error and warning style
387
@each $class, $color in (".error": $error, ".warning": $warning) {
388
&#{$class} {
389
@include entry(normal, $color);
390
&:focus {
392
@include entry(checked, $color);
393
}
394
&:disabled {
396
@include entry(disabled, $color);
397
}
398
}
399
}
400
.osd & {
402
}
403
progress {
405
margin: 0 -8px -4px;
406
border-bottom: 2px solid $primary;
407
background-color: transparent;
408
}
409
// linked entries
411
.linked:not(.vertical) > & {
412
@extend %linked;
413
}
414
// Vertically linked entries
416
.linked.vertical > & {
417
@extend %linked-vertical;
418
}
419
}
420
%entry_raised {
422
border-radius: $corner-radius;
423
@include entry(raised-normal);
425
&:focus {
427
@include entry(raised-focus);
428
}
429
&:drop(active) {
431
@include entry(raised-hover);
432
}
433
&:disabled {
435
@include entry(raised-disabled);
436
}
437
// entry error and warning style
439
@each $class, $color in (".error": $error, ".warning": $warning) {
440
&#{$class} {
441
@include entry(raised-normal, $color);
442
&:focus {
444
@include entry(raised-focus, $color);
445
}
446
&:disabled {
448
@include entry(raised-disabled, $color);
449
}
450
image {
452
color: hint(on($color));
453
&:hover,
455
&:active {
456
color: on($color);
457
}
458
&:disabled {
460
color: disabled(on($color));
461
}
462
}
463
}
464
}
465
}
466
treeview entry {
468
&,
469
&.flat {
470
background-color: $base;
471
&,
473
&:focus {
474
border-image: none;
475
box-shadow: none;
476
}
477
}
478
}
479
.entry-tag {
481
margin: 2px;
482
border-radius: $circular-radius;
483
box-shadow: none;
484
background-color: fill($on-surface);
485
color: $on-surface;
486
&:hover {
488
background-image: image(overlay("hover", $on-surface));
489
}
490
// side margins: compensate the entry padding with a negative margin
492
// then the negative margin itself
493
:dir(ltr) & {
494
margin-left: 4px;
495
margin-right: 0;
496
padding-left: 12px;
497
padding-right: 8px;
498
}
499
:dir(rtl) & {
501
margin-left: 0;
502
margin-right: 4px;
503
padding-left: 8px;
504
padding-right: 12px;
505
}
506
// seems any sizing doesn't work
508
&.button {
509
box-shadow: none;
510
background-color: transparent;
511
color: hint($on-surface);
512
}
513
}
514
/**
516
* Buttons
517
*/
518
// stuff for .needs-attention
520
@keyframes needs-attention {
521
from {
522
background-image:
523
-gtk-gradient(
524
radial,
525
center center, 0,
526
center center, .001,
527
to($primary),
528
to(transparent)
529
);
530
}
531
to {
533
background-image:
534
-gtk-gradient(
535
radial,
536
center center, 0,
537
center center, .5,
538
to($primary),
539
to(transparent)
540
);
541
}
542
}
543
%button,
545
button {
546
min-height: 24px;
547
min-width: 16px;
548
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
549
border-radius: $corner-radius;
550
background-color: $surface;
551
color: $on-surface;
552
font-weight: 500;
553
@extend %ripple;
555
@include ink-color($on-surface, $elevation: true);
556
&:disabled {
558
box-shadow: none;
559
background-color: fill($on-surface);
560
color: disabled($on-surface);
561
}
562
&:checked {
564
background-color: overlay("activated", $primary, $background: $surface);
565
color: $primary;
566
@include ink-color($primary, $elevation: true);
567
&:disabled {
569
box-shadow: none;
570
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
571
color: disabled($on-surface);
572
}
573
}
574
&.text-button {
576
min-width: 64px - 16px * 2;
577
padding-left: 16px;
578
padding-right: 16px;
579
}
580
&.image-button {
582
min-width: 24px;
583
padding: ($medium-size - 24px) / 2;
584
border-radius: $circular-radius;
585
}
586
// NOTE: Some image-only buttons use this as well
588
&.text-button.image-button {
589
min-width: 24px;
590
padding: ($medium-size - 24px) / 2;
591
border-radius: $corner-radius;
592
label {
594
&:first-child {
595
margin-left: 16px - ($medium-size - 24px) / 2;
596
}
597
&:last-child {
599
margin-right: 16px - ($medium-size - 24px) / 2;
600
}
601
}
602
image:not(:only-child) {
604
margin: 0 (24px - 16px) / 2;
605
}
606
}
607
.linked:not(.vertical) > & {
609
@extend %linked;
610
&.image-button:not(.text-button) {
612
@extend %linked-image-button;
613
}
614
}
615
.linked.vertical > & {
617
@extend %linked-vertical;
618
&.image-button:not(.text-button) {
620
@extend %linked-vertical-image-button;
621
}
622
}
623
}
624
%button-flat-basic {
626
background-color: transparent;
627
color: hint($on-surface);
628
@include ink-color($on-surface);
629
&:disabled {
631
background-color: transparent;
632
color: disabled-hint($on-surface);
633
}
634
}
635
%button-flat-activatable {
637
@extend %button-flat-basic;
638
&:checked {
640
background-color: overlay("activated", $on-surface);
641
color: $on-surface;
642
@include ink-color($on-surface);
643
&:disabled {
645
color: disabled($on-surface);
646
}
647
}
648
}
649
%button-flat,
651
button.flat {
652
@extend %button-flat-activatable;
653
&.text-button {
655
min-width: 64px - 8px * 2;
656
padding-left: 8px;
657
padding-right: 8px;
658
}
659
&.text-button.image-button {
661
min-width: 24px;
662
padding: ($medium-size - 24px) / 2;
663
label {
665
&:first-child {
666
margin-left: 12px - ($medium-size - 24px) / 2;
667
}
668
&:last-child {
670
margin-right: 12px - ($medium-size - 24px) / 2;
671
}
672
}
673
}
674
.linked:not(.vertical) > &,
676
.linked.vertical > & {
677
&:not(:only-child) { // specificity bump
678
border-radius: $corner-radius;
679
&.image-button:not(.text-button) {
681
border-radius: $circular-radius;
682
}
683
}
684
}
685
}
686
button {
688
// big standalone buttons like in Documents pager
689
&.osd {
690
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
691
&.image-button {
693
padding: ($large-size - 24px) / 2;
694
}
695
&:disabled {
697
opacity: 0;
698
}
699
}
700
// overlay / OSD style
702
@at-root %osd_button,
703
.osd & {
704
}
705
// Suggested and Destructive Action buttons
707
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
708
&#{$class} {
709
background-color: $color;
710
color: on($color);
711
@include ink-color(on($color), $elevation: true);
712
&:disabled {
714
box-shadow: none;
715
background-color: fill($on-surface);
716
color: disabled($on-surface);
717
}
718
&:checked {
720
background-color: overlay("activated", on($color), $background: $color);
721
}
722
&.flat {
724
background-color: transparent;
725
color: $color;
726
@include ink-color($color);
727
&:disabled {
729
box-shadow: none;
730
background-color: transparent;
731
color: disabled-hint($on-surface);
732
}
733
&:checked {
735
background-color: overlay("activated", $color);
736
}
737
}
738
.osd & {
740
}
741
}
742
}
743
.stack-switcher > & {
745
// to position the needs attention dot, padding is added to the button
746
// child, a label needs just lateral padding while an icon needs vertical
747
// padding added too.
748
> label {
750
margin: 0 -6px;
751
padding: 0 6px;
752
}
753
> image {
755
margin: -3px -6px;
756
padding: 3px 6px;
757
}
758
&.needs-attention {
760
> label,
761
> image {
762
@extend %needs-attention;
763
}
764
&:checked {
766
> label,
767
> image {
768
animation: none;
769
background-image: none;
770
}
771
}
772
}
773
}
774
// hide separators
776
&.font,
777
&.file {
778
separator {
779
@extend %hide_separators;
780
}
781
}
782
&.font {
784
> box > box > label {
785
// font-weight: bold;
786
}
787
}
788
// inline-toolbar buttons
790
.inline-toolbar & {
791
// @extend %button-flat;
792
&:not(.text-button) {
794
border-radius: $circular-radius;
795
}
796
}
797
.primary-toolbar & {
799
-gtk-icon-shadow: none; // tango icons don't need shadows
800
}
801
&.close,
803
&.circular { // The Bloody Circul Button
804
border-radius: $circular-radius;
805
label {
807
// padding: 0;
808
}
809
}
810
}
811
%button-small {
813
min-height: $small-size;
814
min-width: $small-size;
815
padding: 0;
816
border-radius: $circular-radius;
817
}
818
%needs-attention {
820
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
821
background-repeat: no-repeat;
822
background-position: right 3px;
823
background-size: 6px 6px;
824
&:dir(rtl) {
826
background-position: left 3px;
827
}
828
}
829
// all the following is for the +|- buttons on inline toolbars, that way
831
// should really be deprecated...
832
.inline-toolbar toolbutton > button {
833
}
834
// More inline toolbar buttons
836
toolbar.inline-toolbar toolbutton {
837
&:not(:first-child) > button.flat {
838
// @extend %linked-not-first-child;
839
}
840
&:not(:last-child) > button.flat {
842
// @extend %linked-not-last-child;
843
}
844
}
845
%linked-not-first-child {
847
border-top-left-radius: 0;
848
border-bottom-left-radius: 0;
849
}
850
%linked-not-last-child {
852
border-top-right-radius: 0;
853
border-bottom-right-radius: 0;
854
}
855
%linked {
857
&:not(:first-child) {
858
@extend %linked-not-first-child;
859
}
860
&:not(:last-child) {
862
@extend %linked-not-last-child;
863
}
864
}
865
%linked-vertical-not-first-child {
867
border-top-left-radius: 0;
868
border-top-right-radius: 0;
869
}
870
%linked-vertical-not-last-child {
872
border-bottom-left-radius: 0;
873
border-bottom-right-radius: 0;
874
}
875
%linked-vertical {
877
&:not(:first-child) {
878
@extend %linked-vertical-not-first-child;
879
}
880
&:not(:last-child) {
882
@extend %linked-vertical-not-last-child;
883
}
884
}
885
%linked-image-button {
887
&:first-child {
888
border-top-left-radius: $corner-radius;
889
border-bottom-left-radius: $corner-radius;
890
}
891
&:last-child {
893
border-top-right-radius: $corner-radius;
894
border-bottom-right-radius: $corner-radius;
895
}
896
&:only-child {
898
border-radius: $circular-radius;
899
}
900
}
901
%linked-vertical-image-button {
903
&:first-child {
904
border-top-left-radius: $corner-radius;
905
border-top-right-radius: $corner-radius;
906
}
907
&:last-child {
909
border-bottom-left-radius: $corner-radius;
910
border-bottom-right-radius: $corner-radius;
911
}
912
&:only-child {
914
border-radius: $circular-radius;
915
}
916
}
917
/* menu buttons */
919
modelbutton.flat,
920
.menuitem.button.flat {
921
min-height: $menuitem-size;
922
padding: 0 8px;
923
border-radius: $corner-radius;
924
@extend %ripple;
926
@include ink-color($on-surface);
927
&:selected {
929
background-color: $overlay-selected;
930
}
931
}
932
modelbutton.flat arrow {
934
transition: color $duration $ease-out;
935
color: hint($on-surface);
936
&:disabled {
938
color: disabled-hint($on-surface);
939
}
940
&.left {
942
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
943
}
944
&.right {
946
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
947
}
948
}
949
button.color {
951
min-height: $small-size;
952
min-width: $small-size;
953
padding: $container-padding;
954
colorswatch:only-child {
956
&,
957
overlay {
958
// border-radius: 0;
959
}
960
}
961
}
962
/**
964
* Links
965
*/
966
*:link {
968
color: $primary;
969
}
970
*:visited {
972
color: $visited;
973
}
974
button.link {
976
&:link {
977
color: $primary;
978
@include ink-color($primary);
979
}
980
&:visited {
982
color: $visited;
983
@include ink-color($visited);
984
}
985
> label {
987
text-decoration-line: underline;
988
}
989
}
990
/**
992
* GtkSpinButton
993
*/
994
spinbutton {
996
&:not(.vertical) {
997
// in this horizontal configuration, the whole spinbutton
998
// behaves as the entry, so we extend the entry styling
999
// and nuke the style on the internal entry
1000
@extend %entry;
1001
padding: 0;
1003
entry {
1005
min-width: $large-size - 8px * 2;
1006
// reset all the other props since the spinbutton node is styled here
1007
margin: 0;
1008
border-image: none;
1009
border-radius: 0;
1010
box-shadow: none;
1011
background-color: transparent;
1012
}
1013
button {
1015
@extend %button-flat-basic;
1016
@extend %button-small;
1017
// margin: $container-padding;
1019
border: solid $container-padding transparent;
1020
background-clip: padding-box;
1021
// Remove unwanted focus indicator
1023
&:focus:not(:hover):not(:active) {
1024
box-shadow: inset 0 0 0 9999px transparent;
1025
}
1026
&.up:dir(ltr),
1028
&.down:dir(rtl) {
1029
margin-left: -$container-padding / 2;
1030
}
1031
&.up:dir(rtl),
1033
&.down:dir(ltr) {
1034
margin-right: -$container-padding / 2;
1035
}
1036
}
1037
}
1038
// OSD horizontal
1040
.osd &:not(.vertical) {
1041
}
1042
// Vertical
1044
&.vertical {
1045
// in the vertical configuration, we treat the spinbutton
1046
// as a box, and tweak the style of the entry in the middle
1047
// so that it's linked
1048
// FIXME: this should not be set at all, but otherwise it gets the wrong
1050
// color
1051
caret-color: $primary;
1052
// FIXME: this should not be set at all, but otherwise it gets the wrong
1054
// color
1055
&:disabled {
1056
color: disabled($on-surface);
1057
}
1058
entry {
1060
@extend %entry_raised;
1061
min-height: $medium-size;
1063
min-width: $large-size;
1064
padding: 0;
1065
}
1066
button {
1068
min-height: $medium-size;
1069
min-width: $large-size;
1070
padding: 0;
1071
@extend %button-flat-basic;
1073
// Remove unwanted focus indicator
1075
&:focus:not(:hover):not(:active) {
1076
box-shadow: inset 0 0 0 9999px transparent;
1077
}
1078
&.up {
1080
border-radius: $corner-radius $corner-radius 0 0;
1081
}
1082
&.down {
1084
border-radius: 0 0 $corner-radius $corner-radius;
1085
}
1086
}
1087
}
1088
// OSD vertical
1090
.osd &.vertical {
1091
}
1092
// Misc
1094
treeview &:not(.vertical) {
1095
min-height: 0;
1096
border-style: none;
1097
border-radius: 0;
1098
entry {
1100
min-height: 0;
1101
padding: 1px 2px;
1102
}
1103
}
1104
}
1105
/**
1107
* ComboBoxes
1108
*/
1109
combobox {
1111
arrow {
1112
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1113
min-height: 16px;
1114
min-width: 16px;
1115
}
1116
// workaround for menuitem selection
1118
decoration {
1119
transition: none;
1120
}
1121
button.combo cellview {
1123
&:dir(ltr) {
1124
margin-left: 8px - ($medium-size - 16px) / 2;
1125
}
1126
&:dir(rtl) {
1128
margin-right: 8px - ($medium-size - 16px) / 2;
1129
}
1130
}
1131
menu {
1133
padding: 2px 0;
1134
menuitem {
1136
min-height: $medium-size - 2px * 2;
1137
padding: 0 8px;
1138
}
1139
// overflow arrows
1141
> arrow {
1142
&.top {
1143
margin-top: -2px;
1144
}
1145
&.bottom {
1147
margin-top: 2px * 2;
1148
margin-bottom: -2px * 3;
1149
}
1150
}
1151
}
1152
&.linked {
1154
button:nth-child(2) {
1155
&:dir(ltr) {
1156
@extend %linked-not-first-child;
1157
}
1158
&:dir(rtl) {
1160
@extend %linked-not-last-child;
1161
}
1162
}
1163
}
1164
> .linked:not(.vertical) > entry:not(:only-child) {
1166
border-radius: $corner-radius $corner-radius 0 0;
1167
&:first-child {
1169
margin-right: -$medium-size;
1170
padding-right: $medium-size;
1171
}
1172
&:last-child {
1174
margin-left: -$medium-size;
1175
padding-left: $medium-size;
1176
}
1177
}
1178
> .linked:not(.vertical) > button:not(:only-child) {
1180
@extend %button-flat-activatable;
1181
// @extend %button-small;
1182
min-height: 16px;
1184
min-width: 16px;
1185
margin: ($medium-size - $small-size) / 2;
1186
padding: ($small-size - 16px) / 2;
1187
border-radius: $circular-radius;
1188
}
1189
}
1190
// the combo is a composite widget so the way we do button linking doesn't
1192
// work, special case needed. See
1193
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1194
.linked:not(.vertical) > combobox {
1196
&:not(:first-child) > box > button.combo {
1197
@extend %linked-not-first-child;
1198
}
1199
&:not(:last-child) > box > button.combo {
1201
@extend %linked-not-last-child;
1202
}
1203
}
1204
.linked.vertical > combobox {
1206
&:not(:first-child) > box > button.combo {
1207
@extend %linked-vertical-not-first-child;
1208
}
1209
&:not(:last-child) > box > button.combo {
1211
@extend %linked-vertical-not-last-child;
1212
}
1213
}
1214
button.combo:only-child {
1216
border-radius: $corner-radius $corner-radius 0 0;
1217
font-weight: normal;
1218
@include entry(normal);
1220
&:focus {
1222
@include entry(focus);
1223
}
1224
&:drop(active),
1226
&:hover {
1227
@include entry(hover);
1228
}
1229
&:checked {
1231
@include entry(checked);
1232
}
1233
&:disabled {
1235
@include entry(disabled);
1236
}
1237
arrow {
1239
transition: color $duration $ease-out;
1240
color: hint($on-surface);
1241
&:disabled {
1243
color: disabled-hint($on-surface);
1244
}
1245
}
1246
}
1247
/**
1249
* Toolbars
1250
*/
1251
toolbar {
1253
-GtkWidget-window-dragging: true;
1254
padding: 2px;
1255
button {
1257
@extend %button-flat;
1258
}
1259
// on OSD
1261
.osd & {
1262
}
1263
// stand-alone OSD toolbars
1265
&.osd {
1266
@extend %toolbar-osd;
1267
// positional classes for `attached` osd toolbars
1269
&.left,
1270
&.right,
1271
&.top,
1272
&.bottom {
1273
border-radius: 0;
1274
}
1275
&.bottom {
1277
box-shadow: none;
1278
background-color: transparent;
1279
background-image:
1280
linear-gradient(
1281
to bottom,
1282
transparent,
1283
rgba(black, .1) 30%,
1284
rgba(black, .2) 50%,
1285
rgba(black, .4)
1286
);
1287
}
1288
}
1289
// toolbar separators
1291
&.horizontal > separator {
1292
margin: 2px;
1293
}
1294
&.vertical > separator {
1296
margin: 2px;
1297
}
1298
&:not(.inline-toolbar):not(.osd) {
1300
scale,
1301
entry,
1302
spinbutton,
1303
button {
1304
margin: 2px;
1305
}
1306
.linked entry,
1308
.linked spinbutton,
1309
.linked button {
1310
&:not(:first-child) {
1311
margin-left: 0;
1312
}
1313
&:not(:last-child) {
1315
margin-right: 0;
1316
}
1317
}
1318
spinbutton {
1320
entry,
1321
button {
1322
margin: 0;
1323
}
1324
}
1325
switch {
1327
margin: 2px + $container-padding 2px;
1328
}
1329
}
1330
}
1331
%toolbar-osd {
1333
transition: $transition-shadow;
1334
padding: $container-padding;
1335
border-radius: $corner-radius;
1336
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1337
background-color: $surface;
1338
&:backdrop {
1340
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1341
}
1342
}
1343
// searchbar, location-bar & inline-toolbar
1345
.inline-toolbar {
1346
padding: $container-padding;
1347
border-style: solid;
1348
border-width: 0 1px 1px;
1349
border-color: divider($on-surface);
1350
background-color: $base;
1351
background-clip: padding-box;
1352
}
1353
searchbar > revealer > box,
1355
.location-bar {
1356
padding: $container-padding;
1357
border-style: solid;
1358
border-width: 0 0 1px;
1359
border-color: divider($on-surface);
1360
}
1361
searchbar > revealer > box {
1363
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1364
margin: -6px;
1365
padding: $container-padding;
1366
}
1367
/**
1369
* Header bars
1370
*/
1371
.titlebar {
1373
transition: background-color $duration $ease-out, color $duration $ease-out;
1374
border-radius: $corner-radius $corner-radius 0 0;
1375
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1376
background-color: $titlebar;
1377
color: $on-titlebar;
1378
&:disabled {
1380
color: disabled($on-titlebar);
1381
}
1382
&:backdrop {
1384
background-color: $titlebar-backdrop;
1385
color: hint($on-titlebar);
1386
&:disabled {
1388
color: disabled-hint($on-titlebar);
1389
}
1390
}
1391
.title {
1393
padding-left: 12px;
1394
padding-right: 12px;
1395
font-weight: bold;
1396
}
1397
.subtitle {
1399
padding-left: 12px;
1400
padding-right: 12px;
1401
font-size: smaller;
1402
}
1403
.subtitle,
1405
.dim-label {
1406
transition: color $duration $ease-out;
1407
color: hint($on-titlebar);
1408
&:backdrop {
1410
color: disabled($on-titlebar);
1411
}
1412
}
1413
// Don't draw titlebar above titlebar
1415
.titlebar {
1416
background-color: transparent;
1417
box-shadow: none;
1418
}
1419
// The separator for split headerbars
1421
headerbar + separator {
1422
background-color: divider($on-titlebar);
1423
}
1424
entry {
1426
box-shadow: inset 0 -1px stroke($on-titlebar);
1427
background-color: entry-fill($on-titlebar);
1428
color: $on-titlebar;
1429
&:disabled {
1431
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1432
background-color: entry-fill($on-titlebar);
1433
color: disabled($on-titlebar);
1434
}
1435
image {
1437
color: hint($on-titlebar);
1438
&:hover,
1440
&:active {
1441
color: $on-titlebar;
1442
}
1443
&:disabled {
1445
color: disabled($on-titlebar);
1446
}
1447
}
1448
}
1449
.linked:not(.vertical) > entry:not(:only-child) {
1451
border-radius: $corner-radius $corner-radius 0 0;
1452
}
1453
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1455
@extend %button-flat;
1456
border-image:
1458
radial-gradient(
1459
circle closest-corner at center calc(100% - 1px),
1460
$titlebar-indicator 0%,
1461
transparent 0%
1462
) 0 0 0 / 0 0 0;
1463
background-color: transparent;
1464
color: hint($on-titlebar);
1465
@include ink-color($on-titlebar);
1466
&:disabled {
1468
color: disabled-hint($on-titlebar);
1469
}
1470
@at-root %titlebar-button-checked,
1472
&:checked {
1473
border-image:
1474
radial-gradient(
1475
circle closest-corner at center calc(100% - 1px),
1476
$titlebar-indicator 100%,
1477
transparent 0%
1478
) 0 0 2 / 0 0 2px;
1479
background-color: transparent;
1480
color: $on-titlebar;
1481
@include ink-color($on-titlebar);
1482
&:disabled {
1484
background-color: transparent;
1485
color: disabled($on-titlebar);
1486
}
1487
}
1488
&:backdrop {
1490
color: disabled($on-titlebar);
1491
&:disabled {
1493
color: disabled-hint($on-titlebar);
1494
}
1495
&:checked {
1497
color: hint($on-titlebar);
1498
&:disabled {
1500
color: disabled-hint($on-titlebar);
1501
}
1502
}
1503
}
1504
}
1505
button.suggested-action, button.destructive-action {
1507
&:disabled {
1508
background-color: fill($on-titlebar);
1509
color: disabled($on-titlebar);
1510
}
1511
}
1512
// FIXME: Ugly overriding
1514
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1515
min-width: 120px - 8px * 2;
1516
}
1517
// FIXME: Ugly overriding
1519
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1520
min-width: 0;
1521
padding-left: ($medium-size - 24px) / 2;
1522
padding-right: ($medium-size - 24px) / 2;
1523
}
1524
&.selection-mode {
1526
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1527
// but let's keep it for backwards compatibility.
1528
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1529
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1530
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1531
background-color: $primary;
1532
color: $on-primary;
1533
&:backdrop {
1535
color: hint($on-primary);
1536
}
1537
.subtitle:link {
1539
color: $on-primary;
1540
}
1541
button:not(.suggested-action):not(.destructive-action) {
1543
border-image:
1544
radial-gradient(
1545
circle closest-corner at center calc(100% - 1px),
1546
currentcolor 0%,
1547
transparent 0%
1548
) 0 0 0 / 0 0 0;
1549
color: $on-primary;
1550
&:disabled {
1552
color: disabled($on-primary);
1553
}
1554
&:checked {
1556
border-image:
1557
radial-gradient(
1558
circle closest-corner at center calc(100% - 1px),
1559
currentcolor 100%,
1560
transparent 0%
1561
) 0 0 2 / 0 0 2px;
1562
color: $on-primary;
1563
&:disabled {
1565
color: disabled($on-primary);
1566
}
1567
}
1568
&:backdrop {
1570
color: hint($on-primary);
1571
&:disabled {
1573
color: disabled-hint($on-primary);
1574
}
1575
&:checked {
1577
color: hint($on-primary);
1578
&:disabled {
1580
color: disabled-hint($on-primary);
1581
}
1582
}
1583
}
1584
}
1585
.selection-menu {
1587
padding-left: 16px;
1588
padding-right: 16px;
1589
arrow {
1591
-GtkArrow-arrow-scaling: 1;
1592
}
1593
.arrow {
1595
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1596
}
1597
}
1598
}
1599
.selection-mode {
1601
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1602
background-color: $primary;
1603
}
1604
// squared corners when the window is maximized, tiled, or fullscreen
1606
.tiled &,
1607
.tiled-top &,
1608
.tiled-right &,
1609
.tiled-bottom &,
1610
.tiled-left &,
1611
.maximized &,
1612
.fullscreen & {
1613
border-radius: 0;
1614
box-shadow: $shadow-z1;
1615
}
1616
&.default-decoration {
1618
min-height: $small-size;
1619
padding: $container-padding;
1620
box-shadow: inset 0 1px highlight($titlebar);
1621
.tiled &,
1623
.maximized &,
1624
.fullscreen & {
1625
box-shadow: none;
1626
}
1627
button.titlebutton {
1629
min-height: $small-size;
1630
min-width: $small-size;
1631
margin: 0;
1632
padding: 0;
1633
}
1634
// workaround for non-animatable buttons
1636
.background:not(.csd) & button.titlebutton:active {
1637
background-size: 1000% 1000%;
1638
}
1639
}
1640
.solid-csd & {
1642
&:dir(rtl), &:dir(ltr) { // specificity bump
1643
border-radius: 0;
1644
box-shadow: $shadow-z1; // just remove the highlight
1645
}
1646
}
1647
}
1648
headerbar {
1650
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1651
min-height: $large-size;
1652
padding: 0 $container-padding;
1653
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1655
entry,
1656
spinbutton,
1657
button {
1658
margin-top: $container-padding;
1659
margin-bottom: $container-padding;
1660
}
1661
separator.titlebutton {
1663
margin-top: $large-size / 4;
1664
margin-bottom: $large-size / 4;
1665
background-color: divider($on-titlebar);
1666
}
1667
switch {
1669
margin-top: ($large-size - 24px) / 2;
1670
margin-bottom: ($large-size - 24px) / 2;
1671
}
1672
// reset button margins of the spinbutton
1674
spinbutton button {
1675
margin-top: 0;
1676
margin-bottom: 0;
1677
}
1678
// FIXME: This is a hacky workaround.
1680
.entry-tag {
1681
margin-top: 5px;
1682
margin-bottom: 5px;
1683
}
1684
}
1685
// Development versions of apps to use a differently styled headerbar
1687
window.devel .titlebar:not(.selection-mode) {
1688
}
1689
/**
1691
* Pathbars
1692
*/
1693
%pathbar_button,
1695
.path-bar.linked:not(.vertical) > button {
1696
@extend %button-flat-basic;
1697
padding-left: ($medium-size - 24px) / 2;
1699
padding-right: ($medium-size - 24px) / 2;
1700
border-image:
1701
radial-gradient(
1702
circle closest-corner at center calc(100% - 1px),
1703
$primary 0%,
1704
transparent 0%
1705
) 0 0 0 / 0 0 0;
1706
border-radius: $corner-radius;
1707
&:checked {
1709
border-image:
1710
radial-gradient(
1711
circle closest-corner at center calc(100% - 1px),
1712
$primary 100%,
1713
transparent 0%
1714
) 0 0 2 / 0 0 2px;
1715
color: $on-surface;
1716
&,
1718
&:disabled {
1719
background-color: transparent;
1720
}
1721
}
1722
label:not(:only-child) {
1724
&:first-child {
1725
margin-left: 0;
1726
}
1727
&:last-child {
1729
margin-right: 0;
1730
}
1731
}
1732
&.text-button {
1734
min-width: 0;
1735
}
1736
&.slider-button {
1738
padding-left: (24px - 16px) / 2;
1739
padding-right: (24px - 16px) / 2;
1740
}
1741
}
1742
/**
1744
* Tree Views
1745
*/
1746
treeview.view {
1748
@at-root * {
1749
-GtkTreeView-horizontal-separator: 4;
1750
-GtkTreeView-grid-line-width: 1;
1751
-GtkTreeView-grid-line-pattern: '';
1752
-GtkTreeView-tree-line-width: 1;
1753
-GtkTreeView-tree-line-pattern: '';
1754
-GtkTreeView-expander-size: 16;
1755
}
1756
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1758
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1759
// to avoid borders being overridden by the previously set props
1761
rubberband {
1762
@extend %rubberband;
1763
}
1764
&:hover,
1766
&:selected {
1767
border-radius: 0;
1768
}
1769
&.separator {
1771
min-height: 1px + 2px * 2;
1772
color: divider($on-surface);
1773
}
1774
&:drop(active) {
1776
// FIXME: box-shadow, background-color and background-image are not available here.
1777
border-style: solid none;
1778
border-width: 9999px;
1779
border-color: overlay("hover", $on-surface);
1780
&.after {
1782
border-top-style: none;
1783
}
1784
&.before {
1786
border-bottom-style: none;
1787
}
1788
}
1789
&.expander {
1791
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1792
-gtk-icon-transform: rotate(-90deg);
1793
&:dir(rtl) {
1795
-gtk-icon-transform: rotate(90deg);
1796
}
1797
&:checked {
1799
-gtk-icon-transform: unset;
1800
}
1801
color: hint($on-surface);
1803
&:hover,
1805
&:active {
1806
color: $on-surface;
1807
}
1808
&:disabled {
1810
color: disabled-hint($on-surface);
1811
}
1812
}
1813
&.progressbar { // progress bar in treeviews
1815
border-bottom: $bar-size solid $primary;
1816
box-shadow: none;
1817
background-color: transparent;
1818
background-image: none;
1819
&:selected:hover {
1821
box-shadow: none;
1822
}
1823
}
1824
&.trough { // progress bar trough in treeviews
1826
border-bottom: $bar-size solid disabled-stroke($on-surface);
1827
box-shadow: none;
1828
background-color: transparent;
1829
background-image: none;
1830
&:selected:hover {
1832
box-shadow: none;
1833
}
1834
}
1835
header {
1837
button {
1838
padding: 2px 6px;
1839
border-style: none solid solid none;
1840
border-width: 1px;
1841
border-color: divider($on-surface);
1842
border-radius: 0;
1843
background-clip: border-box;
1844
color: hint($on-surface);
1845
@include ink-color($on-surface);
1846
@include list-item;
1847
&:disabled {
1849
color: disabled-hint($on-surface);
1850
}
1851
&,
1853
&:disabled {
1854
background-color: transparent;
1855
}
1856
&:last-child {
1858
border-right-style: none;
1859
}
1860
}
1861
}
1862
button.dnd,
1864
header.button.dnd { // for treeview-like derive widgets
1865
padding: 2px 6px;
1866
border-style: none solid solid;
1867
border-width: 1px;
1868
border-color: divider($on-surface);
1869
border-radius: 0;
1870
box-shadow: none;
1871
background-clip: border-box;
1872
background-color: $surface;
1873
color: $primary;
1874
}
1875
// see tests/testaccel to test
1877
acceleditor > label {
1878
background-color: $primary;
1879
}
1880
}
1881
/**
1883
* Menus
1884
*/
1885
menubar,
1887
.menubar {
1888
-GtkWidget-window-dragging: true;
1889
padding: 0;
1890
// box-shadow: inset 0 -1px divider($on-surface);
1891
background-color: $titlebar;
1892
color: $on-titlebar;
1893
&:backdrop {
1895
background-color: $titlebar-backdrop;
1896
color: hint($on-titlebar);
1897
}
1898
.csd & {
1900
transition: $transition;
1901
}
1902
> menuitem {
1904
transition: $transition;
1905
min-height: 20px;
1906
padding: 4px 8px;
1907
color: hint($on-titlebar);
1908
&:hover { // Seems like it :hover even with keyboard focus
1910
transition: none;
1911
background-color: overlay("activated", $on-titlebar);
1912
color: $on-titlebar;
1913
}
1914
&:disabled {
1916
color: disabled-hint($on-titlebar);
1917
}
1918
}
1919
}
1920
// Needed to make the border-radius of menus work
1922
// otherwise the background bleeds out of the menu edges
1923
.background.popup {
1924
background-color: transparent;
1925
}
1926
menu,
1928
.menu,
1929
.context-menu {
1930
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1931
padding: 4px 0;
1932
box-shadow: inset 0 1px highlight($surface);
1933
background-color: $surface;
1934
border: 1px solid divider($on-surface); // adds borders in a non composited env
1935
.csd & {
1937
border: none; // axes borders in a composited env
1938
border-radius: $corner-radius;
1939
}
1940
menuitem {
1942
transition: background-color $duration $ease-out;
1943
min-height: 20px;
1944
min-width: 40px;
1945
padding: 4px 8px;
1946
color: $on-surface;
1947
font: initial;
1948
text-shadow: none;
1949
&:hover {
1951
transition: none;
1952
background-color: overlay("hover", $on-surface);
1953
}
1954
&:disabled {
1956
color: disabled($on-surface);
1957
}
1958
// submenu indicators
1960
arrow {
1961
min-height: 16px;
1962
min-width: 16px;
1963
color: hint($on-surface);
1964
&:disabled {
1966
color: disabled-hint($on-surface);
1967
}
1968
&:dir(ltr) {
1970
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1971
margin-left: 8px;
1972
}
1973
&:dir(rtl) {
1975
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1976
margin-right: 8px;
1977
}
1978
}
1979
// avoids labels color being overridden, see
1981
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1982
label {
1983
&:dir(rtl),
1984
&:dir(ltr) {
1985
// color: inherit;
1986
}
1987
}
1988
}
1989
// overflow arrows
1991
> arrow {
1992
min-height: 16px;
1993
min-width: 16px;
1994
padding: 4px;
1995
background-color: $surface;
1996
color: hint($on-surface);
1997
&.top {
1999
margin-top: -4px;
2000
border-bottom: 1px solid divider($on-surface);
2001
border-radius: $corner-radius $corner-radius 0 0;
2002
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2003
}
2004
&.bottom {
2006
margin-top: 4px * 2;
2007
margin-bottom: -4px * 3;
2008
border-top: 1px solid divider($on-surface);
2009
border-radius: 0 0 $corner-radius $corner-radius;
2010
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2011
}
2012
&:hover {
2014
background-image: image(overlay("hover", $on-surface));
2015
}
2016
&:disabled {
2018
border-color: transparent;
2019
background-color: transparent;
2020
color: transparent;
2021
// color: disabled-hint($on-surface);
2022
}
2023
}
2024
separator {
2026
margin: 4px 0;
2027
}
2028
}
2029
menuitem {
2031
accelerator {
2032
color: hint($on-surface);
2033
}
2034
&:disabled accelerator {
2036
color: disabled-hint($on-surface);
2037
}
2038
}
2039
/**
2041
* Popovers
2042
*/
2043
popover.background {
2045
transition: $transition-shadow;
2046
padding: 2px;
2047
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2048
background-color: $surface;
2049
&:backdrop {
2051
box-shadow: $shadow-z2;
2052
}
2053
&, .csd & {
2055
border-style: solid;
2056
border-width: 1px;
2057
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2058
border-radius: $corner-radius + 1px;
2059
background-clip: padding-box;
2060
}
2061
> stack {
2063
margin: -4px; // remove extra padding from menu style popovers
2064
}
2065
> toolbar {
2067
margin: -2px;
2068
}
2069
> list,
2071
> .view,
2072
> toolbar {
2073
border-style: none;
2074
box-shadow: none;
2075
background-color: transparent;
2076
}
2077
&.touch-selection,
2079
&.magnifier,
2080
&.osd {
2081
// @extend %osd;
2082
}
2083
button:not(.suggested-action):not(.destructive-action) {
2085
// @extend %button-flat;
2086
}
2087
.linked:not(.vertical) > entry:not(:only-child) {
2089
// border-radius: $corner-radius $corner-radius 0 0;
2090
}
2091
&.menu button,
2093
button.model {
2094
@extend %button-flat;
2095
min-height: 32px;
2097
padding: 0 8px;
2098
border-radius: $corner-radius;
2099
&:checked {
2101
// color: $primary;
2102
}
2103
}
2104
separator {
2106
margin: 4px 0;
2107
}
2108
list separator {
2110
margin: 0;
2111
}
2112
}
2113
/**
2115
* Notebooks
2116
*/
2117
notebook {
2119
&:focus tab:checked {
2120
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2121
}
2122
> header {
2124
border-width: 1px;
2125
border-color: divider($on-surface);
2126
&.top {
2128
border-bottom-style: solid;
2129
> tabs {
2131
margin-bottom: -1px;
2132
> tab {
2134
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2135
&:checked {
2137
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2138
}
2139
&.reorderable-page {
2141
border-image-width: 0 1px 2px;
2142
}
2143
}
2144
}
2145
}
2146
&.bottom {
2148
border-top-style: solid;
2149
> tabs {
2151
margin-top: -1px;
2152
> tab {
2154
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2155
&:checked {
2157
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2158
}
2159
&.reorderable-page {
2161
border-image-width: 2px 1px 0;
2162
}
2163
}
2164
}
2165
}
2166
&.left {
2168
border-right-style: solid;
2169
> tabs {
2171
margin-right: -1px;
2172
> tab {
2174
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2175
&:checked {
2177
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2178
}
2179
&.reorderable-page {
2181
border-image-width: 1px 2px 1px 0;
2182
}
2183
}
2184
}
2185
}
2186
&.right {
2188
border-left-style: solid;
2189
> tabs {
2191
margin-left: -1px;
2192
> tab {
2194
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2195
&:checked {
2197
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2198
}
2199
&.reorderable-page {
2201
border-image-width: 1px 0 1px 2px;
2202
}
2203
}
2204
}
2205
}
2206
&.top > tabs > arrow {
2208
@extend %notebook_vert_arrows;
2209
border-top-style: none;
2211
}
2212
&.bottom > tabs > arrow {
2214
@extend %notebook_vert_arrows;
2215
border-bottom-style: none;
2217
}
2218
@at-root %notebook_vert_arrows {
2220
padding-left: 4px;
2221
padding-right: 4px;
2222
&.down {
2224
margin-left: -8px;
2225
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2226
}
2227
&.up {
2229
margin-right: -8px;
2230
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2231
}
2232
}
2233
&.left > tabs > arrow {
2235
@extend %notebook_horz_arrows;
2236
border-left-style: none;
2238
}
2239
&.right > tabs > arrow {
2241
@extend %notebook_horz_arrows;
2242
border-right-style: none;
2244
}
2245
@at-root %notebook_horz_arrows {
2247
padding-top: 4px;
2248
padding-bottom: 4px;
2249
&.down {
2251
margin-top: -8px;
2252
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2253
}
2254
&.up {
2256
margin-bottom: -8px;
2257
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2258
}
2259
}
2260
> tabs > arrow {
2262
min-height: 16px;
2263
min-width: 16px;
2264
border-radius: 0;
2265
color: hint($on-surface);
2266
@extend %ripple;
2267
@include ink-color($on-surface);
2268
&:disabled {
2270
color: disabled-hint($on-surface);
2271
}
2272
}
2273
tab {
2275
transition: $transition,
2276
background-size 0ms,
2277
background-image 0ms;
2278
min-height: $small-size;
2279
min-width: $small-size;
2280
padding: $container-padding 12px;
2281
border-width: 1px; // for reorderable tabs
2283
border-color: transparent; //
2284
outline: none;
2286
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2287
background-repeat: no-repeat;
2288
background-position: center;
2289
background-size: 0% 0%;
2290
color: hint($on-surface);
2292
font-weight: 500;
2293
&:hover {
2295
background-color: overlay("hover-alt", $on-surface);
2296
}
2297
&:disabled {
2299
color: disabled-hint($on-surface);
2300
}
2301
&:checked {
2303
transition: $transition,
2304
background-size $ripple-fade-in-duration $ease-out,
2305
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2306
background-color: transparent;
2307
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2308
background-size: 1000% 1000%;
2309
background-clip: padding-box;
2310
color: $on-surface;
2311
&:disabled {
2313
color: disabled($on-surface);
2314
}
2315
&.reorderable-page {
2317
border-color: divider($on-surface);
2318
background-color: $base;
2319
}
2320
}
2321
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2323
> box {
2324
transition: background-color $duration $ease-out;
2325
margin: -$container-padding -12px;
2326
padding: $container-padding 12px;
2327
&:drop(active) {
2329
background-color: overlay("hover", $on-surface);
2330
}
2331
}
2332
// colors the button like the label, overridden otherwise
2334
button.flat {
2335
@extend %button-small;
2336
&:last-child {
2338
margin-left: $container-padding;
2339
margin-right: $container-padding - 12px;
2340
}
2341
&:first-child {
2343
margin-left: $container-padding - 12px;
2344
margin-right: $container-padding;
2345
}
2346
}
2347
}
2348
&.top,
2350
&.bottom {
2351
tabs {
2352
padding-left: 8px;
2353
padding-right: 8px;
2354
&:not(:only-child) {
2356
&:first-child {
2357
margin-left: 0;
2358
}
2359
&:last-child {
2361
margin-right: 0;
2362
}
2363
}
2364
tab.reorderable-page {
2366
border-style: none solid;
2367
}
2368
}
2369
}
2370
&.left,
2372
&.right {
2373
tabs {
2374
padding-top: 8px;
2375
padding-bottom: 8px;
2376
&:not(:only-child) {
2378
&:first-child {
2379
margin-top: 0;
2380
}
2381
&:last-child {
2383
margin-bottom: 0;
2384
}
2385
}
2386
tab.reorderable-page {
2388
border-style: solid none;
2389
}
2390
}
2391
}
2392
}
2393
}
2394
/**
2396
* Scrollbars
2397
*/
2398
scrollbar {
2400
$_slider_min_length: 24px;
2401
// disable steppers
2403
@at-root * {
2404
-GtkScrollbar-has-backward-stepper: false;
2405
-GtkScrollbar-has-forward-stepper: false;
2406
}
2407
transition: $transition;
2409
// background-color: $background;
2410
background-clip: padding-box;
2411
// scrollbar border
2413
&.top { border-bottom: 1px solid divider($on-surface); }
2414
&.bottom { border-top: 1px solid divider($on-surface); }
2415
&.left { border-right: 1px solid divider($on-surface); }
2416
&.right { border-left: 1px solid divider($on-surface); }
2417
// slider
2419
slider {
2420
transition: background-color $duration $ease-out;
2421
min-width: 8px;
2422
min-height: 8px;
2423
border: 4px solid transparent;
2424
border-radius: $circular-radius;
2425
background-clip: padding-box;
2426
background-color: disabled($on-surface);
2427
&:hover {
2429
background-color: hint($on-surface);
2430
}
2431
&:active {
2433
background-color: $on-surface;
2434
}
2435
&:disabled {
2437
background-color: disabled-hint($on-surface);
2438
}
2439
}
2440
&.fine-tune {
2442
slider {
2443
min-width: 4px;
2444
min-height: 4px;
2445
}
2446
&.horizontal slider {
2448
margin: 2px 0;
2449
}
2450
&.vertical slider {
2452
margin: 0 2px;
2453
}
2454
}
2455
&.overlay-indicator {
2457
&:not(.fine-tune) slider {
2458
transition-property: background-color, min-height, min-width;
2459
}
2460
&:not(.dragging):not(.hovering) {
2462
border-color: transparent;
2463
background-color: transparent;
2464
slider {
2466
min-width: 4px;
2467
min-height: 4px;
2468
margin: 4px - 1px;
2469
border: 1px solid rgba($base, .3);
2470
}
2471
button {
2473
min-width: 4px;
2474
min-height: 4px;
2475
margin: 4px - 1px;
2476
border: 1px solid rgba($base, .3);
2477
border-radius: $circular-radius;
2478
background-color: disabled($on-surface);
2479
background-clip: padding-box;
2480
-gtk-icon-source: none;
2481
&:disabled {
2483
background-color: disabled-hint($on-surface);
2484
}
2485
}
2486
&.horizontal {
2488
slider {
2489
min-width: $_slider_min_length;
2490
}
2491
button {
2493
min-width: 8px;
2494
}
2495
}
2496
&.vertical {
2498
slider {
2499
min-height: $_slider_min_length;
2500
}
2501
button {
2503
min-height: 8px;
2504
}
2505
}
2506
}
2507
&.dragging,
2509
&.hovering {
2510
background-color: rgba($surface, .9);
2511
}
2512
}
2513
&.horizontal slider {
2515
min-width: $_slider_min_length;
2516
}
2517
&.vertical slider {
2519
min-height: $_slider_min_length;
2520
}
2521
// button styling
2523
button {
2524
@extend %button-flat-basic;
2525
min-width: 16px;
2527
min-height: 16px;
2528
padding: 0;
2529
border-radius: 0;
2530
}
2531
// button icons
2533
&.vertical {
2534
button {
2535
&.down {
2536
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2537
}
2538
&.up {
2540
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2541
}
2542
}
2543
}
2544
&.horizontal {
2546
button {
2547
&.down {
2548
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2549
}
2550
&.up {
2552
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2553
}
2554
}
2555
}
2556
}
2557
/**
2560
* Switch
2561
*/
2562
switch {
2564
transition: all $duration $ease-out;
2565
margin: $container-padding 0;
2566
padding: 0 2px;
2567
border: 5px solid transparent;
2568
border-radius: $circular-radius;
2569
background-color: stroke($on-surface);
2570
background-clip: padding-box;
2571
font-size: 0;
2572
&:checked {
2574
background-color: rgba($primary, .5);
2575
}
2576
&:disabled {
2578
opacity: .5;
2579
}
2580
// hide on/off icons for >=3.24.5
2582
image {
2583
margin: -8px;
2584
-gtk-icon-transform: scale(0);
2585
}
2586
slider {
2588
transition: all $duration $ease-out;
2589
min-width: 20px;
2590
min-height: 20px;
2591
margin: -3px -2px;
2592
border-radius: $circular-radius;
2593
outline: none;
2594
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2595
background-color: $switch-surface;
2596
}
2597
&:hover slider {
2599
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2600
}
2601
&:focus slider {
2603
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2604
}
2605
&:checked slider {
2607
background-color: $primary;
2608
}
2609
&:checked:hover slider {
2611
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2612
}
2613
&:checked:focus slider {
2615
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2616
}
2617
row:selected & {
2619
}
2620
}
2621
/**
2623
* Check and Radio items
2624
*/
2625
// draw regular check and radio items using our PNG assets
2627
// all assets are rendered from assets.svg. never add pngs directly
2628
// selection-mode
2630
.view.content-view.check:not(list),
2631
.content-view:not(list) check {
2632
min-height: 40px;
2633
min-width: 40px;
2634
margin: 0;
2635
padding: 0;
2636
box-shadow: none;
2637
background-color: transparent;
2638
background-image: none;
2639
-gtk-icon-shadow: $icon-shadow-z2;
2640
&:hover,
2642
&:active {
2643
-gtk-icon-shadow: $icon-shadow-z4;
2644
}
2645
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2647
&#{$class} {
2648
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2649
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2651
}
2652
}
2653
}
2654
checkbutton,
2656
radiobutton {
2657
outline: none;
2658
}
2659
checkbutton.text-button,
2661
radiobutton.text-button {
2662
// this is for a nice focus on check and radios text
2663
padding: 2px;
2664
label:not(:only-child) {
2666
margin: 0 4px;
2667
}
2668
}
2669
$check-radio-size: 40px;
2671
check,
2673
radio {
2674
min-height: 24px;
2675
min-width: 24px;
2676
margin: -($check-radio-size - 24px) / 2;
2677
padding: ($check-radio-size - 24px) / 2;
2678
border-radius: $circular-radius;
2679
color: hint($on-surface);
2680
@extend %ripple;
2681
@include ink-color($on-surface);
2682
&:checked,
2684
&:indeterminate {
2685
color: $primary;
2686
@include ink-color($primary);
2687
}
2688
&:disabled {
2690
color: disabled-hint($on-surface);
2691
}
2692
&:only-child {
2694
// margin: -12px;
2695
}
2696
popover modelbutton.flat & {
2698
&,
2699
&:focus,
2700
&:hover,
2701
&:focus:hover,
2702
&:active,
2703
&:disabled {
2704
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2705
box-shadow: none;
2706
background-image: none;
2707
}
2708
&.left:dir(rtl) {
2710
margin-left: -12px;
2711
margin-right: -4px;
2712
}
2713
&.right:dir(ltr) {
2715
margin-left: -4px;
2716
margin-right: -12px;
2717
}
2718
}
2719
menu menuitem & {
2721
transition: none;
2722
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2723
padding: 0;
2724
&:dir(ltr) {
2726
margin-right: 8px;
2727
}
2728
&:dir(rtl) {
2730
margin-left: 8px;
2731
}
2732
&,
2734
&:hover,
2735
&:disabled {
2736
box-shadow: none;
2737
}
2738
}
2739
}
2740
%check,
2742
check {
2743
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2744
&:checked {
2746
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2747
}
2748
&:indeterminate {
2750
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2751
}
2752
}
2753
%radio,
2755
radio {
2756
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2757
&:checked {
2759
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2760
}
2761
&:indeterminate {
2763
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2764
}
2765
border-image-slice: $check-radio-size / 2px;
2767
border-image-width: $check-radio-size / 2;
2768
$radio-indicator-size: 10px / $check-radio-size / 2;
2770
border-image-source:
2772
-gtk-gradient(
2773
radial,
2774
center center, 0,
2775
center center, .001,
2776
to($primary),
2777
to(transparent)
2778
);
2779
&:checked:not(:indeterminate) {
2781
border-image-source:
2782
-gtk-gradient(
2783
radial,
2784
center center, 0,
2785
center center, $radio-indicator-size,
2786
to($primary),
2787
to(transparent)
2788
);
2789
&:disabled {
2791
border-image-source:
2792
-gtk-gradient(
2793
radial,
2794
center center, 0,
2795
center center, $radio-indicator-size,
2796
to(disabled-hint($on-surface)),
2797
to(transparent)
2798
);
2799
}
2800
}
2801
}
2802
%small_check,
2804
menu menuitem check {
2805
min-height: 16px;
2806
min-width: 16px;
2807
border-radius: $corner-radius;
2808
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2809
&:checked {
2811
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2812
}
2813
&:indeterminate {
2815
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2816
}
2817
}
2818
%small_radio,
2820
menu menuitem radio {
2821
min-height: 16px;
2822
min-width: 16px;
2823
border-image: none;
2824
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2825
&:checked {
2827
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2828
}
2829
&:indeterminate {
2831
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2832
}
2833
}
2834
// ANIMATION:
2836
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2837
// the transformation is set on the active state and it get reset on the checked state.
2838
radio:not(:checked):active {
2839
// -gtk-icon-transform: scale(0);
2840
}
2841
// Otherwise, treeview.view styling will be applied...
2843
treeview.view check,
2844
treeview.view radio {
2845
padding: 0;
2846
color: hint($on-surface);
2847
&:checked,
2849
&:indeterminate {
2850
color: $primary;
2851
}
2852
&:disabled {
2854
color: disabled-hint($on-surface);
2855
}
2856
&,
2858
&:hover,
2859
&:selected,
2860
&:selected:hover {
2861
box-shadow: none;
2862
background-color: transparent;
2863
}
2864
}
2865
treeview.view radio:checked {
2867
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2868
border-image: none;
2869
}
2870
/**
2872
* GtkScale
2873
*/
2874
scale {
2876
// sizing
2877
$_marks_length: 8px;
2878
$_marks_distance: 7px;
2879
$trough_size: 2px;
2881
$finetune_trough_size: 4px;
2882
$slider_size: 32px;
2884
$slider_margin: -($slider_size - $trough_size) / 2;
2886
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2887
$color_slider_margin: -($slider_size) * 3 / 4;
2889
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2890
min-height: $trough_size;
2892
min-width: $trough_size;
2893
&.horizontal {
2895
padding: ($medium-size - $trough_size) / 2 12px;
2896
}
2897
&.vertical {
2899
padding: 12px ($medium-size - $trough_size) / 2;
2900
}
2901
// the slider is inside the trough, so to have make it bigger there's a negative margin
2903
slider {
2904
min-height: $slider_size;
2905
min-width: $slider_size;
2906
margin: $slider_margin;
2907
}
2908
// click-and-hold the slider to activate
2910
&.fine-tune {
2911
&.horizontal {
2912
min-height: $finetune_trough_size;
2913
padding-top: ($medium-size - $finetune_trough_size) / 2;
2914
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2915
}
2916
&.vertical {
2918
min-width: $finetune_trough_size;
2919
padding-left: ($medium-size - $finetune_trough_size) / 2;
2920
padding-right: ($medium-size - $finetune_trough_size) / 2;
2921
}
2922
// to make the trough grow in fine-tune mode
2924
slider {
2925
margin: $finetune_slider_margin;
2926
}
2927
}
2928
// the backing bit
2930
trough {
2931
transition: background-color $duration $ease-out;
2932
outline: none;
2933
background-color: stroke($on-surface);
2934
&:disabled {
2936
background-color: disabled-stroke($on-surface);
2937
}
2938
}
2939
// the colored part of the backing bit
2941
highlight {
2942
transition: background-image $duration $ease-out;
2943
background-image: image($primary);
2944
&:disabled {
2946
background-color: $background;
2947
background-image: image(disabled-hint($on-surface));
2948
}
2949
}
2950
// this is another differently styled part of the backing bit, the most relevant use case is for example
2952
// in media player to indicate how much video stream as been cached
2953
fill {
2954
transition: background-color $duration $ease-out;
2955
background-color: stroke($on-surface);
2956
&:disabled {
2958
background-color: transparent;
2959
}
2960
}
2961
slider {
2963
transition: background-color $duration $ease-out,
2964
background-size $ripple-fade-out-duration $ease-out,
2965
background-image $ripple-fade-out-opacity-duration $ease-out;
2966
background-repeat: no-repeat;
2967
background-position: center;
2968
background-size: auto, 1000% 1000%;
2969
border-radius: 50%;
2970
color: $primary;
2971
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2973
&#{$class} {
2974
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2975
background-image:
2977
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2978
radial-gradient(circle, transparent 10%, transparent 0%);
2979
}
2980
}
2981
&:hover {
2983
background-color: overlay("hover", $primary);
2984
}
2985
&:focus {
2987
background-color: overlay("focus", $primary);
2988
}
2989
&:active {
2991
$_url: 'assets/scale-slider#{$asset-suffix}';
2992
transition: background-color $duration $ease-out,
2994
background-size 0ms,
2995
background-image 0ms;
2996
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2997
background-image:
2998
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2999
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3000
background-size: auto, 0% 0%;
3001
}
3002
}
3003
marks,
3005
value {
3006
color: hint($on-surface);
3007
}
3008
indicator {
3010
background-color: stroke($on-surface);
3011
color: transparent;
3012
}
3013
//marks margins
3015
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3016
(horizontal, bottom, bottom, top),
3017
(vertical, top, left, right),
3018
(vertical, bottom, right, left) {
3019
&.#{$scale_orient} marks {
3020
&.#{$marks_class} {
3021
margin-#{$marks_margin}: $_marks_distance;
3022
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3023
}
3024
}
3025
&.#{$scale_orient}.fine-tune marks {
3027
&.#{$marks_class} {
3028
margin-#{$marks_margin}: $_marks_distance - 1px;
3029
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3030
}
3031
}
3032
}
3033
&.horizontal {
3035
indicator {
3036
min-height: $_marks_length;
3037
min-width: 1px;
3038
}
3039
}
3040
&.vertical {
3042
indicator {
3043
min-height: 1px;
3044
min-width: $_marks_length;
3045
}
3046
}
3047
// *WARNING* scale with marks madness following
3049
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3051
@each $marks_class, $marks_infix in (
3052
".marks-before:not(.marks-after)": "-marks-before",
3053
".marks-after:not(.marks-before)": "-marks-after"
3054
) {
3055
&#{$dir_class}#{$marks_class} {
3056
slider {
3057
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3058
&#{$state_class} {
3059
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3060
background-image:
3062
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3063
radial-gradient(circle, transparent 10%, transparent 0%);
3064
}
3065
}
3066
&:active {
3068
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3069
background-image:
3071
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3072
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3073
}
3074
}
3075
}
3076
}
3077
}
3078
&.color {
3080
min-height: 0;
3081
min-width: 0;
3082
&.horizontal {
3084
padding: 0 0 12px 0;
3085
slider {
3087
&:dir(ltr), &:dir(rtl) { // specificity bump
3088
margin-bottom: $color_slider_margin;
3089
margin-top: $color_marks_slider_margin;
3090
}
3091
}
3092
}
3093
&.vertical {
3095
&:dir(ltr) {
3096
padding: 0 0 0 12px;
3097
slider {
3099
margin-left: $color_slider_margin;
3100
margin-right: $color_marks_slider_margin;
3101
}
3102
}
3103
&:dir(rtl) {
3105
padding: 0 12px 0 0;
3106
slider {
3108
margin-right: $color_slider_margin;
3109
margin-left: $color_marks_slider_margin;
3110
}
3111
}
3112
}
3113
}
3114
}
3115
/**
3117
* Progress bars
3118
*/
3119
progressbar {
3121
// sizing
3122
&.horizontal {
3123
trough,
3124
progress {
3125
min-height: $bar-size;
3126
}
3127
}
3128
&.vertical {
3130
trough,
3131
progress {
3132
min-width: $bar-size;
3133
}
3134
}
3135
// FIXME: insensitive state missing and some other state should be set probably
3137
color: hint($on-surface);
3138
font-size: smaller;
3139
trough {
3141
background-color: disabled-stroke($on-surface);
3142
}
3143
progress {
3145
background-color: $primary;
3146
}
3147
&.osd { // progressbar.osd used for epiphany page loading progress
3149
// min-width: $bar-size;
3150
// min-height: $bar-size;
3151
// background-color: transparent;
3152
trough {
3154
// background-color: transparent;
3155
}
3156
progress {
3158
// background-color: $primary;
3159
}
3160
}
3161
// makes the progress indicator disappear, when the fraction is 0
3163
trough.empty progress {
3164
all: unset;
3165
}
3166
}
3167
/**
3169
* Level Bar
3170
*/
3171
levelbar {
3173
&.horizontal {
3174
block {
3175
min-height: $bar-size;
3176
}
3177
&.discrete block {
3179
min-width: $medium-size;
3180
&:not(:last-child) {
3182
margin-right: 2px;
3183
}
3184
}
3185
}
3186
&.vertical {
3188
block {
3189
min-width: $bar-size;
3190
}
3191
&.discrete block {
3193
min-height: $medium-size;
3194
&:not(:last-child) {
3196
margin-bottom: 2px;
3197
}
3198
}
3199
}
3200
trough {
3202
}
3203
block {
3205
&.low {
3206
background-color: $warning;
3207
}
3208
&.high,
3210
&:not(.empty) {
3211
background-color: $primary;
3212
}
3213
&.full {
3215
background-color: $success;
3216
}
3217
&.empty {
3219
background-color: disabled-stroke($on-surface);
3220
}
3221
}
3222
}
3223
/**
3225
* Print dialog
3226
*/
3227
printdialog {
3229
paper {
3230
padding: 0;
3231
border: 1px solid divider($on-surface);
3232
background-clip: padding-box;
3233
background-color: $base;
3234
color: $on-surface;
3235
}
3236
.dialog-action-box {
3238
margin: 12px;
3239
}
3240
}
3241
/**
3243
* Frames
3244
*/
3245
frame > border,
3247
.frame {
3248
margin: 0;
3249
padding: 0;
3250
border: 1px solid divider($on-surface);
3251
border-radius: 0;
3252
box-shadow: none;
3253
background-clip: padding-box;
3254
background-color: $base;
3255
&.flat {
3257
border-style: none;
3258
background-color: transparent;
3259
}
3260
}
3261
// for backward compatibility
3263
frame.flat > border {
3264
border-style: none;
3265
background-color: transparent;
3266
}
3267
actionbar > revealer > box {
3269
padding: $container-padding;
3270
border-top: 1px solid divider($on-surface);
3271
// background-color: $base;
3272
button:not(.suggested-action):not(.destructive-action) {
3274
@extend %button-flat;
3275
}
3276
.linked:not(.vertical) > entry:not(:only-child) {
3278
border-radius: $corner-radius $corner-radius 0 0;
3279
}
3280
}
3281
scrolledwindow {
3283
viewport.frame { // avoid double borders when viewport inside scrolled window
3284
border-style: none;
3285
background-color: transparent;
3286
}
3287
// This is used when content is touch-dragged past boundaries.
3289
// draws a box on top of the content, the size changes programmatically.
3290
@at-root overshoot {
3291
&.top { @include overshoot(top); }
3292
&.bottom { @include overshoot(bottom); }
3294
&.left { @include overshoot(left); }
3296
&.right { @include overshoot(right); }
3298
}
3299
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3301
@at-root undershoot {
3302
&.top { @include undershoot(top); }
3303
&.bottom { @include undershoot(bottom); }
3305
&.left { @include undershoot(left); }
3307
&.right { @include undershoot(right); }
3309
}
3310
@at-root junction { // the small square between two scrollbars
3312
border-style: solid none none solid;
3313
border-width: 1px;
3314
border-color: divider($on-surface);
3315
// background-color: $background;
3316
&:dir(rtl) {
3318
border-style: solid solid none none;
3319
}
3320
}
3321
}
3322
// vbox and hbox separators
3324
separator {
3325
min-width: 1px;
3326
min-height: 1px;
3327
background-color: divider($on-surface);
3328
}
3329
%hide_separators {
3331
min-width: 0;
3332
min-height: 0;
3333
background-color: transparent;
3334
}
3335
/**
3337
* Lists
3338
*/
3339
list {
3341
border-color: divider($on-surface);
3342
// background-color: $base;
3343
row {
3345
padding: 2px;
3346
}
3347
}
3348
row {
3350
background-clip: padding-box;
3351
&.activatable {
3353
@extend %ripple;
3354
@include ink-color($on-surface);
3355
@include list-item;
3356
// this is for indicathing which row generated a popover
3358
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3359
&.has-open-popup {
3360
background-color: overlay("activated", $on-surface);
3361
}
3362
}
3363
&:selected {
3365
background-color: $overlay-selected;
3366
@include ink-color($primary);
3368
&.has-open-popup {
3370
background-color: overlay("activated", $primary, $background: $overlay-selected);
3371
}
3372
}
3373
}
3374
/**
3376
* App Notifications
3377
*/
3378
.app-notification {
3380
// @extend %osd;
3381
@extend %toolbar-osd;
3383
margin: 8px;
3385
button {
3387
@extend %button-flat;
3388
&.text-button:not(:disabled) {
3390
color: $primary;
3391
@include ink-color($primary);
3392
}
3393
}
3394
&.frame {
3396
border-style: none;
3397
}
3398
border {
3400
border-style: none;
3401
background-color: transparent;
3402
}
3403
}
3404
/**
3406
* Expanders
3407
*/
3408
expander {
3410
title > arrow {
3411
transition: all $duration $ease-out;
3412
min-width: 16px;
3413
min-height: 16px;
3414
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3415
-gtk-icon-transform: rotate(-90deg);
3416
&:dir(rtl) {
3418
-gtk-icon-transform: rotate(90deg);
3419
}
3420
&:checked {
3422
-gtk-icon-transform: unset;
3423
}
3424
color: hint($on-surface);
3426
&:hover,
3428
&:active {
3429
color: $on-surface;
3430
}
3431
&:disabled {
3433
color: disabled-hint($on-surface);
3434
}
3435
}
3436
}
3437
/**
3439
* Calendar
3440
*/
3441
calendar {
3443
padding: 1px;
3444
border: 1px solid divider($on-surface);
3445
background-clip: padding-box;
3446
background-color: $base;
3447
color: $on-surface;
3448
&:disabled {
3450
color: disabled($on-surface);
3451
}
3452
&:selected {
3454
border-radius: $corner-radius + 1px;
3455
background-color: $overlay-selected;
3456
}
3457
&.header {
3459
border-style: none none solid;
3460
border-color: divider($on-surface);
3461
border-radius: 0;
3462
}
3463
&.button {
3465
border-radius: $corner-radius + 1px;
3466
color: hint($on-surface);
3467
&:hover {
3469
background-image: image(overlay("hover", $on-surface));
3470
}
3471
&:disabled {
3473
color: disabled-hint($on-surface);
3474
}
3475
}
3476
&.highlight {
3478
color: hint($on-surface);
3479
font-weight: 500;
3480
}
3481
&:indeterminate {
3483
color: disabled-hint($on-surface);
3484
}
3485
}
3486
/**
3488
* Dialogs
3489
*/
3490
// Message Dialog styling
3492
messagedialog {
3493
&.background {
3494
background-color: $surface;
3495
}
3496
.titlebar {
3498
min-height: $small-size;
3499
border-style: none;
3500
box-shadow: inset 0 1px highlight($surface);
3501
background-color: $surface;
3502
color: $on-surface;
3503
&:backdrop {
3505
background-color: $surface;
3506
color: hint($on-surface);
3507
}
3508
}
3509
&.csd { // rounded bottom border styling for csd version
3511
&.background {
3512
// bigger radius for better antialiasing
3513
border-bottom-left-radius: $corner-radius;
3514
border-bottom-right-radius: $corner-radius;
3515
}
3516
}
3517
// Hint text
3519
box.vertical > label + label {
3520
color: hint($on-surface);
3521
}
3522
.dialog-action-box {
3524
margin-top: -$container-padding;
3525
// padding: $container-padding;
3526
button {
3528
@extend %button-flat;
3529
&:not(:last-child) {
3531
margin-right: $container-padding;
3532
}
3533
&:not(:disabled) {
3535
color: $primary;
3536
@include ink-color($primary);
3537
}
3538
&.suggested-action:not(:disabled) {
3540
background-color: transparent;
3541
// color: $primary;
3542
// @include ink-color($primary);
3543
}
3544
&.destructive-action:not(:disabled) {
3546
background-color: transparent;
3547
color: $error;
3548
@include ink-color($error);
3549
}
3550
}
3551
}
3552
}
3553
filechooser {
3555
.dialog-action-box {
3556
border-top: 1px solid divider($on-surface);
3557
}
3558
#pathbarbox {
3560
border-bottom: 1px solid divider($on-surface);
3561
// background-color: $background;
3562
// The new folder button
3564
> stack > box > button {
3565
@extend %button-flat;
3566
border-radius: $circular-radius;
3568
}
3569
}
3570
}
3571
filechooserbutton:drop(active) {
3573
// box-shadow: none;
3574
}
3575
/**
3577
* Sidebar
3578
*/
3579
.sidebar {
3581
border-style: none;
3582
background-color: transparent;
3583
&:not(separator) {
3585
@at-root %sidebar_left,
3586
&:dir(ltr),
3587
&.left,
3588
&.left:dir(rtl) {
3589
border-right: 1px solid divider($on-surface);
3590
border-left-style: none;
3591
}
3592
@at-root %sidebar_right,
3594
&:dir(rtl),
3595
&.right {
3596
border-left: 1px solid divider($on-surface);
3597
border-right-style: none;
3598
}
3599
}
3600
list {
3602
// background-color: transparent;
3603
}
3604
paned & {
3606
&,
3607
&.left,
3608
&.right,
3609
&.left:dir(rtl),
3610
&:dir(rtl),
3611
&:dir(ltr) {
3612
border-style: none;
3613
}
3614
}
3615
}
3616
stacksidebar.sidebar {
3618
& {
3619
&:dir(ltr),
3620
&.left,
3621
&.left:dir(rtl) {
3622
list {
3623
@extend %sidebar_left;
3624
}
3625
}
3626
&:dir(rtl),
3628
&.right {
3629
list {
3630
@extend %sidebar_right;
3631
}
3632
}
3633
}
3634
+ separator.vertical,
3636
separator.horizontal {
3637
@extend %hide_separators;
3638
}
3639
list {
3641
padding: 4px;
3642
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3643
}
3644
row {
3646
min-height: 32px;
3647
padding: 0 8px - 6px;
3648
border-radius: $corner-radius;
3649
&:selected {
3651
background-color: overlay("activated", $primary);
3652
color: $primary;
3653
font-weight: 500;
3654
@include ink-color($primary);
3655
}
3656
+ row {
3658
margin-top: 4px;
3659
}
3660
> label {
3662
padding-left: 6px;
3663
padding-right: 6px;
3664
}
3665
&.needs-attention > label {
3667
@extend %needs-attention;
3668
}
3669
}
3670
}
3671
separator.sidebar {
3673
background-color: divider($on-surface);
3674
&.selection-mode,
3676
.selection-mode & {
3677
// background-color: divider($on-primary);
3678
}
3679
}
3680
/**
3682
* File chooser
3683
*/
3684
// dim the sidebar icons, see bug #786613 for details on this oddity
3686
row image.sidebar-icon {
3687
transition: color $duration $ease-out;
3688
color: hint($on-surface);
3689
&:disabled {
3691
color: disabled-hint($on-surface);
3692
}
3693
}
3694
placessidebar.sidebar {
3696
> viewport.frame {
3697
border-style: none;
3698
background-color: transparent;
3699
}
3700
list {
3702
padding: (4px - 3px) 0 4px;
3703
}
3704
row {
3706
// Needs overriding of the GtkListBoxRow padding
3707
min-height: 32px;
3708
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3709
padding: 0;
3710
border-radius: $corner-radius;
3711
// Using margins/padding directly in the SidebarRow
3713
// will make the animation of the new bookmark row jump
3714
> revealer {
3715
padding: 0 8px;
3716
}
3717
&:selected {
3719
background-color: overlay("activated", $primary);
3720
color: $primary;
3721
font-weight: 500;
3722
@include ink-color($primary);
3723
image.sidebar-icon {
3725
color: $primary;
3726
}
3727
}
3728
&:disabled {
3730
color: disabled($on-surface);
3731
}
3732
image.sidebar-icon {
3734
&:dir(ltr) {
3735
padding-right: 8px;
3736
}
3737
&:dir(rtl) {
3739
padding-left: 8px;
3740
}
3741
}
3742
label.sidebar-label {
3744
&:dir(ltr) {
3745
padding-right: 2px;
3746
}
3747
&:dir(rtl) {
3749
padding-left: 2px;
3750
}
3751
}
3752
@at-root button.sidebar-button {
3754
@extend %button-flat-basic;
3755
@extend %button-small;
3756
}
3757
&.sidebar-placeholder-row {
3759
background-color: overlay("hover", $on-surface);
3760
}
3761
&.sidebar-new-bookmark-row {
3763
color: $primary;
3764
image.sidebar-icon {
3766
color: $primary;
3767
}
3768
}
3769
}
3770
}
3771
placesview {
3773
.server-list-button {
3774
> image {
3775
-gtk-icon-transform: rotate(0turn);
3776
}
3777
&:checked > image {
3779
-gtk-icon-transform: rotate(-.5turn);
3780
}
3781
}
3782
// this selects the "connect to server" label
3784
> actionbar > revealer > box > label {
3785
padding-left: 8px;
3786
padding-right: 8px;
3787
}
3788
}
3789
/**
3791
* Paned
3792
*/
3793
paned {
3795
> separator {
3796
min-width: 1px;
3797
min-height: 1px;
3798
-gtk-icon-source: none; // defeats the ugly default handle decoration
3799
border-style: none; // just to be sure
3800
background-color: transparent;
3801
// workaround, using background istead of a border since the border will get rendered twice (?)
3802
background-image: image(divider($on-surface));
3803
background-size: 1px 1px;
3804
background-clip: content-box; // avoids borders image being rendered twice (?)
3805
&.wide {
3807
min-width: 6px;
3808
min-height: 6px;
3809
// background-color: $background;
3810
background-image: image(divider($on-surface)), image(divider($on-surface));
3811
background-size: 1px 1px, 1px 1px;
3812
}
3813
}
3814
&.horizontal > separator {
3816
background-repeat: repeat-y;
3817
&:dir(ltr) {
3819
margin: 0 -8px 0 0;
3820
padding: 0 8px 0 0;
3821
background-position: left;
3822
}
3823
&:dir(rtl) {
3825
margin: 0 0 0 -8px;
3826
padding: 0 0 0 8px;
3827
background-position: right;
3828
}
3829
&.wide {
3831
margin: 0;
3832
padding: 0;
3833
background-repeat: repeat-y, repeat-y;
3834
background-position: left, right;
3835
}
3836
}
3837
&.vertical > separator {
3839
margin: 0 0 -8px 0;
3840
padding: 0 0 8px 0;
3841
background-repeat: repeat-x;
3842
background-position: top;
3843
&.wide {
3845
margin: 0;
3846
padding: 0;
3847
background-repeat: repeat-x, repeat-x;
3848
background-position: bottom, top;
3849
}
3850
}
3851
}
3852
/**
3854
* GtkInfoBar
3855
*/
3856
infobar {
3858
border-style: none;
3859
&.action:hover > revealer > box {
3861
background-image: image(overlay("hover", $on-surface));
3862
}
3863
&.info > revealer > box,
3865
&.question > revealer > box {
3866
border-bottom: 1px solid divider($on-surface);
3867
// background-color: $base;
3868
button {
3870
@extend %button-flat;
3871
&.text-button:not(:disabled) {
3873
color: $primary;
3874
@include ink-color($primary);
3875
}
3876
}
3877
}
3878
&.warning > revealer > box {
3880
background-color: $warning;
3881
color: $on-warning;
3882
button.flat {
3884
color: $on-warning;
3885
@include ink-color($on-warning);
3886
}
3887
selection {
3889
}
3890
*:link {
3892
color: $on-warning;
3893
}
3894
}
3895
&.error > revealer > box {
3897
background-color: $error;
3898
color: $on-error;
3899
button.flat {
3901
color: $on-error;
3902
@include ink-color($on-error);
3903
}
3904
selection {
3906
}
3907
*:link {
3909
color: $on-error;
3910
}
3911
}
3912
// Remove ugly hard-coded padding
3914
button label {
3915
margin: 0 -4px;
3916
}
3917
}
3918
/**
3920
* Tooltips
3921
*/
3922
tooltip {
3924
&.background {
3925
// background-color needs to be set this way otherwise it gets drawn twice
3926
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3927
background-color: $tooltip;
3928
color: $on-tooltip;
3929
}
3930
// padding: 4px; /* not working */
3932
border-radius: $corner-radius;
3933
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3934
&:not(.csd):not(.unity-csd) {
3936
// border: 1px solid divider($on-surface);
3937
// border-radius: $corner-radius + 1px;
3938
}
3939
// FIXME: we need a border or tooltips vanish on black background.
3941
decoration {
3942
background-color: transparent;
3943
}
3944
> box {
3946
margin: -6px; // Remove hard-coded 6px margin
3947
min-height: 32px - 4px * 2;
3948
padding: 4px 8px;
3949
}
3950
.dim-label {
3952
color: hint($on-tooltip);
3953
}
3954
* {
3956
// workaround for Eclipse.
3957
// do not include any declaration here.
3958
}
3959
}
3960
/**
3962
* Color Chooser
3963
*/
3964
colorswatch {
3966
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3967
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3968
// applied to the overlay box.
3969
// base color corners rounding
3971
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3972
// sports a bigger radius.
3973
// nth-child is needed by the custom color strip.
3974
&.top {
3976
border-top-left-radius: $corner-radius + .5px;
3977
border-top-right-radius: $corner-radius + .5px;
3978
overlay {
3980
border-top-left-radius: $corner-radius;
3981
border-top-right-radius: $corner-radius;
3982
}
3983
}
3984
&.bottom {
3986
border-bottom-left-radius: $corner-radius + .5px;
3987
border-bottom-right-radius: $corner-radius + .5px;
3988
overlay {
3990
border-bottom-left-radius: $corner-radius;
3991
border-bottom-right-radius: $corner-radius;
3992
}
3993
}
3994
&.left,
3996
&:first-child:not(.top) {
3997
border-top-left-radius: $corner-radius + .5px;
3998
border-bottom-left-radius: $corner-radius + .5px;
3999
overlay {
4001
border-top-left-radius: $corner-radius;
4002
border-bottom-left-radius: $corner-radius;
4003
}
4004
}
4005
&.right,
4007
&:last-child:not(.bottom) {
4008
border-top-right-radius: $corner-radius + .5px;
4009
border-bottom-right-radius: $corner-radius + .5px;
4010
overlay {
4012
border-top-right-radius: $corner-radius;
4013
border-bottom-right-radius: $corner-radius;
4014
}
4015
}
4016
&.dark {
4018
color: $on-dark;
4019
}
4020
&.light {
4022
color: $on-light;
4023
}
4024
overlay {
4026
transition: $transition-shadow;
4027
box-shadow: $shadow-z1;
4028
&:drop(active),
4030
&:hover {
4031
box-shadow: $shadow-z3;
4032
}
4033
}
4034
&#add-color-button {
4036
border-radius: $corner-radius $corner-radius 0 0;
4037
color: $on-surface;
4038
&:only-child {
4040
border-radius: $corner-radius;
4041
}
4042
overlay {
4044
background-color: $surface;
4045
}
4046
}
4047
&:disabled {
4049
opacity: .5;
4050
overlay {
4052
box-shadow: none;
4053
}
4054
}
4055
row:selected & {
4057
}
4058
&#editor-color-sample {
4060
border-radius: $corner-radius + .5px;
4061
overlay {
4063
border-radius: $corner-radius;
4064
&:hover {
4066
// box-shadow: $shadow-z1;
4067
}
4068
}
4069
}
4070
}
4071
// colorscale popup
4073
colorchooser .popover.osd {
4074
transition: $transition-shadow;
4075
border-radius: $corner-radius;
4076
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4077
background-color: $surface;
4078
&:backdrop {
4080
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4081
}
4082
}
4083
/**
4085
* Misc
4086
*/
4087
// content view (grid/list)
4089
.content-view {
4090
// background-color: $background;
4091
&:hover {
4093
// -gtk-icon-effect: highlight;
4094
}
4095
rubberband,
4097
.rubberband {
4098
@extend %rubberband;
4099
}
4100
}
4101
.scale-popup {
4103
.osd & {
4104
// @extend %osd;
4105
// FIXME: quick hack, redo properly
4107
button.flat {
4108
}
4109
}
4110
// +/- buttons on GtkVolumeButton popup
4112
button {
4113
}
4114
}
4115
/**
4117
* Window Decorations
4118
*/
4119
decoration {
4121
transition: $transition-shadow;
4122
border-radius: $corner-radius $corner-radius 0 0;
4123
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4124
// FIXME rationalize shadows
4126
// this is used for the resize cursor area
4128
margin: 8px;
4129
&:backdrop {
4131
// the transparent shadow here is to enforce that the shadow extents don't
4132
// change when we go to backdrop, to prevent jumping windows.
4133
// The biggest shadow should be in the same order then in the active state
4134
// or the jumping will happen during the transition.
4135
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4136
}
4137
.maximized &,
4139
.fullscreen &,
4140
.tiled &,
4141
.tiled-top &,
4142
.tiled-right &,
4143
.tiled-bottom &,
4144
.tiled-left & {
4145
border-radius: 0;
4146
}
4147
.popup & {
4149
box-shadow: none;
4150
}
4151
// server-side decorations as used by mutter
4153
.ssd & {
4154
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4155
}
4156
.csd.popup & {
4158
border-radius: $corner-radius;
4159
box-shadow: $shadow-z4;
4160
}
4161
tooltip.csd & {
4163
border-radius: $corner-radius;
4164
box-shadow: none;
4165
}
4166
messagedialog.csd & {
4168
border-radius: $corner-radius;
4169
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4170
&:backdrop {
4172
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4173
}
4174
}
4175
.solid-csd & {
4177
margin: 0;
4178
padding: 2px;
4179
border-radius: 0;
4180
box-shadow: none;
4181
box-shadow: inset 0 1px highlight($titlebar);
4182
background-color: $titlebar;
4183
&:backdrop {
4185
background-color: $titlebar-backdrop;
4186
}
4187
}
4188
}
4189
// Window Close button
4191
button.titlebutton {
4192
border-radius: $circular-radius;
4193
.selection-mode & {
4195
}
4196
}
4197
// catch all extend :)
4200
.monospace {
4202
font-family: monospace;
4203
}
4204
/**
4206
* Touch Copy & Paste
4207
*/
4208
// touch selection handlebars for the Popover.osd above
4210
cursor-handle {
4211
color: $primary;
4212
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4213
&.top:dir(ltr),
4215
&.bottom:dir(rtl) {
4216
-gtk-icon-transform: rotate(90deg);
4217
}
4218
&.bottom:dir(ltr),
4220
&.top:dir(rtl) {
4221
-gtk-icon-transform: unset;
4222
}
4223
&.insertion-cursor:dir(ltr),
4225
&.insertion-cursor:dir(rtl) {
4226
padding-top: 6px;
4227
-gtk-icon-transform: rotate(45deg);
4228
}
4229
}
4230
// Decouple the font of context menus from their entry/textview
4232
.context-menu {
4233
font: initial;
4234
}
4235
// shortcut window keys
4237
.keycap {
4238
min-width: 28px - 8px * 2;
4239
min-height: 28px - 2px;
4240
margin-top: 2px;
4241
padding-bottom: 2px;
4242
padding-left: 8px;
4243
padding-right: 8px;
4244
border: solid 1px divider($on-surface);
4246
border-radius: $corner-radius + 1px;
4247
box-shadow: inset 0 -2px divider($on-surface);
4248
background-clip: padding-box;
4249
background-color: $surface;
4250
color: $on-surface;
4251
font-size: smaller;
4252
}
4253
// FIXME needs to be done widget by widget, this wildcard should really die
4255
:not(decoration):not(window):drop(active) {
4256
// caret-color: $primary;
4257
}
4258
// FIXME aggregate with buttons
4260
stackswitcher button.text-button {
4261
min-width: 100px;
4262
}
4263
// FIXME aggregate with buttons
4265
stackswitcher button.circular,
4266
stackswitcher button.text-button.circular {
4267
min-width: $medium-size;
4268
min-height: $medium-size;
4269
padding: 0;
4270
}
4271
/**
4273
* App Icons
4274
*/
4275
// Outline for low res icons
4277
.lowres-icon {
4278
// -gtk-icon-shadow: none;
4279
}
4280
// Drapshadow for large icons
4282
.icon-dropshadow {
4283
// -gtk-icon-shadow: none;
4284
}
4285
/**
4287
* Emoji
4288
*/
4289
popover.emoji-picker {
4291
padding: 0;
4292
entry {
4294
border-bottom: 1px solid divider($on-surface);
4295
border-image: none;
4296
border-radius: 0;
4297
box-shadow: none;
4298
background-color: transparent;
4299
}
4300
scrolledwindow {
4302
border-bottom: 1px solid divider($on-surface);
4303
}
4304
}
4305
button.emoji-section {
4307
margin: 4px;
4308
&:checked {
4310
background-color: overlay("activated", $primary);
4311
color: $primary;
4312
@include ink-color($primary);
4313
}
4314
&:not(:last-child) {
4316
margin-right: 0;
4317
}
4318
}
4319
popover.emoji-picker .emoji {
4321
min-width: 3em;
4322
min-height: 3em;
4323
padding: 0 8px;
4324
// font-size: larger;
4325
widget {
4327
transition: $transition;
4328
border-radius: $corner-radius;
4329
&:hover {
4331
background-color: overlay("hover", $on-surface);
4332
}
4333
}
4334
}
4335
popover.emoji-completion {
4337
padding: 8px 0;
4338
arrow {
4340
border: none;
4341
background: none;
4342
}
4343
.emoji-completion-row {
4345
min-height: $menuitem-size;
4346
padding: 0 12px;
4347
}
4348
.emoji:hover {
4350
background-color: overlay("hover", $on-surface);
4351
}
4352
}
4353