ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: overlay("focus", $on-surface);
35
}
36
}
37
/**
39
* Base States
40
*/
41
.background {
43
background-color: $background;
44
color: $on-surface;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $on-surface;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: disabled($on-surface);
72
}
73
&:selected {
75
background-color: $primary;
76
color: $on-primary;
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $on-surface;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
90
}
91
&:disabled {
93
color: disabled($on-surface);
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
background-color: $overlay-selected;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: hint($on-surface); // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: $on-dark;
127
text-shadow: $text-shadow;
128
.rubberband,
130
rubberband {
131
border: 1px solid primary($on-dark);
132
background-color: rgba(primary($on-dark), .3);
133
}
134
}
135
%rubberband,
137
.rubberband,
138
rubberband {
139
border: 1px solid $primary;
140
background-color: rgba($primary, .24);
141
}
142
flowbox {
144
rubberband {
145
@extend %rubberband;
146
}
147
flowboxchild {
149
padding: 4px;
150
border-radius: $corner-radius;
151
&:selected {
153
background-color: $overlay-selected;
154
}
155
}
156
}
157
.content-view .tile {
159
// margin: 2px;
160
// padding: 0;
161
// border-radius: 0;
162
// background-color: black;
163
&:selected {
165
background-color: transparent;
166
}
167
}
168
label {
170
caret-color: $primary; // this shouldn't be needed.
171
&.separator {
173
color: hint($on-surface);
174
}
175
selection {
177
background-color: $overlay-selected;
178
}
179
&:disabled {
181
color: disabled($on-surface);
182
headerbar &,
184
menuitem &,
185
tab &,
186
button & {
187
color: inherit;
188
}
189
}
190
&.osd {
192
border-radius: $corner-radius;
193
background-color: $tooltip;
194
color: $on-tooltip;
195
}
196
}
197
.dim-label {
199
color: hint($on-surface);
200
}
201
assistant {
203
.sidebar {
204
padding: 4px 0;
205
// background-color: $base;
206
}
207
.sidebar label {
209
min-height: $medium-size;
210
padding: 0 12px;
211
color: disabled($on-surface);
212
font-weight: 500;
213
&.highlight {
215
color: $on-surface;
216
}
217
}
218
}
219
%osd,
221
.osd {
222
// opacity: .9;
223
}
224
/**
226
* Spinner Animation
227
*/
228
@keyframes spin {
230
to {
231
-gtk-icon-transform: rotate(1turn);
232
}
233
}
234
spinner {
236
background: none;
237
opacity: 0; // non spinning spinner makes no sense
238
color: $primary;
239
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
240
transition: opacity $duration * 4 $ease-out;
241
animation: spin 1s linear infinite;
242
&:checked {
244
opacity: 1;
245
}
246
&:disabled {
248
color: disabled-hint($on-surface);
249
}
250
}
251
/**
253
* Text Entries
254
*/
255
%entry,
257
entry {
258
min-height: $medium-size;
259
padding: 0 8px;
260
border-radius: $corner-radius $corner-radius 0 0;
261
@include entry(normal);
263
&:focus {
265
@include entry(checked);
266
}
267
&:drop(active) {
269
@include entry(hover);
270
}
271
&:disabled {
273
@include entry(disabled);
274
}
275
&.flat {
277
min-height: 0;
278
padding: 2px;
279
border-radius: 0;
280
background-color: transparent;
281
}
282
// icons inside the entry
284
image {
285
// min-height: $small-size;
286
// min-width: $small-size;
287
// border-radius: $circular-radius;
288
// @extend %ripple;
289
// @include ink-color($on-surface);
290
color: hint($on-surface);
291
&:hover,
293
&:active {
294
color: $on-surface;
295
}
296
&:disabled {
298
color: disabled($on-surface);
299
}
300
&.left {
302
margin-left: ($medium-size - 16px) / 2 - 8px;
303
margin-right: 6px;
304
}
305
&.right {
307
margin-left: 6px;
308
margin-right: ($medium-size - 16px) / 2 - 8px;
309
}
310
}
311
undershoot {
313
&.left {
314
@include undershoot(left);
315
}
316
&.right {
318
@include undershoot(right);
319
}
320
}
321
selection {
323
background-color: $overlay-selected;
324
}
325
// entry error and warning style
327
@each $class, $color in (".error": $error, ".warning": $warning) {
328
&#{$class} {
329
@include entry(normal, $color);
330
&:focus {
332
@include entry(checked, $color);
333
}
334
&:disabled {
336
@include entry(disabled, $color);
337
}
338
}
339
}
340
.osd & {
342
}
343
progress {
345
margin: 0 -8px -4px;
346
border-bottom: 2px solid $primary;
347
background-color: transparent;
348
}
349
// linked entries
351
.linked:not(.vertical) > & {
352
@extend %linked;
353
}
354
// Vertically linked entries
356
.linked.vertical > & {
357
@extend %linked-vertical;
358
}
359
}
360
%entry_raised {
362
border-radius: $corner-radius;
363
@include entry(raised-normal);
365
&:focus {
367
@include entry(raised-focus);
368
}
369
&:drop(active) {
371
@include entry(raised-hover);
372
}
373
&:disabled {
375
@include entry(raised-disabled);
376
}
377
// entry error and warning style
379
@each $class, $color in (".error": $error, ".warning": $warning) {
380
&#{$class} {
381
@include entry(raised-normal, $color);
382
&:focus {
384
@include entry(raised-focus, $color);
385
}
386
&:disabled {
388
@include entry(raised-disabled, $color);
389
}
390
image {
392
color: hint(on($color));
393
&:hover,
395
&:active {
396
color: on($color);
397
}
398
&:disabled {
400
color: disabled(on($color));
401
}
402
}
403
}
404
}
405
}
406
treeview entry {
408
&,
409
&.flat {
410
background-color: $base;
411
&,
413
&:focus {
414
border-image: none;
415
box-shadow: none;
416
}
417
}
418
}
419
.entry-tag {
421
margin: 2px;
422
border-radius: $circular-radius;
423
box-shadow: none;
424
background-color: fill($on-surface);
425
color: $on-surface;
426
&:hover {
428
background-image: image(overlay("hover", $on-surface));
429
}
430
// side margins: compensate the entry padding with a negative margin
432
// then the negative margin itself
433
:dir(ltr) & {
434
margin-left: 4px;
435
margin-right: 0;
436
padding-left: 12px;
437
padding-right: 8px;
438
}
439
:dir(rtl) & {
441
margin-left: 0;
442
margin-right: 4px;
443
padding-left: 8px;
444
padding-right: 12px;
445
}
446
// seems any sizing doesn't work
448
&.button {
449
box-shadow: none;
450
background-color: transparent;
451
color: hint($on-surface);
452
}
453
}
454
/**
456
* Buttons
457
*/
458
// stuff for .needs-attention
460
@keyframes needs-attention {
461
from {
462
background-image:
463
-gtk-gradient(
464
radial,
465
center center, 0,
466
center center, .001,
467
to($primary),
468
to(transparent)
469
);
470
}
471
to {
473
background-image:
474
-gtk-gradient(
475
radial,
476
center center, 0,
477
center center, .5,
478
to($primary),
479
to(transparent)
480
);
481
}
482
}
483
%button,
485
button {
486
min-height: 24px;
487
min-width: 16px;
488
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
489
border-radius: $corner-radius;
490
background-color: $surface;
491
color: $on-surface;
492
font-weight: 500;
493
@extend %ripple;
495
@include ink-color($on-surface, $elevation: true);
496
&:disabled {
498
box-shadow: none;
499
background-color: fill($on-surface);
500
color: disabled($on-surface);
501
}
502
&:checked {
504
background-color: overlay("activated", $primary, $background: $surface);
505
color: $primary;
506
@include ink-color($primary, $elevation: true);
507
&:disabled {
509
box-shadow: none;
510
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
511
color: disabled($on-surface);
512
}
513
}
514
&.text-button {
516
min-width: 64px - 16px * 2;
517
padding-left: 16px;
518
padding-right: 16px;
519
}
520
&.image-button {
522
min-width: 24px;
523
padding: ($medium-size - 24px) / 2;
524
border-radius: $circular-radius;
525
}
526
// NOTE: Some image-only buttons use this as well
528
&.text-button.image-button {
529
min-width: 24px;
530
padding: ($medium-size - 24px) / 2;
531
border-radius: $corner-radius;
532
label {
534
&:first-child {
535
margin-left: 16px - ($medium-size - 24px) / 2;
536
}
537
&:last-child {
539
margin-right: 16px - ($medium-size - 24px) / 2;
540
}
541
}
542
image:not(:only-child) {
544
margin: 0 (24px - 16px) / 2;
545
}
546
}
547
.linked:not(.vertical) > & {
549
@extend %linked;
550
&.image-button:not(.text-button) {
552
@extend %linked-image-button;
553
}
554
}
555
.linked.vertical > & {
557
@extend %linked-vertical;
558
&.image-button:not(.text-button) {
560
@extend %linked-vertical-image-button;
561
}
562
}
563
}
564
%button-flat-basic {
566
background-color: transparent;
567
color: hint($on-surface);
568
@include ink-color($on-surface);
569
&:disabled {
571
background-color: transparent;
572
color: disabled-hint($on-surface);
573
}
574
}
575
%button-flat-activatable {
577
@extend %button-flat-basic;
578
&:checked {
580
background-color: overlay("activated", $on-surface);
581
color: $on-surface;
582
@include ink-color($on-surface);
583
&:disabled {
585
color: disabled($on-surface);
586
}
587
}
588
}
589
%button-flat,
591
button.flat {
592
@extend %button-flat-activatable;
593
&.text-button {
595
min-width: 64px - 8px * 2;
596
padding-left: 8px;
597
padding-right: 8px;
598
}
599
&.text-button.image-button {
601
min-width: 24px;
602
padding: ($medium-size - 24px) / 2;
603
label {
605
&:first-child {
606
margin-left: 12px - ($medium-size - 24px) / 2;
607
}
608
&:last-child {
610
margin-right: 12px - ($medium-size - 24px) / 2;
611
}
612
}
613
}
614
.linked:not(.vertical) > &,
616
.linked.vertical > & {
617
&:not(:only-child) { // specificity bump
618
border-radius: $corner-radius;
619
&.image-button:not(.text-button) {
621
border-radius: $circular-radius;
622
}
623
}
624
}
625
}
626
button {
628
// big standalone buttons like in Documents pager
629
&.osd {
630
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
631
&.image-button {
633
padding: ($large-size - 24px) / 2;
634
}
635
&:disabled {
637
opacity: 0;
638
}
639
}
640
// overlay / OSD style
642
@at-root %osd_button,
643
.osd & {
644
}
645
// Suggested and Destructive Action buttons
647
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
648
&#{$class} {
649
background-color: $color;
650
color: on($color);
651
@include ink-color(on($color), $elevation: true);
652
&:disabled {
654
box-shadow: none;
655
background-color: fill($on-surface);
656
color: disabled($on-surface);
657
}
658
&:checked {
660
background-color: overlay("activated", on($color), $background: $color);
661
}
662
&.flat {
664
background-color: transparent;
665
color: $color;
666
@include ink-color($color);
667
&:disabled {
669
box-shadow: none;
670
background-color: transparent;
671
color: disabled-hint($on-surface);
672
}
673
&:checked {
675
background-color: overlay("activated", $color);
676
}
677
}
678
.osd & {
680
}
681
}
682
}
683
.stack-switcher > & {
685
// to position the needs attention dot, padding is added to the button
686
// child, a label needs just lateral padding while an icon needs vertical
687
// padding added too.
688
> label {
690
margin: 0 -6px;
691
padding: 0 6px;
692
}
693
> image {
695
margin: -3px -6px;
696
padding: 3px 6px;
697
}
698
&.needs-attention {
700
> label,
701
> image {
702
@extend %needs-attention;
703
}
704
&:checked {
706
> label,
707
> image {
708
animation: none;
709
background-image: none;
710
}
711
}
712
}
713
}
714
// hide separators
716
&.font,
717
&.file {
718
separator {
719
@extend %hide_separators;
720
}
721
}
722
&.font {
724
> box > box > label {
725
// font-weight: bold;
726
}
727
}
728
// inline-toolbar buttons
730
.inline-toolbar & {
731
// @extend %button-flat;
732
&:not(.text-button) {
734
border-radius: $circular-radius;
735
}
736
}
737
.primary-toolbar & {
739
-gtk-icon-shadow: none; // tango icons don't need shadows
740
}
741
&.close,
743
&.circular { // The Bloody Circul Button
744
border-radius: $circular-radius;
745
label {
747
// padding: 0;
748
}
749
}
750
}
751
%button-small {
753
min-height: $small-size;
754
min-width: $small-size;
755
padding: 0;
756
border-radius: $circular-radius;
757
}
758
%needs-attention {
760
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
761
background-repeat: no-repeat;
762
background-position: right 3px;
763
background-size: 6px 6px;
764
&:dir(rtl) {
766
background-position: left 3px;
767
}
768
}
769
// all the following is for the +|- buttons on inline toolbars, that way
771
// should really be deprecated...
772
.inline-toolbar toolbutton > button {
773
}
774
// More inline toolbar buttons
776
toolbar.inline-toolbar toolbutton {
777
&:not(:first-child) > button.flat {
778
// @extend %linked-not-first-child;
779
}
780
&:not(:last-child) > button.flat {
782
// @extend %linked-not-last-child;
783
}
784
}
785
%linked-not-first-child {
787
border-top-left-radius: 0;
788
border-bottom-left-radius: 0;
789
}
790
%linked-not-last-child {
792
border-top-right-radius: 0;
793
border-bottom-right-radius: 0;
794
}
795
%linked {
797
&:not(:first-child) {
798
@extend %linked-not-first-child;
799
}
800
&:not(:last-child) {
802
@extend %linked-not-last-child;
803
}
804
}
805
%linked-vertical-not-first-child {
807
border-top-left-radius: 0;
808
border-top-right-radius: 0;
809
}
810
%linked-vertical-not-last-child {
812
border-bottom-left-radius: 0;
813
border-bottom-right-radius: 0;
814
}
815
%linked-vertical {
817
&:not(:first-child) {
818
@extend %linked-vertical-not-first-child;
819
}
820
&:not(:last-child) {
822
@extend %linked-vertical-not-last-child;
823
}
824
}
825
%linked-image-button {
827
&:first-child {
828
border-top-left-radius: $corner-radius;
829
border-bottom-left-radius: $corner-radius;
830
}
831
&:last-child {
833
border-top-right-radius: $corner-radius;
834
border-bottom-right-radius: $corner-radius;
835
}
836
&:only-child {
838
border-radius: $circular-radius;
839
}
840
}
841
%linked-vertical-image-button {
843
&:first-child {
844
border-top-left-radius: $corner-radius;
845
border-top-right-radius: $corner-radius;
846
}
847
&:last-child {
849
border-bottom-left-radius: $corner-radius;
850
border-bottom-right-radius: $corner-radius;
851
}
852
&:only-child {
854
border-radius: $circular-radius;
855
}
856
}
857
/* menu buttons */
859
modelbutton.flat,
860
.menuitem.button.flat {
861
min-height: $menuitem-size;
862
padding: 0 8px;
863
border-radius: $corner-radius;
864
@extend %ripple;
866
@include ink-color($on-surface);
867
&:selected {
869
background-color: $overlay-selected;
870
}
871
}
872
modelbutton.flat arrow {
874
transition: color $duration $ease-out;
875
color: hint($on-surface);
876
&:disabled {
878
color: disabled-hint($on-surface);
879
}
880
&.left {
882
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
883
}
884
&.right {
886
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
887
}
888
}
889
button.color {
891
min-height: $small-size;
892
min-width: $small-size;
893
padding: $container-padding;
894
colorswatch:only-child {
896
&,
897
overlay {
898
// border-radius: 0;
899
}
900
}
901
}
902
/**
904
* Links
905
*/
906
*:link {
908
color: $primary;
909
}
910
*:visited {
912
color: $visited;
913
}
914
button.link {
916
&:link {
917
color: $primary;
918
@include ink-color($primary);
919
}
920
&:visited {
922
color: $visited;
923
@include ink-color($visited);
924
}
925
> label {
927
text-decoration-line: underline;
928
}
929
}
930
/**
932
* GtkSpinButton
933
*/
934
spinbutton {
936
&:not(.vertical) {
937
// in this horizontal configuration, the whole spinbutton
938
// behaves as the entry, so we extend the entry styling
939
// and nuke the style on the internal entry
940
@extend %entry;
941
padding: 0;
943
entry {
945
min-width: $large-size - 8px * 2;
946
// reset all the other props since the spinbutton node is styled here
947
margin: 0;
948
border-image: none;
949
border-radius: 0;
950
box-shadow: none;
951
background-color: transparent;
952
}
953
button {
955
@extend %button-flat-basic;
956
@extend %button-small;
957
// margin: $container-padding;
959
border: solid $container-padding transparent;
960
// Remove unwanted focus indicator
962
&:focus:not(:hover):not(:active) {
963
box-shadow: inset 0 0 0 9999px transparent;
964
}
965
&.up:dir(ltr),
967
&.down:dir(rtl) {
968
margin-left: -$container-padding / 2;
969
}
970
&.up:dir(rtl),
972
&.down:dir(ltr) {
973
margin-right: -$container-padding / 2;
974
}
975
}
976
}
977
// OSD horizontal
979
.osd &:not(.vertical) {
980
}
981
// Vertical
983
&.vertical {
984
// in the vertical configuration, we treat the spinbutton
985
// as a box, and tweak the style of the entry in the middle
986
// so that it's linked
987
// FIXME: this should not be set at all, but otherwise it gets the wrong
989
// color
990
caret-color: $primary;
991
// FIXME: this should not be set at all, but otherwise it gets the wrong
993
// color
994
&:disabled {
995
color: disabled($on-surface);
996
}
997
entry {
999
@extend %entry_raised;
1000
min-height: $medium-size;
1002
min-width: $large-size;
1003
padding: 0;
1004
}
1005
button {
1007
min-height: $medium-size;
1008
min-width: $large-size;
1009
padding: 0;
1010
@extend %button-flat-basic;
1012
// Remove unwanted focus indicator
1014
&:focus:not(:hover):not(:active) {
1015
box-shadow: inset 0 0 0 9999px transparent;
1016
}
1017
&.up {
1019
border-radius: $corner-radius $corner-radius 0 0;
1020
}
1021
&.down {
1023
border-radius: 0 0 $corner-radius $corner-radius;
1024
}
1025
}
1026
}
1027
// OSD vertical
1029
.osd &.vertical {
1030
}
1031
// Misc
1033
treeview &:not(.vertical) {
1034
min-height: 0;
1035
border-style: none;
1036
border-radius: 0;
1037
entry {
1039
min-height: 0;
1040
padding: 1px 2px;
1041
}
1042
}
1043
}
1044
/**
1046
* ComboBoxes
1047
*/
1048
combobox {
1050
arrow {
1051
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1052
min-height: 16px;
1053
min-width: 16px;
1054
}
1055
// workaround for menuitem selection
1057
decoration {
1058
transition: none;
1059
}
1060
button.combo cellview {
1062
&:dir(ltr) {
1063
margin-left: 8px - ($medium-size - 16px) / 2;
1064
}
1065
&:dir(rtl) {
1067
margin-right: 8px - ($medium-size - 16px) / 2;
1068
}
1069
}
1070
menu {
1072
padding: 2px 0;
1073
menuitem {
1075
min-height: $medium-size - 2px * 2;
1076
padding: 0 8px;
1077
}
1078
// overflow arrows
1080
> arrow {
1081
&.top {
1082
margin-top: -2px;
1083
}
1084
&.bottom {
1086
margin-top: 2px * 2;
1087
margin-bottom: -2px * 3;
1088
}
1089
}
1090
}
1091
&.linked {
1093
button:nth-child(2) {
1094
&:dir(ltr) {
1095
@extend %linked-not-first-child;
1096
}
1097
&:dir(rtl) {
1099
@extend %linked-not-last-child;
1100
}
1101
}
1102
}
1103
> .linked:not(.vertical) > entry:not(:only-child) {
1105
border-radius: $corner-radius $corner-radius 0 0;
1106
&:first-child {
1108
margin-right: -$medium-size;
1109
padding-right: $medium-size;
1110
}
1111
&:last-child {
1113
margin-left: -$medium-size;
1114
padding-left: $medium-size;
1115
}
1116
}
1117
> .linked:not(.vertical) > button:not(:only-child) {
1119
@extend %button-flat-activatable;
1120
// @extend %button-small;
1121
min-height: 16px;
1123
min-width: 16px;
1124
margin: ($medium-size - $small-size) / 2;
1125
padding: ($small-size - 16px) / 2;
1126
border-radius: $circular-radius;
1127
}
1128
}
1129
// the combo is a composite widget so the way we do button linking doesn't
1131
// work, special case needed. See
1132
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1133
.linked:not(.vertical) > combobox {
1135
&:not(:first-child) > box > button.combo {
1136
@extend %linked-not-first-child;
1137
}
1138
&:not(:last-child) > box > button.combo {
1140
@extend %linked-not-last-child;
1141
}
1142
}
1143
.linked.vertical > combobox {
1145
&:not(:first-child) > box > button.combo {
1146
@extend %linked-vertical-not-first-child;
1147
}
1148
&:not(:last-child) > box > button.combo {
1150
@extend %linked-vertical-not-last-child;
1151
}
1152
}
1153
button.combo:only-child {
1155
border-radius: $corner-radius $corner-radius 0 0;
1156
font-weight: normal;
1157
@include entry(normal);
1159
&:focus {
1161
@include entry(focus);
1162
}
1163
&:drop(active),
1165
&:hover {
1166
@include entry(hover);
1167
}
1168
&:checked {
1170
@include entry(checked);
1171
}
1172
&:disabled {
1174
@include entry(disabled);
1175
}
1176
arrow {
1178
transition: color $duration $ease-out;
1179
color: hint($on-surface);
1180
&:disabled {
1182
color: disabled-hint($on-surface);
1183
}
1184
}
1185
}
1186
/**
1188
* Toolbars
1189
*/
1190
toolbar {
1192
-GtkWidget-window-dragging: true;
1193
padding: 2px;
1194
background-color: $background;
1195
button {
1197
@extend %button-flat;
1198
}
1199
// on OSD
1201
.osd & {
1202
background-color: transparent;
1203
}
1204
// stand-alone OSD toolbars
1206
&.osd {
1207
@extend %toolbar-osd;
1208
// positional classes for `attached` osd toolbars
1210
&.left,
1211
&.right,
1212
&.top,
1213
&.bottom {
1214
border-radius: 0;
1215
}
1216
&.bottom {
1218
box-shadow: none;
1219
background-color: transparent;
1220
background-image:
1221
linear-gradient(
1222
to bottom,
1223
transparent,
1224
rgba(black, .1) 30%,
1225
rgba(black, .2) 50%,
1226
rgba(black, .4)
1227
);
1228
}
1229
}
1230
// toolbar separators
1232
&.horizontal > separator {
1233
margin: 2px;
1234
}
1235
&.vertical > separator {
1237
margin: 2px;
1238
}
1239
&:not(.inline-toolbar):not(.osd) {
1241
scale,
1242
entry,
1243
spinbutton,
1244
button {
1245
margin: 2px;
1246
}
1247
.linked entry,
1249
.linked spinbutton,
1250
.linked button {
1251
&:not(:first-child) {
1252
margin-left: 0;
1253
}
1254
&:not(:last-child) {
1256
margin-right: 0;
1257
}
1258
}
1259
spinbutton {
1261
entry,
1262
button {
1263
margin: 0;
1264
}
1265
}
1266
switch {
1268
margin: 2px + $container-padding 2px;
1269
}
1270
}
1271
}
1272
%toolbar-osd {
1274
transition: $transition-shadow;
1275
padding: $container-padding;
1276
border-radius: $corner-radius;
1277
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1278
background-color: $surface;
1279
&:backdrop {
1281
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1282
}
1283
}
1284
// searchbar, location-bar & inline-toolbar
1286
.inline-toolbar {
1287
padding: $container-padding;
1288
border-style: solid;
1289
border-width: 0 1px 1px;
1290
border-color: divider($on-surface);
1291
background-color: $base;
1292
}
1293
searchbar > revealer > box,
1295
.location-bar {
1296
padding: $container-padding;
1297
border-style: solid;
1298
border-width: 0 0 1px;
1299
border-color: divider($on-surface);
1300
background-color: $background;
1301
background-clip: border-box;
1302
}
1303
searchbar > revealer > box {
1305
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1306
margin: -6px;
1307
padding: $container-padding;
1308
}
1309
/**
1311
* Header bars
1312
*/
1313
.titlebar {
1315
transition: background-color $duration $ease-out, color $duration $ease-out;
1316
border-radius: $corner-radius $corner-radius 0 0;
1317
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1318
background-color: $titlebar;
1319
color: $on-titlebar;
1320
&:disabled {
1322
color: disabled($on-titlebar);
1323
}
1324
&:backdrop {
1326
background-color: $titlebar-backdrop;
1327
color: hint($on-titlebar);
1328
&:disabled {
1330
color: disabled-hint($on-titlebar);
1331
}
1332
}
1333
.title {
1335
padding-left: 12px;
1336
padding-right: 12px;
1337
font-weight: bold;
1338
}
1339
.subtitle {
1341
padding-left: 12px;
1342
padding-right: 12px;
1343
font-size: smaller;
1344
}
1345
.subtitle,
1347
.dim-label {
1348
transition: color $duration $ease-out;
1349
color: hint($on-titlebar);
1350
&:backdrop {
1352
color: disabled($on-titlebar);
1353
}
1354
}
1355
// Don't draw titlebar above titlebar
1357
.titlebar {
1358
background-color: transparent;
1359
box-shadow: none;
1360
}
1361
// The separator for split headerbars
1363
headerbar + separator {
1364
background-color: divider($on-titlebar);
1365
}
1366
entry {
1368
box-shadow: inset 0 -1px stroke($on-titlebar);
1369
background-color: entry-fill($on-titlebar);
1370
color: $on-titlebar;
1371
&:disabled {
1373
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1374
background-color: entry-fill($on-titlebar);
1375
color: disabled($on-titlebar);
1376
}
1377
image {
1379
color: hint($on-titlebar);
1380
&:hover,
1382
&:active {
1383
color: $on-titlebar;
1384
}
1385
&:disabled {
1387
color: disabled($on-titlebar);
1388
}
1389
}
1390
}
1391
.linked:not(.vertical) > entry:not(:only-child) {
1393
border-radius: $corner-radius $corner-radius 0 0;
1394
}
1395
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1397
@extend %button-flat;
1398
border-image:
1400
radial-gradient(
1401
circle closest-corner at center calc(100% - 1px),
1402
$titlebar-indicator 0%,
1403
transparent 0%
1404
) 0 0 0 / 0 0 0;
1405
background-color: transparent;
1406
color: hint($on-titlebar);
1407
@include ink-color($on-titlebar);
1408
&:disabled {
1410
color: disabled-hint($on-titlebar);
1411
}
1412
@at-root %titlebar-button-checked,
1414
&:checked {
1415
border-image:
1416
radial-gradient(
1417
circle closest-corner at center calc(100% - 1px),
1418
$titlebar-indicator 100%,
1419
transparent 0%
1420
) 0 0 2 / 0 0 2px;
1421
background-color: transparent;
1422
color: $on-titlebar;
1423
@include ink-color($on-titlebar);
1424
&:disabled {
1426
background-color: transparent;
1427
color: disabled($on-titlebar);
1428
}
1429
}
1430
&:backdrop {
1432
color: disabled($on-titlebar);
1433
&:disabled {
1435
color: disabled-hint($on-titlebar);
1436
}
1437
&:checked {
1439
color: hint($on-titlebar);
1440
&:disabled {
1442
color: disabled-hint($on-titlebar);
1443
}
1444
}
1445
}
1446
}
1447
button.suggested-action, button.destructive-action {
1449
&:disabled {
1450
background-color: fill($on-titlebar);
1451
color: disabled($on-titlebar);
1452
}
1453
}
1454
// FIXME: Ugly overriding
1456
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1457
min-width: 120px - 8px * 2;
1458
}
1459
// FIXME: Ugly overriding
1461
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1462
min-width: 0;
1463
padding-left: ($medium-size - 24px) / 2;
1464
padding-right: ($medium-size - 24px) / 2;
1465
}
1466
&.selection-mode {
1468
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1469
// but let's keep it for backwards compatibility.
1470
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1471
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1472
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1473
background-color: $primary;
1474
color: $on-primary;
1475
&:backdrop {
1477
color: hint($on-primary);
1478
}
1479
.subtitle:link {
1481
color: $on-primary;
1482
}
1483
button:not(.suggested-action):not(.destructive-action) {
1485
border-image:
1486
radial-gradient(
1487
circle closest-corner at center calc(100% - 1px),
1488
currentcolor 0%,
1489
transparent 0%
1490
) 0 0 0 / 0 0 0;
1491
color: $on-primary;
1492
&:disabled {
1494
color: disabled($on-primary);
1495
}
1496
&:checked {
1498
border-image:
1499
radial-gradient(
1500
circle closest-corner at center calc(100% - 1px),
1501
currentcolor 100%,
1502
transparent 0%
1503
) 0 0 2 / 0 0 2px;
1504
color: $on-primary;
1505
&:disabled {
1507
color: disabled($on-primary);
1508
}
1509
}
1510
&:backdrop {
1512
color: hint($on-primary);
1513
&:disabled {
1515
color: disabled-hint($on-primary);
1516
}
1517
&:checked {
1519
color: hint($on-primary);
1520
&:disabled {
1522
color: disabled-hint($on-primary);
1523
}
1524
}
1525
}
1526
}
1527
.selection-menu {
1529
padding-left: 16px;
1530
padding-right: 16px;
1531
arrow {
1533
-GtkArrow-arrow-scaling: 1;
1534
}
1535
.arrow {
1537
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1538
}
1539
}
1540
}
1541
.selection-mode {
1543
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1544
background-color: $primary;
1545
}
1546
// squared corners when the window is maximized, tiled, or fullscreen
1548
.tiled &,
1549
.tiled-top &,
1550
.tiled-right &,
1551
.tiled-bottom &,
1552
.tiled-left &,
1553
.maximized &,
1554
.fullscreen & {
1555
border-radius: 0;
1556
box-shadow: $shadow-z1;
1557
}
1558
&.default-decoration {
1560
min-height: $small-size;
1561
padding: $container-padding;
1562
box-shadow: inset 0 1px highlight($titlebar);
1563
.tiled &,
1565
.maximized &,
1566
.fullscreen & {
1567
box-shadow: none;
1568
}
1569
button.titlebutton {
1571
min-height: $small-size;
1572
min-width: $small-size;
1573
margin: 0;
1574
padding: 0;
1575
}
1576
// workaround for non-animatable buttons
1578
.background:not(.csd) & button.titlebutton:active {
1579
background-size: 1000% 1000%;
1580
}
1581
}
1582
.solid-csd & {
1584
&:dir(rtl), &:dir(ltr) { // specificity bump
1585
border-radius: 0;
1586
box-shadow: $shadow-z1; // just remove the highlight
1587
}
1588
}
1589
}
1590
headerbar {
1592
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1593
min-height: $large-size;
1594
padding: 0 $container-padding;
1595
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1597
entry,
1598
spinbutton,
1599
button {
1600
margin-top: $container-padding;
1601
margin-bottom: $container-padding;
1602
}
1603
separator.titlebutton {
1605
margin-top: $large-size / 4;
1606
margin-bottom: $large-size / 4;
1607
background-color: divider($on-titlebar);
1608
}
1609
switch {
1611
margin-top: ($large-size - 24px) / 2;
1612
margin-bottom: ($large-size - 24px) / 2;
1613
}
1614
// reset button margins of the spinbutton
1616
spinbutton button {
1617
margin-top: 0;
1618
margin-bottom: 0;
1619
}
1620
// FIXME: This is a hacky workaround.
1622
.entry-tag {
1623
margin-top: 5px;
1624
margin-bottom: 5px;
1625
}
1626
}
1627
// Development versions of apps to use a differently styled headerbar
1629
window.devel .titlebar:not(.selection-mode) {
1630
}
1631
/**
1633
* Pathbars
1634
*/
1635
%pathbar_button,
1637
.path-bar.linked:not(.vertical) > button {
1638
@extend %button-flat-basic;
1639
padding-left: ($medium-size - 24px) / 2;
1641
padding-right: ($medium-size - 24px) / 2;
1642
border-image:
1643
radial-gradient(
1644
circle closest-corner at center calc(100% - 1px),
1645
$primary 0%,
1646
transparent 0%
1647
) 0 0 0 / 0 0 0;
1648
border-radius: $corner-radius;
1649
&:checked {
1651
border-image:
1652
radial-gradient(
1653
circle closest-corner at center calc(100% - 1px),
1654
$primary 100%,
1655
transparent 0%
1656
) 0 0 2 / 0 0 2px;
1657
color: $on-surface;
1658
&,
1660
&:disabled {
1661
background-color: transparent;
1662
}
1663
}
1664
label:not(:only-child) {
1666
&:first-child {
1667
margin-left: 0;
1668
}
1669
&:last-child {
1671
margin-right: 0;
1672
}
1673
}
1674
&.text-button {
1676
min-width: 0;
1677
}
1678
&.slider-button {
1680
padding-left: (24px - 16px) / 2;
1681
padding-right: (24px - 16px) / 2;
1682
}
1683
}
1684
/**
1686
* Tree Views
1687
*/
1688
treeview.view {
1690
@at-root * {
1691
-GtkTreeView-horizontal-separator: 4;
1692
-GtkTreeView-grid-line-width: 1;
1693
-GtkTreeView-grid-line-pattern: '';
1694
-GtkTreeView-tree-line-width: 1;
1695
-GtkTreeView-tree-line-pattern: '';
1696
-GtkTreeView-expander-size: 16;
1697
}
1698
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1700
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1701
// FIXME: Avoid transparency background-color being slightly darker
1703
&:selected {
1704
background-color: $base;
1705
background-image: image($overlay-selected);
1706
}
1707
// to avoid borders being overridden by the previously set props
1709
rubberband {
1710
@extend %rubberband;
1711
}
1712
&:hover,
1714
&:selected {
1715
border-radius: 0;
1716
}
1717
&.separator {
1719
min-height: 1px + 2px * 2;
1720
color: divider($on-surface);
1721
}
1722
&:drop(active) {
1724
// FIXME: box-shadow, background-color and background-image are not available here.
1725
border-style: solid none;
1726
border-width: 9999px;
1727
border-color: overlay("hover", $on-surface);
1728
&.after {
1730
border-top-style: none;
1731
}
1732
&.before {
1734
border-bottom-style: none;
1735
}
1736
}
1737
&.expander {
1739
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1740
-gtk-icon-transform: rotate(-90deg);
1741
&:dir(rtl) {
1743
-gtk-icon-transform: rotate(90deg);
1744
}
1745
&:checked {
1747
-gtk-icon-transform: unset;
1748
}
1749
color: hint($on-surface);
1751
&:hover,
1753
&:active {
1754
color: $on-surface;
1755
}
1756
&:disabled {
1758
color: disabled-hint($on-surface);
1759
}
1760
}
1761
&.progressbar { // progress bar in treeviews
1763
border-bottom: $bar-size solid $primary;
1764
box-shadow: none;
1765
background-color: transparent;
1766
background-image: none;
1767
&:selected:hover {
1769
box-shadow: none;
1770
}
1771
}
1772
&.trough { // progress bar trough in treeviews
1774
border-bottom: $bar-size solid disabled-stroke($on-surface);
1775
box-shadow: none;
1776
background-color: transparent;
1777
background-image: none;
1778
&:selected:hover {
1780
box-shadow: none;
1781
}
1782
}
1783
header {
1785
button {
1786
padding: 2px 6px;
1787
border-style: none solid solid none;
1788
border-width: 1px;
1789
border-color: divider($on-surface);
1790
border-radius: 0;
1791
background-clip: border-box;
1792
color: hint($on-surface);
1793
@include ink-color($on-surface);
1794
@include list-item;
1795
&:disabled {
1797
color: disabled-hint($on-surface);
1798
}
1799
&,
1801
&:disabled {
1802
background-color: $base;
1803
}
1804
&:last-child {
1806
border-right-style: none;
1807
}
1808
}
1809
}
1810
button.dnd,
1812
header.button.dnd { // for treeview-like derive widgets
1813
padding: 2px 6px;
1814
border-style: none solid solid;
1815
border-width: 1px;
1816
border-color: divider($on-surface);
1817
border-radius: 0;
1818
box-shadow: none;
1819
background-color: $base;
1820
background-clip: border-box;
1821
color: $primary;
1822
}
1823
// see tests/testaccel to test
1825
acceleditor > label {
1826
background-color: $primary;
1827
}
1828
}
1829
/**
1831
* Menus
1832
*/
1833
menubar,
1835
.menubar {
1836
-GtkWidget-window-dragging: true;
1837
padding: 0;
1838
// box-shadow: inset 0 -1px divider($on-surface);
1839
background-color: $titlebar;
1840
color: $on-titlebar;
1841
&:backdrop {
1843
background-color: $titlebar-backdrop;
1844
color: hint($on-titlebar);
1845
}
1846
.csd & {
1848
transition: $transition;
1849
}
1850
> menuitem {
1852
transition: $transition;
1853
min-height: 20px;
1854
padding: 4px 8px;
1855
color: hint($on-titlebar);
1856
&:hover { // Seems like it :hover even with keyboard focus
1858
transition: none;
1859
background-color: overlay("activated", $on-titlebar);
1860
color: $on-titlebar;
1861
}
1862
&:disabled {
1864
color: disabled-hint($on-titlebar);
1865
}
1866
}
1867
}
1868
// Needed to make the border-radius of menus work
1870
// otherwise the background bleeds out of the menu edges
1871
.background.popup {
1872
background-color: transparent;
1873
}
1874
menu,
1876
.menu,
1877
.context-menu {
1878
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1879
padding: 4px 0;
1880
box-shadow: inset 0 1px highlight($surface);
1881
background-color: $surface;
1882
background-clip: border-box;
1883
border: 1px solid divider($on-surface); // adds borders in a non composited env
1884
.csd & {
1886
border: none; // axes borders in a composited env
1887
border-radius: $corner-radius;
1888
}
1889
menuitem {
1891
transition: background-color $duration $ease-out;
1892
min-height: 20px;
1893
min-width: 40px;
1894
padding: 4px 8px;
1895
color: $on-surface;
1896
font: initial;
1897
text-shadow: none;
1898
&:hover {
1900
transition: none;
1901
background-color: overlay("hover", $on-surface);
1902
}
1903
&:disabled {
1905
color: disabled($on-surface);
1906
}
1907
// submenu indicators
1909
arrow {
1910
min-height: 16px;
1911
min-width: 16px;
1912
color: hint($on-surface);
1913
&:disabled {
1915
color: disabled-hint($on-surface);
1916
}
1917
&:dir(ltr) {
1919
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1920
margin-left: 8px;
1921
}
1922
&:dir(rtl) {
1924
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1925
margin-right: 8px;
1926
}
1927
}
1928
// avoids labels color being overridden, see
1930
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1931
label {
1932
&:dir(rtl),
1933
&:dir(ltr) {
1934
// color: inherit;
1935
}
1936
}
1937
}
1938
// overflow arrows
1940
> arrow {
1941
min-height: 16px;
1942
min-width: 16px;
1943
padding: 4px;
1944
background-color: $surface;
1945
color: hint($on-surface);
1946
&.top {
1948
margin-top: -4px;
1949
border-bottom: 1px solid divider($on-surface);
1950
border-radius: $corner-radius $corner-radius 0 0;
1951
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1952
}
1953
&.bottom {
1955
margin-top: 4px * 2;
1956
margin-bottom: -4px * 3;
1957
border-top: 1px solid divider($on-surface);
1958
border-radius: 0 0 $corner-radius $corner-radius;
1959
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1960
}
1961
&:hover {
1963
background-image: image(overlay("hover", $on-surface));
1964
}
1965
&:disabled {
1967
border-color: transparent;
1968
background-color: transparent;
1969
color: transparent;
1970
// color: disabled-hint($on-surface);
1971
}
1972
}
1973
separator {
1975
margin: 4px 0;
1976
}
1977
}
1978
menuitem {
1980
accelerator {
1981
color: hint($on-surface);
1982
}
1983
&:disabled accelerator {
1985
color: disabled-hint($on-surface);
1986
}
1987
}
1988
/**
1990
* Popovers
1991
*/
1992
popover.background {
1994
transition: $transition-shadow;
1995
padding: 2px;
1996
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1997
background-color: $surface;
1998
&:backdrop {
2000
box-shadow: $shadow-z2;
2001
}
2002
&, .csd & {
2004
border-style: solid;
2005
border-width: 1px;
2006
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2007
border-radius: $corner-radius + 1px;
2008
}
2009
> stack {
2011
margin: -4px; // remove extra padding from menu style popovers
2012
}
2013
> toolbar {
2015
margin: -2px;
2016
}
2017
> list,
2019
> .view,
2020
> toolbar {
2021
border-style: none;
2022
box-shadow: none;
2023
background-color: transparent;
2024
}
2025
// FIXME: Use the popover color instead of transparent as a workaround for .view
2027
list,
2028
.view:not(:selected),
2029
toolbar {
2030
background-color: $surface;
2031
}
2032
&.touch-selection,
2034
&.magnifier,
2035
&.osd {
2036
// @extend %osd;
2037
}
2038
button:not(.suggested-action):not(.destructive-action) {
2040
// @extend %button-flat;
2041
}
2042
.linked:not(.vertical) > entry:not(:only-child) {
2044
// border-radius: $corner-radius $corner-radius 0 0;
2045
}
2046
&.menu button,
2048
button.model {
2049
@extend %button-flat;
2050
min-height: 32px;
2052
padding: 0 8px;
2053
border-radius: $corner-radius;
2054
&:checked {
2056
// color: $primary;
2057
}
2058
}
2059
separator {
2061
margin: 4px 0;
2062
}
2063
list separator {
2065
margin: 0;
2066
}
2067
}
2068
/**
2070
* Notebooks
2071
*/
2072
notebook {
2074
frame > paned > & > header,
2075
&.frame > header {
2076
background-color: $base;
2077
}
2078
&:focus tab:checked {
2080
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2081
}
2082
> header {
2084
border-width: 1px;
2085
border-color: divider($on-surface);
2086
background-color: $background;
2087
background-clip: border-box;
2088
&.top {
2090
border-bottom-style: solid;
2091
> tabs {
2093
margin-bottom: -1px;
2094
> tab {
2096
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2097
&:checked {
2099
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2100
}
2101
&.reorderable-page {
2103
border-image-width: 0 1px 2px;
2104
}
2105
}
2106
}
2107
}
2108
&.bottom {
2110
border-top-style: solid;
2111
> tabs {
2113
margin-top: -1px;
2114
> tab {
2116
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2117
&:checked {
2119
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2120
}
2121
&.reorderable-page {
2123
border-image-width: 2px 1px 0;
2124
}
2125
}
2126
}
2127
}
2128
&.left {
2130
border-right-style: solid;
2131
> tabs {
2133
margin-right: -1px;
2134
> tab {
2136
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2137
&:checked {
2139
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2140
}
2141
&.reorderable-page {
2143
border-image-width: 1px 2px 1px 0;
2144
}
2145
}
2146
}
2147
}
2148
&.right {
2150
border-left-style: solid;
2151
> tabs {
2153
margin-left: -1px;
2154
> tab {
2156
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2157
&:checked {
2159
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2160
}
2161
&.reorderable-page {
2163
border-image-width: 1px 0 1px 2px;
2164
}
2165
}
2166
}
2167
}
2168
&.top > tabs > arrow {
2170
@extend %notebook_vert_arrows;
2171
border-top-style: none;
2173
}
2174
&.bottom > tabs > arrow {
2176
@extend %notebook_vert_arrows;
2177
border-bottom-style: none;
2179
}
2180
@at-root %notebook_vert_arrows {
2182
padding-left: 4px;
2183
padding-right: 4px;
2184
&.down {
2186
margin-left: -8px;
2187
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2188
}
2189
&.up {
2191
margin-right: -8px;
2192
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2193
}
2194
}
2195
&.left > tabs > arrow {
2197
@extend %notebook_horz_arrows;
2198
border-left-style: none;
2200
}
2201
&.right > tabs > arrow {
2203
@extend %notebook_horz_arrows;
2204
border-right-style: none;
2206
}
2207
@at-root %notebook_horz_arrows {
2209
padding-top: 4px;
2210
padding-bottom: 4px;
2211
&.down {
2213
margin-top: -8px;
2214
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2215
}
2216
&.up {
2218
margin-bottom: -8px;
2219
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2220
}
2221
}
2222
> tabs > arrow {
2224
min-height: 16px;
2225
min-width: 16px;
2226
border-radius: 0;
2227
color: hint($on-surface);
2228
@extend %ripple;
2229
@include ink-color($on-surface);
2230
&:disabled {
2232
color: disabled-hint($on-surface);
2233
}
2234
}
2235
tab {
2237
transition: $transition,
2238
background-size 0ms,
2239
background-image 0ms;
2240
min-height: $small-size;
2241
min-width: $small-size;
2242
padding: $container-padding 12px;
2243
border-width: 1px; // for reorderable tabs
2245
border-color: transparent; //
2246
outline: none;
2248
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2249
background-repeat: no-repeat;
2250
background-position: center;
2251
background-size: 0% 0%;
2252
background-clip: border-box;
2253
color: hint($on-surface);
2255
font-weight: 500;
2256
&:hover {
2258
background-color: overlay("hover-alt", $on-surface);
2259
}
2260
&:disabled {
2262
color: disabled-hint($on-surface);
2263
}
2264
&:checked {
2266
transition: $transition,
2267
background-size $ripple-fade-in-duration $ease-out,
2268
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2269
background-color: transparent;
2270
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2271
background-size: 1000% 1000%;
2272
background-clip: padding-box;
2273
color: $on-surface;
2274
&:disabled {
2276
color: disabled($on-surface);
2277
}
2278
&.reorderable-page {
2280
border-color: divider($on-surface);
2281
background-color: $base;
2282
}
2283
}
2284
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2286
> box {
2287
transition: background-color $duration $ease-out;
2288
margin: -$container-padding -12px;
2289
padding: $container-padding 12px;
2290
&:drop(active) {
2292
background-color: overlay("hover", $on-surface);
2293
}
2294
}
2295
// colors the button like the label, overridden otherwise
2297
button.flat {
2298
@extend %button-small;
2299
&:last-child {
2301
margin-left: $container-padding;
2302
margin-right: $container-padding - 12px;
2303
}
2304
&:first-child {
2306
margin-left: $container-padding - 12px;
2307
margin-right: $container-padding;
2308
}
2309
}
2310
}
2311
&.top,
2313
&.bottom {
2314
tabs {
2315
padding-left: 8px;
2316
padding-right: 8px;
2317
&:not(:only-child) {
2319
&:first-child {
2320
margin-left: 0;
2321
}
2322
&:last-child {
2324
margin-right: 0;
2325
}
2326
}
2327
tab.reorderable-page {
2329
border-style: none solid;
2330
}
2331
}
2332
}
2333
&.left,
2335
&.right {
2336
tabs {
2337
padding-top: 8px;
2338
padding-bottom: 8px;
2339
&:not(:only-child) {
2341
&:first-child {
2342
margin-top: 0;
2343
}
2344
&:last-child {
2346
margin-bottom: 0;
2347
}
2348
}
2349
tab.reorderable-page {
2351
border-style: solid none;
2352
}
2353
}
2354
}
2355
}
2356
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2358
background-color: $base;
2359
}
2360
}
2361
/**
2363
* Scrollbars
2364
*/
2365
scrollbar {
2367
$_slider_min_length: 24px;
2368
// disable steppers
2370
@at-root * {
2371
-GtkScrollbar-has-backward-stepper: false;
2372
-GtkScrollbar-has-forward-stepper: false;
2373
}
2374
transition: $transition;
2376
background-color: $base;
2377
// scrollbar border
2379
&.top { border-bottom: 1px solid divider($on-surface); }
2380
&.bottom { border-top: 1px solid divider($on-surface); }
2381
&.left { border-right: 1px solid divider($on-surface); }
2382
&.right { border-left: 1px solid divider($on-surface); }
2383
// slider
2385
slider {
2386
transition: background-color $duration $ease-out;
2387
min-width: 8px;
2388
min-height: 8px;
2389
border: 4px solid transparent;
2390
border-radius: $circular-radius;
2391
background-clip: padding-box;
2392
background-color: disabled($on-surface);
2393
&:hover {
2395
background-color: hint($on-surface);
2396
}
2397
&:active {
2399
background-color: $on-surface;
2400
}
2401
&:disabled {
2403
background-color: disabled-hint($on-surface);
2404
}
2405
}
2406
&.fine-tune {
2408
slider {
2409
min-width: 4px;
2410
min-height: 4px;
2411
}
2412
&.horizontal slider {
2414
margin: 2px 0;
2415
}
2416
&.vertical slider {
2418
margin: 0 2px;
2419
}
2420
}
2421
&.overlay-indicator {
2423
&:not(.fine-tune) slider {
2424
transition-property: background-color, min-height, min-width;
2425
}
2426
&:not(.dragging):not(.hovering) {
2428
border-color: transparent;
2429
background-color: transparent;
2430
slider {
2432
min-width: 4px;
2433
min-height: 4px;
2434
margin: 4px - 1px;
2435
border: 1px solid rgba($base, .3);
2436
}
2437
button {
2439
min-width: 4px;
2440
min-height: 4px;
2441
margin: 4px - 1px;
2442
border: 1px solid rgba($base, .3);
2443
border-radius: $circular-radius;
2444
background-color: disabled($on-surface);
2445
background-clip: padding-box;
2446
-gtk-icon-source: none;
2447
&:disabled {
2449
background-color: disabled-hint($on-surface);
2450
}
2451
}
2452
&.horizontal {
2454
slider {
2455
min-width: $_slider_min_length;
2456
}
2457
button {
2459
min-width: 8px;
2460
}
2461
}
2462
&.vertical {
2464
slider {
2465
min-height: $_slider_min_length;
2466
}
2467
button {
2469
min-height: 8px;
2470
}
2471
}
2472
}
2473
&.dragging,
2475
&.hovering {
2476
background-color: rgba($surface, .9);
2477
}
2478
}
2479
&.horizontal slider {
2481
min-width: $_slider_min_length;
2482
}
2483
&.vertical slider {
2485
min-height: $_slider_min_length;
2486
}
2487
// button styling
2489
button {
2490
@extend %button-flat-basic;
2491
min-width: 16px;
2493
min-height: 16px;
2494
padding: 0;
2495
border-radius: 0;
2496
}
2497
// button icons
2499
&.vertical {
2500
button {
2501
&.down {
2502
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2503
}
2504
&.up {
2506
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2507
}
2508
}
2509
}
2510
&.horizontal {
2512
button {
2513
&.down {
2514
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2515
}
2516
&.up {
2518
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2519
}
2520
}
2521
}
2522
}
2523
/**
2526
* Switch
2527
*/
2528
switch {
2530
transition: all $duration $ease-out;
2531
margin: $container-padding 0;
2532
padding: 0 2px;
2533
border: 5px solid transparent;
2534
border-radius: $circular-radius;
2535
background-color: stroke($on-surface);
2536
background-clip: padding-box;
2537
font-size: 0;
2538
&:checked {
2540
background-color: rgba($primary, .5);
2541
}
2542
&:disabled {
2544
opacity: .5;
2545
}
2546
// hide on/off icons for >=3.24.5
2548
image {
2549
margin: -8px;
2550
-gtk-icon-transform: scale(0);
2551
}
2552
slider {
2554
transition: all $duration $ease-out;
2555
min-width: 20px;
2556
min-height: 20px;
2557
margin: -3px -2px;
2558
border-radius: $circular-radius;
2559
outline: none;
2560
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2561
background-color: $switch-surface;
2562
}
2563
&:hover slider {
2565
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2566
}
2567
&:focus slider {
2569
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2570
}
2571
&:checked slider {
2573
background-color: $primary;
2574
}
2575
&:checked:hover slider {
2577
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2578
}
2579
&:checked:focus slider {
2581
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2582
}
2583
row:selected & {
2585
}
2586
}
2587
/**
2589
* Check and Radio items
2590
*/
2591
// draw regular check and radio items using our PNG assets
2593
// all assets are rendered from assets.svg. never add pngs directly
2594
// selection-mode
2596
.view.content-view.check:not(list),
2597
.content-view:not(list) .tile check {
2598
min-height: 40px;
2599
min-width: 40px;
2600
margin: 0;
2601
padding: 0;
2602
box-shadow: none;
2603
background-color: transparent;
2604
background-image: none;
2605
-gtk-icon-shadow: $icon-shadow-z2;
2606
&:hover,
2608
&:active {
2609
-gtk-icon-shadow: $icon-shadow-z4;
2610
}
2611
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2613
&#{$class} {
2614
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2615
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2617
}
2618
}
2619
}
2620
checkbutton,
2622
radiobutton {
2623
outline: none;
2624
}
2625
checkbutton.text-button,
2627
radiobutton.text-button {
2628
// this is for a nice focus on check and radios text
2629
padding: 2px;
2630
label:not(:only-child) {
2632
margin: 0 4px;
2633
}
2634
}
2635
$check-radio-size: 40px;
2637
check,
2639
radio {
2640
min-height: 24px;
2641
min-width: 24px;
2642
margin: -($check-radio-size - 24px) / 2;
2643
padding: ($check-radio-size - 24px) / 2;
2644
border-radius: $circular-radius;
2645
color: hint($on-surface);
2646
@extend %ripple;
2647
@include ink-color($on-surface);
2648
&:checked,
2650
&:indeterminate {
2651
color: $primary;
2652
@include ink-color($primary);
2653
}
2654
&:disabled {
2656
color: disabled-hint($on-surface);
2657
}
2658
&:only-child {
2660
// margin: -12px;
2661
}
2662
popover modelbutton.flat & {
2664
&,
2665
&:focus,
2666
&:hover,
2667
&:focus:hover,
2668
&:active,
2669
&:disabled {
2670
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2671
box-shadow: none;
2672
background-image: none;
2673
}
2674
&.left:dir(rtl) {
2676
margin-left: -12px;
2677
margin-right: -4px;
2678
}
2679
&.right:dir(ltr) {
2681
margin-left: -4px;
2682
margin-right: -12px;
2683
}
2684
}
2685
menu menuitem & {
2687
transition: none;
2688
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2689
padding: 0;
2690
&:dir(ltr) {
2692
margin-right: 8px;
2693
}
2694
&:dir(rtl) {
2696
margin-left: 8px;
2697
}
2698
&,
2700
&:hover,
2701
&:disabled {
2702
box-shadow: none;
2703
}
2704
}
2705
}
2706
%check,
2708
check {
2709
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2710
&:checked {
2712
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2713
}
2714
&:indeterminate {
2716
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2717
}
2718
}
2719
%radio,
2721
radio {
2722
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2723
&:checked {
2725
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2726
}
2727
&:indeterminate {
2729
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2730
}
2731
border-image-slice: $check-radio-size / 2px;
2733
border-image-width: $check-radio-size / 2;
2734
$radio-indicator-size: 10px / $check-radio-size / 2;
2736
border-image-source:
2738
-gtk-gradient(
2739
radial,
2740
center center, 0,
2741
center center, .001,
2742
to($primary),
2743
to(transparent)
2744
);
2745
&:checked:not(:indeterminate) {
2747
border-image-source:
2748
-gtk-gradient(
2749
radial,
2750
center center, 0,
2751
center center, $radio-indicator-size,
2752
to($primary),
2753
to(transparent)
2754
);
2755
&:disabled {
2757
border-image-source:
2758
-gtk-gradient(
2759
radial,
2760
center center, 0,
2761
center center, $radio-indicator-size,
2762
to(disabled-hint($on-surface)),
2763
to(transparent)
2764
);
2765
}
2766
}
2767
}
2768
%small_check,
2770
menu menuitem check {
2771
min-height: 16px;
2772
min-width: 16px;
2773
border-radius: $corner-radius;
2774
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2775
&:checked {
2777
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2778
}
2779
&:indeterminate {
2781
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2782
}
2783
}
2784
%small_radio,
2786
menu menuitem radio {
2787
min-height: 16px;
2788
min-width: 16px;
2789
border-image: none;
2790
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2791
&:checked {
2793
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2794
}
2795
&:indeterminate {
2797
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2798
}
2799
}
2800
// ANIMATION:
2802
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2803
// the transformation is set on the active state and it get reset on the checked state.
2804
radio:not(:checked):active {
2805
// -gtk-icon-transform: scale(0);
2806
}
2807
// Otherwise, treeview.view styling will be applied...
2809
treeview.view check,
2810
treeview.view radio {
2811
padding: 0;
2812
color: hint($on-surface);
2813
&:checked,
2815
&:indeterminate {
2816
color: $primary;
2817
}
2818
&:disabled {
2820
color: disabled-hint($on-surface);
2821
}
2822
&,
2824
&:hover,
2825
&:selected,
2826
&:selected:hover {
2827
box-shadow: none;
2828
background-color: transparent;
2829
}
2830
}
2831
treeview.view radio:checked {
2833
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2834
border-image: none;
2835
}
2836
/**
2838
* GtkScale
2839
*/
2840
scale {
2842
// sizing
2843
$_marks_length: 8px;
2844
$_marks_distance: 7px;
2845
$trough_size: 2px;
2847
$finetune_trough_size: 4px;
2848
$slider_size: 32px;
2850
$slider_margin: -($slider_size - $trough_size) / 2;
2852
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2853
$color_slider_margin: -($slider_size) * 3 / 4;
2855
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2856
min-height: $trough_size;
2858
min-width: $trough_size;
2859
&.horizontal {
2861
padding: ($medium-size - $trough_size) / 2 12px;
2862
}
2863
&.vertical {
2865
padding: 12px ($medium-size - $trough_size) / 2;
2866
}
2867
// the slider is inside the trough, so to have make it bigger there's a negative margin
2869
slider {
2870
min-height: $slider_size;
2871
min-width: $slider_size;
2872
margin: $slider_margin;
2873
}
2874
// click-and-hold the slider to activate
2876
&.fine-tune {
2877
&.horizontal {
2878
min-height: $finetune_trough_size;
2879
padding-top: ($medium-size - $finetune_trough_size) / 2;
2880
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2881
}
2882
&.vertical {
2884
min-width: $finetune_trough_size;
2885
padding-left: ($medium-size - $finetune_trough_size) / 2;
2886
padding-right: ($medium-size - $finetune_trough_size) / 2;
2887
}
2888
// to make the trough grow in fine-tune mode
2890
slider {
2891
margin: $finetune_slider_margin;
2892
}
2893
}
2894
// the backing bit
2896
trough {
2897
transition: background-color $duration $ease-out;
2898
outline: none;
2899
background-color: stroke($on-surface);
2900
&:disabled {
2902
background-color: disabled-stroke($on-surface);
2903
}
2904
}
2905
// the colored part of the backing bit
2907
highlight {
2908
transition: background-image $duration $ease-out;
2909
background-image: image($primary);
2910
&:disabled {
2912
background-color: $background;
2913
background-image: image(disabled-hint($on-surface));
2914
}
2915
}
2916
// this is another differently styled part of the backing bit, the most relevant use case is for example
2918
// in media player to indicate how much video stream as been cached
2919
fill {
2920
transition: background-color $duration $ease-out;
2921
background-color: stroke($on-surface);
2922
&:disabled {
2924
background-color: transparent;
2925
}
2926
}
2927
slider {
2929
transition: background-color $duration $ease-out,
2930
background-size $ripple-fade-out-duration $ease-out,
2931
background-image $ripple-fade-out-opacity-duration $ease-out;
2932
background-repeat: no-repeat;
2933
background-position: center;
2934
background-size: auto, 1000% 1000%;
2935
border-radius: 50%;
2936
color: $primary;
2937
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2939
&#{$class} {
2940
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2941
background-image:
2943
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2944
radial-gradient(circle, transparent 10%, transparent 0%);
2945
}
2946
}
2947
&:hover {
2949
background-color: overlay("hover", $primary);
2950
}
2951
&:focus {
2953
background-color: overlay("focus", $primary);
2954
}
2955
&:active {
2957
$_url: 'assets/scale-slider#{$asset-suffix}';
2958
transition: background-color $duration $ease-out,
2960
background-size 0ms,
2961
background-image 0ms;
2962
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2963
background-image:
2964
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2965
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2966
background-size: auto, 0% 0%;
2967
}
2968
}
2969
marks,
2971
value {
2972
color: hint($on-surface);
2973
}
2974
indicator {
2976
background-color: stroke($on-surface);
2977
color: transparent;
2978
}
2979
//marks margins
2981
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2982
(horizontal, bottom, bottom, top),
2983
(vertical, top, left, right),
2984
(vertical, bottom, right, left) {
2985
&.#{$scale_orient} marks {
2986
&.#{$marks_class} {
2987
margin-#{$marks_margin}: $_marks_distance;
2988
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2989
}
2990
}
2991
&.#{$scale_orient}.fine-tune marks {
2993
&.#{$marks_class} {
2994
margin-#{$marks_margin}: $_marks_distance - 1px;
2995
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2996
}
2997
}
2998
}
2999
&.horizontal {
3001
indicator {
3002
min-height: $_marks_length;
3003
min-width: 1px;
3004
}
3005
}
3006
&.vertical {
3008
indicator {
3009
min-height: 1px;
3010
min-width: $_marks_length;
3011
}
3012
}
3013
// *WARNING* scale with marks madness following
3015
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3017
@each $marks_class, $marks_infix in (
3018
".marks-before:not(.marks-after)": "-marks-before",
3019
".marks-after:not(.marks-before)": "-marks-after"
3020
) {
3021
&#{$dir_class}#{$marks_class} {
3022
slider {
3023
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3024
&#{$state_class} {
3025
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3026
background-image:
3028
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3029
radial-gradient(circle, transparent 10%, transparent 0%);
3030
}
3031
}
3032
&:active {
3034
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3035
background-image:
3037
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3038
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3039
}
3040
}
3041
}
3042
}
3043
}
3044
&.color {
3046
min-height: 0;
3047
min-width: 0;
3048
&.horizontal {
3050
padding: 0 0 12px 0;
3051
slider {
3053
&:dir(ltr), &:dir(rtl) { // specificity bump
3054
margin-bottom: $color_slider_margin;
3055
margin-top: $color_marks_slider_margin;
3056
}
3057
}
3058
}
3059
&.vertical {
3061
&:dir(ltr) {
3062
padding: 0 0 0 12px;
3063
slider {
3065
margin-left: $color_slider_margin;
3066
margin-right: $color_marks_slider_margin;
3067
}
3068
}
3069
&:dir(rtl) {
3071
padding: 0 12px 0 0;
3072
slider {
3074
margin-right: $color_slider_margin;
3075
margin-left: $color_marks_slider_margin;
3076
}
3077
}
3078
}
3079
}
3080
}
3081
/**
3083
* Progress bars
3084
*/
3085
progressbar {
3087
// sizing
3088
&.horizontal {
3089
trough,
3090
progress {
3091
min-height: $bar-size;
3092
}
3093
}
3094
&.vertical {
3096
trough,
3097
progress {
3098
min-width: $bar-size;
3099
}
3100
}
3101
// FIXME: insensitive state missing and some other state should be set probably
3103
color: hint($on-surface);
3104
font-size: smaller;
3105
trough {
3107
background-color: disabled-stroke($on-surface);
3108
}
3109
progress {
3111
background-color: $primary;
3112
}
3113
&.osd { // progressbar.osd used for epiphany page loading progress
3115
// min-width: $bar-size;
3116
// min-height: $bar-size;
3117
// background-color: transparent;
3118
trough {
3120
// background-color: transparent;
3121
}
3122
progress {
3124
// background-color: $primary;
3125
}
3126
}
3127
// makes the progress indicator disappear, when the fraction is 0
3129
trough.empty progress {
3130
all: unset;
3131
}
3132
}
3133
/**
3135
* Level Bar
3136
*/
3137
levelbar {
3139
&.horizontal {
3140
block {
3141
min-height: $bar-size;
3142
}
3143
&.discrete block {
3145
min-width: $medium-size;
3146
&:not(:last-child) {
3148
margin-right: 2px;
3149
}
3150
}
3151
}
3152
&.vertical {
3154
block {
3155
min-width: $bar-size;
3156
}
3157
&.discrete block {
3159
min-height: $medium-size;
3160
&:not(:last-child) {
3162
margin-bottom: 2px;
3163
}
3164
}
3165
}
3166
// imitate the entry style
3168
trough {
3169
// padding: 2px;
3170
// border-radius: $corner-radius;
3171
// box-shadow: $shadow-z1;
3172
// background-color: $base;
3173
&:disabled {
3175
// background-color: $base-alt;
3176
}
3177
}
3178
block {
3180
&.low {
3181
background-color: $warning;
3182
}
3183
&.high,
3185
&:not(.empty) {
3186
background-color: $primary;
3187
}
3188
&.full {
3190
background-color: $success;
3191
}
3192
&.empty {
3194
background-color: disabled-stroke($on-surface);
3195
}
3196
}
3197
}
3198
/**
3200
* Print dialog
3201
*/
3202
printdialog {
3204
paper {
3205
padding: 0;
3206
border: 1px solid divider($on-surface);
3207
background-color: $base;
3208
color: $on-surface;
3209
}
3210
.dialog-action-box {
3212
margin: 12px;
3213
}
3214
}
3215
/**
3217
* Frames
3218
*/
3219
frame > border,
3221
.frame {
3222
margin: 0;
3223
padding: 0;
3224
border: 1px solid divider($on-surface);
3225
border-radius: 0;
3226
box-shadow: none;
3227
&.flat {
3229
border-style: none;
3230
}
3231
}
3232
// for backward compatibility
3234
frame.flat > border {
3235
border-style: none;
3236
}
3237
actionbar > revealer > box {
3239
padding: $container-padding;
3240
border-top: 1px solid divider($on-surface);
3241
background-color: $base;
3242
background-clip: border-box;
3243
button:not(.suggested-action):not(.destructive-action) {
3245
@extend %button-flat;
3246
}
3247
.linked:not(.vertical) > entry:not(:only-child) {
3249
border-radius: $corner-radius $corner-radius 0 0;
3250
}
3251
}
3252
scrolledwindow {
3254
viewport.frame { // avoid double borders when viewport inside scrolled window
3255
border-style: none;
3256
}
3257
// This is used when content is touch-dragged past boundaries.
3259
// draws a box on top of the content, the size changes programmatically.
3260
@at-root overshoot {
3261
&.top { @include overshoot(top); }
3262
&.bottom { @include overshoot(bottom); }
3264
&.left { @include overshoot(left); }
3266
&.right { @include overshoot(right); }
3268
}
3269
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3271
@at-root undershoot {
3272
&.top { @include undershoot(top); }
3273
&.bottom { @include undershoot(bottom); }
3275
&.left { @include undershoot(left); }
3277
&.right { @include undershoot(right); }
3279
}
3280
@at-root junction { // the small square between two scrollbars
3282
border-style: solid none none solid;
3283
border-width: 1px;
3284
border-color: divider($on-surface);
3285
background-color: $base;
3286
&:dir(rtl) {
3288
border-style: solid solid none none;
3289
}
3290
}
3291
}
3292
// vbox and hbox separators
3294
separator {
3295
min-width: 1px;
3296
min-height: 1px;
3297
background-color: divider($on-surface);
3298
}
3299
%hide_separators {
3301
min-width: 0;
3302
min-height: 0;
3303
background-color: transparent;
3304
}
3305
/**
3307
* Lists
3308
*/
3309
list {
3311
border-color: divider($on-surface);
3312
background-color: $base;
3313
row {
3315
padding: 2px;
3316
}
3317
}
3318
row {
3320
&.activatable {
3321
@extend %ripple;
3322
@include ink-color($on-surface);
3323
@include list-item;
3324
// this is for indicathing which row generated a popover
3326
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3327
&.has-open-popup {
3328
background-color: overlay("activated", $on-surface);
3329
}
3330
}
3331
&:selected {
3333
background-color: $overlay-selected;
3334
@include ink-color($primary);
3336
&.has-open-popup {
3338
background-color: overlay("activated", $primary, $background: $overlay-selected);
3339
}
3340
}
3341
}
3342
/**
3344
* App Notifications
3345
*/
3346
.app-notification {
3348
// @extend %osd;
3349
@extend %toolbar-osd;
3351
margin: 8px;
3353
button {
3355
@extend %button-flat;
3356
&.text-button:not(:disabled) {
3358
color: $primary;
3359
@include ink-color($primary);
3360
}
3361
}
3362
&.frame,
3364
border {
3365
border-style: none;
3366
}
3367
}
3368
/**
3370
* Expanders
3371
*/
3372
expander {
3374
title > arrow {
3375
transition: all $duration $ease-out;
3376
min-width: 16px;
3377
min-height: 16px;
3378
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3379
-gtk-icon-transform: rotate(-90deg);
3380
&:dir(rtl) {
3382
-gtk-icon-transform: rotate(90deg);
3383
}
3384
&:checked {
3386
-gtk-icon-transform: unset;
3387
}
3388
color: hint($on-surface);
3390
&:hover,
3392
&:active {
3393
color: $on-surface;
3394
}
3395
&:disabled {
3397
color: disabled-hint($on-surface);
3398
}
3399
}
3400
}
3401
/**
3403
* Calendar
3404
*/
3405
calendar {
3407
padding: 1px;
3408
border: 1px solid divider($on-surface);
3409
color: $on-surface;
3410
&:disabled {
3412
color: disabled($on-surface);
3413
}
3414
&:selected {
3416
border-radius: $corner-radius + 1px;
3417
background-color: $overlay-selected;
3418
}
3419
&.header {
3421
border-style: none none solid;
3422
border-color: divider($on-surface);
3423
border-radius: 0;
3424
}
3425
&.button {
3427
border-radius: $corner-radius + 1px;
3428
color: hint($on-surface);
3429
&:hover {
3431
background-image: image(overlay("hover", $on-surface));
3432
}
3433
&:disabled {
3435
color: disabled-hint($on-surface);
3436
}
3437
}
3438
&.highlight {
3440
color: hint($on-surface);
3441
font-weight: 500;
3442
}
3443
&:indeterminate {
3445
color: disabled-hint($on-surface);
3446
}
3447
}
3448
/**
3450
* Dialogs
3451
*/
3452
// Message Dialog styling
3454
messagedialog {
3455
&.background {
3456
background-color: $surface;
3457
}
3458
.titlebar {
3460
min-height: $small-size;
3461
border-style: none;
3462
box-shadow: inset 0 1px highlight($surface);
3463
background-color: $surface;
3464
color: $on-surface;
3465
&:backdrop {
3467
background-color: $surface;
3468
color: hint($on-surface);
3469
}
3470
}
3471
&.csd { // rounded bottom border styling for csd version
3473
&.background {
3474
// bigger radius for better antialiasing
3475
border-bottom-left-radius: $corner-radius;
3476
border-bottom-right-radius: $corner-radius;
3477
}
3478
}
3479
// Hint text
3481
box.vertical > label + label {
3482
color: hint($on-surface);
3483
}
3484
.dialog-action-box {
3486
margin-top: -$container-padding;
3487
// padding: $container-padding;
3488
button {
3490
@extend %button-flat;
3491
&:not(:last-child) {
3493
margin-right: $container-padding;
3494
}
3495
&:not(:disabled) {
3497
color: $primary;
3498
@include ink-color($primary);
3499
}
3500
&.suggested-action:not(:disabled) {
3502
background-color: transparent;
3503
// color: $primary;
3504
// @include ink-color($primary);
3505
}
3506
&.destructive-action:not(:disabled) {
3508
background-color: transparent;
3509
color: $error;
3510
@include ink-color($error);
3511
}
3512
}
3513
}
3514
}
3515
filechooser {
3517
.dialog-action-box {
3518
border-top: 1px solid divider($on-surface);
3519
}
3520
#pathbarbox {
3522
border-bottom: 1px solid divider($on-surface);
3523
background-color: $background;
3524
> stack > box > button { // The new folder button
3526
@extend %button-flat;
3527
border-radius: $circular-radius;
3529
}
3530
}
3531
}
3532
filechooserbutton:drop(active) {
3534
// box-shadow: none;
3535
}
3536
/**
3538
* Sidebar
3539
*/
3540
.sidebar {
3542
border-style: none;
3543
background-color: $base-alt;
3544
&:not(separator) {
3546
@at-root %sidebar_left,
3547
&:dir(ltr),
3548
&.left,
3549
&.left:dir(rtl) {
3550
border-right: 1px solid divider($on-surface);
3551
border-left-style: none;
3552
}
3553
@at-root %sidebar_right,
3555
&:dir(rtl),
3556
&.right {
3557
border-left: 1px solid divider($on-surface);
3558
border-right-style: none;
3559
}
3560
}
3561
list {
3563
background-color: transparent;
3564
}
3565
paned & {
3567
&,
3568
&.left,
3569
&.right,
3570
&.left:dir(rtl),
3571
&:dir(rtl),
3572
&:dir(ltr) {
3573
border-style: none;
3574
}
3575
}
3576
}
3577
stacksidebar.sidebar {
3579
& {
3580
&:dir(ltr),
3581
&.left,
3582
&.left:dir(rtl) {
3583
list {
3584
@extend %sidebar_left;
3585
}
3586
}
3587
&:dir(rtl),
3589
&.right {
3590
list {
3591
@extend %sidebar_right;
3592
}
3593
}
3594
}
3595
+ separator.vertical,
3597
separator.horizontal {
3598
@extend %hide_separators;
3599
}
3600
list {
3602
padding: 4px;
3603
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3604
}
3605
row {
3607
min-height: 32px;
3608
padding: 0 8px - 6px;
3609
border-radius: $corner-radius;
3610
&:selected {
3612
background-color: overlay("activated", $primary);
3613
color: $primary;
3614
font-weight: 500;
3615
@include ink-color($primary);
3616
}
3617
+ row {
3619
margin-top: 4px;
3620
}
3621
> label {
3623
padding-left: 6px;
3624
padding-right: 6px;
3625
}
3626
&.needs-attention > label {
3628
@extend %needs-attention;
3629
}
3630
}
3631
}
3632
separator.sidebar {
3634
background-color: divider($on-surface);
3635
&.selection-mode,
3637
.selection-mode & {
3638
// background-color: divider($on-primary);
3639
}
3640
}
3641
/**
3643
* File chooser
3644
*/
3645
// dim the sidebar icons, see bug #786613 for details on this oddity
3647
row image.sidebar-icon {
3648
transition: color $duration $ease-out;
3649
color: hint($on-surface);
3650
&:disabled {
3652
color: disabled-hint($on-surface);
3653
}
3654
}
3655
placessidebar.sidebar {
3657
> viewport.frame {
3658
border-style: none;
3659
}
3660
list {
3662
padding: (4px - 3px) 0 4px;
3663
}
3664
row {
3666
// Needs overriding of the GtkListBoxRow padding
3667
min-height: 32px;
3668
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3669
padding: 0;
3670
border-radius: $corner-radius;
3671
// Using margins/padding directly in the SidebarRow
3673
// will make the animation of the new bookmark row jump
3674
> revealer {
3675
padding: 0 8px;
3676
}
3677
&:selected {
3679
background-color: overlay("activated", $primary);
3680
color: $primary;
3681
font-weight: 500;
3682
@include ink-color($primary);
3683
image.sidebar-icon {
3685
color: $primary;
3686
}
3687
}
3688
&:disabled {
3690
color: disabled($on-surface);
3691
}
3692
image.sidebar-icon {
3694
&:dir(ltr) {
3695
padding-right: 8px;
3696
}
3697
&:dir(rtl) {
3699
padding-left: 8px;
3700
}
3701
}
3702
label.sidebar-label {
3704
&:dir(ltr) {
3705
padding-right: 2px;
3706
}
3707
&:dir(rtl) {
3709
padding-left: 2px;
3710
}
3711
}
3712
@at-root button.sidebar-button {
3714
@extend %button-flat-basic;
3715
@extend %button-small;
3716
}
3717
&.sidebar-placeholder-row {
3719
background-color: overlay("hover", $on-surface);
3720
}
3721
&.sidebar-new-bookmark-row {
3723
color: $primary;
3724
image.sidebar-icon {
3726
color: $primary;
3727
}
3728
}
3729
}
3730
}
3731
placesview {
3733
.server-list-button {
3734
> image {
3735
-gtk-icon-transform: rotate(0turn);
3736
}
3737
&:checked > image {
3739
-gtk-icon-transform: rotate(-.5turn);
3740
}
3741
}
3742
// this selects the "connect to server" label
3744
> actionbar > revealer > box > label {
3745
padding-left: 8px;
3746
padding-right: 8px;
3747
}
3748
}
3749
/**
3751
* Paned
3752
*/
3753
paned {
3755
> separator {
3756
min-width: 1px;
3757
min-height: 1px;
3758
-gtk-icon-source: none; // defeats the ugly default handle decoration
3759
border-style: none; // just to be sure
3760
background-color: transparent;
3761
// workaround, using background istead of a border since the border will get rendered twice (?)
3762
background-image: image(divider($on-surface));
3763
background-size: 1px 1px;
3764
background-clip: content-box; // avoids borders image being rendered twice (?)
3765
&.wide {
3767
min-width: 6px;
3768
min-height: 6px;
3769
background-color: $background;
3770
background-image: image(divider($on-surface)), image(divider($on-surface));
3771
background-size: 1px 1px, 1px 1px;
3772
}
3773
}
3774
&.horizontal > separator {
3776
background-repeat: repeat-y;
3777
&:dir(ltr) {
3779
margin: 0 -8px 0 0;
3780
padding: 0 8px 0 0;
3781
background-position: left;
3782
}
3783
&:dir(rtl) {
3785
margin: 0 0 0 -8px;
3786
padding: 0 0 0 8px;
3787
background-position: right;
3788
}
3789
&.wide {
3791
margin: 0;
3792
padding: 0;
3793
background-repeat: repeat-y, repeat-y;
3794
background-position: left, right;
3795
}
3796
}
3797
&.vertical > separator {
3799
margin: 0 0 -8px 0;
3800
padding: 0 0 8px 0;
3801
background-repeat: repeat-x;
3802
background-position: top;
3803
&.wide {
3805
margin: 0;
3806
padding: 0;
3807
background-repeat: repeat-x, repeat-x;
3808
background-position: bottom, top;
3809
}
3810
}
3811
}
3812
/**
3814
* GtkInfoBar
3815
*/
3816
infobar {
3818
border-style: none;
3819
&.info,
3821
&.question {
3822
border-bottom: 1px solid divider($on-surface);
3823
background-color: $base;
3824
button {
3826
@extend %button-flat;
3827
&.text-button:not(:disabled) {
3829
color: $primary;
3830
@include ink-color($primary);
3831
}
3832
}
3833
}
3834
&.warning {
3836
background-color: $warning;
3837
color: $on-warning;
3838
button.flat {
3840
color: $on-warning;
3841
@include ink-color($on-warning);
3842
}
3843
selection {
3845
}
3846
*:link {
3848
color: $on-warning;
3849
}
3850
}
3851
&.error {
3853
background-color: $error;
3854
color: $on-error;
3855
button.flat {
3857
color: $on-error;
3858
@include ink-color($on-error);
3859
}
3860
selection {
3862
}
3863
*:link {
3865
color: $on-error;
3866
}
3867
}
3868
// Remove ugly hard-coded padding
3870
button label {
3871
margin: 0 -4px;
3872
}
3873
}
3874
/**
3876
* Tooltips
3877
*/
3878
tooltip {
3880
&.background {
3881
// background-color needs to be set this way otherwise it gets drawn twice
3882
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3883
background-color: $tooltip;
3884
color: $on-tooltip;
3885
}
3886
// padding: 4px; /* not working */
3888
border-radius: $corner-radius;
3889
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3890
&:not(.csd):not(.unity-csd) {
3892
// border: 1px solid divider($on-surface);
3893
// border-radius: $corner-radius + 1px;
3894
// background-clip: $background-clip-extra;
3895
}
3896
// FIXME: we need a border or tooltips vanish on black background.
3898
decoration {
3899
background-color: transparent;
3900
}
3901
> box {
3903
margin: -6px; // Remove hard-coded 6px margin
3904
min-height: 32px - 4px * 2;
3905
padding: 4px 8px;
3906
}
3907
.dim-label {
3909
color: hint($on-tooltip);
3910
}
3911
* {
3913
// workaround for Eclipse.
3914
// do not include any declaration here.
3915
}
3916
}
3917
/**
3919
* Color Chooser
3920
*/
3921
colorswatch {
3923
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3924
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3925
// applied to the overlay box.
3926
// base color corners rounding
3928
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3929
// sports a bigger radius.
3930
// nth-child is needed by the custom color strip.
3931
&.top {
3933
border-top-left-radius: $corner-radius + .5px;
3934
border-top-right-radius: $corner-radius + .5px;
3935
overlay {
3937
border-top-left-radius: $corner-radius;
3938
border-top-right-radius: $corner-radius;
3939
}
3940
}
3941
&.bottom {
3943
border-bottom-left-radius: $corner-radius + .5px;
3944
border-bottom-right-radius: $corner-radius + .5px;
3945
overlay {
3947
border-bottom-left-radius: $corner-radius;
3948
border-bottom-right-radius: $corner-radius;
3949
}
3950
}
3951
&.left,
3953
&:first-child:not(.top) {
3954
border-top-left-radius: $corner-radius + .5px;
3955
border-bottom-left-radius: $corner-radius + .5px;
3956
overlay {
3958
border-top-left-radius: $corner-radius;
3959
border-bottom-left-radius: $corner-radius;
3960
}
3961
}
3962
&.right,
3964
&:last-child:not(.bottom) {
3965
border-top-right-radius: $corner-radius + .5px;
3966
border-bottom-right-radius: $corner-radius + .5px;
3967
overlay {
3969
border-top-right-radius: $corner-radius;
3970
border-bottom-right-radius: $corner-radius;
3971
}
3972
}
3973
&.dark {
3975
color: $on-dark;
3976
}
3977
&.light {
3979
color: $on-light;
3980
}
3981
overlay {
3983
transition: $transition-shadow;
3984
box-shadow: $shadow-z1;
3985
&:drop(active),
3987
&:hover {
3988
box-shadow: $shadow-z3;
3989
}
3990
}
3991
&#add-color-button {
3993
border-radius: $corner-radius $corner-radius 0 0;
3994
color: $on-surface;
3995
&:only-child {
3997
border-radius: $corner-radius;
3998
}
3999
overlay {
4001
background-color: $surface;
4002
}
4003
}
4004
&:disabled {
4006
opacity: .5;
4007
overlay {
4009
box-shadow: none;
4010
}
4011
}
4012
row:selected & {
4014
}
4015
&#editor-color-sample {
4017
border-radius: $corner-radius + .5px;
4018
overlay {
4020
border-radius: $corner-radius;
4021
&:hover {
4023
// box-shadow: $shadow-z1;
4024
}
4025
}
4026
}
4027
}
4028
// colorscale popup
4030
colorchooser .popover.osd {
4031
transition: $transition-shadow;
4032
border-radius: $corner-radius;
4033
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4034
background-color: $surface;
4035
&:backdrop {
4037
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4038
}
4039
}
4040
/**
4042
* Misc
4043
*/
4044
// content view (grid/list)
4046
.content-view {
4047
background-color: $background;
4048
&:hover {
4050
// -gtk-icon-effect: highlight;
4051
}
4052
rubberband,
4054
.rubberband {
4055
@extend %rubberband;
4056
}
4057
}
4058
.scale-popup {
4060
.osd & {
4061
// @extend %osd;
4062
button.flat { // FIXME: quick hack, redo properly
4064
}
4065
}
4066
button { // +/- buttons on GtkVolumeButton popup
4068
}
4069
}
4070
/**
4072
* Window Decorations
4073
*/
4074
decoration {
4076
transition: $transition-shadow;
4077
border-radius: $corner-radius $corner-radius 0 0;
4078
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4079
// FIXME rationalize shadows
4081
// this is used for the resize cursor area
4083
margin: 8px;
4084
&:backdrop {
4086
// the transparent shadow here is to enforce that the shadow extents don't
4087
// change when we go to backdrop, to prevent jumping windows.
4088
// The biggest shadow should be in the same order then in the active state
4089
// or the jumping will happen during the transition.
4090
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4091
}
4092
.maximized &,
4094
.fullscreen &,
4095
.tiled &,
4096
.tiled-top &,
4097
.tiled-right &,
4098
.tiled-bottom &,
4099
.tiled-left & {
4100
border-radius: 0;
4101
}
4102
.popup & {
4104
box-shadow: none;
4105
}
4106
// server-side decorations as used by mutter
4108
.ssd & {
4109
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4110
}
4111
.csd.popup & {
4113
border-radius: $corner-radius;
4114
box-shadow: $shadow-z4;
4115
}
4116
tooltip.csd & {
4118
border-radius: $corner-radius;
4119
box-shadow: none;
4120
}
4121
messagedialog.csd & {
4123
border-radius: $corner-radius;
4124
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4125
&:backdrop {
4127
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4128
}
4129
}
4130
.solid-csd & {
4132
margin: 0;
4133
padding: 2px;
4134
border-radius: 0;
4135
box-shadow: none;
4136
box-shadow: inset 0 1px highlight($titlebar);
4137
background-color: $titlebar;
4138
&:backdrop {
4140
background-color: $titlebar-backdrop;
4141
}
4142
}
4143
}
4144
// Window Close button
4146
button.titlebutton {
4147
border-radius: $circular-radius;
4148
.selection-mode & {
4150
}
4151
}
4152
// catch all extend :)
4155
.monospace {
4157
font-family: monospace;
4158
}
4159
/**
4161
* Touch Copy & Paste
4162
*/
4163
// touch selection handlebars for the Popover.osd above
4165
cursor-handle {
4166
color: $primary;
4167
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4168
&.top:dir(ltr),
4170
&.bottom:dir(rtl) {
4171
-gtk-icon-transform: rotate(90deg);
4172
}
4173
&.bottom:dir(ltr),
4175
&.top:dir(rtl) {
4176
-gtk-icon-transform: unset;
4177
}
4178
&.insertion-cursor:dir(ltr),
4180
&.insertion-cursor:dir(rtl) {
4181
padding-top: 6px;
4182
-gtk-icon-transform: rotate(45deg);
4183
}
4184
}
4185
// Decouple the font of context menus from their entry/textview
4187
.context-menu {
4188
font: initial;
4189
}
4190
// shortcut window keys
4192
.keycap {
4193
min-width: 28px - 8px * 2;
4194
min-height: 28px - 2px;
4195
margin-top: 2px;
4196
padding-bottom: 2px;
4197
padding-left: 8px;
4198
padding-right: 8px;
4199
border: solid 1px divider($on-surface);
4201
border-radius: $corner-radius + 1px;
4202
box-shadow: inset 0 -2px divider($on-surface);
4203
background-color: $surface;
4204
color: $on-surface;
4205
font-size: smaller;
4206
}
4207
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4209
// caret-color: $primary;
4210
}
4211
stackswitcher button.text-button { // FIXME aggregate with buttons
4213
min-width: 100px;
4214
}
4215
stackswitcher button.circular,
4217
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4218
min-width: $medium-size;
4219
min-height: $medium-size;
4220
padding: 0;
4221
}
4222
/**
4224
* App Icons
4225
*/
4226
// Outline for low res icons
4228
.lowres-icon {
4229
// -gtk-icon-shadow: none;
4230
}
4231
// Drapshadow for large icons
4233
.icon-dropshadow {
4234
// -gtk-icon-shadow: none;
4235
}
4236
/**
4238
* Emoji
4239
*/
4240
popover.emoji-picker {
4242
padding: 0;
4243
entry {
4245
border-bottom: 1px solid divider($on-surface);
4246
border-image: none;
4247
border-radius: 0;
4248
box-shadow: none;
4249
background-color: transparent;
4250
}
4251
scrolledwindow {
4253
border-bottom: 1px solid divider($on-surface);
4254
}
4255
}
4256
button.emoji-section {
4258
margin: 4px;
4259
&:checked {
4261
background-color: overlay("activated", $primary);
4262
color: $primary;
4263
@include ink-color($primary);
4264
}
4265
&:not(:last-child) {
4267
margin-right: 0;
4268
}
4269
}
4270
popover.emoji-picker .emoji {
4272
min-width: 3em;
4273
min-height: 3em;
4274
padding: 0 8px;
4275
// font-size: larger;
4276
widget {
4278
transition: $transition;
4279
border-radius: $corner-radius;
4280
&:hover {
4282
background-color: overlay("hover", $on-surface);
4283
}
4284
}
4285
}
4286
popover.emoji-completion {
4288
padding: 8px 0;
4289
arrow {
4291
border: none;
4292
background: none;
4293
}
4294
.emoji-completion-row {
4296
min-height: $menuitem-size;
4297
padding: 0 12px;
4298
}
4299
.emoji:hover {
4301
background-color: overlay("hover", $on-surface);
4302
}
4303
}
4304