ASCII text
1
* {
2
// padding: 0;
3
-GtkToolButton-icon-spacing: 0;
5
-GtkTextView-error-underline-color: $error;
6
// The size for scrollbars. The slider is 2px smaller, but we keep it
8
// up so that the whole area is sensitive to button presses for the
9
// slider. The stepper button is larger in both directions, the slider
10
// only in the width
11
-GtkScrolledWindow-scrollbar-spacing: 0;
13
-GtkToolItemGroup-expander-size: 11;
15
-GtkWidget-text-handle-width: 24;
17
-GtkWidget-text-handle-height: 24;
18
-GtkDialog-button-spacing: $container-padding / 1px;
20
-GtkDialog-action-area-border: $container-padding / 1px;
21
-gtk-secondary-caret-color: $primary;
23
// We use the outline properties to signal the focus properties
25
// to the adwaita engine: using real CSS properties is faster,
26
// and we don't use any outlines for now.
27
outline: 2px solid transparent;
29
outline-offset: -4px;
30
-gtk-outline-radius: $corner-radius;
31
&:focus {
33
outline-color: overlay("focus", $on-surface);
34
}
35
}
36
/**
38
* Base States
39
*/
40
.background {
42
background-color: $background;
43
color: $on-surface;
44
}
45
/*
47
These wildcard seems unavoidable, need to investigate.
48
Wildcards are bad and troublesome, use them with care,
49
or better, just don't.
50
Everytime a wildcard is used a kitten dies, painfully.
51
*/
52
*:disabled {
54
-gtk-icon-effect: dim;
55
}
56
.gtkstyle-fallback {
58
background-color: $background;
59
color: $on-surface;
60
&:hover {
62
background-color: darken($background, 5%);
63
}
64
&:active {
66
background-color: darken($background, 10%);
67
}
68
&:disabled {
70
color: disabled($on-surface);
71
}
72
&:selected {
74
background-color: $primary;
75
color: $on-primary;
76
}
77
}
78
.view {
80
// background-color: $background;
81
// color: $on-surface;
82
&:hover {
84
box-shadow: inset 0 0 0 9999px overlay("hover-alt", $on-surface);
85
}
86
&:selected:hover {
88
box-shadow: inset 0 0 0 9999px overlay("hover-alt", $primary);
89
}
90
&:disabled {
92
color: disabled($on-surface);
93
}
94
&:hover,
96
&:selected {
97
border-radius: $corner-radius;
98
}
99
selection,
101
&:selected {
102
background-color: $overlay-selected;
103
}
104
}
105
textview {
107
// FIXME: we need to override background-color to ensure text rendering
108
text {
109
background-color: $background;
110
caret-color: $primary;
111
}
112
border {
114
// background-color: $background;
115
color: hint($on-surface); // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: $on-dark;
126
text-shadow: $text-shadow;
127
.rubberband,
129
rubberband {
130
border: 1px solid primary($on-dark);
131
background-color: rgba(primary($on-dark), .3);
132
}
133
}
134
%rubberband,
136
.rubberband,
137
rubberband {
138
border: 1px solid $primary;
139
background-color: rgba($primary, .24);
140
}
141
flowbox {
143
rubberband {
144
@extend %rubberband;
145
}
146
flowboxchild {
148
padding: 4px;
149
border-radius: $corner-radius;
150
&:selected {
152
background-color: $overlay-selected;
153
}
154
}
155
}
156
.content-view .tile {
158
// margin: 2px;
159
// padding: 0;
160
// border-radius: 0;
161
// background-color: black;
162
&:selected {
164
background-color: transparent;
165
}
166
}
167
label {
169
caret-color: $primary; // this shouldn't be needed.
170
&.separator {
172
color: hint($on-surface);
173
}
174
&.error {
176
color: $error;
177
}
178
selection {
180
background-color: $overlay-selected;
181
}
182
&:disabled {
184
color: disabled($on-surface);
185
headerbar &,
187
menuitem &,
188
tab &,
189
button & {
190
color: inherit;
191
}
192
}
193
&.osd {
195
border-radius: $corner-radius;
196
background-color: $tooltip;
197
color: $on-tooltip;
198
}
199
}
200
.dim-label {
202
color: hint($on-surface);
203
}
204
assistant {
206
.sidebar {
207
padding: 4px 0;
208
}
209
.sidebar label {
211
min-height: $medium-size;
212
margin: 0 4px;
213
padding: 0 8px;
214
border-radius: $corner-radius;
215
color: disabled($on-surface);
216
font-weight: 500;
217
&.highlight {
219
background-color: overlay("activated", $primary);
220
color: $primary;
221
}
222
}
223
}
224
%osd,
226
.osd {
227
// opacity: .9;
228
}
229
/**
231
* Spinner Animation
232
*/
233
@keyframes spin {
235
to {
236
-gtk-icon-transform: rotate(1turn);
237
}
238
}
239
spinner {
241
background: none;
242
opacity: 0; // non spinning spinner makes no sense
243
color: $primary;
244
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
245
transition: opacity $duration * 4 $ease-out;
246
animation: spin 1s linear infinite;
247
&:checked {
249
opacity: 1;
250
}
251
&:disabled {
253
color: disabled-hint($on-surface);
254
}
255
}
256
/**
258
* General Typography
259
*/
260
@function pt($size: $font-size) {
262
@return ($size * .75 / 1px) * 1pt;
263
}
264
.large-title {
266
font-weight: 400;
267
font-size: pt(48px);
268
}
269
.title-1 {
271
font-weight: 400;
272
font-size: pt(34px);
273
letter-spacing: pt(.25px);
274
}
275
.title-2 {
277
font-weight: 400;
278
font-size: pt(24px);
279
}
280
.title-3 {
282
font-weight: 500;
283
font-size: pt(20px);
284
letter-spacing: pt(.15px);
285
}
286
.title-4 {
288
font-weight: 400;
289
font-size: pt(16px);
290
letter-spacing: pt(.5px);
291
}
292
.heading {
294
font-weight: 500;
295
font-size: 1em;
296
}
297
.body {
299
font-weight: 400;
300
font-size: 1em;
301
}
302
.caption-heading {
304
font-weight: 500;
305
font-size: pt(12px);
306
letter-spacing: pt(1.5px);
307
}
308
.caption {
310
font-weight: 400;
311
font-size: pt(12px);
312
letter-spacing: pt(.4px);
313
}
314
/**
316
* Text Entries
317
*/
318
%entry,
320
entry {
321
min-height: $medium-size;
322
padding: 0 8px;
323
border-radius: $corner-radius $corner-radius 0 0;
324
@include entry(normal);
326
&:focus {
328
@include entry(checked);
329
}
330
&:drop(active) {
332
@include entry(hover);
333
}
334
&:disabled {
336
@include entry(disabled);
337
}
338
&.flat {
340
min-height: 0;
341
padding: 2px;
342
border-radius: 0;
343
background-color: transparent;
344
}
345
// icons inside the entry
347
image {
348
color: hint($on-surface);
349
&:hover,
351
&:active {
352
color: $on-surface;
353
}
354
&:disabled {
356
color: disabled($on-surface);
357
}
358
&.left {
360
margin-left: ($medium-size - 16px) / 2 - 8px;
361
margin-right: 6px;
362
}
363
&.right {
365
margin-left: 6px;
366
margin-right: ($medium-size - 16px) / 2 - 8px;
367
}
368
}
369
undershoot {
371
&.left {
372
// @include undershoot(left);
373
}
374
&.right {
376
// @include undershoot(right);
377
}
378
}
379
selection {
381
background-color: $overlay-selected;
382
}
383
// entry error and warning style
385
@each $class, $color in (".error": $error, ".warning": $warning) {
386
&#{$class} {
387
@include entry(normal, $color);
388
&:focus {
390
@include entry(checked, $color);
391
}
392
&:disabled {
394
@include entry(disabled, $color);
395
}
396
}
397
}
398
.osd & {
400
}
401
progress {
403
margin: 0 -8px -4px;
404
border-bottom: 2px solid $primary;
405
background-color: transparent;
406
}
407
// linked entries
409
.linked:not(.vertical) > & {
410
@extend %linked;
411
}
412
// Vertically linked entries
414
.linked.vertical > & {
415
@extend %linked-vertical;
416
}
417
}
418
%entry_raised {
420
border-radius: $corner-radius;
421
@include entry(raised-normal);
423
&:focus {
425
@include entry(raised-focus);
426
}
427
&:drop(active) {
429
@include entry(raised-hover);
430
}
431
&:disabled {
433
@include entry(raised-disabled);
434
}
435
// entry error and warning style
437
@each $class, $color in (".error": $error, ".warning": $warning) {
438
&#{$class} {
439
@include entry(raised-normal, $color);
440
&:focus {
442
@include entry(raised-focus, $color);
443
}
444
&:disabled {
446
@include entry(raised-disabled, $color);
447
}
448
image {
450
color: hint(on($color));
451
&:hover,
453
&:active {
454
color: on($color);
455
}
456
&:disabled {
458
color: disabled(on($color));
459
}
460
}
461
}
462
}
463
}
464
treeview entry {
466
&,
467
&.flat {
468
background-color: $base;
469
&,
471
&:focus {
472
border-image: none;
473
box-shadow: none;
474
}
475
}
476
}
477
.entry-tag {
479
margin: 2px;
480
border-radius: $circular-radius;
481
box-shadow: none;
482
background-color: fill($on-surface);
483
color: $on-surface;
484
&:hover {
486
background-image: image(overlay("hover", $on-surface));
487
}
488
// side margins: compensate the entry padding with a negative margin
490
// then the negative margin itself
491
:dir(ltr) & {
492
margin-left: 4px;
493
margin-right: 0;
494
padding-left: 12px;
495
padding-right: 8px;
496
}
497
:dir(rtl) & {
499
margin-left: 0;
500
margin-right: 4px;
501
padding-left: 8px;
502
padding-right: 12px;
503
}
504
// seems any sizing doesn't work
506
&.button {
507
box-shadow: none;
508
background-color: transparent;
509
color: hint($on-surface);
510
}
511
}
512
/**
514
* Buttons
515
*/
516
// stuff for .needs-attention
518
@keyframes needs-attention {
519
from {
520
background-image:
521
-gtk-gradient(
522
radial,
523
center center, 0,
524
center center, .001,
525
to($primary),
526
to(transparent)
527
);
528
}
529
to {
531
background-image:
532
-gtk-gradient(
533
radial,
534
center center, 0,
535
center center, .5,
536
to($primary),
537
to(transparent)
538
);
539
}
540
}
541
%button,
543
button {
544
min-height: 24px;
545
min-width: 16px;
546
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
547
border-radius: $corner-radius;
548
background-color: $surface;
549
color: $on-surface;
550
font-weight: 500;
551
@extend %ripple;
553
@include ink-color($on-surface, $elevation: true);
554
&:disabled {
556
box-shadow: none;
557
background-color: fill($on-surface);
558
color: disabled($on-surface);
559
}
560
&:checked {
562
background-color: overlay("activated", $primary, $background: $surface);
563
color: $primary;
564
@include ink-color($primary, $elevation: true);
565
&:disabled {
567
box-shadow: none;
568
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
569
color: disabled($on-surface);
570
}
571
}
572
&.text-button {
574
min-width: 64px - 16px * 2;
575
padding-left: 16px;
576
padding-right: 16px;
577
}
578
&.image-button {
580
min-width: 24px;
581
padding: ($medium-size - 24px) / 2;
582
border-radius: $circular-radius;
583
}
584
// NOTE: Some image-only buttons use this as well
586
&.text-button.image-button {
587
min-width: 24px;
588
padding: ($medium-size - 24px) / 2;
589
border-radius: $corner-radius;
590
label {
592
&:first-child {
593
margin-left: 16px - ($medium-size - 24px) / 2;
594
}
595
&:last-child {
597
margin-right: 16px - ($medium-size - 24px) / 2;
598
}
599
}
600
image:not(:only-child) {
602
margin: 0 (24px - 16px) / 2;
603
}
604
}
605
.linked:not(.vertical) > & {
607
@extend %linked;
608
&.image-button:not(.text-button) {
610
@extend %linked-image-button;
611
}
612
}
613
.linked.vertical > & {
615
@extend %linked-vertical;
616
&.image-button:not(.text-button) {
618
@extend %linked-vertical-image-button;
619
}
620
}
621
}
622
%button-flat-basic {
624
background-color: transparent;
625
color: hint($on-surface);
626
@include ink-color($on-surface);
627
&:disabled {
629
background-color: transparent;
630
color: disabled-hint($on-surface);
631
}
632
}
633
%button-flat-activatable {
635
@extend %button-flat-basic;
636
&:checked {
638
background-color: overlay("activated", $on-surface);
639
color: $on-surface;
640
@include ink-color($on-surface);
641
&:disabled {
643
color: disabled($on-surface);
644
}
645
}
646
}
647
%button-flat,
649
button.flat {
650
@extend %button-flat-activatable;
651
&.text-button {
653
min-width: 64px - 8px * 2;
654
padding-left: 8px;
655
padding-right: 8px;
656
}
657
&.text-button.image-button {
659
min-width: 24px;
660
padding: ($medium-size - 24px) / 2;
661
label {
663
&:first-child {
664
margin-left: 12px - ($medium-size - 24px) / 2;
665
}
666
&:last-child {
668
margin-right: 12px - ($medium-size - 24px) / 2;
669
}
670
}
671
}
672
.linked:not(.vertical) > &,
674
.linked.vertical > & {
675
&:not(:only-child) { // specificity bump
676
border-radius: $corner-radius;
677
&.image-button:not(.text-button) {
679
border-radius: $circular-radius;
680
}
681
}
682
}
683
}
684
button {
686
// big standalone buttons like in Documents pager
687
&.osd {
688
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
689
&.image-button {
691
padding: ($large-size - 24px) / 2;
692
}
693
&:disabled {
695
opacity: 0;
696
}
697
}
698
// overlay / OSD style
700
@at-root %osd_button,
701
.osd & {
702
}
703
// Suggested and Destructive Action buttons
705
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
706
&#{$class} {
707
background-color: $color;
708
color: on($color);
709
@include ink-color(on($color), $elevation: true);
710
&:disabled {
712
box-shadow: none;
713
background-color: fill($on-surface);
714
color: disabled($on-surface);
715
}
716
&:checked {
718
background-color: overlay("activated", on($color), $background: $color);
719
}
720
&.flat {
722
background-color: transparent;
723
color: $color;
724
@include ink-color($color);
725
&:disabled {
727
box-shadow: none;
728
background-color: transparent;
729
color: disabled-hint($on-surface);
730
}
731
&:checked {
733
background-color: overlay("activated", $color);
734
}
735
}
736
.osd & {
738
}
739
}
740
}
741
.stack-switcher > & {
743
// to position the needs attention dot, padding is added to the button
744
// child, a label needs just lateral padding while an icon needs vertical
745
// padding added too.
746
> label {
748
margin: 0 -6px;
749
padding: 0 6px;
750
}
751
> image {
753
margin: -3px -6px;
754
padding: 3px 6px;
755
}
756
&.needs-attention {
758
> label,
759
> image {
760
@extend %needs-attention;
761
}
762
&:checked {
764
> label,
765
> image {
766
animation: none;
767
background-image: none;
768
}
769
}
770
}
771
}
772
// hide separators
774
&.font,
775
&.file {
776
separator {
777
@extend %hide_separators;
778
}
779
}
780
&.font {
782
> box > box > label {
783
// font-weight: bold;
784
}
785
}
786
// inline-toolbar buttons
788
.inline-toolbar & {
789
// @extend %button-flat;
790
&:not(.text-button) {
792
border-radius: $circular-radius;
793
}
794
}
795
.primary-toolbar & {
797
-gtk-icon-shadow: none; // tango icons don't need shadows
798
}
799
&.close,
801
&.circular { // The Bloody Circul Button
802
border-radius: $circular-radius;
803
label {
805
// padding: 0;
806
}
807
}
808
}
809
%button-small {
811
min-height: $small-size;
812
min-width: $small-size;
813
padding: 0;
814
border-radius: $circular-radius;
815
}
816
%needs-attention {
818
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
819
background-repeat: no-repeat;
820
background-position: right 3px;
821
background-size: 6px 6px;
822
&:dir(rtl) {
824
background-position: left 3px;
825
}
826
}
827
// all the following is for the +|- buttons on inline toolbars, that way
829
// should really be deprecated...
830
.inline-toolbar toolbutton > button {
831
}
832
// More inline toolbar buttons
834
toolbar.inline-toolbar toolbutton {
835
&:not(:first-child) > button.flat {
836
// @extend %linked-not-first-child;
837
}
838
&:not(:last-child) > button.flat {
840
// @extend %linked-not-last-child;
841
}
842
}
843
%linked-not-first-child {
845
border-top-left-radius: 0;
846
border-bottom-left-radius: 0;
847
}
848
%linked-not-last-child {
850
border-top-right-radius: 0;
851
border-bottom-right-radius: 0;
852
}
853
%linked {
855
&:not(:first-child) {
856
@extend %linked-not-first-child;
857
}
858
&:not(:last-child) {
860
@extend %linked-not-last-child;
861
}
862
}
863
%linked-vertical-not-first-child {
865
border-top-left-radius: 0;
866
border-top-right-radius: 0;
867
}
868
%linked-vertical-not-last-child {
870
border-bottom-left-radius: 0;
871
border-bottom-right-radius: 0;
872
}
873
%linked-vertical {
875
&:not(:first-child) {
876
@extend %linked-vertical-not-first-child;
877
}
878
&:not(:last-child) {
880
@extend %linked-vertical-not-last-child;
881
}
882
}
883
%linked-image-button {
885
&:first-child {
886
border-top-left-radius: $corner-radius;
887
border-bottom-left-radius: $corner-radius;
888
}
889
&:last-child {
891
border-top-right-radius: $corner-radius;
892
border-bottom-right-radius: $corner-radius;
893
}
894
&:only-child {
896
border-radius: $circular-radius;
897
}
898
}
899
%linked-vertical-image-button {
901
&:first-child {
902
border-top-left-radius: $corner-radius;
903
border-top-right-radius: $corner-radius;
904
}
905
&:last-child {
907
border-bottom-left-radius: $corner-radius;
908
border-bottom-right-radius: $corner-radius;
909
}
910
&:only-child {
912
border-radius: $circular-radius;
913
}
914
}
915
/* menu buttons */
917
modelbutton.flat,
918
.menuitem.button.flat {
919
min-height: $menuitem-size;
920
padding: 0 8px;
921
border-radius: $corner-radius;
922
@extend %ripple;
924
@include ink-color($on-surface);
925
&:selected {
927
background-color: $overlay-selected;
928
}
929
}
930
modelbutton.flat arrow {
932
transition: color $duration $ease-out;
933
color: hint($on-surface);
934
&:disabled {
936
color: disabled-hint($on-surface);
937
}
938
&.left {
940
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
941
}
942
&.right {
944
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
945
}
946
}
947
button.color {
949
min-height: $small-size;
950
min-width: $small-size;
951
padding: $container-padding;
952
colorswatch:only-child {
954
&,
955
overlay {
956
// border-radius: 0;
957
}
958
}
959
}
960
/**
962
* Links
963
*/
964
*:link {
966
color: $primary;
967
&:disabled {
969
color: disabled($on-surface);
970
}
971
}
972
*:visited {
974
color: $visited;
975
&:disabled {
977
color: disabled($on-surface);
978
}
979
}
980
button.link {
982
&:link {
983
color: $primary;
984
@include ink-color($primary);
985
}
986
&:visited {
988
color: $visited;
989
@include ink-color($visited);
990
}
991
&:disabled {
993
color: disabled($on-surface);
994
}
995
> label {
997
text-decoration-line: underline;
998
}
999
}
1000
/**
1002
* GtkSpinButton
1003
*/
1004
spinbutton {
1006
&:not(.vertical) {
1007
// in this horizontal configuration, the whole spinbutton
1008
// behaves as the entry, so we extend the entry styling
1009
// and nuke the style on the internal entry
1010
@extend %entry;
1011
padding: 0;
1013
entry {
1015
min-width: $large-size - 8px * 2;
1016
// reset all the other props since the spinbutton node is styled here
1017
margin: 0;
1018
border-image: none;
1019
border-radius: 0;
1020
box-shadow: none;
1021
background-color: transparent;
1022
}
1023
button {
1025
@extend %button-flat-basic;
1026
@extend %button-small;
1027
// margin: $container-padding;
1029
border: solid $container-padding transparent;
1030
background-clip: padding-box;
1031
// Remove unwanted focus indicator
1033
&:focus:not(:hover):not(:active) {
1034
box-shadow: inset 0 0 0 9999px transparent;
1035
}
1036
&.up:dir(ltr),
1038
&.down:dir(rtl) {
1039
margin-left: -$container-padding / 2;
1040
}
1041
&.up:dir(rtl),
1043
&.down:dir(ltr) {
1044
margin-right: -$container-padding / 2;
1045
}
1046
}
1047
}
1048
// OSD horizontal
1050
.osd &:not(.vertical) {
1051
}
1052
// Vertical
1054
&.vertical {
1055
// in the vertical configuration, we treat the spinbutton
1056
// as a box, and tweak the style of the entry in the middle
1057
// so that it's linked
1058
// FIXME: this should not be set at all, but otherwise it gets the wrong
1060
// color
1061
caret-color: $primary;
1062
// FIXME: this should not be set at all, but otherwise it gets the wrong
1064
// color
1065
&:disabled {
1066
color: disabled($on-surface);
1067
}
1068
entry {
1070
@extend %entry_raised;
1071
min-height: $medium-size;
1073
min-width: $large-size;
1074
padding: 0;
1075
}
1076
button {
1078
min-height: $medium-size;
1079
min-width: $large-size;
1080
padding: 0;
1081
@extend %button-flat-basic;
1083
// Remove unwanted focus indicator
1085
&:focus:not(:hover):not(:active) {
1086
box-shadow: inset 0 0 0 9999px transparent;
1087
}
1088
&.up {
1090
border-radius: $corner-radius $corner-radius 0 0;
1091
}
1092
&.down {
1094
border-radius: 0 0 $corner-radius $corner-radius;
1095
}
1096
}
1097
}
1098
// OSD vertical
1100
.osd &.vertical {
1101
}
1102
// Misc
1104
treeview &:not(.vertical) {
1105
min-height: 0;
1106
border-style: none;
1107
border-radius: 0;
1108
entry {
1110
min-height: 0;
1111
padding: 1px 2px;
1112
}
1113
}
1114
}
1115
/**
1117
* ComboBoxes
1118
*/
1119
combobox {
1121
arrow {
1122
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1123
min-height: 16px;
1124
min-width: 16px;
1125
}
1126
// workaround for menuitem selection
1128
decoration {
1129
transition: none;
1130
}
1131
button.combo cellview {
1133
&:dir(ltr) {
1134
margin-left: 8px - ($medium-size - 16px) / 2;
1135
}
1136
&:dir(rtl) {
1138
margin-right: 8px - ($medium-size - 16px) / 2;
1139
}
1140
}
1141
menu {
1143
padding: 2px 0;
1144
menuitem {
1146
min-height: $medium-size - 2px * 2;
1147
padding: 0 8px;
1148
}
1149
// overflow arrows
1151
> arrow {
1152
&.top {
1153
margin-top: -2px;
1154
}
1155
&.bottom {
1157
margin-top: 2px * 2;
1158
margin-bottom: -2px * 3;
1159
}
1160
}
1161
}
1162
> .linked:not(.vertical) > entry:not(:only-child) {
1164
border-radius: $corner-radius $corner-radius 0 0;
1165
&:first-child {
1167
margin-right: -$medium-size;
1168
padding-right: $medium-size;
1169
}
1170
&:last-child {
1172
margin-left: -$medium-size;
1173
padding-left: $medium-size;
1174
}
1175
}
1176
> .linked:not(.vertical) > button:not(:only-child) {
1178
@extend %button-flat-activatable;
1179
// @extend %button-small;
1180
min-height: 16px;
1182
min-width: 16px;
1183
margin: ($medium-size - $small-size) / 2;
1184
padding: ($small-size - 16px) / 2;
1185
border-radius: $circular-radius;
1186
}
1187
}
1188
// the combo is a composite widget so the way we do button linking doesn't
1190
// work, special case needed. See
1191
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1192
.linked:not(.vertical) > combobox {
1194
&:not(:first-child) > box > button.combo {
1195
@extend %linked-not-first-child;
1196
}
1197
&:not(:last-child) > box > button.combo {
1199
@extend %linked-not-last-child;
1200
}
1201
}
1202
.linked.vertical > combobox {
1204
&:not(:first-child) > box > button.combo {
1205
@extend %linked-vertical-not-first-child;
1206
}
1207
&:not(:last-child) > box > button.combo {
1209
@extend %linked-vertical-not-last-child;
1210
}
1211
}
1212
button.combo:only-child {
1214
border-radius: $corner-radius $corner-radius 0 0;
1215
font-weight: normal;
1216
@include entry(normal);
1218
&:focus {
1220
@include entry(focus);
1221
}
1222
&:drop(active),
1224
&:hover {
1225
@include entry(hover);
1226
}
1227
&:checked {
1229
@include entry(checked);
1230
}
1231
&:disabled {
1233
@include entry(disabled);
1234
}
1235
arrow {
1237
transition: color $duration $ease-out;
1238
color: hint($on-surface);
1239
&:disabled {
1241
color: disabled-hint($on-surface);
1242
}
1243
}
1244
}
1245
/**
1247
* Toolbars
1248
*/
1249
toolbar {
1251
-GtkWidget-window-dragging: true;
1252
padding: 2px;
1253
button {
1255
@extend %button-flat;
1256
}
1257
// on OSD
1259
.osd & {
1260
}
1261
// stand-alone OSD toolbars
1263
&.osd {
1264
@extend %toolbar-osd;
1265
// positional classes for `attached` osd toolbars
1267
&.left,
1268
&.right,
1269
&.top,
1270
&.bottom {
1271
border-radius: 0;
1272
}
1273
&.bottom {
1275
box-shadow: none;
1276
background-color: transparent;
1277
background-image:
1278
linear-gradient(
1279
to bottom,
1280
transparent,
1281
rgba(black, .1) 30%,
1282
rgba(black, .2) 50%,
1283
rgba(black, .4)
1284
);
1285
}
1286
}
1287
// toolbar separators
1289
&.horizontal > separator {
1290
margin: 2px;
1291
}
1292
&.vertical > separator {
1294
margin: 2px;
1295
}
1296
&:not(.inline-toolbar):not(.osd) {
1298
scale,
1299
entry,
1300
spinbutton,
1301
button {
1302
margin: 2px;
1303
}
1304
.linked entry,
1306
.linked spinbutton,
1307
.linked button {
1308
&:not(:first-child) {
1309
margin-left: 0;
1310
}
1311
&:not(:last-child) {
1313
margin-right: 0;
1314
}
1315
}
1316
spinbutton {
1318
entry,
1319
button {
1320
margin: 0;
1321
}
1322
}
1323
switch {
1325
margin: 2px + $container-padding 2px;
1326
}
1327
}
1328
}
1329
%toolbar-osd {
1331
transition: $transition-shadow;
1332
padding: $container-padding;
1333
border-radius: $corner-radius;
1334
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1335
background-color: $surface;
1336
&:backdrop {
1338
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1339
}
1340
}
1341
// searchbar, location-bar & inline-toolbar
1343
.inline-toolbar {
1344
padding: $container-padding;
1345
border-style: solid;
1346
border-width: 0 1px 1px;
1347
border-color: divider($on-surface);
1348
background-color: $base;
1349
background-clip: padding-box;
1350
}
1351
searchbar > revealer > box,
1353
.location-bar {
1354
padding: $container-padding;
1355
border-style: solid;
1356
border-width: 0 0 1px;
1357
border-color: divider($on-surface);
1358
}
1359
searchbar > revealer > box {
1361
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1362
margin: -6px;
1363
padding: $container-padding;
1364
}
1365
/**
1367
* Header bars
1368
*/
1369
.titlebar {
1371
transition: background-color $duration $ease-out, color $duration $ease-out;
1372
border-radius: $corner-radius $corner-radius 0 0;
1373
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1374
background-color: $titlebar;
1375
color: $on-titlebar;
1376
&:disabled {
1378
color: disabled($on-titlebar);
1379
}
1380
&:backdrop {
1382
background-color: $titlebar-backdrop;
1383
color: hint($on-titlebar);
1384
&:disabled {
1386
color: disabled-hint($on-titlebar);
1387
}
1388
}
1389
.title {
1391
padding-left: 12px;
1392
padding-right: 12px;
1393
font-weight: bold;
1394
}
1395
.subtitle {
1397
padding-left: 12px;
1398
padding-right: 12px;
1399
font-size: smaller;
1400
}
1401
.subtitle,
1403
.dim-label {
1404
transition: color $duration $ease-out;
1405
color: hint($on-titlebar);
1406
&:backdrop {
1408
color: disabled($on-titlebar);
1409
}
1410
}
1411
// Don't draw titlebar above titlebar
1413
.titlebar {
1414
background-color: transparent;
1415
box-shadow: none;
1416
}
1417
// The separator for split headerbars
1419
headerbar + separator {
1420
background-color: divider($on-titlebar);
1421
}
1422
entry {
1424
box-shadow: inset 0 -1px stroke($on-titlebar);
1425
background-color: entry-fill($on-titlebar);
1426
color: $on-titlebar;
1427
&:disabled {
1429
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1430
background-color: entry-fill($on-titlebar);
1431
color: disabled($on-titlebar);
1432
}
1433
image {
1435
color: hint($on-titlebar);
1436
&:hover,
1438
&:active {
1439
color: $on-titlebar;
1440
}
1441
&:disabled {
1443
color: disabled($on-titlebar);
1444
}
1445
}
1446
}
1447
.linked:not(.vertical) > entry:not(:only-child) {
1449
border-radius: $corner-radius $corner-radius 0 0;
1450
}
1451
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1453
@extend %button-flat;
1454
border-image:
1456
radial-gradient(
1457
circle closest-corner at center calc(100% - 1px),
1458
$titlebar-indicator 0%,
1459
transparent 0%
1460
) 0 0 0 / 0 0 0;
1461
background-color: transparent;
1462
color: hint($on-titlebar);
1463
@include ink-color($on-titlebar);
1464
&:disabled {
1466
color: disabled-hint($on-titlebar);
1467
}
1468
@at-root %titlebar-button-checked,
1470
&:checked {
1471
border-image:
1472
radial-gradient(
1473
circle closest-corner at center calc(100% - 1px),
1474
$titlebar-indicator 100%,
1475
transparent 0%
1476
) 0 0 2 / 0 0 2px;
1477
background-color: transparent;
1478
color: $on-titlebar;
1479
@include ink-color($on-titlebar);
1480
&:disabled {
1482
background-color: transparent;
1483
color: disabled($on-titlebar);
1484
}
1485
}
1486
&:backdrop {
1488
color: disabled($on-titlebar);
1489
&:disabled {
1491
color: disabled-hint($on-titlebar);
1492
}
1493
&:checked {
1495
color: hint($on-titlebar);
1496
&:disabled {
1498
color: disabled-hint($on-titlebar);
1499
}
1500
}
1501
}
1502
}
1503
button.suggested-action, button.destructive-action {
1505
&:disabled {
1506
background-color: fill($on-titlebar);
1507
color: disabled($on-titlebar);
1508
}
1509
}
1510
// FIXME: Ugly overriding
1512
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1513
min-width: 120px - 8px * 2;
1514
}
1515
// FIXME: Ugly overriding
1517
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1518
min-width: 0;
1519
padding-left: ($medium-size - 24px) / 2;
1520
padding-right: ($medium-size - 24px) / 2;
1521
}
1522
&.selection-mode {
1524
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1525
// but let's keep it for backwards compatibility.
1526
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1527
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1528
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1529
background-color: $primary;
1530
color: $on-primary;
1531
&:backdrop {
1533
color: hint($on-primary);
1534
}
1535
.subtitle:link {
1537
color: $on-primary;
1538
}
1539
button:not(.suggested-action):not(.destructive-action) {
1541
border-image:
1542
radial-gradient(
1543
circle closest-corner at center calc(100% - 1px),
1544
currentcolor 0%,
1545
transparent 0%
1546
) 0 0 0 / 0 0 0;
1547
color: $on-primary;
1548
&:disabled {
1550
color: disabled($on-primary);
1551
}
1552
&:checked {
1554
border-image:
1555
radial-gradient(
1556
circle closest-corner at center calc(100% - 1px),
1557
currentcolor 100%,
1558
transparent 0%
1559
) 0 0 2 / 0 0 2px;
1560
color: $on-primary;
1561
&:disabled {
1563
color: disabled($on-primary);
1564
}
1565
}
1566
&:backdrop {
1568
color: hint($on-primary);
1569
&:disabled {
1571
color: disabled-hint($on-primary);
1572
}
1573
&:checked {
1575
color: hint($on-primary);
1576
&:disabled {
1578
color: disabled-hint($on-primary);
1579
}
1580
}
1581
}
1582
}
1583
.selection-menu {
1585
padding-left: 16px;
1586
padding-right: 16px;
1587
arrow {
1589
-GtkArrow-arrow-scaling: 1;
1590
}
1591
.arrow {
1593
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1594
}
1595
}
1596
}
1597
.selection-mode {
1599
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1600
background-color: $primary;
1601
}
1602
// squared corners when the window is maximized, tiled, or fullscreen
1604
.tiled &,
1605
.tiled-top &,
1606
.tiled-right &,
1607
.tiled-bottom &,
1608
.tiled-left &,
1609
.maximized &,
1610
.fullscreen & {
1611
border-radius: 0;
1612
box-shadow: $shadow-z1;
1613
}
1614
&.default-decoration {
1616
min-height: $small-size;
1617
padding: $container-padding;
1618
box-shadow: inset 0 1px highlight($titlebar);
1619
.tiled &,
1621
.maximized &,
1622
.fullscreen & {
1623
box-shadow: none;
1624
}
1625
button.titlebutton {
1627
min-height: $small-size;
1628
min-width: $small-size;
1629
margin: 0;
1630
padding: 0;
1631
}
1632
// workaround for non-animatable buttons
1634
.background:not(.csd) & button.titlebutton:active {
1635
background-size: 1000% 1000%;
1636
}
1637
}
1638
.solid-csd & {
1640
&:dir(rtl), &:dir(ltr) { // specificity bump
1641
border-radius: 0;
1642
box-shadow: $shadow-z1; // just remove the highlight
1643
}
1644
}
1645
}
1646
headerbar {
1648
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1649
min-height: $large-size;
1650
padding: 0 $container-padding;
1651
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1653
entry,
1654
spinbutton,
1655
button {
1656
margin-top: $container-padding;
1657
margin-bottom: $container-padding;
1658
}
1659
separator.titlebutton {
1661
margin-top: $large-size / 4;
1662
margin-bottom: $large-size / 4;
1663
background-color: divider($on-titlebar);
1664
}
1665
switch {
1667
margin-top: ($large-size - 24px) / 2;
1668
margin-bottom: ($large-size - 24px) / 2;
1669
}
1670
// reset button margins of the spinbutton
1672
spinbutton button {
1673
margin-top: 0;
1674
margin-bottom: 0;
1675
}
1676
// FIXME: This is a hacky workaround.
1678
.entry-tag {
1679
margin-top: 5px;
1680
margin-bottom: 5px;
1681
}
1682
}
1683
// Development versions of apps to use a differently styled headerbar
1685
window.devel .titlebar:not(.selection-mode) {
1686
}
1687
/**
1689
* Pathbars
1690
*/
1691
%pathbar_button,
1693
.path-bar.linked:not(.vertical) > button {
1694
@extend %button-flat-basic;
1695
padding-left: ($medium-size - 24px) / 2;
1697
padding-right: ($medium-size - 24px) / 2;
1698
border-image:
1699
radial-gradient(
1700
circle closest-corner at center calc(100% - 1px),
1701
$primary 0%,
1702
transparent 0%
1703
) 0 0 0 / 0 0 0;
1704
border-radius: $corner-radius;
1705
&:checked {
1707
border-image:
1708
radial-gradient(
1709
circle closest-corner at center calc(100% - 1px),
1710
$primary 100%,
1711
transparent 0%
1712
) 0 0 2 / 0 0 2px;
1713
color: $on-surface;
1714
&,
1716
&:disabled {
1717
background-color: transparent;
1718
}
1719
}
1720
label:not(:only-child) {
1722
&:first-child {
1723
margin-left: 0;
1724
}
1725
&:last-child {
1727
margin-right: 0;
1728
}
1729
}
1730
&.text-button {
1732
min-width: 0;
1733
}
1734
&.slider-button {
1736
padding-left: (24px - 16px) / 2;
1737
padding-right: (24px - 16px) / 2;
1738
}
1739
}
1740
/**
1742
* Tree Views
1743
*/
1744
treeview.view {
1746
@at-root * {
1747
-GtkTreeView-horizontal-separator: 4;
1748
-GtkTreeView-grid-line-width: 1;
1749
-GtkTreeView-grid-line-pattern: '';
1750
-GtkTreeView-tree-line-width: 1;
1751
-GtkTreeView-tree-line-pattern: '';
1752
-GtkTreeView-expander-size: 16;
1753
}
1754
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1756
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1757
// to avoid borders being overridden by the previously set props
1759
rubberband {
1760
@extend %rubberband;
1761
}
1762
&:hover,
1764
&:selected {
1765
border-radius: 0;
1766
}
1767
&.separator {
1769
min-height: 1px + 2px * 2;
1770
color: divider($on-surface);
1771
}
1772
&:drop(active) {
1774
// FIXME: box-shadow, background-color and background-image are not available here.
1775
border-style: solid none;
1776
border-width: 9999px;
1777
border-color: overlay("hover", $on-surface);
1778
&.after {
1780
border-top-style: none;
1781
}
1782
&.before {
1784
border-bottom-style: none;
1785
}
1786
}
1787
&.expander {
1789
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1790
-gtk-icon-transform: rotate(-90deg);
1791
&:dir(rtl) {
1793
-gtk-icon-transform: rotate(90deg);
1794
}
1795
&:checked {
1797
-gtk-icon-transform: unset;
1798
}
1799
color: hint($on-surface);
1801
&:hover,
1803
&:active {
1804
color: $on-surface;
1805
}
1806
&:disabled {
1808
color: disabled-hint($on-surface);
1809
}
1810
}
1811
&.progressbar { // progress bar in treeviews
1813
border-bottom: $bar-size solid $primary;
1814
box-shadow: none;
1815
background-color: transparent;
1816
background-image: none;
1817
&:selected:hover {
1819
box-shadow: none;
1820
}
1821
}
1822
&.trough { // progress bar trough in treeviews
1824
border-bottom: $bar-size solid disabled-stroke($on-surface);
1825
box-shadow: none;
1826
background-color: transparent;
1827
background-image: none;
1828
&:selected:hover {
1830
box-shadow: none;
1831
}
1832
}
1833
header {
1835
button {
1836
padding: 2px 6px;
1837
border-style: none solid solid none;
1838
border-width: 1px;
1839
border-color: divider($on-surface);
1840
border-radius: 0;
1841
background-clip: border-box;
1842
color: hint($on-surface);
1843
@include ink-color($on-surface, $hover-alt: true);
1844
@include list-item;
1845
&:disabled {
1847
color: disabled-hint($on-surface);
1848
}
1849
&,
1851
&:disabled {
1852
background-color: transparent;
1853
}
1854
&:last-child {
1856
border-right-style: none;
1857
}
1858
}
1859
}
1860
button.dnd,
1862
header.button.dnd { // for treeview-like derive widgets
1863
padding: 2px 6px;
1864
border-style: none solid solid;
1865
border-width: 1px;
1866
border-color: divider($on-surface);
1867
border-radius: 0;
1868
box-shadow: none;
1869
background-clip: border-box;
1870
background-color: $surface;
1871
color: $primary;
1872
}
1873
// see tests/testaccel to test
1875
acceleditor > label {
1876
background-color: $primary;
1877
}
1878
}
1879
/**
1881
* Menus
1882
*/
1883
menubar,
1885
.menubar {
1886
-GtkWidget-window-dragging: true;
1887
padding: 0;
1888
// box-shadow: inset 0 -1px divider($on-surface);
1889
background-color: $titlebar;
1890
color: $on-titlebar;
1891
&:backdrop {
1893
background-color: $titlebar-backdrop;
1894
color: hint($on-titlebar);
1895
}
1896
.csd & {
1898
transition: $transition;
1899
}
1900
> menuitem {
1902
transition: $transition;
1903
min-height: 20px;
1904
padding: 4px 8px;
1905
color: hint($on-titlebar);
1906
&:hover { // Seems like it :hover even with keyboard focus
1908
transition: none;
1909
background-color: overlay("activated", $on-titlebar);
1910
color: $on-titlebar;
1911
}
1912
&:disabled {
1914
color: disabled-hint($on-titlebar);
1915
}
1916
}
1917
}
1918
// Needed to make the border-radius of menus work
1920
// otherwise the background bleeds out of the menu edges
1921
.background.popup {
1922
background-color: transparent;
1923
}
1924
menu,
1926
.menu,
1927
.context-menu {
1928
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1929
padding: 4px 0;
1930
box-shadow: inset 0 1px highlight($surface);
1931
background-color: $surface;
1932
border: 1px solid divider($on-surface); // adds borders in a non composited env
1933
.csd & {
1935
border: none; // axes borders in a composited env
1936
border-radius: $corner-radius;
1937
}
1938
menuitem {
1940
transition: background-color $duration $ease-out;
1941
min-height: 20px;
1942
min-width: 40px;
1943
padding: 4px 8px;
1944
color: $on-surface;
1945
font: initial;
1946
text-shadow: none;
1947
&:hover {
1949
transition: none;
1950
background-color: overlay("hover", $on-surface);
1951
}
1952
&:disabled {
1954
color: disabled($on-surface);
1955
}
1956
// submenu indicators
1958
arrow {
1959
min-height: 16px;
1960
min-width: 16px;
1961
color: hint($on-surface);
1962
&:disabled {
1964
color: disabled-hint($on-surface);
1965
}
1966
&:dir(ltr) {
1968
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1969
margin-left: 8px;
1970
}
1971
&:dir(rtl) {
1973
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1974
margin-right: 8px;
1975
}
1976
}
1977
// avoids labels color being overridden, see
1979
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1980
label {
1981
&:dir(rtl),
1982
&:dir(ltr) {
1983
// color: inherit;
1984
}
1985
}
1986
}
1987
// overflow arrows
1989
> arrow {
1990
min-height: 16px;
1991
min-width: 16px;
1992
padding: 4px;
1993
background-color: $surface;
1994
color: hint($on-surface);
1995
&.top {
1997
margin-top: -4px;
1998
border-bottom: 1px solid divider($on-surface);
1999
border-radius: $corner-radius $corner-radius 0 0;
2000
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2001
}
2002
&.bottom {
2004
margin-top: 4px * 2;
2005
margin-bottom: -4px * 3;
2006
border-top: 1px solid divider($on-surface);
2007
border-radius: 0 0 $corner-radius $corner-radius;
2008
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2009
}
2010
&:hover {
2012
background-image: image(overlay("hover", $on-surface));
2013
}
2014
&:disabled {
2016
border-color: transparent;
2017
background-color: transparent;
2018
color: transparent;
2019
// color: disabled-hint($on-surface);
2020
}
2021
}
2022
separator {
2024
margin: 4px 0;
2025
}
2026
}
2027
menuitem {
2029
accelerator {
2030
color: hint($on-surface);
2031
}
2032
&:disabled accelerator {
2034
color: disabled-hint($on-surface);
2035
}
2036
}
2037
/**
2039
* Popovers
2040
*/
2041
popover.background {
2043
transition: $transition-shadow;
2044
padding: 2px;
2045
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2046
background-color: $surface;
2047
&:backdrop {
2049
box-shadow: $shadow-z2;
2050
}
2051
&, .csd & {
2053
border-style: solid;
2054
border-width: 1px;
2055
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2056
border-radius: $corner-radius + 1px;
2057
background-clip: padding-box;
2058
}
2059
> stack {
2061
margin: -4px; // remove extra padding from menu style popovers
2062
}
2063
> toolbar {
2065
margin: -2px;
2066
}
2067
> list,
2069
> .view,
2070
> toolbar {
2071
border-style: none;
2072
box-shadow: none;
2073
background-color: transparent;
2074
}
2075
&.touch-selection,
2077
&.magnifier,
2078
&.osd {
2079
// @extend %osd;
2080
}
2081
button:not(.suggested-action):not(.destructive-action) {
2083
// @extend %button-flat;
2084
}
2085
.linked:not(.vertical) > entry:not(:only-child) {
2087
// border-radius: $corner-radius $corner-radius 0 0;
2088
}
2089
&.menu button,
2091
button.model {
2092
@extend %button-flat;
2093
min-height: 32px;
2095
padding: 0 8px;
2096
border-radius: $corner-radius;
2097
&:checked {
2099
// color: $primary;
2100
}
2101
}
2102
separator {
2104
margin: 4px 0;
2105
}
2106
list separator {
2108
margin: 0;
2109
}
2110
}
2111
/**
2113
* Notebooks
2114
*/
2115
notebook {
2117
&:focus > header > tabs > tab:checked {
2118
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2119
}
2120
> header {
2122
border-width: 1px;
2123
border-color: divider($on-surface);
2124
&.top {
2126
border-bottom-style: solid;
2127
> tabs {
2129
margin-bottom: -1px;
2130
> tab {
2132
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2133
&:checked {
2135
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2136
}
2137
&.reorderable-page {
2139
border-image-width: 0 1px 2px;
2140
}
2141
}
2142
}
2143
}
2144
&.bottom {
2146
border-top-style: solid;
2147
> tabs {
2149
margin-top: -1px;
2150
> tab {
2152
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2153
&:checked {
2155
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2156
}
2157
&.reorderable-page {
2159
border-image-width: 2px 1px 0;
2160
}
2161
}
2162
}
2163
}
2164
&.left {
2166
border-right-style: solid;
2167
> tabs {
2169
margin-right: -1px;
2170
> tab {
2172
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2173
&:checked {
2175
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2176
}
2177
&.reorderable-page {
2179
border-image-width: 1px 2px 1px 0;
2180
}
2181
}
2182
}
2183
}
2184
&.right {
2186
border-left-style: solid;
2187
> tabs {
2189
margin-left: -1px;
2190
> tab {
2192
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2193
&:checked {
2195
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2196
}
2197
&.reorderable-page {
2199
border-image-width: 1px 0 1px 2px;
2200
}
2201
}
2202
}
2203
}
2204
&.top > tabs > arrow {
2206
@extend %notebook_vert_arrows;
2207
border-top-style: none;
2209
}
2210
&.bottom > tabs > arrow {
2212
@extend %notebook_vert_arrows;
2213
border-bottom-style: none;
2215
}
2216
@at-root %notebook_vert_arrows {
2218
padding-left: 4px;
2219
padding-right: 4px;
2220
&.down {
2222
margin-left: -8px;
2223
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2224
}
2225
&.up {
2227
margin-right: -8px;
2228
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2229
}
2230
}
2231
&.left > tabs > arrow {
2233
@extend %notebook_horz_arrows;
2234
border-left-style: none;
2236
}
2237
&.right > tabs > arrow {
2239
@extend %notebook_horz_arrows;
2240
border-right-style: none;
2242
}
2243
@at-root %notebook_horz_arrows {
2245
padding-top: 4px;
2246
padding-bottom: 4px;
2247
&.down {
2249
margin-top: -8px;
2250
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2251
}
2252
&.up {
2254
margin-bottom: -8px;
2255
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2256
}
2257
}
2258
> tabs > arrow {
2260
min-height: 16px;
2261
min-width: 16px;
2262
border-radius: 0;
2263
color: hint($on-surface);
2264
@extend %ripple;
2265
@include ink-color($on-surface, $hover-alt: true);
2266
&:disabled {
2268
color: disabled-hint($on-surface);
2269
}
2270
}
2271
tab {
2273
transition: $transition,
2274
background-size 0ms,
2275
background-image 0ms;
2276
min-height: $small-size;
2277
min-width: $small-size;
2278
padding: $container-padding 12px;
2279
border-width: 1px; // for reorderable tabs
2281
border-color: transparent; //
2282
outline: none;
2284
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2285
background-repeat: no-repeat;
2286
background-position: center;
2287
background-size: 0% 0%;
2288
color: hint($on-surface);
2290
font-weight: 500;
2291
&:hover {
2293
background-color: overlay("hover-alt", $on-surface);
2294
}
2295
&:disabled {
2297
color: disabled-hint($on-surface);
2298
}
2299
&:checked {
2301
transition: $transition,
2302
background-size $ripple-fade-in-duration $ease-out,
2303
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2304
background-color: transparent;
2305
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2306
background-size: 1000% 1000%;
2307
background-clip: padding-box;
2308
color: $on-surface;
2309
&:disabled {
2311
color: disabled($on-surface);
2312
}
2313
&.reorderable-page {
2315
border-color: divider($on-surface);
2316
background-color: $base;
2317
}
2318
}
2319
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2321
> box {
2322
transition: background-color $duration $ease-out;
2323
margin: -$container-padding -12px;
2324
padding: $container-padding 12px;
2325
&:drop(active) {
2327
background-color: overlay("hover", $on-surface);
2328
}
2329
}
2330
// colors the button like the label, overridden otherwise
2332
button.flat {
2333
@extend %button-small;
2334
&:last-child {
2336
margin-left: $container-padding;
2337
margin-right: $container-padding - 12px;
2338
}
2339
&:first-child {
2341
margin-left: $container-padding - 12px;
2342
margin-right: $container-padding;
2343
}
2344
}
2345
}
2346
&.top,
2348
&.bottom {
2349
tabs {
2350
padding-left: 8px;
2351
padding-right: 8px;
2352
&:not(:only-child) {
2354
&:first-child {
2355
margin-left: 0;
2356
}
2357
&:last-child {
2359
margin-right: 0;
2360
}
2361
}
2362
tab.reorderable-page {
2364
border-style: none solid;
2365
}
2366
}
2367
}
2368
&.left,
2370
&.right {
2371
tabs {
2372
padding-top: 8px;
2373
padding-bottom: 8px;
2374
&:not(:only-child) {
2376
&:first-child {
2377
margin-top: 0;
2378
}
2379
&:last-child {
2381
margin-bottom: 0;
2382
}
2383
}
2384
tab.reorderable-page {
2386
border-style: solid none;
2387
}
2388
}
2389
}
2390
}
2391
}
2392
/**
2394
* Scrollbars
2395
*/
2396
scrollbar {
2398
$_slider_min_length: 24px;
2399
// disable steppers
2401
@at-root * {
2402
-GtkScrollbar-has-backward-stepper: false;
2403
-GtkScrollbar-has-forward-stepper: false;
2404
}
2405
transition: $transition;
2407
// background-color: $background;
2408
background-clip: padding-box;
2409
// scrollbar border
2411
&.top { border-bottom: 1px solid divider($on-surface); }
2412
&.bottom { border-top: 1px solid divider($on-surface); }
2413
&.left { border-right: 1px solid divider($on-surface); }
2414
&.right { border-left: 1px solid divider($on-surface); }
2415
// slider
2417
slider {
2418
transition: background-color $duration $ease-out;
2419
min-width: 8px;
2420
min-height: 8px;
2421
border: 4px solid transparent;
2422
border-radius: $circular-radius;
2423
background-clip: padding-box;
2424
background-color: disabled($on-surface);
2425
&:hover {
2427
background-color: hint($on-surface);
2428
}
2429
&:active {
2431
background-color: $on-surface;
2432
}
2433
&:disabled {
2435
background-color: disabled-hint($on-surface);
2436
}
2437
}
2438
&.fine-tune {
2440
slider {
2441
min-width: 4px;
2442
min-height: 4px;
2443
}
2444
&.horizontal slider {
2446
margin: 2px 0;
2447
}
2448
&.vertical slider {
2450
margin: 0 2px;
2451
}
2452
}
2453
&.overlay-indicator {
2455
&:not(.fine-tune) slider {
2456
transition-property: background-color, min-height, min-width;
2457
}
2458
&:not(.dragging):not(.hovering) {
2460
border-color: transparent;
2461
background-color: transparent;
2462
slider {
2464
min-width: 4px;
2465
min-height: 4px;
2466
margin: 4px - 1px;
2467
border: 1px solid rgba($base, .3);
2468
}
2469
button {
2471
min-width: 4px;
2472
min-height: 4px;
2473
margin: 4px - 1px;
2474
border: 1px solid rgba($base, .3);
2475
border-radius: $circular-radius;
2476
background-color: disabled($on-surface);
2477
background-clip: padding-box;
2478
-gtk-icon-source: none;
2479
&:disabled {
2481
background-color: disabled-hint($on-surface);
2482
}
2483
}
2484
&.horizontal {
2486
slider {
2487
min-width: $_slider_min_length;
2488
}
2489
button {
2491
min-width: 8px;
2492
}
2493
}
2494
&.vertical {
2496
slider {
2497
min-height: $_slider_min_length;
2498
}
2499
button {
2501
min-height: 8px;
2502
}
2503
}
2504
}
2505
&.dragging,
2507
&.hovering {
2508
background-color: $surface;
2509
}
2510
}
2511
&.horizontal slider {
2513
min-width: $_slider_min_length;
2514
}
2515
&.vertical slider {
2517
min-height: $_slider_min_length;
2518
}
2519
// button styling
2521
button {
2522
@extend %button-flat-basic;
2523
min-width: 16px;
2525
min-height: 16px;
2526
padding: 0;
2527
border-radius: 0;
2528
}
2529
// button icons
2531
&.vertical {
2532
button {
2533
&.down {
2534
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2535
}
2536
&.up {
2538
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2539
}
2540
}
2541
}
2542
&.horizontal {
2544
button {
2545
&.down {
2546
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2547
}
2548
&.up {
2550
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2551
}
2552
}
2553
}
2554
}
2555
/**
2558
* Switch
2559
*/
2560
switch {
2562
transition: all $duration $ease-out;
2563
margin: $container-padding 0;
2564
padding: 0 2px;
2565
border: 5px solid transparent;
2566
border-radius: $circular-radius;
2567
background-color: stroke($on-surface);
2568
background-clip: padding-box;
2569
font-size: 0;
2570
&:checked {
2572
background-color: rgba($primary, .5);
2573
}
2574
&:disabled {
2576
opacity: .5;
2577
}
2578
// hide on/off icons for >=3.24.5
2580
image {
2581
margin: -8px;
2582
-gtk-icon-transform: scale(0);
2583
}
2584
slider {
2586
transition: all $duration $ease-out;
2587
min-width: 20px;
2588
min-height: 20px;
2589
margin: -3px -2px;
2590
border-radius: $circular-radius;
2591
outline: none;
2592
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2593
background-color: $switch-surface;
2594
}
2595
&:hover slider {
2597
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2598
}
2599
&:focus slider {
2601
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2602
}
2603
&:checked slider {
2605
background-color: $primary;
2606
}
2607
&:checked:hover slider {
2609
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2610
}
2611
&:checked:focus slider {
2613
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2614
}
2615
row:selected & {
2617
}
2618
}
2619
/**
2621
* Check and Radio items
2622
*/
2623
// draw regular check and radio items using our PNG assets
2625
// all assets are rendered from assets.svg. never add pngs directly
2626
// selection-mode
2628
.view.content-view.check:not(list),
2629
.content-view:not(list) check {
2630
min-height: 40px;
2631
min-width: 40px;
2632
margin: 0;
2633
padding: 0;
2634
box-shadow: none;
2635
background-color: transparent;
2636
background-image: none;
2637
-gtk-icon-shadow: $icon-shadow-z2;
2638
&:hover,
2640
&:active {
2641
-gtk-icon-shadow: $icon-shadow-z4;
2642
}
2643
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2645
&#{$class} {
2646
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2647
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2649
}
2650
}
2651
}
2652
checkbutton,
2654
radiobutton {
2655
outline: none;
2656
}
2657
checkbutton.text-button,
2659
radiobutton.text-button {
2660
// this is for a nice focus on check and radios text
2661
padding: 2px;
2662
label:not(:only-child) {
2664
margin: 0 4px;
2665
}
2666
}
2667
$check-radio-size: 40px;
2669
check,
2671
radio {
2672
min-height: 24px;
2673
min-width: 24px;
2674
margin: -($check-radio-size - 24px) / 2;
2675
padding: ($check-radio-size - 24px) / 2;
2676
border-radius: $circular-radius;
2677
color: hint($on-surface);
2678
@extend %ripple;
2679
@include ink-color($on-surface);
2680
&:checked,
2682
&:indeterminate {
2683
color: $primary;
2684
@include ink-color($primary);
2685
}
2686
&:disabled {
2688
color: disabled-hint($on-surface);
2689
}
2690
&:only-child {
2692
// margin: -12px;
2693
}
2694
popover modelbutton.flat & {
2696
&,
2697
&:focus,
2698
&:hover,
2699
&:focus:hover,
2700
&:active,
2701
&:disabled {
2702
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2703
box-shadow: none;
2704
background-image: none;
2705
}
2706
&.left:dir(rtl) {
2708
margin-left: -12px;
2709
margin-right: -4px;
2710
}
2711
&.right:dir(ltr) {
2713
margin-left: -4px;
2714
margin-right: -12px;
2715
}
2716
}
2717
menu menuitem & {
2719
transition: none;
2720
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2721
padding: 0;
2722
&:dir(ltr) {
2724
margin-right: 8px;
2725
}
2726
&:dir(rtl) {
2728
margin-left: 8px;
2729
}
2730
&,
2732
&:hover,
2733
&:disabled {
2734
box-shadow: none;
2735
}
2736
}
2737
}
2738
%check,
2740
check {
2741
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2742
&:checked {
2744
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2745
}
2746
&:indeterminate {
2748
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2749
}
2750
}
2751
%radio,
2753
radio {
2754
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2755
&:checked {
2757
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2758
}
2759
&:indeterminate {
2761
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2762
}
2763
border-image-slice: $check-radio-size / 2px;
2765
border-image-width: $check-radio-size / 2;
2766
$radio-indicator-size: 10px / $check-radio-size / 2;
2768
border-image-source:
2770
-gtk-gradient(
2771
radial,
2772
center center, 0,
2773
center center, .001,
2774
to($primary),
2775
to(transparent)
2776
);
2777
&:checked:not(:indeterminate) {
2779
border-image-source:
2780
-gtk-gradient(
2781
radial,
2782
center center, 0,
2783
center center, $radio-indicator-size,
2784
to($primary),
2785
to(transparent)
2786
);
2787
&:disabled {
2789
border-image-source:
2790
-gtk-gradient(
2791
radial,
2792
center center, 0,
2793
center center, $radio-indicator-size,
2794
to(disabled-hint($on-surface)),
2795
to(transparent)
2796
);
2797
}
2798
}
2799
}
2800
%small_check,
2802
menu menuitem check {
2803
min-height: 16px;
2804
min-width: 16px;
2805
border-radius: $corner-radius;
2806
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2807
&:checked {
2809
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2810
}
2811
&:indeterminate {
2813
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2814
}
2815
}
2816
%small_radio,
2818
menu menuitem radio {
2819
min-height: 16px;
2820
min-width: 16px;
2821
border-image: none;
2822
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2823
&:checked {
2825
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2826
}
2827
&:indeterminate {
2829
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2830
}
2831
}
2832
// ANIMATION:
2834
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2835
// the transformation is set on the active state and it get reset on the checked state.
2836
radio:not(:checked):active {
2837
// -gtk-icon-transform: scale(0);
2838
}
2839
// Otherwise, treeview.view styling will be applied...
2841
treeview.view check,
2842
treeview.view radio {
2843
padding: 0;
2844
color: hint($on-surface);
2845
&:checked,
2847
&:indeterminate {
2848
color: $primary;
2849
}
2850
&:disabled {
2852
color: disabled-hint($on-surface);
2853
}
2854
&,
2856
&:hover,
2857
&:selected,
2858
&:selected:hover {
2859
box-shadow: none;
2860
background-color: transparent;
2861
}
2862
}
2863
treeview.view radio:checked {
2865
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2866
border-image: none;
2867
}
2868
/**
2870
* GtkScale
2871
*/
2872
scale {
2874
// sizing
2875
$_marks_length: 8px;
2876
$_marks_distance: 7px;
2877
$trough_size: 2px;
2879
$finetune_trough_size: 4px;
2880
$slider_size: 32px;
2882
$slider_margin: -($slider_size - $trough_size) / 2;
2884
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2885
$color_slider_margin: -($slider_size) * 3 / 4;
2887
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2888
min-height: $trough_size;
2890
min-width: $trough_size;
2891
&.horizontal {
2893
padding: ($medium-size - $trough_size) / 2 12px;
2894
}
2895
&.vertical {
2897
padding: 12px ($medium-size - $trough_size) / 2;
2898
}
2899
// the slider is inside the trough, so to have make it bigger there's a negative margin
2901
slider {
2902
min-height: $slider_size;
2903
min-width: $slider_size;
2904
margin: $slider_margin;
2905
}
2906
// click-and-hold the slider to activate
2908
&.fine-tune {
2909
&.horizontal {
2910
min-height: $finetune_trough_size;
2911
padding-top: ($medium-size - $finetune_trough_size) / 2;
2912
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2913
}
2914
&.vertical {
2916
min-width: $finetune_trough_size;
2917
padding-left: ($medium-size - $finetune_trough_size) / 2;
2918
padding-right: ($medium-size - $finetune_trough_size) / 2;
2919
}
2920
// to make the trough grow in fine-tune mode
2922
slider {
2923
margin: $finetune_slider_margin;
2924
}
2925
}
2926
// the backing bit
2928
trough {
2929
transition: background-color $duration $ease-out;
2930
outline: none;
2931
background-color: stroke($on-surface);
2932
&:disabled {
2934
background-color: disabled-stroke($on-surface);
2935
}
2936
}
2937
// the colored part of the backing bit
2939
highlight {
2940
transition: background-image $duration $ease-out;
2941
background-image: image($primary);
2942
&:disabled {
2944
background-color: $background;
2945
background-image: image(disabled-hint($on-surface));
2946
}
2947
}
2948
// this is another differently styled part of the backing bit, the most relevant use case is for example
2950
// in media player to indicate how much video stream as been cached
2951
fill {
2952
transition: background-color $duration $ease-out;
2953
background-color: stroke($on-surface);
2954
&:disabled {
2956
background-color: transparent;
2957
}
2958
}
2959
slider {
2961
transition: background-color $duration $ease-out,
2962
background-size $ripple-fade-out-duration $ease-out,
2963
background-image $ripple-fade-out-opacity-duration $ease-out;
2964
background-repeat: no-repeat;
2965
background-position: center;
2966
background-size: auto, 1000% 1000%;
2967
border-radius: 50%;
2968
color: $primary;
2969
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2971
&#{$class} {
2972
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2973
background-image:
2975
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2976
radial-gradient(circle, transparent 10%, transparent 0%);
2977
}
2978
}
2979
&:hover {
2981
background-color: overlay("hover", $primary);
2982
}
2983
&:focus {
2985
background-color: overlay("focus", $primary);
2986
}
2987
&:active {
2989
$_url: 'assets/scale-slider#{$asset-suffix}';
2990
transition: background-color $duration $ease-out,
2992
background-size 0ms,
2993
background-image 0ms;
2994
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2995
background-image:
2996
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2997
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
2998
background-size: auto, 0% 0%;
2999
}
3000
}
3001
marks,
3003
value {
3004
color: hint($on-surface);
3005
}
3006
indicator {
3008
background-color: stroke($on-surface);
3009
color: transparent;
3010
}
3011
//marks margins
3013
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3014
(horizontal, bottom, bottom, top),
3015
(vertical, top, left, right),
3016
(vertical, bottom, right, left) {
3017
&.#{$scale_orient} marks {
3018
&.#{$marks_class} {
3019
margin-#{$marks_margin}: $_marks_distance;
3020
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3021
}
3022
}
3023
&.#{$scale_orient}.fine-tune marks {
3025
&.#{$marks_class} {
3026
margin-#{$marks_margin}: $_marks_distance - 1px;
3027
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3028
}
3029
}
3030
}
3031
&.horizontal {
3033
indicator {
3034
min-height: $_marks_length;
3035
min-width: 1px;
3036
}
3037
}
3038
&.vertical {
3040
indicator {
3041
min-height: 1px;
3042
min-width: $_marks_length;
3043
}
3044
}
3045
// *WARNING* scale with marks madness following
3047
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3049
@each $marks_class, $marks_infix in (
3050
".marks-before:not(.marks-after)": "-marks-before",
3051
".marks-after:not(.marks-before)": "-marks-after"
3052
) {
3053
&#{$dir_class}#{$marks_class} {
3054
slider {
3055
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3056
&#{$state_class} {
3057
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3058
background-image:
3060
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3061
radial-gradient(circle, transparent 10%, transparent 0%);
3062
}
3063
}
3064
&:active {
3066
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3067
background-image:
3069
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3070
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3071
}
3072
}
3073
}
3074
}
3075
}
3076
&.color {
3078
min-height: 0;
3079
min-width: 0;
3080
&.horizontal {
3082
padding: 0 0 12px 0;
3083
slider {
3085
&:dir(ltr), &:dir(rtl) { // specificity bump
3086
margin-bottom: $color_slider_margin;
3087
margin-top: $color_marks_slider_margin;
3088
}
3089
}
3090
}
3091
&.vertical {
3093
&:dir(ltr) {
3094
padding: 0 0 0 12px;
3095
slider {
3097
margin-left: $color_slider_margin;
3098
margin-right: $color_marks_slider_margin;
3099
}
3100
}
3101
&:dir(rtl) {
3103
padding: 0 12px 0 0;
3104
slider {
3106
margin-right: $color_slider_margin;
3107
margin-left: $color_marks_slider_margin;
3108
}
3109
}
3110
}
3111
}
3112
}
3113
/**
3115
* Progress bars
3116
*/
3117
progressbar {
3119
// sizing
3120
&.horizontal {
3121
trough,
3122
progress {
3123
min-height: $bar-size;
3124
}
3125
}
3126
&.vertical {
3128
trough,
3129
progress {
3130
min-width: $bar-size;
3131
}
3132
}
3133
// FIXME: insensitive state missing and some other state should be set probably
3135
color: hint($on-surface);
3136
font-size: smaller;
3137
trough {
3139
background-color: disabled-stroke($on-surface);
3140
}
3141
progress {
3143
background-color: $primary;
3144
}
3145
&.osd { // progressbar.osd used for epiphany page loading progress
3147
// min-width: $bar-size;
3148
// min-height: $bar-size;
3149
// background-color: transparent;
3150
trough {
3152
// background-color: transparent;
3153
}
3154
progress {
3156
// background-color: $primary;
3157
}
3158
}
3159
// makes the progress indicator disappear, when the fraction is 0
3161
trough.empty progress {
3162
all: unset;
3163
}
3164
}
3165
/**
3167
* Level Bar
3168
*/
3169
levelbar {
3171
&.horizontal {
3172
block {
3173
min-height: $bar-size;
3174
}
3175
&.discrete block {
3177
min-width: $medium-size;
3178
&:not(:last-child) {
3180
margin-right: 2px;
3181
}
3182
}
3183
}
3184
&.vertical {
3186
block {
3187
min-width: $bar-size;
3188
}
3189
&.discrete block {
3191
min-height: $medium-size;
3192
&:not(:last-child) {
3194
margin-bottom: 2px;
3195
}
3196
}
3197
}
3198
trough {
3200
}
3201
block {
3203
&.low {
3204
background-color: $warning;
3205
}
3206
&.high,
3208
&:not(.empty) {
3209
background-color: $primary;
3210
}
3211
&.full {
3213
background-color: $success;
3214
}
3215
&.empty {
3217
background-color: disabled-stroke($on-surface);
3218
}
3219
}
3220
}
3221
/**
3223
* Print dialog
3224
*/
3225
printdialog {
3227
paper {
3228
padding: 0;
3229
border: 1px solid divider($on-surface);
3230
background-clip: padding-box;
3231
background-color: $base;
3232
color: $on-surface;
3233
}
3234
.dialog-action-box {
3236
margin: 12px;
3237
}
3238
}
3239
/**
3241
* Frames
3242
*/
3243
frame > border,
3245
.frame {
3246
margin: 0;
3247
padding: 0;
3248
border: 1px solid divider($on-surface);
3249
border-radius: 0;
3250
box-shadow: none;
3251
background-clip: padding-box;
3252
background-color: $base;
3253
&.flat {
3255
border-style: none;
3256
background-color: transparent;
3257
}
3258
}
3259
// for backward compatibility
3261
frame.flat > border {
3262
border-style: none;
3263
background-color: transparent;
3264
}
3265
actionbar > revealer > box {
3267
padding: $container-padding;
3268
border-top: 1px solid divider($on-surface);
3269
// background-color: $base;
3270
button:not(.suggested-action):not(.destructive-action) {
3272
@extend %button-flat;
3273
}
3274
.linked:not(.vertical) > entry:not(:only-child) {
3276
border-radius: $corner-radius $corner-radius 0 0;
3277
}
3278
}
3279
scrolledwindow {
3281
viewport.frame { // avoid double borders when viewport inside scrolled window
3282
border-style: none;
3283
background-color: transparent;
3284
}
3285
// This is used when content is touch-dragged past boundaries.
3287
// draws a box on top of the content, the size changes programmatically.
3288
@at-root overshoot {
3289
&.top { @include overshoot(top); }
3290
&.bottom { @include overshoot(bottom); }
3292
&.left { @include overshoot(left); }
3294
&.right { @include overshoot(right); }
3296
}
3297
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3299
@at-root undershoot {
3300
// &.top { @include undershoot(top); }
3301
// &.bottom { @include undershoot(bottom); }
3303
// &.left { @include undershoot(left); }
3305
// &.right { @include undershoot(right); }
3307
}
3308
@at-root junction { // the small square between two scrollbars
3310
border-style: solid none none solid;
3311
border-width: 1px;
3312
border-color: divider($on-surface);
3313
// background-color: $background;
3314
&:dir(rtl) {
3316
border-style: solid solid none none;
3317
}
3318
}
3319
}
3320
// vbox and hbox separators
3322
separator {
3323
min-width: 1px;
3324
min-height: 1px;
3325
background-color: divider($on-surface);
3326
}
3327
%hide_separators {
3329
min-width: 0;
3330
min-height: 0;
3331
background-color: transparent;
3332
}
3333
/**
3335
* Lists
3336
*/
3337
list {
3339
border-color: divider($on-surface);
3340
// background-color: $base;
3341
row {
3343
padding: 2px;
3344
}
3345
}
3346
row {
3348
background-clip: padding-box;
3349
&.activatable {
3351
@extend %ripple;
3352
@include ink-color($on-surface, $hover-alt: true);
3353
@include list-item;
3354
// this is for indicathing which row generated a popover
3356
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3357
&.has-open-popup {
3358
background-color: overlay("activated", $on-surface);
3359
}
3360
}
3361
&:selected {
3363
background-color: $overlay-selected;
3364
@include ink-color($primary, $hover-alt: true);
3366
&.has-open-popup {
3368
background-color: overlay("activated", $primary, $background: $overlay-selected);
3369
}
3370
}
3371
}
3372
/**
3374
* App Notifications
3375
*/
3376
.app-notification {
3378
@extend %toolbar-osd;
3379
margin: 8px;
3380
button {
3382
@extend %button-flat;
3383
&.text-button:not(:disabled) {
3385
color: $primary;
3386
@include ink-color($primary);
3387
}
3388
}
3389
&.frame {
3391
border-style: none;
3392
}
3393
border {
3395
border-style: none;
3396
background-color: transparent;
3397
}
3398
}
3399
/**
3401
* Expanders
3402
*/
3403
expander {
3405
title > arrow {
3406
transition: all $duration $ease-out;
3407
min-width: 16px;
3408
min-height: 16px;
3409
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3410
-gtk-icon-transform: rotate(-90deg);
3411
&:dir(rtl) {
3413
-gtk-icon-transform: rotate(90deg);
3414
}
3415
&:checked {
3417
-gtk-icon-transform: unset;
3418
}
3419
color: hint($on-surface);
3421
&:hover,
3423
&:active {
3424
color: $on-surface;
3425
}
3426
&:disabled {
3428
color: disabled-hint($on-surface);
3429
}
3430
}
3431
}
3432
/**
3434
* Calendar
3435
*/
3436
calendar {
3438
padding: 1px;
3439
border: 1px solid divider($on-surface);
3440
background-clip: padding-box;
3441
background-color: $base;
3442
color: $on-surface;
3443
&:disabled {
3445
color: disabled($on-surface);
3446
}
3447
&:selected {
3449
border-radius: $corner-radius + 1px;
3450
background-color: $overlay-selected;
3451
}
3452
&.header {
3454
border-style: none none solid;
3455
border-color: divider($on-surface);
3456
border-radius: 0;
3457
}
3458
&.button {
3460
border-radius: $corner-radius + 1px;
3461
color: hint($on-surface);
3462
&:hover {
3464
background-image: image(overlay("hover", $on-surface));
3465
}
3466
&:disabled {
3468
color: disabled-hint($on-surface);
3469
}
3470
}
3471
&.highlight {
3473
color: hint($on-surface);
3474
font-weight: 500;
3475
}
3476
&:indeterminate {
3478
color: disabled-hint($on-surface);
3479
}
3480
}
3481
/**
3483
* Dialogs
3484
*/
3485
// Message Dialog styling
3487
messagedialog {
3488
&.background {
3489
background-color: $surface;
3490
}
3491
.titlebar {
3493
min-height: $small-size;
3494
border-style: none;
3495
box-shadow: inset 0 1px highlight($surface);
3496
background-color: $surface;
3497
color: $on-surface;
3498
&:backdrop {
3500
background-color: $surface;
3501
color: hint($on-surface);
3502
}
3503
}
3504
&.csd { // rounded bottom border styling for csd version
3506
&.background {
3507
// bigger radius for better antialiasing
3508
border-bottom-left-radius: $corner-radius;
3509
border-bottom-right-radius: $corner-radius;
3510
}
3511
}
3512
// Hint text
3514
box.vertical > label + label {
3515
color: hint($on-surface);
3516
}
3517
.dialog-action-box {
3519
margin-top: -$container-padding;
3520
// padding: $container-padding;
3521
button {
3523
@extend %button-flat;
3524
&:not(:last-child) {
3526
margin-right: $container-padding;
3527
}
3528
&:not(:disabled) {
3530
color: $primary;
3531
@include ink-color($primary);
3532
}
3533
&.suggested-action:not(:disabled) {
3535
background-color: transparent;
3536
// color: $primary;
3537
// @include ink-color($primary);
3538
}
3539
&.destructive-action:not(:disabled) {
3541
background-color: transparent;
3542
color: $error;
3543
@include ink-color($error);
3544
}
3545
}
3546
}
3547
}
3548
filechooser {
3550
.dialog-action-box {
3551
border-top: 1px solid divider($on-surface);
3552
}
3553
#pathbarbox {
3555
border-bottom: 1px solid divider($on-surface);
3556
// background-color: $background;
3557
// The new folder button
3559
> stack > box > button {
3560
@extend %button-flat;
3561
border-radius: $circular-radius;
3563
}
3564
}
3565
}
3566
filechooserbutton:drop(active) {
3568
// box-shadow: none;
3569
}
3570
/**
3572
* Sidebar
3573
*/
3574
.sidebar {
3576
border-style: none;
3577
background-color: transparent;
3578
&:not(separator) {
3580
@at-root %sidebar_left,
3581
&:dir(ltr),
3582
&.left,
3583
&.left:dir(rtl) {
3584
border-right: 1px solid divider($on-surface);
3585
border-left-style: none;
3586
}
3587
@at-root %sidebar_right,
3589
&:dir(rtl),
3590
&.right {
3591
border-left: 1px solid divider($on-surface);
3592
border-right-style: none;
3593
}
3594
}
3595
list {
3597
// background-color: transparent;
3598
}
3599
paned & {
3601
&,
3602
&.left,
3603
&.right,
3604
&.left:dir(rtl),
3605
&:dir(rtl),
3606
&:dir(ltr) {
3607
border-style: none;
3608
}
3609
}
3610
}
3611
stacksidebar.sidebar {
3613
& {
3614
&:dir(ltr),
3615
&.left,
3616
&.left:dir(rtl) {
3617
list {
3618
@extend %sidebar_left;
3619
}
3620
}
3621
&:dir(rtl),
3623
&.right {
3624
list {
3625
@extend %sidebar_right;
3626
}
3627
}
3628
}
3629
+ separator.vertical,
3631
separator.horizontal {
3632
@extend %hide_separators;
3633
}
3634
list {
3636
padding: 4px;
3637
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3638
}
3639
row {
3641
min-height: 32px;
3642
padding: 0 8px - 6px;
3643
border-radius: $corner-radius;
3644
&:selected {
3646
background-color: overlay("activated", $primary);
3647
color: $primary;
3648
font-weight: 500;
3649
@include ink-color($primary, $hover-alt: true);
3650
}
3651
+ row {
3653
margin-top: 4px;
3654
}
3655
> label {
3657
padding-left: 6px;
3658
padding-right: 6px;
3659
}
3660
&.needs-attention > label {
3662
@extend %needs-attention;
3663
}
3664
}
3665
}
3666
separator.sidebar {
3668
background-color: divider($on-surface);
3669
&.selection-mode,
3671
.selection-mode & {
3672
// background-color: divider($on-primary);
3673
}
3674
}
3675
/**
3677
* File chooser
3678
*/
3679
// dim the sidebar icons, see bug #786613 for details on this oddity
3681
row image.sidebar-icon {
3682
transition: color $duration $ease-out;
3683
color: hint($on-surface);
3684
&:disabled {
3686
color: disabled-hint($on-surface);
3687
}
3688
}
3689
placessidebar.sidebar {
3691
> viewport.frame {
3692
border-style: none;
3693
background-color: transparent;
3694
}
3695
list {
3697
padding: (4px - 3px) 0 4px;
3698
}
3699
row {
3701
// Needs overriding of the GtkListBoxRow padding
3702
min-height: 32px;
3703
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3704
padding: 0;
3705
border-radius: $corner-radius;
3706
// Using margins/padding directly in the SidebarRow
3708
// will make the animation of the new bookmark row jump
3709
> revealer {
3710
padding: 0 8px;
3711
}
3712
&:selected {
3714
background-color: overlay("activated", $primary);
3715
color: $primary;
3716
font-weight: 500;
3717
@include ink-color($primary, $hover-alt: true);
3718
image.sidebar-icon {
3720
color: $primary;
3721
}
3722
}
3723
&:disabled {
3725
color: disabled($on-surface);
3726
}
3727
image.sidebar-icon {
3729
&:dir(ltr) {
3730
padding-right: 8px;
3731
}
3732
&:dir(rtl) {
3734
padding-left: 8px;
3735
}
3736
}
3737
label.sidebar-label {
3739
&:dir(ltr) {
3740
padding-right: 2px;
3741
}
3742
&:dir(rtl) {
3744
padding-left: 2px;
3745
}
3746
}
3747
@at-root button.sidebar-button {
3749
@extend %button-flat-basic;
3750
@extend %button-small;
3751
}
3752
&.sidebar-placeholder-row {
3754
background-color: overlay("hover", $on-surface);
3755
}
3756
&.sidebar-new-bookmark-row {
3758
color: $primary;
3759
image.sidebar-icon {
3761
color: $primary;
3762
}
3763
}
3764
}
3765
}
3766
placesview {
3768
.server-list-button {
3769
> image {
3770
-gtk-icon-transform: rotate(0turn);
3771
}
3772
&:checked > image {
3774
-gtk-icon-transform: rotate(-.5turn);
3775
}
3776
}
3777
// this selects the "connect to server" label
3779
> actionbar > revealer > box > label {
3780
padding-left: 8px;
3781
padding-right: 8px;
3782
}
3783
}
3784
/**
3786
* Paned
3787
*/
3788
paned {
3790
> separator {
3791
min-width: 1px;
3792
min-height: 1px;
3793
-gtk-icon-source: none; // defeats the ugly default handle decoration
3794
border-style: none; // just to be sure
3795
background-color: transparent;
3796
// workaround, using background istead of a border since the border will get rendered twice (?)
3797
background-image: image(divider($on-surface));
3798
background-size: 1px 1px;
3799
background-clip: content-box; // avoids borders image being rendered twice (?)
3800
&.wide {
3802
min-width: 6px;
3803
min-height: 6px;
3804
// background-color: $background;
3805
background-image: image(divider($on-surface)), image(divider($on-surface));
3806
background-size: 1px 1px, 1px 1px;
3807
}
3808
}
3809
&.horizontal > separator {
3811
background-repeat: repeat-y;
3812
&:dir(ltr) {
3814
margin: 0 -8px 0 0;
3815
padding: 0 8px 0 0;
3816
background-position: left;
3817
}
3818
&:dir(rtl) {
3820
margin: 0 0 0 -8px;
3821
padding: 0 0 0 8px;
3822
background-position: right;
3823
}
3824
&.wide {
3826
margin: 0;
3827
padding: 0;
3828
background-repeat: repeat-y, repeat-y;
3829
background-position: left, right;
3830
}
3831
}
3832
&.vertical > separator {
3834
margin: 0 0 -8px 0;
3835
padding: 0 0 8px 0;
3836
background-repeat: repeat-x;
3837
background-position: top;
3838
&.wide {
3840
margin: 0;
3841
padding: 0;
3842
background-repeat: repeat-x, repeat-x;
3843
background-position: bottom, top;
3844
}
3845
}
3846
}
3847
/**
3849
* GtkInfoBar
3850
*/
3851
infobar {
3853
border-style: none;
3854
&.action:hover > revealer > box {
3856
background-image: image(overlay("hover", $on-surface));
3857
}
3858
&.info > revealer > box,
3860
&.question > revealer > box {
3861
border-bottom: 1px solid divider($on-surface);
3862
// background-color: $base;
3863
button {
3865
@extend %button-flat;
3866
&.text-button:not(:disabled) {
3868
color: $primary;
3869
@include ink-color($primary);
3870
}
3871
}
3872
}
3873
&.warning > revealer > box {
3875
background-color: $warning;
3876
color: $on-warning;
3877
button.flat {
3879
color: $on-warning;
3880
@include ink-color($on-warning);
3881
}
3882
selection {
3884
}
3885
*:link {
3887
color: $on-warning;
3888
}
3889
}
3890
&.error > revealer > box {
3892
background-color: $error;
3893
color: $on-error;
3894
button.flat {
3896
color: $on-error;
3897
@include ink-color($on-error);
3898
}
3899
selection {
3901
}
3902
*:link {
3904
color: $on-error;
3905
}
3906
}
3907
// Remove ugly hard-coded padding
3909
button label {
3910
margin: 0 -4px;
3911
}
3912
}
3913
/**
3915
* Tooltips
3916
*/
3917
tooltip {
3919
&.background {
3920
// background-color needs to be set this way otherwise it gets drawn twice
3921
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3922
background-color: $tooltip;
3923
color: $on-tooltip;
3924
}
3925
// padding: 4px; /* not working */
3927
border-radius: $corner-radius;
3928
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3929
&:not(.csd):not(.unity-csd) {
3931
// border: 1px solid divider($on-surface);
3932
// border-radius: $corner-radius + 1px;
3933
}
3934
// FIXME: we need a border or tooltips vanish on black background.
3936
decoration {
3937
background-color: transparent;
3938
}
3939
> box {
3941
margin: -6px; // Remove hard-coded 6px margin
3942
min-height: 32px - 4px * 2;
3943
padding: 4px 8px;
3944
}
3945
.dim-label {
3947
color: hint($on-tooltip);
3948
}
3949
* {
3951
// workaround for Eclipse.
3952
// do not include any declaration here.
3953
}
3954
}
3955
/**
3957
* Color Chooser
3958
*/
3959
colorswatch {
3961
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3962
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3963
// applied to the overlay box.
3964
// base color corners rounding
3966
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3967
// sports a bigger radius.
3968
// nth-child is needed by the custom color strip.
3969
&.top {
3971
border-top-left-radius: $corner-radius + .5px;
3972
border-top-right-radius: $corner-radius + .5px;
3973
overlay {
3975
border-top-left-radius: $corner-radius;
3976
border-top-right-radius: $corner-radius;
3977
}
3978
}
3979
&.bottom {
3981
border-bottom-left-radius: $corner-radius + .5px;
3982
border-bottom-right-radius: $corner-radius + .5px;
3983
overlay {
3985
border-bottom-left-radius: $corner-radius;
3986
border-bottom-right-radius: $corner-radius;
3987
}
3988
}
3989
&.left,
3991
&:first-child:not(.top) {
3992
border-top-left-radius: $corner-radius + .5px;
3993
border-bottom-left-radius: $corner-radius + .5px;
3994
overlay {
3996
border-top-left-radius: $corner-radius;
3997
border-bottom-left-radius: $corner-radius;
3998
}
3999
}
4000
&.right,
4002
&:last-child:not(.bottom) {
4003
border-top-right-radius: $corner-radius + .5px;
4004
border-bottom-right-radius: $corner-radius + .5px;
4005
overlay {
4007
border-top-right-radius: $corner-radius;
4008
border-bottom-right-radius: $corner-radius;
4009
}
4010
}
4011
&.dark {
4013
color: $on-dark;
4014
}
4015
&.light {
4017
color: $on-light;
4018
}
4019
overlay {
4021
transition: $transition-shadow;
4022
box-shadow: $shadow-z1;
4023
&:drop(active),
4025
&:hover {
4026
box-shadow: $shadow-z3;
4027
}
4028
}
4029
&#add-color-button {
4031
border-radius: $corner-radius $corner-radius 0 0;
4032
color: $on-surface;
4033
&:only-child {
4035
border-radius: $corner-radius;
4036
}
4037
overlay {
4039
background-color: $surface;
4040
}
4041
}
4042
&:disabled {
4044
opacity: .5;
4045
overlay {
4047
box-shadow: none;
4048
}
4049
}
4050
row:selected & {
4052
}
4053
&#editor-color-sample {
4055
border-radius: $corner-radius + .5px;
4056
overlay {
4058
border-radius: $corner-radius;
4059
&:hover {
4061
// box-shadow: $shadow-z1;
4062
}
4063
}
4064
}
4065
}
4066
// colorscale popup
4068
colorchooser .popover.osd {
4069
transition: $transition-shadow;
4070
border-radius: $corner-radius;
4071
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4072
background-color: $surface;
4073
&:backdrop {
4075
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4076
}
4077
}
4078
/**
4080
* Misc
4081
*/
4082
// content view (grid/list)
4084
.content-view {
4085
// background-color: $background;
4086
&:hover {
4088
// -gtk-icon-effect: highlight;
4089
}
4090
rubberband,
4092
.rubberband {
4093
@extend %rubberband;
4094
}
4095
}
4096
.scale-popup {
4098
.osd & {
4099
// @extend %osd;
4100
// FIXME: quick hack, redo properly
4102
button.flat {
4103
}
4104
}
4105
// +/- buttons on GtkVolumeButton popup
4107
button {
4108
}
4109
}
4110
/**
4112
* Window Decorations
4113
*/
4114
decoration {
4116
transition: $transition-shadow;
4117
border-radius: $corner-radius $corner-radius 0 0;
4118
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4119
// FIXME rationalize shadows
4121
// this is used for the resize cursor area
4123
margin: 8px;
4124
&:backdrop {
4126
// the transparent shadow here is to enforce that the shadow extents don't
4127
// change when we go to backdrop, to prevent jumping windows.
4128
// The biggest shadow should be in the same order then in the active state
4129
// or the jumping will happen during the transition.
4130
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4131
}
4132
.maximized &,
4134
.fullscreen &,
4135
.tiled &,
4136
.tiled-top &,
4137
.tiled-right &,
4138
.tiled-bottom &,
4139
.tiled-left & {
4140
border-radius: 0;
4141
}
4142
.popup & {
4144
box-shadow: none;
4145
}
4146
// server-side decorations as used by mutter
4148
.ssd & {
4149
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4150
}
4151
.csd.popup & {
4153
border-radius: $corner-radius;
4154
box-shadow: $shadow-z4;
4155
}
4156
tooltip.csd & {
4158
border-radius: $corner-radius;
4159
box-shadow: none;
4160
}
4161
messagedialog.csd & {
4163
border-radius: $corner-radius;
4164
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4165
&:backdrop {
4167
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4168
}
4169
}
4170
.solid-csd & {
4172
margin: 0;
4173
padding: 2px;
4174
border-radius: 0;
4175
box-shadow: none;
4176
box-shadow: inset 0 1px highlight($titlebar);
4177
background-color: $titlebar;
4178
&:backdrop {
4180
background-color: $titlebar-backdrop;
4181
}
4182
}
4183
}
4184
// Window Close button
4186
button.titlebutton {
4187
border-radius: $circular-radius;
4188
.selection-mode & {
4190
}
4191
}
4192
// catch all extend :)
4195
.monospace {
4197
font-family: monospace;
4198
}
4199
/**
4201
* Touch Copy & Paste
4202
*/
4203
// touch selection handlebars for the Popover.osd above
4205
cursor-handle {
4206
color: $primary;
4207
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4208
&.top:dir(ltr),
4210
&.bottom:dir(rtl) {
4211
-gtk-icon-transform: rotate(90deg);
4212
}
4213
&.bottom:dir(ltr),
4215
&.top:dir(rtl) {
4216
-gtk-icon-transform: unset;
4217
}
4218
&.insertion-cursor:dir(ltr),
4220
&.insertion-cursor:dir(rtl) {
4221
padding-top: 6px;
4222
-gtk-icon-transform: rotate(45deg);
4223
}
4224
}
4225
// Decouple the font of context menus from their entry/textview
4227
.context-menu {
4228
font: initial;
4229
}
4230
// shortcut window keys
4232
.keycap {
4233
min-width: 28px - 8px * 2;
4234
min-height: 28px - 2px;
4235
margin-top: 2px;
4236
padding-bottom: 2px;
4237
padding-left: 8px;
4238
padding-right: 8px;
4239
border: solid 1px divider($on-surface);
4241
border-radius: $corner-radius + 1px;
4242
box-shadow: inset 0 -2px divider($on-surface);
4243
background-clip: padding-box;
4244
background-color: $surface;
4245
color: $on-surface;
4246
font-size: smaller;
4247
}
4248
// FIXME needs to be done widget by widget, this wildcard should really die
4250
:not(decoration):not(window):drop(active) {
4251
// caret-color: $primary;
4252
}
4253
// FIXME aggregate with buttons
4255
stackswitcher button.text-button {
4256
min-width: 100px;
4257
}
4258
// FIXME aggregate with buttons
4260
stackswitcher button.circular,
4261
stackswitcher button.text-button.circular {
4262
min-width: $medium-size;
4263
min-height: $medium-size;
4264
padding: 0;
4265
}
4266
/**
4268
* App Icons
4269
*/
4270
// Outline for low res icons
4272
.lowres-icon {
4273
// -gtk-icon-shadow: none;
4274
}
4275
// Drapshadow for large icons
4277
.icon-dropshadow {
4278
// -gtk-icon-shadow: none;
4279
}
4280
/**
4282
* Emoji
4283
*/
4284
popover.emoji-picker {
4286
padding: 0;
4287
entry {
4289
border-bottom: 1px solid divider($on-surface);
4290
border-image: none;
4291
border-radius: 0;
4292
box-shadow: none;
4293
background-color: transparent;
4294
}
4295
scrolledwindow {
4297
border-bottom: 1px solid divider($on-surface);
4298
}
4299
}
4300
button.emoji-section {
4302
margin: 4px;
4303
&:checked {
4305
background-color: overlay("activated", $primary);
4306
color: $primary;
4307
@include ink-color($primary);
4308
}
4309
&:not(:last-child) {
4311
margin-right: 0;
4312
}
4313
}
4314
popover.emoji-picker .emoji {
4316
min-width: 3em;
4317
min-height: 3em;
4318
padding: 0 8px;
4319
// font-size: larger;
4320
widget {
4322
transition: $transition;
4323
border-radius: $corner-radius;
4324
&:hover {
4326
background-color: overlay("hover", $on-surface);
4327
}
4328
}
4329
}
4330
popover.emoji-completion {
4332
padding: 8px 0;
4333
arrow {
4335
border: none;
4336
background: none;
4337
}
4338
.emoji-completion-row {
4340
min-height: $menuitem-size;
4341
padding: 0 12px;
4342
}
4343
.emoji:hover {
4345
background-color: overlay("hover", $on-surface);
4346
}
4347
}
4348