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: $surface-z0;
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: $surface-z0;
59
color: $on-surface;
60
&:hover {
62
background-color: darken($surface-z0, 5%);
63
}
64
&:active {
66
background-color: darken($surface-z0, 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: $surface-z0;
81
// color: $on-surface;
82
&:hover {
84
background-color: overlay("hover-alt", $on-surface);
85
}
86
&:selected:hover {
88
background-color: overlay("hover-alt", $primary, $on: $overlay-selected);
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: $surface-z0;
110
caret-color: $primary;
111
frame:not(.flat) &,
113
.frame & {
114
background-color: $surface-z1;
115
}
116
popover.background & {
118
background-color: $surface-z8;
119
}
120
messagedialog.background & {
122
background-color: $surface-z8;
123
}
124
}
125
border {
127
// background-color: $surface-z0;
128
color: hint($on-surface); // FIXME: not working
129
}
130
}
131
iconview {
133
// @extend .view;
134
}
135
%iconview-desktop {
137
// background-color: $scrim;
138
color: $on-dark;
139
text-shadow: $text-shadow;
140
.rubberband,
142
rubberband {
143
border: 1px solid primary($on-dark);
144
background-color: rgba(primary($on-dark), .3);
145
}
146
}
147
%rubberband,
149
.rubberband,
150
rubberband {
151
border: 1px solid $primary;
152
background-color: rgba($primary, .24);
153
}
154
flowbox {
156
rubberband {
157
@extend %rubberband;
158
}
159
flowboxchild {
161
padding: 4px;
162
border-radius: $corner-radius;
163
&:selected {
165
background-color: $overlay-selected;
166
}
167
}
168
}
169
.content-view .tile {
171
// margin: 2px;
172
// padding: 0;
173
// border-radius: 0;
174
// background-color: black;
175
&:selected {
177
background-color: transparent;
178
}
179
}
180
label {
182
caret-color: $primary; // this shouldn't be needed.
183
&.separator {
185
color: hint($on-surface);
186
}
187
&.error {
189
color: $error;
190
}
191
selection {
193
background-color: $overlay-selected;
194
}
195
&:disabled {
197
color: disabled($on-surface);
198
headerbar &,
200
menuitem &,
201
tab &,
202
button & {
203
color: inherit;
204
}
205
}
206
&.osd {
208
border-radius: $corner-radius;
209
background-color: $tooltip;
210
color: $on-tooltip;
211
}
212
}
213
.dim-label {
215
color: hint($on-surface);
216
}
217
assistant {
219
.sidebar {
220
padding: 4px 0;
221
}
222
.sidebar label {
224
min-height: $medium-size;
225
margin: 0 4px;
226
padding: 0 8px;
227
border-radius: $corner-radius;
228
color: disabled($on-surface);
229
font-weight: 500;
230
&.highlight {
232
background-color: overlay("activated", $primary);
233
color: $primary;
234
}
235
}
236
}
237
%osd,
239
.osd {
240
// opacity: .9;
241
}
242
/**
244
* Spinner Animation
245
*/
246
@keyframes spin {
248
to {
249
-gtk-icon-transform: rotate(1turn);
250
}
251
}
252
spinner {
254
background: none;
255
opacity: 0; // non spinning spinner makes no sense
256
color: $primary;
257
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
258
transition: opacity $duration * 4 $ease-out;
259
animation: spin 1s linear infinite;
260
&:checked {
262
opacity: 1;
263
}
264
&:disabled {
266
color: disabled-hint($on-surface);
267
}
268
}
269
/**
271
* General Typography
272
*/
273
@function pt($size: $font-size) {
275
@return ($size * .75 / 1px) * 1pt;
276
}
277
.large-title {
279
font-weight: 400;
280
font-size: pt(48px);
281
}
282
.title-1 {
284
font-weight: 400;
285
font-size: pt(34px);
286
letter-spacing: pt(.25px);
287
}
288
.title-2 {
290
font-weight: 400;
291
font-size: pt(24px);
292
}
293
.title-3 {
295
font-weight: 500;
296
font-size: pt(20px);
297
letter-spacing: pt(.15px);
298
}
299
.title-4 {
301
font-weight: 400;
302
font-size: pt(16px);
303
letter-spacing: pt(.5px);
304
}
305
.heading {
307
font-weight: 500;
308
font-size: 1em;
309
}
310
.body {
312
font-weight: 400;
313
font-size: 1em;
314
}
315
.caption-heading {
317
font-weight: 500;
318
font-size: pt(12px);
319
letter-spacing: pt(1.5px);
320
}
321
.caption {
323
font-weight: 400;
324
font-size: pt(12px);
325
letter-spacing: pt(.4px);
326
}
327
/**
329
* Text Entries
330
*/
331
%entry,
333
entry {
334
min-height: $medium-size;
335
padding: 0 8px;
336
border-radius: $corner-radius $corner-radius 0 0;
337
@include entry(normal);
339
&:focus {
341
@include entry(checked);
342
}
343
&:drop(active) {
345
@include entry(hover);
346
}
347
&:disabled {
349
@include entry(disabled);
350
}
351
&.flat {
353
min-height: 0;
354
padding: 2px;
355
border-radius: 0;
356
background-color: transparent;
357
}
358
// icons inside the entry
360
image {
361
color: hint($on-surface);
362
&:hover,
364
&:active {
365
color: $on-surface;
366
}
367
&:disabled {
369
color: disabled($on-surface);
370
}
371
&.left {
373
margin-left: ($medium-size - 16px) / 2 - 8px;
374
margin-right: 6px;
375
}
376
&.right {
378
margin-left: 6px;
379
margin-right: ($medium-size - 16px) / 2 - 8px;
380
}
381
}
382
undershoot {
384
&.left {
385
// @include undershoot(left);
386
}
387
&.right {
389
// @include undershoot(right);
390
}
391
}
392
selection {
394
background-color: $overlay-selected;
395
}
396
// entry error and warning style
398
@each $class, $color in (".error": $error, ".warning": $warning) {
399
&#{$class} {
400
@include entry(normal, $color);
401
&:focus {
403
@include entry(checked, $color);
404
}
405
&:disabled {
407
@include entry(disabled, $color);
408
}
409
}
410
}
411
.osd & {
413
}
414
progress {
416
margin: 0 -8px -4px;
417
border-bottom: 2px solid $primary;
418
background-color: transparent;
419
}
420
// linked entries
422
.linked:not(.vertical) > & {
423
@extend %linked;
424
}
425
// Vertically linked entries
427
.linked.vertical > & {
428
@extend %linked-vertical;
429
}
430
}
431
%entry_raised {
433
border-radius: $corner-radius;
434
@include entry(raised-normal);
436
&:focus {
438
@include entry(raised-focus);
439
}
440
&:drop(active) {
442
@include entry(raised-hover);
443
}
444
&:disabled {
446
@include entry(raised-disabled);
447
}
448
// entry error and warning style
450
@each $class, $color in (".error": $error, ".warning": $warning) {
451
&#{$class} {
452
@include entry(raised-normal, $color);
453
&:focus {
455
@include entry(raised-focus, $color);
456
}
457
&:disabled {
459
@include entry(raised-disabled, $color);
460
}
461
image {
463
color: hint(on($color));
464
&:hover,
466
&:active {
467
color: on($color);
468
}
469
&:disabled {
471
color: disabled(on($color));
472
}
473
}
474
}
475
}
476
}
477
treeview entry {
479
&,
480
&.flat {
481
background-color: $surface-z1;
482
&,
484
&:focus {
485
border-image: none;
486
box-shadow: none;
487
}
488
}
489
}
490
.entry-tag {
492
margin: 2px;
493
border-radius: $circular-radius;
494
box-shadow: none;
495
background-color: fill($on-surface);
496
color: $on-surface;
497
&:hover {
499
background-image: image(overlay("hover", $on-surface));
500
}
501
// side margins: compensate the entry padding with a negative margin
503
// then the negative margin itself
504
:dir(ltr) & {
505
margin-left: 4px;
506
margin-right: 0;
507
padding-left: 12px;
508
padding-right: 8px;
509
}
510
:dir(rtl) & {
512
margin-left: 0;
513
margin-right: 4px;
514
padding-left: 8px;
515
padding-right: 12px;
516
}
517
// seems any sizing doesn't work
519
&.button {
520
box-shadow: none;
521
background-color: transparent;
522
color: hint($on-surface);
523
}
524
}
525
/**
527
* Buttons
528
*/
529
// stuff for .needs-attention
531
@keyframes needs-attention {
532
from {
533
background-image:
534
-gtk-gradient(
535
radial,
536
center center, 0,
537
center center, .001,
538
to($primary),
539
to(transparent)
540
);
541
}
542
to {
544
background-image:
545
-gtk-gradient(
546
radial,
547
center center, 0,
548
center center, .5,
549
to($primary),
550
to(transparent)
551
);
552
}
553
}
554
%button,
556
button {
557
min-height: 24px;
558
min-width: 16px;
559
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
560
border-radius: $corner-radius;
561
color: $on-surface;
562
font-weight: 500;
563
@extend %ripple;
565
@include ink-color($on-surface, $button-style: "raised", $on: $surface-z8);
566
&:disabled {
568
box-shadow: none;
569
background-color: fill($on-surface);
570
color: disabled($on-surface);
571
}
572
&:checked {
574
$background-color: overlay("activated", $primary, $on: $surface-z8);
575
color: $primary;
576
@include ink-color($primary, $button-style: "raised", $on: $background-color);
577
&:disabled {
579
box-shadow: none;
580
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
581
color: disabled($on-surface);
582
}
583
}
584
&.text-button {
586
min-width: 64px - 16px * 2;
587
padding-left: 16px;
588
padding-right: 16px;
589
}
590
&.image-button {
592
min-width: 24px;
593
padding: ($medium-size - 24px) / 2;
594
border-radius: $circular-radius;
595
}
596
// NOTE: Some image-only buttons use this as well
598
&.text-button.image-button {
599
min-width: 24px;
600
padding: ($medium-size - 24px) / 2;
601
border-radius: $corner-radius;
602
label {
604
&:first-child {
605
margin-left: 16px - ($medium-size - 24px) / 2;
606
}
607
&:last-child {
609
margin-right: 16px - ($medium-size - 24px) / 2;
610
}
611
}
612
image:not(:only-child) {
614
margin: 0 (24px - 16px) / 2;
615
}
616
}
617
.linked:not(.vertical) > & {
619
@extend %linked;
620
&.image-button:not(.text-button) {
622
@extend %linked-image-button;
623
}
624
}
625
.linked.vertical > & {
627
@extend %linked-vertical;
628
&.image-button:not(.text-button) {
630
@extend %linked-vertical-image-button;
631
}
632
}
633
}
634
%button-flat-basic {
636
color: hint($on-surface);
637
@include ink-color($on-surface, $button-style: "flat");
638
&:disabled {
640
background-color: transparent;
641
color: disabled-hint($on-surface);
642
}
643
}
644
%button-flat-activatable {
646
@extend %button-flat-basic;
647
&:checked {
649
$background-color: overlay("activated", $primary);
650
color: $primary;
651
@include ink-color($primary, $button-style: "flat", $on: $background-color);
652
&:disabled {
654
color: disabled($on-surface);
655
}
656
}
657
}
658
%button-flat,
660
button.flat {
661
@extend %button-flat-activatable;
662
&.text-button {
664
min-width: 64px - 8px * 2;
665
padding-left: 8px;
666
padding-right: 8px;
667
}
668
&.text-button.image-button {
670
min-width: 24px;
671
padding: ($medium-size - 24px) / 2;
672
label {
674
&:first-child {
675
margin-left: 12px - ($medium-size - 24px) / 2;
676
}
677
&:last-child {
679
margin-right: 12px - ($medium-size - 24px) / 2;
680
}
681
}
682
}
683
.linked:not(.vertical) > &,
685
.linked.vertical > & {
686
&:not(:only-child) { // specificity bump
687
border-radius: $corner-radius;
688
&.image-button:not(.text-button) {
690
border-radius: $circular-radius;
691
}
692
}
693
}
694
}
695
button {
697
// big standalone buttons like in Documents pager
698
&.osd {
699
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
700
&.image-button {
702
padding: ($large-size - 24px) / 2;
703
}
704
&:disabled {
706
opacity: 0;
707
}
708
}
709
// overlay / OSD style
711
@at-root %osd_button,
712
.osd & {
713
}
714
// Suggested and Destructive Action buttons
716
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
717
&#{$class} {
718
color: on($color);
719
@include ink-color(on($color), $button-style: "raised", $on: $color);
720
&:disabled {
722
box-shadow: none;
723
background-color: fill($on-surface);
724
color: disabled($on-surface);
725
}
726
&:checked {
728
$background-color: overlay("activated", on($color), $on: $color);
729
@include ink-color(on($color), $button-style: "raised", $on: $background-color);
730
}
731
&.flat {
733
color: $color;
734
@include ink-color($color, $button-style: "flat");
735
&:disabled {
737
box-shadow: none;
738
background-color: transparent;
739
color: disabled-hint($on-surface);
740
}
741
&:checked {
743
$background-color: overlay("activated", $color);
744
@include ink-color($color, $button-style: "flat", $on: $background-color);
745
}
746
}
747
.osd & {
749
}
750
}
751
}
752
.stack-switcher > & {
754
// to position the needs attention dot, padding is added to the button
755
// child, a label needs just lateral padding while an icon needs vertical
756
// padding added too.
757
> label {
759
margin: 0 -6px;
760
padding: 0 6px;
761
}
762
> image {
764
margin: -3px -6px;
765
padding: 3px 6px;
766
}
767
&.needs-attention {
769
> label,
770
> image {
771
@extend %needs-attention;
772
}
773
&:checked {
775
> label,
776
> image {
777
animation: none;
778
background-image: none;
779
}
780
}
781
}
782
}
783
// hide separators
785
&.font,
786
&.file {
787
separator {
788
@extend %hide_separators;
789
}
790
}
791
&.font {
793
> box > box > label {
794
// font-weight: bold;
795
}
796
}
797
// inline-toolbar buttons
799
.inline-toolbar & {
800
// @extend %button-flat;
801
&:not(.text-button) {
803
border-radius: $circular-radius;
804
}
805
}
806
.primary-toolbar & {
808
-gtk-icon-shadow: none; // tango icons don't need shadows
809
}
810
&.close,
812
&.circular { // The Bloody Circul Button
813
border-radius: $circular-radius;
814
label {
816
// padding: 0;
817
}
818
}
819
}
820
%button-small {
822
min-height: $small-size;
823
min-width: $small-size;
824
padding: 0;
825
border-radius: $circular-radius;
826
}
827
%needs-attention {
829
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
830
background-repeat: no-repeat;
831
background-position: right 3px;
832
background-size: 6px 6px;
833
&:dir(rtl) {
835
background-position: left 3px;
836
}
837
}
838
// all the following is for the +|- buttons on inline toolbars, that way
840
// should really be deprecated...
841
.inline-toolbar toolbutton > button {
842
}
843
// More inline toolbar buttons
845
toolbar.inline-toolbar toolbutton {
846
&:not(:first-child) > button.flat {
847
// @extend %linked-not-first-child;
848
}
849
&:not(:last-child) > button.flat {
851
// @extend %linked-not-last-child;
852
}
853
}
854
%linked-not-first-child {
856
border-top-left-radius: 0;
857
border-bottom-left-radius: 0;
858
}
859
%linked-not-last-child {
861
border-top-right-radius: 0;
862
border-bottom-right-radius: 0;
863
}
864
%linked {
866
&:not(:first-child) {
867
@extend %linked-not-first-child;
868
}
869
&:not(:last-child) {
871
@extend %linked-not-last-child;
872
}
873
}
874
%linked-vertical-not-first-child {
876
border-top-left-radius: 0;
877
border-top-right-radius: 0;
878
}
879
%linked-vertical-not-last-child {
881
border-bottom-left-radius: 0;
882
border-bottom-right-radius: 0;
883
}
884
%linked-vertical {
886
&:not(:first-child) {
887
@extend %linked-vertical-not-first-child;
888
}
889
&:not(:last-child) {
891
@extend %linked-vertical-not-last-child;
892
}
893
}
894
%linked-image-button {
896
&:first-child {
897
border-top-left-radius: $corner-radius;
898
border-bottom-left-radius: $corner-radius;
899
}
900
&:last-child {
902
border-top-right-radius: $corner-radius;
903
border-bottom-right-radius: $corner-radius;
904
}
905
&:only-child {
907
border-radius: $circular-radius;
908
}
909
}
910
%linked-vertical-image-button {
912
&:first-child {
913
border-top-left-radius: $corner-radius;
914
border-top-right-radius: $corner-radius;
915
}
916
&:last-child {
918
border-bottom-left-radius: $corner-radius;
919
border-bottom-right-radius: $corner-radius;
920
}
921
&:only-child {
923
border-radius: $circular-radius;
924
}
925
}
926
/* menu buttons */
928
modelbutton.flat,
929
.menuitem.button.flat {
930
min-height: $menuitem-size;
931
padding: 0 8px;
932
border-radius: $corner-radius;
933
@extend %ripple;
935
@include ink-color($on-surface);
936
&:selected {
938
background-color: $overlay-selected;
939
}
940
}
941
modelbutton.flat arrow {
943
transition: color $duration $ease-out;
944
color: hint($on-surface);
945
&:disabled {
947
color: disabled-hint($on-surface);
948
}
949
&.left {
951
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
952
}
953
&.right {
955
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
956
}
957
}
958
button.color {
960
min-height: $small-size;
961
min-width: $small-size;
962
padding: $container-padding;
963
colorswatch:only-child {
965
&,
966
overlay {
967
// border-radius: 0;
968
}
969
}
970
}
971
/**
973
* Links
974
*/
975
*:link {
977
color: $primary;
978
&:disabled {
980
color: disabled($on-surface);
981
}
982
}
983
*:visited {
985
color: $visited;
986
&:disabled {
988
color: disabled($on-surface);
989
}
990
}
991
button.link {
993
&:link {
994
color: $primary;
995
@include ink-color($primary, $button-style: "flat");
996
}
997
&:visited {
999
color: $visited;
1000
@include ink-color($visited, $button-style: "flat");
1001
}
1002
&:disabled {
1004
color: disabled($on-surface);
1005
}
1006
> label {
1008
text-decoration-line: underline;
1009
}
1010
}
1011
/**
1013
* GtkSpinButton
1014
*/
1015
spinbutton {
1017
&:not(.vertical) {
1018
// in this horizontal configuration, the whole spinbutton
1019
// behaves as the entry, so we extend the entry styling
1020
// and nuke the style on the internal entry
1021
@extend %entry;
1022
padding: 0;
1024
entry {
1026
min-width: $large-size - 8px * 2;
1027
// reset all the other props since the spinbutton node is styled here
1028
margin: 0;
1029
border-image: none;
1030
border-radius: 0;
1031
box-shadow: none;
1032
background-color: transparent;
1033
}
1034
button {
1036
@extend %button-flat-basic;
1037
@extend %button-small;
1038
// margin: $container-padding;
1040
border: solid $container-padding transparent;
1041
background-clip: padding-box;
1042
// Remove unwanted focus indicator
1044
&:focus:not(:hover):not(:active) {
1045
background-color: transparent;
1046
}
1047
&.up:dir(ltr),
1049
&.down:dir(rtl) {
1050
margin-left: -$container-padding / 2;
1051
}
1052
&.up:dir(rtl),
1054
&.down:dir(ltr) {
1055
margin-right: -$container-padding / 2;
1056
}
1057
}
1058
}
1059
// OSD horizontal
1061
.osd &:not(.vertical) {
1062
}
1063
// Vertical
1065
&.vertical {
1066
// in the vertical configuration, we treat the spinbutton
1067
// as a box, and tweak the style of the entry in the middle
1068
// so that it's linked
1069
// FIXME: this should not be set at all, but otherwise it gets the wrong
1071
// color
1072
caret-color: $primary;
1073
// FIXME: this should not be set at all, but otherwise it gets the wrong
1075
// color
1076
&:disabled {
1077
color: disabled($on-surface);
1078
}
1079
entry {
1081
@extend %entry_raised;
1082
min-height: $medium-size;
1084
min-width: $large-size;
1085
padding: 0;
1086
}
1087
button {
1089
min-height: $medium-size;
1090
min-width: $large-size;
1091
padding: 0;
1092
@extend %button-flat-basic;
1094
// Remove unwanted focus indicator
1096
&:focus:not(:hover):not(:active) {
1097
background-color: transparent;
1098
}
1099
&.up {
1101
border-radius: $corner-radius $corner-radius 0 0;
1102
}
1103
&.down {
1105
border-radius: 0 0 $corner-radius $corner-radius;
1106
}
1107
}
1108
}
1109
// OSD vertical
1111
.osd &.vertical {
1112
}
1113
// Misc
1115
treeview &:not(.vertical) {
1116
min-height: 0;
1117
border-style: none;
1118
border-radius: 0;
1119
entry {
1121
min-height: 0;
1122
padding: 1px 2px;
1123
}
1124
}
1125
}
1126
/**
1128
* ComboBoxes
1129
*/
1130
combobox {
1132
arrow {
1133
transition: -gtk-icon-transform $duration $ease-out;
1134
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1135
min-height: 16px;
1136
min-width: 16px;
1137
}
1138
button.combo:checked arrow {
1140
// color: $primary;
1141
-gtk-icon-transform: rotate(-.5turn);
1142
}
1143
// workaround for menuitem selection
1145
decoration {
1146
transition: none;
1147
}
1148
// remove hard-coded 2px padding
1150
cellview {
1151
margin: -2px;
1152
}
1153
button.combo cellview {
1155
&:dir(ltr) {
1156
margin-left: -2px + 8px - ($medium-size - 16px) / 2;
1157
}
1158
&:dir(rtl) {
1160
margin-right: -2px + 8px - ($medium-size - 16px) / 2;
1161
}
1162
}
1163
menu {
1165
padding: 2px 0;
1166
menuitem {
1168
min-height: $medium-size - 2px * 2;
1169
padding: 0 8px;
1170
}
1171
// overflow arrows
1173
> arrow {
1174
&.top {
1175
margin-top: -2px;
1176
}
1177
&.bottom {
1179
margin-top: 2px * 2;
1180
margin-bottom: -2px * 3;
1181
}
1182
}
1183
}
1184
> .linked:not(.vertical) > entry:not(:only-child) {
1186
border-radius: $corner-radius $corner-radius 0 0;
1187
&:first-child {
1189
margin-right: -$medium-size;
1190
padding-right: $medium-size;
1191
}
1192
&:last-child {
1194
margin-left: -$medium-size;
1195
padding-left: $medium-size;
1196
}
1197
}
1198
> .linked:not(.vertical) > button:not(:only-child) {
1200
@extend %button-flat-basic;
1201
// @extend %button-small;
1202
min-height: 16px;
1204
min-width: 16px;
1205
margin: ($medium-size - $small-size) / 2;
1206
padding: ($small-size - 16px) / 2;
1207
border-radius: $circular-radius;
1208
}
1209
}
1210
// the combo is a composite widget so the way we do button linking doesn't
1212
// work, special case needed. See
1213
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1214
.linked:not(.vertical) > combobox {
1216
&:not(:first-child) > box > button.combo {
1217
@extend %linked-not-first-child;
1218
}
1219
&:not(:last-child) > box > button.combo {
1221
@extend %linked-not-last-child;
1222
}
1223
}
1224
.linked.vertical > combobox {
1226
&:not(:first-child) > box > button.combo {
1227
@extend %linked-vertical-not-first-child;
1228
}
1229
&:not(:last-child) > box > button.combo {
1231
@extend %linked-vertical-not-last-child;
1232
}
1233
}
1234
button.combo:only-child {
1236
border-radius: $corner-radius $corner-radius 0 0;
1237
font-weight: normal;
1238
@include entry(normal);
1240
&:focus {
1242
@include entry(focus);
1243
}
1244
&:drop(active),
1246
&:hover {
1247
@include entry(hover);
1248
}
1249
&:checked {
1251
@include entry(checked);
1252
}
1253
&:disabled {
1255
@include entry(disabled);
1256
}
1257
arrow {
1259
transition: color $duration $ease-out;
1260
color: hint($on-surface);
1261
&:disabled {
1263
color: disabled-hint($on-surface);
1264
}
1265
}
1266
}
1267
/**
1269
* Toolbars
1270
*/
1271
toolbar {
1273
-GtkWidget-window-dragging: true;
1274
padding: 2px;
1275
button {
1277
@extend %button-flat;
1278
}
1279
// on OSD
1281
.osd & {
1282
}
1283
// stand-alone OSD toolbars
1285
&.osd {
1286
@extend %toolbar-osd;
1287
// positional classes for `attached` osd toolbars
1289
&.left,
1290
&.right,
1291
&.top,
1292
&.bottom {
1293
border-radius: 0;
1294
}
1295
&.bottom {
1297
box-shadow: none;
1298
background-color: transparent;
1299
background-image:
1300
linear-gradient(
1301
to bottom,
1302
transparent,
1303
rgba(black, .1) 30%,
1304
rgba(black, .2) 50%,
1305
rgba(black, .4)
1306
);
1307
}
1308
}
1309
// toolbar separators
1311
&.horizontal > separator {
1312
margin: 2px;
1313
}
1314
&.vertical > separator {
1316
margin: 2px;
1317
}
1318
&:not(.inline-toolbar):not(.osd) {
1320
scale,
1321
entry,
1322
spinbutton,
1323
button {
1324
margin: 2px;
1325
}
1326
.linked entry,
1328
.linked spinbutton,
1329
.linked button {
1330
&:not(:first-child) {
1331
margin-left: 0;
1332
}
1333
&:not(:last-child) {
1335
margin-right: 0;
1336
}
1337
}
1338
spinbutton {
1340
entry,
1341
button {
1342
margin: 0;
1343
}
1344
}
1345
switch {
1347
margin: 2px + $container-padding 2px;
1348
}
1349
}
1350
}
1351
%toolbar-osd {
1353
transition: $transition-shadow;
1354
padding: $container-padding;
1355
border-radius: $corner-radius;
1356
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
1357
background-color: $surface-z8;
1358
&:backdrop {
1360
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
1361
}
1362
}
1363
// searchbar, location-bar & inline-toolbar
1365
.inline-toolbar {
1366
padding: $container-padding;
1367
border-style: solid;
1368
border-width: 0 1px 1px;
1369
border-color: divider($on-surface);
1370
background-color: $surface-z1;
1371
background-clip: padding-box;
1372
}
1373
searchbar > revealer > box,
1375
.location-bar {
1376
padding: $container-padding;
1377
border-style: solid;
1378
border-width: 0 0 1px;
1379
border-color: divider($on-surface);
1380
}
1381
searchbar > revealer > box {
1383
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1384
margin: -6px;
1385
padding: $container-padding;
1386
}
1387
/**
1389
* Header bars
1390
*/
1391
.titlebar {
1393
transition: background-color $duration $ease-out, color $duration $ease-out;
1394
border-radius: $corner-radius $corner-radius 0 0;
1395
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1396
background-color: $titlebar;
1397
color: $on-titlebar;
1398
&:disabled {
1400
color: disabled($on-titlebar);
1401
}
1402
&:backdrop {
1404
background-color: $titlebar-backdrop;
1405
color: hint($on-titlebar);
1406
&:disabled {
1408
color: disabled-hint($on-titlebar);
1409
}
1410
}
1411
.title {
1413
padding-left: 12px;
1414
padding-right: 12px;
1415
font-weight: bold;
1416
}
1417
.subtitle {
1419
padding-left: 12px;
1420
padding-right: 12px;
1421
font-size: smaller;
1422
}
1423
.subtitle,
1425
.dim-label {
1426
transition: color $duration $ease-out;
1427
color: hint($on-titlebar);
1428
&:backdrop {
1430
color: disabled($on-titlebar);
1431
}
1432
}
1433
// Don't draw titlebar above titlebar
1435
.titlebar {
1436
background-color: transparent;
1437
box-shadow: none;
1438
}
1439
// The separator for split headerbars
1441
headerbar + separator {
1442
background-color: divider($on-titlebar);
1443
}
1444
entry {
1446
box-shadow: inset 0 -1px stroke($on-titlebar);
1447
background-color: entry-fill($on-titlebar);
1448
color: $on-titlebar;
1449
&:disabled {
1451
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1452
background-color: entry-fill($on-titlebar);
1453
color: disabled($on-titlebar);
1454
}
1455
image {
1457
color: hint($on-titlebar);
1458
&:hover,
1460
&:active {
1461
color: $on-titlebar;
1462
}
1463
&:disabled {
1465
color: disabled($on-titlebar);
1466
}
1467
}
1468
}
1469
.linked:not(.vertical) > entry:not(:only-child) {
1471
border-radius: $corner-radius $corner-radius 0 0;
1472
}
1473
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1475
@extend %button-flat;
1476
border-image:
1478
radial-gradient(
1479
circle closest-corner at center calc(100% - 1px),
1480
$titlebar-indicator 0%,
1481
transparent 0%
1482
) 0 0 0 / 0 0 0;
1483
background-color: transparent;
1484
color: hint($on-titlebar);
1485
@include ink-color($on-titlebar, $button-style: "flat");
1486
&:disabled {
1488
color: disabled-hint($on-titlebar);
1489
}
1490
@at-root %titlebar-button-checked,
1492
&:checked {
1493
border-image:
1494
radial-gradient(
1495
circle closest-corner at center calc(100% - 1px),
1496
$titlebar-indicator 100%,
1497
transparent 0%
1498
) 0 0 2 / 0 0 2px;
1499
background-color: transparent;
1500
color: $on-titlebar;
1501
@include ink-color($on-titlebar, $button-style: "flat");
1502
&:disabled {
1504
background-color: transparent;
1505
color: disabled($on-titlebar);
1506
}
1507
}
1508
&:backdrop {
1510
color: disabled($on-titlebar);
1511
&:disabled {
1513
color: disabled-hint($on-titlebar);
1514
}
1515
&:checked {
1517
color: hint($on-titlebar);
1518
&:disabled {
1520
color: disabled-hint($on-titlebar);
1521
}
1522
}
1523
}
1524
}
1525
button.suggested-action, button.destructive-action {
1527
&:disabled {
1528
background-color: fill($on-titlebar);
1529
color: disabled($on-titlebar);
1530
}
1531
}
1532
// FIXME: Ugly overriding
1534
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1535
min-width: 120px - 8px * 2;
1536
}
1537
// FIXME: Ugly overriding
1539
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1540
min-width: 0;
1541
padding-left: ($medium-size - 24px) / 2;
1542
padding-right: ($medium-size - 24px) / 2;
1543
}
1544
&.selection-mode {
1546
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1547
// but let's keep it for backwards compatibility.
1548
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1549
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1550
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1551
background-color: $primary;
1552
color: $on-primary;
1553
&:backdrop {
1555
color: hint($on-primary);
1556
}
1557
.subtitle:link {
1559
color: $on-primary;
1560
}
1561
button:not(.suggested-action):not(.destructive-action) {
1563
border-image:
1564
radial-gradient(
1565
circle closest-corner at center calc(100% - 1px),
1566
currentcolor 0%,
1567
transparent 0%
1568
) 0 0 0 / 0 0 0;
1569
color: $on-primary;
1570
&:disabled {
1572
color: disabled($on-primary);
1573
}
1574
&:checked {
1576
border-image:
1577
radial-gradient(
1578
circle closest-corner at center calc(100% - 1px),
1579
currentcolor 100%,
1580
transparent 0%
1581
) 0 0 2 / 0 0 2px;
1582
color: $on-primary;
1583
&:disabled {
1585
color: disabled($on-primary);
1586
}
1587
}
1588
&:backdrop {
1590
color: hint($on-primary);
1591
&:disabled {
1593
color: disabled-hint($on-primary);
1594
}
1595
&:checked {
1597
color: hint($on-primary);
1598
&:disabled {
1600
color: disabled-hint($on-primary);
1601
}
1602
}
1603
}
1604
}
1605
.selection-menu {
1607
padding-left: 16px;
1608
padding-right: 16px;
1609
arrow {
1611
-GtkArrow-arrow-scaling: 1;
1612
}
1613
.arrow {
1615
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1616
}
1617
}
1618
}
1619
.selection-mode {
1621
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1622
background-color: $primary;
1623
}
1624
// squared corners when the window is maximized, tiled, or fullscreen
1626
.tiled &,
1627
.tiled-top &,
1628
.tiled-right &,
1629
.tiled-bottom &,
1630
.tiled-left &,
1631
.maximized &,
1632
.fullscreen & {
1633
border-radius: 0;
1634
box-shadow: $shadow-z1;
1635
}
1636
&.default-decoration {
1638
min-height: $small-size;
1639
padding: $container-padding;
1640
box-shadow: inset 0 1px highlight($titlebar);
1641
.tiled &,
1643
.maximized &,
1644
.fullscreen & {
1645
box-shadow: none;
1646
}
1647
button.titlebutton {
1649
min-height: $small-size;
1650
min-width: $small-size;
1651
margin: 0;
1652
padding: 0;
1653
}
1654
// workaround for non-animatable buttons
1656
.background:not(.csd) & button.titlebutton:active {
1657
background-size: 1000% 1000%;
1658
}
1659
}
1660
.solid-csd & {
1662
&:dir(rtl), &:dir(ltr) { // specificity bump
1663
border-radius: 0;
1664
box-shadow: $shadow-z1; // just remove the highlight
1665
}
1666
}
1667
}
1668
headerbar {
1670
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1671
min-height: $large-size;
1672
padding: 0 $container-padding;
1673
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1675
entry,
1676
spinbutton,
1677
button {
1678
margin-top: $container-padding;
1679
margin-bottom: $container-padding;
1680
}
1681
separator.titlebutton {
1683
margin-top: $large-size / 4;
1684
margin-bottom: $large-size / 4;
1685
background-color: divider($on-titlebar);
1686
}
1687
switch {
1689
margin-top: ($large-size - 24px) / 2;
1690
margin-bottom: ($large-size - 24px) / 2;
1691
}
1692
// reset button margins of the spinbutton
1694
spinbutton button {
1695
margin-top: 0;
1696
margin-bottom: 0;
1697
}
1698
// FIXME: This is a hacky workaround.
1700
.entry-tag {
1701
margin-top: 5px;
1702
margin-bottom: 5px;
1703
}
1704
}
1705
// Development versions of apps to use a differently styled headerbar
1707
window.devel .titlebar:not(.selection-mode) {
1708
}
1709
/**
1711
* Pathbars
1712
*/
1713
%pathbar_button,
1715
.path-bar.linked:not(.vertical) > button {
1716
padding-left: ($medium-size - 24px) / 2;
1717
padding-right: ($medium-size - 24px) / 2;
1718
border-image:
1719
radial-gradient(
1720
circle closest-corner at center calc(100% - 1px),
1721
$primary 0%,
1722
transparent 0%
1723
) 0 0 0 / 0 0 0;
1724
border-radius: $corner-radius;
1725
color: hint($on-surface);
1726
@include ink-color($on-surface, $button-style: "flat");
1727
&:disabled {
1729
background-color: transparent;
1730
color: disabled-hint($on-surface);
1731
}
1732
&:checked {
1734
border-image:
1735
radial-gradient(
1736
circle closest-corner at center calc(100% - 1px),
1737
$primary 100%,
1738
transparent 0%
1739
) 0 0 2 / 0 0 2px;
1740
color: $primary;
1741
@include ink-color($primary, $button-style: "flat");
1742
&:disabled {
1744
background-color: transparent;
1745
color: disabled($on-surface);
1746
}
1747
}
1748
label:not(:only-child) {
1750
&:first-child {
1751
margin-left: 0;
1752
}
1753
&:last-child {
1755
margin-right: 0;
1756
}
1757
}
1758
&.text-button {
1760
min-width: 0;
1761
}
1762
&.slider-button {
1764
padding-left: (24px - 16px) / 2;
1765
padding-right: (24px - 16px) / 2;
1766
}
1767
}
1768
/**
1770
* Tree Views
1771
*/
1772
treeview.view {
1774
@at-root * {
1775
-GtkTreeView-horizontal-separator: 4;
1776
-GtkTreeView-grid-line-width: 1;
1777
-GtkTreeView-grid-line-pattern: '';
1778
-GtkTreeView-tree-line-width: 1;
1779
-GtkTreeView-tree-line-pattern: '';
1780
-GtkTreeView-expander-size: 16;
1781
}
1782
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1784
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1785
// to avoid borders being overridden by the previously set props
1787
rubberband {
1788
@extend %rubberband;
1789
}
1790
&:hover,
1792
&:selected {
1793
border-radius: 0;
1794
}
1795
&.separator {
1797
min-height: 1px + 2px * 2;
1798
color: divider($on-surface);
1799
}
1800
&:drop(active) {
1802
// FIXME: box-shadow, background-color and background-image are not available here.
1803
border-style: solid none;
1804
border-width: 9999px;
1805
border-color: overlay("hover", $on-surface);
1806
&.after {
1808
border-top-style: none;
1809
}
1810
&.before {
1812
border-bottom-style: none;
1813
}
1814
}
1815
&.expander {
1817
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1818
-gtk-icon-transform: rotate(-90deg);
1819
&:dir(rtl) {
1821
-gtk-icon-transform: rotate(90deg);
1822
}
1823
&:checked {
1825
-gtk-icon-transform: unset;
1826
}
1827
color: hint($on-surface);
1829
&:hover,
1831
&:active {
1832
color: $on-surface;
1833
}
1834
&:disabled {
1836
color: disabled-hint($on-surface);
1837
}
1838
}
1839
// progress bar in treeviews
1841
&.progressbar {
1842
border-bottom: $bar-size solid $primary;
1843
background-color: transparent;
1844
&:selected:hover {
1846
background-color: transparent;
1847
}
1848
}
1849
// progress bar trough in treeviews
1851
&.trough {
1852
border-bottom: $bar-size solid disabled-stroke($on-surface);
1853
background-color: transparent;
1854
&:selected:hover {
1856
background-color: transparent;
1857
}
1858
}
1859
header {
1861
button {
1862
padding: 2px 6px;
1863
border-style: none solid solid none;
1864
border-width: 1px;
1865
border-color: divider($on-surface);
1866
border-radius: 0;
1867
background-clip: padding-box;
1868
color: hint($on-surface);
1869
@include ink-color($on-surface, $button-style: "flat", $hover-alt: true);
1870
@include list-item;
1871
&:disabled {
1873
background-color: transparent;
1874
color: disabled-hint($on-surface);
1875
}
1876
&:last-child {
1878
border-right-style: none;
1879
}
1880
}
1881
}
1882
button.dnd,
1884
header.button.dnd { // for treeview-like derive widgets
1885
padding: 2px 6px;
1886
border-style: none solid solid;
1887
border-width: 1px;
1888
border-color: divider($on-surface);
1889
border-radius: 0;
1890
box-shadow: none;
1891
background-clip: padding-box;
1892
background-color: $surface-z8;
1893
color: $primary;
1894
}
1895
// see tests/testaccel to test
1897
acceleditor > label {
1898
background-color: $primary;
1899
}
1900
}
1901
/**
1903
* Menus
1904
*/
1905
menubar,
1907
.menubar {
1908
-GtkWidget-window-dragging: true;
1909
padding: 0;
1910
// box-shadow: inset 0 -1px divider($on-surface);
1911
background-color: $titlebar;
1912
color: $on-titlebar;
1913
&:backdrop {
1915
background-color: $titlebar-backdrop;
1916
color: hint($on-titlebar);
1917
}
1918
.csd & {
1920
transition: $transition;
1921
}
1922
> menuitem {
1924
transition: $transition;
1925
min-height: 20px;
1926
padding: 4px 8px;
1927
color: hint($on-titlebar);
1928
// Seems like it :hover even with keyboard focus
1930
&:hover {
1931
transition: none;
1932
background-color: overlay("activated", $on-titlebar);
1933
color: $on-titlebar;
1934
}
1935
&:disabled {
1937
color: disabled-hint($on-titlebar);
1938
}
1939
}
1940
}
1941
// Needed to make the border-radius of menus work
1943
// otherwise the background bleeds out of the menu edges
1944
.background.popup {
1945
background-color: transparent;
1946
}
1947
menu,
1949
.menu,
1950
.context-menu {
1951
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1952
padding: 4px 0;
1953
border: 1px solid divider($on-surface); // adds borders in a non composited env
1954
box-shadow: inset 0 1px highlight($surface-z8);
1955
background-color: $surface-z8;
1956
color: $on-surface;
1957
font: initial;
1958
text-shadow: none;
1959
.csd & {
1961
border: none; // axes borders in a composited env
1962
border-radius: $corner-radius;
1963
}
1964
menuitem {
1966
transition: background-color $duration $ease-out;
1967
min-height: 20px;
1968
min-width: 40px;
1969
padding: 4px 8px;
1970
&:hover {
1972
transition: none;
1973
background-color: overlay("hover", $on-surface);
1974
}
1975
&:disabled {
1977
color: disabled($on-surface);
1978
}
1979
// submenu indicators
1981
arrow {
1982
min-height: 16px;
1983
min-width: 16px;
1984
color: hint($on-surface);
1985
&:disabled {
1987
color: disabled-hint($on-surface);
1988
}
1989
&:dir(ltr) {
1991
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1992
margin-left: 8px;
1993
}
1994
&:dir(rtl) {
1996
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1997
margin-right: 8px;
1998
}
1999
}
2000
// avoids labels color being overridden, see
2002
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
2003
label {
2004
&:dir(rtl),
2005
&:dir(ltr) {
2006
// color: inherit;
2007
}
2008
}
2009
}
2010
// overflow arrows
2012
> arrow {
2013
min-height: 16px;
2014
min-width: 16px;
2015
padding: 4px;
2016
background-color: $surface-z8;
2017
color: hint($on-surface);
2018
&.top {
2020
margin-top: -4px;
2021
border-bottom: 1px solid divider($on-surface);
2022
border-radius: $corner-radius $corner-radius 0 0;
2023
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2024
}
2025
&.bottom {
2027
margin-top: 4px * 2;
2028
margin-bottom: -4px * 3;
2029
border-top: 1px solid divider($on-surface);
2030
border-radius: 0 0 $corner-radius $corner-radius;
2031
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2032
}
2033
&:hover {
2035
background-image: image(overlay("hover", $on-surface));
2036
}
2037
&:disabled {
2039
border-color: transparent;
2040
background-color: transparent;
2041
color: transparent;
2042
// color: disabled-hint($on-surface);
2043
}
2044
}
2045
separator {
2047
margin: 4px 0;
2048
}
2049
}
2050
menuitem {
2052
accelerator {
2053
color: hint($on-surface);
2054
}
2055
&:disabled accelerator {
2057
color: disabled-hint($on-surface);
2058
}
2059
}
2060
/**
2062
* Popovers
2063
*/
2064
popover.background {
2066
transition: $transition-shadow;
2067
padding: 2px;
2068
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2069
background-color: $surface-z8;
2070
&:backdrop {
2072
box-shadow: $shadow-z2;
2073
}
2074
&,
2076
.csd & {
2077
border-style: solid;
2078
border-width: 1px;
2079
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2080
border-radius: $corner-radius + 1px;
2081
background-clip: padding-box;
2082
}
2083
> stack {
2085
margin: -4px; // remove extra padding from menu style popovers
2086
}
2087
> toolbar {
2089
margin: -2px;
2090
}
2091
> list,
2093
> .view,
2094
> toolbar {
2095
border-style: none;
2096
box-shadow: none;
2097
background-color: transparent;
2098
}
2099
&.touch-selection,
2101
&.magnifier,
2102
&.osd {
2103
// @extend %osd;
2104
}
2105
button:not(.suggested-action):not(.destructive-action) {
2107
// @extend %button-flat;
2108
}
2109
.linked:not(.vertical) > entry:not(:only-child) {
2111
// border-radius: $corner-radius $corner-radius 0 0;
2112
}
2113
&.menu button,
2115
button.model {
2116
@extend %button-flat;
2117
min-height: 32px;
2119
padding: 0 8px;
2120
border-radius: $corner-radius;
2121
}
2122
separator {
2124
margin: 4px 0;
2125
}
2126
list separator {
2128
margin: 0;
2129
}
2130
}
2131
/**
2133
* Notebooks
2134
*/
2135
notebook {
2137
&:focus > header > tabs > tab:checked {
2138
background-color: overlay("focus", $primary);
2139
}
2140
> header {
2142
&.top {
2143
box-shadow: inset 0 -1px divider($on-surface);
2144
> tabs {
2146
> tab {
2147
box-shadow: inset 0 -2px transparent;
2148
&:checked {
2150
box-shadow: inset 0 -2px $primary;
2151
}
2152
}
2153
}
2154
}
2155
&.bottom {
2157
box-shadow: inset 0 1px divider($on-surface);
2158
> tabs {
2160
> tab {
2161
box-shadow: inset 0 2px transparent;
2162
&:checked {
2164
box-shadow: inset 0 2px $primary;
2165
}
2166
}
2167
}
2168
}
2169
&.left {
2171
box-shadow: inset -1px 0 divider($on-surface);
2172
> tabs {
2174
> tab {
2175
box-shadow: inset -2px 0 transparent;
2176
&:checked {
2178
box-shadow: inset -2px 0 $primary;
2179
}
2180
}
2181
}
2182
}
2183
&.right {
2185
box-shadow: inset 1px 0 divider($on-surface);
2186
> tabs {
2188
> tab {
2189
box-shadow: inset 2px 0 transparent;
2190
&:checked {
2192
box-shadow: inset 2px 0 $primary;
2193
}
2194
}
2195
}
2196
}
2197
&.top > tabs > arrow {
2199
@extend %notebook_vert_arrows;
2200
}
2201
&.bottom > tabs > arrow {
2203
@extend %notebook_vert_arrows;
2204
}
2205
@at-root %notebook_vert_arrows {
2207
&.down {
2208
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2209
}
2210
&.up {
2212
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2213
}
2214
}
2215
&.left > tabs > arrow {
2217
@extend %notebook_horz_arrows;
2218
}
2219
&.right > tabs > arrow {
2221
@extend %notebook_horz_arrows;
2222
}
2223
@at-root %notebook_horz_arrows {
2225
&.down {
2226
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2227
}
2228
&.up {
2230
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2231
}
2232
}
2233
> tabs > arrow {
2235
min-height: 16px;
2236
min-width: 16px;
2237
padding: 4px;
2238
border-radius: 0;
2239
color: hint($on-surface);
2240
@extend %ripple;
2241
@include ink-color($on-surface, $hover-alt: true);
2242
&:disabled {
2244
color: disabled-hint($on-surface);
2245
}
2246
}
2247
> tabs > tab {
2249
transition: $transition,
2250
background-size 0ms,
2251
background-image 0ms;
2252
min-height: $small-size;
2253
min-width: $small-size;
2254
padding: $container-padding 16px;
2255
outline: none;
2256
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2257
background-repeat: no-repeat;
2258
background-position: center;
2259
background-size: 0% 0%;
2260
color: hint($on-surface);
2261
font-weight: 500;
2262
&:hover {
2264
background-color: overlay("hover-alt", $on-surface);
2265
}
2266
&:disabled {
2268
color: disabled-hint($on-surface);
2269
}
2270
&:checked {
2272
transition: $transition,
2273
background-size $ripple-fade-in-duration $ease-out,
2274
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2275
background-color: transparent;
2276
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2277
background-size: 1000% 1000%;
2278
color: $primary;
2279
&:disabled {
2281
color: disabled($on-surface);
2282
}
2283
&.reorderable-page {
2285
// background-color: $surface-z1;
2286
// color: $on-surface;
2287
}
2288
&.dnd {
2290
background-color: overlay("dragged", $primary);
2291
}
2292
}
2293
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2295
> box {
2296
transition: background-color $duration $ease-out;
2297
margin: -$container-padding -16px;
2298
padding: $container-padding 16px;
2299
&:drop(active) {
2301
background-color: overlay("hover", $on-surface);
2302
}
2303
}
2304
// colors the button like the label, overridden otherwise
2306
button.flat {
2307
@extend %button-small;
2308
&:last-child {
2310
margin-left: $container-padding;
2311
margin-right: $container-padding - 16px;
2312
}
2313
&:first-child {
2315
margin-left: $container-padding - 16px;
2316
margin-right: $container-padding;
2317
}
2318
}
2319
}
2320
}
2321
}
2322
/**
2324
* Scrollbars
2325
*/
2326
scrollbar {
2328
$_slider_min_length: 24px;
2329
// disable steppers
2331
@at-root * {
2332
-GtkScrollbar-has-backward-stepper: false;
2333
-GtkScrollbar-has-forward-stepper: false;
2334
}
2335
transition: $transition;
2337
// background-color: $surface-z0;
2338
background-clip: padding-box;
2339
// scrollbar border
2341
&.top { border-bottom: 1px solid divider($on-surface); }
2342
&.bottom { border-top: 1px solid divider($on-surface); }
2343
&.left { border-right: 1px solid divider($on-surface); }
2344
&.right { border-left: 1px solid divider($on-surface); }
2345
// slider
2347
slider {
2348
transition: background-color $duration $ease-out;
2349
min-width: 8px;
2350
min-height: 8px;
2351
border: 4px solid transparent;
2352
border-radius: $circular-radius;
2353
background-clip: padding-box;
2354
background-color: scrollbar-thumb($on-surface);
2355
&:hover {
2357
background-color: scrollbar-thumb($on-surface, "hover");
2358
}
2359
&:active {
2361
background-color: scrollbar-thumb($on-surface, "pressed");
2362
}
2363
&:disabled {
2365
background-color: scrollbar-thumb($on-surface, "disabled");
2366
}
2367
}
2368
&.fine-tune {
2370
slider {
2371
min-width: 4px;
2372
min-height: 4px;
2373
}
2374
&.horizontal slider {
2376
margin: 2px 0;
2377
}
2378
&.vertical slider {
2380
margin: 0 2px;
2381
}
2382
}
2383
&.overlay-indicator {
2385
&:not(.fine-tune) slider {
2386
transition-property: background-color, min-height, min-width;
2387
}
2388
&:not(.dragging):not(.hovering) {
2390
border-color: transparent;
2391
background-color: transparent;
2392
slider {
2394
min-width: 4px;
2395
min-height: 4px;
2396
margin: 4px - 1px;
2397
border: 1px solid rgba($surface-z1, .3);
2398
}
2399
button {
2401
min-width: 4px;
2402
min-height: 4px;
2403
margin: 4px - 1px;
2404
border: 1px solid rgba($surface-z1, .3);
2405
border-radius: $circular-radius;
2406
background-color: scrollbar-thumb($on-surface);
2407
background-clip: padding-box;
2408
-gtk-icon-source: none;
2409
&:disabled {
2411
background-color: scrollbar-thumb($on-surface, "disabled");
2412
}
2413
}
2414
&.horizontal {
2416
slider {
2417
min-width: $_slider_min_length;
2418
}
2419
button {
2421
min-width: 8px;
2422
}
2423
}
2424
&.vertical {
2426
slider {
2427
min-height: $_slider_min_length;
2428
}
2429
button {
2431
min-height: 8px;
2432
}
2433
}
2434
}
2435
&.dragging,
2437
&.hovering {
2438
background-color: $surface-z8;
2439
}
2440
}
2441
&.horizontal slider {
2443
min-width: $_slider_min_length;
2444
}
2445
&.vertical slider {
2447
min-height: $_slider_min_length;
2448
}
2449
// button styling
2451
button {
2452
@extend %button-flat-basic;
2453
min-width: 16px;
2455
min-height: 16px;
2456
padding: 0;
2457
border-radius: 0;
2458
}
2459
// button icons
2461
&.vertical {
2462
button {
2463
&.down {
2464
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2465
}
2466
&.up {
2468
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2469
}
2470
}
2471
}
2472
&.horizontal {
2474
button {
2475
&.down {
2476
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2477
}
2478
&.up {
2480
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2481
}
2482
}
2483
}
2484
}
2485
/**
2488
* Switch
2489
*/
2490
switch {
2492
transition: all $duration $ease-out;
2493
margin: $container-padding 0;
2494
padding: 0 2px;
2495
border: 5px solid transparent;
2496
border-radius: $circular-radius;
2497
background-color: stroke($on-surface);
2498
background-clip: padding-box;
2499
font-size: 0;
2500
&:checked {
2502
background-color: rgba($primary, .5);
2503
}
2504
&:disabled {
2506
opacity: .5;
2507
}
2508
// hide on/off icons for >=3.24.5
2510
image {
2511
margin: -8px;
2512
-gtk-icon-transform: scale(0);
2513
}
2514
slider {
2516
transition: all $duration $ease-out;
2517
min-width: 20px;
2518
min-height: 20px;
2519
margin: -3px -2px;
2520
border-radius: $circular-radius;
2521
outline: none;
2522
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2523
background-color: $surface-switch-thumb;
2524
}
2525
&:hover slider {
2527
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2528
}
2529
&:focus slider {
2531
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2532
}
2533
&:checked slider {
2535
background-color: $primary;
2536
}
2537
&:checked:hover slider {
2539
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2540
}
2541
&:checked:focus slider {
2543
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2544
}
2545
row:selected & {
2547
}
2548
}
2549
/**
2551
* Check and Radio items
2552
*/
2553
// draw regular check and radio items using our PNG assets
2555
// all assets are rendered from assets.svg. never add pngs directly
2556
// selection-mode
2558
.view.content-view.check:not(list),
2559
.content-view:not(list) check {
2560
min-height: 40px;
2561
min-width: 40px;
2562
margin: 0;
2563
padding: 0;
2564
background-color: transparent;
2565
background-image: none;
2566
-gtk-icon-shadow: $icon-shadow-z2;
2567
&:hover,
2569
&:active {
2570
-gtk-icon-shadow: $icon-shadow-z4;
2571
}
2572
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2574
&#{$class} {
2575
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2576
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2578
}
2579
}
2580
}
2581
checkbutton,
2583
radiobutton {
2584
outline: none;
2585
}
2586
checkbutton.text-button,
2588
radiobutton.text-button {
2589
// this is for a nice focus on check and radios text
2590
padding: 2px;
2591
label:not(:only-child) {
2593
margin: 0 4px;
2594
}
2595
}
2596
$check-radio-size: 40px;
2598
check,
2600
radio {
2601
min-height: 24px;
2602
min-width: 24px;
2603
margin: -($check-radio-size - 24px) / 2;
2604
padding: ($check-radio-size - 24px) / 2;
2605
border-radius: $circular-radius;
2606
color: hint($on-surface);
2607
@extend %ripple;
2608
@include ink-color($on-surface);
2609
&:checked,
2611
&:indeterminate {
2612
color: $primary;
2613
@include ink-color($primary);
2614
}
2615
&:disabled {
2617
color: disabled-hint($on-surface);
2618
}
2619
&:only-child {
2621
// margin: -12px;
2622
}
2623
popover modelbutton.flat & {
2625
&,
2626
&:focus,
2627
&:hover,
2628
&:focus:hover,
2629
&:active,
2630
&:disabled {
2631
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2632
background-color: transparent;
2633
background-image: none;
2634
}
2635
&.left:dir(rtl) {
2637
margin-left: -12px;
2638
margin-right: -4px;
2639
}
2640
&.right:dir(ltr) {
2642
margin-left: -4px;
2643
margin-right: -12px;
2644
}
2645
}
2646
menu menuitem & {
2648
transition: none;
2649
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2650
padding: 0;
2651
&:dir(ltr) {
2653
margin-right: 8px;
2654
}
2655
&:dir(rtl) {
2657
margin-left: 8px;
2658
}
2659
&,
2661
&:checked,
2662
&:indeterminate {
2663
&:hover,
2664
&:focus {
2665
background-color: transparent;
2666
}
2667
}
2668
}
2669
}
2670
%check,
2672
check {
2673
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2674
&:checked {
2676
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2677
}
2678
&:indeterminate {
2680
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2681
}
2682
}
2683
%radio,
2685
radio {
2686
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2687
&:checked {
2689
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2690
}
2691
&:indeterminate {
2693
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2694
}
2695
border-image-slice: $check-radio-size / 2px;
2697
border-image-width: $check-radio-size / 2;
2698
$radio-indicator-size: 10px / $check-radio-size / 2;
2700
border-image-source:
2702
-gtk-gradient(
2703
radial,
2704
center center, 0,
2705
center center, .001,
2706
to($primary),
2707
to(transparent)
2708
);
2709
&:checked:not(:indeterminate) {
2711
border-image-source:
2712
-gtk-gradient(
2713
radial,
2714
center center, 0,
2715
center center, $radio-indicator-size,
2716
to($primary),
2717
to(transparent)
2718
);
2719
&:disabled {
2721
border-image-source:
2722
-gtk-gradient(
2723
radial,
2724
center center, 0,
2725
center center, $radio-indicator-size,
2726
to(disabled-hint($on-surface)),
2727
to(transparent)
2728
);
2729
}
2730
}
2731
}
2732
%small_check,
2734
menu menuitem check {
2735
min-height: 16px;
2736
min-width: 16px;
2737
border-radius: $corner-radius;
2738
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2739
&:checked {
2741
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2742
}
2743
&:indeterminate {
2745
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2746
}
2747
}
2748
%small_radio,
2750
menu menuitem radio {
2751
min-height: 16px;
2752
min-width: 16px;
2753
border-image: none;
2754
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2755
&:checked {
2757
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2758
}
2759
&:indeterminate {
2761
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2762
}
2763
}
2764
// ANIMATION:
2766
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2767
// the transformation is set on the active state and it get reset on the checked state.
2768
radio:not(:checked):active {
2769
// -gtk-icon-transform: scale(0);
2770
}
2771
// Otherwise, treeview.view styling will be applied...
2773
treeview.view check,
2774
treeview.view radio {
2775
padding: 0;
2776
color: hint($on-surface);
2777
&:checked,
2779
&:indeterminate {
2780
color: $primary;
2781
}
2782
&:disabled {
2784
color: disabled-hint($on-surface);
2785
}
2786
&,
2788
&:hover,
2789
&:selected,
2790
&:selected:hover {
2791
box-shadow: none;
2792
background-color: transparent;
2793
}
2794
}
2795
treeview.view radio:checked {
2797
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2798
border-image: none;
2799
}
2800
/**
2802
* GtkScale
2803
*/
2804
scale {
2806
// sizing
2807
$_marks_length: 8px;
2808
$_marks_distance: 7px;
2809
$trough_size: 2px;
2811
$finetune_trough_size: 4px;
2812
$slider_size: 32px;
2814
$slider_margin: -($slider_size - $trough_size) / 2;
2816
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2817
$color_slider_margin: -($slider_size) * 3 / 4;
2819
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2820
min-height: $trough_size;
2822
min-width: $trough_size;
2823
&.horizontal {
2825
padding: ($medium-size - $trough_size) / 2 12px;
2826
}
2827
&.vertical {
2829
padding: 12px ($medium-size - $trough_size) / 2;
2830
}
2831
// the slider is inside the trough, so to have make it bigger there's a negative margin
2833
slider {
2834
min-height: $slider_size;
2835
min-width: $slider_size;
2836
margin: $slider_margin;
2837
}
2838
// click-and-hold the slider to activate
2840
&.fine-tune {
2841
&.horizontal {
2842
min-height: $finetune_trough_size;
2843
padding-top: ($medium-size - $finetune_trough_size) / 2;
2844
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2845
}
2846
&.vertical {
2848
min-width: $finetune_trough_size;
2849
padding-left: ($medium-size - $finetune_trough_size) / 2;
2850
padding-right: ($medium-size - $finetune_trough_size) / 2;
2851
}
2852
// to make the trough grow in fine-tune mode
2854
slider {
2855
margin: $finetune_slider_margin;
2856
}
2857
}
2858
// the backing bit
2860
trough {
2861
transition: background-color $duration $ease-out;
2862
outline: none;
2863
background-color: stroke($on-surface);
2864
&:disabled {
2866
background-color: disabled-stroke($on-surface);
2867
}
2868
}
2869
// the colored part of the backing bit
2871
highlight {
2872
transition: background-image $duration $ease-out;
2873
background-image: image($primary);
2874
&:disabled {
2876
background-color: $surface-z0;
2877
background-image: image(disabled-hint($on-surface));
2878
}
2879
}
2880
// this is another differently styled part of the backing bit, the most relevant use case is for example
2882
// in media player to indicate how much video stream as been cached
2883
fill {
2884
transition: background-color $duration $ease-out;
2885
background-color: stroke($on-surface);
2886
&:disabled {
2888
background-color: transparent;
2889
}
2890
}
2891
slider {
2893
transition: background-color $duration $ease-out,
2894
background-size $ripple-fade-out-duration $ease-out,
2895
background-image $ripple-fade-out-opacity-duration $ease-out;
2896
background-repeat: no-repeat;
2897
background-position: center;
2898
background-size: auto, 1000% 1000%;
2899
border-radius: 50%;
2900
color: $primary;
2901
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2903
&#{$class} {
2904
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2905
background-image:
2907
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2908
radial-gradient(circle, transparent 10%, transparent 0%);
2909
}
2910
}
2911
&:hover {
2913
background-color: overlay("hover", $primary);
2914
}
2915
&:focus {
2917
background-color: overlay("focus", $primary);
2918
}
2919
&:active {
2921
$_url: 'assets/scale-slider#{$asset-suffix}';
2922
transition: background-color $duration $ease-out,
2924
background-size 0ms,
2925
background-image 0ms;
2926
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2927
background-image:
2928
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2929
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2930
background-size: auto, 0% 0%;
2931
}
2932
}
2933
marks,
2935
value {
2936
color: hint($on-surface);
2937
}
2938
indicator {
2940
background-color: stroke($on-surface);
2941
color: transparent;
2942
}
2943
//marks margins
2945
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2946
(horizontal, bottom, bottom, top),
2947
(vertical, top, left, right),
2948
(vertical, bottom, right, left) {
2949
&.#{$scale_orient} marks {
2950
&.#{$marks_class} {
2951
margin-#{$marks_margin}: $_marks_distance;
2952
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2953
}
2954
}
2955
&.#{$scale_orient}.fine-tune marks {
2957
&.#{$marks_class} {
2958
margin-#{$marks_margin}: $_marks_distance - 1px;
2959
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2960
}
2961
}
2962
}
2963
&.horizontal {
2965
indicator {
2966
min-height: $_marks_length;
2967
min-width: 1px;
2968
}
2969
}
2970
&.vertical {
2972
indicator {
2973
min-height: 1px;
2974
min-width: $_marks_length;
2975
}
2976
}
2977
// *WARNING* scale with marks madness following
2979
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2981
@each $marks_class, $marks_infix in (
2982
".marks-before:not(.marks-after)": "-marks-before",
2983
".marks-after:not(.marks-before)": "-marks-after"
2984
) {
2985
&#{$dir_class}#{$marks_class} {
2986
slider {
2987
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2988
&#{$state_class} {
2989
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2990
background-image:
2992
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2993
radial-gradient(circle, transparent 10%, transparent 0%);
2994
}
2995
}
2996
&:active {
2998
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2999
background-image:
3001
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3002
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3003
}
3004
}
3005
}
3006
}
3007
}
3008
&.color {
3010
min-height: 0;
3011
min-width: 0;
3012
&.horizontal {
3014
padding: 0 0 12px 0;
3015
slider {
3017
&:dir(ltr), &:dir(rtl) { // specificity bump
3018
margin-bottom: $color_slider_margin;
3019
margin-top: $color_marks_slider_margin;
3020
}
3021
}
3022
}
3023
&.vertical {
3025
&:dir(ltr) {
3026
padding: 0 0 0 12px;
3027
slider {
3029
margin-left: $color_slider_margin;
3030
margin-right: $color_marks_slider_margin;
3031
}
3032
}
3033
&:dir(rtl) {
3035
padding: 0 12px 0 0;
3036
slider {
3038
margin-right: $color_slider_margin;
3039
margin-left: $color_marks_slider_margin;
3040
}
3041
}
3042
}
3043
}
3044
}
3045
/**
3047
* Progress bars
3048
*/
3049
progressbar {
3051
// sizing
3052
&.horizontal {
3053
trough,
3054
progress {
3055
min-height: $bar-size;
3056
}
3057
}
3058
&.vertical {
3060
trough,
3061
progress {
3062
min-width: $bar-size;
3063
}
3064
}
3065
// FIXME: insensitive state missing and some other state should be set probably
3067
color: hint($on-surface);
3068
font-size: smaller;
3069
trough {
3071
background-color: disabled-stroke($on-surface);
3072
}
3073
progress {
3075
background-color: $primary;
3076
}
3077
&.osd { // progressbar.osd used for epiphany page loading progress
3079
// min-width: $bar-size;
3080
// min-height: $bar-size;
3081
// background-color: transparent;
3082
trough {
3084
// background-color: transparent;
3085
}
3086
progress {
3088
// background-color: $primary;
3089
}
3090
}
3091
// makes the progress indicator disappear, when the fraction is 0
3093
trough.empty progress {
3094
all: unset;
3095
}
3096
}
3097
/**
3099
* Level Bar
3100
*/
3101
levelbar {
3103
&.horizontal {
3104
block {
3105
min-height: $bar-size;
3106
}
3107
&.discrete block {
3109
min-width: $medium-size;
3110
&:not(:last-child) {
3112
margin-right: 2px;
3113
}
3114
}
3115
}
3116
&.vertical {
3118
block {
3119
min-width: $bar-size;
3120
}
3121
&.discrete block {
3123
min-height: $medium-size;
3124
&:not(:last-child) {
3126
margin-bottom: 2px;
3127
}
3128
}
3129
}
3130
trough {
3132
}
3133
block {
3135
&.low {
3136
background-color: $warning;
3137
}
3138
&.high,
3140
&:not(.empty) {
3141
background-color: $primary;
3142
}
3143
&.full {
3145
background-color: $success;
3146
}
3147
&.empty {
3149
background-color: disabled-stroke($on-surface);
3150
}
3151
}
3152
}
3153
/**
3155
* Print dialog
3156
*/
3157
printdialog {
3159
paper {
3160
padding: 0;
3161
border: 1px solid divider($on-surface);
3162
background-clip: padding-box;
3163
background-color: $surface-z1;
3164
color: $on-surface;
3165
}
3166
.dialog-action-box {
3168
margin: 12px;
3169
}
3170
}
3171
/**
3173
* Frames
3174
*/
3175
frame > border,
3177
.frame {
3178
margin: 0;
3179
padding: 0;
3180
border: 1px solid divider($on-surface);
3181
border-radius: 0;
3182
box-shadow: none;
3183
background-clip: padding-box;
3184
background-color: $surface-z1;
3185
&.flat {
3187
border-style: none;
3188
background-color: transparent;
3189
}
3190
}
3191
// for backward compatibility
3193
frame.flat > border {
3194
border-style: none;
3195
background-color: transparent;
3196
}
3197
actionbar > revealer > box {
3199
padding: $container-padding;
3200
border-top: 1px solid divider($on-surface);
3201
// background-color: $surface-z1;
3202
button:not(.suggested-action):not(.destructive-action) {
3204
@extend %button-flat;
3205
}
3206
.linked:not(.vertical) > entry:not(:only-child) {
3208
border-radius: $corner-radius $corner-radius 0 0;
3209
}
3210
}
3211
scrolledwindow {
3213
// avoid double borders when viewport inside scrolled window
3214
viewport.frame {
3215
border-style: none;
3216
background-color: transparent;
3217
}
3218
// This is used when content is touch-dragged past boundaries.
3220
// draws a box on top of the content, the size changes programmatically.
3221
@at-root overshoot {
3222
&.top { @include overshoot(top); }
3223
&.bottom { @include overshoot(bottom); }
3225
&.left { @include overshoot(left); }
3227
&.right { @include overshoot(right); }
3229
}
3230
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3232
@at-root undershoot {
3233
// &.top { @include undershoot(top); }
3234
// &.bottom { @include undershoot(bottom); }
3236
// &.left { @include undershoot(left); }
3238
// &.right { @include undershoot(right); }
3240
}
3241
// the small square between two scrollbars
3243
@at-root junction {
3244
border-style: solid none none solid;
3245
border-width: 1px;
3246
border-color: divider($on-surface);
3247
// background-color: $surface-z0;
3248
&:dir(rtl) {
3250
border-style: solid solid none none;
3251
}
3252
}
3253
}
3254
// vbox and hbox separators
3256
separator {
3257
min-width: 1px;
3258
min-height: 1px;
3259
background-color: divider($on-surface);
3260
}
3261
%hide_separators {
3263
min-width: 0;
3264
min-height: 0;
3265
background-color: transparent;
3266
}
3267
/**
3269
* Lists
3270
*/
3271
list {
3273
border-color: divider($on-surface);
3274
// background-color: $surface-z1;
3275
row {
3277
padding: 2px;
3278
}
3279
}
3280
row {
3282
background-clip: padding-box;
3283
&.activatable {
3285
@extend %ripple;
3286
@include ink-color($on-surface, $hover-alt: true);
3287
@include list-item;
3288
// this is for indicathing which row generated a popover
3290
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3291
&.has-open-popup {
3292
background-color: overlay("activated", $on-surface);
3293
}
3294
}
3295
&:selected {
3297
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3298
&.has-open-popup {
3300
background-color: overlay("activated", $primary, $on: $overlay-selected);
3301
}
3302
}
3303
}
3304
/**
3306
* App Notifications
3307
*/
3308
.app-notification {
3310
@extend %toolbar-osd;
3311
margin: 8px;
3312
button {
3314
@extend %button-flat;
3315
&.text-button:not(:disabled) {
3317
color: $primary;
3318
@include ink-color($primary, $button-style: "flat");
3319
}
3320
}
3321
&.frame {
3323
border-style: none;
3324
}
3325
border {
3327
border-style: none;
3328
background-color: transparent;
3329
}
3330
}
3331
/**
3333
* Expanders
3334
*/
3335
expander {
3337
title > arrow {
3338
transition: all $duration $ease-out;
3339
min-width: 16px;
3340
min-height: 16px;
3341
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3342
&:checked {
3344
&:dir(ltr) {
3345
-gtk-icon-transform: rotate(-180deg);
3346
}
3347
&:dir(rtl) {
3349
-gtk-icon-transform: rotate(180deg);
3350
}
3351
}
3352
color: hint($on-surface);
3354
&:hover,
3356
&:active {
3357
color: $on-surface;
3358
}
3359
&:disabled {
3361
color: disabled-hint($on-surface);
3362
}
3363
}
3364
}
3365
/**
3367
* Calendar
3368
*/
3369
calendar {
3371
padding: 1px;
3372
border: 1px solid divider($on-surface);
3373
background-clip: padding-box;
3374
background-color: $surface-z1;
3375
color: $on-surface;
3376
&:disabled {
3378
color: disabled($on-surface);
3379
}
3380
&:selected {
3382
border-radius: $corner-radius + 1px;
3383
background-color: $overlay-selected;
3384
}
3385
&.header {
3387
border-style: none none solid;
3388
border-color: divider($on-surface);
3389
border-radius: 0;
3390
}
3391
&.button {
3393
border-radius: $corner-radius + 1px;
3394
color: hint($on-surface);
3395
&:hover {
3397
background-image: image(overlay("hover", $on-surface));
3398
}
3399
&:disabled {
3401
color: disabled-hint($on-surface);
3402
}
3403
}
3404
&.highlight {
3406
color: hint($on-surface);
3407
font-weight: 500;
3408
}
3409
&:indeterminate {
3411
color: disabled-hint($on-surface);
3412
}
3413
}
3414
/**
3416
* Dialogs
3417
*/
3418
// Message Dialog styling
3420
messagedialog {
3421
&.background {
3422
background-color: $surface-z8;
3423
}
3424
.titlebar {
3426
min-height: $small-size;
3427
border-style: none;
3428
box-shadow: inset 0 1px highlight($surface-z8);
3429
background-color: $surface-z8;
3430
color: $on-surface;
3431
&:backdrop {
3433
background-color: $surface-z8;
3434
color: hint($on-surface);
3435
}
3436
}
3437
&.csd {
3439
// rounded bottom border styling for csd version
3440
&.background {
3441
// bigger radius for better antialiasing
3442
border-bottom-left-radius: $corner-radius;
3443
border-bottom-right-radius: $corner-radius;
3444
}
3445
}
3446
// Hint text
3448
box.vertical > label + label {
3449
color: hint($on-surface);
3450
}
3451
.dialog-action-box {
3453
margin-top: -$container-padding;
3454
// padding: $container-padding;
3455
button {
3457
@extend %button-flat;
3458
&:not(:last-child) {
3460
margin-right: $container-padding;
3461
}
3462
&:not(:disabled) {
3464
color: $primary;
3465
@include ink-color($primary, $button-style: "flat");
3466
}
3467
&.suggested-action:not(:disabled) {
3469
// color: $primary;
3470
// @include ink-color($primary, $button-style: "flat");
3471
}
3472
&.destructive-action:not(:disabled) {
3474
color: $error;
3475
@include ink-color($error, $button-style: "flat");
3476
}
3477
}
3478
}
3479
}
3480
filechooser {
3482
.dialog-action-box {
3483
border-top: 1px solid divider($on-surface);
3484
}
3485
#pathbarbox {
3487
border-bottom: 1px solid divider($on-surface);
3488
// background-color: $surface-z0;
3489
// The new folder button
3491
> stack > box > button {
3492
@extend %button-flat-activatable;
3493
border-radius: $circular-radius;
3495
}
3496
}
3497
}
3498
filechooserbutton:drop(active) {
3500
// box-shadow: none;
3501
}
3502
/**
3504
* Sidebar
3505
*/
3506
.sidebar {
3508
border-style: none;
3509
background-color: transparent;
3510
&:not(separator) {
3512
@at-root %sidebar_left,
3513
&:dir(ltr),
3514
&.left,
3515
&.left:dir(rtl) {
3516
border-right: 1px solid divider($on-surface);
3517
border-left-style: none;
3518
}
3519
@at-root %sidebar_right,
3521
&:dir(rtl),
3522
&.right {
3523
border-left: 1px solid divider($on-surface);
3524
border-right-style: none;
3525
}
3526
}
3527
list {
3529
// background-color: transparent;
3530
}
3531
paned & {
3533
&,
3534
&.left,
3535
&.right,
3536
&.left:dir(rtl),
3537
&:dir(rtl),
3538
&:dir(ltr) {
3539
border-style: none;
3540
}
3541
}
3542
}
3543
stacksidebar.sidebar {
3545
& {
3546
&:dir(ltr),
3547
&.left,
3548
&.left:dir(rtl) {
3549
list {
3550
@extend %sidebar_left;
3551
}
3552
}
3553
&:dir(rtl),
3555
&.right {
3556
list {
3557
@extend %sidebar_right;
3558
}
3559
}
3560
}
3561
+ separator.vertical,
3563
separator.horizontal {
3564
@extend %hide_separators;
3565
}
3566
list {
3568
padding: 4px;
3569
// background-color: $surface-z0; // This should not be necessary, but the parent stacksidebar ignores background-color.
3570
}
3571
row {
3573
min-height: 32px;
3574
padding: 0 8px - 6px;
3575
border-radius: $corner-radius;
3576
color: hint($on-surface);
3577
font-weight: 500;
3578
&:selected {
3580
$background-color: overlay("activated", $primary);
3581
color: $primary;
3582
@include ink-color($primary, $on: $background-color, $hover-alt: true);
3583
}
3584
+ row {
3586
margin-top: 4px;
3587
}
3588
> label {
3590
padding-left: 6px;
3591
padding-right: 6px;
3592
}
3593
&.needs-attention > label {
3595
@extend %needs-attention;
3596
}
3597
}
3598
}
3599
separator.sidebar {
3601
background-color: divider($on-surface);
3602
&.selection-mode,
3604
.selection-mode & {
3605
// background-color: divider($on-primary);
3606
}
3607
}
3608
/**
3610
* File chooser
3611
*/
3612
// dim the sidebar icons, see bug #786613 for details on this oddity
3614
row image.sidebar-icon {
3615
transition: color $duration $ease-out;
3616
color: hint($on-surface);
3617
&:disabled {
3619
color: disabled-hint($on-surface);
3620
}
3621
}
3622
placessidebar.sidebar {
3624
> viewport.frame {
3625
border-style: none;
3626
background-color: transparent;
3627
}
3628
list {
3630
padding: (4px - 3px) 0 4px;
3631
}
3632
row {
3634
// Needs overriding of the GtkListBoxRow padding
3635
min-height: 32px;
3636
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3637
padding: 0;
3638
border-radius: $corner-radius;
3639
// Using margins/padding directly in the SidebarRow
3641
// will make the animation of the new bookmark row jump
3642
> revealer {
3643
padding: 0 8px;
3644
}
3645
&:selected {
3647
$background-color: overlay("activated", $primary);
3648
color: $primary;
3649
font-weight: 500;
3650
@include ink-color($primary, $on: $background-color, $hover-alt: true);
3651
image.sidebar-icon {
3653
color: $primary;
3654
}
3655
}
3656
&:disabled {
3658
color: disabled($on-surface);
3659
}
3660
image.sidebar-icon {
3662
&:dir(ltr) {
3663
padding-right: 8px;
3664
}
3665
&:dir(rtl) {
3667
padding-left: 8px;
3668
}
3669
}
3670
label.sidebar-label {
3672
&:dir(ltr) {
3673
padding-right: 2px;
3674
}
3675
&:dir(rtl) {
3677
padding-left: 2px;
3678
}
3679
}
3680
@at-root button.sidebar-button {
3682
@extend %button-flat-basic;
3683
@extend %button-small;
3684
}
3685
&.sidebar-placeholder-row {
3687
background-color: overlay("hover", $on-surface);
3688
}
3689
&.sidebar-new-bookmark-row {
3691
color: $primary;
3692
image.sidebar-icon {
3694
color: $primary;
3695
}
3696
}
3697
}
3698
}
3699
placesview {
3701
.server-list-button {
3702
> image {
3703
-gtk-icon-transform: rotate(-.5turn);
3704
}
3705
&:checked > image {
3707
-gtk-icon-transform: rotate(0turn);
3708
}
3709
}
3710
// this selects the "connect to server" label
3712
> actionbar > revealer > box > label {
3713
padding-left: 8px;
3714
padding-right: 8px;
3715
}
3716
}
3717
/**
3719
* Paned
3720
*/
3721
paned {
3723
> separator {
3724
min-width: 1px;
3725
min-height: 1px;
3726
-gtk-icon-source: none; // defeats the ugly default handle decoration
3727
border-style: none; // just to be sure
3728
background-color: transparent;
3729
// workaround, using background istead of a border since the border will get rendered twice (?)
3730
background-image: image(divider($on-surface));
3731
background-size: 1px 1px;
3732
background-clip: content-box; // avoids borders image being rendered twice (?)
3733
&.wide {
3735
min-width: 6px;
3736
min-height: 6px;
3737
// background-color: $surface-z0;
3738
background-image: image(divider($on-surface)), image(divider($on-surface));
3739
background-size: 1px 1px, 1px 1px;
3740
}
3741
}
3742
&.horizontal > separator {
3744
background-repeat: repeat-y;
3745
&:dir(ltr) {
3747
margin: 0 -8px 0 0;
3748
padding: 0 8px 0 0;
3749
background-position: left;
3750
}
3751
&:dir(rtl) {
3753
margin: 0 0 0 -8px;
3754
padding: 0 0 0 8px;
3755
background-position: right;
3756
}
3757
&.wide {
3759
margin: 0;
3760
padding: 0;
3761
background-repeat: repeat-y, repeat-y;
3762
background-position: left, right;
3763
}
3764
}
3765
&.vertical > separator {
3767
margin: 0 0 -8px 0;
3768
padding: 0 0 8px 0;
3769
background-repeat: repeat-x;
3770
background-position: top;
3771
&.wide {
3773
margin: 0;
3774
padding: 0;
3775
background-repeat: repeat-x, repeat-x;
3776
background-position: bottom, top;
3777
}
3778
}
3779
}
3780
/**
3782
* GtkInfoBar
3783
*/
3784
infobar {
3786
border-style: none;
3787
&.action:hover > revealer > box {
3789
background-image: image(overlay("hover", $on-surface));
3790
}
3791
&.info > revealer > box,
3793
&.question > revealer > box {
3794
border-bottom: 1px solid divider($on-surface);
3795
// background-color: $surface-z1;
3796
button {
3798
@extend %button-flat;
3799
&.text-button:not(:disabled) {
3801
color: $primary;
3802
@include ink-color($primary, $button-style: "flat");
3803
}
3804
}
3805
}
3806
&.warning > revealer > box {
3808
background-color: $warning;
3809
color: $on-warning;
3810
button.flat {
3812
color: $on-warning;
3813
@include ink-color($on-warning, $button-style: "flat");
3814
}
3815
selection {
3817
}
3818
*:link {
3820
color: $on-warning;
3821
}
3822
}
3823
&.error > revealer > box {
3825
background-color: $error;
3826
color: $on-error;
3827
button.flat {
3829
color: $on-error;
3830
@include ink-color($on-error, $button-style: "flat");
3831
}
3832
selection {
3834
}
3835
*:link {
3837
color: $on-error;
3838
}
3839
}
3840
// Remove ugly hard-coded padding
3842
button label {
3843
margin: 0 -4px;
3844
}
3845
}
3846
/**
3848
* Tooltips
3849
*/
3850
tooltip {
3852
&.background {
3853
// background-color needs to be set this way otherwise it gets drawn twice
3854
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3855
background-color: $tooltip;
3856
color: $on-tooltip;
3857
}
3858
// padding: 4px; /* not working */
3860
border-radius: $corner-radius;
3861
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3862
&:not(.csd):not(.unity-csd) {
3864
// border: 1px solid divider($on-surface);
3865
// border-radius: $corner-radius + 1px;
3866
}
3867
// FIXME: we need a border or tooltips vanish on black background.
3869
decoration {
3870
background-color: transparent;
3871
}
3872
> box {
3874
margin: -6px; // Remove hard-coded 6px margin
3875
min-height: 32px - 4px * 2;
3876
padding: 4px 8px;
3877
}
3878
.dim-label {
3880
color: hint($on-tooltip);
3881
}
3882
* {
3884
// workaround for Eclipse.
3885
// do not include any declaration here.
3886
}
3887
}
3888
/**
3890
* Color Chooser
3891
*/
3892
colorswatch {
3894
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3895
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3896
// applied to the overlay box.
3897
// base color corners rounding
3899
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3900
// sports a bigger radius.
3901
// nth-child is needed by the custom color strip.
3902
&.top {
3904
border-top-left-radius: $corner-radius + .5px;
3905
border-top-right-radius: $corner-radius + .5px;
3906
overlay {
3908
border-top-left-radius: $corner-radius;
3909
border-top-right-radius: $corner-radius;
3910
}
3911
}
3912
&.bottom {
3914
border-bottom-left-radius: $corner-radius + .5px;
3915
border-bottom-right-radius: $corner-radius + .5px;
3916
overlay {
3918
border-bottom-left-radius: $corner-radius;
3919
border-bottom-right-radius: $corner-radius;
3920
}
3921
}
3922
&.left,
3924
&:first-child:not(.top) {
3925
border-top-left-radius: $corner-radius + .5px;
3926
border-bottom-left-radius: $corner-radius + .5px;
3927
overlay {
3929
border-top-left-radius: $corner-radius;
3930
border-bottom-left-radius: $corner-radius;
3931
}
3932
}
3933
&.right,
3935
&:last-child:not(.bottom) {
3936
border-top-right-radius: $corner-radius + .5px;
3937
border-bottom-right-radius: $corner-radius + .5px;
3938
overlay {
3940
border-top-right-radius: $corner-radius;
3941
border-bottom-right-radius: $corner-radius;
3942
}
3943
}
3944
&.dark {
3946
color: $on-dark;
3947
}
3948
&.light {
3950
color: $on-light;
3951
}
3952
overlay {
3954
transition: $transition-shadow;
3955
box-shadow: $shadow-z1;
3956
&:drop(active),
3958
&:hover {
3959
box-shadow: $shadow-z3;
3960
}
3961
}
3962
&#add-color-button {
3964
border-radius: $corner-radius $corner-radius 0 0;
3965
color: $on-surface;
3966
&:only-child {
3968
border-radius: $corner-radius;
3969
}
3970
overlay {
3972
background-color: $surface-z8;
3973
}
3974
}
3975
&:disabled {
3977
opacity: .5;
3978
overlay {
3980
box-shadow: none;
3981
}
3982
}
3983
row:selected & {
3985
}
3986
&#editor-color-sample {
3988
border-radius: $corner-radius + .5px;
3989
overlay {
3991
border-radius: $corner-radius;
3992
&:hover {
3994
// box-shadow: $shadow-z1;
3995
}
3996
}
3997
}
3998
}
3999
// colorscale popup
4001
colorchooser .popover.osd {
4002
transition: $transition-shadow;
4003
border-radius: $corner-radius;
4004
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
4005
background-color: $surface-z8;
4006
&:backdrop {
4008
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
4009
}
4010
}
4011
/**
4013
* Misc
4014
*/
4015
// content view (grid/list)
4017
.content-view {
4018
// background-color: $surface-z0;
4019
&:hover {
4021
// -gtk-icon-effect: highlight;
4022
}
4023
rubberband,
4025
.rubberband {
4026
@extend %rubberband;
4027
}
4028
}
4029
.scale-popup {
4031
.osd & {
4032
// @extend %osd;
4033
// FIXME: quick hack, redo properly
4035
button.flat {
4036
}
4037
}
4038
// +/- buttons on GtkVolumeButton popup
4040
button {
4041
}
4042
}
4043
/**
4045
* Window Decorations
4046
*/
4047
decoration {
4049
transition: $transition-shadow;
4050
border-radius: $corner-radius $corner-radius 0 0;
4051
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4052
// FIXME rationalize shadows
4054
// this is used for the resize cursor area
4056
margin: 8px;
4057
&:backdrop {
4059
// the transparent shadow here is to enforce that the shadow extents don't
4060
// change when we go to backdrop, to prevent jumping windows.
4061
// The biggest shadow should be in the same order then in the active state
4062
// or the jumping will happen during the transition.
4063
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4064
}
4065
.maximized &,
4067
.fullscreen &,
4068
.tiled &,
4069
.tiled-top &,
4070
.tiled-right &,
4071
.tiled-bottom &,
4072
.tiled-left & {
4073
border-radius: 0;
4074
}
4075
.popup & {
4077
box-shadow: none;
4078
}
4079
// server-side decorations as used by mutter
4081
.ssd & {
4082
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4083
}
4084
.csd.popup & {
4086
border-radius: $corner-radius;
4087
box-shadow: $shadow-z4;
4088
}
4089
tooltip.csd & {
4091
border-radius: $corner-radius;
4092
box-shadow: none;
4093
}
4094
messagedialog.csd & {
4096
border-radius: $corner-radius;
4097
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4098
&:backdrop {
4100
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4101
}
4102
}
4103
.solid-csd & {
4105
margin: 0;
4106
padding: 2px;
4107
border-radius: 0;
4108
box-shadow: none;
4109
box-shadow: inset 0 1px highlight($titlebar);
4110
background-color: $titlebar;
4111
&:backdrop {
4113
background-color: $titlebar-backdrop;
4114
}
4115
}
4116
}
4117
// Window Close button
4119
button.titlebutton {
4120
border-radius: $circular-radius;
4121
.selection-mode & {
4123
}
4124
}
4125
// catch all extend :)
4128
.monospace {
4130
font-family: monospace;
4131
}
4132
/**
4134
* Touch Copy & Paste
4135
*/
4136
// touch selection handlebars for the Popover.osd above
4138
cursor-handle {
4139
color: $primary;
4140
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4141
&.top:dir(ltr),
4143
&.bottom:dir(rtl) {
4144
-gtk-icon-transform: rotate(90deg);
4145
}
4146
&.bottom:dir(ltr),
4148
&.top:dir(rtl) {
4149
-gtk-icon-transform: unset;
4150
}
4151
&.insertion-cursor:dir(ltr),
4153
&.insertion-cursor:dir(rtl) {
4154
padding-top: 6px;
4155
-gtk-icon-transform: rotate(45deg);
4156
}
4157
}
4158
// Decouple the font of context menus from their entry/textview
4160
.context-menu {
4161
font: initial;
4162
}
4163
// shortcut window keys
4165
.keycap {
4166
min-width: 28px - 8px * 2;
4167
min-height: 28px;
4168
padding-left: 8px;
4169
padding-right: 8px;
4170
border-radius: $corner-radius;
4171
box-shadow: $shadow-z1;
4172
background-color: $surface-z8;
4173
color: $on-surface;
4174
font-size: smaller;
4175
}
4176
// workaround for clipped shadows of .keycap
4178
shortcut:last-child {
4179
margin-bottom: 4px;
4180
}
4181
// FIXME needs to be done widget by widget, this wildcard should really die
4183
:not(decoration):not(window):drop(active) {
4184
// caret-color: $primary;
4185
}
4186
// FIXME aggregate with buttons
4188
stackswitcher button.text-button {
4189
min-width: 100px;
4190
}
4191
// FIXME aggregate with buttons
4193
stackswitcher button.circular,
4194
stackswitcher button.text-button.circular {
4195
min-width: $medium-size;
4196
min-height: $medium-size;
4197
padding: 0;
4198
}
4199
/**
4201
* App Icons
4202
*/
4203
// Outline for low res icons
4205
.lowres-icon {
4206
// -gtk-icon-shadow: none;
4207
}
4208
// Drapshadow for large icons
4210
.icon-dropshadow {
4211
// -gtk-icon-shadow: none;
4212
}
4213
/**
4215
* Emoji
4216
*/
4217
popover.emoji-picker {
4219
padding: 0;
4220
entry {
4222
border-bottom: 1px solid divider($on-surface);
4223
border-image: none;
4224
border-radius: 0;
4225
box-shadow: none;
4226
background-color: transparent;
4227
}
4228
scrolledwindow {
4230
border-bottom: 1px solid divider($on-surface);
4231
}
4232
}
4233
button.emoji-section {
4235
margin: 4px;
4236
&:not(:last-child) {
4238
margin-right: 0;
4239
}
4240
}
4241
popover.emoji-picker .emoji {
4243
min-width: 3em;
4244
min-height: 3em;
4245
padding: 0 8px;
4246
// font-size: larger;
4247
widget {
4249
transition: $transition;
4250
border-radius: $corner-radius;
4251
&:hover {
4253
background-color: overlay("hover", $on-surface);
4254
}
4255
}
4256
}
4257
popover.emoji-completion {
4259
padding: 8px 0;
4260
arrow {
4262
border: none;
4263
background: none;
4264
}
4265
.emoji-completion-row {
4267
min-height: $menuitem-size;
4268
padding: 0 12px;
4269
}
4270
.emoji:hover {
4272
background-color: overlay("hover", $on-surface);
4273
}
4274
}
4275