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
transition: -gtk-icon-transform $duration $ease-out;
1123
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1124
min-height: 16px;
1125
min-width: 16px;
1126
}
1127
button.combo:checked arrow {
1129
// color: $primary;
1130
-gtk-icon-transform: rotate(-.5turn);
1131
}
1132
// workaround for menuitem selection
1134
decoration {
1135
transition: none;
1136
}
1137
button.combo cellview {
1139
&:dir(ltr) {
1140
margin-left: 8px - ($medium-size - 16px) / 2;
1141
}
1142
&:dir(rtl) {
1144
margin-right: 8px - ($medium-size - 16px) / 2;
1145
}
1146
}
1147
menu {
1149
padding: 2px 0;
1150
menuitem {
1152
min-height: $medium-size - 2px * 2;
1153
padding: 0 8px;
1154
}
1155
// overflow arrows
1157
> arrow {
1158
&.top {
1159
margin-top: -2px;
1160
}
1161
&.bottom {
1163
margin-top: 2px * 2;
1164
margin-bottom: -2px * 3;
1165
}
1166
}
1167
}
1168
> .linked:not(.vertical) > entry:not(:only-child) {
1170
border-radius: $corner-radius $corner-radius 0 0;
1171
&:first-child {
1173
margin-right: -$medium-size;
1174
padding-right: $medium-size;
1175
}
1176
&:last-child {
1178
margin-left: -$medium-size;
1179
padding-left: $medium-size;
1180
}
1181
}
1182
> .linked:not(.vertical) > button:not(:only-child) {
1184
@extend %button-flat-basic;
1185
// @extend %button-small;
1186
min-height: 16px;
1188
min-width: 16px;
1189
margin: ($medium-size - $small-size) / 2;
1190
padding: ($small-size - 16px) / 2;
1191
border-radius: $circular-radius;
1192
}
1193
}
1194
// the combo is a composite widget so the way we do button linking doesn't
1196
// work, special case needed. See
1197
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1198
.linked:not(.vertical) > combobox {
1200
&:not(:first-child) > box > button.combo {
1201
@extend %linked-not-first-child;
1202
}
1203
&:not(:last-child) > box > button.combo {
1205
@extend %linked-not-last-child;
1206
}
1207
}
1208
.linked.vertical > combobox {
1210
&:not(:first-child) > box > button.combo {
1211
@extend %linked-vertical-not-first-child;
1212
}
1213
&:not(:last-child) > box > button.combo {
1215
@extend %linked-vertical-not-last-child;
1216
}
1217
}
1218
button.combo:only-child {
1220
border-radius: $corner-radius $corner-radius 0 0;
1221
font-weight: normal;
1222
@include entry(normal);
1224
&:focus {
1226
@include entry(focus);
1227
}
1228
&:drop(active),
1230
&:hover {
1231
@include entry(hover);
1232
}
1233
&:checked {
1235
@include entry(checked);
1236
}
1237
&:disabled {
1239
@include entry(disabled);
1240
}
1241
arrow {
1243
transition: color $duration $ease-out;
1244
color: hint($on-surface);
1245
&:disabled {
1247
color: disabled-hint($on-surface);
1248
}
1249
}
1250
}
1251
/**
1253
* Toolbars
1254
*/
1255
toolbar {
1257
-GtkWidget-window-dragging: true;
1258
padding: 2px;
1259
button {
1261
@extend %button-flat;
1262
}
1263
// on OSD
1265
.osd & {
1266
}
1267
// stand-alone OSD toolbars
1269
&.osd {
1270
@extend %toolbar-osd;
1271
// positional classes for `attached` osd toolbars
1273
&.left,
1274
&.right,
1275
&.top,
1276
&.bottom {
1277
border-radius: 0;
1278
}
1279
&.bottom {
1281
box-shadow: none;
1282
background-color: transparent;
1283
background-image:
1284
linear-gradient(
1285
to bottom,
1286
transparent,
1287
rgba(black, .1) 30%,
1288
rgba(black, .2) 50%,
1289
rgba(black, .4)
1290
);
1291
}
1292
}
1293
// toolbar separators
1295
&.horizontal > separator {
1296
margin: 2px;
1297
}
1298
&.vertical > separator {
1300
margin: 2px;
1301
}
1302
&:not(.inline-toolbar):not(.osd) {
1304
scale,
1305
entry,
1306
spinbutton,
1307
button {
1308
margin: 2px;
1309
}
1310
.linked entry,
1312
.linked spinbutton,
1313
.linked button {
1314
&:not(:first-child) {
1315
margin-left: 0;
1316
}
1317
&:not(:last-child) {
1319
margin-right: 0;
1320
}
1321
}
1322
spinbutton {
1324
entry,
1325
button {
1326
margin: 0;
1327
}
1328
}
1329
switch {
1331
margin: 2px + $container-padding 2px;
1332
}
1333
}
1334
}
1335
%toolbar-osd {
1337
transition: $transition-shadow;
1338
padding: $container-padding;
1339
border-radius: $corner-radius;
1340
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1341
background-color: $surface;
1342
&:backdrop {
1344
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1345
}
1346
}
1347
// searchbar, location-bar & inline-toolbar
1349
.inline-toolbar {
1350
padding: $container-padding;
1351
border-style: solid;
1352
border-width: 0 1px 1px;
1353
border-color: divider($on-surface);
1354
background-color: $base;
1355
background-clip: padding-box;
1356
}
1357
searchbar > revealer > box,
1359
.location-bar {
1360
padding: $container-padding;
1361
border-style: solid;
1362
border-width: 0 0 1px;
1363
border-color: divider($on-surface);
1364
}
1365
searchbar > revealer > box {
1367
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1368
margin: -6px;
1369
padding: $container-padding;
1370
}
1371
/**
1373
* Header bars
1374
*/
1375
.titlebar {
1377
transition: background-color $duration $ease-out, color $duration $ease-out;
1378
border-radius: $corner-radius $corner-radius 0 0;
1379
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1380
background-color: $titlebar;
1381
color: $on-titlebar;
1382
&:disabled {
1384
color: disabled($on-titlebar);
1385
}
1386
&:backdrop {
1388
background-color: $titlebar-backdrop;
1389
color: hint($on-titlebar);
1390
&:disabled {
1392
color: disabled-hint($on-titlebar);
1393
}
1394
}
1395
.title {
1397
padding-left: 12px;
1398
padding-right: 12px;
1399
font-weight: bold;
1400
}
1401
.subtitle {
1403
padding-left: 12px;
1404
padding-right: 12px;
1405
font-size: smaller;
1406
}
1407
.subtitle,
1409
.dim-label {
1410
transition: color $duration $ease-out;
1411
color: hint($on-titlebar);
1412
&:backdrop {
1414
color: disabled($on-titlebar);
1415
}
1416
}
1417
// Don't draw titlebar above titlebar
1419
.titlebar {
1420
background-color: transparent;
1421
box-shadow: none;
1422
}
1423
// The separator for split headerbars
1425
headerbar + separator {
1426
background-color: divider($on-titlebar);
1427
}
1428
entry {
1430
box-shadow: inset 0 -1px stroke($on-titlebar);
1431
background-color: entry-fill($on-titlebar);
1432
color: $on-titlebar;
1433
&:disabled {
1435
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1436
background-color: entry-fill($on-titlebar);
1437
color: disabled($on-titlebar);
1438
}
1439
image {
1441
color: hint($on-titlebar);
1442
&:hover,
1444
&:active {
1445
color: $on-titlebar;
1446
}
1447
&:disabled {
1449
color: disabled($on-titlebar);
1450
}
1451
}
1452
}
1453
.linked:not(.vertical) > entry:not(:only-child) {
1455
border-radius: $corner-radius $corner-radius 0 0;
1456
}
1457
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1459
@extend %button-flat;
1460
border-image:
1462
radial-gradient(
1463
circle closest-corner at center calc(100% - 1px),
1464
$titlebar-indicator 0%,
1465
transparent 0%
1466
) 0 0 0 / 0 0 0;
1467
background-color: transparent;
1468
color: hint($on-titlebar);
1469
@include ink-color($on-titlebar);
1470
&:disabled {
1472
color: disabled-hint($on-titlebar);
1473
}
1474
@at-root %titlebar-button-checked,
1476
&:checked {
1477
border-image:
1478
radial-gradient(
1479
circle closest-corner at center calc(100% - 1px),
1480
$titlebar-indicator 100%,
1481
transparent 0%
1482
) 0 0 2 / 0 0 2px;
1483
background-color: transparent;
1484
color: $on-titlebar;
1485
@include ink-color($on-titlebar);
1486
&:disabled {
1488
background-color: transparent;
1489
color: disabled($on-titlebar);
1490
}
1491
}
1492
&:backdrop {
1494
color: disabled($on-titlebar);
1495
&:disabled {
1497
color: disabled-hint($on-titlebar);
1498
}
1499
&:checked {
1501
color: hint($on-titlebar);
1502
&:disabled {
1504
color: disabled-hint($on-titlebar);
1505
}
1506
}
1507
}
1508
}
1509
button.suggested-action, button.destructive-action {
1511
&:disabled {
1512
background-color: fill($on-titlebar);
1513
color: disabled($on-titlebar);
1514
}
1515
}
1516
// FIXME: Ugly overriding
1518
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1519
min-width: 120px - 8px * 2;
1520
}
1521
// FIXME: Ugly overriding
1523
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1524
min-width: 0;
1525
padding-left: ($medium-size - 24px) / 2;
1526
padding-right: ($medium-size - 24px) / 2;
1527
}
1528
&.selection-mode {
1530
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1531
// but let's keep it for backwards compatibility.
1532
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1533
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1534
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1535
background-color: $primary;
1536
color: $on-primary;
1537
&:backdrop {
1539
color: hint($on-primary);
1540
}
1541
.subtitle:link {
1543
color: $on-primary;
1544
}
1545
button:not(.suggested-action):not(.destructive-action) {
1547
border-image:
1548
radial-gradient(
1549
circle closest-corner at center calc(100% - 1px),
1550
currentcolor 0%,
1551
transparent 0%
1552
) 0 0 0 / 0 0 0;
1553
color: $on-primary;
1554
&:disabled {
1556
color: disabled($on-primary);
1557
}
1558
&:checked {
1560
border-image:
1561
radial-gradient(
1562
circle closest-corner at center calc(100% - 1px),
1563
currentcolor 100%,
1564
transparent 0%
1565
) 0 0 2 / 0 0 2px;
1566
color: $on-primary;
1567
&:disabled {
1569
color: disabled($on-primary);
1570
}
1571
}
1572
&:backdrop {
1574
color: hint($on-primary);
1575
&:disabled {
1577
color: disabled-hint($on-primary);
1578
}
1579
&:checked {
1581
color: hint($on-primary);
1582
&:disabled {
1584
color: disabled-hint($on-primary);
1585
}
1586
}
1587
}
1588
}
1589
.selection-menu {
1591
padding-left: 16px;
1592
padding-right: 16px;
1593
arrow {
1595
-GtkArrow-arrow-scaling: 1;
1596
}
1597
.arrow {
1599
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1600
}
1601
}
1602
}
1603
.selection-mode {
1605
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1606
background-color: $primary;
1607
}
1608
// squared corners when the window is maximized, tiled, or fullscreen
1610
.tiled &,
1611
.tiled-top &,
1612
.tiled-right &,
1613
.tiled-bottom &,
1614
.tiled-left &,
1615
.maximized &,
1616
.fullscreen & {
1617
border-radius: 0;
1618
box-shadow: $shadow-z1;
1619
}
1620
&.default-decoration {
1622
min-height: $small-size;
1623
padding: $container-padding;
1624
box-shadow: inset 0 1px highlight($titlebar);
1625
.tiled &,
1627
.maximized &,
1628
.fullscreen & {
1629
box-shadow: none;
1630
}
1631
button.titlebutton {
1633
min-height: $small-size;
1634
min-width: $small-size;
1635
margin: 0;
1636
padding: 0;
1637
}
1638
// workaround for non-animatable buttons
1640
.background:not(.csd) & button.titlebutton:active {
1641
background-size: 1000% 1000%;
1642
}
1643
}
1644
.solid-csd & {
1646
&:dir(rtl), &:dir(ltr) { // specificity bump
1647
border-radius: 0;
1648
box-shadow: $shadow-z1; // just remove the highlight
1649
}
1650
}
1651
}
1652
headerbar {
1654
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1655
min-height: $large-size;
1656
padding: 0 $container-padding;
1657
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1659
entry,
1660
spinbutton,
1661
button {
1662
margin-top: $container-padding;
1663
margin-bottom: $container-padding;
1664
}
1665
separator.titlebutton {
1667
margin-top: $large-size / 4;
1668
margin-bottom: $large-size / 4;
1669
background-color: divider($on-titlebar);
1670
}
1671
switch {
1673
margin-top: ($large-size - 24px) / 2;
1674
margin-bottom: ($large-size - 24px) / 2;
1675
}
1676
// reset button margins of the spinbutton
1678
spinbutton button {
1679
margin-top: 0;
1680
margin-bottom: 0;
1681
}
1682
// FIXME: This is a hacky workaround.
1684
.entry-tag {
1685
margin-top: 5px;
1686
margin-bottom: 5px;
1687
}
1688
}
1689
// Development versions of apps to use a differently styled headerbar
1691
window.devel .titlebar:not(.selection-mode) {
1692
}
1693
/**
1695
* Pathbars
1696
*/
1697
%pathbar_button,
1699
.path-bar.linked:not(.vertical) > button {
1700
@extend %button-flat-basic;
1701
padding-left: ($medium-size - 24px) / 2;
1703
padding-right: ($medium-size - 24px) / 2;
1704
border-image:
1705
radial-gradient(
1706
circle closest-corner at center calc(100% - 1px),
1707
$primary 0%,
1708
transparent 0%
1709
) 0 0 0 / 0 0 0;
1710
border-radius: $corner-radius;
1711
&:checked {
1713
border-image:
1714
radial-gradient(
1715
circle closest-corner at center calc(100% - 1px),
1716
$primary 100%,
1717
transparent 0%
1718
) 0 0 2 / 0 0 2px;
1719
color: $on-surface;
1720
&,
1722
&:disabled {
1723
background-color: transparent;
1724
}
1725
}
1726
label:not(:only-child) {
1728
&:first-child {
1729
margin-left: 0;
1730
}
1731
&:last-child {
1733
margin-right: 0;
1734
}
1735
}
1736
&.text-button {
1738
min-width: 0;
1739
}
1740
&.slider-button {
1742
padding-left: (24px - 16px) / 2;
1743
padding-right: (24px - 16px) / 2;
1744
}
1745
}
1746
/**
1748
* Tree Views
1749
*/
1750
treeview.view {
1752
@at-root * {
1753
-GtkTreeView-horizontal-separator: 4;
1754
-GtkTreeView-grid-line-width: 1;
1755
-GtkTreeView-grid-line-pattern: '';
1756
-GtkTreeView-tree-line-width: 1;
1757
-GtkTreeView-tree-line-pattern: '';
1758
-GtkTreeView-expander-size: 16;
1759
}
1760
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1762
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1763
// to avoid borders being overridden by the previously set props
1765
rubberband {
1766
@extend %rubberband;
1767
}
1768
&:hover,
1770
&:selected {
1771
border-radius: 0;
1772
}
1773
&.separator {
1775
min-height: 1px + 2px * 2;
1776
color: divider($on-surface);
1777
}
1778
&:drop(active) {
1780
// FIXME: box-shadow, background-color and background-image are not available here.
1781
border-style: solid none;
1782
border-width: 9999px;
1783
border-color: overlay("hover", $on-surface);
1784
&.after {
1786
border-top-style: none;
1787
}
1788
&.before {
1790
border-bottom-style: none;
1791
}
1792
}
1793
&.expander {
1795
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1796
-gtk-icon-transform: rotate(-90deg);
1797
&:dir(rtl) {
1799
-gtk-icon-transform: rotate(90deg);
1800
}
1801
&:checked {
1803
-gtk-icon-transform: unset;
1804
}
1805
color: hint($on-surface);
1807
&:hover,
1809
&:active {
1810
color: $on-surface;
1811
}
1812
&:disabled {
1814
color: disabled-hint($on-surface);
1815
}
1816
}
1817
&.progressbar { // progress bar in treeviews
1819
border-bottom: $bar-size solid $primary;
1820
box-shadow: none;
1821
background-color: transparent;
1822
background-image: none;
1823
&:selected:hover {
1825
box-shadow: none;
1826
}
1827
}
1828
&.trough { // progress bar trough in treeviews
1830
border-bottom: $bar-size solid disabled-stroke($on-surface);
1831
box-shadow: none;
1832
background-color: transparent;
1833
background-image: none;
1834
&:selected:hover {
1836
box-shadow: none;
1837
}
1838
}
1839
header {
1841
button {
1842
padding: 2px 6px;
1843
border-style: none solid solid none;
1844
border-width: 1px;
1845
border-color: divider($on-surface);
1846
border-radius: 0;
1847
background-clip: border-box;
1848
color: hint($on-surface);
1849
@include ink-color($on-surface, $hover-alt: true);
1850
@include list-item;
1851
&:disabled {
1853
color: disabled-hint($on-surface);
1854
}
1855
&,
1857
&:disabled {
1858
background-color: transparent;
1859
}
1860
&:last-child {
1862
border-right-style: none;
1863
}
1864
}
1865
}
1866
button.dnd,
1868
header.button.dnd { // for treeview-like derive widgets
1869
padding: 2px 6px;
1870
border-style: none solid solid;
1871
border-width: 1px;
1872
border-color: divider($on-surface);
1873
border-radius: 0;
1874
box-shadow: none;
1875
background-clip: border-box;
1876
background-color: $surface;
1877
color: $primary;
1878
}
1879
// see tests/testaccel to test
1881
acceleditor > label {
1882
background-color: $primary;
1883
}
1884
}
1885
/**
1887
* Menus
1888
*/
1889
menubar,
1891
.menubar {
1892
-GtkWidget-window-dragging: true;
1893
padding: 0;
1894
// box-shadow: inset 0 -1px divider($on-surface);
1895
background-color: $titlebar;
1896
color: $on-titlebar;
1897
&:backdrop {
1899
background-color: $titlebar-backdrop;
1900
color: hint($on-titlebar);
1901
}
1902
.csd & {
1904
transition: $transition;
1905
}
1906
> menuitem {
1908
transition: $transition;
1909
min-height: 20px;
1910
padding: 4px 8px;
1911
color: hint($on-titlebar);
1912
&:hover { // Seems like it :hover even with keyboard focus
1914
transition: none;
1915
background-color: overlay("activated", $on-titlebar);
1916
color: $on-titlebar;
1917
}
1918
&:disabled {
1920
color: disabled-hint($on-titlebar);
1921
}
1922
}
1923
}
1924
// Needed to make the border-radius of menus work
1926
// otherwise the background bleeds out of the menu edges
1927
.background.popup {
1928
background-color: transparent;
1929
}
1930
menu,
1932
.menu,
1933
.context-menu {
1934
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1935
padding: 4px 0;
1936
box-shadow: inset 0 1px highlight($surface);
1937
background-color: $surface;
1938
border: 1px solid divider($on-surface); // adds borders in a non composited env
1939
.csd & {
1941
border: none; // axes borders in a composited env
1942
border-radius: $corner-radius;
1943
}
1944
menuitem {
1946
transition: background-color $duration $ease-out;
1947
min-height: 20px;
1948
min-width: 40px;
1949
padding: 4px 8px;
1950
color: $on-surface;
1951
font: initial;
1952
text-shadow: none;
1953
&:hover {
1955
transition: none;
1956
background-color: overlay("hover", $on-surface);
1957
}
1958
&:disabled {
1960
color: disabled($on-surface);
1961
}
1962
// submenu indicators
1964
arrow {
1965
min-height: 16px;
1966
min-width: 16px;
1967
color: hint($on-surface);
1968
&:disabled {
1970
color: disabled-hint($on-surface);
1971
}
1972
&:dir(ltr) {
1974
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1975
margin-left: 8px;
1976
}
1977
&:dir(rtl) {
1979
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1980
margin-right: 8px;
1981
}
1982
}
1983
// avoids labels color being overridden, see
1985
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1986
label {
1987
&:dir(rtl),
1988
&:dir(ltr) {
1989
// color: inherit;
1990
}
1991
}
1992
}
1993
// overflow arrows
1995
> arrow {
1996
min-height: 16px;
1997
min-width: 16px;
1998
padding: 4px;
1999
background-color: $surface;
2000
color: hint($on-surface);
2001
&.top {
2003
margin-top: -4px;
2004
border-bottom: 1px solid divider($on-surface);
2005
border-radius: $corner-radius $corner-radius 0 0;
2006
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2007
}
2008
&.bottom {
2010
margin-top: 4px * 2;
2011
margin-bottom: -4px * 3;
2012
border-top: 1px solid divider($on-surface);
2013
border-radius: 0 0 $corner-radius $corner-radius;
2014
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2015
}
2016
&:hover {
2018
background-image: image(overlay("hover", $on-surface));
2019
}
2020
&:disabled {
2022
border-color: transparent;
2023
background-color: transparent;
2024
color: transparent;
2025
// color: disabled-hint($on-surface);
2026
}
2027
}
2028
separator {
2030
margin: 4px 0;
2031
}
2032
}
2033
menuitem {
2035
accelerator {
2036
color: hint($on-surface);
2037
}
2038
&:disabled accelerator {
2040
color: disabled-hint($on-surface);
2041
}
2042
}
2043
/**
2045
* Popovers
2046
*/
2047
popover.background {
2049
transition: $transition-shadow;
2050
padding: 2px;
2051
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2052
background-color: $surface;
2053
&:backdrop {
2055
box-shadow: $shadow-z2;
2056
}
2057
&, .csd & {
2059
border-style: solid;
2060
border-width: 1px;
2061
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2062
border-radius: $corner-radius + 1px;
2063
background-clip: padding-box;
2064
}
2065
> stack {
2067
margin: -4px; // remove extra padding from menu style popovers
2068
}
2069
> toolbar {
2071
margin: -2px;
2072
}
2073
> list,
2075
> .view,
2076
> toolbar {
2077
border-style: none;
2078
box-shadow: none;
2079
background-color: transparent;
2080
}
2081
&.touch-selection,
2083
&.magnifier,
2084
&.osd {
2085
// @extend %osd;
2086
}
2087
button:not(.suggested-action):not(.destructive-action) {
2089
// @extend %button-flat;
2090
}
2091
.linked:not(.vertical) > entry:not(:only-child) {
2093
// border-radius: $corner-radius $corner-radius 0 0;
2094
}
2095
&.menu button,
2097
button.model {
2098
@extend %button-flat;
2099
min-height: 32px;
2101
padding: 0 8px;
2102
border-radius: $corner-radius;
2103
&:checked {
2105
// color: $primary;
2106
}
2107
}
2108
separator {
2110
margin: 4px 0;
2111
}
2112
list separator {
2114
margin: 0;
2115
}
2116
}
2117
/**
2119
* Notebooks
2120
*/
2121
notebook {
2123
&:focus > header > tabs > tab:checked {
2124
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2125
}
2126
> header {
2128
border-width: 1px;
2129
border-color: divider($on-surface);
2130
&.top {
2132
border-bottom-style: solid;
2133
> tabs {
2135
margin-bottom: -1px;
2136
> tab {
2138
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2139
&:checked {
2141
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2142
}
2143
&.reorderable-page {
2145
border-image-width: 0 1px 2px;
2146
}
2147
}
2148
}
2149
}
2150
&.bottom {
2152
border-top-style: solid;
2153
> tabs {
2155
margin-top: -1px;
2156
> tab {
2158
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2159
&:checked {
2161
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2162
}
2163
&.reorderable-page {
2165
border-image-width: 2px 1px 0;
2166
}
2167
}
2168
}
2169
}
2170
&.left {
2172
border-right-style: solid;
2173
> tabs {
2175
margin-right: -1px;
2176
> tab {
2178
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2179
&:checked {
2181
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2182
}
2183
&.reorderable-page {
2185
border-image-width: 1px 2px 1px 0;
2186
}
2187
}
2188
}
2189
}
2190
&.right {
2192
border-left-style: solid;
2193
> tabs {
2195
margin-left: -1px;
2196
> tab {
2198
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2199
&:checked {
2201
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2202
}
2203
&.reorderable-page {
2205
border-image-width: 1px 0 1px 2px;
2206
}
2207
}
2208
}
2209
}
2210
&.top > tabs > arrow {
2212
@extend %notebook_vert_arrows;
2213
border-top-style: none;
2215
}
2216
&.bottom > tabs > arrow {
2218
@extend %notebook_vert_arrows;
2219
border-bottom-style: none;
2221
}
2222
@at-root %notebook_vert_arrows {
2224
padding-left: 4px;
2225
padding-right: 4px;
2226
&.down {
2228
margin-left: -8px;
2229
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2230
}
2231
&.up {
2233
margin-right: -8px;
2234
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2235
}
2236
}
2237
&.left > tabs > arrow {
2239
@extend %notebook_horz_arrows;
2240
border-left-style: none;
2242
}
2243
&.right > tabs > arrow {
2245
@extend %notebook_horz_arrows;
2246
border-right-style: none;
2248
}
2249
@at-root %notebook_horz_arrows {
2251
padding-top: 4px;
2252
padding-bottom: 4px;
2253
&.down {
2255
margin-top: -8px;
2256
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2257
}
2258
&.up {
2260
margin-bottom: -8px;
2261
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2262
}
2263
}
2264
> tabs > arrow {
2266
min-height: 16px;
2267
min-width: 16px;
2268
border-radius: 0;
2269
color: hint($on-surface);
2270
@extend %ripple;
2271
@include ink-color($on-surface, $hover-alt: true);
2272
&:disabled {
2274
color: disabled-hint($on-surface);
2275
}
2276
}
2277
tab {
2279
transition: $transition,
2280
background-size 0ms,
2281
background-image 0ms;
2282
min-height: $small-size;
2283
min-width: $small-size;
2284
padding: $container-padding 12px;
2285
border-width: 1px; // for reorderable tabs
2287
border-color: transparent; //
2288
outline: none;
2290
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2291
background-repeat: no-repeat;
2292
background-position: center;
2293
background-size: 0% 0%;
2294
color: hint($on-surface);
2296
font-weight: 500;
2297
&:hover {
2299
background-color: overlay("hover-alt", $on-surface);
2300
}
2301
&:disabled {
2303
color: disabled-hint($on-surface);
2304
}
2305
&:checked {
2307
transition: $transition,
2308
background-size $ripple-fade-in-duration $ease-out,
2309
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2310
background-color: transparent;
2311
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2312
background-size: 1000% 1000%;
2313
background-clip: padding-box;
2314
color: $on-surface;
2315
&:disabled {
2317
color: disabled($on-surface);
2318
}
2319
&.reorderable-page {
2321
border-color: divider($on-surface);
2322
background-color: $base;
2323
}
2324
}
2325
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2327
> box {
2328
transition: background-color $duration $ease-out;
2329
margin: -$container-padding -12px;
2330
padding: $container-padding 12px;
2331
&:drop(active) {
2333
background-color: overlay("hover", $on-surface);
2334
}
2335
}
2336
// colors the button like the label, overridden otherwise
2338
button.flat {
2339
@extend %button-small;
2340
&:last-child {
2342
margin-left: $container-padding;
2343
margin-right: $container-padding - 12px;
2344
}
2345
&:first-child {
2347
margin-left: $container-padding - 12px;
2348
margin-right: $container-padding;
2349
}
2350
}
2351
}
2352
&.top,
2354
&.bottom {
2355
tabs {
2356
padding-left: 8px;
2357
padding-right: 8px;
2358
&:not(:only-child) {
2360
&:first-child {
2361
margin-left: 0;
2362
}
2363
&:last-child {
2365
margin-right: 0;
2366
}
2367
}
2368
tab.reorderable-page {
2370
border-style: none solid;
2371
}
2372
}
2373
}
2374
&.left,
2376
&.right {
2377
tabs {
2378
padding-top: 8px;
2379
padding-bottom: 8px;
2380
&:not(:only-child) {
2382
&:first-child {
2383
margin-top: 0;
2384
}
2385
&:last-child {
2387
margin-bottom: 0;
2388
}
2389
}
2390
tab.reorderable-page {
2392
border-style: solid none;
2393
}
2394
}
2395
}
2396
}
2397
}
2398
/**
2400
* Scrollbars
2401
*/
2402
scrollbar {
2404
$_slider_min_length: 24px;
2405
// disable steppers
2407
@at-root * {
2408
-GtkScrollbar-has-backward-stepper: false;
2409
-GtkScrollbar-has-forward-stepper: false;
2410
}
2411
transition: $transition;
2413
// background-color: $background;
2414
background-clip: padding-box;
2415
// scrollbar border
2417
&.top { border-bottom: 1px solid divider($on-surface); }
2418
&.bottom { border-top: 1px solid divider($on-surface); }
2419
&.left { border-right: 1px solid divider($on-surface); }
2420
&.right { border-left: 1px solid divider($on-surface); }
2421
// slider
2423
slider {
2424
transition: background-color $duration $ease-out;
2425
min-width: 8px;
2426
min-height: 8px;
2427
border: 4px solid transparent;
2428
border-radius: $circular-radius;
2429
background-clip: padding-box;
2430
background-color: disabled($on-surface);
2431
&:hover {
2433
background-color: hint($on-surface);
2434
}
2435
&:active {
2437
background-color: $on-surface;
2438
}
2439
&:disabled {
2441
background-color: disabled-hint($on-surface);
2442
}
2443
}
2444
&.fine-tune {
2446
slider {
2447
min-width: 4px;
2448
min-height: 4px;
2449
}
2450
&.horizontal slider {
2452
margin: 2px 0;
2453
}
2454
&.vertical slider {
2456
margin: 0 2px;
2457
}
2458
}
2459
&.overlay-indicator {
2461
&:not(.fine-tune) slider {
2462
transition-property: background-color, min-height, min-width;
2463
}
2464
&:not(.dragging):not(.hovering) {
2466
border-color: transparent;
2467
background-color: transparent;
2468
slider {
2470
min-width: 4px;
2471
min-height: 4px;
2472
margin: 4px - 1px;
2473
border: 1px solid rgba($base, .3);
2474
}
2475
button {
2477
min-width: 4px;
2478
min-height: 4px;
2479
margin: 4px - 1px;
2480
border: 1px solid rgba($base, .3);
2481
border-radius: $circular-radius;
2482
background-color: disabled($on-surface);
2483
background-clip: padding-box;
2484
-gtk-icon-source: none;
2485
&:disabled {
2487
background-color: disabled-hint($on-surface);
2488
}
2489
}
2490
&.horizontal {
2492
slider {
2493
min-width: $_slider_min_length;
2494
}
2495
button {
2497
min-width: 8px;
2498
}
2499
}
2500
&.vertical {
2502
slider {
2503
min-height: $_slider_min_length;
2504
}
2505
button {
2507
min-height: 8px;
2508
}
2509
}
2510
}
2511
&.dragging,
2513
&.hovering {
2514
background-color: $surface;
2515
}
2516
}
2517
&.horizontal slider {
2519
min-width: $_slider_min_length;
2520
}
2521
&.vertical slider {
2523
min-height: $_slider_min_length;
2524
}
2525
// button styling
2527
button {
2528
@extend %button-flat-basic;
2529
min-width: 16px;
2531
min-height: 16px;
2532
padding: 0;
2533
border-radius: 0;
2534
}
2535
// button icons
2537
&.vertical {
2538
button {
2539
&.down {
2540
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2541
}
2542
&.up {
2544
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2545
}
2546
}
2547
}
2548
&.horizontal {
2550
button {
2551
&.down {
2552
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2553
}
2554
&.up {
2556
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2557
}
2558
}
2559
}
2560
}
2561
/**
2564
* Switch
2565
*/
2566
switch {
2568
transition: all $duration $ease-out;
2569
margin: $container-padding 0;
2570
padding: 0 2px;
2571
border: 5px solid transparent;
2572
border-radius: $circular-radius;
2573
background-color: stroke($on-surface);
2574
background-clip: padding-box;
2575
font-size: 0;
2576
&:checked {
2578
background-color: rgba($primary, .5);
2579
}
2580
&:disabled {
2582
opacity: .5;
2583
}
2584
// hide on/off icons for >=3.24.5
2586
image {
2587
margin: -8px;
2588
-gtk-icon-transform: scale(0);
2589
}
2590
slider {
2592
transition: all $duration $ease-out;
2593
min-width: 20px;
2594
min-height: 20px;
2595
margin: -3px -2px;
2596
border-radius: $circular-radius;
2597
outline: none;
2598
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2599
background-color: $switch-surface;
2600
}
2601
&:hover slider {
2603
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2604
}
2605
&:focus slider {
2607
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2608
}
2609
&:checked slider {
2611
background-color: $primary;
2612
}
2613
&:checked:hover slider {
2615
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2616
}
2617
&:checked:focus slider {
2619
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2620
}
2621
row:selected & {
2623
}
2624
}
2625
/**
2627
* Check and Radio items
2628
*/
2629
// draw regular check and radio items using our PNG assets
2631
// all assets are rendered from assets.svg. never add pngs directly
2632
// selection-mode
2634
.view.content-view.check:not(list),
2635
.content-view:not(list) check {
2636
min-height: 40px;
2637
min-width: 40px;
2638
margin: 0;
2639
padding: 0;
2640
box-shadow: none;
2641
background-color: transparent;
2642
background-image: none;
2643
-gtk-icon-shadow: $icon-shadow-z2;
2644
&:hover,
2646
&:active {
2647
-gtk-icon-shadow: $icon-shadow-z4;
2648
}
2649
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2651
&#{$class} {
2652
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2653
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2655
}
2656
}
2657
}
2658
checkbutton,
2660
radiobutton {
2661
outline: none;
2662
}
2663
checkbutton.text-button,
2665
radiobutton.text-button {
2666
// this is for a nice focus on check and radios text
2667
padding: 2px;
2668
label:not(:only-child) {
2670
margin: 0 4px;
2671
}
2672
}
2673
$check-radio-size: 40px;
2675
check,
2677
radio {
2678
min-height: 24px;
2679
min-width: 24px;
2680
margin: -($check-radio-size - 24px) / 2;
2681
padding: ($check-radio-size - 24px) / 2;
2682
border-radius: $circular-radius;
2683
color: hint($on-surface);
2684
@extend %ripple;
2685
@include ink-color($on-surface);
2686
&:checked,
2688
&:indeterminate {
2689
color: $primary;
2690
@include ink-color($primary);
2691
}
2692
&:disabled {
2694
color: disabled-hint($on-surface);
2695
}
2696
&:only-child {
2698
// margin: -12px;
2699
}
2700
popover modelbutton.flat & {
2702
&,
2703
&:focus,
2704
&:hover,
2705
&:focus:hover,
2706
&:active,
2707
&:disabled {
2708
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2709
box-shadow: none;
2710
background-image: none;
2711
}
2712
&.left:dir(rtl) {
2714
margin-left: -12px;
2715
margin-right: -4px;
2716
}
2717
&.right:dir(ltr) {
2719
margin-left: -4px;
2720
margin-right: -12px;
2721
}
2722
}
2723
menu menuitem & {
2725
transition: none;
2726
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2727
padding: 0;
2728
&:dir(ltr) {
2730
margin-right: 8px;
2731
}
2732
&:dir(rtl) {
2734
margin-left: 8px;
2735
}
2736
&,
2738
&:hover,
2739
&:disabled {
2740
box-shadow: none;
2741
}
2742
}
2743
}
2744
%check,
2746
check {
2747
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2748
&:checked {
2750
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2751
}
2752
&:indeterminate {
2754
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2755
}
2756
}
2757
%radio,
2759
radio {
2760
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2761
&:checked {
2763
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2764
}
2765
&:indeterminate {
2767
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2768
}
2769
border-image-slice: $check-radio-size / 2px;
2771
border-image-width: $check-radio-size / 2;
2772
$radio-indicator-size: 10px / $check-radio-size / 2;
2774
border-image-source:
2776
-gtk-gradient(
2777
radial,
2778
center center, 0,
2779
center center, .001,
2780
to($primary),
2781
to(transparent)
2782
);
2783
&:checked:not(:indeterminate) {
2785
border-image-source:
2786
-gtk-gradient(
2787
radial,
2788
center center, 0,
2789
center center, $radio-indicator-size,
2790
to($primary),
2791
to(transparent)
2792
);
2793
&:disabled {
2795
border-image-source:
2796
-gtk-gradient(
2797
radial,
2798
center center, 0,
2799
center center, $radio-indicator-size,
2800
to(disabled-hint($on-surface)),
2801
to(transparent)
2802
);
2803
}
2804
}
2805
}
2806
%small_check,
2808
menu menuitem check {
2809
min-height: 16px;
2810
min-width: 16px;
2811
border-radius: $corner-radius;
2812
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2813
&:checked {
2815
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2816
}
2817
&:indeterminate {
2819
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2820
}
2821
}
2822
%small_radio,
2824
menu menuitem radio {
2825
min-height: 16px;
2826
min-width: 16px;
2827
border-image: none;
2828
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2829
&:checked {
2831
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2832
}
2833
&:indeterminate {
2835
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2836
}
2837
}
2838
// ANIMATION:
2840
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2841
// the transformation is set on the active state and it get reset on the checked state.
2842
radio:not(:checked):active {
2843
// -gtk-icon-transform: scale(0);
2844
}
2845
// Otherwise, treeview.view styling will be applied...
2847
treeview.view check,
2848
treeview.view radio {
2849
padding: 0;
2850
color: hint($on-surface);
2851
&:checked,
2853
&:indeterminate {
2854
color: $primary;
2855
}
2856
&:disabled {
2858
color: disabled-hint($on-surface);
2859
}
2860
&,
2862
&:hover,
2863
&:selected,
2864
&:selected:hover {
2865
box-shadow: none;
2866
background-color: transparent;
2867
}
2868
}
2869
treeview.view radio:checked {
2871
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2872
border-image: none;
2873
}
2874
/**
2876
* GtkScale
2877
*/
2878
scale {
2880
// sizing
2881
$_marks_length: 8px;
2882
$_marks_distance: 7px;
2883
$trough_size: 2px;
2885
$finetune_trough_size: 4px;
2886
$slider_size: 32px;
2888
$slider_margin: -($slider_size - $trough_size) / 2;
2890
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2891
$color_slider_margin: -($slider_size) * 3 / 4;
2893
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2894
min-height: $trough_size;
2896
min-width: $trough_size;
2897
&.horizontal {
2899
padding: ($medium-size - $trough_size) / 2 12px;
2900
}
2901
&.vertical {
2903
padding: 12px ($medium-size - $trough_size) / 2;
2904
}
2905
// the slider is inside the trough, so to have make it bigger there's a negative margin
2907
slider {
2908
min-height: $slider_size;
2909
min-width: $slider_size;
2910
margin: $slider_margin;
2911
}
2912
// click-and-hold the slider to activate
2914
&.fine-tune {
2915
&.horizontal {
2916
min-height: $finetune_trough_size;
2917
padding-top: ($medium-size - $finetune_trough_size) / 2;
2918
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2919
}
2920
&.vertical {
2922
min-width: $finetune_trough_size;
2923
padding-left: ($medium-size - $finetune_trough_size) / 2;
2924
padding-right: ($medium-size - $finetune_trough_size) / 2;
2925
}
2926
// to make the trough grow in fine-tune mode
2928
slider {
2929
margin: $finetune_slider_margin;
2930
}
2931
}
2932
// the backing bit
2934
trough {
2935
transition: background-color $duration $ease-out;
2936
outline: none;
2937
background-color: stroke($on-surface);
2938
&:disabled {
2940
background-color: disabled-stroke($on-surface);
2941
}
2942
}
2943
// the colored part of the backing bit
2945
highlight {
2946
transition: background-image $duration $ease-out;
2947
background-image: image($primary);
2948
&:disabled {
2950
background-color: $background;
2951
background-image: image(disabled-hint($on-surface));
2952
}
2953
}
2954
// this is another differently styled part of the backing bit, the most relevant use case is for example
2956
// in media player to indicate how much video stream as been cached
2957
fill {
2958
transition: background-color $duration $ease-out;
2959
background-color: stroke($on-surface);
2960
&:disabled {
2962
background-color: transparent;
2963
}
2964
}
2965
slider {
2967
transition: background-color $duration $ease-out,
2968
background-size $ripple-fade-out-duration $ease-out,
2969
background-image $ripple-fade-out-opacity-duration $ease-out;
2970
background-repeat: no-repeat;
2971
background-position: center;
2972
background-size: auto, 1000% 1000%;
2973
border-radius: 50%;
2974
color: $primary;
2975
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2977
&#{$class} {
2978
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2979
background-image:
2981
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2982
radial-gradient(circle, transparent 10%, transparent 0%);
2983
}
2984
}
2985
&:hover {
2987
background-color: overlay("hover", $primary);
2988
}
2989
&:focus {
2991
background-color: overlay("focus", $primary);
2992
}
2993
&:active {
2995
$_url: 'assets/scale-slider#{$asset-suffix}';
2996
transition: background-color $duration $ease-out,
2998
background-size 0ms,
2999
background-image 0ms;
3000
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3001
background-image:
3002
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3003
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3004
background-size: auto, 0% 0%;
3005
}
3006
}
3007
marks,
3009
value {
3010
color: hint($on-surface);
3011
}
3012
indicator {
3014
background-color: stroke($on-surface);
3015
color: transparent;
3016
}
3017
//marks margins
3019
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3020
(horizontal, bottom, bottom, top),
3021
(vertical, top, left, right),
3022
(vertical, bottom, right, left) {
3023
&.#{$scale_orient} marks {
3024
&.#{$marks_class} {
3025
margin-#{$marks_margin}: $_marks_distance;
3026
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3027
}
3028
}
3029
&.#{$scale_orient}.fine-tune marks {
3031
&.#{$marks_class} {
3032
margin-#{$marks_margin}: $_marks_distance - 1px;
3033
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3034
}
3035
}
3036
}
3037
&.horizontal {
3039
indicator {
3040
min-height: $_marks_length;
3041
min-width: 1px;
3042
}
3043
}
3044
&.vertical {
3046
indicator {
3047
min-height: 1px;
3048
min-width: $_marks_length;
3049
}
3050
}
3051
// *WARNING* scale with marks madness following
3053
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3055
@each $marks_class, $marks_infix in (
3056
".marks-before:not(.marks-after)": "-marks-before",
3057
".marks-after:not(.marks-before)": "-marks-after"
3058
) {
3059
&#{$dir_class}#{$marks_class} {
3060
slider {
3061
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3062
&#{$state_class} {
3063
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3064
background-image:
3066
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3067
radial-gradient(circle, transparent 10%, transparent 0%);
3068
}
3069
}
3070
&:active {
3072
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3073
background-image:
3075
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3076
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3077
}
3078
}
3079
}
3080
}
3081
}
3082
&.color {
3084
min-height: 0;
3085
min-width: 0;
3086
&.horizontal {
3088
padding: 0 0 12px 0;
3089
slider {
3091
&:dir(ltr), &:dir(rtl) { // specificity bump
3092
margin-bottom: $color_slider_margin;
3093
margin-top: $color_marks_slider_margin;
3094
}
3095
}
3096
}
3097
&.vertical {
3099
&:dir(ltr) {
3100
padding: 0 0 0 12px;
3101
slider {
3103
margin-left: $color_slider_margin;
3104
margin-right: $color_marks_slider_margin;
3105
}
3106
}
3107
&:dir(rtl) {
3109
padding: 0 12px 0 0;
3110
slider {
3112
margin-right: $color_slider_margin;
3113
margin-left: $color_marks_slider_margin;
3114
}
3115
}
3116
}
3117
}
3118
}
3119
/**
3121
* Progress bars
3122
*/
3123
progressbar {
3125
// sizing
3126
&.horizontal {
3127
trough,
3128
progress {
3129
min-height: $bar-size;
3130
}
3131
}
3132
&.vertical {
3134
trough,
3135
progress {
3136
min-width: $bar-size;
3137
}
3138
}
3139
// FIXME: insensitive state missing and some other state should be set probably
3141
color: hint($on-surface);
3142
font-size: smaller;
3143
trough {
3145
background-color: disabled-stroke($on-surface);
3146
}
3147
progress {
3149
background-color: $primary;
3150
}
3151
&.osd { // progressbar.osd used for epiphany page loading progress
3153
// min-width: $bar-size;
3154
// min-height: $bar-size;
3155
// background-color: transparent;
3156
trough {
3158
// background-color: transparent;
3159
}
3160
progress {
3162
// background-color: $primary;
3163
}
3164
}
3165
// makes the progress indicator disappear, when the fraction is 0
3167
trough.empty progress {
3168
all: unset;
3169
}
3170
}
3171
/**
3173
* Level Bar
3174
*/
3175
levelbar {
3177
&.horizontal {
3178
block {
3179
min-height: $bar-size;
3180
}
3181
&.discrete block {
3183
min-width: $medium-size;
3184
&:not(:last-child) {
3186
margin-right: 2px;
3187
}
3188
}
3189
}
3190
&.vertical {
3192
block {
3193
min-width: $bar-size;
3194
}
3195
&.discrete block {
3197
min-height: $medium-size;
3198
&:not(:last-child) {
3200
margin-bottom: 2px;
3201
}
3202
}
3203
}
3204
trough {
3206
}
3207
block {
3209
&.low {
3210
background-color: $warning;
3211
}
3212
&.high,
3214
&:not(.empty) {
3215
background-color: $primary;
3216
}
3217
&.full {
3219
background-color: $success;
3220
}
3221
&.empty {
3223
background-color: disabled-stroke($on-surface);
3224
}
3225
}
3226
}
3227
/**
3229
* Print dialog
3230
*/
3231
printdialog {
3233
paper {
3234
padding: 0;
3235
border: 1px solid divider($on-surface);
3236
background-clip: padding-box;
3237
background-color: $base;
3238
color: $on-surface;
3239
}
3240
.dialog-action-box {
3242
margin: 12px;
3243
}
3244
}
3245
/**
3247
* Frames
3248
*/
3249
frame > border,
3251
.frame {
3252
margin: 0;
3253
padding: 0;
3254
border: 1px solid divider($on-surface);
3255
border-radius: 0;
3256
box-shadow: none;
3257
background-clip: padding-box;
3258
background-color: $base;
3259
&.flat {
3261
border-style: none;
3262
background-color: transparent;
3263
}
3264
}
3265
// for backward compatibility
3267
frame.flat > border {
3268
border-style: none;
3269
background-color: transparent;
3270
}
3271
actionbar > revealer > box {
3273
padding: $container-padding;
3274
border-top: 1px solid divider($on-surface);
3275
// background-color: $base;
3276
button:not(.suggested-action):not(.destructive-action) {
3278
@extend %button-flat;
3279
}
3280
.linked:not(.vertical) > entry:not(:only-child) {
3282
border-radius: $corner-radius $corner-radius 0 0;
3283
}
3284
}
3285
scrolledwindow {
3287
viewport.frame { // avoid double borders when viewport inside scrolled window
3288
border-style: none;
3289
background-color: transparent;
3290
}
3291
// This is used when content is touch-dragged past boundaries.
3293
// draws a box on top of the content, the size changes programmatically.
3294
@at-root overshoot {
3295
&.top { @include overshoot(top); }
3296
&.bottom { @include overshoot(bottom); }
3298
&.left { @include overshoot(left); }
3300
&.right { @include overshoot(right); }
3302
}
3303
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3305
@at-root undershoot {
3306
// &.top { @include undershoot(top); }
3307
// &.bottom { @include undershoot(bottom); }
3309
// &.left { @include undershoot(left); }
3311
// &.right { @include undershoot(right); }
3313
}
3314
@at-root junction { // the small square between two scrollbars
3316
border-style: solid none none solid;
3317
border-width: 1px;
3318
border-color: divider($on-surface);
3319
// background-color: $background;
3320
&:dir(rtl) {
3322
border-style: solid solid none none;
3323
}
3324
}
3325
}
3326
// vbox and hbox separators
3328
separator {
3329
min-width: 1px;
3330
min-height: 1px;
3331
background-color: divider($on-surface);
3332
}
3333
%hide_separators {
3335
min-width: 0;
3336
min-height: 0;
3337
background-color: transparent;
3338
}
3339
/**
3341
* Lists
3342
*/
3343
list {
3345
border-color: divider($on-surface);
3346
// background-color: $base;
3347
row {
3349
padding: 2px;
3350
}
3351
}
3352
row {
3354
background-clip: padding-box;
3355
&.activatable {
3357
@extend %ripple;
3358
@include ink-color($on-surface, $hover-alt: true);
3359
@include list-item;
3360
// this is for indicathing which row generated a popover
3362
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3363
&.has-open-popup {
3364
background-color: overlay("activated", $on-surface);
3365
}
3366
}
3367
&:selected {
3369
background-color: $overlay-selected;
3370
@include ink-color($primary, $hover-alt: true);
3372
&.has-open-popup {
3374
background-color: overlay("activated", $primary, $background: $overlay-selected);
3375
}
3376
}
3377
}
3378
/**
3380
* App Notifications
3381
*/
3382
.app-notification {
3384
@extend %toolbar-osd;
3385
margin: 8px;
3386
button {
3388
@extend %button-flat;
3389
&.text-button:not(:disabled) {
3391
color: $primary;
3392
@include ink-color($primary);
3393
}
3394
}
3395
&.frame {
3397
border-style: none;
3398
}
3399
border {
3401
border-style: none;
3402
background-color: transparent;
3403
}
3404
}
3405
/**
3407
* Expanders
3408
*/
3409
expander {
3411
title > arrow {
3412
transition: all $duration $ease-out;
3413
min-width: 16px;
3414
min-height: 16px;
3415
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3416
&:checked {
3418
&:dir(ltr) {
3419
-gtk-icon-transform: rotate(-180deg);
3420
}
3421
&:dir(rtl) {
3423
-gtk-icon-transform: rotate(180deg);
3424
}
3425
}
3426
color: hint($on-surface);
3428
&:hover,
3430
&:active {
3431
color: $on-surface;
3432
}
3433
&:disabled {
3435
color: disabled-hint($on-surface);
3436
}
3437
}
3438
}
3439
/**
3441
* Calendar
3442
*/
3443
calendar {
3445
padding: 1px;
3446
border: 1px solid divider($on-surface);
3447
background-clip: padding-box;
3448
background-color: $base;
3449
color: $on-surface;
3450
&:disabled {
3452
color: disabled($on-surface);
3453
}
3454
&:selected {
3456
border-radius: $corner-radius + 1px;
3457
background-color: $overlay-selected;
3458
}
3459
&.header {
3461
border-style: none none solid;
3462
border-color: divider($on-surface);
3463
border-radius: 0;
3464
}
3465
&.button {
3467
border-radius: $corner-radius + 1px;
3468
color: hint($on-surface);
3469
&:hover {
3471
background-image: image(overlay("hover", $on-surface));
3472
}
3473
&:disabled {
3475
color: disabled-hint($on-surface);
3476
}
3477
}
3478
&.highlight {
3480
color: hint($on-surface);
3481
font-weight: 500;
3482
}
3483
&:indeterminate {
3485
color: disabled-hint($on-surface);
3486
}
3487
}
3488
/**
3490
* Dialogs
3491
*/
3492
// Message Dialog styling
3494
messagedialog {
3495
&.background {
3496
background-color: $surface;
3497
}
3498
.titlebar {
3500
min-height: $small-size;
3501
border-style: none;
3502
box-shadow: inset 0 1px highlight($surface);
3503
background-color: $surface;
3504
color: $on-surface;
3505
&:backdrop {
3507
background-color: $surface;
3508
color: hint($on-surface);
3509
}
3510
}
3511
&.csd { // rounded bottom border styling for csd version
3513
&.background {
3514
// bigger radius for better antialiasing
3515
border-bottom-left-radius: $corner-radius;
3516
border-bottom-right-radius: $corner-radius;
3517
}
3518
}
3519
// Hint text
3521
box.vertical > label + label {
3522
color: hint($on-surface);
3523
}
3524
.dialog-action-box {
3526
margin-top: -$container-padding;
3527
// padding: $container-padding;
3528
button {
3530
@extend %button-flat;
3531
&:not(:last-child) {
3533
margin-right: $container-padding;
3534
}
3535
&:not(:disabled) {
3537
color: $primary;
3538
@include ink-color($primary);
3539
}
3540
&.suggested-action:not(:disabled) {
3542
background-color: transparent;
3543
// color: $primary;
3544
// @include ink-color($primary);
3545
}
3546
&.destructive-action:not(:disabled) {
3548
background-color: transparent;
3549
color: $error;
3550
@include ink-color($error);
3551
}
3552
}
3553
}
3554
}
3555
filechooser {
3557
.dialog-action-box {
3558
border-top: 1px solid divider($on-surface);
3559
}
3560
#pathbarbox {
3562
border-bottom: 1px solid divider($on-surface);
3563
// background-color: $background;
3564
// The new folder button
3566
> stack > box > button {
3567
@extend %button-flat;
3568
border-radius: $circular-radius;
3570
}
3571
}
3572
}
3573
filechooserbutton:drop(active) {
3575
// box-shadow: none;
3576
}
3577
/**
3579
* Sidebar
3580
*/
3581
.sidebar {
3583
border-style: none;
3584
background-color: transparent;
3585
&:not(separator) {
3587
@at-root %sidebar_left,
3588
&:dir(ltr),
3589
&.left,
3590
&.left:dir(rtl) {
3591
border-right: 1px solid divider($on-surface);
3592
border-left-style: none;
3593
}
3594
@at-root %sidebar_right,
3596
&:dir(rtl),
3597
&.right {
3598
border-left: 1px solid divider($on-surface);
3599
border-right-style: none;
3600
}
3601
}
3602
list {
3604
// background-color: transparent;
3605
}
3606
paned & {
3608
&,
3609
&.left,
3610
&.right,
3611
&.left:dir(rtl),
3612
&:dir(rtl),
3613
&:dir(ltr) {
3614
border-style: none;
3615
}
3616
}
3617
}
3618
stacksidebar.sidebar {
3620
& {
3621
&:dir(ltr),
3622
&.left,
3623
&.left:dir(rtl) {
3624
list {
3625
@extend %sidebar_left;
3626
}
3627
}
3628
&:dir(rtl),
3630
&.right {
3631
list {
3632
@extend %sidebar_right;
3633
}
3634
}
3635
}
3636
+ separator.vertical,
3638
separator.horizontal {
3639
@extend %hide_separators;
3640
}
3641
list {
3643
padding: 4px;
3644
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3645
}
3646
row {
3648
min-height: 32px;
3649
padding: 0 8px - 6px;
3650
border-radius: $corner-radius;
3651
&:selected {
3653
background-color: overlay("activated", $primary);
3654
color: $primary;
3655
font-weight: 500;
3656
@include ink-color($primary, $hover-alt: true);
3657
}
3658
+ row {
3660
margin-top: 4px;
3661
}
3662
> label {
3664
padding-left: 6px;
3665
padding-right: 6px;
3666
}
3667
&.needs-attention > label {
3669
@extend %needs-attention;
3670
}
3671
}
3672
}
3673
separator.sidebar {
3675
background-color: divider($on-surface);
3676
&.selection-mode,
3678
.selection-mode & {
3679
// background-color: divider($on-primary);
3680
}
3681
}
3682
/**
3684
* File chooser
3685
*/
3686
// dim the sidebar icons, see bug #786613 for details on this oddity
3688
row image.sidebar-icon {
3689
transition: color $duration $ease-out;
3690
color: hint($on-surface);
3691
&:disabled {
3693
color: disabled-hint($on-surface);
3694
}
3695
}
3696
placessidebar.sidebar {
3698
> viewport.frame {
3699
border-style: none;
3700
background-color: transparent;
3701
}
3702
list {
3704
padding: (4px - 3px) 0 4px;
3705
}
3706
row {
3708
// Needs overriding of the GtkListBoxRow padding
3709
min-height: 32px;
3710
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3711
padding: 0;
3712
border-radius: $corner-radius;
3713
// Using margins/padding directly in the SidebarRow
3715
// will make the animation of the new bookmark row jump
3716
> revealer {
3717
padding: 0 8px;
3718
}
3719
&:selected {
3721
background-color: overlay("activated", $primary);
3722
color: $primary;
3723
font-weight: 500;
3724
@include ink-color($primary, $hover-alt: true);
3725
image.sidebar-icon {
3727
color: $primary;
3728
}
3729
}
3730
&:disabled {
3732
color: disabled($on-surface);
3733
}
3734
image.sidebar-icon {
3736
&:dir(ltr) {
3737
padding-right: 8px;
3738
}
3739
&:dir(rtl) {
3741
padding-left: 8px;
3742
}
3743
}
3744
label.sidebar-label {
3746
&:dir(ltr) {
3747
padding-right: 2px;
3748
}
3749
&:dir(rtl) {
3751
padding-left: 2px;
3752
}
3753
}
3754
@at-root button.sidebar-button {
3756
@extend %button-flat-basic;
3757
@extend %button-small;
3758
}
3759
&.sidebar-placeholder-row {
3761
background-color: overlay("hover", $on-surface);
3762
}
3763
&.sidebar-new-bookmark-row {
3765
color: $primary;
3766
image.sidebar-icon {
3768
color: $primary;
3769
}
3770
}
3771
}
3772
}
3773
placesview {
3775
.server-list-button {
3776
> image {
3777
-gtk-icon-transform: rotate(-.5turn);
3778
}
3779
&:checked > image {
3781
-gtk-icon-transform: rotate(0turn);
3782
}
3783
}
3784
// this selects the "connect to server" label
3786
> actionbar > revealer > box > label {
3787
padding-left: 8px;
3788
padding-right: 8px;
3789
}
3790
}
3791
/**
3793
* Paned
3794
*/
3795
paned {
3797
> separator {
3798
min-width: 1px;
3799
min-height: 1px;
3800
-gtk-icon-source: none; // defeats the ugly default handle decoration
3801
border-style: none; // just to be sure
3802
background-color: transparent;
3803
// workaround, using background istead of a border since the border will get rendered twice (?)
3804
background-image: image(divider($on-surface));
3805
background-size: 1px 1px;
3806
background-clip: content-box; // avoids borders image being rendered twice (?)
3807
&.wide {
3809
min-width: 6px;
3810
min-height: 6px;
3811
// background-color: $background;
3812
background-image: image(divider($on-surface)), image(divider($on-surface));
3813
background-size: 1px 1px, 1px 1px;
3814
}
3815
}
3816
&.horizontal > separator {
3818
background-repeat: repeat-y;
3819
&:dir(ltr) {
3821
margin: 0 -8px 0 0;
3822
padding: 0 8px 0 0;
3823
background-position: left;
3824
}
3825
&:dir(rtl) {
3827
margin: 0 0 0 -8px;
3828
padding: 0 0 0 8px;
3829
background-position: right;
3830
}
3831
&.wide {
3833
margin: 0;
3834
padding: 0;
3835
background-repeat: repeat-y, repeat-y;
3836
background-position: left, right;
3837
}
3838
}
3839
&.vertical > separator {
3841
margin: 0 0 -8px 0;
3842
padding: 0 0 8px 0;
3843
background-repeat: repeat-x;
3844
background-position: top;
3845
&.wide {
3847
margin: 0;
3848
padding: 0;
3849
background-repeat: repeat-x, repeat-x;
3850
background-position: bottom, top;
3851
}
3852
}
3853
}
3854
/**
3856
* GtkInfoBar
3857
*/
3858
infobar {
3860
border-style: none;
3861
&.action:hover > revealer > box {
3863
background-image: image(overlay("hover", $on-surface));
3864
}
3865
&.info > revealer > box,
3867
&.question > revealer > box {
3868
border-bottom: 1px solid divider($on-surface);
3869
// background-color: $base;
3870
button {
3872
@extend %button-flat;
3873
&.text-button:not(:disabled) {
3875
color: $primary;
3876
@include ink-color($primary);
3877
}
3878
}
3879
}
3880
&.warning > revealer > box {
3882
background-color: $warning;
3883
color: $on-warning;
3884
button.flat {
3886
color: $on-warning;
3887
@include ink-color($on-warning);
3888
}
3889
selection {
3891
}
3892
*:link {
3894
color: $on-warning;
3895
}
3896
}
3897
&.error > revealer > box {
3899
background-color: $error;
3900
color: $on-error;
3901
button.flat {
3903
color: $on-error;
3904
@include ink-color($on-error);
3905
}
3906
selection {
3908
}
3909
*:link {
3911
color: $on-error;
3912
}
3913
}
3914
// Remove ugly hard-coded padding
3916
button label {
3917
margin: 0 -4px;
3918
}
3919
}
3920
/**
3922
* Tooltips
3923
*/
3924
tooltip {
3926
&.background {
3927
// background-color needs to be set this way otherwise it gets drawn twice
3928
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3929
background-color: $tooltip;
3930
color: $on-tooltip;
3931
}
3932
// padding: 4px; /* not working */
3934
border-radius: $corner-radius;
3935
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3936
&:not(.csd):not(.unity-csd) {
3938
// border: 1px solid divider($on-surface);
3939
// border-radius: $corner-radius + 1px;
3940
}
3941
// FIXME: we need a border or tooltips vanish on black background.
3943
decoration {
3944
background-color: transparent;
3945
}
3946
> box {
3948
margin: -6px; // Remove hard-coded 6px margin
3949
min-height: 32px - 4px * 2;
3950
padding: 4px 8px;
3951
}
3952
.dim-label {
3954
color: hint($on-tooltip);
3955
}
3956
* {
3958
// workaround for Eclipse.
3959
// do not include any declaration here.
3960
}
3961
}
3962
/**
3964
* Color Chooser
3965
*/
3966
colorswatch {
3968
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3969
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3970
// applied to the overlay box.
3971
// base color corners rounding
3973
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3974
// sports a bigger radius.
3975
// nth-child is needed by the custom color strip.
3976
&.top {
3978
border-top-left-radius: $corner-radius + .5px;
3979
border-top-right-radius: $corner-radius + .5px;
3980
overlay {
3982
border-top-left-radius: $corner-radius;
3983
border-top-right-radius: $corner-radius;
3984
}
3985
}
3986
&.bottom {
3988
border-bottom-left-radius: $corner-radius + .5px;
3989
border-bottom-right-radius: $corner-radius + .5px;
3990
overlay {
3992
border-bottom-left-radius: $corner-radius;
3993
border-bottom-right-radius: $corner-radius;
3994
}
3995
}
3996
&.left,
3998
&:first-child:not(.top) {
3999
border-top-left-radius: $corner-radius + .5px;
4000
border-bottom-left-radius: $corner-radius + .5px;
4001
overlay {
4003
border-top-left-radius: $corner-radius;
4004
border-bottom-left-radius: $corner-radius;
4005
}
4006
}
4007
&.right,
4009
&:last-child:not(.bottom) {
4010
border-top-right-radius: $corner-radius + .5px;
4011
border-bottom-right-radius: $corner-radius + .5px;
4012
overlay {
4014
border-top-right-radius: $corner-radius;
4015
border-bottom-right-radius: $corner-radius;
4016
}
4017
}
4018
&.dark {
4020
color: $on-dark;
4021
}
4022
&.light {
4024
color: $on-light;
4025
}
4026
overlay {
4028
transition: $transition-shadow;
4029
box-shadow: $shadow-z1;
4030
&:drop(active),
4032
&:hover {
4033
box-shadow: $shadow-z3;
4034
}
4035
}
4036
&#add-color-button {
4038
border-radius: $corner-radius $corner-radius 0 0;
4039
color: $on-surface;
4040
&:only-child {
4042
border-radius: $corner-radius;
4043
}
4044
overlay {
4046
background-color: $surface;
4047
}
4048
}
4049
&:disabled {
4051
opacity: .5;
4052
overlay {
4054
box-shadow: none;
4055
}
4056
}
4057
row:selected & {
4059
}
4060
&#editor-color-sample {
4062
border-radius: $corner-radius + .5px;
4063
overlay {
4065
border-radius: $corner-radius;
4066
&:hover {
4068
// box-shadow: $shadow-z1;
4069
}
4070
}
4071
}
4072
}
4073
// colorscale popup
4075
colorchooser .popover.osd {
4076
transition: $transition-shadow;
4077
border-radius: $corner-radius;
4078
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4079
background-color: $surface;
4080
&:backdrop {
4082
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4083
}
4084
}
4085
/**
4087
* Misc
4088
*/
4089
// content view (grid/list)
4091
.content-view {
4092
// background-color: $background;
4093
&:hover {
4095
// -gtk-icon-effect: highlight;
4096
}
4097
rubberband,
4099
.rubberband {
4100
@extend %rubberband;
4101
}
4102
}
4103
.scale-popup {
4105
.osd & {
4106
// @extend %osd;
4107
// FIXME: quick hack, redo properly
4109
button.flat {
4110
}
4111
}
4112
// +/- buttons on GtkVolumeButton popup
4114
button {
4115
}
4116
}
4117
/**
4119
* Window Decorations
4120
*/
4121
decoration {
4123
transition: $transition-shadow;
4124
border-radius: $corner-radius $corner-radius 0 0;
4125
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4126
// FIXME rationalize shadows
4128
// this is used for the resize cursor area
4130
margin: 8px;
4131
&:backdrop {
4133
// the transparent shadow here is to enforce that the shadow extents don't
4134
// change when we go to backdrop, to prevent jumping windows.
4135
// The biggest shadow should be in the same order then in the active state
4136
// or the jumping will happen during the transition.
4137
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4138
}
4139
.maximized &,
4141
.fullscreen &,
4142
.tiled &,
4143
.tiled-top &,
4144
.tiled-right &,
4145
.tiled-bottom &,
4146
.tiled-left & {
4147
border-radius: 0;
4148
}
4149
.popup & {
4151
box-shadow: none;
4152
}
4153
// server-side decorations as used by mutter
4155
.ssd & {
4156
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4157
}
4158
.csd.popup & {
4160
border-radius: $corner-radius;
4161
box-shadow: $shadow-z4;
4162
}
4163
tooltip.csd & {
4165
border-radius: $corner-radius;
4166
box-shadow: none;
4167
}
4168
messagedialog.csd & {
4170
border-radius: $corner-radius;
4171
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4172
&:backdrop {
4174
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4175
}
4176
}
4177
.solid-csd & {
4179
margin: 0;
4180
padding: 2px;
4181
border-radius: 0;
4182
box-shadow: none;
4183
box-shadow: inset 0 1px highlight($titlebar);
4184
background-color: $titlebar;
4185
&:backdrop {
4187
background-color: $titlebar-backdrop;
4188
}
4189
}
4190
}
4191
// Window Close button
4193
button.titlebutton {
4194
border-radius: $circular-radius;
4195
.selection-mode & {
4197
}
4198
}
4199
// catch all extend :)
4202
.monospace {
4204
font-family: monospace;
4205
}
4206
/**
4208
* Touch Copy & Paste
4209
*/
4210
// touch selection handlebars for the Popover.osd above
4212
cursor-handle {
4213
color: $primary;
4214
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4215
&.top:dir(ltr),
4217
&.bottom:dir(rtl) {
4218
-gtk-icon-transform: rotate(90deg);
4219
}
4220
&.bottom:dir(ltr),
4222
&.top:dir(rtl) {
4223
-gtk-icon-transform: unset;
4224
}
4225
&.insertion-cursor:dir(ltr),
4227
&.insertion-cursor:dir(rtl) {
4228
padding-top: 6px;
4229
-gtk-icon-transform: rotate(45deg);
4230
}
4231
}
4232
// Decouple the font of context menus from their entry/textview
4234
.context-menu {
4235
font: initial;
4236
}
4237
// shortcut window keys
4239
.keycap {
4240
min-width: 28px - 8px * 2;
4241
min-height: 28px - 2px;
4242
margin-top: 2px;
4243
padding-bottom: 2px;
4244
padding-left: 8px;
4245
padding-right: 8px;
4246
border: solid 1px divider($on-surface);
4248
border-radius: $corner-radius + 1px;
4249
box-shadow: inset 0 -2px divider($on-surface);
4250
background-clip: padding-box;
4251
background-color: $surface;
4252
color: $on-surface;
4253
font-size: smaller;
4254
}
4255
// FIXME needs to be done widget by widget, this wildcard should really die
4257
:not(decoration):not(window):drop(active) {
4258
// caret-color: $primary;
4259
}
4260
// FIXME aggregate with buttons
4262
stackswitcher button.text-button {
4263
min-width: 100px;
4264
}
4265
// FIXME aggregate with buttons
4267
stackswitcher button.circular,
4268
stackswitcher button.text-button.circular {
4269
min-width: $medium-size;
4270
min-height: $medium-size;
4271
padding: 0;
4272
}
4273
/**
4275
* App Icons
4276
*/
4277
// Outline for low res icons
4279
.lowres-icon {
4280
// -gtk-icon-shadow: none;
4281
}
4282
// Drapshadow for large icons
4284
.icon-dropshadow {
4285
// -gtk-icon-shadow: none;
4286
}
4287
/**
4289
* Emoji
4290
*/
4291
popover.emoji-picker {
4293
padding: 0;
4294
entry {
4296
border-bottom: 1px solid divider($on-surface);
4297
border-image: none;
4298
border-radius: 0;
4299
box-shadow: none;
4300
background-color: transparent;
4301
}
4302
scrolledwindow {
4304
border-bottom: 1px solid divider($on-surface);
4305
}
4306
}
4307
button.emoji-section {
4309
margin: 4px;
4310
&:checked {
4312
background-color: overlay("activated", $primary);
4313
color: $primary;
4314
@include ink-color($primary);
4315
}
4316
&:not(:last-child) {
4318
margin-right: 0;
4319
}
4320
}
4321
popover.emoji-picker .emoji {
4323
min-width: 3em;
4324
min-height: 3em;
4325
padding: 0 8px;
4326
// font-size: larger;
4327
widget {
4329
transition: $transition;
4330
border-radius: $corner-radius;
4331
&:hover {
4333
background-color: overlay("hover", $on-surface);
4334
}
4335
}
4336
}
4337
popover.emoji-completion {
4339
padding: 8px 0;
4340
arrow {
4342
border: none;
4343
background: none;
4344
}
4345
.emoji-completion-row {
4347
min-height: $menuitem-size;
4348
padding: 0 12px;
4349
}
4350
.emoji:hover {
4352
background-color: overlay("hover", $on-surface);
4353
}
4354
}
4355