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
margin: 0 4px;
213
padding: 0 8px;
214
border-radius: $corner-radius;
215
color: disabled($on-surface);
216
font-weight: 500;
217
&.highlight {
219
background-color: overlay("activated", $primary);
220
color: $primary;
221
}
222
}
223
}
224
%osd,
226
.osd {
227
// opacity: .9;
228
}
229
/**
231
* Spinner Animation
232
*/
233
@keyframes spin {
235
to {
236
-gtk-icon-transform: rotate(1turn);
237
}
238
}
239
spinner {
241
background: none;
242
opacity: 0; // non spinning spinner makes no sense
243
color: $primary;
244
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
245
transition: opacity $duration * 4 $ease-out;
246
animation: spin 1s linear infinite;
247
&:checked {
249
opacity: 1;
250
}
251
&:disabled {
253
color: disabled-hint($on-surface);
254
}
255
}
256
/**
258
* General Typography
259
*/
260
@function pt($size: $font-size) {
262
@return ($size * .75 / 1px) * 1pt;
263
}
264
.large-title {
266
font-weight: 400;
267
font-size: pt(48px);
268
}
269
.title-1 {
271
font-weight: 400;
272
font-size: pt(34px);
273
letter-spacing: pt(.25px);
274
}
275
.title-2 {
277
font-weight: 400;
278
font-size: pt(24px);
279
}
280
.title-3 {
282
font-weight: 500;
283
font-size: pt(20px);
284
letter-spacing: pt(.15px);
285
}
286
.title-4 {
288
font-weight: 400;
289
font-size: pt(16px);
290
letter-spacing: pt(.5px);
291
}
292
.heading {
294
font-weight: 500;
295
font-size: 1em;
296
}
297
.body {
299
font-weight: 400;
300
font-size: 1em;
301
}
302
.caption-heading {
304
font-weight: 500;
305
font-size: pt(12px);
306
letter-spacing: pt(1.5px);
307
}
308
.caption {
310
font-weight: 400;
311
font-size: pt(12px);
312
letter-spacing: pt(.4px);
313
}
314
/**
316
* Text Entries
317
*/
318
%entry,
320
entry {
321
min-height: $medium-size;
322
padding: 0 8px;
323
border-radius: $corner-radius $corner-radius 0 0;
324
@include entry(normal);
326
&:focus {
328
@include entry(checked);
329
}
330
&:drop(active) {
332
@include entry(hover);
333
}
334
&:disabled {
336
@include entry(disabled);
337
}
338
&.flat {
340
min-height: 0;
341
padding: 2px;
342
border-radius: 0;
343
background-color: transparent;
344
}
345
// icons inside the entry
347
image {
348
// min-height: $small-size;
349
// min-width: $small-size;
350
// border-radius: $circular-radius;
351
// @extend %ripple;
352
// @include ink-color($on-surface);
353
color: hint($on-surface);
354
&:hover,
356
&:active {
357
color: $on-surface;
358
}
359
&:disabled {
361
color: disabled($on-surface);
362
}
363
&.left {
365
margin-left: ($medium-size - 16px) / 2 - 8px;
366
margin-right: 6px;
367
}
368
&.right {
370
margin-left: 6px;
371
margin-right: ($medium-size - 16px) / 2 - 8px;
372
}
373
}
374
undershoot {
376
&.left {
377
// @include undershoot(left);
378
}
379
&.right {
381
// @include undershoot(right);
382
}
383
}
384
selection {
386
background-color: $overlay-selected;
387
}
388
// entry error and warning style
390
@each $class, $color in (".error": $error, ".warning": $warning) {
391
&#{$class} {
392
@include entry(normal, $color);
393
&:focus {
395
@include entry(checked, $color);
396
}
397
&:disabled {
399
@include entry(disabled, $color);
400
}
401
}
402
}
403
.osd & {
405
}
406
progress {
408
margin: 0 -8px -4px;
409
border-bottom: 2px solid $primary;
410
background-color: transparent;
411
}
412
// linked entries
414
.linked:not(.vertical) > & {
415
@extend %linked;
416
}
417
// Vertically linked entries
419
.linked.vertical > & {
420
@extend %linked-vertical;
421
}
422
}
423
%entry_raised {
425
border-radius: $corner-radius;
426
@include entry(raised-normal);
428
&:focus {
430
@include entry(raised-focus);
431
}
432
&:drop(active) {
434
@include entry(raised-hover);
435
}
436
&:disabled {
438
@include entry(raised-disabled);
439
}
440
// entry error and warning style
442
@each $class, $color in (".error": $error, ".warning": $warning) {
443
&#{$class} {
444
@include entry(raised-normal, $color);
445
&:focus {
447
@include entry(raised-focus, $color);
448
}
449
&:disabled {
451
@include entry(raised-disabled, $color);
452
}
453
image {
455
color: hint(on($color));
456
&:hover,
458
&:active {
459
color: on($color);
460
}
461
&:disabled {
463
color: disabled(on($color));
464
}
465
}
466
}
467
}
468
}
469
treeview entry {
471
&,
472
&.flat {
473
background-color: $base;
474
&,
476
&:focus {
477
border-image: none;
478
box-shadow: none;
479
}
480
}
481
}
482
.entry-tag {
484
margin: 2px;
485
border-radius: $circular-radius;
486
box-shadow: none;
487
background-color: fill($on-surface);
488
color: $on-surface;
489
&:hover {
491
background-image: image(overlay("hover", $on-surface));
492
}
493
// side margins: compensate the entry padding with a negative margin
495
// then the negative margin itself
496
:dir(ltr) & {
497
margin-left: 4px;
498
margin-right: 0;
499
padding-left: 12px;
500
padding-right: 8px;
501
}
502
:dir(rtl) & {
504
margin-left: 0;
505
margin-right: 4px;
506
padding-left: 8px;
507
padding-right: 12px;
508
}
509
// seems any sizing doesn't work
511
&.button {
512
box-shadow: none;
513
background-color: transparent;
514
color: hint($on-surface);
515
}
516
}
517
/**
519
* Buttons
520
*/
521
// stuff for .needs-attention
523
@keyframes needs-attention {
524
from {
525
background-image:
526
-gtk-gradient(
527
radial,
528
center center, 0,
529
center center, .001,
530
to($primary),
531
to(transparent)
532
);
533
}
534
to {
536
background-image:
537
-gtk-gradient(
538
radial,
539
center center, 0,
540
center center, .5,
541
to($primary),
542
to(transparent)
543
);
544
}
545
}
546
%button,
548
button {
549
min-height: 24px;
550
min-width: 16px;
551
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
552
border-radius: $corner-radius;
553
background-color: $surface;
554
color: $on-surface;
555
font-weight: 500;
556
@extend %ripple;
558
@include ink-color($on-surface, $elevation: true);
559
&:disabled {
561
box-shadow: none;
562
background-color: fill($on-surface);
563
color: disabled($on-surface);
564
}
565
&:checked {
567
background-color: overlay("activated", $primary, $background: $surface);
568
color: $primary;
569
@include ink-color($primary, $elevation: true);
570
&:disabled {
572
box-shadow: none;
573
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
574
color: disabled($on-surface);
575
}
576
}
577
&.text-button {
579
min-width: 64px - 16px * 2;
580
padding-left: 16px;
581
padding-right: 16px;
582
}
583
&.image-button {
585
min-width: 24px;
586
padding: ($medium-size - 24px) / 2;
587
border-radius: $circular-radius;
588
}
589
// NOTE: Some image-only buttons use this as well
591
&.text-button.image-button {
592
min-width: 24px;
593
padding: ($medium-size - 24px) / 2;
594
border-radius: $corner-radius;
595
label {
597
&:first-child {
598
margin-left: 16px - ($medium-size - 24px) / 2;
599
}
600
&:last-child {
602
margin-right: 16px - ($medium-size - 24px) / 2;
603
}
604
}
605
image:not(:only-child) {
607
margin: 0 (24px - 16px) / 2;
608
}
609
}
610
.linked:not(.vertical) > & {
612
@extend %linked;
613
&.image-button:not(.text-button) {
615
@extend %linked-image-button;
616
}
617
}
618
.linked.vertical > & {
620
@extend %linked-vertical;
621
&.image-button:not(.text-button) {
623
@extend %linked-vertical-image-button;
624
}
625
}
626
}
627
%button-flat-basic {
629
background-color: transparent;
630
color: hint($on-surface);
631
@include ink-color($on-surface);
632
&:disabled {
634
background-color: transparent;
635
color: disabled-hint($on-surface);
636
}
637
}
638
%button-flat-activatable {
640
@extend %button-flat-basic;
641
&:checked {
643
background-color: overlay("activated", $on-surface);
644
color: $on-surface;
645
@include ink-color($on-surface);
646
&:disabled {
648
color: disabled($on-surface);
649
}
650
}
651
}
652
%button-flat,
654
button.flat {
655
@extend %button-flat-activatable;
656
&.text-button {
658
min-width: 64px - 8px * 2;
659
padding-left: 8px;
660
padding-right: 8px;
661
}
662
&.text-button.image-button {
664
min-width: 24px;
665
padding: ($medium-size - 24px) / 2;
666
label {
668
&:first-child {
669
margin-left: 12px - ($medium-size - 24px) / 2;
670
}
671
&:last-child {
673
margin-right: 12px - ($medium-size - 24px) / 2;
674
}
675
}
676
}
677
.linked:not(.vertical) > &,
679
.linked.vertical > & {
680
&:not(:only-child) { // specificity bump
681
border-radius: $corner-radius;
682
&.image-button:not(.text-button) {
684
border-radius: $circular-radius;
685
}
686
}
687
}
688
}
689
button {
691
// big standalone buttons like in Documents pager
692
&.osd {
693
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
694
&.image-button {
696
padding: ($large-size - 24px) / 2;
697
}
698
&:disabled {
700
opacity: 0;
701
}
702
}
703
// overlay / OSD style
705
@at-root %osd_button,
706
.osd & {
707
}
708
// Suggested and Destructive Action buttons
710
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
711
&#{$class} {
712
background-color: $color;
713
color: on($color);
714
@include ink-color(on($color), $elevation: true);
715
&:disabled {
717
box-shadow: none;
718
background-color: fill($on-surface);
719
color: disabled($on-surface);
720
}
721
&:checked {
723
background-color: overlay("activated", on($color), $background: $color);
724
}
725
&.flat {
727
background-color: transparent;
728
color: $color;
729
@include ink-color($color);
730
&:disabled {
732
box-shadow: none;
733
background-color: transparent;
734
color: disabled-hint($on-surface);
735
}
736
&:checked {
738
background-color: overlay("activated", $color);
739
}
740
}
741
.osd & {
743
}
744
}
745
}
746
.stack-switcher > & {
748
// to position the needs attention dot, padding is added to the button
749
// child, a label needs just lateral padding while an icon needs vertical
750
// padding added too.
751
> label {
753
margin: 0 -6px;
754
padding: 0 6px;
755
}
756
> image {
758
margin: -3px -6px;
759
padding: 3px 6px;
760
}
761
&.needs-attention {
763
> label,
764
> image {
765
@extend %needs-attention;
766
}
767
&:checked {
769
> label,
770
> image {
771
animation: none;
772
background-image: none;
773
}
774
}
775
}
776
}
777
// hide separators
779
&.font,
780
&.file {
781
separator {
782
@extend %hide_separators;
783
}
784
}
785
&.font {
787
> box > box > label {
788
// font-weight: bold;
789
}
790
}
791
// inline-toolbar buttons
793
.inline-toolbar & {
794
// @extend %button-flat;
795
&:not(.text-button) {
797
border-radius: $circular-radius;
798
}
799
}
800
.primary-toolbar & {
802
-gtk-icon-shadow: none; // tango icons don't need shadows
803
}
804
&.close,
806
&.circular { // The Bloody Circul Button
807
border-radius: $circular-radius;
808
label {
810
// padding: 0;
811
}
812
}
813
}
814
%button-small {
816
min-height: $small-size;
817
min-width: $small-size;
818
padding: 0;
819
border-radius: $circular-radius;
820
}
821
%needs-attention {
823
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
824
background-repeat: no-repeat;
825
background-position: right 3px;
826
background-size: 6px 6px;
827
&:dir(rtl) {
829
background-position: left 3px;
830
}
831
}
832
// all the following is for the +|- buttons on inline toolbars, that way
834
// should really be deprecated...
835
.inline-toolbar toolbutton > button {
836
}
837
// More inline toolbar buttons
839
toolbar.inline-toolbar toolbutton {
840
&:not(:first-child) > button.flat {
841
// @extend %linked-not-first-child;
842
}
843
&:not(:last-child) > button.flat {
845
// @extend %linked-not-last-child;
846
}
847
}
848
%linked-not-first-child {
850
border-top-left-radius: 0;
851
border-bottom-left-radius: 0;
852
}
853
%linked-not-last-child {
855
border-top-right-radius: 0;
856
border-bottom-right-radius: 0;
857
}
858
%linked {
860
&:not(:first-child) {
861
@extend %linked-not-first-child;
862
}
863
&:not(:last-child) {
865
@extend %linked-not-last-child;
866
}
867
}
868
%linked-vertical-not-first-child {
870
border-top-left-radius: 0;
871
border-top-right-radius: 0;
872
}
873
%linked-vertical-not-last-child {
875
border-bottom-left-radius: 0;
876
border-bottom-right-radius: 0;
877
}
878
%linked-vertical {
880
&:not(:first-child) {
881
@extend %linked-vertical-not-first-child;
882
}
883
&:not(:last-child) {
885
@extend %linked-vertical-not-last-child;
886
}
887
}
888
%linked-image-button {
890
&:first-child {
891
border-top-left-radius: $corner-radius;
892
border-bottom-left-radius: $corner-radius;
893
}
894
&:last-child {
896
border-top-right-radius: $corner-radius;
897
border-bottom-right-radius: $corner-radius;
898
}
899
&:only-child {
901
border-radius: $circular-radius;
902
}
903
}
904
%linked-vertical-image-button {
906
&:first-child {
907
border-top-left-radius: $corner-radius;
908
border-top-right-radius: $corner-radius;
909
}
910
&:last-child {
912
border-bottom-left-radius: $corner-radius;
913
border-bottom-right-radius: $corner-radius;
914
}
915
&:only-child {
917
border-radius: $circular-radius;
918
}
919
}
920
/* menu buttons */
922
modelbutton.flat,
923
.menuitem.button.flat {
924
min-height: $menuitem-size;
925
padding: 0 8px;
926
border-radius: $corner-radius;
927
@extend %ripple;
929
@include ink-color($on-surface);
930
&:selected {
932
background-color: $overlay-selected;
933
}
934
}
935
modelbutton.flat arrow {
937
transition: color $duration $ease-out;
938
color: hint($on-surface);
939
&:disabled {
941
color: disabled-hint($on-surface);
942
}
943
&.left {
945
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
946
}
947
&.right {
949
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
950
}
951
}
952
button.color {
954
min-height: $small-size;
955
min-width: $small-size;
956
padding: $container-padding;
957
colorswatch:only-child {
959
&,
960
overlay {
961
// border-radius: 0;
962
}
963
}
964
}
965
/**
967
* Links
968
*/
969
*:link {
971
color: $primary;
972
}
973
*:visited {
975
color: $visited;
976
}
977
button.link {
979
&:link {
980
color: $primary;
981
@include ink-color($primary);
982
}
983
&:visited {
985
color: $visited;
986
@include ink-color($visited);
987
}
988
> label {
990
text-decoration-line: underline;
991
}
992
}
993
/**
995
* GtkSpinButton
996
*/
997
spinbutton {
999
&:not(.vertical) {
1000
// in this horizontal configuration, the whole spinbutton
1001
// behaves as the entry, so we extend the entry styling
1002
// and nuke the style on the internal entry
1003
@extend %entry;
1004
padding: 0;
1006
entry {
1008
min-width: $large-size - 8px * 2;
1009
// reset all the other props since the spinbutton node is styled here
1010
margin: 0;
1011
border-image: none;
1012
border-radius: 0;
1013
box-shadow: none;
1014
background-color: transparent;
1015
}
1016
button {
1018
@extend %button-flat-basic;
1019
@extend %button-small;
1020
// margin: $container-padding;
1022
border: solid $container-padding transparent;
1023
background-clip: padding-box;
1024
// Remove unwanted focus indicator
1026
&:focus:not(:hover):not(:active) {
1027
box-shadow: inset 0 0 0 9999px transparent;
1028
}
1029
&.up:dir(ltr),
1031
&.down:dir(rtl) {
1032
margin-left: -$container-padding / 2;
1033
}
1034
&.up:dir(rtl),
1036
&.down:dir(ltr) {
1037
margin-right: -$container-padding / 2;
1038
}
1039
}
1040
}
1041
// OSD horizontal
1043
.osd &:not(.vertical) {
1044
}
1045
// Vertical
1047
&.vertical {
1048
// in the vertical configuration, we treat the spinbutton
1049
// as a box, and tweak the style of the entry in the middle
1050
// so that it's linked
1051
// FIXME: this should not be set at all, but otherwise it gets the wrong
1053
// color
1054
caret-color: $primary;
1055
// FIXME: this should not be set at all, but otherwise it gets the wrong
1057
// color
1058
&:disabled {
1059
color: disabled($on-surface);
1060
}
1061
entry {
1063
@extend %entry_raised;
1064
min-height: $medium-size;
1066
min-width: $large-size;
1067
padding: 0;
1068
}
1069
button {
1071
min-height: $medium-size;
1072
min-width: $large-size;
1073
padding: 0;
1074
@extend %button-flat-basic;
1076
// Remove unwanted focus indicator
1078
&:focus:not(:hover):not(:active) {
1079
box-shadow: inset 0 0 0 9999px transparent;
1080
}
1081
&.up {
1083
border-radius: $corner-radius $corner-radius 0 0;
1084
}
1085
&.down {
1087
border-radius: 0 0 $corner-radius $corner-radius;
1088
}
1089
}
1090
}
1091
// OSD vertical
1093
.osd &.vertical {
1094
}
1095
// Misc
1097
treeview &:not(.vertical) {
1098
min-height: 0;
1099
border-style: none;
1100
border-radius: 0;
1101
entry {
1103
min-height: 0;
1104
padding: 1px 2px;
1105
}
1106
}
1107
}
1108
/**
1110
* ComboBoxes
1111
*/
1112
combobox {
1114
arrow {
1115
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1116
min-height: 16px;
1117
min-width: 16px;
1118
}
1119
// workaround for menuitem selection
1121
decoration {
1122
transition: none;
1123
}
1124
button.combo cellview {
1126
&:dir(ltr) {
1127
margin-left: 8px - ($medium-size - 16px) / 2;
1128
}
1129
&:dir(rtl) {
1131
margin-right: 8px - ($medium-size - 16px) / 2;
1132
}
1133
}
1134
menu {
1136
padding: 2px 0;
1137
menuitem {
1139
min-height: $medium-size - 2px * 2;
1140
padding: 0 8px;
1141
}
1142
// overflow arrows
1144
> arrow {
1145
&.top {
1146
margin-top: -2px;
1147
}
1148
&.bottom {
1150
margin-top: 2px * 2;
1151
margin-bottom: -2px * 3;
1152
}
1153
}
1154
}
1155
&.linked {
1157
button:nth-child(2) {
1158
&:dir(ltr) {
1159
@extend %linked-not-first-child;
1160
}
1161
&:dir(rtl) {
1163
@extend %linked-not-last-child;
1164
}
1165
}
1166
}
1167
> .linked:not(.vertical) > entry:not(:only-child) {
1169
border-radius: $corner-radius $corner-radius 0 0;
1170
&:first-child {
1172
margin-right: -$medium-size;
1173
padding-right: $medium-size;
1174
}
1175
&:last-child {
1177
margin-left: -$medium-size;
1178
padding-left: $medium-size;
1179
}
1180
}
1181
> .linked:not(.vertical) > button:not(:only-child) {
1183
@extend %button-flat-activatable;
1184
// @extend %button-small;
1185
min-height: 16px;
1187
min-width: 16px;
1188
margin: ($medium-size - $small-size) / 2;
1189
padding: ($small-size - 16px) / 2;
1190
border-radius: $circular-radius;
1191
}
1192
}
1193
// the combo is a composite widget so the way we do button linking doesn't
1195
// work, special case needed. See
1196
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1197
.linked:not(.vertical) > combobox {
1199
&:not(:first-child) > box > button.combo {
1200
@extend %linked-not-first-child;
1201
}
1202
&:not(:last-child) > box > button.combo {
1204
@extend %linked-not-last-child;
1205
}
1206
}
1207
.linked.vertical > combobox {
1209
&:not(:first-child) > box > button.combo {
1210
@extend %linked-vertical-not-first-child;
1211
}
1212
&:not(:last-child) > box > button.combo {
1214
@extend %linked-vertical-not-last-child;
1215
}
1216
}
1217
button.combo:only-child {
1219
border-radius: $corner-radius $corner-radius 0 0;
1220
font-weight: normal;
1221
@include entry(normal);
1223
&:focus {
1225
@include entry(focus);
1226
}
1227
&:drop(active),
1229
&:hover {
1230
@include entry(hover);
1231
}
1232
&:checked {
1234
@include entry(checked);
1235
}
1236
&:disabled {
1238
@include entry(disabled);
1239
}
1240
arrow {
1242
transition: color $duration $ease-out;
1243
color: hint($on-surface);
1244
&:disabled {
1246
color: disabled-hint($on-surface);
1247
}
1248
}
1249
}
1250
/**
1252
* Toolbars
1253
*/
1254
toolbar {
1256
-GtkWidget-window-dragging: true;
1257
padding: 2px;
1258
button {
1260
@extend %button-flat;
1261
}
1262
// on OSD
1264
.osd & {
1265
}
1266
// stand-alone OSD toolbars
1268
&.osd {
1269
@extend %toolbar-osd;
1270
// positional classes for `attached` osd toolbars
1272
&.left,
1273
&.right,
1274
&.top,
1275
&.bottom {
1276
border-radius: 0;
1277
}
1278
&.bottom {
1280
box-shadow: none;
1281
background-color: transparent;
1282
background-image:
1283
linear-gradient(
1284
to bottom,
1285
transparent,
1286
rgba(black, .1) 30%,
1287
rgba(black, .2) 50%,
1288
rgba(black, .4)
1289
);
1290
}
1291
}
1292
// toolbar separators
1294
&.horizontal > separator {
1295
margin: 2px;
1296
}
1297
&.vertical > separator {
1299
margin: 2px;
1300
}
1301
&:not(.inline-toolbar):not(.osd) {
1303
scale,
1304
entry,
1305
spinbutton,
1306
button {
1307
margin: 2px;
1308
}
1309
.linked entry,
1311
.linked spinbutton,
1312
.linked button {
1313
&:not(:first-child) {
1314
margin-left: 0;
1315
}
1316
&:not(:last-child) {
1318
margin-right: 0;
1319
}
1320
}
1321
spinbutton {
1323
entry,
1324
button {
1325
margin: 0;
1326
}
1327
}
1328
switch {
1330
margin: 2px + $container-padding 2px;
1331
}
1332
}
1333
}
1334
%toolbar-osd {
1336
transition: $transition-shadow;
1337
padding: $container-padding;
1338
border-radius: $corner-radius;
1339
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1340
background-color: $surface;
1341
&:backdrop {
1343
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1344
}
1345
}
1346
// searchbar, location-bar & inline-toolbar
1348
.inline-toolbar {
1349
padding: $container-padding;
1350
border-style: solid;
1351
border-width: 0 1px 1px;
1352
border-color: divider($on-surface);
1353
background-color: $base;
1354
background-clip: padding-box;
1355
}
1356
searchbar > revealer > box,
1358
.location-bar {
1359
padding: $container-padding;
1360
border-style: solid;
1361
border-width: 0 0 1px;
1362
border-color: divider($on-surface);
1363
}
1364
searchbar > revealer > box {
1366
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1367
margin: -6px;
1368
padding: $container-padding;
1369
}
1370
/**
1372
* Header bars
1373
*/
1374
.titlebar {
1376
transition: background-color $duration $ease-out, color $duration $ease-out;
1377
border-radius: $corner-radius $corner-radius 0 0;
1378
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1379
background-color: $titlebar;
1380
color: $on-titlebar;
1381
&:disabled {
1383
color: disabled($on-titlebar);
1384
}
1385
&:backdrop {
1387
background-color: $titlebar-backdrop;
1388
color: hint($on-titlebar);
1389
&:disabled {
1391
color: disabled-hint($on-titlebar);
1392
}
1393
}
1394
.title {
1396
padding-left: 12px;
1397
padding-right: 12px;
1398
font-weight: bold;
1399
}
1400
.subtitle {
1402
padding-left: 12px;
1403
padding-right: 12px;
1404
font-size: smaller;
1405
}
1406
.subtitle,
1408
.dim-label {
1409
transition: color $duration $ease-out;
1410
color: hint($on-titlebar);
1411
&:backdrop {
1413
color: disabled($on-titlebar);
1414
}
1415
}
1416
// Don't draw titlebar above titlebar
1418
.titlebar {
1419
background-color: transparent;
1420
box-shadow: none;
1421
}
1422
// The separator for split headerbars
1424
headerbar + separator {
1425
background-color: divider($on-titlebar);
1426
}
1427
entry {
1429
box-shadow: inset 0 -1px stroke($on-titlebar);
1430
background-color: entry-fill($on-titlebar);
1431
color: $on-titlebar;
1432
&:disabled {
1434
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1435
background-color: entry-fill($on-titlebar);
1436
color: disabled($on-titlebar);
1437
}
1438
image {
1440
color: hint($on-titlebar);
1441
&:hover,
1443
&:active {
1444
color: $on-titlebar;
1445
}
1446
&:disabled {
1448
color: disabled($on-titlebar);
1449
}
1450
}
1451
}
1452
.linked:not(.vertical) > entry:not(:only-child) {
1454
border-radius: $corner-radius $corner-radius 0 0;
1455
}
1456
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1458
@extend %button-flat;
1459
border-image:
1461
radial-gradient(
1462
circle closest-corner at center calc(100% - 1px),
1463
$titlebar-indicator 0%,
1464
transparent 0%
1465
) 0 0 0 / 0 0 0;
1466
background-color: transparent;
1467
color: hint($on-titlebar);
1468
@include ink-color($on-titlebar);
1469
&:disabled {
1471
color: disabled-hint($on-titlebar);
1472
}
1473
@at-root %titlebar-button-checked,
1475
&:checked {
1476
border-image:
1477
radial-gradient(
1478
circle closest-corner at center calc(100% - 1px),
1479
$titlebar-indicator 100%,
1480
transparent 0%
1481
) 0 0 2 / 0 0 2px;
1482
background-color: transparent;
1483
color: $on-titlebar;
1484
@include ink-color($on-titlebar);
1485
&:disabled {
1487
background-color: transparent;
1488
color: disabled($on-titlebar);
1489
}
1490
}
1491
&:backdrop {
1493
color: disabled($on-titlebar);
1494
&:disabled {
1496
color: disabled-hint($on-titlebar);
1497
}
1498
&:checked {
1500
color: hint($on-titlebar);
1501
&:disabled {
1503
color: disabled-hint($on-titlebar);
1504
}
1505
}
1506
}
1507
}
1508
button.suggested-action, button.destructive-action {
1510
&:disabled {
1511
background-color: fill($on-titlebar);
1512
color: disabled($on-titlebar);
1513
}
1514
}
1515
// FIXME: Ugly overriding
1517
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1518
min-width: 120px - 8px * 2;
1519
}
1520
// FIXME: Ugly overriding
1522
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1523
min-width: 0;
1524
padding-left: ($medium-size - 24px) / 2;
1525
padding-right: ($medium-size - 24px) / 2;
1526
}
1527
&.selection-mode {
1529
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1530
// but let's keep it for backwards compatibility.
1531
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1532
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1533
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1534
background-color: $primary;
1535
color: $on-primary;
1536
&:backdrop {
1538
color: hint($on-primary);
1539
}
1540
.subtitle:link {
1542
color: $on-primary;
1543
}
1544
button:not(.suggested-action):not(.destructive-action) {
1546
border-image:
1547
radial-gradient(
1548
circle closest-corner at center calc(100% - 1px),
1549
currentcolor 0%,
1550
transparent 0%
1551
) 0 0 0 / 0 0 0;
1552
color: $on-primary;
1553
&:disabled {
1555
color: disabled($on-primary);
1556
}
1557
&:checked {
1559
border-image:
1560
radial-gradient(
1561
circle closest-corner at center calc(100% - 1px),
1562
currentcolor 100%,
1563
transparent 0%
1564
) 0 0 2 / 0 0 2px;
1565
color: $on-primary;
1566
&:disabled {
1568
color: disabled($on-primary);
1569
}
1570
}
1571
&:backdrop {
1573
color: hint($on-primary);
1574
&:disabled {
1576
color: disabled-hint($on-primary);
1577
}
1578
&:checked {
1580
color: hint($on-primary);
1581
&:disabled {
1583
color: disabled-hint($on-primary);
1584
}
1585
}
1586
}
1587
}
1588
.selection-menu {
1590
padding-left: 16px;
1591
padding-right: 16px;
1592
arrow {
1594
-GtkArrow-arrow-scaling: 1;
1595
}
1596
.arrow {
1598
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1599
}
1600
}
1601
}
1602
.selection-mode {
1604
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1605
background-color: $primary;
1606
}
1607
// squared corners when the window is maximized, tiled, or fullscreen
1609
.tiled &,
1610
.tiled-top &,
1611
.tiled-right &,
1612
.tiled-bottom &,
1613
.tiled-left &,
1614
.maximized &,
1615
.fullscreen & {
1616
border-radius: 0;
1617
box-shadow: $shadow-z1;
1618
}
1619
&.default-decoration {
1621
min-height: $small-size;
1622
padding: $container-padding;
1623
box-shadow: inset 0 1px highlight($titlebar);
1624
.tiled &,
1626
.maximized &,
1627
.fullscreen & {
1628
box-shadow: none;
1629
}
1630
button.titlebutton {
1632
min-height: $small-size;
1633
min-width: $small-size;
1634
margin: 0;
1635
padding: 0;
1636
}
1637
// workaround for non-animatable buttons
1639
.background:not(.csd) & button.titlebutton:active {
1640
background-size: 1000% 1000%;
1641
}
1642
}
1643
.solid-csd & {
1645
&:dir(rtl), &:dir(ltr) { // specificity bump
1646
border-radius: 0;
1647
box-shadow: $shadow-z1; // just remove the highlight
1648
}
1649
}
1650
}
1651
headerbar {
1653
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1654
min-height: $large-size;
1655
padding: 0 $container-padding;
1656
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1658
entry,
1659
spinbutton,
1660
button {
1661
margin-top: $container-padding;
1662
margin-bottom: $container-padding;
1663
}
1664
separator.titlebutton {
1666
margin-top: $large-size / 4;
1667
margin-bottom: $large-size / 4;
1668
background-color: divider($on-titlebar);
1669
}
1670
switch {
1672
margin-top: ($large-size - 24px) / 2;
1673
margin-bottom: ($large-size - 24px) / 2;
1674
}
1675
// reset button margins of the spinbutton
1677
spinbutton button {
1678
margin-top: 0;
1679
margin-bottom: 0;
1680
}
1681
// FIXME: This is a hacky workaround.
1683
.entry-tag {
1684
margin-top: 5px;
1685
margin-bottom: 5px;
1686
}
1687
}
1688
// Development versions of apps to use a differently styled headerbar
1690
window.devel .titlebar:not(.selection-mode) {
1691
}
1692
/**
1694
* Pathbars
1695
*/
1696
%pathbar_button,
1698
.path-bar.linked:not(.vertical) > button {
1699
@extend %button-flat-basic;
1700
padding-left: ($medium-size - 24px) / 2;
1702
padding-right: ($medium-size - 24px) / 2;
1703
border-image:
1704
radial-gradient(
1705
circle closest-corner at center calc(100% - 1px),
1706
$primary 0%,
1707
transparent 0%
1708
) 0 0 0 / 0 0 0;
1709
border-radius: $corner-radius;
1710
&:checked {
1712
border-image:
1713
radial-gradient(
1714
circle closest-corner at center calc(100% - 1px),
1715
$primary 100%,
1716
transparent 0%
1717
) 0 0 2 / 0 0 2px;
1718
color: $on-surface;
1719
&,
1721
&:disabled {
1722
background-color: transparent;
1723
}
1724
}
1725
label:not(:only-child) {
1727
&:first-child {
1728
margin-left: 0;
1729
}
1730
&:last-child {
1732
margin-right: 0;
1733
}
1734
}
1735
&.text-button {
1737
min-width: 0;
1738
}
1739
&.slider-button {
1741
padding-left: (24px - 16px) / 2;
1742
padding-right: (24px - 16px) / 2;
1743
}
1744
}
1745
/**
1747
* Tree Views
1748
*/
1749
treeview.view {
1751
@at-root * {
1752
-GtkTreeView-horizontal-separator: 4;
1753
-GtkTreeView-grid-line-width: 1;
1754
-GtkTreeView-grid-line-pattern: '';
1755
-GtkTreeView-tree-line-width: 1;
1756
-GtkTreeView-tree-line-pattern: '';
1757
-GtkTreeView-expander-size: 16;
1758
}
1759
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1761
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1762
// to avoid borders being overridden by the previously set props
1764
rubberband {
1765
@extend %rubberband;
1766
}
1767
&:hover,
1769
&:selected {
1770
border-radius: 0;
1771
}
1772
&.separator {
1774
min-height: 1px + 2px * 2;
1775
color: divider($on-surface);
1776
}
1777
&:drop(active) {
1779
// FIXME: box-shadow, background-color and background-image are not available here.
1780
border-style: solid none;
1781
border-width: 9999px;
1782
border-color: overlay("hover", $on-surface);
1783
&.after {
1785
border-top-style: none;
1786
}
1787
&.before {
1789
border-bottom-style: none;
1790
}
1791
}
1792
&.expander {
1794
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1795
-gtk-icon-transform: rotate(-90deg);
1796
&:dir(rtl) {
1798
-gtk-icon-transform: rotate(90deg);
1799
}
1800
&:checked {
1802
-gtk-icon-transform: unset;
1803
}
1804
color: hint($on-surface);
1806
&:hover,
1808
&:active {
1809
color: $on-surface;
1810
}
1811
&:disabled {
1813
color: disabled-hint($on-surface);
1814
}
1815
}
1816
&.progressbar { // progress bar in treeviews
1818
border-bottom: $bar-size solid $primary;
1819
box-shadow: none;
1820
background-color: transparent;
1821
background-image: none;
1822
&:selected:hover {
1824
box-shadow: none;
1825
}
1826
}
1827
&.trough { // progress bar trough in treeviews
1829
border-bottom: $bar-size solid disabled-stroke($on-surface);
1830
box-shadow: none;
1831
background-color: transparent;
1832
background-image: none;
1833
&:selected:hover {
1835
box-shadow: none;
1836
}
1837
}
1838
header {
1840
button {
1841
padding: 2px 6px;
1842
border-style: none solid solid none;
1843
border-width: 1px;
1844
border-color: divider($on-surface);
1845
border-radius: 0;
1846
background-clip: border-box;
1847
color: hint($on-surface);
1848
@include ink-color($on-surface);
1849
@include list-item;
1850
&:disabled {
1852
color: disabled-hint($on-surface);
1853
}
1854
&,
1856
&:disabled {
1857
background-color: transparent;
1858
}
1859
&:last-child {
1861
border-right-style: none;
1862
}
1863
}
1864
}
1865
button.dnd,
1867
header.button.dnd { // for treeview-like derive widgets
1868
padding: 2px 6px;
1869
border-style: none solid solid;
1870
border-width: 1px;
1871
border-color: divider($on-surface);
1872
border-radius: 0;
1873
box-shadow: none;
1874
background-clip: border-box;
1875
background-color: $surface;
1876
color: $primary;
1877
}
1878
// see tests/testaccel to test
1880
acceleditor > label {
1881
background-color: $primary;
1882
}
1883
}
1884
/**
1886
* Menus
1887
*/
1888
menubar,
1890
.menubar {
1891
-GtkWidget-window-dragging: true;
1892
padding: 0;
1893
// box-shadow: inset 0 -1px divider($on-surface);
1894
background-color: $titlebar;
1895
color: $on-titlebar;
1896
&:backdrop {
1898
background-color: $titlebar-backdrop;
1899
color: hint($on-titlebar);
1900
}
1901
.csd & {
1903
transition: $transition;
1904
}
1905
> menuitem {
1907
transition: $transition;
1908
min-height: 20px;
1909
padding: 4px 8px;
1910
color: hint($on-titlebar);
1911
&:hover { // Seems like it :hover even with keyboard focus
1913
transition: none;
1914
background-color: overlay("activated", $on-titlebar);
1915
color: $on-titlebar;
1916
}
1917
&:disabled {
1919
color: disabled-hint($on-titlebar);
1920
}
1921
}
1922
}
1923
// Needed to make the border-radius of menus work
1925
// otherwise the background bleeds out of the menu edges
1926
.background.popup {
1927
background-color: transparent;
1928
}
1929
menu,
1931
.menu,
1932
.context-menu {
1933
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1934
padding: 4px 0;
1935
box-shadow: inset 0 1px highlight($surface);
1936
background-color: $surface;
1937
border: 1px solid divider($on-surface); // adds borders in a non composited env
1938
.csd & {
1940
border: none; // axes borders in a composited env
1941
border-radius: $corner-radius;
1942
}
1943
menuitem {
1945
transition: background-color $duration $ease-out;
1946
min-height: 20px;
1947
min-width: 40px;
1948
padding: 4px 8px;
1949
color: $on-surface;
1950
font: initial;
1951
text-shadow: none;
1952
&:hover {
1954
transition: none;
1955
background-color: overlay("hover", $on-surface);
1956
}
1957
&:disabled {
1959
color: disabled($on-surface);
1960
}
1961
// submenu indicators
1963
arrow {
1964
min-height: 16px;
1965
min-width: 16px;
1966
color: hint($on-surface);
1967
&:disabled {
1969
color: disabled-hint($on-surface);
1970
}
1971
&:dir(ltr) {
1973
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1974
margin-left: 8px;
1975
}
1976
&:dir(rtl) {
1978
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1979
margin-right: 8px;
1980
}
1981
}
1982
// avoids labels color being overridden, see
1984
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1985
label {
1986
&:dir(rtl),
1987
&:dir(ltr) {
1988
// color: inherit;
1989
}
1990
}
1991
}
1992
// overflow arrows
1994
> arrow {
1995
min-height: 16px;
1996
min-width: 16px;
1997
padding: 4px;
1998
background-color: $surface;
1999
color: hint($on-surface);
2000
&.top {
2002
margin-top: -4px;
2003
border-bottom: 1px solid divider($on-surface);
2004
border-radius: $corner-radius $corner-radius 0 0;
2005
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2006
}
2007
&.bottom {
2009
margin-top: 4px * 2;
2010
margin-bottom: -4px * 3;
2011
border-top: 1px solid divider($on-surface);
2012
border-radius: 0 0 $corner-radius $corner-radius;
2013
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2014
}
2015
&:hover {
2017
background-image: image(overlay("hover", $on-surface));
2018
}
2019
&:disabled {
2021
border-color: transparent;
2022
background-color: transparent;
2023
color: transparent;
2024
// color: disabled-hint($on-surface);
2025
}
2026
}
2027
separator {
2029
margin: 4px 0;
2030
}
2031
}
2032
menuitem {
2034
accelerator {
2035
color: hint($on-surface);
2036
}
2037
&:disabled accelerator {
2039
color: disabled-hint($on-surface);
2040
}
2041
}
2042
/**
2044
* Popovers
2045
*/
2046
popover.background {
2048
transition: $transition-shadow;
2049
padding: 2px;
2050
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2051
background-color: $surface;
2052
&:backdrop {
2054
box-shadow: $shadow-z2;
2055
}
2056
&, .csd & {
2058
border-style: solid;
2059
border-width: 1px;
2060
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2061
border-radius: $corner-radius + 1px;
2062
background-clip: padding-box;
2063
}
2064
> stack {
2066
margin: -4px; // remove extra padding from menu style popovers
2067
}
2068
> toolbar {
2070
margin: -2px;
2071
}
2072
> list,
2074
> .view,
2075
> toolbar {
2076
border-style: none;
2077
box-shadow: none;
2078
background-color: transparent;
2079
}
2080
&.touch-selection,
2082
&.magnifier,
2083
&.osd {
2084
// @extend %osd;
2085
}
2086
button:not(.suggested-action):not(.destructive-action) {
2088
// @extend %button-flat;
2089
}
2090
.linked:not(.vertical) > entry:not(:only-child) {
2092
// border-radius: $corner-radius $corner-radius 0 0;
2093
}
2094
&.menu button,
2096
button.model {
2097
@extend %button-flat;
2098
min-height: 32px;
2100
padding: 0 8px;
2101
border-radius: $corner-radius;
2102
&:checked {
2104
// color: $primary;
2105
}
2106
}
2107
separator {
2109
margin: 4px 0;
2110
}
2111
list separator {
2113
margin: 0;
2114
}
2115
}
2116
/**
2118
* Notebooks
2119
*/
2120
notebook {
2122
&:focus tab:checked {
2123
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2124
}
2125
> header {
2127
border-width: 1px;
2128
border-color: divider($on-surface);
2129
&.top {
2131
border-bottom-style: solid;
2132
> tabs {
2134
margin-bottom: -1px;
2135
> tab {
2137
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2138
&:checked {
2140
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2141
}
2142
&.reorderable-page {
2144
border-image-width: 0 1px 2px;
2145
}
2146
}
2147
}
2148
}
2149
&.bottom {
2151
border-top-style: solid;
2152
> tabs {
2154
margin-top: -1px;
2155
> tab {
2157
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2158
&:checked {
2160
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2161
}
2162
&.reorderable-page {
2164
border-image-width: 2px 1px 0;
2165
}
2166
}
2167
}
2168
}
2169
&.left {
2171
border-right-style: solid;
2172
> tabs {
2174
margin-right: -1px;
2175
> tab {
2177
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2178
&:checked {
2180
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2181
}
2182
&.reorderable-page {
2184
border-image-width: 1px 2px 1px 0;
2185
}
2186
}
2187
}
2188
}
2189
&.right {
2191
border-left-style: solid;
2192
> tabs {
2194
margin-left: -1px;
2195
> tab {
2197
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2198
&:checked {
2200
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2201
}
2202
&.reorderable-page {
2204
border-image-width: 1px 0 1px 2px;
2205
}
2206
}
2207
}
2208
}
2209
&.top > tabs > arrow {
2211
@extend %notebook_vert_arrows;
2212
border-top-style: none;
2214
}
2215
&.bottom > tabs > arrow {
2217
@extend %notebook_vert_arrows;
2218
border-bottom-style: none;
2220
}
2221
@at-root %notebook_vert_arrows {
2223
padding-left: 4px;
2224
padding-right: 4px;
2225
&.down {
2227
margin-left: -8px;
2228
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2229
}
2230
&.up {
2232
margin-right: -8px;
2233
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2234
}
2235
}
2236
&.left > tabs > arrow {
2238
@extend %notebook_horz_arrows;
2239
border-left-style: none;
2241
}
2242
&.right > tabs > arrow {
2244
@extend %notebook_horz_arrows;
2245
border-right-style: none;
2247
}
2248
@at-root %notebook_horz_arrows {
2250
padding-top: 4px;
2251
padding-bottom: 4px;
2252
&.down {
2254
margin-top: -8px;
2255
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2256
}
2257
&.up {
2259
margin-bottom: -8px;
2260
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2261
}
2262
}
2263
> tabs > arrow {
2265
min-height: 16px;
2266
min-width: 16px;
2267
border-radius: 0;
2268
color: hint($on-surface);
2269
@extend %ripple;
2270
@include ink-color($on-surface);
2271
&:disabled {
2273
color: disabled-hint($on-surface);
2274
}
2275
}
2276
tab {
2278
transition: $transition,
2279
background-size 0ms,
2280
background-image 0ms;
2281
min-height: $small-size;
2282
min-width: $small-size;
2283
padding: $container-padding 12px;
2284
border-width: 1px; // for reorderable tabs
2286
border-color: transparent; //
2287
outline: none;
2289
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2290
background-repeat: no-repeat;
2291
background-position: center;
2292
background-size: 0% 0%;
2293
color: hint($on-surface);
2295
font-weight: 500;
2296
&:hover {
2298
background-color: overlay("hover-alt", $on-surface);
2299
}
2300
&:disabled {
2302
color: disabled-hint($on-surface);
2303
}
2304
&:checked {
2306
transition: $transition,
2307
background-size $ripple-fade-in-duration $ease-out,
2308
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2309
background-color: transparent;
2310
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2311
background-size: 1000% 1000%;
2312
background-clip: padding-box;
2313
color: $on-surface;
2314
&:disabled {
2316
color: disabled($on-surface);
2317
}
2318
&.reorderable-page {
2320
border-color: divider($on-surface);
2321
background-color: $base;
2322
}
2323
}
2324
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2326
> box {
2327
transition: background-color $duration $ease-out;
2328
margin: -$container-padding -12px;
2329
padding: $container-padding 12px;
2330
&:drop(active) {
2332
background-color: overlay("hover", $on-surface);
2333
}
2334
}
2335
// colors the button like the label, overridden otherwise
2337
button.flat {
2338
@extend %button-small;
2339
&:last-child {
2341
margin-left: $container-padding;
2342
margin-right: $container-padding - 12px;
2343
}
2344
&:first-child {
2346
margin-left: $container-padding - 12px;
2347
margin-right: $container-padding;
2348
}
2349
}
2350
}
2351
&.top,
2353
&.bottom {
2354
tabs {
2355
padding-left: 8px;
2356
padding-right: 8px;
2357
&:not(:only-child) {
2359
&:first-child {
2360
margin-left: 0;
2361
}
2362
&:last-child {
2364
margin-right: 0;
2365
}
2366
}
2367
tab.reorderable-page {
2369
border-style: none solid;
2370
}
2371
}
2372
}
2373
&.left,
2375
&.right {
2376
tabs {
2377
padding-top: 8px;
2378
padding-bottom: 8px;
2379
&:not(:only-child) {
2381
&:first-child {
2382
margin-top: 0;
2383
}
2384
&:last-child {
2386
margin-bottom: 0;
2387
}
2388
}
2389
tab.reorderable-page {
2391
border-style: solid none;
2392
}
2393
}
2394
}
2395
}
2396
}
2397
/**
2399
* Scrollbars
2400
*/
2401
scrollbar {
2403
$_slider_min_length: 24px;
2404
// disable steppers
2406
@at-root * {
2407
-GtkScrollbar-has-backward-stepper: false;
2408
-GtkScrollbar-has-forward-stepper: false;
2409
}
2410
transition: $transition;
2412
// background-color: $background;
2413
background-clip: padding-box;
2414
// scrollbar border
2416
&.top { border-bottom: 1px solid divider($on-surface); }
2417
&.bottom { border-top: 1px solid divider($on-surface); }
2418
&.left { border-right: 1px solid divider($on-surface); }
2419
&.right { border-left: 1px solid divider($on-surface); }
2420
// slider
2422
slider {
2423
transition: background-color $duration $ease-out;
2424
min-width: 8px;
2425
min-height: 8px;
2426
border: 4px solid transparent;
2427
border-radius: $circular-radius;
2428
background-clip: padding-box;
2429
background-color: disabled($on-surface);
2430
&:hover {
2432
background-color: hint($on-surface);
2433
}
2434
&:active {
2436
background-color: $on-surface;
2437
}
2438
&:disabled {
2440
background-color: disabled-hint($on-surface);
2441
}
2442
}
2443
&.fine-tune {
2445
slider {
2446
min-width: 4px;
2447
min-height: 4px;
2448
}
2449
&.horizontal slider {
2451
margin: 2px 0;
2452
}
2453
&.vertical slider {
2455
margin: 0 2px;
2456
}
2457
}
2458
&.overlay-indicator {
2460
&:not(.fine-tune) slider {
2461
transition-property: background-color, min-height, min-width;
2462
}
2463
&:not(.dragging):not(.hovering) {
2465
border-color: transparent;
2466
background-color: transparent;
2467
slider {
2469
min-width: 4px;
2470
min-height: 4px;
2471
margin: 4px - 1px;
2472
border: 1px solid rgba($base, .3);
2473
}
2474
button {
2476
min-width: 4px;
2477
min-height: 4px;
2478
margin: 4px - 1px;
2479
border: 1px solid rgba($base, .3);
2480
border-radius: $circular-radius;
2481
background-color: disabled($on-surface);
2482
background-clip: padding-box;
2483
-gtk-icon-source: none;
2484
&:disabled {
2486
background-color: disabled-hint($on-surface);
2487
}
2488
}
2489
&.horizontal {
2491
slider {
2492
min-width: $_slider_min_length;
2493
}
2494
button {
2496
min-width: 8px;
2497
}
2498
}
2499
&.vertical {
2501
slider {
2502
min-height: $_slider_min_length;
2503
}
2504
button {
2506
min-height: 8px;
2507
}
2508
}
2509
}
2510
&.dragging,
2512
&.hovering {
2513
background-color: rgba($surface, .9);
2514
}
2515
}
2516
&.horizontal slider {
2518
min-width: $_slider_min_length;
2519
}
2520
&.vertical slider {
2522
min-height: $_slider_min_length;
2523
}
2524
// button styling
2526
button {
2527
@extend %button-flat-basic;
2528
min-width: 16px;
2530
min-height: 16px;
2531
padding: 0;
2532
border-radius: 0;
2533
}
2534
// button icons
2536
&.vertical {
2537
button {
2538
&.down {
2539
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2540
}
2541
&.up {
2543
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2544
}
2545
}
2546
}
2547
&.horizontal {
2549
button {
2550
&.down {
2551
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2552
}
2553
&.up {
2555
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2556
}
2557
}
2558
}
2559
}
2560
/**
2563
* Switch
2564
*/
2565
switch {
2567
transition: all $duration $ease-out;
2568
margin: $container-padding 0;
2569
padding: 0 2px;
2570
border: 5px solid transparent;
2571
border-radius: $circular-radius;
2572
background-color: stroke($on-surface);
2573
background-clip: padding-box;
2574
font-size: 0;
2575
&:checked {
2577
background-color: rgba($primary, .5);
2578
}
2579
&:disabled {
2581
opacity: .5;
2582
}
2583
// hide on/off icons for >=3.24.5
2585
image {
2586
margin: -8px;
2587
-gtk-icon-transform: scale(0);
2588
}
2589
slider {
2591
transition: all $duration $ease-out;
2592
min-width: 20px;
2593
min-height: 20px;
2594
margin: -3px -2px;
2595
border-radius: $circular-radius;
2596
outline: none;
2597
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2598
background-color: $switch-surface;
2599
}
2600
&:hover slider {
2602
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2603
}
2604
&:focus slider {
2606
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2607
}
2608
&:checked slider {
2610
background-color: $primary;
2611
}
2612
&:checked:hover slider {
2614
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2615
}
2616
&:checked:focus slider {
2618
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2619
}
2620
row:selected & {
2622
}
2623
}
2624
/**
2626
* Check and Radio items
2627
*/
2628
// draw regular check and radio items using our PNG assets
2630
// all assets are rendered from assets.svg. never add pngs directly
2631
// selection-mode
2633
.view.content-view.check:not(list),
2634
.content-view:not(list) check {
2635
min-height: 40px;
2636
min-width: 40px;
2637
margin: 0;
2638
padding: 0;
2639
box-shadow: none;
2640
background-color: transparent;
2641
background-image: none;
2642
-gtk-icon-shadow: $icon-shadow-z2;
2643
&:hover,
2645
&:active {
2646
-gtk-icon-shadow: $icon-shadow-z4;
2647
}
2648
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2650
&#{$class} {
2651
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2652
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2654
}
2655
}
2656
}
2657
checkbutton,
2659
radiobutton {
2660
outline: none;
2661
}
2662
checkbutton.text-button,
2664
radiobutton.text-button {
2665
// this is for a nice focus on check and radios text
2666
padding: 2px;
2667
label:not(:only-child) {
2669
margin: 0 4px;
2670
}
2671
}
2672
$check-radio-size: 40px;
2674
check,
2676
radio {
2677
min-height: 24px;
2678
min-width: 24px;
2679
margin: -($check-radio-size - 24px) / 2;
2680
padding: ($check-radio-size - 24px) / 2;
2681
border-radius: $circular-radius;
2682
color: hint($on-surface);
2683
@extend %ripple;
2684
@include ink-color($on-surface);
2685
&:checked,
2687
&:indeterminate {
2688
color: $primary;
2689
@include ink-color($primary);
2690
}
2691
&:disabled {
2693
color: disabled-hint($on-surface);
2694
}
2695
&:only-child {
2697
// margin: -12px;
2698
}
2699
popover modelbutton.flat & {
2701
&,
2702
&:focus,
2703
&:hover,
2704
&:focus:hover,
2705
&:active,
2706
&:disabled {
2707
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2708
box-shadow: none;
2709
background-image: none;
2710
}
2711
&.left:dir(rtl) {
2713
margin-left: -12px;
2714
margin-right: -4px;
2715
}
2716
&.right:dir(ltr) {
2718
margin-left: -4px;
2719
margin-right: -12px;
2720
}
2721
}
2722
menu menuitem & {
2724
transition: none;
2725
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2726
padding: 0;
2727
&:dir(ltr) {
2729
margin-right: 8px;
2730
}
2731
&:dir(rtl) {
2733
margin-left: 8px;
2734
}
2735
&,
2737
&:hover,
2738
&:disabled {
2739
box-shadow: none;
2740
}
2741
}
2742
}
2743
%check,
2745
check {
2746
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2747
&:checked {
2749
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2750
}
2751
&:indeterminate {
2753
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2754
}
2755
}
2756
%radio,
2758
radio {
2759
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2760
&:checked {
2762
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2763
}
2764
&:indeterminate {
2766
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2767
}
2768
border-image-slice: $check-radio-size / 2px;
2770
border-image-width: $check-radio-size / 2;
2771
$radio-indicator-size: 10px / $check-radio-size / 2;
2773
border-image-source:
2775
-gtk-gradient(
2776
radial,
2777
center center, 0,
2778
center center, .001,
2779
to($primary),
2780
to(transparent)
2781
);
2782
&:checked:not(:indeterminate) {
2784
border-image-source:
2785
-gtk-gradient(
2786
radial,
2787
center center, 0,
2788
center center, $radio-indicator-size,
2789
to($primary),
2790
to(transparent)
2791
);
2792
&:disabled {
2794
border-image-source:
2795
-gtk-gradient(
2796
radial,
2797
center center, 0,
2798
center center, $radio-indicator-size,
2799
to(disabled-hint($on-surface)),
2800
to(transparent)
2801
);
2802
}
2803
}
2804
}
2805
%small_check,
2807
menu menuitem check {
2808
min-height: 16px;
2809
min-width: 16px;
2810
border-radius: $corner-radius;
2811
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2812
&:checked {
2814
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2815
}
2816
&:indeterminate {
2818
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2819
}
2820
}
2821
%small_radio,
2823
menu menuitem radio {
2824
min-height: 16px;
2825
min-width: 16px;
2826
border-image: none;
2827
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2828
&:checked {
2830
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2831
}
2832
&:indeterminate {
2834
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2835
}
2836
}
2837
// ANIMATION:
2839
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2840
// the transformation is set on the active state and it get reset on the checked state.
2841
radio:not(:checked):active {
2842
// -gtk-icon-transform: scale(0);
2843
}
2844
// Otherwise, treeview.view styling will be applied...
2846
treeview.view check,
2847
treeview.view radio {
2848
padding: 0;
2849
color: hint($on-surface);
2850
&:checked,
2852
&:indeterminate {
2853
color: $primary;
2854
}
2855
&:disabled {
2857
color: disabled-hint($on-surface);
2858
}
2859
&,
2861
&:hover,
2862
&:selected,
2863
&:selected:hover {
2864
box-shadow: none;
2865
background-color: transparent;
2866
}
2867
}
2868
treeview.view radio:checked {
2870
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2871
border-image: none;
2872
}
2873
/**
2875
* GtkScale
2876
*/
2877
scale {
2879
// sizing
2880
$_marks_length: 8px;
2881
$_marks_distance: 7px;
2882
$trough_size: 2px;
2884
$finetune_trough_size: 4px;
2885
$slider_size: 32px;
2887
$slider_margin: -($slider_size - $trough_size) / 2;
2889
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2890
$color_slider_margin: -($slider_size) * 3 / 4;
2892
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2893
min-height: $trough_size;
2895
min-width: $trough_size;
2896
&.horizontal {
2898
padding: ($medium-size - $trough_size) / 2 12px;
2899
}
2900
&.vertical {
2902
padding: 12px ($medium-size - $trough_size) / 2;
2903
}
2904
// the slider is inside the trough, so to have make it bigger there's a negative margin
2906
slider {
2907
min-height: $slider_size;
2908
min-width: $slider_size;
2909
margin: $slider_margin;
2910
}
2911
// click-and-hold the slider to activate
2913
&.fine-tune {
2914
&.horizontal {
2915
min-height: $finetune_trough_size;
2916
padding-top: ($medium-size - $finetune_trough_size) / 2;
2917
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2918
}
2919
&.vertical {
2921
min-width: $finetune_trough_size;
2922
padding-left: ($medium-size - $finetune_trough_size) / 2;
2923
padding-right: ($medium-size - $finetune_trough_size) / 2;
2924
}
2925
// to make the trough grow in fine-tune mode
2927
slider {
2928
margin: $finetune_slider_margin;
2929
}
2930
}
2931
// the backing bit
2933
trough {
2934
transition: background-color $duration $ease-out;
2935
outline: none;
2936
background-color: stroke($on-surface);
2937
&:disabled {
2939
background-color: disabled-stroke($on-surface);
2940
}
2941
}
2942
// the colored part of the backing bit
2944
highlight {
2945
transition: background-image $duration $ease-out;
2946
background-image: image($primary);
2947
&:disabled {
2949
background-color: $background;
2950
background-image: image(disabled-hint($on-surface));
2951
}
2952
}
2953
// this is another differently styled part of the backing bit, the most relevant use case is for example
2955
// in media player to indicate how much video stream as been cached
2956
fill {
2957
transition: background-color $duration $ease-out;
2958
background-color: stroke($on-surface);
2959
&:disabled {
2961
background-color: transparent;
2962
}
2963
}
2964
slider {
2966
transition: background-color $duration $ease-out,
2967
background-size $ripple-fade-out-duration $ease-out,
2968
background-image $ripple-fade-out-opacity-duration $ease-out;
2969
background-repeat: no-repeat;
2970
background-position: center;
2971
background-size: auto, 1000% 1000%;
2972
border-radius: 50%;
2973
color: $primary;
2974
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2976
&#{$class} {
2977
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2978
background-image:
2980
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2981
radial-gradient(circle, transparent 10%, transparent 0%);
2982
}
2983
}
2984
&:hover {
2986
background-color: overlay("hover", $primary);
2987
}
2988
&:focus {
2990
background-color: overlay("focus", $primary);
2991
}
2992
&:active {
2994
$_url: 'assets/scale-slider#{$asset-suffix}';
2995
transition: background-color $duration $ease-out,
2997
background-size 0ms,
2998
background-image 0ms;
2999
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3000
background-image:
3001
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3002
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3003
background-size: auto, 0% 0%;
3004
}
3005
}
3006
marks,
3008
value {
3009
color: hint($on-surface);
3010
}
3011
indicator {
3013
background-color: stroke($on-surface);
3014
color: transparent;
3015
}
3016
//marks margins
3018
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3019
(horizontal, bottom, bottom, top),
3020
(vertical, top, left, right),
3021
(vertical, bottom, right, left) {
3022
&.#{$scale_orient} marks {
3023
&.#{$marks_class} {
3024
margin-#{$marks_margin}: $_marks_distance;
3025
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3026
}
3027
}
3028
&.#{$scale_orient}.fine-tune marks {
3030
&.#{$marks_class} {
3031
margin-#{$marks_margin}: $_marks_distance - 1px;
3032
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3033
}
3034
}
3035
}
3036
&.horizontal {
3038
indicator {
3039
min-height: $_marks_length;
3040
min-width: 1px;
3041
}
3042
}
3043
&.vertical {
3045
indicator {
3046
min-height: 1px;
3047
min-width: $_marks_length;
3048
}
3049
}
3050
// *WARNING* scale with marks madness following
3052
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3054
@each $marks_class, $marks_infix in (
3055
".marks-before:not(.marks-after)": "-marks-before",
3056
".marks-after:not(.marks-before)": "-marks-after"
3057
) {
3058
&#{$dir_class}#{$marks_class} {
3059
slider {
3060
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3061
&#{$state_class} {
3062
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3063
background-image:
3065
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3066
radial-gradient(circle, transparent 10%, transparent 0%);
3067
}
3068
}
3069
&:active {
3071
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3072
background-image:
3074
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3075
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3076
}
3077
}
3078
}
3079
}
3080
}
3081
&.color {
3083
min-height: 0;
3084
min-width: 0;
3085
&.horizontal {
3087
padding: 0 0 12px 0;
3088
slider {
3090
&:dir(ltr), &:dir(rtl) { // specificity bump
3091
margin-bottom: $color_slider_margin;
3092
margin-top: $color_marks_slider_margin;
3093
}
3094
}
3095
}
3096
&.vertical {
3098
&:dir(ltr) {
3099
padding: 0 0 0 12px;
3100
slider {
3102
margin-left: $color_slider_margin;
3103
margin-right: $color_marks_slider_margin;
3104
}
3105
}
3106
&:dir(rtl) {
3108
padding: 0 12px 0 0;
3109
slider {
3111
margin-right: $color_slider_margin;
3112
margin-left: $color_marks_slider_margin;
3113
}
3114
}
3115
}
3116
}
3117
}
3118
/**
3120
* Progress bars
3121
*/
3122
progressbar {
3124
// sizing
3125
&.horizontal {
3126
trough,
3127
progress {
3128
min-height: $bar-size;
3129
}
3130
}
3131
&.vertical {
3133
trough,
3134
progress {
3135
min-width: $bar-size;
3136
}
3137
}
3138
// FIXME: insensitive state missing and some other state should be set probably
3140
color: hint($on-surface);
3141
font-size: smaller;
3142
trough {
3144
background-color: disabled-stroke($on-surface);
3145
}
3146
progress {
3148
background-color: $primary;
3149
}
3150
&.osd { // progressbar.osd used for epiphany page loading progress
3152
// min-width: $bar-size;
3153
// min-height: $bar-size;
3154
// background-color: transparent;
3155
trough {
3157
// background-color: transparent;
3158
}
3159
progress {
3161
// background-color: $primary;
3162
}
3163
}
3164
// makes the progress indicator disappear, when the fraction is 0
3166
trough.empty progress {
3167
all: unset;
3168
}
3169
}
3170
/**
3172
* Level Bar
3173
*/
3174
levelbar {
3176
&.horizontal {
3177
block {
3178
min-height: $bar-size;
3179
}
3180
&.discrete block {
3182
min-width: $medium-size;
3183
&:not(:last-child) {
3185
margin-right: 2px;
3186
}
3187
}
3188
}
3189
&.vertical {
3191
block {
3192
min-width: $bar-size;
3193
}
3194
&.discrete block {
3196
min-height: $medium-size;
3197
&:not(:last-child) {
3199
margin-bottom: 2px;
3200
}
3201
}
3202
}
3203
trough {
3205
}
3206
block {
3208
&.low {
3209
background-color: $warning;
3210
}
3211
&.high,
3213
&:not(.empty) {
3214
background-color: $primary;
3215
}
3216
&.full {
3218
background-color: $success;
3219
}
3220
&.empty {
3222
background-color: disabled-stroke($on-surface);
3223
}
3224
}
3225
}
3226
/**
3228
* Print dialog
3229
*/
3230
printdialog {
3232
paper {
3233
padding: 0;
3234
border: 1px solid divider($on-surface);
3235
background-clip: padding-box;
3236
background-color: $base;
3237
color: $on-surface;
3238
}
3239
.dialog-action-box {
3241
margin: 12px;
3242
}
3243
}
3244
/**
3246
* Frames
3247
*/
3248
frame > border,
3250
.frame {
3251
margin: 0;
3252
padding: 0;
3253
border: 1px solid divider($on-surface);
3254
border-radius: 0;
3255
box-shadow: none;
3256
background-clip: padding-box;
3257
background-color: $base;
3258
&.flat {
3260
border-style: none;
3261
background-color: transparent;
3262
}
3263
}
3264
// for backward compatibility
3266
frame.flat > border {
3267
border-style: none;
3268
background-color: transparent;
3269
}
3270
actionbar > revealer > box {
3272
padding: $container-padding;
3273
border-top: 1px solid divider($on-surface);
3274
// background-color: $base;
3275
button:not(.suggested-action):not(.destructive-action) {
3277
@extend %button-flat;
3278
}
3279
.linked:not(.vertical) > entry:not(:only-child) {
3281
border-radius: $corner-radius $corner-radius 0 0;
3282
}
3283
}
3284
scrolledwindow {
3286
viewport.frame { // avoid double borders when viewport inside scrolled window
3287
border-style: none;
3288
background-color: transparent;
3289
}
3290
// This is used when content is touch-dragged past boundaries.
3292
// draws a box on top of the content, the size changes programmatically.
3293
@at-root overshoot {
3294
&.top { @include overshoot(top); }
3295
&.bottom { @include overshoot(bottom); }
3297
&.left { @include overshoot(left); }
3299
&.right { @include overshoot(right); }
3301
}
3302
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3304
@at-root undershoot {
3305
// &.top { @include undershoot(top); }
3306
// &.bottom { @include undershoot(bottom); }
3308
// &.left { @include undershoot(left); }
3310
// &.right { @include undershoot(right); }
3312
}
3313
@at-root junction { // the small square between two scrollbars
3315
border-style: solid none none solid;
3316
border-width: 1px;
3317
border-color: divider($on-surface);
3318
// background-color: $background;
3319
&:dir(rtl) {
3321
border-style: solid solid none none;
3322
}
3323
}
3324
}
3325
// vbox and hbox separators
3327
separator {
3328
min-width: 1px;
3329
min-height: 1px;
3330
background-color: divider($on-surface);
3331
}
3332
%hide_separators {
3334
min-width: 0;
3335
min-height: 0;
3336
background-color: transparent;
3337
}
3338
/**
3340
* Lists
3341
*/
3342
list {
3344
border-color: divider($on-surface);
3345
// background-color: $base;
3346
row {
3348
padding: 2px;
3349
}
3350
}
3351
row {
3353
background-clip: padding-box;
3354
&.activatable {
3356
@extend %ripple;
3357
@include ink-color($on-surface);
3358
@include list-item;
3359
// this is for indicathing which row generated a popover
3361
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3362
&.has-open-popup {
3363
background-color: overlay("activated", $on-surface);
3364
}
3365
}
3366
&:selected {
3368
background-color: $overlay-selected;
3369
@include ink-color($primary);
3371
&.has-open-popup {
3373
background-color: overlay("activated", $primary, $background: $overlay-selected);
3374
}
3375
}
3376
}
3377
/**
3379
* App Notifications
3380
*/
3381
.app-notification {
3383
// @extend %osd;
3384
@extend %toolbar-osd;
3386
margin: 8px;
3388
button {
3390
@extend %button-flat;
3391
&.text-button:not(:disabled) {
3393
color: $primary;
3394
@include ink-color($primary);
3395
}
3396
}
3397
&.frame {
3399
border-style: none;
3400
}
3401
border {
3403
border-style: none;
3404
background-color: transparent;
3405
}
3406
}
3407
/**
3409
* Expanders
3410
*/
3411
expander {
3413
title > arrow {
3414
transition: all $duration $ease-out;
3415
min-width: 16px;
3416
min-height: 16px;
3417
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3418
-gtk-icon-transform: rotate(-90deg);
3419
&:dir(rtl) {
3421
-gtk-icon-transform: rotate(90deg);
3422
}
3423
&:checked {
3425
-gtk-icon-transform: unset;
3426
}
3427
color: hint($on-surface);
3429
&:hover,
3431
&:active {
3432
color: $on-surface;
3433
}
3434
&:disabled {
3436
color: disabled-hint($on-surface);
3437
}
3438
}
3439
}
3440
/**
3442
* Calendar
3443
*/
3444
calendar {
3446
padding: 1px;
3447
border: 1px solid divider($on-surface);
3448
background-clip: padding-box;
3449
background-color: $base;
3450
color: $on-surface;
3451
&:disabled {
3453
color: disabled($on-surface);
3454
}
3455
&:selected {
3457
border-radius: $corner-radius + 1px;
3458
background-color: $overlay-selected;
3459
}
3460
&.header {
3462
border-style: none none solid;
3463
border-color: divider($on-surface);
3464
border-radius: 0;
3465
}
3466
&.button {
3468
border-radius: $corner-radius + 1px;
3469
color: hint($on-surface);
3470
&:hover {
3472
background-image: image(overlay("hover", $on-surface));
3473
}
3474
&:disabled {
3476
color: disabled-hint($on-surface);
3477
}
3478
}
3479
&.highlight {
3481
color: hint($on-surface);
3482
font-weight: 500;
3483
}
3484
&:indeterminate {
3486
color: disabled-hint($on-surface);
3487
}
3488
}
3489
/**
3491
* Dialogs
3492
*/
3493
// Message Dialog styling
3495
messagedialog {
3496
&.background {
3497
background-color: $surface;
3498
}
3499
.titlebar {
3501
min-height: $small-size;
3502
border-style: none;
3503
box-shadow: inset 0 1px highlight($surface);
3504
background-color: $surface;
3505
color: $on-surface;
3506
&:backdrop {
3508
background-color: $surface;
3509
color: hint($on-surface);
3510
}
3511
}
3512
&.csd { // rounded bottom border styling for csd version
3514
&.background {
3515
// bigger radius for better antialiasing
3516
border-bottom-left-radius: $corner-radius;
3517
border-bottom-right-radius: $corner-radius;
3518
}
3519
}
3520
// Hint text
3522
box.vertical > label + label {
3523
color: hint($on-surface);
3524
}
3525
.dialog-action-box {
3527
margin-top: -$container-padding;
3528
// padding: $container-padding;
3529
button {
3531
@extend %button-flat;
3532
&:not(:last-child) {
3534
margin-right: $container-padding;
3535
}
3536
&:not(:disabled) {
3538
color: $primary;
3539
@include ink-color($primary);
3540
}
3541
&.suggested-action:not(:disabled) {
3543
background-color: transparent;
3544
// color: $primary;
3545
// @include ink-color($primary);
3546
}
3547
&.destructive-action:not(:disabled) {
3549
background-color: transparent;
3550
color: $error;
3551
@include ink-color($error);
3552
}
3553
}
3554
}
3555
}
3556
filechooser {
3558
.dialog-action-box {
3559
border-top: 1px solid divider($on-surface);
3560
}
3561
#pathbarbox {
3563
border-bottom: 1px solid divider($on-surface);
3564
// background-color: $background;
3565
// The new folder button
3567
> stack > box > button {
3568
@extend %button-flat;
3569
border-radius: $circular-radius;
3571
}
3572
}
3573
}
3574
filechooserbutton:drop(active) {
3576
// box-shadow: none;
3577
}
3578
/**
3580
* Sidebar
3581
*/
3582
.sidebar {
3584
border-style: none;
3585
background-color: transparent;
3586
&:not(separator) {
3588
@at-root %sidebar_left,
3589
&:dir(ltr),
3590
&.left,
3591
&.left:dir(rtl) {
3592
border-right: 1px solid divider($on-surface);
3593
border-left-style: none;
3594
}
3595
@at-root %sidebar_right,
3597
&:dir(rtl),
3598
&.right {
3599
border-left: 1px solid divider($on-surface);
3600
border-right-style: none;
3601
}
3602
}
3603
list {
3605
// background-color: transparent;
3606
}
3607
paned & {
3609
&,
3610
&.left,
3611
&.right,
3612
&.left:dir(rtl),
3613
&:dir(rtl),
3614
&:dir(ltr) {
3615
border-style: none;
3616
}
3617
}
3618
}
3619
stacksidebar.sidebar {
3621
& {
3622
&:dir(ltr),
3623
&.left,
3624
&.left:dir(rtl) {
3625
list {
3626
@extend %sidebar_left;
3627
}
3628
}
3629
&:dir(rtl),
3631
&.right {
3632
list {
3633
@extend %sidebar_right;
3634
}
3635
}
3636
}
3637
+ separator.vertical,
3639
separator.horizontal {
3640
@extend %hide_separators;
3641
}
3642
list {
3644
padding: 4px;
3645
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3646
}
3647
row {
3649
min-height: 32px;
3650
padding: 0 8px - 6px;
3651
border-radius: $corner-radius;
3652
&:selected {
3654
background-color: overlay("activated", $primary);
3655
color: $primary;
3656
font-weight: 500;
3657
@include ink-color($primary);
3658
}
3659
+ row {
3661
margin-top: 4px;
3662
}
3663
> label {
3665
padding-left: 6px;
3666
padding-right: 6px;
3667
}
3668
&.needs-attention > label {
3670
@extend %needs-attention;
3671
}
3672
}
3673
}
3674
separator.sidebar {
3676
background-color: divider($on-surface);
3677
&.selection-mode,
3679
.selection-mode & {
3680
// background-color: divider($on-primary);
3681
}
3682
}
3683
/**
3685
* File chooser
3686
*/
3687
// dim the sidebar icons, see bug #786613 for details on this oddity
3689
row image.sidebar-icon {
3690
transition: color $duration $ease-out;
3691
color: hint($on-surface);
3692
&:disabled {
3694
color: disabled-hint($on-surface);
3695
}
3696
}
3697
placessidebar.sidebar {
3699
> viewport.frame {
3700
border-style: none;
3701
background-color: transparent;
3702
}
3703
list {
3705
padding: (4px - 3px) 0 4px;
3706
}
3707
row {
3709
// Needs overriding of the GtkListBoxRow padding
3710
min-height: 32px;
3711
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3712
padding: 0;
3713
border-radius: $corner-radius;
3714
// Using margins/padding directly in the SidebarRow
3716
// will make the animation of the new bookmark row jump
3717
> revealer {
3718
padding: 0 8px;
3719
}
3720
&:selected {
3722
background-color: overlay("activated", $primary);
3723
color: $primary;
3724
font-weight: 500;
3725
@include ink-color($primary);
3726
image.sidebar-icon {
3728
color: $primary;
3729
}
3730
}
3731
&:disabled {
3733
color: disabled($on-surface);
3734
}
3735
image.sidebar-icon {
3737
&:dir(ltr) {
3738
padding-right: 8px;
3739
}
3740
&:dir(rtl) {
3742
padding-left: 8px;
3743
}
3744
}
3745
label.sidebar-label {
3747
&:dir(ltr) {
3748
padding-right: 2px;
3749
}
3750
&:dir(rtl) {
3752
padding-left: 2px;
3753
}
3754
}
3755
@at-root button.sidebar-button {
3757
@extend %button-flat-basic;
3758
@extend %button-small;
3759
}
3760
&.sidebar-placeholder-row {
3762
background-color: overlay("hover", $on-surface);
3763
}
3764
&.sidebar-new-bookmark-row {
3766
color: $primary;
3767
image.sidebar-icon {
3769
color: $primary;
3770
}
3771
}
3772
}
3773
}
3774
placesview {
3776
.server-list-button {
3777
> image {
3778
-gtk-icon-transform: rotate(0turn);
3779
}
3780
&:checked > image {
3782
-gtk-icon-transform: rotate(-.5turn);
3783
}
3784
}
3785
// this selects the "connect to server" label
3787
> actionbar > revealer > box > label {
3788
padding-left: 8px;
3789
padding-right: 8px;
3790
}
3791
}
3792
/**
3794
* Paned
3795
*/
3796
paned {
3798
> separator {
3799
min-width: 1px;
3800
min-height: 1px;
3801
-gtk-icon-source: none; // defeats the ugly default handle decoration
3802
border-style: none; // just to be sure
3803
background-color: transparent;
3804
// workaround, using background istead of a border since the border will get rendered twice (?)
3805
background-image: image(divider($on-surface));
3806
background-size: 1px 1px;
3807
background-clip: content-box; // avoids borders image being rendered twice (?)
3808
&.wide {
3810
min-width: 6px;
3811
min-height: 6px;
3812
// background-color: $background;
3813
background-image: image(divider($on-surface)), image(divider($on-surface));
3814
background-size: 1px 1px, 1px 1px;
3815
}
3816
}
3817
&.horizontal > separator {
3819
background-repeat: repeat-y;
3820
&:dir(ltr) {
3822
margin: 0 -8px 0 0;
3823
padding: 0 8px 0 0;
3824
background-position: left;
3825
}
3826
&:dir(rtl) {
3828
margin: 0 0 0 -8px;
3829
padding: 0 0 0 8px;
3830
background-position: right;
3831
}
3832
&.wide {
3834
margin: 0;
3835
padding: 0;
3836
background-repeat: repeat-y, repeat-y;
3837
background-position: left, right;
3838
}
3839
}
3840
&.vertical > separator {
3842
margin: 0 0 -8px 0;
3843
padding: 0 0 8px 0;
3844
background-repeat: repeat-x;
3845
background-position: top;
3846
&.wide {
3848
margin: 0;
3849
padding: 0;
3850
background-repeat: repeat-x, repeat-x;
3851
background-position: bottom, top;
3852
}
3853
}
3854
}
3855
/**
3857
* GtkInfoBar
3858
*/
3859
infobar {
3861
border-style: none;
3862
&.action:hover > revealer > box {
3864
background-image: image(overlay("hover", $on-surface));
3865
}
3866
&.info > revealer > box,
3868
&.question > revealer > box {
3869
border-bottom: 1px solid divider($on-surface);
3870
// background-color: $base;
3871
button {
3873
@extend %button-flat;
3874
&.text-button:not(:disabled) {
3876
color: $primary;
3877
@include ink-color($primary);
3878
}
3879
}
3880
}
3881
&.warning > revealer > box {
3883
background-color: $warning;
3884
color: $on-warning;
3885
button.flat {
3887
color: $on-warning;
3888
@include ink-color($on-warning);
3889
}
3890
selection {
3892
}
3893
*:link {
3895
color: $on-warning;
3896
}
3897
}
3898
&.error > revealer > box {
3900
background-color: $error;
3901
color: $on-error;
3902
button.flat {
3904
color: $on-error;
3905
@include ink-color($on-error);
3906
}
3907
selection {
3909
}
3910
*:link {
3912
color: $on-error;
3913
}
3914
}
3915
// Remove ugly hard-coded padding
3917
button label {
3918
margin: 0 -4px;
3919
}
3920
}
3921
/**
3923
* Tooltips
3924
*/
3925
tooltip {
3927
&.background {
3928
// background-color needs to be set this way otherwise it gets drawn twice
3929
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3930
background-color: $tooltip;
3931
color: $on-tooltip;
3932
}
3933
// padding: 4px; /* not working */
3935
border-radius: $corner-radius;
3936
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3937
&:not(.csd):not(.unity-csd) {
3939
// border: 1px solid divider($on-surface);
3940
// border-radius: $corner-radius + 1px;
3941
}
3942
// FIXME: we need a border or tooltips vanish on black background.
3944
decoration {
3945
background-color: transparent;
3946
}
3947
> box {
3949
margin: -6px; // Remove hard-coded 6px margin
3950
min-height: 32px - 4px * 2;
3951
padding: 4px 8px;
3952
}
3953
.dim-label {
3955
color: hint($on-tooltip);
3956
}
3957
* {
3959
// workaround for Eclipse.
3960
// do not include any declaration here.
3961
}
3962
}
3963
/**
3965
* Color Chooser
3966
*/
3967
colorswatch {
3969
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3970
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3971
// applied to the overlay box.
3972
// base color corners rounding
3974
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3975
// sports a bigger radius.
3976
// nth-child is needed by the custom color strip.
3977
&.top {
3979
border-top-left-radius: $corner-radius + .5px;
3980
border-top-right-radius: $corner-radius + .5px;
3981
overlay {
3983
border-top-left-radius: $corner-radius;
3984
border-top-right-radius: $corner-radius;
3985
}
3986
}
3987
&.bottom {
3989
border-bottom-left-radius: $corner-radius + .5px;
3990
border-bottom-right-radius: $corner-radius + .5px;
3991
overlay {
3993
border-bottom-left-radius: $corner-radius;
3994
border-bottom-right-radius: $corner-radius;
3995
}
3996
}
3997
&.left,
3999
&:first-child:not(.top) {
4000
border-top-left-radius: $corner-radius + .5px;
4001
border-bottom-left-radius: $corner-radius + .5px;
4002
overlay {
4004
border-top-left-radius: $corner-radius;
4005
border-bottom-left-radius: $corner-radius;
4006
}
4007
}
4008
&.right,
4010
&:last-child:not(.bottom) {
4011
border-top-right-radius: $corner-radius + .5px;
4012
border-bottom-right-radius: $corner-radius + .5px;
4013
overlay {
4015
border-top-right-radius: $corner-radius;
4016
border-bottom-right-radius: $corner-radius;
4017
}
4018
}
4019
&.dark {
4021
color: $on-dark;
4022
}
4023
&.light {
4025
color: $on-light;
4026
}
4027
overlay {
4029
transition: $transition-shadow;
4030
box-shadow: $shadow-z1;
4031
&:drop(active),
4033
&:hover {
4034
box-shadow: $shadow-z3;
4035
}
4036
}
4037
&#add-color-button {
4039
border-radius: $corner-radius $corner-radius 0 0;
4040
color: $on-surface;
4041
&:only-child {
4043
border-radius: $corner-radius;
4044
}
4045
overlay {
4047
background-color: $surface;
4048
}
4049
}
4050
&:disabled {
4052
opacity: .5;
4053
overlay {
4055
box-shadow: none;
4056
}
4057
}
4058
row:selected & {
4060
}
4061
&#editor-color-sample {
4063
border-radius: $corner-radius + .5px;
4064
overlay {
4066
border-radius: $corner-radius;
4067
&:hover {
4069
// box-shadow: $shadow-z1;
4070
}
4071
}
4072
}
4073
}
4074
// colorscale popup
4076
colorchooser .popover.osd {
4077
transition: $transition-shadow;
4078
border-radius: $corner-radius;
4079
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4080
background-color: $surface;
4081
&:backdrop {
4083
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4084
}
4085
}
4086
/**
4088
* Misc
4089
*/
4090
// content view (grid/list)
4092
.content-view {
4093
// background-color: $background;
4094
&:hover {
4096
// -gtk-icon-effect: highlight;
4097
}
4098
rubberband,
4100
.rubberband {
4101
@extend %rubberband;
4102
}
4103
}
4104
.scale-popup {
4106
.osd & {
4107
// @extend %osd;
4108
// FIXME: quick hack, redo properly
4110
button.flat {
4111
}
4112
}
4113
// +/- buttons on GtkVolumeButton popup
4115
button {
4116
}
4117
}
4118
/**
4120
* Window Decorations
4121
*/
4122
decoration {
4124
transition: $transition-shadow;
4125
border-radius: $corner-radius $corner-radius 0 0;
4126
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4127
// FIXME rationalize shadows
4129
// this is used for the resize cursor area
4131
margin: 8px;
4132
&:backdrop {
4134
// the transparent shadow here is to enforce that the shadow extents don't
4135
// change when we go to backdrop, to prevent jumping windows.
4136
// The biggest shadow should be in the same order then in the active state
4137
// or the jumping will happen during the transition.
4138
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4139
}
4140
.maximized &,
4142
.fullscreen &,
4143
.tiled &,
4144
.tiled-top &,
4145
.tiled-right &,
4146
.tiled-bottom &,
4147
.tiled-left & {
4148
border-radius: 0;
4149
}
4150
.popup & {
4152
box-shadow: none;
4153
}
4154
// server-side decorations as used by mutter
4156
.ssd & {
4157
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4158
}
4159
.csd.popup & {
4161
border-radius: $corner-radius;
4162
box-shadow: $shadow-z4;
4163
}
4164
tooltip.csd & {
4166
border-radius: $corner-radius;
4167
box-shadow: none;
4168
}
4169
messagedialog.csd & {
4171
border-radius: $corner-radius;
4172
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4173
&:backdrop {
4175
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4176
}
4177
}
4178
.solid-csd & {
4180
margin: 0;
4181
padding: 2px;
4182
border-radius: 0;
4183
box-shadow: none;
4184
box-shadow: inset 0 1px highlight($titlebar);
4185
background-color: $titlebar;
4186
&:backdrop {
4188
background-color: $titlebar-backdrop;
4189
}
4190
}
4191
}
4192
// Window Close button
4194
button.titlebutton {
4195
border-radius: $circular-radius;
4196
.selection-mode & {
4198
}
4199
}
4200
// catch all extend :)
4203
.monospace {
4205
font-family: monospace;
4206
}
4207
/**
4209
* Touch Copy & Paste
4210
*/
4211
// touch selection handlebars for the Popover.osd above
4213
cursor-handle {
4214
color: $primary;
4215
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4216
&.top:dir(ltr),
4218
&.bottom:dir(rtl) {
4219
-gtk-icon-transform: rotate(90deg);
4220
}
4221
&.bottom:dir(ltr),
4223
&.top:dir(rtl) {
4224
-gtk-icon-transform: unset;
4225
}
4226
&.insertion-cursor:dir(ltr),
4228
&.insertion-cursor:dir(rtl) {
4229
padding-top: 6px;
4230
-gtk-icon-transform: rotate(45deg);
4231
}
4232
}
4233
// Decouple the font of context menus from their entry/textview
4235
.context-menu {
4236
font: initial;
4237
}
4238
// shortcut window keys
4240
.keycap {
4241
min-width: 28px - 8px * 2;
4242
min-height: 28px - 2px;
4243
margin-top: 2px;
4244
padding-bottom: 2px;
4245
padding-left: 8px;
4246
padding-right: 8px;
4247
border: solid 1px divider($on-surface);
4249
border-radius: $corner-radius + 1px;
4250
box-shadow: inset 0 -2px divider($on-surface);
4251
background-clip: padding-box;
4252
background-color: $surface;
4253
color: $on-surface;
4254
font-size: smaller;
4255
}
4256
// FIXME needs to be done widget by widget, this wildcard should really die
4258
:not(decoration):not(window):drop(active) {
4259
// caret-color: $primary;
4260
}
4261
// FIXME aggregate with buttons
4263
stackswitcher button.text-button {
4264
min-width: 100px;
4265
}
4266
// FIXME aggregate with buttons
4268
stackswitcher button.circular,
4269
stackswitcher button.text-button.circular {
4270
min-width: $medium-size;
4271
min-height: $medium-size;
4272
padding: 0;
4273
}
4274
/**
4276
* App Icons
4277
*/
4278
// Outline for low res icons
4280
.lowres-icon {
4281
// -gtk-icon-shadow: none;
4282
}
4283
// Drapshadow for large icons
4285
.icon-dropshadow {
4286
// -gtk-icon-shadow: none;
4287
}
4288
/**
4290
* Emoji
4291
*/
4292
popover.emoji-picker {
4294
padding: 0;
4295
entry {
4297
border-bottom: 1px solid divider($on-surface);
4298
border-image: none;
4299
border-radius: 0;
4300
box-shadow: none;
4301
background-color: transparent;
4302
}
4303
scrolledwindow {
4305
border-bottom: 1px solid divider($on-surface);
4306
}
4307
}
4308
button.emoji-section {
4310
margin: 4px;
4311
&:checked {
4313
background-color: overlay("activated", $primary);
4314
color: $primary;
4315
@include ink-color($primary);
4316
}
4317
&:not(:last-child) {
4319
margin-right: 0;
4320
}
4321
}
4322
popover.emoji-picker .emoji {
4324
min-width: 3em;
4325
min-height: 3em;
4326
padding: 0 8px;
4327
// font-size: larger;
4328
widget {
4330
transition: $transition;
4331
border-radius: $corner-radius;
4332
&:hover {
4334
background-color: overlay("hover", $on-surface);
4335
}
4336
}
4337
}
4338
popover.emoji-completion {
4340
padding: 8px 0;
4341
arrow {
4343
border: none;
4344
background: none;
4345
}
4346
.emoji-completion-row {
4348
min-height: $menuitem-size;
4349
padding: 0 12px;
4350
}
4351
.emoji:hover {
4353
background-color: overlay("hover", $on-surface);
4354
}
4355
}
4356