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
border: 1px solid $primary;
139
background-color: rgba($primary, .24);
140
}
141
flowbox {
143
rubberband {
144
@extend rubberband;
145
}
146
flowboxchild {
148
padding: 4px;
149
border-radius: $corner-radius;
150
&:selected {
152
background-color: $overlay-selected;
153
}
154
}
155
}
156
.content-view .tile {
158
// margin: 2px;
159
// padding: 0;
160
// border-radius: 0;
161
// background-color: black;
162
&:selected {
164
background-color: transparent;
165
}
166
}
167
label {
169
caret-color: $primary; // this shouldn't be needed.
170
&.separator {
172
color: hint($on-surface);
173
}
174
selection {
176
background-color: $overlay-selected;
177
}
178
&:disabled {
180
color: disabled($on-surface);
181
headerbar &,
183
menuitem &,
184
tab &,
185
button & {
186
color: inherit;
187
}
188
}
189
&.osd {
191
border-radius: $corner-radius;
192
background-color: $tooltip;
193
color: $on-tooltip;
194
}
195
}
196
.dim-label {
198
color: hint($on-surface);
199
}
200
assistant {
202
.sidebar {
203
padding: 4px 0;
204
// background-color: $base;
205
}
206
.sidebar label {
208
min-height: $medium-size;
209
padding: 0 12px;
210
color: disabled($on-surface);
211
font-weight: 500;
212
&.highlight {
214
color: $on-surface;
215
}
216
}
217
}
218
%osd,
220
.osd {
221
// opacity: .9;
222
}
223
/**
225
* Spinner Animation
226
*/
227
@keyframes spin {
229
to {
230
-gtk-icon-transform: rotate(1turn);
231
}
232
}
233
spinner {
235
background: none;
236
opacity: 0; // non spinning spinner makes no sense
237
color: $primary;
238
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
239
transition: opacity $duration * 4 $ease-out;
240
animation: spin 1s linear infinite;
241
&:checked {
243
opacity: 1;
244
}
245
&:disabled {
247
color: disabled-hint($on-surface);
248
}
249
}
250
/**
252
* Text Entries
253
*/
254
%entry,
256
entry {
257
min-height: $medium-size;
258
padding: 0 8px;
259
border-radius: $corner-radius $corner-radius 0 0;
260
@include entry(normal);
262
&:focus {
264
@include entry(checked);
265
}
266
&:drop(active) {
268
@include entry(hover);
269
}
270
&:disabled {
272
@include entry(disabled);
273
}
274
&.flat {
276
min-height: 0;
277
padding: 2px;
278
border-radius: 0;
279
background-color: transparent;
280
}
281
// icons inside the entry
283
image {
284
// min-height: $small-size;
285
// min-width: $small-size;
286
// border-radius: $circular-radius;
287
// @extend %ripple;
288
// @include ink-color($on-surface);
289
color: hint($on-surface);
290
&:hover,
292
&:active {
293
color: $on-surface;
294
}
295
&:disabled {
297
color: disabled($on-surface);
298
}
299
&.left {
301
margin-left: ($medium-size - 16px) / 2 - 8px;
302
margin-right: 6px;
303
}
304
&.right {
306
margin-left: 6px;
307
margin-right: ($medium-size - 16px) / 2 - 8px;
308
}
309
}
310
undershoot {
312
&.left {
313
@include undershoot(left);
314
}
315
&.right {
317
@include undershoot(right);
318
}
319
}
320
selection {
322
background-color: $overlay-selected;
323
}
324
// entry error and warning style
326
@each $class, $color in (".error": $error, ".warning": $warning) {
327
&#{$class} {
328
@include entry(normal, $color);
329
&:focus {
331
@include entry(checked, $color);
332
}
333
&:disabled {
335
@include entry(disabled, $color);
336
}
337
}
338
}
339
.osd & {
341
}
342
progress {
344
margin: 0 -8px -4px;
345
border-bottom: 2px solid $primary;
346
background-color: transparent;
347
}
348
// linked entries
350
.linked:not(.vertical) > & {
351
@extend %linked;
352
}
353
// Vertically linked entries
355
.linked.vertical > & {
356
@extend %linked-vertical;
357
}
358
}
359
%entry_raised {
361
border-radius: $corner-radius;
362
@include entry(raised-normal);
364
&:focus {
366
@include entry(raised-focus);
367
}
368
&:drop(active) {
370
@include entry(raised-hover);
371
}
372
&:disabled {
374
@include entry(raised-disabled);
375
}
376
// entry error and warning style
378
@each $class, $color in (".error": $error, ".warning": $warning) {
379
&#{$class} {
380
@include entry(raised-normal, $color);
381
&:focus {
383
@include entry(raised-focus, $color);
384
}
385
&:disabled {
387
@include entry(raised-disabled, $color);
388
}
389
image {
391
color: hint(on($color));
392
&:hover,
394
&:active {
395
color: on($color);
396
}
397
&:disabled {
399
color: disabled(on($color));
400
}
401
}
402
}
403
}
404
}
405
treeview entry {
407
&,
408
&.flat {
409
background-color: $base;
410
&,
412
&:focus {
413
border-image: none;
414
box-shadow: none;
415
}
416
}
417
}
418
.entry-tag {
420
margin: 2px;
421
border-radius: $circular-radius;
422
box-shadow: none;
423
background-color: fill($on-surface);
424
color: $on-surface;
425
&:hover {
427
background-image: image(overlay("hover", $on-surface));
428
}
429
// side margins: compensate the entry padding with a negative margin
431
// then the negative margin itself
432
:dir(ltr) & {
433
margin-left: 4px;
434
margin-right: 0;
435
padding-left: 12px;
436
padding-right: 8px;
437
}
438
:dir(rtl) & {
440
margin-left: 0;
441
margin-right: 4px;
442
padding-left: 8px;
443
padding-right: 12px;
444
}
445
// seems any sizing doesn't work
447
&.button {
448
box-shadow: none;
449
background-color: transparent;
450
color: hint($on-surface);
451
}
452
}
453
/**
455
* Buttons
456
*/
457
// stuff for .needs-attention
459
@keyframes needs-attention {
460
from {
461
background-image:
462
-gtk-gradient(
463
radial,
464
center center, 0,
465
center center, .001,
466
to($primary),
467
to(transparent)
468
);
469
}
470
to {
472
background-image:
473
-gtk-gradient(
474
radial,
475
center center, 0,
476
center center, .5,
477
to($primary),
478
to(transparent)
479
);
480
}
481
}
482
%button,
484
button {
485
min-height: 24px;
486
min-width: 16px;
487
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
488
border-radius: $corner-radius;
489
background-color: $surface;
490
color: $on-surface;
491
font-weight: 500;
492
@extend %ripple;
494
@include ink-color($on-surface, $elevation: true);
495
&:disabled {
497
box-shadow: none;
498
background-color: fill($on-surface);
499
color: disabled($on-surface);
500
}
501
&:checked {
503
background-color: overlay("activated", $primary, $background: $surface);
504
color: $primary;
505
@include ink-color($primary, $elevation: true);
506
&:disabled {
508
box-shadow: none;
509
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
510
color: disabled($on-surface);
511
}
512
}
513
&.text-button {
515
min-width: 64px - 16px * 2;
516
padding-left: 16px;
517
padding-right: 16px;
518
}
519
&.image-button {
521
min-width: 24px;
522
padding: ($medium-size - 24px) / 2;
523
border-radius: $circular-radius;
524
}
525
// NOTE: Some image-only buttons use this as well
527
&.text-button.image-button {
528
min-width: 24px;
529
padding: ($medium-size - 24px) / 2;
530
border-radius: $corner-radius;
531
label {
533
&:first-child {
534
margin-left: 16px - ($medium-size - 24px) / 2;
535
}
536
&:last-child {
538
margin-right: 16px - ($medium-size - 24px) / 2;
539
}
540
}
541
image:not(:only-child) {
543
margin: 0 (24px - 16px) / 2;
544
}
545
}
546
.linked:not(.vertical) > & {
548
@extend %linked;
549
&.image-button:not(.text-button) {
551
@extend %linked-image-button;
552
}
553
}
554
.linked.vertical > & {
556
@extend %linked-vertical;
557
&.image-button:not(.text-button) {
559
@extend %linked-vertical-image-button;
560
}
561
}
562
}
563
%button-flat-basic {
565
background-color: transparent;
566
color: hint($on-surface);
567
@include ink-color($on-surface);
568
&:disabled {
570
background-color: transparent;
571
color: disabled-hint($on-surface);
572
}
573
}
574
%button-flat-activatable {
576
@extend %button-flat-basic;
577
&:checked {
579
background-color: overlay("activated", $on-surface);
580
color: $on-surface;
581
@include ink-color($on-surface);
582
&:disabled {
584
color: disabled($on-surface);
585
}
586
}
587
}
588
%button-flat,
590
button.flat {
591
@extend %button-flat-activatable;
592
&.text-button {
594
min-width: 64px - 8px * 2;
595
padding-left: 8px;
596
padding-right: 8px;
597
}
598
&.text-button.image-button {
600
min-width: 24px;
601
padding: ($medium-size - 24px) / 2;
602
label {
604
&:first-child {
605
margin-left: 12px - ($medium-size - 24px) / 2;
606
}
607
&:last-child {
609
margin-right: 12px - ($medium-size - 24px) / 2;
610
}
611
}
612
}
613
.linked:not(.vertical) > &,
615
.linked.vertical > & {
616
&:not(:only-child) { // specificity bump
617
border-radius: $corner-radius;
618
&.image-button:not(.text-button) {
620
border-radius: $circular-radius;
621
}
622
}
623
}
624
}
625
button {
627
// big standalone buttons like in Documents pager
628
&.osd {
629
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
630
&.image-button {
632
padding: ($large-size - 24px) / 2;
633
}
634
&:disabled {
636
opacity: 0;
637
}
638
}
639
// overlay / OSD style
641
@at-root %osd_button,
642
.osd & {
643
}
644
// Suggested and Destructive Action buttons
646
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
647
&#{$class} {
648
background-color: $color;
649
color: on($color);
650
@include ink-color(on($color), $elevation: true);
651
&:disabled {
653
box-shadow: none;
654
background-color: fill($on-surface);
655
color: disabled($on-surface);
656
}
657
&:checked {
659
background-color: overlay("activated", on($color), $background: $color);
660
}
661
&.flat {
663
background-color: transparent;
664
color: $color;
665
@include ink-color($color);
666
&:disabled {
668
box-shadow: none;
669
background-color: transparent;
670
color: disabled-hint($on-surface);
671
}
672
&:checked {
674
background-color: overlay("activated", $color);
675
}
676
}
677
.osd & {
679
}
680
}
681
}
682
.stack-switcher > & {
684
// to position the needs attention dot, padding is added to the button
685
// child, a label needs just lateral padding while an icon needs vertical
686
// padding added too.
687
> label {
689
margin: 0 -6px;
690
padding: 0 6px;
691
}
692
> image {
694
margin: -3px -6px;
695
padding: 3px 6px;
696
}
697
&.needs-attention {
699
> label,
700
> image {
701
@extend %needs-attention;
702
}
703
&:checked {
705
> label,
706
> image {
707
animation: none;
708
background-image: none;
709
}
710
}
711
}
712
}
713
// hide separators
715
&.font,
716
&.file {
717
separator {
718
@extend %hide_separators;
719
}
720
}
721
&.font {
723
> box > box > label {
724
// font-weight: bold;
725
}
726
}
727
// inline-toolbar buttons
729
.inline-toolbar & {
730
// @extend %button-flat;
731
&:not(.text-button) {
733
border-radius: $circular-radius;
734
}
735
}
736
.primary-toolbar & {
738
-gtk-icon-shadow: none; // tango icons don't need shadows
739
}
740
&.close,
742
&.circular { // The Bloody Circul Button
743
border-radius: $circular-radius;
744
label {
746
// padding: 0;
747
}
748
}
749
}
750
%button-small {
752
min-height: $small-size;
753
min-width: $small-size;
754
padding: 0;
755
border-radius: $circular-radius;
756
}
757
%needs-attention {
759
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
760
background-repeat: no-repeat;
761
background-position: right 3px;
762
background-size: 6px 6px;
763
&:dir(rtl) {
765
background-position: left 3px;
766
}
767
}
768
// all the following is for the +|- buttons on inline toolbars, that way
770
// should really be deprecated...
771
.inline-toolbar toolbutton > button {
772
}
773
// More inline toolbar buttons
775
toolbar.inline-toolbar toolbutton {
776
&:not(:first-child) > button.flat {
777
// @extend %linked-not-first-child;
778
}
779
&:not(:last-child) > button.flat {
781
// @extend %linked-not-last-child;
782
}
783
}
784
%linked-not-first-child {
786
border-top-left-radius: 0;
787
border-bottom-left-radius: 0;
788
}
789
%linked-not-last-child {
791
border-top-right-radius: 0;
792
border-bottom-right-radius: 0;
793
}
794
%linked {
796
&:not(:first-child) {
797
@extend %linked-not-first-child;
798
}
799
&:not(:last-child) {
801
@extend %linked-not-last-child;
802
}
803
}
804
%linked-vertical-not-first-child {
806
border-top-left-radius: 0;
807
border-top-right-radius: 0;
808
}
809
%linked-vertical-not-last-child {
811
border-bottom-left-radius: 0;
812
border-bottom-right-radius: 0;
813
}
814
%linked-vertical {
816
&:not(:first-child) {
817
@extend %linked-vertical-not-first-child;
818
}
819
&:not(:last-child) {
821
@extend %linked-vertical-not-last-child;
822
}
823
}
824
%linked-image-button {
826
&:first-child {
827
border-top-left-radius: $corner-radius;
828
border-bottom-left-radius: $corner-radius;
829
}
830
&:last-child {
832
border-top-right-radius: $corner-radius;
833
border-bottom-right-radius: $corner-radius;
834
}
835
&:only-child {
837
border-radius: $circular-radius;
838
}
839
}
840
%linked-vertical-image-button {
842
&:first-child {
843
border-top-left-radius: $corner-radius;
844
border-top-right-radius: $corner-radius;
845
}
846
&:last-child {
848
border-bottom-left-radius: $corner-radius;
849
border-bottom-right-radius: $corner-radius;
850
}
851
&:only-child {
853
border-radius: $circular-radius;
854
}
855
}
856
/* menu buttons */
858
modelbutton.flat,
859
.menuitem.button.flat {
860
min-height: $menuitem-size;
861
padding: 0 8px;
862
border-radius: $corner-radius;
863
@extend %ripple;
865
@include ink-color($on-surface);
866
&:selected {
868
background-color: $overlay-selected;
869
}
870
}
871
modelbutton.flat arrow {
873
transition: color $duration $ease-out;
874
color: hint($on-surface);
875
&:disabled {
877
color: disabled-hint($on-surface);
878
}
879
&.left {
881
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
882
}
883
&.right {
885
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
886
}
887
}
888
button.color {
890
min-height: $small-size;
891
min-width: $small-size;
892
padding: $container-padding;
893
colorswatch:only-child {
895
&,
896
overlay {
897
// border-radius: 0;
898
}
899
}
900
}
901
/**
903
* Links
904
*/
905
*:link {
907
color: $primary;
908
}
909
*:visited {
911
color: $visited;
912
}
913
button.link {
915
&:link {
916
color: $primary;
917
@include ink-color($primary);
918
}
919
&:visited {
921
color: $visited;
922
@include ink-color($visited);
923
}
924
> label {
926
text-decoration-line: underline;
927
}
928
}
929
/**
931
* GtkSpinButton
932
*/
933
spinbutton {
935
&:not(.vertical) {
936
// in this horizontal configuration, the whole spinbutton
937
// behaves as the entry, so we extend the entry styling
938
// and nuke the style on the internal entry
939
@extend %entry;
940
padding: 0;
942
entry {
944
min-width: $large-size - 8px * 2;
945
// reset all the other props since the spinbutton node is styled here
946
margin: 0;
947
border-image: none;
948
border-radius: 0;
949
box-shadow: none;
950
background-color: transparent;
951
}
952
button {
954
@extend %button-flat-basic;
955
@extend %button-small;
956
// margin: $container-padding;
958
border: solid $container-padding transparent;
959
// Remove unwanted focus indicator
961
&:focus:not(:hover):not(:active) {
962
box-shadow: inset 0 0 0 9999px transparent;
963
}
964
&.up:dir(ltr),
966
&.down:dir(rtl) {
967
margin-left: -$container-padding / 2;
968
}
969
&.up:dir(rtl),
971
&.down:dir(ltr) {
972
margin-right: -$container-padding / 2;
973
}
974
}
975
}
976
// OSD horizontal
978
.osd &:not(.vertical) {
979
}
980
// Vertical
982
&.vertical {
983
// in the vertical configuration, we treat the spinbutton
984
// as a box, and tweak the style of the entry in the middle
985
// so that it's linked
986
// FIXME: this should not be set at all, but otherwise it gets the wrong
988
// color
989
caret-color: $primary;
990
// FIXME: this should not be set at all, but otherwise it gets the wrong
992
// color
993
&:disabled {
994
color: disabled($on-surface);
995
}
996
entry {
998
@extend %entry_raised;
999
min-height: $medium-size;
1001
min-width: $large-size;
1002
padding: 0;
1003
}
1004
button {
1006
min-height: $medium-size;
1007
min-width: $large-size;
1008
padding: 0;
1009
@extend %button-flat-basic;
1011
// Remove unwanted focus indicator
1013
&:focus:not(:hover):not(:active) {
1014
box-shadow: inset 0 0 0 9999px transparent;
1015
}
1016
&.up {
1018
border-radius: $corner-radius $corner-radius 0 0;
1019
}
1020
&.down {
1022
border-radius: 0 0 $corner-radius $corner-radius;
1023
}
1024
}
1025
}
1026
// OSD vertical
1028
.osd &.vertical {
1029
}
1030
// Misc
1032
treeview &:not(.vertical) {
1033
min-height: 0;
1034
border-style: none;
1035
border-radius: 0;
1036
entry {
1038
min-height: 0;
1039
padding: 1px 2px;
1040
}
1041
}
1042
}
1043
/**
1045
* ComboBoxes
1046
*/
1047
combobox {
1049
arrow {
1050
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1051
min-height: 16px;
1052
min-width: 16px;
1053
}
1054
// workaround for menuitem selection
1056
decoration {
1057
transition: none;
1058
}
1059
button.combo cellview {
1061
&:dir(ltr) {
1062
margin-left: 8px - ($medium-size - 16px) / 2;
1063
}
1064
&:dir(rtl) {
1066
margin-right: 8px - ($medium-size - 16px) / 2;
1067
}
1068
}
1069
menu {
1071
padding: 2px 0;
1072
menuitem {
1074
min-height: $medium-size - 2px * 2;
1075
padding: 0 8px;
1076
}
1077
// overflow arrows
1079
> arrow {
1080
&.top {
1081
margin-top: -2px;
1082
}
1083
&.bottom {
1085
margin-top: 2px * 2;
1086
margin-bottom: -2px * 3;
1087
}
1088
}
1089
}
1090
&.linked {
1092
button:nth-child(2) {
1093
&:dir(ltr) {
1094
@extend %linked-not-first-child;
1095
}
1096
&:dir(rtl) {
1098
@extend %linked-not-last-child;
1099
}
1100
}
1101
}
1102
> .linked:not(.vertical) > entry:not(:only-child) {
1104
border-radius: $corner-radius $corner-radius 0 0;
1105
&:first-child {
1107
margin-right: -$medium-size;
1108
padding-right: $medium-size;
1109
}
1110
&:last-child {
1112
margin-left: -$medium-size;
1113
padding-left: $medium-size;
1114
}
1115
}
1116
> .linked:not(.vertical) > button:not(:only-child) {
1118
@extend %button-flat-activatable;
1119
// @extend %button-small;
1120
min-height: 16px;
1122
min-width: 16px;
1123
margin: ($medium-size - $small-size) / 2;
1124
padding: ($small-size - 16px) / 2;
1125
border-radius: $circular-radius;
1126
}
1127
}
1128
// the combo is a composite widget so the way we do button linking doesn't
1130
// work, special case needed. See
1131
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1132
.linked:not(.vertical) > combobox {
1134
&:not(:first-child) > box > button.combo {
1135
@extend %linked-not-first-child;
1136
}
1137
&:not(:last-child) > box > button.combo {
1139
@extend %linked-not-last-child;
1140
}
1141
}
1142
.linked.vertical > combobox {
1144
&:not(:first-child) > box > button.combo {
1145
@extend %linked-vertical-not-first-child;
1146
}
1147
&:not(:last-child) > box > button.combo {
1149
@extend %linked-vertical-not-last-child;
1150
}
1151
}
1152
button.combo:only-child {
1154
border-radius: $corner-radius $corner-radius 0 0;
1155
font-weight: normal;
1156
@include entry(normal);
1158
&:focus {
1160
@include entry(focus);
1161
}
1162
&:drop(active),
1164
&:hover {
1165
@include entry(hover);
1166
}
1167
&:checked {
1169
@include entry(checked);
1170
}
1171
&:disabled {
1173
@include entry(disabled);
1174
}
1175
arrow {
1177
transition: color $duration $ease-out;
1178
color: hint($on-surface);
1179
&:disabled {
1181
color: disabled-hint($on-surface);
1182
}
1183
}
1184
}
1185
/**
1187
* Toolbars
1188
*/
1189
toolbar {
1191
-GtkWidget-window-dragging: true;
1192
padding: 2px;
1193
background-color: $background;
1194
button {
1196
@extend %button-flat;
1197
}
1198
// on OSD
1200
.osd & {
1201
background-color: transparent;
1202
}
1203
// stand-alone OSD toolbars
1205
&.osd {
1206
@extend %toolbar-osd;
1207
// positional classes for `attached` osd toolbars
1209
&.left,
1210
&.right,
1211
&.top,
1212
&.bottom {
1213
border-radius: 0;
1214
}
1215
&.bottom {
1217
box-shadow: none;
1218
background-color: transparent;
1219
background-image:
1220
linear-gradient(
1221
to bottom,
1222
transparent,
1223
rgba(black, .1) 30%,
1224
rgba(black, .2) 50%,
1225
rgba(black, .4)
1226
);
1227
}
1228
}
1229
// toolbar separators
1231
&.horizontal > separator {
1232
margin: 2px;
1233
}
1234
&.vertical > separator {
1236
margin: 2px;
1237
}
1238
&:not(.inline-toolbar):not(.osd) {
1240
scale,
1241
entry,
1242
spinbutton,
1243
button {
1244
margin: 2px;
1245
}
1246
.linked entry,
1248
.linked spinbutton,
1249
.linked button {
1250
&:not(:first-child) {
1251
margin-left: 0;
1252
}
1253
&:not(:last-child) {
1255
margin-right: 0;
1256
}
1257
}
1258
spinbutton {
1260
entry,
1261
button {
1262
margin: 0;
1263
}
1264
}
1265
switch {
1267
margin: 2px + $container-padding 2px;
1268
}
1269
}
1270
}
1271
%toolbar-osd {
1273
transition: $transition-shadow;
1274
padding: $container-padding;
1275
border-radius: $corner-radius;
1276
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1277
background-color: $surface;
1278
&:backdrop {
1280
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1281
}
1282
}
1283
// searchbar, location-bar & inline-toolbar
1285
.inline-toolbar {
1286
padding: $container-padding;
1287
border-style: solid;
1288
border-width: 0 1px 1px;
1289
border-color: divider($on-surface);
1290
background-color: $base;
1291
}
1292
searchbar > revealer > box,
1294
.location-bar {
1295
padding: $container-padding;
1296
border-style: solid;
1297
border-width: 0 0 1px;
1298
border-color: divider($on-surface);
1299
background-color: $background;
1300
background-clip: border-box;
1301
}
1302
searchbar > revealer > box {
1304
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1305
margin: -6px;
1306
padding: $container-padding;
1307
}
1308
/**
1310
* Header bars
1311
*/
1312
.titlebar {
1314
transition: background-color $duration $ease-out, color $duration $ease-out;
1315
border-radius: $corner-radius $corner-radius 0 0;
1316
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1317
background-color: $titlebar;
1318
color: $on-titlebar;
1319
&:disabled {
1321
color: disabled($on-titlebar);
1322
}
1323
&:backdrop {
1325
background-color: $titlebar-backdrop;
1326
color: hint($on-titlebar);
1327
&:disabled {
1329
color: disabled-hint($on-titlebar);
1330
}
1331
}
1332
.title {
1334
padding-left: 12px;
1335
padding-right: 12px;
1336
font-weight: bold;
1337
}
1338
.subtitle {
1340
padding-left: 12px;
1341
padding-right: 12px;
1342
font-size: smaller;
1343
}
1344
.subtitle,
1346
.dim-label {
1347
transition: color $duration $ease-out;
1348
color: hint($on-titlebar);
1349
&:backdrop {
1351
color: disabled($on-titlebar);
1352
}
1353
}
1354
// Don't draw titlebar above titlebar
1356
.titlebar {
1357
background-color: transparent;
1358
box-shadow: none;
1359
}
1360
// The separator for split headerbars
1362
headerbar + separator {
1363
background-color: divider($on-titlebar);
1364
}
1365
entry {
1367
box-shadow: inset 0 -1px stroke($on-titlebar);
1368
background-color: entry-fill($on-titlebar);
1369
color: $on-titlebar;
1370
&:disabled {
1372
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1373
background-color: entry-fill($on-titlebar);
1374
color: disabled($on-titlebar);
1375
}
1376
image {
1378
color: hint($on-titlebar);
1379
&:hover,
1381
&:active {
1382
color: $on-titlebar;
1383
}
1384
&:disabled {
1386
color: disabled($on-titlebar);
1387
}
1388
}
1389
}
1390
.linked:not(.vertical) > entry:not(:only-child) {
1392
border-radius: $corner-radius $corner-radius 0 0;
1393
}
1394
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1396
@extend %button-flat;
1397
border-image:
1399
radial-gradient(
1400
circle closest-corner at center calc(100% - 1px),
1401
$titlebar-indicator 0%,
1402
transparent 0%
1403
) 0 0 0 / 0 0 0;
1404
background-color: transparent;
1405
color: hint($on-titlebar);
1406
@include ink-color($on-titlebar);
1407
&:disabled {
1409
color: disabled-hint($on-titlebar);
1410
}
1411
@at-root %titlebar-button-checked,
1413
&:checked {
1414
border-image:
1415
radial-gradient(
1416
circle closest-corner at center calc(100% - 1px),
1417
$titlebar-indicator 100%,
1418
transparent 0%
1419
) 0 0 2 / 0 0 2px;
1420
background-color: transparent;
1421
color: $on-titlebar;
1422
@include ink-color($on-titlebar);
1423
&:disabled {
1425
background-color: transparent;
1426
color: disabled($on-titlebar);
1427
}
1428
}
1429
&:backdrop {
1431
color: disabled($on-titlebar);
1432
&:disabled {
1434
color: disabled-hint($on-titlebar);
1435
}
1436
&:checked {
1438
color: hint($on-titlebar);
1439
&:disabled {
1441
color: disabled-hint($on-titlebar);
1442
}
1443
}
1444
}
1445
}
1446
button.suggested-action, button.destructive-action {
1448
&:disabled {
1449
background-color: fill($on-titlebar);
1450
color: disabled($on-titlebar);
1451
}
1452
}
1453
// FIXME: Ugly overriding
1455
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1456
min-width: 120px - 8px * 2;
1457
}
1458
// FIXME: Ugly overriding
1460
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1461
min-width: 0;
1462
padding-left: ($medium-size - 24px) / 2;
1463
padding-right: ($medium-size - 24px) / 2;
1464
}
1465
&.selection-mode {
1467
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1468
// but let's keep it for backwards compatibility.
1469
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1470
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1471
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1472
background-color: $primary;
1473
color: $on-primary;
1474
&:backdrop {
1476
color: hint($on-primary);
1477
}
1478
.subtitle:link {
1480
color: $on-primary;
1481
}
1482
button:not(.suggested-action):not(.destructive-action) {
1484
border-image:
1485
radial-gradient(
1486
circle closest-corner at center calc(100% - 1px),
1487
currentcolor 0%,
1488
transparent 0%
1489
) 0 0 0 / 0 0 0;
1490
color: $on-primary;
1491
&:disabled {
1493
color: disabled($on-primary);
1494
}
1495
&:checked {
1497
border-image:
1498
radial-gradient(
1499
circle closest-corner at center calc(100% - 1px),
1500
currentcolor 100%,
1501
transparent 0%
1502
) 0 0 2 / 0 0 2px;
1503
color: $on-primary;
1504
&:disabled {
1506
color: disabled($on-primary);
1507
}
1508
}
1509
&:backdrop {
1511
color: hint($on-primary);
1512
&:disabled {
1514
color: disabled-hint($on-primary);
1515
}
1516
&:checked {
1518
color: hint($on-primary);
1519
&:disabled {
1521
color: disabled-hint($on-primary);
1522
}
1523
}
1524
}
1525
}
1526
.selection-menu {
1528
padding-left: 16px;
1529
padding-right: 16px;
1530
arrow {
1532
-GtkArrow-arrow-scaling: 1;
1533
}
1534
.arrow {
1536
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1537
}
1538
}
1539
}
1540
.selection-mode {
1542
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1543
background-color: $primary;
1544
}
1545
// squared corners when the window is maximized, tiled, or fullscreen
1547
.tiled &,
1548
.tiled-top &,
1549
.tiled-right &,
1550
.tiled-bottom &,
1551
.tiled-left &,
1552
.maximized &,
1553
.fullscreen & {
1554
border-radius: 0;
1555
box-shadow: $shadow-z1;
1556
}
1557
&.default-decoration {
1559
min-height: $small-size;
1560
padding: $container-padding;
1561
box-shadow: inset 0 1px highlight($titlebar);
1562
.tiled &,
1564
.maximized &,
1565
.fullscreen & {
1566
box-shadow: none;
1567
}
1568
button.titlebutton {
1570
min-height: $small-size;
1571
min-width: $small-size;
1572
margin: 0;
1573
padding: 0;
1574
}
1575
// workaround for non-animatable buttons
1577
.background:not(.csd) & button.titlebutton:active {
1578
background-size: 1000% 1000%;
1579
}
1580
}
1581
.solid-csd & {
1583
&:dir(rtl), &:dir(ltr) { // specificity bump
1584
border-radius: 0;
1585
box-shadow: $shadow-z1; // just remove the highlight
1586
}
1587
}
1588
}
1589
headerbar {
1591
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1592
min-height: $large-size;
1593
padding: 0 $container-padding;
1594
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1596
entry,
1597
spinbutton,
1598
button {
1599
margin-top: $container-padding;
1600
margin-bottom: $container-padding;
1601
}
1602
separator.titlebutton {
1604
margin-top: $large-size / 4;
1605
margin-bottom: $large-size / 4;
1606
background-color: divider($on-titlebar);
1607
}
1608
switch {
1610
margin-top: ($large-size - 24px) / 2;
1611
margin-bottom: ($large-size - 24px) / 2;
1612
}
1613
// reset button margins of the spinbutton
1615
spinbutton button {
1616
margin-top: 0;
1617
margin-bottom: 0;
1618
}
1619
// FIXME: This is a hacky workaround.
1621
.entry-tag {
1622
margin-top: 5px;
1623
margin-bottom: 5px;
1624
}
1625
}
1626
// Development versions of apps to use a differently styled headerbar
1628
window.devel .titlebar:not(.selection-mode) {
1629
}
1630
/**
1632
* Pathbars
1633
*/
1634
%pathbar_button,
1636
.path-bar.linked:not(.vertical) > button {
1637
@extend %button-flat-basic;
1638
padding-left: ($medium-size - 24px) / 2;
1640
padding-right: ($medium-size - 24px) / 2;
1641
border-image:
1642
radial-gradient(
1643
circle closest-corner at center calc(100% - 1px),
1644
$primary 0%,
1645
transparent 0%
1646
) 0 0 0 / 0 0 0;
1647
border-radius: $corner-radius;
1648
&:checked {
1650
border-image:
1651
radial-gradient(
1652
circle closest-corner at center calc(100% - 1px),
1653
$primary 100%,
1654
transparent 0%
1655
) 0 0 2 / 0 0 2px;
1656
color: $on-surface;
1657
&,
1659
&:disabled {
1660
background-color: transparent;
1661
}
1662
}
1663
label:not(:only-child) {
1665
&:first-child {
1666
margin-left: 0;
1667
}
1668
&:last-child {
1670
margin-right: 0;
1671
}
1672
}
1673
&.text-button {
1675
min-width: 0;
1676
}
1677
&.slider-button {
1679
padding-left: (24px - 16px) / 2;
1680
padding-right: (24px - 16px) / 2;
1681
}
1682
}
1683
/**
1685
* Tree Views
1686
*/
1687
treeview.view {
1689
@at-root * {
1690
-GtkTreeView-horizontal-separator: 4;
1691
-GtkTreeView-grid-line-width: 1;
1692
-GtkTreeView-grid-line-pattern: '';
1693
-GtkTreeView-tree-line-width: 1;
1694
-GtkTreeView-tree-line-pattern: '';
1695
-GtkTreeView-expander-size: 16;
1696
}
1697
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1699
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1700
// FIXME: Avoid transparency background-color being slightly darker
1702
&:selected {
1703
background-color: $base;
1704
background-image: image($overlay-selected);
1705
}
1706
// to avoid borders being overridden by the previously set props
1708
rubberband {
1709
@extend rubberband;
1710
}
1711
&:hover,
1713
&:selected {
1714
border-radius: 0;
1715
}
1716
&.separator {
1718
min-height: 1px + 2px * 2;
1719
color: divider($on-surface);
1720
}
1721
&:drop(active) {
1723
// FIXME: box-shadow, background-color and background-image are not available here.
1724
border-style: solid none;
1725
border-width: 9999px;
1726
border-color: overlay("hover", $on-surface);
1727
&.after {
1729
border-top-style: none;
1730
}
1731
&.before {
1733
border-bottom-style: none;
1734
}
1735
}
1736
&.expander {
1738
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1739
-gtk-icon-transform: rotate(-90deg);
1740
&:dir(rtl) {
1742
-gtk-icon-transform: rotate(90deg);
1743
}
1744
&:checked {
1746
-gtk-icon-transform: unset;
1747
}
1748
color: hint($on-surface);
1750
&:hover,
1752
&:active {
1753
color: $on-surface;
1754
}
1755
&:disabled {
1757
color: disabled-hint($on-surface);
1758
}
1759
}
1760
&.progressbar { // progress bar in treeviews
1762
border-bottom: $bar-size solid $primary;
1763
box-shadow: none;
1764
background-color: transparent;
1765
background-image: none;
1766
&:selected:hover {
1768
box-shadow: none;
1769
}
1770
}
1771
&.trough { // progress bar trough in treeviews
1773
border-bottom: $bar-size solid disabled-stroke($on-surface);
1774
box-shadow: none;
1775
background-color: transparent;
1776
background-image: none;
1777
&:selected:hover {
1779
box-shadow: none;
1780
}
1781
}
1782
header {
1784
button {
1785
padding: 2px 6px;
1786
border-style: none solid solid none;
1787
border-width: 1px;
1788
border-color: divider($on-surface);
1789
border-radius: 0;
1790
background-clip: border-box;
1791
color: hint($on-surface);
1792
@include ink-color($on-surface);
1793
@include list-item;
1794
&:disabled {
1796
color: disabled-hint($on-surface);
1797
}
1798
&,
1800
&:disabled {
1801
background-color: $base;
1802
}
1803
&:last-child {
1805
border-right-style: none;
1806
}
1807
}
1808
}
1809
button.dnd,
1811
header.button.dnd { // for treeview-like derive widgets
1812
padding: 2px 6px;
1813
border-style: none solid solid;
1814
border-width: 1px;
1815
border-color: divider($on-surface);
1816
border-radius: 0;
1817
box-shadow: none;
1818
background-color: $base;
1819
background-clip: border-box;
1820
color: $primary;
1821
}
1822
// see tests/testaccel to test
1824
acceleditor > label {
1825
background-color: $primary;
1826
}
1827
}
1828
/**
1830
* Menus
1831
*/
1832
menubar,
1834
.menubar {
1835
-GtkWidget-window-dragging: true;
1836
padding: 0;
1837
// box-shadow: inset 0 -1px divider($on-surface);
1838
background-color: $titlebar;
1839
color: $on-titlebar;
1840
&:backdrop {
1842
background-color: $titlebar-backdrop;
1843
color: hint($on-titlebar);
1844
}
1845
.csd & {
1847
transition: $transition;
1848
}
1849
> menuitem {
1851
transition: $transition;
1852
min-height: 20px;
1853
padding: 4px 8px;
1854
color: hint($on-titlebar);
1855
&:hover { // Seems like it :hover even with keyboard focus
1857
transition: none;
1858
background-color: overlay("activated", $on-titlebar);
1859
color: $on-titlebar;
1860
}
1861
&:disabled {
1863
color: disabled-hint($on-titlebar);
1864
}
1865
}
1866
}
1867
// Needed to make the border-radius of menus work
1869
// otherwise the background bleeds out of the menu edges
1870
.background.popup {
1871
background-color: transparent;
1872
}
1873
menu,
1875
.menu,
1876
.context-menu {
1877
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1878
padding: 4px 0;
1879
box-shadow: inset 0 1px highlight($surface);
1880
background-color: $surface;
1881
background-clip: border-box;
1882
border: 1px solid divider($on-surface); // adds borders in a non composited env
1883
.csd & {
1885
border: none; // axes borders in a composited env
1886
border-radius: $corner-radius;
1887
}
1888
menuitem {
1890
transition: background-color $duration $ease-out;
1891
min-height: 20px;
1892
min-width: 40px;
1893
padding: 4px 8px;
1894
color: $on-surface;
1895
font: initial;
1896
text-shadow: none;
1897
&:hover {
1899
transition: none;
1900
background-color: overlay("hover", $on-surface);
1901
}
1902
&:disabled {
1904
color: disabled($on-surface);
1905
}
1906
// submenu indicators
1908
arrow {
1909
min-height: 16px;
1910
min-width: 16px;
1911
color: hint($on-surface);
1912
&:disabled {
1914
color: disabled-hint($on-surface);
1915
}
1916
&:dir(ltr) {
1918
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1919
margin-left: 8px;
1920
}
1921
&:dir(rtl) {
1923
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1924
margin-right: 8px;
1925
}
1926
}
1927
// avoids labels color being overridden, see
1929
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1930
label {
1931
&:dir(rtl),
1932
&:dir(ltr) {
1933
// color: inherit;
1934
}
1935
}
1936
}
1937
// overflow arrows
1939
> arrow {
1940
min-height: 16px;
1941
min-width: 16px;
1942
padding: 4px;
1943
background-color: $surface;
1944
color: hint($on-surface);
1945
&.top {
1947
margin-top: -4px;
1948
border-bottom: 1px solid divider($on-surface);
1949
border-radius: $corner-radius $corner-radius 0 0;
1950
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1951
}
1952
&.bottom {
1954
margin-top: 4px * 2;
1955
margin-bottom: -4px * 3;
1956
border-top: 1px solid divider($on-surface);
1957
border-radius: 0 0 $corner-radius $corner-radius;
1958
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1959
}
1960
&:hover {
1962
background-image: image(overlay("hover", $on-surface));
1963
}
1964
&:disabled {
1966
border-color: transparent;
1967
background-color: transparent;
1968
color: transparent;
1969
// color: disabled-hint($on-surface);
1970
}
1971
}
1972
separator {
1974
margin: 4px 0;
1975
}
1976
}
1977
menuitem {
1979
accelerator {
1980
color: hint($on-surface);
1981
}
1982
&:disabled accelerator {
1984
color: disabled-hint($on-surface);
1985
}
1986
}
1987
/**
1989
* Popovers
1990
*/
1991
popover.background {
1993
transition: $transition-shadow;
1994
padding: 2px;
1995
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1996
background-color: $surface;
1997
&:backdrop {
1999
box-shadow: $shadow-z2;
2000
}
2001
&, .csd & {
2003
border-style: solid;
2004
border-width: 1px;
2005
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2006
border-radius: $corner-radius + 1px;
2007
}
2008
> stack {
2010
margin: -4px; // remove extra padding from menu style popovers
2011
}
2012
> toolbar {
2014
margin: -2px;
2015
}
2016
> list,
2018
> .view,
2019
> toolbar {
2020
border-style: none;
2021
box-shadow: none;
2022
background-color: transparent;
2023
}
2024
// FIXME: Use the popover color instead of transparent as a workaround for .view
2026
list,
2027
.view:not(:selected),
2028
toolbar {
2029
background-color: $surface;
2030
}
2031
&.touch-selection,
2033
&.magnifier,
2034
&.osd {
2035
// @extend %osd;
2036
}
2037
button:not(.suggested-action):not(.destructive-action) {
2039
// @extend %button-flat;
2040
}
2041
.linked:not(.vertical) > entry:not(:only-child) {
2043
// border-radius: $corner-radius $corner-radius 0 0;
2044
}
2045
&.menu button,
2047
button.model {
2048
@extend %button-flat;
2049
min-height: 32px;
2051
padding: 0 8px;
2052
border-radius: $corner-radius;
2053
&:checked {
2055
// color: $primary;
2056
}
2057
}
2058
separator {
2060
margin: 4px 0;
2061
}
2062
list separator {
2064
margin: 0;
2065
}
2066
}
2067
/**
2069
* Notebooks
2070
*/
2071
notebook {
2073
frame > paned > & > header,
2074
&.frame > header {
2075
background-color: $base;
2076
}
2077
&:focus tab:checked {
2079
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2080
}
2081
> header {
2083
border-width: 1px;
2084
border-color: divider($on-surface);
2085
background-color: $background;
2086
background-clip: border-box;
2087
&.top {
2089
border-bottom-style: solid;
2090
> tabs {
2092
margin-bottom: -1px;
2093
> tab {
2095
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2096
&:checked {
2098
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2099
}
2100
&.reorderable-page {
2102
border-image-width: 0 1px 2px;
2103
}
2104
}
2105
}
2106
}
2107
&.bottom {
2109
border-top-style: solid;
2110
> tabs {
2112
margin-top: -1px;
2113
> tab {
2115
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2116
&:checked {
2118
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2119
}
2120
&.reorderable-page {
2122
border-image-width: 2px 1px 0;
2123
}
2124
}
2125
}
2126
}
2127
&.left {
2129
border-right-style: solid;
2130
> tabs {
2132
margin-right: -1px;
2133
> tab {
2135
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2136
&:checked {
2138
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2139
}
2140
&.reorderable-page {
2142
border-image-width: 1px 2px 1px 0;
2143
}
2144
}
2145
}
2146
}
2147
&.right {
2149
border-left-style: solid;
2150
> tabs {
2152
margin-left: -1px;
2153
> tab {
2155
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2156
&:checked {
2158
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2159
}
2160
&.reorderable-page {
2162
border-image-width: 1px 0 1px 2px;
2163
}
2164
}
2165
}
2166
}
2167
&.top > tabs > arrow {
2169
@extend %notebook_vert_arrows;
2170
border-top-style: none;
2172
}
2173
&.bottom > tabs > arrow {
2175
@extend %notebook_vert_arrows;
2176
border-bottom-style: none;
2178
}
2179
@at-root %notebook_vert_arrows {
2181
padding-left: 4px;
2182
padding-right: 4px;
2183
&.down {
2185
margin-left: -8px;
2186
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2187
}
2188
&.up {
2190
margin-right: -8px;
2191
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2192
}
2193
}
2194
&.left > tabs > arrow {
2196
@extend %notebook_horz_arrows;
2197
border-left-style: none;
2199
}
2200
&.right > tabs > arrow {
2202
@extend %notebook_horz_arrows;
2203
border-right-style: none;
2205
}
2206
@at-root %notebook_horz_arrows {
2208
padding-top: 4px;
2209
padding-bottom: 4px;
2210
&.down {
2212
margin-top: -8px;
2213
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2214
}
2215
&.up {
2217
margin-bottom: -8px;
2218
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2219
}
2220
}
2221
> tabs > arrow {
2223
min-height: 16px;
2224
min-width: 16px;
2225
border-radius: 0;
2226
color: hint($on-surface);
2227
@extend %ripple;
2228
@include ink-color($on-surface);
2229
&:disabled {
2231
color: disabled-hint($on-surface);
2232
}
2233
}
2234
tab {
2236
transition: $transition,
2237
background-size 0ms,
2238
background-image 0ms;
2239
min-height: $small-size;
2240
min-width: $small-size;
2241
padding: $container-padding 12px;
2242
border-width: 1px; // for reorderable tabs
2244
border-color: transparent; //
2245
outline: none;
2247
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2248
background-repeat: no-repeat;
2249
background-position: center;
2250
background-size: 0% 0%;
2251
background-clip: border-box;
2252
color: hint($on-surface);
2254
font-weight: 500;
2255
&:hover {
2257
background-color: overlay("hover-alt", $on-surface);
2258
}
2259
&:disabled {
2261
color: disabled-hint($on-surface);
2262
}
2263
&:checked {
2265
transition: $transition,
2266
background-size $ripple-fade-in-duration $ease-out,
2267
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2268
background-color: transparent;
2269
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2270
background-size: 1000% 1000%;
2271
background-clip: padding-box;
2272
color: $on-surface;
2273
&:disabled {
2275
color: disabled($on-surface);
2276
}
2277
&.reorderable-page {
2279
border-color: divider($on-surface);
2280
background-color: $base;
2281
}
2282
}
2283
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2285
> box {
2286
transition: background-color $duration $ease-out;
2287
margin: -$container-padding -12px;
2288
padding: $container-padding 12px;
2289
&:drop(active) {
2291
background-color: overlay("hover", $on-surface);
2292
}
2293
}
2294
// colors the button like the label, overridden otherwise
2296
button.flat {
2297
@extend %button-small;
2298
&:last-child {
2300
margin-left: $container-padding;
2301
margin-right: $container-padding - 12px;
2302
}
2303
&:first-child {
2305
margin-left: $container-padding - 12px;
2306
margin-right: $container-padding;
2307
}
2308
}
2309
}
2310
&.top,
2312
&.bottom {
2313
tabs {
2314
padding-left: 8px;
2315
padding-right: 8px;
2316
&:not(:only-child) {
2318
&:first-child {
2319
margin-left: 0;
2320
}
2321
&:last-child {
2323
margin-right: 0;
2324
}
2325
}
2326
tab.reorderable-page {
2328
border-style: none solid;
2329
}
2330
}
2331
}
2332
&.left,
2334
&.right {
2335
tabs {
2336
padding-top: 8px;
2337
padding-bottom: 8px;
2338
&:not(:only-child) {
2340
&:first-child {
2341
margin-top: 0;
2342
}
2343
&:last-child {
2345
margin-bottom: 0;
2346
}
2347
}
2348
tab.reorderable-page {
2350
border-style: solid none;
2351
}
2352
}
2353
}
2354
}
2355
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2357
background-color: $base;
2358
}
2359
}
2360
/**
2362
* Scrollbars
2363
*/
2364
scrollbar {
2366
$_slider_min_length: 24px;
2367
// disable steppers
2369
@at-root * {
2370
-GtkScrollbar-has-backward-stepper: false;
2371
-GtkScrollbar-has-forward-stepper: false;
2372
}
2373
transition: $transition;
2375
background-color: $base;
2376
// scrollbar border
2378
&.top { border-bottom: 1px solid divider($on-surface); }
2379
&.bottom { border-top: 1px solid divider($on-surface); }
2380
&.left { border-right: 1px solid divider($on-surface); }
2381
&.right { border-left: 1px solid divider($on-surface); }
2382
// slider
2384
slider {
2385
transition: background-color $duration $ease-out;
2386
min-width: 8px;
2387
min-height: 8px;
2388
border: 4px solid transparent;
2389
border-radius: $circular-radius;
2390
background-clip: padding-box;
2391
background-color: disabled($on-surface);
2392
&:hover {
2394
background-color: hint($on-surface);
2395
}
2396
&:active {
2398
background-color: $on-surface;
2399
}
2400
&:disabled {
2402
background-color: disabled-hint($on-surface);
2403
}
2404
}
2405
&.fine-tune {
2407
slider {
2408
min-width: 4px;
2409
min-height: 4px;
2410
}
2411
&.horizontal slider {
2413
margin: 2px 0;
2414
}
2415
&.vertical slider {
2417
margin: 0 2px;
2418
}
2419
}
2420
&.overlay-indicator {
2422
&:not(.fine-tune) slider {
2423
transition-property: background-color, min-height, min-width;
2424
}
2425
&:not(.dragging):not(.hovering) {
2427
border-color: transparent;
2428
background-color: transparent;
2429
slider {
2431
min-width: 4px;
2432
min-height: 4px;
2433
margin: 4px - 1px;
2434
border: 1px solid rgba($base, .3);
2435
}
2436
button {
2438
min-width: 4px;
2439
min-height: 4px;
2440
margin: 4px - 1px;
2441
border: 1px solid rgba($base, .3);
2442
border-radius: $circular-radius;
2443
background-color: disabled($on-surface);
2444
background-clip: padding-box;
2445
-gtk-icon-source: none;
2446
&:disabled {
2448
background-color: disabled-hint($on-surface);
2449
}
2450
}
2451
&.horizontal {
2453
slider {
2454
min-width: $_slider_min_length;
2455
}
2456
button {
2458
min-width: 8px;
2459
}
2460
}
2461
&.vertical {
2463
slider {
2464
min-height: $_slider_min_length;
2465
}
2466
button {
2468
min-height: 8px;
2469
}
2470
}
2471
}
2472
&.dragging,
2474
&.hovering {
2475
background-color: rgba($surface, .9);
2476
}
2477
}
2478
&.horizontal slider {
2480
min-width: $_slider_min_length;
2481
}
2482
&.vertical slider {
2484
min-height: $_slider_min_length;
2485
}
2486
// button styling
2488
button {
2489
@extend %button-flat-basic;
2490
min-width: 16px;
2492
min-height: 16px;
2493
padding: 0;
2494
border-radius: 0;
2495
}
2496
// button icons
2498
&.vertical {
2499
button {
2500
&.down {
2501
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2502
}
2503
&.up {
2505
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2506
}
2507
}
2508
}
2509
&.horizontal {
2511
button {
2512
&.down {
2513
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2514
}
2515
&.up {
2517
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2518
}
2519
}
2520
}
2521
}
2522
/**
2525
* Switch
2526
*/
2527
switch {
2529
transition: all $duration $ease-out;
2530
margin: $container-padding 0;
2531
padding: 0 2px;
2532
border: 5px solid transparent;
2533
border-radius: $circular-radius;
2534
background-color: stroke($on-surface);
2535
background-clip: padding-box;
2536
font-size: 0;
2537
&:checked {
2539
background-color: rgba($primary, .5);
2540
}
2541
&:disabled {
2543
opacity: .5;
2544
}
2545
// hide on/off icons for >=3.24.5
2547
image {
2548
margin: -8px;
2549
-gtk-icon-transform: scale(0);
2550
}
2551
slider {
2553
transition: all $duration $ease-out;
2554
min-width: 20px;
2555
min-height: 20px;
2556
margin: -3px -2px;
2557
border-radius: $circular-radius;
2558
outline: none;
2559
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2560
background-color: $switch-surface;
2561
}
2562
&:hover slider {
2564
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2565
}
2566
&:focus slider {
2568
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2569
}
2570
&:checked slider {
2572
background-color: $primary;
2573
}
2574
&:checked:hover slider {
2576
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2577
}
2578
&:checked:focus slider {
2580
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2581
}
2582
row:selected & {
2584
}
2585
}
2586
/**
2588
* Check and Radio items
2589
*/
2590
// draw regular check and radio items using our PNG assets
2592
// all assets are rendered from assets.svg. never add pngs directly
2593
// selection-mode
2595
.view.content-view.check:not(list),
2596
.content-view:not(list) .tile check {
2597
min-height: 40px;
2598
min-width: 40px;
2599
margin: 0;
2600
padding: 0;
2601
box-shadow: none;
2602
background-color: transparent;
2603
background-image: none;
2604
-gtk-icon-shadow: $icon-shadow-z2;
2605
&:hover,
2607
&:active {
2608
-gtk-icon-shadow: $icon-shadow-z4;
2609
}
2610
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2612
&#{$class} {
2613
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2614
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2616
}
2617
}
2618
}
2619
checkbutton,
2621
radiobutton {
2622
outline: none;
2623
}
2624
checkbutton.text-button,
2626
radiobutton.text-button {
2627
// this is for a nice focus on check and radios text
2628
padding: 2px;
2629
label:not(:only-child) {
2631
margin: 0 4px;
2632
}
2633
}
2634
$check-radio-size: 40px;
2636
check,
2638
radio {
2639
min-height: 24px;
2640
min-width: 24px;
2641
margin: -($check-radio-size - 24px) / 2;
2642
padding: ($check-radio-size - 24px) / 2;
2643
border-radius: $circular-radius;
2644
color: hint($on-surface);
2645
@extend %ripple;
2646
@include ink-color($on-surface);
2647
&:checked,
2649
&:indeterminate {
2650
color: $primary;
2651
@include ink-color($primary);
2652
}
2653
&:disabled {
2655
color: disabled-hint($on-surface);
2656
}
2657
&:only-child {
2659
// margin: -12px;
2660
}
2661
popover modelbutton.flat & {
2663
&,
2664
&:focus,
2665
&:hover,
2666
&:focus:hover,
2667
&:active,
2668
&:disabled {
2669
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2670
box-shadow: none;
2671
background-image: none;
2672
}
2673
&.left:dir(rtl) {
2675
margin-left: -12px;
2676
margin-right: -4px;
2677
}
2678
&.right:dir(ltr) {
2680
margin-left: -4px;
2681
margin-right: -12px;
2682
}
2683
}
2684
menu menuitem & {
2686
transition: none;
2687
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2688
padding: 0;
2689
&:dir(ltr) {
2691
margin-right: 8px;
2692
}
2693
&:dir(rtl) {
2695
margin-left: 8px;
2696
}
2697
&,
2699
&:hover,
2700
&:disabled {
2701
box-shadow: none;
2702
}
2703
}
2704
}
2705
%check,
2707
check {
2708
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2709
&:checked {
2711
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2712
}
2713
&:indeterminate {
2715
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2716
}
2717
}
2718
%radio,
2720
radio {
2721
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2722
&:checked {
2724
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2725
}
2726
&:indeterminate {
2728
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2729
}
2730
border-image-slice: $check-radio-size / 2px;
2732
border-image-width: $check-radio-size / 2;
2733
$radio-indicator-size: 10px / $check-radio-size / 2;
2735
border-image-source:
2737
-gtk-gradient(
2738
radial,
2739
center center, 0,
2740
center center, .001,
2741
to($primary),
2742
to(transparent)
2743
);
2744
&:checked:not(:indeterminate) {
2746
border-image-source:
2747
-gtk-gradient(
2748
radial,
2749
center center, 0,
2750
center center, $radio-indicator-size,
2751
to($primary),
2752
to(transparent)
2753
);
2754
&:disabled {
2756
border-image-source:
2757
-gtk-gradient(
2758
radial,
2759
center center, 0,
2760
center center, $radio-indicator-size,
2761
to(disabled-hint($on-surface)),
2762
to(transparent)
2763
);
2764
}
2765
}
2766
}
2767
%small_check,
2769
menu menuitem check {
2770
min-height: 16px;
2771
min-width: 16px;
2772
border-radius: $corner-radius;
2773
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2774
&:checked {
2776
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2777
}
2778
&:indeterminate {
2780
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2781
}
2782
}
2783
%small_radio,
2785
menu menuitem radio {
2786
min-height: 16px;
2787
min-width: 16px;
2788
border-image: none;
2789
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2790
&:checked {
2792
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2793
}
2794
&:indeterminate {
2796
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2797
}
2798
}
2799
// ANIMATION:
2801
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2802
// the transformation is set on the active state and it get reset on the checked state.
2803
radio:not(:checked):active {
2804
// -gtk-icon-transform: scale(0);
2805
}
2806
// Otherwise, treeview.view styling will be applied...
2808
treeview.view check,
2809
treeview.view radio {
2810
padding: 0;
2811
color: hint($on-surface);
2812
&:checked,
2814
&:indeterminate {
2815
color: $primary;
2816
}
2817
&:disabled {
2819
color: disabled-hint($on-surface);
2820
}
2821
&,
2823
&:hover,
2824
&:selected,
2825
&:selected:hover {
2826
box-shadow: none;
2827
background-color: transparent;
2828
}
2829
}
2830
treeview.view radio:checked {
2832
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2833
border-image: none;
2834
}
2835
/**
2837
* GtkScale
2838
*/
2839
scale {
2841
// sizing
2842
$_marks_length: 8px;
2843
$_marks_distance: 7px;
2844
$trough_size: 2px;
2846
$finetune_trough_size: 4px;
2847
$slider_size: 32px;
2849
$slider_margin: -($slider_size - $trough_size) / 2;
2851
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2852
$color_slider_margin: -($slider_size) * 3 / 4;
2854
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2855
min-height: $trough_size;
2857
min-width: $trough_size;
2858
&.horizontal {
2860
padding: ($medium-size - $trough_size) / 2 12px;
2861
}
2862
&.vertical {
2864
padding: 12px ($medium-size - $trough_size) / 2;
2865
}
2866
// the slider is inside the trough, so to have make it bigger there's a negative margin
2868
slider {
2869
min-height: $slider_size;
2870
min-width: $slider_size;
2871
margin: $slider_margin;
2872
}
2873
// click-and-hold the slider to activate
2875
&.fine-tune {
2876
&.horizontal {
2877
min-height: $finetune_trough_size;
2878
padding-top: ($medium-size - $finetune_trough_size) / 2;
2879
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2880
}
2881
&.vertical {
2883
min-width: $finetune_trough_size;
2884
padding-left: ($medium-size - $finetune_trough_size) / 2;
2885
padding-right: ($medium-size - $finetune_trough_size) / 2;
2886
}
2887
// to make the trough grow in fine-tune mode
2889
slider {
2890
margin: $finetune_slider_margin;
2891
}
2892
}
2893
// the backing bit
2895
trough {
2896
transition: background-color $duration $ease-out;
2897
outline: none;
2898
background-color: stroke($on-surface);
2899
&:disabled {
2901
background-color: disabled-stroke($on-surface);
2902
}
2903
}
2904
// the colored part of the backing bit
2906
highlight {
2907
transition: background-image $duration $ease-out;
2908
background-image: image($primary);
2909
&:disabled {
2911
background-color: $background;
2912
background-image: image(disabled-hint($on-surface));
2913
}
2914
}
2915
// this is another differently styled part of the backing bit, the most relevant use case is for example
2917
// in media player to indicate how much video stream as been cached
2918
fill {
2919
transition: background-color $duration $ease-out;
2920
background-color: stroke($on-surface);
2921
&:disabled {
2923
background-color: transparent;
2924
}
2925
}
2926
slider {
2928
transition: background-color $duration $ease-out,
2929
background-size $ripple-fade-out-duration $ease-out,
2930
background-image $ripple-fade-out-opacity-duration $ease-out;
2931
background-repeat: no-repeat;
2932
background-position: center;
2933
background-size: auto, 1000% 1000%;
2934
border-radius: 50%;
2935
color: $primary;
2936
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2938
&#{$class} {
2939
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2940
background-image:
2942
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2943
radial-gradient(circle, transparent 10%, transparent 0%);
2944
}
2945
}
2946
&:hover {
2948
background-color: overlay("hover", $primary);
2949
}
2950
&:focus {
2952
background-color: overlay("focus", $primary);
2953
}
2954
&:active {
2956
$_url: 'assets/scale-slider#{$asset-suffix}';
2957
transition: background-color $duration $ease-out,
2959
background-size 0ms,
2960
background-image 0ms;
2961
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2962
background-image:
2963
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2964
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2965
background-size: auto, 0% 0%;
2966
}
2967
}
2968
marks,
2970
value {
2971
color: hint($on-surface);
2972
}
2973
indicator {
2975
background-color: stroke($on-surface);
2976
color: transparent;
2977
}
2978
//marks margins
2980
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2981
(horizontal, bottom, bottom, top),
2982
(vertical, top, left, right),
2983
(vertical, bottom, right, left) {
2984
&.#{$scale_orient} marks {
2985
&.#{$marks_class} {
2986
margin-#{$marks_margin}: $_marks_distance;
2987
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2988
}
2989
}
2990
&.#{$scale_orient}.fine-tune marks {
2992
&.#{$marks_class} {
2993
margin-#{$marks_margin}: $_marks_distance - 1px;
2994
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2995
}
2996
}
2997
}
2998
&.horizontal {
3000
indicator {
3001
min-height: $_marks_length;
3002
min-width: 1px;
3003
}
3004
}
3005
&.vertical {
3007
indicator {
3008
min-height: 1px;
3009
min-width: $_marks_length;
3010
}
3011
}
3012
// *WARNING* scale with marks madness following
3014
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3016
@each $marks_class, $marks_infix in (
3017
".marks-before:not(.marks-after)": "-marks-before",
3018
".marks-after:not(.marks-before)": "-marks-after"
3019
) {
3020
&#{$dir_class}#{$marks_class} {
3021
slider {
3022
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3023
&#{$state_class} {
3024
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3025
background-image:
3027
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3028
radial-gradient(circle, transparent 10%, transparent 0%);
3029
}
3030
}
3031
&:active {
3033
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3034
background-image:
3036
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3037
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3038
}
3039
}
3040
}
3041
}
3042
}
3043
&.color {
3045
min-height: 0;
3046
min-width: 0;
3047
&.horizontal {
3049
padding: 0 0 12px 0;
3050
slider {
3052
&:dir(ltr), &:dir(rtl) { // specificity bump
3053
margin-bottom: $color_slider_margin;
3054
margin-top: $color_marks_slider_margin;
3055
}
3056
}
3057
}
3058
&.vertical {
3060
&:dir(ltr) {
3061
padding: 0 0 0 12px;
3062
slider {
3064
margin-left: $color_slider_margin;
3065
margin-right: $color_marks_slider_margin;
3066
}
3067
}
3068
&:dir(rtl) {
3070
padding: 0 12px 0 0;
3071
slider {
3073
margin-right: $color_slider_margin;
3074
margin-left: $color_marks_slider_margin;
3075
}
3076
}
3077
}
3078
}
3079
}
3080
/**
3082
* Progress bars
3083
*/
3084
progressbar {
3086
// sizing
3087
&.horizontal {
3088
trough,
3089
progress {
3090
min-height: $bar-size;
3091
}
3092
}
3093
&.vertical {
3095
trough,
3096
progress {
3097
min-width: $bar-size;
3098
}
3099
}
3100
// FIXME: insensitive state missing and some other state should be set probably
3102
color: hint($on-surface);
3103
font-size: smaller;
3104
trough {
3106
background-color: disabled-stroke($on-surface);
3107
}
3108
progress {
3110
background-color: $primary;
3111
}
3112
&.osd { // progressbar.osd used for epiphany page loading progress
3114
// min-width: $bar-size;
3115
// min-height: $bar-size;
3116
// background-color: transparent;
3117
trough {
3119
// background-color: transparent;
3120
}
3121
progress {
3123
// background-color: $primary;
3124
}
3125
}
3126
// makes the progress indicator disappear, when the fraction is 0
3128
trough.empty progress {
3129
all: unset;
3130
}
3131
}
3132
/**
3134
* Level Bar
3135
*/
3136
levelbar {
3138
&.horizontal {
3139
block {
3140
min-height: $bar-size;
3141
}
3142
&.discrete block {
3144
min-width: $medium-size;
3145
&:not(:last-child) {
3147
margin-right: 2px;
3148
}
3149
}
3150
}
3151
&.vertical {
3153
block {
3154
min-width: $bar-size;
3155
}
3156
&.discrete block {
3158
min-height: $medium-size;
3159
&:not(:last-child) {
3161
margin-bottom: 2px;
3162
}
3163
}
3164
}
3165
// imitate the entry style
3167
trough {
3168
// padding: 2px;
3169
// border-radius: $corner-radius;
3170
// box-shadow: $shadow-z1;
3171
// background-color: $base;
3172
&:disabled {
3174
// background-color: $base-alt;
3175
}
3176
}
3177
block {
3179
&.low {
3180
background-color: $warning;
3181
}
3182
&.high,
3184
&:not(.empty) {
3185
background-color: $primary;
3186
}
3187
&.full {
3189
background-color: $success;
3190
}
3191
&.empty {
3193
background-color: disabled-stroke($on-surface);
3194
}
3195
}
3196
}
3197
/**
3199
* Print dialog
3200
*/
3201
printdialog {
3203
paper {
3204
padding: 0;
3205
border: 1px solid divider($on-surface);
3206
background-color: $base;
3207
color: $on-surface;
3208
}
3209
.dialog-action-box {
3211
margin: 12px;
3212
}
3213
}
3214
/**
3216
* Frames
3217
*/
3218
frame > border,
3220
.frame {
3221
margin: 0;
3222
padding: 0;
3223
border: 1px solid divider($on-surface);
3224
border-radius: 0;
3225
box-shadow: none;
3226
&.flat {
3228
border-style: none;
3229
}
3230
}
3231
// for backward compatibility
3233
frame.flat > border {
3234
border-style: none;
3235
}
3236
actionbar > revealer > box {
3238
padding: $container-padding;
3239
border-top: 1px solid divider($on-surface);
3240
background-color: $base;
3241
background-clip: border-box;
3242
button:not(.suggested-action):not(.destructive-action) {
3244
@extend %button-flat;
3245
}
3246
.linked:not(.vertical) > entry:not(:only-child) {
3248
border-radius: $corner-radius $corner-radius 0 0;
3249
}
3250
}
3251
scrolledwindow {
3253
viewport.frame { // avoid double borders when viewport inside scrolled window
3254
border-style: none;
3255
}
3256
// This is used when content is touch-dragged past boundaries.
3258
// draws a box on top of the content, the size changes programmatically.
3259
@at-root overshoot {
3260
&.top { @include overshoot(top); }
3261
&.bottom { @include overshoot(bottom); }
3263
&.left { @include overshoot(left); }
3265
&.right { @include overshoot(right); }
3267
}
3268
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3270
@at-root undershoot {
3271
&.top { @include undershoot(top); }
3272
&.bottom { @include undershoot(bottom); }
3274
&.left { @include undershoot(left); }
3276
&.right { @include undershoot(right); }
3278
}
3279
@at-root junction { // the small square between two scrollbars
3281
border-style: solid none none solid;
3282
border-width: 1px;
3283
border-color: divider($on-surface);
3284
background-color: $base;
3285
&:dir(rtl) {
3287
border-style: solid solid none none;
3288
}
3289
}
3290
}
3291
// vbox and hbox separators
3293
separator {
3294
min-width: 1px;
3295
min-height: 1px;
3296
background-color: divider($on-surface);
3297
}
3298
%hide_separators {
3300
min-width: 0;
3301
min-height: 0;
3302
background-color: transparent;
3303
}
3304
/**
3306
* Lists
3307
*/
3308
list {
3310
border-color: divider($on-surface);
3311
background-color: $base;
3312
row {
3314
padding: 2px;
3315
}
3316
}
3317
row {
3319
&.activatable {
3320
@extend %ripple;
3321
@include ink-color($on-surface);
3322
@include list-item;
3323
// this is for indicathing which row generated a popover
3325
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3326
&.has-open-popup {
3327
background-color: overlay("activated", $on-surface);
3328
}
3329
}
3330
&:selected {
3332
background-color: $overlay-selected;
3333
@include ink-color($primary);
3335
&.has-open-popup {
3337
background-color: overlay("activated", $primary, $background: $overlay-selected);
3338
}
3339
}
3340
}
3341
/**
3343
* App Notifications
3344
*/
3345
.app-notification {
3347
// @extend %osd;
3348
@extend %toolbar-osd;
3350
margin: 8px;
3352
button {
3354
@extend %button-flat;
3355
&.text-button:not(:disabled) {
3357
color: $primary;
3358
@include ink-color($primary);
3359
}
3360
}
3361
&.frame,
3363
border {
3364
border-style: none;
3365
}
3366
}
3367
/**
3369
* Expanders
3370
*/
3371
expander {
3373
title > arrow {
3374
transition: all $duration $ease-out;
3375
min-width: 16px;
3376
min-height: 16px;
3377
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3378
-gtk-icon-transform: rotate(-90deg);
3379
&:dir(rtl) {
3381
-gtk-icon-transform: rotate(90deg);
3382
}
3383
&:checked {
3385
-gtk-icon-transform: unset;
3386
}
3387
color: hint($on-surface);
3389
&:hover,
3391
&:active {
3392
color: $on-surface;
3393
}
3394
&:disabled {
3396
color: disabled-hint($on-surface);
3397
}
3398
}
3399
}
3400
/**
3402
* Calendar
3403
*/
3404
calendar {
3406
padding: 1px;
3407
border: 1px solid divider($on-surface);
3408
color: $on-surface;
3409
&:disabled {
3411
color: disabled($on-surface);
3412
}
3413
&:selected {
3415
border-radius: $corner-radius + 1px;
3416
background-color: $overlay-selected;
3417
}
3418
&.header {
3420
border-style: none none solid;
3421
border-color: divider($on-surface);
3422
border-radius: 0;
3423
}
3424
&.button {
3426
border-radius: $corner-radius + 1px;
3427
color: hint($on-surface);
3428
&:hover {
3430
background-image: image(overlay("hover", $on-surface));
3431
}
3432
&:disabled {
3434
color: disabled-hint($on-surface);
3435
}
3436
}
3437
&.highlight {
3439
color: hint($on-surface);
3440
font-weight: 500;
3441
}
3442
&:indeterminate {
3444
color: disabled-hint($on-surface);
3445
}
3446
}
3447
/**
3449
* Dialogs
3450
*/
3451
// Message Dialog styling
3453
messagedialog {
3454
&.background {
3455
background-color: $surface;
3456
}
3457
.titlebar {
3459
min-height: $small-size;
3460
border-style: none;
3461
box-shadow: inset 0 1px highlight($surface);
3462
background-color: $surface;
3463
color: $on-surface;
3464
&:backdrop {
3466
background-color: $surface;
3467
color: hint($on-surface);
3468
}
3469
}
3470
&.csd { // rounded bottom border styling for csd version
3472
&.background {
3473
// bigger radius for better antialiasing
3474
border-bottom-left-radius: $corner-radius;
3475
border-bottom-right-radius: $corner-radius;
3476
}
3477
}
3478
// Hint text
3480
box.vertical > label + label {
3481
color: hint($on-surface);
3482
}
3483
.dialog-action-box {
3485
margin-top: -$container-padding;
3486
// padding: $container-padding;
3487
button {
3489
@extend %button-flat;
3490
&:not(:last-child) {
3492
margin-right: $container-padding;
3493
}
3494
&:not(:disabled) {
3496
color: $primary;
3497
@include ink-color($primary);
3498
}
3499
&.suggested-action:not(:disabled) {
3501
background-color: transparent;
3502
// color: $primary;
3503
// @include ink-color($primary);
3504
}
3505
&.destructive-action:not(:disabled) {
3507
background-color: transparent;
3508
color: $error;
3509
@include ink-color($error);
3510
}
3511
}
3512
}
3513
}
3514
filechooser {
3516
.dialog-action-box {
3517
border-top: 1px solid divider($on-surface);
3518
}
3519
#pathbarbox {
3521
border-bottom: 1px solid divider($on-surface);
3522
background-color: $background;
3523
> stack > box > button { // The new folder button
3525
@extend %button-flat;
3526
border-radius: $circular-radius;
3528
}
3529
}
3530
}
3531
filechooserbutton:drop(active) {
3533
// box-shadow: none;
3534
}
3535
/**
3537
* Sidebar
3538
*/
3539
.sidebar {
3541
border-style: none;
3542
background-color: $base-alt;
3543
&:not(separator) {
3545
@at-root %sidebar_left,
3546
&:dir(ltr),
3547
&.left,
3548
&.left:dir(rtl) {
3549
border-right: 1px solid divider($on-surface);
3550
border-left-style: none;
3551
}
3552
@at-root %sidebar_right,
3554
&:dir(rtl),
3555
&.right {
3556
border-left: 1px solid divider($on-surface);
3557
border-right-style: none;
3558
}
3559
}
3560
list {
3562
background-color: transparent;
3563
}
3564
paned & {
3566
&,
3567
&.left,
3568
&.right,
3569
&.left:dir(rtl),
3570
&:dir(rtl),
3571
&:dir(ltr) {
3572
border-style: none;
3573
}
3574
}
3575
}
3576
stacksidebar.sidebar {
3578
& {
3579
&:dir(ltr),
3580
&.left,
3581
&.left:dir(rtl) {
3582
list {
3583
@extend %sidebar_left;
3584
}
3585
}
3586
&:dir(rtl),
3588
&.right {
3589
list {
3590
@extend %sidebar_right;
3591
}
3592
}
3593
}
3594
+ separator.vertical,
3596
separator.horizontal {
3597
@extend %hide_separators;
3598
}
3599
list {
3601
padding: 4px;
3602
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3603
}
3604
row {
3606
min-height: 32px;
3607
padding: 0 8px - 6px;
3608
border-radius: $corner-radius;
3609
&:selected {
3611
background-color: overlay("activated", $primary);
3612
color: $primary;
3613
font-weight: 500;
3614
@include ink-color($primary);
3615
}
3616
+ row {
3618
margin-top: 4px;
3619
}
3620
> label {
3622
padding-left: 6px;
3623
padding-right: 6px;
3624
}
3625
&.needs-attention > label {
3627
@extend %needs-attention;
3628
}
3629
}
3630
}
3631
separator.sidebar {
3633
background-color: divider($on-surface);
3634
&.selection-mode,
3636
.selection-mode & {
3637
// background-color: divider($on-primary);
3638
}
3639
}
3640
/**
3642
* File chooser
3643
*/
3644
// dim the sidebar icons, see bug #786613 for details on this oddity
3646
row image.sidebar-icon {
3647
transition: color $duration $ease-out;
3648
color: hint($on-surface);
3649
&:disabled {
3651
color: disabled-hint($on-surface);
3652
}
3653
}
3654
placessidebar.sidebar {
3656
> viewport.frame {
3657
border-style: none;
3658
}
3659
list {
3661
padding: (4px - 3px) 0 4px;
3662
}
3663
row {
3665
// Needs overriding of the GtkListBoxRow padding
3666
min-height: 32px;
3667
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3668
padding: 0;
3669
border-radius: $corner-radius;
3670
// Using margins/padding directly in the SidebarRow
3672
// will make the animation of the new bookmark row jump
3673
> revealer {
3674
padding: 0 8px;
3675
}
3676
&:selected {
3678
background-color: overlay("activated", $primary);
3679
color: $primary;
3680
font-weight: 500;
3681
@include ink-color($primary);
3682
image.sidebar-icon {
3684
color: $primary;
3685
}
3686
}
3687
&:disabled {
3689
color: disabled($on-surface);
3690
}
3691
image.sidebar-icon {
3693
&:dir(ltr) {
3694
padding-right: 8px;
3695
}
3696
&:dir(rtl) {
3698
padding-left: 8px;
3699
}
3700
}
3701
label.sidebar-label {
3703
&:dir(ltr) {
3704
padding-right: 2px;
3705
}
3706
&:dir(rtl) {
3708
padding-left: 2px;
3709
}
3710
}
3711
@at-root button.sidebar-button {
3713
@extend %button-flat-basic;
3714
@extend %button-small;
3715
}
3716
&.sidebar-placeholder-row {
3718
background-color: overlay("hover", $on-surface);
3719
}
3720
&.sidebar-new-bookmark-row {
3722
color: $primary;
3723
image.sidebar-icon {
3725
color: $primary;
3726
}
3727
}
3728
}
3729
}
3730
placesview {
3732
.server-list-button {
3733
> image {
3734
-gtk-icon-transform: rotate(0turn);
3735
}
3736
&:checked > image {
3738
-gtk-icon-transform: rotate(-.5turn);
3739
}
3740
}
3741
// this selects the "connect to server" label
3743
> actionbar > revealer > box > label {
3744
padding-left: 8px;
3745
padding-right: 8px;
3746
}
3747
}
3748
/**
3750
* Paned
3751
*/
3752
paned {
3754
> separator {
3755
min-width: 1px;
3756
min-height: 1px;
3757
-gtk-icon-source: none; // defeats the ugly default handle decoration
3758
border-style: none; // just to be sure
3759
background-color: transparent;
3760
// workaround, using background istead of a border since the border will get rendered twice (?)
3761
background-image: image(divider($on-surface));
3762
background-size: 1px 1px;
3763
background-clip: content-box; // avoids borders image being rendered twice (?)
3764
&.wide {
3766
min-width: 6px;
3767
min-height: 6px;
3768
background-color: $background;
3769
background-image: image(divider($on-surface)), image(divider($on-surface));
3770
background-size: 1px 1px, 1px 1px;
3771
}
3772
}
3773
&.horizontal > separator {
3775
background-repeat: repeat-y;
3776
&:dir(ltr) {
3778
margin: 0 -8px 0 0;
3779
padding: 0 8px 0 0;
3780
background-position: left;
3781
}
3782
&:dir(rtl) {
3784
margin: 0 0 0 -8px;
3785
padding: 0 0 0 8px;
3786
background-position: right;
3787
}
3788
&.wide {
3790
margin: 0;
3791
padding: 0;
3792
background-repeat: repeat-y, repeat-y;
3793
background-position: left, right;
3794
}
3795
}
3796
&.vertical > separator {
3798
margin: 0 0 -8px 0;
3799
padding: 0 0 8px 0;
3800
background-repeat: repeat-x;
3801
background-position: top;
3802
&.wide {
3804
margin: 0;
3805
padding: 0;
3806
background-repeat: repeat-x, repeat-x;
3807
background-position: bottom, top;
3808
}
3809
}
3810
}
3811
/**
3813
* GtkInfoBar
3814
*/
3815
infobar {
3817
border-style: none;
3818
&.info,
3820
&.question {
3821
border-bottom: 1px solid divider($on-surface);
3822
background-color: $base;
3823
button {
3825
@extend %button-flat;
3826
&.text-button:not(:disabled) {
3828
color: $primary;
3829
@include ink-color($primary);
3830
}
3831
}
3832
}
3833
&.warning {
3835
background-color: $warning;
3836
color: $on-warning;
3837
button.flat {
3839
color: $on-warning;
3840
@include ink-color($on-warning);
3841
}
3842
selection {
3844
}
3845
*:link {
3847
color: $on-warning;
3848
}
3849
}
3850
&.error {
3852
background-color: $error;
3853
color: $on-error;
3854
button.flat {
3856
color: $on-error;
3857
@include ink-color($on-error);
3858
}
3859
selection {
3861
}
3862
*:link {
3864
color: $on-error;
3865
}
3866
}
3867
// Remove ugly hard-coded padding
3869
button label {
3870
margin: 0 -4px;
3871
}
3872
}
3873
/**
3875
* Tooltips
3876
*/
3877
tooltip {
3879
&.background {
3880
// background-color needs to be set this way otherwise it gets drawn twice
3881
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3882
background-color: $tooltip;
3883
color: $on-tooltip;
3884
}
3885
// padding: 4px; /* not working */
3887
border-radius: $corner-radius;
3888
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3889
&:not(.csd):not(.unity-csd) {
3891
// border: 1px solid divider($on-surface);
3892
// border-radius: $corner-radius + 1px;
3893
// background-clip: $background-clip-extra;
3894
}
3895
// FIXME: we need a border or tooltips vanish on black background.
3897
decoration {
3898
background-color: transparent;
3899
}
3900
> box {
3902
margin: -6px; // Remove hard-coded 6px margin
3903
min-height: 32px - 4px * 2;
3904
padding: 4px 8px;
3905
}
3906
.dim-label {
3908
color: hint($on-tooltip);
3909
}
3910
* {
3912
// workaround for Eclipse.
3913
// do not include any declaration here.
3914
}
3915
}
3916
/**
3918
* Color Chooser
3919
*/
3920
colorswatch {
3922
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3923
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3924
// applied to the overlay box.
3925
// base color corners rounding
3927
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3928
// sports a bigger radius.
3929
// nth-child is needed by the custom color strip.
3930
&.top {
3932
border-top-left-radius: $corner-radius + .5px;
3933
border-top-right-radius: $corner-radius + .5px;
3934
overlay {
3936
border-top-left-radius: $corner-radius;
3937
border-top-right-radius: $corner-radius;
3938
}
3939
}
3940
&.bottom {
3942
border-bottom-left-radius: $corner-radius + .5px;
3943
border-bottom-right-radius: $corner-radius + .5px;
3944
overlay {
3946
border-bottom-left-radius: $corner-radius;
3947
border-bottom-right-radius: $corner-radius;
3948
}
3949
}
3950
&.left,
3952
&:first-child:not(.top) {
3953
border-top-left-radius: $corner-radius + .5px;
3954
border-bottom-left-radius: $corner-radius + .5px;
3955
overlay {
3957
border-top-left-radius: $corner-radius;
3958
border-bottom-left-radius: $corner-radius;
3959
}
3960
}
3961
&.right,
3963
&:last-child:not(.bottom) {
3964
border-top-right-radius: $corner-radius + .5px;
3965
border-bottom-right-radius: $corner-radius + .5px;
3966
overlay {
3968
border-top-right-radius: $corner-radius;
3969
border-bottom-right-radius: $corner-radius;
3970
}
3971
}
3972
&.dark {
3974
color: $on-dark;
3975
}
3976
&.light {
3978
color: $on-light;
3979
}
3980
overlay {
3982
transition: $transition-shadow;
3983
box-shadow: $shadow-z1;
3984
&:drop(active),
3986
&:hover {
3987
box-shadow: $shadow-z3;
3988
}
3989
}
3990
&#add-color-button {
3992
border-radius: $corner-radius $corner-radius 0 0;
3993
color: $on-surface;
3994
&:only-child {
3996
border-radius: $corner-radius;
3997
}
3998
overlay {
4000
background-color: $surface;
4001
}
4002
}
4003
&:disabled {
4005
opacity: .5;
4006
overlay {
4008
box-shadow: none;
4009
}
4010
}
4011
row:selected & {
4013
}
4014
&#editor-color-sample {
4016
border-radius: $corner-radius + .5px;
4017
overlay {
4019
border-radius: $corner-radius;
4020
&:hover {
4022
// box-shadow: $shadow-z1;
4023
}
4024
}
4025
}
4026
}
4027
// colorscale popup
4029
colorchooser .popover.osd {
4030
transition: $transition-shadow;
4031
border-radius: $corner-radius;
4032
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4033
background-color: $surface;
4034
&:backdrop {
4036
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4037
}
4038
}
4039
/**
4041
* Misc
4042
*/
4043
// content view (grid/list)
4045
.content-view {
4046
background-color: $background;
4047
&:hover {
4049
// -gtk-icon-effect: highlight;
4050
}
4051
rubberband,
4053
.rubberband {
4054
@extend rubberband;
4055
}
4056
}
4057
.scale-popup {
4059
.osd & {
4060
// @extend %osd;
4061
button.flat { // FIXME: quick hack, redo properly
4063
}
4064
}
4065
button { // +/- buttons on GtkVolumeButton popup
4067
}
4068
}
4069
/**
4071
* Window Decorations
4072
*/
4073
decoration {
4075
transition: $transition-shadow;
4076
border-radius: $corner-radius $corner-radius 0 0;
4077
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4078
// FIXME rationalize shadows
4080
// this is used for the resize cursor area
4082
margin: 8px;
4083
&:backdrop {
4085
// the transparent shadow here is to enforce that the shadow extents don't
4086
// change when we go to backdrop, to prevent jumping windows.
4087
// The biggest shadow should be in the same order then in the active state
4088
// or the jumping will happen during the transition.
4089
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4090
}
4091
.maximized &,
4093
.fullscreen &,
4094
.tiled &,
4095
.tiled-top &,
4096
.tiled-right &,
4097
.tiled-bottom &,
4098
.tiled-left & {
4099
border-radius: 0;
4100
}
4101
.popup & {
4103
box-shadow: none;
4104
}
4105
// server-side decorations as used by mutter
4107
.ssd & {
4108
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4109
}
4110
.csd.popup & {
4112
border-radius: $corner-radius;
4113
box-shadow: $shadow-z4;
4114
}
4115
tooltip.csd & {
4117
border-radius: $corner-radius;
4118
box-shadow: none;
4119
}
4120
messagedialog.csd & {
4122
border-radius: $corner-radius;
4123
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4124
&:backdrop {
4126
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4127
}
4128
}
4129
.solid-csd & {
4131
margin: 0;
4132
padding: 2px;
4133
border-radius: 0;
4134
box-shadow: none;
4135
box-shadow: inset 0 1px highlight($titlebar);
4136
background-color: $titlebar;
4137
&:backdrop {
4139
background-color: $titlebar-backdrop;
4140
}
4141
}
4142
}
4143
// Window Close button
4145
button.titlebutton {
4146
border-radius: $circular-radius;
4147
.selection-mode & {
4149
}
4150
}
4151
// catch all extend :)
4154
.monospace {
4156
font-family: monospace;
4157
}
4158
/**
4160
* Touch Copy & Paste
4161
*/
4162
// touch selection handlebars for the Popover.osd above
4164
cursor-handle {
4165
color: $primary;
4166
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4167
&.top:dir(ltr),
4169
&.bottom:dir(rtl) {
4170
-gtk-icon-transform: rotate(90deg);
4171
}
4172
&.bottom:dir(ltr),
4174
&.top:dir(rtl) {
4175
-gtk-icon-transform: unset;
4176
}
4177
&.insertion-cursor:dir(ltr),
4179
&.insertion-cursor:dir(rtl) {
4180
padding-top: 6px;
4181
-gtk-icon-transform: rotate(45deg);
4182
}
4183
}
4184
// Decouple the font of context menus from their entry/textview
4186
.context-menu {
4187
font: initial;
4188
}
4189
// shortcut window keys
4191
.keycap {
4192
min-width: 28px - 8px * 2;
4193
min-height: 28px - 2px;
4194
margin-top: 2px;
4195
padding-bottom: 2px;
4196
padding-left: 8px;
4197
padding-right: 8px;
4198
border: solid 1px divider($on-surface);
4200
border-radius: $corner-radius + 1px;
4201
box-shadow: inset 0 -2px divider($on-surface);
4202
background-color: $surface;
4203
color: $on-surface;
4204
font-size: smaller;
4205
}
4206
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4208
// caret-color: $primary;
4209
}
4210
stackswitcher button.text-button { // FIXME aggregate with buttons
4212
min-width: 100px;
4213
}
4214
stackswitcher button.circular,
4216
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4217
min-width: $medium-size;
4218
min-height: $medium-size;
4219
padding: 0;
4220
}
4221
/**
4223
* App Icons
4224
*/
4225
// Outline for low res icons
4227
.lowres-icon {
4228
// -gtk-icon-shadow: none;
4229
}
4230
// Drapshadow for large icons
4232
.icon-dropshadow {
4233
// -gtk-icon-shadow: none;
4234
}
4235
/**
4237
* Emoji
4238
*/
4239
popover.emoji-picker {
4241
padding: 0;
4242
entry {
4244
border-bottom: 1px solid divider($on-surface);
4245
border-image: none;
4246
border-radius: 0;
4247
box-shadow: none;
4248
background-color: transparent;
4249
}
4250
scrolledwindow {
4252
border-bottom: 1px solid divider($on-surface);
4253
}
4254
}
4255
button.emoji-section {
4257
margin: 4px;
4258
&:checked {
4260
background-color: overlay("activated", $primary);
4261
color: $primary;
4262
@include ink-color($primary);
4263
}
4264
&:not(:last-child) {
4266
margin-right: 0;
4267
}
4268
}
4269
popover.emoji-picker .emoji {
4271
min-width: 3em;
4272
min-height: 3em;
4273
padding: 0 8px;
4274
// font-size: larger;
4275
widget {
4277
transition: $transition;
4278
border-radius: $corner-radius;
4279
&:hover {
4281
background-color: overlay("hover", $on-surface);
4282
}
4283
}
4284
}
4285
popover.emoji-completion {
4287
padding: 8px 0;
4288
arrow {
4290
border: none;
4291
background: none;
4292
}
4293
.emoji-completion-row {
4295
min-height: $menuitem-size;
4296
padding: 0 12px;
4297
}
4298
.emoji:hover {
4300
background-color: overlay("hover", $on-surface);
4301
}
4302
}
4303